@charset "utf-8";
*,
*:before,
*:after{box-sizing:border-box;}
.main{display:block;}
html,
body{margin:0;padding:0;}
body{font-size:3.5vw;line-height:1.8;color:#000;font-family:'Meiryo', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Osaka', 'ＭＳ Ｐゴシック', 'Verdana', 'sans-serif';}
p{margin:0 0 2em;padding:0;}
h1,
h2,
h3,
h4,
h5,
h6,
dl,
dt,
dd,
ul{margin:0;padding:0;}
li{margin:0;padding:0;list-style:none;}
img{max-width:100%;}
.txtLarge{font-size:130%;}
.txtSmall{font-size:85%;}
.txtBold{font-weight:bold;}
.linkBtn a{position:relative;display:block;padding:0.5em 3em 0.5em 1em;font-size:130%;line-height:1.2;color:#fff;text-decoration:none;background:#042785;border-radius:0.5em;}
.linkBtn a:before{content:"";position:absolute;top:0;bottom:0;right:30px;display:block;width:21px;height:21px;margin:auto;background:url(../images/ico_linkarrow_white.png) no-repeat center / contain;}
.linkTxt a{position:relative;display:inline-block;padding:0.25em 30px 0.25em 0;text-decoration:none;color:#333;}
.linkTxt a:before{content:"";position:absolute;top:0;bottom:0;right:0;display:block;width:21px;height:21px;margin:auto;background:url(../images/ico_linkarrow_yellow.png) no-repeat center / contain;}
.linkTxt a:hover{text-decoration:underline;}
.alignRight{text-align:right;}
.spArea{display:inline-block;}
.pcArea{display:none;}

#header{margin-bottom:2em;padding:0;text-align:center;}
#header .mainImage{height:100px;background:url(../images/img_main.jpg) repeat-x center / cover;}
#header h1{max-width:90%;margin:1.5em auto 0;padding:0;}
#header h1 img{display:inline-block;}
#header p{color:#999;font-weight:bold;}
.main{max-width:1100px;margin:auto;padding:0 8vw;}
.main h2{margin:4em 0 1.5em;font-size:150%;font-weight:bold;line-height:1.2;text-align:center;}
.main h2 img{display:block;margin:0 auto 0.5em;}

#howto>ul>li{position:relative;margin:0 0 9vw;padding:2em 2em 1em;line-height:1.55;border:3px solid #ddd;border-radius:1em;}
#howto>ul>li:before{content:"";position:absolute;bottom:-9vw;left:0;right:0;display:block;width:8vw;height:8vw;margin:auto;background:url(../images/ico_howtoarrow.png) no-repeat center / contain;}
#howto>ul>li:last-child:before{display:none;}
#howto>ul>li>p.no{position:absolute;top:-1em;left:-1em;display:flex;justify-content:center;align-items:center;width:2em;height:2em;margin:0;font-size:1.25em;line-height:1;font-weight:bold;border-radius:50%;background:#ffed00;}
#howto>ul>li>p.pht{margin:0;padding:0 0 1em;text-align:center;}
#howto>ul>li>div{padding:0.5em 0 0;}
#howto>ul>li>div p{margin:0 0 1em;}
#howto>ul>li.howto01>div ul{margin:0 0 1.5em;}
#howto>ul>li.howto01>div ul li{display:flex;align-items:center;margin:0.5em 0;font-size:125%;font-weight:bold;color:#444;}
#howto>ul>li.howto01>div ul li img{margin:0 10px 0 0;}
#plans h3{margin:3em 0 0.5em;font-size:140%;line-height:1.2;}
#plans h3:first-of-type{margin-top:0;}
#plans dl{margin:0 0 1em;line-height:1.2;}
#plans dt{padding:0.75em 1.5em 0.5em;font-size:130%;background:#ffc;}
#plans dt strong{display:block;font-size:80%;font-weight:normal;}
#plans dt span{display:block;font-size:50%;padding:1em 0 0;}
#plans dd{padding:1em 2.5em;background:#eee;}
#plans dd strong{font-size:140%;}

#coupon{margin:3em auto 0;padding:3em 1em 1em;border:7px solid #ddd;border-radius:1em;}
#coupon h2{margin-top:0;}

#footer{padding:5em 0;text-align:center;color:#999;font-size:75%;}
#footer p{margin-bottom:0.25em;}
#footer a{color:#999;}
#footer .fPagetop{display:none;}
#footer .fCopy{margin-top:1em;}


@media (min-width:768px){
    body{font-size:16px;}
    .spArea{display:none;}
    .pcArea{display:inline-block;}
    .linkBtn a{display:inline-block;padding:0.5em 4em 0.5em 2em;}
    #header h1{margin-top:3em;}
    #header p{font-size:150%;}
    #header .mainImage{height:200px;}
    .main{padding:0;}
    .main h2{display:flex;align-items:center;margin:4em 0 2em;font-size:200%;text-align:left;}
    .main h2 img{margin:0 10px 0 0;}
    #howto>ul{margin:0 1em;}
    #howto>ul>li{display:flex;margin:0 0 78px;padding:2em 3em;}
    #howto>ul>li:before{bottom:-78px;vw;width:68px;height:67px;}
    #howto>ul>li>p.pht{flex-shrink:0;width:35%;padding:0 2em 0 0;}
    #plans h3{font-size:170%;}
    #plans dt{font-size:150%;}
    #plans dt strong{display:inline-block;}
    #plans dt span{display:inline-block;padding:0;}
#coupon{padding:3em 5em 1em;}
#footer .fPagetop{display:block;text-align:right;}
}