/* =============================================================
 * サービス詳細ページ（/service/〜）への内部リンクブロック
 * 2026/10 内部SEO改善（20261028_内部SEO資料.xlsx 施策1・2・3・5）
 *
 * 使用箇所
 *  - トップページ            : .atam-svcLinks（4カード）
 *  - 小学生 / 中高生クラスLP : .atam-pointLinks（特長カード内テキストリンク）
 *  - コンテスト詳細          : #about 内 .atam-aboutInner + .atam-svcLinks_list（3カード）
 *  - ブログ記事末尾          : .atam-svcLinks（見出し + 3カード）
 *  - 講座一覧                : .atam-svcLinks + .atam-btnLinks（ボタン2つ）
 * ============================================================= */

/* ---- カード型リンク ---- */
.atam-svcLinks{max-width:1000px;margin:56px auto;padding:0 20px;box-sizing:border-box}
.atam-svcLinks_head{text-align:center;margin-bottom:24px}
.atam-svcLinks .atam-svcLinks_title{font-size:24px;font-weight:700;margin:0 0 8px;padding:0;border:none;background:none;text-align:center}
.atam-svcLinks .atam-svcLinks_title:before,
.atam-svcLinks .atam-svcLinks_title:after{display:none}
.atam-svcLinks .atam-svcLinks_lead{font-size:14px;color:#555;margin:0;text-align:center}
.atam-svcLinks_list{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:18px;list-style:none;margin:0;padding:0}
.atam-svcLinks_item a{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid #e1e1e1;border-radius:12px;overflow:hidden;color:#000;text-decoration:none;box-shadow:0 4px 10px rgba(0,0,0,.08);transition:transform .2s,box-shadow .2s}
.atam-svcLinks_item a:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(0,0,0,.12);opacity:1}
.atam-svcLinks_img{aspect-ratio:4/3;background:#f3efe9 center/cover no-repeat;display:flex;align-items:center;justify-content:center;font-family:"Jost",sans-serif;font-weight:700;font-size:22px;letter-spacing:.08em;color:#e3441e}
.atam-svcLinks_img.is-wide{background-size:contain;background-color:#fff}
.atam-svcLinks_body{position:relative;padding:14px 44px 16px 16px;flex:1}
.atam-svcLinks_body .atam-svcLinks_name{font-size:16px;font-weight:700;margin:0 0 6px;text-align:left}
.atam-svcLinks_body .atam-svcLinks_text{font-size:13px;line-height:1.7;color:#444;margin:0;text-align:left}
.atam-svcLinks_body img{position:absolute;right:14px;top:50%;width:19px;transform:translateY(-50%)}

/* ---- 特長カード内のテキストリンク ---- */
.atam-pointLinks{margin-top:14px;display:flex;flex-direction:column;gap:8px;align-items:center}
.atam-pointLinks a{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:#000;text-decoration:none;border-bottom:1px solid #000;padding-bottom:2px}
.atam-pointLinks a img{width:16px}

/* ---- ボタン型リンク ---- */
.atam-btnLinks{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.atam-btnLinks a{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border:2px solid #000;border-radius:40px;background:#fff;color:#000;font-weight:700;text-decoration:none}
/* 矢印アイコンはインラインSVG（viewBox に 1px の余白を持たせ、円が描画領域の端で欠けないようにする） */
.atam-btnLinks a .atam-btnLinks_icon{display:block;flex:0 0 auto;width:20px;height:20px;overflow:visible}
.atam-btnLinks a .atam-btnLinks_icon circle{fill:#000}
.atam-btnLinks a .atam-btnLinks_icon path{fill:#fff} /* 他CSSの path{fill:currentColor} を上書き */
.atam-btnLinks a img{display:block;flex:0 0 auto;width:20px;height:20px;max-width:none;max-height:none}

/* ---- コンテスト詳細「アタムアカデミーとは」 ---- */
.atam-aboutInner{max-width:860px;margin:0 auto;padding:48px 20px 0;box-sizing:border-box}
.atam-aboutText{max-width:760px;margin:0 auto 28px;font-size:15px;line-height:2}
.atam-aboutText p{margin:0 0 1em}

@media (max-width:768px){
  .atam-svcLinks{margin:40px auto}
  .atam-svcLinks_list{grid-template-columns:repeat(2,1fr);gap:12px}
  /* コンテスト詳細・ブログ記事末尾（3カード）はSPで縦1列 */
  .atam-svcLinks_list.is-sp1col{grid-template-columns:1fr;gap:14px}
  .atam-svcLinks_list.is-sp1col .atam-svcLinks_img.is-wide{aspect-ratio:720/260} /* 横長バナー（生徒作品）は余白なしで表示 */
  .atam-svcLinks .atam-svcLinks_title{font-size:20px}
  .atam-svcLinks_body{padding:12px 34px 14px 12px}
  .atam-svcLinks_body img{right:10px;width:16px}
}