@charset "UTF-8";
/*=======================================
container
=======================================*/
.container {
    width: 100%;
    padding-right: var(--container-pd);
    padding-left: var(--container-pd);
}
.section {
    max-width: var(--container-max);
    margin-right: auto;
    margin-left: auto;
    padding-top: var(--section-top);
    padding-bottom: var(--section-bottom);

    /*上スペースなし*/
    &.t_nospace {
        padding-top: 0;
    }
    /*下スペースなし*/
    &.b_nospace {
        padding-bottom: 0;
    }

    & + .section {
        padding-top: 0;
    }
}

/*=======================================
header
=======================================*/
.header_wrap {
    position: fixed;
    inset: 0 0 auto;
    background: var(--bg-color01);
    width: 100%;
    height: var(--header-h);
    z-index: var(--header-z);
}
.header_logo :is(img) {
    width: clamp(100px, 160vw/9.92, 160px);
    height: auto;
    transition: 0.2s;

    &:hover {
        opacity: 0.8;
    }
}
.header {
    height: 100%;
}
.header .container {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/*==========================
nav
==========================*/
/*toggle ================*/
.toggle {
    position: fixed;
    right: var(--container-pd);
    top: clamp(20px, 36vw/9.92, 36px);
    z-index: var(--toggle-z);
    transition: 0.2s;
    & > button {
        border: none;
    }
    /*hamburger -------------*/
    .hamburger {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        position: relative;
        width: var(--toggle-w);
        height: var(--toggle-all-h);
        padding: 0;
        background-color: transparent;
        outline: none;
        cursor: pointer;

        &::before {
            display: block;
            border-radius: var(--toggle-radius);
            width: var(--toggle-w);
            height: var(--toggle-h);
            position: absolute;
            top: 0;
            left: 0;
            background-color: var(--maincolor);
            box-sizing: border-box;
            -webkit-animation: navToggleOuter_reverse 0.5s;
            animation: navToggleOuter_reverse 0.5s;
            content: "";
            transition-duration: var(--toggle-duration);
            transition-property: transform;
        }

        &::after {
            display: block;
            position: absolute;
            border-radius: var(--toggle-radius);
            left: 0;
            bottom: 0;
            width: var(--toggle-w);
            height: var(--toggle-h);
            background-color: var(--maincolor);
            box-sizing: border-box;
            animation: navToggleInner_reverse var(--toggle-duration);
            content: "";
            transition-duration: var(--toggle-duration);
            transition-property: transform;
        }

        & > span {
            display: block;
            border-radius: var(--toggle-radius);
            width: var(--toggle-w);
            height: var(--toggle-h);
            background-color: var(--maincolor);
            box-sizing: border-box;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            transition-duration: var(--toggle-duration);
            transition-property: opacity;
        }

        /*open ---------*/
        &.hamburger_open {
            &::before {
                inset-block-start: 50%;
                -webkit-transform: rotate(45deg) translateY(-50%);
                transform: rotate(45deg) translateY(-50%);
            }

            &::after {
                width: var(--toggle-w);
                top: 50%;
                left: 1.5px;
                -webkit-transform: rotate(-45deg) translateY(-50%);
                transform: rotate(-45deg) translateY(-50%);
            }

            & > span {
                opacity: 0;
            }
        }

        /*削除 ---------*/
        @media (width >= 992px) {
            display: none;
        }
    }
}
/*wrap ---------*/
.mainnav {
    position: fixed;
    height: 100dvh;
    width: 100vw;
    inset: 0 auto auto 0;

    background: rgb(from var(--bg-color01) r g b / 0.6);
    backdrop-filter: blur(10px);
    display: none;
    opacity: 0;
    transform: translateY(-100%);
    transition-property: transform, opacity, display;

    transition-duration: 0.4s;
    /*transitionのあとに書く*/
    transition-behavior: allow-discrete;
    z-index: var(--nav-z);

    &.navopen {
        transform: translateY(0);
        display: block;
        opacity: 1;

        /*開始値を定義*/
        @starting-style {
            transform: translateY(-100%);
            opacity: 0;
        }
    }

    @media (width >= 992px) {
        transform: translateY(0);
        opacity: 1;
        display: block;
        position: static;
        height: auto;
        width: auto;
        background: transparent;
    }
}
.mainnav_wrap {
    height: 100%;
    width: 100%;
    display: grid;
    place-items: center;

    @media (width >= 992px) {
        display: contents;
    }
}

.nav_group {
    display: flex;
    flex-direction: column;
    gap: 24px;

    :is(a) {
        display: block;
        height: 100%;
        text-decoration: none;
        color: var(--maincolor);
        font-size: var(--font-l);
    }
    @media (width <= 992px) {
        &::before {
            content: "";
            width: 40vw;
            max-width: 240px;
            height: auto;
            aspect-ratio: 199 / 98;
            background: url(../img/common_img/nav_top.svg) center center no-repeat;
            display: block;
            opacity: 0.6;
            margin: 0 auto;
        }
        &::after {
            content: "";
            width: 44vw;
            max-width: 280px;
            height: auto;
            aspect-ratio: 220 / 103;
            background: url(../img/common_img/nav_btm.svg) center center no-repeat;
            display: block;
            opacity: 0.6;
            margin: 0 auto;
            transform: translateX(-8%);
        }
    }

    @media (width >= 992px) {
        flex-direction: row;
        justify-content: flex-end;
        gap: 40px;

        :is(a) {
            transition: 0.2s;
            position: relative;

            /* &::after{
                content: "";
                width: 1px;
                height: 1px;
                background:transparent;
                display: block;
                position: absolute;
                inset: auto auto -16px 50%;
                transform: translateX(-50%);
                transition: width 0.2s ease, width 0.2s ease;
            }

            &:hover {
                &::after{
                    width: 100%;
                    background: var(--subcolor);
                }
            } */
        }

        & > li a::after {
            content: "";
            width: 1px;
            height: 1px;
            background: transparent;
            display: block;
            position: absolute;
            inset: auto auto -16px 50%;
            transform: translateX(-50%);
            transition: width 0.3s ease, background 0.3s ease;
        }
        & > li a:hover {
            &::after {
                width: 100%;
                background: var(--subcolor);
            }
        }
    }
}

/*=======================================
footer
=======================================*/
.footer {
    background: var(--subcolor);
    text-align: left;
    padding-top: 40px;
    padding-bottom: 40px;
}
.footer_group {
    margin-bottom: 32px;
}
.footer_nav {
    :is(a) {
        color: var(--light-tx-color);
        text-decoration: none;
        transition: 0.2s;
        &:hover {
            opacity: 0.8;
        }
    }

    @media (width >= 992px) {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 24px;
    }
}
.f_nav_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 24px;

    & + .f_nav_list {
        margin-top: 16px;
        @media (width >= 992px) {
            margin-top: 0;
        }
    }
    &.sns {
        :is(a) {
            font-size: var(--font-xl);
        }
    }
}
/*copyright ------------------------*/
.copyright {
    font-size: clamp(1rem, 12vw/12, 1.2rem);
    text-align: center;
    color: var(--light-tx-color);
}

/*=======================================
layout
=======================================*/
/*align------------------------*/
/*right*/
.tx_right {
    text-align: right;
}
/*left*/
.tx_left {
    text-align: left;
}
/*center*/
.tx_cent {
    text-align: center;
}
/*center　→　left*/
.cent_l {
    text-align: center;
    @media (width >= 768px) {
        text-align: left;
    }
}
/*left　→　center*/
.l_cent {
    text-align: left;
    @media (width >= 768px) {
        text-align: center;
    }
}

/*非表示　------------------------*/
@media print, screen and (min-width: 768px) {
    .md_none {
        display: none;
    }
}
@media print, screen and (min-width: 1200px) {
    .pc_none {
        display: none;
    }
}
.sp_none {
    display: none;

    @media (width >= 768px) {
        display: inline-block;
    }
}

/*phbox------------------------*/
:root {
    --phbox-space: 32px;
}
.phbox_right {
    text-align: center;
    & img {
        max-width: 100%;
        height: auto;
    }

    & > a {
        display: block;
        & + * {
            margin-top: 16px;
        }
    }

    @media (width >= 768px) {
        float: right;
        margin-left: var(--phbox-space);
    }
}
.phbox_left {
    text-align: center;
    & img {
        max-width: 100%;
        height: auto;
    }

    & > a {
        display: block;
        & + * {
            margin-top: 16px;
        }
    }

    @media (width >= 768px) {
        float: left;
        margin-right: var(--phbox-space);
    }
}
.ov_hidden {
    overflow: hidden;
}

/*float------------------------*/
/*left*/
.float_left {
    float: left;
}
/*right*/
.float_right {
    float: right;
}
/*clearfix*/
.clearfix {
    display: flow-root;
}

/*margin------------------------*/
/*top*/
.margin_t08 {
    margin-top: 8px;
}
.margin_t16 {
    margin-top: 16px;
}
.margin_t24 {
    margin-top: 24px;
}
.margin_t32 {
    margin-top: 32px;
}
.margin_t40 {
    margin-top: 40px;
}
.margin_t48 {
    margin-top: 48px;
}
/*bottom*/
.margin_b08 {
    margin-bottom: 8px;
}
.margin_b16 {
    margin-bottom: 16px;
}
.margin_b24 {
    margin-bottom: 24px;
}
.margin_b32 {
    margin-bottom: 32px;
}
.margin_b40 {
    margin-bottom: 40px;
}
.margin_b48 {
    margin-bottom: 48px;
}
/*right*/
.margin_r08 {
    margin-right: 8px;
}
.margin_r16 {
    margin-right: 16px;
}
.margin_r24 {
    margin-right: 24px;
}
.margin_r32 {
    margin-right: 32px;
}
/*left*/
.margin_l08 {
    margin-left: 8px;
}
.margin_l16 {
    margin-left: 16px;
}
.margin_l24 {
    margin-left: 24px;
}
.margin_l32 {
    margin-left: 32px;
}

/*------------------------------------
spacer
--------------------------------------*/
.spacer {
    margin-top: clamp(32px, 48vw/13.66, 48px);
}
.spacer_s {
    margin-top: clamp(24px, 32vw/13.66, 32px);
}
.spacer_ss {
    margin-top: clamp(16px, 24vw/13.66, 24px);
}
.spacer_l {
    margin-top: clamp(48px, 56vw/13.66, 56px);
}

/*------------------------------------
card layout
--------------------------------------*/
/*card 変数*/
:root {
    --lay_gap_sp: 24px;
    --lay_gap_md: 36px;
}
/*1 →　2*/
.row_col2 {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: var(--lay_gap_sp);

    & > * {
        width: 100%;
    }

    @media (width >= 768px) {
        flex-direction: row;
        gap: var(--lay_gap_md);
        & > * {
            width: calc(50% - var(--lay_gap_md) / 2);
        }
    }
}
/*1 →　3*/
.row_col3 {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: var(--lay_gap_sp);

    & > * {
        width: 100%;
    }

    @media (width >= 768px) {
        flex-direction: row;
        gap: var(--lay_gap_md);
        & > * {
            width: calc(100% / 3 - var(--lay_gap_md) * 2 / 3);
        }
    }
}

/*1 → 2 → 4*/
.row_col4 {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: var(--lay_gap_sp);
    & > * {
        width: 100%;
    }

    @media (width >= 768px) {
        flex-direction: row;
        gap: var(--lay_gap_md);
        & > * {
            width: calc(50% - var(--lay_gap_md) / 2);
        }
    }
    @media (width >= 992px) {
        & > * {
            width: calc(25% - var(--lay_gap_md) * 3 / 4);
        }
    }
}

/*2*/
.row_sm2 {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lay_gap_sp);
    & > * {
        width: calc(50% - var(--lay_gap_sp) / 2);
    }
    @media (width >= 768px) {
        gap: var(--lay_gap_md);
        & > * {
            width: calc(50% - var(--lay_gap_md) / 2);
        }
    }
}

/*2→3*/
.row_sm2_lg3 {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lay_gap_sp);
    & > * {
        width: calc(50% - var(--lay_gap_sp) / 2);
    }
    @media (width >= 768px) {
        gap: var(--lay_gap_md);
        & > * {
            width: calc(50% - var(--lay_gap_md) / 2);
        }
    }
    @media (width >= 992px) {
        gap: var(--lay_gap_md);
        & > * {
            width: calc(calc(100% / 3) - var(--lay_gap_md) * 2 / 3);
        }
    }
}

/*------------------------------------
img layout
--------------------------------------*/
:root {
    --gold_space_sp: 24px;
    --gold_space_pc: 40px;
}

.ly_gold {
    display: flex;
    flex-direction: column;
    gap: var(--gold_space_sp) var(--gold_space_pc);

    /*※　下記指定ないときは設置の通りの順序 */
    /*▽　sを上にしたい ------*/
    &.s_top {
        .ly_gold_s {
            order: -1;
        }
    }
    /*▽　bを上にしたい ------*/
    &.b_top {
        .ly_gold_b {
            order: -1;
        }
    }

    @media (width >= 768px) {
        flex-direction: row;
        justify-content: space-between;

        .ly_gold_s {
            width: 50%;
            order: 0;
        }
        .ly_gold_b {
            width: calc(50% - var(--gold_space_pc));
            order: 0;
        }

        &.s_top {
            .ly_gold_s {
                order: 0;
            }
        }
        &.b_top {
            .ly_gold_b {
                order: 0;
            }
        }

        /*縦center*/
        &.align_cent {
            align-items: center;
        }
    }

    @media (width >= 992px) {
        .ly_gold_s {
            width: 38%;
        }
        .ly_gold_b {
            width: calc(62% - var(--gold_space_pc));
        }
    }
}

/*half-----------------*/
.ly_half {
    display: flex;
    flex-direction: column;
    @media (width >= 768px) {
        flex-direction: row;
        & > * {
            width: 50%;
        }
    }
}

/* -----------
layout set
----------- */
/*上下真ん中よせ*/
.justify_cent {
    @media (width >= 768px) {
        justify-content: center;
    }
}
/*縦まんなかよせ*/
.align_cent {
    @media (width >= 768px) {
        align-items: center;
    }
}

/*=======================================
title
=======================================*/
/*title-----------------*/
.title01 {
    margin-bottom: 1.6em;
    :is(span) {
        display: block;
    }
    .ja_tx {
        font-size: clamp(2.4rem, 36vw/12, 3.6rem);
        font-weight: 600;
        color: var(--maincolor);
    }
    .en_tx {
        font-size: clamp(1.6rem, 18vw/12, 1.8rem);
        line-height: 1;
        color: var(--subcolor);
    }
}
/* .title02 {
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 0.6em;
}
.title03 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.6em;
} */

.en_ti {
    color: var(--subcolor);
    font-size: clamp(3.2rem, 48vw/12, 4.8rem);
    font-family: var(--font-en);
    font-weight: var(--font-en-weight);
    line-height: 1;
}
/*=======================================
text
=======================================*/
.cts_p {
    text-align: left;
    line-height: 1.6;

    /*center*/
    &.tx_cent {
        text-align: center;
    }
    /*right*/
    &.tx_right {
        text-align: right;
    }
    /*space*/
    & + .cts_p {
        margin-top: 1em;
    }
    /*center → left*/
    &.cent_l {
        text-align: center;
    }

    /*em*/
    &.em_tx {
        font-size: var(--font-xl);
        font-weight: 700;
        color: var(--maincolor);
        /*space*/
        & + .cts_p {
            margin-top: 1.4em;
        }
    }

    @media (width >= 992px) {
        /*left → center*/
        &.l_cent {
            text-align: center;
        }
        /*center → left*/
        &.cent_l {
            text-align: left;
        }
    }
}
/*decoration -------------*/
/*bold*/
.tx_bold {
    font-weight: 600;
}

/*color -------------*/
/*color red*/
.tx_red {
    color: var(--error-color);
}
/*color mian*/
.tx_main {
    color: var(--maincolor);
}
/*color gray*/
.tx_gray {
    color: var(--gray);
}

/*size -------------*/
/*s size*/
.s_tx {
    font-size: var(--font-s);
}
.s_em {
    font-size: 0.8em;
}
/*l size*/
.l_tx {
    font-size: var(--font-l);
}
.l_em {
    font-size: 1.2em;
}

/*english -------------*/
.en_tx {
    font-family: var(--font-en);
    font-weight: var(--font-en-weight);
}

/*------------------------------------
attention
--------------------------------------*/
.attention {
    font-size: var(--font-s);
}

/*=======================================
img
=======================================*/
/*fluid */
.img_fluid {
    max-width: 100%;
    height: auto;
}
/*round*/
.img_round {
    border-radius: var(--base-radius);
}
/*hoverimg */
.hoverimg {
    transition: 0.2s;
    &:hover {
        opacity: 0.6;
    }
}

/*※画像の親要素に追加*/
.img_max {
    :is(img) {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }
}

/*=======================================
decoration
=======================================*/
/*background color -------------*/
.content_bg01 {
    background: var(--bg-color01);
}
.content_bg02 {
    background: var(--bg-color02);
}

/*Line -------------*/
hr.line_01 {
    height: 1px;
    clear: both;
    margin: 32px 0px;
    border: none;
    border-bottom: 1px dotted var(--border-color);
}

/*=======================================
parts
=======================================*/
/*------------------------------------
pagetop
--------------------------------------*/
#pagetop {
    position: fixed;
    bottom: 60px;
    right: var(--container-pd);
    z-index: var(--pagetop-z);

    & > a {
        display: grid;
        place-items: center;
        background: url(../img/common_img/pagetop.png) center center no-repeat;
        background-size: cover;
        font-family: var(--font-en);
        font-weight: var(--font-en-weight);
        line-height: 1;
        text-decoration: none;
        color: var(--maincolor);
        font-size: var(--font-l);
        width: clamp(60px, 74vw/12, 74px);
        height: auto;
        aspect-ratio: 74/65;
        padding-bottom: 0.4em;
    }
}

/*------------------------------------
tel
--------------------------------------*/
.tel-link a {
    text-decoration: underline;
    color: inherit;
}
.tel-link a:hover {
    opacity: 0.8;
}

/*==========================
modal
==========================*/
#modalBtn{
    cursor: pointer;
    &:hover{
        opacity: 0.8;
    }
}
/* モーダルの背景 */
.modal {
    display: none;
    position: fixed;
    z-index: var(--modal-overlay-z);
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: color-mix(in srgb, var(--black) 80%, transparent);
    backdrop-filter: blur(5px);
}

/* モーダルコンテンツ */
.modal-content {
    overflow-y: auto;
    background-color: var(--bg-white);
    padding:var(--inner-tb) calc(var(--inner-tb) / 2) var(--inner-tb) var(--inner-tb);
    width: min(90vw,960px);
    height: 90vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: var(--modal-z);
    border-radius: var(--base-radius);

    .modal_inner{
        width: 100%;
        height: 100%;
        padding-right: calc(var(--inner-tb) / 2);
        overflow-y: auto;
    }
}
.modal_close{
    position: absolute;
    z-index: var(--modal-inner-z);
    cursor: pointer;
    inset:8px 16px auto auto;
    transition: 0.2s;

    &>i{
        font-size: var(--font-xl);
        color: var(--black);
    }

    &:hover{
        opacity: 0.8;
    }
}