@charset "utf-8";

html, body {height: 100%;}

body, text {
word-break: break-all;
-webkit-text-size-adjust: 100%;
letter-spacing: 1px;
font-size: 17px;
font-family: 'Noto Serif JP', serif;
margin: 0;
}

a:hover {color: #8b7456;}
a{text-decoration: none;}
a{outline: none;}
:focus {outline: none;}
::-moz-focus-inner {border: 0;}

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

img {vertical-align: bottom;}

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


/* main-visual -------------------------------------------------------- */
.main-visual {
height: 100vh;
background-image: url(image/main-visual1.jpg);
background-repeat: no-repeat;
background-position: bottom center;
background-size: cover;}

/* under 800 -------------------------------------------------------- */
@media screen and (max-width : 800px) {
.main-visual {
height: 470px;
background-size: 800px;}
}

/* under 500 -------------------------------------------------------- */
@media screen and (max-width : 500px) {
.main-visual {
height: 290px;
background-size: 500px;}
}


/* main-ttl-area -------------------------------------------------------- */
.main-ttl-area {
background-image: url(image/flowre-bg-left.jpg), url(image/flowre-bg-right.jpg);
background-repeat: no-repeat, no-repeat;
background-position: left 0% bottom, right 0% top;
background-size: 32%, 32%;}

.main-ttl-inner {
text-align: center;
padding: 160px 0;}

.main-ttl {
font-weight: 900;
font-size: 23px;
margin-bottom: 30px;}

.main-ttl-english {
width: 600px;
margin: 0 auto 30px;}

.main-ttl-english img {width: 100%;}

/* under 1200 -------------------------------------------------------- */
@media screen and (max-width : 1200px) {
.main-ttl-inner {padding: 120px 0;}
.main-ttl {font-size: 20px;}
.main-ttl-english {width: 450px;}
}

/* under 800 -------------------------------------------------------- */
@media screen and (max-width : 800px) {
.main-ttl-area {background-size: 55%, 55%;}

.main-ttl-inner {padding: 100px 0;}
.main-ttl {font-size: 16px; margin-bottom: 20px;}
.main-ttl-english {font-size: 28px;}

.main-ttl-english {
width: 300px;
margin: 0 auto 20px;}
}


/* Aloha-area -------------------------------------------------------- */
.aloha-area {
background: linear-gradient(to bottom, #f7faf6, #dfe6d8);
padding: 100px 0;}

.aloha-text {
margin-bottom: 50px;
}

.aloha-box-left {
text-align: center;
color: #547933;
line-height: 50px;}

.aloha-box-left h2 {
width: 300px;
margin: 0 auto 50px;
}

.aloha-box-left h2 img {
width: 100%;
}

.aloha-box-right img {
width: 100%;
margin: 0 auto;
display: block;
}

/* under 800 -------------------------------------------------------- */
@media (max-width : 800px) {
.aloha-area {
padding: 50px 0;}

.aloha-box-left {
line-height: 30px;}

.aloha-box-left h2 {
width: 150px;
margin: 0 auto 30px;
}
}


/* Class-area -------------------------------------------------------- */
.class-area {padding: 120px 0;}

.class-area-box1, .class-area-box2, .class-area-box3, .class-area-box4 {
background-repeat: no-repeat;
background-position: center center;
background-size: 100%;
height: 450px;
color: #547933;
font-weight: 600;}

.class-area img {width: 100%; margin-bottom: 20px;}

.class-area-box1 {
background-image: url(image/class-area-box1.jpg);}

.class-area-box2 {
background-image: url(image/class-area-box2.jpg);}

.class-area-box3 {
background-image: url(image/class-area-box3.jpg);}

.class-area-box4 {
background-image: url(image/class-area-box4.jpg);}

.class-area-box-inner-right {
width: 500px;
float: right;
background-color: rgba(255,255,255,.8);
box-shadow: 0 0 8px #e7f0e3;
margin: 53px 130px 0 0;
padding: 30px;
height: 345px;}

.class-area-box-inner-left {
width: 500px;
float: left;
background-color: rgba(255,255,255,.8);
box-shadow: 0 0 8px #e7f0e3;
margin: 53px 0 0 130px;
padding: 30px;
height: 345px;}

.mgn {margin-bottom: 80px;}

.glayshas-area {
background-image: url(image/class-area-glayshas.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: 1950px;
height: 500px;
color: #547933;
font-weight: 600;
}

.glayshas-area-box {
width: 680px;
float: right;
margin: 80px 0 0;
background-color: rgba(255,255,255,.8);
box-shadow: 0 0 8px #e7f0e3;
padding: 30px;
height: 340px;}

.glayshas-area-box img {width: 80%; margin-bottom: 20px;}

/* under 1200 -------------------------------------------------------- */
@media (max-width : 1200px) {
.class-area {padding: 80px 0;}

.class-area-box1, .class-area-box2, .class-area-box3, .class-area-box4 {
height: 300px;}

.class-area img {width: 100%; margin-bottom: 15px;}

.class-area-box-inner-right {
width: 300px;
margin: 19px 80px 0 0;
height: 260px;}

.class-area-box-inner-left {
width: 300px;
margin: 19px 0 0 80px;
height: 260px;}

.class-area-box-inner-left, .class-area-box-inner-right {padding: 20px;}

.glayshas-area {
background-position: top left;
background-size: 1200px;
height: 376px;}

.glayshas-area-box {
width: 610px;
float: none;
margin: 60px auto 0;
height: 270px;
padding: 20px;}

.glayshas-area-box img {width: 70%;}

.class-area br {margin-bottom: 5px;}

@-moz-document url-prefix() {
.class-area-box-inner-left, .class-area-box-inner-right {line-height: 16px;}
}
}

/* under 800 -------------------------------------------------------- */
@media (max-width : 800px) {
.class-area-box1, .class-area-box3 {
border: 1px solid rgba(255,255,255,0);
background-position: top center;
background-size: 700px;
height: 520px;}

.class-area-box2, .class-area-box4 {
border: 1px solid rgba(255,255,255,0);
background-position: top center;
background-size: 700px;
height: 520px;}

.class-area {padding: 50px 0;}

.mgn {margin-bottom: 30px;}

.class-area-box1 {
background-image: url(image/class-area-box1-sp800.jpg);}

.class-area-box2 {
background-image: url(image/class-area-box2-sp800.jpg);}

.class-area-box3 {
background-image: url(image/class-area-box3-sp800.jpg);}

.class-area-box4 {
background-image: url(image/class-area-box4-sp800.jpg);}

.class-area-box-inner-right {
float: none;
width: 300px;
margin: 160px auto 0;
height: 260px;}

.class-area-box-inner-left {
float: none;
width: 300px;
margin: 160px auto 0;
height: 260px;}

.glayshas-area {
background-image: url(image/class-area-glayshas1200.jpg);
background-size: 800px;
height: 360px;}

.glayshas-area-box {
margin: 35px auto 0;
width: 440px;
height: 290px;}

.glayshas-area-box img {width: 90%;}
}

/* under 500 -------------------------------------------------------- */
@media (max-width : 500px) {
.class-area-box1, .class-area-box3 {
background-size: 500px;
height: 430px;}

.class-area-box2, .class-area-box4 {
background-size: 500px;
height: 430px;}

.class-area-box1 {
background-image: url(image/class-area-box1-sp.jpg);}

.class-area-box2 {
background-image: url(image/class-area-box2-sp.jpg);}

.class-area-box3 {
background-image: url(image/class-area-box3-sp.jpg);}

.class-area-box4 {
background-image: url(image/class-area-box4-sp.jpg);}

.class-area-box-inner-right {
float: none;
width: 280px;
margin: 120px auto 0;
height: 270px;}

.class-area-box-inner-left {
float: none;
width: 280px;
margin: 120px auto 0;
height: 270px;}

.glayshas-area {
background-image: url(image/class-area-glayshas500.jpg);
background-position: top center;
background-size: 500px;
height: 381px;}

.glayshas-area-box {
width: 300px;
height: 314px;}

.glayshas-area-box img {width: 110%; margin-bottom: 16px;}
}


/* Info area -------------------------------------------------------- */
.info-area {
background-color: #f4f8f3;
padding: 100px 0;
font-weight: 600;
color: #547933;
margin-top: 100px;
position: relative;}

.info-ttl {
position: absolute;
width: 420px;
top: -23px;
left: 0;
right: 0;
margin: auto;}

.info-ttl img{width: 100%;}

.info-area h2 {font-size: 120%; margin: 20px 0 10px;}

.info-areabox-left {
float: left;
width: 46%;}

.info-areabox-right {
float: right;
width: 46%;}

.info-areabox-left img, .info-areabox-right img {width: 100%;}

/* under 1200 -------------------------------------------------------- */
@media (max-width : 1200px) {
.info-area {padding: 80px 0; line-height: 18px; margin-top: 80px;}
.info-areabox-left, .info-areabox-right {width: 48%; font-size: 90%;}
.info-ttl {width: 350px; top: -20px;}
}

/* under 800 -------------------------------------------------------- */
@media (max-width : 800px) {
.info-area {padding: 50px 0;  margin-top: 30px;}
.info-areabox-left, .info-areabox-right {width: 100%; float: none;}
.info-areabox-left {margin-bottom: 30px;}
.info-ttl {width: 230px; top: -13px;}
}


/* Footer area -------------------------------------------------------- */
footer {background-color: #546d3e; padding: 100px 0 20px; color: #fff; text-align: center;}

.foot-wrap {width: 1000px; margin: 0 auto; overflow: hidden;}

.map {line-height: 0;}

.footer-logo {width: 300px; margin: 0 auto 30px;}

.foot-box-left {
width: 46%;
float: left;}

.foot-box-right {
width: 500px;
float: right;
height: 300px;}

.tel a {
font-size: 110%;
display: block;
margin: 0 auto 20px;
border: 1px solid #7bb348;
background-color: #7bb348;
padding: 15px;
width: 240px;
border-radius: 50px;
color: #fff;
}

.hassin {
text-align: center;
margin-bottom: 10px;
}

.copy {text-align: center; font-size: 12px; margin-top: 80px;}

.link a {
border: 1px solid #7bb348;
background-color: #7bb348;
padding: 15px;
width: 240px;
margin-top: 15px;
display: block;
border-radius: 50px;
margin: 20px auto 0;
color: #fff;}

.link a:hover {
border: 1px solid #7bb348;
background-color: #7bb348;
color: #fff;}

/* under 1200 -------------------------------------------------------- */
@media (max-width : 1200px) {
footer {padding: 60px 0 20px;}
.foot-wrap {width: 750px;}
.foot-box-right {width: 380px;}
.copy {margin-top: 50px;}
}

/* under 800 -------------------------------------------------------- */
@media (max-width : 800px) {
.foot-wrap {width: 90%;}

.footer-logo {width: 270px;}

.foot-box-left {
width: 100%;
float: none;
margin-bottom: 30px;}

.foot-box-right {
width: 100%;
float: none;}

.copy {font-size: 10px;}

.link a {margin: 20px auto 50px;}
}


/* Contact page -------------------------------------------------------- */
.sub-ttl {margin: 80px auto; width: 300px;}
.sub-ttl img {width: 100%;}

#formWrap {

max-width: 800px;
width: 90%;
height: auto;
margin: 0 auto 60px;
color: #546d3e;}

input#formbutton {
-webkit-appearance: none;
width: 140px;
padding: 10px 0 9px;
margin: 0 5px;
background: #7bb348;
border: 3px solid #7bb348;
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: #546d3e;
color: #fff;
border: 3px solid #546d3e;}

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

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

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

.home {margin: 0 auto 100px; width: 100px;}
.home img {width: 100%;}

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: 45%;}

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

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

.sousinend {color: #546d3e;}

/* under 800 -------------------------------------------------------- */
@media screen and (max-width : 800px) {
.input_area2 {height: 200px;}
.sub-ttl {margin: 40px auto; width: 220px;}
#formWrap {margin: 0 auto 50px;}
.home {margin: 0 auto 60px;}
th, td {display: block; width: 100%;}
td {text-align: left;}
}


/* Opning -------------------------------------------------------- */
.opning {
background: #FFF;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 9000;}

.opning p {
position: fixed;
left: 50%;
top: 45%;
transform: translate(-50%, -50%);
display: none;
z-index: 9999;
max-width: 600px;
width: 70%;}

.opning p img {width: 100%;}

/* under 1200 -------------------------------------------------------- */
@media (max-width : 1200px) {
.opning p {width: 40%;}
}

/* under 800 -------------------------------------------------------- */
@media (max-width : 800px) {
.opning p {width: 80%;}
}


/* Scrollanime -------------------------------------------------------- */
.scrollanime {opacity: 0;}
.fadeInDown {
animation-name: fadeInDown;
animation-duration: 2s;
animation-fill-mode: forwards;}

@keyframes fadeInDown {
0% {opacity: 0;}
100% {
opacity: 1;
transform: translate(0);}
}
 
.updown {transform: translateY(-50px);}
.downup {transform: translateY(50px);}
 
.sect02 {overflow: hidden;}
.slide-right {transform: translateX(50px);}
.slide-left {transform: translateX(-50px);}


/* Scroll down -------------------------------------------------------- */
.hero__scroll {
position: absolute;
color: #fff;
text-align: center;
font-size: 80%;
font-weight: bold;
letter-spacing: 3px;
margin: 10% auto 0;
display: block;
top: auto;
right: 0;
bottom: 50px;
left: 0;
margin-right: auto;
margin-left: auto;
text-transform: uppercase;}

.hero__scroll img  {width: 20px;}

.hero__scroll .chevron {
margin-top: 10px;
display: block;
-webkit-animation: pulse 2s infinite;
animation: pulse 2s infinite;
color: #fff;}

@-webkit-keyframes pulse {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0); }
50% {
-webkit-transform: translate(0, 10px);
transform: translate(0, 10px); }
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0); }}

@keyframes pulse {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);}
50% {
-webkit-transform: translate(0, 10px);
transform: translate(0, 10px);}
  100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);}}


/* Other -------------------------------------------------------- */
main {font-weight: 900;}
.contents-wrap {margin: 0 auto; width: 1300px; overflow: hidden;}
.light-green {color: #7bb349;}
.deep-green {color: #546d3e;}
.letter-space {letter-spacing: 8px; text-indent: 8px;}
.nomal {font-weight: 600;}
.bold {font-weight: 900;}
address {font-style: normal;}
.bg-color {margin-bottom: 50px; background-color: #f2f6ef; padding: 14px;border-radius: 10px;}
.center {text-align: center;}
.red {font-size: 80%; color: #c30000;}
.p-mgn {margin-bottom: 25px;}
.p-mgn2 {margin-bottom: 8px;}
.text {line-height: 15px; margin: 0 0 50px; font-size: 90%;}

/* under 1700 -------------------------------------------------------- */
@media (max-width : 1700px) {
.contents-wrap {width: 1150px;}
}

/* under 1200 -------------------------------------------------------- */
@media screen and (max-width : 1200px) {
body, text {font-size: 15px;}
.contents-wrap {width: 750px;}
.letter-space {letter-spacing: 2px; text-indent: 2px;}
.p-mgn {margin-bottom: 15px;}
}

/* under 800 -------------------------------------------------------- */
@media screen and (max-width : 800px) {
body, text {font-size: 14px;}
.pc, .hero__scroll, .hero__scroll img {display: none;}
.contents-wrap {width: 90%;}
.bg-color {font-size: 13px;}
.center {text-align: left;}
.p-mgn {margin-bottom: 19px;}
.spbr {display: block;}
}

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