@charset "UTF-8";

/*-------------------------------------
共通
---------------------------------------*/
#recommend-customize{
  width:100%;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  text-align:center;
  color:var(--color-black);
}
#recommend-customize img{
  margin:auto;
  width:100%;
}

#recommend-customize a{
  color:var(--color-black);
}
#recommend-customize a:hover{
  cursor: pointer;
}
#recommend-customize a.link-txt{
  color:#4472c4;
  text-decoration: underline;
}
#recommend-customize a.link-txt:hover{
  opacity: 0.8;
}

:root{
  --gap-s: 40px;
  --gap-m: 50px;
  --gap-l: 70px;
  --gap-ll: 90px;
  --color-black: #151516;
  --color-green: #68c2c2;
  
  --round-s:20px;
  --round-m:30px;
  --round-l:50px;
  --round-ll:100px;
}
@media screen and (max-width: 767px) {
  :root{
    --gap-s: 20px;
    --gap-m: 25px;
    --gap-l: 35px;
    --gap-ll: 45px;
  
    --round-s:15px;
    --round-m:20px;
  }
}

/*-------------------
エリア・ブロック
---------------------*/
.area-cont{
  padding: var(--gap-l) 0;
}
.contents-inner{
  display:block;
  position:relative;
  margin:auto;
  width:calc(100% - 30px);
  max-width:1140px;
}
.contents-inner-l{
  display:block;
  position:relative;
  margin:auto;
  width:calc(100% - 30px);
  max-width:1260px;
}

/*-------------------
ヘッダ
---------------------*/
#recommend-customize h1,
#recommend-customize h2,
#recommend-customize h3,
#recommend-customize h4{
  font-weight:700;
}

#recommend-customize h2{
  font-size:clamp(16px, 0.909rem + 0.45vw, 20px);
}
#recommend-customize h2 .img{
  width:360px;
  margin:0 auto 25px auto;
}
@media screen and (max-width: 767px) {
  #recommend-customize h2 .img{
    width:260px;
    margin:0 auto 10px auto;
  }
}

/*-------------------
共通テキスト
---------------------*/
p.lead-txt{
  font-size:clamp(14px, 0.784rem + 0.45vw, 18px);
  line-height:1.8;
  font-weight:700;
}
p.lead-txt + p.lead-txt{
  margin-top: var(--gap-s);
}

/*-------------------
POINT
---------------------*/
.point-block{
  margin-top:var(--gap-m);
  position:relative;
  width:100%;
  text-align:left;
}
.point-block dt{
  width:50px;
}
.point-block dd{
  margin-top:10px;
}
/*-------------------------------------
アニメーション
---------------------------------------*/
.fade-in {
  opacity: 0;
  transition-duration: 500ms;
  transition-property: opacity, transform;
}

.fade-delay {
  transition-delay: 500ms;
}

.fade-in-up {
  transform: translate(0, 50px);
}

.fade-in-down {
  transform: translate(0, -50px);
}

.fade-in-left {
  transform: translate(-50px, 0);
}

.fade-in-right {
  transform: translate(50px, 0);
}

.scroll-in {
  opacity: 1;
  transform: translate(0, 0);
}

/*-------------------------------------
KV
---------------------------------------*/
.kv-area{
  display:block;
  position:relative;
  margin:auto;
  width:100%;
}

/*-------------------------------------
introduction
---------------------------------------*/
.introduction-area{
  display:block;
  position:relative;
  margin:auto;
  width:100%;
  background-color:#fff;
  background-image:
    url(../images/bg-introduction-01.webp), url(../images/bg-introduction-02.webp);
  background-size: 500px auto, 500px auto;
  background-repeat: no-repeat, no-repeat;
  background-position:
    bottom left,
    top right;
}

.introduction-area h1{
  font-size:clamp(22px, 1.011rem + 1.82vw, 38px);
}
.introduction-area .illust{
  margin:auto;
  width:200px;
  padding-top: var(--gap-m);
  padding-bottom: 35px;
}

.sns-update-block{
  margin-top:var(--gap-m);
  display:flex;
  align-items: center;
  justify-content: center;
  gap:20px;
}
.update-block{
  font-size:clamp(10px, 0.534rem + 0.45vw, 14px);
  font-weight: 400;
}

@media screen and (max-width: 767px) {
  .introduction-area{
    background-size: 160px auto, 160px auto;
  }
  .introduction-area .illust{
    width:110px;
  }
  .update-block{
    width:100%;
  }
  .sns-update-block{
    flex-direction: column;
    width:100%;
    text-align:left;
  }
}


/*-------------------------------------
INDEX
---------------------------------------*/
.index-area{
  background: var(--color-green);
}
.index-area h2{
  font-size:clamp(20px, 1.114rem + 0.68vw, 26px) !important;
}
.index-nav{
  width:100%;
  margin-top:var(--gap-m);
  display:grid;
  gap:30px;
  grid-template-columns: repeat(3,1fr);
}
.index-nav li a{
  display:block;
  position:relative;
  background:#fff;
  border-radius:var(--round-ll);
  padding-top:20px;
  padding-bottom:40px;
  line-height:1.0;
  border:2px solid var(--color-green);
  font-size:clamp(18px, 1.057rem + 0.34vw, 21px);
  font-weight:700;
}
.index-nav li a::before{
  position:absolute;
  content:'';
  bottom:-15px;
  left: calc(50% - 15px);
  width:30px;
  height:30px;
  background:var(--color-black);
  border-radius:var(--round-s);
  z-index:1;
}
.index-nav li a::after{
  position: absolute;
  content:'';
  bottom:-4px;
  left: calc(50% - 6px);
  width: 12px;
  height: 12px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border-right: 3px solid;
  border-bottom: 3px solid;
  border-color: #fff;
  z-index:1;
}

.index-nav li a:hover{
  box-shadow: 0 8px #5daeae;
  transform: translate(0, -8px);
}
.index-nav li .img{
  margin:0 auto 16px auto;
  width:40%;
  -webkit-filter: brightness(0) saturate(100%) invert(76%) sepia(99%) saturate(211%) hue-rotate(122deg) brightness(80%) contrast(88%);
  filter: brightness(0) saturate(100%) invert(76%) sepia(99%) saturate(211%) hue-rotate(122deg) brightness(80%) contrast(88%);
}

@media screen and (max-width: 767px) {
  .index-nav{
    gap:25px;
    grid-template-columns: repeat(1,1fr);
  }
  
.index-nav li a{
  padding-top:10px;
  padding-bottom:25px;
}
  .index-nav li .img{
    width:90px;
    margin-bottom:8px;
  }
}
/*-------------------------------------
ABOUT
---------------------------------------*/
.about-area{
  background:#ffe9e0;
}

.about-wrap{
  margin-top:var(--gap-l);
  width:100%;
  display:flex;
  justify-content: space-between;
}
.about-wrap .wrap-txt{
  width:47%;
  text-align:left;
}
.about-wrap .wrap-img{
  width:47%;
}
.about-wrap .content-title{
  width:100%;
  display:flex;
  justify-content: space-between;
  align-items:flex-end;
  gap:20px;
  margin-bottom:var(--gap-m);
}
.about-wrap .content-title .illust{
  width:27%;
}
.about-wrap .content-title h3{
  width:calc(73% - 20px);
  font-size:clamp(22px, 1.011rem + 1.82vw, 38px);
  line-height:1.6;
}
@media screen and (max-width: 767px) {
  .about-wrap{
    flex-direction: column;
    gap:50px;
  }
  .about-wrap .wrap-txt{ 
    width:100%;
  }
  .about-wrap .wrap-img{
    width:80%;
    margin:auto;
  }
 .about-wrap .content-title{
    margin: auto auto 30px auto;
    gap:14px;
    align-items:center;
  }
  .about-wrap .content-title h3{
    width:calc(73% - 14px);
  }
}
@media screen and (min-width: 1220px) {
  .about-wrap{
    width:107%;
    gap:7%;
  }
  .about-wrap .wrap-txt{
    width:50%;
  }
  .about-wrap .wrap-img{
    width:50%;
  }
}
/*-------------------
4つのメリット
---------------------*/
.about-merit{
  position:relative;
  margin-top:var(--gap-l);
  width:100%;
  background:#fff;
  border-radius:var(--round-m);
  padding:30px 60px 50px 60px;
}

.about-merit .content-title{
  margin:auto;
  padding-left:160px;
  display:flex;
  gap:20px;
  align-items: center;
  justify-content: center;
}
.about-merit h3{
  font-size:clamp(14px, 0.557rem + 1.59vw, 28px);
}
.about-merit h3 span.merit{
  font-size:clamp(22px, 1.011rem + 1.82vw, 38px);
}
.about-merit .content-title .illust{
  width:140px;
}


.merit-list{
  margin-top:var(--gap-m);
  display:grid;
  gap:20px;
  grid-template-columns: repeat(4,1fr);
}
.merit-list li{
  height:100%;
  display:flex;
  flex-direction: column;
  justify-content: space-between;
}
.merit-list .num{
  width:30px;
  margin:auto;
}
.merit-list h4{
  margin-top:20px;
  font-size:clamp(16px, 0.818rem + 0.91vw, 24px);
}
.merit-list .copy{
  margin-top:20px;
  padding:0 20px;
  font-size:clamp(11px, 0.574rem + 0.57vw, 16px);
  line-height:1.5;
  text-align:left;
}
.merit-list .photo{
  margin-top:50px;
  overflow: hidden;
  border-radius:var(--round-s);
  width:100%;
}


@media screen and (max-width: 767px) {
  .about-merit{
    padding:20px 20px 45px 20px;
    text-align:left;
  } 
 .about-merit .content-title{
    padding-left:0;
    gap:10px;
    text-align: center;
  }
 .about-merit .content-title .illust{
    width:70px;
  }
 .merit-list{
    margin-top:var(--gap-m);
    display:grid;
    gap:20px;
    grid-template-columns: repeat(2,1fr);
  }
  .merit-list .num{
    width:20px;
  }
  .merit-list h4{
    margin-top:10px;
    text-align: center;
  }
  .merit-list .copy{
    margin-top:10px;
    padding:0;
    line-height:1.25;
  }
  .merit-list .photo{
    margin-top:15px;
    border-radius: var(--round-s);
  }
}


/*-------------------------------------
RECOMMEND
---------------------------------------*/
.recommend-area{
  background:#c6efef;
}

.recommend-wrap{
  margin-top:var(--gap-l);
  width:100%;
  display:flex;
  justify-content: space-between;
}
.recommend-wrap .wrap-txt{
  width:47%;
  text-align:left;
}
.recommend-wrap .wrap-img{
  width:47%;
}
@media screen and (max-width: 767px) {
  .recommend-wrap{
    flex-direction: column;
    gap:50px;
  }
  .recommend-wrap .wrap-txt{
    width:100%;
  }
  .recommend-wrap .wrap-img{
    width:100%;
    margin:auto;
  }
}

@media screen and (min-width: 1220px) {
  .recommend-wrap{
    width:107%;
    margin-left:-7%;
    gap:7%;
  }
  .recommend-wrap .wrap-txt{
    width:50%;
  }
  .recommend-wrap .wrap-img{
    width:50%;
  }
}

/*-------------------
RECOMMEND
GUIDE
共通ナビ
---------------------*/
.common-nav{
  width:100%;
  margin:var(--gap-m) auto var(--gap-ll) auto;
  display:grid;
  gap:25px 30px;
  grid-template-columns: repeat(2,1fr);
}
.common-nav li a{
  width:100%;
  display:block;
  position:relative;
  background:#fff;
  border-radius: var(--round-ll);
  padding-top:1em;
  padding-bottom:1em; 
  line-height:1.0;
  font-size:clamp(12px, 0.545rem + 1.02vw, 21px);
  font-weight:700;
}
.common-nav li a::after{
  position:absolute;
  content:'';
  top:calc(50% - 6px);
  right: 30px;
  width:12px;
  height:12px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border-right: 3px solid;
  border-bottom: 3px solid;
  border-color: var(--color-green);
}
.common-nav li a:hover{
  border: 2px solid var(--color-green);
  box-shadow: 0 8px rgba(0, 0, 0, 0.1);
  transform: translate(0, -8px);
}

@media screen and (max-width: 767px) {
  .common-nav{
    gap:12px;
    grid-template-columns: repeat(1,1fr);
  }
  .common-nav li a::after{
    top:calc(50% - 4px);
    right: 15px;
    width:8px;
    height:8px;
    border-right: 2px solid;
    border-bottom: 2px solid;
    border-color: var(--color-green);
  }
}

/*-------------------
recommend-block
おススメブロック
---------------------*/
.recommend-block{
  margin-top:var(--gap-m);
  position:relative;
  width:100%;
  background:#f6f6f6;
  padding:50px 60px 40px 60px;
  border-radius: var(--round-m);
}
.recommend-block h3{
  font-size:clamp(20px, 0.841rem + 2.05vw, 38px);
  line-height:1.3;
}

.recommend-block .fukidashi{
  width:486px;
  margin:20px auto;
  -webkit-filter: brightness(0) saturate(100%) invert(76%) sepia(99%) saturate(211%) hue-rotate(122deg) brightness(80%) contrast(88%);
  filter: brightness(0) saturate(100%) invert(76%) sepia(99%) saturate(211%) hue-rotate(122deg) brightness(80%) contrast(88%);
}
.recommend-list{
  display:flex;
  gap:30px;
  justify-content: center;
}
.recommend-list > li{
  position:relative;
  width:calc((100% - 60px) / 3);
  background:#fff;
  border-radius: var(--round-s);
  padding:20px;
}
.recommend-list > li:not(:first-child)::after{
  position:absolute;
  content:'';
  bottom:calc(50% - 23px);
  left:-38px;
  width:46px;
  height:46px;
  z-index:1;
  background: transparent url(../images/ico-plus.webp) no-repeat center center / cover;
}



.recommend-list .img{
  margin:auto;
  width:120px;
  background:#ffe9e0;
  overflow: hidden; 
  border-radius: var(--round-s);
}
.recommend-list .title{
  margin-top:30px;
  font-size:clamp(16px, 0.818rem + 0.91vw, 24px);
  font-weight:700;
}
.recommend-list .copy{
  margin:20px auto 0 auto;
  width:60%;
  font-size:clamp(12px, 0.659rem + 0.45vw, 16px);
  line-height:1.5;
}

@media screen and (max-width: 767px) {
  .recommend-block{
    padding:30px 20px 35px 20px;
  }
  .recommend-block .fukidashi{
    width:300px;
    margin:15px auto;
  }
  .recommend-list{
    flex-direction: column;
    gap:20px;
  }
  .recommend-list > li{
    width:100%;
    display:flex;
    justify-content: space-between;
    align-items: center;
  }
  .recommend-list > li:not(:first-child)::after{
    bottom:auto;
    right:auto;
    top:-25px;
    left:calc(50% - 15px);
    width:30px;
    height:30px;
  }
  .recommend-list .img{
    width:80px;
    border-radius: var(--round-s);
  }
  .recommend-list .txt{
    width:calc(100% - 80px);
    text-align:left;
    padding-left:20px;
  }
  .recommend-list .title{
    margin-top:0;
  }
  .recommend-list .copy{
    margin-top:10px;
    width:100%;
  }
}


/*-------------------------------------
GUIDE
---------------------------------------*/
.guide-area{
  background:#f8d96f;
}

.guide-wrap{
  margin-top:var(--gap-l);
  width:100%;
  display:flex;
  justify-content: space-between;
}
.guide-wrap .wrap-txt{
  width:47%;
  text-align:left;
}
.guide-wrap .wrap-img{
  width:47%;
}
@media screen and (min-width: 1220px) {
  .guide-wrap{
    width:107%;
    gap:7%;
  }
  .guide-wrap .wrap-txt{
    width:50%;
  }
  .guide-wrap .wrap-img{
    width:50%;
  }
}
@media screen and (max-width: 767px) {
  .guide-wrap{
    flex-direction: column;
    gap:50px;
  }
  .guide-wrap .wrap-txt{ 
    width:100%;
  }
  .guide-wrap .wrap-img{
    width:80%;
    margin:auto;
  }
}

.guide-block{
  margin-top:var(--gap-ll);
}
.guide-block h3{
  font-size:clamp(20px, 0.841rem + 2.05vw, 38px);
  line-height:1.3;
}
.guide-block .fukidashi{
  width:486px;
  margin:20px auto;
}
@media screen and (max-width: 767px) {
  .guide-block .fukidashi{
    width:300px;
    margin:15px auto;
  }
}
/*-------------------
カスタマイズスライダー
---------------------*/
.guide-block-slide{
  overflow: hidden;
  padding-bottom:20px
}
.custom-slider{
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  text-align:left;
}
.custom-slider .swiper-container{
  width: 100%;
  margin: 0 auto 80px;
  position: relative;
  overflow: visible;
}
.custom-slider .swiper-slide{
  width: 500px;
  height: auto;
  padding: 30px;
  background: #fff;
  border-radius: var(--round-m);
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.custom-slider-thumb{
  margin: 25px auto;
  border-radius: var(--round-s);
  overflow: hidden;
}
.custom-slider h4{
  font-size: clamp(26px, 1.58rem + 0.23vw, 28px);
}
.custom-slider h4 small{
  font-size: clamp(14px, 0.83rem + 0.23vw, 16px);
}
.custom-slider .copy{
  flex-grow: 1;
  font-size: clamp(12px, 0.705rem + 0.23vw, 14px);
  font-weight:400;
  line-height: 1.7;
}
.slider-link {
  margin-top: auto;
  display: flex;
  gap: 20px;
  justify-content: flex-end;
  margin-left:30%;
}
.slider-link .c-button{
  height: 40px;
  border-radius: var(--round-l);
  background:#ececec;
}
.slider-link .c-button--primary-blue::before {
  background-color: #68c2c2;
  opacity: 1;
}

.slider-link .c-button--primary-blue::after {
  border-color: #484848 !important;
}
.slider-link .c-button--auto{
  width: auto;
  flex: auto;
  padding-right: 25px;
}
.custom-slider-button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(98, 98, 98, 0.5);
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 1;
  backdrop-filter: blur(5px);
  position: absolute;
  bottom: -80px;
}
.custom-slider-button::after {
  content: '';
  width: 30%;
  height: 30%;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translate(-12.5%, 12.5%);
}
.custom-slider-button--next {
  right: 0;
  transform: rotate(45deg);
}
.custom-slider-button--prev {
  right: 80px;
  transform: rotate(-135deg);
}
.custom-slider-button.swiper-button-disabled {
  background: rgba(220, 220, 220, 0.5);
  cursor: default;
}
@media screen and (max-width:767px){
  .custom-slider{
     width: calc(100% - 30px); 
  }
  .custom-slider .swiper-slide{
    padding: 20px;
    gap: 20px;
  } 
 .custom-slider-thumb{
    margin: 20px auto;
  }
  .slider-link{
    gap: 5px;
    margin-left:10%;
  }
  .slider-link .c-button{
    padding-right: 10px;
    font-size: 3.2vw;
    height: 8.53vw;
  }
  .slider-link .c-button::after{
    right: 11.31px;
  }
}


/*-------------------------------------
FAQ
---------------------------------------*/

.faq-area{
  background:#f6f6f6;
}

.faq-area h2{
  margin-bottom:var(--gap-s);
}

.faq-wrap{
  margin-top:var(--gap-s);
  border-radius: var(--round-m);
  padding:60px;
  background:#fff;
  text-align:left;
}
.faq-menu{
  width:100%;
}
.faq-menu:not(:first-child){
  border-top:2px dotted #cacaca;
}
.faq-menu summary{
  position:relative;
  padding:30px;
  display:flex;
  align-items: center;
  cursor:pointer;
}
.faq-menu summary::before{
  position: absolute;
  content: '';
  width: 18px;
  height: 3px;
  top: calc(50% - 1.5px);
  right: 19px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  background: var(--color-green);
}
.faq-menu summary::after {
  position: absolute;
  content: '';
  width: 3px;
  height: 18px;
  top: calc(50% - 9px);
  right: 27px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  background: var(--color-green);
}

.faq-area details[open] summary::after{
  transform: rotate(90deg);
  transition: 0.3s all;
}
.faq-menu summary .icon{
  width:60px;
}
.faq-menu summary p{
  width:calc(100% - 60px);
}

.faq-content{
  background:#f6f6f6;
  border-radius: var(--round-s);
  padding:20px;
  margin-bottom:30px;
}
.faq-content p{
  font-size:clamp(12px, 0.659rem + 0.45vw, 16px);
  font-weight:400;
  line-height:1.6;
}

.faq-table caption{
  font-weight:700;
  margin-bottom:10px;
  color:#2f9494;
}
.faq-table{
  margin:20px;
  width:calc(100% - 40px);
  font-size: clamp(12px, 0.659rem + 0.45vw, 16px);
  font-weight: 400;
  line-height: 1.6;
}
.faq-table th{
  padding:10px;
  border:1px solid #ccc;
  background:var(--color-green);
  width:30%;
  text-align:center;
  font-size: clamp(12px, 0.659rem + 0.45vw, 16px)!important;
  font-weight: 400;
  line-height: 1.6;
}
.faq-table td{
  padding:10px;
  border:1px solid #ccc;
  background:#fff;
  font-weight:400;
  width:70%;
  font-size: clamp(12px, 0.659rem + 0.45vw, 16px)!important;
  font-weight: 400;
  line-height: 1.6;
}


@media screen and (max-width:767px){
  .faq-wrap{
    padding:30px 10px;
  }
  .faq-content{
    padding:15px 10px;
    margin-bottom:20px;
  }
  .faq-menu summary{
    padding:20px 10px;
  }
  .faq-menu summary::before{
    right: 2px;
  }
  .faq-menu summary::after {
    right: 10px;
  }
  .faq-menu summary .icon{
    width:40px;
  }
  .faq-menu summary p{
    width:calc(100% - 70px);
  }
}

/*-------------------------------------
HOWTO
---------------------------------------*/
.howto-area{
  background:#fff;
}

.howto-step{
  margin-top:var(--gap-s);
  display:grid;
  gap:30px;
  grid-template-columns: repeat(3,1fr);
}

.howto-step .num{
  position:relative;
  background:#fad8c9;
  padding:25px;
}
.howto-step li:not(:last-child) .num::after{
  position:absolute;
  content:'';
  top:0;
  right:-19px;
  width:20px;
  height:100%;
  background:#fad8c9;
  clip-path: polygon(0% 0%, 1px 0%, 100% 50%, 1px 100%, 0% 100%);
}
.howto-step .num .img{
  width:38%;
  margin:auto;
}
.howto-step .image{
  border:1px solid #cbcbcb;
  margin:30px 0 20px 0;
}
.howto-step p{
  text-align:left;
}

@media screen and (max-width:767px){
  .howto-step{
    grid-template-columns: repeat(1,1fr);
  }
  .howto-step li:not(:last-child) .num::after{
    display:none;
  }
}
/*-------------------------------------
LINEUP
---------------------------------------*/
.lineup-area{
  background:#eee;
}
.lineup-wrap{
  margin-top:var(--gap-s);
  display:grid;
  gap:30px;
  grid-template-columns: repeat(3,1fr);
}
.lineup-wrap li{
  padding:20px;
  border-radius: var(--round-m);
  background:#fff;
}
.lineup-wrap .lineup-title{
  font-weight:700;
  font-size: clamp(20px, 1.159rem + 0.45vw, 24px);
}
.lineup-wrap .c-button--secondaryA-blue{
  margin-top:10px;
  width:100%;
  font-weight:700;
  color:#fff !important;
  background:var(--color-green);
  border-radius: var(--round-l);
}

@media screen and (max-width:767px){
  .lineup-wrap{
    grid-template-columns: repeat(1,1fr);
  }
}