@charset "utf-8";
/* ==========================================================================
   Template: LP_var202606  (template/lp_var202606.php 専用CSS)
   ========================================================================== */ 
:root {
  --fnt-base: YakuHanJP, "Noto Sans JP", sans-serif;
  --fnt-base_en: "Google Sans Flex", "Noto Sans JP", sans-serif;
  
  --base-clr: #1a1a1a;
  --clr-main: #EB666B;
  --clr_red:#F11111;
  --clr_ylw:#FFFB7B;
  --clr_grn:#4C9BA2;
  --clr_blue:#2f7955;
  --clr_org:#FF7011;
  --clr-pale_org:#F39800;
  
  --pd_hz:min(10px,2vw);
  --pd_vt:min(20px,5vw);
  --pd_wrap: 0 min(10px, 2vw);
  --head2: min(24px, calc(100vw/16.25));
  --head2_mid:min(20px,calc(100vw/19.5));
  --head3:min(18px, calc(100vw/21.6667));
  --wall_pink: #FFF2F2;
  --wall_gray:#F8F8F8;
  --wall_blue:#effff7;
  --gra_grn:linear-gradient(#19BB2F,#0E791C);
  --gra_org:linear-gradient(#FA7313,#D05700);
  --bdr-pale_gray:#D9D9D9;
  --bdr-gray:#B5B5B5;
}
body {
  font-family: var(--fnt-base);
}
.hum-button_wrap {
  position: fixed;
  left: 50%;
  top: 0;
  translate: -50% 0;
  z-index: calc(infinity);
  display: grid;
  grid-template-columns: min(50px, 12vw);
  justify-content: flex-end;
  pointer-events: none;
}
#hum-button {
  aspect-ratio: 1;
  background-color: var(--clr-main);
  display: flex;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  pointer-events: all;
}
#hum-button button {
  width: 50%;
  height: 1px;
  background-color: #fff;
  position: relative;
  transition: rotate var(--transit);
}
#hum-button button::before, #hum-button button::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #fff;
  left: 50%;
  translate: -50% 0;
}
#hum-button button::before {
  top: max(-8px, -2vw);
}
#hum-button button::after {
  top: min(8px, 2vw);
}
#hum-button.open button {
  rotate: 45deg;
}
#hum-button.open button::before, #hum-button.open button::after {
  top: 0;
  rotate: -90deg;
  transition: rotate var(--transit);
}
#l-nav {
  position: fixed;
  left: 50%;
  top: 0;
  translate: -50% 0;
  z-index: 100;
  height: 100dvh;
  overflow-y: scroll;
  background-color: var(--clr-main);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transit), visibility var(--transit);
  pointer-events: none;
}
#l-nav.is-view {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}
.l-nav_inner{
  padding: min(80px, 20vw) min(25px,5vw) min(50px,12vw);
  min-height: 100svh;
}
.l-nav__menu{
  color: #fff;
}
.l-nav__menu > li{
  border-bottom: 1px solid;
}
.l-nav__menu > li > a{
  font-size: min(18px,calc(100vw/21.6667));
  font-weight: 500;
  padding: 10px 0;
  display: block;
  line-height: calc(22/18);
}
.l-nav__menu > li > a::after{
  content: "";
  width: .72em;
  aspect-ratio:1;
  background-color: currentColor;
  mask:url("../images/lp_var202606/icon/line-arrow.svg") no-repeat center/100%;
  -webkit-mask:url("../images/lp_var202606/icon/line-arrow.svg") no-repeat center/100%;
  position: absolute;
  top: 50%;
  right: 10px;
  translate:0 -50%;
}
.nav_channel{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap:5px;
  padding-bottom: 10px;
}
.nav_channel > li{
  aspect-ratio:1/0.8818;
  border: 1px solid var(--clr_grn);
  border-radius: 10px;
  background-color: #fff;
  padding: min(12px,2vw) min(13px,2.5vw);
  color: var(--base-clr);
  display: grid;
  grid-template-columns: 100%;
  place-content: center;
  gap: 5px;
}
.nav_channel > li .c-name{
  text-align: center;
  font-weight: 600;
}

/*float*/
.float-button_wrap{
  position: fixed;
  width: min(500px,100vw);
  bottom: 0;
  left: 50%;
  translate: -50% 100%;
  z-index: 10;
  display: flex;
  flex-direction: column;
  -ms-align-items: flex-end;
  align-items: flex-end;
  padding: 10px 5px calc(5px + env(safe-area-inset-bottom));
  gap:5px;
  transition:translate var(--transit);
  pointer-events: none;
}
.float-button_wrap.is-show{
  translate: -50% 0;
}
.float_button{
  width: min(78px,20vw);
  aspect-ratio:1;
  pointer-events: auto;
}
.float_button > a{
  height: 100%;
  text-align: center;
  font-weight: 800;
  background-color: var(--clr_grn);
  color: #fff;
  font-size: min(14px,3.3vw);
  line-height: calc(15/13);
}
.float_button > a
,#pagetop{
  display: grid;
  place-content:center;
  border-radius: 100vmax;
  border: 1px solid var(--clr_grn);
}
.float_button > a span{
  padding-bottom: 5px;
}
#pagetop{
  grid-template-columns: 30%; 
  background-color: #fff;
}
#float-button_verify{
  transition:opacity var(--transit),visibility var(--transit);
}
#float-button_verify.is-hide{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
#float-button_verify a::before
,#float-button_verify a::after{
  content: "";
  width: .35em;
  aspect-ratio:1;
  border: 1px solid;
  border-color: transparent currentColor currentColor transparent;
  rotate:45deg;
  position: absolute;
  left: 50%;
  bottom: 1em;
  translate:-50% 0;
}
#float-button_verify a::after{
  translate:-50% 70%;
}
/*header
+++++++++++++++++++++++++++++++++++++++++++++++++++++*/
header {
  position: fixed;
  top: 0;
  left: 50%;
  translate: -50% 0;
  z-index: 10;
  background-color: var(--clr-main);
  height: min(50px, 12vw);
}
.head-inner {
  padding: 5px min(50px, 12vw) 5px min(20px, 5vw);
  display: grid;
  -ms-align-items: center;
  align-items: center;
  color: #fff;
  height: 100%;
  width: 100%;
}
.head-inner h1 {
  font-size: var(--head3);
  font-weight: 700;
}

/*content
+++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.lead-text {
  line-height: calc(24/14);
}
.fw_ex{
  font-weight: 800;
}
.fw_w {
  font-weight: 600;
}
.fw_md{
  font-weight: 500;
}
.fc_pink {
  color: var(--clr-main);
}
.fc_blue{
  color: var(--clr_blue);
}
.marker {
  background: linear-gradient(rgba(252, 255, 80, 0) 0%, rgba(252, 255, 80, 1) 0%);
  color: var(--clr-main);
  font-weight: 600;
  padding-left: .15em;
  padding-right: .15em;
}
.pd_wrap {
  padding: var(--pd_wrap);
}
.pd_wrap + .pd_wrap{
  padding-top: 0;
}
section:nth-child(n+2){
  margin-top: min(30px,7vw);
}
.sec-pd_wrap{
  padding-left: var(--pd_hz);
  padding-right: var(--pd_hz);
}
.navigator {
  display: grid;
  grid-template-columns: min(80px, 20vw) 1fr;
  -ms-align-items: flex-start;
  align-items: flex-start;
  gap: min(20px, 5vw);
}
.nav-comment {
  padding: min(10px, 2.5vw);
  background-color: var(--wall_pink);
  border-radius: min(10px, 2.5vw);
  display: flex;
  flex-direction: column;
  gap:10px;
}
.nav-comment::before {
  content: "";
  width: 1em;
  aspect-ratio: 1/0.9282;
  position: absolute;
  left: 1px;
  top: 2em;
  translate: -100% 0;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
  background-color: var(--wall_pink);
}
.att_note{
  font-size: min(12px,3vw);
  line-height: calc(14/12);
}
.att_note.l_rt{
  text-align: right;
}
/*title*/
.sec-title{
  background-color: var(--clr-main);
  color: #fff;
  font-size: var(--head2_mid);
  line-height: calc(26/20);
  text-align: center;
  padding: 10px min(20px,3vw);
  font-weight: 800;
}
.post-title{
  font-size: var(--head2_mid);
  line-height: calc(22/20);
  background-color: var(--wall_pink);
  border-left: 10px solid var(--clr-main);
  padding: 10px 1em 10px 10px;
  font-weight: 800;
}
.lead-title{
  font-size: var(--head3);
  font-weight: 800;
  line-height: calc(22/18);
  color: var(--clr-main);
}
/*INTRO ++++++++++++++++++++++++++++++++++*/
.sec-intro-blc{
  display: flex;
  flex-direction: column;
  gap:10px;
}
/*chart*/
.sec-intro__chart{
  border: 1px solid var(--bdr-pale_gray);
  border-radius: min(10px,2.5vw);
  padding: min(10px,2.5vw) min(15px,3vw);
  display: flex;
  flex-direction: column;
  gap:min(10px,1.5vw);
}
.sec-intro__chart h3{
  text-align: center;
}
.chart__desc{
  display: flex;
  justify-content: flex-end;
}
.chart__desc p{
  background-color: var(--clr_ylw);
  color: var(--clr_red);
  font-weight: 500;
  border-radius: min(10px,2vw);
  padding: .5em .85em;
}
.chart__desc p span{
  font-size: 1.125em;
}
.chart_wrap{
  display: grid;
  grid-template-columns: auto 1fr;
  gap:.5em;
}
.num_title{
  writing-mode: vertical-rl;
  text-align: center;
}
.kss-num{
  display: flex;
  font-size: min(12px,3.2vw);
  gap:5px;
}
.kss-num .scale{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
}
.kss-num .scale p{
  white-space: nowrap;
}
.kss-num .scale p:nth-child(n+2):not(:last-child)::before{
  content: "";
  width: .5em;
  height: 1px;
  background-color: currentColor;
  position: absolute;
  right: -.5em;
  bottom: 0;
  translate:calc(100% + 1px) 0;
}
.kss-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 10px;
  aspect-ratio:1/0.6324;
  border-bottom: 1px solid;
  padding-left: 1em;
}
.kss-chart::before{
  content: "";
  height: calc(100% - .5em);
  width: 1px;
  background-color: currentColor;
  position: absolute;
  left: 0;
  bottom: 0;
}
.kss-chart::after{
  content: "";
  width: .5em;
  height: 1px;
  background-color: currentColor;
  position: absolute;
  left: 0;
  top: .5em;
}
.kss-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%
}
.kss-val {
  font-size: min(12px,3vw);
  font-weight: 700;
  color: #333;
  margin-bottom: 6px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease
}
.kss-val.show {
  opacity: 1;
  transform: translateY(0)
}
.kss-bar {
  width: 100%;
  max-width: 64px;
  height: 0;
  background: #E8607A;
  transform-origin: bottom;
  transition: height .85s cubic-bezier(.22, .9, .3, 1)
}
.kss-bar.last {
  background: #D63E5E
}
.kss-bar.grow {
  height: var(--h)
}
.kss-bar.last.grow {
  transition: height .95s cubic-bezier(.34, 1.56, .64, 1)
}
.kss-bar.pulse {
  animation: kssPop .5s ease
}
@keyframes kssPop {
  0% {
    transform: scaleY(1)
  }
  40% {
    transform: scaleY(1.04)
  }
  100% {
    transform: scaleY(1)
  }
}
.kss-axis {
  display: flex;
  justify-content: space-around;
  gap: 10px;
  padding: 0 .5em;
  grid-area: 2 / 2;
}
.kss-axis span {
  flex: 1;
  text-align: center;
  font-size: 10px;
  color: #777
}
.kss-axis .kss-now {
  color: #222;
  font-weight: 700
}
.kss-source {
  text-align: right;
  font-size: 11px;
  color: #999;
  margin-top: 14px;
  line-height: 1.5
}
.check-list{
  padding: 10px 15px;
  background-color: var(--wall_pink);
  border-radius: 10px;
}
.check-list > li{
  line-height: calc(24/14);
  font-weight: 600;
  padding-left: 1.5em;
}
.check-list > li:nth-child(n+2){
  margin-top: 5px;
}
.check-list > li::before{
  content: "";
  width: 1.14em;
  aspect-ratio:1/0.9677;
  position: absolute;
  top: .33em;
  left: 0;
  background: url("../images/lp_var202606/icon/check.svg") no-repeat center/cover;
}

/*RANKING ++++++++++++++++++++++++++++++++++*/

.channel-ranking-list{
  border: 2px solid var(--bdr-gray);
  border-top: none;
  counter-reset: count;
}
.rank-ilist__item{
  padding: 12px min(15px,3vw);
}
.rank-ilist__item:nth-child(n+2){
  border-top: 1px dashed var(--bdr-gray);
}
.rank__head{
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-align-items: baseline;
  align-items: baseline;
  gap:5px;
}

.rank__head .c-name{
  font-size: var(--head2_mid);
  font-weight: 800;
  padding-left: 1.5em;
  line-height: calc(26 / 20);
}
.rank__head .c-name::before
,.rank__head .c-name::after{
  height: var(--head2_mid);
  aspect-ratio:1/0.8108;
  position: absolute;
  left:0;
  top: 50%;
  translate:0 -50%;
}
.rank__head .c-name::before{
  content: "";
  mask:url("../images/lp_var202606/icon/crown.svg") no-repeat center/cover;
  -webkit-mask:url("../images/lp_var202606/icon/crown.svg") no-repeat center/cover;
  background-color: var(--clr-main);
}
.rank01 .rank__head .c-name::before{
  background-color:#E0A930;
}
.rank02 .rank__head .c-name::before{
  background-color:#9F9E9F;
}
.rank03 .rank__head .c-name::before{
  background-color:#A97C33;
}
.rank__head .c-name::after{
  counter-increment: count 1;
  content: counter(count);
  font-size: .65em;
  display: grid;
  justify-content: center;
  -ms-align-items: flex-end;
  align-items: flex-end;
  line-height: calc(12/10);
  color: #fff;
}
.reco-star{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  margin-left: auto;
  font-weight: 800;
  gap:5px;
}
.reco-star dd{
  width: 6.5em;
}

.rank__detail{
  display: grid;
  grid-template-columns: 33% 1fr;
  align-items: center;
  gap:10px;
  margin-top: 10px;
}
.rank__detail .button-set{
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 5px;
  gap:5px;
}
.rect-button a{
  display: grid;
  height: min(34px,8.7vw);
  place-content:center;
  border-radius: 5px;
}
.rect-button a span{
  padding-right: 1.125em;
  font-weight: 800;
}
.rect-button.grn a{
  background: var(--gra_grn);
  color: #fff;
}
.rect-button.org a{
  background: var(--gra_org);
  color: #fff;
}
.rect-button a span::after{
  content: "";
  width: .857em;
  aspect-ratio:1;
  position: absolute;
  top: 50%;
  right: 0;
  translate:0 -50%;
  mask:url("../images/lp_var202606/icon/arrow.svg") no-repeat center/cover;
  -webkit--mask:url("../images/lp_var202606/icon/arrow.svg") no-repeat center/cover;
  background-color: currentColor;
}
/*REASON ++++++++++++++++++++++++++++++++++*/
.sec-reason__wrap{
  display: flex;
  flex-direction: column;
  gap:min(20px,5vw);
  margin-top:min(20px,5vw);
}

.sec-reason__detail{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:5px;
}
.sec-reason__detail > li{
  border-radius: 10px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--bdr-pale_gray);
  padding-bottom: 1em;
}
.sec-reason__detail > li.app{
  --list-clr:var(--clr_grn);
}
.sec-reason__detail > li.agcy{
  --list-clr:var(--clr-main);
}
.sec-reason__detail > li .list-title{
  text-align: center;
  font-weight: 500;
  background-color: var(--list-clr);
  color: #fff;
  padding: 10px;
}
.sec-reason__detail > li dl{
  display: flex;
  flex-direction: column;
  -ms-align-items: flex-start;
  align-items: flex-start;
  gap:10px;
  padding-left: 7px;
  padding-right: 7px;
  margin-top: 15px;
}
.sec-reason__detail > li dl dt{
  color: #fff;
  font-weight: 500;
  padding: 4px 1em;
  border-radius: 5px;
}
.sec-reason__detail > li dl dd > p{
  padding-left: 1em;
  font-size: min(12px,3vw);
  font-weight: 600;
  line-height: calc(16/12);
}
.sec-reason__detail > li dl dd > p:nth-child(n+2){
  margin-top: 5px;
}
.sec-reason__detail > li p::before{
  content:"";
  position: absolute;
  left: 0;
  top: .35em;
  width: .5em;
  aspect-ratio:1;
  border-radius: 100vmax;
  background-color: var(--dot-clr);
}
.sec-reason__detail > li .merit dt{
  background-color: var(--list-clr);
}
.sec-reason__detail > li .merit dd > p{
  --dot-clr:var(--list-clr);
}
.sec-reason__detail > li .demerit dt{
  background-color: #575757;
}
.sec-reason__detail > li .demerit dd p{
  --dot-clr: #575757;
}

/*REPORT ++++++++++++++++++++++++++++++++++*/
.sec-report-blc{
  display: flex;
  flex-direction: column;
  gap:min(20px,5vw); 
}
.sec_report__wrap{
  display: flex;
  flex-direction: column;
  gap:min(20px,5vw);
}
.review-list{
  display: flex;
  flex-direction: column;
  gap:10px;
}
.review-list.u-line > li{
  padding: 15px;
  border-radius: 10px;
  border: 1px solid var(--bdr-pale_gray);
}
.review-list > .female{
  --list-clr:var(--clr-main);
}
.review-list > .male{
  --list-clr:var(--clr_grn);
}
.review__head{
  display: grid;
  grid-template-columns: min(80px, 22.5vw) 1fr;
  -ms-align-items: center;
  align-items: center;
  gap: min(20px, 5vw);
  font-weight: 500;
}
.review__head .desc-text{
  color: var(--list-clr);
  line-height: calc(24/14);
}
.review__head .data{
  font-size: 10px;
  margin-top: .5em;
}
.review__body{
  margin-top: 10px;
  line-height: calc(24/14);
  display: flex;
  flex-direction: column;
  gap:10px;
}
.ccl-list{
  --dot-clr:currentColor;
}
.ccl-list > li{
  padding-left: 1em;
  line-height: calc(20/14);
}
.ccl-list > li:nth-child(n+2){
  margin-top: 5px;
}
.ccl-list > li::before{
  content: "";
  width: .5em;
  aspect-ratio:1;
  background-color: var(--dot-clr);
  position: absolute;
  left: 0;
  top: .5em;
  border-radius: 100vmax;
}
.ccl-list.w_pink{
  color: var(--clr-main);
  padding: 10px min(20px,3vw);
  background-color: var(--wall_pink);
  border-radius: 10px;
}
.ccl-list.w_gray{
  --dot-clr:#939393;
  padding: 10px min(20px,3vw);
  border-radius: 10px;
  background-color: var(--wall_gray);
}

/*POINT ++++++++++++++++++++++++++++++++++*/
.sec-point__wrap{
  margin-top: 10px;
}
.sec-point__detail{
  border-radius: 10px;
  border: 2px solid var(--clr-main);
  padding: min(30px,3vw) min(15px,3vw);
  display: flex;
  flex-direction: column;
  gap:min(30px,5vw);
}
.point-detail_box{
  display: flex;
  flex-direction: column;
  gap:10px;
}
.point-detail_box .point-title{
  font-size: 1.28em;
  font-weight: 800;
}
.data-table{
  width: 100%;
}
.data-table thead th{
  color: #fff;
  background-color: var(--clr_blue);
}
.data-table td
,.data-table th{
  line-height: calc(24/14);
  border: 1px solid var(--clr_blue);
  text-align: center;
  padding: 5px 10px;
  vertical-align: middle;
}
.data-table .w_blue{
  background-color: var(--wall_blue);
}
.data-table .t_blue{
  background-color: var(--clr_blue);
  color: #fff;
  font-size: min(12px,3vw);
  font-weight: 600;
}
.data-table tr:nth-child(odd) .t_blue{
  border-bottom-color: #fff;
}
.table-wrap .att_note{
  margin-top: 5px;
}

.type-list > li{
  display: grid;
  grid-template-columns: min(113px,28vw) 1fr;
  gap:10px;
}
.type-list > li:nth-child(n+2){
  margin-top: 10px;
}
.type-list > li .thumb img{
  object-fit: cover;
  height: 100%;
  object-position: center;
}
.type-list .in-title{
  display: grid;
  grid-template-columns:9.25em 1fr;
  gap:10px;
  -ms-align-items: center;
  align-items: center;
  
}
.type-list .in-title .type{
  font-size: 0.8571em;
  font-weight: 800;
  background-color: var(--clr_blue);
  color: #fff;
  padding: 3px 10px;
  text-align: center;
  border-radius: 3px;
  line-height: calc(14/12);
}
.type-list .in-title .star{
  display: grid;
  grid-template-columns: min(120px,23vw);
  justify-content: flex-end;
 
}
.type-list .in-title .star img{
  object-fit: contain;
  height: 100%;
  object-position: right center;
}
.type-list .lead-text{
  font-size: .92em;
  line-height: calc(20 / 13);
  margin-top: 5px;
}

/*VERIFY ++++++++++++++++++++++++++++++++++*/
.sec-verify__intro{
  margin-top: min(20px,5vw);
  display: flex;
  flex-direction: column;
  gap:min(20px,5vw);
}

.sec-verify_feature{
  display: flex;
  flex-direction: column;
  gap:min(30px,7vw);
  margin-top: min(30px,7vw);
  counter-reset: count;
}
.sec-verify_feature article{
  border: 2px solid;
  border-color: #AF7E32;
  border-radius: 10px;
  padding: min(20px,5vw) min(15px,3.8vw);
  display: flex;
  flex-direction: column;
  gap:10px;
}

.feat_title{
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-align-items: baseline;
  align-items: baseline;
  gap: 5px;
}
.feat_title .c-name{
  font-size: var(--head2_mid);
    font-weight: 800;
    padding-left: 1.5em;
    line-height: calc(26 / 20);
}
.feat_title .c-name::before
,.feat_title .c-name::after{
  height: var(--head2_mid);
  aspect-ratio:1/0.8108;
  position: absolute;
  left:0;
  top: 50%;
  translate:0 -50%;
}
.feat_title .c-name::before{
  content: "";
  mask:url("../images/lp_var202606/icon/crown.svg") no-repeat center/cover;
  -webkit-mask:url("../images/lp_var202606/icon/crown.svg") no-repeat center/cover;
  background-color: var(--clr-main);
}
#link_zwei .feat_title .c-name::before{
  background-color:#E0A930;
}
#link_sunmarie .feat_title .c-name::before{
  background-color:#9F9E9F;
}
#link_fiore .feat_title .c-name::before{
  background-color:#A97C33;
}
.feat_title .c-name::after{
  counter-increment: count 1;
  content: counter(count);
  font-size: .65em;
  display: grid;
  justify-content: center;
  -ms-align-items: flex-end;
  align-items: flex-end;
  line-height: calc(12/10);
  color: #fff;
}

.cta-button a{
  display: grid;
  place-content:center;
  font-weight: 800;
  border-radius: 100vmax;
  background: linear-gradient(90deg,#F3684C,#E73957);
  border: 1px solid #fff;
  height: min(74px,19vw);
  filter: drop-shadow(0 0 5px rgba(0,0,0,.25));
}
.cta-button a::before{
  content: "";
  width: .85em;
  aspect-ratio:1;
  position: absolute;
  right: 8px;
  top: 50%;
  translate:0 -50%;
  mask:url("../images/lp_var202606/icon/arrow.svg") no-repeat center/cover;
  -webkit-mask:url("../images/lp_var202606/icon/arrow.svg") no-repeat center/cover;
  background-color: #fff;
}
.cta-button a > span{
  display: flex;
  flex-direction: column;
  -ms-align-items: center;
  align-items: center;
  gap:4px;
}
.cta-button .sub{
  color: #FFF149;
}
.cta-button .main{
  color: #fff;
  font-size: var(--head2_mid);
}

.service-ases-data{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap:4px 2px;
}
.service-ases-data li{
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: subgrid;
  grid-area:  span 2;
  border-radius: 5px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--clr_grn);
}
.service-ases-data li .list-title{
  background-color: var(--clr_grn);
  text-align: center;
  color: #fff;
  font-weight: 500;
  padding: .5em 5px;
  font-size:.87em;
}
.service-ases-data li .data{
  display: flex;
  flex-direction: column;
  -ms-align-items: center;
  align-items: center;
  justify-content: center;
  gap:5px;
  text-align: center;
  line-height: calc(10/8);
  font-weight: 500;
  padding: 5px 0;
  min-height: 6em;
}
.service-ases-data li .data .fs_mid{
  font-size:.87em;
}
.service-ases-data li .data .price
,.service-ases-data li .data .ases
,.service-ases-data li .data .ex{
  font-size:min(10px,calc(100vw/39));
}

.service-ases-data li .data .txt{
}
.service-ases-data li .data .ases{
  display: flex;
  justify-content: center;
}
.service-ases-data li .data .ases span{
  background-color: var(--base-clr);
  color: #fff;
  border-radius: 100vmax;
  padding: 2px .75em;
}
.service-ases-data li .data .price > div{
  display: grid;
  grid-template-columns: auto auto;
  place-content:center;
}
.service-ases-data li.total{
  border-color: var(--clr-main);
  background-color: rgba(255, 247, 199, 1);
}
.service-ases-data li.total .list-title{
  background-color: var(--clr-main);
}
.service-ases-data li.total .data{
  font-size: var(--head3);
  font-weight: 600;
  gap:0;
  }
.service-ases-data li.total .data p:first-child{
}
.service-ases-data li.total .data p:first-child span{
  color: var(--clr-main);
  font-size: 3em;
}
.service-ases-data li.total .data p:last-child{
  padding-left: .25em;
  margin-left: auto;
  padding-right: 5px;
}
.service-ases-data li.total .data p:last-child::before{
  content: "";
  height: 1.25em;
  width: 1.2px;
  background-color: currentColor;
  position: absolute;
  left: 0;
  top: 0;
  rotate:30deg;
  ransform-origin: left top;
}
.service-ases-data li .data::before{
  content: "";
  width: 35%;
  aspect-ratio:1;
  position: absolute;
  top: calc(50% - .5em);
  left: 50%;
  translate:-50% -50%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: var(--mark);
}
.service-ases-data li.exc{
  --mark: url("../images/lp_var202606/icon/exc.svg");
}
.service-ases-data li.good{
  --mark: url("../images/lp_var202606/icon/good.svg");
}
.service-ases-data li.avg{
  --mark: url("../images/lp_var202606/icon/avg.svg");
}

.feature__point{
  background-color: #F6F6F6;
  border-radius: 10px;
  padding: 10px 7.5px;
  display:flex;
  flex-direction: column;
  gap:10px;
}
.squ-title{
  font-size: var(--head3);
  font-weight: 800;
  line-height: calc(22/18);
  padding-left: 1.25em;
}
.squ-title::before{
  content: "";
  width: .777em;
  aspect-ratio:1;
  background-color: var(--clr_grn);
  position: absolute;
  left:0;
  top: 50%;
  translate:0 -50%;
}
.point-desc{
  display: flex;
  flex-direction: column;
  gap:5px;
}
.point-desc > li{
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  gap:6px;
  font-weight: 500;
}
.point-desc > li .check{
  padding: 5px 10px;
  background-color: var(--clr_org);
  border-radius: 100vmax;
  color: #fff;
}
.point-desc > li .check span{
  padding-left: 1.5em;
}
.point-desc > li .check span::before{
  content: "";
  width: 1em;
  aspect-ratio:1;
  position: absolute;
  left: 0;
  top: 50%;
  translate:0 -50%;
  mask:url( "../images/lp_var202606/icon/check.svg") no-repeat center/cover;
  -webkit-mask:url( "../images/lp_var202606/icon/check.svg") no-repeat center/cover;
  background-color: #FFFCAE;
}
.plan-table .ly_fixed{
  width: 100%;
  table-layout: fixed;
}
.plan-table th
,.plan-table .ly_fixed td{
  border: 1px solid #AF7E32;
  line-height: calc(16/12);
}
.plan-table th{
  color: #fff;
  background-color: #AF7E32;
  font-weight: 600;
  padding: 5px;
  font-size: min(12px,3vw);
}
.plan-table td p{
  min-height: 7em;
  display: grid;
  place-content:center;
  text-align: center;
  font-size: 10px;
}
.plan-table td span{
  font-weight: 600;
  font-size: min(14px,3.6vw);
}
.plan-table td span.att::after{
  content: "※1";
  font-size: 10px;
}
.plan-table td span.att2::after {
    content: "※2";
    font-size: 10px;
}
.data-table td span.att3::after {
    content: "※3";
    font-size: 10px;
}
.discount_list{
  border: 1px solid var(--clr-pale_org);
  font-size: min(12px,3vw);
}
.discount_list > li:nth-child(n+2){
  border-top: 1px solid var(--clr-pale_org);
}
.discount_list .list-title{
  background-color: var(--clr-pale_org);
  color: #fff;
  font-weight: 700;
  padding: 5px;
  text-align: center;
}
.discount_list > li .comment{
  display: grid;
  grid-template-columns: repeat(3,auto);
  place-items:center;
  place-content:center;
  gap:1em;
  padding: 1.25em 1em;
}
.discount_list .basic{
  display: flex;
  flex-direction: column;
  -ms-align-items: center;
  align-items: center;
  gap:5px;
}
.discount_list .basic .off{
  padding: .5em 2em;
  background-color: var(--clr-pale_org);
  border-radius: 5px;
  color: #fff;
}
.discount_list .l_over{
  padding-right: 2em
}
.discount_list .l_over::after{
  content: "";
  width: 1em;
  aspect-ratio:1;
  background-image: url("../images/lp_var202606/icon/line-arrow.svg");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  position: absolute;
  right: 0;
  top: 50%;
  translate:0 -50%;
}
.discount_list .l_over span{
  text-decoration:line-through;
}
.discount_list .after{
  color: var(--clr-pale_org);
  font-weight: 600;
  font-size: min(14px, 3.6vw);
}
.discount_list .after span{
  font-size: var(--head2);
}

.shop-list{
 display: flex;
  flex-direction: column;
  gap:5px;
}
.shop-list_pref{
   background-color: #EEF6F7;
}
.js-acd__head{
  cursor: pointer;
  padding: 12px 1em;
  font-size: min(16px,4vw);
  color: var(--clr_grn);
  font-weight: 800;
  
}
.js-acd__contents{
  height: 0;
  overflow: hidden;
  transition:height var(--transit);
  border-top: dashed 1.5px #fff;  
}
.js-acd__head {
  display: grid;
  -ms-align-items: center;
  align-items: center;
  grid-template-columns: 1fr 1.25em;
}
.js-acd__head .icon{
  aspect-ratio:1;
  background-color: #fff;
  border-radius: 100vmax;
}
.js-acd__head .icon::before
,.js-acd__head .icon::after{
  content: "";
  width: 50%;
  height: 1.5px;
  background-color: currentColor;
  position: absolute;
  top: 50%;
  left: 50%;
  translate:-50% -50%;
  transition:rotate var(--transit);
}
.js-acd__head .icon::after{
  rotate:90deg;
}
.list-city{
  padding: 10px min(20px,3vw);
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap:5px;
}
.list-city button{
  background-color: #fff;
  height: min(50px,12vw);
  font-weight: 600;
  padding: 5px 1.5em 5px 10px;
  text-align: left;
  position: relative;
  font-size: min(16px,3.7vw);
}
.list-city button::after{
  content: "";
  pointer-events: none;
  width: 1em;
  aspect-ratio:1;
  position: absolute;
  top: 50%;
  right: .5em;
  translate:0 -50%;
  mask:url("../images/lp_var202606/icon/arrow.svg") no-repeat center/cover;
  -webbkit-mask:url("../images/lp_var202606/icon/arrow.svg") no-repeat center/cover;
  background-color: var(--clr_grn);
}
details[open] .js-acd__head .icon::after{
  rotate:0deg;
}

.mdl-contents{
  background: rgba(238,246,247,.85);
  backdrop-filter: blur(6px);
}
.js-mdl-close{
  background-color: var(--clr_grn);
}
.mdl-shop__data{
  width: min(420px,calc(100% - 40px));
  background-color: #fff;
  padding: min(20px,5vw) min(20px,3vw);
  display: grid;
  grid-template-columns: 1fr;
  gap:10px;
}
.mdl-shop__data .shop-area{
  text-align: center;
  font-weight: 800;
  font-size: min(16px,4vw);
}
.shop-access{
  border: 1px solid var(--clr_blue);
  line-height: calc(20/13);
}
.shop-access dt
,.shop-access dd{
  padding: 5px 10px;
}
.shop-access dt:nth-of-type(n+2){
  border-top: 1px solid var(--clr_blue);
}
.shop-access dt{
  border-bottom: 1px solid var(--clr_blue);
  background-color: var(--wall_blue);
}

/*CPMPAREY ++++++++++++++++++++++++++++++++++*/

.sec-compare-blc{
  display: flex;
  flex-direction: column;
  gap:5px;
}
.scroll-hint.is-scrollable{
  padding-bottom: 10px;
}
.compare-table{
  width: 700px;
  table-layout: fixed;
}
.compare-table thead th:first-child
,.compare-table tbody th{
  position: sticky;
  left: 0;
  z-index: 2;
  border: none;
  background-color: rgba(253, 252, 234, 1);
  font-weight: 600;
}
.compare-table thead th:first-child::before
,.compare-table tbody th::before{
  content: "";
  position: absolute;
  width: calc(100% - 1px);
  height: calc(100% - 1px);
  top: -.5px;
  left: 0;
  border: 1px solid;
}
.compare-table th
,.compare-table td{
  border: 1px solid;
  vertical-align: middle;
  text-align: center;
  font-weight: 600;
  padding: 5px 3px;
  line-height: calc(12/10);
}
.compare-table thead th{
  padding: 10px;  
}
.compare-table thead th .tag{
  position: absolute;
  top: 0;
  left: 5px;
  width: 1.18em;
  aspect-ratio:1/1.2627;
  clip-path: polygon(100% 0, 100% 100%, 50% 80%, 0 100%, 0 0);
  background-color: var(--clr-main);
  font-size: min(12px,3vw);
  color: #fff;
  z-index: 1;
  font-weight: 500;
}
.compare-table thead th:nth-child(2) .tag{
  background-color: #D6A535;
}
.compare-table thead th:nth-child(3) .tag{
  background-color: #9F9E9F;
}
.compare-table thead th:nth-child(4) .tag{
  background-color: #A97C33;
}
.compare-table thead th figure{
  height:min(35px,12vw);
  width: 100%;
  overflow: hidden;
}
.compare-table thead th figure img{
  object-fit: contain;
  height: 100%;
  object-position:center;
}
.compare-table td > div{
  display: flex;
  flex-direction: column;
  -ms-align-items: center;
  align-items: center;
  gap:5px;
}
.compare-table td > div .rect-button{
    width: 100%;
}
.compare-table .mark{
  width: 100%;
  min-height: 3em;
  display: flex;
  flex-direction: column;
 justify-content: center;
  gap:3px;
}
.compare-table .mark span.att{
  font-size: min(10px,2.5vw);
  font-weight: 400;
}
.compare-table .score{
  background-color: var(--base-clr);
  color: #fff;
  border-radius: 100vmax;
  font-size: min(10px,2.5vw);
  padding: 2px 1em;
}
.compare-table .mark:not(.blk)::before{
  content: "";
  position: absolute;
  width: 35%;
  aspect-ratio:1;
  top: 50%;
  left: 50%;
  translate:-50% -50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.compare-table .mark.exc::before{
  background-image: url("../images/lp_var202606/icon/exc.svg");
}
.compare-table .mark.good::before{
  background-image: url("../images/lp_var202606/icon/good.svg");
}
.compare-table .mark.arg::before{
  background-image: url("../images/lp_var202606/icon/avg.svg");
}
.tfs_wid{
  font-size: var(--head2_mid);
}
.ft_s .mark{
  font-size: min(12px,3vw);
}
.compare-table .rect-button a{
  width: 100%;
}
.scroll-hint-icon-wrap{
  z-index: 2;
}

.att-num-list{
  counter-reset: count;
}
.att-num-list li{
  padding-left: 2em;
}
.att-num-list li::before{
  counter-increment: count 1;
  content: "※" counter(count);
  position: absolute;
  left: 0;
  top: 0;
}