@charset "UTF-8";
/* ********************
  Common
******************** */
html {
  font-size: 62.5%;
  --vh: 100vh;
  --bg-scroll: 0;
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
}

body {
  position: relative;
  font-family: YakuHanMP, "Noto Serif JP", "ヒラギノ明朝 ProN W3", "游明朝 Medium", "Yu Mincho Medium", "游明朝", "Yu Mincho", YuMincho, serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.6;
  color: #000000;
}
body.gNaviOpen {
  overflow: hidden;
}

.wrapper::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: 100vh;
  height: 100dvh;
  z-index: -1;
  margin: auto;
  background-image: url(../image/common/bg.jpg);
  background-position: center top var(--bg-scroll);
  background-size: cover;
  background-repeat: repeat;
  background-color: #fff;
}

* {
  box-sizing: border-box;
}

p, ul, ol, li {
  margin: 0 0 1.75em;
}

ul, ol {
  padding-left: 1.5em;
}

p:last-child, li:last-child {
  margin-bottom: 0;
}

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

a,
.hasLink,
button {
  transition: 0.5s ease;
  cursor: pointer;
}

a:hover,
.hasLink:hover,
button:hover {
  opacity: 0.6;
}

a[href^="tel:"],
a[href^="mailto:"],
a.nocolor {
  color: inherit;
  text-decoration: inherit;
}

table {
  border-collapse: collapse;
}

.ibWrap > span {
  display: inline-block;
}

@media screen and (max-width: 768px) {
  .pc-only {
    display: none !important;
  }
}
@media screen and (max-width: 450px) {
  .sp-only {
    display: none !important;
  }
}
/* ********************
  Header
******************** */
.header {
  position: fixed;
  inset: 0 0 auto;
  width: 552px;
  margin: auto;
  z-index: 500;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  background: #000000;
  transition: 0.5s ease;
}
body.cate_home:not(.gNaviOpen) .header {
  background: rgba(0, 0, 0, 0);
}
body.cate_home.is-scroll .header {
  background: #000000;
}
.header__logo {
  line-height: 0;
  width: 155px;
}
.menuIcon {
  position: relative;
  width: 43px;
  height: 43px;
  background: none;
  border: none;
}
.menuIcon:hover {
  opacity: 1;
}
.menuIcon__line {
  position: absolute;
  inset: 0;
  margin: auto;
  display: block;
  width: 100%;
  height: 1px;
  background-color: #ffffff;
  transition: 0.5s ease, transform-origin 0s;
}
.menuIcon__line:nth-child(1) {
  transform: translateY(-12px);
}
.menuIcon__line:nth-child(2) {
  transform-origin: left;
}
.menuIcon__line:nth-child(3) {
  transform: translateY(12px);
}
body.gNaviOpen .menuIcon__line:nth-child(1) {
  transform: rotate(45deg);
}
body.gNaviOpen .menuIcon__line:nth-child(2) {
  transform: scale(0, 1);
  transform-origin: right;
}
body.gNaviOpen .menuIcon__line:nth-child(3) {
  transform: rotate(-45deg);
}

.headerNavi {
  position: fixed;
  inset: 0;
  width: 552px;
  height: var(--vh);
  margin: auto;
  z-index: 450;
  transition: 0.5s ease;
  overflow-y: auto;
}
body:not(.gNaviOpen) .headerNavi {
  visibility: hidden;
  opacity: 0;
}
.headerNavi__body {
  padding: 120px 0;
  transition: 0.5s ease;
}
body:not(.gNaviOpen) .headerNavi__body {
  transform: translateY(-20px);
}
.headerNavi__overlay {
  position: fixed;
  inset: 0 0 auto;
  width: 552px;
  height: var(--vh);
  margin: auto;
  z-index: -1;
  background-image: url(../image/common/bg.png);
  background-position: top var(--bg-scroll) center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #fff;
}

.gNavi {
  font-size: 1.2em;
  font-weight: 900;
  text-align: center;
}
.gNavi a {
  display: block;
  color: inherit;
  text-decoration: inherit;
}
.gNavi > ul {
  list-style: none;
  padding: 0;
}

/* ********************
  Footer
******************** */
footer {
  padding-top: 7.2em;
  background-color: #c9c9c9;
  font-size: 1.4rem;
}
@media screen and (max-width: 450px) {
  footer {
    font-size: 1.2rem;
  }
}

.copyright {
  background: #000000;
  color: #ffffff;
  text-align: center;
  font-family: "Roboto", sans-serif;
  line-height: 2.85;
}

/* ********************
  Header
******************** */
h2 {
  font-size: 3.6rem;
  font-weight: inherit;
  text-align: center;
}
@media screen and (max-width: 768px) {
  h2 {
    font-size: 3rem;
  }
}
@media screen and (max-width: 450px) {
  h2 {
    font-size: 2.4rem;
  }
}

h3 {
  font-size: 3.6rem;
  font-weight: inherit;
  margin: 0;
}
@media screen and (max-width: 768px) {
  h3 {
    font-size: 3rem;
  }
}
@media screen and (max-width: 450px) {
  h3 {
    font-size: 2.4rem;
  }
}

/* ********************
  Link
******************** */
.linkButton {
  text-align: center;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
}
.linkButton a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 22.6rem;
  max-width: 100%;
  height: 3rem;
  border: 1px solid;
  line-height: 1.2;
  color: inherit;
  text-decoration: none;
  transition: 0.5s ease;
}
.linkButton a:hover {
  opacity: 1;
}
@media screen and (max-width: 450px) {
  .linkButton a {
    font-size: 1.8rem;
  }
}

/* ********************
  Loading
******************** */
.loading {
  position: fixed;
  inset: 0 0 auto;
  height: var(--vh);
  background: #ffffff;
  z-index: 3000;
}
.loading__logo {
  position: absolute;
  inset: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
}

/* ********************
  Animation
******************** */
.anim-fade {
  transition: 0.5s ease;
}
.anim-fade:not(.is-active) {
  transform: translateY(2rem);
  opacity: 0;
}

/* ********************
  Home
******************** */
.fv {
  color: #ffffff;
  text-align: center;
  position: relative;
}
.fv__logo {
  position: absolute;
  inset: 0;
  z-index: 10;
  margin: auto;
  width: 42rem;
  max-width: min(80vh, 80vw);
  aspect-ratio: 420/135;
}
.fv__link {
  position: absolute;
  bottom: 20%;
  left: 0;
  right: 0;
  z-index: 10;
  margin: auto;
}

.fv-swiper .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.kv {
  position: relative;
  width: 100%;
}
.kv__ramen {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
}
.kv__ramen img {
  max-width: none;
  height: min(100vh, 100rem);
  height: min(100dvh, 100rem);
  max-height: 90vw;
}
.kv__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.kv__bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* ********************
  SEASONAL MENU
******************** */
.seasonal {
  text-align: center;
}
.seasonal h2 {
  padding-top: 2.5em;
  margin: 0 0 2em;
}
@media screen and (max-width: 768px) {
  .seasonal h2 {
    padding-top: 1.5em;
    margin-bottom: 1.2em;
  }
}

/* ********************
  Concept
******************** */
.concept h2 {
  margin: 3.6em 0 2.2em;
}
@media screen and (max-width: 768px) {
  .concept h2 {
    margin-top: 2em;
    margin-bottom: 1.4em;
  }
}

.conseptList {
  font-size: 2rem;
  padding: 0;
  max-width: 192rem;
  margin: auto;
  display: grid;
  grid-template-columns: 100%;
  gap: 5em;
}
.conseptList__item {
  display: grid;
  margin: 0;
}
.conseptList__text {
  max-width: 78rem;
  margin-left: auto;
}
.conseptList__ph img {
  width: 100%;
}
@media screen and (min-width: 769px) {
  .conseptList__item {
    grid-template-columns: 50% 1fr;
    gap: 3.7em;
  }
  .conseptList__item:nth-child(2n) {
    grid-template-columns: 1fr 50%;
  }
  .conseptList__item:nth-child(2n) .conseptList__text {
    margin-right: auto;
    margin-left: 0;
  }
  .conseptList__item:nth-child(2n) .conseptList__ph {
    order: -1;
  }
}
@media screen and (max-width: 768px) {
  .conseptList {
    font-size: 1.8rem;
    gap: 3em;
  }
  .conseptList__item {
    grid-template-columns: 100%;
    gap: 2em;
  }
  .conseptList__text {
    padding: 0 1em;
  }
}
@media screen and (max-width: 450px) {
  .conseptList {
    font-size: 1.6rem;
  }
}

/* ********************
  MENU
******************** */
.menu {
  background-color: #000000;
  color: #ffffff;
  font-size: 2rem;
  padding: 2.5em 1em 3em;
  margin-top: 5em;
}
.menu h2 {
  margin-top: 0;
}
@media screen and (max-width: 768px) {
  .menu {
    font-size: 1.8rem;
    padding-top: 2em;
    padding-bottom: 2.4em;
  }
}
@media screen and (max-width: 450px) {
  .menu {
    font-size: 1.6rem;
  }
}

.menuList {
  max-width: 100rem;
  margin: 3em auto 1.6em;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75em 0.6em;
  list-style: none;
  padding: 0;
}
.menuList > li {
  margin: 0;
}
@media screen and (max-width: 768px) {
  .menuList {
    margin-top: 2em;
  }
}

/* ********************
  SNS
******************** */
.sns {
  font-size: 2rem;
}
.sns h2 {
  margin: 2.2em 0;
}
.sns__link {
  background-color: #c9c9c9;
  text-align: center;
  padding: 3.5em 0 5em;
}
.sns__link img {
  width: 3em;
}
@media screen and (max-width: 768px) {
  .sns {
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 450px) {
  .sns {
    font-size: 1.6rem;
  }
}

.snsImgs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 0;
}
.snsImgs > li {
  margin: 0;
}

/* ********************
  ACCESS
******************** */
.access {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  height: 47rem;
  background-color: #ffffff;
  align-items: center;
  font-size: 1.8rem;
}
.access__map {
  height: 100%;
}
.access__map iframe {
  width: 100%;
  height: 100%;
}
.access__info {
  line-height: 2.7em;
  text-align: center;
  padding: 1em;
}
.access__logo {
  margin-bottom: 1em;
}
.access__logo img {
  max-height: 5em;
}
@media screen and (max-width: 768px) {
  .access {
    font-size: 1.6rem;
    grid-template-columns: 100%;
    grid-template-rows: repeat(2, 1fr);
    height: auto;
  }
}
@media screen and (max-width: 450px) {
  .access {
    font-size: 1.4rem;
  }
}
/*# sourceMappingURL=style.css.map */