@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=M+PLUS+1p:400,500,700,800,900&display=swap');


/* ===================================================
 Reset
=====================================================*/
html {overflow-y: scroll;}
div, dl, dt, dd, ul, ul li, h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, textarea, p, blockquote, th, td,
section, nav, article, aside, hgroup, header, address,
figure, figcaption, ul, ol {margin: 0; padding: 0;}
address, caption, cite, code, dfn, em, strong, th, var {font-style: normal; font-weight: normal;}
table{ border-collapse: collapse; border-spacing: 0;}
caption, th {text-align: left;}
q:before ,q:after {content: '';}
object, embed {vertical-align: top;}
hr, legend {display: none;}
h1, h2, h3, h4, h5, h6 {font-size: 100%; font-weight: normal;}
img, abbr, acronym, fieldset {border: 0;}
img {vertical-align: top; -ms-interpolation-mode: bicubic;}
ul li, ol li {list-style-type: none; margin: 0px; padding: 0px;}


/* ===================================================
 common
=====================================================*/
body{
	margin: 0;
	padding: 0;
   }
html {
	font-family: 'M PLUS 1p', sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic";
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	font-size: 62.5%;/* 10px */
}

/* Fluid-img----------------------------------- */
img {max-width : 100%; border: 0}

/* clearfix----------------------------------- */
.clearfix:after {content: ""; display: block; clear: both; visibility: hidden;}

/* 禁則処理の追加----------------------------------- */
p,li,dt,dd,th,td,pre{
-ms-line-break: strict;
line-break: strict;
-ms-word-break: break-strict;
word-break: break-strict}

a {outline: none; color: #000; transition: all 0.3s;}
a:link {text-decoration: none; color: #000;}
a:visited {text-decoration: none; color: #000;}
a:hover {text-decoration: underline; color: #000;}
a:active {text-decoration: none; color: #000;}

/* ===================================================
　for PC
=====================================================*/
body { font-size: 1.6rem; }
html{color:#000000; background-color:#FFFFFF;}
.wrap{width:1000px; margin : 0 auto; box-sizing: border-box}
.wrap02{width:1000px; box-sizing: border-box}

#main_img{
color: #FFF;
text-align: center;
background-image: url(../images/main_img.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center top;
height: 750px;
}
#main_img h1 img#pc_h1{padding-top: 210px; }
#main_img h1 img#sp_h1{display: none}
#main_img h2{font-size: 3.6rem; font-weight: 500; margin-top: 0.7em; margin-bottom: 0.5em}
#main_img .details{font-size: 1.6rem; line-height: 1.6;}
#main_img p{font-size: 2.2rem; line-height: 1.8}
#main_img p span.pc{display: block}
#main_img .btn{
margin-left: auto;
margin-right: auto;
margin-top: 45px;
margin-bottom: 90px;
}
#main_img .btn a{
color: #000;
font-size: 2.2rem;
font-weight: 500;
background-color: #FFF;
border-radius: 8px;
box-sizing: border-box;
padding: 0.6em 2.5em;
}
#main_img .btn a:hover{text-decoration: none; opacity: .7}

section h2{font-size: 2.4rem; font-weight: 600; margin-bottom: 0.5em; color: #333333}
section p{font-size: 1.6rem; line-height: 1.6; color: #666666}
section .note{font-size: 1.2rem; margin-top: 1em}

section{padding-top: 30px; padding-bottom: 30px}
section#contents03{padding-top: 80px; padding-bottom: 0px}

section#contents02{background-color: #000000}
section#contents02 h2, 
section#contents02 p{color: #FFFFFF}

.text_box{width: 55%;}
.text_box, 
.ph_box{display:table-cell; vertical-align: middle; box-sizing: border-box}
section#contents01 .text_box{padding-left: 7%;}
section#contents02 .text_box{padding-right: 7%;}
section#contents02 .ph_box{ width: 45%;}

ol.col3 {font-size: 0; display:flex;}
ol.col3 li{display: inline-block; width: 32%; margin-right: 2%; box-sizing: border-box; border: 1px solid #dddddd}
ol.col3 li:last-child{margin-right: 0}
ol.col3 .step{background-color: #000; color: #FFF; font-size: 1.6rem; text-align: center; width: 30%; display: inline-block; line-height: 2.2em}
ol.col3 .text_area{margin:0 20px 20px 20px}
ol.col3 p{
font-size: 1.8rem;
font-weight: 600;
color: #333;
}
ol.col3 .icon{text-align: center; margin-top: 15px; margin-bottom: 15px;}
ol.col3 .note{font-size: 1.2rem; font-weight: normal; margin-top: 1em}

.qr{padding-top: 120px; padding-bottom: 120px}
.qr .ph, 
.qr .qr_code{display: inline-block; vertical-align: bottom}
.qr .qr_code{margin-left: 40px}
.qr .qr_code img, 
.qr .qr_code a{display: block; text-align: center}
.qr .qr_code a{margin-top: 1em; font-size: 2rem; font-weight: 500; text-decoration: underline}


footer{
background-color: #000000;
color: #FFFFFF;
padding-top: 50px;
padding-bottom: 50px;
}
footer .wrap{display: table;}

footer .right_area, 
footer #logo_kkbox{display: table-cell; vertical-align: middle}

footer .right_area{width: 50%; text-align: right}
footer #logo_kkbox{width: 50%;}

footer #logo_kkbox span{
background-repeat: no-repeat;
background-image: url(../images/kkbox.svg);
background-size: cover;
width: 194px;
height: 40px;
text-indent: -9999px;
display: inline-block;
}

footer .icon, 
footer .icon_box{display: inline-block;}
footer .icon span#fb{
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
	background-size: cover;
	text-indent: -9999px;
	display: inline-block;
	font-size: 0;
	vertical-align: middle;
	margin-left: 5px;
	} 
footer .icon span#tw{
width: 29px;
height: 25px;
background-repeat: no-repeat;
background-size: cover;
text-indent: -9999px;
display: inline-block;
font-size: 0;
vertical-align: middle;
margin-left: 5px;
}
footer .icon span#fb{background-image: url(../images/icon-fb.svg);}
footer .icon span#tw{background-image: url(../images/icon-tw.svg);}
footer #copyright{font-size: 1.2rem; display: inline-block;}

/*1000px*/

/* ===============================================================================================
999px for SP
=================================================================================================*/
@media screen and (max-width : 999px) {

.wrap{padding-left: 4%; padding-right: 4%; width: 100%}
.wrap02{width: 100%}

section#contents01 .text_box{padding-right: 4%}
section#contents03{padding-top: 60px;}

.qr{padding-top: 80px; padding-bottom: 80px;}
.qr .ph{width: 50%}
.qr .qr_code{width: 40%}
.qr .qr_code a{font-size: 1.8rem; text-align: left}

footer{padding-top: 30px;padding-bottom: 30px;}
footer #logo_kkbox span{width: 121px;height: 25px;}

}

/* ===============================================================================================
750px for SP
=================================================================================================*/
@media screen and (max-width : 750px) {

section{padding-top: 40px; padding-bottom: 40px}
section#contents03{padding-top: 40px; padding-bottom: 0px}

#main_img{height: 600px;}
#main_img h1 img#pc_h1{display: none}
#main_img h1 img#sp_h1{padding-top: 100px; display: block; margin-right: 2%; margin-left: 2%}
#main_img h2{font-size: 2.6rem;}
#main_img h2 span{display: block}
#main_img .details{font-size: 1.4rem;}
#main_img p{font-size: 1.5rem; line-height: 1.6}
#main_img p span.pc{display: inline-block}
#main_img p span.sp{display: block}

#main_img .btn{
margin-top: 35px;
margin-bottom: 60px;
}
#main_img .btn a{
font-size: 1.8rem;
padding: 0.5em 1.5em;
}

.text_box{width: 100%;}
.text_box, 
.ph_box{display:block;}
section#contents01 .text_box{padding-left: 4%; padding-right: 4%; padding-top:30px}
section#contents01 .ph_box{padding-right: 4%;}

section#contents02 .text_box{padding-right: 0;}
section#contents02 .ph_box{ width: 100%; margin-top: 30px}

section#contents03 h2{text-align: center}

ol.col3 {display:inherit;padding-left: 6%; padding-right: 6%;}
ol.col3 li{display: block; width: 100%; margin-right: 0%; margin-bottom: 25px}
ol.col3 .step:last-child{margin-bottom: 0}
ol.col3 .step{background-color: #000; color: #FFF; font-size: 1.6rem; text-align: center; width: 30%; display: inline-block; line-height: 2.2em}
ol.col3 .text_area{margin:0 20px 20px 20px}
ol.col3 .note{margin-top: 0.5em}

.qr{padding: 60px 0 80px 0}
.qr .ph, 
.qr .qr_code{
display: block;
text-align: center;
width: 100%
}

.qr .qr_code{margin-left: 0; margin-top: 30px}
.qr .qr_code img, 
.qr .qr_code a{
display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
}

footer .wrap{display: block; text-align: center}

footer .right_area, 
footer #logo_kkbox{display: block;}

footer .right_area{width: 100%; text-align: center}
footer #logo_kkbox{width: 100%;}

footer #logo_kkbox span{
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 15px;
}
footer .icon_box{display: block; margin-top: 15px}
footer .icon span#fb{width: 30px; height: 30px; margin-left: 0}
footer .icon span#tw{width: 34px; height: 30px; margin-left: 0}
footer .icon span#tw{margin-left: 10px}
footer #copyright{font-size: 1.2rem; display: inline-block;}


}/*750px*/

/* ===============================================================================================
320px for SP
=================================================================================================*/
@media screen and (max-width : 320px) {

#main_img .details{font-size: 1.2rem;}
#main_img p{font-size: 1.3rem;}
}/*320px*/