@charset "utf-8";
/* sp */

@media only screen and (max-width:420px) {
	
body{margin:0; width:100%;padding:0;}
.pc_only{display:none;}	
.sp_only{display:block !important;} 

.em{font-weight:bold;}
h2.big{font-size:1.8rem;}
.max100{max-width:100%;height:auto;}
.small{font-size:70%;}
.bg_gray{background:#F4F4F4;}
#page_top.pc_only{display:none;}
.flex-inner{display:flex;}
/* article */
article{
	width:100%;
	margin:0 auto;
	overflow-x: hidden;
}

/* header */
header{width:100%;}
/* catch */
#catch ul li{
	text-indent:-3rem;
	margin-left:3rem;
	
}
#catch img.logo{width:95%; height:auto;margin:auto;}
/* con01 */
#con01 {position:relative; margin-top:0;padding-top:0;}
#con01 .deco1{position:absolute; top:-10%; right:-20%;text-align:right;}
#con01 .deco2{position:absolute; top:90%; right:0%; text-align:right;}
#con01 .deco1 img,
#con01 .deco2 img{width:50%; height:auto; z-index:10; }
#con01 .deco2 img{width:40%; height:auto; }
.bg_point1{
	margin-left:0;
	margin-top:0;
	padding:1rem;
	padding-top:2rem;
	width:100%;
	
}

#con01 .bg_point1 img{width:60%;height:auto;}

#con01 h2+h3{margin-top:-1rem;}
#con01 h3{font-size:170%;}
#con01 h3{text-align:left;}

/* con02 */

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

background-image:url("../images/bg_item02.png");
background-size:contain;
background-size:120%;
background-position:top 40rem  right 0;
background-repeat: no-repeat;
padding-top:3rem;
}

.point2{flex-direction:column-reverse;}
.point2 {align-items: flex-end;}
.point2 .left{ text-align:center;}
.point2 .right{ text-align:left; padding:5%;}
.point2 h2+h3{margin-top:-1rem;}
.point2 h2,h3{text-align:center;}
.point2 h3{font-size:170%;}

.point3{flex-direction:column;}
.point3 h2+h3{margin-top:-1rem;}
.point3 .h3{font-size:170%;}
.point3 .left{ text-align:center;width:100%;}
.point3 p{text-align:left;margin-bottom:0}
.point3 .left img{width:90%;height:auto;margin:auto}
.point3 .right{ text-align:left; }
.point3 .right img{width:90%;height:auto; }
.point3{padding-top:4rem;}

.point4{width:100%; margin:3rem 0 0 0 ;  padding:0; }
.point4 .center{ margin:0 1rem ; text-align:center; width:100%;}
.point4 .center p{display:none;}
.point4 .left, .point4 .right{padding-top:1rem;}
.point4 .left img, .point4 .right img{width:100%;height:auto;}
.point4 .left,
.point4 .right{text-align:center;}
.point4 h2+h3{margin-top:-1rem;}
.point4 .h3{font-size:170%;}
.point4_p{padding:0 10%;}
h2.point5_title{ color:#333; text-align:center;margin-top:0; }
.point5{flex-direction:column;}
.point5{color:#333;font-weight:bold;}
.point5 p{font-size:120%;}
.point5 img{max-width:100%;}

.point5 {vertical-align:bottom;}
.point5 .left, .point5 .center, .point5 .right{
display:flex;
flex-direction:column;
justify-content:center;
margin:0 ;
width:100%;
text-align:center;

}

.point5 .left img, .point5 .center img, .point5 .right img{
width:60%;height:auto;
	margin:auto;
}
.point5 .right img{width:30%;}

/* con03 */


h2.title-support{
	display:inline-block;
	background:#F4F4F4;	
	padding:2rem 0.3rem 0 0.3rem;
		
	}
	.title-area{
		text-align:center;
		margin-top:-4rem;
	}
	.box{
	color:#4284D6;
	border:1px solid #4284D6;
	width:90%;
	margin: auto;
	margin-bottom:5rem;
	padding:1rem;
	
	
	}
	
	.box img{max-width:100%;}
	.button-area{display:flex; justify-content:center; }
	
	.box h3{margin-top:0; text-align:center;display:inline;}

.support .left, .support .right{
text-align:center;
padding:0;
margin:0;

}

.support {
	flex-direction:column;
}
.support .right p{
text-align:left;
margin:0;
padding:0;


}

.support{
	align-items: center
}


/* ご購入について */

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

.go-to-shop .flex-inner .left{
	text-align:center;

	}
.go-to-shop .flex-inner .right{
	text-align:center;
	margin:auto;
	}


#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;}

/* con04 */
/* 練習方法 */
#con04 .flex-inner{flex-direction:column;}	
#con04 img{width:100%; height:auto;}

#con04{
	padding:3rem 0;
	width:100%;
	margin:0;
	

	}
	
	#con04 h3{color:#4284DB;
	font-weight:bold;
	text-align:center;
	margin:1rem auto;
	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 2rem auto ;
	justify-content:space-around;
	width:90%;
	
	}
	#con04 .flex-inner:nth-of-type(2){
		flex-direction:column-reverse;
		margin-bottom:0;
	}	



/* con05 */

	#con05{
	padding:3rem 1rem;
		
	}
	#con05 p{width:100%; padding:0 2rem;}
	
	#con05 .flex-inner{
		width:100%;
		margin:0;
		padding:0;
		justify-content:space-between;
		flex-direction:row;
		overflow: scroll;
	
	}
	
	#con05 .flex-inner .item{
		margin:1rem 0.5rem 2rem 0.5rem;
	}
	
 /* youtube swipe */
#images {
	width: 200px;
	margin-right: auto;
	margin-left: auto;
	overflow: hidden;
	height: 145px;
	position: relative;
	}
	#images ul li{
	list-style:none;
	width: 200px;
	position: absolute;
	}
	#swipe{
	position: absolute;
	}

	#img_page{
		text-align: center;
		padding: 5px;
		color: #DDDDDD;
	  }
/* con06 */
#con06{
	padding:3rem 0.5rem;
}

 #con06 .flex-inner {
	flex-direction:column;
	 justify-content:center;
	 width:100%;
	 margin:0 1rem;
	} 
	#con06 .flex-inner .left{
		text-align:center;
		width:16rem;
	}

	#con06 .flex-inner .right{
		width:100%;
	}
#con06 .sp_swipe{
	display:flex;
	width:100%;
	margin:0;
	align-items: flex-start;
	flex-direction:row;
	overflow: scroll;
	

}
#con06 .flex-inner .right {
	margin:0;
}
/* con07 */

#con07 h2{font-size:200%; text-align:center;}

#con07{padding:3rem 0;}
#con07 dl{
	width:90%;
}
#con07 dt{
	margin-bottom:1rem;
	margin-left:0;
	text-indent:-3rem;
	margin-left:3rem;
}

/* con08 */
#con08 .flex-inner {flex-direction:column-reverse;}	
/* con09 */
#con09 img{max-width:100%; height:auto;}
#con09 .flex-inner {flex-direction:column-reverse;}	
/* con10 */

#con10{
	padding:2rem 1rem;	
	}
	#con10 h2{text-align:center;}
	#con10 a{ color:#4284D6;border-bottom:1px solid #4284D6;}
	#con10 dl{
		display:flex;
		flex-direction: row;
		width:100%;
		margin-bottom:1rem;
	}

	#con10 dt,
	#con10 dd{
	margin-left:none;
	margin-bottom:0;
	margin-right:0;
	font-weight:normal;
		}
	#con10 dt{
	width:10rem
	}
	#con10 dd{
	width:95%;
	padding-left:5%;
	word-break:break-all;
		}



/* con11 */

#con11 .flex-inner{
	flex-direction:column;
	justify-content:space-between;
	width:90%;
	width:100%;
	margin: auto;
	color:#FFF;
	
	
	}


#con11 .step_title img{width:8rem; height:auto;margin-bottom:0.5rem;}

#con11 .item{
	display:flex;
	margin:0 0.5rem;
	

	
}
#con11 .item img:nth-of-type(2){
	display:none;
}

#con11 .item p{
max-width:95%;
	font-size:95%;
	margin-left:5%;
	margin-bottom:0;
}

#con11  .arrow{
	margin:0 auto 1rem auto;
	
}
#con11 .item img{
	/* max-width:100%; */
	max-width:45%;
	height:100%;
	
}

#con11 .arrow img{
	margin-top:0;
		width:2rem;
		transform: rotate(90deg);	
		
		
		
}

#con11 .sp_only{
	margin:0 auto;
}

#con11{

	background:url("../images/sp_step_bg.png");
	background-size:cover;
	}
/* con12 */
/* #con12 ul li{font-size:1rem;line-height:1.8;}

/* #con12{
	overflow:scroll;
	height:10rem;
}

#con12::-webkit-scrollbar{
width:0.5rem;
}
#con12::-webkit-scrollbar-track{
	background-color:#CCC;
	} */

#con12{
		padding:3rem 1rem;	
		} 

.attention{

	overflow:scroll;
	height:15rem;
	padding:0.5rem;	
}


.attention::-webkit-scrollbar{
	width:0.5rem;
	}
	.attention::-webkit-scrollbar-track{
		background-color:#CCC;
		}
/* con13 */
#con13 .flex-inner {flex-direction:column; }
#con13 .flex-inner img{margin:0.5rem; }
/* con14 */

/* footer */

footer{width:100%; padding:2rem 0;margin:0;}
    
footer .flex-inner{
	margin:auto;
	}
footer .left{
	padding:0; 
	margin:0 ;
	text-align:center;
}

footer .left p {padding-top:5rem;}
footer .left img{width:15rem;height:auto;margin:0 auto;}
footer .left{width:100%;}
footer .small{font-weight:"normal"}

footer .center, footer .right{display:none;}



/* さらに表示ボタン */



.is-hidden {
  display: none;
}

  
   dl.is-hidden {
	visibility: hidden;
	display: none;
	opacity: 0;
	height: 0;
	margin: 0 10px;
	padding: 0;
  } 
  
  .more {
	text-align: center;
	/* margin-top: -100px; */
  }

 .more2 {
	text-align: center;
	/* margin-top: -50px; */
  }

  .more .blue, .more2 .blue{color:#4284D6;}
  
  /* .more button, .more2 button {
	background-color: #FFF;
	border: solid 1px #333;
	cursor: pointer;
	outline: none;
	color: #333;
	padding: 0;
	line-height: 40px;
	width: 160px;
	border-radius: 0;
  } */


  .more .btn, .more2 .btn {
	background-color: #FFF;
	border: solid 1px #333;
	cursor: pointer;
	outline: none;
	color: #333;
	padding: 0;
	line-height: 40px;
	width: 160px;
	border-radius: 0;
	margin:auto;
  }

/* バーガーメニュー */
.menu-btn {
    position: fixed;
    top: 1rem;
  	left:1rem;
    display: flex;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    z-index: 90;
    background-color:rgba(236,243,251,0.5)
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: #4284D6;
    position: absolute;
}
.menu-btn span:before {
    bottom: 8px;
}
.menu-btn span:after {
    top: 8px;
}
#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}


#menu-btn-check {
    display: none;
}

.menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 80;
    background-color: #ECF3FB;
}
.menu-content ul {
    padding: 70px 10px 0;
}
.menu-content ul li {
    border-bottom: solid 1px #ffffff;
    list-style: none;
	font-weight:bold;
}

.menu-content ul li ul li{
    border-bottom: 0;
   
}
.menu-content ul li a {
    display: block;
    width: 100%;
	height:auto;
    font-size: 1rem;
    box-sizing: border-box;
    color:#4284DB;
    text-decoration: none;
    padding: 1rem;
    position: relative;
}
.menu-content a:hover {opacity:0.5}
.menu_sns .item {display:flex; justify-content:start; }
.menu_sns .item img{width:3rem; height:auto;margin:0.5rem;  }
.menu_sns .item a{padding:0.5rem; }
.menu_sns .item a:hover{opacity:0.5}
/* .menu-content ul li a::before {
    content: "";
    width: 7px;
    height: 7px;
    border-top: solid 2px #ffffff;
    border-right: solid 2px #ffffff;
    transform: rotate(45deg);
    position: absolute;
    right: 11px;
    top: 16px;
} */
.menu-content ul li img{
	width:3rem; height:auto;
}
.menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%;/*leftの値を変更してメニューを画面外へ*/
    z-index: 80;
    background-color: #ECF3FB;
    transition: all 0.5s;/*アニメーション設定*/
}
.menu-content ul li a{display: flex; justify-content:start;}
.menu-content ul li a img{margin-left:4rem;}
/* メニューを外に出して非表示にする */
.menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%;/*leftの値を変更してメニューを画面外へ*/
    z-index: 10;
    background-color: #ECF3FB;
    transition: all 0.5s;/*アニメーション設定*/
}

/* ボタンをタップしてメニューが出る */
#menu-btn-check:checked ~ .menu-content {
    left: 0;/*メニューを画面内へ*/
}



/* アコーディオン */
.check{
	display: none;
 }
 

 .label{
	color: #4284D6;
	display: flex;
	justify-content:space-between;
	align-items: center;
	margin-bottom: 0;
	padding: 1rem;
	font-size:1rem;
	
 }
 
.acd_content{
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 0;
	overflow: hidden;
	margin-bottom: 10px;
	transition: 0.5s;
	

 }
 .menu-content ul.acd_content{
    padding:0;
}
 .check:checked + .label + .acd_content{
	height:auto;
	padding:0;
 }

/* バーガーメニュー　end */



} /* sp end*/