/* 竹の子ロボット教室：Apple風の作り、元の色、Apple風の動き */
/* Apple風の見た目。中身と並びは index.html のまま */
:root{
  --bg:#fff;--bg2:#fff;--navy:#1d1d1f;--navy2:#1d1d1f;
  --coral:#0071e3;--coral-soft:#6cb0ff;--teal:#0071e3;--teal-soft:#d6e9ff;
  --yellow:#ffd60a;--pink:#0071e3;--sky:#0071e3;
  --ink:#1d1d1f;--muted:#6e6e73;--line:#d2d2d7;--shadow:transparent;
  --gray:#f5f5f7;--link:#0066cc;
}
body,.round,.hand,.out,h1,h2,h3,h4,h1[class],h2[class],h3[class],
nav a,.btn,.btn-text,.logo-txt,.logo-txt small,.eyebrow,.sec-title,.rc-title,.rc-no,.stat-v,.path-dot,.path-txt small,.path-txt b,
.news-date,.news-cat,.foot-col h4,.foot-cr,.lp-skill-no,.lp-step-no,.faq-q .qm,.pb-title,.pb-label,.pb-val,.pb-val i,.cta-title,.cta-mini,.cta-note,
.story-title,.story-eyebrow,.app-feat h4,.badge,.cc .ba,.cc-who,.grad-q,.fact b,.tr-pt b,.lp-skill b,.lp-step b,.hero-title,.hero-eyebrow,.hero-eyebrow *,.area-chips span,.lp-trial-facts span,.topbar,.sticky a,.sticky-btn,.news-ig{
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif}
body{background:#fff;color:var(--ink);line-height:1.8}
h1,h2,h3,h4,h1[class],h2[class],h3[class]{font-weight:700}
.blob,.doodle{display:none}

/* 告知の帯とヘッダー */
.topbar{background:var(--gray);color:var(--ink);font-weight:400;font-size:12.5px;padding:10px 20px}
.topbar a{color:var(--link);border-bottom:none}
.topbar .em{color:var(--ink);font-weight:600}
.topbar .ic-svg{display:none}
header{background:rgba(255,255,255,.78);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.08)}
.head-inner{padding:10px 36px}
.logo{color:var(--ink)}
.logo-mark{width:34px;height:34px;border-radius:9px;background:var(--ink);color:#fff;font-size:16px;font-weight:600;transform:none;box-shadow:none}
.logo-txt{font-size:16px;font-weight:600;letter-spacing:.02em}
.logo-txt small{font-weight:400;letter-spacing:.08em;color:var(--muted)}
nav a{color:var(--ink);font-size:12.5px;font-weight:400;opacity:.85}
nav a:hover{color:var(--ink);opacity:1}
.nav-toggle span{height:2px;background:var(--ink)}
@media(min-width:901px){.nav-cta-mobile-wrap{display:none}}

/* ボタンとリンク */
.btn{border-radius:980px;font-weight:600;font-size:16px;padding:13px 26px}
.btn-primary,.btn-primary:hover,.btn-primary:active{background:#0071e3;color:#fff;box-shadow:none;transform:none}
.btn-primary:hover{background:#0077ed}
.btn-text{color:var(--link);font-weight:400;font-size:16px}
.btn-text:hover{color:var(--link);text-decoration:underline}
.btn-out{border:none;background:none;color:var(--link);font-weight:400;font-size:16px;padding:6px 0}
.btn-out:hover{background:none;color:var(--link);text-decoration:underline}
.facts-more,.tr-note a{color:var(--link);font-weight:400}

/* ヒーロー */
.hero{background:#000}
.hero-bg::after{background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.18) 40%,rgba(0,0,0,.55) 100%)}
.hero-eyebrow.no1{border-left:none;padding-left:0;font-weight:600}
.hero-eyebrow.no1 b{color:#fff;font-weight:700}
.hero-title{font-weight:700;text-shadow:0 1px 12px rgba(0,0,0,.3)}
.hero-title .ul svg{display:none}
.hero-title .ht-let img{filter:drop-shadow(0 1px 10px rgba(0,0,0,.3))}
.hero-cta .btn-text{color:#fff;font-weight:600}
.hero-cta .btn-text:hover{color:#fff}

/* 事実バー */
.facts-inner{background:var(--gray);border:none;border-radius:18px;box-shadow:none}
.fact{border-right:1px solid var(--line)}
.fact b{font-weight:600;color:var(--ink)}
.fact span{font-weight:400;color:var(--muted)}

/* 写真の帯 */
.marquee{background:#fff;border:none;padding:28px 0}
.mq-item{border:none;border-radius:18px;box-shadow:none;transform:none}

/* 見出し */
.sec{padding:110px 36px}
.eyebrow{font-size:17px;font-weight:600;color:#bf4800;letter-spacing:0;gap:0}
.eyebrow::before{display:none}
.sec-title{font-size:48px;font-weight:700;line-height:1.25;letter-spacing:0;color:var(--ink)}
.sec-title .mk svg{display:none}
.sec-title u{background:none}
.sec-title .co,.reasons-sub .co,.grad-q .co{color:inherit}
.sec-lead{font-size:19px;line-height:1.75;color:var(--muted);font-weight:400}
.area-chips span{background:var(--gray);border:none;border-radius:980px;font-weight:400;color:var(--ink)}

/* 面の色を交互に */
.change{background:var(--gray)}
.grad{background:#fff}
.app{background:var(--gray)}
.faq{background:#fff}
.news{background:var(--gray)}

/* 丸写真：位置はそのまま、飾りを外す */
.snap{border:none;box-shadow:none;transform:none!important}
.snap::before,.snap::after{display:none}

/* 使命 */
.lp-skill{background:var(--gray);border:none;border-radius:18px;padding:18px 22px}
.lp-skill-no{color:var(--muted);font-weight:600}
.lp-skill b{font-weight:600;color:var(--ink)}
.lp-skill b i{font-weight:400;color:var(--muted)}

/* 声 */
.cc{background:#fff;border:none;border-radius:22px}
.cc .ba{background:none;color:#bf4800;padding:0;font-weight:600;font-size:12px}
.cc-text{font-weight:400}
.cc-text b{color:var(--ink);font-weight:600}

/* 理由カード */
.rc,.rc:nth-child(1),.rc:nth-child(3),.rc:hover{background:var(--gray);border:none;border-radius:22px;transform:none}
.rc-img{border-bottom:none}
.rc:hover .rc-img img{transform:none}
.rc-emoji{background:#fff;border:none;border-radius:50%;width:52px;height:52px;color:var(--ink)}
.rc-no{color:var(--muted);font-weight:600}
.rc-title{font-weight:700;color:var(--ink)}
.rc-text{font-weight:400}

/* 卒業生 */
.grad-card{background:var(--gray);border:none;border-radius:28px}
.grad-photo{border:none;border-radius:20px}
.badge{background:rgba(0,0,0,.55);border:none;font-weight:600;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.grad-q{font-weight:700;color:var(--ink)}
.path-dot{background:#fff;border:none;border-radius:50%;color:var(--ink);font-weight:600}
.path-step.now .path-dot{background:#0071e3;color:#fff}
.path-txt b{font-weight:600;color:var(--ink)}
.path-note{color:#bf4800}

/* 明石海峡大橋 */
.story{background:#000}
.story-img::after{background:linear-gradient(90deg,transparent 60%,#000)}
.story-eyebrow{color:#86868b;font-weight:600}
.story-eyebrow::before{display:none}
.story-title{font-weight:700}
.story-title .y{color:#fff}
.story-text{color:#a1a1a6;font-weight:400}
.story-body .btn-ghost{border:none;padding:6px 0;color:#2997ff;font-weight:400;font-size:16px}
.story-body .btn-ghost:hover{color:#2997ff;text-decoration:underline}

/* アプリ */
.app-feat{background:#fff;border:none;border-radius:18px}
.app-feat .ico{background:var(--gray);color:var(--ink)}
.app-feat h4{font-weight:600;color:var(--ink)}
.app-feat p{font-weight:400}
.app-note{color:var(--muted);font-weight:400}
.phone{transform:none;background:#1d1d1f;box-shadow:0 30px 60px -20px rgba(0,0,0,.35)}

/* 振替 */
.tr-card{background:var(--gray);border:none;border-radius:28px;box-shadow:none}
.tr-pt{background:#fff;border:none;border-radius:18px}
.tr-pt b{color:var(--ink);font-weight:700}
.tr-pt span{font-weight:400}
.tr-note{font-weight:400}

/* 料金 */
.pb-card{background:var(--gray);border:none;border-radius:28px;box-shadow:none}
.pb-row{background:#fff;border-radius:18px}
.pb-title{font-weight:700;color:var(--ink)}
.pb-label{font-weight:600;color:var(--ink)}
.pb-label small{font-weight:400}
.pb-val{font-weight:700;color:var(--ink)}
.pb-val i{color:var(--muted);font-weight:400}
.pb-note{font-weight:400}
.pb-note b{color:var(--ink);font-weight:600}
.pb-foot{font-weight:400}

/* よくある質問 */
.faq-item{background:var(--gray);border:none;border-radius:18px}
.faq-q{font-weight:600;color:var(--ink)}
.faq-q .qm{background:none;color:var(--muted);font-weight:600;width:auto}
.faq-a{font-weight:400}

/* 体験会 */
.lp-trial-img{border:none;border-radius:22px;box-shadow:none}
.lp-step-no{background:var(--gray);color:var(--ink);font-weight:600}
.lp-step b{font-weight:600;color:var(--ink)}
.lp-step p{font-weight:400}
.lp-trial-facts span{background:var(--gray);border:none;border-radius:980px;font-weight:400;color:var(--ink)}

/* 締めの予約 */
.cta-card{background:var(--gray);border:none;border-radius:28px}
.cta-card::before,.cta-card::after{display:none}
.cta-title{color:var(--ink);font-weight:700}
.cta-sub{color:var(--muted)}
.cta-card .btn-white,.cta-card .btn-white:hover{background:#0071e3;color:#fff;box-shadow:none;transform:none}
.cta-note{color:var(--muted)}

/* 新着 */
.news-item{border-bottom:1px solid var(--line)}
.news-date{color:var(--muted);font-weight:400}
.news-cat{background:none;color:var(--muted);border:1px solid var(--line);font-weight:400}
.news-txt{font-weight:400}
.news-ig{border:none;background:none;color:var(--link);font-weight:400;padding:6px 0}
.news-ig:hover{background:none;color:var(--link);text-decoration:underline}
.gram-head{font-weight:600;color:var(--ink)}
.gram-item{border:none;border-radius:16px}

/* フッター */
footer{background:var(--gray);color:var(--muted);font-size:12px}
.foot-top{border-bottom:1px solid var(--line)}
.foot-brand .logo,.foot-brand .logo-txt{color:var(--ink)!important}
.foot-brand .logo-txt small{color:var(--muted)!important}
.foot-tag{color:var(--ink);font-weight:600}
.foot-desc{color:var(--muted);font-weight:400}
.foot-col h4{color:var(--ink);letter-spacing:0;font-weight:600;font-size:12px}
.foot-col a{color:#424245}
.foot-col a:hover{color:var(--ink);text-decoration:underline}
.foot-room{color:var(--muted)}
.foot-room b{color:#424245}
.foot-cr{color:var(--muted);letter-spacing:0}
.foot-legal{border-top-color:var(--line)!important}
.foot-legal a{color:#424245!important}

@media(max-width:900px){
  header{background:rgba(255,255,255,.96);-webkit-backdrop-filter:none;backdrop-filter:none}
  .head-inner{padding:8px 18px}
  nav{background:#fff;box-shadow:-10px 0 40px rgba(0,0,0,.12)}
  nav ul li{border-bottom:1px solid var(--line)}
  nav a{color:var(--ink)!important;font-size:17px;font-weight:600;opacity:1}
  .nav-juku a{color:var(--muted)!important}
  .nav-cta-mobile{display:flex;flex-direction:column;gap:10px;margin-top:18px}
  .nav-cta-mobile a{display:block;text-align:center;border-radius:980px;padding:12px;font-size:16px}
  .ncm-trial{background:#0071e3;color:#fff!important}
  .ncm-line{background:var(--gray)}
  .nav-overlay{background:rgba(0,0,0,.3)}
  .topbar{font-size:12px}
  .sec{padding:72px 20px}
  .sec-title{font-size:30px;line-height:1.3}
  .sec-lead{font-size:17px}
  .eyebrow{font-size:15px}
  .snap{width:120px!important;height:120px!important}
  .tr-card{box-shadow:none}
  .fact{border-bottom:1px solid var(--line)}
  .fact:nth-child(n+3){border-bottom:none}
  .grad-photo{border:none}
  .sticky,.sticky-cta{background:rgba(255,255,255,.97);border-top:1px solid rgba(0,0,0,.1)}
  .sticky .s-tel,.sticky-tel{background:var(--gray);border:none;color:var(--ink)}
  .sticky .s-trial,.sticky-trial{background:#0071e3;border-radius:980px;font-weight:600}
  .sticky a,.sticky-btn{border-radius:14px;font-weight:600}
  .cta-title{font-size:30px}
}

/* 色は元のサイトに戻す（クリーム地・紺・コーラル・黄） */
:root{--bg:#fdfaf4;--bg2:#fff;--navy:#21305a;--navy2:#172143;--coral:#f26d45;--coral-soft:#ffb38f;--teal:#21b6a8;--teal-soft:#8fe0d7;--yellow:#ffc93c;--pink:#ff8fab;--sky:#7cc4f0;--ink:#2a2a33;--muted:#8a8275;--line:#efe6d6;--gray:#f8f1e5;--link:#e0582f}
body{background:var(--bg)}
.topbar{background:var(--navy);color:#fff}
.topbar a,.topbar .em{color:var(--yellow)}
header{background:rgba(253,250,244,.82)}
.logo{color:var(--navy)}
.logo-mark{background:var(--navy);color:var(--yellow)}
nav a{color:var(--navy)}
.nav-toggle span{background:var(--navy)}
.btn-primary,.btn-primary:hover,.btn-primary:active{background:var(--coral)}
.btn-primary:hover{background:#e0582f}
.hero{background:var(--navy)}
.hero-bg::after{background:linear-gradient(180deg,rgba(18,29,58,.45) 0%,rgba(18,29,58,.2) 40%,rgba(18,29,58,.62) 100%)}
.hero-eyebrow.no1 b{color:var(--yellow)}
.eyebrow,.cc .ba,.path-note{color:var(--coral)}
.sec-title,.rc-title,.grad-q,.pb-title,.faq-q,.app-feat h4,.lp-step b,.lp-skill b,.fact b,.tr-pt b,.path-txt b,.pb-label,.pb-val,.gram-head,.rc-emoji,.area-chips span,.lp-trial-facts span{color:var(--navy)}
.cc-text b,.pb-note b{color:var(--coral)}
.marquee{background:var(--bg)}
.change,.app,.news{background:var(--gray)}
.grad,.faq{background:#fff}
.path-step.now .path-dot{background:var(--coral)}
.story{background:var(--navy)}
.story-img::after{background:linear-gradient(90deg,transparent 60%,var(--navy))}
.story-eyebrow,.story-title .y{color:var(--yellow)}
.story-text{color:rgba(255,255,255,.82)}
.story-body .btn-ghost,.story-body .btn-ghost:hover{color:var(--yellow)}
.phone{background:var(--navy)}
.cta-card{background:var(--coral)}
.cta-title{color:#fff}
.cta-sub,.cta-note{color:rgba(255,255,255,.92)}
.cta-card .btn-white,.cta-card .btn-white:hover{background:#fff;color:var(--coral)}
.lp-step-no{background:var(--navy);color:var(--yellow)}
footer{background:var(--navy2);color:rgba(255,255,255,.8)}
.foot-top{border-bottom:1px solid rgba(255,255,255,.15)}
.foot-brand .logo,.foot-brand .logo-txt{color:#fff!important}
.foot-brand .logo-txt small{color:rgba(255,255,255,.6)!important}
.foot-tag,.foot-col h4{color:var(--yellow)}
.foot-desc,.foot-room{color:rgba(255,255,255,.6)}
.foot-col a{color:rgba(255,255,255,.7)}
.foot-col a:hover{color:var(--yellow)}
.foot-room b{color:#fff}
.foot-cr{color:rgba(255,255,255,.45)}
.foot-legal{border-top-color:rgba(255,255,255,.12)!important}
.foot-legal a{color:rgba(255,255,255,.65)!important}
@media(max-width:900px){
  header{background:var(--bg)}
  nav a{color:var(--navy)!important}
  .ncm-trial{background:var(--coral)}
  .sticky .s-trial,.sticky-trial{background:var(--coral)}
  .sticky .s-tel,.sticky-tel{color:var(--navy)}
}

/* 書体：iPhone と同じ系統。アプリ画面の明朝だけはそのまま */
body,body *:not(.ra-name):not(.ra-logo){font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif!important}

/* 動き：下から静かに出る。見出しはぼかしから合わせる */
html.mo .mo-r{opacity:0;translate:0 40px;transition:opacity .9s cubic-bezier(.28,.11,.32,1),translate 1.1s cubic-bezier(.28,.11,.32,1),filter 1s cubic-bezier(.28,.11,.32,1)}
html.mo h2.mo-r,html.mo h1.mo-r{filter:blur(8px)}
html.mo .mo-r.mo-in{opacity:1;translate:0 0;filter:none}
html.mo .mo-z{scale:1.08;transition:scale 1.8s cubic-bezier(.28,.11,.32,1)}
html.mo .mo-in .mo-z,html.mo .mo-z.mo-in{scale:1}

/* 最初の画面：読み込み時に順に出す */
html.mo.has-hero .hero-copy>*,html.mo.has-hero .hero-title>*{opacity:0;translate:0 24px;transition:opacity 1s cubic-bezier(.28,.11,.32,1),translate 1.2s cubic-bezier(.28,.11,.32,1),filter 1.2s cubic-bezier(.28,.11,.32,1)}
html.mo.has-hero .hero-title .ht-let{filter:blur(10px);scale:.97;transition:opacity 1.2s cubic-bezier(.28,.11,.32,1),filter 1.4s cubic-bezier(.28,.11,.32,1),scale 1.6s cubic-bezier(.28,.11,.32,1)}
html.mo.hero-in .hero-copy>*,html.mo.hero-in .hero-title>*{opacity:1;translate:0 0;filter:none;scale:1}
html.mo.hero-in .hero-eyebrow{transition-delay:.1s}
html.mo.hero-in .hero-title .ht-let{transition-delay:.3s}
html.mo.hero-in .hero-title>.nw{transition-delay:.75s}
html.mo.hero-in .hero-cta{transition-delay:.9s}
html.mo.hero-in .hero-note,html.mo.hero-in .hero-src{transition-delay:1.05s}
html.mo.hero-in .hero-title{opacity:1;translate:0 0}
.hero-bg{transform-origin:50% 40%}

/* 下の予約バーは、最初の画面を過ぎてから上がってくる */
@media(max-width:900px){
  html.mo.has-hero .sticky,html.mo.has-hero .sticky-cta{transform:translateY(110%);transition:transform .55s cubic-bezier(.28,.11,.32,1)}
  html.mo.has-hero.past-hero .sticky,html.mo.has-hero.past-hero .sticky-cta{transform:none}
}

/* スマホのメニュー：画面いっぱいにふわっと開き、項目が上から順に降りてくる */
@media(max-width:900px){
  nav{right:0!important;left:0;width:100%;max-width:none;height:100vh;height:100dvh;padding:150px 32px calc(40px + env(safe-area-inset-bottom,0));
    background:rgba(253,250,244,.985);box-shadow:none;opacity:0;visibility:hidden;transition:opacity .32s ease,visibility 0s linear .32s}
  .nav-cb:checked ~ nav{opacity:1;visibility:visible;transition:opacity .32s ease}
  .nav-overlay,.nav-cb:checked ~ .nav-overlay{display:none}
  nav ul li{opacity:0;translate:0 -10px;transition:opacity .4s ease,translate .5s cubic-bezier(.28,.11,.32,1)}
  .nav-cb:checked ~ nav ul li{opacity:1;translate:0 0}
  .nav-cb:checked ~ nav ul li:nth-child(2){transition-delay:.03s}
  .nav-cb:checked ~ nav ul li:nth-child(3){transition-delay:.06s}
  .nav-cb:checked ~ nav ul li:nth-child(4){transition-delay:.09s}
  .nav-cb:checked ~ nav ul li:nth-child(5){transition-delay:.12s}
  .nav-cb:checked ~ nav ul li:nth-child(6){transition-delay:.15s}
  .nav-cb:checked ~ nav ul li:nth-child(7){transition-delay:.18s}
  .nav-cb:checked ~ nav ul li:nth-child(8){transition-delay:.21s}
  .nav-cb:checked ~ nav ul li:nth-child(9){transition-delay:.24s}
  .nav-cb:checked ~ nav ul li:nth-child(n+10){transition-delay:.27s}
  nav a{font-size:21px!important;font-weight:600;padding:13px 0!important}
  .nav-toggle span{transition:transform .35s cubic-bezier(.28,.11,.32,1),opacity .2s}
}

@media(prefers-reduced-motion:reduce){
  html.mo .mo-r,html.mo .mo-z,html.mo.has-hero .hero-copy>*,html.mo.has-hero .hero-title>*{opacity:1!important;translate:none!important;scale:none!important;filter:none!important;transition:none!important}
}

/* 筆文字は出きったらくっきり。下層の見出しの黄色い下線と、肩の縦線・手描きの丸は外す */
html.mo.has-hero.hero-in .hero-title .ht-let{filter:none;scale:1;opacity:1}
.page-title .accent::after{display:none}
.hero-eyebrow{border-left:none;padding-left:0}
.scribble-circle{display:none}

/* 強調は下線ではなく色で。見出しの要の言葉をコーラル、最初の画面の「無料体験」は黄 */
.sec-title .co,.reasons-sub .co,.grad-q .co,.sec-title .mk,.sec-title u,.story-title .y{color:var(--coral)}
.story-title .y{color:var(--yellow)}
.hero-title .ul{color:var(--yellow)}