@charset "utf-8";
/* CSS Document */

body,td,th {
	/* 字型 */
	font-family: 'Noto Sans TC', sans-serif;
}
a:link {
	color: #000;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #000;
}
a:hover {
	text-decoration: none;
	color: #000;
}
a:active {
	text-decoration: none;
	color: #000;
}

/* --------------------------- */
/* GOTOP */
/* --------------------------- */
#gotop {
	position: fixed;
	border-radius: 10px;
	width: 50px;
	height: 50px;
	right: 30px;
	bottom: 30px;
	color: #fff;
	font-size: 20px;
	background: rgba(0, 0, 0, 0.5);
	cursor: pointer;
	z-index: 9999;
	text-align: center;
	padding-top: 8px;
	display: none;
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
}
#gotop:hover {
	background: rgba(0, 0, 0, 0.7);
}
/* --------------------------- */
/* GOTOP */
/* --------------------------- */

/* --------------------------- */
/* NAVBAR */
/* --------------------------- */
.navbar {
	box-shadow:0px 3px 3px rgba(0,0,0,0.3);
}
.navbar.main-navbar .nav-link {
	color: #000;
	padding: 0 20px;
	font-size: 18px;
	letter-spacing: 1px;
	position: relative;
	transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	-ms-transition: all .5s;
}
.navbar.main-navbar .nav-link:after {
	content: ' ';
	position: absolute;
	bottom: -19px;
	left: 50%;
	transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	height: 5px;
	width: 0;
	background-color: #dd2629;
	transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	-ms-transition: all .5s;
}
.navbar.main-navbar .nav-link:hover {
	color: #dd2629;
}
.navbar.main-navbar .nav-link:hover:after {
	width: 30px;
}
.navbar.main-navbar .nav-item.active .nav-link {
	color: #dd2629;
}
.navbar.main-navbar .nav-item.active .nav-link:after {
	width: 30px;
}
@media screen and (max-width: 990px) {
.navbar.main-navbar .navbar-collapse {
	margin-top: 20px;
	margin-bottom: 20px;
}
.navbar.main-navbar .navbar-nav .nav-item a {
	display: inline-block;
	padding: 10px 0;
}
.navbar.main-navbar .navbar-nav .nav-item a:after {
	display: none;
}
}
/* --------------------------- */
/* NAVBAR */
/* --------------------------- */

/* --------------------------- */
/* BANNER */
/* --------------------------- */
.banner-bg {
	background-size: 100%;
	background-attachment: fixed;
	background-position: top;
	padding-top: 65px;
	z-index: -99;
}
@media (min-width:768px) {
.banner-bg {
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
}
}
.banner-bg img {
    width: 100%
}
/* --------------------------- */
/* BANNER */
/* --------------------------- */

/* --------------------------- */
/* FOREWORD */
/* --------------------------- */
.foreword-bg {
	background-image: url(../img/foreword-bg.jpg);
	background-size: cover;
	background-position: center;
	padding: 80px 0;
	overflow: hidden;
}
.foreword-title {
	font-size: 40px;
	font-weight: 600;
	line-height: 45px;
	text-shadow: 3px 3px 3px rgba(0,0,0,.5);
}
.foreword-line {
	width: 50px;
	height: 5px;
	margin: 20px auto 30px;
	box-shadow: 3px 3px 3px rgba(0,0,0,.5);
}
.foreword-description {
	width: 90%;
	font-size: 18px;
	margin: 0 auto;
	text-shadow: 3px 3px 3px rgba(0,0,0,.5);
}
@media (min-width:768px) {
.foreword-line {
	margin: 20px auto 30px;
}
.foreword-description {
	width: 60%;
}
}
/* --------------------------- */
/* FOREWORD */
/* --------------------------- */

/* --------------------------- */
/* QUESTION */
/* --------------------------- */
.question-bg {
	background-image: url(../img/question-bg.jpg);
	background-repeat: repeat;
	background-attachment: fixed;
	padding: 0;
}
@media (min-width:768px) {
.question-bg {
	padding: 100px 0;
}
}
.q1,
.q2 {
	padding: 50px;
}
.q1 {
	background-color: #fff;	
}
.q2 {
	background-color: #f5f5f5;
}
.question-title {
	font-size: 26px;
	font-weight: 600;
}
.question-line {
	width: 30px;
	height: 4px;
	margin: 20px 0;
}
@media (min-width:768px) {
.question-title {
	font-size: 26px;
	font-weight: 600;
	text-align: left;
}
.question-line {
	width: 30px;
	height: 4px;
	margin: 20px 0;
}
}
.question-description {
	font-size: 18px;
	line-height: 30px;
}
.question-link {
	color: #dd2629;
	cursor: pointer;
}
/* --------------------------- */
/* QUESTION */
/* --------------------------- */

/* --------------------------- */
/* SCHOOLS */
/* --------------------------- */
.schools-bg {
	padding: 100px 0;
}
.schools-title {
	font-size: 40px;
	font-weight: 600;
	line-height: 45px;
}
.schools-line {
	width: 50px;
	height: 5px;
	margin: 20px auto 30px;
}
@media (min-width:768px) {
.schools-line {
	margin: 20px auto 30px;
}
}
.schools-list {
	margin-top: 50px;
}
.nav-pills .nav-link.active, .show>.nav-pills .nav-link {
	font-size: 18px;
	font-weight: 500;
	color: #fff;
	background-color: #dd2629;
	width: 200px;
	margin: 5px auto;
}
.nav-pills .nav-link {
	font-size: 18px;
	font-weight: 500;
	color: #dd2629;
	border: 2px solid #dd2629;
	width: 200px;
	margin: 5px auto;
}
.field-title {
	margin: 50px 0;	
}
.field-title img {
	width: 90%;
}
@media (min-width:768px) {
.field-title {
	margin: 80px 0 50px;	
}
.field-title img {
	width: 40%;
}
}
.school-block {
	margin-bottom: 0;
}
@media (min-width:768px) {
.school-block {
	margin-bottom: 80px;
}
}
.school-photo {
	height: 250px;
	background-size: cover;
	background-position: center;
}
@media (min-width:768px) {
.school-photo {
	height: auto;
}
}
.photo1-1 {
	background-image: url(../img/tsuji.jpg);
}
.photo1-2 {
	background-image: url(../img/seishin.jpg);
}
.photo1-3 {
	background-image: url(../img/sushi.jpg);
}
.photo2-1 {
	background-image: url(../img/jhs.jpg);
}
.photo2-2 {
	background-image: url(../img/cbc.jpg);
}
.photo2-3 {
	background-image: url(../img/ecc.jpg);
}
.photo3-1 {
	background-image: url(../img/oaed.jpg);
}
.photo3-2 {
	background-image: url(../img/denshi.jpg);
}
.photo3-3 {
	background-image: url(../img/computer.jpg);
}
.photo3-4 {
	background-image: url(../img/ydc.jpg);
}
.photo3-5 {
	background-image: url(../img/kansai.jpg);
}
.photo3-6 {
	background-image: url(../img/kic.jpg);
}
.photo3-7 {
	background-image: url(../img/ehle.jpg);
}
.photo3-8 {
	background-image: url(../img/artist.jpg);
}
.photo3-9 {
	background-image: url(../img/esp.jpg);
}
.photo3-10 {
	background-image: url(../img/mi.jpg);
}
.photo4-1 {
	background-image: url(../img/hiko.jpg);
}
.photo4-2 {
	background-image: url(../img/tcds.jpg);
}
.photo5-1 {
	background-image: url(../img/obm.jpg);
}
.school-box {
	padding: 50px 30px;
	background-color: #f3f3f3;
	position: relative;
}
@media (min-width:768px) {
.school-box {
	padding: 50px;
}
}
.box-title {
	font-size: 26px;
	font-weight: 600;
}
.box-description {
	font-size: 18px;
	line-height: 30px;
	margin: 15px 0 40px;
}
.info-box {
	background-color: #e7e7e7;
	padding: 20px 40px;
	font-size: 16px;
	line-height: 30px;
}
@media (min-width:768px) {
.info-box {
	font-size: 22px;
}
}
.tags {
	position: absolute;
	left: 30px;
	top: -10px;
	padding: 5px 15px;
	font-size: 18px;
	color: #fff;
}
.tags2 {
	position: absolute;
	left: 100px;
	top: -10px;
	padding: 5px 15px;
	font-size: 18px;
	color: #fff;
}
.tags3 {
	position: absolute;
	left: 170px;
	top: -10px;
	padding: 5px 15px;
	font-size: 18px;
	color: #fff;
}
@media (min-width:768px) {
.tags {
	left: 50px;
}
.tags2 {
	left: 125px;
}
.tags3 {
	left: 200px;
}
}
.osaka {
	background-color: #ff9c00;
}
.tokyo {
	background-color: #008aff;
}
.kobe {
	background-color: #67d226;
}
.yokohama {
	background-color: #9f56eb;
}
.fukuoka {
	background-color: #c36a14;
}
.link-btn {
	color: #dd2629;
	border: 2px #dd2629 solid;
	padding: 5px 0;
	width: 120px;
	text-align: center;
	font-size: 18px;
	margin: 30px auto 0;
    -webkit-transition: all 0.1s ease-in;
    -moz-transition: all 0.1s linear;
}
.link-btn:hover {
	background-color: #dd2629;
	color: #fff;
}
.btn1-frame,
.btn2-frame,
.btn3-frame {
	padding: 10px 30px;
}
.btn1-frame {
	margin-top: 50px;
}
@media (min-width:768px) {
.btn1-frame {
	margin-top: 0;
}
}
.btn1,
.btn2,
.btn3 {
	color: #dd2629;
	border: 2px #dd2629 solid;
	font-size: 20px;
	padding: 10px;
    -webkit-transition: all 0.1s ease-in;
    -moz-transition: all 0.1s linear;
}
.btn1:hover,
.btn2:hover,
.btn3:hover {
	background-color: #dd2629;
	color: #fff;
}
.other-school-list {
	margin: 20px 0 50px;
}
.other-school {
	background-color: #f3f3f3;
	font-size: 20px;
	margin: 0 auto 10px;
	padding: 30px;
	cursor: pointer;
    -webkit-transition: all 0.1s ease-in;
    -moz-transition: all 0.1s linear;
}
.other-school:hover {
	background-color: #dd2629;
	color: #fff;
}
/* --------------------------- */
/* SCHOOLS */
/* --------------------------- */

/* --------------------------- */
/* FOOTER */
/* --------------------------- */
.footer-bg {
	background-image: url(../img/footer-bg.jpg);
	background-size: cover;
	background-position: center;
	padding: 50px 0;
}
/* --------------------------- */
/* FOOTER */
/* --------------------------- */

.note {
	font-size: 16px;
}

/* --------------------------- */
/* MAIN */
/* --------------------------- */
.main-area {
	padding: 100px 0;
	overflow: hidden;
	background-image: url(../img/question-bg.jpg);
}
@media (max-width:768px) {
.main-area {
	padding-top: 50px;
}
}
.opening {
	font-size: 22px;
	line-height: 35px;
	text-align: center;
}
@media (max-width:768px) {
.opening {
	font-size: 18px;
	line-height: 30px;
}
}
.title-s {
	font-size: 30px;
	font-weight: 600;
	color: #dd2629;
	padding: 3px 0;
	text-align: center;
	margin: 60px auto 0;
}
.title-l {
	font-size: 45px;
	font-weight: 600;
	color: #dd2629;
	padding: 8px 0;
	text-align: center;
	margin: -12px auto 0;
}
.title-2 {
	font-size: 40px;
	font-weight: 600;
	background-color: #dd2629;
	color: white;
	width: 800px;
	padding: 8px 0;
	text-align: center;
	margin: 5px auto 0;
}
@media (max-width:768px) {
.title-s {
	font-size: 20px;
}
.title-l {
	font-size: 24px;
}
.title-2 {
	font-size: 26px;
	width: 95%;
}
}
.description {
	font-size: 18px;
	line-height: 35px;
	margin-top: 20px;
	text-align: center;
}
.support-margin {
	margin-top: 60px;
}
.support-box {
	background-color: white;
	border: 3px #dd2629 dashed;
	padding: 40px 50px;
	text-align: center;
}
@media (max-width:768px) {
.support-box {
	margin-top: 10px;
}
}
.support-t {
	font-size: 25px;
	font-weight: 600;
}
.support-line {
	width: 20px;
	height: 2px;
	background-color: #dd2629;
	margin: 20px auto;
}
.support-w {
	font-size: 18px;
	text-align: justify;
}
.rule-box {
	background-color: white;
	padding: 40px 50px;
}
@media (max-width:768px) {
.rule-box {
	padding: 40px 30px;
}
}
.chapter-t {
	font-size: 22px;
	color: #dd2629;
	border: 2px #dd2629 solid;
	padding: 5px 0;
	text-align: center;
}
@media (max-width:768px) {
.chapter-t {
	font-size: 18px;
}
}
.class-name {
	font-size: 28px;
	font-weight: 600;
	text-align: center;
	margin-top: 30px;
	color: #dd2629;
}
@media (max-width:768px) {
.class-name {
	font-size: 24px;
}
}
.class-description {
	font-size: 20px;
	text-align: center;
	margin-top: 5px;
}
@media (max-width:768px) {
.class-description {
	font-size: 18px;
}
}
.class-feature {
	font-size: 18px;
	margin-top: 40px;
	line-height: 35px;
	text-align: justify;
}
.class-feature2 {
	font-size: 18px;
	margin-top: 25px;
	line-height: 33px;
	text-align: justify;
}
.big-font {
	font-size: 22px;
	font-weight: 600;
}
.school-list {
	font-size: 18px;
	padding: 15px 20px;
    -webkit-transition: all 0.05s linear;
    -moz-transition: all 0.05s linear;
}
.school-list:hover {
	background-color: #eee;
}
/* --------------------------- */
/* MAIN */
/* --------------------------- */


.sidemenu {
	position: fixed;
	z-index: 999;
	top: 20%;
	right: 30px;
}
.sidemenu-btn {
	color: white;
	background-color: #dd2629;
	padding: 20px 15px;
	text-align: center;
	line-height: 25px;
	font-size: 20px;
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
}
.sidemenu-btn:hover {
	background-color: #b61517;
	padding: 20px 20px;
}
.sidemenu-m {
	position: fixed;
	z-index: 999;
	bottom: 30px;
	left: 30px;
	width: 65%;
}
.sidemenu-m-btn {
	color: white;
	background-color: #dd2629;
	padding: 10px 0;
	text-align: center;
	font-size: 20px;
	width: 100%;
}