@charset "UTF-8";
/*
see: http://html5doctor.com/html-5-reset-stylesheet/
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  text-decoration: none;
  color: #ffffff;
  transition: 0.7s;
  box-sizing: border-box;
}

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input, select {
  vertical-align: middle;
}

:root {
  --sky: #00AFCC;
  --blue: #000878;
  --red: #FE0132;
  --pink: #FB7290;
  --en: "Freestyle Script Regular";
  --defa: 游ゴシック体, YuGothic, 游ゴシック, Yu Gothic, sans-serif;
}

@font-face {
  font-family: "Freestyle Script Regular";
  font-style: normal;
  font-weight: normal;
  src: local("Freestyle Script Regular"), url("FREESCPT.woff") format("woff");
}
html {
  width: 100%;
  scroll-behavior: smooth;
  font-size: 2.6666666667vw;
}
@media screen and (min-width: 960px) {
  html {
    font-size: min(0.5208333333vw, 10px);
  }
}

body {
  color: #0D0D0D; /* RGB */
  background-color: #ffffff;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.2rem;
  line-height: 2;
  text-align: center;
}
@media screen and (min-width: 960px) {
  body {
    font-size: 2.1rem;
  }
}

.en {
  font-family: var(--en);
  font-weight: 400;
  font-style: normal;
}

h2,
h3,
h4 {
  font-weight: 600;
}

.vertical {
  position: static;
  display: inline-block;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-align: left;
}

.vertical span {
  writing-mode: vertical-rl;
  text-orientation: upright;
  display: inline-block;
}

.vertical span.horizontal {
  writing-mode: horizontal-tb;
  line-height: 1;
}

a {
  color: #0D0D0D;
}

a:hover {
  opacity: 0.7;
}

a.clarity:hover {
  opacity: 1;
}

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

img {
  width: 100%;
  display: block;
}

/* 共通 */
section {
  position: relative;
  padding: 2rem 0 4rem;
}

.inner {
  width: 94%;
  margin: 0 auto;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4rem;
  position: relative;
  z-index: 2;
}
@media screen and (min-width: 960px) {
  .inner {
    max-width: 169rem;
  }
}

.flex {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
@media screen and (min-width: 960px) {
  .flex {
    flex-direction: row;
  }
}

.flex.row {
  display: flex;
  flex-direction: row;
  gap: 2rem;
}

@media screen and (min-width: 960px) {
  .flex.reverse {
    flex-direction: row-reverse;
  }
}

@media screen and (min-width: 960px) {
  .outer {
    width: 100%;
    max-width: 192rem;
    margin: 0 auto;
    position: relative;
  }
}

.map iframe {
  display: block;
  width: 100%;
  height: 35rem;
}

/* header（SP固定ナビ） */
#sp-nav {
  width: 100%;
  height: 6rem;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  background-color: var(--sky);
  transition: all 0.5s;
}
@media screen and (min-width: 960px) {
  #sp-nav {
    display: none;
  }
}

#sp-nav .sp-nav__inner {
  width: 90%;
  height: 6rem;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

#sp-nav .sp-nav__inner a {
  display: inline-block;
  width: 100%;
}

#sp-nav .sp-nav__inner a p {
  height: 6rem;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  line-height: 1;
  font-size: 2.5875rem;
  font-weight: 700;
  color: #ffffff;
}

#sp-nav .sp-nav__inner a p span {
  font-size: 1.4rem;
}

/* ham_menu */
.ham_btn {
  position: fixed;
  cursor: pointer;
  width: 4rem;
  height: 4rem;
  z-index: 999;
  top: 1rem;
  right: 1.125rem;
}

.ham_btn span {
  z-index: 999;
  display: inline-block;
  transition: all 0.4s;
  position: absolute;
  right: 0;
  height: 0.4rem;
  background: #ffffff;
  width: 2.7rem;
  top: 1.8rem;
}

.ham_btn span:nth-of-type(1) {
  width: 3.3rem;
  top: 0.8rem;
}

.ham_btn span:nth-of-type(2) {
  top: 2.8rem;
  width: 2.1rem;
}

.ham_btn.active span:nth-of-type(1) {
  top: 1.4rem;
  left: 0.8rem;
  transform: translateY(0.6rem) rotate(-45deg);
  width: 2.6rem;
}

.ham_btn.active span:nth-of-type(2) {
  opacity: 0;
}

.ham_btn.active span:nth-of-type(3) {
  top: 2.6rem;
  left: 0.8rem;
  transform: translateY(-0.6rem) rotate(45deg);
  width: 2.6rem;
}

.nav_wrap {
  padding: 6rem 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--sky);
  position: fixed;
  top: 0;
  right: 0;
  z-index: 50;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  width: 100%;
  transition: opacity 0.6s ease, visibility 0.6s ease;
  line-height: 1.45;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav_wrap ul {
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 4rem;
}

.nav_wrap li {
  list-style: none;
  text-align: center;
  font-size: 1.6rem;
  line-height: 1;
}

.nav_wrap li a {
  color: #ffffff;
  text-decoration: none;
  padding: 2rem 1rem;
  display: inline-block;
  margin: 0 auto;
  gap: 1rem;
  font-weight: 700;
}

.nav_wrap.show {
  visibility: visible;
  opacity: 1;
}

.nav_wrap nav a img {
  width: 3.7rem;
  margin: 0 auto;
}

/* PC header（フロートナビ／右ナビ） */
@media screen and (min-width: 960px) {
  header {
    width: 100%;
    position: fixed;
    top: 0;
    transition: all 0.3s;
    z-index: 500;
    background-color: #ffffff;
  }
  header .float_nav {
    width: 90%;
    max-width: 100rem;
    margin: 0 auto;
    height: 12rem;
    padding: 2rem 0;
  }
  .float_nav .g_nav ul {
    height: 8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 2rem;
    font-weight: 700;
  }
  .float_nav .g_nav ul li a {
    display: inline-block;
    height: 8rem;
    display: flex;
    align-items: center;
    position: relative;
  }
  .float_nav .g_nav ul li a::after {
    content: "";
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: var(--red);
    position: absolute;
    bottom: 1rem;
    left: 50%;
    opacity: 0;
    transform: translateX(-50%);
    transition: all 0.3s;
  }
  .float_nav .g_nav ul li a:hover:after {
    opacity: 1;
  }
  .float_nav .g_nav ul li.active > a::after {
    opacity: 1;
  }
  .right_nav {
    position: absolute;
    z-index: 10;
    width: 18rem;
    top: 50%;
    transform: translateY(-50%);
    right: 5%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .right_nav nav {
    width: 100%;
    height: 100%;
    max-height: 37.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .right_nav ul {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: left;
  }
  .right_nav ul li {
    width: 100%;
  }
  .right_nav ul li a {
    display: inline-block;
    height: auto;
    display: flex;
    font-size: 3.4rem;
    font-weight: 700;
    position: relative;
  }
}
@media screen and (min-width: 960px) and (max-width: 959px) {
  .right_nav ul li a {
    font-size: 2rem;
  }
}
@media screen and (min-width: 960px) {
  .right_nav ul li a::after {
    content: "";
    display: none;
  }
  .g_nav .insta {
    width: 3.7rem;
  }
  .right_nav .insta {
    width: 6rem;
    margin: 0 auto 0 0;
  }
}
@media screen and (min-width: 960px) and (max-width: 959px) {
  .right_nav .insta {
    width: 3.7rem;
  }
}
@media screen and (min-width: 960px) {
  #top_nav {
    position: fixed;
    top: -100%;
    transition: all 0.3s;
    z-index: 500;
  }
  #top_nav.fixed {
    top: 0;
    transition: all 0.3s;
    background-color: #ffffff;
  }
}
/* 予約ボタン（お電話で予約／LINEで予約・PC g_nav / SP ナビ共通） */
.g_nav .reserve a {
  color: #ffffff;
  font-weight: 700;
  border-radius: 0.5rem;
  text-align: center;
  white-space: nowrap;
  line-height: 1;
}

.g_nav .reserve--tel a {
  background-color: var(--red);
}

.g_nav .reserve--line a {
  background-color: #06c755;
}

/* PC：フロートナビ内ではコンパクトな塗りボタンに */
@media screen and (min-width: 960px) {
  .float_nav .g_nav ul li.reserve a {
    height: auto;
    padding: 1.5rem 2rem;
    font-size: 1.8rem;
    justify-content: center;
  }
  .float_nav .g_nav ul li.reserve a::after {
    display: none;
  }
  .float_nav .g_nav ul li.reserve a:hover {
    opacity: 0.85;
  }
  /* MV 右側 right_nav 内の予約ボタン */
  .right_nav .g_nav ul li.reserve a {
    height: auto;
    width: 100%;
    padding: 1.5rem 1rem;
    font-size: 2.4rem;
    border-radius: 5rem;
    justify-content: center;
  }
  .right_nav .g_nav ul li.reserve a:hover {
    opacity: 0.85;
  }
}
/* SP：開閉ナビ内では縦並びの幅広ボタンに */
.nav_wrap li.reserve {
  margin-top: 2rem;
}

.nav_wrap li.reserve:first-of-type {
  margin-top: 3rem;
}

.nav_wrap li.reserve a {
  padding: 1.4rem 2rem;
  min-width: 24rem;
  font-size: 1.8rem;
}

/*
 * 画面幅 800px 以上のとき（タブレット〜PC ハンバーガー開閉時）
 * メニュー全体の中身を中央に絞り、横に間延びしないようにする
 */
@media (min-width: 800px) {
  .nav_wrap ul {
    max-width: 48rem;
    width: 100%;
    margin: 0 auto;
  }
  .nav_wrap li.reserve a {
    min-width: 32rem;
    max-width: 40rem;
  }
}
/* 店舗情報（全ページ共通フッターセクション） */
#footer .outer {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

#footer .inner {
  gap: 0;
  max-width: 65.6rem;
  margin: 0 auto;
}

/* footer 上部（ロゴ + 予約ボタン）独自インナー：共通 .inner の幅制約を回避 */
#footer .footer_top {
  width: 90%;
  max-width: 100rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
}
@media screen and (min-width: 960px) {
  #footer .footer_top {
    gap: 3.2rem;
  }
}

#footer .logo {
  width: 70%;
  max-width: 38.4rem;
  margin: 0 auto;
}

/* お電話 / LINE 予約ボタン（footer 上部） */
#footer .contact_btns {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
}
@media screen and (min-width: 960px) {
  #footer .contact_btns {
    flex-direction: row;
    align-items: stretch;
    gap: 3rem;
  }
}

#footer .tel_btn {
  width: 100%;
  max-width: 44rem;
  display: flex;
}

#footer .tel_btn a {
  display: flex;
  width: 100%;
}

#footer .tel_btn img {
  width: 100%;
  height: auto;
  display: block;
}

#footer .line_btn {
  width: 100%;
  max-width: 44rem;
  display: flex;
}

#footer .line_btn a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1.6rem 2rem;
  background-color: #06C755;
  color: #ffffff;
  border-radius: 0.6rem;
  text-decoration: none;
  box-shadow: 0 0.3rem 1rem rgba(6, 199, 85, 0.25);
  transition: opacity 0.2s ease, transform 0.2s ease;
  line-height: 1.2;
}

#footer .line_btn a:hover {
  opacity: 0.9;
  transform: translateY(-0.2rem);
}

#footer .line_btn__sub {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 0.6rem;
}
@media screen and (min-width: 960px) {
  #footer .line_btn__sub {
    font-size: 1.5rem;
  }
}

#footer .line_btn__main {
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 960px) {
  #footer .line_btn__main {
    font-size: 2.8rem;
  }
}

#footer .content {
  align-items: center;
}
@media screen and (min-width: 960px) {
  #footer .content {
    padding-left: 9.6rem;
    justify-content: space-between;
  }
}

#footer .content dl {
  width: 94%;
  gap: 2rem;
  font-weight: 700;
  font-size: 1.8rem;
}
@media screen and (min-width: 960px) {
  #footer .content dl {
    flex-direction: column;
    max-width: 53rem;
  }
}

.description-item {
  border-bottom: 0.2rem dotted #A8A8A8;
}
@media screen and (min-width: 960px) {
  .description-item {
    display: flex;
  }
}

@media screen and (min-width: 960px) {
  .description-item dt {
    width: 15rem;
  }
}

.description-item dd {
  letter-spacing: -0.02em;
}
@media screen and (min-width: 960px) {
  .description-item dd {
    width: calc(100% - 15rem);
  }
}

.calender {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.calender h3 {
  font-size: 2.175rem;
}
@media screen and (min-width: 960px) {
  .calender h3 {
    font-size: 3.5rem;
  }
}

.cr {
  background-color: var(--blue);
  color: #ffffff;
}

#go_top {
  width: 4rem;
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 900;
  opacity: 1;
}

/* PC フッター */
@media screen and (max-width: 959px) {
  .link_onomichi {
    width: 40%;
    margin: 4rem auto;
  }
}
@media screen and (min-width: 960px) {
  .link_onomichi {
    width: 40%;
    margin: 10rem auto;
  }
  #footer .content_img {
    position: static;
  }
  #footer {
    gap: 8rem;
  }
  footer {
    background-color: var(--blue);
  }
  .footer_inner {
    width: 90%;
    max-width: 96rem;
    margin: 0 auto;
    padding: 2rem 0 4rem;
  }
  footer a {
    color: #ffffff;
  }
  footer .g_nav ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  footer .g_nav ul li a {
    position: relative;
  }
  footer .float_nav .g_nav ul li a::after {
    content: "";
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: var(--sky);
    position: absolute;
    bottom: 1rem;
    left: 50%;
    opacity: 0;
    transform: translateX(-50%);
    transition: all 0.3s;
  }
}
.pc_none {
  display: block;
}
@media screen and (min-width: 960px) {
  .pc_none {
    display: none;
  }
}

.sp_none {
  display: none;
}
@media screen and (min-width: 960px) {
  .sp_none {
    display: block;
  }
}

.is-hide {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.ft_50 {
  font-size: 3.2rem;
}
@media screen and (min-width: 960px) {
  .ft_50 {
    font-size: 5rem;
  }
}

.ft_46 {
  font-size: 2.2rem;
}
@media screen and (min-width: 960px) {
  .ft_46 {
    font-size: 4.6rem;
  }
}

.ft_30 {
  font-size: 2rem;
}
@media screen and (min-width: 960px) {
  .ft_30 {
    font-size: 3rem;
  }
}

.ft_24 {
  font-size: 2rem;
}
@media screen and (min-width: 960px) {
  .ft_24 {
    font-size: 2.4rem;
  }
}

.ft_20 {
  font-size: 1.725rem;
}
@media screen and (min-width: 960px) {
  .ft_20 {
    font-size: 2rem;
  }
}

.ft_16 {
  font-size: 1.2rem;
}
@media screen and (min-width: 960px) {
  .ft_16 {
    font-size: 1.6rem;
  }
}

.ft_14 {
  font-size: 1.2rem;
}
@media screen and (min-width: 960px) {
  .ft_14 {
    font-size: 1.4rem;
  }
}

.sky {
  color: var(--sky);
}

.blue {
  color: var(--blue);
}

.pink {
  color: var(--pink);
}

.red {
  color: var(--red);
}

.white {
  color: #ffffff;
}

.left {
  text-align: justify;
}

.bold {
  font-weight: 700;
}

.fadeInUpTrigger {
  opacity: 0;
}

@media screen and (max-width: 959px) {
  .u-pc {
    display: none;
  }
}

@media screen and (min-width: 960px) {
  .u-sp {
    display: none;
  }
}

/* ===== MV（トップ／下層共通） ===== */
.MV {
  position: relative;
  overflow: hidden;
  height: 70vh;
  min-height: 42rem;
}
@media screen and (min-width: 960px) {
  .MV {
    width: 100%;
    max-width: 192rem;
    margin: 0 auto;
    height: auto;
    min-height: 0;
    max-height: 95vh;
  }
}

/* MV 背景画像（1枚） */
.MV_img {
  width: 100%;
  height: 100%;
}
.MV_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.MV-text__wrap {
  position: absolute;
  top: 40%;
  left: 4%;
  transform: translateY(-50%);
  width: 92%;
  z-index: 10;
}
@media screen and (min-width: 960px) {
  .MV-text__wrap {
    width: 90%;
    max-width: 120rem;
    top: 35%;
    left: 40%;
    transform: translate(-50%, -50%);
  }
}

/* キャッチコピー（黒背景・白文字） */
.MV-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}

.MV-copy__line {
  display: inline-block;
  width: fit-content;
  background: #000;
  color: #fff;
  font-family: "Yomogi", 游ゴシック体, YuGothic, 游ゴシック, Yu Gothic, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.06em;
  padding: 0.3rem 1.4rem;
  font-size: 2rem;
  text-align: left;
}
@media screen and (min-width: 960px) {
  .MV-copy__line {
    padding: 2rem 3rem;
    font-size: 4.8rem;
  }
}

/* 店名（赤・スクリプト・右上に傾ける） */
.MV-copy__brand {
  display: inline-block;
  color: var(--red);
  line-height: 1;
  margin-top: 1.2rem;
  margin-left: 0.4rem;
  font-size: 5.6rem;
  transform: rotate(-8deg);
  transform-origin: left bottom;
}
@media screen and (min-width: 960px) {
  .MV-copy__brand {
    margin-top: 2rem;
    font-size: 9.6rem;
    margin-right: -90rem;
  }
}

.MV_under {
  margin-top: 6rem;
}
@media screen and (min-width: 960px) {
  .MV_under {
    margin-top: 12rem;
  }
}

/* 下層ページ MV：全ページ共通でアスペクト比を強制（画像の自然サイズで崩れないように） */
.MV_under.MV {
  aspect-ratio: 430/241;
  height: auto;
  min-height: 0;
  overflow: hidden;
}
@media screen and (min-width: 960px) {
  .MV_under.MV {
    aspect-ratio: 1600/405;
    max-height: none;
  }
}

.MV_under.MV > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* MV 上の黒オーバーレイ（U_ttl の視認性を補助） */
.MV_under.MV::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.2);
  pointer-events: none;
  z-index: 1;
}

.MV_under.MV .U_ttl {
  z-index: 2;
}

.U_ttl {
  color: #ffffff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 6.2625rem;
  text-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.35);
}
@media screen and (min-width: 960px) {
  .U_ttl {
    font-size: 12rem;
  }
}

/* ===== セクションタイトル ===== */
.section_ttl {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  color: var(--red);
  font-size: 6.1875rem;
}
@media screen and (min-width: 960px) {
  .section_ttl {
    display: flex;
    font-size: 22.5rem;
  }
}

.section_ttl span {
  font-size: 1.3875rem;
  color: #0D0D0D;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  font-weight: 600;
}
@media screen and (min-width: 960px) {
  .section_ttl span {
    font-size: 2.5rem;
  }
}

/* ===== もっと見るボタン ===== */
.more {
  width: 50%;
  max-width: 31.2rem;
  margin: 2rem auto;
}

/* 下層ページ遷移CTA：ピル型（暖色系トンマナ用） */
.more_blue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0 auto;
  padding: 1.6rem 3.2rem;
  background-color: var(--red);
  color: #ffffff;
  border-radius: 10rem;
  text-decoration: none;
  box-shadow: 0 0.6rem 1.6rem rgba(254, 1, 50, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  position: relative;
}
@media screen and (min-width: 960px) {
  .more_blue {
    padding: 2rem 5rem;
    gap: 1.6rem;
  }
}

.more_blue a {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  color: inherit;
  text-decoration: none;
}
@media screen and (min-width: 960px) {
  .more_blue a {
    gap: 1.6rem;
  }
}

.more_blue p {
  font-size: 1.4rem;
  color: #ffffff;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}
@media screen and (min-width: 960px) {
  .more_blue p {
    font-size: 1.8rem;
  }
}

.more_blue a::after {
  content: "→";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background-color: #ffffff;
  color: var(--red);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
}
@media screen and (min-width: 960px) {
  .more_blue a::after {
    width: 3.2rem;
    height: 3.2rem;
    font-size: 1.8rem;
  }
}

.more_blue:hover {
  transform: translateY(-0.2rem);
  box-shadow: 0 0.9rem 2.2rem rgba(254, 1, 50, 0.4);
}

/* ===== 吹き出し ===== */
.fukidashi {
  width: 100%;
  aspect-ratio: 708/408;
  max-width: 70.8rem;
  background-image: url(../img/fukidashi_01.webp);
  background-size: contain;
  background-repeat: no-repeat;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.fukidashi p {
  width: 90%;
  font-size: 1rem;
  line-height: 1.2;
  padding-bottom: 2.625rem;
  padding-right: 5%;
  word-break: keep-all;
  text-align: left;
}
@media screen and (min-width: 960px) {
  .fukidashi p {
    font-size: 2.1rem;
    padding-bottom: 7rem;
  }
}

/* ===== 駐車場（トップ／インフォメーション共通） ===== */
.parking {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-bottom: 4.5rem;
}
@media screen and (min-width: 960px) {
  .parking {
    padding-top: 8rem;
    padding-bottom: 18rem;
    gap: 8rem;
  }
}

.parking .content {
  width: 94%;
  margin: 0 auto;
}
@media screen and (min-width: 960px) {
  .parking .content {
    max-width: 120rem;
    margin-bottom: 9.6rem;
  }
}

.parking_img {
  width: 100%;
  max-width: 105.6rem;
  margin: 0 auto;
}

@media screen and (min-width: 960px) {
  .content_textWrap {
    text-align: left;
    width: 69rem;
  }
}

@media screen and (min-width: 960px) {
  .parking .content_img {
    position: absolute;
    width: 40%;
    right: 0;
    top: 8rem;
  }
}

/* ===== 背景画像帯 ===== */
.top_bg01 {
  aspect-ratio: 430/243;
  background-image: url(../img/top_img02.webp);
  background-size: cover;
}

/* ===== コンテンツタイトル（フロア／カフェ共通） ===== */
.content_ttl {
  position: absolute;
}

.content_ttl p {
  position: relative;
  color: var(--sky);
  background-color: #ffffff;
  font-size: 2.4rem;
  display: flex;
  flex-direction: column;
  font-weight: 700;
  padding: 1.125rem 1.875rem;
  line-height: 1.5;
}
@media screen and (min-width: 960px) {
  .content_ttl p {
    font-size: 5.5rem;
    padding: 2.4rem 4rem;
  }
}

.content_ttl p span {
  font-size: 1.2rem;
}
@media screen and (min-width: 960px) {
  .content_ttl p span {
    font-size: 3rem;
  }
}

.content_ttl p::before {
  content: "";
  width: calc(100% - 0.5625rem);
  height: calc(100% - 0.5625rem);
  border: 0.3rem solid var(--sky);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (min-width: 960px) {
  .content_ttl p::before {
    width: calc(100% - 2.8rem);
    height: calc(100% - 2.8rem);
  }
}

/* ===== イベント（トップ／インフォメーション共通） ===== */
.event {
  background-image: url(../img/event_bg.webp);
  background-size: cover;
  padding: 4rem 0;
}

.event .inner {
  align-items: center;
}

.event ul li {
  aspect-ratio: 560/795;
  overflow: hidden;
}

@media screen and (min-width: 960px) {
  .event ul {
    gap: 10rem;
    width: 100%;
  }
  .event li {
    width: calc((100% - 20rem) / 3);
  }
  .event .more {
    margin: 8rem auto;
  }
}
/* ===== NEWS ===== */
#top_news {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 20%, #F3F2F2 20%, #F3F2F2 100%);
  padding-bottom: 1.875rem;
}
@media screen and (min-width: 960px) {
  #top_news {
    background: #F3F2F2;
    padding-top: 0;
    padding-bottom: 8rem;
  }
}

#top_news .inner {
  background-color: #FFFFFF;
  position: relative;
  padding: 0 2rem;
  gap: 0;
}
@media screen and (min-width: 960px) {
  #top_news .inner {
    max-width: 120rem;
    padding: 0 5rem 4rem;
    position: relative;
  }
}

@media screen and (min-width: 960px) {
  #top_news .inner::before {
    content: "";
    width: 100%;
    height: 6rem;
    background-color: #ffffff;
    position: absolute;
    bottom: 100%;
    left: 0;
    z-index: 1;
  }
}

#top_news .section_ttl {
  font-size: 3.75rem;
}
@media screen and (min-width: 960px) {
  #top_news .section_ttl {
    font-size: 12rem;
  }
}

#top_news .content {
  align-items: center;
}
@media screen and (min-width: 960px) {
  #top_news .content {
    gap: 8rem;
  }
}

#top_news .news_list_wrap {
  font-size: 1.2rem;
  text-align: left;
  line-height: 1.5;
  width: 70%;
}
@media screen and (min-width: 960px) {
  #top_news .news_list_wrap {
    font-size: 2rem;
  }
}

/* 3件分のみ表示、それ以降は縦スクロール */
#top_news .news_list_wrap ul {
  max-height: 19rem;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-right: 0.6rem;
}
@media screen and (min-width: 960px) {
  #top_news .news_list_wrap ul {
    max-height: 26rem;
    padding-right: 1rem;
  }
}

/* スクロールバーを控えめなデザインに */
#top_news .news_list_wrap ul::-webkit-scrollbar {
  width: 0.6rem;
}

#top_news .news_list_wrap ul::-webkit-scrollbar-track {
  background: transparent;
}

#top_news .news_list_wrap ul::-webkit-scrollbar-thumb {
  background: #C8C8C8;
  border-radius: 0.4rem;
}

#top_news .news_list_wrap ul::-webkit-scrollbar-thumb:hover {
  background: #A8A8A8;
}

#top_news .content li {
  padding: 1rem 0;
  border-bottom: 0.2rem dotted #A8A8A8;
  width: 100%;
}

#top_news .content .date {
  color: #A9A9A9;
}

/* ===== MENU（画像1枚で訴求：Commitment と同じ作り） ===== */
#top_menu {
  position: relative;
  background-color: #FFF8EE;
  padding: 5rem 0 7rem;
  overflow: hidden;
}
@media screen and (min-width: 960px) {
  #top_menu {
    padding: 12rem 0 14rem;
  }
}

/* 装飾：右上に赤ぼかし、左下にピンクぼかしでアクセント */
#top_menu::before {
  content: "";
  position: absolute;
  width: 24rem;
  height: 24rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(254, 1, 50, 0.1) 0%, rgba(254, 1, 50, 0) 70%);
  top: -8rem;
  right: -8rem;
  z-index: 0;
}
@media screen and (min-width: 960px) {
  #top_menu::before {
    width: 55rem;
    height: 55rem;
    top: -18rem;
    right: -18rem;
  }
}

#top_menu::after {
  content: "";
  position: absolute;
  width: 24rem;
  height: 24rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 114, 144, 0.12) 0%, rgba(251, 114, 144, 0) 70%);
  bottom: -8rem;
  left: -8rem;
  z-index: 0;
}
@media screen and (min-width: 960px) {
  #top_menu::after {
    width: 50rem;
    height: 50rem;
    bottom: -16rem;
    left: -16rem;
  }
}

#top_menu .menu_inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3rem;
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 960px) {
  #top_menu .menu_inner {
    gap: 5rem;
  }
}

#top_menu .section_ttl {
  align-items: center;
  font-size: 5rem;
}
@media screen and (min-width: 960px) {
  #top_menu .section_ttl {
    font-size: 17rem;
  }
}

#top_menu .section_ttl span {
  margin-top: 0.8rem;
}
@media screen and (min-width: 960px) {
  #top_menu .section_ttl span {
    margin-top: 1.6rem;
  }
}

#top_menu .menu_img {
  width: 90vw;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  align-self: center;
  padding: 1.6rem;
  background: linear-gradient(135deg, #FFF1DD 0%, #E8C9A0 50%, #C9A574 100%);
  border-radius: 1.4rem;
  box-shadow: 0 1.2rem 4rem rgba(0, 0, 0, 0.22);
}
@media screen and (min-width: 960px) {
  #top_menu .menu_img {
    padding: 2.4rem;
  }
}

#top_menu .menu_img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.6rem;
}

#top_menu .more_blue {
  margin: 0 auto;
}

/* ===== BBQ（画像1枚で訴求：Commitment / Menu と同じ作り） ===== */
#top_bbq {
  position: relative;
  background-color: #FFF8EE;
  padding: 5rem 0 7rem;
  overflow: hidden;
}
@media screen and (min-width: 960px) {
  #top_bbq {
    padding: 12rem 0 14rem;
  }
}

#top_bbq::before {
  content: "";
  position: absolute;
  width: 24rem;
  height: 24rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(254, 1, 50, 0.1) 0%, rgba(254, 1, 50, 0) 70%);
  top: -8rem;
  right: -8rem;
  z-index: 0;
}
@media screen and (min-width: 960px) {
  #top_bbq::before {
    width: 55rem;
    height: 55rem;
    top: -18rem;
    right: -18rem;
  }
}

#top_bbq::after {
  content: "";
  position: absolute;
  width: 24rem;
  height: 24rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 114, 144, 0.12) 0%, rgba(251, 114, 144, 0) 70%);
  bottom: -8rem;
  left: -8rem;
  z-index: 0;
}
@media screen and (min-width: 960px) {
  #top_bbq::after {
    width: 50rem;
    height: 50rem;
    bottom: -16rem;
    left: -16rem;
  }
}

#top_bbq .bbq_inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3rem;
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 960px) {
  #top_bbq .bbq_inner {
    gap: 5rem;
  }
}

#top_bbq .section_ttl {
  align-items: center;
  font-size: 5rem;
}
@media screen and (min-width: 960px) {
  #top_bbq .section_ttl {
    font-size: 17rem;
  }
}

#top_bbq .section_ttl span {
  margin-top: 0.8rem;
}
@media screen and (min-width: 960px) {
  #top_bbq .section_ttl span {
    margin-top: 1.6rem;
  }
}

#top_bbq .bbq_img {
  width: 90vw;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  align-self: center;
  padding: 1.6rem;
  background: linear-gradient(135deg, #FFF1DD 0%, #E8C9A0 50%, #C9A574 100%);
  border-radius: 1.4rem;
  box-shadow: 0 1.2rem 4rem rgba(0, 0, 0, 0.22);
}
@media screen and (min-width: 960px) {
  #top_bbq .bbq_img {
    padding: 2.4rem;
  }
}

#top_bbq .bbq_img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.6rem;
}

#top_bbq .more_blue {
  margin: 0 auto;
}

/* ===== EVENT（カスタム投稿「event」最新3件） ===== */
#top_event {
  position: relative;
  background-color: #FFF8EE;
  padding: 5rem 0 7rem;
  overflow: hidden;
}
@media screen and (min-width: 960px) {
  #top_event {
    padding: 12rem 0 14rem;
  }
}

#top_event::before {
  content: "";
  position: absolute;
  width: 24rem;
  height: 24rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(254, 1, 50, 0.1) 0%, rgba(254, 1, 50, 0) 70%);
  top: -8rem;
  right: -8rem;
  z-index: 0;
}
@media screen and (min-width: 960px) {
  #top_event::before {
    width: 55rem;
    height: 55rem;
    top: -18rem;
    right: -18rem;
  }
}

#top_event::after {
  content: "";
  position: absolute;
  width: 24rem;
  height: 24rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 114, 144, 0.12) 0%, rgba(251, 114, 144, 0) 70%);
  bottom: -8rem;
  left: -8rem;
  z-index: 0;
}
@media screen and (min-width: 960px) {
  #top_event::after {
    width: 50rem;
    height: 50rem;
    bottom: -16rem;
    left: -16rem;
  }
}

#top_event .event_inner {
  width: 80%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3rem;
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 960px) {
  #top_event .event_inner {
    gap: 5rem;
  }
}

#top_event .section_ttl {
  align-items: center;
  font-size: 5rem;
}
@media screen and (min-width: 960px) {
  #top_event .section_ttl {
    font-size: 17rem;
  }
}

#top_event .section_ttl span {
  margin-top: 0.8rem;
}
@media screen and (min-width: 960px) {
  #top_event .section_ttl span {
    margin-top: 1.6rem;
  }
}

#top_event .event_list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media screen and (min-width: 960px) {
  #top_event .event_list {
    flex-direction: row;
    gap: 2.4rem;
  }
}

#top_event .event_list > li {
  flex: 1;
  background-color: #ffffff;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.1);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

#top_event .event_list > li:hover {
  transform: translateY(-0.4rem);
  box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.18);
}

#top_event .event_list > li a {
  display: block;
  text-decoration: none;
  color: inherit;
}

#top_event .event_thumb {
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
  background-color: #F3F2F2;
}

#top_event .event_thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#top_event .event_thumb__placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #F3F2F2 0%, #E0DCD3 100%);
}

#top_event .event_ttl {
  padding: 1.4rem 1.4rem 1.8rem;
  border-top: 0.4rem solid var(--red);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.5;
  color: #0D0D0D;
  text-align: left;
}
@media screen and (min-width: 960px) {
  #top_event .event_ttl {
    padding: 1.6rem 1.8rem 2rem;
    font-size: 1.5rem;
  }
}

#top_event .event_empty {
  text-align: center;
  padding: 4rem 2rem;
  background: transparent;
  box-shadow: none;
}

#top_event .more_blue {
  margin: 0 auto;
}

/* ===== CAFE ===== */
.cafe_bg {
  width: 100%;
  height: 95%;
  background-image: url(../img/top_cafe-img.webp);
  background-size: cover;
  background-position: 70% center;
  position: absolute;
  bottom: 3%;
}

#top_cafe .flex {
  height: 6rem;
}
@media screen and (min-width: 960px) {
  #top_cafe .flex {
    height: 57.6rem;
    gap: 38.4rem;
  }
}

#top_cafe .fukidashi {
  width: 50%;
  max-width: 47.5rem;
  aspect-ratio: 475/273;
  background-image: url(../img/fukidashi_02.webp);
}
@media screen and (min-width: 960px) {
  #top_cafe .fukidashi {
    margin: 0 0 auto 0;
  }
}

#top_cafe .fukidashi p {
  width: 80%;
  height: 30%;
  padding-right: 5%;
}

@media screen and (min-width: 960px) {
  #top_cafe .section_ttl {
    margin: auto 0 0 0;
    flex-direction: row;
    align-items: center;
  }
}

#top_cafe .section_ttl span {
  color: var(--red);
  padding-top: 1rem;
  font-weight: 700;
}

#top_cafe .more_blue {
  margin: 0 auto 0 0;
}

/* ===== FLOOR ===== */
.floor_bg {
  width: 100%;
  height: 90%;
  background-image: url(../img/top_floor-img.webp);
  background-size: cover;
  background-position: center;
  position: absolute;
  bottom: 5%;
}

#top_floor .section_ttl {
  margin: 0 0 0 auto;
}

#top_floor .inner {
  padding: 3.75rem 0 1.125rem;
}
@media screen and (min-width: 960px) {
  #top_floor .inner {
    padding: 19.2rem 0 5.76rem;
  }
}

/* ===== TAKEOUT ===== */
#top_takeout {
  background-image: url(../img/top_takeout-img.webp);
  background-size: cover;
  background-position: center;
  padding-bottom: 0;
}
@media screen and (min-width: 960px) {
  #top_takeout {
    margin-top: 3.84rem;
    padding-bottom: 8rem;
  }
}

#top_takeout .inner {
  gap: 11.25rem;
}
@media screen and (min-width: 960px) {
  #top_takeout .inner {
    gap: 43rem;
  }
}

#top_takeout .flex {
  justify-content: space-between;
}

#top_takeout .fukidashi {
  width: 70%;
  max-width: 65.1rem;
  aspect-ratio: 651/350;
  background-image: url(../img/fukidashi_03.webp);
}

#top_takeout .fukidashi p {
  width: 80%;
  height: 30%;
  padding-right: 5%;
}

.takeout_icon {
  width: 30%;
  max-width: 35.7rem;
}

#top_takeout .section_ttl {
  width: 30%;
  position: absolute;
  bottom: 15%;
}
@media screen and (min-width: 960px) {
  #top_takeout .section_ttl {
    width: 50%;
    max-width: 63.3rem;
  }
}

/* ===== ABOUT ===== */
#top_about {
  background-image: url(../img/top_about-img.webp);
  background-size: cover;
  background-position: center bottom;
  padding: 4rem 0 6rem;
}
@media screen and (min-width: 960px) {
  #top_about {
    padding: 10rem 0 12rem;
  }
}

#top_about .inner {
  align-items: center;
  gap: 2rem;
}
@media screen and (min-width: 960px) {
  #top_about .inner {
    gap: 5rem;
  }
}

#top_about .inner > * {
  margin: 0;
}

@media screen and (min-width: 960px) {
  #top_about .inner > p {
    font-size: 4rem;
    font-weight: 700;
  }
}

@media screen and (min-width: 960px) {
  #top_about .section_ttl {
    align-items: center;
  }
}

/* 右下の英字キャッチ（背景写真の右側余白を装飾） */
#top_about .about_catch {
  display: none;
}
@media screen and (min-width: 960px) {
  #top_about .about_catch {
    display: block;
    position: absolute;
    right: 5%;
    bottom: 7%;
    color: #ffffff;
    font-size: 8rem;
    line-height: 1;
    text-align: right;
    text-shadow: 0 0.4rem 2rem rgba(0, 0, 0, 0.35);
    z-index: 2;
    pointer-events: none;
    margin: 0;
  }
}

#top_about .about_catch span {
  display: block;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  font-size: 1.6rem;
  letter-spacing: 0.25em;
  font-weight: 600;
  margin-top: 1.2rem;
  color: rgba(255, 255, 255, 0.92);
  text-indent: 0.25em; /* letter-spacing による右端ズレを補正 */
}

/* ===== ベージュゾーン：commitment〜eventを1枚の背景でつなぐラッパー ===== */
.beige_zone {
  position: relative;
  /* 上端〜下端に通しのグラデーション。セクション境界をまたいで色が連続する */
  background: linear-gradient(180deg, rgba(254, 1, 50, 0.08) 0%, #FFF8EE 18%, #FFF8EE 82%, rgba(251, 114, 144, 0.12) 100%);
  overflow: hidden;
}

/*
 * 内側セクションの個別背景・装飾円を解除。
 * #top_xxx は特異性が高いので、.beige_zone > #xxx でID指定して上書き。
 */
.beige_zone > #top_commitment,
.beige_zone > #top_menu,
.beige_zone > #top_bbq,
.beige_zone > #top_event {
  background-color: transparent;
  position: relative;
  z-index: 1;
}

.beige_zone > #top_commitment::before,
.beige_zone > #top_commitment::after,
.beige_zone > #top_menu::before,
.beige_zone > #top_menu::after,
.beige_zone > #top_bbq::before,
.beige_zone > #top_bbq::after,
.beige_zone > #top_event::before,
.beige_zone > #top_event::after {
  display: none;
}

/* ===== COMMITMENT（こだわり：画像1枚で訴求） ===== */
#top_commitment {
  position: relative;
  background-color: #FFF8EE;
  padding: 5rem 0 7rem;
  overflow: hidden;
}
@media screen and (min-width: 960px) {
  #top_commitment {
    padding: 12rem 0 14rem;
  }
}

/* 装飾：右上に赤ぼかし、左下にピンクぼかしでアクセント */
#top_commitment::before {
  content: "";
  position: absolute;
  width: 24rem;
  height: 24rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(254, 1, 50, 0.1) 0%, rgba(254, 1, 50, 0) 70%);
  top: -8rem;
  right: -8rem;
  z-index: 0;
}
@media screen and (min-width: 960px) {
  #top_commitment::before {
    width: 55rem;
    height: 55rem;
    top: -18rem;
    right: -18rem;
  }
}

#top_commitment::after {
  content: "";
  position: absolute;
  width: 24rem;
  height: 24rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 114, 144, 0.12) 0%, rgba(251, 114, 144, 0) 70%);
  bottom: -8rem;
  left: -8rem;
  z-index: 0;
}
@media screen and (min-width: 960px) {
  #top_commitment::after {
    width: 50rem;
    height: 50rem;
    bottom: -16rem;
    left: -16rem;
  }
}

/* 独自インナー：共通 .inner の max-width 制約を受けない */
#top_commitment .commitment_inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3rem;
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 960px) {
  #top_commitment .commitment_inner {
    gap: 5rem;
  }
}

#top_commitment .section_ttl {
  align-items: center;
  font-size: 5rem;
}
@media screen and (min-width: 960px) {
  #top_commitment .section_ttl {
    font-size: 17rem;
  }
}

#top_commitment .section_ttl span {
  margin-top: 0.8rem;
}
@media screen and (min-width: 960px) {
  #top_commitment .section_ttl span {
    margin-top: 1.6rem;
  }
}

#top_commitment .commitment_img {
  width: 90vw;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  align-self: center;
  padding: 1.6rem;
  background: linear-gradient(135deg, #FFF1DD 0%, #E8C9A0 50%, #C9A574 100%);
  border-radius: 1.4rem;
  box-shadow: 0 1.2rem 4rem rgba(0, 0, 0, 0.22);
}
@media screen and (min-width: 960px) {
  #top_commitment .commitment_img {
    padding: 2.4rem;
  }
}

#top_commitment .commitment_img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.6rem;
}

/* ===== RESERVATION ===== */
#top_reserve {
  position: relative;
  background-color: #F3F2F2;
  padding: 4rem 0 6rem;
  overflow: hidden;
}
@media screen and (min-width: 960px) {
  #top_reserve {
    padding: 10rem 0 12rem;
  }
}

/* 背景画像（縦長写真の中央＝海部分を切り出して表示） */
#top_reserve::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(../img/teikyou01.webp);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 0;
}

/* 白オーバーレイ（テキスト可読性を確保） */
#top_reserve::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 1;
}

#top_reserve > .inner {
  position: relative;
  z-index: 2;
}

#top_reserve .inner {
  align-items: center;
  text-align: center;
  gap: 3rem;
}
@media screen and (min-width: 960px) {
  #top_reserve .inner {
    gap: 5rem;
    max-width: 100rem;
  }
}

#top_reserve .section_ttl {
  align-items: center;
  font-size: 5rem;
}
@media screen and (min-width: 960px) {
  #top_reserve .section_ttl {
    font-size: 17rem;
  }
}

#top_reserve .section_ttl span {
  margin-top: 0.8rem;
}
@media screen and (min-width: 960px) {
  #top_reserve .section_ttl span {
    margin-top: 1.6rem;
  }
}

#top_reserve .reserve_lead p {
  font-size: 1.8rem;
  line-height: 1.9;
  font-weight: 600;
  text-align: left;
}
@media screen and (min-width: 960px) {
  #top_reserve .reserve_lead p {
    font-size: 2.8rem;
    line-height: 2;
    text-align: center;
  }
}

#top_reserve .reserve_lead .red {
  color: var(--red);
  font-weight: 700;
}

#top_reserve .reserve_btn_wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@media screen and (min-width: 960px) {
  #top_reserve .reserve_btn_wrap {
    flex-direction: row;
    justify-content: center;
    gap: 4rem;
  }
}

#top_reserve .reserve_btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  width: 100%;
  max-width: 38rem;
  margin: 0 auto;
  padding: 2.2rem 2rem;
  color: #ffffff;
  border-radius: 1rem;
  text-decoration: none;
  box-shadow: 0 0.4rem 0 rgba(0, 0, 0, 0.12);
  transition: opacity 0.2s, transform 0.2s;
}
@media screen and (min-width: 960px) {
  #top_reserve .reserve_btn {
    max-width: 44rem;
    padding: 3rem 2rem;
    gap: 1.2rem;
  }
}

#top_reserve .reserve_btn:hover {
  opacity: 0.9;
  transform: translateY(0.2rem);
  box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.12);
}

#top_reserve .reserve_btn--tel {
  background-color: var(--red);
}

#top_reserve .reserve_btn--line {
  background-color: #06c755;
}

#top_reserve .reserve_btn__label {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 960px) {
  #top_reserve .reserve_btn__label {
    font-size: 2.4rem;
  }
}

#top_reserve .reserve_btn__main {
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.1;
}
@media screen and (min-width: 960px) {
  #top_reserve .reserve_btn__main {
    font-size: 4rem;
  }
}

/* 営業時間：Open/Closed と本文を2カラムで左揃え、全体は中央寄せ */
#top_reserve .reserve_hours {
  display: inline-flex;
  flex-direction: column;
  gap: 1.2rem;
  margin: 0 auto;
  text-align: left;
  color: #0D0D0D;
}
@media screen and (min-width: 960px) {
  #top_reserve .reserve_hours {
    gap: 2rem;
  }
}

#top_reserve .reserve_hours__row {
  display: grid;
  grid-template-columns: 9rem 1fr;
  align-items: center;
  gap: 1.6rem;
}
@media screen and (min-width: 960px) {
  #top_reserve .reserve_hours__row {
    grid-template-columns: 16rem 1fr;
    gap: 3rem;
  }
}

#top_reserve .reserve_hours .en {
  color: var(--sky);
  font-size: 3.6rem;
  line-height: 1;
}
@media screen and (min-width: 960px) {
  #top_reserve .reserve_hours .en {
    font-size: 5.6rem;
  }
}

#top_reserve .reserve_hours__val {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.4;
}
@media screen and (min-width: 960px) {
  #top_reserve .reserve_hours__val {
    font-size: 2.6rem;
  }
}

/* ===== RECOMMENDED ===== */
#top_recommend {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #EAF6FA 100%);
  padding: 5rem 0 7rem;
  overflow: hidden;
}
@media screen and (min-width: 960px) {
  #top_recommend {
    padding: 12rem 0 14rem;
  }
}

/* 装飾：右下に薄い円を配置してアクセント */
#top_recommend::before {
  content: "";
  position: absolute;
  width: 30rem;
  height: 30rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 175, 204, 0.12) 0%, rgba(0, 175, 204, 0) 70%);
  bottom: -10rem;
  right: -10rem;
  z-index: 0;
}
@media screen and (min-width: 960px) {
  #top_recommend::before {
    width: 60rem;
    height: 60rem;
    bottom: -20rem;
    right: -20rem;
  }
}

#top_recommend::after {
  content: "";
  position: absolute;
  width: 24rem;
  height: 24rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 114, 144, 0.1) 0%, rgba(251, 114, 144, 0) 70%);
  top: -8rem;
  left: -8rem;
  z-index: 0;
}
@media screen and (min-width: 960px) {
  #top_recommend::after {
    width: 50rem;
    height: 50rem;
    top: -16rem;
    left: -16rem;
  }
}

#top_recommend .inner {
  align-items: center;
  text-align: center;
  gap: 2.4rem;
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 960px) {
  #top_recommend .inner {
    gap: 4.2rem;
    max-width: 110rem;
  }
}

#top_recommend .recommend_lead {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.9;
  letter-spacing: -0.02em;
  color: #0D0D0D;
}
@media screen and (min-width: 960px) {
  #top_recommend .recommend_lead {
    font-size: 2.2rem;
    line-height: 2;
  }
}

#top_recommend .section_ttl {
  align-items: center;
  font-size: 5rem;
}
@media screen and (min-width: 960px) {
  #top_recommend .section_ttl {
    font-size: 17rem;
  }
}

#top_recommend .section_ttl span {
  margin-top: 0.8rem;
}
@media screen and (min-width: 960px) {
  #top_recommend .section_ttl span {
    margin-top: 1.6rem;
  }
}

#top_recommend .check_list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  text-align: left;
}
@media screen and (min-width: 960px) {
  #top_recommend .check_list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.4rem 3rem;
    max-width: 100rem;
    margin: 0 auto;
  }
}

#top_recommend .check_list li {
  position: relative;
  padding: 2rem 1.6rem 2rem 5.4rem;
  background-color: #ffffff;
  border-left: 0.5rem solid var(--sky);
  border-radius: 0.4rem 0.8rem 0.8rem 0.4rem;
  box-shadow: 0 0.4rem 1.6rem rgba(0, 175, 204, 0.12);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  color: #0D0D0D;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
@media screen and (min-width: 960px) {
  #top_recommend .check_list li {
    padding: 2.6rem 2.6rem 2.6rem 7.4rem;
    font-size: 2rem;
    min-height: 10rem;
    display: flex;
    align-items: center;
    border-left-width: 0.6rem;
  }
}

#top_recommend .check_list li:hover {
  transform: translateY(-0.4rem);
  box-shadow: 0 0.8rem 2.4rem rgba(0, 175, 204, 0.22);
}

#top_recommend .check_list li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 1.8rem;
  width: 2.4rem;
  height: 2.4rem;
  background-color: #ffffff;
  border: 0.2rem solid var(--sky);
  border-radius: 0.4rem;
  transform: translateY(-50%);
}
@media screen and (min-width: 960px) {
  #top_recommend .check_list li::before {
    left: 2.6rem;
    width: 3rem;
    height: 3rem;
  }
}

#top_recommend .check_list li::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 2.3rem;
  width: 1.4rem;
  height: 0.7rem;
  border-left: 0.3rem solid var(--sky);
  border-bottom: 0.3rem solid var(--sky);
  transform: translateY(-80%) rotate(-45deg);
}
@media screen and (min-width: 960px) {
  #top_recommend .check_list li::after {
    left: 3.2rem;
    width: 1.8rem;
    height: 0.9rem;
    border-left-width: 0.4rem;
    border-bottom-width: 0.4rem;
  }
}

#about01 {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 0%, #F3F2F2 0%, #F3F2F2 100%);
  color: var(--blue);
  padding-bottom: 0;
}

#about01 .inner {
  background-color: #E8E8E8;
  padding: 0 0 2rem;
}

#about01 h3 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}
@media screen and (min-width: 960px) {
  #about01 h3 {
    gap: 3rem;
  }
}

#about01 h3 div {
  font-size: 2rem;
  padding: 0 2%;
  background-color: #ffffff;
  margin: -1% auto 0 0;
}
@media screen and (min-width: 960px) {
  #about01 h3 div {
    font-size: 4.6rem;
  }
}

#about01 .content_textWrap {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

#about01 .content01 p {
  padding: 0 1.125rem;
}
@media screen and (min-width: 960px) {
  #about01 .content01 p {
    padding: 0 5.76rem;
  }
}

#about01 .content_img {
  width: 80%;
  margin: 0 auto;
}

#about01 .content02 {
  gap: 0;
}

#about01 .content02 .content_textWrap {
  background-color: #ffffff;
  padding: 5% 3% 7% 3%;
  margin-right: -0.75rem;
}
@media screen and (min-width: 960px) {
  #about01 .content02 .content_textWrap {
    margin-right: -3.84rem;
  }
}

#about01 .content02 .content_textWrap p {
  display: flex;
  flex-wrap: wrap;
}

#about01 .content02 .content_textWrap p span {
  width: 100%;
  border-bottom: 0.1rem dotted var(--blue);
  text-align: left;
  font-size: 0.8625rem;
  text-wrap: nowrap;
  letter-spacing: 0.08rem;
}
@media screen and (min-width: 960px) {
  #about01 .content02 .content_textWrap p span {
    font-size: 2.1rem;
  }
}

#about01 .content02 .content_img {
  margin: -0.75rem auto 0 -1.125rem;
}
@media screen and (min-width: 960px) {
  #about01 .content02 .content_img {
    margin: -3.84rem auto 0 -5.76rem;
  }
}

#about02 {
  padding: 3rem 0;
}
@media screen and (min-width: 960px) {
  #about02 {
    padding: 8rem 0;
  }
}

#about02 .inner {
  gap: 1.125rem;
}
@media screen and (min-width: 960px) {
  #about02 .inner {
    gap: 5.76rem;
  }
}

#about02 p {
  word-break: keep-all;
}

#about03 {
  background-color: #F3F2F2;
  padding: 3rem 0;
}

#about03 .inner {
  width: 100%;
}

#about03 .content {
  gap: 0;
}

#about03 .content_textWrap {
  background-color: #ffffff;
  width: 94%;
  max-width: 81.8rem;
  margin: 0 auto auto;
  padding: 5% 3% 7% 3%;
  position: relative;
  z-index: 2;
}

#about03 .content_textWrap p {
  display: flex;
  flex-wrap: wrap;
}

#about03 .content_textWrap p span {
  width: 100%;
  border-bottom: 0.1rem dotted var(--blue);
  text-align: left;
  font-size: 0.9rem;
  text-wrap: nowrap;
  letter-spacing: 0.08rem;
}
@media screen and (min-width: 960px) {
  #about03 .content_textWrap p span {
    font-size: 2.1rem;
  }
}

#about03 .content_img {
  margin-top: -1.5rem;
  position: relative;
  z-index: 1;
}

#about04 {
  background-color: #F3F2F2;
  padding: 3rem 0;
}

#about04 .inner {
  width: 90%;
  max-width: 126.7rem;
  margin: 0 auto;
  position: relative;
  border: 0.1rem solid var(--blue);
  padding: 5% 4%;
}

#about04 .inner::after {
  content: "";
  width: calc(100% + 1rem);
  height: calc(100% + 1rem);
  border: 0.1rem solid var(--blue);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#about04 h4 {
  font-size: 1.4rem;
  color: #ffffff;
  background-color: var(--blue);
  display: inline-block;
  margin: 0 auto;
  padding: 0 3%;
}
@media screen and (min-width: 960px) {
  #about04 h4 {
    font-size: 4rem;
  }
}

#about04 .content_wrap {
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
  z-index: 2;
}
@media screen and (min-width: 960px) {
  #about04 .content_wrap {
    gap: 4rem;
  }
}

#about04 .content {
  display: flex;
  flex-direction: row;
  gap: 1.875rem;
  align-items: center;
}
@media screen and (min-width: 960px) {
  #about04 .content {
    gap: 4rem;
  }
}

#about04 .content:nth-of-type(even) {
  flex-direction: row-reverse;
}

#about04 .content > * {
  width: 50%;
  text-align: left;
}

#about04 .content_textWrap {
  color: var(--blue);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
@media screen and (min-width: 960px) {
  #about04 .content_textWrap {
    gap: 3.84rem;
  }
}

#about04 .content_textWrap h5 {
  background-color: #ffffff;
  display: inline-block;
  padding: 0 0.75rem;
  position: relative;
  line-height: 1.5;
  margin: 0 auto 0 0;
}
@media screen and (min-width: 960px) {
  #about04 .content_textWrap h5 {
    padding: 0 3.84rem;
  }
}

#about04 .content_textWrap h5::before {
  width: 100%;
  height: 0.075rem;
  background-color: var(--blue);
  content: "";
  position: absolute;
  bottom: -0.4rem;
  left: 0;
  z-index: 1;
}
@media screen and (min-width: 960px) {
  #about04 .content_textWrap h5::before {
    height: 0.3rem;
  }
}

#about04 .content_textWrap h5::after {
  content: "";
  width: 1.5rem;
  aspect-ratio: 28/23;
  background-image: url(../img/menu_ttl-deco.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  position: absolute;
  top: calc(100% + 0.2rem);
  right: 98%;
}
@media screen and (min-width: 960px) {
  #about04 .content_textWrap h5::after {
    width: 4rem;
  }
}

#about04 .content:nth-of-type(even) h5 {
  margin: 0 0 0 auto;
}

#about04 .content:nth-of-type(even) h5::after {
  top: calc(100% + 0.3rem);
  right: auto;
  left: 99%;
  transform: scaleX(-1);
}

#about04 .content .content_textWrap p {
  display: flex;
  flex-wrap: wrap;
}

#about04 .content .content_textWrap p span {
  width: 100%;
  border-bottom: 0.1rem dotted var(--blue);
  text-align: left;
  font-size: 0.9rem;
  text-wrap: nowrap;
  letter-spacing: 0.08rem;
}
@media screen and (min-width: 960px) {
  #about04 .content .content_textWrap p span {
    font-size: 2.1rem;
  }
}

/* PC */
@media screen and (min-width: 960px) {
  #about01 {
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 80%, #F3F2F2 80%, #F3F2F2 100%);
    color: var(--blue);
    padding: 8rem 0;
    overflow: hidden;
  }
  #about01 .inner {
    max-width: 168.2rem;
  }
  #about01 .inner .content {
    width: 90%;
    max-width: 144rem;
    margin: 0 auto;
    position: relative;
  }
  #about01 .inner .content01 {
    padding-bottom: 15.36rem;
  }
  #about01 .inner .content_textWrap {
    width: 60%;
    position: relative;
    z-index: 2;
  }
  #about01 .inner .content_img {
    width: 50%;
    position: absolute;
    right: -15.36rem;
    bottom: 0;
  }
  #about01 .inner .content02 {
    flex-direction: row-reverse;
    padding: 5.76rem 0 13.44rem;
  }
  #about01 .inner .content02 .content_textWrap {
    width: 100%;
    max-width: 81.8rem;
    padding-bottom: 5%;
  }
  #about01 .inner .content02 .content_img {
    width: 70%;
    position: absolute;
    right: auto;
    left: -15.36rem;
    bottom: 0;
    z-index: 1;
  }
  #about02 .inner {
    width: 94%;
    max-width: 144rem;
    margin: 0 auto;
    position: relative;
  }
  #about02 .content {
    justify-content: space-between;
    padding-bottom: 9.6rem;
  }
  #about03 {
    padding: 28.8rem 0;
  }
  #about03 .inner {
    width: 94%;
    max-width: 144rem;
    margin: 0 auto;
  }
  #about03 .content {
    justify-content: space-between;
  }
  #about03 .content_textWrap {
    width: 100%;
    max-width: 81.8rem;
    padding-bottom: 5%;
    margin: 0 auto 0 0;
  }
  #about03 .content_img {
    width: 60%;
    position: absolute;
    right: -9.6rem;
    bottom: 50%;
    transform: translateY(50%);
    margin-top: -7.68rem;
  }
  #about04 {
    padding: 15.36rem 0;
  }
  #about04 .content_textWrap h5 {
    font-size: 4rem;
  }
}
/* ===== オーナーより（ページ冒頭・画像で訴求） ===== */
#about_owner {
  padding: 5rem 0 6rem;
  background-color: #FFF8EE;
}
@media screen and (min-width: 960px) {
  #about_owner {
    padding: 10rem 0 12rem;
  }
}

/* 独自インナー：共通 .inner や max-width 制限なし、90vw 画像が中央表示できるよう全幅 */
#about_owner .owner_inner {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
}
@media screen and (min-width: 960px) {
  #about_owner .owner_inner {
    gap: 5rem;
  }
}

#about_owner .owner_catch {
  width: 90%;
  max-width: 86rem;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.7;
  text-align: center;
  color: #0D0D0D;
  margin: 0;
  letter-spacing: 0.03em;
}
@media screen and (min-width: 960px) {
  #about_owner .owner_catch {
    font-size: 3.6rem;
    line-height: 1.6;
  }
}

#about_owner .owner_img {
  width: 90vw;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

#about_owner .owner_img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 1rem;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
}

/* ===== MENU ページ：一押しメニュー & 単品メニュー（画像1枚で訴求） ===== */
#menu_recommend,
#menu_single {
  background-color: #FFF8EE;
  padding: 5rem 0 7rem;
}
@media screen and (min-width: 960px) {
  #menu_recommend,
  #menu_single {
    padding: 12rem 0 14rem;
  }
}

#menu_recommend .menu_inner,
#menu_single .menu_inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3rem;
}
@media screen and (min-width: 960px) {
  #menu_recommend .menu_inner,
  #menu_single .menu_inner {
    gap: 5rem;
  }
}

#menu_recommend .section_ttl,
#menu_single .section_ttl {
  align-items: center;
  font-size: 5rem;
}
@media screen and (min-width: 960px) {
  #menu_recommend .section_ttl,
  #menu_single .section_ttl {
    font-size: 17rem;
  }
}

#menu_recommend .section_ttl span,
#menu_single .section_ttl span {
  margin-top: 0.8rem;
}
@media screen and (min-width: 960px) {
  #menu_recommend .section_ttl span,
  #menu_single .section_ttl span {
    margin-top: 1.6rem;
  }
}

#menu_recommend .menu_img,
#menu_single .menu_img {
  width: 90vw;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  padding: 1.6rem;
  background: linear-gradient(135deg, #FFF1DD 0%, #E8C9A0 50%, #C9A574 100%);
  border-radius: 1.4rem;
  box-shadow: 0 1.2rem 4rem rgba(0, 0, 0, 0.22);
}
@media screen and (min-width: 960px) {
  #menu_recommend .menu_img,
  #menu_single .menu_img {
    padding: 2.4rem;
  }
}

#menu_recommend .menu_img img,
#menu_single .menu_img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.6rem;
}

#floor01 {
  background-color: #FC7039;
  padding: 0;
}

#floor01 .outer {
  position: relative;
  padding: 1.875rem 0 8.25rem;
  overflow: hidden;
}
@media screen and (min-width: 960px) {
  #floor01 .outer {
    padding: 8rem 0 20rem;
  }
}

#floor01 .inner {
  width: 100%;
}

#floor01 h3 {
  color: #ffffff;
  font-size: 2rem;
  padding: 1.875rem 0;
}
@media screen and (min-width: 960px) {
  #floor01 h3 {
    font-size: 4.6rem;
    padding: 4rem 0;
  }
}

#floor01 .deco01 {
  position: absolute;
  width: 3.375rem;
  top: 0;
  right: 15%;
}
@media screen and (min-width: 960px) {
  #floor01 .deco01 {
    width: 12.4rem;
  }
}

#floor01 .deco02 {
  position: absolute;
  width: 3.75rem;
  top: 6rem;
  left: 15%;
}
@media screen and (min-width: 960px) {
  #floor01 .deco02 {
    width: 19.2rem;
  }
}

#floor01 .deco03 {
  position: absolute;
  width: 3rem;
  bottom: 4.875rem;
  left: 15%;
}
@media screen and (min-width: 960px) {
  #floor01 .deco03 {
    width: 15.36rem;
  }
}

#floor01 .deco04 {
  position: absolute;
  width: 4.5rem;
  bottom: -0.75rem;
  right: 5%;
}
@media screen and (min-width: 960px) {
  #floor01 .deco04 {
    width: 23rem;
  }
}

#floor01 .content_wrap {
  display: flex;
  flex-direction: column;
  gap: 7.5rem;
  padding-top: 3rem;
}
@media screen and (min-width: 960px) {
  #floor01 .content_wrap {
    gap: 16rem;
  }
}

#floor01 .content {
  position: relative;
  width: 90%;
  max-width: 84rem;
  margin: 0 0 0 auto;
}

#floor01 .content:nth-of-type(even) {
  margin: 0 auto 0 0;
}

#floor01 .content01 .content_ttl {
  top: 0;
  left: 0;
  transform: translate(-10%, -25%);
}

#floor01 .content01 .content_ttl.type02 {
  top: auto;
  left: auto;
  bottom: 0;
  right: 0;
  transform: translate(-10%, 50%);
}

#floor01 .content02 .content_ttl {
  left: 0;
  bottom: 0;
  transform: translate(10%, 50%);
}

#floor01 .content03 .content_ttl {
  bottom: 0;
  right: 0;
  transform: translate(-10%, 50%);
}

.floor_bg01 {
  aspect-ratio: 430/255;
  background-image: url(../img/floor_img04.webp);
  background-size: cover;
}

/* PC */
@media screen and (min-width: 960px) {
  #floor01 .inner {
    width: 90%;
    max-width: 142.6rem;
    margin: 0 auto;
  }
  #floor01 .content {
    position: relative;
    width: 90%;
    margin: 0 auto 0 0;
  }
  #floor01 .content:nth-of-type(even) {
    margin: 0 0 0 auto;
  }
  #floor01 .content01 {
    margin-left: 19.2rem;
  }
  #floor01 .content01 .content_ttl {
    left: -19.2rem;
    transform: translate(0%, -50%);
  }
  #floor01 .content01 .content_ttl.type02 {
    transform: translate(20%, 50%);
  }
  #floor01 .content02 .content_ttl {
    left: auto;
    right: 0;
    transform: translate(-10%, 50%);
  }
  #floor01 .content03 .content_ttl {
    bottom: auto;
    top: 0;
    right: auto;
    left: 0;
    transform: translate(10%, -50%);
  }
  #floor01 .deco02 {
    top: 50%;
    left: 15%;
  }
  #floor01 .deco03 {
    bottom: 51rem;
    left: 65%;
  }
  #floor01 .deco04 {
    bottom: 3.84rem;
  }
  .floor_bg01 {
    aspect-ratio: 1920/861;
  }
}
#cafe01 {
  padding-bottom: 0;
}

#cafe01 .cafe_head {
  padding: 0 0 1.875rem;
}
@media screen and (min-width: 960px) {
  #cafe01 .cafe_head {
    padding: 0 0 4rem;
  }
}

#cafe01 .section_ttl {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding-bottom: 0.75rem;
}
@media screen and (min-width: 960px) {
  #cafe01 .section_ttl {
    padding-bottom: 3.84rem;
  }
}

#cafe01 .cafe_head p {
  font-weight: 700;
  font-size: 1.875rem;
}
@media screen and (min-width: 960px) {
  #cafe01 .cafe_head p {
    font-size: 4rem;
  }
}

#cafe02 {
  background-image: url(../img/event_bg.webp);
  background-size: cover;
  padding-bottom: 0;
}

#cafe02 .content_wrap {
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
  padding-bottom: 3.75rem;
}
@media screen and (min-width: 960px) {
  #cafe02 .content_wrap {
    gap: 8rem;
    padding-bottom: 8rem;
  }
}

#cafe02 .content .flex {
  gap: 1.875rem;
}
@media screen and (min-width: 960px) {
  #cafe02 .content .flex {
    gap: 4rem;
  }
}

#cafe02 .content.flex {
  gap: 1.875rem;
}
@media screen and (min-width: 960px) {
  #cafe02 .content.flex {
    gap: 4rem;
  }
}

#cafe02 .content_ttl {
  position: static;
  max-width: 78rem;
}

#cafe02 .content_ttl p {
  font-size: 1.875rem;
  align-items: center;
  font-weight: 700;
  padding: 1.125rem 1.875rem;
  line-height: 1.5;
}
@media screen and (min-width: 960px) {
  #cafe02 .content_ttl p {
    font-size: 5.5rem;
    padding: 2.4rem 3rem;
  }
}

#cafe02 .content_textWrap {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

#cafe02 .content01 .content_textWrap {
  background-color: #ffffff;
  padding: 5% 3% 7% 3%;
}

#cafe02 .content01 .content_textWrap p {
  display: flex;
  flex-wrap: wrap;
}

#cafe02 .content01 .content_textWrap span {
  width: 100%;
  border-bottom: 0.1rem dotted var(--blue);
  text-align: left;
  font-size: 0.825rem;
  text-wrap: nowrap;
  letter-spacing: 0.08rem;
}
@media screen and (min-width: 960px) {
  #cafe02 .content01 .content_textWrap span {
    font-size: 2.1rem;
  }
}

#cafe02 .content01 .content_ttl p {
  text-align: left;
}

#cafe02 .content_textWrap p {
  text-align: left;
}

#cafe02 .content_textWrap .content_ttl p {
  text-align: center;
}

/* PC */
@media screen and (min-width: 960px) {
  #cafe02 {
    padding: 8rem 0 9.6rem;
  }
  #cafe02 .inner {
    max-width: 142.6rem;
  }
  #cafe02 .content01 .content_ttl {
    margin: 0 auto 4rem;
  }
  #cafe02 .content01 .flex {
    flex-wrap: wrap;
    position: relative;
    padding-bottom: 24rem;
  }
  #cafe02 .content01 .content_textWrap {
    width: 89rem;
    margin: 0 0 auto 0;
    position: relative;
    z-index: 2;
    padding: 4rem;
  }
  #cafe02 .content01 .content_img {
    width: 50%;
    position: absolute;
    right: -9.6rem;
    bottom: 0;
    z-index: 1;
  }
  #cafe02 .content.flex {
    width: 100%;
    justify-content: space-between;
    position: relative;
    padding: 0 0 15.36rem;
  }
  #cafe02 .content.flex .content_img {
    width: 55%;
    position: absolute;
    left: -3.84rem;
  }
  #cafe02 .content.flex .content_textWrap {
    position: relative;
    z-index: 2;
    width: 53%;
    padding-top: 4rem;
  }
  #cafe02 .content.flex .content_textWrap p {
    padding-left: 20%;
  }
  #cafe02 .content.flex .content_textWrap .content_ttl p {
    padding: 2.4rem 3rem;
  }
}
/* ===== ① こだわり（FEATUREページ冒頭：画像1枚で訴求） ===== */
#feature_commitment {
  background-color: #FFF8EE;
  padding: 5rem 0 7rem;
}
@media screen and (min-width: 960px) {
  #feature_commitment {
    padding: 12rem 0 14rem;
  }
}

#feature_commitment .commitment_inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3rem;
}
@media screen and (min-width: 960px) {
  #feature_commitment .commitment_inner {
    gap: 5rem;
  }
}

#feature_commitment .section_ttl {
  align-items: center;
  font-size: 5rem;
}
@media screen and (min-width: 960px) {
  #feature_commitment .section_ttl {
    font-size: 17rem;
  }
}

#feature_commitment .section_ttl span {
  margin-top: 0.8rem;
}
@media screen and (min-width: 960px) {
  #feature_commitment .section_ttl span {
    margin-top: 1.6rem;
  }
}

#feature_commitment .commitment_img {
  width: 90vw;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  padding: 1.6rem;
  background: linear-gradient(135deg, #FFF1DD 0%, #E8C9A0 50%, #C9A574 100%);
  border-radius: 1.4rem;
  box-shadow: 0 1.2rem 4rem rgba(0, 0, 0, 0.22);
}
@media screen and (min-width: 960px) {
  #feature_commitment .commitment_img {
    padding: 2.4rem;
  }
}

#feature_commitment .commitment_img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.6rem;
}

/* ===== BBQ ページ：MV 切り抜き位置だけ調整（サイズは共通スタイル） ===== */
#bbq_wrapper .MV_under.MV > img {
  object-position: center 75%;
}

/* ===== BBQ ページ（画像1枚で訴求：海テラスBBQコース） ===== */
#bbq_main {
  background-color: #FFF8EE;
  padding: 5rem 0 7rem;
}
@media screen and (min-width: 960px) {
  #bbq_main {
    padding: 12rem 0 14rem;
  }
}

#bbq_main .bbq_inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3rem;
}
@media screen and (min-width: 960px) {
  #bbq_main .bbq_inner {
    gap: 5rem;
  }
}

#bbq_main .section_ttl {
  align-items: center;
  font-size: 5rem;
}
@media screen and (min-width: 960px) {
  #bbq_main .section_ttl {
    font-size: 17rem;
  }
}

#bbq_main .section_ttl span {
  margin-top: 0.8rem;
}
@media screen and (min-width: 960px) {
  #bbq_main .section_ttl span {
    margin-top: 1.6rem;
  }
}

#bbq_main .bbq_img {
  width: 90vw;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  padding: 1.6rem;
  background: linear-gradient(135deg, #FFF1DD 0%, #E8C9A0 50%, #C9A574 100%);
  border-radius: 1.4rem;
  box-shadow: 0 1.2rem 4rem rgba(0, 0, 0, 0.22);
}
@media screen and (min-width: 960px) {
  #bbq_main .bbq_img {
    padding: 2.4rem;
  }
}

#bbq_main .bbq_img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.6rem;
}

/* イベント（アンカーオフセット付き）。.event の見た目は _component に定義 */
#event {
  padding-bottom: 3.75rem;
  margin-top: -6rem;
  padding-top: 6rem;
}
@media screen and (min-width: 960px) {
  #event {
    margin-top: -12rem;
    padding-top: 12rem;
    padding-bottom: 12rem;
  }
}

/* ===== ニュース一覧ページ：MV の切り抜き位置（トップから75%基準） ===== */
#news_list_wrapper .MV_under.MV > img {
  object-position: center 75%;
}

/* ===== ニュース・イベント一覧（固定ページ：page-news-list.php） ===== */
.news-archive {
  padding: 6rem 0 8rem;
}
@media screen and (min-width: 960px) {
  .news-archive {
    padding: 12rem 0 10rem;
  }
}

.news-archive .inner {
  display: block;
  text-align: left;
  width: 90%;
  max-width: 100rem;
  margin: 0 auto;
}

/* ----- 絞り込みタブ ----- */
.news-archive__tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 0 0 2.4rem;
}
@media screen and (min-width: 960px) {
  .news-archive__tabs {
    gap: 1.2rem;
    margin: 0 0 4rem;
  }
}

.news-archive__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 9rem;
  padding: 0.9rem 1.8rem;
  background-color: #ffffff;
  color: #0D0D0D;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  border: 0.1rem solid #E0DCD3;
  border-radius: 5rem;
  text-decoration: none;
  line-height: 1;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
@media screen and (min-width: 960px) {
  .news-archive__tab {
    min-width: 12rem;
    padding: 1.2rem 2.4rem;
    font-size: 1.6rem;
  }
}

.news-archive__tab:hover {
  background-color: #F3F2F2;
}

.news-archive__tab.is-active {
  background-color: #0D0D0D;
  border-color: #0D0D0D;
  color: #ffffff;
}

.news-archive__tab--news.is-active {
  background-color: var(--sky);
  border-color: var(--sky);
}

.news-archive__tab--event.is-active {
  background-color: var(--red);
  border-color: var(--red);
}

/* ----- リスト ----- */
.news-archive__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
@media screen and (min-width: 960px) {
  .news-archive__list {
    gap: 2rem;
  }
}

.news-archive__item {
  background-color: #ffffff;
  border-radius: 0.8rem;
  box-shadow: 0 0.3rem 1.2rem rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.news-archive__item:hover {
  transform: translateY(-0.2rem);
  box-shadow: 0 0.6rem 1.8rem rgba(0, 0, 0, 0.14);
}

/* 1記事：PC = 左サムネ → タグ → 右タイトル横並び / SP = 左サムネ、右に縦並び（タグ→日付→タイトル） */
.news-archive__item a {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  gap: 0.8rem 1.4rem;
  align-items: start;
  padding: 1.4rem;
  color: inherit;
  text-decoration: none;
}
@media screen and (min-width: 960px) {
  .news-archive__item a {
    display: flex;
    align-items: center;
    gap: 2.4rem;
    padding: 1.8rem 2.4rem;
  }
}

/* サムネイル */
.news-archive__thumb {
  /* SP: グリッドで左列の2行分（タグの右と本文の右に並ぶ） */
  grid-column: 1;
  grid-row: 1/3;
  align-self: center;
  width: 9rem;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 0.4rem;
  background-color: #F3F2F2;
}
@media screen and (min-width: 960px) {
  .news-archive__thumb {
    flex: 0 0 auto;
    width: 14rem;
  }
}

.news-archive__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-archive__thumb-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #F3F2F2 0%, #E0DCD3 100%);
}

/* タグ（投稿タイプ別ラベル） */
.news-archive__tag {
  /* SP: グリッドの右列上段 */
  grid-column: 2;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  min-width: 7rem;
  padding: 0.5rem 1rem;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 0.4rem;
  color: #ffffff;
  line-height: 1;
}
@media screen and (min-width: 960px) {
  .news-archive__tag {
    flex: 0 0 auto;
    min-width: 9rem;
    padding: 0.7rem 1.4rem;
    font-size: 1.4rem;
  }
}

.news-archive__tag--news {
  background-color: var(--sky);
}

.news-archive__tag--event {
  background-color: var(--red);
}

/* 日付＋タイトル */
.news-archive__body {
  /* SP: グリッドの右列下段 */
  grid-column: 2;
  grid-row: 2;
  min-width: 0; /* 長文タイトルが折り返せるように */
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
@media screen and (min-width: 960px) {
  .news-archive__body {
    flex: 1 1 auto;
  }
}

.news-archive__date {
  font-size: 1.2rem;
  color: #A9A9A9;
  font-weight: 700;
}
@media screen and (min-width: 960px) {
  .news-archive__date {
    font-size: 1.4rem;
  }
}

.news-archive__title {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.5;
  color: #0D0D0D;
  margin: 0;
}
@media screen and (min-width: 960px) {
  .news-archive__title {
    font-size: 1.8rem;
  }
}

.news-archive__empty {
  text-align: center;
  padding: 6rem 0;
  font-size: 1.6rem;
  color: #A9A9A9;
}

/* ----- ページネーション ----- */
.news-archive__pagination {
  margin-top: 4rem;
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}
@media screen and (min-width: 960px) {
  .news-archive__pagination {
    margin-top: 6rem;
  }
}

.news-archive__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4rem;
  height: 4rem;
  padding: 0 1rem;
  border-radius: 0.4rem;
  background-color: #ffffff;
  color: #0D0D0D;
  font-size: 1.4rem;
  font-weight: 700;
  text-decoration: none;
  border: 0.1rem solid #E0DCD3;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.news-archive__pagination .page-numbers.current,
.news-archive__pagination .page-numbers:hover {
  background-color: var(--sky);
  color: #ffffff;
  border-color: var(--sky);
}

/* news 個別投稿ページ */
.news-single {
  padding: 8rem 0;
}
@media screen and (min-width: 960px) {
  .news-single {
    padding: 16rem 0 8rem; /* PC固定ヘッダ分を確保 */
  }
}

.news-single .inner {
  display: block;
  text-align: left;
  max-width: 90rem;
}

.news-single__date {
  color: #A9A9A9;
  font-size: 1.6rem;
  font-weight: 700;
}
@media screen and (max-width: 959px) {
  .news-single__date {
    font-size: 1.2rem;
  }
}

.news-single__title {
  font-size: 4rem;
  font-weight: 700;
  line-height: 1.5;
  margin: 0.8rem 0 2.4rem;
  padding-bottom: 1.6rem;
  border-bottom: 0.2rem dotted #A8A8A8;
}
@media screen and (max-width: 959px) {
  .news-single__title {
    font-size: 2.2rem;
  }
}

.news-single__thumb {
  width: 100%;
  max-width: 70rem;
  margin: 0 auto 3.2rem;
}
.news-single__thumb img {
  width: 100%;
  height: auto;
  display: block;
}

.news-single__body {
  font-size: 1.8rem;
  line-height: 2;
}
@media screen and (max-width: 959px) {
  .news-single__body {
    font-size: 1.4rem;
  }
}
.news-single__body p {
  margin-bottom: 1em;
}
.news-single__body img {
  max-width: 100%;
  height: auto;
  margin: 1em auto;
}
.news-single__body a {
  color: var(--sky);
  text-decoration: underline;
}

.news-single__nav {
  margin-top: 4.8rem;
  text-align: center;
}

.news-single__back {
  display: inline-block;
  min-width: 28rem;
  padding: 1.8rem 4rem;
  background: var(--sky);
  color: #fff;
  font-size: 1.8rem;
  font-weight: 700;
  border-radius: 5rem;
  text-decoration: none;
  transition: opacity 0.3s;
}
@media screen and (max-width: 959px) {
  .news-single__back {
    font-size: 1.5rem;
  }
}
.news-single__back:hover {
  opacity: 0.8;
}

.page-404 {
  background: #fff;
}

.not-found {
  padding: 10rem 0 14rem;
}
@media screen and (max-width: 959px) {
  .not-found {
    padding: 8rem 0 8rem;
  }
}

.not-found__inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 2rem;
  text-align: center;
}

.not-found__code {
  font-family: var(--en);
  font-size: 12rem;
  line-height: 1;
  color: var(--sky);
}
@media screen and (max-width: 959px) {
  .not-found__code {
    font-size: 7.5rem;
  }
}

.not-found__lead {
  margin-top: 2.4rem;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--blue);
}
@media screen and (max-width: 959px) {
  .not-found__lead {
    font-size: 1.875rem;
  }
}

.not-found__text {
  margin-top: 2rem;
  font-size: 1.6rem;
  line-height: 1.875;
}
@media screen and (max-width: 959px) {
  .not-found__text {
    font-size: 1.2rem;
  }
}

.not-found__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28rem;
  margin: 4rem auto 0;
  padding: 1.8rem 4rem;
  background: var(--sky);
  color: #fff;
  font-size: 1.8rem;
  font-weight: 700;
  border-radius: 5rem;
  text-decoration: none;
  transition: opacity 0.3s;
}
.not-found__btn:hover {
  opacity: 0.8;
}
@media screen and (max-width: 959px) {
  .not-found__btn {
    font-size: 1.5rem;
  }
}

/*# sourceMappingURL=style.css.map */