@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto:wght@300;400;700&display=swap);
@charset "UTF-8";

:root {
    --whitecolor: #ffffff;
    --blackcolor: #000000;
    --color1: #093e18;
    --color2: #104b25;
    --color3: #008052;
    --color4: #2add53;
    --color5: #5ef480;
    --color6: #98fe94;
    --color7: #eefedb;
    --color8: #fdfcf3;
    --color9: #5571c0;
    --color10: #dcfdc7;
    --color11: #9b9a94;
    --color12: #fefcf3;
    --contents-width: 1200px;
    --contents-width2: 825px;
    --contents-width3: 940px;
}
.text-white{
    color: var(--whitecolor);
}
.text-black{
    color: var(--blackcolor);
}
.bg-white{
    background-color: var(--whitecolor);
}
.bg-black{
    background-color: var(--blackcolor);
}

body {
	width: 100%;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1;
    color: black;
    background-color: var(--color12);
}
html{
    font-size: 62.5%;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
@media screen and (max-width:1200px){
	html{
		font-size: 0.8vw;
	}
}
@media screen and (max-width:750px){
	html{
		font-size: 1.3333vw;
	}
}
@media screen and (max-width:480px){
	html{
		font-size: 2.25vw;
	}
}
/*************
画像関連
*************/
picture{
    display: block;
}
img{
    max-width: 100%;
    height:auto;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
.image img{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
/*************
横並び
*************/
/**flex**/
.flex-wrap{
    display: flex;
    flex-wrap: wrap;
}
.flex-wrap.reverse{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
}
.flex-wrap.align-center{
    align-items: center;
}
.flex-wrap.align-stretch{
    align-items: stretch;
}
/**grid**/
.grid-wrap{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
/**float**/
.float-wrap::after{
    content: "";
    display: block;
    clear: both;
}
.float-wrap .float-left{
    float: left;
}
.float-wrap .float-right{
    float: right;
}
/*************
accordion-wrap
*************/
.accordion-wrap dt{
    position: relative;
    cursor: pointer;
}
.accordion-wrap dt:after{
    content: "+";
}
.accordion-wrap dt.active:after{
    content: "-";
}
.accordion-wrap dd{
    display: none;
}
/*************
scroll-wrap
*************/
.scroll-wrap{
	opacity: 0;
	transition: all 1s ease-in-out;
}
.scroll-wrap.slow{
	transition: all 1.5s ease-in-out;
}
.scroll-wrap.fast{
	transition: all 0.5s ease-in-out;
}
.scroll-wrap.is-active{
	opacity: 1;
}
/**left-right**/
.scroll-wrap.left-right{
	transform: translateX(-25%);
}
.scroll-wrap.left-right.is-active{
	transform: translateX(0%);
}
/**right-left**/
.scroll-wrap.right-left{
	transform: translateX(25%);
}
.scroll-wrap.right-left.is-active{
	transform: translateX(0%);
}
/**bottom-top**/
.scroll-wrap.bottom-top{
	transform: translateY(2.5rem);
}
.scroll-wrap.bottom-top.is-active{
	transform: translateY(0%);
}
/**top-bottom**/
.scroll-wrap.top-bottom{
	transform: translateY(-25%);
}
.scroll-wrap.top-bottom.is-active{
	transform: translateY(0%);
}

/*************
swiper
*************/
.swiper-button-next, .swiper-button-prev{
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: var(--color6);
}
.swiper-button-next:after, .swiper-button-prev:after{
    font-size: 2rem;
    font-weight: bold;
    color: var(--blackcolor);
}
.swiper-pagination-bullet-active{
    background-color: var(--color1);
}
.swiper-contents {
    position: relative;
    margin-bottom: -2rem;
}
.swiper-button-prev {
    left: -2rem;
}
.swiper-button-next {
    right: -2rem;
}
.swiper{
    padding-bottom: 2rem;
}
.swiper-pagination-bullets.swiper-pagination-horizontal {
    position: relative;
    top: 1.5rem;
}
/*************

*************/
.full-none{
    display: none;
}
.xs-block{
    display: none;
}
.brackets-start{
    margin-left: -0.5em;
}
.brackets-end{
    margin-right: -0.5em;
}
.box-shadow{
    box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.16);
}
/*************
btn
*************/
.cta-wrap .btn{
    display: block;
    position: relative;
    width: auto;
    max-width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: 100vh;
    padding: 0;
    box-sizing: border-box;
    transition: color ease-in-out 0.25s, background-color ease-in-out 0.25s, border-color ease-in-out 0.25s;
    font-size: 2.7rem;
    color: var(--blackcolor);
    text-align: center;
    padding: 1em 0.5em;
    margin: 0.75em 0;
    font-weight: 600;
    letter-spacing: 0.05em;
    min-width: 390px;
}
.cta-wrap .btn::after{
    content: "→";
    position: absolute;
    right: 1em;
    top: 0;
    bottom: 0;
    margin: auto;
    line-height: 1;
    height: 1em;
}
.cta-wrap .btn:hover{

}
.cta-wrap .btn:first-of-type{
    margin-top: 0;
}
.cta-wrap .btn:last-of-type{
    margin-bottom: 0;
}
.cta-wrap .btn.shop-btn{
    background-color: var(--color4);
    border: 1px solid var(--color4);
}
.cta-wrap .btn.shop-btn:hover{
    background-color: color-mix(in srgb, var(--color4) 50%, #ffffff);
}
.cta-wrap .btn.reserve-btn{
    background-color: var(--whitecolor);
    border: 1px solid var(--color4);
}
.cta-wrap .btn.reserve-btn:hover{
    background-color: color-mix(in srgb, var(--color4) 50%, #ffffff);
}
/*************
floating-banner
*************/
.floating-banner{
    position: fixed;
    bottom: -27rem;
    left: 0;
    right: 0;
    transition: all 0.75s ease-in-out;
    z-index: 9999999;
}
.floating-banner.UpMove{
    bottom: 0;
}
.floating-banner section.cta-block{
    margin: auto !important;
    padding-top: 0;
    padding-bottom: 0;
    /*
    padding-top: 2rem;
    padding-bottom: 3rem;
    */
}
.floating-banner section.cta-block .contents{
    width: 100%;
    max-width: 100%;
}
.floating-banner section.cta-block .cta-wrap{
    grid-gap: 0;
    gap: 0;
    margin-top: 0;
}
.floating-banner section.cta-block .cta-wrap .btn{
    border-radius: 0;
    min-width: 50%;
    border: 0;
    font-size: 3.5rem;
}
.floating-banner section.cta-block .cta-wrap .btn:after{
    display: none;
}
.floating-banner section.cta-block .cta-wrap .btn.reserve-btn {
    background-color: var(--color1);
    color: var(--whitecolor);
}
.floating-banner section.cta-block .cta-wrap .btn.shop-btn::before{
    content: url( 'data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 17.561" fill="%23fff"><g><g><path id="icon-booking-path" data-name="icon-booking-path" d="M13.463,1.561H12.1V.976a.976.976,0,1,0-1.951,0v.585H5.854V.976A.976.976,0,0,0,3.9.976v.585H2.537A2.539,2.539,0,0,0,0,4.1V15.024a2.539,2.539,0,0,0,2.537,2.537H13.463A2.539,2.539,0,0,0,16,15.024V4.1a2.539,2.539,0,0,0-2.537-2.537M12.285,10.09,7.406,15.016a.533.533,0,0,1-.854,0q-1.365-1.365-2.731-2.728a1.2,1.2,0,0,1-.376-.581v-.239a1.074,1.074,0,0,1,.368-.575c.074-.067.141-.141.212-.21a.776.776,0,0,1,1.136,0q.878.873,1.752,1.751l.065.062c.029-.027.057-.053.084-.08,1.613-1.613,2.147-2.194,3.761-3.807a.774.774,0,0,1,.944-.17,1.021,1.021,0,0,1,.206.154c.107.1.208.2.311.308a.783.783,0,0,1,0,1.187m1.764-3.846H1.951V4.1a.586.586,0,0,1,.585-.585H3.9V4.1a.976.976,0,0,0,1.951,0V3.512h4.293V4.1a.976.976,0,0,0,1.951,0V3.512h1.366a.586.586,0,0,1,.585.585Z"></path></g></g></svg>' );
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    margin-top: -0.25em;
    margin-right: 0.5em;
}
.floating-banner section.cta-block .cta-wrap .btn.reserve-btn::before{
    content: url( 'data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" fill="%23fff"><g id="icon-srch" data-name="icon-srch"><path id="icon-srch-path" data-name="icon-srch-path" d="M15.713,14.329l-3.63-3.63c-.015-.015-.031-.029-.047-.043a6.676,6.676,0,1,0-1.38,1.38c.014.016.027.032.043.047l3.63,3.63a.979.979,0,0,0,1.384-1.384M6.676,11.395a4.719,4.719,0,1,1,4.719-4.719,4.724,4.724,0,0,1-4.719,4.719"></path></g></svg>' );
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    margin-top: -0.25em;
    margin-right: 0.5em;
}
/*************
header
*************/
header{
    background-color: var(--whitecolor);
}
header #nav_icon{
    display: none;
}
header .header-contents{
    justify-content: space-between;
    box-sizing: border-box;
    padding: 3rem 4rem;
}
header .header-contents h1{
    width: 32rem;
}
header .nav-contents{

}
header .nav-contents li{

}
header .nav-contents li a{
    display: block;
    font-size: 1.6rem;
    font-weight: 600;
}
header .nav-contents li:not(:last-of-type) a{
    margin-right: 2rem;
}
/*************
main
*************/
main{
    background-color: var(--color12);
}
/*************
section
*************/
section:not(#kv) h2{
    font-size: 3.6rem;
    box-sizing: border-box;
    font-weight: 700;
}
section:not(#kv) h2 b{
    color: var(--color4);
}
section:not(#kv,.cta-block) h2{
    color: var(--color1);
    text-align: center;
    padding-top: 5rem;
    padding-bottom: 5rem;
    margin-bottom: 2rem;
    line-height: 1.333333;
}
section p{
    font-size: 1.6rem;
    line-height: 1.75;
}
section .text-wrap p{
    margin-bottom: 1em;
}
section .text-wrap p:last-of-type{
    margin-bottom: 0;
}
section time{
    font-size: 1.2rem;
    font-family: "Roboto", sans-serif;
    color: var(--color11);
}
section .contents{
    width: var(--contents-width);
    margin-left: auto;
    margin-right: auto;
    max-width: 95%;
}
/*************
cta-block
*************/
.cta-block{
    background-color: var(--color1);
    padding-top: 5rem;
    padding-bottom: 7.5rem;
}
.cta-block:not(footer .cta-block){
    margin-top: 5rem;
    margin-bottom: 2rem;
}
.cta-block .contents{
    width: var(--contents-width2);
}
.cta-block h2{
    color: var(--whitecolor);
    text-align: left;
    margin-bottom: 2rem;
    line-height: 1.75;
}
.cta-block .cta-wrap{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    grid-gap: 2.5rem;
    gap: 2.5rem;
    margin-top: 3rem;
}
.cta-block .cta-wrap a{
    margin-top: 0;
    margin-bottom: 0;
}
/*************
kv
*************/
#kv{
    position: relative;
    /*height: calc(100dvh - 550px);*/
    max-height: 80dvh;
    overflow: hidden;
}

@media (max-height: 880px) and ( min-width:1200px ) {
    #kv{
        max-height: 100dvh;
    }
}

#kv .noticeOfChange{
    left: 50%;
    /* top: 2%; */
    transform: translateX(-50%);
    z-index: 5;
    position: absolute;
    width: 100%;
    /* border: solid 3px var(--color3) ; */
    padding: .5rem;
    background-color: var(--color2);
}

#kv .noticeOfChange p{
    color: #fff;
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.25;
}

#kv .noticeOfChange p br:nth-child(2){
    display: none;
}

@media screen and (min-width: 751px) and (max-width: 1300px) {

    #kv .noticeOfChange{
        /* top: 1%; */
        width: 100%;
    }

    #kv .noticeOfChange br{
        display: none;
    }
}

@media screen and (max-width:750px){
    #kv .noticeOfChange{
        position: unset;
        left: unset;
        top: 0%;
        transform: unset;
        z-index: 5;
        position: unset;
        width: 100%;
        padding: 1rem .2rem;
        background-color: var(--color2);
    }
    
    #kv .noticeOfChange p{
        text-align: center;
        font-size: 1.8rem;
        font-weight: 700;
        line-height: 1.25;
    }

    #kv .noticeOfChange p br,#kv .noticeOfChange p br:nth-child(2){
        display: unset;
        }
}

#kv .kv-img{
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}
#kv .kv-img img{
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}
#kv .text-wrap{
    
    top: 10%;
    position: absolute;
    right: 5%;
    left: 55%;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    height: max-content;
}
#kv .copy-wrap{

}
#kv .copy-wrap h2{
    font-size: max(6rem, 3vw);
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--color1);
    margin-bottom: 0.25em;
    /*text-shadow: 2px 3px 3px rgb(155 154 148 / 80%);*/
}
#kv .copy-wrap p{
    font-size: max(2rem, 1.25vw);
    font-weight: 500;
    color: var(--color1);
    line-height: 1.5;
    /*text-shadow: 2px 3px 3px rgb(155 154 148 / 80%);*/
}
#kv .cta-wrap{
    width: max-content;
}
#kv .cta-wrap h3{
    font-size: max(2.86rem, 1.43vw);
    color: var(--color1);
    font-weight: 700;
    text-align: center;
    margin-top: em; /*251015_調整*/
    line-height: 1.5;
    margin-bottom: 0.75em;
}
#kv .cta-wrap h3 span{
    font-size: 100%;
    display: block;
    letter-spacing: 0.05em;
}
#kv .cta-wrap h3 b{
    color: var(--color4);
}
/*
#kv .cta-wrap h3 span::before{
    content: "|";
    transform: rotate(-35deg);
    display: inline-block;
    margin-right: 0.5em;
}
#kv .cta-wrap h3 span::after{
    content: "|";
    transform: rotate(35deg);
    display: inline-block;
    margin-left: 0.5em;
}

/*************
news
*************/
#news{
    padding-top: 5rem;
    padding-bottom: 5rem;
}
#news .card-wrap{
    /*
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
    grid-gap: 30px;
    gap: 30px;
    */
}
#news .card-wrap .card{
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    gap: 0px;
    overflow: hidden;
    padding: 2.5rem;
    border: 1px solid #dededd;
    border-radius: 25px;
    box-sizing: border-box;
    transition: -ms-box-shadow ease-in-out 0.25s, box-shadow ease-in-out 0.25s;
    background-color: var(--whitecolor);
}
#news .card-wrap .card .card-top{
    
}
#news .card-wrap .card .card-top img{
    width: 100%;
    display: block;
    object-fit: cover;
}
#news .card-wrap .card .card-bottom{
    
}
#news .card-wrap .card .card-bottom time{
    margin-top: 2em;
    margin-bottom: 1em;
    display: block;
}
#news .card-wrap .card .card-bottom .contents-text{
    
}
#news .card-wrap .card .card-bottom .icon{
    display: block;
    width: 2.5em;
    height: 2.5em;
    font-size: 1.6rem;
    border-radius: 50%;
    background-color: var(--color4);
    margin-left: auto;
    margin-right: 0;
    padding: 1em;
    position: relative;
}
#news .card-wrap .card .card-bottom .icon svg{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
/*************
about
*************/
#about{
    padding-top: 5rem;
    padding-bottom: 5rem;
}
#about .grid-wrap{
    justify-content: flex-start;
    align-items: center;
    grid-gap: 4.5rem;
    gap: 4.5rem;
}
#about .text-wrap p{
    font-size: 1.8rem;
    line-height: 2;
}
/*************
specialty
*************/
#specialty{
    padding-top: 5rem;
    padding-bottom: 5rem;
}
#specialty .point-wrap .grid-wrap{
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    grid-gap: 2.5rem;
    gap: 2.5rem;
    box-sizing: border-box;
    margin-bottom: 5rem;
}
#specialty .point-wrap .card-wrap{
    counter-reset: number 0;
}
#specialty .point-wrap .card-wrap .card{
    background-color: var(--whitecolor);
    border-radius: 25px;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    gap: 0px;
}
#specialty .point-wrap .card-wrap .card .card-top{

}
#specialty .point-wrap .card-wrap .card .card-top img{
    display: block;
}
#specialty .point-wrap .card-wrap .card .card-bottom{
    padding: 2.5rem;
}
#specialty .point-wrap .card-wrap .card .card-bottom h3{
    color: var(--color3);
    font-size: 2.4rem;
    line-height: 1.5;
    font-weight: 700;
    position: relative;
    margin-left: 2.5em;
    margin-bottom: 0.5em;
}
#specialty .point-wrap .card-wrap .card .card-bottom h3::before{
    counter-increment: number 1;
    content: counter(number);
    font-size: 300%;
    line-height: 1;
    position: absolute;
    left: -0.75em;
    top: 0;
    bottom: 0;
    margin: auto;
    font-family: "Roboto", sans-serif;
}
#specialty .point-wrap .card-wrap .card .card-bottom p{
    line-height: 1.75;
    font-size: 1.8rem;
}
#specialty .assistance-wrap .grid-wrap{
    align-items: center;
    grid-gap: 5.5rem;
    gap: 5.5rem;
    background-color: var(--color7);
    box-sizing: border-box;
    padding: 5rem 3.5rem;
    border-radius: 25px;
    margin-bottom: 5rem;
}
#specialty .assistance-wrap .grid-wrap .text-wrap h3{
    font-size: 3rem;
    line-height: 1.6;
    color: var(--color1);
    font-weight: 700;
    margin-bottom: 1em;
    text-align: center;
}
#specialty .assistance-wrap .grid-wrap .text-wrap p{
    line-height: 2;
    font-size: 1.8rem;
}
/*************
brand
*************/
#brand{
    padding-top: 5rem;
    padding-bottom: 5rem;
}
#brand h3{
    color: var(--color3);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1em;
}
#brand p{
    font-size: 1.8rem;
}
#brand .brand-wrap{
    background-color: var(--whitecolor);
    border-radius: 25px;
    box-sizing: border-box;
    padding: 2.5rem 3.5rem;
    margin-top: 4rem;
}
#brand .brand-wrap .flex-wrap{
    grid-gap: 2.5rem;
    gap: 2.5rem;
}
#brand .brand-wrap .flex-wrap img{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
/*************
flow
*************/
#flow{
    padding-top: 5rem;
    padding-bottom: 5rem;
}
#flow .flow-wrap{
    width: var(--contents-width3);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    counter-reset: mycounter;
}
#flow .step{
    margin-top: 3rem;
    margin-bottom: 3rem;
    position: relative;
}
#flow .step:not(:last-of-type)::before{
    content: "";
    display: block;
    width: 2px;
    height: 100%;
    background-color: var(--color3);
    position: absolute;
    left: 3.8rem;
    top: 10.5rem;
}
#flow .step:first-of-type{
    margin-top: 0;
}
#flow .step:last-of-type{
    margin-bottom: 0;
}
#flow .step .grid-wrap{
    align-items: center;
    grid-gap: 5.5rem;
    gap: 5.5rem;
    grid-template-columns: 3fr 2fr;
}
#flow .step .flex-wrap{
    align-items: center;
}
#flow .step .flex-wrap .left-wrap{
    width: 11rem;
}
#flow .step .flex-wrap .right-wrap{
    width: calc(100% - 11rem);    
}
#flow .step .text-wrap{

}
#flow .step .text-wrap h3{
    font-size: 2.4rem;
    color: var(--color3);
    line-height: 1;
    font-weight: 700;
    margin-bottom: 0.5em;
}
#flow .step .text-wrap p{
    font-size: 1.8rem;
    line-height: 1.7;
}
#flow .step .text-wrap .icon{
    display: block;
    width: 7.5em;
    height: 7.5em;
    border-radius: 50%;
    background-color: var(--color3);
    color: var(--whitecolor);
    position: relative;
    font-size: 1rem;
}
#flow .step .text-wrap .icon:before{
    content: "STEP";
    font-size: 1.2rem;
    display: block;
    position: absolute;
    top: 1.5rem;
    left: 0;
    right: 0;
    margin: auto;
    line-height: 1;
    width: max-content;
    height: 1em;
}
#flow .step .text-wrap .icon:after{
    counter-increment: mycounter;
    content: counter(mycounter, decimal-leading-zero);
    font-size: 3rem;
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.8rem;
    margin: auto;
    line-height: 1;
    width: max-content;
    height: 1em;
}
#flow .step .img-wrap{

}
/*************
voice
*************/
#voice{
    padding-top: 5rem;
    padding-bottom: 5rem;
}
#voice .card-wrap{
    /*
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
    grid-gap: 30px;
    gap: 30px;
    */
}
#voice .card-wrap .card{
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    gap: 0px;
    overflow: hidden;
    padding: 4rem;
    border: 1px solid #dededd;
    border-radius: 25px;
    box-sizing: border-box;
    transition: -ms-box-shadow ease-in-out 0.25s, box-shadow ease-in-out 0.25s;
    background-color: var(--whitecolor);
}
#voice .card-wrap .card .card-top{
    
}
#voice .card-wrap .card .card-top .name-wrap{
    margin-bottom: 1.25rem;
}
#voice .card-wrap .card .card-top .name-wrap .area{
    font-size: 1.5rem;
    color: var(--whitecolor);
    background-color: var(--color3);
    border-radius: 25px;
    box-sizing: border-box;
    padding: 0.3em 1em;
    line-height: 1;
    margin-right: 1rem;
}
#voice .card-wrap .card .card-top .name-wrap .name{
    font-size: 1.5rem;
    color: var(--color3);
}
#voice .card-wrap .card .card-top img{
    width: 100%;
    display: block;
    object-fit: cover;
}
#voice .card-wrap .card .card-bottom{
    
}
#voice .card-wrap .card .card-bottom .contents-text{
    margin-top: 2.5rem;
}
#voice .card-wrap .card .card-bottom .contents-text h3{
    font-size: 2rem;
    font-weight: 700;
    color: var(--color3);
    line-height: 1.2;
    margin-bottom: 0.75em;
}
#voice .card-wrap .card .card-bottom .contents-text p{
    font-size: 1.6rem;
    line-height: 1.6;
}
/*************
shop
*************/
#shop{
    padding-top: 12rem;
    padding-bottom: 5rem;
}
#shop .annotation{
    font-size: 1.2rem;
    margin-bottom: 2rem;
}
#shop .annotation:before{
    content: "※";
}
#shop .sub-title{
    background-color: var(--color4);
    box-sizing: border-box;
    padding: 2.25rem 0;
    position: relative;
}
#shop .sub-title:after{
    content: "";
    position: absolute;
    top: 100%;
    left: calc( 50% - 2.25rem );
    border: 2.5rem solid transparent;
    border-top: 2.5rem solid var(--color4);
    width: 0;
    height: 0;
}
#shop .sub-title p{
    text-align: left;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    color: var(--color1);
    font-size: 3rem;
    line-height: 1.3333;
    font-weight: 700;
}
#shop .area-wrap{

}
#shop .area-wrap .area-tab{
    margin-top: 4rem;
    margin-bottom: 4rem;
}
#shop .area-wrap .area-tab dl{
    
}
#shop .area-wrap .area-tab dl dt{
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color3);
    margin-bottom: 0.5em;
}
#shop .area-wrap .area-tab dl dd{
    
}
#shop .area-wrap .area-tab dl dd ul{

}
#shop .area-wrap .area-tab dl dd ul li{
    display: block;
    font-size: 1.8rem;
    border: 1px solid var(--blackcolor);
    border-radius: 15px;
    color: var(--blackcolor);
    box-sizing: border-box;
    padding: 0.25em 0.75em;
    font-weight: 600;
    margin: 0.5rem;
    cursor: pointer;
}
#shop .area-wrap .area-tab dl dd ul li:first-child{
    margin-left: 0;
}
#shop .area-wrap .area-tab dl dd ul li:hover{
    opacity: 0.8;
}
#shop .area-wrap .area-content{
    
}
#shop .area-wrap .area-content dl{
    border-top: 1px solid var(--blackcolor);
}
#shop .area-wrap .area-content dl:last-of-type{
    border-bottom: 1px solid var(--blackcolor);;
}
#shop .area-wrap .area-content dl dt{
    position: relative;
    cursor: pointer;
    box-sizing: border-box;
    padding: 2rem 1.5rem;
}

#shop .area-wrap .area-content dl dt::after{
    position: absolute;
    right: 2rem;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    font-size: 2.5rem;
    font-weight: 400;
    height: 1em;
}
#shop .area-wrap .area-content dl dt h3{
    font-size: 2rem;
}
#shop .area-wrap .area-content dl dd{
    
}
#shop .area-wrap .area-content dl dd .shop-wrap{
    background-color: var(--whitecolor);
    border: 1px solid var(--color3);
    border-radius: 20px;
    box-sizing: border-box;
    padding: 3rem 4rem;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5rem;

    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    gap: 5px;
}
#shop .area-wrap .area-content dl dd .shop-wrap h4{
    font-size: 2.3rem;
    color: var(--color3);
    font-weight: 600;
    margin-bottom: 0.5em;
}
#shop .area-wrap .area-content dl dd .shop-wrap .address{
    font-size: 2rem;
    line-height: 1.5;
}
#shop .area-wrap .area-content dl dd .shop-wrap .other-wrap{
    align-items: baseline;
    margin-top: 1rem;
}
#shop .area-wrap .area-content dl dd .shop-wrap .tel{
    font-size: 3rem;
    color: var(--color3);
    font-weight: 600;
    margin-right: 5rem;
    position: relative;
    line-height: 1;
}
#shop .area-wrap .area-content dl dd .shop-wrap .tel a{
    position: relative;
    display: block;
    pointer-events: none;
}
#shop .area-wrap .area-content dl dd .shop-wrap .tel a::before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    aspect-ratio: 1 / 1;
    background-image: url(../images/front/shop/ic_tel.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 1rem;
}
#shop .area-wrap .area-content dl dd .shop-wrap .tel a span{
    font-size: inherit;
    vertical-align: middle;
}
#shop .area-wrap .area-content dl dd .shop-wrap .map{
    font-size: 2.4rem;
    color: var(--color3);
    font-weight: 600;
    position: relative;
    line-height: 1;
}
#shop .area-wrap .area-content dl dd .shop-wrap .map::before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 1.5em;
    aspect-ratio: 1 / 1;
    background-image: url(../images/front/shop/ic_map.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
#shop .area-wrap .area-content dl dd .shop-wrap .map a{
    vertical-align: middle;
}
/*************
faq
*************/
#faq{
    padding-top: 5rem;
    padding-bottom: 5rem;
}
#faq dl{
    background-color: var(--color7);
    padding: 3rem 5rem;
    margin-bottom: 3rem;
    border-radius: 25px;
}
#faq dl:last-of-type{
    margin-bottom: 0;
}
#faq dl dt::before{
    content: "Q";
    font-size: 2.4rem;
    position: absolute;
}
#faq dl dt:after{
    background-color: var(--color4);
    box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.16);
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    margin-right: -1.5rem;
    box-sizing: border-box;
    line-height: 1.25;
    text-align: center;
}
#faq dl dt h3{
    font-size: 2rem;
    line-height: 1.3;
    position: relative;
    left: 4rem;
    top: 0;
}
#faq dl dd{
    box-sizing: border-box;
    padding: 2rem 4rem;
    padding-bottom: 0;
}
#faq dl dd p{
    font-size: 1.8rem;
    line-height: 1.7;
}
/*************
footer
*************/
footer{
    padding-top: 13rem;
}
footer #copyright{
    background-color: var(--color3);
}
footer #copyright p{
    text-align: center;
    color: var(--whitecolor);
    font-size: 1.2rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

@media screen and (min-width:751px) and (max-width:1200px){
    /*************
    btn
    *************/
    #kv .cta-wrap .btn{
        font-size: 2.2rem;
        min-width: 250px;
    }
}

@media screen and (max-width:750px){
    .full-none{
        display: block;
    }
    /*************
    header
    *************/
    header{
        position: relative;
        height: 10rem;
    }
    header #nav_icon{
        position: absolute;
        top: 0;
        bottom: 0;
        margin-top: auto;
        margin-bottom: auto;
        right: 3.5rem;
        width: 2.5rem;
        height: 2.5rem;
        display: block;
        z-index: 9999999999;
        cursor: pointer;
    }
    header #nav_icon .menu-ic{
        display: block;
        width: 2.5rem;
        height: 0.35rem;
        background-color: var(--color1);
        position: absolute;
        top: 0.85rem;
        transition: 0.5s ;
        border-radius: 5px;
    }
    header #nav_icon .menu-ic:before{
        content: "";
        display: block;
        width: 2.5rem;
        height: 0.35rem;
        background-color: inherit;
        position: absolute;
        top: -0.85rem;
        transition: 0.5s ;
        border-radius: inherit;
    }
    header #nav_icon .menu-ic:after{
        content: "";
        display: block;
        width: 2.5rem;
        height: 0.35rem;
        background-color: inherit;
        position: absolute;
        bottom: -0.85rem;
        transition: 0.5s ;
        border-radius: inherit;
    }
    /**オープン時**/
    body.drawer-opened #nav_icon .menu-ic{
        width: 0;
        transition: 0s ;
    }
    body.drawer-opened #nav_icon .menu-ic::before{
        transform: rotate(45deg);
        top: 0em;
    }
    body.drawer-opened #nav_icon .menu-ic::after{
        transform: rotate(-45deg);
        bottom: 0em;
    }
    body.drawer-opened .nav-contents > ul > li{
        position: relative;
    }
    body.drawer-opened .nav-contents .ic-toggle{
        display: block;
    }
    body.drawer-opened{
        overflow: hidden;
    }
    header .header-contents{
        padding: 2rem 4rem;
    }
    header .nav-wrap{
        position: fixed;
        top: 9rem;
        height: calc(100dvh - 9rem);
        background-color: #ffffff;
        z-index: 1111111;
        width: 100%;
        left: 0;
        right: 0;
        display: none;
        overflow-y: scroll;
    }
    body.drawer-opened .nav-wrap{
        display: block;
    }
    body.drawer-opened .nav-wrap .nav-wrap-contents{
        height: max-content;
        padding-bottom: 15rem;
    }
    header .nav-wrap ul{
        display: block;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 8rem;
        margin-bottom: 5rem;
    }
    header .nav-wrap ul li{
        display: block;
        width: 100%;
    }
    header .nav-wrap ul li:not(:last-of-type){
        margin-bottom: 5rem;
    }
    header .nav-contents li a{
        font-size: 3.4rem;
    }
    header .nav-wrap .cta-wrap{
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 5rem;
    }
    /*************
    swiper
    *************/
    .swiper-contents {
        max-width: 550px;
        margin-left: auto;
        margin-right: auto;
    }
    /*************
    cta-block
    *************/
    .cta-block .contents{
        max-width: 66%;
    }
    .cta-block .cta-wrap{
        justify-content: center;
    }
    /*************
    floating-banner
    *************/
    .floating-banner section.cta-block .contents{
        max-width: 100%;
    }
    .floating-banner section.cta-block .cta-wrap{
        gap: unset;
        grid-gap: unset;
        margin-top: 0;
    }
    .floating-banner section.cta-block .cta-wrap .btn{
        /*
        width: 48%;
        margin: 1%;
        min-width: auto;
        */
        font-size: 2.5rem;
    }
    /*************
    section
    *************/
    section .contents{
        max-width: 90%;
    }
    section:not(#kv,.cta-block) h2{
        margin-bottom: 0;
    }
    section:not(#kv) p{
        font-weight: 500;
    }
    /*************
    kv
    *************/
    #kv{
        max-height: max-content;
        margin-bottom: -20rem;
    }
    #kv .text-wrap{
        position: relative;
        top: -20rem;
        left: 0;
        right: 0;
        bottom: 0;
        margin-left: auto;
        margin-right: auto;
    }
    #kv .cta-wrap{
        width: 100%;
        background-color: var(--color1);
        box-sizing: border-box;
        padding: 5rem 10% 6rem;
    }
    #kv .cta-wrap h3{
        color: var(--whitecolor);
        margin-top: 0;
        font-size: 3.9rem;
    }
    #kv .cta-wrap h3 b{
        color: var(--color4);
    }
    #kv .copy-wrap {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        /*margin-bottom: 5rem;*/
        margin-bottom: 0;
    }
    #kv .copy-wrap h2{
        /*text-align: center;*/
        /*text-shadow: 2px 3px 3px rgb(155 154 148 / 80%);*/
        margin-bottom: 1em;
    }
    #kv .copy-wrap p{
        font-size: 2.5rem;
        margin-bottom: 3rem;
        /*text-shadow: 2px 3px 3px rgb(155 154 148 / 80%);*/
    }
    /*************
    about
    *************/
    #about {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    #about .grid-wrap{
        display: block;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
    #about .grid-wrap .text-wrap{
        box-sizing: border-box;
        padding: 4rem 3rem;
    }
    /*************
    specialty
    *************/
    #specialty {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    #specialty .point-wrap .grid-wrap{
        grid-template-columns: repeat(2, 1fr);
    }
    #specialty .point-wrap .card-wrap .card .card-bottom{
        padding: 1.5rem;
    }
    #specialty .point-wrap .card-wrap .card .card-bottom h3{
        font-size: 2.2rem;
    }
    #specialty .assistance-wrap .grid-wrap{
        display: block;
        max-width: 630px;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        padding-top: 10rem;
    }
    #specialty .assistance-wrap .grid-wrap .img-wrap{

    }
    #specialty .assistance-wrap .grid-wrap .text-wrap{
        margin-top: 2rem;
    }
    #specialty .assistance-wrap .grid-wrap .text-wrap h3{
        position: absolute;
        top: 3rem;
        margin-bottom: 0;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
    }
    /*************
    brand
    *************/
    #brand {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    /*************
    flow
    *************/
    #flow {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    #flow .step:not(:last-of-type)::before{
        top: 7.5rem;
    }
    #flow .step .grid-wrap{
        display: block;
    }
    #flow .step .img-wrap {
        margin-left: auto;
        margin-right: auto;
        width: max-content;
        max-width: 80%;
        margin-top: 3rem;
    }
    /*************
    voice
    *************/
    #voice {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    /*************
    shop
    *************/
    #shop {
        padding-top: 8rem;
        padding-bottom: 1rem;
    }
    #shop .annotation{
        font-size: 1.5rem;
    }
    #shop .area-wrap .area-tab dl dt{
        font-size: 2rem;
    }
    #shop .area-wrap .area-content dl dd .grid-wrap{
        display: block;   
    }
    #shop .area-wrap .area-tab dl dd ul li{
        font-size: 1.65rem;
    }
    /*************
    faq
    *************/
    #faq {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    #faq dl{
        padding: 3rem; 
    }
}
@media screen and (max-width:480px){
    /*************
    
    *************/
    .xs-block{
        display: block;
    }
    .xs-none{
        display: none;
    }
    /*************
    cta-wrap
    *************/
    .cta-wrap .btn{
        min-width: 100%;
        padding: 1em;
        font-size: 2.25rem;
    }
    /*************
    cta-block
    *************/
    .cta-block .contents {
        max-width: 82%;
    }
    /*************
    floating-banner
    *************/
    .floating-banner section.cta-block{
        /*
        padding-top: 2rem;
        padding-bottom: 2rem;
        */
    }
    .floating-banner section.cta-block .cta-wrap .btn{
        font-size: 2.25rem;
        padding: 1em 0;
        box-sizing: border-box;
    }
    /*************
    section
    *************/
    section:not(#kv,.cta-block) h2{
        font-size: 3rem;
        padding-top: 2rem;
        padding-bottom: 4rem;
    }
    /*************
    header
    *************/
    header{
        height: 8rem;
    }
    header .header-contents {
        padding: 1.5rem 2rem;
    }
    header .header-contents h1{
        width: 25rem;
    }
    header #nav_icon {
        position: absolute;
        right: 3.5rem;
    }
    header .nav-wrap{
        top: 8rem;
        height: calc(100dvh - 8rem);
    }
    header .nav-wrap ul {
        margin-top: 4rem;
        margin-bottom: 5rem;
    }
    header .nav-wrap ul li:not(:last-of-type) {
        margin-bottom: 4rem;
    }
    header .nav-contents li a {
        font-size: 2.4rem;
    }
    /*************
    kv
    *************/
    #kv {
        margin-bottom: -12rem;
    }
    #kv .text-wrap {
        top: -12rem;
    }
    #kv .copy-wrap{
        /*margin-bottom: 2rem;*/
        margin-bottom: 0;
    }
    #kv .copy-wrap h2 {
        font-size: 3.8rem;
        margin-bottom: 0.75em;
    }
    #kv .copy-wrap p{
        font-size: 1.8rem;
    }
    #kv .cta-wrap {
        padding: 2rem 10% 5rem;
    }
    #kv .cta-wrap h3 {
        font-size: 2.3rem;
    }
    /*************
    news
    *************/
    #news {
        padding-top: 2.5rem;
        padding-bottom: 7rem;
    }
    
    /*************
    about
    *************/
    #about .grid-wrap .text-wrap {
        box-sizing: border-box;
        padding: 3rem 2rem;
    }
    #about .text-wrap p br{
        display: none;
    }
    /*************
    specialty
    *************/
    #specialty .point-wrap .grid-wrap{
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    #specialty .point-wrap .card-wrap .card{
        padding-bottom: 2rem;
    }
    #specialty .point-wrap .card-wrap .card:not(:last-of-type){
        margin-bottom: 2rem;
    }
    #specialty .assistance-wrap .grid-wrap{
        padding-top: 14.5rem;
        margin-bottom: 2rem;
    }
    #specialty .assistance-wrap .grid-wrap .img-wrap {
        width: 85%;
        margin-left: auto;
        margin-right: auto;
    }
    #specialty .assistance-wrap .grid-wrap .text-wrap h3{
        font-size: 3.25rem;
        line-height: 1.5;
        width: 9em;
    }
    /*************
    brand
    *************/
    #brand h3{
        line-height: 1.5;
    }
    #brand .text-contents{
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    #brand .text-contents h3{
        width: 9.5em;
        font-size: 2rem;
    }
    #brand .text-contents p br{
        display: none;
    }
    /*************
    flow
    *************/
    #flow .flow-wrap{
        margin-left: -3%;
    }
    #flow .step .img-wrap{
        margin-right: 0;
    }
    /*************
    voice
    *************/
    #voice h2{
        width: 8.5em;
        margin-left: auto;
        margin-right: auto;
    }
    /*************
    shop
    *************/
    #shop .sub-title{

    }
    #shop .sub-title p{
        font-size: 2.5rem;
        line-height: 1.5;
    }
    #shop .sub-title:after {
        left: calc(50% - 1.55rem);
        border: 1.5rem solid transparent;
        border-top: 1.5rem solid var(--color4);
    }
    section#shop h2{
        padding-bottom: 2rem;
    }
    #shop .area-wrap .area-tab .grid-wrap{
        display: block;
    }
    #shop .area-wrap .area-tab dl:not(:last-of-type) {
        margin-bottom: 2rem;
    }
    #shop .area-wrap .area-content dl dt h3 {
        font-size: 1.8rem;
    }
    #shop .area-wrap .area-content dl dd .shop-wrap{
        padding: 2rem;
        margin-bottom: 2rem;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        position: relative;
    }
    #shop .area-wrap .area-content dl dd .shop-wrap h4{
        font-size: 2rem;
        line-height: 1.5;
        margin-bottom: 2.5rem;
        margin-top: 0rem;
        width: 12em;
    }
    #shop .area-wrap .area-content dl dd .shop-wrap .address{
        font-size: 1.6rem;
        line-height: 1.75;
    }
    #shop .area-wrap .area-content dl dd .shop-wrap .other-wrap{

    }
    #shop .area-wrap .area-content dl dd .shop-wrap .tel{
        position: absolute;
        top: 1rem;
        right: 2rem;
        width: max-content;
        margin-left: auto;
        margin-right: 0;
        color: var(--whitecolor);
        background-color: var(--color3);
        box-sizing: border-box;
        padding: 1rem;
        border-radius: 10px;
    }
    #shop .area-wrap .area-content dl dd .shop-wrap .tel a{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
        pointer-events: auto;
    }
    #shop .area-wrap .area-content dl dd .shop-wrap .tel a::before{
        background-image: url(../images/front/shop/ic_tel_wh.svg);
    }
    #shop .area-wrap .area-content dl dd .shop-wrap .tel a span{
        font-size: 0;
    }
    #shop .area-wrap .area-content dl dd .shop-wrap .tel a span:before{
        content: "電話予約";
        font-size: 1.6rem;
        display: block;
        width: 2.1em;
        line-height: 1.25;
    }
    #shop .area-wrap .area-content dl dd .shop-wrap .map{
        font-size: 1.8rem;
    }
    /*************
    faq
    *************/
    #faq dl dt h3 {
        width: 13em;
        line-height: 1.5;
    }
    #faq dl dd{
        padding-right: 0;
    }
    #faq dl dd p{
        text-align: justify;
        font-size: 1.7rem;
    }
    /*************
    footer
    *************/
    footer {
        padding-top: 8rem;
    }
    footer #copyright p{
        width: 28em;
        margin-left: auto;
        margin-right: auto;
    }
}