@charset "utf-8";
/* CSS Document */







.sp_only{display:none!important;}
.pc_only{display:block;}
html{
line-height: 1.5;
font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
	}

p{margin-bottom:2rem; font-size:1rem;line-height:1.9;}
h2{margin-bottom:1rem; font-weight:bold; font-size:1.5rem;}
h3{margin-bottom:2rem; font-weight:bold; font-size:1.3rem;}
h4{margin-bottom:2rem; font-weight:bold; font-size:1.2rem;}
body{line-height:200%;
	word-wrap : break-word;
	overflow-wrap : break-word;	
	margin:0;

}
ul li{ font-size:1.2rem;}
.black{color:#333;}

.em{font-weight:bold;}
h2.big{font-size:2rem;}
.max100{max-width:100%;height:auto;}

.small{font-size:70%;}
footer{
	background:#333;
	color:#FFF;
	padding:2rem;
	width:80%;
	margin:0 auto;
	 
}
footer .flex-inner{width:80%; margin:2rem 10% 1rem 10%;}
footer .center {display:flex; flex-direction:column;margin-right:4rem;min-width:6rem;}
footer .center a {margin:0.5rem 0; color:#FFF;}
footer .left{margin-right:4rem;}
footer .left p {padding-top:5rem;}
footer .left img{width:15rem;height:auto;}
footer .right a img {margin-right:1rem;}
footer .right p{text-align:center; font-weight:bold; padding-top:1rem;}
footer .right .flex-inner{display:flex; justify-content: center; }
footer .small{font-weight:"normal"}

.attention{
	background:#FFF;
	padding:1rem;
	
}

#con12{
padding:3rem 10%;
	
	
}

#con13{
	padding: 3rem 10%;
	display: none;	
}

#con13 .flex-inner img{margin:0.5rem; }

#con12 ul li{font-size:1rem;line-height:1.8;}

#con11{
color:#FFF;
font-size:90%;
background:
url("../images/bg_step.png");
background-size:cover;
padding:3rem 0;
}



#con11 .flex-inner{
	flex-direction: row;
	justify-content: center;
	width:90%;
	margin:auto;
	color:#FFF;
	}

#con11 .item{
	margin:1rem;
	
}


#con11 .item p{
max-width:11rem;
	font-size:90%;
}


#con11 .item img{
	max-width:9rem;
	height:auto;
}
#con11 .item img:nth-of-type(1){
	border-radius:1rem;
}
#con11 .arrow img{
	margin-top:2rem;
		width:2rem;
}



#con10{
padding:2rem;	
}
#con10 h2{text-align:center;}

#con10 a{ color:#4284D6;border-bottom:1px solid #4284D6;}

#con10 dl{
	display:flex;
	flex-direction: row;
	width:80%;
	margin:auto auto 1rem auto;;
	
}

#con10 dt,
#con10 dd{
margin-left:none;
margin-bottom:1rem;
margin-right:2rem;
font-weight:normal
	
}

#con09{
margin:3rem 0;
	
}


#con09 .flex-inner{
	width:80%;
	margin:auto;
	align-items:flex-end;
}

#con09 .link_area{
	
display:flex;
flex-direction:column;	
margin-top:1rem;
}



#con09 table{
	margin-bottom:1rem;
}



#con09 table td
{
	border-bottom:1px solid #CCC;
	padding:0.5rem;
	width:24em;
} 

#con09 table th{
	min-width:6rem;
	border-right:1px solid #CCC;
	border-bottom:1px solid #CCC;
	padding:0.5rem;
	text-align:left;
} 



#con08{
	padding:10rem 0 3rem 0;
	position:relative;
	width:90%;
	margin:10rem auto 3rem auto;
   
}


#con08 .flex-inner{
	align-items:flex-end;
    justify-content: center;
	position:absolute;
	top: -5rem;
	width:80%;
	margin-left:10%;
}

#con08 .flex-inner .left{
	text-align:center;
	color:#4284D6;
}

#con08 .flex-inner .right img{
width:90%; height:auto;
}

.balloon {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  color:#4284D6;
  background: #FDF451;
  border-radius: 0.5rem;
font-weight:bold;
width:19rem;
}

.balloon:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #FDF451;
}


.balloon p {
  margin: 0;
  padding: 0;

}


#con08 .bottom-contents{
	margin-top:10rem;
	width:80%;
	margin:10rem auto 3rem auto;
}


#con08 h2,
#con07 h2,
#con08 h2,
#con09 h2,
#con10 h2,
#con11 h2{font-size:200%; text-align:center;}

#con07{padding:3rem 0;}
#con07 dl{display:flex; 
	flex-direction:column;
	border-bottom:1px solid #CCC;
	padding:1rem;
	width:70%;
	margin:auto;
margin-bottom:1rem;}

#con07 dl:last-child{
	border-bottom:0;
}


#con07 dt{
	font-weight:bold;
	color:#4284D6;
	margin-bottom:1rem;
	font-size:110%;
}

#con07 dt::before{
 content:"Q";
 color:#FFF;
	font-weight:bold;
	padding:0.1rem 0.5rem;
	border-radius:0.5rem;
	background:#4284D6;
	margin-right:1rem;
	
}
#con07 dd{
	margin-bottom:1rem;
	margin-left:0;
	text-indent:-3rem;
	margin-left:3rem;
}

#con07 dd::before{
 content:"A";
 color:#4284D6;
font-weight:bold;
padding:0.1rem 0.5rem;
border-radius:0.5rem;
background:#FDF451;
margin-right:1rem;
font-size:120%;
}



#con06{
	background:#ECF3FB;
}

#con06 .flex-inner{
	
	background:#FFF;
	padding:1rem;
		width:90%;
	margin:auto;
	margin-bottom:1rem;
}




#page_top a {
	filter: drop-shadow(5px 5px 5px  rgba(0,0,0,0.4));
	display:inline-block;
	margin:0.5rem;
	
	
}

#page_top a:hover{
filter: drop-shadow(0px 0px 0px rgba(0,0,0,0.2));
}


#page_top{
	display:flex;
	flex-direction:column;
	margin-left:80%; 
	margin-top:10%;
	z-index:10;
	position:fixed;	
	justify-content: center;
	text-align:center;
color:#4284D6;
	font-weight:bold;

}




.button a{
background: rgb(66,132,214);
background: linear-gradient(180deg, rgba(66,132,214,1) 0%, rgba(109,160,223,1) 46%, rgba(20,60,120,1) 50%, rgba(0,44,107,1) 100%);
padding:1rem 3rem;
color:#FFF;
font-weight:bold;
display:inline-block;
border-radius:0.5rem;
}

.button a:hover{
background: rgb(66,132,214);
background: linear-gradient(0deg, rgba(66,132,214,1) 0%, rgba(109,160,223,1) 46%, rgba(20,60,120,1) 50%, rgba(0,44,107,1) 100%);
padding:1rem 3rem;
color:#FFF;
font-weight:bold;
display:inline-block;
border-radius:0.5rem;
}






.marker{
	background:linear-gradient(transparent 60%, #FDF451 0%);	
	display:inline-block;
}



#catch {text-align:center;padding:4rem 0; flex-direction: column; }
#catch h2{ display:inline-block; margin-bottom:4rem; line-height:1.5;}


#catch ul{
	margin:auto;
	margin-bottom:4rem;
	text-align:left;
	display:inline-block;
	
}
#catch ul li{
	font-size:1.5rem;
	font-weight:bold;
	
	
}
#catch ul li::before{
 content:url("../images/checkmark.png");	
}

#catch img.logo{width:60%; height:auto;margin:auto;}


header{width:80%; margin:0 auto;}
header img{width:100%; height:auto}

#con01 h2,
#con02 h2{

letter-spacing: .2rem;
}

#con02 .point2{align-items: flex-end;}
#con02 .point2 .right{width:50%;}
#con02 .point2 .left img{width:80%;  height:auto;}

#con01 {position:relative; margin-top:0;padding-top:3rem;}
#con01 .deco1{position:absolute; top:0; right:0;text-align:right;}
#con01 .deco2{position:absolute; top:70%; right:15%; text-align:right;}

#con01 .deco1 img,
#con01 .deco2 img{width:75%; height:auto; }


.bg_point1{
	background:#4284D6;
	margin-left:10%;
	/*margin-top:10%;*/
	padding:3rem;
	color:#FDF451;
	width:60%;
	
}


article{width:80%;margin:0 auto; }
#con02{
color:#4284D6;
background:#F4F4F4;
background-image:url("../images/bg_item02.png");
background-size:contain;
background-position:top 10rem  right 0;
background-repeat: no-repeat;
padding-top:3rem;
}
.point1,
.point2,
.point3,
.point4,
.point5,
.support,
.inline
{
display:flex;
justify-content:center;
	
}

.point2 {align-items: flex-end;}
.point2 .left{ text-align:center;}
.point2 .right{ text-align:left; padding-right:10%;}
.point3 .left{ text-align:left; padding-left:10%; padding-right:1rem;width:40%;}
.point3 .right{ text-align:left; }
.point3 .right img{width:90%;height:auto; }
.point3{padding-top:4rem;}

.point4{width:90%; margin:3rem auto;}
.point4 .center{ margin:0 2rem auto; text-align:center; width:40%;}
.point4 .left, .point4 .right{padding-top:5rem;}
.point4 .left img, .point4 .right img{width:90%;height:auto;}
.bg_gray{background:#F4F4F4;}


h2.point5_title{ color:#333; text-align:center;margin-top:18rem; }

.point5{color:#333;font-weight:bold;}
.point5 {vertical-align:bottom;}
.point5 .left, .point5 .center, .point5 .right{
display:flex;
flex-direction:column;
justify-content: flex-end;
margin:0 1rem;
}


h2.title-support{
display:inline-block;
background:#F4F4F4;	
padding:2rem 2rem 0 2rem;
	
}
.title-area{
	text-align:center;
	margin-top:-5rem;
}
.box{
	
color:#4284D6;
border:1px solid #4284D6;
width:80%;
margin:2rem auto 3rem auto;;
padding:2rem;

}
.button-area{display:flex; justify-content:center;margin:1rem 0; }

.box h3{margin-top:0; text-align:center;}


#con03{
padding-top:3rem;
padding-bottom:3rem;
}

#con03 .box .right{margin:3rem 2rem;font-weight:bold;}

.go-to-shop .flex-inner{justify-content:center; align-items:flex-end;}
.go-to-shop .right{	
display:flex;
flex-direction:column;
}

.go-to-shop .left img{width:80%;height:auto;}

 #con03 .go-to-shop h2{
	text-align:center;

	
}
#con03 .button-area{margin-top:2rem;}

.tenpo-btn a {
	filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.6));
	background:#FFF;
	border-radius:0.3rem;
	display:inline-block;
	margin:1rem;
}

.tenpo-btn  a:hover{
filter: drop-shadow(0px 0px 0px rgba(0,0,0,0.0));
}
#con03 .box:nth-child(2){text-align:center;}

.flex-inner{display:flex;}




#con04{
padding:3rem 10%;
width:90%;
margin:3rem auto;


}

#con04 h3{color:#4284DB;
font-weight:bold;
text-align:center;
margin-bottom:1rem;
font-size:1.5rem;
}
#con04 h2{text-align:center;margin-bottom:2rem;}
#con04 p{
max-width:25rem;
text-align:left;
padding:1rem;
}

#con04 .flex-inner{
margin:2rem auto 3rem auto ;
justify-content:space-around;
width:90%;

}



#con05{
text-align:center;
padding:3rem;
	
}

#con05 p{width:50%;
margin:auto;}

#con05 .flex-inner{
	width:80%;
	margin:auto;
	justify-content:center;

}

#con05 .flex-inner .item{
	margin:1rem 0.5rem 2rem 0.5rem;
}



#con06{
	padding:3rem;
	
}

#con06 h2{text-align:center;}
#con06 .flex-inner{
	width:80%;
	margin-bottom:1rem;
}

#con06 .flex-inner .right{
margin:0 3rem;
line-height:200%;
padding-top:0.5rem;
}






/* --- 方眼紙背景のBOX定義 ------------------------------------------- */
.hougan {
/*  margin     : auto;
  max-width  : 500px;
  height     : 200px;*/
                                           
  background-color : #fdfdfd;
  background-image :

    repeating-linear-gradient(to bottom,          /* 横線 */
       transparent 12px,
       rgba(235, 235, 235, 0.20) 13px,  rgba(235, 235, 235, 0.20) 13px,
       transparent 14px,  transparent 25px, 
       rgba(235, 235, 235, 0.20) 26px,  rgba(235, 235, 235, 0.20) 26px,
       transparent 27px,  transparent 38px, 
       rgba(235, 235, 235, 0.20) 39px,  rgba(235, 235, 235, 0.20) 39px,
       transparent 40px,  transparent 51px, 
       rgba(235, 235, 235, 0.20) 52px,  rgba(235, 235, 235, 0.20) 52px,
       transparent 53px,  transparent 64px, 
       rgba(235, 235, 235, 0.20) 65px,  rgba(235, 235, 235, 0.20) 65px),

    repeating-linear-gradient(to right,          /* 縦線 */
       transparent 12px,
       rgba(235, 235, 235, 0.20) 13px,  rgba(235, 235, 235, 0.20) 13px,
       transparent 14px,  transparent 25px, 
       rgba(235, 235, 235, 0.20) 26px,  rgba(235, 235, 235, 0.20) 26px,
       transparent 27px,  transparent 38px, 
       rgba(235, 235, 235, 0.20) 39px,  rgba(235, 235, 235, 0.20) 39px,
       transparent 40px,  transparent 51px, 
       rgba(235, 235, 235, 0.20) 52px,  rgba(235, 235, 235, 0.20) 52px,
       transparent 53px,  transparent 64px, 
       rgba(235, 235, 235, 0.20) 65px,  rgba(235, 235, 235, 0.20) 65px);

	}