@charset "utf-8";
/* CSS Document */
/* ============================================================
   kitchen.php — キッチンひなた LP専用スタイル
   ============================================================ */

/* ---- 全体フォント（このページだけ Noto Serif JP を混在） ---- */
.kitchen-serif {
  font-family: 'Noto Serif JP', serif;
}

/* ---- カラー追加変数 ---- */
:root {
  --kitchen-brown:   #7c4a1e;
  --kitchen-amber:   #d97706;
  --kitchen-cream:   #fdf6ec;
  --kitchen-orange:  #f97316;
  --kitchen-green:   #5a7a2e;
  --kitchen-border:  #e8d5b0;
}

/* ============================================================
   ① ヒーローFV（LP専用フルスクリーン）
   ============================================================ */
/* ========================================
   FV
======================================== */

#kitchen-fv{
  position:relative;
  overflow:hidden;
  min-height:920px;

  background-image:url("../img/kitchen/fv.jpg");
  background-size:cover;
  background-position:center right;

  display:flex;
  align-items:center;

  padding:140px 0 220px;
}

/* オーバーレイ */

.kitchen-fv-overlay{
  position:absolute;
  inset:0;

  background:
  linear-gradient(
    90deg,
    rgba(255,248,240,.96) 0%,
    rgba(255,248,240,.93) 38%,
    rgba(255,248,240,.72) 52%,
    rgba(255,248,240,.12) 70%,
    rgba(255,248,240,0) 100%
  );

  z-index:1;
}

/* inner */

.kitchen-fv-inner{
  position:relative;
  z-index:2;

  width:min(1200px, calc(100% - 40px));
  margin:auto;
}

/* ロゴ */

.kitchen-fv-logo-wrap{
  margin-bottom:40px;
}

.kitchen-fv-logo-img{
  width:380px;
  max-width:80%;
}

/* コピー */

.kitchen-fv-copy{
  max-width:640px;
}

/* タイトル */

.kitchen-fv-ttl{
  font-family:'Noto Serif JP',serif;
  font-size:clamp(35px,5vw,60px);
  line-height:1.25;
  font-weight:700;

  color:#4f2f1d;

  letter-spacing:.04em;

  margin-bottom:34px;
}

.kitchen-fv-ttl span{
  color:#ef9222;
}

/* サブ */

.kitchen-fv-sub{
  font-size:18px;
  line-height:2.2;

  color:#5f4738;

  margin-bottom:42px;
}

/* ボタン */

.kitchen-fv-btns{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}

.fv-btn-main,
.fv-btn-sub{
  height:68px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:0 34px;

  border-radius:999px;

  font-weight:700;
  font-size:16px;

  text-decoration:none;

  transition:.3s;
}

.fv-btn-main{
  background:#f39a1f;
  color:#fff;

  box-shadow:
  0 10px 30px rgba(243,154,31,.28);
}

.fv-btn-sub{
  background:#8caf2d;
  color:#fff;

  box-shadow:
  0 10px 30px rgba(140,175,45,.24);
}

.fv-btn-main:hover,
.fv-btn-sub:hover{
  transform:translateY(-3px);
}

/* アイコン */

.fv-btn-main i,
.fv-btn-sub i{
  margin-right:10px;
}

/* 下帯 */

.kitchen-fv-bottom{
  position:absolute;
  left:50%;
  bottom:-2px;
  transform:translateX(-50%);
  width:110%;
  z-index:2;
}

.kitchen-fv-bottom img{
  width:100%;
  display:block;
}
.fv-bottom-leaf.leaf-r{
	position: absolute;
	width: 5vw;
	bottom: 5vw;
	right: 3vw;
	z-index: 2;
	
}
.fv-bottom-leaf.leaf-l{
	position: absolute;
	left: 5vw;
	bottom: 1vw;
	width: 5vw;
	z-index: 2;
}
.fv-bottom-leaf.leaf-l img{
	transform: scaleX(-1);
}

/* ========================================
   SP
======================================== */

@media screen and (max-width:768px){

  #kitchen-fv{
    min-height:auto;

    padding:
    120px 0
    180px;

    background-position:center;
  }

  .kitchen-fv-overlay{

    background:
    linear-gradient(
      180deg,
      rgba(255,248,240,.95) 0%,
      rgba(255,248,240,.88) 45%,
      rgba(255,248,240,.45) 100%
    );
  }

  .kitchen-fv-logo-wrap{
    margin-bottom:28px;
  }

  .kitchen-fv-logo-img{
    width:240px;
  }

  .kitchen-fv-ttl{
    font-size:clamp(1.875rem, 1.213rem + 2.94vw, 2.625rem);
    line-height:1.4;
  }

  .kitchen-fv-sub{
    font-size:15px;
    line-height:2;
  }

  .kitchen-fv-btns{
    flex-direction:column;
  }

  .fv-btn-main,
  .fv-btn-sub{
    width:100%;
    height:62px;
  }

}

/* ============================================================
   ② コンセプトセクション
   ============================================================ */
#kitchen-concept {

  position: relative;
  overflow: hidden;
}
/* 背景の薄い丸型装飾 */
#kitchen-concept::before {
  content: "";
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, #fde68a44 0%, transparent 70%);
  pointer-events: none;
}

.concept-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
@media (max-width: 820px) {
  .concept-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* 画像側：円形デコ（sodan.phpと共通パターン） */
.concept-img-wrap {
  position: relative;
  animation: float 5s ease-in-out infinite;
}
.concept-img-wrap::before {
  content: "";
  position: absolute;
  bottom: -5%;
  left: -8%;
  width: 55%;
  aspect-ratio: 1;
  background: #c47a3a;
  border-radius: 50%;
  opacity: .28;
  z-index: 0;
}
/* 右上小さい丸 */
.concept-img-wrap::after {
  content: "";
  position: absolute;
  top: -4%;
  right: -4%;
  width: 28%;
  aspect-ratio: 1;
  background: #fbbf24;
  border-radius: 50%;
  opacity: .2;
  z-index: 0;
}
.concept-img-wrap img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* テキスト側 */
.concept-text .kitchen-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff4d9;
  border-radius: 999px;
  padding: 7px 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--kitchen-brown);
  margin-bottom: 24px;
  letter-spacing: .05em;
}
.concept-text .kitchen-tag i { color: var(--kitchen-amber); }

.concept-text h2 {
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  color: var(--kitchen-brown);
  line-height: 1.5;
  margin-bottom: 28px;
}
.concept-text h2 .accent {
  color: var(--kitchen-amber);
}

.concept-text p {
  font-size: 15px;
  line-height: 2;
  color: #5a4535;
  margin-bottom: 20px;
}

/* 特徴バッジ */
.concept-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.concept-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 999px;
  background: #fff;
  border: 1.5px solid var(--kitchen-border);
  font-size: 13px;
  font-weight: 700;
  color: var(--kitchen-brown);
}
.concept-badge i { color: var(--kitchen-amber); }


/* ============================================================
   ③ メニューセクション
   ============================================================ */
#kitchen-menu {
  position: relative;
}

/* セクションタイトル（手書き風ライン） */
.menu-section-head {
  text-align: center;
  margin-bottom: 64px;
}
.menu-section-head .kitchen-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff4d9;
  border-radius: 999px;
  padding: 7px 20px;
  font-size: 13px;
  font-weight: 700;
  color: var(--kitchen-brown);
  margin-bottom: 16px;
  letter-spacing: .05em;
}
.menu-section-head .kitchen-tag i { color: var(--kitchen-amber); }
.menu-section-head h2 {
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 700;
  color: var(--kitchen-brown);
  margin-bottom: 12px;
}
.menu-section-head p {
  font-size: 15px;
  color: #7a6050;
  line-height: 1.8;
}

/* メニューカテゴリ見出し */
.menu-category {
  margin-bottom: 72px;
}
.menu-category:last-child { margin-bottom: 0; }

.menu-cat-head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 2px dashed var(--kitchen-border);
}
.menu-cat-icon {
  width: 56px;
  height: 56px;
  background: var(--kitchen-amber);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.menu-cat-icon i {
  color: #fff;
  font-size: 1.5rem;
}
.menu-cat-head h3 {
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  font-weight: 700;
  color: var(--kitchen-brown);
}
.menu-cat-head .cat-en {
  font-size: 12px;
  color: var(--kitchen-amber);
  letter-spacing: .15em;
  font-weight: 600;
  display: block;
}

/* メニューカードグリッド */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) {
  .menu-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .menu-grid { grid-template-columns: 1fr; }
}

/* 個別メニューカード */
.menu-card {
  background: var(--kitchen-cream);
  border: 1px solid var(--kitchen-border);
  border-radius: 18px;
  overflow: hidden;
  transition: transform .25s, box-shadow .25s;
}
.menu-card:hover {

  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(124,74,30,.10);
}

.menu-card-img {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #e8d5b0;
  position: relative;
}
.menu-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
  display: block;
}
.menu-card:hover .menu-card-img img {
  transform: scale(1.06);
}

/* 写真未入稿のプレースホルダー */
.menu-card-img.placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #b89060;
  font-size: 13px;
  font-weight: 600;
}
.menu-card-img.placeholder i {
  font-size: 2.5rem;
  opacity: .45;
}
.menu-card-img.placeholder span {
  font-size: 11px;
  opacity: .7;
}

.menu-card-body {
  padding: 18px 20px;
}
.menu-card-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--kitchen-brown);
  margin-bottom: 6px;
  line-height: 1.4;
}
.menu-card-desc {
  font-size: 13px;
  color: #7a6050;
  line-height: 1.75;
  margin-bottom: 12px;
}
.menu-card-price {
  font-family: 'Noto Serif JP', serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--kitchen-amber);
}
.menu-card-price small {
  font-size: 12px;
  color: #9a8070;
  font-weight: 400;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  margin-left: 4px;
}

/* 価格未定バッジ */
.price-tbd {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fff4d9;
  color: var(--kitchen-brown);
}

/* メニュー注記 */
.menu-note {
  margin-top: 24px;
  padding: 14px 20px;
  background: var(--kitchen-cream);
  border-radius: 12px;
  border: 1px solid var(--kitchen-border);
  font-size: 13px;
  color: #7a6050;
  line-height: 1.8;
}
.menu-note i { color: var(--kitchen-amber); margin-right: 4px; }


/* ============================================================
   ④ こんな方におすすめ（ウェーブ背景）
   ============================================================ */
#kitchen-welcome {
  position: relative;
}

.welcome-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 820px) {
  .welcome-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .welcome-grid { grid-template-columns: 1fr; }
}

.welcome-card {
  background: #fff;
  border: 1px solid var(--kitchen-border);
  border-radius: 22px;
  padding: 36px 28px;
  text-align: center;
  transition: transform .25s, box-shadow .25s;
}
.welcome-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(124,74,30,.08);
}
.welcome-card .wc-icon {
  width: 72px;
  height: 72px;
  background: #fff4d9;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
.welcome-card .wc-icon i {
  font-size: 2rem;
  color: var(--kitchen-amber);
}
.welcome-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--kitchen-brown);
  margin-bottom: 10px;
  line-height: 1.5;
}
.welcome-card p {
  font-size: 13px;
  color: #7a6050;
  line-height: 1.85;
}


/* ============================================================
   ⑤ アクセス・営業情報
   ============================================================ */
#kitchen-info {
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
@media (max-width: 768px) {
  .info-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* 地図 */
.info-map {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--kitchen-border);
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.info-map iframe {
  width: 100%;
  height: 360px;
  display: block;
}

/* 情報リスト */
.info-table {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.info-row {
  display: flex;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px dashed var(--kitchen-border);
  align-items: baseline;
}
.info-row:last-child { border-bottom: none; }
.info-label {
  flex-shrink: 0;
  width: 90px;
  font-size: 13px;
  font-weight: 700;
  color: var(--kitchen-amber);
  display: flex;
  align-items: center;
  gap: 6px;
}
.info-label i { font-size: 12px; }
.info-val {
  font-size: 15px;
  color: #5a4535;
  line-height: 1.8;
}

/* SNSリンク */
.info-sns {
  display: flex;
  gap: 12px;
  margin-top: 28px;
}
.info-sns a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--kitchen-cream);
  border: 1px solid var(--kitchen-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kitchen-brown);
  font-size: 18px;
  transition: background .2s, color .2s;
}
.info-sns a:hover {
  background: var(--kitchen-amber);
  color: #fff;
  border-color: var(--kitchen-amber);
}

/* ============================================================
   SP 全体
   ============================================================ */
@media (max-width: 768px) {
  .concept-img-wrap { width: 78%; margin: 0 auto; }
}

/* =========================================================
   CTA
========================================================= */

#kitchen-cta{
  position:relative;
  overflow:hidden;

  padding:120px 20px;

  background:
  linear-gradient(
    135deg,
    #fffaf4 0%,
    #f8efe4 100%
  );
}

/* 背景 */

.kitchen-cta-bg{
  position:absolute;
  inset:0;

  background:
  radial-gradient(
    circle at top right,
    rgba(255,193,120,.18),
    transparent 40%
  );

  pointer-events:none;
}

/* 中身 */

.kitchen-cta-inner{
  position:relative;
  z-index:2;

  max-width:1000px;
  margin:auto;

  text-align:center;
}

/* 葉っぱ */

.cta-leaf{
  position:absolute;
  opacity:.08;
  width:220px;
  pointer-events:none;
}

.leaf1{
  top:-40px;
  left:-60px;

  transform:rotate(-12deg);
}

.leaf2{
  right:-80px;
  bottom:-60px;

  transform:rotate(180deg);
}

/* ミニ */

.kitchen-cta-mini{
  font-size:15px;
  letter-spacing:.15em;

  color:#d18b47;

  margin-bottom:18px;

  font-weight:700;
}

/* タイトル */

.kitchen-cta-ttl{
  font-family:'Noto Serif JP',serif;

  font-size:54px;
  line-height:1.5;
  font-weight:700;

  color:#5a3d2b;

  margin-bottom:30px;
}

/* サブ */

.kitchen-cta-sub{
  font-size:17px;
  line-height:2.1;

  color:#6f5848;

  margin-bottom:42px;
}

/* ボタン */

.kitchen-cta-btns{
  display:flex;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;
}

.kitchen-cta-btn{
  min-width:280px;
  height:68px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  border-radius:999px;

  font-size:16px;
  font-weight:700;

  transition:.3s;

  text-decoration:none;
}

.kitchen-cta-btn.tel{
  background:#d18b47;
  color:#fff;

  box-shadow:
  0 12px 30px rgba(209,139,71,.28);
}

.kitchen-cta-btn.map{
  background:#fff;
  color:#6b4a36;

  border:1px solid rgba(0,0,0,.08);
}

.kitchen-cta-btn:hover{
  transform:translateY(-4px);
}

/* =========================================================
   SP
========================================================= */

@media screen and (max-width:768px){

  #kitchen-cta{
    padding:90px 20px;
  }

  .kitchen-cta-ttl{
    font-size:34px;
    line-height:1.7;
  }

  .kitchen-cta-sub{
    font-size:15px;
    line-height:2;
  }

  .kitchen-cta-btn{
    width:100%;
    min-width:inherit;

    height:62px;
    font-size:15px;
  }

  .cta-leaf{
    width:140px;
  }

}

/* =========================================================
   Footer
========================================================= */

#kitchen-footer{
  background:
  linear-gradient(
    180deg,
    #6b4a36 0%,
    #4d3426 100%
  );

  color:#fff;

  padding-top:90px;
}

.kitchen-footer-inner{
  max-width:1200px;
  margin:auto;

  padding:0 20px 70px;

  display:grid;
  grid-template-columns:
  1.4fr
  1fr
  1fr;

  gap:60px;
}

/* ロゴ */

.k-footer-logo img{
	width:260px;
	margin-bottom:24px;
	filter: brightness(0) invert(1);
}

.k-footer-logo p{
	line-height:2;
	color:rgba(255,255,255,.82);
}

/* ナビ */

.k-footer-nav{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.k-footer-nav a{
  color:#fff;
  text-decoration:none;

  transition:.3s;
}

.k-footer-nav a:hover{
  opacity:.7;
}

/* 情報 */

.k-footer-info p{
  line-height:2;
  margin-bottom:20px;

  color:rgba(255,255,255,.82);
}

.k-footer-info a{
  color:#ffcf8d;
  text-decoration:none;

  font-size:22px;
  font-weight:700;
}

/* コピー */

.k-footer-copy{
  border-top:
  1px solid rgba(255,255,255,.1);

  text-align:center;

  padding:24px 20px;

  font-size:13px;

  color:rgba(255,255,255,.6);
}

/* =========================================================
   SP
========================================================= */

@media screen and (max-width:768px){

  #kitchen-footer{
    padding-top:70px;
  }

  .kitchen-footer-inner{
    grid-template-columns:1fr;
    gap:45px;

    text-align:center;
  }

  .k-footer-logo img{
    width:220px;
  }

  .k-footer-nav{
    align-items:center;
  }

  .k-footer-info a{
    font-size:20px;
  }

}