@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=Zen+Maru+Gothic&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{position:relative; font-family: "Zen Maru Gothic", sans-serif; color:#333; letter-spacing: 0.1em; font-size: 15px; background: #EEE; background: url(img/bg.jpg) no-repeat top; background-size: cover; background-attachment: fixed;}

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#contwrap {width: 384px; margin: 0 auto;}

/* ======= HEADER ======= */
header{ width: 384px; 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: 270px; padding: 0 0 10px 15px;}
.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,1); z-index: 10; }
.nav-wrap ul li {width: 389px; margin: 0 auto; border-bottom: 1px solid #CCC; padding: 20px 0;}
.nav-wrap a{text-decoration:none; padding: 5px 0; display: inline-block; color:#4B3333; font-size:20px; line-height: 1.2; text-align: center;}
.nav-wrap a:hover{color:#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: 2px; 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(18px) rotate(-45deg);
transform: translateY(18px) 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;}

.nav-wrap ul li:last-child a {
    position: relative;
    background: #ff7bac;
    display: block;
    padding: 20px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    color: #FFF;
    margin: 20px;
}
.nav-wrap ul li:last-child a img {width: 50px; position: absolute; right: 0;}

/*固定メニュー*/
.pcMenu {position: fixed; top: 30px; left: 50px; font-family: 'Noto Sans JP';}
.pcMenu img {width: 300px; margin-bottom: 50px;}
.pcMenu ul li {margin-bottom: 10px;}
.pcMenu ul li a {text-decoration: none; font-size: 20px; font-weight: bold; color: #FFF;}

.pcBnr {position: fixed; right: 50px; bottom: 50px; font-family: 'Noto Sans JP'; width: 300px;}
.pcBnr li.bnr1 {margin-bottom: 10px; padding: 20px; background: #26a4a3; border-radius: 10px; display: flex; color: #FFF; justify-content: space-between; align-items: center;}
.pcBnr li.bnr1 p {font-size: 17px; font-weight: 600;}
.pcBnr li.bnr1 p span {font-size: 10px; letter-spacing: unset; display: block; font-weight: normal;}
.pcBnr li.bnr1 img {width: 90px;}
.pcBnr li.bnr2 a {display: block; text-align: center; text-decoration: none; color: #FFF; background: #ff7bac; padding: 20px 0; font-size: 23px; font-weight: bold; position: relative; border-radius: 10px; letter-spacing: normal;}
.pcBnr li.bnr2 a i {position: absolute; right: 10px;}

/* ======= TEASER ======= */
#teasar{position: relative; margin-top: 77px; padding-bottom: 50px; background-image: linear-gradient(40deg, rgba(207, 234, 241, 1), rgba(232, 241, 203, 1));}
.teaserBox ul {position: relative;}
img.hero1 {width: 80%;}
img.hero2 {width: 35%; position: absolute; bottom: 85px; left: 20px;}
img.hero3 {width: 90%; position: absolute; bottom: -15px;}
img.hero4 {width: 85%; margin: 50px auto 0; display: block; }
.teaserBox h2 {writing-mode: vertical-lr; position: absolute; right: 25px; top: 50px; white-space: nowrap; font-size: 20px; font-weight: bold;}

/* ======= 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: 50px 0 30px; background: #FFF; position: relative;}
img.reaf1 {width: 50px;}
img.reaf2 {width: 50px;}
#stage01 img.reaf1 {position: absolute; right: 5%; top: -25px;}
#stage01 img.reaf2 {text-align: left; display: block; margin-left: 5%; z-index: 10; position: relative;}
#stage01 p {line-height: 2; font-size: 14px;}
#stage01 h2{margin-bottom: 30px;}
img.text01 {width: 77%; margin-top: -25px;}

.mainCont h2 {font-size: 20px; margin-bottom: 30px; letter-spacing: normal; font-weight: bold;}
.mainCont h2 span{color:#26a4a3;}
.mainCont h2 img {width: 50px; display: block; text-align: center; margin: 0 auto 20px;}

.mainCont h3 {font-size: 18px; border-bottom: 1px dotted #333; padding: 0 0 20px; margin-bottom: 20px; font-weight: bold; letter-spacing: normal;}
.mainCont h3 span{color:#26a4a3;}

.mainCont h4 {text-align: left; font-size: 18px; font-weight: bold; }
.mainCont h4 span{color:#26a4a3;}

.mainCont ul li p span {color: #f09097;}
.mainCont ul li p {text-align: justify;}
.mt50{margin-top:50px;}

/* ======= STAGE02 ======= */
#stage02 {text-align: center; padding: 50px 3% 30px; background: #eef4dc;}
#stage02 .box02 {display: flex; margin-bottom: 20px;}
ul.slider-1 li img {width: auto; height: 110px; margin-right: 25px;}
ul.slider-1 li {position: relative; background: #FFF; padding: 20px; border-radius: 10px; margin: 20px;}
.s-box1 {}
.s-box1 h3 {font-size: 16px; text-align: left; font-weight: bold; color: #00a99d; letter-spacing: normal; margin-bottom: 10px; border-bottom: none; padding: 0;}
.s-box1 p {font-size: 11px; letter-spacing: normal; }
.s-box2 { background: #EEE; padding: 12px; box-sizing: border-box; font-size: 10px; letter-spacing: normal;}
.s-box3 {font-size: 13px; letter-spacing: normal; line-height: 1.8;}

/* ======= STAGE03 ======= */
#stage03 {text-align: center; padding: 50px 9%; background: #f7faf2;}
#stage03 p {font-size: 13px; line-height: 1.8; text-align: justify; margin-bottom: 30px;}
#stage03 p span {color: #26a4a3;}
#stage03 h3 {margin-top: 50px;}
#stage03 .box1 {background: #FFF; padding: 30px; border-radius: 10px; border: 1px solid #26a4a3;}
#stage03 .box1 img { width: 150px; margin-bottom: 20px;}
#stage03 .box1 p {letter-spacing: normal; margin-top: 10px; margin-bottom: 0; font-family: 'Noto Sans JP'; font-weight: bold;}

/* ======= STAGE04 ======= */
#stage04 {text-align: center; padding: 50px 9%; background: #FFF; }
#stage04 p {text-align: justify; letter-spacing: normal; line-height: 1.8; letter-spacing: -0.05em; margin-bottom: 50px;}

/* ======= STAGE05 ======= */
#stage05 {text-align: justify; padding: 50px 0 0; background: #fffaf1;}
#stage05 .subCont {padding: 0 9%;}
#stage05 .subCont h4 {margin-bottom: 30px; font-family: 'Noto Sans JP';}
#stage05 .subCont p {margin-bottom: 30px;}
#stage05 .subCont h3 {text-align: center; margin-top: 30px;}
#stage05 .element1{margin: 30px 0; width: 92%;}
#stage05 .element2{margin: 0 0 30px;}

/* ======= STAGE06 ======= */
#stage06 {text-align: center; padding-bottom: 50px; padding-top: 50px; background:#f7faf2;}
#stage06 .subCont {padding: 0 9%; text-align: justify; line-height: 1.8; letter-spacing: -0.05em;}
#stage06 .element1 {margin: 0 0 30px 8%; width: 92%;}
#stage06 .subCont h4{color:#26a4a3; margin: 10px 0;}
#stage06 .element2 {margin: 30px 0;}
#stage06 .element3{margin-bottom: 30px;}
#stage06 a.element4 {background: #FFF; display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 18px; font-weight: bold; color: #ff7bac; padding: 15px 0; box-shadow: 0px 0px 4px 4px #EEE; border-radius: 10px; margin-top: 30px;}
#stage06 img.element4 {height: 24px; margin-left: 10px;}

/* ======= STAGE07 ======= */
#stage07 {text-align: center; padding: 50px 9%; background:#eef4dc;}
#stage07 h2 img {width: 30px;}
#stage07 ul li {margin-bottom: 12px;}
#stage07 ul li a { text-decoration: none;}
#stage07 ul li p {background: #12a19e; color: #FFF; font-size: 11px; padding: 10px 0; font-weight: bold; letter-spacing: normal; text-align: center; font-family: 'Noto Sans JP';}
#stage07 .element1{margin: 0 0 30px 0;text-align: left;}
#stage07 .element2{margin: 20px 0 0 0; text-align: left; font-size:12px;}

/* ======= STAGE08 ======= */
#stage08 {text-align: center; padding: 50px 0; background:#FFF;}
#stage08 .box1 {position: relative; margin-bottom: 50px;}
#stage08 .element1 {width: 92%; margin-right: 8%; position: relative; z-index: 10;}
#stage08 .bg {position: absolute; right: 0; bottom: -60px; width: 140px;}
#stage08 .reaf1 {position: absolute; right: 10px; bottom: -70px;}
#stage08 .subCont {padding: 0 9%;}
#stage08 .box2 {border-bottom: 1px dotted #333; padding-bottom: 20px; margin-bottom: 30px;}
#stage08 .box2 h4 {color: #26a4a3; text-align: center;}
#stage08 .box2 a img {width: 50px; position: absolute; right: 0;}
#stage08 .box2 a {position: relative; background: #ff7bac; display: block; padding: 20px; border-radius: 50px; text-decoration: none; font-size: 18px; font-weight: bold; color: #FFF; margin: 20px;}
#stage08 .box2 p {font-size: 11px;}
#stage08 .box3 {text-align: left; letter-spacing: -0.05em; line-height: 1.8em; margin-bottom: 50px;}
#stage08 .box3 h4 {color: #26a4a3; margin: 20px 0 10px;}
#stage08 img.reaf2 {text-align: left; display: block;}
#stage08 .box5 {margin-top: 30px; display: flex;}
#stage08 .box5 a {margin: 5px;}
.movie iframe {
    min-width: 100% !important;
    margin-top: 30px !important;
}
/* ======= FOOTER ======= */
footer {background: #FFF; border-top: 1px solid #CCC; text-align: left; padding: 10px 0 0;}
footer ul {display: flex; justify-content: center; flex-direction: column;}
footer ul li {border-top: 1px solid #CCC;}
footer ul li a {text-decoration: none; padding: 20px 9%; display: block; font-size: 16px;}
footer img {width: 260px; margin-left: 9%; padding: 0 0 20px;}
p.copyrights {font-size: 10px; background: #26a4a3; color: #FFF; text-align: center; letter-spacing: normal; padding: 25px 0;}


@media screen and (max-width: 1024px) {
 /*　================================ for ipad ================================　*/
body { background-attachment: scroll; background: url(img/bg.jpg) repeat top;}

/*固定メニュー*/
.pcMenu{display:none;}
.pcBnr{display:none;}

}


@media screen and (max-width: 480px) {
 /*　================================ for iphone ================================　*/
/*コンテンツ*/
section#contwrap{width:100%; margin:auto;}

/*ヘッダー*/
header{width:100%;}

/*グローバルナビ*/
.nav-wrap{padding: 100px 9%;}
.nav-wrap ul li {width: 100%; margin: auto;}

}