@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Lato:400,700|Noto+Sans+JP:400,700,900');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;500;900&display=swap');

/* CLEAR FIX */
.cf:after{content: "."; display: block; height: 0;  clear: both; visibility:hidden;}
.cf{display: inline-table;} 
/* Hides from IE Mac */
* html .cf{height: 1%;}
.cf{display:block;}
/* BOXSIZING */
.boxSizing { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}
/* iOSでのsubmitのスタイルをリセット */
input[type="submit"],input[type="button"] {border-radius: 0;-webkit-box-sizing: content-box;-webkit-appearance: button; appearance: button; border: none; box-sizing: border-box; cursor: pointer;}
input[type="submit"]::-webkit-search-decoration,input[type="button"]::-webkit-search-decoration {display: none;}
input[type="submit"]::focus,input[type="button"]::focus {outline-offset: -2px;}

/* =======PRUGIN SETTINGS======= */
/* PAGE TOP */
.pagetop {position: fixed;bottom: 10px;right: 10px;opacity: 0;filter: alpha(opacity=0);-webkit-transform: scale(0.3);-moz-transform: scale(0.3);-ms-transform: scale(0.3);-o-transform: scale(0.3);transform: scale(0.3);-webkit-transition: all .4s;-moz-transition: all .4s;	-o-transition: all .4s;	transition: all .4s;}
.pagetop a {display: block;width: 50px;	height: 50px;background-color: #000;text-align: center;color: #fff;font-size: 1em;text-decoration: none;line-height: 50px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%;}
.pagetop.show {	opacity: 1;filter: alpha(opacity=100);-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);}

/* BLOCK LINK */
.box-link{cursor:pointer;}
.box-link,
.box-link::before,
.box-link::after {-webkit-transition: all .3s;transition: all .3s;}
.box-link:hover{background:#f9f9f9;}

/* GMAP モノクロ設定 */
.gmap iframe {-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); height:300px;}

/* =======ACCORDION======= */
.accordion {margin: 50px auto;}
.toggle {display: none;}
.option {position: relative;}
.title,.content {-webkit-backface-visibility: hidden;backface-visibility: hidden;transform: translateZ(0);transition: all 0.3s;}
.title {background: #F7F3EE;padding: 15px; display: block; margin-bottom: 30px; font-size: 18px;}
.title::after,.title::before {content: "";position: absolute;right: 27px; top: 23px; width: 2px; height: 14px; background-color: #333; transition: all 0.3s;}
.title::after {transform: rotate(90deg);}
.content {max-height: 0; overflow: hidden;}
.content p {margin: 0; padding: 20px 0 60px 0; font-size: 18px !important; text-align: center; line-height: 2em;}
.toggle:checked + .title + .content {max-height: 100%; transition: all 1.5s;}
.toggle:checked + .title::before {transform: rotate(90deg) !important;}

/* ======= BASIC ======= */
html,body { height: 100%; width: 100%;}
body{font-family:"Noto Serif JP", serif; color:#4B3333; letter-spacing: 0.1em; font-size: 15px;}

p{font-family: "Noto Sans JP";}
img {max-width: 100%; height: auto;}
a{color:#4B3333; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all  0.3s ease; }
a:hover{color:#CCC;}
strong{font-weight:bold;}
.sp{display:none;}
.jump{margin-top:-100px; padding-top:100px;}
section::before {content:'';display: block; padding-top: 120px; margin-top: -120px;}
div#nicco {padding-top: 120px; margin-top: -120px;}
div#coni {padding-top: 120px; margin-top: -120px;}

/* ======= HEADER ======= */
header{ width:100%; z-index: 9999; position: fixed; top: 0; box-sizing: border-box; transition: all 0.5s ease-out; background: #FFF; border-bottom: 1px solid #EEE;}
header img {height: auto;}

.header-inr {position: relative;}
.header-inr h1 {width: 350px; padding: 16px;}
.headBox {float: right; display:flex; align-items: center;}
	.headBox a {margin-right: 20px;}
	.headBox a img {width: 25px; padding: 0;}

/* global nav */
#gnav {width: 100%; display: inline-flex; justify-content: space-between; align-items: center;}
.nav-button-box {position: relative; padding: 20px 18px; z-index: 50; vertical-align: top;}
.nav-button-box p {font-size: 0.5em;text-align: center; margin-top: 5px;}
.nav-button {display: block; cursor: pointer; }
.nav-wrap {position: fixed;left: 0;top: 0;  display:none; width: 100%; height: 100%;padding: 100px; box-sizing: border-box; background: rgba(255,255,255,0.9); z-index: 10; }
.nav-wrap ul li {border-bottom: 1px solid #CCC; padding: 20px 0;}
.nav-wrap a{text-decoration:none; padding: 5px 0; display: inline-block; color:#4B3333; font-size:2em; line-height: 1.5em;}
.nav-wrap a:hover{color:#CCC;}
.nav-wrap a span { font-size: 15px;}

ul.pvnav {display: flex;}
ul.pvnav li {padding: 30px 0; margin-left: 20px;}
ul.pvnav li a{text-decoration:none;}
ul.pvnav li:last-child a {margin: 0; background: #CAAE8D; padding: 30px 40px; color:#FFF;}
ul.pvnav li:last-child a:hover{background: #CCC;}

/*メニューボタンのエフェクト*/
.nav-button span { display: inline-block; transition: all 0.4s; box-sizing: border-box;}
.nav-button { z-index: 20; position: relative; width: 40px; height: 36px;}
.nav-button span {position: absolute; left: 0; width: 100%; height: 4px; background-color: #333;}
.nav-button span:nth-of-type(1) {top: 0;}
.nav-button span:nth-of-type(2) {top: 16px;}
.nav-button span:nth-of-type(3) {bottom: 0;}

.nav-button.active span:nth-of-type(1) {
-webkit-transform: translateY(16px) rotate(-45deg);
transform: translateY(16px) rotate(-45deg);
}
.nav-button.active span:nth-of-type(2) {
opacity: 0;
}
.nav-button.active span:nth-of-type(3) {
-webkit-transform: translateY(-16px) rotate(45deg);
transform: translateY(-16px) rotate(45deg);
}

nav.nav-wrap.cf.active {display: block;}


/* ======= TEASER ======= */
#teasar{position: relative; margin-top: 83px; background: rgba(246, 242, 237, 1);}
#teasar h2 {font-size: 3vw; letter-spacing: 0.3em; font-family: "Noto Serif JP"; color: #4b3333; bottom: 32%; position: absolute; left: 10%; text-shadow: 0 0 5px white;}
#teasar img {object-fit: cover; object-position: top; width: 100%; height: 500px; border-radius: 0 0 50px 0;}
.teaserBox {width: 90%;}
.teaserBox2 {position: absolute; right: 5%; top: 175px; text-align: center; background: #CB918E; color: #FFF; padding: 30px 40px; border: 1px solid #FFF; box-shadow: 0 0 0 8px #CB918E;}
.teaserBox2 h3 {font-size: 26px; border-bottom: 1px solid #FFF;  padding-bottom: 24px; margin-bottom: 24px;}
.teaserBox2 p {font-family: "Noto Serif JP", serif; line-height: 1.8em; margin-bottom: 24px;}
.teaserBox2 a {text-decoration: none; color: #FFF; background: #caae8d; padding: 15px 20px; display: block; border-radius: 50px; letter-spacing: normal;}
.teaserBox2 a:hover{background: #CCC}

#teasar02{background-image: linear-gradient(360deg, rgba(255, 255, 255, 1)50%, rgba(246, 242, 237, 1) ); text-align:center;padding: 100px 10% 130px;}
#teasar02 h3 {font-size: 32px; margin-bottom: 50px;letter-spacing: 0.2em;}
#teasar02 h3 span{color: #CB918E;}
#teasar02 p{font-family: "Noto Serif JP", serif;}

#teasar02 ul li img {width: 50px;}
#teasar02 ul li {display: flex; align-content: center; align-items: center;}
.fukidashi {position: relative; display: inline-block; margin: 10px 0 10px 15px; padding: 15px 10px; min-width: 90%; max-width: 100%; font-size: 16px; background: #F7F3EE; box-sizing: border-box;}
.fukidashi:before {content: ""; position: absolute; top: 50%; left: -25px; margin-top: -15px; border: 15px solid transparent; border-right: 15px solid #F7F3EE;}
.fukidashi p { margin: 0; padding: 0;}

.readText{background-image: linear-gradient(360deg, rgba(255, 255, 255, 1)50%, rgba(246, 242, 237, 1) ); text-align:center;padding: 100px 10% ;}
.readText h3 {font-size: 24px; margin-bottom: 50px;letter-spacing: 0.2em;}
.readText h3 span{color: #CB918E;}
.readText p{font-family: "Noto Sans JP"; line-height: 1.8em;}

/* ======= COLUMN ======= */
ul.col2 {display: flex; flex-wrap: wrap; justify-content: space-between;}
ul.col2 li {width: 48%; position:relative;}
ul.col3 {display: flex; justify-content: space-between;}
ul.col3 li {width: 30%; position:relative;}
ul.col2.colReverse {display: flex; flex-direction: row-reverse;}

/* ======= STAGE01 ======= */
#stage01 {text-align: center; padding: 0 10%; margin-bottom: 70px;}
#stage01 h3{border-bottom: 1px solid #CCC; padding: 20px 0; margin-bottom: 20px;}
#stage01 h4{ margin-bottom: 20px;}

.mainCont h2{font-size:36px; margin-bottom:60px; letter-spacing: 0.2em;}
.mainCont h2 {display: flex; align-items: center;}
.mainCont h2:before,.mainCont h2:after {content: ""; height: 1px; flex-grow: 1; background-color: #CBCBCB;}
.mainCont h2:before {margin-right: 2rem;}
.mainCont h2:after {margin-left: 2rem;}
.mainCont h3 {font-size: 20px; }
.mainCont ul li p span {color: #f09097;}
.mainCont ul li p {text-align: justify;}
.mainCont img{border-radius: 10px;}
.mainCont h4 {text-align: left; font-family: 'Noto Sans JP'; font-weight: bold; }
.pinkBtn a {background: #CB918E; text-decoration: none; color: #FFF; padding: 15px; display: block; border-radius: 50px;}
.greenBtn a {background: #00A99D; text-decoration: none; color: #FFF; padding: 15px; display: block; border-radius: 50px;}
.pinkBtn a:hover {background: #CCC; }
.greenBtn a:hover {background: #CCC; }

a.pinkBtn {background: #CB918E; text-decoration: none; color: #FFF; padding: 15px; display: block; border-radius: 50px;}
a.greenBtn  {background: #00A99D; text-decoration: none; color: #FFF; padding: 15px; display: block; border-radius: 50px;}
a.pinkBtn:hover {background: #CCC; }
a.greenBtn:hover {background: #CCC; }

.mt50{margin-top:50px;}

/* ======= STAGE02 ======= */
#stage02 {text-align: center; padding: 0 10%; margin-bottom: 70px;}
.gradeBox{background-image: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(246, 242, 237, 1) 45%); text-align:center; padding: 50px 0; margin-bottom: 70px;}
.gradeBox p{font-family: "Noto Serif JP"; line-height: 2em;}
#stage02 h3{padding: 20px 0;}
#stage02 ul.col2{margin-bottom:70px;}
#stage02 ul li span {position: absolute; left: -15px; top: -15px; color: #FFF; background: #CB918E; font-size: 40px; height: 45px; width: 45px; border-radius: 100%; padding: 15px; display: flex; justify-content: center; align-items: center; align-content: center; line-height: 1;}
#stage02 h4{color: #cb918e;}

.readText2{background-image: linear-gradient(360deg, rgba(255, 255, 255, 1)50%, rgba(246, 242, 237, 1) ); text-align:center;padding: 100px 10% ;}
.readText2 h3{border-bottom: 1px solid #CCC; padding: 20px 0; margin-bottom: 20px;}
.readText2 h3 span{color: #CB918E;}
.readText2 h5 {margin-bottom: 50px; line-height: 2em;}
.readText2 p{ line-height: 1.8em;}

/* ======= STAGE03 ======= */
#stage03 {text-align: center; padding: 0 10%; margin-bottom: 70px;}
#stage03 h3{border-bottom: 1px solid #CCC; padding: 20px 0; margin-bottom: 20px;}
#stage03 ul {margin-bottom: -50px;}
#stage03 ul li {margin-bottom: 50px;}

/* ======= STAGE04 ======= */
#stage04 {text-align: center; padding: 0 10%; margin-bottom: 70px;}

/* ======= STAGE05 ======= */
#stage05 {text-align: center; padding: 0 10%; margin-bottom:70px;}
.s05-1 {position: relative;}
.s05-1 p {color: #FFF; position: absolute; background: #cb918e; width: 100px; height: 100px; display: flex; justify-content: center; align-items: center; border-radius: 50px; font-size: 23px; line-height: 1; font-family: 'Noto Serif JP'; top: -25px; left: 16px;}
.s05-1 h3 {background: #caae8d; padding: 15px 0; margin-bottom: 50px;}
#stage05 ul {margin-bottom: 50px;}

#stage05 ul li h4 span {font-size: 11px; font-weight: normal; margin-left: 10px; font-family: 'Noto Sans JP';}
#stage05 ul li h4 {font-size: 20px; font-weight: normal;margin:20px 0 10px;font-family: 'Noto Serif JP';}
#stage05 table {text-align: left; font-size: 14px; width: 100%;}
#stage05 table th{white-space: nowrap;}
#stage05 table th, #stage05 table td { border: 1px solid #CCC; padding: 10px 10px;}
#stage05 .greetingBox ul {margin-bottom: 0;}
.greetingBox {box-sizing: border-box; border: 8px solid #F7F3EE; padding: 50px; text-align: left;}
.greetingBox h3 {margin-bottom: 30px;}

/* ======= STAGE06 ======= */
#stage06 {text-align: center; padding: 0 10%; margin-bottom:70px;}
#stage06 ul {
    text-align: left;
    margin-bottom: 50px;
    padding-bottom: 50px;
    border-bottom: 1px solid #CCC;
}
#stage06 h3{border-bottom: 1px solid #CCC; padding: 0 0 20px; margin-bottom: 20px;}
section#stage06 p {
    line-height: 2em;
    margin-bottom: 20px;
}
section#stage06 a {
    text-align: center;
    margin-bottom: 10px;
}
#stage06 h4 {
    text-align: center;
    margin-bottom: 80px;
}

/* ======= FOOTER ======= */
footer {background: #CAAE8D;color: #FFF; text-align: center; padding: 70px 0; }
footer ul {display: flex; justify-content: center;}
footer ul li {margin: 0 10px;}
footer ul li a {text-decoration:none;color: #FFF;}
footer img {width: 350px; margin-bottom: 50px;}
p.copyrights {margin-top: 30px; font-size: 12px;}



@media screen and (max-width: 1279px) {
 /*　================================ for ipad ================================　*/
body p{font-size:14px;}
.nav-wrap { padding: 100px 30px; text-align: center;}
.nav-wrap a {font-size: 16px;}
.nav-wrap a span {font-size: 12px; display: block;}

header img {width: 300px;}
.header-inr h1 {padding:0 0 0 30px;}
.headBox a {margin-right: 0px;}

.sp{display:block;}
ul.pvnav{display:none;}
.mainCont h3 {font-size: 16px;}
#stage02 ul li span {font-size: 24px; height: 20px; width: 20px;}
.s04-1 p span {font-size: 14px;}


}
@media screen and (max-width: 480px) {
 /*　================================ for iphone ================================　*/
section::before {content: ''; display: block; padding-top: 100px; margin-top: -100px;}
div#nicco {padding-top: 100px; margin-top: -100px;}
div#coni {padding-top: 100px; margin-top: -100px;}

.teaserBox {position: relative; width: 100%; margin-top: -6px;}

#teasar img {
    object-fit: cover;
    object-position: top;
    width: 100%;
    height: 320px;
    border-radius: 0;
}

#teasar02 {padding: 10px 0 30px;}
#teasar h2 {font-size: 23px; color: #FFF; bottom: auto; top: 90px;  position: absolute;  left: 10%; text-shadow: 0 0 5px black;}
#teasar02 h3 {font-size: 20px;letter-spacing: 0.1em; margin-bottom: 30px;}
#teasar02 h4 {font-size: 16px; margin-bottom: 20px;}
#teasar02 p {font-size: 12px; letter-spacing: normal;}
#teasar02 ul li {display: flex; align-content: center; align-items: center; margin-bottom: 5px; justify-content: center;}

.teaserBox2 {position: relative; right: unset; top: -40px; box-sizing: border-box;  width: 80%; margin: 20px auto 0;}
.teaserBox2 h3 {font-size: 20px;}
#stage01 {padding: 0 5%; margin-bottom: 50px;}
.fukidashi {min-width: 70%;}
.mainCont h2 {font-size: 20px; margin-bottom: 30px; letter-spacing: 0.1em;}

.readText {padding: 50px 10%;}
.readText2 {padding: 50px 10%;}

.readText h3 {
    font-size: 16px;
    margin-bottom: 30px;
    letter-spacing: 0.1em;
}

ul.col2 {display: flex; justify-content: space-between; flex-direction: column;}
ul.col2 li {width: 100%; position: relative; margin-bottom: 30px;}
ul.col2 li:last-child{margin-bottom: 0;}
ul.col3 {display: flex; justify-content: space-between; flex-direction: column;}
ul.col3 li {width: 100%; position: relative; margin-bottom: 30px;}
ul.col3 li:last-child{margin-bottom: 0;}
ul.col2.mt50 li {margin-bottom: 10px;}

ul.col2.colReverse {display: flex; flex-direction: column;}

#stage02 {padding: 0 5%; margin-bottom: 50px;}
#stage02 ul.col2 {margin-bottom: 50px;}

#stage03 {padding: 0 5%; margin-bottom: 30px;}
.gradeBox {padding: 30px; margin-bottom: 50px;}
#stage03 ul li {margin-bottom: 30px;}
#stage03 ul.col2.mt50 li {margin-bottom: 10px;}

#stage04 {padding: 0 5%; margin-bottom: 30px;}
.title {font-size: 12px; letter-spacing: normal; margin-bottom: 10px;}
.title::after, .title::before {right: 16px; top: 17px;}
.content p {margin: 0; padding: 0px 10px 35px; font-size: 12px!important; text-align: center; line-height: 2em;}

#stage05 {padding: 0 5%; margin-bottom: 30px;}
.s05-1 p {width: 80px; height: 80px; font-size: 14px; top: -25px; left: -10px;}
.s05-1 h3 {margin-bottom: 30px;}
.greetingBox {padding: 30px;}

#stage06 {padding: 0 5%; margin-bottom: 30px;}
#stage06 h4 {margin-bottom: 50px;}

.s06-1 {padding: 100px 0;}
.s06-1 h2 {font-size: 26px;}

footer {padding: 50px 0 30px;}
footer img {width: 350px; margin-bottom: 30px;}
footer ul {display: flex; justify-content: center; flex-direction: column;}
footer ul li {margin: 0; border-bottom: 1px solid #CCC; padding: 10px 0;}


}