@charset "utf-8";

/*------Sokoire pageTitle-------*/
.page_title h1{
height:auto;
margin:0 auto;
}
@media screen and (min-width:768px){
.page_title{
height:400px;
background-image:url(../../img/slider_sokoire_bg.webp);
}
.page_title h1{
width:550px;
padding:70px 0;
}
}
@media screen and (max-width:767px){
.page_title{
height:80vw;
background-image:url(../../img/slider_sokoire_bg_sp.webp);
}
.page_title h1{
width:85.3%;
padding:5.3vw 0;
}
}


/*------Sokoire common-------*/
article h2.ttl{
border-color:#0032ff;
border-style:solid;
font-weight:600;
line-height:1.3;
color:#0032ff;
}
@media screen and (min-width:768px){
article section section{
padding:30px 0 35px;
}
article h2.ttl{
margin-bottom:25px;
padding:15px 20px;
border-width:3px 0;
font-size:3.33rem;
}
}
@media screen and (max-width:767px){
article section section{
padding:5vw 0 5vw;
}
article h2.ttl{
margin-bottom:4vw;
padding:1.3vw 2vw 1.5vw;
border-width:2px 0;
font-size:4.2vw;
}
}


/*------Sokoire intro-------*/
#sokoire_intro{
text-align:center;
font-weight:500;
}
#sokoire_intro p{
line-height:1.579;
}
#sokoire_intro p strong{
display:block;
font-weight:500;
}
#sokoire_intro .box{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:center;
border-color:#0032ff;
border-style:solid;
}
#sokoire_intro .box p,
#sokoire_intro .box a{
color:#0032ff;
}
#sokoire_intro .box .mov img{
margin-bottom:0.5em;
}
@media screen and (min-width:768px){
#sokoire_intro{
padding-top:60px;
}
#sokoire_intro p{
font-size:2.44rem;
}
#sokoire_intro p strong{
font-size:157.9%;
}
#sokoire_intro .box{
gap:3rem 2.94%;
width:90%;
margin:25px auto 30px;
padding:40px 0 7px;
border-width:4px;
border-radius:2.5rem;
}
#sokoire_intro .box .img{
width:min(62%,545px);
margin-bottom:3.5rem;
}
#sokoire_intro .box .mov{
width:min(30%,256px);
font-weight:500;
font-size:1.7rem;
}
#sokoire_intro .box p{
font-size:2.05rem;
line-height:1;
}
}
@media screen and (max-width:767px){
#sokoire_intro{
padding-top:8vw;
}
#sokoire_intro p{
font-size:3.6vw;
line-height:1.357;
}
#sokoire_intro p strong{
margin-top:0.25em;
font-size:6.666vw;
font-weight:600;
}
#sokoire_intro .box{
flex-direction:column;
width:92%;
margin:3.5vw auto 5vw;
padding:4vw 0 2vw;
border-width:2px;
border-radius:4vw;
}
#sokoire_intro .box .img{
width:94%;
margin-top:3vw;
}
#sokoire_intro .box .mov{
width:42.2%;
margin-top:-8vw;
font-weight:500;
font-size:2.27vw;
}
#sokoire_intro .box .mov a{
text-decoration:none;
}
#sokoire_intro .box p{
font-size:3.333vw;
line-height:1.44;
font-weight:600;
}
}


/*------Sokoire compare-------*/
#sokoire_compare{
font-weight:400;
}
#sokoire_compare figcaption{
text-align:right;
}
#sokoire_compare .list{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:center;
width:100%;
}
@media screen and (min-width:768px){
#sokoire_compare .txt{
margin:0 20px;
font-size:2rem;
}
#sokoire_compare .img{
width:90%;
margin:25px auto 0;
}
#sokoire_compare figcaption{
padding:1em 0.75em 0;
font-size:1.2rem;
}
#sokoire_compare .list{
gap:4%;
margin-top:45px;
}
#sokoire_compare .list li{
width:23.6%;
}
}
@media screen and (max-width:767px){
#sokoire_compare .txt{
margin:0 2.5vw;
font-size:2.93vw;
}
#sokoire_compare .img{
width:98%;
margin:2.66vw auto 0;
}
#sokoire_compare figcaption{
padding:0.5em 0 0;
font-size:2.13vw;
}
#sokoire_compare .list{
gap:0 10vw;
margin-top:4vw;
}
#sokoire_compare .list li{
width:35.8%;
margin:-0.5vw 0;
}
}


/*------Sokoire merit-------*/
#sokoire_merit .merit_box{
width:100%;
margin:0 auto;
}
#sokoire_merit h3{
text-align:center;
font-weight:400;
line-height:1.3;
color:#0032ff;
}
#sokoire_merit h4{
width:100%;
background:#0032ff;
text-align:center;
color:#ffffff;
}
#sokoire_merit .txt{
text-align:center;
color:#0032ff;
}
@media screen and (min-width:768px){
#sokoire_merit .merit_box{
display:flex;
}
#sokoire_merit .merit{
position:relative;
width:calc(100% / 3);
padding:0 25px 60px;
}
#sokoire_merit .merit:nth-child(n+2)::before{
content:'';
position:absolute;
left:-10px;
top:0;
display:block;
width:20px;
height:100%;
background:url(../../sokoire/img/arw.webp) no-repeat center center / contain;
}
#sokoire_merit h3{
font-size:6.2rem;
}
#sokoire_merit h4{
height:4.2rem;
line-height:4.2rem;
margin:20px 0;
border-radius:2.1rem;
font-size:2.3rem;
}
#sokoire_merit [class^="img"]{
text-align:center;
aspect-ratio:274/190;
width:100%;
height:auto;
}
#sokoire_merit .img05{
padding-top:7.9%;
}
#sokoire_merit .img06{
aspect-ratio:274/233;
margin-top:60px;
}
#sokoire_merit [class^="img"] img{
max-width:initial;
height:100%;
}
#sokoire_merit [class^="cap"]{
width:75%;
margin:0 auto;
padding:10px 0;
font-size:1.3rem;
line-height:1.3;
}
#sokoire_merit .cap04{
width:80%;
}
#sokoire_merit .cap05{
width:90%;
}
#sokoire_merit .txt{
font-size:3.72rem;
}
}
@media screen and (max-width:767px){
#sokoire_merit .merit_box{
width:88%;
}
#sokoire_merit .merit{
width:100%;
}
#sokoire_merit .merit::after{
content:'';
display:block;
clear:both;
}
#sokoire_merit .merit+.merit{
padding-top:4vw;
}
#sokoire_merit .box{
float:left;
width:46.6%;
}
#sokoire_merit .box+.box{
float:right;
}
#sokoire_merit h3{
font-size:8.2vw;
font-weight:600;
margin-bottom:1vw;
}
#sokoire_merit h4{
height:5.6vw;
line-height:5.6vw;
margin:0 0 3vw;
border-radius:3vw;
font-size:3.33vw;
}
#sokoire_merit [class^="img"]{
text-align:center;
width:100%;
height:26vw;
}
#sokoire_merit .img05{
margin:4vw 0;
height:23vw;
}
#sokoire_merit .img06{
height:31vw;
}
#sokoire_merit [class^="img"] img{
max-width:initial;
height:100%;
}
#sokoire_merit [class^="cap"]{
width:100%;
margin:0 auto;
padding:8px 0;
font-size:2.17vw;
line-height:1.3;
}
#sokoire_merit .cap04{
width:110%;
margin-right:-10%;
}
#sokoire_merit .cap05{
width:118%;
margin-left:-8%;
margin-right:-8%;
}
#sokoire_merit .txt{
margin-top:4vw;
font-size:4vw;
font-weight:700;
line-height:1.5;
}
}


/*------Sokoire optimal-------*/
#sokoire_optimal::after{
content:'';
display:block;
clear:both;
}
#sokoire_optimal dl{
float:left;
text-align:center;
}
#sokoire_optimal dt strong{
font-size:164.7%;
}
#sokoire_optimal .kome{
padding-left:1em;
text-indent:-1em;
text-align:left;
line-height:1.3;
}
@media screen and (min-width:768px){
#sokoire_optimal dl{
width:45%;
margin-left:5%;
}
#sokoire_optimal dl+dl{
margin-left:0;
margin-right:5%;
}
#sokoire_optimal dt{
font-size:2.42rem;
}
#sokoire_optimal dd{
aspect-ratio:450/428;
width:100%;
height:auto;
}
#sokoire_optimal dt strong{
font-weight:400;
}
#sokoire_optimal dd img{
width:auto;
max-width:initial;
height:100%;
}
#sokoire_optimal dl+dl dd{
text-align:left;
margin-left:19.22%;
}
#sokoire_optimal .kome{
float:right;
width:119.22%;
margin-top:10px;
margin-right:-19.22%;
font-size:2.14rem;
}
}
@media screen and (max-width:767px){
#sokoire_optimal dl{
width:37vw;
margin-left:5.15vw;
}
#sokoire_optimal dl+dl{
margin-left:2.4vw;/*1.2+1.2 full89vw/48.5+48.5*/
margin-right:-1.48vw;
}
#sokoire_optimal dt{
font-size:3.23vw;
text-align:center;
font-weight:700;
}
#sokoire_optimal dd{
margin-top:1vw;
text-align:right;
}
#sokoire_optimal dd img{
width:auto;
max-width:initial;
height:56vw;
}
#sokoire_optimal dl+dl dd{
width:46.13vw;/*46.13+1.2*/
margin-right:-1.48vw;
text-align:left;
}
#sokoire_optimal .kome{
margin-top:0.5em;
font-size:2.85vw;
}
}


/*------Sokoire result-------*/
#sokoire_result .list{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:center;
}
#sokoire_result .list li{
aspect-ratio:240/200;
height:auto;
overflow:hidden;
}
#sokoire_result .list img{
width:100%;
max-width:initial;
}
@media screen and (min-width:768px){
#sokoire_result .list{
gap:50px 4.2%;
padding-top:40px;
}
#sokoire_result .list li{
width:24%;
}
}
@media screen and (max-width:767px){
#sokoire_result .list{
gap:4vw 5.3vw;
padding-top:2.5vw;
}
#sokoire_result .list li{
width:35.82%;
}
#sokoire_result .list li:nth-child(3){
margin:0 20%;
}
}


/*------Sokoire automatic-------*/
#sokoire_automatic p{
line-height:1.7;
}
#sokoire_automatic p strong{
font-weight:400;
font-size:150%;
line-height:1.3;
}
#sokoire_automatic figcaption{
text-align:right;
}
@media screen and (min-width:768px){
#sokoire_automatic p{
font-size:2.17rem;
}
#sokoire_automatic p strong{
font-weight:400;
}
#sokoire_automatic .img{
width:80%;
margin:60px auto 0;
}
#sokoire_automatic figcaption{
margin-top:20px;
font-size:1.425rem;
transform:translateX(1.5em);
}
}
@media screen and (max-width:767px){
#sokoire_automatic h2{
padding-right:0;
font-size:4.1vw;
}
#sokoire_automatic p{
margin:0 3vw;
font-size:3vw;
font-weight:600;
}
#sokoire_automatic p strong{
font-weight:700;
}
#sokoire_automatic .img{
width:100%;
margin:3vw auto 0;
padding-left:4vw;
}
#sokoire_automatic .img img{
width:80vw;
}
#sokoire_automatic figcaption{
margin-top:1em;
font-size:1.9vw;
}
}


/*------Sokoire faq-------*/
#sokoire_faq .faq_box{
display:grid;
margin:0 auto;
}
#sokoire_faq dl{
background:#c8e6ff;
line-height:1.73;
}
#sokoire_faq dt{
position:relative;
display:flex;
align-items:center;
font-weight:600;
}
#sokoire_faq dd{
position:relative;
background:#ffffff;
font-weight:400;
}
#sokoire_faq dt:before,
#sokoire_faq dd:before{
position:absolute;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
color:#ffffff;
font-weight:600;
line-height:1;
}
#sokoire_faq dt:before{
content:'Q';
background:#0032ff;
}
#sokoire_faq dd:before{
content:'A';
background:#ff6450;
}
@media screen and (min-width:768px){
#sokoire_faq .faq_box{
grid-template-columns:1fr 1fr;
gap:2rem 4%;
width:94%;
}
#sokoire_faq dl{
display:grid;
grid-template-rows:auto 1fr;
height:100%;
padding:9px 4.44% 19px;
font-size:1.49rem;
}
#sokoire_faq dt{
min-height:40px;
padding:5px 0 0 58px;
}
#sokoire_faq dd{
min-height:155px;
margin-top:5px;
padding:15px 12px 15px 58px;
border-radius:1.5rem;
}
#sokoire_faq dt:before,
#sokoire_faq dd:before{
left:8px;
width:38px;
height:38px;
font-size:2.6rem;
}
#sokoire_faq dt:before{
top:0;
}
#sokoire_faq dd:before{
top:8px;
}
}
@media screen and (max-width:767px){
#sokoire_faq .faq_box{
grid-template-columns:1fr;
gap:2.67vw;
width:84%;
}
#sokoire_faq dl{
display:block;
padding:1.5vw 4% 3vw;
font-size:2.667vw;
}
#sokoire_faq dt{
min-height:6.4vw;
padding:0 0 0 8.5vw;
}
#sokoire_faq dd{
min-height:25vw;
margin-top:1.5vw;
padding:2.4vw 2vw 2.4vw 8.5vw;
border-radius:2vw;
}
#sokoire_faq dt:before,
#sokoire_faq dd:before{
left:1.1vw;
width:6.4vw;
height:6.4vw;
font-size:4.6vw;
}
#sokoire_faq dt:before{
top:0;
}
#sokoire_faq dd:before{
top:1.1vw;
}
}


/*------Sokoire btn-------*/
#sokoire_btn .btn_box .btn{
display:block;
margin:0 auto;
padding:1.2em 0.5em 1.2em 4em;
border-radius:0.75em;
background:#0032ff url(../../sokoire/img/ico_contact.webp) no-repeat left 1em center / 3em;
box-shadow:0.175em 0.175em 0 0 #ddd;
text-align:center;
font-weight:600;
line-height:1.2;
color:#fff;
}
@media screen and (min-width:768px){
#sokoire_btn{
padding-bottom:60px;
}
#sokoire_btn .btn_box{
padding-top:10px;
}
#sokoire_btn .btn_box .btn{
width:37.3%;
font-size:2.8rem;
}
}
@media screen and (max-width:767px){
#sokoire_btn{
padding:1vw 0;
}
#sokoire_btn .btn_box .btn{
width:55.67%;
font-size:3.6vw;
text-decoration:none;
}
}