/*===ミライAIの特徴===*/
main section{font-size: 14px;line-height: 1.6em;padding:100px 0;color: #3F3D56;}
section:nth-of-type(even){background-color:#FDFBFF;}
main section p{font-size: 14px;line-height: 1.6em;padding: 0;margin: 0;}
main strong{font-weight: inherit;}
main .section-wrapper{width:100%;height: auto;margin: 0 auto;}
main .box{
height: auto;
padding: 40px;
background-color: #fff;
filter: drop-shadow(0 0 10px rgba(36, 25, 162, 0.15));
border-radius: 8px;
}

.title-box{
width: 100%;
height: auto;
position: relative;
padding-bottom: 5em;
text-align: center;
margin-bottom: 6rem;
}
.title-box__inner{
position:absolute;
bottom: 0;
z-index:1;
width: 100%;
display: grid;
gap:1em;
justify-items: center;
align-items: end;
}
.title-box__inner h2{
font-size:clamp(1.72em,3.75vw,48px);
color: var(--primary);
font-weight: 700;
line-height: 120%;
}
.title-box__inner > p{color: var(--accessibie);font-weight: 700;font-size:clamp(16px,2.5vw, 32px);}
main .title-box span {
font-size:clamp(56px,10vw, 130px);
font-weight: 700;
white-space: nowrap;
color: #F3F2FF;
display: block;
line-height: 1em;
}

.box__text > h3{
color: var(--secondary);
font-size: 20px;
font-weight: 700;
margin: 0.1em 0 0.6em 0;
padding: 0;
line-height: 1.4em;
}
.box__text > p{font-size: 14px;font-weight: 400;color: var(--primary);}

#fv{width: 100%;padding: 0;height: 500px;}
.fv__wrapper{
width:95%;
max-width: 1280px;
height: 100%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
background-image: url(../images/features/fv_back.png);
background-position: 98% center;
background-repeat: no-repeat;
background-size: auto 100%;
}
.fv__text{width:55%;}
#fv h1{font-size:42px;color: var(--accessibie);line-height:114%;}
#fv h2{font-size: 20px;color: var(--primary);margin: 0.7em 0 1.5em 0;}
#fv p{
font-size: 16px;
line-height:150%;
font-weight: 500;
color: var(--primary);
}
#fv img{width: 45%;height:auto;display:block;}

.contents_line{
width: 90%;
max-width: 900px;
height: auto;
margin: 0 auto;
display:grid;
gap: 5rem;
justify-content: center;
counter-reset: step;
}
.contents_line .box{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items:center;
}
.contents_line .box__text:before{
counter-increment: step;
content: "POINT. " counter(step);
font-family: "Inter" , "sans-serif";
font-size: 14px;
font-weight: 700;
color: var(--accessibie);
}
.contents_line .box__text{width:50%;}
.contents_line .box__img{
width:48%;
height: auto;
aspect-ratio: 372 / 262;
display: grid;
align-items: center;
justify-items: center;
}
.contents_line .box__img img {width: 100%;max-width: 480px;height: auto;}

.contents_side{
width: 90%;
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-auto-flow: column;
grid-auto-rows: 1fr;
grid-template-columns: 345px auto;
grid-template-rows: max-content min-content;
gap:2.5rem 3rem;
grid-template-areas:"img top""img center""img bottom";
justify-content: center;
}
.contents_side > .box__img{grid-area: img;display: grid;align-items: center;}
.contents_side > .box__img img {width: 100%;height: auto;}
.contents_side > .box{padding: 30px;}
.contents_side > .box.top{grid-area: top;}
.contents_side > .box.center{grid-area: center;}
.contents_side > .box.bottom{grid-area: bottom;}
.contents_side .box__text h3{color:var(--accessibie);}

.contents_tile {
width: 90%;
max-width: 1100px;
margin: 0 auto;
height: auto;
display: flex;
flex-wrap: wrap;
gap: 3rem;
}
.contents_tile > .box {width: calc(50% - 3rem);}
.contents_tile h3{
color:var(--accessibie);
text-align: center;
line-height: 150%;
margin: 0;
padding: 0;
}
  #for-call-center .contents_tile h3{min-height: 60px;display: grid;align-items: center;}
.contents_tile .box__img{
width: 100%;
height: auto;
grid-area: img;
margin: 1.7rem 0;
display: grid;
align-items: center;
}
.contents_tile .box__img img{width: 100%;height: auto;display: block;}

#why{padding-top:20px;}
#why .breadcrumbs {margin: 0 auto 40px auto;}
#comparison > h2{width: 90%;max-width: 1150px;margin: 0 auto 8rem auto;}

.comparison__wrapper{
width: 90%;
max-width: 1150px;
margin: 0 auto;
overflow-y: hidden;
overflow-x: scroll;
}
.comparison__table{min-width:820px;margin: 0 auto;table-layout: fixed;}
.comparison__table th,.comparison__table td{
font-size: 16px;
font-weight: 500;
color: var(--primary);
padding: 1em;
vertical-align: middle;
background-color:#fff;
text-align: left;
}
.comparison__table th{width: 150px;padding: 1em 0.5em;}
.comparison__table tr:nth-of-type(odd) th,.comparison__table tr:nth-of-type(odd) td{background-color:#FAFAFB;}
.comparison__table tr.name td{padding: 0;text-align: center;}
.comparison__table tr.name td:nth-of-type(2){padding: 0 5px;}
.comparison__table tr.name td p{
background-color: transparent;
padding: 1rem;
border-radius:4px 4px 0 0;
color: #fff;
}
.comparison__table tr.name td:first-of-type p{background-color:#7569F0;}
.comparison__table tr.name td:nth-of-type(2) p{background-color:#FFC400;}
.comparison__table tr.name td:last-of-type p{background-color:#F96868;}
.comparison__table tr.price td{font-size: 12px;}
.comparison__table tr.comparison_price td .Inter_font{font-size:20px;font-weight: 700;}

.comparison__message{
width:90%;
max-width: 1150px;
margin:100px auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap:5%;
}
.comparison__message_img{
width: 30%;
display: grid;
align-items: center;
justify-items: center;
}
.comparison__message_img img{
width: 100%;
max-width: 320px;
height: auto;
aspect-ratio:316 / 263;
display: block;
}
.comparison__message_text{
width: 65%;
display:grid;
gap: 1.2em;
align-items: center;
}
.comparison__message_text > h3{
font-size: 32px;
color:var(--secondary);
padding: 0;
margin: 0;
line-height:120%;
}
.comparison__message_text > h4{
font-size: 20px;
color: var(--accessibie);
padding: 0 0 0.3em 0;
margin: 0;
line-height:120%;
}
.comparison__message_text > p{font-size: 14px;color: var(--primary);}

main .cta{background-color: inherit;color: var(--accessibie);}
main .cta-wrapper{width: 90%;padding: 0;font-size: 20px;}
main .cta__copy {
width: 100%;
display: flex;
justify-content: center;
gap: 0.25em;
font-size: clamp(1.72em, 3.75vw, 48px);
line-height: 140%;
}
main .cta__copy:before, main .cta__copy:after{content:none;}
.cta__copy > span{
width: 15px;
height: 40px;
position: relative;
display: inline-block;
}
.cta__copy > span:last-child {transform: scaleX(-1);}
.cta__copy > span:before,.cta__copy > span:after{
content: "";
border-radius: 5px;
width:3px;
background-color:var(--accessibie);
position: absolute;
bottom:0;
}
.cta__copy > span:before{height: 24px;transform:rotate(330deg);left:0;}
.cta__copy > span:after{height: 44px;transform:rotate(340deg);right:0;}

main section p.cta__text {color: var(--secondary);font-size: 1em;margin: 1.2em 0 2em 0;}
main .cta__btn {margin: 0;gap: 1em;}
main .cta__btn a,main .cta__btn a:first-child{
width:fit-content;
min-width:inherit;
padding: 1.5em;
filter: drop-shadow(0 3px 4px rgb(36, 25, 162));
}
main .cta__btn a img{width: 34px;}
main .cta__btn a svg{width: 30px;position: static;}
main .cta__btn a p{font-size: 1.12em;}

@media only screen and (max-width: 768px) {
main section {padding: 80px 0;}
main .section-wrapper {width: 90%;}
.title-box {margin-bottom: 3rem;}
main .title-box span {white-space: break-spaces;}
main .box {padding: 30px 20px;}
#fv {
height: auto;
background-size: auto 250px;
background-position: right top;
margin-top: 50px;
padding:20px 0 40px 0;
}
.fv__wrapper {
width: 100%;
padding: 20px 5% 0 5%;
background-size: 100%;
background-position: 110% 0;
gap: 1.5rem;
}
#fv img {width: 100%;}
.fv__text,.contents_line .box__text{width: 100%;order:2;}
#fv h1 {font-size: 32px;}
#fv h2 {margin:0.7em 0;}
#fv p {font-size: 14px;}
.contents_line .box__img{width:100%;order:1}
.contents_side {
grid-template-areas:"img""top""center""bottom";
grid-template-rows: unset;
grid-auto-rows: unset;
grid-template-columns: unset;
}
.contents_side > .box__img{height:auto;}
.contents_tile > .box{width: 100%;}
.contents_tile .box__img {aspect-ratio: unset;}
#comparison > h2 {margin-bottom: 3rem;}
.comparison__table th, .comparison__table td {font-size: 14px;}
.comparison__table th {width: 130px;}
.comparison__message{gap: 2rem;margin: 40px auto;}
.comparison__message_img{width: 100%;}
.comparison__message_text{width:100%;}
.comparison__message_text > h3{font-size: 24px;}
.comparison__message_text > h4{font-size: 18px;}
main .cta-wrapper{font-size: 16px;}
main .cta__copy{gap: 1em;align-items: flex-end;}
main .cta__btn a, main .cta__btn a:first-child {width: 100%;justify-content: space-between;}
main .cta__btn a svg{margin: 0;}
}