@charset "UTF-8";
/* =====================================
	全体設定
===================================== */

html{
    font-size: 62.5%;
}

a{
	color:#000;
	text-decoration:none;
    transition: 0.3s all ease;
}

a:hover{
	opacity: 0.6;
}

.sp{
	display:none !important;
}

body{
	position: relative;
	margin: 0 auto;
	font-size: 1.8rem;
	font-family: "Noto Sans JP", serif;
    font-weight: normal;
    font-style: normal;
	color: #000;
    line-height: 1.67;
	text-align: left;
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;/*Chrome,Safari*/
	-ms-text-size-adjust: 100%;/*EgdeMobile*/
	-moz-text-size-adjust: 100%;/*firefox*/
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "palt";
    letter-spacing: 0.02em;
}

img{
    max-width: 100%;
}

sup{
    font-size: 60%;
}

/* =====================================
	header
===================================== */

header{
    width: 100%;
    max-width: 1280px;
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    margin: 0 auto;
}

header .logo{
    display: flex;
    align-items: center;
    gap: min(2.734375vw, 35px);
}

header .logo li:nth-child(1) img{
    width: min(23.28125vw, 298px);
}

header .logo li:nth-child(2) img{
    width: min(11.015625vw, 141px);
}

header .cv-btn{
    display: flex;
    align-items: center;
    gap: min(0.78125vw, 10px);
}

header .cv-btn li a{
    font-size: min(1.875vw, 2.4rem);
    font-weight: bold;
    color: #fff;
    line-height: 1;
    height: min(4.140625vw, 53px);
    padding: min(1.015625vw, 13px) min(5.78125vw, 74px) 0 min(4.21875vw, 54px);
    background: #18b9d4;
    border-radius: calc(53px / 2);
    position: relative;
    display: block;
}

header .cv-btn li:nth-child(2) a{
    padding: min(1.015625vw, 13px) min(4.140625vw, 53px) 0 min(2.5vw, 32px);
    background: #ff9301;
}

header .cv-btn li a::before{
    content: "";
    width: min(2.109375vw, 27px);
    height: min(2.109375vw, 27px);
    background: url("../img/arrow01.svg") center no-repeat;
    background-size: cover;
    position: absolute;
    top: 50%;
    right: min(1.171875vw, 15px);
    transform: translateY(-50%);
}

header .cv-btn li:nth-child(2) a::before{
    background: url("../img/arrow02.svg") center no-repeat;
    background-size: cover;
}



/* =====================================
	main
===================================== */

.visual{
    position: relative;
    width: 100%;
    height: 611px;
    background: url("../img/bg01.png") no-repeat center;
    overflow: hidden;
}

.visual h1 img{
    margin: 0 auto;
}

.visual p{
    position: absolute;
    bottom: 13%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2.6rem;
    font-weight: bold;
    line-height: 1.461538;
    color: #fff;
    text-align: center;
}

.nayami{
    width: 100%;
    padding: 115px 40px 71px;
    background: url("../img/bg02.png") no-repeat center bottom;
    position: relative;
    overflow: hidden;
}

.nayami::before{
    content: "";
    width: 370px;
    height: 415px;
    background: url("../img/illust01.png") no-repeat center;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -639px;
}

.nayami .box{
    width: 100%;
    max-width: 900px;
    border: 5px solid #016ab2;
    border-radius: 20px;
    padding: 77px 40px 79px;
    background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%,rgba(255, 255, 255, 1) 88%,rgba(180, 230, 247, 1) 100%);
    margin: 0 auto;
}

.nayami .box h2{
    font-size: 4.2rem;
    font-weight: bold;
    line-height: 1.35;
    text-align: center;
}

.nayami .box h2 strong{
    font-weight: bold;
    color: #016ab2;
}

.nayami .box ul{
    margin: 50px auto 0;
    width: 100%;
    max-width: 600px;
}

.nayami .box ul li{
    font-size: 2.8rem;
    line-height: 1;
    padding: 3px 0 22px 50px;
    border-bottom: 2px dashed #8b8b8c;
    background: url("../img/icon01.svg") no-repeat top left;
    background-size: 42px auto;
}

.nayami .box ul li + li{
    margin-top: 17px;
}

.nayami p{
    width: 100%;
    max-width: 900px;
    margin: 47px auto 0;
    font-size: 3.8rem;
    font-weight: bold;
    line-height: 1.4736842;
    padding-left: 182px;
    color: #fff;
}

.nayami p strong{
    font-weight: bold;
    color: #fff000;
}

.comparison{
    width: 100%;
    padding: 0 40px;
    background: #eaf5ff;
}

.comparison .wrap{
    width: 100%;
    max-width: 1200px;
    padding: 112px 40px 136px;
    background: #fff;
    margin: 0 auto;
}

.comparison .wrap h2{
    font-size: 4.2rem;
    font-weight: bold;
    line-height: 1.33;
    color: #016ab2;
    text-align: center;
}

.comparison .wrap h2 span{
    display: table;
    color: #ff9301;
    margin: 0 auto;
    padding: 0 98px;
    position: relative;
}

.comparison .wrap h2 span::before{
    content: "";
    width: 68px;
    height: 3px;
    border-radius: calc(3px / 2);
    background: #016ab2;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.comparison .wrap h2 span::after{
    content: "";
    width: 68px;
    height: 3px;
    border-radius: calc(3px / 2);
    background: #016ab2;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.comparison .wrap h2 + p{
    font-size: 2.0rem;
    line-height: 1.6;
    color: #231815;
    text-align: center;
    margin-top: 25px;
}

.comparison .wrap .beforeBox{
    width: 100%;
    max-width: min(76.691176vw, 1043px);
    aspect-ratio: 1043 / 376;
    margin: min(8.45588vw, 115px) auto 0;
    background: #e4e4e4;
    border: min(0.367647vw, 5px) solid #3e3a39;
    border-radius: min(1.470588vw, 20px);
    padding: 0 0 min(4.85294vw, 66px);
    position: relative;
}

.comparison .wrap .beforeBox h3{
    font-size: min(3.5294vw, 4.8rem);
    font-weight: 500;
    line-height: 1;
    color: #fff;
    width: min(19.338vw, 263px);
    height: min(5.1470588vw, 70px);
    background: #3e3a39;
    border-radius: min(2.5735294vw, 35px);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: max(-2.5vw, -34px) auto 0;
    padding-bottom: 0.2em;
}

.comparison .wrap .beforeBox ul{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    display: flex;
}

.comparison .wrap .beforeBox ul li{
    width: 25%;
    font-size: min(2.0588vw, 2.8rem);
    font-weight: bold;
    line-height: 1.35;
    color: #231815;
    text-align: center;
    position: relative;
}

.comparison .wrap .beforeBox ul li::before{
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-top: min(1.10294vw, 15px) solid transparent;
    border-bottom: min(1.10294vw, 15px) solid transparent;
    border-left: min(1.9117647vw, 26px) solid #3e3a39;
    border-right: 0;
    position: absolute;
    top: min(5.367647vw, 73px);
    right: max(-1.0294vw, -14px);
}

.comparison .wrap .beforeBox ul li:last-child::before{
    display: none;
}

.comparison .wrap .beforeBox ul li img{
    width: 66.923077%;
    margin: 0 auto min(1.470588vw, 20px);
}

.comparison .wrap .after{
    margin-top: 312px;
    position: relative;
}

.comparison .wrap .after::after{
    content: "";
    display: block;
    width: 376px;
    aspect-ratio: 376 / 142;
    background: linear-gradient(to bottom,rgba(1, 106, 178, 0) 0%,#016ab2 100%);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    position: absolute;
    top: -197px;
    left: 50%;
    transform: translateX(-50%);
}

.comparison .wrap .afterBox{
    width: 100%;
    max-width: min(76.691176vw, 1043px);
    margin: min(5.5147vw, 75px) auto 0;
    background: #eaf5ff;
    border: min(0.367647vw, 5px) solid #016ab2;
    border-radius: min(1.470588vw, 20px);
    padding: 0 min(2.720588vw, 37px) min(5.367647vw, 73px);
    position: relative;
}

.comparison .wrap .afterBox h3{
    font-size: min(3.5294vw, 4.8rem);
    font-weight: 500;
    line-height: 1;
    color: #fff;
    width: min(19.338vw, 263px);
    height: min(5.1470588vw, 70px);
    background: #016ab2;
    border-radius: min(2.5735294vw, 35px);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: max(-2.5vw, -34px) auto 0;
    padding-bottom: 0.2em;
}

.comparison .wrap .afterBox ul{
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: min(3.45588vw, 47px);
    margin-top: min(3.0882353vw, 42px);
}

.comparison .wrap .afterBox ul li{
    width: 48.5294%;
    background: #fff;
    border-radius: min(0.735294vw, 10px);
    padding: min(2.13235vw, 29px) 0 0;
    overflow: hidden;
}

.comparison .wrap .afterBox ul li h4{
    width: 87.012987%;
    margin: 0 auto;
    font-size: min(2.647vw, 3.6rem);
    font-weight: bold;
    line-height: 1;
    padding-bottom: min(1.10294vw, 15px);
    border-bottom: 2px solid #016ab2;
    color: #016ab2;
}

.comparison .wrap .afterBox ul li p{
    width: 87.012987%;
    margin: min(0.735294vw, 10px) auto 0;
    font-size: min(1.470588vw, 2.0rem);
    line-height: 1.5;
    letter-spacing: 0;
}

.comparison .wrap .afterBox ul li .imgArea{
    width: 100%;
    height: min(14.117647vw, 192px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.comparison .wrap .afterBox ul li:nth-child(1) img{
    width: 40.69264%;
}

.comparison .wrap .afterBox ul li:nth-child(2) img{
    width: 35.4978%;
}

.comparison .wrap .afterBox ul li:nth-child(3) img{
    width: 38.961%;
}

.comparison .wrap .afterBox ul li:nth-child(4) img{
    width: 41.55844%;
}

.comparison .wrap .afterBox ul li .function{
    width: 100%;
    padding: min(0.735294vw, 10px) 0 min(1.17647vw, 16px);
    background: #016ab2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: min(0.441176vw, 6px);
}

.comparison .wrap .afterBox ul li .function dt{
    font-size: min(1.9117647vw, 2.6rem);
    font-weight: bold;
    line-height: 1;
    text-align: center;
    color: #fff000;
    width: 100%;
    padding-bottom: min(0.294117647vw, 4px);
}

.comparison .wrap .afterBox ul li .function dd{
    font-size: min(1.470588vw, 2.0rem);
    font-weight: 500;
    line-height: 1;
    color: #016ab2;
    padding: min(0.294117647vw, 4px) min(0.441176vw, 6px) min(0.441176vw, 6px);
    background: #fff;
    margin-top: min(0.441176vw, 6px);
}

.comparison .wrap .afterBox ul li .function .break{
    flex-basis: 100%;
    width: 0;
    height: 0;
    padding: 0;
    background: none;
    margin: 0;
}

.comparison .wrap .balloon{
    width: 100%;
    max-width: 1036px;
    margin: 49px auto 0;
    position: relative;
}

.comparison .wrap .balloon::before{
    content: "";
    background: url("../img/illust06.png") no-repeat center;
    background-size: contain;
    width: 400px;
    height: 317px;
    position: absolute;
    top: -70px;
    right: -48px;
    z-index: 10;
}

.comparison .wrap .balloon p{
    width: 72.6834%;
    background: #18b9d4;
    border-radius: 30px;
    padding: 26px 40px 31px;
    font-size: 3.6rem;
    font-weight: bold;
    line-height: 1.389;
    color: #fff;
    position: relative;
}

.comparison .wrap .balloon p::before{
    content: "";
    width: 38px;
    height: 21px;
    background: #18b9d4;
    position: absolute;
    clip-path: polygon(0 0, 0% 100%, 100% 1px);
    top: 80px;
    right: -38px;
}

.features{
    width: 100%;
    padding: 119px 40px 140px;
    background: linear-gradient(to right,#016bb2 0%,#18b8d4 100%);
}

.features h2{
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    font-size: 4.6rem;
    font-weight: bold;
    line-height: 1.35;
    color: #fff000;
    padding: 0 325px 12px 0;
    border-bottom: 3px solid #fff;
    position: relative;
}

.features h2::before{
    content: "";
    background: url("../img/pic01.png") no-repeat center;
    background-size: contain;
    width: 313px;
    height: 391px;
    position: absolute;
    top: -158px;
    right: -16px;
}

.features h3{
    width: 100%;
    max-width: 1120px;
    margin: 16px auto 0;
    font-size: 3.8rem;
    font-weight: bold;
    line-height: 1.35;
    color: #fff;
    padding: 0 325px 0 0;
}

.features h3 + p{
    width: 100%;
    max-width: 1120px;
    margin: 18px auto 0;
    font-size: 2.0rem;
    line-height: 1.6;
    padding: 0 325px 0 0;
    color: #fff;
}

.features ul{
    width: 100%;
    max-width: 1120px;
    margin: 88px auto 0;
    display: flex;
    justify-content: space-between;
}

.features ul li{
    width: 31.7857%;
    background: #fff;
    border-radius: 20px;
    padding: 0 30px 23px;
    box-shadow: 4px 4px 9px rgba(35, 24, 21, 0.4);
    position: relative;
    z-index: 0;
}

.features ul li:nth-child(1){
    z-index: 3;
}

.features ul li:nth-child(2){
    z-index: 2;
}

.features ul li:nth-child(3){
    z-index: 1;
}

.features ul li::before{
    content: "";
    background: url("../img/arrow03.svg") no-repeat center;
    background-size: contain;
    width: 63px;
    height: 63px;
    position: absolute;
    top: 50%;
    right: -40px;
    transform: translateY(-50%);
    z-index: 10;
}

.features ul li:last-child::before{
    display: none;
}

.features ul li span{
    font-size: 5.8rem;
    font-weight: bold;
    line-height: 1;
    color: #016ab2;
    text-align: center;
    margin-top: -32px;
    -webkit-text-stroke: 10px #fff;
    text-stroke: 10px #fff;
    paint-order: stroke;
    display: block;
}

.features ul li h4{
    font-size: 3.2rem;
    font-weight: 500;
    line-height: 1.40625;
    color: #016ab2;
    text-align: center;
    margin-top: 20px;
}

.features ul li .imgArea{
    width: 100%;
    aspect-ratio: 295 / 230;
}

.features ul li:nth-child(1) .imgArea img{
    width: 93.22%;
    margin: 0 auto;
    transform: translateY(10.43478%);
}

.features ul li:nth-child(2) .imgArea img{
    width: 66.77966%;
    margin: 0 auto;
    transform: translateY(8.69565%);
}

.features ul li:nth-child(3) .imgArea img{
    width: 91.5254%;
    margin: 0 auto;
    transform: translateY(12.1739%);
}

.features ul li p{
    font-size: 2.0rem;
    line-height: 1.6;
}

.results{
    width: 100%;
    padding: 114px 40px 123px;
    background: url("../img/bg03.png") no-repeat top 42px right;
    position: relative;
}

.results::after{
    content: "";
    width: 367px;
    height: 1418px;
    background: url("../img/bg03.png") no-repeat center;
    position: absolute;
    top: 42px;
    left: 0;
    transform: scaleX(-1);
    z-index: 0;
}

.results h2{
    font-size: 4.2rem;
    font-weight: bold;
    line-height: 1.33;
    color: #016ab2;
    text-align: center;
    display: table;
    margin: 0 auto;
    padding: 0 98px;
    position: relative;
    z-index: 10;
}

.results h2 strong{
    font-weight: bold;
    color: #ff9301;
}

.results h2::before{
    content: "";
    width: 68px;
    height: 3px;
    border-radius: calc(3px / 2);
    background: #016ab2;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.results h2::after{
    content: "";
    width: 68px;
    height: 3px;
    border-radius: calc(3px / 2);
    background: #016ab2;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.results .before-after{
    width: 100%;
    max-width: 1124px;
    margin: 63px auto 119px;
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 10;
}

.results .before-after > li{
    width: 47.064%;
    border-radius: 20px;
    padding: 0 46px 45px;
}

.results .before-after > li:nth-child(1){
    border: 5px solid #3e3a39;
    background: linear-gradient(to bottom,#e4e4e4 0%,#e4e4e4 75%,#3e3a39 75%,#3e3a39 100%);
}

.results .before-after > li:nth-child(2){
    border: 5px solid #016ab2;
    background: linear-gradient(to bottom,#eaf5ff 0%,#eaf5ff 75%,#016ab2 75%,#016ab2 100%);
}

.results .before-after > li h3{
    font-size: 4.8rem;
    font-weight: 500;
    line-height: 1;
    color: #fff;
    width: 263px;
    height: 70px;
    border-radius: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: -34px auto 0;
    padding-bottom: 0.2em;
}

.results .before-after > li:nth-child(1) h3{
    background: #3e3a39;
}

.results .before-after > li:nth-child(2) h3{
    background: #016ab2;
}

.results .before-after > li ul{
    width: 100%;
    margin-top: 28px;
    font-size: 2.0rem;
    line-height: 1.7;
    letter-spacing: 0.006em;
}

.results .before-after > li ul li::first-letter{
    font-size: 60%;
    vertical-align: center;
}

.results .before-after > li img{
    margin-top: 21px;
}

.results p img{
    margin: 70px auto 0;
    position: relative;
    z-index: 10;
}

.closing{
    width: 100%;
    height: 530px;
    padding: 98px 40px 0;
    background: url("../img/bg04.png") no-repeat center;
}

.closing .wrap{
    width: 100%;
    max-width: 1200px;
    padding-right: 440px;
    margin: 0 auto;
    position: relative;
}

.closing .wrap::before{
    content: "";
    background: url("../img/illust10.png") no-repeat;
    width: 480px;
    height: 479px;
    position: absolute;
    bottom: -74px;
    right: 0;
}

.closing h2{
    font-size: 4.8rem;
    font-weight: bold;
    line-height: 1.35;
    color: #fff000;
}

.closing p{
    font-size: 2.6rem;
    font-weight: 500;
    line-height: 1.76923;
    color: #fff;
    margin-top: 26px;
}

.closing a{
    width: 578px;
    height: 96px;
    font-size: 4.2rem;
    font-weight: bold;
    line-height: 1;
    padding-bottom: 0.2em;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ff9301 url("../img/arrow04.svg") no-repeat center right 25px;
    border: 5px solid #fff;
    border-radius: 48px;
    margin-top: 34px;
    position: relative;
    z-index: 10;
}


.floating{
    position: fixed;
    top: 60px;
    right: 0;
    z-index: 100;
}

.floating img{
    width: 80px;
}


/* =====================================
	footer
===================================== */

footer{
    width: 100%;
    padding: 21px 0 0;
}

footer a img{
    width: 297px;
    margin: 0 auto;
}

footer small{
    width: 100%;
    background: #000;
    padding: 10px 40px;
    font-size: 1.6rem;
    color: #fff;
    text-align: center;
    display: block;
    margin-top: 19px;
}



@media screen and (max-width:768px){

.pc{
	display:none !important;
}

.sp{
	display:block !important;
}

a:hover{
	opacity: 1;
}

body{
    font-size: 3.467vw;
    width: 100%;
    overflow-x: hidden;
    letter-spacing: 0;
    background: #eaf5ff;
}

#wrapper{
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    background: #fff;
}

/* =====================================
	header
===================================== */

header{
    height: 37px;
    padding: 0 7px;
}

header .logo{
    gap: 8px;
}

header .logo li:nth-child(1) img{
    width: 111.5px;
}

header .logo li:nth-child(2) img{
    width: 53px;
}

header .cv-btn{
    gap: 5px;
}

header .cv-btn li a{
    font-size: 11px;
    height: 21px;
    padding: 4.5px 27.5px 0 22.5px;
    border-radius: calc(21px / 2);
}

header .cv-btn li:nth-child(2) a{
    padding: 4.5px 19px 0 11.5px;
}

header .cv-btn li a::before{
    width: 11px;
    height: 11px;
    right: 5px;
}



/* =====================================
	main
===================================== */

.visual{
    height: auto;
    background: none;
}

.visual p{
    bottom: 7px;
    left: 9px;
    transform: translateX(0);
    font-size: 1.5rem;
    width: 191px;
}

.nayami{
    padding: 60px 30px 35px;
    background: url("../img/sp/bg02.png") no-repeat center bottom;
    background-size: 100% auto;
}

.nayami::before{
    width: calc(321px / 2);
    height: calc(369px / 2);
    background: url("../img/sp/illust01.png") no-repeat center;
    background-size: contain;
    left: 0;
    margin-left: 0;
}

.nayami .box{
    border: calc(5px / 2) solid #016ab2;
    border-radius: 10px;
    padding: 36px 34px 41px;
}

.nayami .box h2{
    font-size: 2.3rem;
    line-height: 1.3043478;
}

.nayami .box ul{
    margin: 13px auto 0;
}

.nayami .box ul li{
    font-size: 1.4rem;
    padding: 3px 0 12px 24px;
    border-bottom: 1px dashed #8b8b8c;
    background: url("../img/icon01.svg") no-repeat top left;
    background-size: calc(38.5px / 2) auto;
}

.nayami .box ul li + li{
    margin-top: 8px;
}

.nayami p{
    margin: 26px auto 0;
    font-size: 2.1rem;
    line-height: 1.38095;
    text-align: center;
    padding-left: 112px;
}

.comparison{
    padding: 0 38px;
}

.comparison .wrap{
    padding: 44px 20px 181px;
}

.comparison .wrap h2{
    font-size: 2.3rem;
    line-height: 1.3043478;
}

.comparison .wrap h2 span{
    padding: 0;
}

.comparison .wrap h2 span::before{
    width: 34px;
    height: calc(3px / 2);
    border-radius: calc(3px / 4);
    left: 4px;
    top: auto;
    bottom: 12px;
    transform: translateY(0);
}

.comparison .wrap h2 span::after{
    width: 34px;
    height: calc(3px / 2);
    border-radius: calc(3px / 4);
    right: 4px;
    top: auto;
    bottom: 12px;
    transform: translateY(0);
}

.comparison .wrap h2 + p{
    font-size: 1.2rem;
    line-height: 1.5;
    margin-top: 13px;
}

.comparison .wrap .beforeBox{
    max-width: inherit;
    aspect-ratio: auto;
    margin: 36px auto 0;
    border: calc(5px / 2) solid #3e3a39;
    border-radius: 10px;
    padding: 0 0 21px;
}

.comparison .wrap .beforeBox h3{
    font-size: 2.8rem;
    width: 158px;
    height: 43px;
    border-radius: calc(43px / 2);
    margin: -19px auto 0;
    padding-bottom: 0.1em;
}

.comparison .wrap .beforeBox ul{
    position: inherit;
    top: auto;
    left: auto;
    transform: translate(0);
    flex-direction: column;
    margin-top: 23px;
    gap: 44px;
}

.comparison .wrap .beforeBox ul li{
    width: 100%;
    font-size: 1.7rem;
    line-height: 1;
}

.comparison .wrap .beforeBox ul li::before{
    border-top: 16px solid #3e3a39;
    border-bottom: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    top: auto;
    right: auto;
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%);
}

.comparison .wrap .beforeBox ul li img{
    width: 106px;
    margin: 0 auto 14px;
}

.comparison .wrap .after{
    margin-top: 173px;
}

.comparison .wrap .after::after{
    width: 189px;
    aspect-ratio: 189 / 72;
    top: -122px;
}

.comparison .wrap .after h2 span{
    padding: 0 47px;
}

.comparison .wrap .afterBox{
    max-width: inherit;
    margin: 35px auto 0;
    border: calc(5px / 2) solid #016ab2;
    border-radius: 10px;
    padding: 0 15px 18px;
}

.comparison .wrap .afterBox h3{
    font-size: 2.8rem;
    width: 158px;
    height: 43px;
    border-radius: calc(43px / 2);
    margin: -19px auto 0;
    padding-bottom: 0.1em;
}

.comparison .wrap .afterBox ul{
    row-gap: 38px;
    margin-top: 23px;
}

.comparison .wrap .afterBox ul li{
    width: 100%;
    border-radius: 10px;
    padding: 17px 0 0;
}

.comparison .wrap .afterBox ul li h4{
    width: 242px;
    font-size: 2.2rem;
    padding-bottom: 10px;
    border-bottom: 1px solid #016ab2;
}

.comparison .wrap .afterBox ul li p{
    width: 242px;
    margin: 5px auto 0;
    font-size: 1.2rem;
}

.comparison .wrap .afterBox ul li .imgArea{
    height: 118px;
}

.comparison .wrap .afterBox ul li .function{
    padding: 7px 0 10px;
    column-gap: 2px;
}

.comparison .wrap .afterBox ul li .function dt{
    font-size: 1.5rem;
    padding-bottom: 3px;
}

.comparison .wrap .afterBox ul li .function dd{
    font-size: 1.2rem;
    padding: 2px 3px 3px;
    margin-top: 3px;
}

.comparison .wrap .balloon{
    margin: 48px auto 0;
}

.comparison .wrap .balloon::before{
    width: 249px;
    height: 196px;
    top: 164px;
    right: -17px;
}

.comparison .wrap .balloon p{
    width: 100%;
    border-radius: 15px;
    padding: 14px 0 18px;
    font-size: 2.2rem;
    line-height: 1.364;
    text-align: center;
}

.comparison .wrap .balloon p::before{
    width: 34px;
    height: 26px;
    clip-path: polygon(0 0, 100% 100%, 68% 0);
    top: auto;
    bottom: -25px;
    right: 200px;
}

.features{
    padding: 47px 28px 52px;
}

.features h2{
    font-size: 2.5rem;
    line-height: 1.24;
    padding: 0 120px 11px 0;
    border-bottom: calc(3px / 2) solid #fff;
}

.features h2::before{
    width: calc(355px / 2);
    height: 222px;
    top: -4px;
    right: -22px;
}

.features h3{
    margin: 12px auto 0;
    font-size: 1.9rem;
    line-height: 1.315789;
    padding: 0 164px 0 0;
}

.features h3 + p{
    margin: 3px auto 0;
    font-size: 1.2rem;
    line-height: 1.5;
    padding: 0 164px 0 0;
}

.features ul{
    margin: 51px auto 0;
    flex-direction: column;
    gap: 48px;
}

.features ul li::before{
    width: 39px;
    height: 39px;
    top: auto;
    right: auto;
    bottom: -19px;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
}

.features ul li{
    width: 100%;
    border-radius: 10px;
    padding: 0 20px 26px;
    position: relative;
}

.features ul li span{
    font-size: 3.48rem;
    margin-top: -19px;
    -webkit-text-stroke: 5px #fff;
    text-stroke: 5px #fff;
    text-align: left;
}

.features ul li h4{
    font-size: 2.0rem;
    text-align: left;
    margin-top: 12px;
}

.features ul li .imgArea{
    width: 200px;
    aspect-ratio: auto;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.features ul li:nth-child(1) .imgArea img{
    width: 83%;
    margin: 0 20px 0 auto;
    transform: translateY(0);
}

.features ul li:nth-child(2) .imgArea img{
    width: 59.5%;
    margin: 0 33px 0 auto;
    transform: translateY(0);
}

.features ul li:nth-child(3) .imgArea img{
    width: 81.5%;
    margin: 0 14px 0 auto;
    transform: translateY(0);
}

.features ul li p{
    font-size: 1.2rem;
    width: calc(100% - 200px);
    margin-top: 6px;
}

.results{
    padding: 54px 0 62px;
    background: url("../img/sp/bg03.png") no-repeat top 36px right;
    background-size: 46px auto;
}

.results::after{
    width: 46px;
    height: 1494px;
    background: url("../img/sp/bg03.png") no-repeat center;
    background-size: 46px auto;
    top: 36px;
}

.results h2{
    font-size: 2.3rem;
    line-height: 1.3043478;
    padding: 0;
}

.results h2::before{
    display: none;
}

.results h2::after{
    display: none;
}

.results h2 strong{
    display: block;
    position: relative;
    padding: 0 53px;
}

.results h2 strong::before{
    content: "";
    width: calc(71px / 2);
    height: calc(3px / 2);
    border-radius: calc(3px / 4);
    background: #016ab2;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.results h2 strong::after{
    content: "";
    width: calc(71px / 2);
    height: calc(3px / 2);
    border-radius: calc(3px / 4);
    background: #016ab2;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.results .before-after{
    margin: 53px auto 55px;
    flex-direction: column;
    gap: 56px;
}

.results .before-after > li{
    width: 317px;
    margin: 0 auto;
    border-radius: 10px;
    padding: 0 25px 30px;
}

.results .before-after > li:nth-child(1){
    border: calc(5px / 2) solid #3e3a39;
}

.results .before-after > li:nth-child(2){
    border: calc(5px / 2) solid #016ab2;
}

.results .before-after > li h3{
    font-size: 2.4rem;
    width: calc(263px / 2);
    height: 35px;
    border-radius: calc(35px / 2);
    margin: -15px auto 0;
    padding-bottom: 0.1em;
}

.results .before-after > li ul{
    margin-top: 16px;
    font-size: 1.2rem;
}

.results .before-after > li img{
    margin-top: 13px;
}

.results .before-after + h2{
    padding: 0 53px;
}

.results .before-after + h2::before{
    width: calc(71px / 2);
    height: calc(3px / 2);
    border-radius: calc(3px / 4);
    top: auto;
    bottom: 12px;
    transform: translateY(0);
    display: block;
}

.results .before-after + h2::after{
    width: calc(71px / 2);
    height: calc(3px / 2);
    border-radius: calc(3px / 4);
    top: auto;
    bottom: 12px;
    transform: translateY(0);
    display: block;
}

.results p img{
    margin: 26px auto 0;
    width: 397px;
}

.closing{
    height: 336px;
    padding: 44px 11px 0;
    background: url("../img/sp/bg04.png") no-repeat center;
    background-size: 100% auto;
    overflow: hidden;
}

.closing .wrap{
    padding-right: 134px;
}

.closing .wrap::before{
    background: url("../img/illust10.png") no-repeat;
    background-size: contain;
    width: 275.5px;
    height: 261.5px;
    position: absolute;
    bottom: -33px;
    right: -90px;
}

.closing h2{
    font-size: 2.5rem;
    line-height: 1.24;
    padding-left: 18px;
}

.closing p{
    font-size: 1.5rem;
    line-height: 1.67;
    margin-top: 6px;
    padding-left: 18px;
}

.closing a{
    width: calc(473px / 2);
    height: 49px;
    font-size: 2.1rem;
    padding: 0 0 0.1em 26px;
    background: #ff9301 url("../img/arrow04.svg") no-repeat center right 13px;
    background-size: 24px;
    border: 3px solid #fff;
    border-radius: 49px;
    margin-top: 17px;
    justify-content: flex-start;
}

.floating{
    top: auto;
    bottom: 30px;
}

.floating img{
    width: 46px;
}


/* =====================================
	footer
===================================== */

footer{
    padding: 9px 0 0;
}

footer a img{
    width: 149px;
}

footer small{
    padding: 6px 0;
    font-size: 10px;
    margin-top: 8px;
}

}

/* 430px以下：430px基準でvw縮小 */
@media screen and (max-width:430px){

.pc{
	display:none !important;
}

.sp{
	display:block !important;
}

a:hover{
	opacity: 1;
}

body{
    font-size: 3.467vw;
    width: 100%;
    overflow-x: hidden;
    letter-spacing: 0;
    background: #eaf5ff;
}

#wrapper{
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    background: #fff;
}

/* =====================================
	header
===================================== */

header{
    height: 8.604651vw;
    padding: 0 1.627907vw;
}

header .logo{
    gap: 1.860465vw;
}

header .logo li:nth-child(1) img{
    width: 25.930233vw;
}

header .logo li:nth-child(2) img{
    width: 12.325581vw;
}

header .cv-btn{
    gap: 1.162791vw;
}

header .cv-btn li a{
    font-size: 2.55814vw;
    height: 4.883721vw;
    padding: 1.046512vw 6.395349vw 0 5.232558vw;
    border-radius: 2.44186vw;
}

header .cv-btn li:nth-child(2) a{
    padding: 1.046512vw 4.418605vw 0 2.674419vw;
}

header .cv-btn li a::before{
    width: 2.55814vw;
    height: 2.55814vw;
    right: 1.162791vw;
}



/* =====================================
	main
===================================== */

.visual{
    height: auto;
    background: none;
}

.visual p{
    bottom: 1.627907vw;
    left: 2.093023vw;
    transform: translateX(0);
    font-size: 3.488372vw;
    width: 44.418605vw;
}

.nayami{
    padding: 13.953488vw 6.976744vw 8.139535vw;
    background: url("../img/sp/bg02.png") no-repeat center bottom;
    background-size: 100% auto;
}

.nayami::before{
    width: 37.325581vw;
    height: 42.906977vw;
    background: url("../img/sp/illust01.png") no-repeat center;
    background-size: contain;
    left: 0;
    margin-left: 0;
}

.nayami .box{
    border: 0.581395vw solid #016ab2;
    border-radius: 2.325581vw;
    padding: 8.372093vw 7.906977vw 9.534884vw;
}

.nayami .box h2{
    font-size: 5.348837vw;
    line-height: 1.3043478;
}

.nayami .box ul{
    margin: 3.023256vw auto 0;
}

.nayami .box ul li{
    font-size: 3.255814vw;
    padding: 0.697674vw 0 2.790698vw 5.581395vw;
    border-bottom: 0.232558vw dashed #8b8b8c;
    background: url("../img/icon01.svg") no-repeat top left;
    background-size: 4.476744vw auto;
}

.nayami .box ul li + li{
    margin-top: 1.860465vw;
}

.nayami p{
    margin: 6.046512vw auto 0;
    font-size: 4.883721vw;
    line-height: 1.38095;
    text-align: center;
    padding-left: 26.046512vw;
}

.comparison{
    padding: 0 8.837209vw;
}

.comparison .wrap{
    padding: 10.232558vw 4.651163vw 42.093023vw;
}

.comparison .wrap h2{
    font-size: 5.348837vw;
    line-height: 1.3043478;
}

.comparison .wrap h2 span{
    padding: 0;
}

.comparison .wrap h2 span::before{
    width: 7.906977vw;
    height: 0.348837vw;
    border-radius: 0.174419vw;
    left: 0.930233vw;
    top: auto;
    bottom: 2.790698vw;
    transform: translateY(0);
}

.comparison .wrap h2 span::after{
    width: 7.906977vw;
    height: 0.348837vw;
    border-radius: 0.174419vw;
    right: 0.930233vw;
    top: auto;
    bottom: 2.790698vw;
    transform: translateY(0);
}

.comparison .wrap h2 + p{
    font-size: 2.790698vw;
    line-height: 1.5;
    margin-top: 3.023256vw;
}

.comparison .wrap .beforeBox{
    max-width: inherit;
    aspect-ratio: auto;
    margin: 8.372093vw auto 0;
    border: 0.581395vw solid #3e3a39;
    border-radius: 2.325581vw;
    padding: 0 0 4.883721vw;
}

.comparison .wrap .beforeBox h3{
    font-size: 6.511628vw;
    width: 36.744186vw;
    height: 10vw;
    border-radius: 5vw;
    margin: -4.418605vw auto 0;
    padding-bottom: 0.1em;
}

.comparison .wrap .beforeBox ul{
    position: inherit;
    top: auto;
    left: auto;
    transform: translate(0);
    flex-direction: column;
    margin-top: 5.348837vw;
    gap: 10.232558vw;
}

.comparison .wrap .beforeBox ul li{
    width: 100%;
    font-size: 3.953488vw;
    line-height: 1;
}

.comparison .wrap .beforeBox ul li::before{
    border-top: 3.72093vw solid #3e3a39;
    border-bottom: 0;
    border-left: 2.325581vw solid transparent;
    border-right: 2.325581vw solid transparent;
    top: auto;
    right: auto;
    bottom: -5.581395vw;
    left: 50%;
    transform: translateX(-50%);
}

.comparison .wrap .beforeBox ul li img{
    width: 24.651163vw;
    margin: 0 auto 3.255814vw;
}

.comparison .wrap .after{
    margin-top: 40.232558vw;
}

.comparison .wrap .after::after{
    width: 43.953488vw;
    aspect-ratio: 189 / 72;
    top: -28.372093vw;
}

.comparison .wrap .after h2 span{
    padding: 0 10.930233vw;
}

.comparison .wrap .afterBox{
    max-width: inherit;
    margin: 8.139535vw auto 0;
    border: 0.581395vw solid #016ab2;
    border-radius: 2.325581vw;
    padding: 0 3.488372vw 4.186047vw;
}

.comparison .wrap .afterBox h3{
    font-size: 6.511628vw;
    width: 36.744186vw;
    height: 10vw;
    border-radius: 5vw;
    margin: -4.418605vw auto 0;
    padding-bottom: 0.1em;
}

.comparison .wrap .afterBox ul{
    row-gap: 8.837209vw;
    margin-top: 5.348837vw;
}

.comparison .wrap .afterBox ul li{
    width: 100%;
    border-radius: 2.325581vw;
    padding: 3.953488vw 0 0;
}

.comparison .wrap .afterBox ul li h4{
    width: 56.27907vw;
    font-size: 5.116279vw;
    padding-bottom: 2.325581vw;
    border-bottom: 0.232558vw solid #016ab2;
}

.comparison .wrap .afterBox ul li p{
    width: 56.27907vw;
    margin: 1.162791vw auto 0;
    font-size: 2.790698vw;
}

.comparison .wrap .afterBox ul li .imgArea{
    height: 27.44186vw;
}

.comparison .wrap .afterBox ul li .function{
    padding: 1.627907vw 0 2.325581vw;
    column-gap: 0.465116vw;
}

.comparison .wrap .afterBox ul li .function dt{
    font-size: 3.488372vw;
    padding-bottom: 0.697674vw;
}

.comparison .wrap .afterBox ul li .function dd{
    font-size: 2.790698vw;
    padding: 0.465116vw 0.697674vw 0.697674vw;
    margin-top: 0.697674vw;
}

.comparison .wrap .balloon{
    margin: 11.162791vw auto 0;
}

.comparison .wrap .balloon::before{
    width: 57.906977vw;
    height: 45.581395vw;
    top: 38.139535vw;
    right: -3.953488vw;
}

.comparison .wrap .balloon p{
    width: 100%;
    border-radius: 3.488372vw;
    padding: 3.255814vw 0 4.186047vw;
    font-size: 5.116279vw;
    line-height: 1.364;
    text-align: center;
}

.comparison .wrap .balloon p::before{
    width: 7.906977vw;
    height: 6.046512vw;
    clip-path: polygon(0 0, 100% 100%, 68% 0);
    top: auto;
    bottom: -5.813953vw;
    right: 46.511628vw;
}

.features{
    padding: 10.930233vw 6.511628vw 12.093023vw;
}

.features h2{
    font-size: 5.813953vw;
    line-height: 1.24;
    padding: 0 27.906977vw 2.55814vw 0;
    border-bottom: 0.348837vw solid #fff;
}

.features h2::before{
    width: 41.27907vw;
    height: 51.627907vw;
    top: -0.930233vw;
    right: -5.116279vw;
}

.features h3{
    margin: 2.790698vw auto 0;
    font-size: 4.418605vw;
    line-height: 1.315789;
    padding: 0 38.139535vw 0 0;
}

.features h3 + p{
    margin: 0.697674vw auto 0;
    font-size: 2.790698vw;
    line-height: 1.5;
    padding: 0 38.139535vw 0 0;
}

.features ul{
    margin: 11.860465vw auto 0;
    flex-direction: column;
    gap: 11.162791vw;
}

.features ul li::before{
    width: 9.069767vw;
    height: 9.069767vw;
    top: auto;
    right: auto;
    bottom: -4.418605vw;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
}

.features ul li{
    width: 100%;
    border-radius: 2.325581vw;
    padding: 0 4.651163vw 6.046512vw;
    box-shadow: 0.930233vw 0.930233vw 2.093023vw rgba(35, 24, 21, 0.4);
    position: relative;
}

.features ul li span{
    font-size: 8.093023vw;
    margin-top: -4.418605vw;
    -webkit-text-stroke: 1.162791vw #fff;
    text-stroke: 1.162791vw #fff;
    text-align: left;
}

.features ul li h4{
    font-size: 4.651163vw;
    text-align: left;
    margin-top: 2.790698vw;
}

.features ul li .imgArea{
    width: 46.511628vw;
    aspect-ratio: auto;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.features ul li:nth-child(1) .imgArea img{
    width: 83%;
    margin: 0 4.651163vw 0 auto;
    transform: translateY(0);
}

.features ul li:nth-child(2) .imgArea img{
    width: 59.5%;
    margin: 0 7.674419vw 0 auto;
    transform: translateY(0);
}

.features ul li:nth-child(3) .imgArea img{
    width: 81.5%;
    margin: 0 3.255814vw 0 auto;
    transform: translateY(0);
}

.features ul li p{
    font-size: 2.790698vw;
    width: calc(100% - 46.511628vw);
    margin-top: 1.395349vw;
}

.results{
    padding: 12.55814vw 0 14.418605vw;
    background: url("../img/sp/bg03.png") no-repeat top 8.372093vw right;
    background-size: 10.697674vw auto;
}

.results::after{
    width: 10.697674vw;
    height: 347.44186vw;
    background: url("../img/sp/bg03.png") no-repeat center;
    background-size: 10.697674vw auto;
    top: 8.372093vw;
}

.results h2{
    font-size: 5.348837vw;
    line-height: 1.3043478;
    padding: 0;
}

.results h2::before{
    display: none;
}

.results h2::after{
    display: none;
}

.results h2 strong{
    display: block;
    position: relative;
    padding: 0 12.325581vw;
}

.results h2 strong::before{
    content: "";
    width: 8.255814vw;
    height: 0.348837vw;
    border-radius: 0.174419vw;
    background: #016ab2;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.results h2 strong::after{
    content: "";
    width: 8.255814vw;
    height: 0.348837vw;
    border-radius: 0.174419vw;
    background: #016ab2;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.results .before-after{
    margin: 12.325581vw auto 12.790698vw;
    flex-direction: column;
    gap: 13.023256vw;
}

.results .before-after > li{
    width: 73.72093vw;
    margin: 0 auto;
    border-radius: 2.325581vw;
    padding: 0 5.813953vw 6.976744vw;
}

.results .before-after > li:nth-child(1){
    border: 0.581395vw solid #3e3a39;
}

.results .before-after > li:nth-child(2){
    border: 0.581395vw solid #016ab2;
}

.results .before-after > li h3{
    font-size: 5.581395vw;
    width: 30.581395vw;
    height: 8.139535vw;
    border-radius: 4.069767vw;
    margin: -3.488372vw auto 0;
    padding-bottom: 0.1em;
}

.results .before-after > li ul{
    margin-top: 3.72093vw;
    font-size: 2.790698vw;
}

.results .before-after > li img{
    margin-top: 3.023256vw;
}

.results .before-after + h2{
    padding: 0 12.325581vw;
}

.results .before-after + h2::before{
    width: 8.255814vw;
    height: 0.348837vw;
    border-radius: 0.174419vw;
    top: auto;
    bottom: 2.790698vw;
    transform: translateY(0);
    display: block;
}

.results .before-after + h2::after{
    width: 8.255814vw;
    height: 0.348837vw;
    border-radius: 0.174419vw;
    top: auto;
    bottom: 2.790698vw;
    transform: translateY(0);
    display: block;
}

.results p img{
    margin: 6.046512vw auto 0;
    width: 92.325581vw;
}

.closing{
    height: 78.139535vw;
    padding: 10.232558vw 2.55814vw 0;
    background: url("../img/sp/bg04.png") no-repeat center;
    background-size: 100% auto;
    overflow: hidden;
}

.closing .wrap{
    padding-right: 31.162791vw;
}

.closing .wrap::before{
    background: url("../img/illust10.png") no-repeat;
    background-size: contain;
    width: 64.069767vw;
    height: 60.813953vw;
    position: absolute;
    bottom: -7.674419vw;
    right: -20.930233vw;
}

.closing h2{
    font-size: 5.813953vw;
    line-height: 1.24;
    padding-left: 4.186047vw;
}

.closing p{
    font-size: 3.488372vw;
    line-height: 1.67;
    margin-top: 1.395349vw;
    padding-left: 4.186047vw;
}

.closing a{
    width: 55vw;
    height: 11.395349vw;
    font-size: 4.883721vw;
    padding: 0 0 0.1em 6.046512vw;
    background: #ff9301 url("../img/arrow04.svg") no-repeat center right 3.023256vw;
    background-size: 5.581395vw;
    border: 0.697674vw solid #fff;
    border-radius: 11.395349vw;
    margin-top: 3.953488vw;
    justify-content: flex-start;
}

.floating{
    bottom: calc(30 / 430 * 100vw);
}

.floating img{
    width: 10.697674vw;
}


/* =====================================
	footer
===================================== */

footer{
    padding: 2.093023vw 0 0;
}

footer a img{
    width: 34.651163vw;
}

footer small{
    padding: 1.395349vw 0;
    font-size: 2.325581vw;
    margin-top: 1.860465vw;
}

}