/*
Theme Name: Linowa
Template: twentytwentyfive
*/

/* =========================================
   Base
========================================= */

body {
  background-color: #ffffff !important;
}

/* 固定ページの wrapper 先頭余白を消す */
.page .linowa-wrapper {
  margin-block-start: 0 !important;
  padding-block-start: 0 !important;
}

/* =========================================
   光翠リンク（任意で使う専用クラス）
========================================= */

.link-hikarisui {
  color: #6FB8B4;
  font-weight: 600;
  text-decoration: none;
}

.link-hikarisui:hover {
  opacity: 0.7;
}


/* ============================
   紺色リンク（フッターなど共通）
   class="link-konn"
============================ */

.link-konn {
  color: #1A2E36;
  text-decoration: none;
   font-weight: 600;
  transition: color 0.2s ease;
}

.link-konn:hover,
.link-konn:focus {
  color: #1b2c33; /* #0a1a1f を少しだけ明るくした紺 */
}
/* =========================================
   Linowa 全体の strong を確実に太字にする
   （テーマの上書きを防ぐために !important を使用）
========================================= */

.linowa-wrapper strong,
.linowa-container strong,
.wp-block-post-content strong {
  font-weight: 700 !important;
}


/* =========================================
   alignfull（画像だけ）補正
========================================= */

.wp-block-image.alignfull,
.wp-block-cover.alignfull {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  box-sizing: border-box !important;
}

/* =========================================
   WordPress の中央寄せロジック復元
========================================= */

.wp-block-group.is-layout-constrained {
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100%;
}

/* =========================================
   Reset（安全版）
========================================= */

.wp-block-group,
.wp-block-columns,
.wp-block-column,
.wp-block-template-part {
  padding: 0;
  /* margin: 0 !important; ← 削除（中央寄せ破壊） */
}





p,
h1, h2, h3, h4, h5, h6,
.wp-block-image,
.wp-block-query,
table {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding-left: 1.2em;
}

:root {
  --wp--style--block-gap: 0 !important;
}

/* =========================================
   Main Wrapper（PC 900px）
========================================= */

.linowa-wrapper {
  max-width: 680px;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}


@media (max-width: 768px) {
  .linowa-wrapper {
    max-width: 100%;
  }
}


/* ================================
   linowa-container（本文の共通ラッパー）
   PC：中央 680px
   スマホ：左右20pxの余白
================================ */

.linowa-container {
  max-width: 680px;        /* PC の本文幅 */
  margin-left: auto;       /* 中央寄せ（左） */
  margin-right: auto;      /* 中央寄せ（右） */
  width: 100%;             /* 幅は常に100% */
}

/* スマホだけ左右20pxの余白をつける */
@media (max-width: 768px) {
  .linowa-container {
    padding-left: 20px;    /* スマホ左余白 */
    padding-right: 20px;   /* スマホ右余白 */
    max-width: 100%;       /* スマホは画面いっぱい */
  }
}



/* =========================================
   front-container（本文だけスマホ余白）
========================================= */

@media (max-width: 768px) {
  .front-container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* =========================================
   スマホだけ featured image を全幅にする
========================================= */

@media (max-width: 768px) {
  .linowa-featured-responsive {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
}

/* =========================================
   Header / Navigation / Search
========================================= */

a:focus,
a:active,
.wp-block-navigation a:focus,
.wp-block-navigation a:active,
.wp-block-navigation__responsive-container a:focus,
.wp-block-navigation__responsive-container a:active {
  outline: none !important;
  box-shadow: none !important;
}

/* ハンバーガー */
.wp-block-navigation__responsive-container-open {
  padding: 16px;
}

.wp-block-navigation__responsive-container-open svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.5;
  color: #2f2f2f;
  transition: 0.2s ease;
}

@media (max-width: 768px) {
  header .wp-block-navigation__responsive-container-open {
    padding: 0 !important;
  }
}



/* =========================================
   Header Membrane（光翠の膜）
========================================= */

header,
header.wp-block-template-part,
header.wp-block-group {
  position: relative;
  min-height: 1px;
}

header::before,
header.wp-block-template-part::before,
header.wp-block-group::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: #6FB8B4;
  z-index: 10000; /* ← ヘッダーより前に出すために上げる */
  pointer-events: none;
  transition: background 1.6s ease-in-out,
              height 1.6s ease-in-out,
              opacity 1.6s ease-in-out;
}

@media (max-width: 768px) {
  header::before,
  header.wp-block-template-part::before,
  header.wp-block-group::before {
    height: 8px;
  }
}

/* ================================
   ヘッダーの上余白（PC：6px / スマホ：8px）
================================ */

.header-horizontal {
  margin-top: 6px;   /* PC の上余白 */
}

@media (max-width: 768px) {
  .header-horizontal {
    margin-top: 8px; /* スマホの上余白 */
  }
}

/* ================================
   linowa-subheader を画面上部に固定する
   ※ トップページでは固定しない
================================ */

/* トップページ以外で固定する（PC） */
body:not(.home) .linowa-subheader {
  background-color: #fff;
  position: fixed;
  top: 0px;   /* PC：膜の高さぶん下げる */
  left: 0;
  width: 100%;
  z-index: 9999;
}

/* スマホでは top を 8px に変更 */
@media (max-width: 768px) {
  body:not(.home) .linowa-subheader {
    top: 8px;  /* スマホ：膜の高さぶん下げる */
  }
}


/* オーバーレイメニューを最前面にしつつ、膜の下に揃える */
.wp-block-navigation__responsive-container,
.wp-block-navigation__responsive-container.is-menu-open {
  z-index: 20000;
  top: 6px; /* PC */
}

/* スマホ */
@media (max-width: 768px) {
  .wp-block-navigation__responsive-container,
  .wp-block-navigation__responsive-container.is-menu-open {
    top: 8px; /* スマホの膜の高さ */
  }
}


/* ================================
   本文がサブヘッダーの下に隠れないように余白を作る
   ※ トップページは除外
================================ */

body:not(.home) {
  padding-top: 106px;      /* PC のサブヘッダー高さに合わせる */
}

/* スマホ時の余白調整 */
@media (max-width: 768px) {
  body:not(.home) {
    padding-top: 108px;    /* スマホ用の余白 */
  }
}



/* トップページ：最初は隠す */
.home .linowa-subheader {
  position: fixed;
  top: 0px;
  left: 0;
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.4s ease, transform 0.4s ease, height 0.3s ease;
  z-index: 9999;
  background-color: transparent; /* ← 最初は透明でOK */
}

/* スマホ */
@media (max-width: 768px) {
  .home .linowa-subheader {
    top: 8px;
  }
}

/* スクロール後：白背景で表示 */
.home .linowa-subheader.is-visible {
  height: auto;
  opacity: 1;
 transform: none !important;
  overflow: visible;
  background-color: #fff; /* ← ここで白にする */
}


/* ================================
   検索ボックス（入力欄）
================================ */

.linowa-search input[type="search"],
.wp-block-search__input {
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  padding: 0.6rem 0.8rem;
  font-size: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.linowa-search input[type="search"]:focus,
.wp-block-search__input:focus {
  border-color: #6FB8B4;
  box-shadow: 0 0 0 2px rgba(111,184,180,0.25);
  outline: none;
}


/* ================================
   検索ボタン
================================ */

.linowa-search button,
.wp-block-search__button {
  background: #6FB8B4;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0.6rem 1rem;
  transition: background 0.2s ease;
}

.linowa-search button:hover,
.wp-block-search__button:hover {
  background: #5AA9A5;
}


/* ================================
   虫眼鏡アイコン（検索アイコン）
================================ */

.nav-search-icon > a {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url('/wp-content/themes/linowa/icons/search-337.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  text-indent: -9999px;
  overflow: hidden;
}


/* =========================================
検索ページ：アイキャッチを100px正方形に固定
========================================= */

/* 画像コンテナを100px四方に固定 */
.search-container .wp-block-post-featured-image,
.search-container .wp-block-post-featured-image a {
    width: 100px !important;
    height: 100px !important;
    min-width: 100px !important;
    min-height: 100px !important;
    max-width: 100px !important;
    max-height: 100px !important;
    display: block;
    overflow: hidden;
}

/* 画像本体も100px正方形に強制 */
.search-container .wp-block-post-featured-image img {
    width: 100px !important;
    height: 100px !important;
    object-fit: cover !important;
    display: block;
}






/* ================================
   ハンバーガーメニューの黒枠を消す
================================ */

.wp-block-navigation__responsive-container-open:focus,
.wp-block-navigation__responsive-container-open:active,
.wp-block-navigation__responsive-container-close:focus,
.wp-block-navigation__responsive-container-close:active,
.wp-block-navigation__toggle:focus,
.wp-block-navigation__toggle:active,
button.wp-block-navigation__responsive-container-open:focus,
button.wp-block-navigation__responsive-container-close:focus {
  outline: none !important;
  box-shadow: none !important;
}




/* =========================================
   Linowa Login / Logout Icon System（完全復元）
========================================= */

.linowa-login-link > a,
.linowa-logout-link > a {
  font-size: 0 !important;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  position: relative;
}

/* 未ログイン時 */
body:not(.logged-in) .linowa-login-link { display: block; }
body:not(.logged-in) .linowa-logout-link { display: none; }

body:not(.logged-in) .linowa-login-link > a::after {
  content: "";
  width: 24px;
  height: 24px;
  background-image: url('/wp-content/themes/linowa/icons/login-key.svg');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.85;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

/* ログイン時 */
body.logged-in .linowa-login-link { display: none; }
body.logged-in .linowa-logout-link { display: block; }

body.logged-in .linowa-logout-link > a::after {
  content: "";
  width: 24px;
  height: 24px;
  background-image: url('/wp-content/themes/linowa/icons/logout-key.svg');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.85;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

/* ================================
   フッター（PC は 40px、スマホは 20px）
================================ */

.linowa-footer {
  background-color: #001f3f;
  color: #ffffff;
  padding-left: 40px !important;   /* PC 左余白 */
  padding-right: 40px !important;  /* PC 右余白 */
}

.linowa-footer a {
  color: #ffffff;
}

/* スマホ時は左右 20px に縮める */
@media (max-width: 768px) {
  .linowa-footer {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ======================================================
   Linowa：フッター全体の静かなトーン
   - 紺背景に白文字がふわっと浮く
   - 余白は軽く、呼吸するように
====================================================== */

footer {
  background-color: #0a1a1f; /* 深い紺（Linowaの夜の色） */
  padding: 32px 0;
  color: #ffffff;
}

/* ======================================================
   Linowa：フッターのログイン／ログアウトリンク切り替え
   - login-link と logout-link は常に存在する前提
   - WordPress の body.logged-in を利用して表示制御
====================================================== */

/* ▼ 未ログイン（ログアウト状態） */
body:not(.logged-in) .login-link {
  display: inline-block;
}
body:not(.logged-in) .logout-link {
  display: none;
}

/* ▼ ログイン状態 */
body.logged-in .login-link {
  display: none;
}
body.logged-in .logout-link {
  display: inline-block;
}

/* ======================================================
   Linowa：フッターリンクのデザイン
   - 白文字
   - さりげない余白
   - hover は光らせず、静かに薄くする
====================================================== */

footer .login-link,
footer .logout-link {
  color: #ffffff;        /* 紺背景に溶ける白 */
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;      /* 強すぎない、軽い存在感 */
  padding: 4px 0;
  opacity: 0.9;          /* 少しだけ薄くして"さりげなさ"を出す */
  transition: opacity 0.25s ease;
}


/* ======================================================
   Linowa：フッター内のテキスト（補助）
====================================================== */

footer p,
footer small {
  color: #ffffff　;
  font-size: 13px;
  margin: 6px 0;
}


/* ======================================================
   Linowa：フッターリンクの左に「キラッ」アイコン
   - すべての footer 内リンクに ✦ を付ける
   - ログイン／ログアウトだけでなく他のメニューにも適用
====================================================== */

footer a {
  position: relative;        /* 疑似要素の基準位置 */
  padding-left: 18px;        /* 星の分だけ左に余白 */
}

/* 星アイコン（通常時） */
footer a::before {
  content: "✦";              /* さりげない星 */
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: rgba(255,255,255,0.8); /* 白に近い淡い光 */
  opacity: 0.8;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* hover で "キラッ" とする */
footer a:hover::before {
  opacity: 1;
  transform: translateY(-50%) scale(1.25) rotate(10deg);
}




/* ======================================================
   Linowa：フッターロゴから星がふわっと飛び出す演出
   ------------------------------------------------------
   - HTML を追加しない（疑似要素だけで実装）
   - ロゴ画像ブロックに「footer-logo」クラスを付けるだけ
   - ★が二つ、左右にカーブしながら舞い上がる
   - 紺背景に白い光が溶ける、Linowa の静かな光の演出
====================================================== */

/* ロゴ本体（疑似要素の基準位置になる） */
.footer-logo {
  position: relative;
  display: inline-block;
}

/* ------------------------------------------------------
   ★1：右上にカーブして飛ぶ星
   - content: "✦"（柔らかい光）
   - 右上方向へカーブしながら上昇
   - 少し速めのリズム
------------------------------------------------------ */
.footer-logo::after {
  content: "✦"; /* 星の形（柔らかい光） */
  position: absolute;
  top: 8%;       /* ロゴの右上あたりから出る */
  right: -6px;
  font-size: 12px;
  color: rgba(255,255,255,0.9); /* 白に近い光 */
  opacity: 0;   /* 最初は透明 */
  transform: translate(0, 0) scale(0.5); /* 小さく待機 */
  animation: linowa-star-curve-right 4s ease-in-out infinite;
}

/* ------------------------------------------------------
   ★2：左上にカーブして飛ぶ星
   - content: "✧"（繊細な光）
   - 左上方向へカーブしながら上昇
   - 少し遅れて動く
------------------------------------------------------ */
.footer-logo::before {
  content: "✧"; /* 星の形（繊細な光） */
  position: absolute;
  top: 14%;      /* 少し下から出る */
  right: 10px;
  font-size: 10px;
  color: rgba(255,255,255,0.7); /* 少し弱い光 */
  opacity: 0;   /* 最初は透明 */
  transform: translate(0, 0) scale(0.5);
  animation: linowa-star-curve-left 4.5s ease-in-out infinite;
}

/* ======================================================
   ★1：右上へカーブして飛ぶ軌道
   ------------------------------------------------------
   - translate(X, Y) でカーブを表現
   - scale で光の強弱を表現
   - opacity で出現→消失の流れを作る
====================================================== */
@keyframes linowa-star-curve-right {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.5); }
  10%  { opacity: 1; transform: translate(6px, -5px) scale(1.1); }
  30%  { opacity: 0.8; transform: translate(16px, -14px) scale(1); }
  60%  { opacity: 0.4; transform: translate(28px, -24px) scale(0.8); }
  100% { opacity: 0; transform: translate(40px, -34px) scale(0.5); }
}

/* ======================================================
   ★2：左上へカーブして飛ぶ軌道
   ------------------------------------------------------
   - 右上とは逆方向にカーブ
   - タイミングをずらして自然な動きに
====================================================== */
@keyframes linowa-star-curve-left {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.5); }
  15%  { opacity: 1; transform: translate(-6px, -4px) scale(1.1); }
  35%  { opacity: 0.8; transform: translate(-14px, -12px) scale(1); }
  65%  { opacity: 0.4; transform: translate(-24px, -22px) scale(0.8); }
  100% { opacity: 0; transform: translate(-34px, -32px) scale(0.5); }
}


/* ======================================================
   Linowa：フッターの静かな演出（3つ）
   ------------------------------------------------------
   1. ごく弱い揺らぎのグラデーション
   2. サイトタイトルの微弱な光のにじみ
   3. 右下に固定の小さな星（✦）
====================================================== */

/* ------------------------------------------------------
   1. フッター全体のごく弱い揺らぎのグラデーション
   - 紺の深さが 3% だけ変わる
   - ほぼ気づかれないが、深度が出る
------------------------------------------------------ */
footer {
  background: linear-gradient(
    to bottom,
    #0a1a1f 0%,   /* 上：深い紺 */
    #08161b 100%  /* 下：さらに深い紺（ほんの少しだけ） */
  );
  position: relative; /* 右下の星のために必要 */
}



/* ------------------------------------------------------
   3. フッター右下に固定の小さな星（✦）
   - 動かない星
   - "世界の底に沈んでいる光" のような存在
------------------------------------------------------ */
footer::after {
  content: "✦";
  position: absolute;
  bottom: 12px;
  right: 16px;
  font-size: 10px;
  color: rgba(255,255,255,0.25); /* ほぼ気づかれない淡い光 */
  pointer-events: none; /* クリックを邪魔しない */
}





/* =========================================
   Archive Cards
========================================= */

.linowa-archive-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px 0;
  border-bottom: 1px solid #6FB8B4;
}

.linowa-archive-body {
  display: flex;
  flex-direction: row;
  gap: 24px;
  justify-content: space-between;
  align-items: flex-start;
}

.linowa-archive-thumb {
  width: 220px;
  height: 146px;
  flex-shrink: 0;
  overflow: hidden;
 
}

.linowa-archive-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .linowa-archive-card {
    gap: 8px;
    padding: 24px 0;
  }

  .linowa-archive-body {
    gap: 12px;
  }

  .linowa-archive-thumb {
    width: 120px !important;
    height: 120px !important;
  }
}


/* recipeカード用css */

/* グリッド：スマホ2列、PC3列、余白20px */
.linowa-recipe-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
}

/* カード本体 */
.linowa-recipe-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 画像コンテナに比率を固定（最重要） */
.linowa-recipe-card .wp-block-post-featured-image {
  width: 100%;
  aspect-ratio: 3 / 4; /* ← これがズレを完全に止める */
  overflow: hidden;
  display: block;
}

/* 画像本体の調整 */
.linowa-recipe-card .wp-block-post-featured-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

/* タイトル中央寄せ */
.linowa-recipe-card .wp-block-post-title {
  text-align: center;
}

/* PC：3列 */
@media (min-width: 960px) {
  .linowa-recipe-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}


/* =========================================
   OuterLayer Cards（PC・タブレット）
   → 正方形・中央配置
========================================= */

.linowa-card {
  padding: 0px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  text-align: center;
}

.linowa-card img {
  width: 100%;
  aspect-ratio: 1 / 1;   /* PCでも正方形 */
  object-fit: cover;

  margin: 0 auto;
}

.linowa-card h3 {
  margin: 8px 0 4px;
  font-size: 16px ;
  font-weight: 600;
}

.linowa-card p {
  margin: 0 0 8px;
}

.linowa-card a {
  color: #6FB8B4; 
  font-weight: 600;
  text-decoration: none;
  font-size: 16px ;
}

.linowa-card a:hover {
  opacity: 0.7;
}

/* =========================================
   OuterLayer Cards（スマホ）
   → 画像は120pxの正方形・中央
========================================= */

@media (max-width: 768px) {

  .linowa-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    padding: 0;
    text-align: left; 
  }

  /* figure が横幅を広げるのを止める */
  .linowa-card figure {
    margin: 0;
    padding: 0;
    width: 120px;      /* ← これが決定打 */
    flex-shrink: 0;    /* ← 画像が潰れないように固定 */
  }

  .linowa-card img {
    width: 120px;
	
    height: 120px;
    object-fit: cover;
    display: block;
    margin-right: 5px; margin-bottom: 5px;
  }

  .linowa-card h3,
  .linowa-card p {
    text-align: left;
    margin: 0 0 6px;
  }

  .linowa-card a {
    text-align: left;
    display: inline-block;
    margin-top: 0;
  }
}






/* ============================
   OuterLayernew PC用 front-card
   ============================ */
@media (min-width: 769px) {

  .linowa-mix-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 200px); /* 3カラム */
    gap: 20px; /* カード間の余白 */
    justify-content: center; /* 中央揃え */
  }

  .front-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center;
    margin-bottom: 20px; /* ← Hizuki の希望どおり */
  }

  .front-card-thumb img {
    width: 200px;   /* ← 画像幅を固定 */
    height: 200px;  /* ← 正方形 */
    object-fit: cover;
    display: block;
  }

  .front-card-title {
    font-size: 15px;      /* ← 太く＆15px */
    font-weight: 700;     /* ← 太字 */
    color: #333;
    text-decoration: none;
    display: block;
    line-height: 1.4;
  }

  .front-card-title:hover {
    opacity: 0.7;
  }
}
/* ============================
   OuterLayernew スマホ専用 front-card
   ============================ */
@media (max-width: 768px) {

  .front-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px; /* PCと揃えても美しい */
  }

  .front-card-thumb img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
  }

  .front-card-title {
    flex: 1;
    font-size: 15px;      /* ← PCと統一 */
    font-weight: 700;     /* ← 太字 */
    color: #333;
    text-decoration: none;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
  }
}



/* ============================
   OuterLayernew PC用 guide-card
   ============================ */
/* ============================================
   共通：post-template（ul）の余白を消す
============================================ */
.guide-card {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

/* ============================================
   PC用（3カラム × 200px）
============================================ */
@media (min-width: 769px) {

  /* post-template を grid にする */
  .guide-card {
    display: grid;
    grid-template-columns: repeat(3, 200px);
    gap: 20px;
    justify-content: center;
  }

  /* 各記事カード（li） */
  .guide-card .wp-block-post {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  /* 画像（正方形200px） */
  .guide-card .wp-block-post .wp-block-post-featured-image img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    display: block;
    margin: 0 auto;
  }

  /* タイトル */
  .guide-card .wp-block-post .wp-block-post-title {
    font-size: 15px;
    font-weight: 700;
    color: #333;
    text-decoration: none;
    line-height: 1.4;
  }

  .guide-card .wp-block-post .wp-block-post-title:hover {
    opacity: 0.7;
  }
}

/* ============================================
   スマホ用（縦並び × 80pxサムネ）
============================================ */
@media (max-width: 768px) {

  /* li（記事カード）を横並びに */
  .guide-card .wp-block-post {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  /* ★ inline-style を上書きして 80px に強制 ★ */
  .guide-card .wp-block-post-featured-image,
  .guide-card .wp-block-post-featured-image a,
  .guide-card .wp-block-post-featured-image img {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    min-height: 80px !important;
    max-width: 80px !important;
    max-height: 80px !important;
    object-fit: cover !important;
  }

  /* タイトル */
  .guide-card .wp-block-post-title {
    flex: 1;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}



/* =========================================
   Featured Image Aspect Ratios
========================================= */

.linowa-featured-16-9 img { aspect-ratio: 16/9; object-fit: cover; }
.linowa-featured-4-3 img { aspect-ratio: 4/3; object-fit: cover; }
.linowa-featured-3-2 img { aspect-ratio: 3/2; object-fit: cover; }
.linowa-featured-1-1 img { aspect-ratio: 1/1; object-fit: cover; }
.linowa-featured-4-5 img { aspect-ratio: 4/5; object-fit: cover; }

/* =========================================
   InnerLayer / DeepLayer / Local Headers
========================================= */


.innerlayer-container {
  background-color: #f5f5f5;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.deeplayer-container {
  background-color: #000;
  color: #fff;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.deeplayer-container a {
  color: #fff !important;
}

.deeplayer-container a:hover {
  color: #D8A7A7 !important;       /* ダスティピンク */
  border-bottom-color: #D8A7A7 !important;
}



/* =========================================
   Contact Form 7
========================================= */

/* フォーム全体の雰囲気 */
.linowa-contact form {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-family: inherit;
}

/* ラベル */
.linowa-contact label {
  font-size: 15px;
  letter-spacing: 0.03em;
  color: #333;
}

/* テキスト入力・メール・電話など */
.linowa-contact input[type="text"],
.linowa-contact input[type="email"],
.linowa-contact input[type="tel"],
.linowa-contact textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  font-size: 15px;
  line-height: 1.6;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* フォーカス時の美しい光 */
.linowa-contact input:focus,
.linowa-contact textarea:focus {
  border-color: #6FB8B4; /* 光翠 */
  box-shadow: 0 0 0 3px rgba(111, 184, 180, 0.25);
  outline: none;
}

/* テキストエリア */
.linowa-contact textarea {
  min-height: 160px;
  resize: vertical;
}

/* 送信ボタン */
.linowa-contact input[type="submit"] {
  width: 120px;              /* ← ボタンの横幅を固定 */
  margin: 0 auto;            /* ← 中央寄せの決定打 */
  display: block;            /* ← margin: auto を効かせるために必要 */
  padding: 12px 0;
  text-align: center;
  border-radius: 6px;
  background: #6FB8B4;       /* 光翠 */
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background 0.25s ease, opacity 0.25s ease;
}

.linowa-contact input[type="submit"]:hover {
  background: #5aa7a3;
}


.linowa-contact input[type="submit"]:active {
  opacity: 0.85;
}
/* フォーム全体の安全枠 */
.linowa-contact {
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  padding: 0 16px; /* スマホでのはみ出し防止 */
}

/* input / textarea のはみ出し防止 */
.linowa-contact input,
.linowa-contact textarea {
  width: 100%;
  box-sizing: border-box !important; /* ← 最重要 */
  max-width: 100%;
}


/* ----------------------------------------------
   Linowa Breadcrumb — 基本レイアウト
   パンくず全体を横並びにし、静かな流れを作る
---------------------------------------------- */
.linowa-breadcrumb {
  display: flex;              /* 子要素（p と post-terms）を横並びにする */
  align-items: center;        /* 高さを揃えて整える */
  gap: 0.4em;                 /* 要素間の最小限の余白（静かな印象） */
  flex-wrap: wrap;            /* スマホで折り返しても崩れないようにする */
}

/* ----------------------------------------------
   パンくず内の <p> の調整
   記号（›）とリンクを自然に横並びにする
---------------------------------------------- */
.linowa-breadcrumb p {
  margin: 0;                  /* 余計な上下余白を消す */
  display: flex;              /* テキストとリンクを横並びに */
  align-items: center;        /* 高さを揃える */
  gap: 0.4em;                 /* 記号とリンクの間に少し余白 */
}

/* ----------------------------------------------------
   Linowa Breadcrumb — カテゴリ部分のズレ修正
   post-terms が内部で span を生成するため baseline がズレる問題を解消
---------------------------------------------------- */
.linowa-breadcrumb-cat {
  display: flex;              /* 横並びにする */
  align-items: center;        /* 縦位置を中央に揃える（ズレ防止の核心） */
  gap: 0.4em;                 /* 他のパンくずと同じ余白 */
  margin: 0;                  /* 余計な上下余白を消す */
  padding: 0;
}

/* ----------------------------------------------------
   post-terms 内の各要素（span, a）のスタイル統一
   WordPress が勝手に付けるフォント差を吸収する
---------------------------------------------------- */
.linowa-breadcrumb-cat span,
.linowa-breadcrumb-cat a {
  font-size: inherit;         /* 親と同じサイズに統一 */
  font-weight: inherit;       /* 親と同じ太さに統一 */
  color: inherit;             /* 親の色に統一（ズレ防止） */
  line-height: 1;             /* baseline のズレを防ぐ */
  display: flex;              /* アイテムを中央揃えに */
  align-items: center;
}

/* ----------------------------------------------------
   パンくず全体の文字スタイルを統一
   これで p と post-terms の見た目が完全に一致する
---------------------------------------------------- */
.linowa-breadcrumb,
.linowa-breadcrumb p,
.linowa-breadcrumb a {
  font-size: 0.9rem;          /* Linowa の静かなサイズ感 */
  font-weight: 400;           /* 過度に太くしない */
  color: var(--wp--preset--color--accent-7); /* Linowa の静かな文字色 */
  line-height: 1;             /* baseline を揃える */
}

/* ----------------------------------------------------
   パンくず内リンクの装飾
---------------------------------------------------- */
.linowa-breadcrumb a {
  text-decoration: none;
}


/* ----------------------------------------------
   パンくず内のリンクの装飾
   下線を消して静かな印象に
---------------------------------------------- */
.linowa-breadcrumb a {
  text-decoration: none;      /* 下線を消す（Linowa の静けさに合わせる） */
}


/* ----------------------------------------------
   footerマージン削除
---------------------------------------------- */
footer.wp-block-template-part {
  margin-top: 0 !important;
}

/* ---------------------------------------------
  recipeフィールド 親ボックス：2列レイアウトを作る
   --------------------------------------------- */
.recipebox {
  display: grid;                     /* 2カラムのグリッド */
  grid-template-columns: 1fr 1fr;    /* 均等2列 */
  column-gap: 20px;                  /* 列間の余白 */
  row-gap: 20px;                     /* 行間の余白 */
  padding: 0 !important;             /* WP が勝手に入れる余白を無効化 */
}


/* ---------------------------------------------
   各カード（section）の外側余白をゼロにする
   → これが「recipe-field-body 同士の左端が揃う」決定打
   --------------------------------------------- */
.recipe-field {
  margin: 0 !important;              /* section のデフォルト margin を消す */
  padding: 0 !important;             /* WP が付ける padding を消す */
  text-align: left !important;       /* WP の中央寄せを打ち消す */
}


/* ---------------------------------------------
   タイトル（h2）の余白を統一
   → カードごとのタイトル高さの違いによるズレを防ぐ
   --------------------------------------------- */
.recipe-field-title {
  margin: 0 0 8px 0 !important;      /* 下だけ余白を付ける */
  padding: 0 !important;
}


/* ---------------------------------------------
   本文（recipe-field-body）
   → 左端が揃わない原因の「余白」を完全にゼロにする
   → display:block でインライン挙動を止める
   --------------------------------------------- */
.recipe-field-body {
  display: block !important;         /* インライン挙動を止める（超重要） */
  text-align: left !important;       /* 左揃えを強制 */
  margin: 0 !important;              /* 外側余白をゼロに */
  padding: 0 !important;             /* 内側余白もゼロに */
  padding-left: 0 !important;        /* WP が勝手に付ける左インデントを消す */
  margin-left: 0 !important;         /* 左マージンの残りカスも消す */
}

/* steps と note だけ 1 列で表示（2 カラムをまたぐ） */
.recipe-field.steps,
.recipe-field.note {
  grid-column: 1 / -1;   /* グリッド全幅を使う */
}
.recipe-field-title {
  background: rgba(0,0,0,0.05);
  font-size: 16px;
  line-height: 36px;                 /* ← これが縦位置を整える鍵 */
  font-weight: 600 !important;
  text-align: center;
}




/* ---------------------------------------------
   Related セクション全体（Outer / Inner / Deep 共通）
   --------------------------------------------- */
.related-outerlayer,
.related-innerlayer,
.related-deeplayer {
  padding: 12px 16px;
  margin: 20px 0;
  border: 1px solid rgba(0,0,0,0.1);   /* 静かな枠線 */
  background: rgba(255,255,255,0.45);  /* 透明感だけ残す */
  border-radius: 0;                    /* 角丸なし */
  text-align: left;
  font-size: 0.9rem;                   /* 全体の文字を小さく */
}


/* ---------------------------------------------
   セクション内の h2（触らないけど余白だけ整える）
   --------------------------------------------- */
.related-outerlayer > h2,
.related-innerlayer > h2,
.related-deeplayer > h2 {
  margin: 0 0 8px 0;                   /* 下だけ余白 */
}


/* ---------------------------------------------
   リンクを包む .related-item
   --------------------------------------------- */
.related-item {
  margin: 0;
  padding: 0;
}


/* ---------------------------------------------
   リンクそのもの（小さめ・静か・光翠で反応）
   --------------------------------------------- */
.related-item a {
  display: inline-block;
  text-decoration: none;
  color: #333;
  font-size: 18px;                   /* 文字小さめ */
  padding: 2px 0;
  border-bottom: 1px solid transparent;
  transition: 0.2s ease;
}

.related-item a:hover {
  border-bottom-color: #6FB8B4;        /* Linowa の光翠 */
  color: #6FB8B4;
}


/* ---------------------------------------------
   pcだけ左右20px
   --------------------------------------------- */
@media (min-width: 768px) {
  .related-outerlayer,
  .related-innerlayer,
  .related-deeplayer {
    margin-left: 20px !important; 
    margin-right: 20px !important;
  }
}



/* Innergarden ローカルヘッダー全体 */
.Innergarden-header {
    display: flex;
    align-items: center; 
    background-color: #5A5A5A; /*グレー */ color: #fff;
    padding-right: var(--wp--preset--spacing--30);
    margin: 0;
}

/* 見出し */
.Innergarden-header h4 {
    margin: 0;
    line-height: 1;
}

/* 見出しリンク */
.Innergarden-header h4 a {
    color: #fff;
    text-decoration: none;
}

/* ナビゲーションのリンク（高さを揃える） */
.Innergarden-header .wp-block-navigation a {
    color: #fff;
    text-decoration: none;
    line-height: 1;          /* ← これが最重要 */
    padding-top: 3px !important; /* ← WP の微妙なズレを消す */
    padding-bottom: 0 !important;
    display: flex;
    align-items: center;     /* ← a 内の文字も中央に */
}

/* ナビゲーションの li（高さを揃える） */
.Innergarden-header .wp-block-navigation__container > li {
    display: flex;
    align-items: center;     /* ← li 自体を中央揃え */
    margin: 0;
    
}

/* ホバー */
.Innergarden-header a:hover {
    color: rgba(255, 255, 255, 0.85);
}



/* --------------------------------------------------------------
   OuterLayer ローカルナビ（スマホ基準）
   - 横スクロール
   - 下線なし
   - 左端に光翠の丸い点
   - 上下の余白なし、左右10pxのみ
   - 右端フェード（スマホのみ）
   -------------------------------------------------------------- */

/* nav（外側）を横スクロール領域にする */
nav.outerlocalnav {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    display: block;
    position: relative;
}

/* ul（内側）を横並びにし、左右に余白を付ける */
nav.outerlocalnav .wp-block-navigation__container {
    display: inline-flex;
    flex-wrap: nowrap;
    padding-left: 10px;   /* 左に静かな余白 */
    padding-right: 20px;  /* ← フェードに飲まれないための余白（スマホ用） */
    margin-left: 0 !important;
}

/* スクロールバーを消す（スマホでのノイズ除去） */
nav.outerlocalnav::-webkit-scrollbar {
    display: none;
}

/* リンクの基本スタイル（上下余白なし） */
nav.outerlocalnav a {
    display: inline-flex;
    align-items: center;
    gap: 6px;             /* 点と文字の間の余白 */
    padding: 0 10px;      /* 左右だけ余白、上下なし */
    text-decoration: none;
    color: #000;
    font-weight: 500;
}

/* a の中の span に点を付ける */
nav.outerlocalnav a .wp-block-navigation-item__label {
    position: relative;
    padding-left: 14px; /* 点の分だけ左に余白 */
}

/* 光翠の点（OuterLayer は6px） */
nav.outerlocalnav a .wp-block-navigation-item__label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 6px;
    height: 6px;
    background-color: #6FB8B4; /* 光翠 */
    border-radius: 50%;
    transform: translateY(-50%);
}

/* --------------------------------------------------------------
   スマホ（〜679px）
   - 右端フェードで「続きがある」気配
   -------------------------------------------------------------- */
@media (max-width: 679px) {
    nav.outerlocalnav {
        mask-image: linear-gradient(
            to right,
            black 80%,
            rgba(0,0,0,0.4) 90%,
            transparent 100%
        );
    }
}

/* --------------------------------------------------------------
   PC（680px〜）
   - 横スクロール解除
   - 二行OK
   - 中央揃え
   - フェード無効化
   - アクティブだけ丸を少し大きく
   -------------------------------------------------------------- */
@media (min-width: 680px) {

    nav.outerlocalnav {
        overflow: visible;        /* 横スクロール解除 */
        white-space: normal;      /* 折り返しOK */
        text-align: center;       /* 中央揃え */
        max-width: 680px;         /* PCのコンテナ幅 */
        margin: 0 auto;
        padding-left: 0;
        padding-right: 0;
        mask-image: none;         /* ← フェードを完全に無効化 */
    }

    nav.outerlocalnav .wp-block-navigation__container {
        display: inline-flex;
        flex-wrap: wrap;          /* 二行OK */
        justify-content: center;  /* 中央揃え */
        gap: 6px 12px;            /* 行間・列間の余白 */
        padding-left: 0;
        padding-right: 0;
    }

    /* PCではアクティブだけ丸を少し大きく */
    nav.outerlocalnav .current-menu-item a .wp-block-navigation-item__label::before,
    nav.outerlocalnav .current-menu-ancestor a .wp-block-navigation-item__label::before {
        width: 8px;
        height: 8px;
    }
}



/* --------------------------------------------------------------
   Inner Garden ローカルナビ（スマホ基準）
   - 横スクロール
   - 右端フェードで「続きがある」気配（スマホのみ）
   - 左を少し押し出してスクロールUIを直感化
   - 文字は小さく、点は光翠で6px
   -------------------------------------------------------------- */

nav.innerlocalnav {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    display: block;
    position: relative;
}

/* 横並び＋押し出し */
nav.innerlocalnav .wp-block-navigation__container {
    display: inline-flex;
    flex-wrap: nowrap;
    padding-left: 14px;   /* 左を押し出す → スクロールUIに見える */
    padding-right: 20px;  /* 右に余白 → フェードに飲まれない */
}

/* スクロールバー非表示 */
nav.innerlocalnav::-webkit-scrollbar {
    display: none;
}

/* リンク（Inner Garden の声：小さく・軽く・静かに） */
nav.innerlocalnav a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    font-size: 14px;
    font-weight: 400;
    color: #333;
    opacity: 0.9;
}

/* 光翠点（Innerは6pxでOK） */
nav.innerlocalnav a .wp-block-navigation-item__label {
    position: relative;
    padding-left: 10px;
}

nav.innerlocalnav a .wp-block-navigation-item__label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 6px;
    height: 6px;
    background-color: #6FB8B4; /* 光翠 */
    border-radius: 50%;
    transform: translateY(-50%);
}

/* --------------------------------------------------------------
   スマホ（〜679px）
   - フェードを適用
   -------------------------------------------------------------- */
@media (max-width: 679px) {
    nav.innerlocalnav {
        mask-image: linear-gradient(
            to right,
            black 75%,
            rgba(0,0,0,0.4) 90%,
            transparent 100%
        );
    }
}

/* --------------------------------------------------------------
   PC（680px〜）
   - フェードを完全に無効化
   - 中央揃えで静かに整う
   -------------------------------------------------------------- */
@media (min-width: 680px) {

    nav.innerlocalnav {
        mask-image: none;   /* ← PCではフェードを消す */
        overflow: visible;
        white-space: normal;
        text-align: center;
        max-width: 680px;
        margin: 0 auto;
        padding-left: 0;
        padding-right: 0;
    }

    nav.innerlocalnav .wp-block-navigation__container {
        display: inline-flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 10px;
        padding-left: 0;
        padding-right: 0;
    }
}



/* =========================================
   Linowa Accordion（共通）
   角丸なし・静かな直線デザイン
========================================= */

/* アコーディオン全体 */
.linowa-accordion {
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;

}

/* summary（ボタン部分） */
.linowa-accordion summary {
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;

  padding: 14px 12px;

  background: #5AA5A1; /* 濃い光翠 */
  color: #fff;

  list-style: none;
  position: relative;

  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  letter-spacing: 0.03em;

  transition: background 0.2s ease, opacity 0.2s ease;
}

/* hoverで少し明るく */
.linowa-accordion summary:hover {
  background: #6FB8B4;
}

/* デフォルトの矢印を消す */
.linowa-accordion summary::-webkit-details-marker {
  display: none;
}

/* ＋ アイコン（白） */
.linowa-accordion summary::after {
  content: "＋";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: #fff;
}

/* 開いたときは − に変わる */
.linowa-accordion[open] summary::after {
  content: "−";
  color: #fff;
}

/* 中身（総合ガイドの本文） */
.accordion-content {
  padding: 20px 0 8px;
  line-height: 1.8;
  color: #333;
}

.accordion-content h2 {
  font-size: 20px;
  margin: 24px 0 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.accordion-content h3 {
  font-size: 17px;
  margin: 20px 0 8px;
  font-weight: 600;
}

.accordion-content p {
  margin: 12px 0;
}

/* 閉じるボタン（中央揃え・濃い光翠 → hover で白） */
.linowa-accordion-close {
  display: block;
  margin: 20px auto 0;
  padding: 8px 14px;

  background: #5AA5A1; /* ベースは濃い光翠 */
  color: #fff;
  border: 1px solid #5AA5A1;

  cursor: pointer;
  font-size: 14px;
  border-radius: 4px;

  transition: background 0.2s ease, color 0.2s ease;
}

.linowa-accordion-close:hover {
  background: #fff;      /* hoverで白 */
  color: #5AA5A1;        /* 文字が光翠 */
  border-color: #5AA5A1;
}







/* ============================================
   Category Buttons（横並び・中央揃え・折り返し）
============================================ */

.linowa-category-tree {
  text-align: center;
}

.tree-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
}

.tree-list a {
  display: block;
  padding: 6px 10px;
  border: 1px solid #6FB8B4;
  background: #fff;
  color: #333;
  font-size: 14px;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.2s ease, color 0.2s ease;
}

.tree-list a:hover {
  background: #6FB8B4;
  color: #fff;
}

/* Cover 内のタイトルと段落に黒の透過背景（角丸なし） */
.wp-block-cover .wp-block-post-title {
  display: inline-block;
  background: rgba(0, 0, 0, 0.55); /* 黒の半透明 */
  color: #fff;
  padding: 12px 12px;
  margin: 6px auto;
  border-radius: 0; /* ← 角丸なし */
}



/* トップへ戻るボタン（Linowa 全体） */
#linowa-back-to-top {
  position: fixed;
  right: 24px;
  bottom: 100px;

  background: #5AA5A1; /* 濃い光翠 */
  color: #fff;
  padding: 10px 14px;

  font-size: 13px;
  letter-spacing: 0.05em;

  cursor: pointer;
  opacity: 0;
  pointer-events: none;

  transition: opacity 0.3s ease, background 0.2s ease;
  border-radius: 0; /* 角丸なし */
  z-index: 200;
  
}

/* ホバーで白反転（Linowa の静かな動き） */
#linowa-back-to-top:hover {
  background: #fff;
  color: #5AA5A1;
  border: 1px solid #5AA5A1;
}

/* スクロールしたら表示 */
#linowa-back-to-top.show {
  opacity: 1;
  pointer-events: auto;
}


/* ================================
   SNSボタン（テキストボタン）
================================ */
/* コンテナ：ただのブロック＋横並び */

.linowa-share-text {
  margin: 32px 0;
  font-size: 0;
  text-align: center;   /* ← 中央寄せの核心 */
}


/* ボタン本体 */
.linowa-share-text a {
  display: inline-block;
  font-size: 14px;       /* ここで文字サイズを戻す */

  padding: 6px 14px;
  margin-right: 8px;

  background: #5AA5A1;   /* 光翠 */
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.03em;
  line-height: 1.4;      /* 読みやすさ優先 */
  border-radius: 0;      /* 角丸なし */
}

/* 最後のボタンだけ右余白なし */
.linowa-share-text a:last-child {
  margin-right: 0;
}

/* ホバー：少しだけ薄く */
.linowa-share-text a:hover {
  opacity: 0.7;
}




/* ======================================================
   Linowa：ログインフォーム（全体）
   - 360px の静かな幅
   - 余白と背景の柔らかい膜
====================================================== */
.linowa-login-form {
  max-width: 360px;
  margin: 20px auto;
  padding: 24px;
  background: rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 8px;
}

/* 各フィールドの余白 */
.linowa-login-field {
  margin-bottom: 18px;
}

/* ラベル（視認性の高い濃いグレー） */
.linowa-login-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  color: #333;
}

/* 入力欄：左右のズレを完全に解消 */
.linowa-login-field input {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.3);
  background: #fff;
  color: #000;
}

/* ======================================================
   Linowa：ログイン状態を維持しますか？
====================================================== */
.linowa-login-remember {
  margin-bottom: 18px;
  font-size: 14px;
  color: #333;
}

.linowa-login-remember input[type="checkbox"] {
  margin-right: 6px;
  transform: scale(1.1); /* 少しだけ視認性UP */
}

/* ======================================================
   Linowa：パスワードをお忘れですか？リンク
====================================================== */
.linowa-password-reset-link {
  margin-top: 14px;
  text-align: right; /* 右寄せでフォームの流れが整う */
}

.linowa-password-reset-link a {
  font-size: 14px;
  color: #0a1a1f; /* 深い紺 */
  text-decoration: none;
}

.linowa-password-reset-link a:hover {
  opacity: 0.7;
}

/* ======================================================
   Linowa：ログインボタン
====================================================== */
.linowa-login-button {
  width: 100%;
  padding: 10px;
  background: #6FB8B4; /* 光翠 */
  border: none;
  border-radius: 4px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.linowa-login-button:hover {
  background: #5aa7a3;
}

/* ======================================================
   Linowa：メッセージ（エラー・通常）
====================================================== */
.linowa-login-error {
  margin-top: 12px;
  color: #c00;
  font-size: 14px;
  text-align: center;
}

.linowa-login-message {
  margin-top: 12px;
  color: #333;
  font-size: 14px;
  text-align: center;
}

/* ======================================================
   Linowa：ログアウトリンク（通常ページ用）
====================================================== */
.linowa-logout-link {
  color: #0a1a1f;
  text-decoration: none;
  font-weight: 600;
}

.linowa-logout-link:hover {
  opacity: 0.7;
}

/* ======================================================
   Linowa：ログアウト確認ページ
====================================================== */
.linowa-logout-confirm {
  text-align: center;
  padding: 40px 20px;
}

.linowa-logout-confirm p {
  font-size: 1.2rem;
  margin-bottom: 30px;
}

/* ボタン2つ（縦並び・中央寄せ） */
.linowa-logout-button,
.linowa-cancel-button {
  display: block;
  width: 200px;
  margin: 10px auto;
  padding: 12px 0;
  text-decoration: none;
  border-radius: 6px;
  font-size: 1rem;
}

/* ログアウトボタン（赤：決断の色） */
.linowa-logout-button {
  background-color: #d9534f;
  color: #fff;
}

/* キャンセルボタン（静かな灰色） */
.linowa-cancel-button {
  background-color: #f0f0f0;
  color: #333;
}

/* ======================================================
   Linowa：パスワードリセットフォーム
   - ログインフォームと同じ世界観で統一
====================================================== */
.linowa-password-reset-form {
  max-width: 360px;
  margin: 20px auto;
  padding: 24px;
  background: rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 8px;
}

.linowa-password-reset-form p {
  font-size: 14px;
  color: #333;
  margin-bottom: 18px;
  line-height: 1.6;
}

.linowa-reset-field {
  margin-bottom: 18px;
}

.linowa-reset-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  color: #333;
}

.linowa-reset-field input {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.3);
  background: #fff;
  color: #000;
}

/* パスワードリセット送信ボタン */
.linowa-reset-button {
  width: 100%;
  padding: 10px;
  background: #6FB8B4; /* 光翠 */
  border: none;
  border-radius: 4px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.linowa-reset-button:hover {
  background: #5aa7a3;
}