@charset "UTF-8";
/* 料金シミュレーター */
main{background-color: #FDFBFF;height: auto;overflow: hidden;}
.base__btn{margin: 5rem auto;font-size: clamp(18px, 2.5vw, 32px);}
.title_section{padding: 100px 0;}

.section-plan-price{
width: 90%;
max-width: 960px;
height: auto;
padding:clamp(20px, 5%, 60px);
margin: 100px auto;
background-color: #fff;
filter: drop-shadow(0 0 10px rgba(36, 25, 162, 0.15));
border-radius: 16px;
}
#simuContainer {
width: 100%;
height: auto;
display: flex;
-webkit-justify-content: flex-start;
justify-content: flex-start;
align-items: flex-start;
margin-top: 20px;
}

#simulation {display: flex;flex-wrap:wrap;gap:3rem;}
#simulation > section {width:calc(50% - 3rem);}
#simulation > section#planSelect, #simulation > section#accountSelect {width: 100%;}

#simuContainer h3 {
font-size:1.4em;
line-height:140%;
margin:0;
padding: 0;
}
#simuContainer h3 span.stepNo {
font-size: 0.7em;
padding: 4px 8px;
line-height: 104%;
color: #fff;
background-color: #675CD7;
border-radius: 4px;
display: inline-block;
margin: 3px 8px 0 0;
vertical-align: top;
font-family: "Inter";
font-weight: 700;
}
#simuContainer .inputArea{margin: 10px 0;}
#simuContainer .inputArea input {
background:#F6F6F6;
font-family: "Inter";
font-weight: 700;
margin: 0 16px 0 0;
text-align: center;
padding: 16px 8px 16px 24px;
font-size: 24px;
border: none;
line-height: 100%;
color:#030305;
width: 96px;
}
#simuContainer .inputArea span {display:inline-block;vertical-align: middle;}

.radioArea__item {flex: 0 0 calc(50% - 1.5rem);object-fit: contain;}
#planSelect input[type=radio]:checked + label {border-color: #675cd7;background: #F2F4FF;}
#planSelect label {
border:solid 4px #F6F6F6;
cursor : pointer;
padding: 20px;
border-radius: 8px;
width: 100%;
height:100%;
display: block;
}
.seen_image {
width: 100%;
height: auto;
aspect-ratio: 340 / 104;
display: grid;
align-items: center;
justify-content: center;
}
#planSelect label img {
max-width: unset;
width: 100%;
height: auto;
max-height: 104px;
}
#planSelect label p{
font-weight: 700;
margin: 0;
display: flex;
align-items: flex-start;
justify-content: flex-start;
gap: 0.5em;
}
#planSelect label p::before{
content: "";
border-radius: 50%;
display: block;
background-color: #fff;
border: 1px solid #675CD7;
border-radius: 50%;
width: 20px;
height: 20px;
margin-top: 3px;
flex: none;
}
#planSelect input[type=radio]:checked + label p::before{
background-color: #675CD7;
background-image:url('../images/plan/ic_list_check.svg');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}

#js-btn-calc p {
font-size: clamp(18px, 1.9vw, 24px);
font-weight: 700;
line-height: 100%;
color: #fff;
}

#simuContainer .visually-hidden {
position: absolute;
white-space: nowrap;
border: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
overflow: hidden;
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
}
ul.attention {
color: #9996B3;
line-height: 144%;
list-style-type: none;
padding: 0;
}
ul.attention li {padding-left:1em;}
ul.attention li::before {content:'※';margin-left: -13px;}

main .inteTxt {font-family: "Inter" , "sans-serif";font-weight: 700;}
#simuContainer label:last-child { margin-right:0%; }
#planSelect .inteTxt {
font-size: 32px;
display: block;
height: 2em;
line-height: 120%;
margin-left: 32px;
}
#planSelect .inteTxt small {font-size:16px;display: block;line-height: 100%;}
#planSelect p {margin: 0 0 8px 0;line-height: 1.5em;}
#simuContainer .radioArea {display:flex; flex-wrap: wrap;gap: 1.5rem;margin-top:10px;}
#planSelect label:hover {border:solid 4px #675cd7;transition: 0.4s;}

#simuPrice {width: 100%;border: 1px solid #D9D9D9;border-radius: 16px;}
.priceBox {
width: 100%;
padding: clamp(20px, 5%, 40px);
display: grid;
gap: 4rem;
justify-items: center;
}
.breakdown{
width: 100%;
max-width: 320px;
background-color:var(--bg_gray);
border-radius: 4px;
margin: 0 auto;
padding: 20px;
}
.breakdown table{
color: var(--primary);
font-size: 14px;
font-weight: 600;
margin: 0;
width: 100%;
}
.breakdown tbody tr:not(:last-child) {border-bottom: 1px solid #EBEBEB;}
.breakdown th,.breakdown td{
padding: 0;
background-color: transparent;
border:none;
vertical-align: middle;
font-size: clamp(12px, 1.9vw, 14px);
}
.breakdown thead th{
font-size: 16px;
font-weight: 700;
width: 100%;
text-align: center;
color: var(--secondary);
}
.breakdown tbody th{width:45%;text-align: left;}
.breakdown tbody td{width:55%;text-align: right;}
.breakdown tbody .inteTxt{font-size:clamp(15px, 1.9vw, 24px);font-weight: 700;}

#txtmonthlyPrice,#txtpaygPrice {font-size: 16px;line-height: 100%;font-weight:500;}
#Transcription{display: none;}

/*==ENTERPRISEのみ反映==*/
.priceBox.priceBox__ENTERPRISE #txtTotalPrice{font-size:1.5em;line-height:inherit;}
.priceBox.priceBox__ENTERPRISE .total-price__text:after{content:"は";}
.priceBox.priceBox__ENTERPRISE #MonthlylPrice_text .taxin:before{content:"〜";}
.priceBox.priceBox__ENTERPRISE #CallCharges{font-size:18px;}
.priceBox.priceBox__ENTERPRISE #CallCharges_text{padding:6px 0;}
.priceBox.priceBox__ENTERPRISE .total-price .price-note,
.priceBox.priceBox__ENTERPRISE #CallCharges_text .yen,
.priceBox.priceBox__ENTERPRISE #CallCharges_text .taxin
{display: none;}

.switch-checkbox {display: flex;align-items: center;gap: 1rem;margin-top: 10px;}
.switch-checkbox input[type=checkbox] {
  position: relative;
  width: 60px;
  height: 30px;
  border-radius: 60px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  background-color:#ddd;
  border:none;
  cursor: pointer;
}
.switch-checkbox input[type=checkbox]::before {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  width: auto;
  height: calc(100% - 1rem);
  aspect-ratio: 1/1;
  box-sizing: border-box;
  border-radius: 50%;
  background-color: white;
  content: '';
  transition: .3s ease;
}
.switch-checkbox input[type=checkbox]:checked {background-color:#675cd7;}
.switch-checkbox input[type=checkbox]:checked::before {left: calc(60px - 30px + 0.5rem);}
.switch-checkbox label:before {content: "OFF";font-size: 18px;font-weight: 700;}
.switch-checkbox input[type=checkbox]:checked + label:before {content: "ON";}

.plan_name{
background-color: var(--bg_secondary);
gap: 1rem;
align-items: center;
border-radius: 16px 16px 0 0;
padding: clamp(20px, 5%, 40px);
margin: 0;
display: grid;
grid-auto-flow: column;
grid-template-areas:"img name""img cap";
justify-content: center;
width: 100%;
grid-template-columns: 130px auto;
}
.plan_name__box_img{grid-area: img;}
.plan_image{max-width: unset;width:100%;display: none;}
.plan_name__h2{
width:fit-content;
display: grid;
gap: 0.5rem;
justify-items: start;
text-align: left;
grid-area: name;
}
.plan_name > p{text-align: center;font-size: 24px;}
.plan_name > p > span{display: block;}
.plan_name > p.plan_name__caption{
font-size: 16px;
color:var(--accessibie);
text-align: left;
grid-area: cap;
}
main h2#txtPlanName{font-size:48px;}
h2#txtPlanName sub {
font-size: 0.3em;
bottom: 0.5em;
background-color: #FAFCFF;
border-radius: 20px;
border: var(--tag_stroke) 1px solid;
color: var(--tag_primary);
padding: 5px 10px;
margin-left: 8px;
}

.total-price{
display:flex;
gap: 0.5em;
justify-content: center;
align-items:flex-end;
font-size: 18px;
color: var(--secondary);
}
#txtTotalPrice{
font-size:clamp(40px,3.7vw,48px);
line-height: 100%;
font-weight: 700;
color: var(--accessibie);
}
.total-price > .price-note{font-size:clamp(15px, 1.9vw, 24px);font-weight: 700;}

.plan-link__box{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
gap: 2rem;
}
.base__btn.plan-link {
flex: 1;
height: auto;
padding:2rem;
justify-content: space-evenly;
align-items: center;
margin: 0;
}
.base__btn.plan-link:hover{color:#fff;}
.base__btn.plan-link svg{width: 10%;height: auto;}
.base__btn.plan-link:last-of-type svg {width:15%;}
main p.plan-link__text {
font-size: clamp(13px, 1.4vw, 19px);
font-weight: 700;
line-height: 140%;
text-align: center;
}
main p.plan-link__text > small {
font-size:0.5em;
font-weight: 600;
display: block;
line-height: 1.4em;
}
#simuPrice{display: none;}
main img#js-loading-gif {margin: 0 auto 40px auto;display: block;}

#enterprise{
width: 90%;
height: auto;
margin: 0 auto 100px auto;
display: grid;
justify-content: center;
gap: 1rem;
}
.enterprise__head{
font-size: 14px;
color: var(--accessibie);
display: flex;
justify-content: center;
align-items: flex-end;
gap: 1.2rem;
}
.enterprise__head:before,.enterprise__head:after{
content: "";
width: 1px;
height: 20px;
background-color: var(--accessibie);
}
.enterprise__head:before{transform: rotate(-20deg);}
.enterprise__head:after{transform: rotate(20deg);}
.enterprise__contents{
width: fit-content;
height: 250px;
border-radius: 16px;
display:flex;
overflow: hidden;
filter: drop-shadow(0 0 10px rgba(36, 25, 162, 0.15));
background-color: #fff;
align-items: center;
align-content: center;
}
.enterprise__img{
width: auto;
height: 100%;
aspect-ratio: 1 / 1;
display: flex;
justify-content: center;
align-items: center;
background-color: #FFF5F5;
text-align: center;
}
.enterprise__img img{width:80%;max-width:170px;height: auto;}
.enterprise__txt {width:calc(70% - 2rem);padding: 0 2rem;text-align: center;}
.enterprise__txt h2{
font-size:36px;
line-height: 112%;
font-weight: 800;
color:#F96868;
}
.enterprise__txt h2 span.inteTxt{font-size: 1.33em;margin-right: 0.1em;}
.enterprise__txt p{
font-size: 16px;
line-height: 140%;
font-weight: 600;
color: var(--primary);
margin: 1rem 0;
}
.enterprise__contents .base__btn{
width: fit-content;
margin: 0 auto;
max-width: unset;
font-size: 18px;
height: auto;
}
.enterprise__contents .base__btn:hover{color: #fff;}


@media only screen and (max-width: 767.98px) {
  .title_section{padding: 80px 0;}
  .section-plan-price{margin: 80px auto;}
  #simulation > section{width: 100%;}
  .radioArea__item {flex: 0 0 calc(100%);}
  .plan_name{grid-template-areas:"img name""cap cap"; grid-template-columns: 0.5fr 1fr;}
  main h2#txtPlanName {line-height: 100%;}
  h2#txtPlanName sub {
  margin: 5px 0 0 0;
  font-size: 0.25em;
  display: block;
  width: fit-content;
  position: static;
  padding: 12px 10px;
  }
  main p.plan_name__side {font-size: 14px;}
  .plan_name > p.plan_name__caption{text-align: center;}
  .total-price {flex-wrap: wrap;}
  span.total-price__text{width: 100%;text-align: center;}
  span.taxin {font-size: 10px;}
  #planSelect label p br{display: none;}
  .priceBox{gap: 3rem;}
  main p.plan-link__text > small{display: none;}
  .base__btn.plan-link{
  flex: auto;
  width: 100%;
  height: 60px;
  justify-content: space-around;
  padding: 1rem;
  gap: 0;
  }
  .base__btn.plan-link svg{width:25px;margin-left: 10px;}
  .base__btn.plan-link:last-of-type svg{width: 45px;margin-left:0;}
  #enterprise{margin-bottom: 80px;}
  .enterprise__contents{border-radius:8px;height: 125px;}
  .enterprise__txt h2{font-size: 15px;}
  .enterprise__txt p{font-size: 12px;}
  .enterprise__contents .base__btn {font-size: 12px;padding: 1rem 2rem;}

  /*
     .enterprise__contents {
        width: fit-content;
        height: auto;
        gap: 0;
        margin: 0 auto;
    }
  .enterprise__img {padding: 2rem 0;
        width: 120px;}
  .enterprise__img img {width: 80%;}
  .enterprise__txt {width: fit-content;
        padding: 0 2rem;}
  .enterprise__txt h2{font-size: 24px;}
  .enterprise__txt p {font-size: 14px;margin: 0.5rem 0;}
  .enterprise__contents .base__btn {font-size: 14px;height: auto;padding: 12px 24px;}
  */
}