@charset "UTF-8";
/* =========================================================
   ほいらく メディアサイト — 共通スタイル（全ページ）
   保活・子育て・働き方のメディア
   カラー変更はこの :root だけ触れば全ページに反映されます
   ここには「配色・タイポ・リセット・共通パーツ・ヘッダー・フッター」だけを置きます
   ========================================================= */

:root{
  /* ---- ベース（linoah.site のクリーム×オレンジ） ---- */
  --hm-cream:    #fbf7ec;   /* ページ全体の背景（生成りのクリーム） */
  --hm-cream-2:  #fff6e6;   /* 一段濃いクリーム（帯・パネル） */
  --hm-peach:    #ffe8c9;   /* ブロブ・装飾のベージュ */
  --hm-white:    #ffffff;

  --hm-orange:   #ff7f00;   /* ブランドオレンジ */
  --hm-orange-d: #ef6c00;   /* ホバー */
  --hm-orange-l: #ffb26b;   /* ライトオレンジ */

  --hm-text:     #453729;   /* 本文（こげ茶） */
  --hm-text-s:   #6d5b49;   /* 本文（やや薄） */
  --hm-muted:    #927f6c;   /* 補助テキスト */
  --hm-line:     #ebe0cd;   /* 罫線 */

  /* ---- カテゴリーカラー ---- */
  --cat-hokatsu: #ff9a2e;   /* 保活のきほん */
  --cat-en:      #5fbfa0;   /* 園えらび */
  --cat-kosodate:#f4899f;   /* 子育て */
  --cat-work:    #5fa8d8;   /* 働き方・両立 */
  --cat-money:   #f0bc3c;   /* お金・制度 */
  --cat-baby:    #f4998c;   /* 妊娠・出産 */
  --cat-manga:   #a58ad6;   /* まんが・アニメ */
  --cat-game:    #8dc063;   /* ゲーム */

  --f-jp:    'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Yu Gothic', sans-serif;
  --f-round: 'Zen Maru Gothic', 'Noto Sans JP', -apple-system, 'Hiragino Maru Gothic ProN', sans-serif;
  --f-en:    'Jost', 'Zen Maru Gothic', sans-serif;

  --wrap: 1160px;
  --pad-sec: 96px;
  --r-l: 24px;              /* カードの角丸（大） */
  --r-m: 16px;
  --ease: cubic-bezier(.22,1,.36,1);
  --sh-card: 0 4px 18px rgba(120,86,44,.10);
  --sh-card-h: 0 12px 30px rgba(120,86,44,.18);

  /* リンク用のかわいいカーソル（ポータルと共通） */
  --cursor-cute: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M6 3.5V22l5-4.5 3.5 8 4-2-3.5-7.5 7-.5z' fill='%23ff7f00' stroke='%23ffffff' stroke-width='2.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3Ccircle cx='25' cy='7' r='2.4' fill='%23ff7f00' stroke='%23ffffff' stroke-width='1.6'/%3E%3C/svg%3E") 6 3, pointer;
}

/* =========================================================
   reset / base
   ========================================================= */
/* リセットは :where() で詳細度を 0 にしてある。
   後段のクラス指定（.hm-tab など）が必ず勝つようにするため。 */
:where(.hm-site) *,:where(.hm-site) *::before,:where(.hm-site) *::after{box-sizing:border-box;}
html:has(body.hm-site){
  scroll-behavior:smooth;
  /* スティッキーヘッダー＋ページ内ナビの分だけ、アンカー位置を下げる */
  scroll-padding-top:132px;
}
body.hm-site{
  margin:0;
  background-color:var(--hm-cream);
  /* 紙のようなうっすらしたテクスチャ */
  background-image:
    radial-gradient(rgba(190,160,110,.10) 1px, transparent 1px),
    radial-gradient(rgba(190,160,110,.07) 1px, transparent 1px);
  background-size:22px 22px, 22px 22px;
  background-position:0 0, 11px 11px;
  color:var(--hm-text);
  font-family:var(--f-jp);
  font-weight:400;
  line-height:1.9;
  letter-spacing:.04em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}
.hm-site.is-locked{overflow:hidden;}
/* 記事本文（SWELLの .post_content）の中はリセットしない。
   箇条書きの「・」やリンクの下線など、記事の見た目を壊さないため。
   :where() で囲っているので詳細度は0のまま＝SWELL側の指定が必ず勝ちます。 */
:where(.hm-site) img:where(:not(.post_content *)){max-width:100%;height:auto;display:block;}
:where(.hm-site) :is(h1,h2,h3,h4,p,figure,dl,dd):where(:not(.post_content *)){margin:0;}
:where(.hm-site) :is(ul,ol):where(:not(.post_content *)){margin:0;padding:0;list-style:none;}
:where(.hm-site) a:where(:not(.post_content *)){color:inherit;text-decoration:none;}
:where(.hm-site) button{font:inherit;color:inherit;background:none;border:0;padding:0;}
:where(.hm-site) :focus-visible{outline:3px solid var(--hm-orange);outline-offset:3px;border-radius:4px;}
:where(.hm-site) :is(a,button,summary,select){cursor:var(--cursor-cute);}
:where(.hm-site) :is(input,textarea){cursor:text;}

.hm-wrap{width:min(100% - 8vw, var(--wrap));margin-inline:auto;}
/* カード全面をリンクにするための透明なオーバーレイ */
.hm-stretch{position:absolute;inset:0;}
/* スマホでだけ改行したいときの <br class="hm-br-sp"> */
.hm-br-sp{display:none;}
.hm-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.hm-en{font-family:var(--f-en);letter-spacing:.06em;}

/* スクロール表示 */
.hm-reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.hm-reveal.is-inview{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .hm-reveal{opacity:1;transform:none;transition:none;}
  .hm-site *{scroll-behavior:auto !important;}
}

/* =========================================================
   共通パーツ
   ========================================================= */
.hm-sec{padding-block:var(--pad-sec);position:relative;}
/* 背景の装飾ブロブより、中身がかならず前に来るようにする */
.hm-sec > .hm-wrap{position:relative;z-index:1;}
.hm-sec-cream{background:var(--hm-cream-2);}

/* 見出し（英字＋日本語） */
.hm-sec-head{text-align:center;margin-bottom:48px;position:relative;}
.hm-sec-head-row{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;margin-bottom:40px;text-align:left;
}
.hm-sec-en{
  display:block;font-family:var(--f-en);font-weight:500;
  font-size:clamp(2rem,5vw,2.9rem);line-height:1.1;letter-spacing:.04em;
  color:var(--hm-orange);text-transform:uppercase;
}
.hm-sec-jp{
  display:block;font-family:var(--f-round);font-weight:700;
  font-size:1rem;letter-spacing:.14em;color:var(--hm-text-s);margin-top:.5em;
}
/* 見出し下のなみなみ線 */
.hm-sec-head .hm-wave{margin:18px auto 0;}
.hm-sec-head-row .hm-wave{display:none;}
.hm-wave{display:block;width:82px;height:8px;color:var(--hm-orange-l);}

/* ボタン */
.hm-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  min-width:210px;padding:1.05em 2.1em;border-radius:999px;
  background:var(--hm-orange);color:#fff;
  font-family:var(--f-round);font-weight:700;font-size:.98rem;letter-spacing:.08em;line-height:1;
  box-shadow:0 5px 0 rgba(200,95,0,.55);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .3s var(--ease);
}
.hm-btn:hover{background:var(--hm-orange-d);transform:translateY(3px);box-shadow:0 2px 0 rgba(200,95,0,.55);}
.hm-btn svg{width:18px;height:18px;flex:none;}
.hm-btn-ghost{
  background:var(--hm-white);color:var(--hm-orange);
  box-shadow:0 5px 0 var(--hm-line);border:2px solid var(--hm-orange);
}
.hm-btn-ghost:hover{background:#fff8ef;color:var(--hm-orange-d);box-shadow:0 2px 0 var(--hm-line);}

/* もっと見るリンク */
.hm-more{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--f-round);font-weight:700;font-size:.92rem;letter-spacing:.08em;
  color:var(--hm-text-s);border-bottom:2px solid var(--hm-orange-l);padding-bottom:.25em;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.hm-more:hover{color:var(--hm-orange);border-color:var(--hm-orange);}
.hm-more::after{content:"";width:8px;height:8px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);}
.hm-more-center{display:flex;justify-content:center;margin-top:48px;}

/* カテゴリーバッジ */
.hm-badge{
  display:inline-block;padding:.35em 1em;border-radius:999px;
  background:var(--hm-orange);color:#fff;
  font-family:var(--f-round);font-weight:700;font-size:.72rem;letter-spacing:.06em;line-height:1.6;
}
.hm-badge[data-cat="hokatsu"]{background:var(--cat-hokatsu);}
.hm-badge[data-cat="en"]{background:var(--cat-en);}
.hm-badge[data-cat="kosodate"]{background:var(--cat-kosodate);}
.hm-badge[data-cat="work"]{background:var(--cat-work);}
.hm-badge[data-cat="money"]{background:var(--cat-money);}
.hm-badge[data-cat="baby"]{background:var(--cat-baby);}
.hm-badge[data-cat="manga"]{background:var(--cat-manga);}
.hm-badge[data-cat="game"]{background:var(--cat-game);}

/* 記事メタ（日付） */
.hm-date{
  display:inline-flex;align-items:center;gap:.4em;
  font-family:var(--f-en);font-size:.78rem;color:var(--hm-muted);letter-spacing:.06em;
}
.hm-date::before{
  content:"";width:12px;height:12px;border:1.6px solid currentColor;border-radius:50%;
  position:relative;flex:none;
}

/* アイキャッチが無いときのプレースホルダー */
.hm-noimg{
  display:block;width:100%;height:100%;
  background:linear-gradient(135deg,var(--hm-peach) 0%,var(--hm-cream-2) 100%);
}

/* 装飾ブロブ */
.hm-blob{position:absolute;z-index:0;pointer-events:none;color:var(--hm-peach);}

/* =========================================================
   ヘッダー
   ========================================================= */
.hm-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,252,246,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hm-line);
}
.hm-header-in{
  width:min(100% - 5vw, 1320px);margin-inline:auto;
  display:flex;align-items:center;gap:28px;height:74px;
}
.hm-logo{display:flex;align-items:center;gap:10px;flex:none;}
.hm-logo-mark{width:42px;height:42px;flex:none;}
.hm-logo-txt{
  font-family:var(--f-round);font-weight:700;font-size:1.42rem;
  letter-spacing:.04em;color:var(--hm-orange);line-height:1;
}
.hm-logo-sub{
  display:block;font-family:var(--f-jp);font-weight:500;
  font-size:.6rem;letter-spacing:.1em;color:var(--hm-muted);margin-top:.45em;
}
.hm-gnav{margin-left:auto;}
.hm-gnav ul{display:flex;align-items:center;gap:30px;}
.hm-gnav a{
  position:relative;display:block;padding:.4em 0;
  font-family:var(--f-round);font-weight:700;font-size:.94rem;letter-spacing:.06em;
  color:var(--hm-text);transition:color .3s var(--ease);
}
.hm-gnav a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;border-radius:2px;
  background:var(--hm-orange);transform:scaleX(0);transform-origin:right;
  transition:transform .35s var(--ease);
}
.hm-gnav a:hover{color:var(--hm-orange);}
.hm-gnav a:hover::after{transform:scaleX(1);transform-origin:left;}
/* いま見ているページ（WPメニューが付ける現在地クラス） */
.hm-gnav .current-menu-item > a,
.hm-gnav .current-menu-parent > a,
.hm-gnav .current-menu-ancestor > a,
.hm-gnav .current_page_item > a,
.hm-gnav .current-post-ancestor > a{color:var(--hm-orange);}
.hm-gnav .current-menu-item > a::after,
.hm-gnav .current-menu-parent > a::after,
.hm-gnav .current-menu-ancestor > a::after,
.hm-gnav .current_page_item > a::after,
.hm-gnav .current-post-ancestor > a::after{transform:scaleX(1);transform-origin:left;}
.hm-header-act{display:flex;align-items:center;gap:10px;flex:none;}
.hm-icon-btn{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:var(--hm-cream-2);color:var(--hm-text-s);
  transition:background .3s var(--ease),color .3s var(--ease);
}
.hm-icon-btn:hover{background:var(--hm-orange);color:#fff;}
.hm-icon-btn svg{width:19px;height:19px;}
.hm-header-cta{
  display:inline-flex;align-items:center;gap:.5em;
  padding:.75em 1.5em;border-radius:999px;background:var(--hm-orange);color:#fff;
  font-family:var(--f-round);font-weight:700;font-size:.85rem;letter-spacing:.06em;line-height:1;
  box-shadow:0 4px 0 rgba(200,95,0,.5);transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.hm-header-cta:hover{transform:translateY(2px);box-shadow:0 2px 0 rgba(200,95,0,.5);}

/* ハンバーガー */
.hm-burger{display:none;width:44px;height:44px;position:relative;flex:none;}
.hm-burger span{
  position:absolute;left:11px;width:22px;height:2.5px;border-radius:2px;background:var(--hm-text);
  transition:transform .35s var(--ease),opacity .25s var(--ease);
}
.hm-burger span:nth-child(1){top:15px;}
.hm-burger span:nth-child(2){top:21px;}
.hm-burger span:nth-child(3){top:27px;}
.hm-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.hm-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.hm-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* ドロワー */
.hm-drawer{
  position:fixed;inset:74px 0 0;z-index:99;background:var(--hm-cream);
  padding:36px 8vw 60px;overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;
}
.hm-drawer.is-open{opacity:1;visibility:visible;transform:none;}
.hm-drawer ul{display:grid;gap:4px;}
.hm-drawer a{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1em .3em;border-bottom:1px dashed var(--hm-line);
  font-family:var(--f-round);font-weight:700;font-size:1.05rem;
}
.hm-drawer a::after{content:"";width:9px;height:9px;border-top:2px solid var(--hm-orange);border-right:2px solid var(--hm-orange);transform:rotate(45deg);}
.hm-drawer .current-menu-item > a,
.hm-drawer .current_page_item > a{color:var(--hm-orange);}
.hm-drawer .hm-btn{width:100%;margin-top:32px;}
/* =========================================================
   フッター
   ========================================================= */
.hm-footer{background:var(--hm-orange);color:#fff;padding-top:64px;}
.hm-footer a{color:#fff;}
.hm-footer-top{display:grid;grid-template-columns:1.1fr 2fr;gap:48px;padding-bottom:48px;}
.hm-footer .hm-logo-txt{color:#fff;}
.hm-footer .hm-logo-sub{color:rgba(255,255,255,.8);}
.hm-footer-desc{margin-top:18px;font-size:.85rem;line-height:2;color:rgba(255,255,255,.9);max-width:26em;}
.hm-fnav{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.hm-fnav h3{
  font-family:var(--f-en);font-size:.78rem;letter-spacing:.2em;font-weight:500;
  padding-bottom:.9em;margin-bottom:1em;border-bottom:1px solid rgba(255,255,255,.35);
  text-transform:uppercase;
}
.hm-fnav li + li{margin-top:.55em;}
.hm-fnav a{font-size:.86rem;opacity:.92;transition:opacity .3s var(--ease);}
.hm-fnav a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px;}
.hm-footer-bottom{
  border-top:1px solid rgba(255,255,255,.3);padding-block:22px 26px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
}
.hm-footer-links,.hm-footer-links ul{display:flex;flex-wrap:wrap;gap:10px 22px;}
.hm-footer-links a{font-size:.78rem;opacity:.9;}
.hm-footer-links a:hover{text-decoration:underline;text-underline-offset:4px;}
.hm-copy{font-family:var(--f-en);font-size:.74rem;letter-spacing:.08em;opacity:.85;}

/* ページトップ */
.hm-pagetop{
  position:fixed;right:22px;bottom:22px;z-index:90;
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:var(--hm-white);box-shadow:0 6px 18px rgba(120,86,44,.28);color:var(--hm-orange);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s,background .3s;
}
.hm-pagetop.is-show{opacity:1;visibility:visible;transform:none;}
.hm-pagetop:hover{background:var(--hm-orange);color:#fff;}
.hm-pagetop svg{width:18px;height:18px;}

/* =========================================================
   SWELLのコンテンツ枠との調整
   （記事一覧・記事詳細など、header.php が #content を出すページ）
   ========================================================= */
.hm-site #content.l-content{padding-block:48px 72px;}
.hm-site .c-breadcrumb{padding-top:20px;}
/* 記事本文の中は :where() リセットの対象外にしてあるので、
   ここではSWELLの見た目に手を入れません。 */

/* =========================================================
   レスポンシブ（共通）
   ========================================================= */
@media (max-width:1180px){
  .hm-gnav ul{gap:20px;}
  .hm-gnav a{font-size:.88rem;}
}

@media (max-width:1024px){
  :root{--pad-sec:72px;}
  .hm-gnav,.hm-header-cta{display:none;}
  .hm-burger{display:block;}
  .hm-footer-top{grid-template-columns:1fr;gap:36px;}
}

@media (max-width:640px){
  :root{--pad-sec:60px;--r-l:20px;}
  html:has(body.hm-site){scroll-padding-top:112px;}
  body.hm-site{line-height:1.85;}
  .hm-br-sp{display:inline;}
  .hm-header-in{height:64px;}
  .hm-drawer{inset:64px 0 0;}
  .hm-logo-mark{width:36px;height:36px;}
  .hm-logo-txt{font-size:1.2rem;}
  .hm-sec-head-row{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:30px;}
  .hm-fnav{grid-template-columns:1fr 1fr;gap:26px;}
  .hm-footer-bottom{flex-direction:column;align-items:flex-start;}
  .hm-pagetop{right:14px;bottom:14px;width:46px;height:46px;}
}