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

*, *::before, *::after{
margin: 0;
padding: 0;
box-sizing: border-box;
/*outline:1px solid #f00;*/
}

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

body{
min-width: 1080px;
color: #362e2b;
font-family: serif;
}

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

a{
text-decoration: none;
color:#362e2b;
}

a:hover{
opacity: 0.7;
}

/*=====ヘッダーここから=====*/
header{
background-color: #eae6e1;
}

.container{
width:1080px;
margin: 0 auto;
}

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

.header-inner{
display: flex;
justify-content: space-between;
height: 80px;
align-items: center;
}

@media(max-width:767px){
.header-inner{
display: block;
height: auto;
padding:10px;
margin: 0 auto;
}
}

h1{
width:380px;
}

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

.grobal-nav ul{
height: 80px;
list-style: none;
display: flex;
justify-content: center;
align-items:flex-end;
}

@media(max-width:767px){
.grobal-nav ul{
height: 60%;
width:100%;
display: block;
}
}

.grobal-nav li{
position: relative;
}

.grobal-nav a{
display:block;
padding: 10px;
margin: 0 auto;
color:#262724;
text-decoration: none;
font-weight: bold;
position:relative;
}

@media(max-width:767px){
.grobal-nav a{
text-align: center;
}
}

.grobal-nav a:hover{
transform:translate(0px,-5px);
}

.grobal-nav a:hover::after{
content:"";
display:block;
width:80%;
height: 5px;
border-radius: 2.5px;
position:absolute;
bottom:7px;
background-color: #e4c1b5;
}

@media(max-width:767px){
.grobal-nav a:hover::after{
background-color:#eae6e1 ;
}
}


/*=====ヘッダーここまで=====*/

/*=====メインビジュアル=====*/

.first-view{
background-color:#eae6e1;
height:720px;
background-image: url("../images/main-visual.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}

@media(max-width:767px){
.first-view{
height:80vh;
}
}

.first-view .container{

}

/*.fv-contents{
position:relative; 
color: #333;
display:flex;
width: 700px;
flex-direction: column;
height: 250px;
align-content: space-between;
bottom: 40px;
}*/


.fv-contents{
position:relative;
height:720px;
overflow-x: hidden;
}

@media(max-width:767px){
.fv-contents{
height: 100%;
}
}

.fv-contents p{
display: inline-block;
position: absolute;
right: 0;
background-color: #fff;
background: linear-gradient(90deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 15%, rgba(255, 255, 255, 0.8) 100%);
line-height: 50%;
font-size: 30px;
padding:0 0 0 80px;
text-shadow: 0 0 10px rgba(255,255,255,0.95);
}

.fv-contents .overlay-text{
font-size: 50px;
font-family: "Pinyon Script", cursive;
font-weight: 400;
font-style: normal;
color: #eae6e1;
display: block;
width: 500px;
position: absolute;
bottom: 0;
right: 250px;
transform: rotate(-15deg);
text-shadow: 0 0 10px rgba(0,0,0,0.5);
}


.fv-contents-short{
bottom:180px;
}

@media(max-width:767px){
.fv-contents-short{
bottom:100px;
}
.fv-contents .overlay-text{
position: absolute;
bottom: 0;
right: 25%;
}

}

.fv-contents-long{
bottom:60px;
}

@media(max-width:767px){
.fv-contents-long{
bottom:50px;
}
}

.fv-contents span{

justify-content: flex-end;
text-align: right;
margin: 15px 0;
}


.fadeIn_right {
  opacity: 0;
  transform: translate(50%, 0);
  transition: 2s;
}

.fadeIn_right.is-show{
  transform: translate(0, 0);
  opacity: 1;
  
display: inline-block;
position: absolute;
right:0;
background-color: #fff;
background: linear-gradient(90deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 21%, rgba(255, 255, 255, 0.8) 100%);
line-height: 2em;
font-size: 30px;
padding:0 0 0 80px;
text-shadow: 0 0 10px rgba(255,255,255,0.95);
}

@media(max-width:767px){
.fadeIn_right.is-show{
font-size:14px;
line-height: 2em;
}
}

/*=====メインビジュアルここまで=====*/

/*=====バナー=====*/

.banner-small{
background-color: #eae6e1;
}

.banner-small .container{
display: flex;
height: 320px;
justify-content: space-between;
align-items: center;
padding: 80px 0;
}

@media(max-width:767px){
.banner-small .container{
display:block;
height: 700px;
margin: 0 auto;
}

.banner-small a{
display: block;
margin:20px auto;
text-align: center;
}
}



/*＝＝＝＝＝コンセプト＝＝＝＝＝*/

#concept{
background-color: #eae6e1;
}

#concept .container{
display: flex;
height: 600px;
justify-content: space-between;
align-items: flex-start;
padding: 120px 0;
}

@media(max-width:767px){
#concept .container{
display:block;
height:auto;
}
}



.concept__movie{
width: 640px;
}

@media(max-width:767px){
.concept__movie{
width: 100%;
}
}

.concept__txt{
width:400px;
height:360px;
font-size: 14px;
justify-content: flex-end;
position: relative;
}

@media(max-width:767px){
.concept__txt{
width: 100%;
height: auto;
}
}

h2{
font-size: 86px;
font-family:Georgia, "Times New Roman", Times, "serif";
color:#362e2b;
text-align: center;
font-family: "Lusitana", serif;
font-weight: 400;
font-style: normal;
position: relative;
}

#concept h2{
color:#e4c1b5;
text-align: right;
font-size:80px;
margin-bottom: 0;
}

#concept h3{
font-size: 19px;
color: #362e2b;
margin-top: -10%;
margin-bottom: 20px;
position: relative;
z-index: 1;
}

@media(max-width:767px){
h2{
font-size: 50px;
}
	
#concept h2{
font-size: 50px;
}
	
#concept h3{
font-size: 20px;
}
}

.concept__txt p{
margin-bottom: 30px;
}

.concept__txt a{
text-decoration: none;
color: #fff;
font-size: 17px;
display: block;
background-color: #e4c1b5;
width:200px;
height: 45px;
text-align: center;
padding:10px 0;
margin-bottom: 0;
position:absolute;
left:0;
bottom:0;
}

@media(max-width:767px){
.concept__txt a{
position:static;
margin: 0 auto;
}
}

.concept__txt a:hover{
box-shadow: 3px 3px 0 0 rgba(129,129,129,1);
transform:translate(-2px,-2px);
}


/*＝＝＝＝＝メニュー＝＝＝＝＝*/

#menu{
background-color: #e4c1b5;
padding: 120px 0;
}

#menu .h2-container{
width:1080px;
margin: 0 auto;
}

@media(max-width:767px){
#menu .h2-container{
width:90%;
}
}

#menu span{
display: block;
width: 120px;
margin: 0 auto;
font-size:26px;
color:#362e2b;
text-align: center;
font-weight: 400;
margin-bottom: 30px;
}

#menu .overlay-text{
font-size: 50px;
font-family: "Pinyon Script", cursive;
font-weight: 400;
font-style: normal;
color: #eae6e1;
display: block;
width: 500px;
position: absolute;
top:0px;
bottom: 0;
right: 0;
left: 200px;
margin:auto 0; 
transform: rotate(-15deg);
}

@media(max-width:767px){
#menu .overlay-text{
font-size: 30px;
width:50%;
left:10%;
}
}

#menu h4{
padding: 25px 0;
font-size: 22px;
}

#menu .container{
display: flex;
height: 600px;
justify-content: space-between;
padding: 0 0 120px;
}

@media(max-width:767px){
#menu h4{
font-size: 20px;
}

#menu .container{
display: block;
height: auto;
}
}

.menu-card{
width:320px;
height: 500px;
justify-content: center;
align-content: space-between;
background-color: #eae6e1;
padding:20px 0;
box-shadow: 4px 4px 12px rgba(139, 69, 19, 0.4);
border-radius: 10px;
}

@media(max-width:767px){
.menu-card{
display: block;
width:80%;
height: auto;
margin: 50px auto;
}
}

.menu-card__img{
width:240px;
margin:0 auto;
}

/*@media(max-width:767px){
.menu-card__img{
width:40%;
}
}*/


.menu-card__img img{
border-radius: 50%;
box-shadow: 5px 5px 5px 5px rgba(129,129,129,0.8);
}

.menu-card__txt{
text-align: center;
font-size: 16px;
}

#menu > p > a{
text-decoration: none;
color: #362e2b;
font-size: 17px;
display: block;
margin: 0 auto;
background-color: #e4c1b5;
border: 1px solid #362e2b;
width:200px;
height: 45px;
text-align: center;
padding:10px 0;
}

#menu > p > a:hover{
box-shadow: 3px 3px 0 0 rgba(129,129,129,1);
transform:translate(-2px,-2px);
background-color: #eae6e1;
}

/*＝＝＝＝＝TOPICS＝＝＝＝＝*/

.topics{
background-color: #eae6e1;
}



.topics .overlay-text{
font-size: 50px;
font-family: "Pinyon Script", cursive;
font-weight: 400;
font-style: normal;
color: #e4c1b5;
display: block;
width: 500px;
position: absolute;
top:0px;
bottom: 0;
right: 0;
left: 200px;
margin:auto 0; 
transform: rotate(-15deg);
}

@media(max-width:767px){
.topics .overlay-text{
font-size: 30px;
width:50%;
left:10%;
}
}

.topics span{
display: block;
margin: 0 auto;
font-size:26px;
color:#362e2b;
text-align: center;
font-weight: 400;
margin-bottom: 30px;
}

.topics .container{
padding:120px 0;
}

.banner-big{
/*margin:0 30px;*/
}

.banner-big:hover{
opacity: 0.8;
}

@media(max-width:767px){
.topics img{
width:60%;
height:auto;
margin: 0 auto;
}
}

/*＝＝＝＝＝footer＝＝＝＝＝*/

footer{
background-image: url("../images/footer-bg.png");
background-position: center;
background-size: cover;
background-color: #eae6e1;
text-align: center;
padding: 60px 0;
}

footer .container{

}



.footer-logo{
height:220px;
display: flex;
align-items: center;
}

footer img{
width:380px;
height: 100px;
margin:0 auto;
}

.footer-bottom{
height:80px;
display: flex;
flex-direction: column;
align-content: space-between;
}

@media(max-width:767px){
.footer-bottom{
height: auto;
	}
}

.site-map{
padding-bottom:30px;
}

.site-map ul{
height: 30px;
list-style: none;
display: flex;
justify-content: center;
align-items:center;
}

@media(max-width:767px){
.site-map ul{
display: block;
height: auto;
padding:30px;
margin: 0 auto;
}
}

.site-map a{
padding: 0 20px;
color: #333;
text-decoration: none;
font-weight: bold;
}