@charset 'utf-8';

/*
----------------------------------------
1200
----------------------------------------
*/

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

	#wrapper > header h1 {
		margin-bottom: 15px;
	}

	#wrapper > header h1 img {
		width: 400px;
	}

	#wrapper > header .head-wrap {
		padding: 60px 300px 20px;
		font-size: 1.3rem;
	}

	#wrapper > header .desc br {
		display: block;
	}

	#wrapper > header .tel-wrap {
		width: 260px;
	}

	#wrapper > header .tel .num {
		font-size: 2.6rem;
		 background: url( ../../assets/img/common/icon-tel.png ) left center / 18px no-repeat;
		 padding: 0 0 0 35px;
	}

	#wrapper > header .btn a {
		background: #fff url( ../../assets/img/common/icon-mail.png ) 10px center / 24px no-repeat;
		padding: 15px 15px 15px 40px;
	}

	footer .footer-nav li:nth-child(8) a {
		width: auto;
	}

	.contact-bnr h2 {
		width: 100%;
		margin-bottom: 20px;
	}

	.contact-bnr h2 br {
		display: none;
	}

	.contact-bnr .tel,
	.contact-bnr .btn {
		width: 50%;
	}

	#facilities .facility-list > div {
		width: calc( ( 100% - 20px ) / 2 );
		padding: 0 20px;
	}

	#facilities .facility-list > div:nth-child(odd) {
		margin-right: 20px;
	}

	#flow .step-list .step:first-child .num::after,
	#flow .step-list .step:nth-child(2) .num::after {
		height: 220px;
	}

	#flow .price-box .price > p {
		width: calc( ( 100% - 20px ) / 2 );
	}

	footer .address .txt br.pc-none {
		display: inline;
	}

}


/*
----------------------------------------
1000
----------------------------------------
*/

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

	#wrapper > header {
		padding-bottom: 86px;
	}

	#wrapper > header .head-wrap {
		padding: 60px 300px 20px 20px;
	}

	#wrapper > header .head-wrap .ttl {
		text-align: left;
	}

	#wrapper > header h1 img {
		width: 360px;
	}

	#g-nav a {
		font-size: 1.5rem;
		padding: 10px 5px;
		white-space: nowrap;
	}

	.footer-btn a {
		font-size: 1.4rem;
		padding: 15px 10px;
	}

	footer .address .logo {
		margin-bottom: 10px;
	}

	footer .address .txt br.pc-none {
		display: none;
	}

	.price-btn h2 {
		font-size: 2rem;
		width: calc( ( 100% - 100px ) / 2 );
	}

	.price-btn .read {
		width: calc( ( 100% - 100px ) / 2 );
	}

	.price-btn .btn {
		width: 100px;
		padding: 0 20px;
	}

	.contact-bnr h2 {
		font-size: 2rem;
	}

	.contact-bnr .tel a {
		font-size: 3rem;
	}

	.heading-01.l-size span {
		font-size: 2.4rem;
		padding: 0 50px 24px;
	}

	#curriculum .heading-02 {
		padding: 20px;
		line-height: 1.4;
	}

	#curriculum .heading-02 span {
		display: block;
		font-size: 2rem;
	}

	#facilities .facility-list > div {
		padding: 0 10px;
	}

	#flow .step-list .contact-bnr .tel a {
		font-size: 2.4rem;
	}

	.contact-bnr .tel a::before {
		width: 20px;
		height: 40px;
	}

	#flow .step-list .contact-bnr .btn a {
		font-size: 1.4rem;
	}

	.contact-bnr .btn a::before {
		width: 36px;
		height: 24px;
	}

	#flow .price-box .price > p {
		font-size: 3rem;
	}

	#main-contents {
		width: 100%;
	}

	#sidebar {
		width: 100%;
		padding: 0;
		margin-top: 40px;
	}

	#sidebar .side-wrap {
		position: static;
	}

	#school .info > .txt {
		padding-right: 20px;
	}

	#school .info-box {
		font-size: 1.6rem;
	}

	#school .info-list dt {
		width: 10rem;
	}

	#school .info-list dd {
		width: calc( 100% - 10rem );
	}

}


/*
----------------------------------------
750
----------------------------------------
*/

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

	html[lang=ja] #wpadminbar {
		display: none;
	}

	body {
		font-size: 1.4rem;
	}

	.heading-01 {
		margin-bottom: 20px;
	}

	.heading-01 span {
		padding: 0 8px 18px;
		font-size: 2rem;
	}

	.heading-02 {
		font-size: 2.2rem;
		margin: 20px 0;
	}

	.heading-03 {
		font-size: 2rem;
		padding-left: 15px;
		margin-bottom: 15px;
	}

	.pc-none {
		display: block;
	}

	.sp-none {
		display: none;
	}

	#wrapper > header {
		padding: 0;
	}

	#wrapper > header .head-wrap {
		padding: 30px 20px 10px;
		font-size: 1.2rem;
	}

	#wrapper > header .head-wrap .ttl {
		text-align: center;
		font-size: 1.1rem;
	}

	#wrapper > header h1 {
		margin-bottom: 10px;
	}

	#wrapper > header h1 img {
		width: 220px;
		margin-left: 20px;
	}

	#wrapper > header .tel-wrap {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		width: auto;
		border-radius: 0;
		padding: 10px;
		z-index: 999999;
	}

	#wrapper > header .tel-wrap .txt {
		display:  none;
	}

	#wrapper > header .tel-wrap .link {
		-js-display: flex;
		display: -ms-flex;
		display: -webkit-flex;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	#wrapper > header .tel-wrap .link > p {
		width: calc( ( 100% - 10px ) / 2 );
	}

	#wrapper > header .tel a {
		margin: 0;
	}

	#wrapper > header .tel .num {
		font-size: 1.8rem;
		padding: 3px 0 3px 30px;
	}

	#wrapper > header .tel .note {
		font-size: 1.2rem;
	}

	#wrapper > header .btn a {
		background: #fff url( ../../assets/img/common/icon-mail.png ) 10px center / 25px no-repeat;
		padding: 5px 10px 5px 40px;
		margin: 0;
		font-size: 1.2rem;
	}

	#g-nav {
		display: none;
		z-index: 99999;
	}

	header.active #g-nav {
		display: block;
	}

	#g-nav .flex {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		padding-bottom: 71px;
		flex-direction: column;
		align-items: center;
		border: none;
		background: #fff;
	}

	#g-nav li {
		width: 100% !important;
		border: none;
		border-bottom: dashed 1px #898989;
	}

	#g-nav li:first-child {
		 border-top: dashed 1px #898989;
		 border-bottom: dashed 1px #898989;
	}

	#g-nav a {
		font-size: 2rem;
		padding: 15px;
	}

	#g-nav a::after {
		display: none;
	}

	#sp-btn {
		display: block;
		z-index: 999999;
	}

	#contents {
		padding: 20px 0;
	}

	#home .main-img img {
		width: 100%;
		height: 200px;
		object-fit: cover;
	}

	#home .news-list {
		flex-direction: column;
		margin-bottom: 0;
	}

	#home .news {
		width: 100%;
		margin: 0 0 30px;
	}

	#home .news h3 {
		font-size: 1.8rem;
		margin: 2px 0 4px;
	}

	#home .news figure {
		width: 280px;
		max-width: 100%;
		margin: 0 auto 10px;
	}

	#home .insta-link {
		margin-bottom: 50px;
	}

	#home .insta-link a {
		width: 100%;
		padding: 10px;
		font-size: 1.6rem;
	}

	#home .about-box strong {
		font-size: 1.6rem;
		text-align: left;
		margin-bottom: 20px;
	}

	#home .about-box .cont {
		margin-bottom: 30px;
	}

	.btn-set .flex {
		margin: -5px 0 5px;
	}

	.btn-set .flex li {
		margin: 0 10px;
	}

	.btn-set .flex a {
		width: 140px;
		height: 130px;
		text-align: center;
		line-height: 1.5;
	}

	.btn-set .flex a span {
		font-size: 1.8rem;
	}

	.footer-btn {
		padding: 20px 0 10px;
	}

	.footer-btn li {
		width: calc( ( 100% - 10px ) / 2 );
		margin-bottom: 10px;
	}

	footer {
		padding: 20px 0;
		background: url( ../../assets/img/common/bg-02.png ) center bottom / 200px repeat-x;
	}

	footer .footer-nav {
		margin-bottom: 30px;
	}

	footer .footer-nav li {
		width: 50%;
		text-align: left;
	}

	footer .footer-nav li:last-child {
		width: 100%;
	}

	footer .footer-nav a {
		margin-right: 10px;
		padding: 5px 0 5px 30px;
		background: url( ../../assets/img/common/arrow-01.png ) left center / 18px no-repeat;
	}

	footer .address .flex {
		flex-direction: column;
		justify-content: center;
		text-align: center;
	}

	footer .address .school {
		width: 100%;
		margin-bottom: 20px;
	}

	.copyright {
		padding: 20px 20px 90px;
		font-size: 1.1rem;
	}

	#page-top {
		display: none !important;
	}

	.heading-01.l-size span {
		display: block;
		padding: 5px 50px 35px;
		font-size: 1.8rem;
		line-height: 1.4;
		background: url( ../img/common/ttl-bg-01.png ) center center / 100% 100% no-repeat;
	}

	#curriculum .heading-02 {
		padding: 10px;
		margin-top: 30px;
	}

	#curriculum .course-01 .heading-02,
	#curriculum .course-02 .heading-02 {
		padding: 15px 10px 10px;
	}

	#curriculum .heading-02 span {
		font-size: 1.6rem;
	}

	#curriculum .info figure {
		width: 100%;
		padding: 0 !important;
		text-align: center;
		margin-bottom: 15px;

	}

	#curriculum .info figure img {
		width: 240px;
	}

	#curriculum .info .txt {
		width: 100%;
	}

	#curriculum h5 {
		margin: 20px 0 10px;
	}

	#curriculum .course-01 {
		margin-bottom: 40px;
	}

	#curriculum .course-02 .flow {
		margin: 0;
	}

	#curriculum .course-02 .flow > div {
		width: 100%;
		padding: 0 !important;
		border: none !important;
		margin-top: 20px;
	}

	#curriculum .course-02 .flow > div h5 {
		margin: 0 0 10px;
	}

	.price-pdf {
		margin: 20px 0;
	}

	.price-btn {
		padding: 10px 20px 15px;
	}

	.price-btn h2 {
		width: 100%;
		font-size: 1.8rem;
		margin-bottom: 5px;
	}

	.price-btn .read {
		width: calc( 100% - 100px );
		border: none;
		padding: 0;
	}

	.pdf-btn {
		padding: 15px;
		margin-top: 20px;
	}

	.pdf-btn .txt {
		width: calc( 100% - 60px );
		font-size: 1.6rem;
		margin-right: 0;
		padding-right: 15px;

	}

	.pdf-btn .icon {
		width: 60px
	}

	.pdf-btn .icon img {
		width: 100%;
	}

	.contact-bnr h2 {
		font-size: 1.8rem;
		margin-bottom: 0;
	}

	.contact-bnr {
		padding: 15px 20px;
		margin-bottom: 40px;
	}

	.contact-bnr h2 br {
		display: block;
	}

	.contact-bnr .tel,
	.contact-bnr .btn {
		width: 100%;
		margin-top: 10px;
	}

	.contact-bnr .tel a {
		font-size: 2.8rem;
	}

	.contact-bnr .btn a::before {
		width: 32px;
		height: 22px;
	}

	#facilities .facility-list > div {
		width: 100%;
		padding: 0;
		margin-right: 0 !important;
	}

	#facilities .facility-list .ttl {
		font-size: 1.8rem;
		margin-bottom: 15px;
	}

	#facilities .facility-list > div {
		margin-bottom: 20px;
	}

	#flow .step-list .step {
		position: relative;
		padding-bottom: 45px;
		margin-bottom: 5px;
		background: url( ../../assets/img/common/arrow-02.png ) center bottom / 18px no-repeat;
	}

	#flow .step-list .step:last-child {
		padding-bottom: 0;
		margin-bottom: 15px;
		background: none;
	}

	#flow .step-list .num {
		position: absolute;
		left: 0;
		top: 0;
		width: 60px;
		height: 60px;
		padding: 0;
	}

	#flow .step-list .txt {
		width: 100%;
	}

	#flow .step-list .txt h4 {
		font-size: 2rem;
		line-height: 1.4;
		padding: 16px 0 16px 75px;
		margin: 0 0 10px;
	}

	#flow .step-list .txt > p {
		min-height: auto;
	}

	#flow .step-list .num::after {
		display: none;
	}

	#flow .step-list .contact-bnr {
		margin: 15px 0 0;
	}

	#flow .price-box {
		margin-bottom: 30px;
	}

	#flow .price-box .price {
		margin: 0 0 15px;
	}

	#flow .price-box .price > p {
		width: 100%;
		margin-top: 15px;
		font-size: 2.4rem;
		border-radius: 15px;
	}

	#flow .price-box .note {
		font-size: 1.2rem;
	}

	#main-contents .photo {
		width: 100%;
	}

	#main-contents .photo a {
		width: 280px;
		max-width: 100%;
		margin: 0 auto 10px;
	}

	.post-list .post {
		margin-bottom: 30px;
	}

	.post-list .post > figure + .txt {
		width: 100%;
		padding: 0;
	}

	#main-contents .post-list .post h2 {
		margin: 2px 0 4px;
	}

	#main-contents .post-list .post h2 a {
		font-size: 1.8rem;
		line-height: 1.5;
	}

	.post-list .more {
		text-align: center;
		margin-top: 15px;
	}

	#sidebar {
		margin-top: 30px;
	}

	#sidebar h2 {
		font-size: 1.8rem;
	}

	#sidebar ul {
		margin-bottom: 20px;
	}

	#sidebar li {
		padding-left: 2rem;
	}

	#main-contents .post-header {
		padding-bottom: 15px;
		margin-bottom: 20px;
	}

	#main-contents .post-header h1 {
		font-size: 2rem;
		margin-top: 10px;
	}

	.post-contents p {
		margin-bottom: 15px;
	}

	.post-contents ul,
	.post-contents ol {
		margin-bottom: 20px;
	}

	.post-contents h2,
	.post-contents h3,
	.post-contents h4 {
		font-size: 1.8rem;
		margin-bottom: 10px;
	}

	.post-nav {
		margin-top: 20px;
		padding-top: 20px;
	}

	.post-nav .prev,
	.post-nav .next {
		width: 25%;
	}

	.post-nav .back {
		width: 50%;
	}

	#school .info {
		flex-direction: column-reverse;
		margin-bottom: 20px;
	}

	#school .info > figure {
		width: 100%;
		margin-bottom: 15px;
	}

	#school .info > .txt {
		width: 100%;
		padding: 0;
	}

	#school .info .logo {
		text-align: center;
		margin-bottom: 15px;
	}

	#school .info .logo img {
		width: 240px;
	}

	#school .info-list dt {
		width: 100%;
		text-align-last: left;
	}

	#school .info-list dd {
		width: 100%;
		padding: 0;
		margin-bottom: 15px;
	}

	#school .info-02 {
		margin-top: 40px;
	}

	#faq .faq-list {
		margin: 20px 0;
	}

	#faq .faq-list dt {
		font-size: 1.8rem;
		line-height: 1.5;
		padding: 5px 0 5px 4.5rem;
		margin-bottom: 15px;
	}

	#faq .faq-list dd {
		padding-left: 4.5rem;
		margin-bottom: 20px;
	}

	#faq .faq-list dt::before,
	#faq .faq-list dd::before {
		width: 3rem;
		height: 3rem;
		line-height: 3rem;
		font-size: 1.6rem;
	}

	#faq .faq-list dd::before {
		top: -3px;
	}

	#faq .taiken-box {
		margin: 40px 0;
	}

	#faq .taiken-box .flex figure {
		width: 100%;
		text-align: center;
		margin-bottom: 10px;
	}

	#faq .taiken-box .flex figure img {
		width: 240px;
		max-width: 100%;
	}

	#faq .taiken-box .flex .txt {
		width: 100%;
		padding: 0;
	}

	#trial .info-box .read {
		margin-bottom: 40px;
	}

	#contact .info {
		margin-bottom: 20px;
	}

	#contact .form-box th {
		width: 100%;
		padding: 20px 0 10px 20px;
	}

	#contact .form-box td {
		width: 100%;
		padding: 0 0 20px;
	}

	#contact .form-box .name.flex > p {
		width: 100%;
		margin-top: 10px;
	}

	#contact .form-box .name.flex > p:first-child {
		margin-top: 0;
	}

	#contact .form-box td .name.flex input {
		width: calc( 100% - 5rem );
	}

	input[type=email],
	input[type=tel], input.l {
		width: 100%;
	}

	#contact .form-box td #zip {
		margin: 0 0 10px 15px;
	}

	#contact .form-box td .note {
		font-size: 1.3rem;
	}

	#contact .form-box .submit {
		margin: 20px 0 0;
	}

	#contact .form-box .submit .submit-btn {
		display: block;
		width: 100%;
		padding: 15px;
		font-size: 2rem;
	}

	#contact .form-box td.pp .check,
	#contact .form-box td.pp .btn {
		margin-bottom: 10px;
	}

	#contact div.wpcf7-response-output {
		margin: 0;
	}

	#privacy-policy .pp-list dd {
		font-size: 1.3rem;
		margin-bottom: 20px;
	}

}


/*
----------------------------------------
320
----------------------------------------
*/

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

	#wrapper > header h1 img {
		width: 160px;
		margin-top: 5px;
	}

	#wrapper > header .desc br {
		display: none;
	}

	#wrapper > header .tel .num {
		font-size: 1.6rem;
	}

	#g-nav a {
		padding: 10px;
	}

	footer {
		font-size: 1.2rem;
	}

	footer .address .logo img {
		width: 160px;
	}

	.heading-01 span {
		font-size: 1.8rem;
	}

	.heading-02 {
		font-size: 1.8rem;
	}

	.heading-03 {
		font-size: 1.8rem;
	}

	#curriculum .heading-02 span {
		font-size: 1.4rem;
	}

	#curriculum h5 span {
		font-size: 1.6rem;
	}

	.price-btn h2 {
		font-size: 1.6rem;
	}

	.price-btn .read {
		width: calc( 100% - 60px );
	}

	.price-btn .btn {
		width: 60px;
		padding: 0 0 0 10px;
	}

	.contact-bnr h2 {
		font-size: 1.6rem;
	}

	.contact-bnr .tel a {
		font-size: 2.2rem;
	}

	.contact-bnr .btn a {
		font-size: 1.3rem;
	}

	.btn-set .flex li {
		margin: 0 5px;
	}

	.btn-set .flex a {
		width: 120px;
		height: 120px;
	}

	#facilities .facility-list .ttl {
		font-size: 1.6rem;
	}

	.post-nav .back a {
		padding: 10px;
	}

}