@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;}

/* ======= 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;
}

/* ======= 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 {width: 300px; height: auto;}

.header-inr {position: relative;}
.header-inr h1 {width: 250px; 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 {display: block; background: #FFF; width: 100%; font-size: 36px; letter-spacing: 0.3em; font-family: "Noto Serif JP"; color: #f0908d; padding-bottom: 10px; bottom: 0; text-align: center;}
#teasar h2 span {background: #F0908D; display: block; font-size: 22px; letter-spacing: 0.1em; padding: 5px 0; color: #FFF;  margin-bottom: 10px;}
#teasar img {object-fit: cover; object-position: top; width: 100%; height: 500px;}

#teasar02{background-image: linear-gradient(360deg, rgba(255, 255, 255, 1), rgba(246, 242, 237, 1) 45%); text-align:center;padding: 100px 0 130px;}
#teasar02 h3 {font-size: 32px; margin-bottom: 20px;letter-spacing: 0.2em;}
#teasar02 h4 {font-size: 26px; margin-bottom: 40px; color: #f0908d;letter-spacing: 0.2em;}
#teasar02 p{font-family: "Noto Sans JP";}
#teasar02 p span.pink {font-weight: bold; color: #f0908d; margin: 30px 0; display: block;}
#teasar02 p span{font-weight: bold;display: block;}

/* ======= COLUMN ======= */
ul.col2 {display: flex; 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;}

.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; color: #f0908d;}
.mainCont ul li p span {color: #f09097;}
.mainCont ul li p {text-align: justify;}
.mainCont img{border-radius: 10px;}

/* ======= 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: #caae8d; 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;}

/* ======= STAGE03 ======= */
#stage03 {text-align: center; padding: 0 10%; margin-bottom: 70px;}
.s03-1 {margin-bottom: 50px;}
.s03-1 h3 {background: #caae8d; color: #FFF; border-radius: 50px; display: inline-block; padding: 10px 40px; margin-bottom: 30px;}
.s03-2 li {background: #F6F2ED;}
.s03-2 li p {padding: 30px;}
.s03-2 li h3 {background: #caae8d; color: #FFF; padding: 10px;}

/* ======= STAGE04 ======= */
#stage04 {text-align: center; padding: 0 10%; margin-bottom: 70px;}
#stage04 ul {margin-bottom: 50px; padding-bottom: 50px; border-bottom: 1px solid #CCC;}
#stage04 ul li p {margin-bottom: 30px;}
#stage04 ul li h3{color:#4B3333; text-align:left; margin-bottom: 20px;}
#stage04 ul li img{margin-bottom:20px;}
#stage04 ul.col2.colReverse {border: none;}
#stage04 table {width: 100%;}
#stage04 table td {border: 1px solid #CCC; padding: 10px; font-family: 'Noto Sans JP';}
.s04-1 {border: solid 8px #F7F3EE; padding: 50px;}
.s04-1 h3 {margin-bottom: 50px; color: #4b393f;}
.s04-1 p span {font-weight: bold; font-size: 20px; line-height: 2em;}

/* ======= STAGE05 ======= */
#stage05 {text-align: center; padding: 100px 10% 80px; margin-bottom: 0; background: #F6F2ED;}
#stage05 a {background: #39B44A; display: flex; justify-content: center; align-items: center; color: #FFF; text-decoration: none; padding: 20px; border-radius: 50px; width: 300px; margin: 30px auto; box-sizing: border-box;}
#stage05 a img {width: 22px; margin-right: 10px}

/* ======= STAGE06 ======= */
#stage06 {text-align: center; padding: 70px 10%; margin-bottom: 0; background: #CAAE8D;color: #FFF;}
.s06-1 {background: url(img/footter.jpg)no-repeat center; padding: 175px 0;text-align: center;}
.s06-1 h2 {font-size: 50px; color: #FFF; text-shadow: 0 0 7px BLACK; letter-spacing: 0.3em;}
#stage06 ul li h3 {color: #FFF; text-align: left; border-bottom: 1px solid #FFF; padding: 10px 0; margin-bottom: 10px; font-size: 16px;}
#stage06 ul li p {text-align: left; letter-spacing: normal;}

/* ======= FOOTER ======= */
footer {text-align: center; padding: 70px 0; font-family: 'Noto Sans JP';}
footer ul {display: flex; justify-content: center;}
footer ul li {margin: 0 10px;}
footer ul li a {text-decoration:none;}

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: 174px;}
.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;}

#teasar02 {padding: 50px 0;}
#teasar h2 {font-size: 20px;}
#teasar h2 span {font-size: 12px;}
#teasar02 h3 {font-size: 20px;letter-spacing: 0.1em;}
#teasar02 h4 {font-size: 16px; margin-bottom: 20px;}

#stage01 {padding: 0 5%; margin-bottom: 50px;}

.mainCont h2 {font-size: 20px; 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.colReverse {display: flex; flex-direction: column;}

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

#stage03 {padding: 0 5%; margin-bottom: 50px;}

#stage04 {padding: 0 5%; margin-bottom: 50px;}
#stage04 ul li img {margin-bottom: 10px;}
#stage04 table {font-size: 11px;}
#stage04 ul.col2.colReverse {border-bottom: 1px solid #CCC;}
#stage04 ul li h4 {background: #f6f2ed; padding: 10px 0; font-size: 12px; border-radius: 50px;}
.s04-1 {padding: 30px 5%;}
.s04-1 p {font-size: 12px; text-align: justify; letter-spacing: normal;}
.s04-1 p span {font-size: 13px;}
.s04-1 h3 {margin-bottom: 30px;}

#stage05 {padding: 50px 5%;}
#stage06 {padding: 50px 5%;}
.s06-1 {padding: 100px 0;}
.s06-1 h2 {font-size: 26px;}

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


}