body{font-family:"游ゴシック体",YuGothic,"游ゴシック Medium","Yu Gothic Medium","游ゴシック","Yu Gothic",sans-serif;color:#332e29;background-color:#f2f8fb;}
html{scroll-behavior:smooth;scroll-padding-top:120px}

@media(max-width:768px){
    html{scroll-padding-top:75px}
}

.sponly{display:none}

@media(min-width:769px) and (max-width:1024px){
    .sponly{display:none}
}

@media(max-width:768px){
    .sponly{display:block}
}

.tabonly{display:none}

@media(min-width:769px) and (max-width:1024px){
    .tabonly{display:block}
}

@media(max-width:768px){
    .tabonly{display:none}
}

@media(min-width:769px) and (max-width:1024px){
    .pconly{display:none}
}

@media(max-width:768px){
    .pconly{display:none}
}

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

.inline{display:inline-block}

@media(max-width:768px){
    .inline{display:inline}
}

.js-fadeIn{opacity:0}

.js-fadeIn.active{
    opacity:1;
    -webkit-transition-duration:2s;
    transition-duration:2s
}

.js-fadeDelay--item,
.js-fadeDelay--item2,
.js-fadeDelay--item3,
.js-fadeDelay--item4,
.js-fadeDelay--item5{
    opacity:0;
    -webkit-transition:2s;
    transition:2s
}

.js-fadeDelay--item.active,
.js-fadeDelay--item2.active,
.js-fadeDelay--item3.active,
.js-fadeDelay--item4.active,
.js-fadeDelay--item5.active{
    opacity:1
}

/* ========================================
   共通見出し
======================================== */

.c-heading-h2{
    font-size:34px;
    font-size:clamp(19px,19px + 9*(100vw - 375px)/875,34px);
    line-height:1.53;
    margin-bottom:1.5em;
    font-weight:400
}

.c-heading-txt{
    font-size:15px;
    font-size:clamp(13px,13px + 2*(100vw - 375px)/875,15px);
    line-height:1.86
}

.c-heading-txt:not(:last-of-type){
    margin-bottom:1.5em
}

/* NEWS / FAQ / PRODUCTS 等の大見出し
   日本語表示用に変更 */
.c-heading-en{
    font-family:"游ゴシック体",YuGothic,"游ゴシック Medium","Yu Gothic Medium","游ゴシック","Yu Gothic",sans-serif;
    font-weight:800;
    font-size:38px;
    letter-spacing:.05em;
    line-height:1.3;
    margin-bottom:40px
}

@media(min-width:769px) and (max-width:1024px){
    .c-heading-en{
        font-size:34px
    }
}

@media(max-width:768px){
    .c-heading-en{
        font-size:26px;
        font-weight:800;
        line-height:1.4;
        text-align:center
    }
}

/* ========================================
   MAIN
======================================== */

.c-main{
    background-color:#f2f8fb;
    margin-top:112px;
    position:relative
}

@media(max-width:768px){
    .c-main{
        margin-top:74px
    }
}

.c-container{
    max-width:1140px;
    width:92%;
    margin-inline:auto
}

/* ========================================
   HEADER
======================================== */

.c-header{
    width:100%;
    /*height:112px;*/
    background-color:#fff;
    position:fixed;
    top:0;
    left:0;
    z-index:99;
    border-bottom:none !important;
}

@media(max-width:768px){
    .c-header{
        height:74px
    }
}

.c-header__container{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    gap:22px;
    height:100%
}

@media(max-width:768px){
    .c-header__gnav{
        width:100%;
        height:100%;
        position:fixed;
        top:74px;
        right:120%;
        z-index:990;
        background-color:#f2f8fb;
        -webkit-transition:.4s ease-in-out;
        transition:.4s ease-in-out;
        padding-top:30px
    }
}

.c-header__gnav.open{
    right:0
}

.c-header__gnavMenu{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:end;
    -ms-flex-pack:end;
    justify-content:flex-end
}

@media(max-width:768px){
    .c-header__gnavMenu{
        display:block;
        width:92%;
        margin-inline:auto
    }
}

.c-header__menu{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    gap:40px;
}

@media(min-width:769px) and (max-width:1024px){
    .c-header__menu{
        gap:42px
    }
}

@media(max-width:768px){
    .c-header__menu{
        -webkit-box-orient:vertical;
        -webkit-box-direction:normal;
        -ms-flex-direction:column;
        flex-direction:column;
        -webkit-box-align:start;
        -ms-flex-align:start;
        align-items:flex-start;
        gap:clamp(38px,8vw,40px);
        margin-bottom:60px
    }
}

.c-header__subMenu{
    display:none
}

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

.c-header__menuItem{
    font-family:"Josefin Sans",sans-serif;
    font-weight:400;
    font-size:18px;
    letter-spacing:.05em;
    line-height:1
}

@media(min-width:769px) and (max-width:1024px){
    .c-header__menuItem{
        font-size:16px
    }
}

@media(max-width:768px){
    .c-header__menuItem{
        font-size:40px
    }
}

.c-header__menuItem a{
    vertical-align:sub;
    -webkit-transition:.3s ease-in-out;
    transition:.3s ease-in-out;
    position:relative
}

.c-header__menuItem a::after{
    content:"";
    width:0;
    height:2px;
    background-color:#acacac;
    position:absolute;
    left:0;
    bottom:0;
    -webkit-transition:.3s ease-in-out;
    transition:.3s ease-in-out
}

.c-header__menuItem a:hover::after{
    width:100%
}

.c-header__subMenuItem{
    font-size:13px
}

.c-header__subMenuItem:not(:last-of-type){
    margin-bottom:25px
}

.c-header__infoMenu{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:end;
    -ms-flex-pack:end;
    justify-content:flex-end;
    gap:0px;
    padding-left:40px;
    margin-left:40px;
    border-left:solid 1px #332e29
}

@media(min-width:769px) and (max-width:1024px){
    .c-header__infoMenu{
        gap:22px;
        padding-left:32px;
        margin-left:32px
    }
}

@media(max-width:768px){
    .c-header__infoMenu{
        padding-left:0;
        margin-left:0;
        -webkit-box-pack:start;
        -ms-flex-pack:start;
        justify-content:flex-start;
        border-left:none;
        gap:30px
    }
}

.c-header__infoMenu .icon-cart{
    width:23px;
    height:21px
}

.c-header__infoMenu .icon-user{
    width:18px;
    height:21px
}

.c-header__infoMenu a{
    -webkit-transition:.3s ease-in-out;
    transition:.3s ease-in-out
}

.c-header__infoMenu a:hover{
    opacity:.7
}

.c-header__gnavTrigger{
    display:none
}

@media(max-width:768px){
    .c-header__gnavTrigger{
        display:block
    }
}

.c-header__gnavBtn{
    position:relative;
    width:50px;
    height:50px;
    background:none;
    border:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer
}

.c-header__gnavBtn::after{
    position:absolute;
    top:0;
    left:0;
    display:block;
    content:"";
    width:50px;
    height:50px;
    border-radius:50%;
    border:2px solid #acacac;
    -webkit-transition:all .75s;
    transition:all .75s
}

.c-header__gnavBtn span{
    display:inline-block;
    -webkit-transition:all .4s;
    transition:all .4s;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    position:absolute;
    left:50%;
    width:21px;
    height:2px;
    background-color:#332e29;
    border-radius:4px;
    -webkit-transform:translateX(-50%);
    transform:translateX(-50%)
}

.c-header__gnavBtn span:nth-of-type(1){
    top:16px
}

.c-header__gnavBtn span:nth-of-type(2){
    top:24px
}

.c-header__gnavBtn span:nth-of-type(3){
    bottom:16px
}

.c-header__gnavBtn.active span{
    width:25px;
    height:3px
}

.c-header__gnavBtn.active span:nth-of-type(1){
    -webkit-transform:translate(-50%,8px) rotate(-45deg);
    transform:translate(-50%,8px) rotate(-45deg)
}

.c-header__gnavBtn.active span:nth-of-type(2){
    left:60%;
    opacity:0;
    -webkit-animation:menuBar .8s forwards;
    animation:menuBar .8s forwards
}

.c-header__gnavBtn.active span:nth-of-type(3){
    -webkit-transform:translate(-50%,-7px) rotate(45deg);
    transform:translate(-50%,-7px) rotate(45deg)
}

.c-header__gnavBtn.active::after{
    -webkit-animation:hamburger .4s .25s forwards;
    animation:hamburger .4s .25s forwards
}

@-webkit-keyframes menuBar{
    100%{height:0}
}

@keyframes menuBar{
    100%{height:0}
}

@-webkit-keyframes hamburger{
    0%{
        border-color:rgba(0,0,0,0);
        -webkit-transform:rotate(0);
        transform:rotate(0)
    }
    25%{
        border-color:rgba(0,0,0,0) #acacac rgba(0,0,0,0) rgba(0,0,0,0)
    }
    50%{
        border-color:rgba(0,0,0,0) #acacac #acacac rgba(0,0,0,0)
    }
    75%{
        border-color:rgba(0,0,0,0) #acacac #acacac #acacac
    }
    100%{
        border-color:#acacac;
        -webkit-transform:rotate(-680deg);
        transform:rotate(-680deg)
    }
}

@keyframes hamburger{
    0%{
        border-color:rgba(0,0,0,0);
        -webkit-transform:rotate(0);
        transform:rotate(0)
    }
    25%{
        border-color:rgba(0,0,0,0) #acacac rgba(0,0,0,0) rgba(0,0,0,0)
    }
    50%{
        border-color:rgba(0,0,0,0) #acacac #acacac rgba(0,0,0,0)
    }
    75%{
        border-color:rgba(0,0,0,0) #acacac #acacac #acacac
    }
    100%{
        border-color:#acacac;
        -webkit-transform:rotate(-680deg);
        transform:rotate(-680deg)
    }
}

/* ========================================
   FOOTER
======================================== */

.c-footer{
    background-color:#fff;
    padding:90px 0 25px
}

.c-footer__container{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:start;
    -ms-flex-align:start;
    align-items:flex-start;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    gap:22px;
    margin-bottom:50px
}

@media(max-width:768px){
    .c-footer__container{
        display:block
    }
}

@media(max-width:768px){
    .c-footer__logo{
        text-align:center
    }
}

.c-footer__logo a{
    display:inline-block
}

.c-footer__menu{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:end;
    -ms-flex-pack:end;
    justify-content:flex-end;
    gap:48px
}

@media(min-width:769px) and (max-width:1024px){
    .c-footer__menu{
        gap:20px 32px;
        -ms-flex-wrap:wrap;
        flex-wrap:wrap
    }
}

@media(max-width:768px){
    .c-footer__menu{
        display:none
    }
}

.c-footer__menuItem{
    font-size:15px;
    letter-spacing:.05em;
    line-height:1;
    font-weight:500
}

@media(min-width:769px) and (max-width:1024px){
    .c-footer__menuItem{
        font-size:13px
    }
}

.c-footer__menuItem a{
    -webkit-transition:.3s ease-in-out;
    transition:.3s ease-in-out;
    position:relative
}

.c-footer__menuItem a::after{
    content:"";
    width:0;
    height:2px;
    background-color:#acacac;
    position:absolute;
    left:0;
    bottom:0;
    -webkit-transition:.3s ease-in-out;
    transition:.3s ease-in-out
}

.c-footer__menuItem a:hover::after{
    width:100%
}

.c-footer__menuItem--en{
    font-size:18px;
    font-family:"Josefin Sans",sans-serif;
    font-weight:400
}

@media(min-width:769px) and (max-width:1024px){
    .c-footer__menuItem--en{
        font-size:16px
    }
}

.c-footer__menuItem--en a{
    vertical-align:sub
}

.c-footer__copyright{
    max-width:1140px;
    width:92%;
    margin-inline:auto;
    text-align:right;
    font-size:12px;
    color:#acacac;
    letter-spacing:.1em;
    padding:0 0 1rem 0;
}

@media(max-width:768px){
    .c-footer__copyright{
        text-align:center;
        font-size:10px
    }
}

/* ========================================
   リピスト側調整
======================================== */

.l-main:has(> .c-header) .l-contents{
    margin-top:112px;
}

.l-header{
    border-bottom:none;
    background:#fff;
}

.l-header__logo a img{
    height:auto !important;
    width:120px;
}

.l-header__actions .global-user-nav__item{
    margin-right:20px !important;
}

.l-footer__pagetop a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    color:#333 !important;
    background:#fff !important;
    border-radius:50%;
    border:1px solid #ccc;
}

.l-contents{
    padding-top:78px;
    background:none;
}


















