#main {max-width: 640px; width: 100%; margin: 0 auto;}
footer {background: none; color: #000; padding: 80px 10px 100px;}

/* Page */
.page{color: #000;}
.page .box1{padding:1% 6%; font-size:28px; line-height: 1.3; background: #000; color: #fff; font-weight: bold; margin: 0 0 5%;}
.page .box1 span{display: inline-block;}

.page .box2{background: #f3f4e4; padding: 4% 6% 8%; margin: 0 0 8%;}
.page .box2 .item1{font-size:30px; margin: 0 0 20%;}
.page .box2 .item1 h4{color:#e93323; font-size:36px; font-weight:bold;}
.page .box2 .item1 p{position:relative; padding:0 0 0 1em; font-weight:bold;}
.page .box2 .item1 p:before{content:'・'; position:absolute; top:0; left:0;}
.page .box2 .item2 .step{margin:0 0 17%; position:relative; padding:10% 3% 5% 3%; border:2px solid #000;}
.page .box2 .item2 .step:after{position:absolute; content:''; background: url(../img/familyclub/img_4.png) no-repeat; background-size:100% auto; width:11.75%; height:60%; bottom:-40%; left:37%;}
.page .box2 .item2 .step figure{position:absolute; top:-18%; left:-4.5%; width:33%;}
.page .box2 .item2 .step figure img{width: 100%;}
.page .box2 .item2 .step .tit{font-size:30px; font-weight:bold;}
.page .box2 .item2 .step .txt{margin:0 0 2% -0.5em; font-size:18px;}
.page .box2 .item2 .step .btn{text-align:center;}
.page .box2 .item2 .step .btn a{width:34%; border:2px solid #000; font-weight: bold; text-align:center; font-size:48px; line-height:1.1; display:inline-block; padding:2px 0;}
.page .box2 .item2 .step .btn a:nth-of-type(1){background:#fff;}
.page .box2 .item2 .step .btn a:nth-of-type(2){background:#000; margin-left:4%; color:#fff;}
.page .box2 .item3{text-align:center; padding:1% 0 0 0;}

.page .box3{background: #e93323; color: #fff; padding: 5% 6% 6%;}
.page .box3 h4{margin: 0 0 6%; width: 64%;}
.page .box3 .btn{background: #000; display: block; font-weight: bold; line-height: 1.3; font-size: 28px; padding: 2% 0 1.5% 6%;}
.page .box3 .btn p:nth-of-type(2){font-size: 48px;}

@media screen and (max-width:640px){
.page .box1{font-size: 6vw;}

.page .box2 .item1{font-size:4.3vw;}
.page .box2 .item1 h4{font-size:5.8vw;}
.page .box2 .item2 .step .tit{font-size:4.5vw;}	
.page .box2 .item2 .step .txt{font-size:2.8vw;}
.page .box2 .item2 .step .btn a{font-size:7vw;}

.page .box3 .btn{font-size: 4.3vw;}
.page .box3 .btn p:nth-of-type(2){font-size: 7.4vw;}
}


/* Step 1 */
.step1 .box1{padding:10% 0 20%;}
.step1 a{font-size:30px; background:#000; color:#fff; font-weight:bold; width:18%; margin:0 auto; display:block; text-align:center;}

@media screen and (max-width:640px){
.step1 a{font-size:4.5vw;}	
}

/* Step 2 */
.step2 .box1{margin:0 0 11%;}
.step2 .box2{margin:0 0 11%;}
.step2 .box2 figure:nth-of-type(1){margin:0 0 6%;}
.step2 .box2 figure:nth-of-type(2),
.step2 .box2 figure:nth-of-type(3){margin:0 0 3%;}
.step2 .box3{margin:0 0 11%;}
.step2 .box3 figure:nth-of-type(1){margin:0 0 6%;}
.step2 .box3 figure:nth-of-type(2){margin:0 0 3%;}
.step2 .box4{margin:0 0 11%;}
.step2 .box5 figure{margin:0 0 8%;}
.step2 .box5 ul{font-size:30px; padding:0 4%;}
.step2 .box5 li{margin:0 0 5%;}
.step2 .box6{margin:0 0 11%;}
.step2 .box7{padding:0 4%; font-size:30px;}
.step2 .box7 .link{text-align:center;}
.step2 .box7 .link p a{color:#3366ff; text-decoration:underline; margin:4% 0 10%; display:inline-block;}
.step2 .box7 .tit{font-size:36px; font-weight:bold;}
.step2 .box7 ul{margin:0 0 6%;}
.step2 .box7 .cap{font-size:24px;}
.step2 .box7 .red{color:#ff0000;}
.step2 .box7 .txt{font-size:36px; padding:3% 0 6%;}
.step2 .box7 .cap a{color:#3366ff; text-decoration:underline; display:inline-block;}
/* add25.05.20 */
.mt0{ margin-top: 0!important;}
.mt10{ margin-top: 10px!important;}
.mt20{ margin-top: 20px!important;}
.mt40{ margin-top: 40px!important;}
.mb0{ margin-bottom: 0!important;}
.mb10{ margin-bottom: 10px!important;}
.mb20{ margin-bottom: 20px!important;}
.mb40{ margin-bottom: 40px!important;}
.step2 .tit_tokuten{ text-align: center;}
.step2 .tit_tokuten span{ font-size: min(5.3vw,40px);font-weight: bold; display: inline-block; line-height: 1em; padding: 10px 20px; border: 7px double #000;font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
.step2 .txtRdTit2{ font-size: min(3.6vw,26px); font-weight: bold;display: block; color: #FF3401; text-align: center; width: calc(100% - 20px); margin: 10px auto 0;line-height: 1.4em;}
.step2 .txtRdTit1,
.step2 .txtRdTit3{ font-weight: bold;display: block; color: #FF0000; text-align: center; margin: 10px auto 0;line-height: 1.4em; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
.step2 .txtRdTit1{ font-size: min(4.3vw,28px);}
.step2 .txtRdTit3{ font-size: min(5vw,34px);}
.step2 .imgcap{ text-align: right; font-size: 12px;}
.step2 .txtRdCap{ font-size: min(2.7vw,16px);font-weight: bold;display: block;color: #F40000; text-align: left;margin: 10px auto 0;line-height: 1.4em; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}

@media screen and (max-width:640px){
.step2 .box5 ul{font-size:4.3vw;}
.step2 .box7{font-size:4.3vw;}
.step2 .box7 .tit{font-size:5vw;}
.step2 .box7 .cap{font-size:3.7vw;}
.step2 .box7 .txt{font-size:5vw;}
}