@charset "UTF-8";
/*
 * あい サービスめやすチェック
 * すべてのセレクタを #aimi-meyasu の下にスコープしている。
 * クラス名の接頭辞は am-。SWELL のスタイルとの衝突を避けるため。
 * font-family は指定しない（サイトのフォントを継承する）。
 */

#aimi-meyasu{
  /* 色の変数はブロック内だけに定義する（:root には置かない） */
  --am-green:#7cb342;
  --am-green-deep:#4f7a24;
  --am-green-soft:#f0f7e9;
  --am-ink:#2f3a28;
  --am-ink-sub:#5d6a55;
  --am-paper:#ffffff;
  --am-line:#d9e6cc;
  --am-note:#fbf8ec;
  --am-note-line:#e8dfbd;
  --am-btn-bg:#4f7a24;
  --am-btn-bg-hover:#3e6119;
  --am-btn-ink:#ffffff;

  /* 試作の .wrap にあたる外枠。背景色はこのブロック内だけに付く */
  max-width:640px;
  margin-left:auto;
  margin-right:auto;
  padding:24px 16px 32px;
  background:var(--am-green-soft);
  border-radius:20px;
  color:var(--am-ink);
  font-size:17px;
  line-height:1.8;
  text-align:left;

  /* 固定ヘッダー対策の保険。実際の値は JS が実測して上書きする */
  scroll-margin-top:96px;
}

#aimi-meyasu *,
#aimi-meyasu *::before,
#aimi-meyasu *::after{box-sizing:border-box}

/* ------------------------------------------------------------------
 * SWELL のコンテンツ用スタイルを打ち消す
 * （ショートコードは .post_content の中に置かれるため、
 *   見出し・リスト・リンクに SWELL の装飾が乗ってしまう）
 * ---------------------------------------------------------------- */
#aimi-meyasu h1,
#aimi-meyasu h2,
#aimi-meyasu h3{
  background:none;
  border:0;
  padding:0;
  font-weight:700;
  color:var(--am-ink);
  text-align:left;
}
#aimi-meyasu h1::before,#aimi-meyasu h1::after,
#aimi-meyasu h2::before,#aimi-meyasu h2::after,
#aimi-meyasu h3::before,#aimi-meyasu h3::after{
  content:none;
  display:none;
}
#aimi-meyasu ul{list-style:disc}
#aimi-meyasu ul li::before,
#aimi-meyasu ul li::after{content:none;display:none}
#aimi-meyasu ul li{background:none;padding-left:0}
#aimi-meyasu a{box-shadow:none;background:none}
#aimi-meyasu button{font:inherit;margin:0}

/* ------------------------------------------------------------------
 * 本体
 * ---------------------------------------------------------------- */
#aimi-meyasu .am-panel{
  background:var(--am-paper);
  border-radius:20px;
  padding:28px 20px;
  border:1px solid var(--am-line);
}
@media (min-width:600px){
  #aimi-meyasu{padding:32px 20px 40px}
  #aimi-meyasu .am-panel{padding:32px 24px}
}

#aimi-meyasu h2{font-size:1.35rem;line-height:1.55;margin:0 0 8px}
/* はじめの画面の見出し。
   ページタイトルが h1 なので、ページ内に h1 が2つできないよう h2 で出している。
   見た目は従来どおりにしたいので、大きさと余白だけここで上書きする。
   （クラス指定なので、上の h2 の指定より優先される） */
#aimi-meyasu .am-ttl{font-size:1.6rem;line-height:1.5;margin:0 0 16px}
#aimi-meyasu p{margin:0 0 12px}
#aimi-meyasu .am-lead{color:var(--am-ink-sub)}
#aimi-meyasu .am-small{font-size:.9rem;color:var(--am-ink-sub)}

/* 読み上げ専用（画面には出さない） */
#aimi-meyasu .am-sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* 進み具合 */
#aimi-meyasu .am-progress{display:flex;gap:6px;margin-bottom:24px}
#aimi-meyasu .am-progress span{height:6px;flex:1;border-radius:3px;background:var(--am-line)}
#aimi-meyasu .am-progress span.am-on{background:var(--am-green)}

/* 選択肢 */
#aimi-meyasu .am-options{display:grid;gap:12px;margin-top:20px}
#aimi-meyasu .am-opt{
  display:block;width:100%;text-align:left;
  font:inherit;color:var(--am-ink);
  background:var(--am-paper);
  border:2px solid var(--am-line);
  border-radius:14px;
  padding:14px 18px;
  cursor:pointer;
}
#aimi-meyasu .am-opt:hover{border-color:var(--am-green)}
#aimi-meyasu .am-opt:focus-visible,
#aimi-meyasu .am-btn:focus-visible,
#aimi-meyasu .am-link-btn:focus-visible{outline:3px solid var(--am-green-deep);outline-offset:2px}
#aimi-meyasu .am-opt small{display:block;color:var(--am-ink-sub);font-size:.85rem;line-height:1.6}

#aimi-meyasu .am-btn{
  display:inline-block;font:inherit;font-weight:700;
  background:var(--am-btn-bg);color:var(--am-btn-ink);border:0;border-radius:999px;
  padding:12px 32px;cursor:pointer;text-decoration:none;
}
#aimi-meyasu .am-btn:hover{background:var(--am-btn-bg-hover);color:var(--am-btn-ink)}
#aimi-meyasu .am-center{text-align:center;margin-top:24px}
#aimi-meyasu .am-link-btn{
  font:inherit;font-size:.95rem;font-weight:500;
  background:var(--am-paper);color:var(--am-ink);
  border:2px solid var(--am-line);border-radius:999px;
  padding:10px 24px;cursor:pointer;
}
#aimi-meyasu .am-link-btn:hover{border-color:var(--am-green)}
#aimi-meyasu .am-nav{margin-top:20px}
#aimi-meyasu .am-map-btn{
  display:inline-block;margin-top:12px;
  font-size:.92rem;font-weight:500;color:var(--am-ink);text-decoration:none;
  background:var(--am-paper);border:2px solid var(--am-line);border-radius:999px;
  padding:8px 20px;
}
#aimi-meyasu .am-map-btn:hover{border-color:var(--am-green);color:var(--am-ink)}
#aimi-meyasu .am-map-btn:focus-visible{outline:3px solid var(--am-green-deep);outline-offset:2px}

#aimi-meyasu .am-help{
  background:var(--am-note);border:1px solid var(--am-note-line);
  border-radius:12px;padding:12px 16px;margin-top:12px;font-size:.92rem;
}

/* 結果 */
#aimi-meyasu .am-result-head{margin-bottom:20px}
#aimi-meyasu .am-card{border:2px solid var(--am-green);border-radius:16px;padding:20px;margin-bottom:16px}
#aimi-meyasu .am-card.am-sub{border:1px solid var(--am-line)}
#aimi-meyasu .am-card h3{margin:0 0 6px;font-size:1.2rem;line-height:1.5}
#aimi-meyasu .am-card .am-tag{display:inline-block;font-size:.8rem;background:var(--am-green-soft);color:var(--am-green-deep);border-radius:6px;padding:0 8px;margin-bottom:6px}
#aimi-meyasu .am-card .am-caution{background:var(--am-note);border:1px solid var(--am-note-line);border-radius:10px;padding:10px 14px;font-size:.9rem;margin-top:10px}
#aimi-meyasu .am-section-title{font-size:1.05rem;font-weight:700;margin:28px 0 10px}
#aimi-meyasu ul.am-steps{margin:0;padding-left:1.2em}
#aimi-meyasu ul.am-steps li{margin-bottom:6px}
#aimi-meyasu .am-ai-note{border-top:1px dashed var(--am-line);margin-top:24px;padding-top:16px;font-size:.92rem;color:var(--am-ink-sub)}
#aimi-meyasu .am-ai-note a{color:var(--am-green-deep)}
#aimi-meyasu .am-disclaimer{margin-top:24px;font-size:.85rem;color:var(--am-ink-sub);line-height:1.7}

@media (prefers-reduced-motion:no-preference){
  #aimi-meyasu .am-panel{animation:am-fade .25s ease-out}
  @keyframes am-fade{from{opacity:0}to{opacity:1}}
}