/* =========================================
   AngelRound / AR_Corp カスタムテーマ用
   styles_tmw_v17.css  - 2025-11-13 最終版
========================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Noto+Sans+JP:wght@400;600;700&display=swap');

/* 基本トークン */
:root{
  --ink:   #111111;
  --muted: #6f6f6f;
  --line:  rgba(0,0,0,.08);
  --bg:    #ffffff;
  --container: 960px;
  --section-pad: 96px;
}

/* ベース */
*{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  padding:0;
  padding-bottom:80px;
  color:var(--ink);
  background:var(--bg);
  font-family:'Noto Sans JP',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.9;
  letter-spacing:.02em;
}

/* ---------------------------------
   ヘッダー（基本スタイル）
--------------------------------- */

.header{
  position:sticky;
  top:0;
  z-index:40;
  backdrop-filter:saturate(140%) blur(6px);
  background:rgba(255,255,255,.92);
  border-bottom:1px solid var(--line);
}

.header-inner{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:16px 20px 16px 12px;
  display:flex;
  align-items:center;
  gap:28px;
}

/* ★ PC ロゴを 130% くらいに拡大（56px → 72px） */
.brand img{
  height:72px;
  width:auto;
  display:block;
}

/* PC ナビゲーション（横並び） */
.nav{
  margin-left:auto;
  display:flex;
  gap:20px;
}

.nav a{
  color:var(--ink);
  font-size:15px;
  text-decoration:none;
  padding:6px 2px;
  border-bottom:1px solid transparent;
}

/* ---------------------------------
   セクション
--------------------------------- */

.section{
  padding:var(--section-pad) 20px;
}

.container{
  max-width:var(--container);
  margin:0 auto;
}

.section h2{
  font-family:'Montserrat','Noto Sans JP',sans-serif;
  font-weight:700;
  letter-spacing:.06em;
  font-size:32px;
  margin:0 0 12px;
  text-transform:uppercase;
}

.sub{
  color:var(--muted);
  margin-bottom:26px;
  font-size:15px;
}

/* ---------------------------------
   HERO
--------------------------------- */

.hero{
  padding-top:calc(var(--section-pad) + 44px);
  padding-bottom:var(--section-pad);
  text-align:center;
}

.hero .container{
  max-width:1280px;
}

.hero h1{
  margin:0 auto;
  font-family:'Montserrat','Noto Sans JP',sans-serif;
  font-weight:700;
  font-size:68px;
  line-height:1.1;
  white-space:nowrap;
  word-break:keep-all;
  overflow-wrap:normal;
}

/* ---------------------------------
   POLICY セクション（基本）
--------------------------------- */

.policy-stack{
  display:flex;
  flex-direction:column;
  gap:48px;
  margin-top:14px;
}

.policy-block{
  display:flex;
  gap:28px;
  align-items:center;
}

.policy-block .text{
  flex:1;
}

.policy-block .art{
  flex:1;
  min-height:200px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}

.policy-block .art img{
  display:block;
  max-width:100%;
  height:auto;
}

.policy-block:nth-child(even){
  flex-direction:row-reverse;
}

.card h3{
  margin:.2rem 0 .4rem;
  font-size:22px;
  font-weight:700;
}

/* ---------------------------------
   SOLID セクション
--------------------------------- */

#solid .sub{
  font-size:22px;
  font-weight:700;
  color:var(--ink);
  margin-bottom:18px;
}

/* ---------------------------------
   ABOUT
--------------------------------- */

.about-row{
  display:flex;
  align-items:center;
  gap:20px;
  margin-top:6px;
}

.about-row img{
  height:84px;
  width:auto;
  display:block;
}

.about-info,
.about-info *{
  font-size:14.5px;
  font-weight:400;
  color:var(--ink);
  line-height:1.6;
  margin:0 0 .35rem;
}

/* ---------------------------------
   ロゴのみブロック
--------------------------------- */

.logo-block{
  padding:72px 20px 96px;
  background:#fff;
  text-align:center;
}

.logo-block img{
  max-width:920px;
  width:100%;
  height:auto;
  display:inline-block;
}

/* ---------------------------------
   固定フッター（BLOG / CONTACT ボタン）
--------------------------------- */

.sticky-footer{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:50;
  background:rgba(255,255,255,.98);
  border-top:1px solid var(--line);
  box-shadow:0 -6px 30px rgba(0,0,0,.05);
}

.sticky-footer .inner{
  max-width:var(--container);
  margin:0 auto;
  padding:12px 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}

.sticky-footer .inner a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-family:'Montserrat','Noto Sans JP',sans-serif;
  font-weight:700;
  padding:12px 18px;
  border-radius:14px;
  font-size:16px;
  line-height:1;
  border:2px solid #111;
  color:#111;
  background:#fff;
}

.sticky-footer .inner a:last-child{
  background:#111;
  color:#fff;
}

/* ---------------------------------
   タブレット以下のベース調整
--------------------------------- */

@media (max-width:900px){
  :root{ --section-pad:80px; }

  .policy-block{
    flex-direction:column;
  }
  .policy-block:nth-child(even){
    flex-direction:column;
  }

  .hero h1{
    font-size:44px;
    white-space:normal;
  }

  .about-row img{
    height:64px;
  }
}

/* =========================================================
   ここから下が「仕上げ用の最終オーバーライド」
========================================================= */

/* ---------------------------------
   ヘッダー & フッターを完全に透過
--------------------------------- */

.header,
.header-inner,
.site-header,
.header::before,
.header::after{
  background:transparent !important;
  box-shadow:none !important;
  border:none !important;
  backdrop-filter:none !important;
}

/* スクロール時に別クラスが付いても透過を維持 */
.is-sticky .header,
.is-sticky .header-inner,
.is-sticky .site-header{
  background:transparent !important;
  box-shadow:none !important;
  border:none !important;
  backdrop-filter:none !important;
}

/* フッターも完全透過 */
.sticky-footer,
.sticky-footer .inner{
  background:transparent !important;
  box-shadow:none !important;
  border:none !important;
}

/* ---------------------------------
   PC ナビゲーションのホバー（黒ピル型）
--------------------------------- */

@media (min-width:769px){

  .header .nav{
    display:flex;
    gap:24px;
  }

  .header .nav a{
    position:relative;
    padding:6px 14px;
    border-radius:999px;
    border-bottom:none !important;      /* 下線は使わない */
    background:transparent;
    color:var(--ink);
    transition:background .18s ease, color .18s ease;
  }

  .header .nav a::after{
    content:none !important;            /* 下線アニメーションを完全無効化 */
  }

  .header .nav a:hover,
  .header .nav a:focus-visible{
    background:#111111;
    color:#ffffff;
  }
}

/* ---------------------------------
   PC：POLICY 画像の見た目サイズを統一
--------------------------------- */

@media (min-width:961px){

  .policy-block .art{
    display:flex;
    justify-content:center;
    align-items:center;
    border:none !important;             /* 枠線消し */
  }

  .policy-block .art img{
    display:block;
    max-width:80%;
    height:auto;
  }
}

/* ---------------------------------
   スマホ（〜768px）：HERO / POLICY / ハンバーガー
--------------------------------- */

@media (max-width:768px){

  /* HERO：1行で横いっぱいに収まるよう微調整 */
  .hero{
    padding-top:96px;
    padding-bottom:72px;
    text-align:left;
  }

  .hero .container{
    max-width:100%;
    padding:0 16px;
  }

  /* ★ スマホではフォントサイズをさらに小さくして 1 行内に収まるように */
  .hero h1{
    font-size:clamp(18px, 4.8vw, 26px);
    line-height:1.2;
    white-space:nowrap;
    word-break:keep-all;
    overflow-wrap:normal;
  }

  /* POLICY：縦並び + 画像サイズ統一 & 枠線削除 */
  .policy-stack{
    gap:40px;
  }

  .policy-block{
    flex-direction:column;
    gap:24px;
    align-items:flex-start;
  }

  .policy-block:nth-child(even){
    flex-direction:column;
  }

  .policy-block .text{
    width:100%;
  }

  .policy-block .art{
    width:100%;
    margin-top:16px;
    border:none !important;
    display:flex;
    justify-content:center;
    align-items:center;
  }

  /* ★ 3枚とも高さをそろえて「同じ見た目サイズ」にする */
  .policy-block .art img{
    display:block;
    height:210px;              /* 必要なら 190〜230 の範囲で微調整可 */
    width:auto;
    max-width:100%;
    object-fit:contain;        /* トリミングせずボックス内に収める */
  }

  /* ハンバーガーメニュー
     （HTML 側に .nav-toggle と .nav-toggle-label を配置している前提） */
  .nav-toggle{
    display:block;
    position:absolute;
    right:16px;
    top:20px;
    width:32px;
    height:32px;
    opacity:0;
    z-index:70;
  }

  .nav-toggle-label{
    display:flex;
    margin-left:auto;
    margin-right:8px;
    width:32px;
    height:32px;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:60;
  }

  .nav-toggle-label span,
  .nav-toggle-label span::before,
  .nav-toggle-label span::after{
    content:"";
    display:block;
    width:22px;
    height:2px;
    background:#111;
    border-radius:9999px;
    transition:.2s ease;
  }

  .nav-toggle-label span::before{
    transform:translateY(-6px);
  }

  .nav-toggle-label span::after{
    transform:translateY(6px);
  }

  /* ナビ本体：右からスライドイン */
  .nav{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    width:260px;
    padding:80px 24px 24px;
    background:rgba(255,255,255,0.98);
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
    transform:translateX(100%);
    transition:transform .25s ease;
    z-index:50;
  }

  .nav a{
    padding:10px 0;
    border-radius:0;
    background:transparent;
    color:var(--ink);
  }

  /* チェックされたらナビを開く */
  .nav-toggle:checked ~ .nav{
    transform:translateX(0);
  }

  /* チェックされたらアイコンを「×」に変形 */
  .nav-toggle:checked + .nav-toggle-label span{
    background:transparent;
  }

  .nav-toggle:checked + .nav-toggle-label span::before{
    transform:rotate(45deg);
  }

  .nav-toggle:checked + .nav-toggle-label span::after{
    transform:rotate(-45deg);
  }

  /* ★ スマホのロゴは従来どおり少し小さめに */
  .brand img{
    height:44px;
  }
}

/* PC ではハンバーガー要素を非表示にして従来どおりの横並びメニュー */
@media (min-width:769px){
  .nav-toggle,
  .nav-toggle-label{
    display:none !important;
  }
}

/* =========================================
 *  PC ヘッダー位置調整（ロゴを左／ナビを右）
 * ========================================= */
@media (min-width: 769px) {

  /* ヘッダー内コンテナを少し広めにして左右余白を調整 */
  .header-inner {
    max-width: 1200px;   /* もともと 960px → 少し広げる */
    margin: 0 auto;
    padding-left: 8px;   /* 左余白を小さくしてロゴを左寄せ */
    padding-right: 32px; /* 右余白を少し増やしてナビを右寄せ */
  }

  /* ナビゲーションの右寄せ & メニュー間隔を少し詰める */
  .header .nav {
    margin-left: auto;
    margin-right: 8px;   /* 右端に寄せる */
    gap: 16px;           /* メニュー同士の間隔をやや狭く */
  }
}

/* =========================================
 *  BLOG アーカイブ（/blog/）
 * ========================================= */

/* 全体の余白は TOP と同じセクション設定を使う */
.blog-archive {
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
}

/* BLOG 見出し */
.blog-title {
  font-family: 'Montserrat','Noto Sans JP',sans-serif;
  font-weight: 700;
  letter-spacing: .06em;
  font-size: 28px;
  margin: 0 0 18px;
}

/* カードグリッド：PC 2列 / SP 1列 */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

@media (max-width: 900px) {
  .blog-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* カード本体 */
.post-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: transform .14s ease, box-shadow .14s ease;
}

.post-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

/* サムネイルエリア */
.post-media {
  display: block;
  background: #f5f5f5;
  position: relative;
}

/* アイキャッチ画像（16:9 / cover） */
.post-media .post-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* アイキャッチがないときのグラデーションプレースホルダー */
.thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  background: linear-gradient(135deg,#F2F2F2,#E9E9E9);
}

/* カード中身 */
.post-body {
  padding: 16px 16px 18px;
}

/* メタ情報（日付・カテゴリ） */
.post-meta {
  font-size: 13px;
  color: #666;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.post-meta .dot {
  color: #999;
}

.post-cat {
  color: #111;
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,.2);
}

.post-cat:hover {
  border-color: #111;
}

/* タイトル（2行まで表示） */
.post-title {
  font-size: 20px;
  line-height: 1.5;
  margin: .2rem 0 .4rem;
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-title a {
  color: #111;
  text-decoration: none;
}

.post-title a:hover {
  text-decoration: underline;
}

/* 抜粋（3行まで表示） */
.post-excerpt {
  font-size: 14.5px;
  color: #333;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ページネーション（数字ボタン） */
.pager {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}

.pager-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #111;
  border-radius: 12px;
  text-decoration: none;
  font-family: 'Montserrat',sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #111;
  background: #fff;
  transition: background .15s ease, color .15s ease;
}

/* ホバー時：白地 → 黒地（文字白） */
.pager-num:hover {
  background: #111;
  color: #fff;
}

/* 現在ページ */
.pager-num.is-current {
  background: #111;
  color: #fff;
  cursor: default;
}

/* =======================================================
 *  Single Post layout (BLOG 個別ページ)
 * ======================================================= */

/* Hero エリア */
body.single-post .hero {
  padding: calc(var(--section-pad) + 32px) 20px var(--section-pad);
}

body.single-post .breadcrumb {
  font-size: 13px;
  color: #666;
  margin-bottom: 14px;
}

body.single-post .breadcrumb a {
  color: #111;
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,.2);
}

body.single-post .breadcrumb a:hover {
  border-color: #111;
}

body.single-post .post-title {
  font-family: 'Montserrat','Noto Sans JP',sans-serif;
  font-weight: 700;
  letter-spacing: .02em;
  font-size: 40px;
  line-height: 1.3;
  margin: 0 0 6px;
}

body.single-post .post-meta {
  font-size: 13px;
  color: #666;
  display: flex;
  gap: 10px;
  align-items: center;
}

body.single-post .post-heroimg {
  margin-top: 18px;
  background: linear-gradient(135deg,#F2F2F2,#E9E9E9);
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 16px;
  overflow: hidden;
}

body.single-post .post-heroimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 本文 + TOC の 2カラムレイアウト */
body.single-post .post-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding: 36px 20px 64px;
}

@media (min-width: 1200px) {
  body.single-post .post-wrap {
    grid-template-columns: minmax(0, 1fr) 280px; /* 本文 / TOC */
  }
}

/* TOC */
body.single-post .toc {
  position: sticky;
  top: 94px;
  height: max-content;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  background: #fff;
  font-size: 14px;
}

body.single-post .toc h3 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: #444;
  letter-spacing: .06em;
}

body.single-post .toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

body.single-post .toc li {
  margin: 6px 0;
}

body.single-post .toc a {
  color: #111;
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,.2);
}

body.single-post .toc a:hover {
  border-color: #111;
}

/* 本文見出しなど（クラス名はコンテンツ側で付与） */
body.single-post .content h2 {
  font-size: 28px;
  margin: 40px 0 8px;
  font-weight: 700;
}

body.single-post .content h3 {
  font-size: 20px;
  margin: 24px 0 6px;
  font-weight: 700;
}

body.single-post .lead {
  font-size: 16px;
  color: #333;
}

body.single-post .callout,
body.single-post .keypoints {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  background: #fff;
  margin: 18px 0;
}

body.single-post .keypoints h4 {
  margin: 0 0 8px;
  font-size: 16px;
}

body.single-post .keypoints ul {
  margin: 0;
  padding-left: 18px;
}

/* 共有ボタン */
body.single-post .share {
  display: flex;
  gap: 10px;
  margin: 10px 0 0;
  flex-wrap: wrap;
}

body.single-post .share a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #111;
  border-radius: 12px;
  color: #111;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
}

body.single-post .share a:hover {
  background: #111;
  color: #fff;
}

/* 関連記事 */
body.single-post .related {
  margin: 40px 0 0;
}

body.single-post .related h3 {
  font-size: 18px;
  margin: 0 0 12px;
}

body.single-post .grid2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

@media (max-width: 900px) {
  body.single-post .grid2 {
    grid-template-columns: 1fr;
  }
}

body.single-post .r-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
}

body.single-post .r-card a {
  color: #111;
  text-decoration: none;
}

body.single-post .r-card a:hover {
  text-decoration: underline;
}

/* 著者情報 */
body.single-post .author {
  border-top: 1px solid var(--line);
  margin-top: 40px;
  padding-top: 18px;
  display: flex;
  gap: 16px;
  align-items: center;
}

body.single-post .avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #eee;
}

body.single-post .author h4 {
  margin: 0 0 2px;
  font-size: 16px;
}

body.single-post .author p {
  margin: 0;
  font-size: 14px;
  color: #555;
}

/* 前後記事ナビ */
body.single-post .post-pager {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 40px 0 0;
}

body.single-post .post-pager a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border: 1px solid #111;
  color: #111;
  text-decoration: none;
  border-radius: 12px;
  font-family: 'Montserrat',sans-serif;
  font-weight: 700;
  font-size: 14px;
}

body.single-post .post-pager a:hover {
  background: #111;
  color: #fff;
}

/* スマホ時少し調整 */
@media (max-width: 768px) {
  body.single-post .hero {
    padding: 96px 16px 64px;
  }

  body.single-post .post-title {
    font-size: 28px;
  }

  body.single-post .post-wrap {
    padding: 24px 16px 64px;
  }

  body.single-post .toc {
    position: static;
    order: -1;
  }
}

/* =======================
   Contact page
   ======================= */

.contact {
  padding-top: calc(var(--section-pad) + 32px);
  padding-bottom: 120px;
}

.contact-title {
  font-family:'Montserrat','Noto Sans JP',sans-serif;
  font-weight:700;
  letter-spacing:.06em;
  font-size:28px;
  margin:0 0 12px;
}

.contact-lead {
  margin:0 0 32px;
  font-size:14.5px;
  color:var(--muted);
}

.contact-form {
  margin-top:10px;
}

.contact-grid {
  display:flex;
  flex-direction:column;
  gap:24px;
}

/* ラベル左／入力右の2カラム（PC） */
.contact-row {
  display:grid;
  grid-template-columns: minmax(0,220px) minmax(0,1fr);
  column-gap:40px;
  row-gap:4px;
  align-items:flex-start;
}

.contact-row-label {
  font-size:15px;
  font-weight:700;
}

.contact-row-label .req {
  color:#d9534f;
  font-size:.9em;
  margin-left:4px;
}

.contact-field {
  width:100%;
}

/* 入力欄・セレクト・テキストエリア共通 */
.contact-field input,
.contact-field select,
.contact-field textarea {
  width:100%;
  font-size:15px;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.85);
  color:var(--ink);
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
  resize:vertical;
}

/* placeholder を薄く */
.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color:#b6b6b6;
}
.contact-field input::-webkit-input-placeholder,
.contact-field textarea::-webkit-input-placeholder { color:#b6b6b6; }
.contact-field input::-moz-placeholder,
.contact-field textarea::-moz-placeholder { color:#b6b6b6; opacity:1; }
.contact-field input:-ms-input-placeholder,
.contact-field textarea:-ms-input-placeholder { color:#b6b6b6; }

/* フォーカス時のみ強調 */
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  outline:none;
  background:#fff;
  border-color:rgba(0,0,0,.25);
  box-shadow:0 0 0 1px rgba(0,0,0,.04),
             0 14px 40px rgba(0,0,0,.10);
}

/* セレクトの見た目（簡易） */
.contact-field select {
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image:
      linear-gradient(45deg,transparent 50%, #999 50%),
      linear-gradient(135deg,#999 50%,transparent 50%);
  background-position:
      calc(100% - 18px) 50%,
      calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat:no-repeat;
}

/* テキストエリアは少し高めに */
.contact-field textarea {
  min-height:140px;
}

/* 同意チェック：送信ボタンの真上・中央寄せ */
.contact-consent {
  margin-top:32px;
  font-size:14px;
  text-align:center;              /* 中央寄せ */
}

.contact-consent-label {
  display:inline-flex;            /* ラベル自体はインラインブロックで中央に */
  align-items:center;
  gap:10px;
}

.contact-consent-label input[type="checkbox"] {
  width:18px;
  height:18px;
}

.contact-consent-label a {
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:2px;
}

.contact-consent-label input[type="checkbox"] {
  width:18px;
  height:18px;
}

.contact-consent-label a {
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:2px;
}

/* 送信ボタン */
.contact-submit {
  margin-top:40px;
  text-align:center;
}

.contact-submit button {
  min-width:260px;
  max-width:420px;
  width:100%;
  border-radius:999px;
  padding:16px 32px;
  border:none;
  background:#111;
  color:#fff;
  font-family:'Montserrat','Noto Sans JP',sans-serif;
  font-weight:700;
  font-size:16px;
  letter-spacing:.06em;
  cursor:pointer;
  box-shadow:0 18px 40px rgba(0,0,0,.18);
  transition:background .16s ease, transform .12s ease, box-shadow .16s ease;
}

.contact-submit button:hover {
  background:#000;
  transform:translateY(1px);
  box-shadow:0 12px 24px rgba(0,0,0,.16);
}

/* スマホ（縦積みレイアウト） */
@media (max-width: 768px) {
  .contact {
    padding-top:80px;
    padding-bottom:96px;
  }

  .contact-row {
    grid-template-columns:1fr;
    row-gap:6px;
  }

  .contact-row-label {
    font-size:14px;
  }
}

/* =========================================================
 *  Contact Thanks Page
 *  (/contact-thanks/ 想定)
 * ======================================================= */

.ar-thanks-section {
  padding: 120px 0 80px;
  text-align: center;
}

.ar-thanks-section .container {
  max-width: 880px;
}

/* 大きなタイトル */
.ar-thanks-title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin: 0 0 32px;
}

/* メインのイラスト（022.png） */
.ar-thanks-illust-main {
  margin-bottom: 32px;
}

.ar-thanks-illust-main img {
  display: block;
  margin: 0 auto;
  max-width: 260px;
  width: 60%;
  height: auto;
}

/* 本文テキスト */
.ar-thanks-text {
  max-width: 720px;
  margin: 0 auto 56px;
  font-size: 16px;
  line-height: 1.9;
  color: #333;
}

.ar-thanks-text p {
  margin: 0 0 16px;
}

.ar-thanks-small {
  font-size: 16px;
  font-weight: 600;
}

/* X の案内ブロック */
.ar-thanks-follow {
  margin-top: 16px;
}

.ar-thanks-follow-text {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.7;
  margin: 0 0 24px;
}

.ar-thanks-illust-follow {
  margin-bottom: 20px;
}

.ar-thanks-illust-follow img {
  display: block;
  margin: 0 auto;
  max-width: 320px;
  width: 70%;
  height: auto;
}

.ar-thanks-link {
  margin: 8px 0 0;
}

.ar-thanks-link a {
  font-size: 16px;
  color: #111;
  text-decoration: underline;
  word-break: break-all;
}

/* SP 調整 */
@media (max-width: 767px) {
  .ar-thanks-section {
    padding: 96px 0 64px;
  }

  .ar-thanks-title {
    font-size: 26px;
    line-height: 1.5;
    padding: 0 16px;
  }

  .ar-thanks-text {
    padding: 0 24px;
    font-size: 15px;
  }

  .ar-thanks-follow-text {
    font-size: 18px;
    padding: 0 24px;
  }

  .ar-thanks-link a {
    font-size: 14px;
  }

  .sp-only {
    display: inline;
  }
}

/* PC では br.sp-only は表示しなくて OK */
@media (min-width: 768px) {
  .sp-only {
    display: none;
  }
}

/* =========================
   サンクスページ用 X ボタン
   =========================*/
.thanks-follow {
  margin-top: 40px;
  text-align: center;
}

.thanks-follow .btn-x {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 9999px;
  border: 1px solid #000;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: #000;
  background: #fff;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .1s ease;
}

.thanks-follow .btn-x:hover {
  background: #000;
  color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  transform: translateY(-1px);
}

/* ==========================
   Privacy Policy page
   ========================== */

.privacy {
  padding-top: 120px;
  padding-bottom: 120px;
}

.privacy .privacy-title {
  font-family: 'Montserrat','Noto Sans JP',sans-serif;
  font-weight: 700;
  font-size: 32px;
  text-align: center;
  letter-spacing: .08em;
  margin: 0 0 32px;
}

.privacy .privacy-body {
  max-width: 760px;
  margin: 0 auto;
  font-size: 15px;
}

.privacy .privacy-body p {
  margin: 0 0 1.3em;
}

.privacy .privacy-body ul {
  margin: 0 0 1.3em 1.4em;
  padding: 0;
}

.privacy .privacy-heading {
  font-size: 18px;          /* 通常より少し大きめ */
  font-weight: 700;         /* 太字 */
  margin: 32px 0 8px;
}

/* Contact Form 7 の送信ボタンのスタイル */
.wpcf7-submit {
  /* 「CONTACT」ボタンと共通のスタイルを適用 */
  font-family: Montserrat,"Noto Sans JP",sans-serif;
  font-weight: 700;
  letter-spacing: 0.05em;
  font-size: 16px;
  line-height: 1;
  color: #fff !important; /* 白い文字色を強制 */
  background: #000 !important; /* 黒い背景色を強制 */
  border-radius: 999px !important; /* 角丸を強制 */
  padding: 18px 45px 17px !important;
  width: auto !important;
  min-width: 250px !important;
  max-width: 380px !important;
  display: inline-block !important;
  cursor: pointer !important;
  -webkit-transition: 0.3s ease !important;
  transition: 0.3s ease !important;
  text-align: center !important;
  border: 2px solid #000 !important; /* 黒い枠線を強制 */
  box-shadow: 0 0 0 rgba(0,0,0,0) !important;
}

/* ホバー時のスタイル（必要であれば追加） */
.wpcf7-submit:hover {
  background: #333 !important; /* ホバーで少し暗くする例 */
  border-color: #333 !important;
}

/* プロフィール欄のレイアウト修正 */
.post-author {
    display: flex;          /* 横並びにする */
    align-items: flex-start; /* 上端を揃える */
    gap: 24px;              /* 画像と文章の間の隙間 */
    margin-top: 60px;       /* 上の要素との間隔 */
    padding-top: 40px;      /* 内部の上の余白 */
    border-top: 1px solid #eee; /* 上に薄い区切り線を入れる */
}

/* アイコン画像 */
.post-author-avatar img {
    width: 80px !important;    /* アイコンの幅 */
    height: 80px !important;   /* アイコンの高さ */
    border-radius: 50%;        /* 完全な円にする */
    object-fit: cover;         /* 画像の比率を崩さない */
    display: block;
    margin: 0;                 /* 余計な隙間を削除 */
}

/* 右側のテキストエリア */
.post-author-content {
    flex: 1;                   /* 右側のスペースをいっぱいまで使う */
}

/* 名前（著者名） */
.post-author-name {
    font-size: 18px;
    font-weight: 700;          /* 太字 */
    margin-bottom: 12px;       /* 名前と本文の隙間 */
    line-height: 1.4;
}

/* 紹介文 */
.post-author-desc {
    font-size: 14px;
    line-height: 1.8;          /* 行間を広げて読みやすく */
    color: #555;               /* 少し柔らかい黒色 */
}

/* スマホでの表示調整（画面が狭いときは縦並びに戻して中央寄せ） */
@media (max-width: 768px) {
    .post-author {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 16px;
    }
}

/* ============================================
   目次（RTOC）の修正版CSS
   ============================================ */

/* 1. 本文の中に出てしまう目次を消す */
/* （IDとクラスの両方を指定して確実に消します） */
.post-main #rtoc-mokuji-wrapper,
.post-main .rtoc-mokuji-wrapper {
    display: none !important;
}

/* 2. サイドバーの目次は表示する */
.post-sidebar #rtoc-mokuji-wrapper,
.post-sidebar .rtoc-mokuji-wrapper {
    display: block !important;
}

/* 3. サイドバーの目次の見た目調整（少し上の隙間を空ける） */
.post-sidebar .toc-container {
    margin-top: 10px;
}

/* ============================================
   記事ページ（Single）のデザイン調整・決定版
   ============================================ */

/* 1. 記事タイトル：左揃えに戻し、改行を有効化 */
.hero h1, 
.post-title {
    text-align: left !important;          /* 左揃えにする */
    white-space: normal !important;       /* 1行強制を解除 */
    word-break: break-word !important;    /* 長い言葉も折り返す */
    line-height: 1.4 !important;          /* 行間 */
    height: auto !important;              /* 高さ制限解除 */
    margin-left: 0 !important;            /* 左の余白をなくす */
    width: 100% !important;
}

/* 2. 全体の横幅を広げる（サムネイル・本文・目次をワイドにする） */
/* PC表示のときだけコンテナ幅を拡張 */
@media (min-width: 1200px) {
    body.single .container {
        max-width: 1280px !important; /* 横幅を1280pxまで広げる（必要に応じて数値を変更可） */
        padding-left: 40px;           /* 左右に適度な余白 */
        padding-right: 40px;
    }
}

/* 3. サムネイル画像を横幅いっぱいに引き伸ばす */
.post-heroing img {
    width: 100% !important;
    height: auto !important;
    border-radius: 8px; /* 角を少し丸くしてリッチにする */
}

/* 4. 本文とサイドバーのバランス調整（本文を少し広めに） */
@media (min-width: 1024px) {
    .post-wrap {
        /* サイドバーを300px固定、残りを本文にする */
        grid-template-columns: 1fr 300px !important; 
        gap: 60px !important; /* 本文と目次の間隔を少し広げて見やすく */
    }
}

/* ============================================
   デザイン修正：太字解除 ＆ サムネイル全体表示
   ============================================ */

/* ① 本文の太字を直す */
.post-main .content p,
.post-main .content li,
.post-main .content dd,
.post-main .content div {
    font-weight: 400 !important; /* 強制的に「普通の太さ」に戻す */
    letter-spacing: 0.05em;      /* 文字の間隔を少し空けて読みやすく */
}

/* ② 一覧ページのサムネイルを「切り抜かず」に全体表示する */
.blog-grid .post-media img,
.related-item .related-thumb img {
    object-fit: contain !important; /* 枠に合わせて縮小し、全体を表示する */
    background-color: #f9f9f9;      /* 画像の比率が違う場合にできる余白の色（薄いグレー） */
    width: 100% !important;
    height: 100% !important;
}

/* カード自体の枠比率を保つ（16:9のまま中身だけフィットさせる設定） */
.blog-grid .post-media,
.related-item .related-thumb {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

/* ============================================
   一覧ページのタイトル全文表示 ＆ サイズ調整
   ============================================ */
.blog-grid .post-title {
    /* 1. 省略（...）設定を解除して全文表示にする */
    display: block !important;           /* 行数制限のボックス設定を解除 */
    -webkit-line-clamp: none !important; /* 行数制限をなしにする */
    line-clamp: none !important;
    height: auto !important;             /* 高さ制限をなくして伸びるようにする */
    overflow: visible !important;        /* 隠れている文字を表示させる */
    white-space: normal !important;      /* 自然に折り返す */

    /* 2. フォントサイズと行間のバランス調整 */
    font-size: 18px !important;          /* 少し小さくして、長くなっても圧迫感を減らす */
    line-height: 1.5 !important;         /* 行間を適度に空けて読みやすく */
    margin-bottom: 12px !important;      /* 下の文章との隙間を確保 */
}

/* スマホではもう少し文字を小さくして見やすくする */
@media (max-width: 768px) {
    .blog-grid .post-title {
        font-size: 16px !important;
    }
}

/* ============================================
   FAQボックスのデザイン
   ============================================ */
.faq-box {
    border: 1px solid #e2e2e2 !important; /* 薄いグレーの線 */
    border-radius: 16px !important;       /* 角を丸くする */
    padding: 40px !important;             /* 枠の内側の余白 */
    margin-top: 30px !important;          /* 上との間隔 */
    margin-bottom: 30px !important;       /* 下との間隔 */
    background-color: #fff !important;    /* 背景色を白に */
}

/* スマホでは余白を少し狭くして見やすくする */
@media (max-width: 768px) {
    .faq-box {
        padding: 20px !important;
        border-radius: 12px !important;
    }
}

/* ============================================
   関連記事エリアのシンプル化（添付画像1枚目風）
   ============================================ */

/* 1. 2列のグリッドレイアウトにする */
.related-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* 横2列 */
    gap: 20px !important; /* 間隔 */
}

/* 2. カードのデザイン（白い箱） */
.related-item {
    display: flex !important;
    align-items: center !important;     /* 上下中央揃え */
    padding: 20px !important;           /* 内側の余白 */
    border: 1px solid #eee !important;  /* 薄い枠線 */
    border-radius: 12px !important;     /* 角丸 */
    background: #fff !important;
    text-decoration: none !important;
    min-height: 80px !important;        /* 高さをある程度確保 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important; /* うっすら影をつける */
    transition: 0.3s;
}

/* ホバー時の動き */
.related-item:hover {
    background-color: #fcfcfc !important;
    transform: translateY(-2px);
}

/* 3. サムネイル画像を「非表示」にする（添付1枚目に合わせる） */
.related-item .related-thumb {
    display: none !important;
}

/* 4. タイトルの文字調整 */
.related-title {
    font-size: 15px !important;
    font-weight: bold !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    color: #333 !important;
}

/* スマホでは1列にして読みやすくする */
@media (max-width: 768px) {
    .related-list {
        grid-template-columns: 1fr !important; /* 1列 */
    }
}

/* ============================================
   TOPページのレイアウト修正（中央揃えに戻す）
   ============================================ */
body.home .hero h1,
body.front-page .hero h1 {
    text-align: center !important;      /* 中央揃えにする */
    margin-left: auto !important;       /* 左右の余白を均等に */
    margin-right: auto !important;
    width: 100% !important;
}

/* ============================================
   記事本文のレイアウト崩れ防止（横揺れ対策）
   ============================================ */

/* 1. 長いURLや英単語を強制的に改行させる */
.post-main .content,
.post-main .content p,
.post-main .content a {
    overflow-wrap: break-word !important; /* 長い文字列を折り返す */
    word-break: break-word !important;    /* 必要なら単語の途中でも改行 */
    max-width: 100% !important;           /* 親要素からはみ出させない */
}

/* 2. 本文内の画像が大きすぎる場合に縮小する */
.post-main .content img {
    max-width: 100% !important; /* 横幅いっぱいまでで止める */
    height: auto !important;    /* 高さは自動調整 */
}

/* ============================================
   スマホTOPページのHero文字サイズ調整
   ============================================ */
@media (max-width: 768px) {
    body.home .hero h1 {
        font-size: 32px !important;   /* 文字を大きくする */
        line-height: 1.3 !important;  /* 行間を少し詰める */
        width: 90% !important;        /* 横幅を確保して改行させる */
        margin-left: auto !important; /* 中央寄せ */
        margin-right: auto !important;
        white-space: normal !important; /* 改行を許可 */
    }
}