@charset "UTF-8";

/*------------------------pg_column base---------------------------*/
article{
padding-bottom:6rem;
background:var(--theme3);
}
article > section{
}
 article > section > .inner{
}



/*------------------------pg_about---------------------------*/
.about_pagename{}
.about_pagename .pagename{}
.about_intro{
padding:4rem 0;
background:var(--theme3);
}
.about_intro h2{
line-height:1.5;
margin-bottom:2rem;
color:var(--theme1);
}
.about_intro .figure_box{
border-radius:2rem;
/*
padding:2rem;
background:#fff;
*/
}
.about_intro h3{
text-align:center;
font-size:100%;
}
.about_intro .list{
display:grid;
grid-template-columns:1fr 1fr;
gap:2rem;
margin-top:1rem;
}
.about_intro .list figure img{
border-radius:0.5rem;
}
.about_intro .list figcaption{
margin-top:0.5rem;
font-size:90%;
line-height:1.3;
}
@media screen and (max-width:767px){
.about_intro h2{
font-size:115%;
}
.about_intro .figure_box{
margin-top:2rem;
}
}
@media screen and (min-width:768px){
.about_intro{
padding:6rem 0;
}
.about_intro .inner{
display:flex;
gap:4rem;
}
.about_intro h2{
font-size:180%;
}
.about_intro .txt_box{
width:60%;
}
.about_intro .txt_box h3{
}
.about_intro .txt_box p{
}
.about_intro .figure_box{
width:40%;
}
.about_intro .list{
/*padding:2rem;
background:#fff;
*/}
}


.about_point{
/*padding:4rem 0;*/
padding:2rem 0;
background:var(--theme3);
}
.about_point h2{
font-size:150%;
line-height:1.5;
color:var(--theme1);
}
.about_point h3{
font-size:125%;
line-height:1.5;
margin-bottom:2rem;
font-family:var(--maru);
font-weight:700;
/*color:var(--theme1);*/
}
.about_point .point_list li+li{
margin-top:1.5rem;
}
.about_point .point_list li{
display:flex;
align-items:center;
line-height:1.5;
}
.about_point .point_list .num{
width:1em;
flex-shrink:0;
font-size:250%;
line-height:1;
font-weight: 700;
font-family:var(--maru);
color:var(--theme1);
margin-top:-0.5rem;

}
.about_point .point_list .num:after{
content:'.';
}

@media screen and (max-width:767px){
.about_point .inner{
}
.about_point .point_list{
margin-top:2rem;
padding:2rem;
border-radius:2rem;
background:#fff;
}
}
@media screen and (min-width:768px){
.about_point .inner{
display:flex;
align-items:center;
padding:3rem 4rem;
border-radius:2rem;
background:#fff;
}
.about_point .ttl_box{
width:38rem;
}
.about_point .ttl_box h3{
line-height:2;
margin:2rem 0 4rem;
}
}


.about_trouble{
padding:2rem 0 4rem;
background:var(--theme3);
}
.about_trouble h3{
text-align:center;
font-size:150%;
line-height:1.5;
margin-bottom:2rem;
font-family:var(--maru);
font-weight:700;
/*color:var(--theme1);*/
}
.about_trouble ul{
display:flex;
position: relative;
justify-content:center;
}
.about_trouble li{
position:relative;
width:25%;
aspect-ratio:1/1;
background-image:radial-gradient(circle at center,rgba(142,113,108,0.5) 50%, transparent 70%);
background-repeat:no-repeat;
background-position:center center;
background-size:contain;
}
.about_trouble ul li:nth-child(1){top:-4rem;}
.about_trouble ul li:nth-child(4){top:-4rem;}
.about_trouble li:nth-child(3) img{
width:70%;
}
.about_trouble li figure{
width:100%;
height:100%;
display: flex;
align-items:center;
justify-content:center;
}
.about_trouble li figcaption{
text-align:center;
font-family:var(--maru);
font-weight:500;
position:absolute;
left:0;
bottom:-2rem;
width:100%;
}

@media screen and (max-width:767px){
}
@media screen and (min-width:768px){
.about_trouble{
padding:6rem 0;
}
.about_trouble ul{
gap:3rem;
}
.about_trouble li{
position:relative;
width:15rem;
}
.about_trouble ul li:nth-child(1){top:-6rem;}
.about_trouble ul li:nth-child(4){top:-6rem;}

}


.about_catch{
padding:4rem 0;
background:var(--theme1);
color:#fff;
}
.about_catch p{
}
.about_catch figure{
width:70%;
margin:1rem auto 0;
}
.about_catch h3{
text-align:center;
font-size:150%;
margin-bottom:2rem;
font-family:var(--maru);
font-weight:700;
}

@media screen and (max-width:767px){
}
@media screen and (min-width:768px){
.about_catch{
padding:6rem 0;
}
.about_catch p{
text-align: center;
}
.about_catch figure{
width:25%;
}
}


.about_step3{
padding:4rem 0;
background:var(--theme2);
}
.about_step3 .ttl_box{
margin-bottom:2rem;
}
.about_step3 .ttl_box h3{
text-align:center;
font-weight:700;
font-size:150%;
line-height:1.5;
font-family:var(--maru);
}
.about_step3 .ttl_box h3 strong{
font-size:125%;
}
.about_step3 .step_box{
display:grid;
gap:2rem;
}
.about_step3 .box{
background:#fff;
border-radius:2rem;
border:0.5rem #fff solid;
padding:2rem;
}
.about_step3 .label{
display:flex;
width:6em;
height:3.4rem;
line-height:3.4rem;
margin-left:-2.7rem;
padding:0 0.5em 0 0.5em;
background: var(--theme5);
border-radius:0.5rem 1.7rem 1.7rem 0.5rem;
font-weight:500;
font-size:90%;
font-family:var(--maru);
color:#fff;
}
.about_step3 .label span{
padding-left:0.25em;
font-size:200%;
font-weight:700;
}
.about_step3 h3{
margin:0 0 1rem;
font-size:200%;
text-align:center;
font-family:var(--maru);
}
.about_step3 h4{
font-size:110%;
}
@media screen and (max-width:767px){
.about_step3 .step_box{
grid-template-columns:1fr;
}
.about_step3 h4{
margin:0.5em 0;
}
}
@media screen and (min-width:768px){
.about_step3{
padding:6rem 0;
}
.about_step3 .ttl_box{
display:flex;
gap:2rem;
align-items:center;
justify-content:center;
width:100%;
text-align:center;
}
.about_step3 .ttl_box figure{
width:40%;
}
.about_step3 .ttl_box h3{
white-space:nowrap;
font-size:200%;
}
.about_step3 .step_box{
grid-template-columns:1fr 1fr 1fr;
}
.about_step3 h4{
display:flex;
align-items:center;
height:4em;
}

}


.about_sign{
padding:4rem 0;
background:#fff;
}
.about_sign figure{
width:30%;
margin:0 0 0 auto;
}
.about_sign h2{
margin-bottom:2rem;
text-align:center;
font-size:125%;
line-height:1.5;
color:var(--theme1);
}
@media screen and (max-width:767px){
}
@media screen and (min-width:768px){
.about_sign{
padding:6rem 0;
}
.about_sign h2{
font-size:140%;
}
.about_sign figure{
width:15rem;
margin:-2rem 0 -2rem auto;
}
}


.about_voice{
padding:4rem 0;
background:var(--theme1);
}
.about_voice h2{
margin-bottom:2rem;
text-align:center;
font-size:125%;
line-height:1.5;
color:#fff;
}
.about_voice h3{
margin-bottom:1rem;
text-align:center;
font-size:100%;
line-height:1.5;
color:#fff;
}
.about_voice .voice_box{
}
.about_voice .voice_box .box+.box{
margin-top:2rem;
}
.about_voice .voice_box .box{
background:#fff;
padding:2rem;
border-radius:2rem;
}
.about_voice .voice_box h4{
padding:0.5rem 0;
font-size:100%;
border-bottom:2px var(--theme1) dotted;
}
.about_voice .voice_box .txt{
margin-top:1rem;
}
.about_voice .voice_box .user{
margin-top:0.5rem;
}
.about_voice .voice_box .item{
margin-top:0.5rem;
}
.about_voice .voice_box .item::before{
content:'使用商品';
background:var(--theme5);
color:#fff;
font-weight:500;
font-size:90%;
line-height:1;
border-radius:0.25rem;
padding:0.1em 0.5em;
margin-right:0.5em;
}
@media screen and (max-width:767px){
}
@media screen and (min-width:768px){
.about_voice{
padding:6rem 0;
}
.about_voice h2{
font-size:180%;
line-height:1.5;
}
.about_voice h3{
margin-bottom:1rem;
font-size:125%;
}
.about_voice .voice_box .box{
padding:3rem 6rem;
}
.about_voice .voice_box h4{
font-size:110%;
}

}


.seller{
padding:4rem 0 0;
background:var(--theme3);
}
.seller .top_txt{
text-align:center;
margin-bottom:2rem;
}
@media screen and (max-width:767px){
}
@media screen and (min-width:768px){
.seller{
padding:6rem 0 0;
}
}



/*------------------------pg_agingcare intro---------------------------*/
.agingcare_pagename{
background:#fff;
}
.agingcare_pagename .pagename{
padding:2rem 0;
background:#7dbce3;
text-align:center;
color:#fff;
}
.agingcare_pagename figure{
padding:2rem 0;
}
.agingcare_pagename figure img{
width:auto;
max-width:100%;
margin:0 auto;
}
.agingcare_intro h3{
margin-bottom:1rem;
font-size:150%;
line-height:1.5;
color:var(--theme1);
font-family:var(--maru);
}
.agingcare_intro{
padding:4rem 0;
background:var(--theme3);
}
@media screen and (max-width:767px){
  .agingcare_intro figure{
  width:70%;
  margin:1rem auto 0;
  }
}
@media screen and (min-width:768px){
  .agingcare_intro .inner{
  position:relative;
  }
  .agingcare_intro p{
  width:65%;
  }
  .agingcare_intro figure{
  position: absolute;
  right:5%;
  top:0;
  width:25%;
  }
}

.agingcare_sct01{
padding:2rem 0;
}
.agingcare_sct01 h3{
margin-bottom:1rem;
font-size:150%;
line-height:1.5;
color:var(--theme1);
font-family:var(--maru);
}
.agingcare_sct01 .list{
display:grid;
margin-top:2rem;
border-radius:2rem;
background:#fff;
}
.agingcare_sct01 .list h4{
font-weight:700;
font-family:var(--maru);
color:#1987ca;
}
@media screen and (max-width:767px){
  .agingcare_sct01 .list{
  grid-template-columns:1fr;
  padding:2rem;
  }
  .agingcare_sct01 .list li+li{
  margin-top:2rem;
  padding-top:2rem;
  border-top:3px #eee solid;
  }
  .agingcare_sct01 .list h4{
  padding:0 2rem;
  }
  .agingcare_sct01 .list p{
  padding:0 2rem;
  }
  .agingcare_sct01 figure{
  width:80%;
  margin:1rem auto 0;
  }
}
@media screen and (min-width:768px){
  .agingcare_sct01 .list{
  grid-template-columns:1fr 1fr 1fr;
  gap:2rem;
  padding:3rem 6rem;
  }
  .agingcare_sct01 figure{
  width:90%;
  margin:1rem auto 0;
  }
}

.agingcare_sct02 h3{
margin-bottom:1rem;
font-size:150%;
line-height:1.5;
color:var(--theme1);
font-family:var(--maru);
}
.flora_function h4{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
display:flex;
align-items:center;
justify-content:center;
aspect-ratio:1/1;
background-image:radial-gradient(circle at center,#f8cbad 50%, transparent 70%);
background-repeat:no-repeat;
background-position:center center;
background-size:contain;
text-align:center;
font-weight:500;
line-height:1.5;
font-family:var(--maru);
}
.flora_function .tab{
width:100%;
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:center;
}
.flora_function .tab li{
display:flex;
align-items:center;
justify-content:center;
aspect-ratio:1/1;
background-image:radial-gradient(circle at center,rgba(255,230,153,0.5) 50%, transparent 70%);
background-repeat:no-repeat;
background-position:center center;
background-size:contain;
text-align:center;
font-weight:500;
font-family:var(--maru);
}
.flora_function .tab li.active{
background-image:radial-gradient(circle at center,rgba(255,230,153,1) 50%,transparent 70%);
}
.flora_function .show dl dt{
font-weight:700;
}
.flora_function .show dl{
width:60%;
padding:1rem;
background:#fff;
border-radius:1rem;
position: absolute;
font-size:90%;
line-height:1.3;
display: none;
}
.flora_function .show dl:nth-child(1){left:-1rem;top:27%;}
.flora_function .show dl:nth-child(2){right:-1rem;top:27%;}
.flora_function .show dl:nth-child(3){left:-1rem;top:61%;}
.flora_function .show dl:nth-child(4){right:-1rem;top:61%;}
.flora_function .show dl:nth-child(5){left:-1rem;top:90%;}
.flora_function .show dl:nth-child(6){right:-1rem;top:90%;}
@media screen and (max-width:767px){
.agingcare_sct02{
padding:2rem 0;
}
.flora_function{
position:relative;
aspect-ratio:44/44;
width:100%;
}
.flora_function h4{
width:35%;
}
.flora_function .tab li{
width:35%;
}
.flora_function .tab li:nth-child(3){
margin:-1rem 15% -1rem 0;
}
.flora_function .tab li:nth-child(4){
margin:-1rem 0 -1em 15%;
}
}
@media screen and (min-width:768px){
.agingcare_sct02 .inner{
position:relative;
padding-left:48rem;
min-height:34rem;
}
.agingcare_sct02 h3{
padding-top:6rem;
}
.flora_function{
position:absolute;
left:0;
top:0;
width:44rem;
}
.flora_function h4{
width:13rem;
}
.flora_function .tab{
aspect-ratio:38/34;
width:38rem;
margin:0 auto;
}
.flora_function .tab li{
width:13rem;
}
.flora_function .tab li:nth-child(3){
margin:-2rem 6rem -2rem 0;
}
.flora_function .tab li:nth-child(4){
margin:-2rem 0 -2em 6rem;
}

}

.agingcare_end{
padding:2rem 0;
}
.agingcare_end h3{
margin-bottom:1rem;
font-size:150%;
line-height:1.5;
color:var(--theme1);
font-family:var(--maru);
}
.agingcare_end .btn_box{
margin-top:4rem;
}
.agingcare_end .btn{
letter-spacing:0.01em;
}
@media screen and (max-width:767px){
.agingcare_end .btn{
background-position:right 5% center;
}
}
@media screen and (min-width:768px){
.agingcare_end .btn{
background-position:right 10% center;
}
}



/*------------------------pg_usage---------------------------*/
.usage_pagename{
padding:2rem 0;
background:#7dbce3;
text-align:center;
}
.usage_pagename .pagename{
color:#fff;
}
.usage_intro{
padding-bottom:2rem;
background:#fff;
}
.usage_intro p{
padding:1rem 0;
}
.usage_intro p span,
.usage_intro p strong{
color:#398ec3;
}
.usage_basic,
.usage_basicpoint,
.usage_practical,
.usage_feature{
overflow:hidden;
margin-top:4rem;
border-radius:2rem;
background:#fff;
}
.usage_basicpoint{
position:relative;
margin-top:2rem;
}
.usage_practical .localnav ul{
display:flex;
flex-wrap:wrap;
padding:2rem;
}
.usage_practical .localnav a{
padding-left:1em;
margin-left:-1em;
}
.usage_practical .localnav li::after{
transform:translateY(-70%) translateX(10%) rotate(135deg);
}
.usage_basic h3,
.usage_practical h3{
padding:1.5rem;
background:var(--theme1);
text-align:center;
font-size:120%;
line-height:1.3;
font-family:var(--maru);
color:#fff;
}
.usage_basic .type_box{
}
.usage_basic .type_box .box,
.usage_practical .practical{
padding:3rem 2rem;
}
.usage_practical .practical{
border-top:1px #ddd solid;
}
.usage_basic .type,
.usage_practical .ttl_box{
text-align:center;
}
.usage_basic .type h4,
.usage_practical .practical h4{
font-size:150%;
font-family:var(--maru);
}
.usage_basic .type p,
.usage_practical .ttl_box p{
padding:1rem 0;
text-align:center;
color:var(--theme1);
}
.usage_practical h5{
padding:1rem;
background:#fff4f4;
border-radius:1rem;
text-align:center;
font-size:100%;
line-height:1.3;
font-family:var(--maru);
}
.usage_practical .type_box li>*+*{
margin-top:1rem;
}
.usage_basic .type figure,
.usage_practical .type_box figure{
display:flex;
gap:1rem;
align-items:center;
justify-content:center;
}
.usage_practical .type_box figure figcaption{
max-width:50%;
font-size:80%;
}
.usage_basic .type figure img,
.usage_practical .type_box figure img{
width:auto;
height:8rem;
}
.usage_basic .flow_item{
margin-top:1rem;
border:1px var(--theme5) solid;
border-radius:1rem;
overflow:hidden;
}
.usage_basic .flow_item h5{
padding:0.5rem 0;
background:var(--theme5);
text-align:center;
font-size:100%;
font-family:var(--maru);
color:#fff;
}
.usage_basic .flow_item ul{
display:flex;
justify-content:center;
width:100%;
padding:2rem 0;
}
.usage_basic .flow_item li{
}
.usage_basic .flow_item li+li::before{
content:'';
display:block;
width:0;
height:0;
margin:4.5rem 0.5rem;
border-style:solid;
border-top:1.25rem solid transparent;
border-bottom:1.25rem solid transparent;
border-left:1rem solid var(--theme5);
border-right:0;
}
.usage_basic .flow_item li{
display:flex;
align-items:flex-end;
height:12rem;
}
.usage_basic .flow_item li .cream{height:40%;}
.usage_basic .flow_item li img{
width:auto;
height:100%;
}
.usage_basic .flow,
.usage_practical .type_box ul{
padding:2rem 0;
line-height:1.5;
}
.usage_basic .flow h5,
.usage_practical .type_box h6{
margin-bottom:0.25rem;
font-weight:700;
font-size:100%;
font-family:var(--maru);
color:var(--theme5);
}
.usage_basic .flow h5 .num,
.usage_practical .type_box .num{
display:flex;
width:4.5em;
height:2.4rem;
line-height:2.4rem;
margin-left:-0.5rem;
margin-bottom:0.5rem;
padding:0 1rem 0 1rem;
background:var(--theme5);
border-radius:0.25rem 1.2rem 1.2rem 0.25rem;
font-weight:500;
font-size:100%;
color:#fff;
}
.usage_practical #hand .type_box .num{
display:inline-block;
width:1.5em;
height:1.5em;
line-height:1.5em;
margin-left:0;
margin-right:0.25em;
padding:0;
border-radius:50%;
text-align:center;
font-size:90%;
}
.usage_basic .flow h5 .num::before,
.usage_practical .type_box .num::before{
content:'Step';
margin-right:0.25rem;
font-size:80%;
}
.usage_practical #hand .type_box .num::before{
display:none;
}
.usage_basic .flow p+h5,
.usage_basic .flow p+p{
margin-top:1rem;
}
.usage_practical .type_box .point.kome,
.usage_practical .type_box strong{
color:var(--theme1);
font-weight:700;
}
.usage_practical .type_box .strong{
font-weight:400;
color:var(--theme1);
}
.usage_practical .type_box em{
color:var(--theme5);
font-weight:700;
}
.usage_basic .flow .kome,
.usage_practical .type_box .kome{
font-size:90%;
}
.usage_practical .type_box .point.kome::before{
content:'＊';
}
.usage_basicpoint h4{
margin-bottom:0.25rem;
font-weight:500;
font-size:110%;
font-family:var(--maru);
color:var(--theme5);
}
.usage_basicpoint h4 strong{
font-size:110%;
}
.usage_basicpoint figure{
position:absolute;
}
.usage_feature h3{
padding:1rem 0;
background:#7dbce3;
text-align:center;
font-size:120%;
font-family:var(--maru);
color:#fff;
}
.usage_feature .feature ul{
display:grid;
margin:0 auto;
}
@media screen and (max-width:767px){
  .usage_intro{
  width:100%;
  overflow:hidden;
  }
  .usage_intro h3{
  aspect-ratio:750/250;
  width:110%;
  height:auto;
  margin:0 -5%;
  }
  .usage_intro h3 img{
  object-fit:cover;
  width:100%;
  height:100%;
  }
  .usage_practical .localnav li{
  width:50%;
  font-size:90%;
  }
  .usage_basic h3 span{
  display:block;
  }
  .usage_basic .type_box .box+.box{
  border-top:1px #ddd solid;
  }
  .usage_basicpoint{
  padding:2rem;
  }
  .usage_basicpoint p{
  margin-top:1rem;
  }
  .usage_basicpoint figure{
  right:2rem;
  top:4rem;
  width:30%;
  }
  .usage_practical .type_box li+li{
  margin-top:2rem;
  }
  .usage_feature .feature{
  padding:2rem;
  }
  .usage_feature .feature ul{
  grid-template-columns:1fr 1fr;
  gap:2rem;
  width:100%;
  }
}
@media screen and (min-width:768px){
  .usage_intro p{
  text-align:center;
  }
  .usage_practical .localnav ul{
  justify-content:center;
  gap:0 2em;
  padding:2rem;
  }
  .usage_basic h3 span{
  padding-left:1em;
  }
  .usage_basic .type_box,
  .usage_practical .type_box ul{
  display:flex;
  justify-content:space-between;
  }
  .usage_basic .type_box .box,
  .usage_practical .type_box li{
  position:relative;
  flex:1;
  }
  .usage_practical .type_box li{
  padding:0 1.5rem;
  }
  .usage_basic .type_box .box+.box::before,
  .usage_practical .type_box li+li::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  display:block;
  width:1px;
  height:100%;
  background:#ddd;
  }
  .usage_basicpoint{
  display:flex;
  gap:1rem;
  padding:3rem 4rem;
  }
  .usage_basicpoint h4{
  flex-shrink:0;
  width:30%;
  }
  .usage_basicpoint p{
  }
  .usage_basicpoint figure{
  position:absolute;
  left:17rem;
  bottom:1rem;
  width:10rem;
  }
  .usage_practical #baby .type_box li:nth-child(3) figure{
  height:100%;
  }
  .usage_practical #baby .type_box li:nth-child(3) figure img{
  height:15rem;
  }
  .usage_practical #ray .type_box li:nth-child(1){
  flex-grow:2;
  }
  .usage_feature .feature{
  padding:4rem 6rem;
  }
  .usage_feature .feature ul{
  grid-template-columns:1fr 1fr 1fr;
  gap:3rem;
  width:80%;
  }
}



/*------------------------pg_voice---------------------------*/
.voice_intro .pagename{
display:flex;
align-items:center;
width:100%;
letter-spacing:0.25em;
}
.voice_intro .pagename::before,
.voice_intro .pagename::after{
content:'';
background-repeat:no-repeat;
background-position:center center;
background-size:contain;
}
.voice_intro .pagename::before{
background-image:url(../img/ill/ill048.png);
}
.voice_intro .pagename::after{
background-image:url(../img/ill/ill049.png);
}
@media screen and (max-width:767px){
  .voice_intro{
  padding:2rem 0;
  }
  .voice_intro .pagename{
  justify-content:space-between;
  height:8rem;
  margin-bottom:1rem;
  font-size:150%;
  }
  .voice_intro .pagename::before{
  width:15%;
  height:100%;
  }
  .voice_intro .pagename::after{
  width:25%;
  height:100%;
  }
}
@media screen and (min-width:768px){
  .voice_intro{
  padding:4rem 0;
  }
  .voice_intro .pagename{
  justify-content:center;
  height:10rem;
  margin-bottom:3rem;
  font-size:200%;
  }
  .voice_intro .pagename::before,
  .voice_intro .pagename::after{
  width:30%;
  height:8rem;
  margin:0 1rem;
  }
  .voice_intro p{
  text-align:center;
  }
}