@charset "utf-8";

body, text {
font-family: 'Noto Sans JP', sans-serif;
word-break: break-all;
-webkit-text-size-adjust: 100%;
color: #7a6a4f;
line-height: 1.6;
letter-spacing: 2px;
font-weight: 500;
margin: 0;}

a {text-decoration: none;}
a {outline: none;}
:focus {outline: none;}
::-moz-focus-inner {border: 0;}
a {color: inherit;}

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;}

a:hover img {opacity: 0.6;}
a img {transition: opacity 0.3s ease-out;}
img {vertical-align: bottom; width: 100%;}

h1, h2, h3 {margin: 0; font-size: 100%;}
ul, li {list-style: none; margin: 0; padding: 0;}

button {display: block;}


/* Header -------------------------------------------------------- */
header {
background-color: #fbf8f3;
height: 100px;
width: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 300;}

.logo {
float: left;
width: 370px;
margin: 12px 0 0 50px;}

.logo img {width: 100%;}

nav ul {
overflow: hidden;
float: right;
width: 490px;
padding: 20px 0;}

nav li {
float: left;
margin: 0 20px;
display: inline-block;
height: 60px;}

nav li img {height: 100%;}

.main-visual-wrap {
position: relative;
z-index: 200;
background-color: #fbf8f3;}

.main-visual {
margin-top: 100px;}

.main-visual img {
width: 100%;}

.tanoshii {
z-index: 199;
width: 30%;
max-width: 480px;
position: absolute;
bottom: -100px;
right: 8%;}

.tanoshii img {width: 100%;}

/* under 1200 -------------------------------------------------------- */
@media screen and (max-width : 1200px) {
header {height: 80px;}
.main-visual {margin-top: 80px;}

.logo {
width: 290px;
margin: 10px 0 0 20px;}

nav ul {
width: 430px;
padding: 15px 0;}

nav li {
margin: 0 20px;
height: 50px;}
}

/* under 800 -------------------------------------------------------- */
@media screen and (max-width : 800px) {
header {height: 75px;}
.main-visual {margin-top: 75px;}

.logo {
float: none;
width: 260px;
margin: 13px auto 0 auto;}

.tanoshii {
width: 45%;
bottom: -30%;
right: 6%;}
}


/* Global Menu Sp -----------------------------------------------------*/
.globalMenuSp {
z-index: 9998;
top: 0;
left: auto;
right: 0;
margin: auto;
position: fixed;
transform: translateX(100%);
transition: all 0.6s;
width: 100%;
background-color: rgba(255, 255, 255, 1);
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;}

.globalMenuSp ul {
margin: 70px auto;
max-width: 310px;
width: 90%;
overflow: hidden;}

.globalMenuSp li {
margin-bottom: 30px;
text-align: center;}

.globalMenuSp li img {
height: 60px;
width: auto;}

.globalMenuSp.active {transform: translateX(0px);}

.navToggle {
display: block;
position: fixed;
cursor: pointer;
z-index: 9999;
background: rgba(255,255,255,0);
text-align: center;
right: 8px;
top: 16px;
width: 44px;
height: 37px;}

.navToggle span {
display: block;
position: absolute;
-webkit-transition: .35s ease-in-out;
-moz-transition: .35s ease-in-out;
transition: .35s ease-in-out;
border-bottom: solid 3px #eab000;
width: 30px;
left: 7px;}

.navToggle span:nth-child(1) {
top: 8px;}

.navToggle span:nth-child(2) {
top: 19px;}

.navToggle span:nth-child(3) {
top: 30px;}

.navToggle span:nth-child(4) {
border: none;
color: #eee;
font-size: 10px;
font-weight: bold;
top: 54px;
letter-spacing: 1px;}

.navToggle.active span:nth-child(1) {
top: 19px;
left: 7px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);}

.navToggle.active span:nth-child(2),
.navToggle.active span:nth-child(3) {
top: 19px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);}

.head_logo_sp img {width: 80%; margin: 0 auto 60px; display: block;}


/* Concept area -------------------------------------------------------- */
.concept {
background-color: #fbf8f3;
padding: 8% 0;}

.concept-in {
margin: 0 auto;
width: 90%;
max-width: 1400px;
overflow: hidden;}

.concept-text {
float: left;
width: 54%;}

.concept-photo {
float: right;
width: 45%;
padding-top: 6%;}

.concept-text img, .concept-photo img {width: 100%;}

.contents-photo {
	width: 100%;
	max-width: 800px;
	margin: 40px auto 0;}

@media screen and (max-width : 800px) {
.contents-photo {
	margin: 20px auto 0;}
}

.sub-contents-photo {
	width: 100%;
	max-width: 800px;
	margin: 40px 0 0;
}

/* under 800 -------------------------------------------------------- */
@media screen and (max-width : 800px) {
.concept {padding: 20% 0 12% 0;}

.concept-text, .concept-photo {
float: none;
width: 100%;
max-width: 500px;
margin: 0 auto;}

.concept-photo {padding-top: 20px;}
}

/* Admission area -------------------------------------------------------- */
.review {
	background-color: #fbf8f3;
}

.box_wrap {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 800px) {
.box_wrap {
    gap: 10px;
    grid-template-columns: repeat(1, 1fr);
}
}

.review_box {
    border: 1px solid #e7e4da;
    padding: 20px;
    border-radius: 8px;
    background-color: #fff;
}

/* Modal Window */
.modalarea {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.modalbg {
    width: 100%;
    height: 100%;
    background-color: rgba(30,30,30,0.9);
}

.modal_wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
    width: 90%;
    max-width: 1000px;
    height: auto;
    max-height: 70%;
    background-color: #fff;
    border-radius: 10px;
    overflow-y: scroll;
}

.modal_contents {
    width: 100%;
    padding: 60px 30px 40px;
}

.open_modal {
    padding: 10px 0;
    max-width: 160px;
    width: 90%;
    background-color: #ffa200;
    border: 3px solid #ffa200;
    color: #fff;
    border-radius: 100px;
    cursor: pointer;
    letter-spacing: 2px;
    margin: 20px auto 0;
    font-weight: bold;
}

.open_modal:hover {
    background-color: #fff;
    color: #ffa200;
}

.closeModal {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #fff;
    background-color: #ffa200;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    text-align: center;
    cursor: pointer;
    font-size: 20px;
    text-indent: 2px;
}

.closeModal2 {
    margin-top: 30px;
    padding: 15px 0 13px;
    background-color: #ffa200;
    border: 1px solid #ffa200;
    color: #fff;
    text-align: center;
    border-radius: 50px;
    cursor: pointer;
    font-size: 15px;
    letter-spacing: 2px;
}

/* under800 ---------------------------------------------------*/
@media screen and (max-width : 800px) {
.modal_contents{
    padding: 60px 15px 30px;
}

.closeModal {
    font-size: 20px;
}
}

/* Admission area -------------------------------------------------------- */
.admission {
background-image: url(image/dotted-bg.png);
background-repeat: repeat;
background-position: center top;
background-size: 700px;}

.namiki-img {
display: block;
width: 60%;
margin: 90px auto 0;}

/* under 1200 -------------------------------------------------------- */
@media screen and (max-width : 1200px) {
.admission {background-size: 500px;}
}

/* under 800 -------------------------------------------------------- */
@media screen and (max-width : 800px) {
.namiki-img {width: 90%; margin: 40px auto 0;}
}


/* Profile area -------------------------------------------------------- */
.profile-in {overflow: hidden;}

.profile-text {
float: left;
width: 68%;
padding: 60px 0 50px 90px;
line-height: 40px;
background-image: url(image/profile-text-bg.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 100%;}

.profile-photo {
float: right;
width: 31%;
padding: 35px;}

.profile-photo img {width: 100%;}

/* under 1200 -------------------------------------------------------- */
@media screen and (max-width : 1200px) {
.profile-text {
width: 77%;
padding: 35px 0 20px 70px;
line-height: 35x;
font-size: 14px;}

.profile-photo {
width: 23%;
padding: 50px 15px 15px;}
}

/* under 800 -------------------------------------------------------- */
@media screen and (max-width : 800px) {
.profile-text {
float: none;
width: 100%;
padding: 60px 0 50px 90px;}

.profile-photo {
float: none;
width: 100%;
max-width: 300px;
margin: 0 auto;
padding: 35px;}
}

/* under 650 -------------------------------------------------------- */
@media screen and (max-width : 650px) {
.profile-text {
background-image: url(image/profile-text-bg-sp.png);
width: 300px;
padding: 20px 40px 20px 45px;
margin: 0 auto;
line-height: 38px;}

.profile-photo {padding: 25px 35px 0;}
}


/* Footer area -------------------------------------------------------- */
footer {
margin-top: 30px;
background-color: #fbf8f3;}

address {font-style: normal; text-align: center;}

.foot-logo {width: 380px; margin: 0 auto 50px;}
.foot-tel {width: 400px; margin: 0 auto 50px;}
.foot-map {width: 50px; margin: 0 auto 20px;}

.foot-logo img, .foot-tel img, .foot-map img {width: 100%;}

.copy-area {
border: 1px solid rgba(255, 255, 255, 0);
background-color: #fbf8f3;
background-image: url(image/foot-tree-bg.png);
background-repeat: no-repeat;
background-position: center top;
background-size: 1000px;
height: 170px;
margin-top: -3%;}

.copy {font-weight: 500; font-size: 12px; color: #fff; text-align: center; margin-top: 140px;}

/* under 1200 -------------------------------------------------------- */
@media screen and (max-width : 1200px) {
.foot-logo {width: 300px; margin: 0 auto 50px;}
.foot-tel {width: 320px; margin: 0 auto 50px;}

.copy-area {background-size: 800px; height: 140px;}
.copy {margin-top: 110px;}
}

/* under 800 -------------------------------------------------------- */
@media screen and (max-width : 800px) {
footer {margin-top: 60px;}
.foot-logo {width: 200px; margin: 0 auto 30px;}
.foot-tel {width: 260px; margin: 0 auto 30px;}
.foot-map {margin: 0 auto 10px;}

.copy-area {background-size: 600px; height: 100px;}
.copy {margin-top: 70px;}
}


/* SUB PAGE --------------------------------------------------------------
------------------------------------------------------------------------------ */
.sub-ttl-area {
background-image: url(image/subpage-top-bg.jpg);
background-repeat: repeat;
background-position: center top;
background-size: 1500px;
height: 250px;
margin-top: 100px;}

.sub-ttl img {
display: block;
padding-top: 65px;
margin: 0 auto;
width: 600px;}

/* under 1200 -------------------------------------------------------- */
@media screen and (max-width : 1200px) {
.sub-ttl-area {
background-size: 1200px;
height: 200px;
margin-top: 80px;}

.sub-ttl img {
padding-top: 50px;
width: 500px;}
}

/* under 800 -------------------------------------------------------- */
@media screen and (max-width : 800px) {
.sub-ttl-area {
height: 150px;
margin-top: 65px;}

.sub-ttl img {width: 300px;}
}


/* Kyouiku page -------------------------------------------------------- */
.contents-sub-ttl img {
display: block;
width: 600px;
margin-bottom: 10px;}

/* under 1200 -------------------------------------------------------- */
@media screen and (max-width : 1200px) {
.contents-sub-ttl img {width: 500px;}
}

/* under 800 -------------------------------------------------------- */
@media screen and (max-width : 800px) {
.contents-sub-ttl img {width: 400px;}
}


/* Profile page -------------------------------------------------------- */
.goaisatu img {
display: block;
margin: 0 auto 40px;
width: 600px;}

.goaisatu-photo {
	width: 100%;
	max-width: 800px;
	margin: 40px auto;
}
@media screen and (max-width : 800px) {
.goaisatu-photo {
	margin: 20px auto;
}
}

.okiba-photo {
	margin: 40px 0 0;
}
@media screen and (max-width : 800px) {
.okiba-photo {
	margin: 20px 0 0;
}
}



.prof-img {
display: block;
margin: 50px auto 10px;
width: 250px;}

.name {text-align: center; margin-bottom: 60px;}

.aisatu-text {
border-radius: 30px;
padding: 30px;
line-height: 35px;
background-color: #faf7f3;
position: relative;}

.photo-area {width: 90%; margin: 50px auto 80px;}
.photo-area ul {overflow: hidden;}
.photo-area li {width: 22%; margin: 0 1.4%; float: left;}
.photo-area li img {width: 100%;}

/* under 1200 -------------------------------------------------------- */
@media screen and (max-width : 1200px) {
.goaisatu img {width: 500px;}
}

/* under 800 -------------------------------------------------------- */
@media screen and (max-width : 800px) {
.goaisatu img {width: 100%; margin: 0 auto 20px;}

.prof-img {margin: 10px auto 10px; width: 250px;}

.aisatu-text {
padding: 26px;
line-height: 25px;}

.name {margin-bottom: 20px;}

.photo-area {margin: 20px auto 40px; width: 100%;}
.photo-area li {width: 48%; margin: 1%;}
}


/* Contact page -------------------------------------------------------- */
#formWrap {
max-width: 800px;
width: 100%;
height: auto;
margin: 30px auto 0;}

input#formbutton {
-webkit-appearance: none;
width: 140px;
padding: 10px 0 9px;
margin: 0 5px;
background: #ffa200;
border: 3px solid #ffa200;
color: #fff;
border-radius: 40px;
letter-spacing: 2px;
text-indent: 2px;
text-align: center;
transition: .2s;
font-size: 14px;
font-weight: bold;}

#formbutton:hover {
background-color: #fff;
color: #ffa200;
border: 3px solid #ffa200;}

.input_area {
font-size: 13px;
width: 100%;
border: 1px solid #ccc;
padding: 10px;
margin: 5px 0 20px;
-webkit-appearance: none;
border-radius: 8px}

.input_area2 {
font-size: 13px;
width: 100%;
border: 1px solid #ccc;
padding: 10px;
margin: 5px 0 20px;
-webkit-appearance: none;
border-radius: 8px}

.contact-text {
text-align: center;
max-width: 900px;
margin: 0 auto 60px;}

/* under 800 -------------------------------------------------------- */
@media screen and (max-width : 800px) {
.input_area2 {height: 200px;}
}

/* Other -------------------------------------------------------- */
.contents-in {
margin: 0 auto;
max-width: 1200px;
width: 90%;
padding: 8% 0;
overflow: hidden;}

.line {display: block; width: 100%; margin: 80px 0;}

.huwatto {
opacity : 0;
transform : translate(0, 100px);
transition : all 2s;}

.huwatto.scrollin {
opacity : 1;
transform : translate(0, 0);}

.block-ttl {width: 900px; margin: 0 auto 70px;}
.block-ttl2 {width: 650px; margin: 0 auto 70px;}
.block-ttl img, .block-ttl2 img {width: 100%;}

.center, .center2 {text-align: center;}
.bold {font-weight: 700;}
.font-large {font-size: 20px;}
.line-height {line-height: 45px;}
.orange {color: #ff9600;}
.red {font-size: 80%; color: #c30000;}
.bg-color {margin-bottom: 50px; background-color: #f6f6f6; padding: 14px;border-radius: 10px;}

.link-text {
display: block;
text-align: center;
margin: 0 auto;
border: 3px solid #ffa200;
background-color: #ffa200;
border-radius: 40px;
padding: 10px 0;
color: #fff;
width: 250px;
letter-spacing: 3px;
-webkit-transition: 0.3s;
transition: 0.3s;
margin-top: 50px;
font-size: 120%;
font-weight: 700;}

.link-text:hover {
border: 3px solid #ffa200;
background-color: #fff;
color: #ffa200;}

table {
background-color: #fff;
border: 1px solid #efefef;
width: 100%;
margin: 0 auto;
border-collapse: collapse;
border-spacing: 0;}

th {
text-align: left;
padding: 10px 20px;
width: 28%;}

td {
text-align: right;
padding: 10px 20px;
width: 72%;}

tr:nth-child(odd) {background-color: #eee;}

.price-text {margin: 10px auto 0; font-size: 14px; width: 100%;}

.topbuck {
width: 90px;
float: right;
margin: -110px 20px 0 0;}

/* under 1200 -------------------------------------------------------- */
@media screen and (max-width : 1200px) {
body, text {font-size: 15px;}

.block-ttl {width: 650px; margin: 0 auto 50px;}
.block-ttl2 {width: 520px; margin: 0 auto 50px;}

.font-large {font-size: 18px;}
.line-height {line-height: 40px;}

.link-text {
padding: 7px 0;
width: 180px;
font-size: 110%;}

table, .price-text {width: 100%;}

.line {margin: 50px 0;}
}

/* under 800 -------------------------------------------------------- */
@media screen and (max-width : 800px) {
.pc {display: none;}
body, text {font-size: 14px; letter-spacing: 1px;}
a:hover img {opacity: 1;}

.contents-in {
padding: 12% 0;}

.block-ttl {width: 100%;  margin: 0 auto 30px; max-width: 500px;}
.block-ttl2 {width: 100%; margin: 0 auto 30px; max-width: 500px;}

.center {text-align: left;}
.font-large {font-size: 14px;}
.line-height {line-height: 25px;}
.bg-color {font-size: 13px;}

.link-text {margin-top: 30px;}

th, td {
display: block;
width: 100%;}

th {padding: 10px 10px 0;}
td {text-align: left; padding: 5px 10px 10px;}

.topbuck {
width: 60px;
margin: -30px 10px 0 0;}

.line {width: 700px; margin: 40px 0;}

.spbr {display: block;}
}

/* over 800 -------------------------------------------------------- */
@media screen and (min-width : 799px) {
.sp {display: none;}
}