@charset "utf-8";
/* CSS Document */
img, object, embed, video {max-width:100%;height:auto;}

/****************全ページ共通*****************/

html, body {
  max-width: 100%;
  overflow-x: hidden;
  margin: 0;           /* ← 追加 */
  padding: 0;          /* ← 追加 */
  background-color: #F6F5EA;
}

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

h1{
    color: #FCFC00;
    font-size: 75px;
     font-family: "Kaisei Decol", serif;
  font-weight: 400;
  font-style: normal;
  margin:0 auto;
  text-shadow:
    -1px -1px 0 #000,  /* 上左 */
     1px -1px 0 #000,  /* 上右 */
    -1px  1px 0 #000,  /* 下左 */
     1px  1px 0 #000;  /* 下右 */
}

h2{
    color: #34312F;
   font-size: 30px;
  font-family: "Kiwi Maru", serif;
  font-weight: 400;
  font-style: normal;
  margin:0 auto;
}

h3{
     color: #34312F;
   font-size: 20px;
  font-family: "Kiwi Maru", serif;
  font-weight: 400;
  font-style: normal;
  margin:0 auto;
}

h4{
     color: #34312F;
   font-size: 15px;
  font-family: "Kiwi Maru", serif;
  font-weight: 400;
  font-style: normal;
  margin:0 auto;
}

h5{
     color: #34312F;
   font-size: 12px;
  font-family: "Kiwi Maru", serif;
  font-weight: 400;
  font-style: normal;
  margin:0 auto;
}


p{
 color: #34312F;
   font-size: 15px;
  font-family: "Kiwi Maru", serif;
  font-weight: 400;
  font-style: normal;
  margin:0 auto;   
}


#wrapper{
  width: 100%;
  margin: 0;
  background: #F6F5EA;

}

/********************ファーストビューTOP*********************/
.first-view1 {
  width: 100%;
  /* 画面高, 画面幅から算出した16:9, 1080px上限 の中で一番小さい高さ */
  /* height: min(100dvh, calc(100vw * 9 / 16), 1080px); */
  /* height: 100vh; */
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0; /* 念のため余白ゼロ */
}

.first-view1 .bx-wrapper,
.first-view1 .bx-viewport,
.first-view1 .slider {
  /* height: 100% !important; */
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background-color: #F6F5EA;
}


/********************ファーストビュー下層*********************/
.first-view{position:relative; overflow:hidden; }
.first-view img{
  position:absolute; inset:0;
  /* width:100%; */
  aspect-ratio:1920/1080 ;
  /* object-fit:cover;               余白なし＝どこかは切れる */
  /* object-position:50% 50%;        /* 見せたい焦点を中央に */
} */
/**************相撲ボタン共通***************/
.botan {
  display: inline-block;
  transition: transform 0.3s ease;
  cursor: pointer;
}

.botan:hover {
  transform: scale(1.05); /* 拡大して浮く感じに */
}


/********************真ん中共通スクロール非表示****************************/
main {
  height:100vh;
  flex: 1 1 clamp(520px, 52vw, 796px);  /* 中央は少しだけ調整 */
  min-width: 520px;
  overflow-y:auto;
  overflow-x:hidden;
  margin:0;

}

main::-webkit-scrollbar {
  display: none;                /* Chrome, Safari */
}

main.main-locked { overflow-y: hidden !important; }

/*****************ヘッダー******************/
.oowaku {
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap: clamp(15px, 1.5vw, 15px);   /* 画面幅に応じて12〜24pxの隙間 */ ;
  width: 100%;
  margin: 0 auto;
}
nav
{
  padding-top: 70px;
  padding-left: 25px;
}

nav, .slicer{
 flex: 0 0 clamp(300px, 10vh,300px);
}

.nav_1 img {
  transition: transform 0.4s ease, opacity 0.3s ease;
  cursor: pointer;
}

.nav_1 img:hover {
  transform: scale(1.08) rotate(-2deg); /* 少し拡大＆回転 */
  opacity: 0.95;                        /* 少し透かす（任意） */
}

.nav-item {
 width: 100px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center; /* 中央揃え */
}

.nav-item img {
  display: block;
  margin: 0 auto;
  width: 100px; /* 必要に応じて調整 */
  height: auto;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-item img:hover {
  transform: scale(1.05); /* ホバー時に10%拡大 */
}

.nav-item h5 {
  margin-top: 20px;
  font-weight: normal;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap; /* ← 改行させない */
  overflow: hidden;     /* はみ出し防止（必要なら） */
  text-overflow: ellipsis; /* はみ出したとき省略記号（必要なら） */
 
}

.nabizenbu
{display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-top: 30px;
}

.nav_1, .nav_2, .nav_3
{
  margin-top: 20px;
   display: flex;
 justify-content: center;
  gap: 20px; /* 各nav-itemの間にスペース */
}

.mero
{
  margin-top: 15px;
}

.nav_annai {
  text-align: center;
  margin-top: 30px;
}

.nav_annai h2 {
  display: inline-block;
  background-color: #FFA500; /* オレンジ色 */
  color: #1A1A40; /* 濃紺の文字色 */
  padding: 12px 20px;
  border: 3px solid #1A1A40;
  border-radius: 16px;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  margin: 0 auto;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.nav_annai h2:hover {
  opacity: 0.85;
  transform: scale(1.05);
}
/*****************右画像スライド*********************/
.slicer {
max-width: 100%;
  position: sticky;
  top: 0;
  height: 100vh;
}

.slicer,
.top_1,
nav {
  flex-shrink: 0;
}

.slicer img {
 position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation-duration: 32s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out; /* ← やさしい切り替え */
}
.img1{animation-name: fade1;}
.img2{animation-name: fade2;}
.img3{animation-name: fade3;}
.img4{animation-name: fade4;}
.img5{animation-name: fade5;}

@keyframes fade1 {
  0%   { opacity: 1; }
  20%  { opacity: 1; }
  25%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes fade2 {
  0%   { opacity: 0; }
  25%  { opacity: 0; }
  30%  { opacity: 1; }
  50%  { opacity: 1; }
  55%  { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes fade3 {
  0%   { opacity: 0; }
  50%  { opacity: 0; }
  55%  { opacity: 1; }
  75%  { opacity: 1; }
  80%  { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes fade4 {
  0%   { opacity: 0; }
  75%  { opacity: 0; }
  80%  { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes fade5 {
  0%   { opacity: 0; }
  95%  { opacity: 0; }
  100% { opacity: 1; }
}


/********************真ん中セクション***********************/
.top_1
{
position: relative;
  width: 100%;
  max-width: 796px;
  margin: 0 auto;
  margin-top: 30px;
  height: 1000px;

}

.top_1_1
{
  display: flex;
  text-align: center;

}

.top_1 p
{
text-align: center;
margin-top: 50px;
}

.top_1_pudding {
   position:absolute;
  top: 10px;
  left: 610px;   /* 796pxキャンバス基準で固定 */
  width: 120px;
  z-index:2;
  animation: rotate-smooth 3s ease-in-out infinite;
  transform-origin:center;
  transform:none; /* translateXは不要 */
}

.top_1_oke
{
position:absolute;
  top: 250px;
  left: 80px;
  width: 120px;
  z-index:2;
  animation: rotate-sway 6s ease-in-out infinite;
  transform-origin:center;
 
}

.top_1_yokogao
{
position:absolute;
  top: 450px;
  left: 580px;
  width: 170px;
  z-index:2;
  transform:none;
}

.top_1_onsen
{
  position:absolute;
  top: 540px;
  left: 30px;
  width: 170px;
  z-index:2;
}

.top_1_meron
{
position:absolute;
  top: 440px;
  left: 240px;
  width: 170px;
  z-index:2;
  animation: float-updown 3s ease-in-out infinite;

}


.top_1_ahiru
{
position:absolute;
  top: 550px;
  left: 420px;
  width: 60px;
  z-index:2;
  animation: rotate-smooth 3s ease-in-out infinite;
  transform-origin:center;
  transform:none;
}

/***********回転桶**************/
@keyframes rotate-sway {
  0%, 70% { transform: rotate(0deg); }
  72% { transform: rotate(8deg); }
  74% { transform: rotate(-8deg); }
  76% { transform: rotate(5deg); }
  78% { transform: rotate(-5deg); }
  80%, 100% { transform: rotate(0deg); }
}

/***************浮遊メロンソーダ*****************/
@keyframes float-updown {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

/*************左右揺れる**プリンとアヒル******************/
@keyframes rotate-smooth {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(-6deg); }
  50%  { transform: rotate(6deg); }
  80%  { transform: rotate(-4deg); }
  100% { transform: rotate(0deg); }
}

/*****************おすもうボタン*************************/
.top_1botan {
  display: flex;
  flex-direction: column;
  align-items: center;     /* 中央揃え */
  justify-content: center; /* 上下中央配置（高さがある場合） */
  margin-top: 180px;  
}

.top_1botan p {
  padding-left: 5px;
  margin-bottom: 10px;     /* テキストと画像の間の余白 */
  text-align: center;
}

.top_1botan img {
  border-radius: 50%; /* 完全な円に */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); /* ふんわり丸い影 */
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
  cursor: pointer;
  opacity: 0.95; /* 少し透け感を出す */
  display: block;
  margin: 0 auto; 
}

.top_1botan img:hover {
  transform: scale(1.05); /* 拡大して浮く感じに */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); /* ホバーで影を強調 */
  opacity: 1;
}

/***********************オレンジやじるし******************************/
.yazirusi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 70px;
}

.yazirusi img {
  width: 15px;
  opacity: 0;
  transform: translateY(20px);
  animation-name: fadeInUpLoop;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards; /* アニメーション終了後も最後の状態を保持 */
}

/* 時間差で表示されるようにアニメーション遅延 */
.yazirusi1 {
  animation-delay: 0s;
}
.yazirusi2 {
  animation-delay: 0.3s;
}
.yazirusi3 {
  animation-delay: 0.6s;
}

@keyframes fadeInUpLoop {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  30% {
    opacity: 1;
    transform: translateY(0);
  }
  70% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(10px);
  }
}

/*******************銭湯&喫茶紹介*********************/
.top_2
{
  margin-top: 110px;
}

.top_2 p
{
  text-align: center;
margin-top: 25px;
}

.top_2 h2
{
  text-align: center;
  margin-top: 10px;
}
.top_2 img , .top_2_2_img{
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;
  z-index: 1; 
}

.top_2_1 img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  box-shadow: 9px 9px 0 #FF6700;
}

.top_2_1
{
   position: relative;
   z-index: 0;
}

.top_2_1 h1
{
  color: #FF6700;
  position: absolute;
    text-shadow: none; /* ふちを削除 */
}

.top_2_1_h1
{
left: 120px;       /* 13% → 固定値 */
  top: -20px;         /* 0%  → 固定値 */
  background-color: white;
  padding: 0 15px;
}

.top_2_1_h1_1
{
 font-size: 20px;
  writing-mode: vertical-rl;
  text-orientation: upright;
  background-color: white;
  left: 120px;       /* 13% → 固定値 */
  top: 95px;        /* 19% → 固定値 */
  padding: 10px;
}

.top_2_img
{
  margin-top: 20px;
}

.top_2waku
{
  border: 3px solid #FF6700;
  border-radius: 3px; 
  width: 350px;
  height: 180px;
  margin: 0 auto;
  text-align: center;   
  margin-top: 30px;
}
/***************喫茶店***************/
.top_2_2
{
  margin-top: 90px;
  position: relative;
   z-index: 0;
}

.top_2_2 h1
{
  color: #0D6AFF;
  position: absolute;
  text-shadow: none; /* ふちを削除 */
}

.top_2_2_h1
{
  right: 120px;      /* 13% → 固定値 */
  bottom: 180px;        /* 60% → 固定値 */
  background-color: white;
  padding: 0 15px;
}

.top_2_2_h1_2 {
font-size: 20px;
  writing-mode: vertical-rl;
  text-orientation: upright;
  background-color: white;
  right: 120px;      /* 13% → 固定値 */
  bottom: 295px;     /* 40% → 固定値 */
  padding: 10px;
}

.top_2_2_img
{
display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  box-shadow: -9px -9px 0 #0D6AFF;  /* ← 左上に6pxずらしてぼかしなし */  
}

.top_2_2_img2
{
  display: block;
  margin: 15px auto 0 auto;
  max-width: 100%;
  height: auto;
 
}

.hover-img {
  transition: transform 0.5s ease, box-shadow 0.5s ease;
  cursor: pointer;
}

/****************喫茶銭湯共通マウスホバー*******************/

/* 銭湯 → 左に傾けて拡大 */
.sento-img:hover {
  transform: scale(1.05) rotate(-1deg);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* 喫茶 → 右に傾けて拡大 */
.kissa-img:hover {
  transform: scale(1.05) rotate(1deg);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/***************水玉***************/
.dot-bg {
  position: absolute;
  width: 350px;
  height: 350px;
  background-size: 10px 10px;
  z-index: 0;
  pointer-events: none;
}
.dot1 {
  background-image: radial-gradient(#FF6700 1px, transparent 1px);
  top: -60px;
  left: 10px;
}
.dot2 {
  background-image: radial-gradient(#0D6AFF 1px, transparent 1px);
  bottom: 130px;
  right: 0;
}

/****************************オリジナルグッズ&お店の場所&まち巡り共通*****************************/
.top_3, .top_4, .top_5
{
  margin-top: 50px; 
}

.top_3 h1, .top_3 p ,.top_4 h1, .top_4 p ,.top_5 h1, .top_5 p
{
    text-align: center;
    margin-bottom: 20px;
}
/******************************グッズ**************************/
.botan1
{
width: 150px;
display: block;
  margin: 0 auto;

}
/******************マグニフィックポップアップ**********************/
.top_3_img{margin-bottom: 50px;}
.mfp-bg {background:rgba(139,148,67,0.85)!important;}
.mfp-inline-holder .mfp-content {max-width:90%!important;}
.popup-content {text-align:center;color:#fff;padding:20px;}
.popup-content img {display:block;margin:0 auto 15px;width:auto;max-width:100%;height:auto;}
.popup-content h2,.popup-content p {color:#fff;text-align:center;}
.popup-content p {line-height:1.6;margin-top: 20px;}
.mfp-close {position:absolute!important;top:10px!important;right:20px!important;color:#fff!important;font-size:28px!important;line-height:1!important;opacity:1!important;text-shadow:none!important;background:none!important;z-index:10002!important;cursor:pointer;}
.mfp-close:hover {color:#ff0000!important;}
.mfp-fade.mfp-bg,.mfp-fade.mfp-wrap .mfp-content {opacity: 0;transform: scale(0.95);transition: all 0.5s ease-out;}
.mfp-fade.mfp-bg.mfp-ready,.mfp-fade.mfp-wrap.mfp-ready .mfp-content {opacity: 1;transform: scale(1);}
/********************************お店の場所**********************************/
.top_4 {
  position: relative;
  background-color: #F6F5EA;
  background-image: url("../img/若者ラインアート3 1.png");
  background-repeat: no-repeat;
  background-position: center 190px;     /* セクションの中央（横）・上（縦）に配置 */
  background-size: 560px auto;         /* 幅300px（必要に応じて調整） */
}

.top_4_img {
  display: block;
  margin: 120px auto;
  width: 68%;
  height: auto;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  cursor: pointer;
}

.top_4_img:hover {
  transform: scale(1.15) rotate(-1deg);  /* 15%拡大 + 少しだけ回転 */
}

.top_4 .yazirusi
{
  padding-top: 20px;
}

/********************************まち巡り**********************************/
.top_5 {
  position: relative;
  padding:  20px;
  overflow: hidden;
  text-align: center;
  background-color: #F6F5EA;
}

.top_5_bg {
  position: absolute;
  top: 100px;     /* ← 数値で調整可能 */
  left: 0;
  width: 100%;
  height: auto;
  z-index: 0;
  pointer-events: none;
}

.top_5_content {
  position: relative;
  z-index: 1;
}

.top_5_img_wrapper {
  display: flex;
  justify-content: center;
  gap: 40px; /* 画像の間隔（調整可） */
  margin-top: 30px;
  flex-wrap: wrap; /* レスポンシブ用に折り返し可 */
}

/* アニメーション */
.top_5_img {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  max-width: 300px;
  height: auto;
  cursor: pointer;
}

.top_5_img:hover {
  transform: scale(1.05);
}
.top_5_img:first-of-type:hover {
  transform: scale(1.05) translateX(-8px);
}
.top_5_img:last-of-type:hover {
  transform: scale(1.05) translateX(8px);
}
/*********************************フッダー***************************************/
footer {
  display: flex;
  flex-direction: column;     /* 縦並び */
  align-items: center;        /* 横方向の中央揃え */
  justify-content: center;    /* 縦方向の中央揃え（高さがあるとき） */
  text-align: center;
  padding: 40px 20px;
 
  height: 400px;              /* 必要に応じて調整可能 */
  margin-top: 150px;
}

footer h1 {
  font-size: 30px;
  margin: 10px 0;
}

.footer_1
{
  display: flex;
}

.footer_3 {
  display: flex;
  gap: 20px;       /* 横並びの間隔 */
}

.footer_1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px; /* テキストと画像の間隔 */
  padding: 20px 0;
}

.footer-title {
  font-size: 2rem;
  white-space: nowrap; /* 改行防止で中央に収まるように */
  margin: 0; /* デフォルトの余白をリセット（必要なら） */
}

.tape {
  width: 200px; /* 実画像サイズに合わせて調整してOK */
  height: auto;
  object-fit: contain;
  display: block;
}

.sns
{
  display: flex;
}

.sns img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.sns img:hover {
  transform: scale(1.2) translateY(-5px); /* 少し拡大＆上に浮かせる */

}

footer p
{
  margin-top: 5px;
}

a {
  text-decoration: none;
}

/******************プライバシーポリシー*******************/
.privacy_main{
  width: 100%;
  height: auto;
}

.privacy_main,
.privacy_footer {
  max-width: 796px;
  margin: 0 auto;
}

.privacy_h1
{
display: block;
  margin: 0 auto;
  width: fit-content; 
}

.privacy_honbun
{
  margin-top: 100px;
}

/*************************下層ページ右固定*************************/
.privacy {
  max-width: 690px;          /* 幅を750pxに設定 */
  margin: 0 auto;        /* 中央に配置 */
  padding: 20px;         /* 内側に少し余白を追加（必要に応じて調整） */
  margin-top: 50px;
}

.privacy h1 {
  font-size: 75px;       /* h1の文字サイズ */
  font-family: "Kaisei Decol", serif;
  font-weight: 400;
  color: #FCFC00;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; /* テキストシャドウ */
  margin-bottom: 20px;   /* 下に余白 */
}

.privacy p {
  font-size: 15px;
  font-family: "Kiwi Maru", serif;
  color: #34312F;
  margin-bottom: 20px;   /* 下に余白 */
}

.privacy ul {
  list-style-type: none; /* リストのデフォルトの番号や点を消す */
  padding-left: 0;       /* 左側の余白をなくす */
}

.privacy li {
  font-size: 20px;
  font-family: "Kiwi Maru", serif;
  color: #34312F;
  margin-bottom: 15px;   /* 各リスト項目に下の余白 */
}

.privacy strong {
  font-weight: bold;     /* 強調したい部分を太字に */
}


/*************************メロツキについて*************************/
.about_box1{
  background-image: url("../img/Group 422.png");
  background-repeat: no-repeat;
  background-size: 796px auto;
 margin-top: 70px;
  /* height: 650px; */
/* max-width: 100%; */
  display: flex;
  flex-direction: column;
  align-items: center; */
}

/* .about_img1
{
  max-width: 100%;
} */

.about_text1{padding-top: 80px;}

.about_box6 .goods-swiper .swiper-slide {
  width:  200px; /* 固定サイズで負荷減 */
  /* margin-top: 380px; */


}

/*************************メイン真ん中*************************/


.about_box2{                 /* セクション自体は全幅 */
 max-width: 100%;
  max-width: none;
  margin-bottom: 150px;
  text-align: center ; 
}

.about_text1{               /* 中身の箱を中央に固定幅で */
  max-width: 900px;
  margin: 0 auto;
  width: 470px;
}

.about_text2
{
  width: 500px;
  padding-top: 30px;
}

.about_box2 h2,
.about_box2 h3{
  margin: 0 0 50px 0 !important;   /* 左余白の競合を打ち消す */
  text-align: center !important;
}

.about_text1 p{
  margin: 0 auto !important;
  line-height: 30px;
  max-width: 800px;
  text-align: center !important;   /* 全部中央でOKならこれも */
}

.about_text2
{padding-right: 20px;}

.about_box3{
  display: flex;
margin: 0 auto;
padding-top: 80px;
}
.about_box3 h3{
  padding:  0 0 20px 30px;
}
.about_box3 p{
 padding-left: 30px;
  line-height: 30px
}
.about_box4 h2{
  margin-left: 130px;
}

.about_box4{
  width: 100%; max-width: 800px; margin: 0 auto 120px;
  background: url("../img/Group 421.png") no-repeat center top /
              clamp(520px, 74vw, 796px) auto;
  min-height: clamp(420px, 60vw, 800px);
  position: relative;
  margin-top: 50px;
}
.about_text3{
 width: min(100%, 800px); margin: 0 auto; text-align: center;
  padding-top: clamp(200px, 32vw, 350px);
}

/* --------------------------------------------------------------
     　　　　　　　　喫茶ページ
----------------------------------------------------------- */

/* ここはセレクタを修正（全てのpに当たっていた） */
.mero_b01 h1, .mero_b01 p { text-align: center; }

.mero_b01{margin-bottom: 100px;}




.mero_b02{margin:80px 0 40px 0 ;}

.mero_b03{
  width: 796px;
  margin: 0 auto 80px;
  text-align: center;
}


/* 画像は中央に */
.mero_img01{ margin: 40px 0 0; }

.mero_img01 img{ display:block; margin:0 auto; height:auto; }
.mero_img01 img{
  display: block;
  margin: 0 auto;        /* 画像を中央に */
  height: auto;
}


/* タイトル */
.mero_text01{
  color:#34312f; font-size:35px; font-family:"Kaisei Decol",serif;
  font-weight:400; text-shadow:none; text-align:center;
  margin:30px 0 20px;
}

/* この指定は効かないので削除か、pをflexにしないなら不要
.mero_b03 p{ justify-content: center; }
*/
/* －－－－－－－－－－－－－メロネードスライド---------------- */
.marquee{overflow:hidden;white-space:nowrap;margin-top: 40px;}
.marquee div{display:inline-block;animation:marquee 6s linear infinite;}
.marquee img{height:85px;display:inline-block}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-640px); } /* 画像1セット分の横幅 */
}



/* 説明と価格に同じ箱幅を与えて中央に置く */
.mero_menu,
.mero_price{
  max-width: 640px;      /* 説明文エリアの幅を統一 */
  margin: 8px auto 0;    /* 箱自体を中央に */
}

.mero_menu{
  text-align: center;
  line-height: 1.9;
}
.mero_price{
  text-align: right;
  font-weight: 600;
}



/* メニュー文字 */
.mero_menu_drink{text-align: center;
  margin: 100px 0 50px 0;}


.mero_karadiv{height: 200px;}





/* ----------------------------------------------------------
   温泉ページ 共通リセット
---------------------------------------------------------- */
html, body { margin: 0; padding: 0; }
* { box-sizing: border-box; }

/* 必要な画像だけ block + 中央寄せ */
.sentou_jog02 img,
.sentou_jog03 img,
.sentou_jou_img01 img {
  display: block;
  margin: 0 auto;
}

/* ----------------------------------------------------------
   ヒーロー付近（既存）
---------------------------------------------------------- */
/* .sentou_b01 { background-color: aquamarine; } */
.sentou_rogo01 { text-align: center; margin-top: 60px; }
.sentou_b01 h1 {
  color: #34312f;
  font-size: 35px;
  font-family: "Kaisei Decol", serif;
  font-weight: 400;
  font-style: normal;
  text-shadow: none;
  position: relative;
}
.sentou_top { text-align: center;margin-top: 60px;margin-right: 70px;margin-bottom: 30px;}
.sentou_top02 { text-align: center; margin-left: 170px;margin-bottom: 50px;}

.sentou_img01 {
  position: relative;
  width: fit-content;
  margin: 0 auto;
  background-image: url(../img/sentou_02sannkaku_moyou.png);
  background-size: 100%;
  background-repeat: no-repeat;
  margin-bottom: 70px;
}
.sentou_photo_square img { display: block; width: 100%; height: auto; }
.sentoubutton_tape {
  position: absolute;
  top: -2%;
  left: -4.5%;
  transform: translateX(-50%);
  width: 119%;
  z-index: 2;
  pointer-events: none;
}
.sentoubutton_tape, .sentou_photo_square {
  animation: sway 4s ease-in-out infinite;
  transform-origin: center center;
}
@keyframes sway {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(-2deg); }
  40% { transform: rotate(2deg); }
  60% { transform: rotate(-1.5deg); }
  80% { transform: rotate(1deg); }
  100% { transform: rotate(0deg); }
}

/* ----------------------------------------------------------
   れきし（既存）
---------------------------------------------------------- */
.sentou_center_wrap {
 display: flex;
  align-items: center;
  gap: 30px;
  /* width: fit-content;*/
  max-width: 100%;       /*中身の幅にだけ縮む */
  max-height: 100%;
  margin: 0 auto ;       /* ← ブロック自体を中央配置 */
}
.sentou_rekishib01 {
  display: flex;
  flex-direction: column; /* 縦並びにする */
  align-items: center;     /* 横方向を中央寄せ */
  text-align: center;      /* テキスト中央寄せ */
  margin: 0 auto 100px auto;
}
.sentou_b02 {
width: 792px; height: 650px;
  background-color: #FF6700;
  margin-top: 200px auto 0;
  padding: 50px;
  text-align: center;
 
}

.sentou_b02 > p,
.sentou_b02 > h1.sentou_b05 {
  text-align: center;
  max-width: 570px;   /* 読みやすい行幅に */
  margin: 0 auto;     /* ボックス自体を中央 */
}
.sentou_b04 { 
  display: flex;
  align-items: center;
  gap: 30px;
  width: fit-content;
  margin: 0 auto 30px;   /* 行ブロック自体は中央に配置 */
}
.sentou_b03 { width: 240px; height: 188px; margin: 30px 0 0 30px; }
.sentou_b03, .sentou_b02 h1 {
  color: #ffffff;
  font-size: 30px;
  font-family: "Kaisei Decol", serif;
  font-weight: 400;
  font-style: normal;
  text-shadow: none;
  position: relative;
}
.sentou_b02 p { color: #ffffff; }
.sentou_b05 { margin: 20px 0; }
.sentou_tape { margin: 70px 0 100px 0; text-align: center;}
.sentou_rekishib01 { display: flex; margin: 0 0 100px 30px; }
.sentou_rekishib01 h1 {
  color: #FCFC00;
  font-size: 30px;
  font-family: "Kaisei Decol", serif;
  font-weight: 400;
  margin: 0 auto;
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
  padding-top: 20px;
}
.sentou_text01 { width: 230px; margin: 20px 0 0 20px; }
.sentou_b06, .sentou_b07 {
  margin: 10px 0 0 0; /* 上だけ少し空ける */
  padding: 0;
  text-align: center;
}
.sentou_row {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin: 0 auto 60px;
  text-align: center;
  max-width: 100%;
}
.sentou_row.single { justify-content: center; }

.sentou_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
}
.sentou_item img {

  height: auto;
  margin-bottom: 10px;
}
.sentou_row h1 {
  color: #FCFC00;
  font-size: 30px;
  font-family: "Kaisei Decol", serif;
  font-weight: 400;
  margin: 6px 0 4px;
  text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
}
.sentou_text01 {
  margin-top: 10px;
  width: 270px;
}

/* ----------------------------------------------------------
   ジョグせん（上：黄色セクション）
   ※ CSS変数で舞台幅・相撲さん幅を管理
---------------------------------------------------------- */
.sentou_jog01,
.sentou_jog04,
.sentou_b08 {
  margin-left: auto;
  margin-right: auto;
  background-repeat: no-repeat;
  background-position: center;
}

.sentou_b08
{
  margin-top: 70px;
}


/* 舞台（黄色） */
.sentou_jog01 {
  --stage-w: 796px;              /* ← 舞台（親）の幅をここで管理 */
  background-image: url(../img/Group\ 483.png);
max-width: 100%;
  height: 430px;
  position: relative;
  overflow: hidden;
}

/* 走るお相撲さん */
.sentou_runner {
  --runner-w: 200px;             /* ← 相撲さん画像の幅をここで管理 */
  position: absolute;
  top: 150px;
  left: calc(-1 * var(--runner-w));      /* 左外から開始 */
  animation: run-across 4s linear infinite;
  z-index: 2;                          /* 波より前に */
}
.sentou_runner img {
  animation: sway 4s ease-in-out infinite;
  transform-origin: center center;
}

/* 波：下端に固定＋ゆらゆら */
.sentou_jog03 {
  position: absolute;
  bottom: 0; 
  padding-left: 20px;
  max-width: 100%;
  text-align: center;
  z-index: 1;
}
.sentou_jog03 img {
  display: block;
  margin: 0 auto;
  animation: sway 4s ease-in-out infinite;
  transform-origin: center center;
}

/* 左→右に走り抜けてからフェードアウト（途中で消えない） */
@keyframes run-across {
  0%   { transform: translateX(0);                                        opacity: 0; }
  10%  {                                                                   opacity: 1; }
  90%  { transform: translateX(calc(var(--stage-w) + var(--runner-w)));   opacity: 1; }
  100% { transform: translateX(calc(var(--stage-w) + var(--runner-w)));   opacity: 0; }
}

/* ----------------------------------------------------------
   ジョグせん（中央：説明セクション）
---------------------------------------------------------- */
.sentou_jog04
{
  margin-top: 30px;
}

.sentou_jog04 h1,
.sentou_jog04 h3,
.sentou_jog04 p,
.sentou_jog04 .sentou_jou_img01,
.sentou_jog04 .sentou_jog_button01 {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.sentou_jog04_text01,
.sentou_jog04_text02,
.sentou_jog04_text04,
.sentou_jog04text03 { margin: 0; }

.sentou_jog04_text01 {
  color: #34312f;
  font-size: 25px;
  font-family: "Kaisei Decol", serif;
  font-weight: 400;
  padding: 0 0 15px;          /* 先頭は上0に */
}
.sentou_jog04_text02 {
  color: #34312f;
  font-size: 20px;
  font-family: "Kaisei Decol", serif;
  font-weight: 400;
  margin-top: 6px;
}
.sentou_jog04text03 {
  color: #34312f;
  font-size: 15px;
  font-family: "Kaisei Decol", serif;
  font-weight: 400;
  line-height: 1.9;
}
.sentou_jog04_text04 {
  color: #34312f;
  font-size: 25px;
  font-family: "Kaisei Decol", serif;
  font-weight: 400;
  padding: 30px 0;
}
.sentou_jou_img01 { padding: 30px 0 0; }

/* h1のギザつき対策（影・ストロークを無効化） */
.sentou_jog04 h1,
.sentou_jog04_text02 {
  text-shadow: none !important;
  filter: none !important;
  -webkit-text-stroke: 0 !important;
}


/* ----------------------------------------------------------
   ジョグせん（下：三角背景＋丸ボタン中央）
---------------------------------------------------------- */



/***********************************アクセス******************************/
.access {
position: relative;
  max-width: 100%;
  margin: 0 auto;
  padding: 50px 0;
  text-align: center;
  margin-top: 50px;
  z-index: 0
}

.access_haikei {
  position: absolute;
  inset: 0; /* top: 0; right: 0; bottom: 0; left: 0 全部埋める */
  max-width: 100%;
  height: 100%;
  object-fit: cover; /* セクション全体に広げる */
  z-index: -1;        /* 背面に送る */
  pointer-events: none;
  opacity: 0.5;        /* お好みで */
}

.access h2 {
  font-family: "Kaisei Decol", serif;
  margin-top: 20px;
  margin-bottom: 10px;
  text-align: center;
}

.access_syousai {
  display: block;
  width: fit-content;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

.access_syousai p {
  margin-bottom: 10px;
}

.access_mero
{
  margin-top: 30px;
  margin-bottom: 50px;
  position: relative;
}

.wakamono
{
  margin-top: 100px;
  width: 250px;
}

/************************ご利用ガイド*************************/
.guide {background-image: url('../img/waku796.png');
  background-size: 580px;
  background-repeat: no-repeat;
  background-position: center;

  display: flex;
  justify-content: center;
  align-items: center;  /* 縦方向の中央揃えが必要な場合 */
  flex-direction: column;  /* 子要素を縦に並べる */
height: 1050px;
}

.guide * {
  font-family: "Kaisei Decol", serif !important;
  color: #000;
  text-shadow: none; /* ふちを削除 */
}

.guide_top
{
  margin-top:50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}
.guide_top h1 {
  margin-bottom: -0.3em; 
}

.guide_top2 {
  display: flex;
  justify-content: center;
  gap: 40px;
  padding: 20px 0;
}

.guide_ryoukin {
  margin-top: 50px;
  width: 200px;
  text-align: center;
  background-color: #FFA500;
  padding: 10px;
  box-sizing: border-box;
}

.guide_ryoukin h2,
.guide_ryoukin p {
  text-align: center;
  margin: 0.3em 0;
}

.guide_taoru
{
  margin-top: 20px;
  border: solid #FFA500;
  border-width: 3px;
  padding: 20px;
  margin-bottom: 20px;
}

.guide_item {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3列を均等幅で */
  gap: 20px 40px;                          /* 縦横の余白 */
  max-width: 600px;
  text-align: center;
  margin-top: 20px;
}

.guide_2
{
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

/********************入浴ルール****************************/
.guide_2 {
  text-align: center;
  display: flex;
  flex-direction: column;  /* h2とulを縦に並べる */
  align-items: center;     /* 中央寄せ */

  border: 3px solid #FFA500;  /* オレンジの線 */
  border-radius: 20px;         /* 角丸でかわいく */
  padding: 40px 20px;          /* 内側の余白 */
  max-width: 680px;            /* セクション全体の最大幅 */
  margin: 150px auto;           /* 上下余白＋中央寄せ */
}

.guide_2 h2
{
  font-size: 35px;
}

.guide_item2 {
  font-family: "Kiwi Maru", serif;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);  /* 2列 */
  gap: 30px 60px;
  max-width: 760px;
  padding: 0;
  margin: 40px auto 0;
  text-align: left;
}

.guide_item2 li {
  line-height: 1.8;
}

.guide_2_ahiru
{
  display: block;
  margin-left: auto;   /* 右寄せ */
  margin-right: 10px;  /* 必要なら調整 */
  width: 180px;        /* 適度なサイズに調整 */
  animation: yureru 2s ease-in-out infinite;
}

@keyframes yureru {
  0% { transform: translateX(0); }
  50% { transform: translateX(10px); }
  100% { transform: translateX(0); }
}

/**********************ジョグ銭***********************/
.guide_3 {
 position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 60px;
  overflow: hidden; /* アニメーションがセクション内に収まる */

}

.guide_3 img {
  height: 100px;              /* 画像サイズ調整（任意） */
  margin-bottom: 20px;       /* 画像と文字の間隔 */
}

.guide_3 h2 {
  margin: 0;
  font-size: 20px;           /* 任意で調整 */
}

.guide_3_text {
  max-width: 760px;
  margin: 40px auto 0;
  text-align: center;
  line-height: 2;
  margin-bottom: 90px;
}

.guide_3_text p {
  margin-bottom: 20px;
}

.guide_3_text h3 {
  margin-top: 30px;
  font-size: 20px;
  font-weight: bold;
}

/*******************アヒルアニメーション**********************/
.ahiru_wrap{
  position:absolute; bottom:0; left:0;
 max-width:100%; height:100px;
  pointer-events:none;
  overflow:hidden; /* はみ出し隠す */
}

.ahiru{
  position:absolute;
  right:-200px;
  width:130px;
  display:block;
  animation: moveLeft 11s linear infinite;
}

/* 2枚目＝相撲さんを遅らせる＆開始までは非表示 */
.ahiru_wrap .ahiru:last-child{
  animation-delay: 3S; /* 好みで調整 */
  opacity: 0;
}

@keyframes moveLeft{
  0%   { transform: translateX(0);       opacity:1; }
  90%  {                                  opacity:1; }
  100% { transform: translateX(-110vw);  opacity:0; }
}
/**************メニュースライド*********************/
.goods-swiper {
  width: 100%;
  overflow: hidden;
}
.goods-swiper .swiper-wrapper {
  transition-timing-function: linear !important;
}
.goods-swiper .swiper-slide {
  width: 300px;          /* 1枚のサイズ */
  aspect-ratio: 1 / 1;   /* 正方形にする */
}
.goods-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
}

/*******************オリジナルグッズ****************/
.marquee{overflow:hidden;white-space:nowrap;margin-top: 40px;}
.marquee div{display:inline-block;animation:marquee 6s linear infinite;}
.marquee img{height:85px;display:inline-block}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-640px); } /* 画像1セット分の横幅 */
}

.item_tsyatu_syouhin{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px 60px;
  align-items:center;
  justify-items:center;
  margin-top:50px;
  margin-bottom: 35px;
}

.item_tsyatu,.item_socks,.item_bag,.item_etc{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
}

.item_tsyatu_top{width:350px;height:auto;}
.item_imgsmall{width:290px;height:auto;display:block;margin:0 auto;}

.item_tsyatu_setumei{max-width:320px;padding-top:0;text-align:center;}
.item_tsyatu_setumei p{line-height:1.6;margin:0 auto;}

.item_card{text-align:center;}
.item_card h1,.item_card p,.item_card h3{width:290px;margin:10px auto 0;line-height:1.6;text-align:center;}
.item h1{color: #34312F;font-size: 30px;font-family: "Kiwi Maru", serif;font-weight: 400;text-shadow:none}



/**********************レスポンシブ************************/

:root{--mnav-h:56px}
html{scroll-behavior:smooth}
.m-nav{display:none}
.jump{scroll-margin-top:calc(var(--mnav-h)+8px)}

/* <=960px */
@media (max-width:960px){
  
  .access_gaikan{width: 450px;margin: 0 auto;}

  .sentou_photo_square{max-width: 100%;}
  .sentou_b08{background-size: 100%;}
  .sentou_jog01{background-size: 100%;}
  .sentou_runner{width: 180px;}
  .sentou_jog03{padding-bottom: 90px; padding-right: 25px;}
  .sentou_b02{max-width: 100%;height: 780px;width: 600px;}
  .sentou_row {flex-direction: column; text-align: center;max-width: 100%;}
  

  .about_img1{max-width: 90%;}
  .about_box1{background-size: 100%;}
  .about_text1{width: 350px;}
  .about_text2{text-align: center; max-width: 100%;}
  .about_text2 h3{ margin-bottom: 10px; margin-top: 20px;}
  .about_text2 {width: 380px; margin: 0 auto;margin-bottom: 20px;}
  .about_box3{flex-direction: column;text-align: center;}
  /* .about_box6{padding-bottom: 100px;} */
  .about_box4{background-size: 100%;}
  /* .about_text3{width: 100%;} */
  .about_text3 h2{max-width: 100%;font-size: 20px;}

  .mero_b03{max-width: 100%;}

  .guide{background-size: 100%;}

  .item_tsyatu_setumei{margin: 0 auto;}
  .item_tsyatu,.item_socks,.item_bag,.item_etc{display: table-column;}
  .item_tsyatu_syouhin { grid-template-columns: 1fr;}

  .first-view,.first-view1{margin-top: 300px;}
  .oowaku>nav,.slicer{background: rgba(255,255,255,0.9);}
  main{height:auto!important;min-width:0!important;overflow:visible!important}

  .m-nav{
    display:flex;position:fixed;inset:0 0 auto 0;height:var(--mnav-h);
    gap:.5rem;align-items:center;padding:0 .75rem;overflow-x:auto;white-space:nowrap;
    background:rgba(255,255,255,.9);backdrop-filter:blur(6px);border-bottom:1px solid #eee;z-index:9999;
  }
  .m-nav a{display:inline-block;padding:.4rem .7rem;border:1px solid #ddd;border-radius:999px;font:12px "Kiwi Maru",serif;color:#34312F;text-decoration:none}
  /* body{padding-top:var(--mnav-h)} */
  /* top_1 */
  .top_1{position:relative;min-height:calc(100vw*1.256);padding:24px 16px 40px}
  .top_1 h1{font-size:clamp(28px,8vw,44px);text-align:center}
  .top_1 p{font-size:14px;line-height:1.8;padding:0 8px}
  .top_1_pudding,.top_1_oke,.top_1_yokogao,.top_1_onsen,.top_1_meron,.top_1_ahiru{position:absolute;z-index:1}
  .top_1_pudding{top:1%; left:76.6%; width:18%}
  .top_1_oke    {top:16%;left:9%;   width:18%}
  .top_1_yokogao{top:40%;left:72.9%; width:23%}
  .top_1_onsen  {top:50%;left:3.8%;  width:23%}
  .top_1_meron  {top:40%;left:30.2%; width:25%}
  .top_1_ahiru  {top:50%;left:52.8%; width:10%}

  /* top_2 */
  .top_2{margin-top:60px}
  .top_2_1,.top_2_2{position:relative;display:inline-block;width:100%;max-width:640px;margin:0 auto;padding:0 16px}
  .top_2_1 img,.top_2_2_img{display:block;width:min(92vw,640px);height:auto}
  .top_2_1_h1{left:1vw;top:-3.5vw}
  .top_2_1_h1_1{left:1vw;top:19vw;font-size:clamp(14px,4vw,18px)}
  .top_2_2_h1{right:1vw;bottom:37vw}
  .top_2_2_h1_2{right:1vw;bottom:60vw;font-size:clamp(14px,4vw,18px)}
  .dot-bg{width:40vw;height:40vw;z-index:0}
  .dot1{top:-7vw;left:-1vw}
  .dot2{bottom:30vw;right:-1vw}
  .top_2 .yazirusi{margin:70px 0}

  /* top_4 */
  .top_4{background-size:min(92vw,560px) auto;background-position:center min(25vw,190px)}
  .top_4_img{width:min(82vw,530px);height:auto;margin:clamp(85px,10vw,120px) auto}

  /* 見出し・フッター */
  h1{font-size:clamp(24px,8vw,75px)}
  footer h1{font-size:clamp(26px,3.1vw,30px)}
  .footer-title{font-size:clamp(28px,3.3vw,32px)}

  /* フッター画像 */
  .tape{width:clamp(150px,18vw,200px);height:auto}
  footer>img{width:min(40vw,380px);height:auto}
  .sns img{width:clamp(30px,8vw,48px);height:auto}
}

/* <=430px ちょい微調整 */
@media (max-width:430px){
  .top_1 h1{font-size:clamp(24px,9vw,36px)}
  .top_1_pudding,.top_1_oke,.top_1_yokogao,.top_1_onsen,.top_1_meron,.top_1_ahiru{width:40vw;max-width:110px}
  .top_1_oke{top:20%;left:10%;width:18%}
  .top_2_1_h1_1{top:14vw}
  .top_2_2_h1{bottom:24vw}
  .top_2_2_h1_2{bottom:40vw}
  .top_2waku{width:90%;padding:12px}
  .footer h1{font-size:24px}
  .footer-title{font-size:26px}
  .tape{width:clamp(120px,36vw,160px)}
  footer>img{width:min(33vw,360px)}
  .sns img{width:clamp(24px,5vw,40px)}
}

/* タッチ端末の自動ゆらぎ */
@media (max-width:960px) and (hover:none){
  .sento-img,.kissa-img{animation:float-updown 3s ease-in-out infinite}
}

:root { --mnav-h: 0px; } /* 高さは後ろのJSで実測して入れる */

@media (max-width:960px){
  .slicer { display:none !important; }
  .oowaku > nav { display:none !important; }

  /* 上固定ナビをGridで2列化 */
  .m-nav{
    position: fixed; top:0; left:0; right:0; z-index:1000;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* ← 2列 */
    gap: 8px 10px;                 /* 行/列の間隔 */
    justify-items: center;         /* 各セル内の横中央 */
    align-items: center;           /* 各セル内の縦中央 */
    padding: 8px 12px;
    box-sizing: border-box;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(0,0,0,.08);
    height: auto !important;
    white-space: normal !important; 
    overflow: visible !important;
  }

  /* ロゴは1行目で2列ぶち抜き＆中央 */
  .m-nav .m-nav__logo{
    grid-column: 1 / -1;          /* 1列目〜最終列まで */
    justify-self: center;
    padding: 0; border: 0; background: transparent;
  }


:root{ --mnav-h: 0px; } /* JSで実測値を入れる */

@media (max-width:960px){
  /* PC用UIは隠す */
  .oowaku > nav, .slicer { display:none !important; }

  /* 上部固定のモバイルナビ ＝ ロゴ1段＋ボタン3×2 */
  .m-nav{
    position: fixed; top:0; left:0; right:0; z-index:1000;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3列 */
    gap: 14px 16px;                                   /* 行/列のすき間 */
    padding: 12px 16px 14px;
    background: #f6f5ea;
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(0,0,0,.08);
    box-sizing: border-box;
  }
  /* ロゴは1行ぶち抜き＆中央 */
  .m-nav__logo{
    grid-column: 1 / -1;
    justify-self: center;
    align-self: center;
    padding:0; border:0; background:transparent;
  }
  .m-nav__logo img{ height:40px; width:auto; display:block; }

  /* 丸チップ */
  .m-nav a:not(.m-nav__logo){
    width: 100%;                             /* グリッドのセル幅いっぱいに */
    display: inline-flex; align-items:center; justify-content:center;
    padding: 12px 14px;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 999px;
    background:#ffffff;
    text-decoration:none; color:#34312F;
    font: 400 12px/1 "Kaisei Decol", serif;  /* 見た目を近づける */
    box-shadow: 0 2px 0 rgba(0,0,0,.06);
  }