/*===導入の流れ===*/
main section{font-size: 14px;font-family: "Noto Sans JP", "hiragino sans", "meiryo", sans-serif;line-height: 1.6em;padding:100px 0;color: #3F3D56;}
main .section__wrapper{width: 100%;max-width: 1125px;height: auto;margin: 0 auto;}
main section p{font-size: 14px;line-height: 1.6em;padding: 0;margin: 0;}
main .keni-main_inner {padding-bottom: 60px;background-color: #fff;}
.experience-title__h1 {padding-top: 60px;color: #675cd7;text-align: center;}
.experience-title__caption{
text-align: center;
color: #030305;
font-size: 16px;
font-weight: 400;
line-height: 1.68;
}
.guide__caption{text-align: center;font-size: 16px;color: #3F3D56;}
.guide__caution{display: block;font-size: 12px;color: #989898;}
.title-common-primary{font-size:2.3em;color: #675CD7;text-align: center;}

/*--CTA--*/
main .cta__btn{margin-top: 0;}
main .cta-wrapper{padding: 0;}
main #guide-situation .cta {width: 100%;margin: 0 auto;padding: 0;}
main #guide-situation .cta__btn {margin-top: 0;flex-wrap: nowrap;gap: 20px;}
main #guide-situation .cta__btn a {
  flex: 1;
  width: auto;
  min-width: inherit;
  gap: 0 5px;
  border-radius: 10px;
  padding-right: 40px;
}
main #guide-situation .cta__btn a img{width: 40px;}
main #guide-situation #situation__online .cta__btn a img{width: 27px;}
main #guide-situation .cta__btn a span{font-size: 13px;}
main #guide-situation .cta__btn a p{font-size: 20px;}
main #guide-situation .cta__btn a svg{width: 30px;right: 10px;}

/*--ご状況に合わせてご選択--*/
#guide-situation{background-color: #FDFBFF;}
#guide-situation .section__wrapper{max-width: 900px;}
.guide-situation__title{max-width: 900px;display: grid;gap: 0.5em;justify-items: center;}
.guide-situation__title .title-common-primary {margin-bottom:0;}
.situation__tab-container{
width: 100%;
display: flex;
justify-content: center;
gap: 2rem;
transition: 0.2s;
margin-top: 60px;
}
.situation__tab {
cursor: pointer;
background-color: #E1DFF7;
border-radius: 10px 10px 0 0;
color: #fff;
text-align: center;
padding:20px 0 0 0;
flex: 1;
position: relative;
}
.situation__tab.active{background-color: #675DD7;}
.situation__tab.active:after{
content: "";
position: absolute;
bottom: -25px;right: 0;left: 0;
margin: auto;
width: 34px;
height: 18px;
background: #ffffff;
clip-path: polygon(0 0, 100% 0%, 50% 100%);
}
.situation__tab-title{font-size: 28px;font-weight: 700;}
.situation__item__title.pc{display: block;}
.situation__item__title.sp{display:none;}
.situation__tab-title span{display: block;font-size:0.65em;}
.situation__tab-title caption{display: block;font-size: 14px;}

.situation__container{width:100%;background-color: #675DD7;padding: 5rem 0 60px 0;}
.situation__content{
width: 95%;
max-width: 750px;
height: auto;
display: none;
color: #fff;
text-align: center;
margin: 0 auto;
}
.situation__content h3{font-size:1.72em;margin: 0;padding: 0;}
.situation__content .experience-title__caption{color: #fff;margin: 1rem 0 2.5rem 0;}
.situation__content.show {display:block;}
.situation__list {
width: 100%;
height: auto;
margin:0 auto 3rem auto;
display: grid;
justify-items: center;
gap:3rem;
counter-reset: step;
}
.situation__item{
width: 100%;
height: auto;
display: flex;
justify-content: space-between;
background-color: #fff;
border-radius: 0 0 20px 0;
counter-reset: number 0;
position: relative;
}
.situation__item__step{
width: 50px;
height: 50px;
padding-top: 5px;
box-sizing: border-box;
border-radius: 0 0 10px 0;
text-align: center;
font-size: 10px;
font-weight: 700;
color: #7471FF;
background-color: #F2F0FF;
line-height: 1.8em;
}
.situation__item__step:after{
counter-increment: step;
content: "0"counter(step);
font-size: 20px;
display: block;
}
.situation__item__imagebox {
width: calc(35% - 50px);
height: 100%;
display: grid;
padding: 2.5% 2.5% 2.5% 0;
align-items: center;
justify-content: center;
}
.situation__item__imagebox img {width: 100%;max-width: 170px;padding: 2.5% 0;}
.situation__item:last-child .situation__item__imagebox img{width: 105px;}

.situation__item__textbox {
width:65%;
height: auto;
text-align: left;
color: #3F3D56;
padding:20px 20px 20px 0;
display: grid;
align-items: center;
align-content: center;
}
.situation__item__title{font-size:1.45em;font-weight: 700;color: #3F3D56;text-align: left;}
.situation__item__text{margin: 0.5em 0;}
.situation__item__caution{font-size:0.85em;color: #989898;}
.situation__item__btn{
width: 100%;
max-width: 300px;
color: #fff;
text-align: center;
font-size: 1.15em;
font-weight: 500;
line-height: 1em;
background: #675cd7;
cursor: pointer;
display: inline-block;
letter-spacing: 0.02em;
position: relative;
padding: 20px;
margin-top: 1em;
border-radius: 50px;
}
.situation__item__btn:after {
content: "";
position: absolute;
top: 50%;
right: 5px;
width: 30px;
height: 30px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
background: url(../images/plan/arrow_icn_03.png) 50% 50% / contain no-repeat;
}
.situation__item__btn:hover{color: #fff;}

/*--ご契約について・お支払い方法--*/
#guide-contract,#guide-payment{
width: 90%;
max-width: 1125px;
margin: 0 auto;
padding-bottom: 0;
}
.guide-contract__list,.guide-payment__list{
width: 100%;
height: auto;
display: flex;
justify-content: center;
gap: 4rem;
margin: 40px auto 0 auto;
}
.guide-contract__item{flex:1;}
.guide-contract__item p{width: 100%;}
.guide-contract__item-image{
width: 123px;
height: 123px;
border-radius: 50%;
background-color: #FDFBFF;
display: grid;
justify-items: center;
align-items: center;
margin: 0 auto;
}
.guide-contract__title{
font-family: "Inter", "meiryo", sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 1.3em;
text-align: center;
color: #675CD7;
margin: 15px 0 10px 0;
}

#guide-payment{padding-bottom: 100px;}
.guide-payment__item {
flex: 1;
display: grid;
justify-items: center;
align-content: start;
background-color: #fff;
filter: drop-shadow(0 0 10px rgba(36, 25, 162, 0.15));
border-radius: 16px;
padding: 30px;
}
.guide-payment__item p{width: 100%;margin: 0;}
.guide-payment__item-image {
width: 100%;
max-width: 300px;
height: auto;
aspect-ratio: 5 / 3;
display: grid;
align-items: center;
align-content: center;
margin: 1em 0;
}

.section-top-faq{background-color: #FDFBFF;}
.paragraph-common h3{margin: 0;}

/*--responsive--*/
@media print, (min-width: 820px) {
  .experience-title__h1 {margin-bottom: 35px;font-size: 48px;line-height: 1.2;}
}
@media only screen and (max-width: 1080px) {
  main .cta-wrapper{padding: 0;}
  main #guide-situation .cta-wrapper{width: 100%;}
}
@media only screen and (max-width: 899px){
  .situation__tab-container {padding: 0 2.5%;}
  #guide-situation{padding-bottom: 0;}
  .situation__container{padding-bottom: 100px;}
}
@media only screen and (max-width: 860px){
main #guide-situation .cta-wrapper{width: 95%;}
}
@media only screen and (max-width: 768px) {
  main section{padding: 60px 0;}
  main .keni-main_inner {padding: 20px 0 40px 0;}
  .experience-title__h1{margin: 0 0 0.5em 0;font-size:1.72em;}
  .experience-title__caption {font-size: 14px;}
  .title-common-primary{font-size:1.72em;}
  main #guide-situation .cta__btn a img {width: 60px;}
  #guide-situation{padding-bottom: 0;}
  .situation__tab-title{font-size:18px;line-height: 1.3em;}
  .guide-contract__item p.guide-contract__title{font-size: 1.3em;line-height: 1.3em;}
  .guide-contract__title{font-size: 1.3em;line-height: 1.3em;}
}

@media only screen and (max-width: 677px) {
  .experience-title__caption {text-align: left;}

  main #guide-situation .cta-wrapper{max-width: 480px;}
  main #guide-situation .cta__btn{flex-wrap: wrap;}
  main #guide-situation .cta__btn a{width: 100%;flex: auto;}
  main #guide-situation .cta__btn a{padding: 15px;justify-content: flex-start;gap: 15px;}
  main #guide-situation .cta{padding: 0;}
  main #guide-situation .cta__btn a svg {right: 15px;}

  #guide-situation .section__wrapper{width: 100%;}
  .guide-situation__title {margin-bottom: 3rem;}
  .situation__tab-container{max-width: calc(480px + 5%);gap: 1rem;padding: 0 2.5%;margin: 0 auto;}
  .situation__tab {flex: auto;padding: 10px 0;}
  .situation__tab.active:after{width: 12px;height: 6px;bottom: 0;}
  .situation__tab-title{font-size: 13px;}
  .situation__item__title.sp{display: block;}
  .situation__item__title.pc{display:none;}
  .situation__container{padding:3rem 2.5% 60px 2.5%;}
  .situation__content .experience-title__caption{text-align: center;}
  .situation__list {gap: 2rem;max-width: 480px;}
  .situation__item {flex-wrap: wrap;padding: 2.5% 5% 5% 5%;}
  .situation__item__step {position: absolute;left: 0;top: 0;}
  .situation__item__imagebox, .situation__item__textbox {width: 100%;height: auto;padding: 0;}
  .situation__item__imagebox {min-height:inherit;padding: 10px 0 5px 0;}
  .situation__item__imagebox img {width: 150px;}
  #situation__online .situation__item:nth-child(3) .situation__item__imagebox img {width: 190px;}
  .situation__item__title {color: #3F3D56;padding-left: calc(50px - 5% + 10px);}
  .situation__item__btn {margin: 1em auto 0 auto;}

  .guide-contract__list,.guide-payment__list{display: grid;}
  .guide-contract__item {display: flex;flex-wrap: wrap;align-items: center;gap: 1em;}
  .guide-contract__item-image{width: 60px;height: 60px;}
  .guide-contract__item-image img {width: 30px;height: auto;}
  .guide-contract__item:last-child .guide-contract__item-image img {width: 40px;height: auto;}
  .guide-contract__item p{width: 100%;}
  .guide-contract__item p.guide-contract__title{width: calc(100% - 60px - 1em);text-align: left;margin: 0;}
  .guide-payment__item-image {max-width: 250px;min-height: 90px;aspect-ratio: auto;}
}