@charset "UTF-8";

/* start */

html, 
body, article, section, nav, aside, address, header, footer, h1, h2, h3, h4, h5, h6,
main,  div, dl, dt, dd, ol, ul, li, p, pre, blockquote, figure, figcaption,
a, strong, small, em, cite, b, i, q, dfn, abbr, code, var, samp, kbd, sub, sup, time, mark, span, 
ins, del,
img, iframe, object, audio, video,
table, caption, tbody, tfoot, thead, tr, th, td,
form, fieldset, label, legend,
canvas,
details, menu, summary {
	margin: 0;
	padding: 0;
	border: 0;
}

*, *::before, *::after {
	box-sizing: border-box;
}

table {
	border-collapse: collapse;
}

table, tr, td {
	border-spacing: 0;
}

tr, td, img {
	vertical-align: bottom;
}

ol, ul {
	list-style: none;
}

p {
	margin-block-start: 0;
	margin-block-end: 0;
}

a {
	text-decoration: none;
	color: inherit;
}

a:hover {
	text-decoration: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

input[type="submit"],
input[type="button"],
input[type="reset"] {
	appearance: none;
	border-radius: 0;
}

html {
	font-size: 62.5%; /* 1rem =10px */
}

body {
	font-size: 1.6em; /* default =16px */
}

body {
	font-family: Arial,'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
}

.g-nav li a, .footer-tit, .top-movie-tit {
	font-family: 'Hiragino Mincho ProN','ヒラギノ明朝 ProN W3','ＭＳ Ｐ明朝','MS PMincho',serif;
}

.font-cursive {
	font-family: 'Tangerine', cursive;
}

.font-sans-serif {
	font-family: 'Fjalla One', sans-serif;
}

/* base */

body {
	min-width: 320px;
	line-height: 1.6;
	background-color: #fafafa;
	color: #444;
}

h2 {
	font-size: 2rem;
	font-weight: normal;
}

/* layout */

.btn-head, .g-nav, .top-content-1, .page-content-1, .box-9-thumb {
	/* flex */
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.l-grid, .box-2-btn, .box-2-bnr-block, .box-4, .box-2-item-block, .box-2-item-block-sns, .box-9-gallery, .box-9-thumb,
.box-12-img-box {
	display: grid;
}

.btn-head a, .g-nav li a, .fa-chevron-circle-up, .fa-angle-right, .box-2-bnr,
.box-4-img, .box-2-item-block a, .box-2-item-block-sns a, .footer-tel, .box-9-tel, .box-9-map, .box-9-link,
.map-link, .fa-external-link-alt, .bar-left, .top-content-btn {
	display: block;
}

.btn-head,.g-nav, .l-promotion, .l-top-view, .top-view-item, .l-contents, .top-content-2,
.top-content-3, .top-content-4, .top-content-5, .footer-content, .calender-sub-tit, .l-page-contents {
	max-width: 960px;
}

.l-btn-head, .l-contents-head, .l-contents-w, .l-top-view, .l-footer, .top-content-btn, .m-border-1,
.l-table-lesson, .l-table-price, 
input[type="tel"], input[type="email"] {
	width: 100%;
}

.btn-head, .logo, .l-contents-head, .g-nav, .l-promotion, .l-top-view, .l-contents, .top-content-2, .top-movie-inner,
.top-content-3, .top-content-4, .top-content-5, .footer-content, .calender-sub-tit, .map-wrap-img,
.box-12, .table-box, .top-content-btn, .l-page-contents, .lesson-info, .box-f3, .midashi-1, .top-info,
.pp-wrap, .top-movie {
	margin: 0 auto;
}

.l-contents-head, .l-promotion, .l-top-view, .top-content-btn {
	position: relative;
}

.l-header, .logo img, .top-view-item img, .top-content-1-img img, .page-content-1-img img, .m-border-1 p img,
.map-wrap-img img, .box-6-img img, .box-3-img img, .box-2-img img, .box-2-bnr img,.box-4-img img, .g-main img,
.box-9-thumb li img, .box-9-img img, .l-page-top-view img, .box-12-img img, .sns-icon img {
	width: 100%;
	height: auto;
}

.fa-envelope, .fa-flag, .fa-map-marker-alt, .top-intro-bk,
.l-map, .g-nav-item, .fa-angle-right, .top-content-btn, .top-content-tit, .footer-tel, .copyright,
.box-3-item, .box-2-btn-item, .box-9-map, .box-9-sub-tit, .box-12-sub-tit, .box-12-sub-tit-wide,
.l-table-lesson th, .l-table-lesson td, .price-tit, .l-table-price th, .l-table-price td,
.midashi-1 {
	text-align: center;
}

.fa-external-link-alt, .box-9-map, .box-12-sub-tit, .box-12-sub-tit-wide, .price-tit, .footer-tel,
.avid-info, .lesson-info, .pp-wrap-inner, .top-info,
input[type="text"], input[type="tel"], input[type="email"], textarea {
	border-radius: 4px;
}

.l-header {
	padding-bottom: 16px;
	box-shadow: 0 2px 4px #d6d6d6;
	margin-bottom: 16px;
}

.l-btn-head {
	position: fixed;
	top: 0;
	z-index: 99;
	height: 58px;
	padding-top: 12px;
	padding-bottom: 16px;
	box-shadow: 0 2px 4px #d6d6d6;
	margin-bottom: 16px;
}

.l-top-view {
	overflow: hidden;
	height: 100vh;
	max-height: 600px;
}

.l-footer {
	height: 100vh;
	max-height: 440px;
}

.l-table-lesson, .l-table-price {
	table-layout: fixed;
	border: solid 1px #c6c6c6;
}

/* module */

.logo {
	max-width: 176px;
	padding-top: 16px;
	margin-top: 58px;
}

.top-info {
	width: 100%;
	margin-bottom: 5.6rem;
	border: solid 1px #444;
	padding: 8px;
}

.top-intro-txt {
	position: relative;
	line-height: 1.5;
	margin-bottom: 2rem;
}

.top-intro-txt::after {
	content: '';
	position: absolute;
	bottom: -8px;
	left: 50%;
	transform: translateX(-50%);
	width: 90%;
	max-width: 736px;
	height: 6px;
	background-color: #DBB237;
}

.top-intro-sub-txt {
	font-size: 112%;
}

.top-content-1-img {
	max-width: 528px;
}

.page-content-1-img {
	max-width: 320px;
}

.top-content-1-box {
	max-width: 336px;
}

.top-movie-inner {
	max-width: 320px;
}

.top-movie-tit {
	font-size: 122%;
	line-height: 1.4;
}

h2.top-movie-tit {
	position: relative;
	padding-left: 28px;
}

h2.top-movie-tit::after {
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	width: 24px;
	height: 1px;
	background-color: #453c37;
}

h3.top-movie-tit {
	font-size: 106%;
}

.top-movie-link li {
	line-height: 1.2;
}

.top-movie-wrap {
	position: relative;
	height: 0;
	padding-bottom: 56.25%;
	overflow: hidden;
}

.top-movie-wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.content-box {
	max-width: 480px;
}

.table-box, .lesson-info, .pp-wrap {
	max-width: 720px;
}

.btn-head {
	/* flex */
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
	/* /flex */
}

.btn-head a {
	margin-left: 1.6rem;
}

.fa-envelope {
	width: 280px;
	height: 30px;
	padding: 0.8rem 1.6rem;
	border-radius: 15px;
}

.fa-flag, .fa-map-marker-alt {
	padding: 0.8rem 0;
}

.g-nav-wrap {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.g-nav-wrap ul li + li {
	border-left: solid 1px #fff;
	box-sizing: border-box;
}

.g-nav {
	min-width: 960px;
	height: 5.6rem;
	padding-right: 32px;
	line-height: 1.1;
}

.g-nav-item {
	float: left;
	width: 160px;
	padding-top: 13px;
}

.fa-angle-right {
	position: absolute;
	top: 0;
	right: 0;
	width: 32px;
	height: 5.6rem;
	padding-top: 1.6rem;
}

.fa-chevron-circle-up {
	position: fixed;
	right: 40px;
	bottom: 40px;
	z-index: 99;
	font-size: 4rem;
}

.fa-angle-double-right {
	position: absolute;
	left: 0;
	z-index: 91;
	padding: 1.2rem 0.8rem;
}

.fa-external-link-alt {
	padding: 1.4rem;
	border: solid 2px #444;
}

.bar-tit {
	width: 40px;
	height: 8px;
	margin: 0 auto 5.6rem;
}

.bar-left {
	position: absolute;
	top: 2.6rem;
	width: 48px;
	height: 1px;
}

.top-content-2, .top-content-5 {
	padding-bottom: 5.6rem;
}

.top-view-item {
	position: absolute;
	z-index: 90;
	opacity: 0;
	-webkit-animation: crossFade 8.4s ease 0s infinite;
	animation: crossFade 8.4s ease 0s infinite;
}

.top-view-item:nth-of-type(2) {
	-webkit-animation-delay: 2.8s;
	animation-delay: 2.8s;
}

.top-view-item:nth-of-type(3) {
	-webkit-animation-delay: 5.6s;
	animation-delay: 5.6s;
}

@keyframes crossFade {
	0% {opacity: 0;}
	33% {opacity: 1;}
	66% {opacity: 0; z-index: 9;}	
	100% {opacity: 0;}
}

.top-content-btn {
	max-width: 240px;
	padding: 1.4rem 0;
}

.top-content-1, .page-content-1 {
	/* flex */
	-ms-flex-pack: distribute;
	justify-content: space-around;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	/* /flex */
}

.top-content-tit {
	padding: 4rem 0 2.4rem;
}

.greeting-tit {
	border-bottom: solid 1px #444;
	line-height: 1.8;
}

.footer-content {
	padding-top: 4rem;
}

.footer-tel {
	width: 240px;
	padding: 0.8rem 1.6rem;
}

.map-wrap-img {
	max-width: 512px;
	border: solid 1px #444;
}

.l-table-lesson th, .l-table-lesson td,
.l-table-price th, .l-table-price td {
	padding: 1.2rem 0;
	border: solid 1px #c6c6c6;
	vertical-align: middle;
}

.price-tit {
	padding: 1.2rem 0;
}

.midashi-1 {
	width: 140px;
	padding: 0.4rem 0;
	border-radius: 24px;
}

.avid-info, .lesson-info {
	padding: 1.2rem;
	border: solid 2px #444;
}

.alert {
	padding-left: 1.2rem;
}

#kaiin {
	padding: 8px;
}

.sns-icon {
	width: 32px;
	height: auto;
}

/* grid css */

.box-2, .box-9-thumb, .box-12-img-box {
	grid-template-columns: 1fr 1fr;
}

.box-6, .box-3, .box-2-item-block, .box-9, .box-9-gallery {
	grid-template-columns: 1fr 1fr 1fr;
}

.box-2-item-block-sns {
	grid-template-columns: 48px 48px 48px;
}

.box-4 {
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

.box-6, .box-3, .box-2, .box-4 {
	justify-content: space-between;
}

.box-2 {
	align-content: center;
}

.box-6-img, .box-6-txt, .box-3-item, .box-4-img, .box-4-txt {
	justify-self: center;
}

.box-6-img, .box-3-item, .box-2-img, .box-2-btn, .box-2-btn-item, .box-2-item,
.box-4-img, .box-4-txt {
	align-self: center;
}

.box-4, .box-2-item-block, .box-9 {
	grid-column-gap: 2.4rem;
}

.box-2 {
	grid-column-gap: 3.2rem;
}

.box-2-item-block {
	grid-row-gap: 2.4rem;
}

.box-2-btn, .box-2-bnr-block, .box-9 {
	grid-row-gap: 3.2rem;
}

.box-6 {
	grid-row-gap: 4rem;
}

.box-12-sub-tit {
	max-width: 120px;
}

.box-9-thumb li, .box-9-map, .box-9-sub-tit {
	max-width: 160px;
}

.box-12-sub-tit-wide {
	max-width: 180px;
}

.box-6-img, .box-3-img, .box-4-img {
	max-width: 240px;
}

.box-9-img {
	max-width: 304px;
}

.box-2-img, .box-2-bnr, .box-12-img {
	max-width: 480px;
}

.g-main {
	max-width: 640px;
}

.box-12, .box-f3 {
	max-width: 720px;
}

.g-main {
	grid-column: 1 / span 2;
	grid-row: 1;
}

.box9-main-item {
	grid-column: 1 / span 3;
	grid-row: 1;
}

.box-12-sub-tit, .box-12-sub-tit-wide {
	padding: 0.2rem 0;
}

.box-9-map, .box-9-sub-tit {
	padding: 0.4rem 0;
}

.box-2-btn-item {
	padding: 1.4rem 0;
	border-radius: 4px;
}

.box-6-img {
	padding: 2rem;
}

.box-6-txt {
	width: 90%;
	padding: 20px;
}

.box-4-img {
	padding-bottom: 0.8rem;
}

.box-9-item {
	padding-bottom: 1.2rem;
	border-bottom: solid 4px #c6c6c6;
}

.box-4-img {
	border-bottom: double 8px #453c37;
}

.box-4-img img {
	padding-bottom: 8px;
}

.box-2-item-block a {
	border-bottom: solid 1px #fff;
}

.border-bottom {
	padding-bottom: 4rem;
	border-bottom: solid 1px #444;
}

.txt-right {
	text-align: right;
}

.box-f3 {
	padding: 2.4rem;
}

.f3-txt-line {
	padding: 0.6rem 0.8rem 0.6rem 1.2rem;
}

/* Vertical Margin */

.box-9-sub-tit, .box-9-link, .map-link.a-1, .lesson-table-txt, .top-movie h3 {
	margin-bottom: 0.8rem;
}

.box-12-tit, .box-12-sub-tit, .box-12-sub-tit-wide, .pp-m-bottom, .top-movie-wrap {
	margin-bottom: 1.2rem;
}

.footer-tit, .footer-txt, .box-9 h3, .box-9-tel, .box-12-txt,
.l-table-lesson, .table-sub-tit, .midashi-1, .kaiin-txt, .box-f3-tit, .box-f3-txt li {
	margin-bottom: 1.6rem;
}

.logo, .greeting-tit, .box9-main-item, .box-2, .map-wrap-img, .top-content-1-tit {
	margin-bottom: 2.4rem;
}

.top-intro-bk, .top-content-1-txt, .box-3-item h3, .top-content-1, .top-movie-inner,
.box-3-img, .box-2-item-block, .box-2-item-block-sns, .box-12-item, .price-tit, .l-table-price,
.promotion-txt, .page-intro, .avid-info {
	margin-bottom: 3.2rem;
}

.l-page-top-view, .box-9 {
	margin-bottom: 4rem;
}

.box-6, .box-4, .map-wrap, .table-box, .table-tit-txt, .table-price-bottom {
	margin-bottom: 5.6rem;
}

.border-bottom, .box-f3 {
	margin-bottom: 6.4rem;
}

.m-border-1, .l-page-contents, .calender-sub-tit {
	margin-bottom: 8rem;
}

.l-top-view, .l-contents, .l-contents-w {
	margin-bottom: 12rem;
}

.l-main {
	margin-bottom: 24rem;
}

.box-f3-txt li:last-child {
	margin-bottom: 0;
}

#topPage, #access, #nambaKyoshitsu, #suitaKyoshitsu,
#monday, #saturday, #kojinLesson, #bdWednesday, #bdFriday, #bdSaturday,
#wednesday, #pmThurday, #amThurday {
	margin-top: -88px;
	padding-top: 88px;
}

/* state */

.btn-head a:hover, .g-nav li a:hover, .box-2-bnr:hover, .box-4-img:hover, .box-2-item-block-sns a:hover,
.box-9-thumb li:hover, .box-9-map:hover {
	opacity: 0.8;
}

.fa-angle-double-right:hover, .top-content-btn:hover, .box-2-btn-item:hover, .box-2-item-block a:hover {
	opacity: 0.8;
	color: #fff;
}

.fa-chevron-circle-up:hover, .fa-external-link-alt:hover, .box-4-img:hover {
	opacity: 0.8;
	color: #444;
}

.footer-tel:hover {
	opacity: 0.8;
	color: #b48f65;
}

.box-9-tel:hover, .box-9-link:hover, .map-link:hover {
	opacity: 0.8;
	text-decoration: underline;
}

.box-9-thumb li {
	cursor: pointer;
}

.g-nav li:hover {
	background-color: #c6c6c6;
}

/* theme */

.fa-envelope {
	background-color: #263FAA;
}

.l-contents-head, .box-9-sub-tit, .box-12-sub-tit, .box-12-sub-tit-wide, .midashi-1 {
	background-color: #444;
}

.fa-angle-right {
	background-color: #c6c6c6;
	opacity: 0.8;
}

.bk-beige {
	background-color: #fdf9f2;
}

.box-2-btn-item, .price-tit {
	background-color: #2c3e50;
}

.bar-tit, .top-content-btn {
	background-color: #453c37;
}

.l-header, .l-btn-head, .bar-left, .box-6-txt, .footer-tel, .f3-txt-line {
	background-color: #fff;
}

.l-footer, .box-9-map {
	background-color: #b48f65;
}

.l-table-lesson .th-color-1 {
	background-color: #7caaab;
}

.l-table-lesson .th-color-2 {
	background-color: #9b764b;
}

.l-table-lesson .th-color-3 {
	background-color: #446EA6;
}

.l-table-lesson .th-color-4 {
	background-color: #DBB237;
}

.l-table-lesson .th-color-5 {
	background-color: #B5AD1B;
}

.l-table-lesson .th-color-6 {
	background-color: #DE7F6F;
}

.l-table-price .th-color-1 {
	background-color: #e6e6e6;
}

.th-color-ex {
	background-color: #e7f3f7;
}

.fa-angle-double-right {
	background: #f12711;
	background: -webkit-linear-gradient(to right, #f12711, #f5af19);
	background: linear-gradient(to right, #f12711, #f5af19);
}

.bk-img-1 {
	background-image: url("../img/page_contents/bk/bk-img-1.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}

.bk-img-2 {
	background-image: url("../img/page_contents/bk/bk-img-2.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}

.bk-img-3 {
	background-image: url("../img/page_contents/bk/bk-img-4.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}

.f3-txt-line {
	color: #222;
}

.btn-head a, .fa-chevron-circle-up {
	color: #444;
}

.btn-head a.fa-envelope, .g-nav li a, .fa-angle-double-right, .top-content-btn, .box-2-btn-item, 
.footer-tit, .box-2-item, .copyright, .box-9-map, .box-9-sub-tit, .box-12-sub-tit, .box-12-sub-tit-wide,
.l-table-lesson tr th, .price-tit, .midashi-1 {
	color: #fff;
}

.top-content-tit {
	color: #453c37;
}

.footer-tel {
	color: #b48f65;
}

.txt-color-g {
	color: #da6a39;
}

.txt-color-r {
	color: #EA2528;
}

.txt-color-w {
	color: #666;
}

.alert {
	color: #E0191C;
}

.txt-small, .alert {
	font-size: 1.2rem;
}

.btn-head a, .fa-angle-double-right, .txt-mid, .box-6-txt p, .box-2-item-block a, .box-f3-txt li,
.f3-txt-line {
	font-size: 1.4rem;
}

.greeting-tit {
	font-size: 1.8rem;
}

.font-cursive, .fa-angle-right {
	font-size: 2.4rem;
}

.box-12-img-txt {
	font-size: 4.8rem
}

.w-nomal, .greeting-tit, .l-table-lesson tr th, .price-tit, .l-table-price tr th {
	font-weight: normal;
}

.font-cursive, .g-nav li a, .footer-tit, .txt-bold, .w-bold {
	font-weight: bold;
}

/* form */

.pp-wrap-inner, input[type="text"], textarea {
	border: solid 1px #ccc;
}

#formWrap {
	max-width: 720px;
	margin: 0 auto 8rem;
	padding: 0 1.6rem;
}

table.formTable{
	width: 100%;
	margin: 0 auto 2.4rem;
}

table.formTable td,table.formTable th{
	border: solid 1px #ccc;
	padding: 10px;
}

table.formTable th{
	width: 30%;
	font-weight: normal;
	background: #efefef;
	text-align: left;
	vertical-align: middle;
}

input[type="submit"], input[type="reset"], input[type="button"] {
	border-style: none;
	width: 24%;
	padding: 8px;
	margin-left: 5%;
	margin-right: 5%;
	background-color: #453c37;
	color: #fff;
	cursor: pointer;
}

input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover {
	opacity: 0.8;
}

.pp-wrap {
	width: 80%;
}

.pp-wrap-inner {
	width: 100%;
	height: 12rem;
	overflow: auto;
	padding: 4px 8px;
}

.pp-wrap-inner p {
	line-height: 1.2;
}

input[type="text"] {
	width: 80%;
	height: 3.2rem;
}

textarea {
	width: 100%;
	height: 12rem;
}

form {
	margin-bottom: 4.8rem;
}

input, textarea {
	font-size: 1.6rem;
}

select {
	font-size: 1.4rem;
}

.radio-block {
	display: block;
	font-size: 1.4rem;
}

.radio-block input {
	margin-right: 6px;
	vertical-align: baseline;
}

/*--- UPDATE 23.11 --*/
.top-content-grid-text {padding: 0 2rem 2.3rem; text-align: center;}
.txt-space-s { padding: 0 3.2rem; }
.table-box, .lesson-info { max-width: 880px; }