@charset "UTF-8";
/* PC用 ----------------------------------------------------------------------------------------------------------------------------*/
@media (min-width:480px) { 
	body{
		display: flex;
		max-height:4000px;
		margin: 0;
		font-family:HGS行書体;
		background-image: url('../deta/haikei.jpg');
		background-repeat: repeat;
		overflow-x: hidden;
	}
	
	.header{
		display: flex;
		width: 100%;
		height: 60px;
		background-image: url('../image/header_01.png');
		background-repeat: repeat;
		align-items: center;
		position: fixed;
		z-index:2147483645
	}

	.header_menu{
		display: flex;
		width: 1000px;
		height: 60px;
		margin: 0 auto;
		background-image: url('../image/header_01.png');
		background-repeat: repeat;
		align-items: center;
		z-index:2147483646
	}

	.center_box_S{
		width:1000px;
		height:1000px;
	--	background-color: gray;
		margin: 0 auto;
		margin-top: 70px;
		position: relative;
	}

	.left_cont_S{
		width:730px;
		height:930px;
	--	background-color: #fff4cc;
		text-align: center;
		position: absolute;
		top: 10px;
		left: 10px;
	}
	
	.center_box_gallery{
		width:1000px;
		height:1180px;
	--	background-color: gray;
		margin: 0 auto;
		margin-top: 70px;
		position: relative;
	}

	.left_cont_gallery{
		width:730px;
		height:1130px;
	--	background-color: #fff4cc;
		text-align: center;
		position: absolute;
		top: 10px;
		left: 10px;
	}
	
	.center_box_kakunin{
		width:1000px;
		height:1180px;
	--	background-color: gray;
		margin: 0 auto;
		margin-top: 70px;
		position: relative;
	}

	.left_cont_kakunin{
		width:730px;
		height:1130px;
	--	background-color: #fff4cc;
		text-align: center;
		position: absolute;
		top: 10px;
		left: 10px;
	}
	
	.center_box_kanryou{
		width:1000px;
		height:1180px;
	--	background-color: gray;
		margin: 0 auto;
		margin-top: 70px;
		position: relative;
	}

	.left_cont_kanryou{
		width:730px;
		height:1130px;
	--	background-color: #fff4cc;
		text-align: center;
		position: absolute;
		top: 10px;
		left: 10px;
	}
	
	.center_box_topics{
		width:1000px;
		height:1180px;
	--	background-color: gray;
		margin: 0 auto;
		margin-top: 70px;
		position: relative;
	}

	.left_cont_topics{
		width:730px;
		height:1130px;
	--	background-color: #fff4cc;
		text-align: center;
		position: absolute;
		top: 10px;
		left: 10px;
	}

	.center_box_index{
		width:1000px;
		height:2790px;
		margin: 0 auto;
		margin-top: 70px;
		position: relative;
	}

	.center_title_index{
		width:980px;
		height:300px;
		background-image: url('../deta/title.png');
		background-size: 980px;
		text-align: center;
		position: absolute;
		top: 10px;
		left: 10px;
	}

	.left_cont_index1{
		width:730px;
		height:1230px;
	--	background-color: #fff4cc;
		text-align: center;
		position: absolute;
		top: 320px;
		left: 10px;
	}

	.left_cont_index2{
		background-image: url('../deta/gessya2.jpg');
		background-repeat:  no-repeat;                         /* 画像の繰り返しを指定  */              
		background-position:center center;                     /* 画像の表示位置を指定  */
 		background-size:contain;                               /* 画像のサイズを指定    */
 		width:730px;                                            /* 横幅のサイズを指定    */
 		height:300px;  
		text-align: center;
		position: absolute;
		top: 1560px;
		left: 10px;
	}
	
	.left_cont_index3{
		width:730px;
		height:810px;
	--	background-color: #fff4cc;
		text-align: center;
		position: absolute;
		top: 1870px;
		left: 10px;
	}

	.center_box_lesson{
		width:1000px;
		height:2900px;
		margin: 0 auto;
		margin-top: 70px;
		position: relative;
	}

	.left_cont_lesson{
		width:730px;
		height:2880px;
	--	background-color: #fff4cc;
		position: absolute;
		top: 10px;
		left: 10px;
	}

	.center_box_plofile{
	--	background-color: #fff4cc;
		width:1000px;
		height:1870px;
		margin: 0 auto;
		margin-top: 70px;
		position: relative;
	}

	.left_cont_plofile{
		width:730px;
		height:1850px;
	--	background-color: #cca4cc;
		position: absolute;
		top: 10px;
		left: 10px;
	}

	.center_box_otowa{
		width:1000px;
		height:1540px;
	--	background-color: #aaf4cc;
		margin: 0 auto;
		margin-top: 70px;
		position: relative;
	}

	.left_cont_otowa{
		width:730px;
		height:1520px;
	--	background-color: #fff4cc;
		position: absolute;
		top: 10px;
		left: 10px;
	}


	.right_cont{
		width:240px;
		height:840px;
	--	background-color: #fff4cc;
		text-align: center;
		position: absolute;
		top: 10px;
		left: 750px;
		
	}
	
	.right_cont_otowa{
		width:240px;
		height:840px;
	--	background-color: #fff4cc;
		text-align: center;
		position: absolute;
		top: 10px;
		left: 750px;
		
	}
	
	.right_cont_profile{
		width:240px;
		height:840px;
	--	background-color: #fff4cc;
		text-align: center;
		position: absolute;
		top: 10px;
		left: 750px;
		
	}
	
	.right_cont_lesson{
		width:240px;
		height:840px;
	--	background-color: #fff4cc;
		text-align: center;
		position: absolute;
		top: 10px;
		left: 750px;
		
	}
	
	.right_cont_gallery{
		width:240px;
		height:840px;
	--	background-color: #fff4cc;
		text-align: center;
		position: absolute;
		top: 10px;
		left: 750px;
		
	}
	
	.right_cont_kakunin{
		width:240px;
		height:840px;
	--	background-color: #fff4cc;
		text-align: center;
		position: absolute;
		top: 10px;
		left: 750px;
		
	}
	
	.right_cont_kanryou{
		width:240px;
		height:840px;
	--	background-color: #fff4cc;
		text-align: center;
		position: absolute;
		top: 10px;
		left: 750px;
		
	}
	
	.right_cont_topics{
		width:240px;
		height:840px;
	--	background-color: #fff4cc;
		text-align: center;
		position: absolute;
		top: 10px;
		left: 750px;
		
	}

	.right_cont2{
		width:240px;
		height:840px;
	--	background-color: #fff4cc;
		text-align: center;
		position: absolute;
		top: 320px;
		left: 750px;
		
	}

	.profile_box{

	}

	.twitter_box{
		width:220px;
		height:485px;
		overflow-y: scroll;
		position: absolute;
		left: 10px;
	}

	.header ul{
		overflow: hidden;
		margin: 0 auto;
		padding: 0;
	}

	.header li{
		list-style: none;
		
		float: left;
		margin: 5px;
		font-size:25px;
	}

	.header a{
		color: #dcd3b2;
		text-decoration:none;
		transition: color .3s, text-decoration .3s;
	}

	.header a:hover{
		color:#c39143;
		text-decoration:none;
		text-decoration: inherit;
	}

	form{
		max-width: 680px;
		width: calc(100% - 10px);
		margin: 0 auto;
		font-size: 20px;
	}

	.item{
		display: flex;
		align-items: center;
		padding-top: 20px;
	}

	.sex{
		padding-top: 20px;
	}

	.label{
		width: 280px;
		padding-left: 10px;
		border-left: solid 5px #FFFFaa;
	}

	.label-required{
		color: #ff6347;
		font-weight: bold; 
		font-size: 18px;
	}

	input[type="text"],input[type="email"]{
		border: solid 1px #aaa;
		border-radius: 5px;
		padding: 10px;
		font-size: 15px;
	}

	select{
		appearance: none;
		cursor: pointer;
		border: solid 1px #aaa;
		border-radius: 5px;
		padding: 10px;
		font-size: 15px;
	}

	textarea{
		border: solid 1px #aaa;
		border-radius: 5px;
		padding: 10px;
		height: 160px;
		width: 380px;
		font-size: 15px;
	}

	.btn{
		text-align: center;
		margin: 25px auto;
	}

	button{
		background: #ff6347;
		border-radius: 7px;
		cursor: pointer;
		color: white;
		font-size: 17px;
		font-weight: bold;
		padding: 10px 25px;
	}
	
	.center_cont video {
		width: 560px;
	}
}

/* スマホ用 ----------------------------------------------------------------------------------------------------------------------------*/
@media (max-width:480px){
	body{
		-webkit-appearance: none;
		display: flex;
		max-height:4000px;
		margin: 0;
		font-family: 'Noto Serif JP', serif;
		background-image: url('../deta/haikei.jpg');
		background-repeat: repeat;
	}
	
	.header{
		display: flex;
		width: 100%;
		height: 60px;
		background-image: url('../image/header_01.png');
		background-repeat: repeat;
		align-items: center;
		position: fixed;
		z-index:2147483645
	}

	.header_menu{
		display: flex;
		width: 100%;
		height: 60px;
		margin: 0 auto;
		background-image: url('../image/header_01.png');
		background-repeat: repeat;
		align-items: center;
		z-index:2147483646
	}

	.center_box_S{
		width:1000px;
		height:1000px;
		margin: 0 auto;
		margin-top: 70px;
		position: relative;
	}

	.left_cont_S{
		width:730px;
		height:980px;
	--	background-color: #fff4cc;
		position: absolute;
		top: 10px;
		left: 10px;
	}

	.center_box_index{
		width: 100%;
		height:2050px;
	--	background-color: gray;
		margin: 0 auto;
		margin-top: 70px;
		position: relative;
	}

	.center_title_index{
		width:340px;
		height:120px;
		background-image: url('../deta/title_smdv.png');
		text-align: center;
		position: absolute;
		top: 0%;
		left: 50%;
		transform: translate(-50%, 0%);
		-webkit-transform: translate(-50%, 0%);
		-ms-transform: translate(-50%, 0%);
	}

	.left_cont_index1{
		width:340px;
		height:1000px;
	--	background-color: #fff4cc;
		text-align: center;
		position: absolute;
		top: 4%;
		left: 50%;
		transform: translate(-50%, 4%);
		-webkit-transform: translate(-50%, 4%);
		-ms-transform: translate(-50%, 4%);
	}

	.left_cont_index2{
		width:340px;
		height:250px;
		background-image: url('../deta/gessya_smdv2.jpg');
		text-align: center;
		position: absolute;
		top: 48%;
		left: 50%;
		transform: translate(-50%, 48%);
		-webkit-transform: translate(-50%, 48%);
		-ms-transform: translate(-50%, 48%);
	}
	
	.left_cont_index3{
		width:340px;
		height:650px;
	--	background-color: #fff4aa;
		text-align: center;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, 50%);
		-webkit-transform: translate(-50%, 50%);
		-ms-transform: translate(-50%, 50%);
	}

	.center_box_lesson{
		width: 100%;
		height:2950px;
	--	background-color: gray;
		margin: 0 auto;
		margin-top: 70px;
		position: relative;
	}

	.left_cont_lesson{
		width:340px;
		height:2700px;
	--	background-color: #fff4cc;
		text-align: center;
		position: absolute;
		top: -7%;
		left: 50%;
		transform: translate(-50%, 8%);
		-webkit-transform: translate(-50%, 8%);
		-ms-transform: translate(-50%, 8%);
	}
	
	.center_box_gallery{
		width: 100%;
		height:2060px;
	--	background-color: gray;
		margin: 0 auto;
		margin-top: 70px;
		position: relative;
	}

	.left_cont_gallery{
		width:340px;
		height:2050px;
	--	background-color: #fff4cc;
		text-align: center;
		position: absolute;
		top: 0%;
		left: 50%;
		transform: translate(-50%, 0%);
		-webkit-transform: translate(-50%, 0%);
		-ms-transform: translate(-50%, 0%);
	}
	
	.right_cont_gallery{
		width:100%;
		height:600px;
	--	background-color: lightblue;
		text-align: center;
		position: absolute;
		top: 85%;
		left: 50%;
		transform: translate(-50%, 85%);
		-webkit-transform: translate(-50%, 85%);
		-ms-transform: translate(-50%, 85%);
	}
	
	.center_box_kanryou{
		width: 100%;
		height:600px;
	--	background-color: gray;
		margin: 0 auto;
		margin-top: 70px;
		position: relative;
	}

	.left_cont_kanryou{
		width:340px;
		height:590px;
	--	background-color: #fff4cc;
		text-align: center;
		position: absolute;
		top: 0%;
		left: 50%;
		transform: translate(-50%, 0%);
		-webkit-transform: translate(-50%, 0%);
		-ms-transform: translate(-50%, 0%);
	}
	
	.right_cont_kanryou{
		width:100%;
		height:600px;
	--	background-color: lightblue;
		text-align: center;
		position: absolute;
		top: 15%;
		left: 50%;
		transform: translate(-50%, 15%);
		-webkit-transform: translate(-50%, 15%);
		-ms-transform: translate(-50%, 15%);
	}
	
	.center_box_kakunin{
		width: 100%;
		height:600px;
	--	background-color: gray;
		margin: 0 auto;
		margin-top: 70px;
		position: relative;
	}

	.left_cont_kakunin{
		width:340px;
		height:590px;
	--	background-color: #fff4cc;
		text-align: center;
		position: absolute;
		top: 0%;
		left: 50%;
		transform: translate(-50%, 0%);
		-webkit-transform: translate(-50%, 0%);
		-ms-transform: translate(-50%, 0%);
	}
	
	.right_cont_kakunin{
		width:100%;
		height:600px;
	--	background-color: lightblue;
		text-align: center;
		position: absolute;
		top: 25%;
		left: 50%;
		transform: translate(-50%, 25%);
		-webkit-transform: translate(-50%, 25%);
		-ms-transform: translate(-50%, 25%);
	}
	
	.center_box_topics{
		width: 100%;
		height:2060px;
	--	background-color: gray;
		margin: 0 auto;
		margin-top: 70px;
		position: relative;
	}

	.left_cont_topics{
		width:340px;
		height:2050px;
	--	background-color: #fff4cc;
		text-align: center;
		position: absolute;
		top: 0%;
		left: 50%;
		transform: translate(-50%, 0%);
		-webkit-transform: translate(-50%, 0%);
		-ms-transform: translate(-50%, 0%);
	}
	
	.right_cont_topics{
		width:100%;
		height:600px;
	--	background-color: lightblue;
		text-align: center;
		position: absolute;
		top: 78%;
		left: 50%;
		transform: translate(-50%, 78%);
		-webkit-transform: translate(-50%, 78%);
		-ms-transform: translate(-50%, 78%);
	}

	.center_box_plofile{
		width: 100%;
		height:2400px;
	--	background-color: gray;
		margin: 0 auto;
		margin-top: 70px;
		position: relative;
	}

	.left_cont_plofile{
		width:340px;
		height:3060px;
	--	background-color: #fff4cc;
		text-align: center;
		position: absolute;
		top: 0%;
		left: 50%;
		transform: translate(-50%, 0%);
		-webkit-transform: translate(-50%, 0%);
		-ms-transform: translate(-50%, 0%);
	}

	.center_box_otowa{
		width:1000px;
		height:1450px;
	--	background-color: #aaf4cc;
		margin: 0 auto;
		margin-top: 70px;
		position: relative;
	}

	.left_cont_otowa{
		width:340px;
		height:1430px;
	--	background-color: #fff4cc;
		text-align: center;
		position: absolute;
		top: 0%;
		left: 50%;
		transform: translate(-50%, 0%);
		-webkit-transform: translate(-50%, 0%);
		-ms-transform: translate(-50%, 0%);
	}


	.right_cont{
		width:240px;
		height:840px;
	--	background-color: #fff4cc;
		text-align: center;
		position: absolute;
		top: 10px;
		left: 750px;
		
	}
	
	.right_cont_otowa{
		width:100%;
		height:600px;
	--	background-color: lightblue;
		text-align: center;
		position: absolute;
		top: 72%;
		left: 50%;
		transform: translate(-50%, 72%);
		-webkit-transform: translate(-50%, 72%);
		-ms-transform: translate(-50%, 72%);
	}
	
	.right_cont_profile{
		width:100%;
		height:600px;
	--	background-color: lightblue;
		text-align: center;
		position: absolute;
		top: 97%;
		left: 50%;
		transform: translate(-50%, 97%);
		-webkit-transform: translate(-50%, 97%);
		-ms-transform: translate(-50%, 97%);
	}
	
	.right_cont_lesson{
		width:100%;
		height:640px;
	--	background-color: #fff4cc;
		text-align: center;
		position: absolute;
		top: 77%;
		left: 50%;
		transform: translate(-50%, 77%);
		-webkit-transform: translate(-50%, 77%);
		-ms-transform: translate(-50%, 77%);
	}

	.right_cont2{
		width:100%;
		height:600px;
	--	background-color: #fff4cc;
		text-align: center;
		position: absolute;
		top: 77%;
		left: 50%;
		transform: translate(-50%, 77%);
		-webkit-transform: translate(-50%, 77%);
		-ms-transform: translate(-50%, 77%);
	}

	.profile_box{

	}

	.twitter_box{
		width:100%;
		height:485px;
		overflow-y: scroll;
		position: absolute;
		top: 25%;
		left: 50%;
		transform: translate(-50%, 25%);
		-webkit-transform: translate(-50%, 25%);
		-ms-transform: translate(-50%, 25%);
	}

	.header ul{
		overflow: hidden;
		margin: 0 auto;
		padding: 0;
	}

	.header li{
		list-style: none;
	--	background-color: lightpink;
		float: left;
		margin: 2px;
		font-size:13px;
	}

	.header a{
		color: #dcd3b2;
		text-decoration:none;
		transition: color .3s, text-decoration .3s;
	}
	
	form{
		max-width: 100%;
		width: calc(100% - 10px);
		margin: 0 auto;
		font-size: 13px;
	}

	.item{
		display: flex;
		align-items: left;
		padding-top: 10px;
	}

	.sex{
		padding-top: 20px;
	}

	.label{
		width: 150px;
		padding-left: 2px;
	}

	.label-required{
		color: #ff6347;
		font-weight: bold; 
		font-size: 13px;
	}

	input[type="text"],input[type="email"]{
		border: solid 1px #aaa;
		border-radius: 5px;
		padding: 10px;
		font-size: 13px;
	}

	select{
		appearance: none;
		cursor: pointer;
		border: solid 1px #aaa;
		border-radius: 5px;
		padding: 10px;
		font-size: 13px;
	}

	textarea{
		border: solid 1px #aaa;
		border-radius: 5px;
		padding: 10px;
		height: 160px;
		width: 380px;
		font-size: 15px;
	}

	.btn{
		text-align: center;
		margin: 25px auto;
	}

	button{
		background: #ff6347;
		border-radius: 7px;
		cursor: pointer;
		color: white;
		font-size: 17px;
		font-weight: bold;
		padding: 10px 25px;
	}
	
	.center_cont video {
		width:340px;
	}
}