@charset "utf-8";

/*------------------------------------------------------------------------------------------------------------------
　base style
-------------------------------------------------------------------------------------------------------------------*/

* {
  margin:0;
  padding:0;
}

body {
  position:relative;
  font-family: "BIZ UDPGothic","Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  font-size: 16px;
  color: #fff;
  background-color: #1c1c1c;
  line-height:1.6;
}

@media screen and (max-width:640px) {
  body {
    font-size: 20px;
  }
}

img {
  max-width:100%;
  height:auto;
  -ms-interpolation-mode:bicubic;
  vertical-align:bottom;
}

ul {
  list-style:none;
}

.cl:after {
  content:"";
  display:block;
  height:0;
  clear:both;
}

.txtNone {
	text-indent:200%;
	white-space:nowrap;
	overflow:hidden;
}

.inner {
  width: 1200px;
  margin-left:auto;
  margin-right:auto;
  box-sizing: border-box;
}
@media screen and (max-width:640px) {
  .inner {
    width: calc(100% - 40px);
    margin-left:20px;
    margin-right:20px;
  }
}
.ct:after {
  content:"";
  display:block;
  height:0;
  clear:both;
}
.clear:after {
  content:"";
  display:block;
  height:0;
  clear:both;
}

.fsize-ss { font-size: 75.0%; }
.fsize-s { font-size: 87.5%; }
.fsize-m { font-size: 112.5%; }
.fsize-l { font-size: 125.0%; }
.fsize-ll { font-size: 150.0%; }
.fsize-3l { font-size: 200.0%; }

a {
  color: inherit;
  text-decoration: none;
}

.tel-link {
  pointer-events:none;
  cursor:default;
}
.tel-link,
.tel-link:visited,
.tel-link:hover,
.tel-link a,
.tel-link a:visited,
.tel-link a:hover {
  text-decoration:none;
  color:inherit;
}

@media (max-width:640px) {
  .tel-link {
    text-decoration:underline;
    pointer-events:inherit;
    cursor:pointer;
  }
}

.ua-pc img.img-hv,
.ua-pc a.img-hv img {
  -webkit-transition:opacity 0.25s ease;
  transition:opacity 0.25s ease;
}
  
.ua-pc img.img-hv:hover,
.ua-pc a.img-hv:hover img {
  opacity:0.6;
}


/*----------------------------------------------------------------------------
   header
------------------------------------------------------------------------------*/
header {
  position: relative;
  z-index: 2;
  background-color: #1c1c1c;
}

header .inner {
  display: flex;
  height: 60px;
  justify-content: space-between;
  align-items: center;
  line-height: 1;
}
header .siteDescription {
  width: calc(50% - 150px);
  font-size: 11px;
}
header h1 {
  display: block;
  width: 270px;
  height: 270px;
  padding: 0;
  margin: 210px 0 0;
}
header h1 a {
  display: block;
  width: 270px;
  height: 270px;
  background: url("../image/header/logo.png") no-repeat center;
  background-color: #ffe103;
}
.subpage header h1 a {
  height: 102px;
}
header .wayToContact {
  width: calc(50% - 150px);
  text-align: right;
}
header .wayToContact .tel-link img {
  width: 180px;
}
@media screen and (max-width:640px) {
  header {
    position: fixed;
    top: 0;
    z-index: 99;
  }
  header .inner {
    width: 600px;
    height: 80px;
    box-shadow: 0px 6px 10px -6px rgba(0,0,0,0.6);
  }
  header .siteDescription {
    display: none;
  }
  header h1 {
    width: 242px;
    height: 102px;
    margin: 22px 0 0;
  }
  header h1 a {
    width: 242px;
    height: 102px;
  }
  header .wayToContact {
    width: 320px;
    text-align: right;
  }
  header .wayToContact .line i {
    width: 40px;
    height: 40px;
  }
  header .wayToContact .line span {
    display: none;
  }
  header .wayToContact .tel-link img {
    width: 224px;
  }
}

/*----------------------------------------------------------------------------
   mainvisual
------------------------------------------------------------------------------*/
#mainvisual {
  width: 100%;
  box-sizing: border-box;
  background-image: url("../image/mainvisual/img2022.jpg");
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  z-index: 1;
}
#mainvisual .inner {
  position: relative;
  height: 770px;
}
#mainvisual .cacth {
  position: absolute;
  bottom: 155px;
  left: -96px;
}
@media screen and (max-width:1420px) {
  #mainvisual .cacth {
    left: -10px;
  }
}

@media screen and (max-width:640px) {
  #mainvisual {
    margin-top: 80px;
    height: 760px;
    background-image: url("../image/mainvisual/img_sp2022.png");
    background-position: top center;
  }
  #mainvisual .inner {
    height: 760px;
  }
}


/*----------------------------------------------------------------------------
   nav
------------------------------------------------------------------------------*/
.homeheader nav {
  position: relative;
  z-index: 2;
  bottom: 50px;
}
.subpage nav {
  position: relative;
  z-index: 2;
  bottom: 30px;
}
nav .inner {
  max-width: 1120px;
}
nav ul {
  display: flex;
  justify-content: space-between;
}
nav ul li {
  display: block;
  width: 33.33%;
  box-sizing: border-box;
}
nav ul li a {
  position: relative;
  display: block;
  width: 100%;
  height: 110px;
  box-sizing: border-box;
  padding-top: 36px;
  transition: 0.2s all;
  background-color: rgba(0,0,0,0.8);
  border-bottom: 3px solid #000;
  text-align: center;
}
nav ul li a::after {
  position: absolute;
  transition: 0.2s all;
  content: '';
  width: 0;
  left: 50%;
  bottom: -3px;
  height: 3px;
  background: #ffe103;
}
nav ul li a:hover:after,
nav ul li.active a::after {
  width: 100%;
  left: 0;
}
nav ul li.nav01 a i {
  position: absolute;
  top: -40px;
  left: calc(50% - 36px);
  display: block;
  width: 73px;
  height: 70px;
  background: url("../image/navi/icon01.png") no-repeat;
}
nav ul li.nav02 a i {
  position: absolute;
  top: -38px;
  left: calc(50% - 30px);  
  display: block;
  width: 59px;
  height: 67px;
  background: url("../image/navi/icon02.png") no-repeat;
}
nav ul li.nav03 a i {
  position: absolute;
  top: -38px;
  left: calc(50% - 38px);
  display: block;
  width: 77px;
  height: 68px;
  background: url("../image/navi/icon03.png") no-repeat;
}

@media screen and (max-width:640px) {
  nav ul li a {
    height: 100px;
  }
  nav ul li a img {
    height: 38px;
  }
}


/*----------------------------------------------------------------------------
   information
------------------------------------------------------------------------------*/
#information {
  position: relative;
  z-index: 1;
  padding-top: 100px;
  top: -110px;
  background:url("../image/footer/bg.jpg") no-repeat top center;
}
#information .inner {
  display: flex;
  flex-wrap: nowrap;
  padding: 46px 0;
  background-color: rgba(0,0,0,0.9);
  border:2px solid #ffe103;
}

#information .infoBox {
  display: block;
  width: 50%;
  padding: 0 46px;
  box-sizing: border-box;  
}
#information .infoBox .p-glog {
  padding-top: 20px;
}
#information .infoBox .infoDetail-ct {
  margin-bottom: 40px;
}
#information .infoBox .p-glog__img--left {
  float:left;
  margin-right:20px;
}
#information .infoBox .p-glog__img--right {
  float:right;
  margin-left:20px;
}
#information .infoBox .p-glog__img--left:not([data-mg="0"]),
#information .infoBox .p-glog__img--right:not([data-mg="0"]) {
  margin-bottom:20px;
}
#information .infoBox .img--center__item[data-ps="top"]:not([data-mg="0"]) {
  margin-bottom:20px;
}
#information .infoBox .img--center__item[data-ps="bottom"]:not([data-mg="0"]) {
  margin-top:20px;
}
@media screen and (max-width:640px) {
  #information .infoBox .p-glog__img--left:not([data-mg="0"]),
  #information .infoBox .p-glog__img--right:not([data-mg="0"]) {
    margin-bottom:20px;
  }
  #information .infoBox .img--center__item[data-ps="top"]:not([data-mg="0"]) {
    margin-bottom:20px;
  }
  #information .infoBox .img--center__item[data-ps="bottom"]:not([data-mg="0"]) {
    margin-top:20px;
  }
}

#information #covid19 {
  border-right: 3px solid #313131;
}
#information #covid19 h3 {
  width: 360px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  color: #ff5d5d;
  font-weight: normal;
  margin: 0 auto 0.5em;
}
#information #covid19 h3 i {
  display: inline-block;
  width: 49px;
  height: 50px;
  background: url("../image/home/info_icon.png") no-repeat;
  margin-right: 0.5em;
}
#information #covid19 p {
  margin-bottom: 1em;
}
#information #covid19 .check {
  padding: 0.75em 1em;
  box-sizing: border-box;
  background-color: #fff;
  color: #191919;
  margin-bottom: 0.5em;
}
#information #covid19 .check:last-of-type {
  margin-bottom: 0;
}
#information h2 {
}
#information .infoContent {
  height: 280px;
  margin-top: 1em;
}
#information .infoContent .date {
  padding-top: 0.75em;
  color: #ffe103;
}
#information .infoContent .pgTtl {
  padding-bottom: 0.75em;
  border-bottom: 1px solid #ffe103;
}
@media screen and (max-width:640px) {
  #information .inner {
    display: block;
    padding: 0 30px;
  }  
  #information .infoBox {
    width: 100%;
    padding: 30px 0;
  }
  #information #covid19 {
    border-right: none;
    border-bottom: 3px solid #313131;
  }
  #information #covid19 h3 {
    width: 414px;
  }
  #information .infoContent {
    height: 460px;
  }
}


/*----------------------------------------------------------------------------
   point
------------------------------------------------------------------------------*/
#point {
  margin-top: -60px;
}
#point .box01 {
  margin-bottom: 40px;
}
#point .pointBox {
  position: relative;
  width: 100%;
  height: 720px;
  background: url("../image/home/point_bg.png") no-repeat;
}
#point .pointBox .light {
  position: absolute;
  top: 10px;
  left: 20px;
  z-index: 2;
}
#point .pointBox .number {
  position: absolute;
  top: -30px;
  left: -110px;
  z-index: 3;
}
#point .pointBox .title {
  position: absolute;
  top: 60px;
  left: 314px;
  z-index: 3;
}
#point .pointBox .message {
  max-width: 800px;
  text-shadow: -1px -1px 2px #000000;
  position: absolute;
  top: 126px;
  left: 314px;  
  z-index: 3;
}
#point .pointBox .check {
  position: absolute;
  bottom: 60px;
  left: 55px;
  z-index: 1;
  width: 1095px;
  display: flex;
  justify-content: space-between;  
}
#point .pointBox .check li {
  width: calc(33.33% - 20px);
  padding: 16px;
  border-radius: 8px;
  background-color: #1c1c1c;
  box-sizing: border-box;
  box-shadow: 0px 20px 20px 0px rgba(0,0,0,0.6);
}
#point .pointBox .check li p {
  padding: 0 1em;
  margin-top: 1em;
}

@media screen and (max-width:1460px) {
  #point .pointBox .number {
    width: 340px;
    left: -30px;
  }
}
@media screen and (max-width:640px) {  
  #point {
    margin-top: 0px;
  }
  #point .box01 {
    margin-bottom: 100px;
  }
  #point .pointBox {
    position: static;
    width: 100%;
    height: auto;
    background: linear-gradient(25deg,rgba(0,0,0,0.4), rgba(0,0,0,0.4)),url("../image/footer/bg.jpg") repeat-y top;
    border:5px dotted #c11920;
    box-sizing: border-box;
  }
  #point .pointBox .light {
    display: none;
  }
  #point .pointBox .number {
    width: 320px;
    position: relative;
    top: -70px;
    left: 50%;
    transform: translate(-50%, 0%);
    margin: 0 auto -40px;
  }
  #point .pointBox .title {
    position: static;
    display: block;
    margin: 0 auto 24px;
  }
  #point .pointBox .message {
    position: static;
    max-width: 540px;
    margin: 0 auto 30px;
  }
  #point .pointBox .check {
    position: static;
    width: 580px;
    margin:0 auto;
    justify-content: center;
    flex-wrap: wrap;
  }
  #point .pointBox .check li {
    display: block;
    width: calc(50% - 40px);
    margin-bottom:40px;
  }
  #point .pointBox .check li:first-child {
    margin-right: 30px;
  }
  #point .pointBox .check li p {
    padding: 0;
    margin-top: 1em;
  }
}


/*----------------------------------------------------------------------------
   interior
------------------------------------------------------------------------------*/
#interior {
  position: relative;
  top: -80px;
  z-index: -1;
  width: 100%;
  height: 713px;
  padding-top: 80px;
  box-sizing: border-box;
  background: url("../image/home/interior_bg.jpg") no-repeat top center;  
}
#interior .inner {
  position: relative;
}
#interior h2 {
  position: absolute;
  left: -40px;
  top: 35px;
}
#interior .catch {
  position: absolute;
  right: 0;
  top: 73px;
  z-index: 2;
}
#interior .point {
  position: absolute;
  left: -17px;
  top: 210px;
  width: 1234px;
  height: 504px;
  background: url("../image/home/interior_img2022.png") no-repeat top center;  
}
#interior .msg01 {
  position: absolute;
  left: -16px;
  top: 324px;
}
#interior .msg02 {
  position: absolute;
  left: 360px;
  top: 50px;
}
#interior .msg03 {
  position: absolute;
  right: 60px;
  top: 344px;
}

@media screen and (max-width:1330px) {
  #interior .msg01 {
    left: 30px;
  }
}

@media screen and (max-width:640px) {  
  #interior {        
    top: -40px;
    padding-top: 40px;
    height: 500px;
    background: url("../image/home/interior_bg.jpg") no-repeat center;  
  }
  #interior h2 {
    width: 370px;
    left: 0px;
    top: 34px;
  }
  #interior .catch {
    width: 300px;
    position: absolute;
    top: 90px;
  }
  #interior .point {
    width: 617px;
    height: 252px;
    background-size: contain;
    left: -8px;
    top: 170px;
  }
  #interior .msg01 {
    width: 200px;
    position: absolute;
    left: 0px;
    top: 160px;
  }
  #interior .msg02 {
    width: 244px;
    position: absolute;
    left: 200px;
    top: 20px;
  }
  #interior .msg03 {
    width: 226px;
    position: absolute;
    right: 20px;
    top: 170px;
  }
}


/*----------------------------------------------------------------------------
   foodmenu
------------------------------------------------------------------------------*/
#foodmenu {
  width: 100%;
  overflow: hidden;
  margin-top: 30px;  
}
#foodmenu .slider {
  width: 100%;
  height: 360px;
  padding: 20px 0;
  background: url("../image/home/menu_bg.png") no-repeat top left,url("../image/home/menu_bg.png") no-repeat bottom left;
}
#foodmenu .slider__inner {
  overflow: hidden;
}
#foodmenu .slider__item {
  float: left;
  width: 360px; 
  height: 360px;
}
#foodmenu .slider__item a {
  text-decoration: none;
  text-align: center;
}
#foodmenu .slider__item a figure {
  position: relative;
  opacity: 0.7;
  transition: 0.3s all;
}
#foodmenu .slider__item a:hover figure {
  opacity: 1;
}
#foodmenu .slider__item figure figcaption {
  position: absolute;
  z-index: 2;
  bottom: 10px;
  left: 50%;
  display: block;
  width: 80%;
  padding: 0.5em 1em;
  box-sizing: border-box;
  background-color: #c11920;
  margin: 0 auto;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

#foodmenu .btn {
  position: relative;
  z-index: 2;
  display: block;
  width: 780px;
  height: 78px;
  margin: -40px auto 0;
  padding: 24px;
  box-sizing: border-box;
  background-color: #191f61;
  text-align: center;
  transition: 0.3s all;
}
#foodmenu .btn i {
  position: absolute;
  top: 20px;
  right: 24px;
  display: block;
  width: 35px;
  height: 35px;
  background: url("../image/home/foodmenu_btn_ic.png") no-repeat;
  transition: 0.3s all;
}
#foodmenu .btn:hover {
  background-color: #232A76;
}
#foodmenu .btn:hover i {
  right: 18px;
}

@media screen and (max-width:640px) {
  #foodmenu .slider {
    height: 300px;
  }
  #foodmenu .slider__item {
    float: left;
    width: 300px; 
    height: 300px;
  }
  #foodmenu .slider__item figure figcaption {
    display: none;
  }
  #foodmenu .btn {
    width: 600px;
    padding: 20px 24px;
    text-align: left;
  }
  #foodmenu .btn img {
    width: 500px;
  }
  #foodmenu .btn i {
    top: 22px;
  }
}


/*----------------------------------------------------------------------------
   access
------------------------------------------------------------------------------*/
#access {
  padding-top: 150px;
  margin: -70px 0 50px;
}
#access .inner {
  position: relative;
  background: url("../image/home/access_bg.png") no-repeat top right;
  background-color: rgba(0,0,0,0.9);
  border:2px solid #ffe103;
  padding: 40px;
  box-sizing: border-box;
}
#access h2 {
  position: absolute;
  top: -32px;
  left: calc(50% - 324px);
}
#access .wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  margin-top: 80px;
}
#access .map {
  width: calc(50% - 20px);
}
#access .map iframe {
  width: 100%;
  height: 500px;
}

#access .profile {
  width: calc(50% - 20px);
}
#access .profile .logo {
  display: block;
  margin: 0 auto 30px;
}
#access .profile .shopinfo dl {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  border-bottom:1px solid #ffe103;
}
#access .profile .shopinfo dl:last-of-type {
  border-bottom: none;
}
#access .profile .shopinfo dt {
  width: 6em;
  padding: 0.5em 0;
}
#access .profile .shopinfo dd {
  width: calc(100% - 6em);
  padding: 0.5em 0;  
}
@media screen and (max-width:640px) {
  #access .inner {
    padding: 30px;
  }
  #access h2 {
    width: 100%;
    left: calc(50% - 300px);
  }
  #access .wrap {
    display: block;
    margin-top: 50px;
  }  
  #access .map {
    width: 100%;
    margin-bottom: 30px;
  }
  #access .profile {
    width: 100%;
  }
}


/*----------------------------------------------------------------------------
   footer
------------------------------------------------------------------------------*/

footer {
  width: 100%;
  height: 322px;
  background:url("../image/footer/bg.jpg") no-repeat top center;
  margin-top: 150px;
}
footer nav {
  position: relative;
  top: -50px;
}
footer .logo {
  display: block;
  width: 270px;
  height: 210px;
  margin: 2px auto 0;
  background: url("../image/header/logo.png") no-repeat center;
  background-color: #ffe103;
}

@media screen and (max-width:640px) {
  footer .logo {
    margin: 12px auto 0;
  }
}

.pagetop {
  position: fixed;
  z-index: 10;
  bottom: 0;
  right: 30px;
}

.instagram {
  position: fixed;
  z-index: 10;
  top: 250px;
  right: 0;
  background-color:#fff;
border-radius: 0 0 0 25px;padding: 10px;box-sizing: border-box;}

.line {
  position: fixed;
  z-index: 10;
  top: 150px;
  right: 0;
  background-color:#fff;
border-radius: 25px 0 0 0;box-sizing: border-box;padding: 10px;}