@charset "UTF-8";
/* CSS Document */

:root{
  --base_clr:#333333;
  --base_fnt:-apple-system, BlinkMacSystemFont,"Hiragino Kaku Gothic ProN", "Yu Gothic", "メイリオ", sans-serif;
  --fnt_yu:"Yu Gothic", "游ゴシック体", YuGothic,var(--base_fnt);
  
  --clr_org:#ff6900;
  --clr_ylw:#fff831;
  --clr_red:#cd0000;
  --btn_grn:#00cb43;
  --marker_ylw:linear-gradient(rgba(255,233,130,0)55%,rgba(255,233,130,1)55%);
  --wall_grn:#daf5db;
  --wall_gry:#f7f7f7;
}
html{
  scroll-behavior: smooth;
}
body{
   font-family: var(--base_fnt);
  font-weight: 400;
  width: 100%;
  background: #ededed;
  font-size: min(23px,3.5vw);
  color: var(--base_clr);
  word-break: break-word;
  overflow-x: hidden;
  
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

.fnt_yu{
  font-family: var(--fnt_yu);
  font-weight: 500;
}
.fc_ylw{
  color: var(--clr_ylw);
}
.fc_org{
  color: var(--clr_org);
}
#container{
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
  width: min(750px,100%);
  -ms-overflow-style: none;
  scrollbar-width: none;
  background: #fff;
  margin-left: auto;
  margin-right: auto;
}
#container::-webkit-scrollbar {
  display: none;
}
.cta-button{
  width: 100%;
}
.cta-button a{
  width: 100%;
  display: grid;
  height: min(100px,13vw);
  background: var(--btn_grn);
  place-content:center;
  border-radius: min(14px,1.8vw);
  color: #fff;
  font-size: min(40px,calc(100vw/18));
  text-align: center;
  font-feature-settings: "palt";
  letter-spacing: .05em;
  overflow: hidden;
}
.cta-button a::before{
  animation: shine 3s ease-in-out infinite;
  background-color: #fff;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: -50px;
  transform: rotate(45deg);
  width: 15px;
}
/*header +++++++++++++++++++++++++++++*/

.header_iner{
  padding: min(15px,2vw);
}
.head_title .sub{
  padding-left: 1em;
  font-size: min(16px,2.5vw);
    font-weight: 600;
}
.head_title .logo{
  width: min(310px,45vw);
  margin-top: 5px;
}

/*animation +++++++++++++++++++++++++++++*/
@keyframes shine{
0% {
    transform: scale(0) rotate(45deg);
    opacity: 0;
}
80% {
    transform: scale(0) rotate(45deg);
    opacity: .5;
}
81% {
    transform: scale(4) rotate(45deg);
    opacity: 1;
}
100% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
}
}
/*main +++++++++++++++++++++++++++++*/
main{
  flex:1;
}
.inner{
  padding-left: min(25px,2.5vw);
  padding-right: min(25px,2.5vw);
}
.sec-title{
  font-size: min(48px,calc(100vw/15));
  text-align: center;
  font-weight: 700;
  letter-spacing: .05em;
  text-indent: .05em;
}
.box-title{
  font-size: min(36px,calc(100vw/22));
  font-weight: 700;
  text-align: center;
  color: var(--clr_org);
  letter-spacing: .05em;
  text-indent: .05em;
}
/*hero +++++++++++*/
#hero{
  background: linear-gradient(-100deg,#f4f3f1,#fdfdfd);
  padding-top: min(20px,2.5vw);
}
.hero_title{
  display: block;
  width: min(600px,80vw);
  margin-left: auto;
  margin-right: auto;
}
.hero_medal{
  position: absolute;
  bottom: 0;
  left: 50%;
  translate:-50% 0;
  width: 100%;
  padding-bottom: 14px;
  
}
.hero_medal ul{
  width: min(714px,95vw);
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:10px;
}
.hero_medal .att{
  position: absolute;
  bottom: 7px;
  right: 7px;
  font-size: min(18px,3.8vw);
  font-weight: 500;
}
/*content +++++++++++*/
#content{
  margin-top: min(45px,6vw);
}
/*cta ++++++++++*/
.sec-cta-blc{
  font-weight: 700;
  display: grid;
  justify-items:center;
  gap:min(18px,2.4vw);
  padding-bottom: min(45px,6vw);
}
.cta-text{
  font-size: min(34px,calc(100vw/21));
  padding-left: .5em;
  padding-right: 1em;
}
.cta-text::before
,.cta-text::after{
  content: "";
  width: 1px;
  height: 1.15em;
  background: currentColor;
  position: absolute;
  bottom: 0;
  
}
.cta-text::before{
  left: 0;
  rotate:-30deg;
}
.cta-text::after{
  right: 0;
  rotate:30deg;
}
.cta-text span{
  color: var(--clr_org);
  background: var(--marker_ylw);
}
.cta-att{
  text-align: center;
  font-weight: 500;
  font-size: min(24px,calc(100vw/28));
  line-height: 1.4;
}
/*recommend ++++++++++*/
.sec-recommend-blc{
  background: var(--wall_gry);
  padding-top: min(70px,9vw);
  padding-bottom: min(80px,9vw);
}
.recommend_title{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  -ms-align-items: center;
  align-items: center;
  font-weight: 600;
  font-size: min(30px,calc(100vw/25));
  letter-spacing: .025em;
  line-height: 1.4;
  gap:3px;
}
.recommend_title .hash{
  padding-left: 1em;
  padding-right: 1.05em;
}
.recommend_title .hash::before
,.recommend_title .hash::after{
  content: "／";
  position: absolute;
  bottom: 0;
  font-weight: 400;
}
.recommend_title .hash::before{
  scale:1 -1;
  left: 0;
}
.recommend_title .hash::after{
  right: 0;
}
.recommend_list{
  margin-top: min(60px,8vw);
  font-size: min(26px,calc(100vw/28));
  font-weight: 600;
}
.recommend_list li{
  padding-left: 1.35em;
  line-height: 1.6;
}
.recommend_list li:nth-child(n+2){
  margin-top: 5px;
}
.recommend_list li::before{
  content: "";
  width: .7em;
  aspect-ratio:1;
  background-image: url(../images/check.svg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
}
/*step ++++++++++*/
.sec-step-blc{
   padding-top: min(80px,9vw);
   padding-bottom: min(80px,9vw);
}
#step-slider{
  width: min(490px,65vw);
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}
.step-title{
  text-align: center;
  font-weight: 700;
  font-size: min(54px,calc(100vw/15));
  line-height: 1.4;
}
.step-title span.num{
  font-size: 1.5em;
}
.step-slide-wrap{
  margin-top: min(50px,6.6vw);
}
.step-slide-item .num-title{
  display: grid;
  grid-template-columns: 1.8em auto;
  font-size: min(30px,calc(100vw/21));
  -ms-align-items: center;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  gap:.5em;
}
.step-slide-item picture{
  display: block;
  margin-top: min(30px,4vw);
}
.step-navigation,
.voice-navigation{
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(660px,90vw);
  translate:-50% -50%;
  display: flex;
  pointer-events: none;
}
.step-navigation button,
.voice-navigation button{
  width: min(26px,3.4vw);
  aspect-ratio:1/1.9737;
  padding: 0;
  pointer-events: auto;
  transition:all .3s ease;
}
.step-navigation button.swiper-button-disabled,
.voice-navigation button.swiper-button-disabled{
  opacity: 0;
  visibility: hidden;
}
.step-navigation button img{
  object-fit: cover;
  height: 100%;
  width: 100%;
  object-position: center;
}
.step-navigation .step-button-prev,
.voice-navigation .voice-button-prev{
  scale:-1 1;
}
.step-navigation .step-button-next,
.voice-navigation .voice-button-next{
  margin-left: auto;
}

/*reason +++++++++++*/
.sec-reason-blc{
  background-color: var(--wall_gry);
  padding-top: min(70px,9vw);
  padding-bottom: min(80px,9vw);
}
.reason-title{
  font-size: min(43px,calc(100vw/17));
  text-align: center;
  font-weight: 700;
}
.reason-title .logo{
  color:transparent;
  font-size: 1.15em;
}
.reason-title .logo::after{
  content: "";
  width: 100%;
  aspect-ratio:1/0.0867;
  background-image: url("../images/logo_title.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: absolute;
  left: 0;
  top: 50%;
  translate:0 -50%;
}
.reason-title .num{
  font-size: 1.186em;
}
.reason-list{
  margin-top: min(50px,6.6vw);
  width: min(590px,78vw);
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap:min(100px,13vw) min(80px,10vw);
}
.reson_item dt h3{
  background: var(--clr_org);
  color: #fff;
  display: grid;
  font-size: min(37px,calc(100vw/20));
  height: 1.76em;
  place-content:center;
  font-weight: 600;
  border-radius: min(16px,2.13vw);
}
.reson_item dd{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  -ms-align-items: center;
  align-items: center;
  margin-top: min(35px,4.6vw);
}
.reson_item dd .icon{
  width: min(133px,52%);
  aspect-ratio:1;
}
.reson_item dd .icon img{
  object-fit: contain;
  object-position: center;
  height: 100%;
}
.reson_item dd .in-text{
  margin-top: min(35px,4.6vw);
  font-size: min(27px,calc(100vw/27));
  font-family: var(--fnt_yu);
  line-height: 1.2;
  letter-spacing: .025em;
}
/*worry +++++++++*/
.sec-worry-blc{
  background-color: var(--wall_grn);
  padding-top: min(60px,8vw);
}
.worry-title{
  text-align: center;
  font-size: min(48px,calc(100vw/15));
  font-weight: 700;
  padding-bottom: min(45px,6vw);
}
.worry_list {
  background: #fff;
  padding: min(48px,6vw) min(30px,4vw);
  border-radius: min(14px,2.25vw);
}
.worry_list li{
  font-size: min(36px,calc(100vw/20));
  font-weight: 600;
  padding-left: 2em;
  line-height: 1.2;
}
.worry_list li:nth-child(n+2){
  margin-top: 1em;
}
.worry_list li::before{
  content: "";
  width: 1.3em;
  aspect-ratio:1/1.17;
  background-image: url("../images/icon_worry.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 50%;
  translate:0 -50%;
}

.worry_message{
  margin-top: max(-20px,-4vw);
  display: grid;
/*  width: min(600px,85vw);*/
  display: grid;
  -ms-align-items: center;
  align-items: center;
  justify-content: center;
  grid-template-columns: 37% auto;
  font-size: min(36px,calc(100vw/22));
  line-height: calc(48/36);
  margin-left: auto;
  margin-right: auto;
  
}
.worry_message p{
  font-family: var(--fnt_yu);
  font-weight: 700;
}

/*movie*/
.sec-movie-blc{
  padding-top: min(80px,9vw);
  padding-bottom: min(70px,8vw);
  padding-left: min(45px,6vw);
  padding-right: min(45px,6vw);
}
.box-movie-intro{
  font-size: min(42px,calc(100vw/18));
  font-weight: 700;
}
.box-movie-intro::before{
  content: "";
  background-image: url("../images/thumb_yt.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  aspect-ratio:1/1.0968;
  width: min(300px,40vw);
  position: absolute;
  bottom: 0;
  right: max(-45px,-6vw)
}
.yt-title {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  gap:min(25px,3.5vw);
  
  line-height: 1.2;
}
.yt-title .logo{
  width: min(350px,46vw);
}
.box-movie-intro .name{
   margin-top: 10px;
}
.box-movie-intro .name span{
  font-size: 0.5332em;
  padding-right: .5em;  
}
.box-movie-player{
  margin-top: min(45px,6vw);
}
#player-container::after{
  content: "";
  pointer-events: none;
  width: min(80px,20vw);
  aspect-ratio:1;
  background-image: url("../images/icon-play.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  translate:-50% -50%;
  transition:all .3s ease;
}
#player-container.is-playing::after{
  opacity: 0;
  visibility: hidden;
}
.player{
  aspect-ratio:1/0.5625;
  cursor: pointer;
}
.player iframe{
  object-fit: cover;
  height: 100%;
  width: 100%;
  object-position: center;
}
.box-movie-player .data{
  background-color: var(--wall_gry);
  margin-top: min(45px,6vw);
}
.box-movie-player .data p{
  padding: min(20px,3vw) min(30px,3vw);
  font-size: min(1em,3.15vw);
  line-height: 1.6;
}

/*case +++++*/
.sec-case-blc{
  padding:min(65px,7vw) min(50px,6vw) min(80px,9vw);
  background-color: var(--wall_gry);
}
.box-case_staff{
  margin-top: min(30px,4vw);
}
.staff-voice{
  display: grid;
  margin-top: min(30px,4vw);
  grid-template-columns: 1fr 1fr 1fr;
  gap:min(30px,3vw);
}
.staff-voice > li{
  display: grid;
  grid-template-rows: subgrid;
  grid-area: span 3;
  gap:1em;
  font-size: min(15px,3vw);
}
.staff-voice > li .in-text{
  text-align: justify;
  font-feature-settings: "palt";
  letter-spacing: .05em;
  line-height: 1.2;
}
.staff-voice > li .data{
  text-align: right;
  line-height: 1.2;
}
.staff-voice > li .data span{
  padding-right: 1.5em;
}

.box-case_list{
  margin-top: min(45px,6vw);
}
.case-list{
  margin-top: min(30px,4vw);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:min(60px,8vw) min(15px,2vw);
}
.case-list li > dl{
  margin-top: min(15px,2vw);
  padding-left: min(8px,1.5vw);
  padding-right: min(8px,1.5vw);
  display: grid;
  grid-template-columns: 5em auto;
  gap:min(8px,1.5vw) 0;
  font-family: var(--fnt_yu);
  -ms-align-items: center;
  align-items: center;
}
.case-list li dd.price{
  font-weight: 700;
  color: var(--clr_red);
}
.case-list li dd.price span{
  font-size: 1.2856em;
}
/*faq ++++++++++*/
.sec-faq-blc{
  margin-top: min(65px,7vw);
  padding-bottom: min(90px,12vw);
}
.sec-faq-blc .sec-cta-blc{
  padding-bottom: min(80px,9vw);
}
.js-acd-list dt{
  cursor: pointer;
}
.js-acd-list dd {
  display: none;
}
.js-acd-list dt::before
,.js-acd-list dd::before{
  font-weight: 700;
  position: absolute;
  color: var(--item-clr);
  background: var(--item-wall);
  border: 1px solid var(--clr_org);
  width: 1.75em;
  aspect-ratio:1;
  top: -.5em;
  left: 0;
  display: grid;
  place-content:center;
}
.js-acd-list dt::before{
  content: "Q";
  --item-wall:var(--clr_org);
  --item-clr:#fff;
}
.js-acd-list dd::before{
  content: "A";
  --item-wall:#fff;
  --item-clr:var(--clr_org);
}
.faq-list{
  padding-left: min(50px,6vw);
  padding-right: min(50px,6vw);
  margin-top: min(60px,8vw);
  font-size: min(24px,3.2vw);
  line-height: 1.2;
}
.faq-list dd + dt{
  margin-top: min(60px,8vw);
}
.faq-list dt{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: flex-start;
}
.faq-list dt h3{
  font-weight: 700;
  padding-left: 2.25em;
  padding-right: 1.25em;
  font-feature-settings: "palt";
  letter-spacing: .025em;
  text-indent: .025em;
}
.faq-list dt h3::after{
  content: "";
  width: .5em;
  aspect-ratio:1;
  border: 1px solid;
  border-color: transparent currentColor currentColor transparent;
  position: absolute;
  right: 0;
  top: 50%;
  translate:0 -65%;
  rotate:45deg;
  transition:scale .3s ease;
}
.faq-list dt.open h3::after{
  scale:-1 -1;
  translate:0 -25%;
}
.faq-list dd{
  padding-left: 2.5em;
  margin-top:min(50px,6vw);
}
.sec-cta-blc:last-child{
  padding-bottom: min(90px,12vw);
}
/*footer +++++++++++++++++++++++++++++*/
footer{
  background-color: #e5e5e5;
  padding: min(50px,6.6vw) min(40px,5vw) 0;
}
.foot-nav{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  gap:min(20px,3.3vw) 0;
}
.foot-nav li:nth-child(-n+3){
  width: calc(100%/3);
  text-align: center;
}
.foot-nav li:nth-child(-n+3) a{
  padding-left: 0;
  padding-right: 0;
}
.foot-nav li a{
  display: block;
  padding-left: min(1.25em,4vw);
  padding-right: min(1.25em,4vw);
}
.foot-nav li:nth-child(n+2):not(:nth-child(4))::before{
  content: "";
  width: 1px;
  height: 1em;
  background: currentColor;
  position: absolute;
  left: 0;
  top: 50%;
  translate:0 -50%;
}
.foot-about{
  margin-top: min(40px,5vw);
  line-height: 1.4;
}
.foot-about .logo{
  width: 50%;
}
.foot-about .address{
  margin-top: 1em;
}
footer .copy{
  font-size: min(16px,2.2vw);
  text-align: center;
  padding-bottom: min(20px,3vw);
  padding-top: min(30px,4vw);
}
/*fix button*/
#fix-button{
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: 100%;
    opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
    background: rgba(255, 255, 255, .8);
    padding-top: min(20px, 3vw);
    max-width: 750px;
}
#fix-button.is-visible {
  opacity: 1;
  visibility: visible;
}
/*voice-list*/
#voice-slider {
  overflow: hidden;
  position: relative;
}
.box-voice_list{
    margin-top: min(60px, 10vw);
}
.box-voice_list .box-title{
    margin-top: min(30px, 4vw);
}
.voice-slide-item{
    background: #fff;
    border-radius: 20px;
    padding: min(30px, 4vw);
    border: 1px solid #e6e3e4;
    display: grid;
    gap: min(20px, 2.8vw);
    width: 90%;
    box-sizing: border-box;
}
.voice-slide-item_ttl{
    color: #ff6900;
    font-weight: 600;
}
.voice-slide-item_text{
    line-height: 1.2;
}
.swiper-pagination.voice-pagination {
  margin-top: 20px;
  position: relative;
  z-index: 10;
}
.voice-navigation{
    z-index: 5;
}
/* デフォルト（非アクティブ）ドット */
.voice-pagination .swiper-pagination-bullet {
  background-color: #686868;
  opacity: 1; /* Swiperの初期値を上書きするため */
}

/* アクティブなドット */
.voice-pagination .swiper-pagination-bullet-active {
  background-color: #ff6900;
}