:root{
  --bg:#0b0c10;
  --bg2:#11131a;
  --card:#141828;
  --text:#000;
  --muted:rgba(238,240,255,.72);
  --line:rgba(238,240,255,.12);
  --accent:#ff766a;
  --accent2:#27e0b3;
  --linebtncolor:#22c55e;
  --shadow: 0 24px 60px rgba(0,0,0,0);
  --radius: 20px;
  --radius2: 28px;
  --container: 1120px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Zen Maru Gothic", system-ui, -apple-system, "Segoe UI", sans-serif;
  color:var(--text);
  line-height:1.75;
}

img{max-width:100%; height:auto; display:block}
a{color:inherit;
  text-decoration: none;
}
p{
  text-align: center;
}
@media (min-width: 940px){
  p {
    font-size: 1.2rem;
  }
}
hr{
  border: 1px solid;
  width: 71px;
  height: fit-content;
  object-fit: cover;
  background-repeat: no-repeat;
  border-color: var(--accent);
  margin: 4rem auto;
}
@media (min-width: 768px){
  .sp-elements {
  display: none;
  }
}
.c--accent1 {
  color: var(--accent)!important;
}
.c--accent2 {
  color: var(--accent2)!important;
}
.fw-b {
  font-weight: bold!important;
}
.w-b {
      background: #fff!important;
}
.fs-l {
  font-size: 1.1em;
}
.td-u {
  text-decoration: underline;
}
.td-u-y {
  box-decoration-break: clone;
  background:linear-gradient(transparent 50%, #ff6 67%);
  border-left: 1px solid rgba(238,240,255,.08);

}
.text-date {
  font-size: 1.35em;
  font-family: "Oswald","Zen Maru Gothic", sans-serif;
}
.skip{
  position:absolute; left:-9999px; top:auto;
}
.skip:focus{
  left:16px; top:16px; background:#fff; color:#000; padding:8px 10px; border-radius:10px; z-index:9999;
}
.section {
    background-image: url(../img/fv-background.jpg);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
}
@media (min-width: 768px){
 .section {
    background-image: url(../img/fv-background-pc.jpg);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
  } 
}
.container{
  width:min(var(--container), 92vw);
  margin-inline:auto;
}
.narrow{width:min(820px, 92vw)}
.mt-32{margin-top:32px}
.mt-28{margin-top:28px}
.center{text-align:center}
.w-100{width:100%}

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(10,11,16,.55);
  border-bottom:1px solid var(--line);
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  letter-spacing:.02em;
}
.brand-mark{
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:10px;
  background: linear-gradient(135deg, rgba(124,92,255,.9), rgba(39,224,179,.7));
  box-shadow: 0 10px 30px rgba(124,92,255,.18);
}
.brand-name{font-size:14px; color:rgba(238,240,255,.9)}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:18px 16px;
  width: 100%;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  text-decoration:none;
  font-weight:700;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
@media (min-width: 768px){
  .btn{
  width: 75%;
}
}
.btn:hover{transform: translateY(-1px); border-color: rgba(238,240,255,.22); background: rgba(255,255,255,.06)}
.btn:active{transform: translateY(0)}
.btn-primary{
  border-color: rgba(92, 255, 146, 0.55);
  background: linear-gradient(-45deg, rgba(2, 189, 18, 0.95), rgba(46, 231, 133, 0.75));
  color:#fff;
}
.btn-primary:hover{filter: brightness(1.05)}
.btn-lg{padding:14px 18px; border-radius:16px}
.attention {
    font-size: .75em;
}
.hero{
  padding: 44px 0 36px;
  border-bottom: 1px solid var(--line);
  position:relative;
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:-2px;
  background:
    radial-gradient(900px 500px at 20% 30%, rgba(124,92,255,.22), transparent 60%),
    radial-gradient(700px 500px at 85% 40%, rgba(39,224,179,.12), transparent 60%);
  pointer-events:none;
}
.hero-grid{
  position:relative;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 28px;
  align-items:center;
}
.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color: rgba(238,240,255,.82);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  padding: 8px 10px;
  border-radius: 999px;
}
.hero-title{
  margin:14px 0 8px;
  font-size: clamp(28px, 4vw, 44px);
  line-height:1.15;
  letter-spacing:.01em;
}
.hero-sub{
  margin:0 0 14px;
  font-size:16px;
  color: var(--muted);
}

.badge-row{
  list-style:none;
  padding:0;
  margin:0 0 18px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.badge{
  padding:6px 10px;
  border-radius:999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  font-size:12px;
  color: rgba(238,240,255,.86);
}

.note{
  margin:10px 0 0;
  font-size:13px;
  color: rgba(238,240,255,.7);
}
.hero-actions{margin-top:18px}

.hero-media{
  border-radius: var(--radius2);
  overflow:hidden;
  border: 1px solid rgba(238,240,255,.14);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
}
.hero-media img{aspect-ratio: 4/3; object-fit: cover}

.info-wrapper.balloon-wrapper {
    width: 80%;
    margin: auto;
    margin-top: 2rem;
}
.info-wrapper.balloon-wrapper img {
    padding: 1rem 0rem 0rem;
}
@media (min-width: 768px){
  .info-wrapper.balloon-wrapper {
      width: 50%;
  }
  .info-wrapper.balloon-wrapper img {
    padding: 1rem 2rem 0rem;
  }
}
/* =========================
   LINEボタン
========================= */
/* ===== 全体ラッパー ===== */
.line-area{
  position:relative;
  width:420px;
  text-align:center;
      margin: auto;
  margin-top: 3rem;

}
@media (max-width: 768px){
 .line-area{
    width:100%;
  } 
}
/* ===== 上のラベル ===== */
.line-label{
  position:absolute;
  top:-20px;
  left:50%;
  transform:translateX(-50%);
  background:#fff;
  border:3px solid #22c55e;
  color:#22c55e;
  width: 70%;
  padding: 0px 11px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 3.5vw;
  box-shadow:0 3px 0 rgba(0,0,0,0.05);
  z-index:2;
}

/* ===== メインボタン ===== */
.line-btn{
  display:flex;
  align-items:center;
  justify-content: center;
  background:#22c55e;
  color:white;
  padding:20px 16px;
  border-radius:16px;
  border:4px solid white;
  text-decoration:none;
  font-size: 4.8vw;
  font-weight:700;
  box-shadow:0 8px 0 rgba(0,0,0,0.08);
  transition:all .2s ease;
}
@media (min-width: 768px){
  .line-label{
    padding:0px 16px;
    font-size: 1.8vw;
  }
  .line-btn {
    font-size: 2.2vw;
    padding: 20px 48px;
  }
}
@media (min-width: 940px){
  .line-label{
    padding:0px 16px;
    font-size: 1.1vw;
  }
  .line-btn {
    font-size: 1.45vw;
    padding: 20px 48px;
  }
}
@media (min-width: 940px) and (max-width: 1300px){
  .line-label{
      top: -12px;
  }
    .line-btn {
    font-size: 20px;

  }
}
@media (min-width: 1300px){
  .line-label{
    font-size: 18px;
  }
    .line-btn {
    font-size: 20px;
    
  }
  .line-btn span{
  transform: translate(2px,2px);
}
}
.line-btn span{
  font-size: .75em;
}
/* 押した感 */
.line-btn:hover{
  transform:translateY(3px);
  box-shadow:0 5px 0 rgba(0,0,0,0.08);
}

/* 左のLINEアイコン */
.line-icon{
  width:30px;
  height:30px;

  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-right:1px;
  font-size:16px;
  color:#22c55e;
  font-weight:900;
}
@media (min-width: 940px) {
    .section-contrast .line-icon img {
        width: 100%;
        margin: auto;
    }
}
/* 中央テキスト */
.line-text{
  text-align:left;
      display: flex;
    align-items: center;
    justify-content: center;
}

/* 右矢印 */
.line-arrow{
  font-size:22px;
  margin-left:12px;
}
.image-title {
  width: 80%;
  margin: auto;
}
@media (min-width: 940px){
  .image-title {
  width: 40%;
}
}
  .line-btn {
position: relative;
overflow: hidden;
}

.line-btn::before {
position: absolute;
content: '';
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 45%, rgba(255, 255, 255, 0) 100%);
transform: skewX(-45deg);
animation: shinny-btn 2.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite;
}

@keyframes shinny-btn {
0% {
left: -100%;
}
25% {
left: 100%;
}
100% {
left: 100%;
}
}
/* =========================
   FV
========================= */
.fv{
  position: relative;
  padding: 28px 0 42px;
  overflow: hidden;
  background-image: url(../img/fv-background.jpg);
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: cover;
}
@media (min-width: 768px){
  body {
    background-image: url(../img/fv-background-pc.jpg);
    background-size: 100%;
  }
  .fv{
    padding-top: 56px;
    background-image: none;
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
  }
}
.fv-inner{
  width: min(1120px, 100vw);
  margin: 0 auto;
  position: relative;
}


.fv-visual{
  position: relative;
  display: grid;
  place-items: center;
  justify-content: center;
  padding: 30svh 0 22px;
}
.fv-deco1 {
    position: absolute;
    width: 2%;
    bottom: 0;
    right: 0;
    filter: saturate(1.5) opacity(.5);
}
@media (max-width: 768px){
.fv-deco1 {
    width: 7.8%;
    filter: saturate(1.5) opacity(.25);
}
}
/* --- 画像をSVGでトリミング（mask） --- */
.fv-image1-mask{
  width: min(560px, 110vw);
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;

  -webkit-mask-image: url("../img/fv-crop.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  mask-image: url("../img/fv-crop.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.fv-image1-mask img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(1.03);
}

/* --- タイトル画像 --- */
.fv-title{
  position: absolute;
  left: 6%;
  top: 6%;
  width: min(380px, 62vw);
  height: auto;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.12));
  pointer-events: none;
}
h1.fv-title div {
    font-size: 1.5rem;
    color: #8d340b;
    transform: translate(20px, -7px);
}
h1.fv-title div span {
    display: inline-block;
    color: #fff;
    background: #8d340b;
    border-radius: 20rem;
    font-size: .75em;
    padding: .0em .5em .1em;
    transform: translate(-.2em, -1.9em);
}
img.image-senntyaku {
    width: 92px;
    display: inline-block;
}
/* --- バッジ --- */
.fv-badges{
  position: absolute;
  right: 4%;
  top: 8%;
  display: flex;
  gap: 12px;
  align-items: center;
}

.fv-badges picture{
  width: 88px;
  height: auto;
}
img.badge2 {
    transform: translateY(18px);
}
@media (min-width: 940px){
  .fv-visual {
    padding: 6svh 0 22px;
}
  .fv-title {
    left: 7%;
    top: -4%;
    width: min(460px, 62vw);
}
h1.fv-title div {
    font-size: 1.5rem;

}
.fv-image1-mask {
    transform: translate(36%, -6%);
}
.fv-badges {
    right: auto;
    left: 5%;
    top: 68%;
}
.fv-badges picture {
    width: 13%;
}
}
/* --- FV CTA --- */
.fv-cta{
  margin-top: 12px;
  display: grid;
  justify-items: center;
  gap: 10px;
}

.fv-note{
  font-size: 14px;
  opacity: .75;
  text-align: center;
  margin: 0;
}

/* 既存btnが無い場合の保険（あっても上書きしない程度） */
.btn.btn-line{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  transform: translateZ(0);
}

/* --- SP調整 --- */
@media (max-width: 640px){
  .fv{
    padding: 0px 0 30px;
  }

  .fv-title{
    left: 38%;
    transform: translateX(-50%);
    top: -2%;
    width: 76vw;
  }

  .fv-badges{
      left: 50%;
      right: auto;
      transform: translateX(-50%);
      top: auto;
      bottom: -16px;
      gap: 0px;
  }

  .fv-badges picture{
    width: 28vw;
  }

  .fv-cta{
    margin-top: 22px;
  }
}
.section{
  padding: 46px 0;
}
.section.lead {
  background-image: url(../img/fv-background.jpg);
  background-repeat: repeat;
  background-position: top left;
  background-size: contain;
  padding-top: 1rem;
}
@media (min-width: 768px){
  .section.lead {
    background-image: none;
    background-repeat: repeat;
    background-position: top left;
    background-size: contain;
    padding-top: 1rem;
  }

}
.section.lead .container {

}
.section.lead p {
    text-align: center;
}
.section.lead p span {

    font-weight: bold;
    color: var(--accent);
    padding: .1em;
}
@media (min-width: 768px){
  .section.lead p span {
      font-size: 1.2rem;
      line-height: 2;
  }
}
.section.lead .empathy p {
    /* text-align: left; */
}
.section.lead .empathy p span {
    background: none;
    font-weight: 400;
    color: #000;
}
.section-contrast{
  background: #fffef7;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 940px){
.section-contrast img {
  width: 40%;
  margin: auto;
}
}
.section-title{
  text-align: center;
  margin:0 0 18px;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height:1.25;
}

.prose p:last-child{margin-bottom:0}

.two-col{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 24px;
  align-items:start;
}
.media{
  border-radius: var(--radius2);
  overflow:hidden;
  border: 1px solid rgba(238,240,255,.14);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
}
.media img{aspect-ratio: 4/3; object-fit: cover}
.caption{padding:10px 12px; font-size:12px; color: rgba(238,240,255,.65); border-top:1px solid var(--line)}

.info-card{
  border-radius: var(--radius2);
  background: #fff;
  color: #000;
  border: 1px solid rgba(238,240,255,.14);
  padding: 18px 18px 16px;
  box-shadow: var(--shadow);
  text-align: center;

}
.info-wrapper{
  position:relative;
  background:#fff;
  filter:drop-shadow(0 0 6px rgba(0,0,0,.1));
  padding:0 1rem 1rem;
  border:2px solid var(--accent);
  border-radius:1rem;
}

/* 外枠（三角の枠） */
.info-wrapper::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-22px; /* 少し下げる */
  margin:auto;
  width:0;
  height:0;
  border-style:solid;
  border-width:22px 22px 0 22px;
  border-color:var(--accent) transparent transparent transparent;
  z-index:0;
}

/* 中身（三角本体） */
.info-wrapper::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-20px;
  margin:auto;
  width:0;
  height:0;
  border-style:solid;
  border-width:20px 20px 0 20px;
  border-color:#fff transparent transparent transparent;
  z-index:1;
}
.info-wrapper img {
    padding: 2rem 1rem 1.5rem;
}
.info-title {
    margin: 16px 0 -92px;
    transform: translateY(-78px);
    font-size: 16px;
}
@media (min-width: 768px){
  .info-title {
      margin: 64px 0 -120px;
      transform: translateY(-105px);
      font-size: 16px;
  }
}
.info-schedule ul {
    padding-left: 0;
    text-align: left;
    line-height: 2;
    list-style: none;
    font-weight: bold;
}
@media (min-width: 768px){
  .info-schedule ul {
      max-width: 700px;
      margin: auto;
  }
}
ul li {
    padding-bottom: 0.25em;
}
@media (min-width: 768px){
  .info-schedule ul li {
          font-size: 1.15rem;
          text-align: center;
  }
}
.schedule-wrapper img {
    padding-top: 1rem;
}

.checklist{
  margin:0 0 14px;
  padding-left: 18px;
  color: rgba(238,240,255,.85);
}
.checklist li{margin: 8px 0}



section#experience {
    padding: 0;
}
section#experience .background-container {
    padding-top: 0;
    padding-bottom: 3rem;
    border-radius: 3rem 3rem 0 0;
    background: #fff;
    color: #000;
}
section#experience h2.section-title {
    margin: 0rem auto .5rem;
    padding-top: 2rem;
    text-align: center;
    font-size: 1.75rem;
    color: #000;
}

.section-title img {
    width: 65%;
    margin: auto;
}
@media (min-width: 768px){
  section#experience h2.section-title {
    margin: 0rem auto 3rem;
    font-size: 2rem;
}
  .section-title img {
      width: 28%;
  }
}
#profile h3 {
    width: 80%;
    margin: auto;
    margin-bottom: 1rem;
}
@media (min-width: 768px){
#profile h3 {
    width: 50%;
    margin-bottom: 2rem;
}
}
.profile-card{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap: 18px;
  padding: 18px;
  border-radius: var(--radius2);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(238,240,255,.14);
  box-shadow: var(--shadow);
}
.profile-card img {
  border-radius: 1rem;
}
.avatar{
  width:110px; height:110px;
  border-radius: 26px;
  background: radial-gradient(circle at 20% 20%, rgba(124,92,255,.55), rgba(39,224,179,.18));
  border: 1px dashed rgba(238,240,255,.22);
}
.profile-body p {
  font-size: 14px;
  text-align: left;
}
.profile-name {
    font-weight: 800;
    font-size: 24px;
}
@media (max-width: 940px){
  .profile-name {
      font-size: 24px;
  } 
}
.profile-name span {
    font-size: .75em;
    color: #000;
}
.profile-role{color: var(--accent); margin-top:2px; font-size:13px}
.profile-point {
  border: 1px dotted var(--accent);
  border-radius: 1rem;
  padding: 1rem;
}

.profile-point ul {
    padding-left: 0;
    margin: .35rem 0 0;
    list-style-type: none;
}
.profile-point ul li::before {
  font-family: 'Material Icons';
  content: "\e86c";
  color: var(--accent);
    transform: translate(-1px, 2px);
    display: inline-block;
}
.profile-point h4 {
    margin: 0;
}
.bullets{margin:12px 0 0; padding-left: 18px; color: rgba(238,240,255,.84)}
.mini-note span {
    font-weight: bold;
    font-size: 1.15em;
    display: block;
}
.grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.outline-card{
  border-radius: var(--radius2);
  background: #fff;
  border: 1px solid var(--accent);
  padding: 18px;
  box-shadow: var(--shadow);
}
.outline-card .dl div {
  grid-template-columns: 80px 1fr;
    align-items: center;
}
.outline-card dt {
    text-align: center;
}
.outline-card dt img {
    width: 24px;
    margin: auto;
}
.card-title{margin:0 0 12px; font-size:16px}
.dl{margin:0}
.dl div{
  display:grid;
  grid-template-columns: 110px 1fr;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(238,240,255,.08);
}
.dl div:last-child{border-bottom:none}
dt{color: var(--accent);}
dd{margin:0;}
.outline-frames{
  display: grid;
  gap: 18px;
  margin-top: 12px;
}
p.mini-note {
    font-size: .75em;
}
.frame-block{
  padding: 14px 14px 12px;
  border-radius: 14px;
  background: rgb(255 118 106 / 17%);
}
.frame-block {
    background-image: url(../img/frame-block-background3.png);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
}
.frame-block.blue{
  background-image: url(../img/frame-block-background2.png);
}
.frame-block.orange{
  background-image: url(../img/frame-block-background1.png);
}
.frame-title{
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.55;
}

.frame-teacher{
  margin: 0 0 10px;
  font-size: 14px;
}

.frame-dates li{
  line-height: 1.6;
}

@media (max-width: 640px){
  .frame-block{ padding: 12px; }
  .frame-title{ font-size: 14px; }
}

.list{margin:0; padding-left: 18px}
.list li{margin: 10px 0; color: #000;font-weight: bold;}

section#schedule {
    background: #ffefd8;
}
section#schedule h2 {
    color: #fff;
    text-align: center;
}
.feature-wrapper {
    margin-top: 2rem;
    padding: 1rem;
    background: #fff;
    border-radius: 1rem;
}
.feature-wrapper .info-title {
    margin: 10px 0 -72px;
    transform: translateY(-80px);
    font-size: 16px;
}
  .feature-wrapper .wrap{
    width:min(820px, 100%);
    background:transparent;
    margin: auto;
  }

  .feature-wrapper .feature{
    display:grid;
    grid-template-columns: 70px 1fr;
    column-gap:18px;
    padding:18px 0;
    border-bottom: 2px dotted rgba(70,120,180,.25);
  }
  .feature:last-child{ border-bottom:none; }

  /* 左の縦グラデ帯 */
  .feature-wrapper .numPill{
    height:100%;
    min-height:110px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-weight:700;
    letter-spacing:.04em;
    background: linear-gradient(180deg, rgba(160,200,255,.85), rgba(255,170,190,.85));
    box-shadow: 0 1px 0 rgba(0,0,0,.03);
  }
  .feature-wrapper .numPill span{
    font-size:18px;
  }

  /* 右側2段ボックス */
  .feature-wrapper .boxes{
    display:grid;
    gap:0;
  }
  .feature-wrapper .boxes p {
    text-align: left;
  }
  .feature-wrapper .box{
    background: #fff;
    /* border: 1px solid var(--accent);
    border-radius: 10px;
    padding:18px 20px; */
    line-height:1.5;
  }

  .feature-wrapper .lead{
    color:var(--ink);
    font-weight:800;
    font-size:22px;
    margin:0;
    margin-bottom: 1rem;
  }
  .feature-wrapper .sub{
    color:var(--ink);
    font-weight:800;
    font-size:22px;
    margin:0;
  }

  .feature-wrapper .note{
    margin:0px 0 0;
    font-size:20px;
    color:#333;
    font-weight:600;
  }

  .feature-wrapper .accent{
    color:var(--accent);
    font-weight:900;
  }

  .feature-wrapper .small{
    font-size:18px;
    font-weight:700;
    color:#333;
  }

  /* レスポンシブ */
  @media (max-width:560px){
    .feature-wrapper .feature{
      grid-template-columns: 30px 1fr;
      column-gap: 32px;
      padding:14px 0;
    }
    .feature-wrapper .numPill{ min-height:110px; border-radius:3px; }
    .feature-wrapper .lead,.sub{ font-size:16px; }
    .feature-wrapper .note{ font-size:14px; }
    /* .feature-wrapper .box{ padding:14px 14px; } */
  }

.site-footer {
    padding: 0px 0 72px;
    background: #fff;
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content: center;
  flex-direction: column;
  gap: 0px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
ul.p-footer__nav {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 90%;
    list-style: none;
    text-align: center;
    font-size: 12px;
    padding: 0;
    align-items: center;
    
}
@media (min-width: 768px){
 ul.p-footer__nav {
      width: 70%;
  } 
}
ul.p-footer__nav li {
    border-left: 1px solid var(--accent);
    display: flex;
    width: 33%;
    justify-content: center;
    text-decoration: none;
}

ul.p-footer__nav li:last-child {
    border-right: 1px solid var(--accent);
}
.brand--footer .brand-name{font-size:13px}
p.p-footer__copyright {
    font-size: 10px;
}

@media (max-width: 940px){
  .hero-grid{grid-template-columns: 1fr; }
  .two-col{grid-template-columns: 1fr;}
  .grid-2{grid-template-columns: 1fr;}
  .compare-head,.compare-row{grid-template-columns: 1fr; }
  .compare-col--label{display:none}
  .compare-cell--label{background: transparent; color: rgb(0, 0, 0); border-bottom: 1px solid rgba(238,240,255,.08)}
  .compare-cell--em{border-left:none}
  .profile-card{grid-template-columns: 1fr; }
  .avatar{width:100%; height:140px;}
  .header-cta .btn{padding:10px 12px}
}

/* =========================
   Compare table (image-like)
   ========================= */

.compare-card{
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  margin-top: 28px;
  padding-top: 86px; /* 吹き出し分の余白 */
}

/* 画像みたいにヘッダー列は使わないなら隠す */
.compare-head{ display:none; }

/* --- 吹き出し（Webっぽく：角丸＋薄影＋細ボーダー） --- */
.compare-bubbles{
  position:absolute;
  top: 0;
  left: 0;
  right: 0;
  display:flex;
  justify-content: space-around;
  align-items:flex-start;
  gap: 16px;
  pointer-events:none;
  padding: 0 12px;
}

.bubble{
  position: relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  border-radius: 16px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .02em;
}

.bubble--left{

  max-width: 220px;
}

.bubble--left,.bubble--right{
    max-width: 220px;
    transform: translate(9%, -18%);
}
@media (max-width: 768px){
.bubble--left,.bubble--right{
    transform: translate(2%, -20%);
}
}
/* しっぽ：パワポっぽい三角を避けて、丸みある“くちばし” */
.bubble::after{
  content:"";
  position:absolute;
  width: 18px;
  height: 18px;
  background: inherit;
  border: inherit;
  border-left: 0;
  border-top: 0;
  transform: translateY(2px)rotate(45deg);
  border-bottom-right-radius: 6px;
  bottom: -8px;
}

.bubble--left::after{ left: 44%; }
.bubble--right::after{ right: 44%; }

/* --- 表本体 --- */
.title-why {
  width: 90%;
  margin: auto;
}
@media (min-width: 768px){
.title-why {
  width:50%;
  margin: auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
}
.compare-body{
  border: 2px solid rgba(255, 120, 140, .55);
  border-radius: 10px;
  margin-bottom: 2rem;
  overflow:hidden;
  background: #fff;
}

/* 行：ラベル帯（上）＋内容（下）みたいに見せる */
.compare-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 2px solid rgba(255, 120, 140, .28);
}

.compare-row:first-child{ border-top:0; }

/* ラベルセルを「帯」にする */
.compare-cell--label{
  grid-column: 1 / -1; /* 1行まるごと */
  background: rgba(255, 140, 150, .95);
  color:#fff;
  font-weight: 800;
  text-align:center;
  padding: 6px 12px;
  font-size: 15px;
  letter-spacing: .06em;
}

/* 中身2カラム */
.compare-row > .compare-cell:not(.compare-cell--label){
  min-height: 86px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 18px 16px;
  font-size: 20px;
  line-height: 1.6;
  border-top: 0;
}

/* 左：白背景＋薄い文字 */
.compare-row > .compare-cell:not(.compare-cell--label):nth-child(2){
  background:#fff;
      color: rgb(0 0 0 / 65%);
  font-weight: 700;
}

/* 右：濃ピンク背景＋白文字（強調） */
.compare-row > .compare-cell.compare-cell--em{
    display: flex;
    border-left: 1px dotted rgba(255, 120, 130, .95);
    color: var(--accent);
    font-weight: 900;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
.deco-kirakira {
  position: relative;
}
.deco-kirakira::after {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    position: absolute;
    background-image: url(../img/icon-kirakira.png);
    background-position: center;
    background-size: cover;
    transform: translate(0px, -7px);
    display: inline-block;
}
@media (max-width: 768px){
.deco-kirakira::after {
    transform: translate(-6px, -7px);

}
}
/* 右セルが長文でも読みやすいように */
.compare-cell--em span{
  display:inline-block;
  max-width: 26em;
}

/* 行ごとの余白感を画像っぽく */
.compare-row + .compare-row .compare-cell--label{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}

/* SP調整 */
@media (max-width: 680px){
  .compare-card{ padding-top: 64px; }
  .compare-bubbles{ padding: 0 8px; }
  .bubble{ padding: 12px 14px; border-radius: 14px; }
  .bubble--left{ min-width: 140px; font-size: 13px; }
  .bubble--right{ min-width: 140px; font-size: 13px; }
  .bubble::after{ width:16px; height:16px; bottom:-7px; }
  .compare-row > .compare-cell:not(.compare-cell--label){ font-size: 16px; padding: 14px 10px; min-height: 78px; }
}

/* 既存の data-col 表示を使ってる場合の補助（任意） */
.compare-cell[data-col]::before{
  content: attr(data-col);
  display:none; /* 必要ならSPで表示に切り替え可能 */
}

/* ===== Mobile-optimized comparison ===== */
/* =========================
   SPでも2列維持する
========================= */


/* ===== Sticky LINE CTA ===== */
body{
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}
.sticky-line{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 1200;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  height: 64px;
  padding: 0 16px;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--linebtncolor);
  color: #fff;
  font-weight: 800;
  text-decoration:none;

}
.sticky-line:active{transform: translateY(1px);}

/* ===== Drawer (top-right) ===== */
.drawer-toggle{
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 1300;
    width: 64px;
    height: 64px;
    background: none;
    border: none;
}
.drawer-overlay{
  position: fixed;
  inset: 0;
  z-index: 1250;
  background: rgba(0,0,0,.55);
}
.drawer{
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(86vw, 360px);
  z-index: 1280;
  background: #fff;
  border-left: 1px solid rgba(238,240,255,.14);
  transform: translateX(102%);
  transition: transform .22s ease;
  padding: 16px;
  display:flex;
  flex-direction:column;
  gap: 14px;
}
.drawer.is-open{transform: translateX(0);}
.drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.drawer-title{font-weight:800;}
.drawer-close{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(238,240,255,.18);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
}
.drawer-nav{
  display:flex;
  flex-direction:column;
  gap: 8px;
  padding-top: 6px;
}
.drawer-nav a{
  padding: 12px 12px;
  border-radius: 14px;
  text-decoration:none;
  color: var(--accent);
  border: 1px solid var(--accent);
  background: rgba(255,255,255,.03);
}
.drawer-nav a:hover{background: rgba(255,255,255,.06);}
.drawer-cta{margin-top:auto;}

html.no-scroll, html.no-scroll body{overflow:hidden;}

/* 初期状態 */
.reveal,
.reveal-on-load{
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s ease, transform .8s ease;
}

/* 表示状態 */
.reveal.is-visible,
.reveal-on-load.is-visible{
  opacity: 1;
  transform: translateY(0);
}
.accent-text {
    color: #fff;
    font-weight: bold;
}
.accent-text.b {
    animation: blinking 1s ease-in-out infinite alternate;
}
@keyframes blinking {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

.fv-toggle{
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 9999;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.15);
  background: rgba(255,255,255,.85);
  font-weight: 700;
  cursor: pointer;
}
@media (max-width: 768px){
  .img-btn-line {
  width: 100%;
}
}
.img-btn-line .anim-area {
  width: 100%;
  position: relative;
  overflow: hidden;
}
@media (min-width: 940px){

      .section-contrast .anim-area {
        width: 100%;
        margin: auto;
    }
    .section-contrast .anim-area img {
        width: 100%;
        margin: auto;
    }
}

@media (min-width: 940px) {
    .section-contrast .line-img img {
        width: 40%!important;
        margin: auto;
    }
}

.img-btn-line {
  display: block;
  width: 40%;
  margin: auto;
}
img.line-deco {
    width: 75% !important;
    z-index: 10;
    transform: translateY(16px);
}
.img-btn-line .anim-area::before {
position: absolute;
content: '';
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 45%, rgba(255, 255, 255, 0) 100%);
transform: skewX(-45deg);
animation: shinny-btn 2.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite;
}
@media (max-width: 768px) {
.img-btn-line {
  width: 100%;
}
}

.schedule-date {
    display: flex;
    flex-direction: row;
    font-weight: bold;
    align-items: center;
}

.schedule-date .month-day {
  font-size: 24px;
  font-family: "Oswald","Zen Maru Gothic", sans-serif;
}
@media (max-width: 768px) {
.schedule-date .month-day {
  font-size: 18px;
}
}
.schedule-date .week {
  font-size: 14px;
  transform: translate(4px, 2px);
}
@media (max-width: 768px) {
.schedule-date .month-day {
  font-size: 16px;
}
.schedule-date .week {
  font-size: 14px;
  transform: translate(3px, 0px);
}
}
.schedule-time {
  font-size: 18px;
  display: flex;
  align-items: center;
  font-weight: 600;
  text-align: center;
}
.schedule-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
}
.schedule-teacher {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-start;
}

.schedule-teacher,.schedule-date,.schedule-time {
border-bottom: 1px dotted var(--accent);
}

.schedule-teacher img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.schedule-teacher span {
  font-weight: 600;
}
.schedule-teacher span {
  font-size: 14px;
}
@media (max-width: 768px){
.schedule-teacher span{
  padding-left: .4em;
  font-size: 12px;
}
}
.schedule-item {
    display: grid;
    grid-template-columns: 120px 120px 120px;
    padding: 0 20px 0;
    background: #fff;
    justify-content: center;
}
@media (max-width: 768px) {
.schedule-item {
    grid-template-columns: 1fr 1fr 1fr;
    padding: 0;
    height: 3em;
}
}
@media (min-width: 768px) {
    .schedule-item {
        height: 5rem;
    }
}


.material-symbols-outlined {
  font-variation-settings:
  'FILL' 1,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}