/*===========================================================
Common
===========================================================*/

*{
  margin:0;
  padding:0;
  list-style:none;
}
html,body{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  -webkit-text-size-adjust: 100%;
  color:#333333;
  background-color: #000000;
  font-family: 'Noto Serif JP', serif;
  font-size: 62.5%;
  font-size: 1vw;
  line-height:1.85;
}

a{
  color:#6d4399;
  text-decoration:underline;
}
a:hover{
  color:#6d4399;
  text-decoration:none;
  cursor:pointer;
}
a:focus{
  outline:none;
}
a:visited{
  color:#6d4399;
  text-decoration:underline;
}

::selection{background:#CBACEA;}
::-moz-selection{background:#CBACEA;}

#wrapper{
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.pcNone{display:none;}
.spNone{display:block;}
.tabletOn{display:none;}

.contentsTitle{
  margin:60px 0 30px 0;
  padding:10px 0;
  border-top:3px solid #000000;
  border-bottom:1px solid #000000;
  text-align:center;
  line-height:1.4;
}
.contentsTitle h1{
  font-size: 130%;
  font-weight: bold;
  letter-spacing:2px;
}
.contentsTitle h2{
  font-size: 90%;
  font-weight: normal;
  color:#999999;
  font-family:'Roboto Condensed',sans-serif;font-weight:400;font-style:italic;letter-spacing:1.2px;
}

ul.attention{margin:30px 0;}
ul.attention li{
  font-size:90%;
  padding-left:1em;
  text-indent:-1em;}
ul.attention li:before {content: "※";}

p.textBox{margin:15px 0;}
p.textBox span{font-weight:bold;}

.telContactBox{
  border:1px solid #000000;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size:120%;
  font-weight:bold;
  text-align:center;
  margin:30px 0;
  padding:20px 10px;
}
.telContactBox span{font-size:90%;}
.telContactBox a{
  font-family:'Roboto Condensed',sans-serif;font-weight:400;font-style:italic;letter-spacing:1.2px;
  font-size:120%;
}
.telContactBox a.WebR{
  font-family:'Roboto Condensed',sans-serif;font-weight:400;font-style:italic;letter-spacing:1.2px;
  font-size:100%;
}

@media all and (max-width: 959px) {
  html,body{
    font-size: 100%;
    font-size: 1.6vw;
  }
  #wrapper{
    display: block;
  }
  .tabletOn{display:block;}
}
@media all and (max-width: 767px) {
  html,body{
    font-size: 200%;
    font-size: 3.2vw;
  }
  #wrapper{
    display: block;
  }
  .pcNone{display:block;}
  .spNone{display:none;}
}

/* ---------------------------------------------------------
loading
----------------------------------------------------------*/
#loadingBG {
  display: table;
  width: 100vw;
  height: 100vh;
  background-color:#000000;
  background-image: url("../images/loading_bg.jpg");
  background-size:contain;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  text-align:center;
}
#loadingLogo {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  height: auto;
  animation: loadingFade 0.6s 0.4s ease-out both;
}
#loadingLogo img{
  width: 4%;
  height: auto;
}
@keyframes loadingFade {
  0% {opacity: 0;transform: translateY(0px);}
  100%{opacity: 1;transform: translateY(-10px);}
}
.loaded {
  visibility: hidden;
  display:none;
}
@media all and (max-width: 959px) {
  #loadingLogo img{
   width: auto;
   height: 20%;
  }
  @keyframes loadingFade {
    0% {opacity: 0;transform: translateY(-20px);}
    100%{opacity: 1;transform: translateY(-30px);}
  }
}
@media all and (max-width: 767px) {
  #loadingLogo img{
   width: auto;
   height: 20%;
  }
  #loadingLogo {padding-left: 10px;}
  @keyframes loadingFade {
    0% {opacity: 0;transform: translateY(-150px);}
    100%{opacity: 1;transform: translateY(-160px);}
  }
}

/* ---------------------------------------------------------
globalNavi
----------------------------------------------------------*/
#globalNavi{
  position:fixed;
  width: 12%;
  height: 100%;
  z-index: 9100;
  box-shadow: 2px 0 8px;
  background-color:#111111;
  /*background-image: url("../images/navi_bg.png");
  background-size:contain;
  background-attachment: fixed;*/
  order: 0;
}
#globalNavi .header_logo{
  width: 25%;
  height: auto;
  margin:40px auto 0 auto;
}
#globalNavi .header_logo img{
  width: 100%;
  height: auto;
}

#globalNavi .headNavi{
  color:#FFFFFF;
  width:80%;
  margin:5% 10%;
}
#globalNavi .headNavi ul{
  margin-top:20px;
}
#globalNavi .headNavi ul li{
  line-height:2.2;
}
#globalNavi .headNavi ul li a{
  color:#FFFFFF;
  text-decoration:none;
  transition: all .3s;
}
#globalNavi .headNavi ul li a:hover {
  color: #CBACEA;
}
#globalNavi .headNavi ul li:before {
  content: "- ";
}
#globalNavi .bottomNavi{
  color:#FFFFFF;
  width:80%;
  position:absolute;
  bottom:2%;
  left:10%;
}
#globalNavi .bottomNavi ul.reservationArea{
  margin-bottom:30px;
  line-height:1.4;
}
#globalNavi .bottomNavi ul.reservationArea li{
  margin-bottom:10px;
}
#globalNavi .bottomNavi ul.reservationArea li.attention{
  border-top:solid 1px #ffffff;
  border-bottom:solid 1px #ffffff;
  padding:3px 0;
  line-height:1.2;
  text-align:center;
}
#globalNavi .bottomNavi ul.reservationArea li span{
  font-size: 90%;
}
#globalNavi .bottomNavi ul.reservationArea li a{
  color:#CBACEA;
  opacity:1;
  text-decoration:none;
  transition: all .3s;
  font-family:'Roboto Condensed',sans-serif;font-weight:400;font-style:italic;letter-spacing:1.2px;
  font-size: 110%;
}
#globalNavi .bottomNavi ul.reservationArea li a:hover {
  opacity:0.6;
}
#globalNavi .bottomNavi ul.snsArea{
  position: relative;
  width: 85%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#globalNavi .bottomNavi ul.snsArea li{
  display:flex;
  justify-content: center;
  flex-wrap: wrap;
  text-align:center;
  align-items: flex-start;
  width: 25%;
}
#globalNavi .bottomNavi ul.snsArea li a{
  opacity:1;
  transition: all .3s;
}
#globalNavi .bottomNavi ul.snsArea li a:hover {
  opacity:0.6;
}

#spLogo,#spNaviDF{width:0;}

@media all and (max-width: 959px) {
  #globalNavi{
    visibility: hidden;
    opacity: 0;
    transition: 0.5s ease-in-out;
    width: 100%;
    height: 110%;
    margin-top:-1%;
    padding: 3% 0;
    box-shadow: none;
    background:none;
    background-color: rgba(0,0,0,0.9);
    font-size:125%;
  }
  .spNaviOpen #globalNavi{
    visibility: visible;
    opacity: 1;
  }
  #globalNavi .headNavi ul{
    margin-top:70px;
  }
  #globalNavi .header_logo{
    display:none;
  }
  #globalNavi .bottomNavi{
    position:relative;
    margin-top:50px;
  }
  #globalNavi .bottomNavi ul.reservationArea{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width:100%;
    align-items: flex-start;
  }
  #globalNavi .bottomNavi ul.reservationArea li.attention{
    width:100%;
  }
  #globalNavi .bottomNavi ul.reservationArea li.reserve{
    width:100%;
  }
  #globalNavi .bottomNavi ul.reservationArea li.tel2box{
    width:50%;
  }
  #globalNavi .bottomNavi ul.snsArea{
    width: 80%;
    margin:0 auto;
  }
  #globalNavi .bottomNavi ul.snsArea li{
    width: 25%;
  }
  #globalNavi .bottomNavi ul.snsArea img{
    width: 8vw;
    height: 8vh;
  }

  #spLogo,#spNaviDF{width:auto;}

  #spLogo{
    position: absolute;
    z-index:9000;
    top: 0;
    left: 15px;
    width: 70px;
    height: 160px;
    z-index: 9100;
    box-shadow: 2px 0 8px;
    background-color:#111111;
    /*background-image: url("../images/navi_bg.png");
    background-size:contain;
    background-attachment: fixed;*/
  }
  #spLogo .sp_logo{
    width: 40px;
    margin:20px 12px 0 18px;
  }
  #spLogo .sp_logo img{
    width: 100%;
    height: auto;
  }

  #spNaviDF{
    position: fixed;
    z-index:9900;
    top: 15px;
    right: 15px;
    background-color:#111111;
    width: 50px;
    height: 50px;
    transition: 0.3s ease-in-out;
  }
  #spNaviDF #spNavbtn{
    position:absolute;
    top: 10px;
    right: 10px;
    padding: 0;
    outline: none;
    border: none;
    background: none;
    width: 30px;
    height: 30px;
    cursor: pointer;
  }
  #spNaviDF #spNavbtn::before,#spNaviDF #spNavbtn::after{
    content : '';
    display: block;
    height: 1px;
    background-color: #EEEEEE;
    transform: translateY(10px);
    transition: 0.3s ease-in-out;
  }
  #spNaviDF #spNavbtn::before{
    transform: translateY(-10px);
    box-shadow: 0 10px #EEEEEE;
  }
  .spNaviOpen #spNaviDF{
    background-color:#EEEEEE;
  }
  .spNaviOpen #spNaviDF #spNavbtn{
    z-index: 100;
  }
  .spNaviOpen #spNaviDF #spNavbtn::before{
    transform: rotate(-45deg);
    box-shadow: none;
    background-color: #111111;
  }
  .spNaviOpen #spNaviDF #spNavbtn::after{
    transform: rotate(45deg);
    box-shadow: none;
    background-color: #111111;
  }

}

/* ---------------------------------------------------------
scrollDown
----------------------------------------------------------*/
#scrollDown{
  position: fixed;
  z-index: 8890;
  left: 65%;
  bottom: 0;
  overflow: hidden;
}
.scrollTxt{
  position: fixed;
  z-index: 8890;
  bottom: 55px;
  left: 65%;
  overflow: hidden;
  font-family:'Roboto Condensed',sans-serif;font-weight:400;font-style:italic;letter-spacing:1.2px;
  font-size: 80%;
  line-height: 1;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
.scrollLine{
  display:block;
  position:fixed;
  bottom:0;
  left:65.4%;
  z-index: 8890;
  width: 1px;
  background-color: #CBACEA;
  height: 50px;
  overflow: hidden
}
.scrollLine:after{
  content:"";
  display: block;
  width: 1px;
  border-left: 1px #000000 solid;
  animation:pcScroll 2s ease 0s infinite normal;
  margin: 0 auto 0;
}
@keyframes pcScroll{
  0%{
    height: 0;
  }
  50%{
    height: 100px;
    margin-top: 0;
  }
  100%{
    margin-top: 100px;
    height: 100px;
  }
}

#spScrollAnimation{display:none;}
#spPageNum{display:none;}

@media all and (max-width: 959px) {
  #scrollDown{
    left: 96%;
  }
  .scrollTxt{
    bottom: 55px;
    left: 96%;
  }
  .scrollLine {
    bottom: 0;
    left: 96.6%;
  }
  .scrollLine:after {
    z-index: 8888;
    bottom: 0;
    left: 96.6%;
  }
  #spPageNum{
    display:block;
    position:absolute;
    bottom:-10px;
    right:15px;
    z-index: 8890;
    background-color:#000000;
    font-family:'Roboto Condensed',sans-serif;font-weight:400;font-style:italic;letter-spacing:1.2px;
    text-align:center;
    font-size:90%;
    color:#FFFFFF;
    padding:2px 8px;
  }
  .spPageNumAN {
    opacity:1;  
    /*animation: spPageNumAnimation 1.2s infinite;*/
  }
  /*@keyframes spPageNumAnimation {
    0%   { opacity:1; }
    50%  { opacity:0.5; }
    100% { opacity:1; }
  }*/
}

@media all and (max-width: 767px) {
  #scrollDown{
    display:none;
  }
  #spScrollAnimation{
  	display:block;
  	position:absolute;
    top:96.5%;
    left:50%;
    z-index: 8890;
    width: 1px;
    background-color: #FFFFFF;
    height: 7%;
    overflow: hidden
  }
  #spScrollAnimation:after{
    content:"";
    display: block;
    width: 1px;
    border-left: 1px #000000 solid;
    animation:spScroll 2s ease 0s infinite normal;
    margin: 0 auto 0;
  }
  @keyframes spScroll{
    0%{
      height: 0;
    }
    50%{
      height: 100px;
      margin-top: 0;
    }
    100%{
      margin-top: 100px;
      height: 100px;
    }
  }
}

/* ---------------------------------------------------------
pageTop
----------------------------------------------------------*/
#pageTop{
  position: fixed;
  z-index: 8890;
  left: 65%;
  bottom: 0;
  overflow: hidden;
}
.pageTopTR div{
  position: fixed;
  z-index: 8899;
  bottom: 45px;
  left: 65%;
  overflow: hidden;
  font-family:'Roboto Condensed',sans-serif;font-weight:400;font-style:italic;letter-spacing:1.2px;
  font-size: 80%;
  line-height: 1;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
.pageTopTR div::before {
  content: "";
  position: fixed;
  z-index: 8898;
  bottom: 30px;
  left: 65%;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #000000;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
_::-webkit-full-page-media, _:future, :root .pageTopTR div::before {
  right: 35%;
}
#pageTop:hover {
  cursor:pointer;
}

@media all and (max-width: 959px) {
  #pageTop{
    left: 96%;
  }
  .pageTopTR div{
    bottom: 30px;
    left: 96%;
  }
  .pageTopTR div::before {
    bottom: 15px;
    left: 96.1%;
  }
  _::-webkit-full-page-media, _:future, :root .pageTopTR div::before {
    right: 4%;
  }
}

@media all and (max-width: 767px) {
  #pageTop{
    display:none;
  }
}

/* ---------------------------------------------------------
contentsArea
----------------------------------------------------------*/
#contentsArea{
  position:absolute;
  left: 12%;
  width: 55%;
  background-color: #F0EDE7;
  order: 1;
  background-image: url("../images/contents_bg.jpg");
  background-size:contain;
  background-attachment: fixed;
}
#contentsArea #contentsBox{
  /*margin-left: -webkit-calc(7% + 160px) ;
  margin-left: calc(7% + 160px) ;
  margin-right: 7%;*/
  padding:0 7%;
}

/* ========== greetingArea ========== */
#greetingArea h1.centerCopy{
  padding-top:60px;
  text-align: center;
  font-size: 140%;
  font-weight: bold;
}
#greetingArea h2.textBox {font-weight: normal;}
#greetingArea .textBox p{margin-top:20px;}
#greetingArea .sign{
  margin-top:20px;
  text-align:right;
}

/* ========== foodArea ========== */
#foodArea .circleBox{
  margin:40px 0 10px 0;
  text-align:center;
}
#foodArea .circleBox .whCircle { 
  position: relative;
  display: inline-block;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background-color: #FFFFFF;
}
#foodArea .circleBox .bkCircle { 
  position: relative;
  display: inline-block;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background-color: #000000;
  color:#FFFFFF;
}
#foodArea .circleBox .whCircle span,#foodArea .circleBox .bkCircle span {
  position: absolute;
  display: inline-block;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width :110px;
  text-align:center;
  font-size:120%;
  font-weight:bold;
}
#foodArea h3{
  font-size:120%;
  font-weight:bold;
  margin-bottom:12px;
  border-left:4px solid #000000;
  padding-left:5px;
  line-height:1;
}
#foodArea h3 span{font-size:75%;font-weight:normal;}
#foodArea ul.foodList{
  margin-bottom:30px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#foodArea ul.foodList li{
  padding-bottom:4px;
  margin-bottom:12px;
  border-bottom:1px dotted #999999;
}
#foodArea ul.foodList li:nth-child(odd) {width:60%;font-weight:bold;}
#foodArea ul.foodList li:nth-child(odd):before {content: "- ";}
#foodArea ul.foodList li:nth-child(even) {width:40%;text-align:right;}

#foodArea #foodPhoto{
    margin-bottom: 50px;
}
#foodArea #foodPhoto .slider{
    margin: 30px auto;
    width: 100%;
}
#foodArea #foodPhoto .slider img{
    height: auto;
    width: 100%;
}

/* ========== roomArea ========== */
#roomArea #roomPhoto{
    margin-bottom: 50px;
}
#roomArea #roomPhoto .slider{
    margin: 30px auto;
    width: 100%;
}
#roomArea #roomPhoto .slider img{
    height: auto;
    width: 100%;
}
#roomArea p{
  margin-top:40px;
}

/* ========== giftArea ========== */
#giftArea h3.title{
  font-size:120%;
  font-weight:bold;
  margin-bottom:12px;
  border-left:4px solid #000000;
  padding-left:5px;
  line-height:1;
}
#giftArea ul.box2pack{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width:100%;
}
#giftArea ul.box2pack li{
  width:48.5%;
  margin-bottom:20px;
  display:flex;
  justify-content: center;
  flex-wrap: wrap;
  text-align:center;
  align-items: flex-start;
}
#giftArea ul.box2pack li img{width:100%;}
#giftArea ul.box2pack li h3{
  width:100%;
  background-color:#000000;
  font-size:90%;
  font-weight:normal;
  color:#FFFFFF;
}
#giftArea ul.box2pack li.box2title{
  border:1px solid #000000;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size:120%;
  font-weight:bold;
}
#giftArea ul.btntoList li{margin:15px 0;}
#giftArea ul.btntoList li h3{font-weight:bold;}
#giftArea ul.btntoList li h3 span{font-weight:normal;font-size:90%;}

/* ========== shopArea ========== */
#shopArea .shop2Box{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width:100%;
  margin-bottom:30px;
  align-items: flex-start;
}
#shopArea .shop2Box .shopText{width:53%;}
#shopArea .shop2Box .shopText h2{
  font-size:120%;
  margin-bottom:12px;
  border-left:4px solid #000000;
  padding-left:5px;
  line-height:1;
}
#shopArea .shop2Box .shopText ul{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#shopArea .shop2Box .shopText ul li{
  padding-bottom:4px;
  margin-bottom:12px;
  border-bottom:1px dotted #999999;
}
#shopArea .shop2Box .shopText ul li:nth-child(odd) {
  width:20%;
  font-weight:bold;
}
#shopArea .shop2Box .shopText ul li:nth-child(even) {width:80%;}
#shopArea .shop2Box .shopPhoto{width:43%;}
#shopArea .shop2Box .shopPhoto img{width:100%;}

/* ========== linkArea ========== */
#linkArea ul.link3Box{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width:100%;
  margin-bottom:15px;
  align-items: flex-start;
}
#linkArea ul.link3Box li{
  width:30%;
  border:1px solid #000000;
  line-height:1;
}
#linkArea ul.link3Box li img{
  vertical-align:-4px;
}
#linkArea ul.link3Box li a{
  display: block;
  color:#333333;
  opacity:1;
  text-decoration:none;
  transition: all .3s;
  padding:20px 15px;
}
#linkArea ul.link3Box li a:hover {
  opacity:0.6;
}

/* ========== footerArea ========== */
#footerArea{
  width:100%;
  margin-top:30px;
  padding:20px 0;
  border-top:1px solid #000000;
  text-align:center;
}
#footerArea .copyright{
  font-family:'Roboto Condensed',sans-serif;font-weight:400;font-style:italic;letter-spacing:1.2px;
  font-size: 90%;
  line-height: 1;
}

@media all and (max-width: 959px) {
  #contentsArea{
    position:relative;
    left: 0;
    width: 100%;
  }
  #greetingArea h1.centerCopy{
    padding-top:30px;
    font-size: 120%;
  }
}

@media all and (max-width: 767px) {
  #contentsArea #contentsBox{
    padding:0 6%;
  }
  #foodArea ul.foodList li:nth-child(odd) {width:100%;border-bottom:none;margin-bottom:1px;}
  #foodArea ul.foodList li:nth-child(even) {width:100%;text-align:left;text-indent:0.7em;}
  #giftArea ul.box2pack{
    display: block;
  }
  #giftArea ul.box2pack li{
    width:100%;
    margin-bottom:25px;
    display:block;
  }
  #giftArea ul.box2pack li h3{
    line-height:1.2;
    background:none;
    font-size:100%;
    font-weight:bold;
    color:#333333;
  }
  #giftArea ul.box2pack li.box2title{
    padding:5px 0;
  }
  #shopArea .shop2Box{
    display: block;
  }
  #shopArea .shop2Box .shopText{
    width:100%;
    margin-bottom:15px;
  }
  #shopArea .shop2Box .shopPhoto{
    width:100%;
    margin:0 auto;
  }
  #linkArea ul.link3Box{
    display: block;
  }
  #linkArea ul.link3Box li{
    width:100%;
    margin-bottom:15px;
  }
}

/* ---------------------------------------------------------
fixedPhoto
----------------------------------------------------------*/
#fixedPhoto{
  position:relative;
  width: 33%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #000000;
  order: 2;
}
#fixedPhoto ul li{
  position:fixed;
}
#fixedPhoto ul li img{
  height: 100vh;
  width: 100%;
  object-fit:cover;
  object-position:center center;
}
#fixedPhoto #timeLine{
  position: fixed;
  bottom: 0;
  left: 67%;
  z-index: 8889;
  width: 0;
  height: 10px;
  background: rgba(255,255,255,0.7);
}

@media all and (max-width: 959px) {
  #fixedPhoto{
    width: 100%;
    height: 80vh;
  }
  #fixedPhoto ul li{
    position:absolute;
  }
  #fixedPhoto ul,
  #fixedPhoto ul li,
  #fixedPhoto ul li img{
    width: 100%;
    height: 80vh;
  }
  #fixedPhoto #timeLine{
    position: absolute;
    bottom: 0;
    left: 0;
  }
}
@media all and (max-width: 767px) {
  #fixedPhoto{
    width: 100%;
    height: 70vh;
  }
  #fixedPhoto ul li{
    position:absolute;
  }
  #fixedPhoto ul,
  #fixedPhoto ul li,
  #fixedPhoto ul li img{
    width: 100%;
    height: 70vh;
  }
}