@charset "utf-8";


@media screen and (max-width: 640px) {

	/*   --------共通エリア--------　  */


	.inner #headerimg{
	    width:100%;
	    height:250px;
	    text-align:center;
	    display:table;
	    vertical-align:middle;
	}

	.inner #headerimg h2{
	    width:100%;
	    text-align:center;
	    display:table-cell;
	    height:250px;
	    vertical-align:middle;
	    letter-spacing:0.05em;
	    padding-top:75px;
	    box-sizing: border-box;
	    color:#fff;
	    line-height:0.6em;
	    font-size:42px;
	    font-weight:normal;
	}
	.inner #headerimg h2 span{
	    font-size:20px;
	}

	.inner.about #headerimg{
	    background:url(../img/about/bg_header.jpg) center center no-repeat;
	    background-size:cover;
	}
	.inner.instructors #headerimg{
	    background:url(../img/instructors/bg_header.jpg) center center no-repeat;
	    background-size:cover;
	}
	.inner.lesson #headerimg{
	    background:url(../img/lesson/bg_header.jpg) -280px -50px no-repeat;
	    background-size:1150px;
	}
	

	.inner #content h2{
		font-size:24px;
		width: 95%;
		height:35px;
		display:block;
		font-style:normal;
		line-height:1.2em;
		letter-spacing:0.075em;
		text-align:center;
	}

	.inner #exp{
	    /*width: 375px;*/
	    width: 100%;
	    height:560px;
	    display:table;
	    vertical-align:middle;
	    background:url(../img/common/bg_contact.jpg) no-repeat;
	    background-size:cover;
	    color:#fff;
	    line-height:1.75em;
	    margin-bottom:-70px;
		box-sizing:border-box;
		padding:0;
	}

	.inner #exp div{
	    width:100%;
	    height:560px;
	    display:table-cell;
	    vertical-align:middle;
	    padding:0 15px;
	}


	.inner #exp div h2{
		background:url(../img/common/title_exp_bg.png) center center no-repeat;
		padding-left:5px;
	}

	.inner #exp div p{
		letter-spacing:0.05em;
		margin-bottom:40px;
	}

	.inner a.expBtn{
		border:5px solid #e45f8f;
		color:#fff;
		padding:13px 20px;
		background: #d81b60;
		margin:auto;
		font-size:18px;
		display:block;
		width:345px;
		box-sizing:border-box;
		line-height:1.5em;
	}
	.inner a:hover.expBtn{
		opacity:0.7;
		background: #d81b60;
	}

	.tabmenu{
		width:375px;
		height:auto;
		margin:0 auto 60px auto;
		background:#fff;
	}

	.tabmenu:after{
		background:none;
		background-size:61px;
		width:100%;
		height:0px;
		display:block;
		content: "";
	}

	.tabmenu ul{
		border-left:none;
		height:auto;
		width:375px;
		margin:0px auto 0px auto;
	}

	.tabmenu li{
		display:inline-block;
		text-align:center;
		height:60px;
		vertical-align:middle;
		line-height:1.4em;
		background:none;
		transition: 0.3s ease;
	    -webkit-transition: 0.3s ease;
	    width:186px;
	    font-size:14px;
	    border-bottom:1px solid #f5f5f5;
	    border-right:1px solid #f5f5f5;
	    box-sizing:border-box;
	}
	.tabmenu li:nth-child(even){
		border-right:none !important;
		background:none;
	}
	.tabmenu li a{
		width:186px;
		height:60px;
		display:table-cell;
		text-align:center;
		vertical-align:middle;
		color:#5976ba;
	}

	.tabmenu li a:hover{
		font-weight:bold;
		color:#5976ba;
	}
	.tabmenu li:hover{
		background:url(../img/common/arrow_down_blue.png) center 70px no-repeat;
		background-size:16px;

	}

	.about .tabmenu li{
		width:185.5px;
		border-right:1px solid #f5f5f5;
	}
	.about .tabmenu li a{width:186px;}

	.instructors .tabmenu li{
		width:375px;
		border-right:1px solid #f5f5f5;
	}
	.instructors .tabmenu li a{width:375px;}

	.lesson .tabmenu li{
		width:375px;
		border-right:1px solid #f5f5f5;
	}
	.lesson .tabmenu li a{width:375px;}
	
	.voice .tabmenu{
		width:375px;
		border-right:none;
		opacity:0;
		height:0px;
		margin-bottom:-100px;
	}
		.voice .tabmenu ul{
			display:none;
		}
	.voice .tabmenu li{
		width:375px;
		border-right:none;
	}
	.voice .tabmenu li a{width:375px;}

	.inner #content{
		background:#f5f5f5;
	}


	/*   ---------- ABOUT -----------  */

	#intro h2{
		background:url(../img/about/title_intro_bg.png) center center no-repeat;
	}

	.inner.about #intro{
		line-height:1.75em;
		margin-bottom:60px;
		width:375px;
		box-sizing:border-box;
		padding:0 15px;
		margin: auto;
	}

	.inner.about #intro .reads{
		width:100%;
		display:block;
		margin:0 0 80px 0;
	}
	.inner.about #intro .points{
		width:auto;
		height:auto;
		display:table;
		margin:0 auto -20px auto;
		vertical-align:top;

	}

	.inner.about #intro dl{
		width:100%;
		height:auto;
		border:2px solid #879ccc;
		box-sizing:border-box;
		padding:16px;
		background:#fff;
		display:inline-block;
		position:relative;
		vertical-align: top !important;
		margin:0 auto 70px auto;
	}
	.inner.about #intro dt img{
		width:77px;
		position:absolute;
		top:-50px;
		left:131px;
	}

	.inner.about #intro dd h3{
		font-style:italic;
		color:#5976ba;
		line-height:1.4em;
		padding:40px 0 5px 0 ;
	}
	.inner.about #intro dd p{
		font-size:14px;
		line-height:1.75em;
		text-align:left;
	}

	.inner.about #greeting{
		/*width: 375px;*/
		width: 100%;
		height:auto;
		background-size:600px;
		position:relative;
		overflow:none;
	}

	.inner.about #greeting div{
		background:url(../img/about/bg_graphic.png) #000 right top no-repeat;
		/*width: 375px;*/
		width: 100%;
		height:100%;
		position:relative;
		right:0;
		color:#fff;
		text-align:left;
		padding: 60px 20px 60px 20px;
		box-sizing:border-box;
		margin-top:0px;

	}

	.inner.about #greeting img{
		width:100%;
		position:relative;
	}	

	.inner.about #greeting h2{
		background:url(../img/about/title_greeting_bg.png) center center no-repeat;
		width:100%;
		position:relative;
		left:0px;
		padding:20px 20px 0px 20px;
		text-align:center;
	}

	.inner.about #greeting dl{
		margin-bottom:25px;
		padding-top:20px;
	}

	.inner.about #greeting dt{
		margin-bottom:15px;
		text-align:center;
		padding:0 40px;
		line-height:1.4em;
	}

	.inner.about #greeting dd h3{
		font-size:28px;
		letter-spacing:0.075em;
		text-align:center;
	}

	.inner.about #greeting dd h3 span{
		font-size:16px;
	}

	.inner.about #greeting p.read{
		font-size:18px;
		font-weight:bold;
		font-style:italic;
		margin-bottom:15px;
		line-height:1.5em;
		color:#5976ba;
		padding:0;
		text-align:center;
	}

	.inner.about #greeting p{
		line-height:1.75em;
			margin-bottom:50px;

	}

	.inner.about #greeting a.button{
		border:3px solid #fff;
		color:#fff;
		/*width: 375px;*/
		width: 100%;
		padding:18px 84px;
		background:url(../img/common/arrow_btn-white.png) no-repeat 310px center;
		display: block;
		margin: auto;
		box-sizing: border-box;
	}
	.inner.about a.button:hover{
		background:url(../img/common/arrow_btn-white.png) no-repeat 228px center;
		opacity:0.5;
	}

	.inner.about #equip{
		background:url(../img/about/bg_equip.jpg) top center #5976ba no-repeat;
		background-size:435px;
		color:#fff;
		padding:60px 0 40px 0;
	}


	.inner.about #equip h2{
		background:url(../img/about/title_equip_bg.png) center center no-repeat;
		width:95%;
		margin-bottom:250px;
	}

	.inner.about #equip div{
		width:375px;
		margin:0 auto 20px auto;
		text-align:left;
		padding-left:9px;
	}

	.inner.about #equip dl{
		display:inline-block;
		width:168px;
		height:325px;
		text-align:left;
		background:#fff;
		color: #5976ba;
		box-sizing:border-box;
		padding:25px 18px;
		vertical-align:top;
		margin: 20px 5px;
		position:relative;
	}
	.inner.about #equip dl:nth-child(even){
		margin: 20px 10px 20px 5px;
	}
	.inner.about #equip dl:after{
		background:url(../img/about/bg_equipbox.png)  center no-repeat;
		background-size:26px;
		width:245px;
		height:26px;
		display:block;
		content: "";
		position:absolute;
		top:-21px;
		left:0px;
	}
	.inner.about #equip dt{
		font-size:20px;
		font-weight:bold;
		font-style:italic;
		margin-bottom:10px;
	}
	.inner.about #equip dd{
		font-size:14px;
		line-height:1.5em;
	}


	.inner.about #access{
		/*width: 375px;*/
		width: 100%;
		height:auto;
		text-align:center;

	}

	.inner.about #access .infoArea{
		/*width: 375px;*/
		width: 100%;
		display:inline-block;
		background:#fff;
		height:auto;
		vertical-align:top;
		margin-right:-5px;
		box-sizing:border-box;
		padding:40px 0px;
	}

	.inner.about #access .mapArea{
		/*width: 375px;*/
		width: 100%;
		height:560px;
		display:inline-block;
		position: initial;
	}
	.inner.about #access iframe{
		/*width: 375px;*/
		width: 100%;
		height:560px;
	}


	.inner.about #access h2{
		background:url(../img/about/title_access_bg.png) center center no-repeat;
		width:335px;
		position:relative;
		left:-0px;
	}

	.inner.about #access .text p{
		font-weight:bold;
		color:#5976ba;
		line-height:1.65em;
		letter-spacing:0.05em;
		margin-bottom:15px;
	}
	.inner.about #access .info p{
		line-height:1.45em;
		letter-spacing:0.025em;
		margin-bottom:15px;
	}
	.inner.about #access .text{
		margin-top:-10px;
	}
	.inner.about #access .info{	padding-top:8px;
	}





	/*   -------- INSTRUCTORS --------　  */


	.inner.instructors #instructors h2{
		background:url(../img/instructors/title_instructors_bg.png) center center no-repeat;

	}

	.inner.instructors #instructors{
		height:auto;
		background:#000;
		color:#fff;
		display:table;
		padding:0px 0 120px 0;
		/*width: 375px;*/
		width: 100%;
	}

	.inner.instructors #instructors div{
		/*width: 375px;*/
		width: 100%;
		height:200px;
		display:block;
		vertical-align:middle;
		box-sizing:border-box;
		padding:0 20px;
	}
	.inner.instructors #instructors ul{
		width:100%;
		height:auto;
		display:block;
		background:#000;

	}

	.inner.instructors #instructors li{
		width: 50%;
		height:250px;
		display: inline-block;
		background:#333;
		margin:0 -2px 1px 0 !important;
		outline:none;
		vertical-align: middle;
		font-size:24px;
		letter-spacing:0.05em;
	}

	.inner.instructors #instructors li a{
		width:100%;
		height:250px;
		display: -webkit-flex;
		display: flex;
		-webkit-align-items: center;
		align-items: center; 
		-webkit-justify-content: center;
		justify-content: center; 
		vertical-align:middle;
		vertical-align:middle;
		opacity:0;
		background-color: rgba(0,0,0,0.5);
	}
	.inner.instructors #instructors li a:hover{
		opacity:1;
		color:#fff;
		background-color: rgba(0,0,0,0.5);
	}
	.inner.instructors #instructors li a:hover{
		opacity:1;
		color:#fff;
		background-color: rgba(0,0,0,0.5);
	}

	.inner.instructors #instructors li dt{
		margin:0 auto 15px auto;
		padding-bottom:10px;
		border-bottom:1px solid #fff;
		width:25px;
	}

	.inner.instructors #instructors div p{
		width:100%;
		margin-bottom:80px;
		line-height:1.8em;
	}


	.inner.instructors #instructors div a{
		border:3px solid #fff;
		color:#fff;
		padding:18px 80px;
		background:url(../img/common/arrow_btn-white.png) no-repeat 220px center;
		margin:auto;
	}
	.inner.instructors #instructors div a:hover{
		background:url(../img/common/arrow_btn-white.png) no-repeat 223px center;
		opacity:0.5;
	}

	/*ここから*/

	.inner.instructors #instructors li.instructor_yoneda{
		background:url(../img/top/ph_inst_yoneda.jpg)top center no-repeat;
		background-size:cover;
	}

	.inner.instructors #instructors li.instructor_ishii{
		background:url(../img/top/ph_inst_ishii.jpg)top center no-repeat;
		background-size:cover;
	}

	.inner.instructors #instructors li.instructor_terayama{
	background:url(../img/top/ph_inst_terayama.jpg)top center no-repeat;
	background-size:cover;
	}

	.inner.instructors #instructors li.instructor_kawana{
	background:url(../img/top/ph_inst_kawana.jpg)top center no-repeat;
	background-size:cover;
	}

	.inner.instructors #instructors li.instructor_uoi{
		background:url(../img/top/ph_inst_uoi.jpg)top center no-repeat;
		background-size:cover;
	}

	.inner.instructors #instructors li.instructor_yokota{
		background:url(../img/top/ph_inst_yokota.jpg)top center no-repeat;
		background-size:cover;
	}

	/*ここまで*/

	/*   -------- LESSON --------　  */

	.inner.lesson #intro h2{
		background:url(../img/lesson/title_intro_bg.png) center center no-repeat;
	}

	.inner.lesson #intro{
		line-height:1.75em;
		margin-bottom:10px;
	}

	.inner.lesson #intro .reads{
		width:100%;
		display:block;
		margin:0 0 60px 0;
		padding: 0 15px;
		box-sizing:border-box;
	}

	.inner.lesson #intro .reads span{
		font-size:14px;

		}
	.inner.lesson #intro .points{
		width:1100px;
		height:300px;
		display:table;
		margin:0 auto 0px auto;
		vartical-align:top;

	}


	.inner.lesson #intro .lessonList{
		width:100%;
		height: 450px;
		display:table;
		background:#5976ba;
	}

	.inner.lesson #intro dl{
		width:25%;
		height:450px;
		display:table-cell;
	}
	.inner.lesson #intro dl.lesson01{
		background:url(../img/lesson/lesson01.jpg) top center no-repeat #879ccc;
		background-size:cover;
		/* height: 400px; */
	}
	.inner.lesson #intro dl.lesson02{
		background:url(../img/lesson/lesson02.jpg) top center no-repeat #879ccc;
		background-size:cover;
	}
	.inner.lesson #intro dl.lesson03{
		background:url(../img/lesson/lesson03.jpg) top center no-repeat #879ccc;
		background-size:cover;
	}
	.inner.lesson #intro dl.lesson04{
		background:url(../img/lesson/lesson04.jpg) top center no-repeat #879ccc;
		background-size:cover;
	}

	.inner.lesson #intro dl h3{
		margin-bottom:20px;	
		margin-top:-15px;
		font-size:48px;
		font-style:normal;
		letter-spacing:0.05em;
		line-height:0.5em;
	}
	.inner.lesson #intro dl h3 span{
		font-size:12px;
	}

	.inner.lesson #intro dl dt{
		margin-bottom:20px;
		font-size:22px;
		font-style:italic;
	}

	.inner.lesson #intro dl dd{
		margin-bottom:5px;
		text-align:left;
		height:auto;
		display:block;
		font-size:14px;
		line-height:1.75em;
	}
	.inner.lesson #intro dl{
		height: 420px;
		width:375px;
		position:relative;
		box-sizing:border-box;
		padding:165px 17px 0 17px;
		color:#fff;
		display:inline-block;
	}



	.inner.lesson #intro dl a{
		color:#fff;
		padding:15px 0px 15px 10px;
		background:url(../img/common/arrow_btn-white.png) no-repeat 202px center #d81b60;
		margin: 30px auto 25px auto !important;
		display:block;
		width:220px;
		font-size:16px;
		box-sizing:border-box;
		text-align:center;
		position: relative;
	}
	.inner.lesson #intro dl a:hover{
			background:url(../img/common/arrow_btn-white.png) no-repeat 205px center #d81b60;
		opacity:0.7;
	}

	.inner.lesson #flow{
		padding:80px 0 80px 0;
	}

	.inner.lesson #flow .points{
		padding:60px 0 0px 0;
	}


	.inner.lesson #flow h2{
		background:url(../img/lesson/title_flow_bg.png) center center no-repeat;
	}

	.inner.lesson #flow dl{
		width:345px;
		height:auto;
		border:2px solid #879ccc;
		box-sizing:border-box;
		padding:16px;
		background:#fff;
		display:inline-block;
		position:relative;
		vertical-align: top !important;
		margin:0 auto 70px auto;
	}

	.inner.lesson #flow dl.arrow:after{
		background:none;
		background-size:17px;
		width:17px;
		height:27px;
		display:block;
		content: "";
		position:absolute;
		top:97px;
		right:-38px;
	}


	.inner.lesson #flow dt img{
		width:77px;
		position:absolute;
		top:-50px;
		left:125px;
	}

	.inner.lesson #flow dd h3{
		font-style:italic;
		color:#5976ba;
		line-height:1.4em;
		padding:50px 0 15px 0 ;
	}
	.inner.lesson #flow dd p{
		font-size:14px;
		line-height:1.75em;
		text-align:left;
	}
	
	.voice #voice{
		padding-top:60px !important;
	}




	.inner.voice #interview{
		padding-top:50px;
		padding-bottom:60px;
	}

	.inner.voice #interview img.images{
		width:375px;		
	}

	.inner.voice #interview h2{
		background:url(../img/lesson/title_intro_bg.png) center center no-repeat;
		width:90%;
	}

	.inner.voice #interview dl.title {
		width:375px;
		text-align:left;
		color:#5976ba;
		margin:0 auto 80px auto;
		box-sizing:border-box;
		padding:20px;
		border-bottom:2px solid #5976ba;
		position:relative;
		line-height:1.95em;
		height:160px;

	}

	.inner.voice #interview dl.title:after {
		background:url(../img/voice/over_graphic.png) center center no-repeat;
		background-size:375px;
		width:375px;
		height:812px;
		display:block;
		content: "";
		position:absolute;
		top:-320px;
		right:0px;
	}

	.inner.voice #interview dl.title dt{
		display:inline-block;
		float:left;
		height:180px;
		margin-right:30px;
	}

	.inner.voice #interview dl.title dd.interviewTitle {
		font-size:24px;
		font-weight:bold;
		margin-bottom:5px;
		margin-top:-5px;
		padding-top:0px;
	}

	.inner.voice #interview dl.title dd.name{
		margin-bottom:-4px;	
	}


	.inner.voice #interview dt img{
		height:82px;
		display:inline-block;	
	}

	.inner.voice #interview .contentArea{
		width:375px;
		margin:auto;
	}
	.inner.voice #interview .contentArea dl{
		width:345px;
		margin:auto;
	}

	.inner.voice #interview .contentArea dt{
		color:#5976ba;
		font-size:24px;
		font-weight:bold;
		line-height:1.45em;
		margin-bottom:20px;
	}
	.inner.voice #interview .contentArea dt span{
		font-size:36px;
	}

	.inner.voice #interview .contentArea dd{
		line-height:1.75em;
	}

	.inner.voice #interview .contentArea dd.sex{
		color:#5976ba;
	}

	.inner.voice #interview .contentArea dd p{
		margin-bottom:25px;
	}

	.inner.voice #interview .contentArea hr{
		width:50px;
		height:3px;
		border:none;
		margin:65px auto 80px auto;
		background-color:#5976ba;
	}




	.inner.company #content{
		text-align:center;
		letter-spacing:0.05em;
		background:#f5f5f5;
		margin-bottom:-25px;
		padding-top:20px;
		padding-bottom:100px;
	}


	.inner.company.privacy #content{
		line-height:1.75em;
	}

	.inner.company.privacy p,
	.inner.company p{
		width:335px;
		margin:0 auto 40px auto;
		line-height:1.75em;
	}

	.inner.company dl{
		width:335px;
		margin:auto;
	}

	.inner.company.privacy dl,
	.inner.company .privacy dl{
		width:335px;
		margin:auto;
		line-height:1.75em;
	}

	.inner.company.privacy dd,
	.inner.company .privacy dd{
		text-align:left;
	}

	.inner.company hr{
		width:50px;
		height:3px;
		border:none;
		margin:65px auto 80px auto;
		background-color:#5976ba;
	}


	.inner.company #content.faq dt{
		font-weight:bold;
		color:#5976ba;
		margin-bottom:10px;
		font-size:22px;
		line-height:1.4em;
		text-align:left;
	}
	.inner.company #content.faq dd{
		line-height:1.75em;
		margin-bottom:40px;
		text-align:left;
	}

	.inner.company #content.faq dt:before {
		font-size:46px;
		font-weight:bold;
		margin-bottom:20px;
		padding-top:3px;
		content: "Q,";
		display:block;
		text-align:center;
	}

	header.modalSp{display:block;}

	.lesson #modal.parsonal-lesson h2 {
		background: none;
		text-align: center;
		line-height: 1.3em;
		margin-bottom: 30px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
			-ms-flex-align: center;
				align-items: center;
		font-size: 24px;
	  }
	  .lesson #modal.parsonal-lesson h2:after {
		border-top: 3px solid #5e77b5;
		content: "";
		-webkit-box-flex: 1;
			-ms-flex-positive: 1;
				flex-grow: 1;
		margin-left: 1rem;
	  }
	  .lesson #modal.parsonal-lesson h2:before {
		margin-right: 1rem;
		border-top: 3px solid #5e77b5;
		content: "";
		-webkit-box-flex: 1;
			-ms-flex-positive: 1;
				flex-grow: 1;
	  }



}