/* =============================================================
   東大漢 2026 — unified responsive layout
   One content tree and one URL, adaptable at desktop/tablet/mobile.
   Added on top of styles.css; no image or copy alterations.
   ============================================================= */
:root{
  --gutter:clamp(18px,3.4vw,48px);
}
html{
  scroll-behavior:smooth;
  scroll-padding-top:clamp(77px,9vw,108px);
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{min-width:0;overflow-x:clip;overflow-wrap:break-word}
.container{width:min(1160px,calc(100% - 2 * var(--gutter)))}
img,video,svg{max-width:100%}
#app,main,.container,.hero-copy,.hero-visual,.feature-copy,.teacher-info,.pricing-plan,.price-banner>*{min-width:0}
a,button,summary,select{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible{outline:3px solid #5293ec;outline-offset:4px}
.gallery-item,.teacher-card,.line-example,.social-link,.contact-choice,.pricing-plan{min-width:0}
.hero h1,.section-intro h2,.page-hero h1,.parent-card h2{overflow-wrap:anywhere}
.lesson-grid .gallery-image img,.line-example .image-zoom img{object-fit:contain;object-position:center}
.lesson-grid .gallery-image{background:#fff}
.pricing-table{table-layout:auto}
.pricing-table td,.pricing-table th{overflow-wrap:anywhere}
.pricing-table td:last-child strong{white-space:nowrap}
.footer-nav a,.footer-main a{overflow-wrap:anywhere}

/* Desktop site: reserve the viewport bottom for content, not a phone CTA bar. */
@media (min-width:768px){
 body{padding-bottom:0}
 .sticky-actions{display:none}
 .site-header{height:76px}
 .section{padding-block:clamp(76px,7vw,100px)}
 .hero{overflow:hidden}
 .hero-grid{gap:clamp(24px,4.2vw,58px)}
 .hero-photo{max-width:100%;height:min(510px,46vw)}
 .mini-cta{flex-wrap:wrap}
}
/* Large tablets + smaller desktop: use the same accessible slide-out menu. */
@media (min-width:768px) and (max-width:1199px){
 .desktop-nav,.nav-cta{display:none}
 .menu-toggle{display:grid}
 .header-inner{gap:16px}
 .brand-text small{display:block}
 .section{padding-block:76px}
 .support-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .teacher-grid{grid-template-columns:1fr}
 .teacher-card{grid-template-columns:minmax(190px,35%) minmax(0,1fr);min-height:330px}
 .teacher-picture{min-height:330px}
 .teacher-info{padding:32px}
 .teacher-info p{font-size:14px}
 .gallery-grid.lesson-grid,.line-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .lesson-grid .gallery-image{height:420px}
 .social-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .social-link{min-height:150px}
 .contact-benefits{grid-template-columns:repeat(2,minmax(0,1fr))}
 .mini-cta-actions{flex-wrap:wrap}
}
@media (min-width:900px) and (max-width:1199px){
 .hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);padding-block:48px;min-height:550px}
 .hero h1{font-size:clamp(33px,3.8vw,45px)}
 .hero-visual{min-height:410px}
 .hero-photo{height:430px;width:min(360px,100%)}
 .hero-floating{display:none}
 .feature-item{grid-template-columns:1fr 1fr}
 .feature-copy{padding:35px}
 .price-banner{gap:26px;padding:38px}
 .note-split{gap:35px}
}
@media (min-width:768px) and (max-width:899px){
 .hero-grid{grid-template-columns:1fr;min-height:0;padding:52px 0 62px;gap:20px}
 .hero-copy{max-width:680px}
 .hero h1{font-size:clamp(34px,5.6vw,48px)}
 .hero-description{max-width:650px}
 .hero-visual{min-height:380px;justify-content:center}
 .hero-photo{height:365px;width:320px;border-radius:128px 128px 22px 22px}
 .hero-halo{width:410px}
 .hero-floating{display:none}
 .hero-actions{gap:13px}
 .hero-actions a{min-width:215px}
 .feature-item{grid-template-columns:1fr 1fr}
 .feature-photo{min-height:320px}
 .feature-copy{padding:28px}
 .feature-copy h3{font-size:24px}
 .price-banner{gap:22px;padding:32px}
 .price-banner-right a{min-width:0}
 .step-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .footer-main{gap:28px}
 .footer-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
 .note-split{gap:28px}
 .contact-panel{grid-template-columns:1fr;padding:36px;gap:12px}
}
/* Phones and narrow tablets: dedicated one-column reading layout. */
@media (max-width:767px){
 :root{--gutter:clamp(15px,4vw,24px)}
 body{padding-bottom:calc(76px + env(safe-area-inset-bottom));font-size:15px}
 .section{padding-block:clamp(52px,9vw,70px)}
 .section-intro{max-width:100%;margin-bottom:30px}
 .section-intro h2{font-size:clamp(25px,6vw,33px);line-height:1.48}
 .section-intro p{font-size:14px;line-height:1.85}
 .announcement{font-size:10px;line-height:1.5;padding:7px var(--gutter)}
 .announcement a{white-space:normal;display:inline-block}
 .site-header{height:66px}
 .header-inner{gap:10px}
 .brand-logo{width:40px;height:40px;flex-shrink:0}
 .brand-text strong{font-size:23px;line-height:1.2}
 .brand-text small{font-size:7px;max-width:235px;line-height:1.35}
 .desktop-nav,.nav-cta{display:none}
 .menu-toggle{display:grid;width:44px;height:44px;flex-shrink:0}
 .hero-grid{display:flex;flex-direction:column;align-items:stretch;gap:28px;padding:42px 0 55px;min-height:0}
 .hero h1{font-size:clamp(30px,6vw,43px);line-height:1.46;margin:12px 0 16px}
 .hero-description{font-size:14px;line-height:1.9;max-width:600px}
 .hero-actions{display:grid;grid-template-columns:1fr;gap:10px}
 .hero-actions a{min-height:54px;width:100%}
 .hero-visual{min-height:325px}
 .hero-photo{width:min(340px,79vw);height:355px;border-radius:118px 118px 22px 22px}
 .hero-halo{width:min(400px,98vw)}
 .hero-floating{display:none}
 .hero-sub{line-height:1.8}
 .strip-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .strip-grid>div{padding:18px 8px}
 .strip-grid strong{font-size:22px}
 .feature-list{gap:17px}
 .feature-item{display:flex;flex-direction:column}
 .feature-photo{order:0!important;width:100%;min-height:0;aspect-ratio:1.5}
 .feature-copy{order:1!important;padding:25px}
 .feature-copy h3{font-size:clamp(20px,5.4vw,26px)}
 .feature-copy p{font-size:14px}
 .support-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .support-card{padding:21px 16px}
 .support-card h3{font-size:16px}
 .support-card p{font-size:12px}
 .teacher-grid{grid-template-columns:1fr;gap:19px}
 .teacher-card{grid-template-columns:minmax(0,1fr)  minmax(0,1.45fr);min-height:0}
 .teacher-picture{min-height:280px}
 .teacher-info{padding:22px 18px}
 .teacher-info h3{font-size:20px}
 .teacher-info p{font-size:12px}
 .teacher-school{font-size:11px}
 .price-banner{grid-template-columns:1fr;gap:20px;padding:30px 26px}
 .price-banner-right a{width:100%}
 .monthly-examples{grid-template-columns:repeat(2,minmax(0,1fr))}
 .gallery-grid.lesson-grid,.line-gallery-grid{grid-template-columns:1fr;gap:18px}
 .lesson-grid .gallery-image{height:auto;aspect-ratio:1.18;max-height:540px}
 .gallery-caption{padding:17px 18px}
 .gallery-caption h3{font-size:17px}
 .line-example{max-width:630px;margin-inline:auto;width:100%;padding:14px}
 .line-action-panel{flex-direction:column;align-items:stretch;padding:22px 20px;gap:16px}
 .line-action-panel h3{font-size:19px}
 .line-action-panel a{width:100%}
 .result-preview{padding:23px;display:block}
 .voices-grid,.results-grid{grid-template-columns:1fr}
 .step-grid{grid-template-columns:1fr}
 .mini-cta{padding:26px 22px;display:block}
 .mini-cta-actions{margin-top:20px;flex-direction:column;align-items:stretch;width:100%}
 .mini-cta-actions a{width:100%}
 .parent-card{padding:30px 23px}
 .parent-card h2{font-size:clamp(25px,6vw,34px)}
 .parent-actions{flex-direction:column;align-items:stretch;gap:11px}
 .parent-actions a{justify-content:center}
 .faq-item summary{line-height:1.5}
 .social-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
 .social-link{padding:16px;min-height:145px}
 .social-icon{width:43px;height:43px}
 .social-link strong{font-size:15px}
 .note-split{grid-template-columns:1fr;gap:29px}
 .note-split .cta-row{flex-direction:column;align-items:stretch}
 .note-split .cta-row a{width:100%}
 .bottom-cta h2{font-size:clamp(29px,7vw,38px)}
 .bottom-cta .cta-row{flex-direction:column;align-items:stretch}
 .bottom-cta .cta-row a{width:100%}
 .footer-main{display:block}
 .footer-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
 .footer-bottom{display:block}
 .footer-bottom small:last-child{text-align:left}
 .page-hero{padding:47px 0 30px}
 .page-hero h1{font-size:clamp(29px,7vw,38px)}
 .page-hero+section{padding-top:52px}
 .pricing-grid,.contact-choice-grid,.about-grid{grid-template-columns:1fr}
 .pricing-plan{padding:20px}
 .pricing-plan h3{font-size:21px}
 .pricing-table{font-size:13px}
 .pricing-table th{font-size:11px;padding:12px 9px}
 .pricing-table td{padding:13px 8px}
 .pricing-table strong{font-size:16px}
 .contact-benefits{grid-template-columns:repeat(2,minmax(0,1fr))}
 .contact-panel{grid-template-columns:1fr;padding:24px 20px;gap:12px}
 .contact-choice{padding:25px 22px}
 .contact-choice h3{font-size:20px}
 .article h2{font-size:21px}
 .article p{font-size:14px;line-height:1.9}
 .legal-table>div{grid-template-columns:1fr;gap:6px;padding:14px 0}
 .sticky-actions{display:flex;gap:9px;padding:8px max(12px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));}
 .sticky-actions a{min-width:0;flex:1;width:50%;height:52px;min-height:52px;font-size:clamp(11px,2.8vw,14px);line-height:1.3;padding:6px 6px;text-align:center}
 .sticky-actions svg{flex-shrink:0}
 .sticky-actions .line-logo{width:25px;height:25px}
 .pricing-modal{padding:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
 .pricing-modal-dialog{max-height:calc(100dvh - 32px);padding:46px 20px 24px}
 .pricing-modal-grid{grid-template-columns:1fr}
 .lightbox{padding:60px 12px calc(65px + env(safe-area-inset-bottom))}
 .lightbox img{max-height:calc(100dvh - 132px);max-width:100%;object-fit:contain}
}
@media (max-width:480px){
 .brand-logo{width:38px;height:38px}
 .brand-text strong{font-size:22px}
 .brand-text small{max-width:180px}
 .hero-kicker{max-width:100%;font-size:10px;line-height:1.6}
 .hero h1{font-size:clamp(29px,7.9vw,36px)}
 .hero-photo{height:335px;width:min(310px,80vw)}
 .teacher-card{display:flex;flex-direction:column}
 .teacher-picture{height:280px;min-height:0;width:100%}
 .teacher-picture img{object-position:50% 15%}
 .teacher-info{padding:24px}
 .teacher-info p{font-size:14px;line-height:1.9}
 .teacher-info h3{font-size:23px}
 .teacher-school{font-size:12px}
 .monthly-examples strong{font-size:clamp(20px,5.2vw,27px)}
 .gallery-grid.lesson-grid{gap:13px}
 .lesson-grid .gallery-image{aspect-ratio:1.14}
 .price-highlight strong{font-size:clamp(35px,9vw,48px)}
 .calc-controls{gap:9px}
 .calc-controls select{font-size:16px}
 .comparison-entry{padding:16px 12px}
 .comparison-identity{gap:6px}
 .footer{padding-top:43px}
 .footer-nav{gap:12px 8px}
 .sticky-actions{gap:8px}
 .sticky-actions a{font-size:12px}
}
@media (max-width:360px){
 :root{--gutter:14px}
 .brand-text small{display:none}
 .announcement{font-size:9px}
 .hero h1{font-size:29px}
 .hero-grid{padding-top:34px}
 .hero-chips span{font-size:10px}
 .support-grid{grid-template-columns:1fr}
 .support-card{display:grid;grid-template-columns:49px minmax(0,1fr);column-gap:13px;align-items:start}
 .support-icon{grid-row:span 2;margin:0;width:46px;height:46px}
 .support-card h3{margin:0 0 5px}
 .support-card p{grid-column:2}
 .monthly-examples{grid-template-columns:1fr}
 .monthly-examples>div{padding:13px 18px}
 .social-link{padding:13px;min-height:133px}
 .social-link strong{font-size:13px}
 .sticky-actions a{font-size:11px;gap:4px}
 .sticky-actions .line-logo{width:22px;height:22px}
 .price-banner h3{font-size:36px}
}
/* Fix background scroll under both modal layers. */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Keep the two hero CTAs balanced on laptop-sized viewports. */
@media (min-width:980px) and (max-width:1199px){
 .hero-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .hero-actions a{width:100%;min-width:0;padding:12px 9px;font-size:12px}
}
@media (min-width:900px) and (max-width:979px){
 .hero-actions{display:grid;grid-template-columns:1fr;max-width:320px;gap:9px}
 .hero-actions a{width:100%}
}
@media (max-width:350px){
 .hero h1{font-size:26px;letter-spacing:-.055em}
 .hero h1 em{white-space:nowrap}
}
/* View the full time-by-time fee matrix without leaving the calculator. */
.calc-quick-link{
 display:inline-flex;align-items:center;justify-content:center;gap:8px;
 margin-top:21px;padding:12px 16px;background:#fff;color:#263f86;
 border:1px solid #bbcbe6;border-radius:10px;font-size:13px;
 font-weight:800;line-height:1.45;max-width:100%;
}
.calc-quick-link:hover{border-color:#3658a7;background:#f4f7ff}
@media (max-width:480px){.calc-quick-link{width:100%;font-size:12px}}

/* 東大漢 2026-10-26：承認済みの3つの理由の画像を正しい比率で表示 */
.feature-photo{display:flex;align-items:center;justify-content:center;background:linear-gradient(120deg,#eaf3f6,#fff);min-height:290px}
.feature-photo img,.feature-item:nth-child(1) .feature-photo img,.feature-item:nth-child(2) .feature-photo img,.feature-item:nth-child(3) .feature-photo img{width:100%;height:auto;max-height:100%;object-fit:contain;object-position:center;background:transparent}
.feature-item:nth-child(even) .feature-photo{background:#ecf5f8}
.price-highlight strong{font-size:clamp(29px,4.4vw,49px);line-height:1.32}
.price-banner h3{font-size:clamp(30px,4vw,48px);line-height:1.38}
@media(max-width:660px){.feature-photo{min-height:auto;aspect-ratio:16/9}.feature-photo img,.feature-item:nth-child(1) .feature-photo img,.feature-item:nth-child(2) .feature-photo img,.feature-item:nth-child(3) .feature-photo img{height:100%;width:100%;object-fit:contain}.feature-item{overflow:hidden}.price-highlight strong{font-size:29px}.hero h1{font-size:clamp(31px,7.5vw,42px)} }