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

*,*::before,*::after{
margin: 0;
padding: 0;
box-sizing: border-box;
}

*{
font-family: "Zen Maru Gothic", sans-serif;
font-weight: 700;
font-style: normal;
}

img{
max-width: 100%;
height: auto;
vertical-align: bottom;
}

body{
min-width: 1360px;
background-image: url("../images/mainbg.png");
background-size: 100%;
}

@media(max-width:767px){
body{
min-width:100%;
}
}

h2{
width: 1000px;
margin: 20px auto;
}
@media(max-width:767px){
h2{
width: 100%;
}
}



h3{
font-size: 32px;
}

.main{

}


.main-visual{
background-image: url("../images/mainvisual.png");
background-size: cover;
background-position: center;
text-align: center;
height: 85vh;
}
@media(max-width:767px){
.main-visual{
background-image: url("../images/mainvisual_sp.jpg");
width: 100%;
background-size: cover;
background-position: center;
text-align: center;
}
}


.main-visual img{
margin: 10vh 0 20vh 0 ;
width: 600px;
}
@media(max-width:767px){
.main-visual img{
margin: 15vh 0 20vh 0 ;
width: 70vw;
}
}

.container{
width: 1260px;
margin: 0 auto;
overflow: hidden;
}

@media(max-width:767px){
.container{
width: 90%;
margin: 0 auto;
}
}

.goodpoint{
position: relative;
}

.goodpoint::before {
    content: '';
    position: absolute;
	top: 0;
    bottom: 0;
    left: 0;
    right: 0;	
	height: 35vh;
	background-image: url("../images/sectionbg01.png");
    transform: skewY(5deg);
    z-index: -1;
	animation: paint 2.5s ease-in-out normal;
}

 @keyframes paint{
 0%{
	width: 0;
}
 100%{
	width: 100%
 }
}

.goodpointCard{
display: flex;
justify-content: space-around;
}

@media(max-width:767px){
.goodpointCard{
/*display: block;*/
flex-direction: column;
text-align: center;
}
.goodpointCard img{
width: 100%;
margin: 10px 0;
}
}

.location{
position: relative;
}

.location::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
	height: 35vh;
	background-image: url("../images/sectionbg02.png");
    transform: skewY(-7deg);
    z-index: -1;
	animation: paint 2.5s ease-in-out normal;
}

.locationCard{
display: flex;
justify-content: space-between;
align-items: center;
padding: 50px 0;
position: relative;
}

.bird01{
position: absolute;
width: 80px;
left: 50%;
top: 43%;
z-index: -1;
}
.bird02{
position: absolute;
width: 50px;
left: 53%;
top: 57%;
z-index: -1;
}

@media(max-width:767px){
.bird01{
position: absolute;
width: 80px;
left: 78%;
top: 80%;
z-index: -1;
}
.bird02{
position: absolute;
width: 50px;
left: 84%;
top: 88%;
z-index: -1;
}
}


.locationCardR{
display: flex;
justify-content: space-between;
align-items: center;
padding: 50px 0;
position: relative;
}

.oushou{
position: absolute;
width: 100px;
left: 44%;
top: 50%;
z-index: -1;
}
.hisha{
position: absolute;
width: 80px;
left: 42%;
top: 46%;
z-index: -1;
}
@media(max-width:767px){
.oushou{
position: absolute;
width: 80px;
left: 5%;
top: 83%;
z-index: -1;
}
.hisha{
position: absolute;
width: 60px;
left: 1%;
top: 84%;
z-index: -1;
}
}



.kokeshi01{
position: absolute;
width: 90px;
left: 41%;
top: 43%;
z-index: -1;
}
.kokeshi02{
position: absolute;
width: 80px;
left: 44%;
top: 50%;
z-index: -1;
}

@media(max-width:767px){
.kokeshi01{
position: absolute;
width: 70px;
left: 3%;
top: 81%;
z-index: -1;
}
.kokeshi02{
position: absolute;
width: 60px;
left: 8%;
top: 82%;
z-index: -1;
}
}



@media(max-width:767px){
.locationCard{
flex-direction: column;
}
.locationCardR{
flex-direction: column-reverse;
}
}

.locationCard__text{
width: 500px;
}
@media(max-width:767px){
.locationCard__text{
width: 90%;
}
}

.button_center{
display: flex;
justify-content: center;
}

.locationCard__text a{
font-family: "Noto Sans JP", sans-serif;
font-style: normal;
font-weight: 500;
display: inline-block;
margin: 15px;
padding: 0.8rem 2rem;
border-radius: 10px;
background-color: #f394ff;
color: #fff;
text-decoration: none;
font-size: 24px;
box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0.5);
border: 1px solid #000;
transition: .1s ease-in-out;
}

.locationCard__text a:hover{
transform: translate(2px,2px);
box-shadow: none;
background-color: #fff;
color: #000;
border: 1px solid #000;
}

.locationCard__text p{
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  line-height: 2.3;
  }

/*.locationCard__image{
background-image: url(../images/yamagatajou01.png);
background-size: cover;
}*/

.locationCard__image img{
width: 600px;
}


/*↓画像の上にふわっと出すやつ↓*/
.fadeIn_up {
  opacity: 0;
  transform: translate(0, 50%);
  transition: 1s;
}
.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

.fadeIn_side {
  opacity: 0.6;
  transform: translate(100%, 10%);
  transition: 2s;
}
.fadeIn_side.is-show {
  transform: translate(0, 0);
  opacity: 1;
}


.huwahuwaX {
	position: absolute;
    animation: huwahuwaX 5s infinite ease-in-out;
	z-index: -1;
}

.huwahuwaX2 {
	position: absolute;
    animation: huwahuwaX2 3s infinite ease-in-out;
	z-index: -1;
}



@keyframes huwahuwaX {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(8%);
    }
}


@keyframes huwahuwaX2 {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(6%);
    }
}

.huwahuwaY {
    animation: huwahuwaY 4s infinite ease-in-out;
}


.huwahuwaY2 {
    animation: huwahuwaY 6s infinite ease-in-out;
}

@keyframes huwahuwaY {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(6%);
    }
}

@keyframes huwahuwaY {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(7%);
    }
}



/*↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑*/

.location h3{
padding: 10px 0;
}

.anim-box{
  animation: popup 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
 
@keyframes popup {
  0% {
    transform: translateY(40px) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1.0);
  }
  80%, 100% {
    opacity: 1;
  }
}

.reservation{
position: relative;
}

.reservation::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
	height: 35vh;
	background-image: url("../images/sectionbg01.png");
    transform: skewY(7deg);
    z-index: -1;
	animation: paint 2.5s ease-in-out normal;
}

.reservationCard{
display: flex;
}
@media(max-width:767px){
.reservationCard{
flex-wrap: wrap;
}
}
.l-wrapper_01 {
  margin: 3rem;
  width: 95%;
}
@media(max-width:767px){
.l-wrapper_01 {
  margin: 1rem auto;
  width: 45%;
}
}
/*.l-wrapper_01:hover {
  transform: translateY(-3px);
  box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
  transition: all .5s;
}*/

.card_01 {
  background-color: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, .16);
  color: #212121;
  text-decoration: none;
  border-radius: 10px;
  overflow: hidden;
}

.card__header_01 {
  display: flex;
  flex-wrap: wrap;
}

.card__title_01 {
  padding: 1rem 1.5rem 0;
  font-size: 1.6rem;
  order: 1;
  margin-bottom: 0.6rem;
  font-weight: bold;
  text-decoration: none;
}

.card__thumbnail_01 {
  margin: 0;
  order: 0;
}

.card__image_01 {
  width: 100%;
}

.card__body_01 {
  padding: 0 1.5rem;
}

.card__text_01 {
  font-size: 1rem;
  text-align:center;
  text-decoration: none;
	padding-bottom: 0;
}

.card__text2_01 {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 1rem;
  margin-top: 0;
  margin-bottom: .5rem;
  line-height: 1.7;
}

.card__text_01 + .card__text_01 {
  margin-top: .5rem;
}

.card__footer_01 {
  padding: 1rem 0 1.5rem 0;
}

.button_01 {
  display: inline-block;
  text-decoration: none;
  transition: background-color .3s ease-in-out;
  text-align: center;
}

.button_01 a {
  text-decoration: none;
}

.button_01.-compact {
  font-family: "Noto Sans JP", sans-serif;
  font-style: normal;
  font-weight: 500;
  padding: 1rem 2rem;
  border-radius: 10px;
  background-color: #E99800;
  color: #fff;
  text-decoration: none;
  box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0.5);
  transform: .1s;
}

.button_01.-compact:hover,
.button_01.-compact:focus {
  transform: translate(2px,2px);
  background-color: #F0F0F0;
  box-shadow: none;
  color: #000;
}

footer{
margin: 0 auto;
border-top: solid 5px #a0ff94;
background-color: #fff;
}

.footer__logo{
margin: 15px auto;
width: 150px;
}