@charset "UTF-8";

/* ===== Base / Reset (used by this page) ===== */
body {
  font-family: "Noto Serif JP", serif;
  background-color: #83ACA6;
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}
body.hidden { overflow: hidden; }

html { font-size: 16px; scroll-behavior: smooth; overflow: visible; }
@media (max-width: 375px) { html { font-size: 4.2666666667vw; } }
@media screen and (min-width: 768px) { html { font-size: 1.593625498vw; } }
@media (min-width: 890px) { html { font-size: 16px; } }

/* pcの電話番号発信対応 */
@media screen and (min-width: 768px) {
  a[href^="tel:"] { pointer-events: none; }
}

/* Hover / links */
a { text-decoration: none; color: inherit; transition: opacity 0.3s; }
@media screen and (min-width: 768px) {
  a:hover { opacity: 0.65; }
}

*, *::before, *::after { box-sizing: border-box; }

ul, ol { padding: 0; list-style: none; }

body, h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd {
  margin: 0; color: white;
}

a:not([class]) { text-decoration-skip-ink: auto; }

img {
  max-width: 100%;
  display: block;
  width: 100%;
}
img:not([alt]) {
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="10" /></filter></svg>#filter');
  -webkit-filter: blur(10px);
  filter: blur(10px);
}

/* Form reset (inputs not used directly here, but safe globally) */
input, button, textarea, select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background: transparent; border: none; border-radius: 0; font: inherit; outline: none;
}
textarea { resize: vertical; }
input[type=checkbox], input[type=radio] { display: none; }
input[type=submit], input[type=button], label, button, select { cursor: pointer; }
select::-ms-expand { display: none; }

/* ===== Header / Navigation ===== */
.header {
  width: 100%;
  height: 7.6875rem;
  padding: 0rem 1.25rem;
  background-image: url(../images/top/header-bg.png);
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  position: fixed;
  z-index: 9;
  top: 0;
  box-sizing: border-box;
}
@media screen and (min-width: 768px) {
  .header { padding: 0rem 1.25rem 0rem 3.125rem; height: 7.875rem; }
}

.header__container {
  max-width: 23.4375rem;
  width: 100%;
  height: inherit;
  position: fixed;
  left: 77%;
  transform: translateX(-50%);
}
@media screen and (min-width: 768px) {
  .header__container { max-width: initial; left: 50%; }
}

/* pc-nav */
.pc-nav__items {
  padding: 0.3125rem 0;
  display: -webkit-box; /* keep for older compat */
  -webkit-box-pack: center;
  -webkit-box-align: center;
}
.pc-nav__itemss { width: 100px; height: 100px; margin-right: 150px; }

@media screen and (min-width: 768px) {
  .pc-nav__items { margin-top: initial; }
}

.pc-nav__item {
  font-weight: 500;
  font-size: clamp(1.25rem, 2.5vw, 1.8rem);
  line-height: 1.32;
  letter-spacing: 0;
  cursor: pointer;
}
.pc-nav__item a { white-space: nowrap; display: inline-block; position: relative; text-decoration: none; }

.pc-nav__item--hover a { padding: 1.25rem 0; }
.pc-nav__item--hover a::after {
  background-color: #646464;
  bottom: 1.125rem;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  transform: scale(0, 1);
  transform-origin: center top;
  transition: transform 0.3s;
  width: 100%;
}
.pc-nav__item--hover a:hover::after { transform: scale(1, 1); opacity: 0.6; }

/* show/hide items across breakpoints */
.pc-nav__item:not(:nth-child(3)) { display: none; }
@media screen and (min-width: 768px) {
  .pc-nav__item:not(:nth-child(3)) { display: block; }
}

.pc-nav__item:nth-child(2) { margin-left: 1.875rem; }
.pc-nav__item:nth-child(3) { margin-left: 1.875rem; }
@media screen and (min-width: 768px) {
  .pc-nav__item:nth-child(3) { margin-left: 1.875rem;}
}
.pc-nav__item:nth-child(4) { margin-left: 1.875rem; }
.pc-nav__item:nth-child(5) { margin-left: 1.875rem; }
.pc-nav__item:nth-child(6) { margin-left: 1.875rem; }

.pc-nav__item-lang {
  display: block;
  padding: 0.9375rem 0 0.3125rem;
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.3333333333;
  letter-spacing: 0;
}

.pc-nav__item .pc-nav__item-twitter {
  margin-top: 0.3125rem;
  display: block;
  padding: 0.5rem;
  max-width: 3.125rem;
  width: 100%;
  margin: auto;
}

/* sp-nav */
.sp-nav {
  padding: 0.1875rem 1.25rem 1.25rem;
  position: fixed;
  z-index: 2;
  top: 0; left: 0; right: 0;
  background: #DBDBDB;
  text-align: center;
  width: 100%;
  opacity: 0; visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.js-sp-nav.is-open { opacity: 100; visibility: visible; }

.sp-nav__container {
  margin: auto;
  max-width: 18.25rem;
  width: 100%;
  padding-top: 1.5625rem;
  padding-bottom: 3.75rem;
  height: 100vh;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}
.sp-nav__head { display: flex; align-items: center; position: relative; }
.sp-nav__twitter { max-width: 2.1875rem; width: 100%; }
.sp-nav__logo {
  max-width: 3.75rem; width: 100%; display: inline-block;
  position: absolute; top: -1rem; left: 50%; transform: translateX(-50%);
}
.sp-nav__items { margin-top: 2.1875rem; }
.sp-nav__item:nth-child(n+2) { margin-top: 1.3125rem; }
.sp-nav__languages { margin-top: 1.5625rem; display: flex; }
.sp-nav__language { max-width: 5.625rem; width: 100%; }
.sp-nav__language:nth-child(n+2) { margin-left: 0.75rem; }
.sp-nav__copyright {
  margin-top: 1.875rem;
  font-weight: 300; font-size: 0.625rem; line-height: 1; letter-spacing: 0; text-align: center;
}

/* Hamburger */
.hamburger {
  display: block;
  position: fixed;
  z-index: 9;
  top: 1.5625rem;
  right: 2.5625rem;
  width: 1.875rem; height: 1.875rem;
  cursor: pointer; text-align: center;
  border: 2px solid #311008;
}
@media screen and (min-width: 375px) { .hamburger { right: 8.8vw; } }
@media screen and (min-width: 450px) { .hamburger { right: calc(50% - 147px); } }
@media screen and (min-width: 768px) {
  .hamburger { max-width: 5.4375rem; right: 5.98vw; display: none; }
}
.hamburger span {
  display: block; position: absolute;
  width: 1.0625rem; height: 2px; left: 0.3125rem; background: #311008;
  transition: 0.5s ease-in-out;
}
.hamburger span:nth-child(1) { top: 0.3125rem; }
.hamburger span:nth-child(2) { top: 0.75rem; }
.hamburger span:nth-child(3) { top: 1.1875rem; }
/* open state */
.hamburger.is-open span:nth-child(1) {
  top: 0.75rem; background: #311008; transform: rotate(-45deg);
}
.hamburger.is-open span:nth-child(2),
.hamburger.is-open span:nth-child(3) {
  top: 0.75rem; background: #311008; transform: rotate(45deg);
}

/* ===== Typography helpers ===== */
.normal-text {
  font-weight: 500;
  font-size: 0.84375rem;
  line-height: 1.6923076923;
  letter-spacing: 0;
}
@media screen and (min-width: 768px) {
  .normal-text { font-size: max(0.875rem, 13px); line-height: 1.7857142857; }
}

/* ===== Top visual ===== */
.top-mv-space { width: 100%; height: 6rem; }
@media screen and (min-width: 768px) {
  .top-mv { margin: -2.5rem auto 0; }
}

/* ===== 「朱鷺のこだわり」 / 商品説明 ===== */
.top-feat { overflow: hidden; width: 100%; }

.top-feat__title {
  margin: auto;
  padding-left: 1.25rem;
  max-width: 20.875rem; width: 100%;
  position: relative;
}
@media screen and (min-width: 768px) {
  .top-feat__title { max-width: 35.875rem; padding-left: initial; }
}

.top-feat__title-bg {
  margin-left: auto;
  margin-right: -1.25rem;
  max-width: 16.625rem; width: 100%;
}
@media screen and (min-width: 768px) {
  .top-feat__title-bg { max-width: 51rem; margin-top: -3.25rem; margin-right: -1.4375rem; }
}

/* ビューポート中央に配置（固定ヘッダーぶん差し引き） */
:root { --header-h: 7.875rem; } /* あなたのheader高さに合わせて */

.top-feat__inner{
  min-height: calc(100vh - var(--header-h)); /* 画面の縦中央へ */
  padding: 4rem 1.25rem;
  display: flex;
  justify-content: center;  /* 横中央 */
  align-items: center;      /* 縦中央 */
}

/* テキスト箱の幅を絞って中央寄せ、文も中央揃え */
.top-feat__msg{
  max-width: 34rem;   /* 紙面の幅 */
  margin: 0 auto;     /* ブロックを中央に */
  text-align: center; /* 文を中央揃え */
  line-height: 1.0;
  letter-spacing: .04em;
  font-size: clamp(14px, 1.6vw, 18px);
  white-space: pre-line;
}



/* body*_css decorative images */
.body1_css { opacity: 0.5; }
@media screen and (min-width: 768px) {
  .body1_css { width: 40%; position: relative; left: 59rem; opacity: 0.8; }
}
.body11_css { opacity: 0.5; }
@media screen and (min-width: 768px) {
  .body11_css { width: 22%; left: -4rem; position: relative; opacity: 0.8; }
}
.body2_css { opacity: 0.5; width: 90%; }
@media screen and (min-width: 768px) {
  .body2_css { width: 40%; position: relative; opacity: 0.8; }
}
.body3_css { opacity: 0.5; width: 60%; margin: 0 auto; }
@media screen and (min-width: 768px) {
  .body3_css { width: 22%; position: relative; left: 70rem; opacity: 0.8; margin: 0; }
}
.body4_css { opacity: 0.5; width: 60%; margin: 0 auto; }
@media screen and (min-width: 768px) {
  .body4_css { width: 22%; position: relative; opacity: 0.8; margin: 0; }
}
.body5_css { opacity: 0.5; margin: 0 auto; }
@media screen and (min-width: 768px) {
  .body5_css { width: 48%; position: relative; left: 55rem; opacity: 0.8; margin: 0; }
}

/* dish images within feature blocks */
.body-picture1, .body-picture2, .body-picture3, .body-picture4, .body-picture5 {
  max-width: 85%; margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .body-picture1 { margin-left: 6rem; z-index: 2; }
  .body-picture2 { margin-left: 6rem; z-index: 2; }
  .body-picture3 { margin-left: 10rem; z-index: 2; }
  .body-picture4 { margin-left: 12rem; z-index: 2; }
  .body-picture5 { margin-left: 10rem; z-index: 2; }
}

/* layout blocks for each feature */
@media screen and (min-width: 768px) {
  .body-character   { margin-top: -19.25rem; margin-left: 10rem; display: flex; }
  .body-character2  { margin-top: -28.25rem; margin-left: 41rem; display: flex; }
  .body-character3  { margin-top: -24.25rem; margin-left: 8rem;  display: flex; }
  .body-character4  { margin-top: -19.25rem; margin-left: 22rem; display: flex; }
  .body-character5  { margin-top: -24.25rem; margin-left: 3rem;  display: flex; }
}

.feat-item__left {
  position: relative;
  margin-top: 1.625rem;
  background-image: url(../images/top/toki_bk1.png);
}
@media screen and (min-width: 768px) {
  .feat-item__left { margin-top: 135px; }
}

.feat-item__img { width: 100%; }
@media screen and (min-width: 768px) {
  .feat-item__img { margin-left: -12.5rem; max-width: 32.1875rem; }
  .feat-item__img-1 { margin-top: 1.875rem; }
}

.feat-item__title-1 { margin-left: 0.5rem; }
@media screen and (min-width: 768px) {
  .feat-item__title-1 { margin-left: 0.75rem; font-size: 1.5625rem; }
}

.feat-item__text { margin-left: 0.5rem; }
@media screen and (min-width: 768px) {
  .feat-item__text { margin-top: 1.625rem; margin-left: 2.8125rem; }
}

/* ===== お店について (Swiper area) ===== */
.top-about {
  max-width: 28.125rem; width: 100%; margin: auto;
  padding: 2rem 0 3.75rem; position: relative;
}
@media screen and (min-width: 768px) {
  .top-about { max-width: 80.75rem; }
}

.top-about__deco {
  max-width: 9.5625rem; width: 100%;
  position: absolute; top: 3.3125rem; right: 0rem;
}
@media screen and (min-width: 768px) {
  .top-about__deco { max-width: 33.6875rem; top: 5.625rem; right: 0rem; }
}

.top-about__title {
  position: relative;
  margin-left: auto; margin-right: 3.375rem;
  max-width: 24.125rem; width: 70%; padding-right: 1.5rem;
}
@media screen and (min-width: 768px) {
  .top-about__title { margin: auto; max-width: 30.25rem; padding-right: 3.125rem; }
}
.top-about__title::after {
  content: "";
  display: inline-block;
  width: 5.625rem; height: 4.3125rem;
  top: -1.75rem; right: -2.5rem;
  background-image: url(../images/top/about-bird.png);
  background-size: contain; background-repeat: no-repeat;
  position: absolute;
}
@media screen and (min-width: 768px) {
  .top-about__title::after {
    top: -4.75rem; right: -6.875rem; width: 11.4375rem; height: 10.0625rem;
  }
}

.top-about__swiper { margin: 25px auto 0; max-width: 100%; }

.top-about .swiper-horizontal > .swiper-pagination-bullets,
.top-about .swiper-pagination-bullets.swiper-pagination-horizontal,
.top-about .swiper-pagination-custom,
.top-about .swiper-pagination-fraction { bottom: -0.9375rem; }
@media screen and (min-width: 768px) {
  .top-about .swiper-horizontal > .swiper-pagination-bullets,
  .top-about .swiper-pagination-bullets.swiper-pagination-horizontal,
  .top-about .swiper-pagination-custom,
  .top-about .swiper-pagination-fraction { bottom: -2.125rem; }
}

.top-about .swiper-pagination-bullet {
  width: 0.25rem;
  height: 0.25rem;
  background-color: #311008;
  opacity: 1;
}

/* ===== 店舗情報（top-info～） ===== */
.top-info {
  margin: 3.125rem auto 0;
  padding: 16vw 0 0rem;
  position: relative;
}
@media screen and (min-width: 768px) {
  .top-info {
    margin: 9.375rem auto 0;
    padding: 6rem 0 0rem;
    width: 100%;
  }
}

.top-info__bg {
  width: 100%;
  position: absolute;
  z-index: -1;
  top: -6.25rem;
  left: 0rem;
}
@media screen and (min-width: 768px) {
  .top-info__bg {
    max-width: 46.75rem;
    top: -6rem;
    left: 0rem;
  }
}

.top-info__btn {
  position: relative;
  margin: auto;
  max-width: 10rem;
  width: 100%;
}

.top-info__title {
  position: relative;
  margin: 4.6875rem auto 0;
  max-width: 11.8125rem;
}
@media screen and (min-width: 768px) {
  .top-info__title {
    margin: 7.1875rem auto 0;
    max-width: 22.5rem;
  }
}

.top-info__map {
  margin: 1.625rem auto 0;
  height: 95vw;
  position: relative;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  .top-info__map {
    margin: 3.4375rem auto 0;
    width: 100%;
    max-width: 100%;
    height: 40.375rem;
  }
}
.top-info__map iframe {
  width: 100%;
  height: 100%;
}

.top-info__bg-2 {
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  overflow: hidden;
  position: relative;
  z-index: 1;
  margin: 3rem;
}
@media screen and (min-width: 768px) {
  .top-info__bg-2 {
    padding: 22.9333333333vw 0 2.5rem;
    margin-top: -14.9333333333vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}

.top-info__items {
  margin: auto;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .top-info__items {
    max-width: 40rem;
  }
}

/* info-item（住所/営業時間などの行） */
.info-item {
  display: flex;
}
.info-item:nth-child(n+2) {
  margin-top: 1.375rem;
}

.info-term {
  max-width: 4.6875rem;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .info-term {
    max-width: 11.5625rem;
  }
}

.info-term,
.info-description {
  font-weight: 300;
  font-size: 0.85rem;
  line-height: 1.3076923077;
  letter-spacing: 0;
}
@media screen and (min-width: 768px) {
  .info-term,
  .info-description {
    font-size: 1rem;
    line-height: 1.5625;
  }
}

.top-info__line {
  margin-top: 3.125rem;
  width: 100%;
  height: 1px;
  background-color: #311008;
}
@media screen and (min-width: 768px) {
  .top-info__line {
    margin-top: 5.3125rem;
  }
}

.top-info__copyright {
  text-align: center;
  margin-top: 2rem;
  font-weight: 300;
  font-size: 0.75rem;
  line-height: 1.2;
  letter-spacing: 0;
}
@media screen and (min-width: 768px) {
  .top-info__copyright {
    text-align: center;
    margin-top: 4rem;
    font-size: 0.9375rem;
  }
}

/* テキストのPC/スマホ切り替え（.text / .text-mobile） */
.text { display: none; }
.text-mobile { display: block; }
@media (min-width: 768px) {
  .text { display: block; }
  .text-mobile { display: none; }
}

/* 言語選択ポップの基本スタイル */
.language-popup {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  color: #000000;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  z-index: 1000;
}

/* バナー表示のスタイル（デフォルトは非表示） */
.language-banner {
  display: none;
  position: fixed;
  bottom: 60px;
  right: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  z-index: 1000;
  width: 150px; /* 幅を指定して整える */
}

/* aタグをボタン風に */
.language-banner a {
  display: block;
  margin: 6px 0;
  padding: 8px;
  background-color: #f1f1f1;
  border-radius: 5px;
  text-decoration: none;
  color: #333;
  font-size: 14px;
  transition: background-color 0.3s;
}

.language-banner a:hover {
  background-color: #ddd;
}


.language-banner button:hover {
  background-color: #ddd;
}