@charset "UTF-8";

/* Header */
body{color:#111;}
@media (min-width: 320px){
    header {background-color: initial; position: fixed; background: rgb(1,1,1,0.6);}
    header a {color:#fff;}
    header .nav-trigger .hamburger .line span{background:#fff;}
	.show header .nav-trigger .hamburger .line span { background-color: #fff !important;  }
    header .NavHolder .mainNav .navlist li a span {text-transform: inherit;}
    header .NavHolder{position: fixed;}
    header .NavHolder .mainNav .navlist li.drop>a svg{fill: #fff;}
    
	.show header.transform .nav-trigger .hamburger .line span { background-color: rgb(255,255,255,0.9) !important; }
    header.transform {background-color: #fff;   -webkit-transition: height 666ms cubic-bezier(1,0,0,1); -ms-transition: height 666ms cubic-bezier(1,0,0,1); transition: height 666ms cubic-bezier(1,0,0,1); box-shadow: 0 0 10px 0 #999; }
    header.transform a {color:#111;}
    header.transform .nav-trigger .hamburger .line span{background:#111;}
    header.transform .NavHolder .mainNav .navlist li.drop>a svg{fill: #444;}
    header .nav-trigger .hamburger{top:31px;}
    header .sb-search{ background:none; right: 13px;}
    header .sb-search .lang { display: block; text-align: center; margin-top: 14px; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  -webkit-transition:opacity .45s ease-in-out;-moz-transition:opacity .45s ease-in-out;-ms-transition:opacity .45s ease-in-out;-o-transition:opacity .45s ease-in-out;transition:opacity .45s ease-in-out; padding: 5px 20px;
    border: 1px solid rgb(255,255,255,0.3);
    background: rgb(255,255,255,0.1);
    border-radius: 30px;}
    header .sb-search .lang li { display: inline-block; }
    header .sb-search .lang li:first-child,.sb-search .lang li:nth-child(2)  { margin-right:10px; padding-right: 10px; border-right: 1px solid #ccc; }
    header .sb-search .lang li a { display: block; color: #fff; font-size: 11px; text-decoration: underline; line-height: 1; letter-spacing: 1px; text-transform: uppercase; -webkit-transition:color .25s ease-in-out;-moz-transition:color .25s ease-in-out;-ms-transition:color .25s ease-in-out;-o-transition:color .25s ease-in-out;transition:color .25s ease-in-out; }
    header .sb-search .lang li a:hover { opacity:0.5;}
    header .sb-search .lang li a.active { color:#a71; font-weight: 700; text-decoration: none;}
    header .sb-search .lang li a.active:hover { opacity:1;}
    header.transform .sb-search .lang li a { color: #111; }
    header.transform .lang li a.active { color:#a71; font-weight: 700; text-decoration: none;}
    header .NavHolder{background-color:rgb(20,1,1,0.8);}
    header.transform .NavHolder{background-color:#fff;}
}
@media (min-width: 768px) {
    header {background-color: initial;}
}

    
/* Postheader */
@media (min-width: 320px) {
    .postheader {
        margin:0 0 30px;
        padding: 0 ;
        width: 100%;
        height: 100vh;
        position: relative;
    }

.postheader:before,.postheader:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 2
}

.postheader:before {
    height: 40%;
    background: -moz-linear-gradient(top, transparent 0%, transparent 5%, rgba(0,0,0,0.65) 100%);
    background: -webkit-linear-gradient(top, transparent 0%, transparent 5%, rgba(0,0,0,0.65) 100%);
    background: linear-gradient(to bottom, transparent 0%, transparent 5%, rgba(0,0,0,0.65) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000'', endColorstr='#00000000,GradientType=0 )
}

.postheader:after {
    height: 100%;
    background: rgba(0,0,0,0.1)
}
    .postheader-inner {
        width: 100%;
        height: 100%;
        background-image: url("../img/hero_en.jpg");
        background-size: cover;
        background-position: center center;
        display: flex;
        flex-direction: column;
        align-items: center;
        /*justify-content: space-evenly;*/
        position: relative;
    }
    .bg-bk {
        position: absolute;
        background: rgb(30,10,1,0.3);
        width: 100%;
        height: 100vh;
        bottom: 0;
    }
    .hero-con{
        position: absolute;
        z-index: 10;
        bottom: 95px;
        width: 60%;
    }
    #postheaderfront {
        width:100%;
        max-width: 400px;
        height: auto;
        margin-top: 440px;
        z-index: 10;
    }
    .postheader-inner h2 {
        margin-top: 15px;
        color: #fff;
        font-size: 17px;
        font-weight:500;
        letter-spacing: 2px;
        text-align: center;
        z-index: 10;
    }
    .postheader-inner p {
        margin-bottom: 70px;
        color: #fff;
        font-size: 12px;
        text-align: center;
        z-index: 10;
    } 
}

.scrolldown2 {
    position: absolute;
    z-index: 5;
    bottom:0;
    width:30px;
    height:100px;
}
.scrolldown2 a {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
.scrolldown2 .arrows {
  width: 100%;
  height: 42px;
  position: absolute;
  left: 50%;
  margin-left: -15px;
  bottom: 10px;
}

.scrolldown2 .arrows path {
  stroke: #fff;
  fill: transparent;
  stroke-width: 1px;  
  animation: arrow 4s infinite;
  -webkit-animation: arrow 4s infinite; 
}

@keyframes arrow
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

@-webkit-keyframes arrow
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

.arrows path.a1 {
  animation-delay:-2s;
  -webkit-animation-delay:-2s; 
}

.arrows path.a2 {
  animation-delay:-1s;
  -webkit-animation-delay:-1s;
}

.arrows path.a3 { 
  animation-delay:0s;
  -webkit-animation-delay:0s;
}

@media (min-width: 768px) {
    .postheader {
        margin:0;
        padding: 0;
    }
    .hero-con{
    bottom: 110px;
    width: 400px;
    }
    #postheaderfront {
        width: 50%;
    }
    .postheader-inner h2 {
        font-size: 22px;
    }
    #postheaderfront {
        width: 100%;
    }
    .postheader-inner p {
        font-size: 16px;
        margin-bottom: 120px;
    } 
}

@media (min-width: 960px) {
    .postheader {
        margin:0;
        padding: 0;
    }
}


/*コンセプト*/
@media (min-width: 320px) {
    .sec_title {display: block; text-align: center; max-width: 800px; margin: 20px auto;}
    .sec_title h1 {font-size: 30px; letter-spacing: -0.5px;}
    .about_area_txt-catch {font-size: 21px; margin-bottom: 15px;  line-height: 1.2; }
    .about_area_txt-catch span {font-size: 15px; line-height: 1.2; display: block; margin-bottom:10px;}
    .about_area_txt-catch,.about_area_txt-p {letter-spacing: 0; padding: 25px 0 0; text-align: left;}
    .about_area_txt .about_area_txt-p {padding: 0;}
}
@media (min-width: 768px) {
    .sec_title h1{font-size: 37px;letter-spacing: -1px;}    
    .about_area_txt-p{font-size:13px;}
}
@media (min-width: 940px) {
    .about_area_txt{padding: 0 40px 0 60px;}    
}
@media (min-width: 941px) and (max-width: 1100px){
    .about_area_img {width:50% !important;}
    .about_area_txt {width:50% !important;}
}

/*ビデオ*/
.movie_area {margin:40px auto;  overflow: hidden;}    
.movie_wrap {position: relative;
display: block;
width: 100%;
height: 0;
padding-bottom: 50%;} 
video {
    display: inline-block;
    vertical-align: baseline
}
.media__video {
    position: relative;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover
}
.media__video {
    height: auto
}
.media__video:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2
}

.media__video video {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.media__video video {
    height: auto
}

.media__video video::-webkit-media-controls {
    display: none
}


/*menu reservations brand information*/
@media (min-width: 320px) {
    .menu_area { overflow: hidden;}
    .menu_area .sec_title  { margin: 50px auto 20px;}
    .menu_area_box-pdf a{ background:rgb(40,10,0,0.9);}
    .menu_area_box-pdf a:hover {background-color: rgb(255,255,255,0.5);}
    .bg-brown { background:#271f1c; padding: 10px 0 50px; margin:20px auto;}  
    .bg-brown .sec_title h1 { color:#fff; }

    .gallery_area .lead {text-align: center; color: #ffffff; margin-bottom: 45px; padding: 0 15px; font-size: 13px;}
    .gallery_area .lead.chu {width:100%; margin:0 auto 40px;}
    .gallery_area .lead.chu p{ color: #b4a096; font-size:10px; text-align: left;}
    .gallery_area .reservation { text-align: center; width:100%; margin: 30px auto 40px; }
    .gallery_area .reservation .book_wrap { width:100%; border: 2px solid #fff; height: 60px; margin-bottom: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #b4a096; font-size:90%; font-weight: 600; line-height: 1.2; -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;}
    .gallery_area .reservation .book_wrap:hover{background:rgb(180,130,110,0.1);} 
    .gallery_area .reservation a{display: block; color: #fff; padding: 20px 0; width: 100%; font-weight: 300;}
    .gallery_area .reservation a span {font-size: 0.7em;}
    .gallery_area .reservation a svg {height: 18px; vertical-align:text-top; width: auto; margin-right: 10px;}
    .info_area_box .hr {margin: 10px auto 15px; width: 60%; height: 1px; background: #ddd; display: block;}
    .info_area_box-p {text-align: left;}
    #brand .menu_area .lead {text-align: center; margin-bottom: 45px; padding: 0 15px; font-size: 13px;}
    #brand .pd-sec {display: flex; flex-wrap: wrap; justify-content: space-between;}
    #brand .pd-sec .menu_area_box{ width:100%; aspect-ratio: 3 / 2.3; border: 1px solid #444; margin: 0 0 20px 0; position: relative; overflow: hidden; float:none; padding:17px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: flex;
    flex-wrap: wrap; justify-content: center; align-items: center;}
    #brand .pd-sec .menu_area_box:before { content:""; display: block; height: 90%; width:92%; z-index: 5; position: absolute;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #fff; background: rgb(1,1,1,0.3);}
    #brand .pd-sec .menu_area_box-img { position: absolute; top: 0; left: 0;}
    #brand .pd-sec img {height: auto; width: 100%;}
    #brand .pd-sec .menu_area_box-ttl {position: absolute; color: #fff; letter-spacing: 1px; z-index: 10;}
    #brand .pd-sec .menu_area_box-ttl span {font-size:0.8em; font-weight: 300; }
    #brand .pd-sec .menu_area_box-pdf {position: absolute; border-bottom:1px solid #fff; bottom: 20%; z-index: 10;}
    #brand .pd-sec .menu_area_box-pdf a {background:none; font-weight: 600; font-size: 13px; border-top:0; padding: 10px 5px 5px;}
    #brand .pd-sec .menu_area_box-pdf a:hover {opacity: 0.5;}
    #brand .pd-sec .menu_area_box-pdf .brand-link img { width: 10px; margin-left: 5px;}
    .swiper-slide.swiper-slide-active img {border: 1px solid #111;}
    .info_area_box-p .googlelink {background: rgb(40,10,0,0.9); text-align: center; margin: 0 auto; display: block; width: 70%;}
    .info_area_box-p .googlelink:hover {color: rgb(40,10,0,1);}
}
@media (min-width: 768px){
    .menu_area .pd-sec{margin: 50px auto 80px;}
    .bg-brown { padding: 60px 0 50px;   margin-bottom: 50px;}  
    .gallery_area .backlineouter.long {width: 300px;}
    .gallery_area .lead  {width:80%; margin:0 auto 40px; font-size: 15px;}
    .gallery_area .lead.chu {width:80%; margin:0 auto 40px;}
    .gallery_area .lead.chu p{font-size:12px;}
    .gallery_area .reservation { text-align: center; width:700px; margin: 60px auto 50px; }
    .gallery_area .reservation ul{ display: flex; flex-wrap: wrap; justify-content: space-between; }
    .gallery_area .reservation .book_wrap { width: calc(33.3% - 20px); margin-right:20px; padding: 12px 0; display: flex; align-items: center; justify-content:center; }
    .gallery_area .reservation .book_wrap:last-child{  margin-right:0px;} 
    #brand .menu_area .lead  {width:80%; margin:0 auto 40px; font-size: 15px;}
    #brand .pd-sec .menu_area_box{ width:calc( ( 100% - 40px ) / 2 ); margin: 0 20px 20px 0; padding: 20px; }
    #brand .pd-sec  {margin:20px 50px 80px;}
    #brand .pd-sec .menu_area_box:nth-child(2){margin-right:0 !important;}
    #brand .pd-sec .menu_area_box-ttl {font-size:15px;}
    #brand .pd-sec img {height: auto; width: 100%;}
}
@media (min-width: 940px){
    #brand .pd-sec  {margin:20px auto 80px;}
    .info_area { padding: 0 30px 100px;}
    .info_area .pd-sec  {margin:80px auto 0px;}
}


/*アコーディオン*/     
    .accordion-area.pd-sec  {margin-top:0;}
    .accordion-area .container .in {border-bottom: 1px solid #855; }
    .accordion-area .container .in:hover h3 {color: #aaa;}
    .accordion-area .about_area_txt-p{line-height: 1.7; text-align: left;}
    .accordion-area .box-img,.accordion-area .box-txt{margin-top:20px;}
    .accordion-area .box-img {width:80%; margin: 20px auto 0;}
    .accordion-area section {
      border: 1px solid #ccc;
    }
    .ac_title {
        position: relative;
        cursor: pointer;
        font-size:1rem;
        font-weight: normal;
        padding: 20px 20px 10px 20px;
        transition: all .5s ease;
        text-align: center;
    }

    .ac_title::before{
        position: absolute;
        content: '';
        top: 32px;
        right: 70px;
        display: block;
        width: 27px;
        height: 27px;
        margin: auto;
        background-size: 25px 25px;
        background-image: url(../img/icon-plus.svg);
        background-repeat: no-repeat;
    }
    .ac_title::before{
        top:37%;
        right: 10px;
        transform: rotate(0deg);

    }
    .ac_title::after{    
        top:37%;
        right: 10px;
        transform: rotate(90deg);
    }

    .ac_title.close::before{
      transform: rotate(45deg);
    }

    .ac_title.close::after{
      transform: rotate(-45deg);
    }
    .box {
        display: none;
        margin-bottom:30px;
        background: rgb(30,10,0,0.05);
        padding: 5px 20px 20px;
        border-radius: 10px;
    }

    @media (min-width: 768px) {
    .accordion-area .pc_only{display:block;}
    .accordion-area .long,.accordion-area .long{width: 420px;} 
    .accordion-area .lead,.accordion-area .lead{
        text-align: center;
        margin-bottom: 30px;
     }   
    .accordion-area .information .container{width:100%;}
    .accordion-area .information h3 {font-size:20px;}
        
}
    @media (min-width: 960px) {
    .accordion-area .container {
        padding: 0 150px;
    }
}
    .accordion-area .contact-list  {
        margin: 30px auto;
        width: 100%;
        text-align: center;
    } 
    @media (min-width: 668px) {
    .accordion-area.pd-sec  {margin-top:20px;}
    .accordion-area .contact-list  {
        margin: 70px auto 100px;
        display: flex;
        flex-wrap: wrap;
    } 
    .accordion-area .box-img {width:60%; margin: 20px auto 0;}
    .box {
        padding: 15px 50px 20px;
    }
}
    
    
/* fadeUpクラスでスクロール時に下から上に */
/*fadeup*/
.fadeUp{
animation-name:fadeUpAnime;
animation-duration:2s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }
  to {
    opacity: 1;
  transform: translateY(0);
  }
}
.fadeUpTrigger{
    opacity: 0;
}
/*text アニメーション*/
.eachTextAnime span{opacity: 0;}
.eachTextAnime.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
@keyframes text_anime_on {
  0% {opacity:0;}
  100% {opacity:1;}
}

.eachTextAnime span{opacity: 0;}
.eachTextAnime.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
@keyframes text_anime_on {
	0% {opacity:0;}
	100% {opacity:1;}
}

@media (min-width: 320px){
a.anchor {
  display: block;
  margin-top: -60px;
  padding-top: 60px;
}
}
@media (min-width: 768px){
a.anchor {
  margin-top: -80px;
  padding-top: 80px;
}
}