@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);
    /* display: flow-root; */

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

}

/*=======================================
header
=======================================*/
.header {
    position: fixed;
    inset: 0 0 auto;
    width: 100%;
    z-index: var(--header-z);

    .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;
        padding-top: clamp(16px, 30vw/19.2, 30px);
    }

    &.fixed {
        animation: mnavslide linear .3s 1;
        background: rgba(255, 255, 255, 0.8);
        height: clamp(70px, 90vw/19.2, 90px);

        .container {
            padding-block: 0;
        }

        .logo_mark {
            width: clamp(80px, 102vw/19.2, 102px);

        }

        .logo_type {
            display: none;
        }
    }

    @media (width>=768px) {
        .container {
            align-items: flex-start;
        }

        &.fixed {
            .container {
                align-items: center;
            }
        }
    }
}

@keyframes mnavslide {
    0% {
        top: -90px;
    }

    100% {
        top: 0;
    }
}

@-webkit-keyframes mnavslide {
    0% {
        top: -55px;
    }

    100% {
        top: 0;
    }
}

.header_logo {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1vw, 16px);


    .logo_mark {
        width: clamp(87px, 11.51vw, 221px);
        height: auto;
        line-height: 1;

    }

    .logo_type {
        width: clamp(125px, 16.4vw, 315px);
        height: auto;
        line-height: 1;

    }
}


.header_contact {
    text-align: left;
}

.tel_ti {
    margin-bottom: 0.35em;
    line-height: 1.1;
    font-size: var(--font-s);
}

.tel_txt {
    line-height: 1.1;
    font-family: var(--font-num);
    font-weight: 900;
    font-size: var(--font-lg);

    .tel_num {
        display: inline-block;
        margin-left: 0.25em;
        font-size: 1.25em;
    }
}

.tel_ico {
    display: none;
}

@media (width <=768px) {
    .tel_ico {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 48px;
        height: auto;
        aspect-ratio: 1;
        background: var(--base-color);

        border-radius: var(--base-radius);

        &>a {
            text-decoration: none;
            color: var(--light-tx-color);
            font-size: var(--font-lg);
        }
    }

    .tel_txt,
    .tel_ti {
        display: none;
    }
}


/*=======================================
footer
=======================================*/
.footer {
    background: var(--subcolor);
    text-align: left;
}
/*footer contact ------------------------*/
.footer_contact {
    background: var(--bg-color01);
    position: relative;
    z-index: 2;
    overflow: hidden;

    &::before {
        content: "";
        width: 80%;
        height: auto;
        aspect-ratio: 501/300;
        background: url(../img/common_img/contact_bg.png) center center no-repeat;
        background-size: cover;
        position: absolute;
        z-index: -1;

        transform: scale(-1, 1);
        right: -10%;
    }

    @media (width >=768px) {
        &::before {
            width: calc(calc(100% - var(--section-gap) - calc(var(--container-pd) * 2)) / 2);
            top: 50%;
            left: var(--container-pd);
            right: auto;
            transform: scale(1) translateY(-50%);
        }
    }
}

.footer_contact_tx {
    @media (width >=768px) {
        width: calc(50% - calc(var(--section-gap) / 2));
        margin-left: auto;
    }
}


.footer_tel {
    line-height: 1.1;
    font-family: var(--font-num);
    font-weight: 900;
    font-size: clamp(24px, 36vw/19.2, 36px);
    white-space: nowrap;

    .tel-link {
        font-size: 1.6em;
    }
}
/*footer info ------------------------*/
.footer_info_tx{
    display: flex;
    flex-direction: column;
    gap: 24px 40px;
    line-height: 1.8;
    @media (width >=768px) {
        flex-direction: row;
    }
}
.footer_info_tx p.info_tx a {
    color: #000;
}
.footer_logo{
    :is(img){
        width: clamp(100px,170vw/19.2,170px);
        height: auto;
    }
}


/*copyright ------------------------*/
.copyright {
    font-size: 12px;
    margin-top: 30px;
    @media (width >=768px) {
        text-align: right;
    }
}

/*=======================================
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;
    }
}


.ov_hidden {
    overflow: hidden;
}

/*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;
}

/*------------------------------------
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: clamp(24px, 50vw/19.2, 50px);
    text-align: left;

    .ti {
        line-height: 1.3;
        font-size: 24px;
        font-weight: 900;
    }

    .en {
        position: relative;
        margin-top: 0.25em;
        line-height: 1.3;
        font-family: var(--font-en);
        font-size: 22px;
        font-weight: 900;

        .tx {
            position: relative;
            z-index: 1;
            display: inline-block;
            background: linear-gradient(174deg, #c0c0c0 30%, #eee 50%, #b0b0b0 70%);
            color: transparent;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .shadow {
            position: absolute;
            top: 0;
            left: 0;
            display: inline-block;
            text-shadow: var(--tx-shadow-bl);
            z-index: 0;
        }
    }

    @media (width >=768px) {
        .ti {
            font-size: clamp(32px, 36vw/19.2, 36px);
        }

        .en {
            font-size: clamp(36px, 40vw/19.2, 40px);
        }
    }
}


/*=======================================
text
=======================================*/
.cts_p {
    text-align: left;
    line-height: 1.6;
    font-size: var(--font-base);

    /*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;
    }

    @media (width >=992px) {

        /*left → center*/
        &.l_cent {
            text-align: center;
        }

        /*center → left*/
        &.cent_l {
            text-align: left;
        }
    }
}

/*decoration -------------*/
/*bold*/
.tx_bold {
    font-weight: 700;
}

/*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);
}

/*emphasis -------------*/
.em_tx {
    font-weight: 900;
    color: var(--gold);
}

/*------------------------------------
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);
}

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

/*=======================================
parts
=======================================*/
/*------------------------------------
anchorlink
--------------------------------------*/
.anchor {
    scroll-margin-top: var(--header-h);
}

/*------------------------------------
table
--------------------------------------*/
/*table 変数*/
:root {
    --table-padding: 0.8em 1em;
    --table-bg: #fff;
    --table-border-color: #6d6d6d;
    --th-bg: #ececec;
}

/*sheet_basic -------------*/
.sheet_basic {
    width: 100%;
    border-collapse: collapse;
    border-top: 1px dotted #808080;
}
.sheet_basic tr th {
   white-space: nowrap; 
}

.sheet_basic tr th,
.sheet_basic tr td {
    border-bottom: 1px dotted #808080;
    padding: 10px;
    text-align: left;
}
.sheet_basic tr td br {
    display: block;
}
@media print,
screen and (min-width: 768px) {

    .sheet_basic tr th,
    .sheet_basic tr td {
        display: table-cell;
    }
.sheet_basic tr td br {
    display: none;
}
}

/*table_basic -------------*/
.table_basic {
    width: 100%;
    border-collapse: collapse;
    background: var(--table-bg);
    border: 1px solid var(--table-border-color);
    border-bottom: none;
    border-right: none;

    :where(th, td) {
        padding: var(--table-padding);
        border-bottom: 1px solid var(--table-border-color);
        border-right: 1px solid var(--table-border-color);
    }

    :where(th) {
        background: var(--th-bg);
    }
}

/*set -------------*/
.nowrap {
    white-space: nowrap;
}

tr.nowrap>th,
tr.nowrap>td {
    white-space: nowrap;
}

/*------------------------------------
pagetop
--------------------------------------*/
#pagetop {
    position: fixed;
    bottom: 0px;
    right: 0px;
    z-index: var(--pagetop-z);
}

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

.tel-link a:hover {
    opacity: 0.8;
}