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

          General Setting

*****************************************/
html, body {
 margin: 0;
 padding: 0;
}
body {
 font-family: "Noto Sans JP", Helvetica;
	font-size: 16px;
 color: #333;
}
h1, h2, h3, h4, ul, ol, p, dl {
 margin: 0;
 padding: 0;
}
ul {
 list-style: none;
}
img {
 max-width: 100%;
 max-height: 100%;
}

.Hide_pc{
 display: none;
}



@media only screen and (max-width: 768px){
.Hide_pc{
 display: block;
}
 .Hide_sp{
 display: none;
}
}

/****************************************

          header

*****************************************/

header{
 background: url("../images/main.jpg") no-repeat center;
 background-size: cover;
 padding-top: calc(810 / 1800 *100%);
 position: relative;
}

header h1{
 position: absolute;
 top: calc(50% - 80px);
 height: 160px;
 width: 100%;
 text-align: center;
}



@media only screen and (max-width: 768px){
 header{
 background: url("../images/main_sp.jpg") no-repeat center;
 background-size: cover;
 padding-top: calc(144 / 144 *100%);
 }
 header h1{
  top: calc(50% - 72px);
  height: 144px;
}
}

.btn {
 box-sizing: border-box;
 display: block;
 height: 60px;
 width: 256px;
	border-radius: 56px 0px 0px 56px;
 border: 2px solid#FFF;
 border-right: none;
 color: #fff;
 text-decoration: none;
 line-height: 60px;
 position: fixed;
 z-index: 999;
 right: 0; 
 transition: 0.5s;
 padding-left: 72px;
 font-size: 20px;
}

.btn.reservation{
 background: url("../images/reservation.png")rgba(217, 80, 40, 1.0) no-repeat left 24px center; 
 background-size: 32px; 
 top: 40px; 
}

.btn.reservation:hover{
 background: url("../images/reservation.png")rgba(217, 80, 40, 0.7) no-repeat left 24px center;
 background-size: 32px; 
}

.btn.instagram{
 background: url("../images/icon_insta.png") rgba(0, 0, 0, 1.0) no-repeat left 24px center; 
 background-size: 32px;
 top: 116px;
}

.btn.instagram:hover{
 background: url("../images/icon_insta.png") rgba(0, 0, 0, 0.7) no-repeat left 24px center;
 background-size: 32px;
}

.btn.line{
 background: url("../images/line.png") rgba(0, 0, 0, 1.0) no-repeat left 24px center; 
 background-size: 32px;
 top: 192px;
}

.btn.line:hover{
 background: url("../images/line.png") rgba(0, 0, 0, 0.7) no-repeat left 24px center;
 background-size: 32px;
}

@media only screen and (max-width: 768px){
 .btn {
  height: 48px;
  line-height: 46px;
  width: 120px;
  font-size: 15px;
  text-align: center;
 }
 
 .btn.reservation{
 background:rgba(217, 80, 40, 1.0) ; 
 background-size: 24px; 
 top: 16px; 
  padding-left: 8px;
}
 
 .btn.reservation:hover{
 background: rgba(217, 80, 40, 0.7);
}
 
 .btn.instagram{  
  top: 74px; 
  background: url("../images/icon_insta.png") rgba(0, 0, 0, 1.0)no-repeat left 16px center; 
 background-size: 20px;
  padding-left: 40px;
 }
 
 .btn.instagram:hover{
 background: url("../images/icon_insta.png") rgba(0, 0, 0, 0.7)no-repeat left 16px center;
 background-size: 20px;
}
 
 .btn.line{
  font-size: 14px;
  height: 60px;
 background: url("../images/line.png") rgba(0, 0, 0, 1.0) no-repeat left 16px center; 
 background-size: 20px;
 top: 132px;
  padding-left: 32px;
  padding-top: 8px;
  line-height: 20px;
}
 
 .btn.line:hover{
 background: url("../images/line.png") rgba(0, 0, 0, 0.7) no-repeat left 16px center;
 background-size: 20px;
}
 
}
/****************************************

          main

*****************************************/

.main{
 text-align: center;
 width: 90%;
 margin: auto;
}

.main h2{ 
 font-size: 40px;
 font-weight: 400;
 margin-top: 40px;
}

.main h3{
 font-size: 28px;
 font-weight: 350;
 margin-top: 16px;
}

.main h2.en{ 
 font-size: 28px;
}

.main h3.en{
 font-size: 20px;
 color: #555;
 line-height: 1.4em;
}

.reservation_link{
 height: 80px;
 display: block;
 width: 512px;
 background: #D95028;
 border-radius: 40px;
 color: #fff;
 font-size: 24px;
 text-decoration: none;
 text-align: center;
 margin: auto;
 line-height: 80px;
 transition: 0.5s;
 margin-top: 80px;
}

.reservation_link:hover{
 background: rgba(217, 80, 40, 0.70); 
}

@media only screen and (max-width: 768px){
 
 .main h2{ 
 font-size: 20px;
 margin-top: 16px;
}

.main h3{
 font-size: 16px;
 margin-top: 8px;
}

.main h2.en{ 
 font-size: 16px;
}

.main h3.en{
 font-size: 14px;
 color: #555;
}
 
 .reservation_link{
  width: 100%;
  height: 54px;
  line-height: 54px;
  font-size: 16px;
  margin-top: 32px;
 }
}
/****************************************

         Concept

*****************************************/
.concept h2{
 text-align: center;
font-family: "Ten Mincho";
font-size: 48px;
font-weight: 400;
 margin-top: 80px;
}

.concept p{
font-size: 24px;
font-weight: 400;
 width: 820px;
 margin: auto;
 margin-top: 24px;
}

.concept p.en{
font-size: 20px;
 color: #555;
 line-height: 1.4em;
}

.concept .concept_image{
 line-height: 0;
 margin-top: 32px;
}

.concept .concept_image img{
 width: 100%;
 max-width: 1600px;
 margin: auto;
 display: block; 
}

@media only screen and (max-width: 768px){
 
 .concept h2{
font-size: 26px;
 margin-top: 32px;
}
 .concept p{
 width: 90%;
  font-size: 16px;
}
 .concept p.en{
font-size: 14px;
}
}

/****************************************

         Access

*****************************************/
.access h2{
 text-align: center;
font-family: "Ten Mincho";
font-size: 48px;
font-weight: 400;
 margin-top: 80px;
 
}

.two_col{
 display: table;
 width: 90%;
 margin: auto;
 table-layout: fixed;
 border-collapse: separate;
 border-spacing: 40px 0;
 margin-top: 80px;
}

.two_col .map,
.two_col .info{
 display: table-cell;
 vertical-align: top;
}

.two_col .map iframe{
 border: none;
 width: 100%;
 height: 405px;
 border-radius: 20px;
}

.two_col .info h3{
 font-size: 16px;
}

.two_col .info table{
 font-size: 16px;
 font-weight: 400;
 margin-top: 16px;
 border-collapse: collapse;
}

.two_col .info table th,
.two_col .info table td{
 padding: 2px 0;
 vertical-align: top; 
}

.two_col .info table th{
 font-weight: 400;
 text-align: left;
 width: 120px;
}

@media only screen and (max-width: 768px){
 
.access h2{
font-size: 26px;
 margin-top: 32px;
}
 .two_col{
 display: block;
 width: 90%;
 margin: auto;
}

.two_col .map,
.two_col .info{
  display: block;
 width: auto;
 margin-top: 32px;
}
 
 .two_col .info table{
 font-size: 16px;
 font-weight: 400;
 margin-top: 16px;
}

.two_col .info table th,
.two_col .info table td{
 display: block;
 padding: 4px 0;
}

.two_col .info table th{
 font-weight: 600;
 text-align: left;
 width: auto;
 padding-bottom: 0;
}
 
}
/****************************************

         footer

*****************************************/
footer{
 background: #000;
 text-align: center;
 color: #fff;
 padding: 80px 0 16px;
 font-size: 12px;
 margin-top: 80px;
}

footer .footer_logo{
 width: 60%;
 max-width: 400px;
}

footer .icon_insta img{
 width: 48px;
 margin: 24px 0 36px;
}

@media only screen and (max-width: 768px){
 footer{padding: 40px 0 16px;
 }
}