@charset "utf-8";

:root {
    /* ---- カラー設定 ---- */
    --clr-main: #FF0219;
    --clr-sub: #FFF2F2;
    --clr-or: #FC955A;
    --clr-lor: #FFF7F2;
    --clr-gr: #5DA355;  
    --clr-lgr: #FBFDEF;  
    --clr-bk: #111111;
    --clr-dgy: #999999;
    --clr-gy: #CCCCCC;
    --clr-lgy: #F9F9F9;
    --clr-wh: #FFFFFF;

    /* ---- font-family ---- */
    --fnt-Yugo: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
    --fnt-Yumin: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    --fnt-Hirago: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, YuGothic, 游ゴシック, "MS Pゴシック", "MS PGothic", sans-serif;
    --fnt-NS-JP: 'Noto Sans JP', sans-serif;
    --fnt-Arial: "Arial, Helvetica Neue", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    --fnt-Montserrat: 'Montserrat', sans-serif;

    /* ---- font-size ---- */
    /* https://min-max-calculator.9elements.com/ */ 
    --fs-100: clamp(1.875rem, 0.284rem + 7.95vw, 6.25rem); /* min 30px / max 100px */
    --fs-80: clamp(3.125rem, 2.443rem + 3.41vw, 5rem); /* min 24px / max 80px */
    --fs-50: clamp(1.5rem, 0.909rem + 2.95vw, 3.125rem); /* min 24px / max 50px */
    --fs-44: clamp(1.5rem, 1.083rem + 2.08vw, 2.75rem); /* min 24px / max 44px */
    --fs-38: clamp(1.375rem, 1.011rem + 1.82vw, 2.375rem); /* min 22px / max 38px */
    --fs-30: clamp(1.25rem, 1.042rem + 1.04vw, 1.875rem); /* min 20px / max 30px */
    --fs-26: clamp(1.125rem, 0.958rem + 0.83vw, 1.625rem); /* min 18px / max 26px */
    --fs-20: clamp(1rem, 0.917rem + 0.42vw, 1.25rem); /* min 16px / max 20px */
    --fs-18: clamp(1rem, 0.958rem + 0.21vw, 1.125rem); /* min 16px / max 18px */
    --fs-16: clamp(0.875rem, 0.833rem + 0.21vw, 1rem); /* min 14px / max 16px */
    --fs-14: clamp(0.813rem, 0.792rem + 0.1vw, 0.875rem); /* min 13px / max 14px */
    --fs-12: clamp(0.625rem, 0.583rem + 0.21vw, 0.75rem); /* min 10px / max 12px */
    --fs-10: clamp(0.625rem, 0.604rem + 0.1vw, 0.688rem); /* min 10px / max 11px */

    /* --fs-44: clamp(2.4rem, 1.673rem + 3.64vw, 4.4rem);
    --fs-30: clamp(2rem, 1.636rem + 1.82vw, 3rem);
    --fs-26: clamp(1.8rem, 1.509rem + 1.45vw, 2.6rem);
    --fs-20: clamp(1.6rem, 1.455rem + 0.73vw, 2rem);
    --fs-18: clamp(1.6rem, 1.527rem + 0.36vw, 1.8rem);
    --fs-16: clamp(1.4rem, 1.327rem + 0.36vw, 1.6rem);
    --fs-14: clamp(1.3rem, 1.264rem + 0.18vw, 1.4rem);
    --fs-12: clamp(1rem, 0.927rem + 0.36vw, 1.2rem);
    --fs-10: clamp(1rem, 0.964rem + 0.18vw, 1.1rem); */

}

/* ---- 基本設定 ---- */

*{
    box-sizing: border-box;
}

html.no-scroll{
    overflow: hidden;
}

body{
    font-size: var(--fs-16);
    font-family: var(--fnt-NS-JP);
    min-width: 1000px;
}

@media (max-width:768px){
    body{
        font-size: var(--fs-14);
        min-width: 320px;
    }
}

section{
    padding: 80px 0;
}

@media (max-width:768px){
    section{
        padding: 60px 0;
    }
}
@media (max-width:375px){
    section{
        padding: 40px 0;
    }
}

p{
    line-height: 1.7;
    letter-spacing: 0.7px;
    text-align: left;
}

p:empty{display: none;}


.txt_bld{
    font-weight: bold;
}

.txt_rd{
    color: var(--clr-main);
}

a:hover{
    color: var(--clr-main);
    transition: .3s;
}

a figure{
    overflow: hidden;
    display: flex;
    margin-bottom: 20px;
    isolation: isolate;
}

a figure img{
    transition: .3s;
}

a:hover figure img{
    transform: scale(1.05);
    transition: .3s;
}

figure + .txt{
    margin-top: 15px;
}

figure{
    display: flex;
    justify-content: center;
    align-items: center;
}

/* .thumbnail{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
} */

.thumbnail img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

b,strong{
    font-weight: bold;
}

/* figure > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
} */

/* dl{
    display: flex;
} */

.cl::after{
    content: "";
    display: block;
    clear: both;
}

/* flexbox */

.flex{
    display: flex;
    /* justify-content: space-between; */
}

.flex2,.flex3,.flex4{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.flex2 > *{
    width: calc(50% - 20px/2);
    margin-right: 20px;
}

.flex2 > *:nth-child(2n){
    margin-right: 0;
}

.flex2 > *:nth-of-type(n+3){
    margin-top: 20px;
}

.flex3 > *{
    width: calc(33.3% - 40px/3);
    margin-right: 20px;
}

.flex3 >*:nth-child(3n){
    margin-right: 0;
}

.flex3 >*:nth-of-type(n+4){
    margin-top: 40px;
}

.flex4 > *{
    width: calc(25% - 60px/3);
    margin-right: 20px;
}

.flex4 >*:nth-child(4n){
    margin-right: 0;
}

.flex4 >*:nth-of-type(n+5){
    margin-top: 20px;
}

@media (max-width:768px){
    .flex2 > *,
    .flex3 > *,
    .flex4 > *{
        width: 100%;
        margin-right: 0;
    }

    .flex2 > *:nth-of-type(n+2),
    .flex3 > *:nth-of-type(n+2),
    .flex4 > *:nth-of-type(n+2){
        margin-top: 20px;
    }
}

/* コンテナ */

.container{
    max-width: 1140px;
    margin: 0 auto;
}

.container_sm{
    max-width: 800px;
    margin: 0 auto;
}

.block{
    margin-bottom: 60px;
}

.block:last-child{
    margin-bottom: 0;
}

.inner{
    margin-bottom: 40px;
}

.inner:last-child{
    margin-bottom: 0;
}

/* 背景色 */
.bg_rd{
    background: var(--clr-main);
}

.bg_gr{
    background: var(--clr-gr);
}

.bg_or{
    background: var(--clr-or);
}

.bg_gy{
    background: var(--clr-lgy);
}

.bg_pi{
    background: var(--clr-sub);
}

.bg_wh{
    background: var(--clr-wh);
}


@media (max-width:1139px){
    .container,
    .container_sm{
        max-width: 90%;
    }
}

@media (max-width:768px){
    .block{
        margin-bottom: 40px;
    }

    .container,
    .container_sm{
        min-width: 320px;
    }
}

/* 見出し */

.heading_lg{
    font-size: var(--fs-26);
    font-weight: bold;
    margin-bottom: 60px;
}

.heading_lg span{
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    font-size: var(--fs-26);
    color: var(--clr-main);
}

.heading_lg span::after{
    content: "";
    display: block;
    height: 1px;
    width: 270px;
    margin-left: 20px;
    background: var(--clr-main);
}

@media (max-width:768px){
    .heading_lg{
        margin-bottom: 30px;
    }
}

.heading_md{
    font-size: var(--fs-26);
    font-weight: bold;
    margin-bottom: 60px;
}

.heading_md::after{
    content: "";
    display: block;
    margin-top: 15px;
    height: 1px;
    width: 100%;
    background: linear-gradient(90deg, var(--clr-main) 0%, var(--clr-main) 200px, var(--clr-gy) 200px, var(--clr-gy) 100%);
}

.heading_sm{
    font-size: var(--fs-20);
    font-weight: bold;
    padding: 10px 0 10px 15px;
    border-left: 5px solid var(--clr-main);
    background: var(--clr-sub);
    margin-bottom: 40px;
}

@media (max-width:768px){
    .heading_lg{
        margin-bottom: 40px;
    }

    .heading_md{
        margin-bottom: 40px;
    }

    .heading_sm{
        margin-bottom: 20px;
    }
}


/* ボタン */
.bt_ec{
    background: var(--clr-main);
    color: var(--clr-wh) !important;
    padding: 5px 20px;
    border-radius: 100px;
}

.bt_ec:hover{
    background: var(--clr-or);
    transition: .3s;
}

.bt_ec i{
    margin-left: 5px;
    width: 14px;
    height: 14px;
}

.bt_arrow_rt_wh,
.bt_arrow_lt_wh{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.2);
    transition: .3s;
}

.bt_arrow_rt_wh{
    background: url(../images/icon/ic_arrow_rt_rd.svg) no-repeat center / 30%;
    background-color: var(--clr-wh);
}

.bt_arrow_lt_wh{
    background: url(../images/icon/ic_arrow_lt_rd.svg) no-repeat center / 30%;
    background-color: var(--clr-wh);
}

.bt_arrow_rt_wh:hover,
.bt_arrow_lt_wh:hover{
    transform: scale(1.4);
    transition: .3s;
}

.bt_box{
    width: 200px;
    border-radius: 3px;
    display: block;
    padding: 5px 0;
    font-weight: bold;
    text-align: center;
    transition: .3s;
    color: var(--clr-wh);
    background: url(../images/icon/ic_arrow_rt_wh.svg) no-repeat center right 10px / 6px;
    background-color: var(--clr-bk);    
}

.bt_box:hover{
    transition: .3s;
    color: var(--clr-wh);
    transform: scale(1.03);
}

.bt_box.bt_rd{
    background-color: var(--clr-main);
}

.bt_box.center{
    margin: 40px auto 0;
}

.bt_txt{
    font-size: var(--fs-18);
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.bt_txt::after{
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    margin: 0 5px;
    border-radius: 50%;
    background: url(../images/icon/ic_arrow_rt_rd.svg) no-repeat center / 30%;
    background-color: var(--clr-wh);
    border: 1px solid var(--clr-main);
    transition: .3s;
}

.bt_txt:hover:after{
    transform: translateX(5px);
    transition: .3s;
}

.bt_img{    
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-wh) !important;
    background: var(--clr-bk);
    height: 220px;
    font-size: var(--fs-30);
    font-weight: bold;
    text-align: center;
    position: relative;
    z-index: 100;
}

.bt_img > *{
    position: relative;
    z-index: 50;
}

.bt_img p{
    text-align: center;
}

.bt_img figure{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .3s;
    z-index: -20;
    opacity: .6;
    margin-bottom: 0;
    align-items: center;
}

.bt_img figure img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.bt_img i,
.bt_img i.ic_arrow_rt_wh{
    width: 36px;
    height: 36px;
    position: absolute;
    right: 30px;
    bottom: 20px;
    border: 1px solid var(--clr-wh);
    border-radius: 50%;
    padding: 10px;
    background-size: 30%;
}

.bt_pdf{
    display: block;
    max-width: 800px;
    width: 90%;
    margin: 40px auto 0;
    text-align: center;
    border: 2px solid var(--clr-main);
    border-radius: 5px;
    background: var(--clr-wh);
    color: var(--clr-main);
    padding: 10px 0;
}

.bt_pdf .ic_pdf{
    width: 16px;
    height: 16px;
    margin-right: 10px;
}

.bt_round{
    color: var(--clr-wh) !important;
    border-radius: 100px;
    background: url('../images/icon/ic_arrow_rt_wh.svg') no-repeat center right 20px / 10px;
    background-color: var(--clr-main);
    padding:15px 0;
    margin: 0 auto;
    text-align: center;
    display: block;
    width: 90%;
    max-width: 400px;
    transition: .3s;
}

.bt_round .txt_lg{
    font-size: var(--fs-26);
}

.bt_round:hover{
    transform: translateX(10px);
    transition: .3s;
}

@media (max-width:768px){
    .bt_arrow_rt_wh, .bt_arrow_lt_wh{
        width: 36px;
        height: 36px;
    }

    .bt_img{
        height: 140px;
    }

    .bt_img i,
    .bt_img i.ic_arrow_rt_wh{
        width: 20px;
        height: 20px;
    }
}

/* ---- アイコン ---- */

i{
    width: 10px;
    height: 10px;
    display: inline-block;
}
.ic_arrow_tp_gy{background: url(../images/icon/ic_arrow_tp_gy.svg) no-repeat center / contain;}
.ic_arrow_bt_gy{background: url(../images/icon/ic_arrow_bt_gy.svg) no-repeat center / contain;}
.ic_arrow_rt_gy{background: url(../images/icon/ic_arrow_rt_gy.svg) no-repeat center / contain;}
.ic_arrow_lt_gy{background: url(../images/icon/ic_arrow_lt_gy.svg) no-repeat center / contain;}
.ic_arrow_rt_wh{background: url(../images/icon/ic_arrow_rt_wh.svg) no-repeat center / contain;}
.ic_arrow_bt_rd{background: url(../images/icon/ic_arrow_bt_rd.svg) no-repeat center / contain;}
.ic_arrow_rt_rd{background: url(../images/icon/ic_arrow_rt_rd.svg) no-repeat center / contain;}
.ic_arrow_lt_rd{background: url(../images/icon/ic_arrow_lt_rd.svg) no-repeat center / contain;}
.ic_arrow_tp_rd{background: url(../images/icon/ic_arrow_tp_rd.svg) no-repeat center / contain;}
.ic_arrow_tp_wh{background: url(../images/icon/ic_arrow_tp_wh.svg) no-repeat center / contain;}
.ic_arrow_bt_wh{background: url(../images/icon/ic_arrow_bt_wh.svg) no-repeat center / contain;}
.ic_arrow_rt_wh{background: url(../images/icon/ic_arrow_rt_wh.svg) no-repeat center / contain;}
.ic_arrow_lt_wh{background: url(../images/icon/ic_arrow_lt_wh.svg) no-repeat center / contain;}
.ic_book_wh{background: url(../images/icon/ic_book_wh.svg) no-repeat center / contain;}
.ic_cart{background: url(../images/icon/ic_cart.svg) no-repeat center / contain;}
.ic_cart_wh{background: url(../images/icon/ic_cart_wh.svg) no-repeat center / contain;}
.ic_chat{background: url(../images/icon/ic_chat.svg) no-repeat center / contain;}
.ic_chat_rd{background: url(../images/icon/ic_chat_rd.svg) no-repeat center / contain;}
.ic_faq{background: url(../images/icon/ic_faq.svg) no-repeat center / contain;}
.ic_info{background: url(../images/icon/ic_info.svg) no-repeat center / contain;}
.ic_pdf{background: url(../images/icon/ic_pdf.svg) no-repeat center / contain;}
.ic_question{background: url(../images/icon/ic_question.svg) no-repeat center / contain;}
.ic_question_rd{background: url(../images/icon/ic_question_rd.svg) no-repeat center / contain;}
.ic_search{background: url(../images/icon/ic_search.svg) no-repeat center / contain;}
.ic_tablink{background: url(../images/icon/ic_tablink.svg) no-repeat center / contain;}
.ic_mail{background: url(../images/icon/ic_mail.svg) no-repeat center / contain;}
.ic_mail_rd{background: url(../images/icon/ic_mail_rd.svg) no-repeat center / contain;}
.ic_support{background: url(../images/icon/ic_support.svg) no-repeat center / contain;}
.ic_ig{background: url(../images/icon/ic_ig.svg) no-repeat center / contain;}
.ic_ig_rd{background: url(../images/icon/ic_ig_rd.svg) no-repeat center / contain;}
.ic_ig_wh{background: url(../images/icon/ic_ig_wh.svg) no-repeat center / contain;}
.ic_fb{background: url(../images/icon/ic_fb.svg) no-repeat center / contain;}
.ic_fb_rd{background: url(../images/icon/ic_fb_rd.svg) no-repeat center / contain;}
.ic_fd{background: url(../images/icon/ic_fd.svg) no-repeat center / contain;}
.ic_post{background: url(../images/icon/ic_post.svg) no-repeat center / contain;}
.ic_post_rd{background: url(../images/icon/ic_post_rd.svg) no-repeat center / contain;}


/* ---- カテゴリ・タグ ---- */

.tag-items{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.tag-items > *{
    margin: 3px;
}

.tag-items > *:last-child{
    margin-right: 0;
}

.tag-item{
    display: inline-block;
    padding: 1px 15px;
    font-size: var(--fs-12);
    background: var(--clr-wh);
    border: 1px solid var(--clr-main);
    border-radius: 3px;
    color: var(--clr-main);
    transition: .3s;
}

.tag-item:hover{
    color: var(--clr-wh);
    background: var(--clr-main);
    transition: .3s;
}

.tag-item.tag_rd{
    background: var(--clr-main);
    color: var(--clr-wh);
}

.tag-item.tag_rd:hover{
    background: var(--clr-wh);
    color: var(--clr-main);
}

.tag-item.tag_or{
    background: var(--clr-or);
    border-color: var(--clr-or);
    color: var(--clr-wh);
}

.tag-item.tag_or:hover{
    background: var(--clr-wh);
    color: var(--clr-or);
}

.tag-item.tag_gr{
    background: var(--clr-gr);
    border-color: var(--clr-gr);
    color: var(--clr-wh);
}

.tag-item.tag_gr:hover{
    background: var(--clr-wh);
    color: var(--clr-gr);
}

.tag-item.tag_gy{
    background: var(--clr-wh);
    border-color: var(--clr-gy);
    color: var(--clr-gy);
}

.tag-item.tag_gy:hover{
    background: var(--clr-gy);
    color: var(--clr-wh);
}

/* ---- ヘッダー ---- */

header{
    border-bottom: 1px solid var(--clr-gy);
    position: sticky;
    top: 0;
    background: var(--clr-wh);
    z-index: 1000;
}

.header-wrap{
    display: flex;
    align-items: center;
}

.gnav{
    margin-left: auto;
}

.gnav a{
    display: block;
}

.gnav nav ul{
    display: flex;
}

.gnav nav > ul > li{
    margin-left: 20px;
}

.gnav nav > ul,
.gnav nav > ul > li > a{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
}

.gnav nav > ul > li{
    margin-left: 14px;
}

.gnav nav > ul > li > a > i{
    width: 14px;
    height: 14px;
    margin: 0 5px;
}

.gnav nav.gnav-util{
    padding-top: 20px;
}

.gnav nav.gnav-util .bt_round{
    background: none;
    background-color: var(--clr-main);
    padding: 3px 10px;
}

.gnav nav.gnav-util a{
    font-size: var(--fs-14);
}

.gnav nav.gnav-main{
    font-weight: bold;
}

.gnav nav.gnav-main > ul > li > a{
    padding: 20px 0;
    position: relative;
    display: inline-block;
    text-decoration: none;
}

.gnav nav.gnav-main > ul > li > a[href*="void(0)"]:hover{
    color: var(--clr-bk) !important;
}

.gnav nav.gnav-main > ul > li > a::before{
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 4px;
    background: var(--clr-main);
    transform: scale(0, 1);
    transform-origin: left top;
    transition: transform .3s;
}

.gnav nav.gnav-main > ul > li > a:hover::before{
    transform: scale(1, 1);
}

.gnav-child{
    padding: 20px 0;
}

/* gnav　第二階層 */

.gnav-child{
    display: none;
    position: absolute;
    left: 0;
    width: 100%;
    background: var(--clr-lgy);
    padding: 40px 0;
}

.gnav-child .gnav-heading{
    font-size: var(--fs-18);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.gnav-child .gnav-heading::after{
    content: "";
    display: block;
    height: 1px;
    width: 40%;
    max-width: 200px;
    background: var(--clr-gy);
    margin-left: 20px;
}

.gnav-child .gnav-heading a{
    font-size: var(--fs-14);
    font-weight: normal;
    margin-left: 10px;
    display: flex;
    align-items: center;
}

.gnav-child .gnav-heading a::after{
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid var(--clr-main);
    background: url(../images/icon/ic_arrow_rt_rd.svg) no-repeat center / 30%;
    padding: 7px;
    margin-left: 7px;
}

.gnav-child ul li{
    flex: 1;
}

.gnav-child li + li{
    margin-left: 20px;
}

.gnav-brand ul li{
    max-width: calc(25% - 60px/4);
}

.gnav-product ul li{
    max-width: calc(20% - 80px/5);
}

.gnav-image figure{
    border: none;
    border-radius: 10px;
}

.gnav-image img{
    width: 100%;
    height: 140px;
    object-fit: cover;
}

.gnav-image p{
    text-align: center;
    background: url(../images/icon/ic_arrow_rt_rd.svg) no-repeat right 10px top 5px;
    font-size: var(--fs-14);
    padding-right: 20px;
}

/* gnav 第三階層 */

.gnav-child li ul{
    flex-direction: column;
}

.gnav-child li ul li{
    margin: 0 0 20px 0;
    background: url(../images/icon/ic_arrow_rt_rd.svg) no-repeat right 10px top 5px;
}


.gnav-investor ul ul ul{
    padding-left: 20px;
    margin-top: 10px;
}

.gnav-investor ul ul ul li{
    margin-bottom: 10px;
    font-weight: normal;
}

/* ---- ドロワーー ---- */

.bt_drawer{
    display: none;
}

@media (max-width:768px){
    .bt_drawer{
        display: block;
        margin-left: auto;
        margin-top: 5px;
        cursor: pointer;
        position: relative;
        height: 40px;
        width: 40px;
    }

    .bt_drawer p{
        font-size: var(--fs-10);
        font-family: var(--fnt-Arial);
        letter-spacing: 1px;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .bt_drawer span{
        display: block;
        width: 35px;
        height: 2px;
        background: var(--clr-bk);
        transition: .2s;
        margin: 0 auto;
        border-radius: 10px;
    }

    .bt_drawer span + span{
        margin-top: 7px;
    }

    .bt_drawer.active span + span{
        position: absolute;
        top: 30%;
        left: 50%;
        transform: translate(-50%,-30%) rotate(45deg);
        margin: 0 !important;
        width: 30px;
    }

    .bt_drawer.active span:first-of-type{
        opacity: 0;
        transform: translateY(20px);
        transition: .2s;
    }

    .bt_drawer.active span:nth-of-type(2){
        transform: translate(-50%,-30%) rotate(-45deg);
    }

    .header-wrap .logo{
        width: auto;
        max-width: 140px;
    }

    .header-wrap{
        padding: 8px 0;
    }

    .gnav{
        height: 100vh;
        width: 100vw;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 100;
        transition: all .3s;
        overflow-x: hidden;
        width: 0;
    }

    .gnav.active{
        width: 100vw;
    }

    .gnav-inner{
        display: flex;
        flex-direction: column;
        overflow-y: scroll;
        width: 100%;
        height: 100%;
        padding: 30px 20px;
        background: var(--clr-wh);
        right: -100vw;
        transition: all .7s;
        max-width: 400px;
        min-width: 320px;
        position: absolute;
    }

    .gnav-inner.active{
        right: 0;
        transition: .7s;
    }

    .gnav-overlay{
        content: "";
        display: none;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.7);
        position: absolute;
        top: 0;
        right: -100vw;
        z-index: -50;
    }

    .gnav-overlay.active{
        right: 0;
    }
    
    .gnav-main{
        order: 1;
    }

    .gnav-main > ul{
        flex-direction: column;
    }

    .gnav nav.gnav-main > ul > li > a:hover{
        color: initial;
    }

    .gnav nav.gnav-main > ul > li > a::before{
        transform: scale(0) !important;
    }

    .gnav-util{
        order: 2;
        margin-bottom: 80px;
    }

    .gnav-util ul{
        flex-wrap: wrap;
    }

    .gnav-util li{
        width: 100% !important;
        margin: 10px 0 !important;
    }


    .gnav-util li:not(.gnav-ec) a{
        width: 100%;
        display: block;
        padding: 10px 5px;
        border: 1px solid var(--clr-gy);
        text-align: center;
    }

    .gnav-util li.gnav-ec{
        width: 100%;
    }

    .gnav-util li.gnav-ec a{
        justify-content: center;
    }

    .gnav .gnav-main > ul > li{
        width: 100%;
        margin-left: 0;
        border-bottom: 1px solid var(--clr-gy);
    }

    .gnav-trigger > a{
        display: flex !important;
        justify-content: space-between !important;
    }

    .gnav-trigger > a::after{
        content: "";
        display: block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 1px solid var(--clr-main);
        background: url(../images/icon/ic_plus_rd.svg) no-repeat center / 60%;
        transition: .3s;
    }

    .gnav-trigger.active > a::after{
        transform: rotate(45deg);
        transition: .3s;
    }

    /* gnav　第二階層 */

    .gnav-heading::after{
        width: 20%;
    }

    .gnav-child{
        position: relative;
        margin-bottom: 20px;
        padding: 20px 0;
        top: 0 !important;
    }

    .gnav-child .container{
        min-width: auto;
    }

    .gnav-child .gnav-heading{
        flex-wrap: wrap;
    }

    .gnav-child .gnav-heading::after{
        margin: 20px 0 0 0;
        width: 100%;
    }

    .gnav-child ul{
        flex-wrap: wrap;
    }

    .gnav-child ul li + li{
        margin-left: 10px;
    }

    .gnav-child ul li.gnav-image{
        flex: unset;
        width: calc(50% - 5px);
        max-width: unset;
        margin-top: 10px;
        margin-bottom: 10px;
        text-align: left;
    }

    .gnav-child ul li.gnav-image img{
        height: 80px;
    }

    .gnav-child ul li.gnav-image:nth-of-type(odd){
        margin-left: 0;
    }

    .gnav-child ul li.gnav-image figure{
        margin-bottom: 5px;
    }

    .gnav-child ul li.gnav-image p{
        background: none;
        padding-right: 0;
    }

    /* gnav　第三階層 */

    .gnav-company ul ul{
        margin-top: 20px;
    }

    .gnav-company ul li:not(.gnav-image){
        margin-left: 0;
    }

    .gnav-investor ul{
        flex-wrap: wrap;
    }
    
    .gnav-investor ul li{
        width: 100%;
        flex: unset;
        margin-left: 0 !important;
    }

    @media (max-width:540px){
        .gnav-child ul li.gnav-image p{
            font-size: var(--fs-14);
        }
    }
}

/* ---- フッター ---- */

.footer-util{
    background: var(--clr-sub);
    padding: 40px;
}

.footer-heading{
    font-family: var(--fnt-Arial);
    font-size: var(--fs-26);
    font-weight: bold;
    color: var(--clr-main);
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}

.footer-heading::after{
    content: "";
    display: block;
    height: 1px;
    width: 270px;
    margin-left: 20px;
    background: var(--clr-main);
}

.footer-util li{
    height: 200px;
    background: var(--clr-wh);
}

.footer-util li a{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.footer-util li p{
    font-size: var(--fs-18);
    font-weight: bold;
    margin-top: 10px;
}

.footer-tel span{
    color: var(--clr-main);
    font-size: var(--fs-30);
    font-family: var(--fnt-Arial);
    font-weight: bold;
}

.footer-tel small{
    font-size: var(--fs-12);
}

.footer-pagetop{
    width: 100%;
    text-align: right;
    font-size: var(--fs-18);
    font-family: var(--fnt-Arial);
    color: var(--clr-main);
}

.footer-main{
    padding: 40px 0 40px;
}

.footer-pagetop i{
    margin-right: 20px;
    width: 16px;
    height: 16px;
}

.footer-wrap{
    display: flex;
    align-items: flex-start;
    margin-top: 40px;
}

.footer-logo{
    margin-bottom: 20px;
}

.footer-name{
    font-size: var(--fs-18);
    font-weight: bold;
}

.footer-company{
    margin-right: 80px;
}

.footer-nav{
    width: 70%;
}

.footer-nav nav{
    display: flex;
    justify-content: space-between;
}

.footer-nav nav ul + ul{
    margin-left: 40px;
}

.footer-nav ul p{
    font-weight: bold;
    margin-bottom: 10px;
}

.footer-nav ul.footer-has-child a{
    padding-left: 15px;
}

.footer-nav ul li{
    margin-bottom: 10px;
}

.footer-company > *{
    margin-bottom: 15px;
}

.footer-sns img{
    width: 30px;
    margin-right: 15px;
}

.footer-cr{
    font-family: var(--fnt-Montserrat);
    font-size: var(--fs-10);
    letter-spacing: 1px;
    background: var(--clr-main);
    color: var(--clr-wh);
    padding: 10px 0;
}

.footer-cr p{
    text-align: center;
}

@media (max-width:768px){

    .footer-pagetop{
        text-align: center;
    }

    .footer-util li{
        width: 100%;
        height: 140px;
        margin: 0;
    }

    .footer-util li + li{
        margin-top: 20px;
    }

    .footer-util li img{
        width: 8vw;
    }

    .footer-util li p{
        margin-top: 0;
    }

    .footer-wrap{
        flex-direction: column;
        width: 70%;
        margin: 40px auto 0;
    }

    .footer-company{
        margin: 0 0 40px 0;
    }

    .footer-nav{
        width: 100%;
    }

    .footer-nav nav{
        flex-wrap: wrap;
    }

    .footer-nav ul{
        width: calc(50% - 10px);
    }

    .footer-nav nav ul + ul{
        margin-left: 20px;
    }

    .footer-nav nav ul:nth-of-type(odd){
        margin-left: 0;
    }

    .footer-nav ul:nth-of-type(-n+2){
        margin-bottom: 20px;
    }

    .footer-nav ul.footer-has-child a{
        padding-left: 0;
    }

}

/* ---- ユーティリティー ---- */

.on-sp{
    display: none;
}

.on-pc{
    display: block;
}

@media (max-width:768px){
    .on-sp{
        display: block;
    }
    .on-pc{
        display: none;
    }
}

.list-item_num{
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dotted var(--clr-gy);
}

.list-item_num:last-of-type{
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.list-item_num .num{
    display: flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-18);
    font-weight: bold;
    color: var(--clr-wh);
    background: var(--clr-main);
    margin-right: 10px;
}

.list-item_num >*:not(.num){
    width: calc(100% - 40px);
}

.list_table dl{
    border-top: 1px solid var(--clr-gy);
    display: flex;
}

.list_table dl:last-of-type{
    border-bottom: 1px solid var(--clr-gy);
}

.list_table dt,
.list_table dd{
    padding: 20px;
}

.list_table dt{
    font-weight: bold;
    width: 270px;
    background: var(--clr-lgy);
}

.list_table dd{
    width: calc(100% - 270px);
}

.list-item_check{
    padding-left: 20px;
    background: url(../images/icon/ic_check_rd.svg) no-repeat center left 0 / 10px;
}

.list_box .name{
    font-weight: bold;
}

.list_box a figure{
    border: 1px solid var(--clr-gy);
    margin-bottom: 10px;
}

.list_box{
    display: flex;
    flex-wrap: wrap;
}

.list-item_box{
    width: calc(33.33% - 40px/2);
    margin-right: 20px;
}

.list-item_box:nth-of-type(3n){
    margin-right: 0;
}

.list-item_box:nth-of-type(n+4){
    margin-top: 40px;
}

.list-item_card{
    border-radius: 5px;
    box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.2);
    background: var(--clr-wh);
}

.list-item_card > a{
    padding: 15px;
    display: block;
}

.list-item_card > a > *{
    margin-bottom: 7px;
}

.list-item_card > a > *:last-child{
    margin-bottom: 0;
}

.list-item_card .name{
    font-size: var(--fs-16);
    font-weight: bold;
}

.list-item_card p:not(.name){
    font-size:var(--fs-14);
    color: var(--clr-bk) !important;
    display: flex;
    align-items: center;
}

.list-item_card p:not(.name) small{
    margin-right: 10px;
}

.list-item_card p:not(.name) span{
    display: inline-block;
    border: 1px solid var(--clr-bk);
    border-radius: 2px;
    padding: 2px 5px;
    margin-right: 5px;
}

.list-item_row{
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--clr-gy);
}

.list-item_row:last-child{
    margin-bottom: 0;
}


@media (max-width:768px){
    .list_table dl{
        flex-direction: column;
    }

    .list_table dt,
    .list_table dd{
        width: 100%;
    }

    .list-item_box{
        width: calc(50% - 20px/2);
    }

    .list-item_box:nth-of-type(3n){
        margin-right: auto;
    }

    .list-item_box:nth-of-type(2n){
        margin-right: 0;
    }

    .list-item_box:nth-of-type(n+3){
        margin-top: 30px;
    }

    .list_product img{
        margin-bottom: 10px;
    }

    .list_product .name{
        margin-bottom: 10px;
    }
}

/* ---- swiper基本設定ー ---- */

.swiper-scrollbar{
    position: relative;
    margin-top: 10px;
    background-color: transparent;
}

.swiper-scrollbar{
    display: none;
}

.swiper-scrollbar::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    margin: auto;
    height: 1px;
    background-color: var(--clr-gy);
}

.swiper-scrollbar .drag {
    position: relative;
    height: 1px;
}

.swiper-scrollbar .drag::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 130px;
    height: 1px;
    margin: auto;
    background-color: var(--clr-bk);
}

.swiper-buttons{
    margin: 0 auto;
    width: 100%;
    max-width: 1140px;
    height: 0;
    position: absolute;
    z-index: 100;
    display: flex;
    justify-content: space-between;
}

.swiper-button-lock,
.swiper-button-next,
.swiper-button-prev{
    position: initial;
    display: initial;
    margin: 0;
}

.swiper-button-next:after,
.swiper-button-prev:after{
    display: none;
}

.swiper-pagination-wrap{
    max-width: 1140px;
    width: 100%;
    margin: 0;
    position: relative;
}

.swiper-pagination{
    display: flex;
    align-items: center;
    margin-top: 20px;
}

.swiper-pagination-bullet{
    display: block;
    height: 2px;
    background: var(--clr-gy);
    flex: 1;
    border-radius: initial;
}

.swiper-pagination-bullet-active{
    background: var(--clr-bk);
}

.swiper-news .swiper-slide time{
    font-weight: bold;
    margin-right: 15px;
}

.swiper-news .swiper-buttons{
    top: 23%;
    max-width: 1140px;
}

/* ---- swiperバリエーション ---- */

.swiper-main .swiper-slide{
    margin: 0 10px;
    width: calc(33.33% - 20px);
    max-width: 440px;
}

.swiper_lg{
    position: relative;
    margin-right: calc(50% - 50vw);
    margin-left: -40px;
}

.swiper_lg .swiper{
    position: unset;
    margin-left: 40px;
}

.swiper_lg .swiper-wrapper{
    margin-bottom: 40px;
}

.swiper_lg .swiper-slide .name{
    font-size: var(--fs-20);
    font-weight: bold;
    text-align: center;
}

@media (max-width:1140px){
    .swiper_lg{
        margin: 0;
    }

    .swiper_lg .swiper{
        margin-left: 0;
    }
}

@media (max-width:768px){
    .swiper-main .swiper-slide{
        margin: 0;
        width: 33.33%;
    }


    .swiper_lg{
        margin: 0 calc(50% - 50vw);
    }

    .swiper_lg .swiper{
        padding-left: 0;
    }

    .swiper_lg .swiper::before{
        display: none;
    }

    .swiper_lg .swiper-slide{
        max-width: unset;
    }

    .swiper_lg .swiper-wrapper{
        margin-bottom: 20px;
    }
}

@media (max-width:768px){
    .swiper-news .swiper-buttons{
        top: 20vw;
    }
}

.swiper-recipe{
    margin-bottom: 20px;
}

.swiper-recipe .swiper-slide{
    margin-bottom: 10px;
    height: auto;
}

/* ---- タブ設定 ---- */

.tab-btns{
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

.tab-btn{
    cursor: pointer;
    flex: 1;
    text-align: center;
    color: var(--clr-main);
    background: var(--clr-wh);
    border: 1px solid var(--clr-main);
    padding: 10px 0;
    position: relative;
    transition: .3s;
}

.tab-btn + .tab-btn{
    border-left: none;
}

.tab-btn.active{
    color: var(--clr-wh);
    background: var(--clr-main);
    transition: .3s;
}

.tab-btn.active::after{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 7.5px 0 7.5px;
    border-color: var(--clr-main) transparent transparent transparent;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -10px;
}

.tab-content {
    display:none;
}

.tab-content.active {
    display:block;
}

.search-box form{
    position: relative;
}

.search-box input[type="text"]{
    border: 1px solid var(--clr-gy);
    border-radius: 5px;
    padding: 7px;
    width: 100%;
    height: 50px;
}

.search-box input[type="text"]::placeholder{
    color: var(--clr-gy);
}

.search-box button{
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.search-box button img{
    width: 20px;
}


/* ===================================  */
/* モーダル */
.modal-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #333;
    opacity: .7;
    display: none;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
}

.modal-content {
    width: 90%;
    height: calc(90% - 60px);
    border: 1px solid #000;
    position: fixed;
    top: calc(50% + 60px);
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    display: none;
    z-index: 50;
}

.modal-content p {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    z-index: 10;
    font-size: 1.4rem;
}

.modal-content .pdfjs-iframe{
    position: absolute;
    width: 100%;
    height: 100%;
    border: none;
}

.modal-close {
    position: absolute;
    right: -30px;
    top: -30px;
    background: transparent;
    border-color: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFF;
    border-radius: 50%;
    font-size: 1.8rem;
}

.modal-close::before {
    content: "";
    width: 20px;
    height: 20px;
    background: url(../images/common/i_close.svg) no-repeat center / contain;
}

.modal-open {
    cursor: pointer;
}


.modal-overlay.open {
    display: block;
}

.modal-content.open {
    display: block;
}

@media (max-width:768px){
    .modal-content {
        width: 90%;
        height: calc(86% - 50px);
        top: calc(50% + 50px);
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .modal-close{
        right: 0;
        top: -40px;
    }
}