@charset "UTF-8";
/* Frontページ */


#mainvisual figure{width:100%; max-width:840px; margin:0 auto; position: relative; padding-bottom: 20px;}
#mainvisual figure img{width:100%; height: auto;}
#mainvisual h1{
margin-top: 24px;
color: #fff;
font-size: 2.0rem;
line-height: 200%;
letter-spacing: 0.05em;
 text-align: center;text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);}


#mainvisual .bgImg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: 0;
animation: bgAnime 36s infinite;
}


@keyframes bgAnime {
   0% { opacity: 0; }
   7% { opacity: 1; }
  25% { opacity: 1; }
  32% { opacity: 0; }
 100% { opacity: 0; }
}

#mainvisual figure{
  position   : absolute;
  display    : inline-block;
  padding    : 20px;
  top        : 50%;
  left       : 50%;
  transform  : translate(-50%,-50%);
  z-index    : 2;
    /*padding: 0 6%;*/
}



@media only screen and (min-width:813px){
#mainvisual{height:calc(100vh - 80px); position:relative;
overflow:hidden;margin:auto;
/*background: url(../img/top/main-pc.jpg) no-repeat center center;
background-size: cover; display: flex; flex-flow: column; justify-content: center; align-items: center;*/
}
#mainvisual .slide01{
  background: url(../img/top/topMain_pc01.jpg) no-repeat center center;
    background-size:cover;
}
#mainvisual .slide02{
  background:url(../img/top/topMain_pc02.jpg) no-repeat center center;
  animation-delay  : 9s;
    background-size:cover;
}
#mainvisual .slide03{
  background: url(../img/top/topMain_pc01.jpg) no-repeat center center;
     animation-delay  : 18s;
    background-size:cover;
}
#mainvisual .slide04{
  background:url(../img/top/topMain_pc02.jpg) no-repeat center center;
   animation-delay  : 27s;
    background-size:cover;
}
}
@media only screen and (max-width:812px){
#mainvisual{height:calc(100vh - 60px);position:relative;
overflow:hidden;margin:auto;
/*background: url(../img/top/main-sp.jpg) no-repeat center center;
background-size:cover;display: flex; flex-flow: column; justify-content: center; align-items: center;
padding: 0 6%;*/
}
#mainvisual .slide01{
  background: url(../img/top/topMain_sp01.jpg) no-repeat center center;
    background-size:cover;
}
#mainvisual .slide02{
  background:url(../img/top/topMain_sp02.jpg) no-repeat center center;
    background-size:cover;
  animation-delay  : 9s;
}
#mainvisual .slide03{
  background: url(../img/top/topMain_sp01.jpg) no-repeat center center;
    background-size:cover;
     animation-delay  : 18s;

}
#mainvisual .slide04{
  background:url(../img/top/topMain_sp02.jpg) no-repeat center center;
    background-size:cover;
  animation-delay  : 9s;
     animation-delay  : 27s;

}
}

/* お知らせ */
#news{padding:100px 4%; background-color: #F7F7F7;}

.NewsList{}
.NewsList li:not(:last-of-type){margin-bottom: 12px;}
.NewsList li a{padding:24px 80px 24px 24px; position: relative; background-color: #fff; display: block;
border-radius: 8px;}

.NewsList li a p{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.NewsList li a::before{
    content: '';
  position: absolute;
    right:24px;
    width: 32px;
    height: 1px;
  background:#000000;
    transition: all .3s;
    top: 50%;
    margin-top: -2px;
}

.NewsList li a::after{
    content: '';
  position: absolute;
    top:50%;
    right:24px;
    width: 8px;
    height:1px;
  background:#000000;
    transform: matrix(0.86, 0.48, -0.52, 0.87, 0, 0);
    transition: all .3s;
    margin-top: -4px;
}

/*hoverした際の移動*/
.NewsList li a:hover::before{
    right: 20px;
}

.NewsList li a:hover::after{
    right:20px;
}



.NewsList li a span{color: rgba(0, 0, 0, 0.6); display:block; font-size: 1.2rem;}
#news .wap01 > p{width:100%; margin-top: 30px; text-align: right;}
@media only screen and (min-width:813px){
.NewsList li a{}
#news .wap01{display: flex; align-items:flex-start; flex-wrap: wrap;}
#news .wap01 .titleBox{width:160px; margin-right:5%;}
#news .wap01 .titleBox h2{margin-bottom:40px;}      
#news .wap01 .NewsList{width: calc(95% - 160px);}

}
@media only screen and (max-width:812px){
    #news{padding:80px 4%;}
#news .wap01 .titleBox{margin-bottom:20px;}
}


#contentlist{padding: 100px 0;}

#contentlist .inner-block {

}

#contentlist .box {
display: flex;
justify-content: center;
align-items: center;
}
#contentlist .inner-block + .inner-block {margin-top: 100px;}

#contentlist figure img{width:100%; height: auto;}


#contentlist h2{font-size:2.6rem; margin-bottom: 16px;}

#contentlist h2 span{
font-family: 'League Gothic', sans-serif; font-weight:400;
color: #fff;
font-size: 4.0rem;
line-height: 100%;
letter-spacing: 0.05em;
-webkit-text-stroke: 1px rgba(0, 0, 0, 0.85);
display: block;
margin-bottom: 30px;
}



@media only screen and (min-width:813px) {
#contentlist h2 span{
font-size: 5.6rem;
}
#contentlist,
#contentlist .inner-block{overflow-x: hidden;
position: relative;}
    
    
    #contentlist .inner-block{height:567px; overflow-x: hidden;}
    #contentlist .inner-block{}
    
#contentlist .inner-block .box{
width: 1600px;
height: 567px;
position: absolute;
margin-left: -800px;
left: 50%;
}
#contentlist .inner-block:nth-of-type(even) .box {}
#contentlist .inner-block:nth-of-type(even) .box .txt-area {
    margin-right: auto;
    margin-left: 80px;
    }
    
#contentlist .inner-block:nth-of-type(odd) .box {
flex-direction: row-reverse;
}

#contentlist .inner-block:nth-of-type(odd) .box .txt-area {
    margin-left: auto;
    margin-right: 80px;
    
}
    
#contentlist figure{
display: block;
width: 800px;
overflow: hidden;
border-radius:40px;  
height: 560px;
}

#contentlist figure img {
width: 800px;
}
}


@media only screen and (min-width:1100px) {
    #contentlist .txt-area {
width: 460px;
}
}
@media screen and (min-width:812px) and ( max-width:1100px) {
#contentlist .txt-area {
width: 38vw;
}
}



@media only screen and (max-width:812px) {
#contentlist{padding: 0 0 0 0;}
#contentlist .box{
flex-direction: column;
}
#contentlist figure{
}
#contentlist .txt-area {
padding: 30px 4% 0 4%;
width:100%;
}
    #contentlist .inner-block + .inner-block{
        margin-top: 40px;
    }
}


.topimgList{padding:50px 4%;}


.topimgList .wap01 > div figure{position: relative;}
.topimgList .wap01 > div figure img{position: relative;}
.topimgList .wap01 > div figure figcaption{
background: rgba(0, 0, 0, 0.2);
color: #fff;
font-size: 1.4rem;
padding: 10px;
position: absolute;
left: 0;
bottom:0;
width:100%;
text-align: center;
}
@media only screen and (min-width:813px) {
.topimgList .wap01 > div{display: flex; flex-wrap: wrap;}
.topimgList .wap01 > div figure{width:49%;}
.topimgList .wap01 > div figure img{width:100%; max-width: 530px; height: auto;}
    
    .topimgList .wap01 > div figure{margin-bottom: 2%;}
    
.topimgList .wap01 > div figure:nth-of-type(2){
border-radius: 0px 40px 0px 0px;
overflow: hidden;
margin-left: 2%;
}
.topimgList .wap01 > div figure:nth-of-type(3){
border-radius: 0px 0px 0px 40px;
overflow: hidden;
}
.topimgList .wap01 > div figure:nth-of-type(4){
border-radius: 0px 0px 40px 0px;
overflow: hidden;
margin-left: 2%;
}
}

#restaurant{padding-bottom: 0;}
#restaurant .wap01{margin-bottom: 100px;}

@media only screen and (max-width:812px) {
 .topimgList .wap01 > div figure img{width:100%; height: auto;} 
 .topimgList .wap01 > div figure{margin-bottom: 20px;}
 .topimgList .wap01 > div figure:nth-of-type(1){
border-radius: 0px 20px 0px 0px;
overflow: hidden;
}
.topimgList .wap01 > div figure:nth-of-type(4){
border-radius: 0px 0px 0px 20px;
overflow: hidden;
}
    .topimgList .wap01 > div figure figcaption{text-align: left;text-align: justify;
text-justify: inter-ideograph; /* IE */
text-justify: inter-character; /* Firefox */}
     #restaurant{padding-bottom: 0; padding-top: 0;}
#restaurant .wap01{margin-bottom: 80px;}
}


.img-bt{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.img-bt img{
width: 100%;
height: auto;
}


@media only screen and (min-width:813px){
}
@media only screen and (max-width:812px){
}
@media only screen and (min-width:813px){
}
@media only screen and (max-width:812px){
}
@media only screen and (min-width:813px){
}
@media only screen and (max-width:812px){
}