/* =========================================================
   site.css（丸ごと差し替え版）
   - 外側：淡い水色 / 中央：白い紙＋影
   - ロゴ：緑・下線なし（リンク一般ルールに負けない）
   - ナビ：薄いグリーン帯＋区切り線
   - 住所：郵便番号・TELは改行
   ========================================================= */

/* ===== 基本 ===== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  color: #000;
  background: #eaf3ff; /* 外側：淡い水色 */
  font-family: -apple-system, BlinkMacSystemFont, "Yu Gothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  line-height: 1.8;
}

/* リンクは基本黒でOK（ロゴは個別指定で上書き） */
a { color: #000; }
img { max-width: 100%; height: auto; display: inline-block; }

/* skip link */
.skip{
  position: absolute;
  left: -9999px;
  top: 0;
}
.skip:focus{
  left: 12px;
  top: 12px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #333;
  z-index: 9999;
}

/* ===== ヘッダー ===== */
.site-header{
  background: #fff;
  border-bottom: 1px solid #d9d9d9;
}

/* ヘッダー縦幅は「詰め」設定（ここだけに統一） */
.header-inner{
  max-width: 980px;
  margin: 0 auto;
  padding: 10px 12px 8px;
}

.header-row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.brand{ min-width: 0; }

/* 1行目：もう少し上に・詰める */
.site-kicker{
  margin: 0 0 2px 0;
  font-size: 13px;
  font-weight: 600;
  color: #000;
}

/* 肩書き：緑・小さめ */
.brand-sub{
  margin: 0 0 2px 0;
  color: #2b7f2b;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .06em;
}

/* ロゴ（h1） */
.site-logo{
  margin: 0;
  line-height: 1.05;
}

/* ここで「黒＋下線」を完全に潰す */
.site-logo a{
  color: #2b7f2b;
  text-decoration: none;
  font-weight: 600;
  font-size: 38px;
  letter-spacing: .08em;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
}
.site-logo a:hover{
  text-decoration: none;
}

/* 右上住所 */
.site-contact{
  text-align: left;
  font-size: 14px;
  line-height: 1.45;
  margin-top: 2px; /* 視覚バランス */
}
.site-contact .tel{
  display: block;        /* TELは必ず改行 */
  margin-top: 4px;
  font-weight: 800;
  font-size: 16px;
}

/* ===== ナビ（薄いグリーン帯＋余白） ===== */
.global-nav{
  background: #e6f3e6;
  border-top: 1px solid #c8e3c8;
  border-bottom: 1px solid #c8e3c8;
}

.global-nav-list{
  max-width: 980px;
  margin: 0 auto;
  padding: 12px 12px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}

.global-nav-list li{ margin: 0; }

.global-nav-list li:not(:last-child){
  padding-right: 22px;
  margin-right: 22px;
  border-right: 1px solid #b9d6b9;
}

.global-nav-list a{
  color: #000;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  display: inline-block;
  padding: 2px 0;
}
.global-nav-list a:hover{
  color: #2b7f2b;
}
.global-nav-list a.is-current{
  text-decoration: underline;
}

/* ===== 2カラム（中央紙） ===== */
.layout{
  max-width: 980px;
  margin: 30px auto;
  padding: 20px 24px 30px;
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 18px;

  background: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
  border-radius: 8px;
}

.main{ min-width: 0; }

/* ===== 本文（カード） ===== */
.hero{
  border: 1px solid #ddd;
  padding: 12px;
  background: #fff;
}
.hero-img{
  float: left;
  margin: 0 12px 6px 0;
}
.hero-text{
  margin: 0;
  font-weight: 700;
}
.hero::after{
  content: "";
  display: block;
  clear: both;
}

.card{
  margin-top: 12px;
  border: 1px solid #ddd;
  padding: 12px;
  background: #fff;
}
.card-title{
  margin: 0 0 10px 0;
  font-size: 18px;
}
.card p{ margin: 0 0 12px 0; }

.mono-block{ margin: 0 0 10px 0; }

.pill-list{
  margin: 0 0 12px 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pill-list li{
  border: 1px solid #2b7f2b;
  background: #eef9ee;
  padding: 2px 8px;
  font-weight: 700;
  font-size: 12px;
}

.cta{ margin: 12px 0 0; }
.cta-link{
  display: inline-block;
  padding: 8px 10px;
  border: 1px solid #2b7f2b;
  background: #eef9ee;
  text-decoration: none;
  font-weight: 700;
}
.cta-link:hover{ text-decoration: underline; }

.pagetop{ margin: 18px 0 0; }
.pagetop a{ text-decoration: none; }
.pagetop a:hover{ text-decoration: underline; }

/* ===== 右サイド ===== */
.aside{
  border-left: 2px double #2b7f2b;
  padding-left: 10px;
}

.box{
  border: 1px solid #ddd;
  padding: 10px;
  background: #fff;
  margin-bottom: 12px;
}
.box-title{
  margin: 0 0 8px 0;
  font-size: 14px;
}
.box-subtitle{
  margin: 0 0 10px 0;
  font-size: 14px;
  font-weight: 700;
}
.aside-text{ margin: 0 0 10px 0; }

/* 画像リンク（LINK/Q&A）が崩れないように */
.aside-links{
  margin: 10px 0 0;
  display: grid;
  gap: 10px;
}
.aside-links a{ display: block; }
.aside-links img{
  display: block; /* 画像下の隙間防止 */
  width: 100%;
  height: auto;
}

.banner-list{
  margin: 0 0 10px 1.2em;
  padding: 0;
}
.banner-img{ margin: 0; }

/* ===== フッター ===== */
.site-footer{
  border-top: 1px solid #ddd;
  padding: 18px 12px;
  text-align: center;
  font-size: 12px;
}

/* ===== スマホ ===== */
@media (max-width: 900px){
  .layout{
    grid-template-columns: 1fr;
    padding: 16px 14px 22px;
    margin: 18px 10px;
  }

  .hero-img{
    float: none;
    display: block;
    margin: 0 0 10px 0;
  }

  .aside{
    border-left: none;
    padding-left: 0;
  }

  .header-row{
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .site-logo a{
    font-size: 32px;
  }

  .global-nav-list{
    padding: 10px 12px;
  }

  .global-nav-list li:not(:last-child){
    padding-right: 14px;
    margin-right: 14px;
  }
}

/* ===== 症例（case-list）見た目を画像1の雰囲気に戻す：末尾に貼る ===== */

.case-list{
  margin: 0;
  padding: 0;
}

/* 問い（dt）＝囲みを外し、菱形を付けた紺色見出し */
.case-list dt{
  margin: 20px 0 6px;
  padding: 0;
  color: #0b2a57;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.5;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.case-list dt::before{
  content: "◆";
  margin-right: 0.45em;
  color: #2b7f2b;
  font-size: 0.82em;
  vertical-align: 0.08em;
}

/* 答え（dd）＝見出しより少し内側へ */
.case-list dd{
  margin: 0 0 20px 1.6em;
  padding: 0;
  color: #000;
  line-height: 1.9;
}

/* 答え内のリンク（紺系で上品に） */
.case-list dd a{
  color: #0b2a57;
  text-decoration: underline;
}
.case-list dd a:hover{
  color: #2b7f2b;
}

.case-intro{
  margin: 0 0 18px 0;
  padding: 14px 14px 12px;

  background: #f4f7fb;
  border: 1px solid #d7e1f0;
  border-left: 6px solid #2b7f2b;
  border-radius: 6px;
}

.case-intro h2{
  margin: 0 0 6px 0;
  font-size: 18px;
  font-weight: 800;
}

.case-intro p{
  margin: 0;
  font-size: 14px;
}

/* ===== セクション見出し（h2）を紺で強調 ===== */
.card-title{
  margin: 0 0 10px 0;
  padding: 8px 10px;
  color: #0b2a57;                /* 紺 */
  font-weight: 800;
  font-size: 18px;

  background: #f4f7fb;           /* 薄い青灰 */
  border: 1px solid #d7e1f0;
  border-left: 6px solid #2b7f2b;/* 緑アクセント */
  border-radius: 6px;
}

.pill-list a{
  color: #0b2a57;        /* 紺 */
  text-decoration: none; /* 下線なし */
  display: inline-block;
}

.pill-list a:hover{
  text-decoration: underline;
}

/* ===== 右サイド information 読みやすく ===== */
.box-subtitle{
  color: #0b2a57;
  line-height: 1.5;
}

.aside-text{
  line-height: 1.6;
}

.aside-text strong{
  display: block;
  margin-top: 6px;
}

/* メールは目立ちすぎない紺＋下線はhoverだけ */
.aside-text a{
  color: #0b2a57;
  text-decoration: none;
}
.aside-text a:hover{
  text-decoration: underline;
}

.site-footer{
  margin-top: 40px;
  padding: 24px 12px;
  text-align: center;
  background: #ffffff;
  border-top: 1px solid #ddd;
  font-size: 13px;
  color: #333;
}

.footer-name{
  margin: 0 0 6px;
  font-weight: 600;
  color: #0b2a57;
}

.footer-info{
  margin: 0 0 6px;
}

/* =========================================================
   共感型チューニング（温かみを少し足す）
   ========================================================= */

/* 外側の水色を少し柔らかいトーンへ（任意） */
body{
  background: #eaf3ff; /* 現状維持でもOK */
}

/* 中央の白い紙を“少しだけ温かい白”にする */
.layout{
  background: #fffdf8;  /* ←ほんのりクリーム */
}

/* カードにも少し温かい白＋角丸 */
.card,
.hero,
.box{
  background: #fffdf8;
  border-radius: 10px;                 /* 角を少し丸く */
  border-color: #e2e2e2;
}

/* 見出し：紺を少し柔らかく */
.card-title{
  color: #163a70;                      /* きつすぎないネイビー */
  background: #f7f4ea;                 /* 薄いベージュ */
  border: 1px solid #e6dfc8;
  border-left: 6px solid #2b7f2b;
  border-radius: 10px;
}

/* 右サイドも上品に */
.box-title{
  color: #163a70;
  font-weight: 700;
}

/* ボタン（予約リンク等）を少し柔らかく */
.cta-link{
  background: #f7f4ea;
  border-color: #cfc6a6;
  color: #163a70;
  border-radius: 10px;
}

.footer-name{
  font-weight: 700;
  color: #163a70;   /* 優しい紺 */
}

.site-footer{
  background: #f9f7f2;  /* 極薄ベージュ */
}

.side-guide .box-title{
    font-size: 1.35rem;      /* 約22px */
    font-weight: 700;
    color: #2f5e2a;
    border-bottom: 2px solid #9cbc82;
    padding-bottom: 6px;
    margin-bottom: 14px;
} 

.site-kicker {
  font-size: 15px;
  font-weight: 600;
}

.site-logo {
  font-size: 42px;
  line-height: 1.2;
  margin: 6px 0 4px;
}

.brand-sub {
  font-size: 16px;
  font-weight: 600;
  color: #207020;
}

/* ---------- スマホ表示 ---------- */
@media (max-width: 768px){

  .photo-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .photo-grid figure{
    max-width: 320px;
    margin: 0 auto;
  }

  .access-photo{
    text-align: center;
  }

  .access-photo img{
    width: 90%;
    max-width: 320px;
    height: auto;
  }
}

/* PCでは改行せず、スマートフォンだけ屋号を改行する */
.sp-br{
  display: none;
}

/* ===== ワイス博士研修修了証 ===== */
.certificate-box{
  margin: 1.5rem 0;
  overflow: hidden; /* 画像の回り込みをこの範囲内で解除 */
}

.certificate-img{
  float: left;
  width: 46%;
  max-width: 360px;
  height: auto;
  margin: 0 22px 10px 0;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

.certificate-box p{
  margin: 0 0 12px;
}

.certificate-caption{
  font-size: 13px;
  color: #555;
}

@media (max-width: 600px){
  .sp-br{
    display: inline;
  }

  .site-logo{
    margin-top: 4px;
    margin-bottom: 4px;
    line-height: 1.15;
  }

  .site-logo a{
    font-size: 24px;
    line-height: 1.15;
  }

  .site-kicker{
    font-size: 12px;
    line-height: 1.4;
    margin-bottom: 4px;
  }

  .brand-sub{
    font-size: 12px;
    margin-top: 4px;
  }

  .certificate-img{
    float: none;
    display: block;
    width: 100%;
    max-width: 420px;
    margin: 0 auto 12px;
  }

}

/* =========================================================
   下位見出し（親見出しの枝）
   親見出しと同じ18px、色だけ少し明るい紺にして区別
   ========================================================= */

.sub-title{
  margin: 1.4rem 0 0 1.8rem;      /* 見出し下の空きをなくす */
  padding: 0 0 0.35rem 0;
  font-size: 18px;                 /* 親見出しと同サイズ */
  font-weight: 800;
  line-height: 1.6;
  color: #315f8f;                  /* 親より少し明るい紺 */
  background: transparent;
  border-left: none;
  border-bottom: 2px solid #d7d7d7;
}

.sub-block{
  margin: 0 0 1.3rem 1.8rem;
}

.sub-block p{
  margin: 0;                       /* 小見出し直後の空行をなくす */
  line-height: 1.9;
}

/* スマートフォンでは左右の余白を詰める */
@media (max-width: 600px){
  .sub-title{
    margin-left: 0;
    font-size: 18px;
  }

  .sub-block{
    margin-left: 0;
  }
}

/* =========================================================
   箱庭療法写真
   PC：左寄せで本文を右側へ回り込ませる
   スマートフォン：写真を中央に置き、本文を下へ表示
   ========================================================= */

.sandplay-photo{
  float: left;
  width: 300px;
  max-width: 45%;
  height: auto;
  margin: 6px 22px 16px 0;
  border: 1px solid #d8d8d8;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

/* 写真の回り込みを終了する */
.clear{
  clear: both;
}

/* 箱庭写真：タブレット・スマートフォン */
@media (max-width: 768px){
  .sandplay-photo{
    float: none;
    display: block;
    width: 100%;
    max-width: 420px;
    margin: 0 auto 18px;
  }
}

/* =========================================================
   自律訓練法の公式一覧
   ・表全体を本文より約3文字分右へ下げる
   ・公式名と説明の間を約2文字分空ける
   ・行間を本文より少し詰める
   ========================================================= */

.autogenic-table{
  margin: 16px 0 20px 3em;
  border-collapse: collapse;
  background: transparent;
  border: 0;
}

.autogenic-table th,
.autogenic-table td{
  padding-top: 2px;
  padding-bottom: 2px;
  line-height: 1.45;
  text-align: left;
  vertical-align: top;
  border: 0;
}

.autogenic-table th{
  width: auto;
  padding-left: 0;
  padding-right: 2em;
  color: #000;
  font-weight: 700;
  white-space: nowrap;
}

.autogenic-table td{
  padding-left: 0;
  padding-right: 0;
  font-weight: 400;
}

/* スマートフォンでは左余白を少し詰める */
@media (max-width: 600px){
  .autogenic-table{
    margin-left: 1em;
  }

  .autogenic-table th{
    padding-right: 1.2em;
  }
}