@charset "utf-8";
/* Reset */
html{font-size: 62.5%; overflow-x: hidden; scroll-behavior: smooth; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch;}
body{color: #333; font-size: 2.8rem; line-height: 1.5; word-spacing: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -moz-text-size-adjust: 100%; font-family: 'Noto Sans JP', sans-serif;}

@media (max-width: 750px){
    html{font-size: 1.333vw;}
}

*{margin: 0; padding: 0; box-sizing: border-box; border: 0;}
h1, h2, h3, h4, h5, h6{font-size: 100%; font-weight: 700;}
ol, ul{list-style: none;}
table{border-collapse: collapse; border-spacing: 0;}
th{text-align: left; font-weight: normal;}
a{color: inherit; text-decoration: none;}
img{vertical-align: bottom; max-width: 100%;}
.cap{font-size: 2rem;}
.cap-big{font-size: 2.4rem;}
.left{text-align: left;}
.content{margin: 0 auto; max-width: 670px; width: 89.33%;}
.blue{color: #009abd;}
.orange{color: #e85e08;}
.exlink{color: #e85e08; border-bottom: 1px solid #e85e08; display: inline-block;}


/* MV */
#mv{padding: 3rem 0 8rem; text-align: center;}
#mv h1{margin: 0 0 3rem;}
.mv-img{margin: 0 0 3.3rem;}
.mv-txt{margin: 0 0 4rem;}
.mv-desc{margin: 0 0 1rem;}


/* Main */
#main{padding: 8rem 0 10rem; text-align: center; background: #f1f1f1;}
#main h2{background: url("../img/bg_tit.png") no-repeat top left/100% 100%; display: flex; align-items: center; justify-content: center; width: 100%; height: 10rem; font-size: 3.6rem; line-height: 1.4; margin: 0 0 3.5rem;}
#main h3{font-size: 3.2rem; line-height: 1.4;}

.group{margin-bottom: 13rem;}
.group:last-of-type{margin-bottom: 0;}

.main-btn{font-size: 3.2rem; line-height: 1.3; font-weight: 700; border-radius: 1rem; position: relative; padding: 2.8rem 0; background: #d70000; color: #fff; display: block;}
.main-btn:after{content: ''; width: 2.9rem; height: 2.9rem; background: url("../img/ic_arrow_white.png") no-repeat top left/100% 100%; display: block; position: absolute; top: 50%; right: 2rem; margin-top: -1.5rem;}


/* Summary */
.summary-desc{margin: 0 0 3.5rem;}
.summary-img figure{margin: 0 0 3rem;}
.summary-img figure:last-of-type{margin: 0;}


/* Service */
#service h3{padding: 1rem 0 3.5rem;}
.service-img{margin: 0 0 1.7rem;}
.service-plus{margin: 2rem auto; width: 5.4rem;}


/* Use */
#use h2{margin-bottom: 4rem;}
.use-item:not(:last-of-type){margin: 0 0 7rem;}
.use-item figure{margin: 0 0 3rem;}


/* Howto */
.howto-item{background: #fff; border: 1px solid #b9b9b9; border-radius: 1rem; padding: 3rem; text-align: left;}
.howto-item:not(:last-of-type){position: relative; margin: 0 0 6.5rem;}
.howto-item:not(:last-of-type):after{content: ''; width: 7.3rem; height: 2.5rem; background: url("../img/ic_arrow_down.png") no-repeat bottom center; display: block; position: absolute; bottom: -4.5rem; left: 50%; margin-left: -3.65rem;}
.howto-item .cap{padding: 1.7rem 0;}
.howto-tit{position: relative; padding: 0 0 0 7.5rem;}
.howto-tit .num{position: absolute; top: -0.5rem; left: 0; width: 5rem; height: 5rem; background: #009abd; color: #fff; font-size: 2.8rem; font-weight: bold; line-height: 1.7; border-radius: 100%; text-align: center;}
.howto-img{text-align: center; width: 93%; margin: 0 auto;}
.howto-btn{margin: 4rem 0 2rem;}


/* Main Cap */
#main-cap{padding: 7rem 0 10rem;}
.main-cap_tit{font-size: 2.2rem; font-weight: 700; margin: 0 0 1rem;}
.main-cap_list{margin: 0 0 4rem;}
.main-cap_list li{position: relative; padding: 0 0 0 2rem; margin: 0 0 0.5rem;}
.main-cap_list li:before{content: ''; position: absolute; top: 0.7em; left: 0; width: 0.6rem; height: 0.6rem; border-radius: 100%; display: block; background: #333;}


/* Footer */
#pagetop{position: fixed; bottom: 15rem; right: 1rem; width: 8.8rem; z-index: 100; display: none;}
footer{padding: 0 0 25rem; text-align: center; color: #999999;}
#footer-logo{width: 40rem; margin: 0 auto 9rem; display: block;}


/* Btn Fixed */
.btn-fixed{padding: 2.7rem 0;  background: #d70000; color: #fff; position: fixed; bottom: 0; left: 0; width: 100%; text-align: center; display: block; font-size: 3.2rem; line-height: 1.3; font-weight: 700; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.4);}
.btn-fixed:after{content: ''; margin: 0 0 0 5rem; width: 2.9rem; height: 2.9rem; background: url("../img/ic_arrow_white.png") no-repeat top left/100% 100%; display: inline-block; position: absolute; top: 50%; right: 4%; margin-top: -1.5rem;}