@charset "utf-8";


/*---------------------------------------------
	body
---------------------------------------------*/
html {
  scroll-behavior: smooth;
  font-size: 62.5%;
}

/* 10px */
body {
  width:100%;
  font-size: 1.6rem;
  color: #333;
  line-height: 2.2;
  text-align: left;
  -webkit-text-size-adjust: 100%;
  font-family: 'Noto Serif JP', serif;
  background:#EFE9E6;
  letter-spacing: 0.05em;
}

img {
  width: 100%;
  height: auto;
}


/*---------------------------------------------
	Anchor
---------------------------------------------*/
a {
  outline: none;
}

a:link {
  color:#333;
  text-decoration: none;
}

a:visited {
  color:#333;
  text-decoration: none;
}

a:hover {
  color:#8b8b8b;
  text-decoration: none;
}

a:active {
  color:#8b8b8b;
  text-decoration: none;
}

a {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

/*---------------------------------------------
	p
---------------------------------------------*/
p {
  margin-bottom: 1em;
}

.only_pc_none {display:none; }
.only_sp_none {display:block; }
.sp_br{display: none;}


/*---------------------------------------------
 ** ON OFF hover
---------------------------------------------*/
.hover {
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}

.hover:hover {
  opacity: 0.6;
  filter: alpha(opacity=60);
  -ms-filter: "alpha( opacity=60 )";
}

/*=================================================================================================================================*/
/**  共通部分	*/
/*=================================================================================================================================*/

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.scroll-up.done, .scroll-fade.done{opacity : 1; transform : translate(0, 0);}
.load-fade {opacity : 0; transition : all 4s/*処理にかかる時間*/;}
.load-up{opacity: 0; transform: translateY(30px)/*スクロールアップする距離*/; transition: all 4s/*処理にかかる時間*/;}
.load-up.done, .load-fade.done{opacity : 1; transform : translate(0, 0);}


/*---------------------------------------------
 ** ヘッダー記述
---------------------------------------------*/

header{
  width:100%;
  min-height:1100px;
}
#index header{
  background:url(../img/main/main_top.jpg) no-repeat top center;
  background-size: cover;
}
#restaurant header{
  background:url(../img/main/main_restaurant.jpg) no-repeat top center;
  background-size: cover;
}
#menu header{
  background:url(../img/main/main_menu.jpg) no-repeat top center;
  background-size: cover;
}
#sake header{
  background:url(../img/main/main_sake.jpg) no-repeat top center;
  background-size: cover;
}
#hometown header{
  background:url(../img/main/main_hometown.jpg) no-repeat top center;
  background-size: cover;
}
#info header{
  background:url(../img/main/main_info.jpg) no-repeat top center;
  background-size: cover;
}


.header_in {
  width:95%;
  max-width:1200px;
  position:relative;
  margin:0 auto;
}
.header_in h1 a{
  width:161px;
  height:59px;
  max-width:161px;
  display: block;
  overflow: hidden;
  background:url(../img/common/logo.png) no-repeat;
  background-size:100%;
  text-indent: -9999px;
  position:absolute;
  top:30px;
  left:0;
}
.header_in h2{
  color:#fff;
  font-size:4.0rem;
  height:600px;
  writing-mode: vertical-rl;
  position:absolute;
  top:230px;
  right:40px;
  font-weight: normal;
  text-shadow: #000 1px 0 5px;
}


/*---------------------------------------------
 **  ナビゲーション
---------------------------------------------*/
#nav{
  width:82%;
  position:absolute;
  top:30px;
  right:0;
}
#nav ul{
  display: flex;
  justify-content: flex-end;
  font-size:120%;
}
#nav ul li a{
  margin-left:60px;
  text-shadow: 3px 2px 3px rgba(0,0,0,0.3);
}
/* #nav ul li:nth-child(2) a{
  margin-left:0px;
  } */

#nav ul li a:link{
  color:#fff;
}
#nav ul li a:visited{
  color:#fff;
}
#nav ul li a:hover {
  opacity: 0.4;
}

#nav ul li a:active {
  opacity: 0.4;
}
#nav .online{
  display: none;
}


/*---------------------------------------------
 ** 共通 コンテンツ
---------------------------------------------*/
.pan{
  width:90%;
  max-width:1100px;
  margin:1% auto;
  display: flex;
}

.pan li{
  display: inline-block;
  padding-left:5px;
}
.pan li a::after{
  content:'>';
  display: inline-block;
  padding-left:5px;
}

#content h2{
  width:90%;
  max-width:1100px;
  margin:0 auto;
  font-size:3.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.4;
  letter-spacing: 0.3em;
}
#content h2:before, #content h2:after {
  border-top: 1px solid;
  content: "";
  width: 1em;
}
#content h2:before {
  margin-right: 1em;
}
#content h2:after {
  margin-left: 0.7em;
}



.read{
  width:90%;
  max-width:600px;
  margin:2% auto 5%;
}
#index .read{
  margin:3% auto 5%;
}
#menu .read{
  max-width:820px;
}

.read p {
	padding: 3% 8%;
	position: relative;
  line-height: 2.2;
  font-size:120%;
}
#menu .read p {
	padding: 3% 5%;
}

.read p::before, .read p::after {
	content: '';
	width: 15px;
	height: 100%;
	position: absolute;
}

.read p::before {
	border-left: solid 1px #333;
	border-top: solid 1px #333;
	border-bottom: solid 1px #333;
	top: 0;
	left: 0;
}

.read p::after {
	border-right: solid 1px #333;
	border-top: solid 1px #333;
	border-bottom: solid 1px #333;
	top: 0;
	right: 0;
}

#content h3{
  width:90%;
  max-width:1100px;
  margin:0 auto;
  font-size:3.0rem;
  text-align: center;
  line-height: 1.4;
}
#content h3 span{
  font-size:70%;
}
#sake #content h3{
  width:100%;
  font-size:2.4rem;
  border-bottom:1px solid #333;
  padding-bottom:10px;
  margin-bottom:15px;
}


/*---------------------------------------------
 ** 共通カラム
---------------------------------------------*/

.column_2{
  width:90%;
  max-width: 1100px;
  margin: 5% auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.column_2 > dl{
  width:46%;
  margin-bottom:5%;
}

.column_2 > dl dt{
  display: block;
  position: relative;
  margin:0 auto 2%;
}
.column_2 > li{
  width:46%;
  margin-bottom:5%;
}
.column_2 > div{
  width:46%;
  margin-bottom:5%;
}


/* トップページのみ */
#index .column_2 > dl dt{
  margin-bottom:40px;
}

/* 
#index .column_2 > dl:nth-child(1) dt::after{
  content:"女将　丸尾 春美";
  display: block;
  position:absolute;
  bottom:-20px;
  left:-30px;
  width:45%;
  min-width:200px;
  padding:5px 0;
  text-align: center;
  background: #fff;
  font-size:120%;
}

#index .column_2 > dl:nth-child(2) dt::after{
  content:"料理長　横山 博典";
  display: block;
  position:absolute;
  bottom:-20px;
  right:-30px;
  width:45%;
  min-width:200px;
  padding:5px 0;
  text-align: center;
  background: #fff;
  font-size:120%;
}
 */
 
 
/* 御席のみ */
.res_col{
  width:90%;
  max-width: 1100px;
  margin: 5% auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.res_col div:nth-child(1){
  width:60%;
  position: relative;
}
.res_col div:nth-child(2){
  width:38%;
}
.res_col div img{
  margin-bottom:5%;
}

/* 
#restaurant .res_col div:nth-child(1)::after{
  content:"メインダイニング";
  display: block;
  position:absolute;
  top:20px;
  left:-20px;
  width:45%;
  padding:5px 0;
  text-align: center;
  background: #fff;
  font-size:120%;
}
#restaurant .column_2 > dl:nth-child(1) dt::after{
  content:"カウンター";
  display: block;
  position:absolute;
  top:20px;
  left:-20px;
  width:45%;
  padding:5px 0;
  text-align: center;
  background: #fff;
  font-size:120%;
}
#restaurant .column_2 > dl:nth-child(2) dt::after{
  content:"半個室";
  display: block;
  position:absolute;
  top:20px;
  left:-20px;
  width:45%;
  padding:5px 0;
  text-align: center;
  background: #fff;
  font-size:120%;
}
#restaurant .column_2 > dl:nth-child(3) dt::after{
  content:"御座敷";
  display: block;
  position:absolute;
  top:20px;
  left:-20px;
  width:45%;
  padding:5px 0;
  text-align: center;
  background: #fff;
  font-size:120%;
  } */

/* 御料理のみ */
#menu .column_2{
  margin: 3% auto 5%;
}

/* 御酒のみ */
.sake_list div dl{
  width:90%;
  margin:0 auto;
  border-bottom:1px dotted #333;
  display: flex;
  font-size:100%;
}
.sake_list div dl dt{
  width:72%;
  padding:5px 3%;
}
.sake_list div dl dd{
  width:18%;
  padding:5px 2%;
}

.sake_list div ul{
  width:90%;
  margin:0 auto;
  font-size:120%;
}
.sake_list div ul li{
  display: inline-block;
  margin-right:25px;
  line-height: 2.4;
}
.sake_list div ul li::before{
  content: '';
  display: inline-block;
  position: relative;
  border-radius: 100%;
  left: -3px;
  top: 0;
  width: 12px;
  height: 12px;
  background: #333;
}

/* 店舗情報・問合せのみ */
.info_col{
  width:90%;
  max-width: 1100px;
  margin: 5% auto;
  display: flex;
  flex-wrap:wrap;
  justify-content: space-between;
  flex-flow: row-reverse;
  line-height: 1.8;
  padding-bottom:5%;
}
.info_col > div:nth-child(1){
  width:58%;
}
.info_col > div:nth-child(2){
  width:42%;
}

.info_col .info_data{
  margin-left:5%;
  margin-bottom:20px;
  border-left:1px solid #333;
  padding:3% 0 3% 10%;
  font-size:130%;
}
.info_col .info_data dl{
  display: flex;
}

.info_col .info_data dl dt{
  display: inline-block;
  margin-right:20px;
}
.info_col .manager{
  font-size:110%;
}
.info_col .manager span{
  font-size:120%;
}

.info_col > div:nth-child(2){
  width:35%;
}
.info_col .phone{
  margin-top:20px;
  line-height: 1.4;
  margin-bottom:0;
}
.info_col .phone a{
  color:#333;
}


/*---------------------------------------------
 ** 共通ボックス
---------------------------------------------*/

.w_box{
  width:90%;
  max-width:760px;
  background:#fff;
  border:1px solid #333;
  margin:0 auto 10%;
}
.w_box p{
  padding:30px 50px;
}


/*---------------------------------------------
 ** 共通パララックス
---------------------------------------------*/
#index #content,
#info #content{
  margin-bottom:-3%;
  background:none;
}

#index #content:before{
content:"";
display:block;
position:fixed;
top:0;
left:0;
z-index:-1;
width:100%;
height:100vh;
background:url(../img/top/top_bg.jpg) no-repeat top 20% center;
background-size:100% auto;
}
#info #content:before{
content:"";
display:block;
position:fixed;
top:0;
left:0;
z-index:-1;
width:100%;
height:100vh;
background:url(../img/info/info_bg.jpg) no-repeat top 20% center;
background-size:100% auto;
}

#index .pallax, #info .pallax{
  width:100%;
  height:300px;
  display: block;
}

#index .pallax_w, #info .pallax_w{
  background:#EFE9E6;
  padding:3% 0 0;
}
#index .pallax_w2, #info .pallax_w2{
  padding-bottom:5%;
}
#info .pallax_w3{
  padding:0 0 2%;
}

/*---------------------------------------------
 ** 共通バナー
---------------------------------------------*/
.ban{
  width:90%;
  max-width: 1100px;
  margin: 5% auto;
}


#index .ban, #info .ban{
  margin-top:2%;
}
.ban ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.ban ul li{
  width:calc(33.333% - 3px);
  margin-right:3px;
}
.ban ul li:last-child{
  width:calc(33.333%);
  margin-right:0;
}
.ban ul li a{
  display: block;
  width:100%;
  height:150px;
  text-align: center;
  padding-top:100px;
  font-size:150%;
  color: #fff;
  letter-spacing: 0.5em;
  text-shadow: 3px 2px 3px rgba(0,0,0,0.3);
}

.ban ul li:nth-child(1) a{
  background:url(../img/common/ban_menu.jpg) no-repeat center center;
  background-size:cover;
}
.ban ul li:nth-child(2) a{
  background:url(../img/common/ban_restaurant.jpg) no-repeat center center;
  background-size:cover;
}
.ban ul li:nth-child(3) a{
  background:url(../img/common/ban_sake.jpg) no-repeat center center;
  background-size:cover;
}

/*---------------------------------------------
 ** googleマップ
---------------------------------------------*/
#map{
  width:90%;
  max-width:1100px;
  margin:0 auto 0;
  padding-top:5%;
}
#map iframe{
  width:100%;
  height:400px;
}


/*---------------------------------------------
 ** 共通フッター
---------------------------------------------*/
footer{
  background:#000;
}
.footer_in{
  width:90%;
  max-width:1100px;
  margin:10px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding:2% 0;
}
.footer_in h3{
  color:#fff;
  font-size:180%;
  line-height: 1.4;
  letter-spacing: 0.1em;
  font-weight: normal;
  margin:6px 0 14px;
}

.footer_in h3 span{
  font-size:1.4rem;
  display: block;
}
.footer_in p{
  color:#fff;
  margin-bottom:0;
  line-height: 1.8;
}

.add{
  margin-bottom: 6px
}
.add span{
  display: inline-block;
  margin-right:10px;
}
.phone{
  font-size:180%;
}
.phone span{
  font-size:1.8rem;
  display: block;
}

footer .phone a{
  color:#fff;
}

.sp_tel{
  display: none;
}

/*---------------------------------------------
 **  ページトップ
---------------------------------------------*/
#pageTop {
  position: fixed;
  bottom: 0;
  right: 0px;
  z-index: 999;
}

#pageTop a {
  display: block;
  width: 60px;
  height: 60px;
  background: url(../img/common/page_top.jpg) no-repeat;
  background-size: 100%;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

#pageTop a:hover {
  text-decoration: none;
  opacity: 0.7;
}


/*---------------------------------------------
 **  designwork 2021.1003
---------------------------------------------*/

.ds-b{
display:block;
}
.posi-r{
position:relative;
}

.room-ttl{
position:absolute;
width:176px;
top:3%;
left:2%;
text-align:left !important;
z-index:100;
}

.room-ttl img{
width:176px !important;
height:auto !important;
}

.drink{
line-height:1.1;
display:inline-block;
background:#b9ad9e;
color:#fff;
padding:0.4em 1.5em;
margin-left:24px;
}

.mt60{
margin-top:40px;
}

.tar{
  width:90%;
  max-width:1100px;
  margin:0 auto;
  font-size:90%;
  text-align:right;
  margin-bottom:-40px !important;
}

.sake_list p{
  width:90%;
  font-size:90%;
  margin-left:24px;
  margin-top:5px;
  }

.sake_list div dl span{
font-size:90%;
}

.photo01{
position:relative;
z-index:10;
}

.photo01-img{
position:absolute;
left:10px;
bottom:10px;
z-index:30;
}

.photo02-img{
position:absolute;
right:10px;
bottom:10px;
z-index:30;
}


.photo01-img img,
.photo02-img img{
width:176px !important;
height:auto !important;
}
/*---------------------------------------------
 **  2024/2/29追加
---------------------------------------------*/

.footer_in_banner {
    display: flex;
    justify-content: space-between;
}
.footer_in_banner a img{
    width: 300px;
    height: auto;
}
.footer_in_banner a:not(:last-child){
    margin-right: 20px;
}