/* Phase L2 / L2.1 — TOPページ専用のスタイル(TOPだけが読み込む)。
   Design Lock対象の styles.css は変更せず、既存のデザイントークン(--brand 等)の上に重ねる。
   ヒーロー写真・カード・中段の写真はAI生成(画像に文字・ボタンは焼き込まない)。文字・ボタンはすべてHTML。
   L2.1: TOP内の余白・見出し・角丸・影・ボタン・カードを下のトークンで統一する(新しい色は増やさない)。 */
.l2-top{
  --l2-r-lg:24px; --l2-r-md:18px; --l2-r-sm:14px;
  --l2-shadow-sm:0 6px 20px rgba(18,52,57,.07);
  --l2-shadow-md:0 16px 44px rgba(18,52,57,.12);
  --l2-sec:92px;
}
.l2-pic{display:block}
.l2-pic img{display:block;width:100%;height:100%;object-fit:cover}

/* ===== 共通の部品(TOP内で統一) ===== */
.l2-top .section{padding:var(--l2-sec) 0}
.l2-top .eyebrow{font-size:12.5px;letter-spacing:.14em;font-weight:800}
.l2-top .section-title{font-size:clamp(26px,3vw,38px);line-height:1.3;letter-spacing:-.025em;text-wrap:balance;word-break:auto-phrase}
.l2-top .section-lead{font-size:16px;line-height:1.85;max-width:640px}
.l2-top .btn{min-height:52px;border-radius:var(--l2-r-sm)}
.l2-top .panel,.l2-top .feature-card,.l2-top .article-card{border-radius:var(--l2-r-md);box-shadow:var(--l2-shadow-sm)}
.l2-top .panel{padding:28px}
.l2-top .info-strip{border-radius:var(--l2-r-sm)}
.l2-top .soft{background:var(--wash)}
.l2-top .region-box{gap:36px}
.l2-top .region-search h3{font-size:22px;letter-spacing:-.01em}
.l2-top .guide-links .btn{justify-content:space-between;min-height:56px;padding:0 20px}
.l2-top .feature-card .num{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--mint);color:var(--brand-d);font-size:12px;letter-spacing:.04em}
.l2-top .feature-card h3{font-size:20px;margin-top:16px}
.l2-top .feature-card p{font-size:14px;line-height:1.75}
.l2-top .article-card img{height:auto;aspect-ratio:2/1}
.l2-top .article-card h3{font-size:17px}
.l2-top .article-card p{font-size:13px;line-height:1.7}
.l2-top .pest-visual{border-radius:var(--l2-r-md)}
.l2-top .pest-icon-card{border-radius:var(--l2-r-sm)}
.l2-top .notice-safe{border-radius:var(--l2-r-sm)}
/* 中段の写真(読みもの・地域から探す。ヒーローと同じ生成写真の系統) */
.sec-photo{display:block;margin-top:24px;border-radius:var(--l2-r-md);overflow:hidden;aspect-ratio:3/2;background:var(--wash);box-shadow:var(--l2-shadow-sm)}
.sec-photo img{display:block;width:100%;height:100%;object-fit:cover}

/* ===== ヒーロー(写真を主役にした上質路線) ===== */
.l2-eyebrow{margin:0 0 14px;font-size:14px;font-weight:800;letter-spacing:.08em;color:var(--brand-d)}
.l2-hero h1{margin:0;font-size:clamp(34px,3.9vw,54px);line-height:1.2;letter-spacing:-.035em;color:var(--ink);text-wrap:balance;word-break:auto-phrase}
.l2-lead{margin:20px 0 0;font-size:clamp(16px,1.5vw,18px);line-height:1.85;color:var(--ink-2);text-wrap:pretty}
.l2-lead strong{display:block;margin-bottom:4px;color:var(--ink);font-size:clamp(17px,1.6vw,20px)}
.l2-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.l2-actions .btn{flex:0 0 auto;min-height:56px;padding:0 28px;font-size:16px}
.l2-actions .btn.secondary{flex:0 0 auto}
.l2-hero{position:relative;overflow:hidden;background:#eef6f6;min-height:clamp(560px,72vh,720px);display:flex;align-items:center}
.l2-hero .l2-pic{position:absolute;inset:0}
.l2-hero .l2-pic img{object-position:66% 36%}
.l2-hero .l2-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(250,253,253,0) 78%,rgba(250,253,253,.9) 100%),linear-gradient(90deg,rgba(250,253,253,.97) 0,rgba(250,253,253,.93) 32%,rgba(250,253,253,.62) 48%,rgba(250,253,253,0) 66%)}
.l2-inner{position:relative;z-index:2;width:100%;padding-block:60px 124px}
.l2-copy{max-width:600px}
.l2-trust{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:8px}
.l2-trust li{position:relative;padding-left:26px;font-size:14px;font-weight:700;color:var(--ink-2);line-height:1.6}
.l2-trust li::before{content:"";position:absolute;left:0;top:.2em;width:17px;height:17px;border-radius:50%;background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/10px no-repeat}

/* ===== ヒーロー下のカテゴリカード(5枚) ===== */
.l2-top .quick-rail{margin-top:-88px}
.cat-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.cat-item{display:flex;min-width:0}
.cat-card{position:relative;display:flex;flex-direction:column;width:100%;background:#fff;border:1px solid rgba(217,230,227,.95);border-radius:var(--l2-r-md);box-shadow:var(--l2-shadow-sm);overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s}
.cat-card:hover{transform:translateY(-3px);box-shadow:var(--l2-shadow-md);border-color:rgba(15,143,121,.4)}
.cat-media{display:block;aspect-ratio:8/5;overflow:hidden;background:var(--wash)}
.cat-media img{display:block;width:100%;height:100%;object-fit:cover}
.cat-body{display:block;padding:16px 18px 20px}
.cat-title{display:block;font-weight:800;font-size:17px;line-height:1.4;color:var(--ink)}
.cat-desc{display:block;margin-top:4px;font-size:13px;line-height:1.6;color:var(--muted)}
.cat-arrow{position:absolute;right:12px;top:12px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.94);color:var(--brand-d);font-size:15px;box-shadow:0 4px 12px rgba(18,52,57,.16);transition:background .2s,color .2s}
.cat-card:hover .cat-arrow{background:var(--brand);color:#fff}
.cat-media img{transition:transform .5s}
.cat-card:hover .cat-media img{transform:scale(1.04)}

/* ===== タブレット(641〜1000px) ===== */
@media(max-width:1000px){
  .l2-top{--l2-sec:72px}
  .l2-hero{min-height:560px}
  .l2-hero .l2-shade{background:linear-gradient(180deg,rgba(250,253,253,0) 78%,rgba(250,253,253,.9) 100%),linear-gradient(90deg,rgba(250,253,253,.97) 0,rgba(250,253,253,.92) 42%,rgba(250,253,253,.5) 60%,rgba(250,253,253,0) 76%)}
  .l2-copy{max-width:58%}
  .l2-hero h1{font-size:clamp(32px,5.2vw,46px)}
  .cat-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .cat-item{grid-column:span 2}
  .cat-item:nth-child(n+4){grid-column:span 3}
  .cat-media{aspect-ratio:2/1}
  .l2-top .article-card img{height:auto}
}

/* ===== スマホ(640px以下): 写真は大きいまま、文言と主ボタンに早く届く ===== */
@media(max-width:640px){
  .l2-top{--l2-sec:56px}
  .l2-actions .btn{width:100%}
  .l2-hero{display:block;min-height:0;background:#fafdfd}
  .l2-hero h1{font-size:clamp(30px,8.6vw,38px)}
  .l2-hero .l2-pic{position:relative;inset:auto;aspect-ratio:3/3.15}
  .l2-hero .l2-pic img{object-position:50% 12%}
  .l2-hero .l2-shade{inset:0 0 auto 0;height:calc(100vw * 3.15 / 3);background:linear-gradient(180deg,rgba(250,253,253,0) 0,rgba(250,253,253,0) 46%,rgba(250,253,253,.94) 76%,#fafdfd 92%)}
  .l2-inner{margin-top:-22vw;padding-block:0 112px}
  .l2-copy{max-width:none}
  .l2-lead{margin-top:14px}
  .l2-actions{margin-top:22px}
  .l2-top .quick-rail{margin-top:-64px}
  .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .cat-item,.cat-item:nth-child(n+4){grid-column:auto}
  .cat-item:last-child{grid-column:1/-1}
  .cat-media{aspect-ratio:3/2}
  .cat-body{padding:12px 14px 14px}
  .cat-title{font-size:15px}
  .cat-desc{font-size:12px}
  .cat-arrow{right:8px;top:8px;width:28px;height:28px;font-size:13px}
  .cat-item:last-child .cat-card{flex-direction:row;align-items:center}
  .cat-item:last-child .cat-body{padding-right:52px}
  .cat-item:last-child .cat-arrow{top:50%;right:14px;transform:translateY(-50%)}
  .cat-item:last-child .cat-media{flex:0 0 38%;aspect-ratio:3/2}
  .l2-top .panel{padding:20px 18px}
  .l2-top .section-lead{font-size:15px}
  .l2-top .region-box{gap:24px}
  /* 縦に長い一覧を、情報はそのまま・見せ方だけ詰める */
  .l2-top .grid-3{margin-top:22px!important;gap:12px}
  .l2-top .feature-card{display:grid;grid-template-columns:34px 1fr;column-gap:14px;align-items:start;padding:18px}
  .l2-top .feature-card .num{grid-row:1/3}
  .l2-top .feature-card h3{margin-top:2px;font-size:18px}
  .l2-top .feature-card p{margin-top:6px}
  .l2-top .article-grid{gap:12px;margin-top:22px}
  .l2-top .article-card{display:grid;grid-template-columns:104px 1fr;align-items:center}
  .l2-top .article-card img{height:100%;aspect-ratio:1/1;min-height:104px}
  .l2-top .article-card .body{padding:12px 14px}
  .l2-top .article-card h3{font-size:16px}
  .l2-top .article-card p{margin-top:4px}
  .l2-top .pest-visual img{min-height:0;aspect-ratio:16/10}
  .l2-top .pest-icon-grid{margin-top:18px}
}

/* 320px前後の最小幅: 画面の高さが小さいので、写真を少し詰めて主ボタンに早く届く(顔と風景は残す) */
@media(max-width:360px){
  .l2-hero .l2-pic{aspect-ratio:3/2.8}
  .l2-hero .l2-shade{height:calc(100vw * 2.8 / 3)}
  .l2-inner{margin-top:-24vw}
  .l2-lead{font-size:15px;line-height:1.75}
}

/* ===== 動きを減らす設定 ===== */
@media(prefers-reduced-motion:reduce){
  .l2-top *,.l2-top *::before,.l2-top *::after{transition:none!important;animation:none!important}
  .cat-card:hover,.cat-card:hover .cat-media img{transform:none}
}