@charset "UTF-8";

:root{
  --blue:#0876c9;
  --sky:#50a9ca;
  --deep:#111;
  --cream:#f8f8f1;
  --line:#d9d9d9;
  --red:#e64b43;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:#222;
  background:var(--cream);
  font-family:"Noto Sans JP","Yu Gothic",YuGothic,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  line-height:1.65;
}
img{max-width:100%;height:auto;display:block}
a{color:#006fc9}
.hero{position:relative;overflow:hidden}
.hero>img{width:100%;height:min(52vw,680px);min-height:360px;object-fit:cover}
.hero-copy{
  position:absolute;
  left:2%;
  right:2%;
  top:37%;
  text-align:center;
  background:rgba(255,255,255,.95);
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.hero-label{
  background:var(--sky);
  color:#fff;
  padding:7px 12px;
  font-weight:700;
  font-size:clamp(14px,2vw,27px);
}
.hero h1{
  margin:9px 10px 0;
  font-size:clamp(18px,2.5vw,32px);
  line-height:1.35;
}
.hero p{
  margin:3px 10px 9px;
  font-size:clamp(12px,1.6vw,21px);
  font-weight:700;
}
.section{width:min(1180px,94%);margin:0 auto;padding:30px 0}
.intro-buttons{
  display:flex;gap:18%;justify-content:center;
  margin:8px 0 25px;
}

/* ========================================
   CTAボタン
======================================== */
.pill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32%;
  min-height: 68px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 700;
  font-size: 20px;
  border: 2px solid #222;

  /* アニメーション */
  position: relative;
  overflow: hidden;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background-color 0.3s ease;
}

/* マウスオン */
.pill:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
}

/* クリック時 */
.pill:active {
  transform: translateY(-1px) scale(0.99);
}


/* ========================================
   料金・コースを見る
======================================== */
.pill-blue {
  background: #506ff0;
  color: #fff;
  border-color: #222;
}

.pill-blue:hover {
  background: #4162e8;
}


/* ========================================
   ご予約はこちら
======================================== */
.pill-white {
  background: #fff;
  color: #222;
}

.pill-white:hover {
  background: #f5f8ff;
}


.two-column{
  display:grid;grid-template-columns:1fr 360px;gap:35px;align-items:start;
}
h2{font-size:clamp(22px,2.5vw,32px);line-height:1.35;margin:20px 0 7px}
.check-list{padding-left:1.4em;margin-top:0;font-size:clamp(15px,1.45vw,20px)}
.side-photo{width:100%;margin-top:12px}
.text-block{margin-top:30px}
.text-block p{font-size:clamp(15px,1.45vw,20px);margin:5px 0}
.target-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:25px;
  margin-top:10px;
}
.target-card h3{font-size:20px;margin:0 0 7px}
.target-card p{font-size:16px;margin:0 0 12px;line-height:1.55}
.target-card img{width:100%;aspect-ratio:1.45;object-fit:cover}
.table-wrap{overflow-x:auto}
.course-table,.hours-table{width:100%;border-collapse:collapse;background:#fff;font-size:15px}
.course-table th{
  background:#0876c9;color:#fff;text-align:left;padding:8px;border:1px solid #ddd
}
.course-table td{padding:9px;border:1px solid #ddd}
.course-table .price{color:#ed4b43;font-weight:700;text-align:center}
.reservation{padding-top:8px}
.notice{
  background:#fff;border-left:4px solid #0876c9;
  padding:18px 20px;margin-top:10px;
}
.notice h3{font-size:16px;margin:7px 0}
.notice ul{margin:4px 0 10px;padding-left:1.3em}
.notice p{margin:5px 0}
.red{color:var(--red);font-weight:700}
.subheading{font-size:18px;color:#0876c9;margin-top:25px}
.hours-table th{
  width:30%;background:#eee;text-align:left;padding:10px;border-bottom:1px solid #ddd
}
.hours-table td{padding:10px;border-bottom:1px solid #ddd}
.access{padding:65px 0 80px}
.access p{font-size:18px;margin:20px 0}
footer{background:#0876c9;color:#fff;text-align:center;padding:22px}

@media(max-width:800px){
  .hero>img{height:62vw;min-height:300px}
  .hero-copy{top:auto;bottom:8%;left:2%;right:2%}
  .hero-label{font-size:12px}
  .hero h1{font-size:17px}
  .hero p{font-size:11px}
  .section{padding:22px 0}
  .intro-buttons{gap:10px}
  .pill{width:50%;min-height:54px;font-size:14px}
  .two-column{grid-template-columns:1fr;gap:15px}
  .side-photo{max-width:100%}
  .target-grid{grid-template-columns:1fr;gap:30px}
  .target-card p{font-size:15px}
  .course-table{min-width:720px}
  .hours-table{font-size:13px}
  .hours-table th{width:34%}
  .access p{font-size:15px}
}