@charset "UTF-8";

/* ==========================================================================
   Imports
   ========================================================================== */
@import url("reset.css");
/* 丸ゴシック追加 */
@import url("https://fonts.googleapis.com/css2?family=Gilda+Display&family=Lato:wght@400;700&family=Montserrat:wght@400;500;600&family=Noto+Sans+JP:wght@400;500;700&family=Shippori+Mincho:wght@400;500;600&family=M+PLUS+Rounded+1c:wght@500&display=swap");

/* ==========================================================================
   Variables (from memo.md)
   ========================================================================== */
:root {
    /* ==== Colors ==== */
    --color-gray-100: #211c1c;
    --color-gray-200: #404040;
    --color-gray-300: #7b7473;
    --color-gray-400: #807979;
    --color-gray-500: #9f9a9a;
    --color-gray-600: #b7b3b3;
    --color-gray-700: #bfbcbc;
    --color-gray-800: #f5f5f3;
    --color-gray-900: #ffffff;
    --color-gray-pale: #645555;
    --color-red-100: #b85a43;

    /* ==== Font Families ==== */
    --font-family-sans-serif: 'Noto Sans JP', sans-serif;
    --font-family-serif: 'Shippori Mincho', serif;
    --font-family-vintage: 'Gilda Display', serif;
    --font-family-geometric: 'Montserrat', var(--font-family-sans-serif);
    --font-family-lato: 'Lato', sans-serif;
    --font-family-round: 'M PLUS Rounded 1c', sans-serif;

    /* ==== Font Sizes ==== */
    --font-size-body: 16px;
    --font-size-section-head-main: 72px;
    --font-size-section-head-main-sp: 48px;
    --font-size-section-head-sub: 18px;

    /* ==== Border Radius ==== */
    --border-radius-small: 10px;
    --border-radius-large: 13px;

    --header-height-pc: 135px;
    /* 45px + 45px + 45px */
    --header-height-sp: 55px;
    /* --header-height-sp: 103px; */
    /* 28px + 47px + 28px */

    /* ==== Layout Change Border Widths ==== */
    --breakpoint-sp-max: 768px;
    --breakpoint-pc-min: calc(var(--breakpoint-sp-max) + 1px);

}

/* ==========================================================================
   Base Styles
   ========================================================================== */
html{
    scroll-padding-top: var(--header-height-pc);
}
@media (max-width: 768px) {
    html{
        scroll-padding-top: var(--header-height-sp);
    }
}
body {
    /* 読込時の設定 */
    opacity: 0;
    transition: opacity .4s;
    
    font-family: var(--font-family-sans-serif);
    color: var(--color-gray-100);
    overflow-x: hidden;
}
body.is_loaded{
  opacity: 1;
}
* {
    box-sizing: border-box;
}

a {
    transition: opacity 0.3s;

    &:hover {
        opacity: 0.7;
    }
}
/* ==========================================================================
   Layout
   ========================================================================== */
main {
    display: block;
    min-height: 50vh;
}

.inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 4%;
}

.txt {
    font-size: var(--font-size-body);
    line-height: 2;
    color: var(--color-gray-100);
    font-family: var(--font-family-sans-serif);
}

/* ==========================================================================
   Utilities
   ========================================================================== */
/* PC用: 769px以上 */
@media (min-width: 769px) {
    .visible_pc {
        display: block !important;
    }

    .hidden_pc {
        display: none !important;
    }

    /* スマホ非表示 */
    .visible_sp {
        display: none !important;
    }

    .hidden_sp {
        display: block !important;
    }
}

/* スマホ用: 768px以下 */
@media (max-width: 768px) {
    .visible_sp {
        display: block !important;
    }

    .hidden_sp {
        display: none !important;
    }

    /* PC非表示 */
    .visible_pc {
        display: none !important;
    }

    .hidden_pc {
        display: block !important;
    }
}

/* ==========================================================================
   下層ページのページヘッダー
   ========================================================================== */
/* 画面幅769px以上1200px未満 */
.page_header {
    background: url('../../images/common/bg_pagehead.png') no-repeat center / cover;
    height: clamp(180px, 31vw, 400px);
    padding-top: var(--header-height-sp);
    display: flex;
    align-items: center;
    hgroup {
        p {
            font-size: clamp(40px, 6vw, 74px);
            font-family: var(--font-family-vintage);
            line-height: 1;
            color: var(--color-gray-400);
            font-weight: 400;
        }
        h1 {
            font-size: clamp(14px, 1.6vw, 16px);
            font-family: var(--font-family-serif);
            color: var(--color-gray-100);
            font-weight: 600;
        }
    }
}
/* 画面幅1200px以上 */
@media screen and (min-width:1200px){
    .page_header{
        padding-top: var(--header-height-pc);
    }
}
/* スマホ表示 */
@media screen and (max-width:768px) {
    .page_header {
        height: clamp(180px, 40vw, 260px);
        padding-top: var(--header-height-sp);
        hgroup p {
            font-size: 40px;
        }
        hgroup h1 {
            font-size: 11px;
        }
    }
}

/* ==========================================================================
   パンくずリスト
   ========================================================================== */
.breadcrumb {
    background-color: var(--color-gray-800);
    padding: 18px 0;

    .breadcrumb_list {
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        .breadcrumb_item {
            display: flex;
            align-items: center;
            font-size: 14px;

            &:not(:last-child)::after {
                content: '';
                display: inline-block;
                width: 1em;
                height: 1em;
                margin: 0 0.6em;
                background-color: currentColor;
                -webkit-mask: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'>\<path d='M522-480 333-669l51-51 240 240-240 240-51-51 189-189Z'/>\</svg>") no-repeat center / contain;
                mask: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'>\<path d='M522-480 333-669l51-51 240 240-240 240-51-51 189-189Z'/>\</svg>") no-repeat center / contain;
            }
        }
    }
}

@media screen and (max-width:768px) {
    .breadcrumb {
        padding: 16px 0;
        .breadcrumb_list {
            .breadcrumb_item {
                font-size: 12px;
            }
        }
    }
}

@media screen and (max-width:415px) {
    .breadcrumb {
        .breadcrumb_item {
            &:not(:first-of-type) {
                padding-top: 1em;
            }
        }
    }
}

/* ==========================================================================
   作業中です
   ========================================================================== */
.working{
    padding: 100px 0;
    font-size: 30px;
    text-align: center;

}