@charset "UTF-8";
/* CSS Document */

/*
font-family: 'Gloria Hallelujah', cursive;
font-family: 'Josefin Sans', sans-serif;
font-family: 'M PLUS Rounded 1c', sans-serif;
font-family: 'Yusei Magic', sans-serif;
*/


/*index*/
#i-top{
background: url("/img/i_head_back.jpg") center bottom/cover;
height: 800px;
margin-top:-100px;
position: relative;
}
#i-top img{
width: 100%;
}
#i-top .i-top01{
position: absolute;
top:70px;
left:80px;
width: 300px;
z-index: 1;
}
#i-top .i-top02{
position: absolute;
bottom:0;
left:0;
width: 50%;
}
#i-top .i-top03{
position: absolute;
bottom:0;
right: 0;
width: 80%;
height: 100%;
background: url("/img/i-top03.png") no-repeat top 70px right /80%;
}
#i-top .i-top04{
position: absolute;
bottom:10px;
right:30px;
width: 230px;
}
.animation{
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1.2s;
}
.keyframe{
  animation-name: anim_v;
}

@keyframes anim_v {
  0% {transform: translate(0, 0px);}
  100% {transform: translate(0, -15px);}
}
@media screen and (max-width: 768px) {
#i-top{height: 630px;}
#i-top .i-top01{
position: absolute;
top:200px;
left:50%;
transform: translate(-50%, 0);
max-width: 250px;
}
#i-top .i-top02{
position: absolute;
bottom:0;
left:0;
width: 60%;
}
#i-top .i-top03{
position: absolute;
bottom:0;
right: 0;
width: 90%;
height: 100%;
background: url("/img/i-top03.png") no-repeat top 70px right /80%;
}
#i-top .i-top04{
position: absolute;
bottom:0px;
right:10px;
width: 130px;
z-index: 3;
}
}
.slide {
  width : calc(100% - 2rem);
  height: 100%;
  margin: 1rem auto;
}
.slide img {
  width: 100%;
  object-fit: cover;
  display: inline-block;
  border-radius: 4rem;
  padding: 1rem;
}
@media screen and (max-width: 768px) {
.slide img {
  border-radius: 2rem;
  padding: 0.5rem;
}
}
#i-about{
margin-top: 4rem;
position: relative;
background: url("/img/i-about_back.jpg") no-repeat top center/cover;
padding-bottom: 200px;
}
#i-about .line-stripe{
width: 100%;
height: 95px;
background: url("/img/line-stripe.jpg") repeat-x top center;
}
#i-about .leaf{
position: absolute;
left: 0;
top: 0;
animation-duration: 2.5s;
}
#i-about .leaf img{
width: 250px;
}
#i-about h3{
margin: 50px 0 0;
font-family: 'Gloria Hallelujah', cursive;
font-size: 8rem;
letter-spacing: 0.8rem;
text-shadow:2px 2px 3px #999;
text-align: center;
color: #fff;
transform: rotate( -5deg );
animation-duration: 2.5s;
}
#i-about h2{
margin: 50px auto 0;
padding-bottom: 2rem;
border-bottom: 1px solid #6B4D05;
color: #6B4D05;
text-align: center;
font-size: 3rem;
letter-spacing: 0.8rem;
max-width: 800px;
}
#i-about p{
margin: 2rem auto;
font-size: 1.8rem;
max-width: 800px;
color: #6B4D05;
line-height: 4rem;
}
#i-about .about_img{
margin: 5rem auto 0;
max-width: 800px;
display: flex;
justify-content: space-between;
}
#i-about .about_img img{
max-width: 120px;
}
#i-about .about_button{
position: relative;
max-width: 1000px;
margin: 0 auto;
}
#i-about .about_button a{
display: inline-block;
width: 50%;
overflow: hidden;
cursor: pointer;
padding: 2rem 2rem 2rem 0;
}
#i-about .about_button a:nth-child(1){
position: absolute;
top:-10rem;
left: 25px;
z-index: 1;
}
#i-about .about_button a:nth-child(2){
position: absolute;
top:-10rem;
right: 25px;
}
#i-about .about_button img{
width: 100%;
transition-duration: 0.5s;
}
#i-about .about_button img:hover{
transform: scale(1.08);
transition-duration: 0.5s;
}
@media screen and (max-width: 768px) {
#i-about{padding-bottom: 20px;}
#i-about .text-box{padding: 0 20px;}
#i-about .line-stripe{height: 60px;}
#i-about .leaf img{width: 150px;}
#i-about h3{font-size: 5rem;letter-spacing: 0.8rem;}
#i-about h2{font-size: 2rem;letter-spacing: 0.2rem;}
#i-about p{font-size: 1.6rem;line-height: 3rem;}
#i-about .about_img img{max-width: 16.6%;}
#i-about .about_button a{display: block;width: 100%;padding: 1rem;}
#i-about .about_button a:nth-child(1){position: relative;top:0rem;left: 0;padding-bottom: 0;}
#i-about .about_button a:nth-child(2){position: relative;top:-1rem;right:0;padding-top: 0;}
}

#i-start{
margin-top: -11rem;
padding-bottom: 2rem;
z-index: 1;
position: relative;
}
#i-start .line-cloud01{
width: 100%;
height: 130px;
background: url("/img/line-cloud01.png") repeat-x top center;
animation-duration: 3s;
}
#i-start .line-cloud02{
width: 100%;
height: 153px;
background: url("/img/line-cloud02.png") repeat-x bottom center;
animation-duration: 3s;
}
#i-start .contents-box{
max-width: 840px;
margin: 0 auto;
}
#i-start .text-box{
max-width: 800px;
min-height: 500px;
margin: 50px 0 10px;
}
#i-start h2{
margin-top: 30px;
padding-bottom: 2rem;
border-bottom: 1px solid #6B4D05;
color: #6B4D05;
font-size: 3rem;
letter-spacing: 0.8rem;
}
#i-start p{
margin: 2rem auto;
font-size: 1.8rem;
color: #6B4D05;
line-height: 4rem;
}
#i-start .car{
position: absolute;
right: 0;
top: 80px;
animation-duration: 2.5s;
}
#i-start .car img{
width: 500px;
}
@media screen and (max-width: 1580px) {
#i-start .text-box{max-width: 500px;}
}
@media screen and (max-width: 1200px) {
#i-start .car{top: 150px;}
#i-start .car img{width: 400px;}
}
@media screen and (max-width: 1000px) {
#i-start .car{top: 200px;}
#i-start .car img{width: 300px;}
}
@media screen and (max-width: 865px) {
#i-start .line-cloud01{background-size: 130%;height: 150px;}
#i-start .line-cloud02{height: 180px;background-size: 150%;}
#i-start .car{top: 250px;}
#i-start .car img{width: 250px;}
}
@media screen and (max-width: 768px) {
#i-start{margin-top: -5rem;padding-bottom: 10rem;}
#i-start .text-box{max-width: 800px;width: 100%;padding: 0 20px;min-height: 300px;}
#i-start .text-box img{width: 150px;}
#i-start h3{font-size: 5rem;letter-spacing: 0.8rem;}
#i-start h2{font-size: 2rem;letter-spacing: 0.2rem;}
#i-start p{font-size: 1.6rem;line-height: 3rem;}
#i-start .line-cloud01{background-size: 150%;height: 150px;}
#i-start .line-cloud02{height: 100px;background-size: 150%;}
#i-start .car{top: 10px;}
#i-start .car img{width: 180px;}
}

#i-shima{
margin-top: -153px;
padding-top: 180px;
background: url("/img/i-shima_back.jpg") top center / cover;
position: relative;
}
#i-shima .contents-box{
max-width: 840px;
margin: 0 auto;
}
#i-shima .text-box{
text-align: center;
}
#i-shima .text-box img{
max-width: 180px;
}
#i-shima h2{
margin-top: 30px;
padding-bottom: 2rem;
border-bottom: 1px solid #6B4D05;
color: #6B4D05;
font-size: 3rem;
letter-spacing: 0.8rem;
}
#i-shima p{
margin: 2rem auto;
font-size: 1.8rem;
color: #6B4D05;
line-height: 4rem;
text-align: left;
}
#i-shima .tree{
padding-top: 100px;
}
#i-shima .tree img{
animation-duration: 2.5s;
}
#i-shima .tree img:nth-of-type(1){
display: block;
position: absolute;
bottom: 0;
left: 0;
animation-delay: 1s;
}
#i-shima .tree img:nth-of-type(2){
display: block;
position: absolute;
bottom: 0;
right: 0;
animation-delay: 1s;
}
@media screen and (max-width: 768px) {
#i-shima{padding-top: 80px;}
#i-shima .text-box{padding: 0 20px;}
#i-shima .text-box img{width: 130px;}
#i-shima h2{font-size: 2rem;letter-spacing: 0.2rem;text-align: left;}
#i-shima p{font-size: 1.6rem;line-height: 3rem;}
#i-shima .tree{padding-top: 150px;}
#i-shima .tree img:nth-of-type(1){display: none;}
#i-shima .tree img:nth-of-type(2){width: 220px;animation-delay: 0s;}
}

#i-conce{
background: url("/img/i-conce_back.jpg") top center / cover;
}
#i-conce .line-stripe{
width: 100%;
height: 95px;
background: url("/img/line-stripe.jpg") repeat-x top center;
}
#i-conce .i-conce_box{
position: relative;
}
#i-conce .i-conce_box img{
width: calc(50% - 20px);
animation-duration: 3s;
position: absolute;
top: -50px;
left: 0;
}
#i-conce .i-conce_box .text-box{
width: calc(50% - 50px);
margin-left: auto;
margin-right: 30px;
padding-bottom: 30px;
}
#i-conce h3{
margin: 50px 0 0;
font-family: 'Gloria Hallelujah', cursive;
font-size: 8rem;
letter-spacing: 0.8rem;
text-shadow:2px 2px 3px #999;
text-align: center;
color: #fff;
transform: rotate( -5deg );
animation-duration: 2.5s;
}
#i-conce h2{
margin: 50px auto 0;
padding-bottom: 2rem;
border-bottom: 1px solid #6B4D05;
color: #6B4D05;
text-align: center;
font-size: 3rem;
letter-spacing: 0.8rem;
max-width: 800px;
}
#i-conce p{
margin: 2rem auto;
font-size: 1.8rem;
max-width: 800px;
color: #6B4D05;
line-height: 4rem;
}
#i-conce .i-conce_box2{
position: relative;
width: 100%;
}
#i-conce .i-conce_box2 img:nth-of-type(1){
width: calc(50%);
animation-duration: 3s;
animation-delay: 1s;
display: block;
position: absolute;
top: 0;
left: 0;
mix-blend-mode:multiply;
z-index: 1;
}
#i-conce .i-conce_box2 img:nth-of-type(2){
width: calc(60%);
animation-duration: 3s;
display: block;
position: absolute;
top: 0;
right: 0;
}
#i-conce .i-conce_box3{
position: relative;
margin-top: 450px;
text-align: center;
}
#i-conce .i-conce_box3 img{
width: calc(50% - 20px);
animation-duration: 3s;
display: block;
position: absolute;
top: 0;
left: 0;
}
#i-conce .i-conce_box3 .text-box{
width: calc(50% - 50px);
margin-left: auto;
margin-right: 30px;
padding-bottom: 30px;
}
#i-conce .i-conce_box4{
position: relative;
margin-top: 250px;
}
#i-conce .i-conce_box4 img:nth-of-type(1){
width: 500px;
animation-duration: 3s;
display: block;
position: absolute;
bottom: -50px;
right: 0;
}
#i-conce .i-conce_box4 img:nth-of-type(2){
display: block;
animation-duration: 3s;
margin: 0 auto;
animation-delay: 1s;
}
#i-conce .i-conce_box4 img:nth-of-type(3){
display: none;
}
#i-conce .i-conce_box4 .text-box{
width: calc(50%);
padding-bottom: 20px;
text-align: center;
}
@media screen and (max-width: 900px) {
#i-conce h3{font-size: 4rem;letter-spacing: 0.8rem;}
#i-conce .i-conce_box3{margin-top: 300px;}
#i-conce .i-conce_box4{margin-top: 50px;}
#i-conce .i-conce_box4 img:nth-of-type(1){width: 300px;}
}
@media screen and (max-width: 768px) {
#i-conce .line-stripe{height: 60px;}
#i-conce h3{font-size: 5rem;margin-top: 200px;}
#i-conce h2{margin-top: 35px; font-size: 2rem;letter-spacing: 0.2rem;}
#i-conce p{font-size: 1.6rem;line-height: 3rem;}
#i-conce .i-conce_box img{width: calc(70%);top:0;}
#i-conce .i-conce_box .text-box{width: calc(100%);padding: 100px 20px 20px;}
#i-conce .i-conce_box3{margin-top: 270px;}
#i-conce .i-conce_box3 img{display: none;}
#i-conce .i-conce_box3 .text-box{width: calc(100%);padding: 0 20px 20px;}
#i-conce .i-conce_box4{margin-top: 0px;}
#i-conce .i-conce_box4 img:nth-of-type(1){width: 40%;
top:-50px;}
#i-conce .i-conce_box4 img:nth-of-type(2){display: none;}
#i-conce .i-conce_box4 img:nth-of-type(3){width: calc(50%);display: block;position: absolute;top: 0;left: 0;animation-duration: 3s;}
#i-conce .i-conce_box4 .text-box{width: 100%;margin:0;padding-bottom: 50px;padding-top: 300px;}
}
@media screen and (max-width: 550px) {
#i-conce h3{margin-top: 100px;}
#i-conce .i-conce_box3{margin-top: 170px;}
#i-conce .i-conce_box4 .text-box{padding-top: 180px;}
}

#i-menu{
background: url("/img/i-menu_back.jpg") top center / cover;
}
#i-menu .line-stripe{
width: 100%;
height: 95px;
background: url("/img/line-stripe.jpg") repeat-x top center;
}
#i-menu .text-box{
max-width: 800px;
margin: 100px auto 0;
padding: 0 20px;
position: relative;
}
#i-menu h3{
margin: 50px 0 0;
font-family: 'Gloria Hallelujah', cursive;
font-size: 8rem;
letter-spacing: 0.8rem;
text-shadow:2px 2px 3px #999;
text-align: center;
color: #fff;
transform: rotate( -5deg );
animation-duration: 2.5s;
}
#i-menu h2{
margin: 50px auto 0;
padding-bottom: 2rem;
border-bottom: 1px solid #6B4D05;
color: #6B4D05;
text-align: center;
font-size: 3rem;
letter-spacing: 0.8rem;
max-width: 800px;
}
#i-menu p{
margin: 2rem auto;
font-size: 1.8rem;
max-width: 800px;
color: #6B4D05;
line-height: 4rem;
}
#i-menu .text-box img{
animation-duration: 3s;
width: 100%;
}
#i-menu .button{
margin: 50px auto 100px;
}
@media screen and (max-width: 768px) {
#i-menu .text-box{margin-top: 70px; padding: 0 20px;}
#i-menu h3{margin-top: 0;font-size: 5rem;letter-spacing: 0.8rem;}
#i-menu h2{font-size: 2rem;letter-spacing: 0.2rem;}
#i-menu p{font-size: 1.6rem;line-height: 3rem;}
#i-menu .button{margin-bottom: 70px;}
}