@charset "UTF-8";

html {
    font-size: 100%;
}

body {
  background-color: #F7F3F0;
  color: #342A2A;
  min-height: 100vh;
  margin: 0;
  position: relative;
  font-family: "Playfair Display", sans-serif;
}

a {
  color: #342A2A;
  text-decoration: none;
  transition: all 0.5s ease;
  letter-spacing: 1.5px;
}

a:hover {
  opacity: 0.5;
}

img {
  width: 100%;
  vertical-align: bottom;
  object-fit: cover;
}

li {
  list-style: none;
}

p {
  font-size: 1rem;
  text-shadow: 
    1px 1px 2px rgba(52, 42, 42, 0.1), 
    0 0 5px rgba(255, 255, 255, 0.5);
}

.en {
  letter-spacing: 3px;
}

.wrapper {
  max-width: 1100px;
  margin: 50px auto;
  padding: 0 20px;
}

.mainvisual {
  height: calc(100vh - 5px);
  position: relative;
  margin-top: 30px;
}



.mainvisual img {
  height: 100%;
  display: block;
  object-position: center;
}

.page-title {
  position :absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-55%);
  width: 55%;
  padding: 8%;
  text-align: center;
  font-size: 2rem;
  background: rgba(252,242,242,0.8);
  color: #342A2A;
}

.mainvisual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events:  none;

  background: radial-gradient(
    ellipse at center,
    rgba(255,255,255,0) 55%,
    rgba(255,255,255,0.7) 80%,
    rgba(255,255,255,1) 100%
  );
}




.link-text {
  text-align: center;
}

.link-text a {
  text-decoration: none;
  color: #504545;
  border: 1px solid #504545;
  border-radius: 4px;
  padding: 10px 30px;
}

.link-text a:hover {
  opacity: 0.3;
}

/*header*/
header {
  width: 100%;
  height: 70px;
  background:#FFEED3;
  position:fixed;
  top:0;
  left:0;
  z-index: 40;
}

.header-inner {
  max-width: 1200px;
  margin: auto;
  height: 100%;
  display: flex;
  align-items: center;
}

.header-logo img {
  height: 70px;
  width: 200px;
}

nav {
  margin-left: auto;
  margin-right: 30px;
}

.nav-menu {
  display: flex;
  gap: 27px;
  margin-right: 30px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-menu a {
  text-decoration: none;
  color: #342A2A;
  font-size: 1rem;
  font-weight: bold;
}

/* dropdown */

.dropdown {
  position: relative;
}


/* dropdown本体 */

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -10px);
  background-color: #FFF6E8;
  list-style: none;
  padding: 10px 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.6s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* 表示 */

.dropdown:hover .dropdown-menu { 
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}


.dropdown-menu li {
  padding: 5px 10px;
  margin: 10px;
  text-align: center;
  white-space: nowrap;
  transition: background-color 0.6s ease;
}

.dropdown-menu li:hover {
  background-color: #FFEED3;
}


.toggle_btn,
.mask {
  display: none;
}

/*Top-page mainvisual(fade)*/

.fade {
  width: 100%;
  height: calc(100vh - 70px);
  position: relative;
  margin-top: 38px;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.fade li {
  width: 100%;
  position: absolute; 
  top: 0;
  left: 0;
  opacity: 0;
  animation: fade 21s infinite;
  backface-visibility: hidden;
  will-change: opacity;
}

.fade li img {
  height: 100%;
  backface-visibility: hidden;
  display: block;
  object-position: center;
}

.fade li:nth-child(1) {
  animation-delay: 0s;
}

.fade li:nth-child(2) {
  animation-delay: 7s;
}

.fade li:nth-child(3) {
  animation-delay: 14s;
}



.fade::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.5) 85%,
    rgba(255,255,255,0.9) 100%
  );
}



@keyframes fade {
  0% {
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  30% {
    opacity: 1;
  }

  45% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

/*---top-page section fade-in---
(他ページsectionのfade-inも含む）*/
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.8s ease, transform 1.8s ease; /* 1.2秒かけてゆっくり表示 */
}

/* 画面に入った時に付与されるクラス */
.fade-in-up.is-active {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 768px) {
    .fade-in-up {
        transition: opacity 1.0s ease, transform 1.0s ease; /* スマホは少し早めに */
    }
}

/* 交互に並ぶセクションなど、少し遅延させたい場合（お好みで） */
.delay-01 {
   transition-delay: 0.2s;
}

.delay-02 {
   transition-delay: 0.4s;
}



/*Top-page shop-introduction*/
.shop-introduction {
  width: 100%;
  margin: 50px auto;
  display: flex;
}

.shop-introduction .left-content {
  width: 60%;
  background-color: #FDFBF8;
  padding: 80px;
  line-height: 1.8;
}

.shop-introduction .left-content .text {
  font-size: 1rem;
  color: #4A4644;
}

.shop-introduction .left-content .text span {
  letter-spacing: 1.5px;
}

.shop-introduction .chefs-shot {
  width: 40%;
  overflow: hidden;
}

.shop-introduction .chefs-shot img {
  height: 100%;
  display: block;
}

.shop-introduction .link-btn {
  text-align: center;
  margin-block: 30px;
}

.shop-introduction .link-btn a {
  padding: 15px 40px;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 3px;
  background-color: #A68B6D;
  color: #FCF2F2;
  border: #A68B6D;
  border-radius: 5px;
  cursor: pointer;
}

/*Top-page shop-news*/
.shop-news {
  margin-left: 50px;
  max-width: 800px;
}

.shop-news .title {
  margin-block: 15px;
  letter-spacing: 2px;
}

.shop-news .title span {
  font-size: 1.1rem;
}

.shop-news .update {
  display: flex;
  flex-wrap: wrap;
}

.shop-news .update dt {
  width: 25%;
  margin-bottom: 10px;
  font-size: 1.2rem;
}

.shop-news .update dd {
  width: 75%;
  margin-bottom: 10px;
}

.shop-news .update dd a:hover {
  opacity: 1;
  border-bottom: 1px solid #342A2A;
}

/*Top-page item-introduction*/
/* --- Item Introduction Base --- */
.item-introduction {
  margin-top: 50px;
  padding: 0;
  list-style: none;
}

/* WordPressが勝手に入れるタグを徹底排除 */
.item-introduction br,
.item-introduction p:empty {
  display: none !important;
}

.item-introduction li {
  display: flex !important;
  height: 300px;
  margin-bottom: 25px;
  box-shadow: 0 0 8px 4px #ccc;
  overflow: hidden; /* はみ出し防止 */
  background-color: #fff; /* 背景色漏れ防止 */
}

/* --- Visual Area --- */
.item-introduction li .visual {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.item-introduction li .visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.item-introduction li:hover .visual img {
  transform: scale(1.05);
}

/* --- Content Area --- */
.item-introduction li .content {
  flex: 1;
  background-color: #E0D5D0;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 中央配置 */
  box-sizing: border-box;
}

/* --- Clip-path & Overlap Logic --- */

/* Pattern A: Content(Left) / Visual(Right) - Cake, Chocolat */
.item-introduction .cake .content,
.item-introduction .chocolat .content {
  flex: 1.1;
  clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
  z-index: 2;
  padding-left: 3%;
  padding-right: 13%;
}

.item-introduction .cake .visual,
.item-introduction .chocolat .visual {
  z-index: 3;
  margin-left: -14%; /* コンテンツの下に潜り込ませる */

  clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
}

/* Pattern B: Visual(Left) / Content(Right) - Tart, BakedGoods */
.item-introduction .tart .visual,
.item-introduction .bakedgoods .visual {
  flex: 1.1;
  clip-path: polygon(0 0, 85% 0, 100% 100%, 0 100%);
  z-index: 2;
}

.item-introduction .tart .content,
.item-introduction .bakedgoods .content {
  margin-left: -17%; /* 画像の下に潜り込ませる */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  padding-left: 18%; /* 重なり分を避けるパディング */
}


.item-introduction li .title {
  font-weight: bold;
  font-size: 1.5rem;
  margin-bottom: 20px;
  border-bottom: 1px solid #342A2A;
  width: 100%; /* 幅を柔軟に */
  max-width: 500px;
}

.item-introduction li .link-btn {
  margin-top: 30px;
  margin-inline: auto;
}

.item-introduction li .link-btn a {
  display: inline-block;
  padding: 12px 35px;
  background-color: #A68B6D;
  color: #e8e5e5;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  letter-spacing: 2px;
  transition: 0.3s;
}

.item-introduction li .link-btn a:hover {
  background-color: #342A2A;
}

/*Top-page three-shops*/
.three-shops {
  margin-top: 50px;
}

.three-shops .title {
  margin-bottom: 20px;
  margin-left: 40px;
  letter-spacing: 2px;
}

.three-shops .shop-list {
  display: flex;
  justify-content: space-between;
  padding: 40px;
  background-color: #E8D3D1;
  gap: 20px; /* ショップ同士の隙間 */
}

.three-shops li {
  position: relative;
  width: 32%; /* 3つ並びの幅 */
  aspect-ratio: 1 / 1; /* 正方形を維持して高さを出す */
  border-radius: 5%;
  text-align: center;
  font-size: 1.5rem;
  overflow: hidden; /* 角丸からはみ出る背景画像をカット */
  transition: all 0.7s ease;
}

/* 白いオーバーレイ（aタグより下に配置） */
.three-shops li::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.65);
  z-index: 1; /* aタグ(z-index: 5)より下 */
  pointer-events: none; /* クリックを透過させる */
}

/* 背景画像の設定（パスはテーマフォルダ構造に合わせる） */
.three-shops .shop-list .shop-tokyo {
   background-image: url("img/shop-tokyo.png"); 
   background-size: cover; 
   background-position: center; 
}

.three-shops .shop-list .shop-osaka {
   background-image: url("img/shop-osaka.png"); 
   background-size: cover; 
   background-position: center; 
}

.three-shops .shop-list .shop-nagoya {
   background-image: url("img/shop-nagoya.png"); 
   background-size: cover; 
   background-position: center; 
}

/* aタグを画像全体のクリックエリアにする */
.three-shops li a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 5; /* 最前面に持ってくる */
  text-decoration: none;
  color: #333;
}

/* ホバー演出 */
.three-shops li:hover {
  transform: scale(1.05);
  opacity: 0.9;
}

/* テキストのスタイル調整 */
.three-shops li span {
  display: block;
}

.three-shops li .ja {
  font-size: 1.9rem;
}

.three-shops li .en {
  font-size: 1.7rem;
  margin-top: 5px;
}

/*About*/
.about {
  text-align: left;
  line-height: 2;
  font-size: 1rem;
}

.profile {
  display: flex;
  gap: 90px;
  align-items: flex-start;
}

.chef-image img {
  width: 400px;
}


.chef-profile {
  line-height: 1.7;
}

.chef-profile .name {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 20px;
}


.chef-profile p {
  margin-bottom: 15px;
}

.chef-profile .career {
  border-top: 1px solid #342A2A;
}


/*news-page*/
.news-content {
    max-width: 800px;
    margin: 60px auto;
    padding: 0 20px;
}

.post-header {
    border-bottom: 1px solid #dcdcdc;
    margin-bottom: 40px;
    padding-bottom: 20px;
    text-align: left;
}

.post-date {
    font-family: 'Playfair Display', serif;
    color: #888;
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.post-title {
    font-size: 1.8rem;
    line-height: 1.4;
    color: #333;
}

.post-flex-container {
    display: flex;
    justify-content: space-between; /* 両端に振り分ける */
    align-items: flex-start;      /* 上揃え */
    gap: 40px;                    /* 文章と画像の間の余白 */
    margin-bottom: 60px;
}

.post-body {
    line-height: 2.0; /* 高級感のある広い行間 */
    flex: 1;
    font-size: 1.1rem;
    color: #444;
    margin-bottom: 80px; /* ナビゲーションとの間隔 */
}

.post-body p {
    margin-bottom: 15px; 
    margin-top: 0;
}

.post-thumbnail {
    flex: 0 0 40%;                /* 画像の幅を全体の40%に固定 */
    max-width: 400px;             /* 大きくなりすぎないように制限 */
}

.post-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* ナビゲーション全体の枠組み */
.post-navigation {
    display: flex;
    justify-content: space-between;
    margin-bottom: 60px;
    padding-top: 30px;
    border-top: 1px solid #eee;
}

.post-navigation .prev,
.post-navigation .next {
    flex: 1;
}

.post-navigation .next {
    text-align: right;
}

.post-navigation a {
    text-decoration: none;
    color: #504545;
    font-family: 'Playfair Display', serif;
    font-weight: bold;
    font-size: 1.2rem;
    transition: color 0.3s ease;
}

.post-navigation a:hover {
    color: #E8D3D1;
}



/* 最初の記事・最後の記事の時に位置を調整 */
.nav-next {
    margin-left: auto;
}

/* 戻るボタンの調整 */
.link-text {
    text-align: center;
    margin-top: 40px;
}

.link-text a {
    font-family: 'Playfair Display', serif;
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #333;
    padding-bottom: 5px;
}


/*page-cake,page-tart,page-chocolat,page-bakedgoods*/

.product-list {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.product-list li {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease;
  box-shadow: 0 0 8px 4px #ccc;
}

.product-list li.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* 2番目のカードは少し遅れて出す */
.product-list li:nth-child(2) {
   transition-delay: 0.2s; 
}

/* 3番目のカードはさらに遅れて出す */
.product-list li:nth-child(3) {
   transition-delay: 0.4s; 
}

/* 4番目のカードは少し遅れて出す */
.product-list li:nth-child(4) {
 transition-delay: 0.6s; 
}

/* 5番目のカードはさらに遅れて出す */
.product-list li:nth-child(5) {
   transition-delay: 0.8s; 
}

/* 6番目のカードはさらに遅れて出す */
.product-list li:nth-child(6) {
   transition-delay: 1.0s; 
}

.product-list li .photo {
  position: relative;
}

.product-list li .photo img {
  height: 300px;
  object-fit: cover;
  vertical-align: bottom;
}



.product-list li .photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(255,255,255,0) 55%,
    rgba(255,255,255,0.7) 80%,
    rgba(255,255,255,1) 100%
  );
}

.product-list li .menu-content {
  padding: 10px;
}

.product-list .menu-content .name {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
}

.product-list .menu-content .text {
  font-weight: normal;
  margin-bottom: 15px;
  text-align: left;
  margin-inline: 3px;
}


/*company*/
.info {
  width: 800px;
  margin-bottom: 50px;
  display: flex;
  flex-wrap: wrap;
}

.info dt {
  font-weight: bold;
  margin-bottom: 25px;
  padding-left: 10px;
  padding-bottom: 10px;
  width: 40%;
  border-bottom: 1px solid #342A2A;
}

.info dd {
  margin-left: 0;
  margin-bottom: 25px;
  padding-left: 10px;
  padding-bottom: 10px;
  width: 60%;
  border-bottom: 1px solid #342A2A;
}

.company-map iframe {
  width: 400px;
  height: 400px;
}


/*shop-tokyo,shop-osaka,shop-nagoya 店舗情報 */

/*---shop-info section fade-in---*/
.shop-info .fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s ease; /* 1.2秒かけてゆっくり表示 */
}

/* 画面に入った時に付与されるクラス */
.shop-info .fade-in-up.is-active {
    opacity: 1;
    transform: translateY(0);
}

.shop-data {
  width: 800px;
  max-width: 100%;
  margin: 0 auto 50px;
  display: flex;
  flex-wrap: wrap; /* これで dt/dd のセットを折り返させる */
  border-top: 1px solid #342A2A; /* 一番上にも線を引くと表らしくなります */
}

.shop-data dt,
.shop-data dd {
  box-sizing: border-box; /* ★paddingを含めて幅を計算する */
  margin: 0;
  padding: 15px 10px;    /* 上下の余白を少し広げると見やすくなります */
  border-bottom: 1px solid #342A2A; /* ★dtとddの両方に線を引く */
  min-height: 3rem;      /* 高さを揃えるための最低値 */
  display: flex;
  align-items: center;   /* 文字の縦位置を中央に */
}

.shop-data dt {
  width: 30%;            /* dtの幅（お好みで調整） */
  font-weight: bold;
  background-color: rgba(52, 42, 42, 0.03); /* ★dt側に薄く色を付けるとより表らしくなります（任意） */
}

.shop-data dd {
  width: 70%;            /* ddの幅 */
}

/* アクセス部分の微調整（地図と横並び） */
.access {
  width: 850px;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.shop-map iframe {
  width: 500px;
  height: 400px;
  border: 0;
}

.transportation {
  flex: 1;
  padding-left: 40px;
}

.transportation .title {
  font-weight: bold;
  font-size: 1.2rem;
}

/*Contact*/
/* セクション全体の囲い */
.contact.wrapper {
  max-width: 1000px; /* サイト全体の最大幅に合わせる */
  margin: 0 auto;    /* ★全体を中央に寄せる */
  padding: 60px 20px;
}

.contact .text {
  font-size: 1rem;
  color: #342A2A;
  margin-bottom: 40px;
  text-align: center; /* テキストも中央寄せにするとバランスが良いです */
  /* padding-inline: 120px; は画面が狭い時に崩れる原因になるので削除か調整 */
}



/* --- フォーム全体のコンテナ --- */
/* --- フォーム全体のコンテナ --- */
.contact-form-container {
    max-width: 800px; 
    margin: 0 auto;
}

/* --- 各行（label）の横並び設定 --- */
.contact-form-container label {
    display: flex;
    align-items: center; /* 縦方向中央 */
    margin-bottom: 25px;
    width: 100%;
}

/* 項目名（左側 25%） */
.contact-form-container label p {
    width: 25%;
    min-width: 140px;
    color: #342A2A;
    font-weight: bold;
    margin: 0;
    flex-shrink: 0;
}

/* ★最重要：CF7の自動生成タグをブロック化して幅を100%に */
.contact-form-container .wpcf7-form-control-wrap {
    flex: 1; 
    display: block;
}

/* 入力ボックス共通 */
.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-textarea,
.wpcf7-form-control.wpcf7-tel,
.wpcf7-form-control.wpcf7-email {
    width: 100% !important;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1rem;
}

/* 郵便番号・都道府県の幅制限 */
.postcode,
.prefecture {
    max-width: 180px !important;
}

/* 送信ボタン（パティスリー・ルミエール カラー） */
.wpcf7-submit {
    display: block;
    margin: 40px auto 0;
    padding: 15px 80px;
    background-color: #A68B6D;
    color: #F8F6F2;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.5s;
}


.wpcf7-submit:hover {
  opacity: 0.7;
}



/* -----------------------------------------
   Reservation Section (予約ページ)
----------------------------------------- */

/* セクション全体の背景エリア */
.shop-selection-bg {
  background-color: #dfc9ca; /* スクリーンショットのニュアンスカラー */
  padding: 100px 20px;
  margin: 40px 0;
}

.reservation-lead {
  text-align: center;
  color: #504545;
  margin-bottom: 40px;
  font-weight: bold;
  letter-spacing: 0.1em;
}

/* 店舗選択リスト */
.shop-gate-list {
  display: flex; 
  justify-content: center; 
  gap: 25px; 
  list-style: none; 
  padding: 0; 
  max-width: 1000px;
  margin: 0 auto; 
}

.shop-gate-list li {
  flex: 1; 
  max-width: 320px; 
}

/* カード全体の枠（aタグ） */
/* カード全体の枠（aタグ） */
.shop-gate-list li a {
  display: block;
  position: relative;
  overflow: hidden; 
  border-radius: 40px; 
  aspect-ratio: 4 / 5; 
  box-shadow: 0 10px 30px rgba(245, 242, 242, 0.6);
  background-color: #e8e5e5; /* 下地を白に */
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* ★ここに「薄白いシート」を追加 */
.shop-gate-list li a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(232, 226, 226, 0.6); /* 白いシート（0.4は透明度。お好みで調整） */
  z-index: 1; /* 画像(0)と文字(2)の間に配置 */
  transition: background-color 0.4s ease; /* 消える動きをなめらかに */
}

/* ホバー時の設定 */
.shop-gate-list li a:hover {
  transform: scale(1.05);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  z-index: 10;
}

/* ★ホバーした時にシートを透明にする */
.shop-gate-list li a:hover::after {
  background-color: rgba(255, 255, 255, 0); /* シートが消えて画像が鮮明になる */
}

/* 画像の設定 */
.shop-gate-list .shop-img {
  width: 100%; 
  height: 100%; 
  z-index: 0; /* 一番背面 */
}

.shop-gate-list .shop-img img {
  width: 100%; 
  height: 100%; 
  object-fit: cover;
  /* 最初から少しぼかしたり、彩度を落とすとお洒落です（お好みで） */
  /* filter: grayscale(30%); */
}

/* 文字の設定 */
.shop-name-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 2; /* ★シート(1)よりも前面に出す */
  text-align: center;
  display: flex;
  flex-direction: column;
  color: #342A2A !important; 
  font-size: 1.8rem;
  pointer-events: none;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8); /* 文字の周りを少し光らせて読みやすく */
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
  .shop-gate-list {
    flex-direction: column;
    align-items: center;
  }
  .shop-gate-list li {
    width: 100%;
  }
}

/* 予約フォーム (Booking Package) カスタマイズ */
.reservation-form-area {
  background: #e8e5e5;
  padding: 40px; 
  border: 1px solid #d3c1b1; 
  box-shadow: 0 10px 30px rgba(80, 69, 69, 0.05); 
}

/* ボタンの強制上書き */
#booking-package .booking-package-app button,
#booking-package .booking-package-app .btn-primary {
    background-color: #504545 !important;
    border-radius: 0 !important;
    color: #e8e5e5 !important;
    padding: 15px 30px !important;
}

/* 注意書き */
.reservation-note {
  line-height: 2; 
  margin-top: 40px; 
  color: #8c7e7e; 
  text-align: center; 
}

.reservation-note span {
  color: #ef1010; 
  font-weight: bold; 
  border-bottom: 2px solid #ef1010; 
}

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

.link-text a {
   color: #8c7e7e; 
   text-decoration: none; 
   border: 1px solid #252525; 
   font-size: 1rem; 
}




/*Recruit*/
/* リクルートセクション全体 */
.recruit .description {
    font-size: 1rem;
    padding-inline: 20px;
    line-height: 2;
    text-align: center;
    margin-bottom: 40px;
}

.recruit .description span {
  color: #ef1010;
}

.recruit-form-container {
    max-width: 800px;
    margin: 50px auto;
    padding: 0 20px;
}

/* --- 各行の指定（CF7のラベル構造に対応） --- */
.recruit-form-container label {
    display: flex;
    margin-bottom: 25px;
    align-items: center; /* 縦の中央 */
    width: 100%;
}

.recruit-form-container label br {
    display: none;
}

/* ついでに自動で入る空のpタグも排除 */
.recruit-form-container p:empty {
    display: none;
}

/* 志望動機（textarea）の時だけ上揃えにする */
/* labelの中にtextareaがある場合に適用 */
.recruit-form-container label:has(textarea) {
    align-items: flex-start;
}

/* 左側：項目名（pタグ） */
.recruit-form-container label p {
    width: 25%;
    min-width: 140px; /* 狭くなりすぎないように */
    font-weight: bold;
    margin: 0;
    flex-shrink: 0;
    color: #342A2A;
}

/* 右側：入力エリア（CF7が生成するspanへの対応） */
.recruit-form-container .wpcf7-form-control-wrap {
    flex: 1; /* 残りの75%分を占める */
    display: block;
}

/* --- ラジオボタンの調整 --- */
/* CF7のラジオボタンは独自構造なので専用の指定が必要 */
.recruit-form-container .wpcf7-list-item {
    display: inline-flex;
    align-items: center;
    margin-right: 20px;
    margin-bottom: 5px;
}

.recruit-form-container .wpcf7-list-item-label {
    margin-left: 5px;
    font-weight: normal;
    cursor: pointer;
}

/* --- 入力欄の基本スタイル --- */
.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-textarea,
.wpcf7-form-control.wpcf7-tel,
.wpcf7-form-control.wpcf7-email {
    width: 100% !important;
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
}

/* 郵便番号と都道府県だけ短くする */
/* CF7側で id:zip-field / id:pref-field をつけている場合 */
#zip-field, #pref-field {
    max-width: 180px !important;
}

/* --- 送信ボタン（CF7の標準ボタンに対応） --- */
.submit-btn-wrap {
    text-align: center;
    margin-top: 50px;
}

.wpcf7-submit {
    width: 240px;
    padding: 15px 0;
    background-color: #A68B6D;
    color: #e8e5e5;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.3s;
}

.wpcf7-submit:hover {
    background-color: #E8D3D1;
    color: #342A2A;
}



/*footer*/
footer {
  background-color: #FFEED3;
  width: 100%;
  margin-top: 30px;
  padding-bottom: 20px;
  padding-inline: 40px;
  box-sizing: border-box; /* 追記：パディングによる幅の広がりを防止 */
}

.footer-logo {
  width: 170px; /* 修正：ロゴの親要素の幅を画像に合わせる */
}

.footer-logo img {
  display: block;
  width: 170px;
  height: 70px;
  object-fit: cover;
  object-position: center 45%;
}

/* ★ズレの核心：WordPressが挿入する p/br タグを無効化 
*/
.footer-content {
  display: flex !important;
  justify-content: space-between;
  margin-top: 20px;
  margin-right: 60px;
  list-style: none;
  padding-left: 0;
}

/* --- Menu, Shop, Company などの各列 --- */
.footer-content .line-up,
.footer-content .company,
.footer-content .contact,
.footer-content .reservation,
.footer-content .recruit {
  /* ★復活：文字の間隔（AboutやNewsと同じ3px） */
  letter-spacing: 3px; 
  font-size: 1rem;

}

.footer-content .company,
.footer-content .contact,
.footer-content .reservation,
.footer-content .recruit {
  font-weight: bold;
}

/* --- Menu や Shop のタイトル部分 --- */
.footer-content .line-up p.title {
  margin: 0 0 10px 0;
  font-weight: bold;
}

/* --- 下層のリスト（Cake, Tart など） --- */
.footer-content .list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-content .list li {
  position: relative;
  padding-left: 20px; /* 横棒のためのスペース */
  margin-bottom: 10px;
  list-style: none;
  /* リスト内の文字間隔（必要ならここも調整） */
  letter-spacing: 1px; 
}

/* ★復活：横棒（::before） 
   指定を少し広めにして、確実に当たるようにしました
   */
   .footer-content li li::before {
     content: "";
     display: inline-block;
     width: 10px;
     height: 1.5px;
     background-color: #342A2A;
     position: absolute;
     left: 0;
     top: 50%;
     transform: translateY(-50%);
}

/* --- WordPressが勝手に入れたタグを消す（ズレ防止の要） --- */
.footer-content > p,
.footer-content > br {
  display: none !important;
}

/*footer SNS Link*/
.footer-sns {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 40px 0 10px;
}

.footer-sns a {
    text-decoration: none;
    transition: transform 0.3s, opacity 0.3s;
}

/* アイコン自体の色とサイズ */
.footer-sns i {
    font-size: 2.2rem;   /* 3つ並ぶので少しだけ大きくしても綺麗です */
    color: #342A2A;    /* ロゴと同じ茶色 */
}

/* ホバー時の演出 */
.footer-sns a:hover {
    opacity: 0.6;
    transform: translateY(-3px);
}

.copyright {
  display: block;      /* ブロック要素にする */
  width: 100%;         /* 幅をいっぱいにする */
  text-align: center;  /* 文字を中央寄せにする */
  font-size: 0.7rem;
  padding: 20px 0 10px; /* 上に少し余裕を持たせる */
  margin: 0 auto;      /* 左右のマージンを自動にして中央へ */
  clear: both;         /* 周りの浮き（float）などの影響を排除 */
  letter-spacing: 1px; /* コピーライトも少し広げると綺麗です */
}

/*responsive Tablet*/
@media (max-width: 768px) {
  /*header*/
  
  header {
    width: 100%;
    height: 70px;
    padding: 0;
    z-index: 10;
  }

  
  nav {
  width: 250px;
  max-width: 80%; 
  background: #FFEED3;
  margin-right: 0;
  padding: 60px 25px 25px; /* 上の×ボタン用の余白 */
  position: fixed;
  top: 0;
  right: -350px;
  bottom: 0;
  opacity: 0;
  visibility: hidden; 
  overflow-y: auto;
  transition: all 0.4s ease-out; 
  z-index: 999;
  box-shadow: -2px 0 8px rgba(0,0,0,0.1); 
  display: block; /* 縦並びの基本 */
  }

  .open nav {
  right: 0;
  opacity: 1;
  visibility: visible;
  }

  .open .mask {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(93, 64, 55, 0.7);
    z-index: 950;
    cursor: pointer;
  }

/* ==========================================
2. メニューリストの設定 (スマホ・縦並び用)
========================================== */

/* 親要素 nav を付けることで詳細度を高め、PC版のflexなどを上書き */
  nav .nav-menu {
    display: block;
    text-align: left; /* 親から左寄せを徹底 */
    width: 100%;
    margin: 0;
    padding: 0;
  }

  /* メニューの各項目（About, News, Menuなど） */
  nav .nav-menu li {
  display: block;
  width: 100%;
  margin: 0;
  text-align: left;
  }

  /* リンク文字の見た目 */
  nav .nav-menu li a {
  display: block;
  padding: 15px 25px;
  color: #5D4037;
  text-decoration: none;
  font-family: serif; /* お店の雰囲気に合わせたセリフ体 */
  }

/* ==========================================
   3. ドロップダウン（Menu/Shop）の設定
   ========================================== */
   
   /* 子メニュー（Cake, Tartなど）の初期状態 */
   /* PC版の absolute, opacity: 0 を static, opacity: 1 で上書き */
   nav .nav-menu .dropdown-menu {
    display: none;
    position: static;     /* 絶対配置を解除して、Menuの真下に流す */
  
  /* --- ここからが位置ズレを直す重要設定 --- */
    left: auto;           /* 左端からの距離をリセット */
    right: auto;          /* 右端からの距離をリセット */
    transform: none;      /* 中央寄せなどの移動をリセット */
    width: 100%;          /* 横幅を親（Menu）に合わせる */
    opacity: 1;
    visibility: visible;
    background: none;
    box-shadow: none;
    padding: 10px 0 10px 20px; /* 左側に余白を作って「中身」と分かりやすくする */
    margin: 0;
  }

nav .nav-menu li.dropdown {
    position: relative; /* 子要素の基準をここに固定 */
    width: 100%;
    text-align: left;
  }
  
  /* 【重要】JS/onclickで 'active' クラスがついた時 
  !importantを使わず、詳細度（親からの指定）で表示させる
  */
  nav .nav-menu li.dropdown.active > .dropdown-menu {
  display: block; 
  }

  nav .nav-menu li.dropdown .dropdown-menu {
    display: none;
    position: static;   /* 浮かさずに「次の行」として扱う */
    
    /* 位置の強制リセット */
    width: 100%;
    margin: 0;
    padding: 10px 0 10px 40px; /* 左に大きめに余白を空けて中央に寄せる */
    
    /* PC版の「中央寄せ」設定を完全に殺す */
    left: 0;
    right: auto;
    transform: none; 
    
    /* 見た目 */
    background: transparent;
    opacity: 1;
    visibility: visible;
  }

/* ドロップダウン内の一つ一つの項目（Cakeなど） */
  nav .nav-menu .dropdown-menu li {
  padding: 5px 0;
  border: none; /* 親の区切り線設定などがあればリセット */
  }

  nav .nav-menu .dropdown-menu li a {
  text-align: left;
  display: block;
  width: 100%;
  margin: 0;
  font-size: 0.95rem;
  }

  
  .toggle_btn {
  display: block;
  background-color: rgba(248, 246, 242, 0.9);
  border-radius: 50%;
  width: 60px; 
  height: 60px;
  cursor: pointer;
  position: fixed;
  top: 10px;
  right: 10px;
  box-shadow: 0 2px 10px rgba(52, 42, 42, 0.1);
  z-index: 1000;
  /* buttonタグのスタイルリセット */
  border: none;
  padding: 0;
  appearance: none;
  outline: none;
}

/* 3本線の共通設定 */
.toggle_btn span,
.toggle_btn span::before,
.toggle_btn span::after {
  content: "";
  display: block;
  width: 30px;
  height: 1.5px;
  background-color: #342A2A;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.5s ease; /* アニメーションの速度 */
}

/* 真ん中の線（span本体） */
.toggle_btn span {
  top: 50%;
  transform: translate(-50%, -50%); /* 完全に中央 */
}

/* 上の線（before） */
.toggle_btn span::before {
  top: -12px; /* 真ん中から12px上に配置 */
}

/* 下の線（after） */
.toggle_btn span::after {
  top: 12px;  /* 真ん中から12px下に配置 */
}

/* --- オープン時の「×」 --- */

/* 1. 真ん中の線を透明にする */
.open .toggle_btn span {
  background-color: transparent;
}

/* 2. 上の線を45度傾ける */
.open .toggle_btn span::before {
  top: 0;
  transform: translateX(-50%) rotate(-45deg);
}

/* 3. 下の線を-45度傾ける */
.open .toggle_btn span::after {
  top: 0;
  transform: translateX(-50%) rotate(45deg);
}

/* --- マスク（ふわっと出すために display ではなく visibility を使用） --- */
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s;
  z-index: 900; /* navより下に */
}

.open .mask {
  opacity: 0.6;
  visibility: visible;
}
}

/* スマホでは不要なホバー挙動（PC版の設定）を無効化 */
@media (hover: none) {
  nav .nav-menu li.dropdown:hover .dropdown-menu {
    display: none; /* 指が触れた瞬間の意図しないホバーを防ぐ */
  }
  nav .nav-menu li.dropdown.active:hover .dropdown-menu {
    display: block; /* activeの時は表示を維持 */
  }
}

@media (max-width: 768px) {
  /*fade(toppage-mainvisual)*/
  .fade {
    height: auto;
    aspect-ratio: 16 / 9; /* 横幅に合わせて高さが自動計算される */
    margin-top: 60px;
  }

  
  /*Top-page shop-introduction*/
  .shop-introduction {
    display: flex;         /* 明示的にflexを指定 */
    flex-direction: column;
    width: 100%;           /* 親の幅を100%に固定 */
    margin: 30px 0;        /* 左右マージンを0にして端まで使う */
    overflow: hidden;      /* はみ出しをカット */
  }

  .shop-introduction .left-content {
    width: 100%;
    /* ★重要：box-sizing を border-box にすることで、
       padding(20px)を含めて「合計100%」に計算させます */
    box-sizing: border-box; 
    padding: 40px 20px; 
    order: 2; 
  }

  .shop-introduction .left-content .text {
    width: 100%;           /* テキスト自体の幅も固定 */
    text-align: left;
    line-height: 2;
    word-break: break-all; /* 長い英単語などでの突き抜け防止 */
  }

  /* 画像エリア */
  .shop-introduction .chefs-shot {
    width: 100%;
    height: auto;          /* 高さを固定せず自動にするか、300px程度にする */
    min-height: 250px;
    order: 1;
  }

  .shop-introduction .chefs-shot img {
    display: block;        /* 画像下の隙間を消す */
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /*shop-news*/
  .shop-news {
    margin-left: 20px;   /* 左の余白を少し詰める */
    margin-right: 20px;  /* 右側にも余白を作って中央寄りに */
    max-width: none;     /* 700pxの制限を解除して画面に合わせる */
  }

  /* 2. タイトルの中央寄せ（お好みで） */
  .shop-news .title {
    text-align: center;
    margin-left: 0;
  }

  .shop-news .update {
    text-align: center;
  }
  
  .shop-news .update dt {
    width: 100%;         
    margin-bottom: 2px;  
    font-size: 1rem;  
    color: #342A2A;
  }
  
  .shop-news .update dd {
    width: 100%;         
    margin-bottom: 20px; 
    padding-left: 5px;   
  }

  
  .shop-news .update dd a {
    display: inline-block; /* 下線を文字幅に合わせるため */
    line-height: 1.4;
  }


  /*Top-page item-introduction*/
  .item-introduction li {
    flex-direction: column; /* 縦並びに変更 */
    height: auto;           /* 高さを内容に合わせる */
    margin-bottom: 40px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* 影を少し柔らかく */
  }

  /* 2. 画像とテキストの順序を「画像が上」に統一 */
  .item-introduction .tart,
  .item-introduction .bakedgoods {
    flex-direction: column; /* TartとBakedGoodsも画像→テキストの順へ */
  }
  
  /* HTMLの並び順に関わらず「visual」を上にしたい場合 */
  .item-introduction li {
    display: flex;
    flex-direction: column;
  }
  .item-introduction li .visual {
    order: 1; /* 画像を常に上 */
  }
  .item-introduction li .content {
    order: 2; /* テキストを常に下 */
  }

  /* 3. clip-path と ネガティブマージンの解除 */
  .item-introduction .cake .visual,
  .item-introduction .chocolat .visual,
  .item-introduction .tart .visual,
  .item-introduction .bakedgoods .visual,
  .item-introduction .cake .content,
  .item-introduction .chocolat .content,
  .item-introduction .tart .content,
  .item-introduction .bakedgoods .content {
    flex: none;
    width: 100%;
    margin-left: 0;
    clip-path: none; /* 斜めの切り抜きをリセット */
  }

  .item-introduction .cake .content,
  .item-introduction .chocolat .content {
    padding-inline: 30px;
  }

  /* 4. 画像エリアの調整 */
  .item-introduction li .visual {
    height: 250px; /* スマホで見やすい高さに固定 */
  }

  /* 5. テキストエリアの調整 */
  .item-introduction li .content {
    padding: 30px 20px; /* 左右に適切な余白を */
    text-align: center; /* スマホでは中央寄せがきれい */
    align-items: center;
  }

  .item-introduction li .content:nth-child(2),
  .item-introduction li .content:nth-child(4) {
    padding: 25px;
  }

  /* 6. タイトルとボタンの調整 */
  .item-introduction li .title {
    width: 100%; /* 横幅いっぱい */
    font-size: 1.3rem;
    text-align: center;
  }

  /* 改行コード <br> をスマホでは無効化して自然に流す */
  .item-introduction li .content .text br {
    display: none;
  }
  
  .item-introduction li .content .text {
    line-height: 1.8;
    text-align: left;
  }

  .item-introduction li .link-btn {
    margin-inline: auto;/* 左マージンをリセット */
    margin-top: 25px;
  }
  
  .item-introduction li .link-btn a {
    padding: 12px 60px; /* タップしやすいように横幅を広げる */
    display: inline-block;
    }



  /*three-shops(Tokyo,Osaka,Nagoya)*/
  .three-shops .shop-list {
    flex-direction: column;
    align-items: center;    
    gap: 30px;              
    padding: 30px 20px;     
  }

  /* 2. li（箱）のサイズ固定と調整 */
  .three-shops li {
    width: 300px;           
    height: 150px;          
    padding: 0;             
    font-size: 1.2rem;      
  }

  /* 3. aタグを箱いっぱいに広げる（重要） */
  .three-shops li a {
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 10px;          
    box-sizing: border-box;
  }

  /* 4. タイトルの位置調整 */
  .three-shops .title {
    margin-left: 20px;      
    text-align: center;     
    margin-left: 0;        
  }


  /*About*/
  .wrapper {
    padding-inline: 20px; 
  }

  .about {
    text-align: left; 
    margin-bottom: 50px;
  }
  
  .about br {
    display: none; /* PC用の改行を解除して自然に流す */
  }

  /* 3. プロフィールセクションを縦並びに */
  .profile {
    flex-direction: column; /* 縦並び */
    align-items: center;    /* 中央寄せ */
    gap: 30px;
  }

  

  /* 4. シェフの画像サイズ調整 */
  .chef-image img {
    width: 330px; 
    height: 330px;
    border-radius: 50%; 
    object-position: 27% top;
  }

  /* 5. プロフィール文章の調整 */
  .chef-profile {
    width: 100%;
    text-align: left; 
  }
  
  .chef-profile .name {
    text-align: center; /* 名前だけは中央寄せ */
    font-size: 1.3rem;
    margin-bottom: 25px;
  }
  
  .chef-profile .text br,
  .chef-profile .career br {
    display: none; /* 改行をリセット */
  }

  /* 6. キャリア（経歴）部分をスマホで見やすく */
  .chef-profile .career {
    padding-top: 15px;
    margin-bottom: 20px;
    font-size: 0.95rem; 
  }



  /*news-page*/
  .post-flex-container {
      flex-direction: column-reverse; /* スマホでは画像を上、文章を下に*/
    }
    
  .post-thumbnail {
      flex: 0 0 100%;
      max-width: 90%;
      margin-bottom: 30px;
      margin-inline: auto;
   }

  
  /*店舗情報 shop-tokyo,shop-osaka,shop-nagoya*/
  .shop-data {
    width: 100%; /* 固定幅(800px)を解除 */
    margin-bottom: 40px;
  }

  .shop-data dt {
    width: 100%;
    border-bottom: none; 
    padding-bottom: 0;
    margin-bottom: 5px;
    background: none;
  }

  .shop-data dd {
    width: 100%;
    margin-bottom: 20px;
    padding-left: 10px;
  }
  
  /* 2. アクセスエリア（マップと交通）の調整 */
  .access {
    flex-direction: column; 
    text-align: center;
  }

  /* 3. マップ(iframe)を画面幅いっぱいに */
  .shop-map {
    width: 100%;
  }

  .shop-map iframe {
    width: 100% !important; 
    height: 300px; 
  }

  /* 4. 交通手段テキストの調整 */
  .transportation {
    margin-left: 0;
    padding-left: 0;
    margin-top: 30px;
    width: 100%;
    text-align: center; /* 中央寄せにして見やすく */
  }
  
  .transportation .title {
    font-size: 1.3rem;
    margin-bottom: 15px;
  }
  
  /*contact*/
    .contact-form label {
      flex-direction: column; /* 縦並びにする */
      align-items: flex-start;
    }

    .contact-form label p {
      width: 100%;
      margin-bottom: 8px;
    }

    .wpcf7-form-control.wpcf7-text,
    .wpcf7-form-control.wpcf7-textarea {
      width: 100%; /* スマホでは郵便番号も100%にすると入力しやすい */
    }

    .postcode, .prefecture {
      width: 100% !important;
    }


    /*reservation*/
    .reservation-section {
        padding: 60px 15px;
    }

    .reservation-form-area {
        padding: 20px;
    }

    .reservation-section .page-title {
        font-size: 28px;
    }



    /*recruit*/
    .recruit .description {
        padding-inline: 10px;
        text-align: left; /* スマホで見やすい左寄せ */
        font-size: 0.85rem;
    }

    /* 2. フォームの1行(label)を縦並びにする */
    /* .form-item ではなく、現在の構造である label を指定します */
    .recruit-form-container label {
        flex-direction: column; /* 縦に並べる */
        align-items: flex-start; /* 左寄せ */
        margin-bottom: 20px;
    }

    /* 3. 項目名(p)を横幅いっぱいにする */
    .recruit-form-container label p {
        width: 100%;
        margin-bottom: 8px; /* 入力欄との隙間 */
        min-width: unset;   /* PC用のmin-widthを解除 */
    }

    /* 4. 入力エリア(span)も横幅いっぱいにする */
    .recruit-form-container .wpcf7-form-control-wrap {
        width: 100%;
    }

    /* 5. 郵便番号・都道府県の「短い幅」を解除して100%にする */
    /* ID指定なら確実に効くように !important をつけます */
    #zip-field, 
    #pref-field, 
    .postcode, 
    .prefecture {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* 6. ラジオボタンの調整（折り返して並ぶように） */
    .recruit-form-container .wpcf7-list-item {
        margin-right: 15px;
        margin-bottom: 10px;
        display: inline-flex;
    }

    /* 7. 送信ボタンを押しやすく調整 */
    .submit-btn-wrap {
        text-align: center;
    }

    .wpcf7-submit {
        width: 100%; /* スマホでは横幅いっぱいが基本 */
        max-width: 300px; /* 大きすぎないように制限 */
        padding: 15px 0;
    }
    
  
    /*footer*/
    footer {
        padding-inline: 20px;
        padding-top: 20px; /* 上の余白を少し足すと綺麗です */
    }

    .footer-logo {
        width: 100%;
        text-align: center;
        margin-bottom: 30px;
    }
    
    .footer-logo img {
        margin: 0 auto;
    }

    .footer-content {
        justify-content: center;
        flex-wrap: wrap;
        gap: 30px;
        margin-inline: 30px;
    }

    .footer-content > li {
        min-width: 120px; /* 2列並びになりやすいサイズ */
        text-align: center;
    }

    .footer-content .line-up li::before {
        display: none; /* 中央寄せ時は消すのが正解 */
    }

    /* ★SNSエリアのスマホ調整（追記） */
    .footer-sns {
        margin: 30px 0 0; /* 上のメニューとの距離 */
        justify-content: center;
        width: 100%;
    }

    /* ★コピーライトの調整 */
    .copyright {
        margin-top: 30px;
        border-top: 1px solid rgba(52, 42, 42, 0.1); 
        padding-top: 20px;
        padding-bottom: 20px;
    }
  }
  


/*responsive* iPhone*/
@media(max-width: 480px) {
  .footer-content {
    gap: 20px 10px; /* 隙間をさらに狭くして2列を維持 */
  }
  
  .footer-content > li {
    width: 45%; /* スマホで綺麗に2列並びにする */
  }
}