/* ============================================================
   Penguin-LAB 公式サイト 共通スタイル
   トンマナ：マティス風の切り絵（カットアウト）
   ・色は :root の変数だけ触れば全ページ変わる
   ・波形・リボンなどの「切った紙」の形は --cut-* の変数にまとめてある
   ============================================================ */
:root{
  /* --- 切り絵の5色＋紙 --- */
  --paper:#E9EBE5;     /* 紙の地色（オフホワイト） */
  --green:#5EB446;     /* 明るい緑：主役の面 */
  --teal:#0B6A5E;      /* 深緑：締めの面（CTA・フッター） */
  --blue:#2743C4;      /* ウルトラマリン：メニューと差し色 */
  --crimson:#C3155C;   /* 紅：アクセント・ボタン */
  --black:#14120F;     /* 黒：海藻モチーフと文字 */
  --orange:#F2A024;    /* 橙：太い枠・面（Codomas より） */
  --yellow:#F5E400;    /* 黄：蛇・面（Codomas より） */
  --pink:#E79AA6;      /* 桜色：海藻の淡い版 */
  --purple:#8E3C7E;    /* 紫：手描きの格子（ピカソのリトグラフより） */

  --ink:#14120F;       /* 本文の文字色 */
  --muted:#5A6360;     /* 補助テキスト */
  --line:rgba(20,18,15,.14);
  --white:#FFFFFF;
  --shadow:0 10px 26px rgba(20,18,15,.08);

  /* --- 旧変数の受け皿（下層ページの既存クラスが参照している） --- */
  --bg:var(--paper);
  --lime:var(--green);
  --lime-dk:var(--teal);
  --navy:var(--black);

  --jp:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  --en:"Outfit","Noto Sans JP",sans-serif;
  --hd-h:100px;
  --radius:14px;
  /* 手で切った紙のような、左右非対称の角 */
  --cut-radius:30px 12px 26px 14px / 16px 30px 14px 28px;

  /* 波形マスク（上が波／下が波）。横は伸縮、波の高さは固定 */
  --wave-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 44' preserveAspectRatio='none'%3E%3Cpath d='M0 24 C 90 -4 168 42 266 28 C 364 14 418 44 518 34 C 618 24 698 -2 798 14 C 898 30 958 44 1058 30 C 1128 20 1170 8 1200 16 L1200 44 L0 44 Z' fill='%23fff'/%3E%3C/svg%3E");
  --wave-dn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 44' preserveAspectRatio='none'%3E%3Cpath d='M0 20 C 90 48 168 2 266 16 C 364 30 418 0 518 10 C 618 20 698 46 798 30 C 898 14 958 0 1058 14 C 1128 24 1170 36 1200 28 L1200 0 L0 0 Z' fill='%23fff'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--jp);font-size:15px;line-height:1.9;letter-spacing:.02em;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.en{font-family:var(--en);letter-spacing:.08em;text-transform:uppercase}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

/* ---------- ヘッダー ---------- */
.hd{position:fixed;inset:0 0 auto 0;height:var(--hd-h);z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 16px 0 18px;
  background:linear-gradient(to bottom,rgba(233,235,229,.96),rgba(233,235,229,.82));backdrop-filter:blur(10px)}
.hd-logo img{height:80px;width:auto}
.hd-nav{display:none;gap:22px;font-size:13px;font-weight:700}
.hd-nav a{position:relative;padding:6px 0}
/* 下線は「切った紙の帯」に見えるよう、太く角を丸めた緑 */
.hd-nav a::after{content:"";position:absolute;left:-2px;right:-2px;bottom:0;height:6px;border-radius:999px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:.25s}
.hd-nav a:hover::after,.hd-nav a[aria-current]::after{transform:scaleX(1)}
.hd-menu{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 16px;border-radius:999px;background:var(--black);color:var(--paper);font-family:var(--en);font-size:12px;letter-spacing:.14em}
.hd-menu i{width:16px;height:10px;position:relative;display:block}
.hd-menu i::before,.hd-menu i::after{content:"";position:absolute;left:0;right:0;height:3px;border-radius:999px;background:var(--green);transition:.3s}
.hd-menu i::before{top:0}.hd-menu i::after{bottom:0}
body.menu-open .hd-menu i::before{top:4px;transform:rotate(45deg)}
body.menu-open .hd-menu i::after{bottom:4px;transform:rotate(-45deg)}
@media(min-width:900px){.hd{padding:0 32px}.hd-nav{display:flex}.hd-logo img{height:88px}}

/* ---------- 全画面メニュー（ウルトラマリンの面） ---------- */
.menu{position:fixed;inset:0;z-index:40;background:var(--blue);color:var(--paper);display:flex;flex-direction:column;justify-content:center;padding:calc(var(--hd-h) + 24px) 28px 40px;
  opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;overflow:hidden}
/* 元絵と同じく、右端に深緑の縦帯。その内側に緑のリボンを1本 */
.menu::before{content:"";position:absolute;right:0;top:0;bottom:0;width:clamp(56px,22%,220px);background:var(--teal);pointer-events:none}
.menu::after{content:"";position:absolute;right:0;bottom:-6%;width:min(520px,76%);height:180px;pointer-events:none;opacity:.85;background:var(--green);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 170' preserveAspectRatio='none'%3E%3Cpath d='M-20 120 C 90 34 180 160 290 106 C 400 52 460 24 540 46' fill='none' stroke='%23fff' stroke-width='54' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 170' preserveAspectRatio='none'%3E%3Cpath d='M-20 120 C 90 34 180 160 290 106 C 400 52 460 24 540 46' fill='none' stroke='%23fff' stroke-width='54' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.menu>*{position:relative;z-index:1}
body.menu-open .menu{opacity:1;visibility:visible}
.menu ul{list-style:none;display:grid;gap:6px}
.menu li a{display:flex;align-items:baseline;gap:14px;padding:12px 0;border-bottom:1px solid rgba(233,235,229,.22);font-size:22px;font-weight:700;transition:.25s}
.menu li a .en{font-size:11px;color:var(--green);min-width:96px}
.menu li a:hover{color:var(--green);padding-left:8px}
.menu .menu-foot{margin-top:34px;font-size:12px;color:rgba(233,235,229,.7)}
@media(min-width:900px){.menu{padding-left:12vw}.menu li a{font-size:30px;max-width:640px}}

/* ---------- フッター（深緑の面） ---------- */
.ft{position:relative;overflow:hidden;background:var(--teal);color:var(--paper);padding:112px 20px 30px;margin-top:0;
  -webkit-mask:var(--wave-up) top center/100% 46px no-repeat,linear-gradient(#000,#000) bottom center/100% calc(100% - 46px) no-repeat;
          mask:var(--wave-up) top center/100% 46px no-repeat,linear-gradient(#000,#000) bottom center/100% calc(100% - 46px) no-repeat}
.ft::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-11%;width:min(760px,88%);aspect-ratio:3/1;pointer-events:none;opacity:.13;background:var(--black);
  -webkit-mask:url(img/cutout-coral.svg) center/100% 100% no-repeat;mask:url(img/cutout-coral.svg) center/100% 100% no-repeat}
.ft-in{max-width:1100px;margin:0 auto;display:grid;gap:32px;position:relative;z-index:1}
.ft-logo img{height:56px;width:auto;filter:brightness(0) invert(1)}
.ft-nav{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 24px;font-size:13px;font-weight:700}
.ft-nav a .en{display:block;font-size:10px;color:var(--green);font-weight:500}
.ft-copy{font-family:var(--en);font-size:11px;letter-spacing:.1em;color:rgba(233,235,229,.6);border-top:1px solid rgba(233,235,229,.2);padding-top:18px}
@media(min-width:900px){.ft{padding:132px 40px 36px}.ft-in{grid-template-columns:1fr 2fr}.ft-nav{grid-template-columns:repeat(3,1fr)}.ft-copy{grid-column:1/-1}}

/* ---------- 下層ページ ---------- */
.pg{padding-top:var(--hd-h)}
.pg main{overflow-x:clip}
.pg-hero{position:relative;overflow:hidden;padding:56px 20px 92px}
/* 右上に緑の切り紙 */
.pg-hero::before{content:"";position:absolute;right:-16vw;top:-14vw;width:62vw;height:62vw;max-width:520px;max-height:520px;
  background:var(--green);border-radius:46% 54% 38% 62% / 52% 40% 60% 48%;opacity:.5;pointer-events:none}
/* 左下に紅のリボン */
.pg-hero::after{content:"";position:absolute;left:-8%;bottom:-34px;width:78%;height:130px;pointer-events:none;
  background:var(--crimson);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 760 140' preserveAspectRatio='none'%3E%3Cpath d='M-20 104 C 80 24 160 150 268 104 C 376 58 430 10 540 42 C 628 68 690 104 780 84' fill='none' stroke='%23fff' stroke-width='46' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 760 140' preserveAspectRatio='none'%3E%3Cpath d='M-20 104 C 80 24 160 150 268 104 C 376 58 430 10 540 42 C 628 68 690 104 780 84' fill='none' stroke='%23fff' stroke-width='46' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  opacity:.9}
.pg-hero>*{position:relative;z-index:1}
.pg-hero .crumb{font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:center;margin-bottom:22px}
.pg-hero .crumb a:hover{color:var(--teal)}
.pg-hero .en{font-size:12px;color:var(--teal);font-weight:700}
.pg-hero h1{font-size:34px;line-height:1.3;letter-spacing:.02em;margin-top:6px;font-weight:700}
.pg-hero .lead{margin-top:18px;max-width:640px;color:var(--muted)}
.pg-hero .pg-visual{position:absolute;right:-4%;bottom:-4%;width:44%;max-width:360px;max-height:min(34vh,230px);
  object-fit:contain;object-position:right bottom;opacity:.95;pointer-events:none;z-index:0}

/* 緑の帯：上下を波形に切り抜き、中に白いリボンを敷く */
.band{position:relative;overflow:hidden;background:var(--green);color:var(--black);padding:92px 20px 96px;margin:0;
  -webkit-mask:var(--wave-up) top center/100% 46px no-repeat,linear-gradient(#000,#000) center/100% calc(100% - 92px) no-repeat,var(--wave-dn) bottom center/100% 46px no-repeat;
          mask:var(--wave-up) top center/100% 46px no-repeat,linear-gradient(#000,#000) center/100% calc(100% - 92px) no-repeat,var(--wave-dn) bottom center/100% 46px no-repeat}
/* 帯の中：紙色のリボンと、黒い海藻（元絵と同じ重ね順） */
.band::before{content:"";position:absolute;left:-6%;right:14%;bottom:12%;height:110px;pointer-events:none;opacity:.6;background:var(--paper);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 120' preserveAspectRatio='none'%3E%3Cpath d='M-20 80 C 110 20 190 116 310 82 C 430 48 490 8 610 36 C 710 59 800 92 920 70' fill='none' stroke='%23fff' stroke-width='44' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 120' preserveAspectRatio='none'%3E%3Cpath d='M-20 80 C 110 20 190 116 310 82 C 430 48 490 8 610 36 C 710 59 800 92 920 70' fill='none' stroke='%23fff' stroke-width='44' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.band::after{content:"";position:absolute;right:-4%;bottom:-4%;width:min(760px,58%);aspect-ratio:3/1;pointer-events:none;opacity:.88;background:var(--black);
  -webkit-mask:url(img/cutout-coral.svg) center/100% 100% no-repeat;mask:url(img/cutout-coral.svg) center/100% 100% no-repeat}
.band-in,.sec-in{max-width:1100px;margin:0 auto}
.band-in{position:relative;z-index:1}
.band .sec-head::before{background:var(--black)}
.band .sec-head .en{color:var(--black);opacity:.7}

.sec{position:relative;padding:56px 20px}
.sec-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:26px}
.sec-head h2{flex-basis:100%}
/* 見出しの印は、切った紙の小片 */
.sec-head::before{content:"";width:36px;height:12px;border-radius:999px;background:var(--crimson)}
.sec-head .en{font-size:11px;color:var(--teal);font-weight:700}
.sec-head h2{font-size:22px;line-height:1.3}

.cards{display:grid;gap:18px}
.card{position:relative;background:var(--white);border-radius:var(--cut-radius);padding:26px 24px;box-shadow:var(--shadow)}
.card .num{font-family:var(--en);font-size:12px;color:var(--crimson);letter-spacing:.16em;font-weight:700}
.card h3{font-size:18px;margin:6px 0 10px;line-height:1.4}
.card p{font-size:14px;color:var(--muted)}

/* カードの中の箇条書き */
.card ul{list-style:none;margin-top:10px;display:grid;gap:7px}
.card ul li{position:relative;padding-left:16px;font-size:13.5px;color:var(--muted);line-height:1.7}
.card ul li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:60% 40% 55% 45% / 45% 60% 40% 55%;background:var(--green)}
.band .card ul li::before{background:var(--crimson)}
.card .sub{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px}
/* カードの外（セクション末尾）に置く注記 */
.sec-in>.sub,.band-in>.sub{margin-top:16px;font-size:12.5px;color:var(--muted);line-height:1.8}

/* セクションの導入文（見出しの下・カードの上） */
.sec-lead{font-size:15.5px;line-height:2;margin:-6px 0 26px;max-width:760px}
.band .sec-lead{color:var(--white)}
/* 「提供サービス」のような小見出し */
.sub-head{font-family:var(--en);font-size:12px;letter-spacing:.16em;font-weight:700;color:var(--crimson);
          display:flex;align-items:center;gap:10px;margin-bottom:14px}
.sub-head::after{content:"";flex:1;height:2px;background:var(--line)}
.band .sub-head{color:var(--white)}
.band .sub-head::after{background:rgba(255,255,255,.3)}
.band .card .sub{color:var(--muted)}
/* 帯の中のカードから各節へ送るリンク */
.band .tmp{color:var(--white);border-color:rgba(255,255,255,.55)}
.card .jump{margin-top:10px}
.card .jump a{display:inline-block;color:var(--teal);font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.card .jump a:hover{color:var(--crimson)}
.band .card .jump{margin-top:10px}
.band .card .jump a{display:inline-block;color:var(--teal);font-weight:700;
              text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.band .card .jump a:hover{color:var(--crimson)}
/* ヘッダーの下に見出しが潜らないように（ページ内リンクの着地点） */
.sec[id]{scroll-margin-top:84px}

/* レポートのサンプル（実物。社名は伏せ、読めない大きさに縮めた画像） */
.mocks{display:grid;gap:18px}
.mock{position:relative;background:var(--white);border-radius:var(--cut-radius);padding:14px 14px 4px;box-shadow:var(--shadow);overflow:hidden}
.mock::after{content:"サンプル";position:absolute;right:16px;top:16px;z-index:2;background:var(--black);color:var(--paper);font-size:10px;letter-spacing:.14em;padding:3px 10px;border-radius:999px}
.mock-page{width:100%;aspect-ratio:1/1.3;object-fit:cover;object-position:top center;border:1px solid var(--line);border-radius:8px;background:#fff}
.mock figcaption{padding:12px 4px 10px;font-size:13px;font-weight:700;line-height:1.5}
.mock figcaption small{display:block;font-weight:500;font-size:11.5px;color:var(--muted);margin-top:3px}
.mocks.four{grid-template-columns:repeat(2,1fr);gap:14px}
.mock a{display:block}
.mock a:hover .mock-page{transform:translateY(-3px)}
.mock-page{transition:transform .25s}
.sample-link{margin-top:26px}
@media(min-width:900px){.mocks{grid-template-columns:repeat(3,1fr);gap:22px}
  .mocks.two{grid-template-columns:repeat(2,1fr);max-width:720px}
  .mocks.four{grid-template-columns:repeat(4,1fr);gap:18px}}

.tbl{width:100%;border-collapse:collapse;background:var(--white);border-radius:var(--cut-radius);overflow:hidden;box-shadow:var(--shadow)}
.tbl th,.tbl td{padding:16px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);font-size:14px}
.tbl th{width:34%;font-weight:700;background:rgba(94,180,70,.18);white-space:nowrap}
.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:0}
.tbl td a{color:var(--teal);font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.tbl td a:hover{color:var(--crimson)}
.note{display:inline-block;background:var(--teal);color:var(--green);font-size:11px;font-family:var(--en);letter-spacing:.14em;padding:3px 10px;border-radius:999px;vertical-align:middle;margin-left:6px}
.tmp{color:#B34747;font-size:12px;border:1px dashed #B34747;padding:2px 8px;border-radius:6px;margin-left:6px;vertical-align:middle;font-weight:400;white-space:nowrap;display:inline-block}

/* CTA：深緑の面を波形で切り出し、黒い海藻を1本置く */
.cta{position:relative;overflow:hidden;background:var(--teal);color:var(--paper);padding:104px 20px 76px;text-align:center;margin-top:0;
  -webkit-mask:var(--wave-up) top center/100% 46px no-repeat,linear-gradient(#000,#000) bottom center/100% calc(100% - 46px) no-repeat;
          mask:var(--wave-up) top center/100% 46px no-repeat,linear-gradient(#000,#000) bottom center/100% calc(100% - 46px) no-repeat}
.cta::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-13%;width:min(700px,82%);aspect-ratio:3/1;pointer-events:none;opacity:.13;background:var(--black);
  -webkit-mask:url(img/cutout-coral.svg) center/100% 100% no-repeat;mask:url(img/cutout-coral.svg) center/100% 100% no-repeat}
.cta>*{position:relative;z-index:1}
.cta h2{font-size:22px;margin-bottom:10px}
.cta p{color:rgba(233,235,229,.78);font-size:14px;margin-bottom:24px}

/* ボタン：紅の切り紙 */
.btn{display:inline-flex;align-items:center;gap:12px;background:var(--crimson);color:var(--paper);font-weight:700;padding:15px 28px;border-radius:999px;font-size:14px;transition:.25s}
.btn:hover{transform:translateY(-2px) rotate(-1deg)}
.btn .arw{width:22px;height:22px;border-radius:50%;background:var(--paper);color:var(--crimson);display:grid;place-items:center;font-size:12px}
.btn.ghost{background:transparent;color:var(--black);box-shadow:inset 0 0 0 3px var(--black)}
.btn.ghost .arw{background:var(--black);color:var(--paper)}
.cta .btn{background:var(--green);color:var(--black)}
.cta .btn .arw{background:var(--black);color:var(--green)}

.pg-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:0 20px 56px;max-width:1100px;margin:0 auto}
.pg-nav a{background:var(--white);border-radius:var(--cut-radius);padding:18px;box-shadow:var(--shadow);font-weight:700;font-size:14px;display:flex;justify-content:space-between;align-items:center;transition:.25s}
.pg-nav a:hover{transform:translateY(-2px)}
.pg-nav a .en{display:block;font-size:10px;color:var(--teal);font-weight:500}
@media(min-width:900px){
  .pg-hero{padding:96px 40px 130px}.pg-hero h1{font-size:48px}.pg-hero .pg-visual{right:6%;bottom:-4%;max-height:min(42vh,320px)}
  .pg-hero::after{width:56%;height:150px}
  .band{padding:80px 40px 84px}.sec{padding:80px 40px}.sec-head h2{font-size:28px;flex-basis:auto}
  .cards{grid-template-columns:repeat(3,1fr)}.cards.two{grid-template-columns:repeat(2,1fr)}
  .tbl th{width:26%}.cta{padding:96px 40px 88px}.cta h2{font-size:30px}.pg-nav{padding-bottom:80px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}

/* ---------- お知らせ一覧（おじペンが1件目にまたがる） ---------- */
.topics-page .pg-hero{overflow:visible;padding-bottom:6px;z-index:2}
.topics-page .pg-hero::after{display:none}          /* 紅のリボンは出さない */
.topics-page .pg-hero .pg-visual{right:0;bottom:-36px;width:27%;max-width:118px;max-height:none;z-index:3;opacity:1}
.topics-page .pg-hero .lead{padding-right:31%}   /* おじペンに文字が掛からないように */
.topics-page .sec.tight{padding-top:16px;padding-bottom:110px}
@media(min-width:900px){
  .topics-page .pg-hero{padding-bottom:10px}
  .topics-page .pg-hero .pg-visual{right:8%;bottom:-74px;width:22%;max-width:200px}
  .topics-page .pg-hero .lead{padding-right:0}
  .topics-page .sec.tight{padding-top:22px}
}

/* ---------- お知らせの詳細ページ ---------- */
.tp-detail{max-width:760px;margin:0 auto}
.tp-detail .tp-hero{width:100%;height:auto;border-radius:var(--cut-radius);margin-bottom:26px}
.tp-detail p{margin-bottom:16px;line-height:1.95}
.tp-detail h2{font-size:19px;line-height:1.5;margin:30px 0 12px;display:flex;align-items:center;gap:11px}
.tp-detail h2::before{content:"";width:26px;height:10px;border-radius:999px;background:var(--crimson);flex:none}
.tp-detail ul{list-style:none;margin:6px 0 18px;display:grid;gap:8px}
.tp-detail li{position:relative;padding-left:17px;line-height:1.85}
.tp-detail li::before{content:"";position:absolute;left:0;top:.66em;width:8px;height:8px;border-radius:60% 40% 55% 45% / 45% 60% 40% 55%;background:var(--green)}
.tp-detail .tbl{margin:18px 0 6px}
.tp-back{margin-top:34px}
@media(min-width:900px){.tp-detail h2{font-size:22px}}

/* ---------- 組織概要（恐竜が表にまたがる） ---------- */
.about .pg-hero{overflow:visible;padding-bottom:8px;z-index:2}
.about .pg-hero .pg-visual{right:-3%;bottom:-40px;width:42%;max-width:180px;max-height:none;z-index:3;opacity:1}
.about .sec.tight{padding-top:18px}
@media(min-width:900px){
  .about .pg-hero{padding-bottom:14px}
  .about .pg-hero .pg-visual{right:2%;bottom:-104px;width:34%;max-width:330px}
  .about .sec.tight{padding-top:26px;padding-bottom:132px}
}

/* ---------- 代表メッセージ ---------- */
.msg{max-width:820px;margin:0 auto}
.msg-head{display:grid;gap:28px;align-items:center;margin-bottom:26px}
.msg-photo-wrap{position:relative;width:min(240px,64%);justify-self:center}
.msg-photo{position:relative;z-index:1;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 26%;
  border-radius:var(--cut-radius);background:rgba(94,180,70,.18)}
/* 紅のリボンは写真の奥。文字には掛けない */
.msg-photo-wrap::after{content:"";position:absolute;z-index:0;left:-24%;right:-24%;bottom:-6%;height:80px;pointer-events:none;background:var(--crimson);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 110' preserveAspectRatio='none'%3E%3Cpath d='M-10 74 C 60 16 118 100 182 70 C 246 40 292 14 352 32 C 392 44 412 66 430 58' fill='none' stroke='%23fff' stroke-width='40' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 110' preserveAspectRatio='none'%3E%3Cpath d='M-10 74 C 60 16 118 100 182 70 C 246 40 292 14 352 32 C 392 44 412 66 430 58' fill='none' stroke='%23fff' stroke-width='40' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.msg-head h3{font-size:23px;line-height:1.5;letter-spacing:.01em}
.msg-head .msg-sub{margin-top:12px;font-size:14px;color:var(--muted)}
.msg-body{padding:30px 24px}
.msg-body p{margin-bottom:17px}
.msg-body p:last-child{margin-bottom:0}
.msg-body .punch{font-weight:700;color:var(--ink)}
.msg-sign{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);font-weight:700;color:var(--ink)}
.msg-sign small{display:block;font-weight:500;font-size:12px;color:var(--muted);margin-bottom:4px}
@media(min-width:900px){
  .msg-head{grid-template-columns:260px 1fr;gap:34px;margin-bottom:34px}
  .msg-photo-wrap{width:100%;justify-self:stretch}
  .msg-photo-wrap::after{left:-50%;right:-12%;bottom:-16%;height:118px}
  .msg-head h3{font-size:29px}
  .msg-body{padding:42px 40px}
}

/* ---------- 0円サポート（サンマを上に、主題コピーを主役にする） ---------- */
.support .pg-hero{padding-bottom:58px}
.support .pg-hero::after{display:none}          /* 紅のリボンは出さない。文字量が多いため */
.support .pg-hero::before{opacity:.42}
.sup-hero-in{display:grid;gap:18px}
.sup-hero-img{order:-1}                          /* スマホではサンマを見出しより上に */
.sup-hero-img img{width:100%;max-width:400px;height:auto;display:block;margin:0 auto;
  transform:rotate(-4deg);filter:drop-shadow(0 8px 18px rgba(20,18,15,.12))}
.support .pg-hero h1{font-size:30px}
.sup-catch{margin-top:16px;font-size:18px;line-height:1.8;font-weight:700;letter-spacing:.01em}
.sup-catch strong{background:linear-gradient(transparent 62%,rgba(94,180,70,.55) 62%)}
.sup-free{display:inline-block;margin-top:18px;background:var(--crimson);color:var(--paper);
  font-weight:700;font-size:15px;letter-spacing:.02em;padding:9px 20px;border-radius:999px;transform:rotate(-1.5deg)}
.sup-desc{margin-top:18px;font-size:14px;line-height:2;color:var(--muted)}
.sup-desc strong{color:var(--ink)}
/* カードの中の「出てくるもの」の見出し */
.card .lst-head{margin-top:16px;padding-top:13px;border-top:1px solid var(--line);
  font-family:var(--en);font-size:11px;letter-spacing:.14em;font-weight:700;color:var(--crimson)}
.card .lst-head+ul{margin-top:9px}
@media(min-width:900px){
  .support .pg-hero{padding-bottom:76px}
  .support .pg-hero h1{font-size:40px}
  .sup-hero-in{grid-template-columns:1.12fr .88fr;align-items:start;gap:34px}
  .sup-hero-img{order:0;padding-top:52px}
  .sup-hero-img img{max-width:none}
  .sup-catch{font-size:23px;line-height:1.75}
  .sup-desc{font-size:14.5px;max-width:620px}
}

/* 見出しを置かないページ用の詰めたスペーシング */
.pg-hero.tight{padding-bottom:26px}
.pg-hero.tight::after{display:none}
.sec.tight{padding-top:10px}
@media(min-width:900px){.pg-hero.tight{padding-bottom:36px}.sec.tight{padding-top:16px}}

/* PC だけ、切り絵の装飾を足す（body に deco-page クラスが付いたページ）
   ・左右の縦帯は画面に固定。z-index:-1 なので文字より必ず後ろに来る
   ・余白に置く形は .msg の左右にぶら下げる */
@media(min-width:1100px){
  body.deco-page::before,body.deco-page::after{content:"";position:fixed;top:0;bottom:0;width:clamp(30px,3.4vw,58px);z-index:-1;pointer-events:none}
  body.deco-page::before{left:0;background:var(--blue)}
  body.deco-page::after{right:0;background:var(--teal)}

  .deco-page .msg{position:relative}
  /* 左の余白：緑の切り紙 */
  .deco-page .msg::before{content:"";position:absolute;z-index:-1;left:-152px;top:150px;width:168px;height:206px;pointer-events:none;
    background:var(--green);opacity:.55;border-radius:54% 46% 36% 64% / 42% 58% 42% 58%}
  /* カードの下から顔を出す黒い海藻 */
  .deco-page .msg::after{content:"";position:absolute;z-index:-1;left:50%;transform:translateX(-50%);width:440px;aspect-ratio:3/1;bottom:-116px;pointer-events:none;
    opacity:.9;background:var(--black);
    -webkit-mask:url(img/cutout-coral.svg) center/100% 100% no-repeat;mask:url(img/cutout-coral.svg) center/100% 100% no-repeat}
  /* 右の余白：紅のリボン。カードの右端から画面の右端まで一気に伸ばす
     （right/width の 50% はカード幅の半分。カードは画面中央にあるので 50vw-50% で画面端まで届く） */
  .deco-page main{overflow-x:clip}
  .deco-page .msg-body::before{content:"";position:absolute;z-index:0;right:calc(50% - 50vw);top:96px;
    width:calc(50vw - 50% + 18px);height:86px;pointer-events:none;
    background:var(--crimson);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'%3E%3Cpath d='M-6 54 C 34 10 66 76 104 48 C 142 20 168 12 206 30' fill='none' stroke='%23fff' stroke-width='30' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'%3E%3Cpath d='M-6 54 C 34 10 66 76 104 48 C 142 20 168 12 206 30' fill='none' stroke='%23fff' stroke-width='30' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
  /* 左の余白：青の小さな切り紙 */
  .deco-page .msg-body::after{content:"";position:absolute;z-index:-1;left:-124px;bottom:150px;width:116px;height:138px;pointer-events:none;
    background:var(--blue);opacity:.75;border-radius:44% 56% 58% 42% / 56% 40% 60% 44%}
  /* ヒーローの緑の面。ヒーローの外まではみ出させたいので overflow を解除し、
     z-index:-1 で本文より後ろに回す。ビールの写真はヒーロー内に収める */
  .deco-page .pg-hero{overflow:visible}
  .deco-page .pg-hero::before{z-index:-1;right:-9vw;top:-11vw;width:54vw;max-width:600px;max-height:none;aspect-ratio:1/1.1;height:auto;opacity:.42}
  .deco-page .pg-hero .pg-visual{bottom:0}
}


/* ============================================================
   装飾パーツ（切り絵のモチーフ集）
   使い方：置きたい親に position:relative を付けて、中に1行入れる。
     <span class="deco m-fern c-blue o6" style="left:-70px;top:120px;width:190px"></span>
   ・形のクラス（m-*）を付けると縦横比は自動。width だけ決めればよい
   ・色は c-*、傾きは r*、薄さは o* で足す
   ・既定では文字より後ろ（z-index:-1）。前に出したいときは front を足す
   ============================================================ */
.deco{position:absolute;z-index:-1;pointer-events:none;display:block;background:var(--green)}
.deco.front{z-index:0}
/* 装飾を入れる親には必ずこれを付ける。
   これが無いと、親に背景色があるときに装飾が背景の下に潜って見えなくなる */
.has-deco{position:relative;isolation:isolate}

/* --- 形 --- */
.m-coral {aspect-ratio:900/300;-webkit-mask:url(img/cutout-coral.svg) center/100% 100% no-repeat;mask:url(img/cutout-coral.svg) center/100% 100% no-repeat}   /* 指の多い海藻（横長） */
.m-algae {aspect-ratio:400/260;-webkit-mask:url(img/cutout-algae.svg) center/100% 100% no-repeat;mask:url(img/cutout-algae.svg) center/100% 100% no-repeat}   /* 丸い葉が連なった海藻 */
.m-fern  {aspect-ratio:420/220;-webkit-mask:url(img/cutout-fern.svg) center/100% 100% no-repeat;mask:url(img/cutout-fern.svg) center/100% 100% no-repeat}   /* 弧を描く葉 */
.m-hand  {aspect-ratio:320/300;-webkit-mask:url(img/cutout-hand.svg) center/100% 100% no-repeat;mask:url(img/cutout-hand.svg) center/100% 100% no-repeat}   /* 指が放射状に伸びる形 */
.m-snake {aspect-ratio:480/160;-webkit-mask:url(img/cutout-snake.svg) center/100% 100% no-repeat;mask:url(img/cutout-snake.svg) center/100% 100% no-repeat}   /* 太くうねる蛇 */
.m-line  {aspect-ratio:360/260;-webkit-mask:url(img/cutout-line.svg) center/100% 100% no-repeat;mask:url(img/cutout-line.svg) center/100% 100% no-repeat}   /* 細い折れ線（開いた三角） */
.m-blob  {aspect-ratio:1/1.08;border-radius:54% 46% 36% 64% / 42% 58% 42% 58%}
.m-blob2 {aspect-ratio:1/.92;border-radius:44% 56% 58% 42% / 56% 40% 60% 44%}
.m-pill  {aspect-ratio:5/1;border-radius:999px}
.m-band  {border-radius:0}            /* 縦帯・横帯。width と height を直接決める */
.m-zigzag{aspect-ratio:400/120;-webkit-mask:url(img/cutout-zigzag.svg) center/100% 100% no-repeat;mask:url(img/cutout-zigzag.svg) center/100% 100% no-repeat}  /* ギザギザ（稲妻） */
/* m-spiral は 2026-09-21 に「子どもっぽい」として全ページで不使用に（中村氏）。クラスは残すが新しく使わないこと */
.m-spiral{aspect-ratio:1/1;-webkit-mask:url(img/cutout-spiral.svg) center/100% 100% no-repeat;mask:url(img/cutout-spiral.svg) center/100% 100% no-repeat}      /* 渦巻き */
.m-brush {aspect-ratio:400/300;-webkit-mask:url(img/cutout-brush.svg) center/100% 100% no-repeat;mask:url(img/cutout-brush.svg) center/100% 100% no-repeat}  /* 筆で塗った面 */
.m-checker{-webkit-mask:url(img/pattern-checker.svg) 0 0/var(--cs,44px) var(--cs,44px) repeat;
           mask:url(img/pattern-checker.svg) 0 0/var(--cs,44px) var(--cs,44px) repeat}
.m-grid{-webkit-mask:url(img/pattern-grid.svg) 0 0/var(--gs,58px) var(--gs,58px) repeat;
        mask:url(img/pattern-grid.svg) 0 0/var(--gs,58px) var(--gs,58px) repeat}

/* --- 色 --- */
.c-green{background:var(--green)}   .c-teal{background:var(--teal)}
.c-blue{background:var(--blue)}     .c-crimson{background:var(--crimson)}
.c-black{background:var(--black)}   .c-orange{background:var(--orange)}
.c-yellow{background:var(--yellow)} .c-pink{background:var(--pink)}
.c-purple{background:var(--purple)}
.c-paper{background:var(--paper)}

/* --- 傾き・薄さ --- */
.r-16{transform:rotate(-16deg)} .r-8{transform:rotate(-8deg)} .r8{transform:rotate(8deg)} .r16{transform:rotate(16deg)}
.o8{opacity:.8} .o6{opacity:.6} .o4{opacity:.4} .o2{opacity:.2}

/* --- 面を切り替える枠（Codomas の橙の額縁） --- */
.pat-frame{border:clamp(14px,3.2vw,44px) solid var(--orange)}
.pat-frame.f-teal{border-color:var(--teal)} .pat-frame.f-yellow{border-color:var(--yellow)}
.pat-frame.f-green{border-color:var(--green)} .pat-frame.f-blue{border-color:var(--blue)}

/* --- スマホでは装飾を出さないページ用 --- */
@media(max-width:899px){.deco.pc-only{display:none}}
/* 画面の端に貼りつける帯は、本文の列と当たらない広い画面でだけ出す
   （1240px 未満だと中央の箱が画面端に近づき、見出しの左に食い込む） */
.deco.edge-only{display:none}
@media(min-width:1240px){.deco.edge-only{display:block}}

/* ---------- お問い合わせフォーム ---------- */
.form-card{padding:28px 22px}
.form-card::after{display:none}
.form-lead{font-size:14px;color:var(--muted);margin-bottom:20px}
.req{display:inline-block;font-size:10px;font-weight:700;color:var(--paper);background:var(--crimson);border-radius:4px;padding:1px 6px;margin-left:6px;vertical-align:middle;line-height:1.6}
.form{display:grid;gap:18px}
.f-row{display:grid;gap:6px}
.f-row label,.f-label{font-size:14px;font-weight:700}
.form input[type=text],.form input[type=email],.form input[type=tel],.form textarea{width:100%;font:inherit;font-size:16px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--white);color:var(--ink);transition:.2s}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(94,180,70,.4)}
.form textarea{resize:vertical;min-height:140px}
.f-checks{display:flex;flex-wrap:wrap;gap:8px 14px}
.f-checks label,.f-agree label{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:14px;cursor:pointer}
.f-checks input,.f-agree input{width:18px;height:18px;accent-color:var(--teal)}
.f-agree a{text-decoration:underline;text-underline-offset:3px}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.f-submit{gap:12px}
.f-submit .btn{justify-self:start;border:0;cursor:pointer}
.f-submit .btn:disabled{opacity:.6;cursor:wait;transform:none}
.f-status{font-size:13px;color:var(--muted);min-height:1.4em}
.f-status.is-error{color:#B34747}
@media(min-width:900px){.form-card{padding:40px}.form{max-width:680px}}