.tactics {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 50px;
}
.tactics .subject table{
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  font-size: 0.95rem;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.subject {
  background: #e3f4fb;
  border-left: 2px dashed #888;
  padding: 0.5rem;
  flex: 1;
  max-width: 360px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.subject:first-child {
  border-left: none;
}

.subject h2 {
  position: relative;
  background: #ffe66d;
  padding: 0.8rem 1rem;
  margin: 0 0 2.5rem 0;
  font-size: 1.2rem;
  color: #d14;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.subject h2::before {
    position: absolute;
    inset: 4px -4px -4px 4px;
    border-radius: 5px;
    border: 2px solid #333;
    content: "";
}

/* 吹き出しのしっぽ（左下） */
.subject h2::after {
    position: absolute;
    bottom: -11px;
    left: 50px;
    transform: skew(-25deg);
    height: 15px;
    width: 10px;
    border-right: 3px solid #333;
    background-color: #ffffff00;
    content: "";
}

.highlight {
  color: red;
  font-weight: bold;
}

.graph {
  margin-top: 1rem;
  text-align: center;
}

.graph img {
  max-width: 90%;
  border-radius: 12px;
  border: 3px solid rgba(255,255,255,0.6);
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

/* ヘッダー行 */
.tactics .subject table th {
  background-color: #f5f5f5;
  color: #333;
  font-weight: bold;
  text-align: center;
  padding: 0.4rem;
  border-bottom: 1px solid #ccc;
}

/* 通常セル */
.tactics .subject table td {
  text-align: center;
  padding: 0.4rem;
  border-bottom: 1px solid #eee;
}

/* ストライプ（偶数行） */
.tactics .subject table tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* ホバー効果 */
.tactics .subject table tr:hover {
  background-color: #e8f4ff;
}

/*-----------------------レスポンシブ対応（スマホ---------------------- */
@media (max-width: 768px) {
  .tactics {
  display: flex;
  flex-direction: column;
  align-items: center;
  }

.tactics {
  gap: 1rem;
  margin: 0 20px;
}
.tactics .subject table{
  font-size: 0.9rem;
}
.subject {
  border-left: none;
  padding: 0.5rem;
}

.subject h2 {
  margin: 0 0 1.5rem 0;
  padding: 1rem 1.2rem 0.5rem;
  font-size: 1rem;
}

/* 吹き出しのしっぽ（左下） */
.subject h2::after {
    height: 12px;
    border-right: 2px solid #333;
}

.skills {
  gap: 0.4rem;
  font-size: 0.8rem;
}

.graph img {
  width: 95%;
}

/* ヘッダー行 */
.tactics .subject table th {
  padding: 0.3rem;
}

/* 通常セル */
.tactics .subject table td {
  padding: 0.2rem;
}

}

/*------------------------------------LevelBox--------------------------------------*/
:root{
  --text:#1f2937;
  --muted:#6b7280;
  --bg:#ffffff;
  --bg-alt:#f9fafb;
  --primary:#2563eb;
  --ring: 0 0 0 4px rgba(37,99,235,0.25);
  --radius: 16px;
  --shadow: 0 10px 25px rgba(0,0,0,.08);
}
/* grade colors */
.grad-pink{ background: linear-gradient(135deg,#fb77b7,#e8328b); }
.grad-red{ background: linear-gradient(135deg,#ff6b6b,#e11d48); }
.grad-orange{ background: linear-gradient(135deg,#ffb86c,#f97316); }
.grad-sky{ background: linear-gradient(135deg,#7dd3fc,#38bdf8); }
.grad-purple{ background: linear-gradient(135deg,#c084fc,#9333ea); }
.grad-blue{ background: linear-gradient(135deg,#60a5fa,#2563eb); }
.grad-green{ background: linear-gradient(135deg,#86efac,#22c55e); }

.border-pink{ border-color:#ec4899; } .ring-pink{ box-shadow: var(--ring) }
.border-red{ border-color:#ef4444; } .ring-red{ box-shadow: var(--ring) }
.border-orange{ border-color:#f59e0b; } .ring-orange{ box-shadow: var(--ring) }
.border-sky{ border-color:#38bdf8; } .ring-sky{ box-shadow: var(--ring) }
.border-purple{ border-color:#a855f7; } .ring-purple{ box-shadow: var(--ring) }
.border-blue{ border-color:#2563eb; } .ring-blue{ box-shadow: var(--ring) }
.border-green{ border-color:#22c55e; } .ring-green{ box-shadow: var(--ring) }

/* hero */
.hero{
  min-height: 40vh;
  color:#fff;
  background: linear-gradient(135deg,#2563eb,#06b6d4,#10b981);
  display: block;
  align-items:center;
  text-align:center;
  padding: 20px;
}
.hero h1{
 font-size: clamp(28px, 4.5vw, 54px);
 margin:0 auto 12px;
 font-weight: 900;
 text-shadow: 0 2px 10px rgba(0,0,0,.25);
 }
.hero p{
 max-width: 820px;
 margin: 0 auto 20px;
 font-size: 18px;
 opacity: .95;
 }


/* roadmap */
.roadmap{
 margin: 0 auto 24px;
 max-width: 900px;
 }

.yujititle {
  font-family: "Yuji Syuku", serif;
  font-weight: 500;
  font-style: normal;
  font-size: 2.4rem;
  line-height: 3rem;
  margin: 1.2rem;
 }

.card2 {
 background:#fff;
 border: 1px solid #e5e7eb;
 border-radius: var(--radius);
 box-shadow: var(--shadow);
 text-align:center;
 padding: 11px;
 margin: 10px auto;
 }
.card2 h3{
 font-size: 16px;
}
.pace-list{
 display:grid;
 gap:8px;
 grid-template-columns: repeat(2,minmax(0,1fr));
 color:var(--muted);
 font-size:16px;
 }

.card-skill{
 border:2px solid #e5e7eb;
 border-radius: var(--radius);
 padding: 4px 6px;
 }
.card-skill h4{
 margin: 0 12px 4px;
 font-size: 14px;
 font-weight: 800;
 }
.card-skill ul{
 margin: 0;
 padding-left: 16px;
 }
.card-skill li{
 font-size: 12px;
 color:#334155;
 }

.level-tabs{
 display:flex;
 flex-wrap: wrap;
 gap: 5px;
 justify-content: center;
 margin: 18px auto 8px;
 }
.level-tabs input{
 position: absolute;
 opacity: 0;
 pointer-events: none;
 }

.level-label{
 position: relative;
 display:flex;
 width: 98px;
 height: 60px;
 border-radius: 14px;
 color:#fff;
 font-size: 16px;
 font-weight: 900;
 align-items:center;
 justify-content:center;
 letter-spacing:.08em;
 box-shadow: var(--shadow);
 user-select:none;
 cursor:pointer;
}
.level-label .arrow2{
 display:none;
 position:absolute;
 bottom:-8px;
 left:50%;
 transform:translateX(-50%) rotate(45deg);
 width: 14px;
 height: 14px;
 background:#fff;
 border: 1px solid #99F;
 box-shadow: 0 3px 6px rgba(0,0,0,.12);
 }

/* selected state per radio */
#lv-5:checked + .lbl-5{
 outline: 4px solid rgba(236,72,153,.25);
 }
#lv-4:checked + .lbl-4{
 outline: 4px solid rgba(239,68,68,.25);
 }
#lv-3:checked + .lbl-3{
 outline: 4px solid rgba(245,158,11,.25);
 }
#lv-p2:checked + .lbl-p2{
 outline: 4px solid rgba(56,189,248,.25);
 }
#lv-p2p:checked + .lbl-p2p{
 outline: 4px solid rgba(168,85,247,.25);
 }
#lv-2:checked + .lbl-2{
 outline: 4px solid rgba(37,99,235,.25);
 }
#lv-p1:checked + .lbl-p1{
 outline: 4px solid rgba(34,197,94,.25);
 }

#lv-5:checked + .lbl-5 .arrow2,
#lv-4:checked + .lbl-4 .arrow2,
#lv-3:checked + .lbl-3 .arrow2,
#lv-p2:checked + .lbl-p2 .arrow2,
#lv-p2p:checked + .lbl-p2p .arrow2,
#lv-2:checked + .lbl-2 .arrow2,
#lv-p1:checked + .lbl-p1 .arrow2{ display:block;
 }

.panels{
 width: 800px;
 margin: 18px auto 0;
 max-width: 95%px;
 }
.panel{
 display:none;
 border:2px solid #e5e7eb;
 border-radius: var(--radius);
 padding: 20px;
 }
.panel h3{
 margin: 4px 0 8px;
 font-size: 24px;
 font-weight: 800;
 }
.panel.lv-5 h3{ color:#ec4899;
 }
.panel.lv-4 h3{ color:#ef4444;
 }
.panel.lv-3 h3{ color:#f59e0b;
 }
.panel.lv-p2 h3{ color:#38bdf8;
 }
.panel.lv-p2p h3{ color:#a855f7;
 }
.panel.lv-2 h3{ color:#2563eb;
 }
.panel.lv-p1 h3{ color:#22c55e;
 }

.panel .chips{
 display:flex;
 flex-wrap: wrap;
 gap:8px;
 margin: 10px 0 14px;
 }
.chip{
 background:#f3f4f6;
 border:1px solid #e5e7eb;
 color:#374151;
 padding: 6px 10px;
 border-radius: 999px;
 font-size: 14px;
 }
.panel .grid{
 display:grid;
 grid-template-columns: repeat(3,minmax(0,1fr));
 gap: 14px;
 }


/* University preference */
.preference {
}

.preference .lead{
 color: var(--muted); 
 max-width: 880px; 
 margin: 10px auto 26px; 
 text-align:center;
 }
.tags{
 display:flex;
 flex-wrap: wrap;
 gap:8px;
 margin: 10px 0 12px;
 justify-content: center;
 }
.tag{
 background:#eff6ff;
 color:#2563eb;
 border:1px solid #bfdbfe;
 border-radius:999px;
 font-size:10px;
 padding:4px 10px;
 }
details.pref{
 background:#fff;
 border:1px solid #e5e7eb;
 border-radius: var(--radius);
 padding: 12px 16px;
 }
details.pref summary{
 list-style:none;
 cursor:pointer;
 }
details.pref summary::-webkit-details-marker{
 display:none;
 }
.summary-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  color: #fff;
  border-radius: 9999px; /* pill型に */
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 5px rgba(37, 99, 235, 0.4);
  transition: all 0.2s ease;
  cursor: pointer;
  margin-left: 2rem;
}

.summary-btn:hover {
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 4px 8px rgba(37, 99, 235, 0.6);
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
}
.pref-table{
 width:100%;
 border-collapse: collapse;
 margin-top: 14px;
 }
.pref-table thead th{
 text-align:left;
 background:#f9fafb;
 color:#4b5563;
 font-weight:700;
 font-size:14px;
 padding:10px 12px;
 border-bottom:1px solid #e5e7eb;
 }
.pref-table td{
 font-family: "shippori", serif;
 padding:5px 6px;
 border-top:1px solid #eef2f7;
 vertical-align: top;
 font-size:11px;
 }
.pref-table tbody tr:hover{
 background: rgba(37,99,235,.07);
 }



/*------------------------------------smaph---------------------------------------*/
@media (max-width: 768px){
.roadmap{
 width: 90%;
 margin: 0 auto 24px;
 }

.card2 {
 padding: 6px;
 margin: 20px auto;
 }
.card2 h3{
 font-size: 16px;
}
.pace-list{
 gap:4px;
 font-size:13px;
 }
.card-skill{
 border:2px solid #e5e7eb;
 border-radius: var(--radius);
 padding: 4px 6px;
 }
.card-skill h4{
 margin: 0 12px 4px;
 font-size: 14px;
 }
.card-skill ul{
 margin:0;
 padding-left: 8px;
 }
.card-skill li{
 font-size: 12px;
 color:#334155;
 }

.level-tabs{
 gap: 3px;
 margin: 12px auto 4px;
 }

.level-label{
 width: 84px;
 height: 42px;
 border-radius: 12px;
 font-size: 14px;
 margin: 8px 4px 0px;
}

.level-label .arrow2{
 bottom:-6px;
 width: 12px;
 height: 12px;
 }

.panels{
 margin: 10px;
 }
.panel h3{
 margin: 4px 0 8px;
 font-size: 18px;
 }

.panel .chips{
 gap:8px;
 margin: 10px 0 14px;
 }

.chip{
 color:#374151;
 padding: 3px 12px;
 border-radius: 999px;
 font-size: 12px;
 }
.panel .grid{
 grid-template-columns: repeat(2,minmax(0,1fr));
 gap: 4px;
 }

.pref-table thead th{
 font-size:12px;
 }
.pref-table td{
 font-size:10px;
 }
.summary-btn {
  padding: 6px 16px;
  font-size: 12px;
  letter-spacing: 0.3px;
  margin-left: 2rem;
}

.summary-btn:hover {
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 4px 8px rgba(37, 99, 235, 0.6);
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
}
}

/*---------------------------- per level show ------------------------------------*/
#lv-5:checked ~ .panels .lv-5{ display:block;
 border-color:#ec4899;
 }
#lv-4:checked ~ .panels .lv-4{ display:block;
 border-color:#ef4444;
 }
#lv-3:checked ~ .panels .lv-3{ display:block;
 border-color:#f59e0b;
 }
#lv-p2:checked ~ .panels .lv-p2{ display:block;
 border-color:#38bdf8;
 }
#lv-p2p:checked ~ .panels .lv-p2p{
 display:block;
 border-color:#a855f7;
 }
#lv-2:checked ~ .panels .lv-2{
 display:block;
 border-color:#2563eb;
 }
#lv-p1:checked ~ .panels .lv-p1{
 display:block;
 border-color:#22c55e;
 }

/*---------------------------- per level show ------------------------------------*/

.tool-points {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tool-points li {
  margin: 5px 0;
  padding-left: 1.8em;
  position: relative;
  font-weight: 500;
}

.tool-points li::before {
  content: "★";
  color: #44aadd;
  font-weight: bold;
  position: absolute;
  left: 0.5rem;
}