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

/* ------------------------------
common
------------------------------ */
.area {
	max-width: initial;
}
.sponly {
	display: block;
}
.pconly {
	display: none;
}
h2.small {
	font-size: 15px;
	line-height: 20px;
	height: 20px;
	width: 140px;
}
h2.big {
	font-size: 15px;
	line-height: 40px;
	height: 40px;
	width: 180px;
}
h2.big::before,
h2.big::after {
	height: 4px;
	width: 4px;
	top: 18px;
}
h2.big::before {
	left: -22px;
}
h2.big::after {
	left: 198px;
}
.dot {
	height: 4px;
	width: 4px;
}

/* ------------------------------
container
------------------------------ */
#container {

}

/* ------------------------------
header
------------------------------ */
header {
	background-color: #000;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9999;
}
header .header_inner {
	height: 60px;
	padding: 7px 20px;
}
header .header_inner .logo img  {
	height: auto;
	width: 68px;
}

/* ------------------------------
nav
------------------------------ */
nav {
	background-image: url(../images/bg.png);
	opacity: 0;
	pointer-events: none;
	position: fixed;
	top: 0;
	left: 0;
	max-width: initial;
	height: 100%;
	width: 100%;
	transition: all 0.3s ease;
}
nav .logo {
	display: block;
	padding: 14px 20px;
}
nav ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
nav ul li{
	display: block;
	padding: 1em 0;
	width: 100%;
}
nav ul li a{
	color: #000;
	display: block;
	font-size: 16px;
	padding: 1em;
	text-align: center;
}
nav ul li:nth-of-type(5) a{
	background-color: #000;
	color: #fff;
	margin: 0 auto;
	width: 80%;
}
nav ul li:last-of-type a{
	background-color: #000;
	color: #fff;
	margin: 0 auto;
	width: 80%;
}
nav.active {
	opacity: 1;
	pointer-events: auto;
}

/* ------------------------------
nav for SP
------------------------------ */
#spnav,
#spnav_on {
	width: 60px;
    height: 60px;
    position: fixed;
    top: 0;
    right: 0;
}
#spnav a,#spnav a img,
#spnav_on a,#spnav_on a img {
	display: block;
}
#spnav a img,
#spnav_on a img{
	height: auto;
	width: 100%;
}

/* ------------------------------
main
------------------------------ */
main {
	background-image: url(../images/bg_go_sp.png);
	min-width: 320px;
	padding-bottom: 39px;
}

#main_visual {
	display: flex;
	justify-content: space-between;
}
#main_visual .main_visual_elm {
	height: auto;
}
#main_visual .main_visual_elm:nth-of-type(1),
#main_visual .main_visual_elm:nth-of-type(3) {
	background: none;
}
#main_visual .main_visual_elm:nth-of-type(2) {
	width: 100%;
}
#main_visual .main_visual_elm img.main_visual_go{
	transform: translate(0px,15px);
	margin: 34px auto;
	display: block;
	height: auto;
	width: 250px;
}
#main_visual .main_visual_dotframe {
	position: absolute;
    top: 140px;
    height: 200px;
    width: 220px;
}
#main_visual .main_visual_dot01{left:-2px;top:-2px;}
#main_visual .main_visual_dot02{right:-2px;top:-2px;}
#main_visual .main_visual_dot03{left:-2px;top: calc(50% - 2px);}
#main_visual .main_visual_dot04{right:-2px;top: calc(50% - 2px);}
#main_visual .main_visual_dot05{left:-2px;bottom: -2px;}
#main_visual .main_visual_dot06{right:-2px;bottom: -2px;display:block;}
#main_visual .main_visual_logo_sp {
	background-color: #000;
	padding: 24px 0;
}
#main_visual .main_visual_logo_sp img{
	display: block;
	margin: 0 auto;
	width: 170px;
}
#main_visual .main_visual_logo_sp img:last-of-type{
	margin: 10px auto;
}

#area01 {
	height: 300px;
}
#area01 h2 {
	top: 80px;
}
#area01 img.area01_bg_black{
	display: none;
}
#area01 .area01_bg_right_box {
	background-image: url(../images/bg.png);
	height: 160px;
	width: 300px;
	position: absolute;
	left: 50%;
	transform: translateX(172px);
}
#area01 .area01_bg_right_box01 {
	display: none;
}
#area01 .area01_bg_right_box02 {
	display: none;
}

#area01 .area01_copy {
	background-image: url(../images/bg.png);
    height: 78px;
    width: 298px;
    position: relative;
    padding: 10px;
    margin: 0 auto;
    top: 121px;
    left: 1px;
}
#area01 .area01_copy_en {
	background-image: url(../images/bg.png);
    height: 18px;
    width: 138px;
    position: relative;
    padding: 0 2px;
    margin: 0 auto;
    top: 143px;
    left: 50%;
    transform: translateX(-240px);
}
#area01 .area01_copy_en img{
	width: 135px;
}
#area02 {
	margin-top: auto;
	height: 581px;
}
#area02 .area02_way {
	background-image: url(../images/bg.png);
    font-size: 18px;
    height: 58px;
    width: 218px;
    position: relative;
    padding: 5px;
    margin: 0 auto;
    top: 2px;
    left: auto;
    text-align: center;
}
#area02 .area02_way span {
	display: block;
	font-size: 12px;
}
#area02 .area02_way_dot {left: -3px;top: -3px;}
#area02 .area02_message {
	background-image: url(../images/bg.png);
    font-size: 12px;
    height: 278px;
    width: 298px;
    position: relative;
    padding: 20px 5px;
    margin: 0 auto;
    top: 23px;
    left: 0px;
    letter-spacing: -1px;
    white-space: nowrap;
}
#area02 .area02_bg_black {
	position: relative;
    top: 4px;
    left: 50%;
    width: 925px;
    transform: translateX(150px);
}
#area02 .area02_story {
	background-image: url(../images/bg.png);
    display: block;
    height: 98px;
    width: 218px;
    margin: 0 auto;
    position: relative;
    top: -129px;
    line-height: 222px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
#area02 .area02_story img{
	width: 100px;
}
#area02 .area02_story_dot01 {top:-2px;left:-2px;}
#area02 .area02_story_dot02 {top:-2px;right:-2px;}
#area02 .area02_story_dot03 {bottom:-2px;left:-2px;}
#area02 .area02_story_dot04 {bottom:-2px;right:-2px;}

#target .target_list {
	display: block;
    margin: 20px auto;
    width: 298px;
    position: relative;
    left: 1px;
}
#target .target_list li {
	background-image: url(../images/bg.png);
    display: block;
    font-size: 12px;
    height: 38px;
    line-height: 38px;
    margin: 21px 1px;
    padding: 0 5px;
    position: relative;
}
#target .target_list li:before {
	background-color: #000;
	content: '';
	display: block;
	border-radius: 50%;
	height: 4px;
	width: 4px;
	position: absolute;
	left: -4px;
	top: 18px;
}
#target .target_list li:nth-of-type(1) {width:157px;}
#target .target_list li:nth-of-type(2) {width:197px;}
#target .target_list li:nth-of-type(3) {width:157px;top:2px;}
#target .target_list li:nth-of-type(4) {width:257px;top:2px;}
#target .target_list li:nth-of-type(5) {width:277px;top:2px;}

#movie {
	margin-top: 0;
}
#movie .movie_frame {
    margin: 20px auto 41px auto;
    width: 300px;
    height: 200px;
}

#program {
	margin-top: 0;
	height: 942px;
}
#program h2{
	top: 63px;
}
#program .program_left_box {
	border-left: none;
    position: absolute;
    left: 50%;
    top: 202px;
    transform: translateX(-9px);
}
#program .program_left_box:after {
	content: "";
	display: block;
	background-image: url(../images/bg_go_gray_sp.png);
    background-position: -1px -1px;
    height: 140px;
    width: 20px;
    position: absolute;
    top: 0;
    left: 20px;
}
#program .program_left_box img {
	width: 200px;
}
#program .program_left_box_cover {
	background-image: url(../images/bg_go_gray_sp.png);
    background-position: -1px -1px;
    height: 200px;
    width: 20px;
    position: absolute;
    top: 0;
    left: 0;
}
#program .program_right_box {
	position: absolute;
    left: 50%;
    transform: translateX(-170px);
    top: 322px;
    z-index: 99;
}
#program .program_right_box img {
	width: 160px;
}
#program .program_right_box_cover {
	background-image: url(../images/bg_go_gray_sp.png);
    height: 81px;
    width: 20px;
    top: 159px;
    bottom: 0;
}
#program .program_content {
	margin: 0 auto;
    transform: translateX(0px);
    width: 298px;
    padding-top: 102px;
}
#program .program_title {
    height: 59px;
    width: 298px;
    padding: 8px;
}
#program .program_title img{
	width: 280px;
}
#program .program_message {
    height: 199px;
    width: 99px;
    top: 402px;
    transform: translateX(71px);
    padding: 8px;
}
#program .program_message img{
	width: 85px;
}
#program .program_message_cover01 {
	display: none;
}
#program .program_message_cover02 {
	background-image: url(../images/bg_go_sp.png);
	height: 80px;
	width: 20px;
	bottom: 0;
}
#program .program_black01 {
	margin-top: 401px;
	height: 20px;
    width: 20px;
}
#program .program_black01:before {
    background-color: #000;
	content: '';
    display: block;
    height: 40px;
    width: 60px;
    position: absolute;
    top: 162px;
    left: 0;
}
#program .program_bg_black {
	display: none;
}
#program .program_list {
	margin-left: 20px;
}
#program .program_list li {
    height: 39px;
    padding: 0 3px;
    margin: 1px 0 21px -0;
}
#program .program_list li span {
	font-size: 20px;
	line-height: 40px;
	height: 40px;
	width: 20px;
	left: -20px;
}
#program .program_list_title {
	font-size: 14px;
}
#program .program_list_desc {
	font-size: 10px;
	letter-spacing: 0;
}
#program .program_list li:nth-of-type(1) {width: 259px;}
#program .program_list li:nth-of-type(2) {width: 239px;}
#program .program_list li:nth-of-type(3) {width: 259px;}
#program .program_list li:nth-of-type(4) {width: 279px;}
#program .program_list li:nth-of-type(5) {width: 219px;}

#price {
	margin-top: 1px;
	margin-bottom: 80px;
}
#price .price_box {
	margin-top: 20px;
	width: 298px;
	padding: 20px;
	height: 701px;
}
#price .price_box h3{
	font-size: 20px;
}
#price .price_list tr td {
	padding: 10px 0;
}
#price .price_list tr td:nth-of-type(1){
	font-size: 20px;
}
#price .price_list tr td:nth-of-type(1) div{
	font-size: 10px;
}
#price .price_list tr td:nth-of-type(2){
	display: none;
}
#price .price_list tr td:nth-of-type(3){
	font-size: 30px;
}
#price .price_list tr td:nth-of-type(4){
	font-size: 10px;
	vertical-align: middle;
}
#price .price_dot01{left:-2px;top: -2px;}
#price .price_dot02{right:-2px;top: -2px;}
#price .price_dot03{left:-2px;bottom:-2px;}
#price .price_dot04{right:-2px;bottom:-2px;}

#price .price_remarks {
	font-size: 10px;
	letter-spacing: 0;
	margin-top: 10px;
}
#price .price_campaign {
	height: 40px;
	width: 300px;
	line-height: 40px;
}

#teacher {
	margin: 0 auto;
	position: relative;
}
#teacher .teacher_message {
	background-image: url(../images/bg.png);
    margin: 0 auto;
    height: 99px;
    width: 258px;
    padding: 5px;
    margin-top: 41px;
    margin-bottom: 40px;
    left: 20px;
    text-align: right;
}
#teacher .teacher_message img.sponly{
	display: inline;
	width: 220px;
}
#teacher .teacher_message_cover {
	background-color: #000;
    background-position: -2px top;
    height: 20px;
    width: 100px;
    left: 0;
    bottom: 0;
}
#teacher .teacher_message_cover:before {
	content: "";
	display: block;
	background-color: #000;
    height: 80px;
    width: 200px;
	position: absolute;
    left: -200px;
    bottom: 0;
}
#teacher .teacher01,
#teacher .teacher02 {
	width: 298px;
}
#teacher .teacher01_name,
#teacher .teacher02_name {
	padding: 5px 0 5px 5px;
}
#teacher .teacher_name {
	font-size: 18px;
}
#teacher .kana {
	font-size: 10px;
	letter-spacing: 0;
}
#teacher .teacher_profile {
	font-size: 10px;
    letter-spacing: 0.3px;
	margin-top: 315px;
}
#teacher .teacher01_history_title,
#teacher .teacher02_history_title {
	font-size: 10px;
	padding: 3px;
}
#teacher .teacher01_history_list,
#teacher .teacher02_history_list {
	font-size: 10px;
	padding: 5px;
	letter-spacing: 0;
	flex-flow: column;
}
#teacher .teacher01_history_list div,
#teacher .teacher02_history_list div {
	padding-right: 0;
}

#teacher .teacher01 {
	height: 781px;
}
#teacher .teacher01_bg_black {
	left: 239px;
	top: 40px;
	height: 300px;
	width: 41px;
}
#teacher .teacher01_photo {
	left: -0.5px;
	top: 40px;
	z-index: 99;
}
#teacher .teacher01_photo img{
	border:none;
	width: 240px;
}
#teacher .teacher01_name {
	background-image: url(../images/bg.png);
	position: absolute;
	left: 0;
	top: 1px;
	height: 459px;
	width: 239px;
}
#teacher .teacher01_bg_black2 {
	background-color: #000;
	position: absolute;
	right: 0;
	top: 0;
	height: 20px;
	width: 20px;
}
#teacher .teacher01_bg_white {
    height: 22px;
    width: 19px;
    left: 20px;
    top: 460px;
}
#teacher .teacher01_history_title {
    height: 21px;
    width: 119px;
    left: 0;
    top: 481px;
}
#teacher .teacher01_history_list {
    height: 239px;
    width: 298px;
    left: 0;
    top: 501px;
    padding: 5px;
    border-left: none;
}

#teacher .teacher02 {
	height: 720px;
}
#teacher .teacher02_bg_black {
	left: 239px;
	top: 40px;
	height: 300px;
	width: 41px;
}
#teacher .teacher02_photo {
	right: auto;
	left: -0.5px;
	top: 40px;
	z-index: 99;
}
#teacher .teacher02_photo img{
	width: 240px;
}
#teacher .teacher02_name {
	background-image: url(../images/bg.png);
    position: absolute;
    left: 0;
    top: 0px;
    height: 439px;
    width: 239px;
}
#teacher .teacher02_bg_black2 {
	background-color: #000;
	position: absolute;
	right: 0;
	top: 0;
	height: 20px;
	width: 20px;
}
#teacher .teacher02_bg_white {
	background-image: url(../images/bg.png);
    height: 22px;
    width: 18px;
    position: absolute;
    left: 0;
    top: 439px;
}
#teacher .teacher02_history_title {
    height: 21px;
    width: 119px;
    left: 0;
    top: 460px;
}
#teacher .teacher02_history_list {
	background-image: url(../images/bg.png);
    height: 198px;
    width: 298px;
    position: absolute;
    left: 0;
    top: 481px;
    padding: 5px;
    border-left: none;
}
#teacher .teacher03,
#teacher .teacher04,
#teacher .teacher05,
#teacher .teacher06,
#teacher .teacher07,
#teacher .teacher08,
#teacher .teacher09,
#teacher .teacher10,
#teacher .teacher11,
#teacher .teacher12 {
    height: 39px;
    width: 298px;
    margin: 0 auto;
    padding: 5px;
    margin-bottom: 21px;
    transform: translateX(1px);
}
#teacher .teacher03:after,
#teacher .teacher04:after,
#teacher .teacher05:after,
#teacher .teacher06:after,
#teacher .teacher07:after,
#teacher .teacher08:after,
#teacher .teacher09:after,
#teacher .teacher10:after,
#teacher .teacher11:after,
#teacher .teacher12:after {
	height: 20px;
	width: 20px;
}

#voice {
	margin-top: 80px;
}
#voice .voice_box {
	width: 298px;
	transform: translateX(0);
	margin-top: 21px;
	padding: 20px;
}
#voice .voice_box .voice_who{
	font-size: 12px;
}
#voice .voice_box .voice_text{
	font-size: 10px;
	margin-top: 0.5em;
	height: 80px;
	overflow: hidden;
	transition: all 0.3s ease;
}
#voice .voice_box:nth-of-type(1) .voice_text{margin-bottom: 35px;}
#voice .voice_box:nth-of-type(2) .voice_text{margin-bottom: 35px;}
#voice .voice_box:nth-of-type(3) .voice_text{margin-bottom: 35px;}
#voice .voice_box:nth-of-type(4) .voice_text{margin-bottom: 35px;}
#voice .voice_box:after{
	background-color: #000;
	content: "";
	display: block;
	height: 20px;
	width: 20px;
	position: absolute;
	right: -1px;
	bottom: -1px;
}
#voice .voice_box .read_more,
#voice .voice_box .close{
	font-size: 10px;
	line-height: 40px;
}
#voice .voice_box .close {
	display: none;
}

#voice .voice_box.active .voice_text{
	height: 380px;
}
#voice .voice_box.active .read_more {
	display: none;
}
#voice .voice_box.active .close {
	display: block;
}
#voice .voice_remarks {
	width: 298px;
    line-height: 19px;
    height: 19px;
    transform: translateX(1px);
    margin: 0 auto;
    margin-top: 40px;
    font-size: 10px;
    letter-spacing: 0;
}

#contact {
	margin-top: 81px;
}
#contact .contact_button {
	font-size: 14px;
	height: 60px;
	width: 300px;
	line-height: 60px;
}
#contact .contact_button svg {
	width: 8px;
}
/*
#contact .contact_dot01{left:-3px;top: -3px;}
#contact .contact_dot02{right:-3px;top: -3px;}
#contact .contact_dot03{left:-3px;bottom:-3px;}
#contact .contact_dot04{right:-3px;bottom:-3px;}
*/
#contact .contact_remarks {
	background-image: url(../images/bg.png);
    width: 258px;
    line-height: 1.5;
    height: 39px;
    text-align: center;
    position: relative;
    transform: translateX(1px);
    margin: 0 auto;
    margin-top: 21px;
    font-size: 10px;
    padding: 5px;
}
#contact .banner_area{
	width: 300px;
	height: 120px;
	margin: 40px auto 0;
}
/* ------------------------------
footer
------------------------------ */
footer {
	font-size: 10px;
}
/* ------------------------------
誕生の背景
------------------------------ */
#birth_story .story_frame {
	background-image: url(../images/bg_go_black_sp.png);
}
#birth_story .story_text {
	background-image: url(../images/bg.png);
	font-size: 10px;
	padding: 20px;
	height: auto;
	width: 298px;
}
}
#birth_story #close_modal {
	display: inline-block;
	position: absolute;
	top: 10px;
	right: 10px;
	height: 15px;
	width: 15px;
}

}