@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;700&display=swap');


/* ===================================================
共通
=====================================================*/
html {
    font-family: "M PLUS Rounded 1c", sans-serif;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	font-size: 62.5%;/* 10px */
    color:#333333;
}

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

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

p{line-height: 1.8}


/* ===================================================
for SP
=====================================================*/
body {
font-size: 1.6rem;
background-repeat: no-repeat;
background-position: 0% top;
background-size: contain;
background-image: url(../images/sp_main_bk.jpg);
}

.wrap{padding: 0 4%}

header{text-align: right; padding: 4% 4% 0 4%}
header a img{width: 150px}

#mv{padding: 0 4% 4% 4%;}
#mv h1{margin:0 auto; text-align: center;}
#mv h2{margin:7% auto; width: 85%; text-align: center;}
#mv p{text-align: left}

#contents01 .bk01{
background-repeat: no-repeat;
background-position:0% top;
background-size: contain;
background-image: url(../images/sp_main_bk02.png);
padding-top: 45%;
padding-bottom: 7%;
background-color: #d0efff;
text-align: center;
line-height: 1.6;
}

#contents01 .bk01 .ill{position: relative}
#contents01 .bk01 .ill .pc{display: none}
#contents01 .bk01 .ill img{position: absolute}
#contents01 .bk01 .ill img.k.sp{width: 60px;left: 0; top:-20px}
#contents01 .bk01 .ill img.a.sp{width: 50px;right: 0; top:10px}
#contents01 .bk01 .ill img.s.sp{width: 60px;left: 0; top:0px}
#contents01 .bk01 .ill img.y.sp{width: 55px;right: 5%; bottom:120px}
#contents01 .bk01 .ill img.b.sp{width: 70px;left: 2%; bottom:130px}
#contents01 .bk01 .ill .qr img{position: inherit; width: 35%}
#contents01 .bk01 .ill .qr{margin-bottom: 20px}
#contents01 .bk01 .ill a{text-decoration: underline; font-size: 120%; display: block; margin-top: 0.5em;}

#contents01 .bk01 h3{
background-color: #0870d7;
color: #FFFFFF;
font-size: 1.6rem;
font-weight: bold;
border-radius: 6px;
padding: 0.4em 2em;
margin-top: 2.5em;
margin-bottom: 1em;
display: inline-block;
width: 8em;
box-sizing:border-box;
}
#contents01 .bk01 h3.first{margin-top: 0}
#contents01 .aword {margin-bottom: 30px}
#contents01 .aword div{background-color: #FFFFFF; padding: 7px; margin-bottom: 10px}
#contents01 .aword .icon{background-color: #ff4b4b; color: #FFFFFF; display: block; margin-bottom: 0.5em}
#contents01 .aword .b{font-weight: bold; font-size: 1.8rem}

#contents01 span.border{
	display: inline-block;
	position: relative; 
}

#contents01 span.border::before {
	content: ''; 
	width: 100%;
	height: 1px;
	border-top: solid 1px #000;
	position: absolute;
	left: 0 ;
	top: calc(50% - 3px);
}
#contents01 span.border::after {
	content: '';
	width: 100%;
	height: 1px;
	border-bottom: solid 1px #000;
	position: absolute;
	left: 0 ;
	bottom: calc(50% - 3px);
}
#contents01 span.red{color: #FF0004; font-weight: bold}

#contents01 .bk01 .btn_contest{text-align: center; margin-top: 1.5em}
#contents01 .bk01 .btn_contest a{
text-decoration: none; 
border-radius: 100px;
padding: 0.8em 1.5em 0.8em 1em;
margin:auto;
background-color: #ff9900;
color: #FFFFFF;
font-weight: bold;
font-size: 1.8rem;
position: relative;
box-sizing: border-box;
border: 4px solid #ff6600;
}
#contents01 .bk01 .btn_contest a::before{
    content: '';
    width: 12px;
    height: 12px;
    border: 0px;
    border-top: solid 2px #FFFFFF;
    border-right: solid 2px #FFFFFF;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    right: 20px;
    margin-top: -5px;
}

#contents02 .bk02{
background-repeat: no-repeat;
background-position: 0% top;
background-size: contain;
background-image: url(../images/sp_flag01.png);
padding-top:25%;
padding-bottom: 10%;
background-color: #faf0e6;
}
#contents02 .bk02 .pc{display: none}
#contents02 h3{padding: 0 4%; text-align: center; margin: auto}
#contents02 .bk02 .sp{display: flex; justify-content: space-between; flex-wrap:wrap; margin-top: 10px}
#contents02 .bk02 .sp a{width: 47%}
#contents02 .bk02 .sp a:nth-child(3){width: 100%; text-align: center; margin-top: 10px}
#contents02 .bk02 .sp a:nth-child(3) img{width:65%}

footer{
background-position: 0% top;
background-image: url(../images/sp_flag02.png);
background-size: contain;
background-repeat: no-repeat;
padding: 15% 4% 4% 4%;
background-color: #d0efff;
text-align: center;
}

footer p{font-weight: bold; font-size: 1.8rem;}
footer #contact{margin: 40px 0}
footer #contact a{background-color: #FFFFFF; border-radius: 100px; padding: 0.7em 2.5em; border: 1px solid #0870d7; }
footer #contact a span{position: relative; padding-left: 35px}
footer #contact a span::before{
position: absolute;
content: "";
width: 28px;
height: 17px;
background-repeat: no-repeat;
background-size: 28px 17px;
background-image: url(../images/icon_contact.svg);
left: 0;
}
footer p span{display: block}
footer #copyright{font-size: 1rem;margin-top: 20px}

footer #sns{display: flex; justify-content: center; margin: 20px 0 40px 0;}
footer a{margin: 0 4%}
footer a.sns_x{width:28px;}
footer a.sns_insta{width: 30px;}

/* ===================================================
for Tablet　768〜
=====================================================*/
@media screen and (min-width: 768px) { 
a[href^="tel:"]{pointer-events: none;}

body {font-size: 1.8rem;}
header{text-align: right; padding: 2% 4% 0 4%}
header a img{width:28%}

#contents01 .bk01 h3{font-size:2rem; padding: 0.2em 2em; width: 10em;}
#contents01 .aword div{padding: 10px; margin-bottom: 20px}
#contents01 .aword .icon{padding: 0.2em 0}
#contents01 .aword .b{font-size: 2.2rem}
#contents01 .bk01 .ill img.k.sp{width: 100px;left: 4%; top:-20px}
#contents01 .bk01 .ill img.a.sp{width: 90px;right: 4%; top:10px}
#contents01 .bk01 .ill img.s.sp{width: 100px;left: 0; top:-30px}
#contents01 .bk01 .ill img.y.sp{width: 90px;right: 10%; bottom: 75px}
#contents01 .bk01 .ill img.b.sp{width: 100px;left: 6%; bottom: 80px}
#contents01 .bk01 .ill .qr img{width: 20%}
#contents01 .bk01 .ill .qr{margin-bottom: 40px}
#contents01 .bk01 .btn_contest{margin-top: 50px}
#contents01 .bk01 .btn_contest a{width: 70%; font-size: 2.2rem;}
#contents01 .bk01 .btn_contest a::before{right: 30px;}

#contents02 .bk02{padding:23% 8% 10% 8% }
#contents02 .bk02 .sp{margin-top: 30px}
#contents02 .bk02 .sp a{width: 40%}
#contents02 .bk02 .sp a:nth-child(3) img{width:55%}

footer{padding: 13% 4% 4% 4%;}
footer p span{display: inline}
footer #copyright{padding: 0 8%}

}/*768px〜*/

/* ===================================================
for PC　1025以上
=====================================================*/
@media screen and (min-width: 1025px) {
body {
font-size: 2rem;
background-image: url(../images/main_bk.png) , url(../images/header_bk.jpg);
background-repeat: no-repeat, repeat-x;
background-position: center 30px, center top;
background-size: auto, auto;
background-color: #d0efff;
}
.wrap{padding:0}
header{text-align: right; padding: 1.5% 4% 0 4%}
header a img{width:20%}
header a:hover{opacity: .8; transition: all 0.3s;}

#mv{padding: 0 0 150px 0;}
#mv h1{width: 850px; margin-top: -20px;}
#mv h2{margin:55px auto; width: 675px}
#mv p{width: 900px; margin: auto; text-align: center}
#mv p span{display:block}

#contents01 .bk01{
background-image:none;
padding-top: 70px;
padding-bottom: 0;
text-align: left;
width: 900px;
margin: auto;
}
#contents01 .bk01 h3, #contents01 .bk01 div{display: inline-block; vertical-align: top;}
#contents01 .bk01 h3{width: 8em; text-align: center; margin:0 1em 0 0;}
#contents01 .bk01 .ill{width: 100%; margin-bottom: 50px;}
#contents01 .bk01 .ill.last{margin-bottom: 0}
#contents01 .bk01 .ill .sp{display: none}
#contents01 .bk01 .ill .pc{display: block}
#contents01 .bk01 .ill p{margin-left: 180px;}
#contents01 .bk01 .ill img.s.pc{width: 102px;right: 0; top:-100px;}
#contents01 .bk01 .ill img.a.pc{width: 80px;right: 40px; top:-40px;}
#contents01 .bk01 .ill img.y.pc{width: 93px;right: -50px; top:150px;}
#contents01 .bk01 .ill img.k.pc{width: 110px;left:30px; top:200px;}
#contents01 .bk01 .ill img.b.pc{width: 100px;right:150px; top:-20px;}
#contents01 .bk01 .ill .qr img{width: 105px; margin-right: 20px}
#contents01 .bk01 .ill .qr{margin-bottom:0;}
#contents01 .bk01 .ill a:hover{color: #0870d7}

#contents01 .aword {margin-bottom: 10px}
#contents01 .aword div{display: block; width: 100%; margin-bottom: 15px; padding-right: 1em;}
#contents01 .aword .icon{
display: inline-block;
margin-bottom: 0;
padding: 0.3em;
width: 6em;
box-sizing: border-box;
text-align: center;
margin-right: 1em;
}
#contents01 .aword .b{font-weight: bold; font-size: 2.4rem}
#contents01 .bk01 .btn_contest{/*margin-left: 185px;*/ width: 100%; margin: 60px auto 0 auto}
#contents01 .bk01 .btn_contest a{
font-size: 2.6rem;
width: 60%;
webkit-transition: .2s ease-in-out;
transition: .2s ease-in-out;
padding: 0.6em 0;
}

#contents01 .bk01 .btn_contest a:hover{
transform: scale(1.1);
transition: all 0.3s;
color: #FFFFFF;
background-color: #ff6600;
}
#contents01 .bk01 .btn_contest a:hover::before{
    border-top: solid 2px #FFFFFF;
    border-right: solid 2px #FFFFFF;
}

#contents02 .bk02{
background-color: #faf0e6;
background-repeat: no-repeat;
background-position: 0% top;
background-size: contain;
background-image: url(../images/flag01.png);
padding-top:200px;
padding-bottom: 100px;}
#contents02 .bk02 .sp{display: none}
#contents02 .bk02 .pc{display: block}
#contents02 h3{padding:0; width: 490px}
#contents02 .bk02 .pc{display: flex; justify-content: space-between; flex-wrap:wrap;}
#contents02 .bk02 .pc a{
width: 32%;
height: 250px;
margin-top: 40px;
transition: all 0.3s;
position: relative;
cursor: pointer;
}
#contents02 .bk02 .pc a:hover{transform: scale(1.1);}

#contents02 .bk02 .pc a img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
	display: block;
	-webkit-transition: .2s ease-in-out;
	transition: .2s ease-in-out;
}
#contents02 .bk02 .pc a:hover img:nth-of-type(2) {
	opacity: 0;
}

#contents02 .bk02 .pc a:first-child, 
#contents02 .bk02 .pc a:nth-child(2){width: 32%;}
#contents02 .bk02 .pc a:first-child{margin-left: 14%; margin-right: 4%}
#contents02 .bk02 .pc a:nth-child(2){margin-right: 14%; margin-left: 4%}

footer{
padding: 100px 0 25px 0;
background-image: url(../images/flag02.png) , url(../images/footer_bk.png);
background-size: auto, auto;
background-repeat: repeat-x, no-repeat;
font-size: 1.6rem;
background-position: center top, center bottom;
}
footer p{font-size: 2rem;}
footer #copyright{font-size: 1.2rem}
footer #sns{margin: 30px 0 50px 0;}
footer a{margin: 0 20px}
footer a:hover{transform: scale(1.1); transition: all 0.3s; opacity: .8}
footer #sns a:hover{transform: scale(1.1);}

}/*1025px〜*/

@media screen and (min-width: 1390px) {
#contents02 .bk02 .pc a{height: 300px;}

}