@charset "UTF-8";


/*======design css3============*/



/*mobile common*/
@media screen and (max-width:768px){





/*タイトル*/

.title-h1{
display: block;
box-sizing:border-box;
width: 100%;
margin-bottom: 2rem;
padding:0.3rem;
border-top:4px solid var(--accent-color);
border-bottom:4px solid var(--accent-color);
background:var(--main-color);
}

.title-h1 > h1{
width: 100%;
padding:0.5rem;
padding-left:4rem;
border-top:2px dashed var(--sub-accent-color);
border-bottom:2px dashed var(--sub-accent-color);
color:var(--base-color);
position:relative;
}

.title-h1 > h1::before{
display:block;
content:"";
width:1.5rem;
height:1.5rem;
background-image:url("../pic/cat-fot.svg");
background-position:center;
background-size:contain;
position:absolute;
top:50%;
transform:translate(0,-50%);
left:1rem;
}

/*
.title-h1 > h1::after{
display:block;
position:absolute;
content:"";
left:-8px;
top:-10px;
border-width:0 0 16px 16px;
border-color:#fff #fff #baaa96;
border-style:solid;
}
*/

.title-h2{
display:grid;
grid-template-columns:1fr;
justify-items:center;
box-sizing:border-box;
align-items:center;
width:80%;
margin:0 auto;
margin-top:4rem;
margin-bottom:2rem;
text-align:center;
position:relative;
}

.title-h2 > h2{
padding:1rem;
width:80%;
letter-spacing:0.3rem;
margin:0 auto;
line-height:1.5;
}

.title-h2::before,.title-h2::after{
display:block;
content:"";
width:3rem;
height:3rem;
position:absolute;
}

.title-h2::before{
border-top:2px solid var(--main-color);
border-left:2px solid var(--main-color);
left:0rem;
top:-0.3rem;
}

.title-h2::after{
border-bottom:2px solid var(--main-color);
border-right:2px solid var(--main-color);
right:0;
bottom:-0.3rem;
}

.title02-h2{
display:grid;
grid-template-columns:1fr;
justify-items:center;
box-sizing:border-box;
align-items:center;
position:relative;
width:50%;
margin:0 auto;
margin-top:4rem;
margin-bottom:2rem;
line-height:1.5;
position:relative;
}

.title02-h2 > h2{
box-sizing:border-box;
letter-spacing:0.3rem;
margin:0 0.5rem;
line-height:1.5;
}

.title02-h2::before,.title02-h2::after{
display:block;
content:"";
position:absolute;
background:var(--main-color);
width:40%;
height:2px;
}

.title02-h2::before{
left:-40%;
}

.title02-h2::after{
right:-40%;
}




.title03-h2{
box-sizing:border-box;
width:98%;
margin-inline:auto;
margin-top:4rem;
margin-bottom:4rem;
border-top:2px solid var(--accent-color);
border-bottom:2px solid var(--accent-color);
}

.title03-h2 > h2{
padding:0.5rem;
line-height:1.5;
}


/*
.title03-h2{
box-sizing:border-box;
display:grid;
grid-template-columns:1fr 60% 1fr;
align-items:center;
justify-items:center;
justify-content:center;
width:98%;
margin:0 auto;
margin-top:4rem;
margin-bottom:4rem;
}

.title03-h2::before,
.title03-h2::after{
content:"";
min-width:80%;
height:2px;
background:var(--accent-color);
}


.title03-h2 > h2{
margin-inline:auto;
line-height:1.5;
}
*/



/*title end*/



.top-nav a span:nth-of-type(2){
display:none;
}


/*arrow*/
.side-nav li::before{
display:block;
content:"\eaaa";
font-family: "Material Icons";
font-size:2rem;
vertical-align: middle;
color:var(--sub-color);
position:absolute;
top:50%;
left:8px;
transform:translate(0,-50%);
z-index:2;
}




/*---------表-----------*/
.hyo{
display:grid;
grid-template-columns:1fr;
grid-auto-rows:auto;
box-sizing:border-box;
width:96%;
margin:0 auto;
margin-top:5rem;
gap:0;
border-top:1px solid gray;
border-left:1px solid gray;
border-right:1px solid gray;
}

.hyo dt{
box-sizing:border-box;
padding:0.5rem 0.5rem;
border-bottom:1px solid gray;
background: var(--thin-gray-color);
}

.hyo dd{
box-sizing:border-box;
width:100%;
padding:0.5rem 0;
border-bottom:1px solid gray;
padding-left:0.5rem;
}
/*---------表 end-----------*/


/*------グループリスト ul li a-------*/

.grp-wrapper{
box-sizing:border-box;
width:100%;
margin-inline:auto;
border:1px solid gray;
padding:1rem;
}

.grp-wrapper > li{
width:100%;
margin-bottom:0.5rem;
}

.grp-wrapper > li:last:child{
margin-bottom:0;
}

.grp-wrapper > li > a{
display:block;
box-sizing:border-box;
width:100%;
padding:1rem;
background:var(--sub-accent-color);
}

.grp-wrapper > li > a:hover{
background:var(--accent-color);
}

.grp-wrapper > li > ul > li{
box-sizing:border-box;
width:calc(100% - 4rem);
padding:1rem;
margin-left:4rem;
background:var(--thin-sub-accent-color);
border-bottom:1px dashed gray;
}

.grp-wrapper > li > ul > li:last-child{
border-bottom:none;
}

/*------グループリスト end-------*/





/*===========day-flow start==============*/

.day-flow-wrapper{
box-sizing:border-box;
width:100%;
padding:0.5rem;
border:1px solid gray;
}

.day-cnr{
box-sizing:border-box;
position:relative;
}

.day-cnr li{
display:grid;
grid-template-columns:28% 1fr;
grid-auto-rows:80px;
align-items:center;
margin-bottom:0rem;
}

.day-cnr li > span{
box-sizing:border-box;
justify-self:start;
padding-left:1rem;
  font-family: "Damion", serif;
  font-weight: 400;  
  font-style: normal;
font-size:clamp(1rem, calc(0.8518518518518519rem + 0.7407407407407408vw), 1.5rem);  
}

.day-cnr li > div{
box-sizing:border-box;
padding:1.5rem 0;
padding-left:2rem;
background:var(--df-color01);
border:1px solid gray;
border-radius:8px;
position:relative;
}

.day-cnr li > div::before{
content:"";
display:block;
width:4px;
height:calc(1rem + 100%);
background:#c96666;
position:absolute;
top:0;
left:-7%;
}

.day-cnr li:last-child > div::before{
content:"";
display:block;
width:4px;
height:50%;
background#c96666;
position:absolute;
bottom:0;
left:-7%;
}

.day-cnr li:first-child > div::before{
content:"";
display:block;
width:4px;
height:100%;
background:#c96666;
position:absolute;
top:50%;
left:-7%;
}

.day-cnr li > div::after{
content:"";
width:20px;
height:20px;
background:#c96666;
position:absolute;
left:calc(-7% - 8px);
top:calc(25% + 0.5rem);
border-radius:50%;
}



/*===========day-flow  end==============*/




/*===========week-flow start==============*/

.ampm{
display:none;
}

.week-cnr{
display:grid;
grid-template-rows:repeat(7,1fr);
grid-template-columns:1fr;
margin:0 auto;
width:98%;
gap:4px;
}

.week-item{
display:grid;
grid-template-rows:60px 60px;
grid-template-columns:15% 15% 1fr;
justify-content:center;
align-content:center;
gap:4px;
width:100%;
}

.week-item > div{
box-sizing:border-box;
display:grid;
grid-template-rows:1fr;
grid-template-columns:1fr;
justify-items:center;
align-items:center;
font-size:clamp(0.75rem, calc(0.589rem + 0.71vw), 1.125rem);
height:100%;
width:100%;
}

/*month*/
.week-item > div:nth-of-type(1){
grid-column:1/2;
grid-row:1/3;
background:var(--wf-color02);
color:var(--base-color);
}

/*am*/
.week-item > div:nth-of-type(2){
grid-column:2/3;
grid-row:1/2;
background:var(--wf-color03);
color:var(--base-color);
}


/*am work*/
.week-item > div:nth-of-type(3){
grid-column:3/4;
grid-row:1/2;
background:var(--wf-color01);
}

/*pm*/
.week-item > div:nth-of-type(4){
grid-column:2/3;
grid-row:2/3;
background:var(--sub-accent-color);
color:var(--base-font-color);
}

/*pm work*/
.week-item > div:nth-of-type(5){
grid-column:3/4;
grid-row:2/3;
background:var(--wf-color01);
}

/*holiday*/
/*month*/
.hld > div:nth-of-type(1){
grid-column:1/2;
grid-row:1/3;
background:var(--wf-color02);
color:var(--base-color);
}

/*am*/
.hld > div:nth-of-type(2){
grid-column:2/3;
grid-row:1/2;
}


/*am work*/
.hld > div:nth-of-type(3){
grid-column:3/4;
grid-row:1/3;
}

/*pm*/
.hld > div:nth-of-type(4){
grid-column:2/3;
grid-row:2/3;
}



/*===========week-flow end==============*/






/*=========コメント============*/
.coment{
display:grid;
grid-template-columns:2rem 1fr;
box-sizing:border-box;
width:100%;
margin-inline:auto;
margin-top:4rem;
padding:0.5rem;
border:4px dotted gray;
border-radius:8px;
column-gap:1rem;
}

.coment > p{
grid-column:2/3;
}

.coment::before{
display:block;
content:"";
width:2rem;
height:2rem;
grid-column:1/2;
grid-row:1/2;
background:url("../pic/kiji-icon.svg") no-repeat;
}
/*=========コメント end============*/

/*=========year-flow start========*/

.year-flow-wrapper{
box-sizing:border-box;
margin-top:4rem;
width:100%;
padding:0.5rem;
background:var(--accent-color);
border-radius:8px;
}

.year-cnr{
box-sizing:border-box;
display:grid;
grid-template-columns:60% 1fr;
grid-auto-rows:60px auto;
width:100%;
margin:0 auto;
margin-top:0.5rem;
margin-bottom:0.5rem;
justify-content:center;
background:var(--base-color);
}

.year-cnr p{
box-sizing:border-box;
display:grid;
align-items:center;
padding-left:1rem;
padding-right:1rem;
margin-bottom:0;/*baseでmargin-bottom:2remにしているので、ここでは0に戻す*/
}

.year-cnr > p:nth-of-type(2n+1){
grid-column:1/2;
grid-row:auto/ span 1;
background:var(--base-color);
font-size:clamp(1.125rem, 0.989rem + 0.68vw, 1.5rem);
}

.year-cnr > p:nth-of-type(2n+1)::after{
content:"";
bottom:0;
left:0;
width:96%;
height:1px;
background:gray;
}

.year-cnr > p:nth-of-type(2n+2){
grid-column:1/2;
grid-row:auto/ span 1;
padding-bottom:0.5rem;
background:var(--base-color);
font-size:clamp(0.75rem, calc(0.589rem + 0.71vw), 1.125rem);
}

.year-cnr img{
box-sizing:border-box;
width:100%;
grid-column:2/3;
grid-row:auto/ span 2;
object-Fit:cover;
align-self:center;
}


/*=========year-flow end========*/



/*========price card==========*/

.card-cnr{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
gap:1rem;
}

.card{
display:grid;
grid-template-rows:subgrid;
grid-row:span 6;
grid-template-columns:1fr;
border-radius:10px 0 10px 0;
box-shadow:2px 2px 4px 2px #cccccc;
}

.card h1{
box-sizing:border-box;
padding:0.5rem;
font-size:clamp(0.75rem, calc(0.589rem + 0.71vw), 1.125rem);
background:var(--main-color);
color:var(--base-color);
border-radius:8px 0 0 0;
line-height:1.4;
grid-column:1 / 2;
}

.card > p{
line-height:1.5;
margin-bottom:0;/*baseでmargin-bottom:2remにしているので、ここでは0に戻す*/
}


.card p:nth-of-type(1){
padding:0.2rem;
font-size:clamp(0.625rem, calc(0.5178571428571428rem + 0.4761904761904762vw), 0.875rem);
grid-column:1 / 2;
}

.card img{
grid-column:1/2;
width:100%;
outline:1px solid white;
outline-offset:-8px;
}

/*size*/
.card p:nth-of-type(2){
grid-column:1 / 2;
padding:0.2rem;
display:grid;
grid-template-columns:1fr auto;
font-size:clamp(0.625rem, calc(0.5178571428571428rem + 0.4761904761904762vw), 0.875rem);
}


.card p:nth-of-type(2) span::before{
content:"サイズ ";
}

.ctg{
grid-column:1 / 2;
}


.ctg span{
box-sizing:border-box;
background:var(--sale-catg-bk);
color:var(--base-color);
border-radius:4px;
padding:0.2rem;
margin-left:0.2rem;
font-size:clamp(0.625rem, calc(0.5178571428571428rem + 0.4761904761904762vw), 0.875rem);
}



.kakaku{
box-sizing:border-box;
display:grid;
grid-template-columns:1fr auto;
align-items:center;
color:var(--price-color);
padding:0.5rem 0.5rem 0.5rem 0;
grid-column:1 / 2;
margin:0;
padding-left:0.5rem;
}

.kakaku > span{
font-size:clamp(0.75rem, calc(0.6759259259259259rem + 0.3703703703703704vw), 1rem);
}

.kakaku > span::before{
content:"価格 ";
font-size:clamp(0.75rem, calc(0.6759259259259259rem + 0.3703703703703704vw), 1rem);
}
/*========price card end==========*/






/*------pic 3column-------------*/

.pic3-col{
box-sizing:border-box;
display:grid;
grid-template-columns:1fr;1
grid-template-rows:1fr;
width:100%;
margin-top:4rem;
row-gap:10px;
}

.pic3-col img{
object-fit:cover;
width:100%;
outline:1px solid white;
outline-offset:-6px;
}
/*------pic 3column end-------------*/


/*============pic 3column coment===========*/

.pic-cmt{
box-sizing:border-box;
display:grid;
grid-template-columns:1fr;
grid-template-rows:1fr;
width:100%;
margin-top:4rem;
column-gap:10px;
}

.pic-cmt > div{
box-sizing:border-box;
display:grid;
grid-template-columns:1fr;
grid-template-rows:auto min(4rem);
align-items:start;
}

.pic-cmt img{
object-fit:cover;
width:100%;
outline:1px solid white;
outline-offset:-6px;
}

.pic-cmt > div > div{
line-height:1.4;
}


/*============pic 3column coment end===========*/




/*============活動内容総合================*/

.avt-wrapper{
box-sizing:border-box;
width:100%;
padding:1rem;
margin-top:4rem;

}

.avt{
box-sizing:border-box;
display:grid;
grid-auto-rows:100px;
grid-template-columns:1fr;
gap:8px;
width:100%;
}

.avt a{
box-sizing:border-box;
display:grid;
grid-auto-rows:1fr;
grid-template-columns:1fr;
justify-content:center;
background:var(--ac-color01);
width:100%;
position:relative;
}

.avt a::before{
content:"";
position:absolute;
top:0;
left:0;
width: 0;
height: 0;
border-style: solid;
border-color: var(--ac-color06) transparent transparent transparent;
border-width: 4rem 4rem 0px 0px;
}



.avt a p{
display:grid;
grid-auto-rows:1fr;
font-size:clamp(1rem, 0.989rem + 0.68vw, 1.5rem);
justify-content:center;
align-items:center;
margin-bottom:0;/*baseでmargin-bottom:2remにしているので、ここでは0に戻す*/
}

.avt a:nth-of-type(1){
background:var(--ac-color01);
}

.avt a:nth-of-type(2){
background:var(--ac-color02);
}

.avt a:nth-of-type(3){
background:var(--ac-color03);
}

.avt a:nth-of-type(4){
background:var(--ac-color04);
}

.avt a:nth-of-type(5){
background:var(--ac-color05);
outline:2px solid white;
outline-offset:-10px;
}

.avt a:nth-of-type(5) p{
color:var(--base-color);
}

.avt a:nth-of-type(6){
background:var(--ac-color05);
outline:2px solid white;
outline-offset:-10px;
}

.avt a:nth-of-type(6) p{
color:var(--base-color);
}

.avt a:nth-of-type(7){
background:var(--ac-color05);
outline:2px solid white;
outline-offset:-10px;
}

.avt a:nth-of-type(7) p{
color:var(--base-color);
}

.avt a:hover{
background:var(--base-color);
}

.avt a:hover p{
color:var(--base-font-color);
}


/*============活動内容総合 end================*/


/*=========how to use==================*/

.use{
width:100%;
}

.use li{
width:100%;
margin-bottom:1rem;
}

.use-cnt{
display:grid;
grid-template-columns:1fr;
grid-template-rows:auto 70px 1fr;
gap:0.5rem;
}

.use-cnt > div{
box-sizing:border-box;
grid-column:1/2;
grid-row:1/2;
justify-self:center;
align-self:center;
background:var(--ac-color05);
border-radius:50%;
padding:1.5rem;
outline:2px solid white;
outline-offset:-10px;
color:var(--main-color);
}

.use-cnt > div span{
display:grid;
justify-content:center;
font-size: clamp(1rem, calc(0.8518518518518519rem + 0.7407407407407408vw), 1.5rem);
font-family: "Righteous", sans-serif;
font-weight: 400;
font-style: normal;
color:white;
}

.use-cnt h4{
grid-column:1/2;
grid-row:2/3;
justify-self:center;
align-self:center;
font-size:clamp(1.5rem, calc(1.462962962962963rem + 0.1851851851851852vw), 1.625rem);
}

.use-cnt p{
box-sizing:border-box;
grid-column:1/2;
grid-row:3/4;
margin-bottom:0;
padding:1rem 0.5rem;
border-top:2px solid var(--ac-color05);
}


/*=========how to use end==================*/

/*=========== faq  ==============*/
/*
.faq{
box-sizing:border-box;
display:grid;
grid-template-columns:1fr;
grid-auto-rows:100px 1fr;
align-items:center;
width:100%;
gap:1rem;
padding-left:20%;
}

.faq dt{
border:1px solid gray;
padding:1.5rem 1rem;
position:relative;
background:var(--thin-gray-color);
}

.faq dd{
padding:1.5rem 1rem;
position:relative;
}

.faq dt::before{
display:block;
position:absolute;
content:"Q";
left:-6rem;
top:50%;
transform:translate(0,-50%);
font-size:2rem;
background:var(--ac-color05);
outline:1px solid white;
outline-offset:-4px;
color:white;
border-radius:50%;
width:3rem;
height:3rem;
text-align:center;
line-height:1.3;
}

.faq dd::before{
display:block;
position:absolute;
content:"A";
left:-6rem;
top:50%;
transform:translate(0,-50%);
font-size:2rem;
background:var(--accent-color);
outline:1px solid white;
outline-offset:-4px;
color:white;
border-radius:50%;
width:3rem;
height:3rem;
text-align:center;
line-height:1.3;
}
*/
/*=========== faq  end==============*/



/*=================FAQ details=================*/

details,summary{
margin:0;
padding:0;
}

details[open] summary + p{
background:var(--thin-gray-color);
}

summary{
box-sizing:border-box;
width:100%;
border:1px solid gray;
margin-bottom:1rem;
padding:0.5rem;
line-height:1.5;
display: block;
font-size:clamp(1rem, 0.909rem + 0.45vw, 1.25rem);	
cursor:pointer;
transition:0.2s;
}

summary:hover{
cursor:pointer;
background:var(--accent-color);
}


summary::-webkit-details-marker {
display: none;
}

.summ-in{
display:grid;
grid-template-columns:2rem 1fr max-content;
align-items:center;
line-height:1.5;
}

.summ-in::before{
display:block;
content:"Q";
color:var(--main-color);
  font-family: "Damion", serif;
  font-weight: 400;
  font-style: normal;
}

details > p{
display:grid;
grid-template-columns:2rem 1fr;
box-sizing:border-box;
align-items:center;
margin-left:1rem;
}

details > p::before{
display:block;
content:"A";
color:var(--main-color);
font-size:clamp(1rem, calc(0.8518518518518519rem + 0.7407407407407408vw), 1.5rem);
  font-family: "Damion", serif;
  font-weight: 400;
  font-style: normal;
}

.summ-in > span{
font-size:clamp(1rem, calc(0.8518518518518519rem + 0.7407407407407408vw), 1.5rem);
transition:transform 0.5s;
color:var(--main-color);
}

details[open] .summ-in > span{
transform-origin:center center;
transform:scale(1,-1);
}

summary + p{
box-sizing:border-box;
padding:1rem;
}

/*=================FAQ details end=================*/





/*=================FAQ=================*/

/*ul*/
.faq{
box-sizing:border-box;
width:100%;
}

.faq li{
box-sizing:border-box;
width:100%;
padding:1rem 0;
margin-bottom:2rem;
border:1px solid gray;
line-height:1;
}

/*h4 question*/
.q-title{
box-sizing:border-box;
width:90%;
margin:0 0 0 auto;
padding:0 1rem 0 1rem;
line-height:1.3;
position:relative;
cursor:pointer;
}

.q-title::before{
box-sizing:border-box;
display:block;
content:"";
width:20px;
height:2px;
background:var(--main-color);
position:absolute;
left:-10%;
top:50%;
transform:translate(0,-50%);
}


.q-title::after{
box-sizing:border-box;
display:block;
content:"";
width:2px;
height:20px;
background:var(--main-color);
position:absolute;
left:calc(-10% + 10px);
top:50%;
transform:translate(0,-50%);
transition:all 1s 0s ease;
}


/*anser div*/
.a-cnt{
display:none;
}

.a-cnt p{
box-sizing:border-box;
width:90%;
margin:2rem 0 0 auto;
padding:0 1rem 0 1rem;
position:relative;
border-left:4px solid var(--accent-color);
}


/*close*/
.q-title.close::after{
/*content:"\02212";*/
/*16進法「-」*/
transform:translateY(-10px) rotate(-90deg);
}

/*=================FAQ end=================*/


/*=========== site-map  ==============*/


.st-mp{
width:100%;
box-sizing:border-box;
margin-inline:auto;
padding:0.5rem;
border:1px solid gray;
background:var(--site-map-color);
}

.st-mp li a{
position:relative;
}

.st-mp li a{
display:block;
box-sizing:border-box;
width:100%;
padding:1rem;
padding-left:3rem;
background:var(--base-color);
border-bottom:1px dotted gray; 
}

.st-mp li > ul li{
display:block;
box-sizing:border-box;
margin-left:4rem;
width:calc(100% - 4rem);
}

.st-mp li > ul li a{
display:block;
box-sizing:border-box;
padding-left:3rem;
position:relative;
}

/*arrow*/
.st-mp li a::before,.st-mp li > ul li a::before{
display:block;
content:"\eaaa";
font-family: "Material Icons";
font-size:1rem;
vertical-align: middle;
color:var(--main-color);
position:absolute;
top:50%;
left:0.5rem;
transform:translate(0,-50%);
z-index:2;
}



/*=========== site-map end ==============*/





}
/*=====@media print,screen and (max-width:768px))===== end*/