@charset "UTF-8";
/* =========================================================
   合格実績ページ 共通スタイル (2026 renewal)
   使用ページ: /achievement/index.html
             /achievement/domestic.html
             /achievement/overseas.html
             /achievement/experience.html
   ブランドカラー: #00a5e3 (blue) / #E60012 (合格 red)
   ========================================================= */

.ach-wrap{font-family:"dnp-shuei-mgothic-std","Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif;}
.ach-wrap *{box-sizing:border-box;}

/* ページ内アンカー遷移時、固定ヘッダー(約56px)に隠れないようオフセット */
html{scroll-padding-top:70px;}

/* ---- セクション見出し ---- */
.ach-sec{padding:46px 0;}
.ach-sec.is-alt{background:#f4f8fb;}
.ach-sec-head{text-align:center;margin-bottom:8px;}
.ach-sec-head h2{font-size:30px;font-weight:700;color:#12314f;margin:0 0 6px;line-height:1.35;}
.ach-sec-head h2 .en{display:block;font-family:'Poppins',sans-serif;font-size:15px;letter-spacing:.14em;color:#00a5e3;font-weight:600;margin-bottom:4px;}
.ach-sec-lead{text-align:center;color:#555;font-size:14px;margin:0 auto 30px;max-width:720px;line-height:1.7;}

/* ---- ページ内ナビ 4ボタン ---- */
.ach-nav{padding:34px 0 8px;}
.ach-nav .container{max-width:960px;}
.ach-nav-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.ach-nav-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background:#fff;border:2px solid #00a5e3;border-radius:12px;padding:16px 10px;text-decoration:none;
  color:#12314f;font-weight:700;font-size:16px;line-height:1.4;transition:.2s;min-height:88px;position:relative;}
.ach-nav-btn .lbl-en{font-family:'Poppins',sans-serif;font-size:11px;letter-spacing:.1em;color:#00a5e3;font-weight:600;margin-bottom:4px;}
.ach-nav-btn::after{content:"";width:9px;height:9px;border-right:2px solid #00a5e3;border-bottom:2px solid #00a5e3;transform:rotate(45deg);margin-top:9px;transition:.2s;}
.ach-nav-btn:hover{background:#00a5e3;color:#fff;}
.ach-nav-btn:hover .lbl-en{color:#fff;}
.ach-nav-btn:hover::after{border-color:#fff;}

/* ---- カテゴリーバナー (国内大学 / 海外大学) ---- */
.ach-cat-banner{display:flex;align-items:center;margin:8px 0 24px;}
.ach-cat-banner .ttl{position:relative;background:rgba(0, 165, 227,0.6);color:#fff;font-weight:700;font-size:20px;
  padding:9px 42px 9px 22px;line-height:1;flex:0 0 auto;}
.ach-cat-banner .ttl::after{content:"";position:absolute;top:0;right:-18px;width:0;height:0;
  border-style:solid;border-width:0 0 40px 18px;border-color:transparent transparent transparent rgba(0, 165, 227,0.6);}
.ach-cat-banner .bar{flex:1 1 auto;height:3px;background:rgba(0, 165, 227,0.6);margin-left:22px;}

/* ---- カテゴリー列 (難関国公立大学 等) ---- */
.ach-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:20px 26px;}
.ach-cols.cols-3{grid-template-columns:repeat(3,1fr);}
.ach-col h4{font-size:20px;font-weight:700;color:#12314f;margin:0 0 10px;padding-bottom:7px;border-bottom:1px solid #cdd7e0;}
.ach-col ul{list-style:none;margin:0;padding:0;}
.ach-col li{position:relative;padding:3px 0 3px 15px;font-size:14px;color:#333;line-height:1.5;}
.ach-col li::before{content:"";position:absolute;left:0;top:11px;width:5px;height:5px;border-radius:50%;background:#00a5e3;}

/* ---- 一覧を見るボタン ---- */
.ach-morebtn{text-align:right;margin-top:22px;}
.ach-morebtn a{display:inline-flex;align-items:center;gap:12px;background:#00a5e3;color:#fff;font-weight:700;
  font-size:16px;text-decoration:none;border-radius:8px;padding:13px 30px;transition:.2s;border:2px solid #00a5e3;}
.ach-morebtn a::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg);}
.ach-morebtn a:hover{background:#fff;color:#00a5e3;}

/* ---- 注記 ---- */
.ach-note{font-size:13px;color:#888;line-height:1.7;margin:0 0 18px;}
.ach-note.center{text-align:center;}

/* ---- 体験記カード (プレビュー) ---- */
.ach-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.ach-card{display:flex;gap:16px;background:#fff;border:1px solid #e2e8ee;border-radius:12px;padding:18px;align-items:flex-start;}
.ach-card-thumb{flex:0 0 96px;}
.ach-card-thumb img{width:96px;height:96px;object-fit:cover;border-radius:8px;}
.ach-card-body{flex:1 1 auto;min-width:0;}
.ach-card-body h4{display:flex;align-items:flex-start;gap:8px;color:#E60012;font-weight:700;font-size:17px;line-height:1.4;margin:0 0 8px;}
.ach-card-body h4 .badge{flex:0 0 auto;width:44px;height:auto;margin-top:2px;}
.ach-card-body p{margin:0 0 6px;font-size:14px;line-height:1.6;}
.ach-card-body p a{color:#222;border-bottom:1px solid #999;text-decoration:none;}
.ach-card-body p a:hover{color:#00a5e3;border-color:#00a5e3;}
.ach-card-name{text-align:right;font-size:13px;color:#666;}

/* ---- タブ (合格体験記一覧ページ) ---- */
.ach-tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:34px;}
.ach-tab{appearance:none;border:2px solid #00a5e3;background:#fff;color:#00a5e3;font-weight:700;font-size:16px;
  padding:13px 26px;border-radius:999px;cursor:pointer;transition:.2s;line-height:1.3;}
.ach-tab:hover{background:#e8f6fd;}
.ach-tab.is-active{background:#00a5e3;color:#fff;}
.ach-panel{display:none;}
.ach-panel.is-active{display:block;animation:achFade .3s ease;}
@keyframes achFade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* ---- ストーリーカード (体験記本文) ---- */
.ach-stories{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.ach-story{background:#fff;border:1px solid #e2e8ee;border-left:5px solid #00a5e3;border-radius:10px;padding:22px 24px;}
.ach-story .tag{display:inline-block;background:#eaf6fc;color:#0982b3;font-size:12px;font-weight:700;border-radius:4px;padding:3px 10px;margin-bottom:10px;}
.ach-story h3{font-size:18px;font-weight:700;color:#12314f;line-height:1.45;margin:0 0 4px;}
.ach-story .who{font-size:13px;color:#777;margin:0 0 12px;}
.ach-story p.body{font-size:14px;line-height:1.85;color:#333;margin:0 0 16px;}
.ach-story .readmore{display:inline-flex;align-items:center;gap:10px;background:#00a5e3;color:#fff;font-weight:700;
  font-size:14px;text-decoration:none;border-radius:6px;padding:9px 20px;transition:.2s;}
.ach-story .readmore::after{content:"";width:7px;height:7px;border-right:2px solid #fff;border-top:2px solid #fff;transform:rotate(45deg);}
.ach-story .readmore:hover{background:#0982b3;}

/* ---- 奥ページ: 全リスト ---- */
.ach-listgroup{margin-bottom:40px;}
.ach-listgroup > .head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;border-left:6px solid #12314f;
  padding:2px 0 2px 14px;margin-bottom:16px;}
.ach-listgroup > .head h3{font-size:22px;font-weight:700;color:#12314f;margin:0;}
.ach-listgroup > .head .sub{font-size:13px;color:#888;}
.ach-namelist{columns:4;column-gap:26px;list-style:none;margin:0;padding:0;}
.ach-namelist.cols-2{columns:2;}
.ach-namelist.cols-3{columns:3;}
.ach-namelist li{break-inside:avoid;position:relative;padding:5px 0 5px 15px;font-size:14.5px;color:#333;line-height:1.55;}
.ach-namelist li::before{content:"";position:absolute;left:0;top:12px;width:5px;height:5px;border-radius:50%;background:#00a5e3;}
.ach-subhead{font-size:20px;font-weight:700;color:#12314f;margin:24px 0 20px;padding-left:12px;border-left:4px solid #00a5e3;}

/* 国別ボーディングスクール */
.ach-country-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.ach-country h4{font-size:16px;font-weight:700;color:#12314f;margin:0 0 10px;padding-bottom:6px;border-bottom:2px solid #12314f;}
.ach-country ul{list-style:none;margin:0;padding:0;}
.ach-country li{position:relative;padding:4px 0 4px 14px;font-size:14px;line-height:1.5;color:#333;}
.ach-country li::before{content:"";position:absolute;left:0;top:11px;width:5px;height:5px;border-radius:50%;background:#00a5e3;}

/* 戻るリンク */
.ach-back{display:inline-flex;align-items:center;gap:10px;color:#00a5e3;font-weight:700;text-decoration:none;font-size:15px;}
.ach-back::before{content:"";width:8px;height:8px;border-left:2px solid #00a5e3;border-bottom:2px solid #00a5e3;transform:rotate(45deg);}
.ach-back:hover{text-decoration:underline;}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media only screen and (max-width:991px){
  .ach-cols{grid-template-columns:repeat(2,1fr);}
  .ach-namelist{columns:3;}
  .ach-country-grid{grid-template-columns:repeat(2,1fr);}
}
@media only screen and (max-width:767px){
  .ach-sec{padding:34px 0;}
  .ach-sec-head h2{font-size:22px;}
  .ach-nav-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .ach-nav-btn{font-size:14px;min-height:74px;padding:12px 8px;}
  .ach-cat-banner .ttl{font-size:17px;padding:8px 34px 8px 16px;}
  .ach-cat-banner .ttl::after{border-width:0 0 34px 15px;right:-15px;}
  .ach-cols,.ach-cols.cols-3{grid-template-columns:1fr 1fr;gap:16px;}
  .ach-morebtn{text-align:center;}
  .ach-morebtn a{width:100%;justify-content:center;font-size:15px;}
  .ach-cards{grid-template-columns:1fr;gap:16px;}
  .ach-card-thumb{flex:0 0 76px;}
  .ach-card-thumb img{width:76px;height:76px;}
  .ach-card-body h4{font-size:15px;}
  .ach-stories{grid-template-columns:1fr;}
  .ach-tab{font-size:14px;padding:11px 18px;}
  .ach-namelist,.ach-namelist.cols-2,.ach-namelist.cols-3{columns:2;column-gap:16px;}
  .ach-namelist li{font-size:13.5px;}
  .ach-listgroup > .head h3{font-size:19px;}
  .ach-country-grid{grid-template-columns:1fr;gap:18px;}
}
@media only screen and (max-width:400px){
  .ach-nav-grid{grid-template-columns:1fr;}
  .ach-cols,.ach-cols.cols-3{grid-template-columns:1fr;}
  .ach-namelist,.ach-namelist.cols-2,.ach-namelist.cols-3{columns:1;}
}