/* =========================================================
   Smartphone readability layer — 2026-09
   Desktop/tablet layout is intentionally untouched.
   Inspired by clear single-column mobile patterns used on
   Toyota Mobility Foundation and PLAYWORKS.
   ========================================================= */
@media (max-width: 767px){
  :root{
    color-scheme:light !important;
    --ink:#111214 !important;
    --muted:#55585f !important;
    --paper:#F7F3EA !important;
    --soft:#FFF9EB !important;
    --white:#FFFFFF !important;
    --line:rgba(17,18,20,.14) !important;
  }

  html{
    color-scheme:light !important;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
    background:#fff !important;
  }
  body{
    min-width:0 !important;
    overflow-x:hidden !important;
    background:#fff !important;
    color:#111214 !important;
    font-size:16px !important;
    line-height:1.8 !important;
  }
  img,svg,video,iframe{max-width:100% !important;}
  .container{
    width:auto !important;
    max-width:none !important;
    margin-inline:20px !important;
  }
  h1,h2,h3,p,li,summary,a,span,strong{
    overflow-wrap:break-word;
    line-break:strict;
  }
  h1,h2,h3{word-break:normal;}

  /* ---------- Shared header ---------- */
  .header,
  .site-header{
    background:rgba(255,255,255,.97) !important;
    color:#111214 !important;
    border-bottom:1px solid rgba(17,18,20,.12) !important;
    backdrop-filter:blur(10px);
  }
  .header-inner{
    min-height:58px !important;
    height:auto !important;
    gap:10px !important;
  }
  .brand{
    min-width:0 !important;
    max-width:calc(100% - 118px) !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    font-size:15px !important;
    line-height:1.2 !important;
    letter-spacing:-.02em !important;
    color:#111214 !important;
  }
  .header-nav{
    display:flex !important;
    align-items:center !important;
    flex:0 0 auto !important;
  }
  .header-nav > a:not(.header-cta){display:none !important;}
  .header-cta{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:40px !important;
    padding:8px 12px !important;
    border-radius:999px !important;
    white-space:nowrap !important;
    font-size:12px !important;
    line-height:1 !important;
  }
  .site-menu-btn{
    flex:0 0 auto !important;
    min-height:42px !important;
    padding:8px 12px !important;
    gap:7px !important;
    background:#fff !important;
    color:#111214 !important;
    border-color:rgba(17,18,20,.2) !important;
  }
  .site-menu-btn .menu-label{font-size:12px !important;letter-spacing:.06em !important;}
  .site-menu-btn .hamburger{width:19px !important;}
  .menu-drawer{
    width:min(88vw,350px) !important;
    background:#fff !important;
    color:#111214 !important;
  }
  .menu-links a{font-size:18px !important;line-height:1.35 !important;}

  /* ---------- Breadcrumb / in-page nav ---------- */
  .crumb{
    padding:12px 0 0 !important;
    font-size:12px !important;
    line-height:1.5 !important;
    white-space:nowrap !important;
    overflow-x:auto !important;
    scrollbar-width:none;
  }
  .crumb::-webkit-scrollbar{display:none;}
  .page-nav{
    position:relative !important;
    background:#fff !important;
  }
  .page-nav-inner{
    margin-inline:20px !important;
    padding:10px 0 11px !important;
    gap:7px !important;
  }
  .page-nav a{
    min-height:38px !important;
    display:inline-flex !important;
    align-items:center !important;
    padding:7px 12px !important;
    border:1px solid rgba(17,18,20,.12) !important;
    background:#fff !important;
    font-size:12px !important;
    line-height:1.25 !important;
  }

  /* ---------- Shared typography / rhythm ---------- */
  .section,
  .detail{
    padding:56px 0 !important;
  }
  .section-paper{background:#F7F3EA !important;}
  .section-soft{background:#FFF9EB !important;}
  .section-head{max-width:none !important;}
  .eyebrow{
    font-size:10px !important;
    line-height:1.5 !important;
    letter-spacing:.11em !important;
  }
  .section-title,
  .detail-title{
    margin-top:7px !important;
    font-size:clamp(27px,7.6vw,32px) !important;
    line-height:1.28 !important;
    letter-spacing:-.025em !important;
    color:#111214 !important;
  }
  .section-lead,
  .detail-copy,
  .overview-lead{
    font-size:15.5px !important;
    line-height:1.85 !important;
    color:#4f5258 !important;
  }
  .section-lead{margin-top:14px !important;}
  .btn{
    width:100% !important;
    min-height:50px !important;
    padding:12px 16px !important;
    border-radius:999px !important;
    white-space:normal !important;
    text-align:center !important;
    font-size:14px !important;
    line-height:1.35 !important;
  }

  /* ---------- Service detail hero ---------- */
  body:not(.home) .hero,
  .header + .crumb + .hero,
  main > .crumb + .hero{
    min-height:0 !important;
  }
  .hero{
    overflow:hidden !important;
  }
  .header ~ main .hero,
  main .hero:not(#top){
    padding:30px 0 42px !important;
  }
  .hero-grid{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:26px !important;
  }
  .hero h1,
  #page-title{
    margin-top:9px !important;
    max-width:100% !important;
    font-size:clamp(31px,8.8vw,36px) !important;
    line-height:1.25 !important;
    letter-spacing:-.035em !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:break-word !important;
    color:#111214 !important;
  }
  .hero-title-line{
    display:block !important;
    white-space:normal !important;
  }
  .hero-lead{
    margin-top:17px !important;
    max-width:none !important;
    font-size:16px !important;
    line-height:1.88 !important;
    font-weight:500 !important;
    color:#34363a !important;
  }
  .hero-hook{
    margin-top:19px !important;
    padding:15px 16px !important;
    border-left-width:4px !important;
    border-radius:0 14px 14px 0 !important;
    font-size:14px !important;
    line-height:1.75 !important;
    font-weight:700 !important;
  }
  .hero-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:9px !important;
    margin-top:20px !important;
  }
  .hero-image{
    width:100% !important;
    border-radius:20px !important;
  }
  .hero-image img{
    width:100% !important;
    height:auto !important;
    aspect-ratio:4/3 !important;
    object-fit:cover !important;
  }
  .hero-image::after{
    left:12px !important;
    bottom:12px !important;
    max-width:calc(100% - 24px) !important;
    padding:6px 9px !important;
    font-size:8.5px !important;
    white-space:normal !important;
  }

  /* ---------- Service overview ---------- */
  .overview-section{padding:34px 0 38px !important;background:#fff !important;}
  .overview-head{
    display:block !important;
  }
  .overview-title{
    margin-top:6px !important;
    font-size:26px !important;
    line-height:1.35 !important;
    letter-spacing:-.02em !important;
  }
  .overview-lead{margin-top:14px !important;}
  .decision-strip{
    display:grid !important;
    grid-template-columns:1fr !important;
    margin-top:20px !important;
    border-radius:16px !important;
    overflow:hidden !important;
  }
  .decision-item{
    padding:14px 16px !important;
    border-left:0 !important;
    border-top:1px solid rgba(17,18,20,.1) !important;
  }
  .decision-item:first-child{border-top:0 !important;}
  .decision-label{font-size:11px !important;line-height:1.4 !important;}
  .decision-value{margin-top:4px !important;font-size:14px !important;line-height:1.55 !important;}

  /* ---------- Common card grids ---------- */
  .problem-grid,.use-grid,.scope-grid,.fit-grid,.strength-grid,.audience-grid,
  .format-grid,.approach-grid,.related,.related-grid,.works-grid,
  .price-simple,.assurance-grid,.channel-grid{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  .problem-grid,.use-grid,.scope-grid,.fit-grid,.strength-grid,.audience-grid,
  .format-grid,.approach-grid,.works-grid,.channel-grid{
    margin-top:26px !important;
  }
  .problem-card,.use-card,.scope-card,.fit-card,.strength-card,.audience-card,
  .format-card,.approach-card,.assurance-item{
    min-height:0 !important;
    padding:19px 18px !important;
    border-radius:18px !important;
  }
  .problem-card h3,.use-card h3,.scope-card h3,.fit-card h3,
  .strength-card h3,.audience-card h3,.format-card h3,.approach-card h3{
    font-size:18px !important;
    line-height:1.5 !important;
  }
  .problem-card p,.use-card p,.scope-card p,.fit-card p,
  .strength-card p,.audience-card p,.format-card p,.approach-card p,
  .assurance-item p{
    font-size:14.5px !important;
    line-height:1.75 !important;
  }
  .problem-kicker,.use-tag,.scope-kicker,.fit-kicker,.format-no,.strength-num{
    font-size:10px !important;
  }
  .scope-note{
    margin-top:14px !important;
    padding:14px 15px !important;
    font-size:13.5px !important;
    line-height:1.7 !important;
  }

  /* ---------- SNS page specifics ---------- */
  .channel-grid{display:flex !important;flex-direction:column !important;gap:22px !important;}
  .channel-copy{font-size:15.5px !important;line-height:1.85 !important;}
  .channel-video{width:100% !important;}
  .audience-card{min-height:0 !important;}
  .audience-points{font-size:14px !important;line-height:1.7 !important;}
  .flow-band{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    overflow:visible !important;
  }
  .flow-band-item{
    min-width:0 !important;
    min-height:44px !important;
    padding:10px 12px !important;
    font-size:13px !important;
  }
  .works-grid{display:grid !important;}
  .work-card{border-radius:16px !important;overflow:hidden !important;}
  .work-thumb img{width:100% !important;aspect-ratio:16/9 !important;object-fit:cover !important;}
  .work-body{padding:14px 15px 16px !important;}
  .work-card h3{font-size:16px !important;line-height:1.55 !important;}

  /* ---------- Price / FAQ / related ---------- */
  .price-simple-item{
    padding:21px 18px !important;
    border-radius:0 0 18px 18px !important;
  }
  .price-simple-item span{font-size:15px !important;}
  .price-simple-item strong{
    margin-top:7px !important;
    font-size:24px !important;
    line-height:1.35 !important;
  }
  .price-small{font-size:12.5px !important;line-height:1.65 !important;}
  .price-bottom{
    display:block !important;
    margin-top:18px !important;
    padding-top:16px !important;
  }
  .price-bottom p{font-size:13.5px !important;line-height:1.7 !important;}
  .price-bottom .btn{margin-top:14px !important;}
  details{padding:15px 0 !important;}
  summary{font-size:15px !important;line-height:1.55 !important;}
  details p{font-size:14.5px !important;line-height:1.75 !important;}
  .related a{
    padding:14px 15px !important;
    font-size:14px !important;
    line-height:1.5 !important;
  }

  /* ---------- CTA ---------- */
  .cta,
  .contact-cta{
    padding:48px 0 !important;
  }
  .cta h2,
  .contact-cta h2{
    font-size:30px !important;
    line-height:1.3 !important;
  }
  .cta p,
  .contact-cta p{
    margin-top:13px !important;
    font-size:15px !important;
    line-height:1.8 !important;
  }

  /* =========================================================
     TOP PAGE ONLY
     ========================================================= */
  #top.hero{
    min-height:0 !important;
    padding:0 !important;
    background:#FFF4BF !important;
    border-bottom:1px solid rgba(17,18,20,.1) !important;
  }
  #top.hero::before{
    inset:0 !important;
    background-image:url("hero.jpg") !important;
    background-size:cover !important;
    background-position:center !important;
    opacity:.72 !important;
    transform:none !important;
    filter:none !important;
  }
  #top.hero::after{
    inset:0 !important;
    background:linear-gradient(180deg,rgba(255,255,255,.72) 0%,rgba(255,250,232,.88) 58%,rgba(255,255,255,.96) 100%) !important;
  }
  #top .hero-inner{
    position:relative !important;
    z-index:2 !important;
    padding:28px 0 38px !important;
    color:#111214 !important;
  }
  #top .hero-copy{max-width:none !important;}
  #top .hero-logo-wrap{
    display:inline-flex !important;
    max-width:100% !important;
    background:rgba(255,255,255,.72) !important;
    padding:8px 10px !important;
    border-radius:14px !important;
  }
  #top .hero-logo{
    width:220px !important;
    max-width:72vw !important;
    filter:none !important;
  }
  #top .eyebrow{
    margin-top:22px !important;
    color:#7a5500 !important;
  }
  #top h1{
    margin-top:9px !important;
    max-width:none !important;
    font-size:30px !important;
    line-height:1.28 !important;
    letter-spacing:-.03em !important;
    white-space:normal !important;
    color:#111214 !important;
  }
  #top .hero-sub{
    margin-top:16px !important;
    max-width:none !important;
    font-size:15.5px !important;
    line-height:1.85 !important;
    color:#34363a !important;
    font-weight:600 !important;
  }
  #top .hero-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:9px !important;
    margin-top:20px !important;
  }
  #top .btn-primary{background:#111214 !important;color:#fff !important;}
  #top .btn-light{background:#fff !important;color:#111214 !important;}

  /* Top story / services / profile / news */
  .home-page #story,.home-page #services,.home-page #profile,.home-page #news,.home-page #contact-form{background:#fff !important;color:#111214 !important;}
  .home-page #services.section-paper,.home-page #news.section-paper{background:#F7F3EA !important;}
  .story-grid,
  .profile-grid{
    grid-template-columns:1fr !important;
    gap:28px !important;
    margin-top:28px !important;
  }
  .story-copy{
    font-size:15.5px !important;
    line-height:1.9 !important;
    color:#404349 !important;
  }
  .why-box{
    padding:20px 0 0 !important;
    border-left:0 !important;
    border-top:3px solid #F2B200 !important;
  }
  .why-title{font-size:20px !important;}
  .why-item{grid-template-columns:38px 1fr !important;gap:12px !important;padding:15px 0 !important;}
  .why-num{width:36px !important;height:36px !important;font-size:10px !important;}
  .why-item h3{font-size:16px !important;}
  .why-item p{font-size:14px !important;line-height:1.7 !important;color:#55585f !important;}
  .service-index{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:16px !important;
    margin-top:30px !important;
  }
  .service-card:nth-child(n){grid-column:1 !important;min-height:0 !important;}
  .service-card{
    background:#fff !important;
    color:#111214 !important;
    border-radius:20px !important;
  }
  .service-card img,
  .service-card:nth-child(n+3) img{
    width:100% !important;
    height:auto !important;
    aspect-ratio:16/10 !important;
    object-fit:cover !important;
  }
  .service-card-body{padding:18px 18px 20px !important;}
  .service-card h3{font-size:20px !important;line-height:1.45 !important;color:#111214 !important;}
  .service-card p{font-size:14.5px !important;line-height:1.75 !important;color:#55585f !important;}
  .service-arrow{font-size:13px !important;color:#6e4b00 !important;}
  .profile-photo{border-radius:22px !important;}
  .profile-summary{font-size:16px !important;line-height:1.8 !important;}
  .profile-points{grid-template-columns:1fr !important;gap:8px !important;}
  .profile-points li{font-size:13.5px !important;line-height:1.6 !important;}
  .news-item{grid-template-columns:1fr !important;gap:7px !important;padding:17px 0 !important;}
  .news-link{font-size:15px !important;line-height:1.55 !important;}
  .news-desc{font-size:13.5px !important;line-height:1.65 !important;}
  .form-grid{grid-template-columns:1fr !important;gap:16px !important;}
  .field.full{grid-column:auto !important;}
  input,textarea{font-size:16px !important;background:#fff !important;color:#111214 !important;}

  /* Top page YouTube block: preserve emphasis without a full dark page */
  .home-page #youtube{
    background:#111214 !important;
    color:#fff !important;
  }
  .home-page #youtube .section-title,
  .home-page #youtube h2,.home-page #youtube h3,.home-page #youtube p{color:#fff !important;}

  /* ---------- TOP: WHY US becomes readable stacked pairs ---------- */
  .home-page #why-us.section{
    min-height:0 !important;
    padding:56px 0 !important;
    background:#FFF9EB !important;
    color:#111214 !important;
  }
  .home-page #why-us .why-experience-intro .section-title{font-size:30px !important;line-height:1.3 !important;}
  .home-page #why-us .why-experience-intro .section-lead{font-size:15px !important;line-height:1.8 !important;}
  .home-page #why-us .why2-wrap{display:none !important;}
  .home-page #why-us .why2-mobile-compact{display:block !important;margin-top:24px !important;}
  .home-page #why-us .why2-mobile-headings{display:none !important;}
  .home-page #why-us .why2-mobile-rows{display:grid !important;gap:18px !important;}
  .home-page #why-us .why2-mobile-rows::before{display:none !important;}
  .home-page #why-us .why2-mobile-row{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
  }
  .home-page #why-us .why2-mobile-stage,
  .home-page #why-us .why2-mobile-perspective{
    min-height:0 !important;
    padding:18px !important;
    border-radius:18px !important;
    color:#111214 !important;
  }
  .home-page #why-us .why2-mobile-stage{
    background:linear-gradient(135deg,#FFF4C9,#FFFDF8) !important;
    border:1px solid rgba(242,178,0,.35) !important;
  }
  .home-page #why-us .why2-mobile-perspective{
    background:#fff !important;
    border:1px solid rgba(17,18,20,.12) !important;
  }
  .home-page #why-us .why2-mobile-stage-head{gap:10px !important;}
  .home-page #why-us .why2-mobile-no{
    width:38px !important;height:38px !important;flex-basis:38px !important;
    font-size:11px !important;box-shadow:none !important;
  }
  .home-page #why-us .why2-mobile-stage h3{font-size:21px !important;line-height:1.2 !important;color:#111214 !important;}
  .home-page #why-us .why2-mobile-sub{font-size:11px !important;line-height:1.4 !important;color:#835900 !important;}
  .home-page #why-us .why2-mobile-stage-body{grid-template-columns:40px 1fr !important;gap:10px !important;margin-top:13px !important;}
  .home-page #why-us .why2-mobile-stage-icon{width:40px !important;height:40px !important;color:#A96D00 !important;}
  .home-page #why-us .why2-mobile-stage-icon svg{width:38px !important;height:38px !important;}
  .home-page #why-us .why2-mobile-stage-body > p{font-size:14px !important;line-height:1.75 !important;color:#4d5056 !important;}
  .home-page #why-us .why2-mobile-impact-arrow{
    display:block !important;
    height:24px !important;
    font-size:0 !important;
    text-align:center !important;
    color:#D89000 !important;
  }
  .home-page #why-us .why2-mobile-impact-arrow::after{
    content:"↑  この視点が支える";
    font-size:11px !important;
    line-height:24px !important;
    font-weight:900 !important;
    color:#8b5d00 !important;
  }
  .home-page #why-us .why2-mobile-perspective-head{grid-template-columns:42px 1fr !important;gap:10px !important;}
  .home-page #why-us .why2-mobile-perspective-icon{width:42px !important;height:42px !important;background:#FFF9E8 !important;color:#A96D00 !important;}
  .home-page #why-us .why2-mobile-perspective-icon svg{width:24px !important;height:24px !important;}
  .home-page #why-us .why2-mobile-target{font-size:10px !important;line-height:1.4 !important;color:#835900 !important;}
  .home-page #why-us .why2-mobile-perspective h3{font-size:19px !important;line-height:1.3 !important;color:#111214 !important;}
  .home-page #why-us .why2-mobile-perspective-copy{margin-top:10px !important;font-size:14px !important;line-height:1.75 !important;color:#4d5056 !important;}
  .home-page #why-us .why2-mobile-convergence{
    grid-template-columns:40px 1fr !important;
    gap:12px !important;
    margin-top:20px !important;
    padding:16px !important;
    border-radius:16px !important;
    background:#fff !important;
  }
  .home-page #why-us .why2-mobile-check{width:40px !important;height:40px !important;font-size:18px !important;}
  .home-page #why-us .why2-mobile-convergence strong{font-size:14.5px !important;line-height:1.55 !important;color:#111214 !important;}
  .home-page #why-us .why2-mobile-convergence p{margin-top:5px !important;font-size:13px !important;line-height:1.7 !important;color:#55585f !important;}

  /* ---------- Product development's desktop WHY diagram ---------- */
  .why2-process-list,
  .why2-perspective-list{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  .why2-process-card,
  .why2-perspective-card{
    min-height:0 !important;
    padding:18px !important;
    border-radius:18px !important;
  }
  .why2-process-card:not(:last-child)::before,
  .why2-process-card:not(:last-child)::after{display:none !important;}
  .why2-stage-name{font-size:21px !important;}
  .why2-stage-sub{font-size:11px !important;}
  .why2-stage-copy,.why2-perspective-copy{font-size:14px !important;line-height:1.75 !important;}
  .why2-bridge{min-height:18px !important;}
  .why2-convergence{margin-top:18px !important;padding-top:22px !important;}
  .why2-convergence strong{font-size:18px !important;line-height:1.45 !important;}
  .why2-convergence p{font-size:13.5px !important;line-height:1.7 !important;}

  /* ---------- Prevent tiny fixed-height / horizontal layouts ---------- */
  [style*="white-space:nowrap"],
  [style*="white-space: nowrap"]{white-space:normal !important;}
  .approach-shell,.strengths-shell{
    padding:20px !important;
    border-radius:22px !important;
  }
  .approach-intro,.strengths-intro{
    display:block !important;
    padding-bottom:18px !important;
  }
  .approach-intro strong,.strengths-intro strong{font-size:23px !important;line-height:1.45 !important;}
  .approach-intro span,.strengths-intro span{display:block !important;margin-top:10px !important;font-size:14px !important;line-height:1.7 !important;}
  .footer{background:#111214 !important;color:rgba(255,255,255,.75) !important;}
  .footer-inner{display:block !important;text-align:center !important;}
  .footer-inner > * + *{display:block !important;margin-top:8px !important;}
}

@media (max-width: 380px){
  .container{margin-inline:16px !important;}
  .page-nav-inner{margin-inline:16px !important;}
  .brand{font-size:14px !important;max-width:calc(100% - 108px) !important;}
  .header-cta{font-size:11px !important;padding-inline:10px !important;}
  #top h1,.hero h1,#page-title{font-size:30px !important;}
  .section-title,.detail-title{font-size:27px !important;}
}

/* =========================================================
   FINAL MOBILE POLISH — contrast, density and CTA clarity
   2026-09-02
   IMPORTANT: desktop/tablet (768px+) is untouched.
   ========================================================= */
@media (max-width: 767px){
  :root, html, body{
    color-scheme:only light !important;
  }

  /* ----- Mobile: prevent dark-mode rules from washing text out ----- */
  .home-page #story,
  .home-page #profile,
  .home-page #news,
  .home-page #contact-form{
    background:#fff !important;
    color:#111214 !important;
  }
  .home-page #news{background:#F7F3EA !important;}
  .home-page #contact-form{background:#FFF9EB !important;}

  .home-page #story .eyebrow,
  .home-page #profile .eyebrow,
  .home-page #news .eyebrow,
  .home-page #contact-form .eyebrow{
    color:#9A6500 !important;
  }
  .home-page #story .section-title,
  .home-page #story .story-core,
  .home-page #profile .section-title,
  .home-page #profile .profile-summary,
  .home-page #profile .profile-details summary,
  .home-page #news .section-title,
  .home-page #news .news-link,
  .home-page #contact-form .section-title,
  .home-page #contact-form label,
  .home-page #contact-form .privacy summary{
    color:#111214 !important;
  }
  .home-page #story .story-lead,
  .home-page #story .story-closing,
  .home-page #profile .profile-details .bio,
  .home-page #profile .profile-details .bio p,
  .home-page #news .section-lead,
  .home-page #news .news-desc,
  .home-page #news .news-empty,
  .home-page #contact-form .section-lead,
  .home-page #contact-form .privacy,
  .home-page #contact-form .privacy p{
    color:#50535A !important;
  }
  .home-page #story .story-lead strong,
  .home-page #story .story-services-link{
    color:#111214 !important;
  }
  .home-page #story .story-core mark,
  .home-page #story .story-services-link span{
    color:#A96D00 !important;
  }
  .home-page #profile .profile-points li{
    background:#fff !important;
    color:#111214 !important;
    border-color:rgba(17,18,20,.15) !important;
  }
  .home-page #news .news-date{color:#55585F !important;}
  .home-page #news .news-category{background:#FFF0BD !important;color:#7A4E00 !important;}

  /* ----- STORY: remove accidental full-screen gaps on phones ----- */
  .home-page #story.section{
    display:block !important;
    min-height:0 !important;
    padding:48px 0 52px !important;
  }
  .home-page #story > .container{
    display:block !important;
    min-height:0 !important;
    align-items:initial !important;
  }
  .home-page #story .story-simple{
    padding:0 !important;
    margin:0 !important;
  }
  .home-page #story .story-simple .section-title{
    margin-top:8px !important;
    font-size:29px !important;
    line-height:1.3 !important;
  }
  .home-page #story .story-lead{
    margin-top:20px !important;
    font-size:15px !important;
    line-height:1.85 !important;
  }
  .home-page #story .story-core{
    margin-top:22px !important;
    font-size:24px !important;
    line-height:1.5 !important;
  }
  .home-page #story .story-closing{
    margin-top:22px !important;
    padding-top:19px !important;
    font-size:15px !important;
    line-height:1.85 !important;
  }
  .home-page #story .story-services-link{
    margin-top:18px !important;
  }

  /* ----- WHY US: compact vertical two-column infographic ----- */
  .home-page #why-us.section{
    min-height:0 !important;
    padding:34px 0 36px !important;
    background:#FFF9EB !important;
    color:#111214 !important;
  }
  .home-page #why-us .why-experience-intro .eyebrow{
    color:#9A6500 !important;
  }
  .home-page #why-us .why-experience-intro .section-title{
    margin-top:5px !important;
    font-size:25px !important;
    line-height:1.25 !important;
    color:#111214 !important;
  }
  .home-page #why-us .why-experience-intro .section-lead{
    margin-top:8px !important;
    font-size:12.5px !important;
    line-height:1.55 !important;
    color:#55585F !important;
  }
  .home-page #why-us .why2-wrap{display:none !important;}
  .home-page #why-us .why2-mobile-compact{
    display:block !important;
    margin-top:15px !important;
  }
  .home-page #why-us .why2-mobile-headings{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr) !important;
    align-items:center !important;
    gap:5px !important;
    margin:0 0 7px !important;
  }
  .home-page #why-us .why2-mobile-headings > span{
    display:block !important;
    padding:5px 7px !important;
    border-radius:999px !important;
    background:#111214 !important;
    color:#fff !important;
    text-align:center !important;
    font-size:8px !important;
    line-height:1.2 !important;
    font-weight:900 !important;
  }
  .home-page #why-us .why2-mobile-headings > span:last-child{grid-column:3 !important;}
  .home-page #why-us .why2-mobile-headings i{display:block !important;grid-column:2 !important;}
  .home-page #why-us .why2-mobile-rows{
    display:grid !important;
    gap:7px !important;
  }
  .home-page #why-us .why2-mobile-rows::before{display:none !important;}
  .home-page #why-us .why2-mobile-row{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr) !important;
    align-items:stretch !important;
    gap:5px !important;
  }
  .home-page #why-us .why2-mobile-stage,
  .home-page #why-us .why2-mobile-perspective{
    min-width:0 !important;
    min-height:83px !important;
    padding:9px 9px 8px !important;
    border-radius:13px !important;
    color:#111214 !important;
    box-shadow:none !important;
  }
  .home-page #why-us .why2-mobile-stage{
    grid-column:1 !important;
    background:linear-gradient(135deg,#FFF0B8,#FFF9E9) !important;
    border:1px solid rgba(242,178,0,.45) !important;
  }
  .home-page #why-us .why2-mobile-impact-arrow{
    grid-column:2 !important;
    display:grid !important;
    place-items:center !important;
    height:auto !important;
    min-height:0 !important;
    font-size:0 !important;
    color:#D89000 !important;
  }
  .home-page #why-us .why2-mobile-impact-arrow::after{
    content:"←" !important;
    font-size:17px !important;
    line-height:1 !important;
    font-weight:950 !important;
    color:#D89000 !important;
  }
  .home-page #why-us .why2-mobile-perspective{
    grid-column:3 !important;
    background:#fff !important;
    border:1px solid rgba(17,18,20,.14) !important;
  }
  .home-page #why-us .why2-mobile-stage-head{
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
  }
  .home-page #why-us .why2-mobile-no{
    width:27px !important;height:27px !important;flex-basis:27px !important;
    display:grid !important;place-items:center !important;
    background:#F2B200 !important;color:#111214 !important;
    font-size:8px !important;font-weight:950 !important;
  }
  .home-page #why-us .why2-mobile-stage h3{
    font-size:15px !important;line-height:1.05 !important;color:#111214 !important;
  }
  .home-page #why-us .why2-mobile-sub{
    margin-top:2px !important;
    font-size:7px !important;line-height:1.25 !important;color:#875A00 !important;
  }
  .home-page #why-us .why2-mobile-stage-body{
    display:block !important;
    margin-top:5px !important;
  }
  .home-page #why-us .why2-mobile-stage-icon{display:none !important;}
  .home-page #why-us .why2-mobile-stage-body > p{
    margin:0 !important;
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    overflow:hidden !important;
    font-size:9px !important;
    line-height:1.4 !important;
    color:#55585F !important;
  }
  .home-page #why-us .why2-mobile-perspective-head{
    display:grid !important;
    grid-template-columns:26px 1fr !important;
    align-items:center !important;
    gap:6px !important;
  }
  .home-page #why-us .why2-mobile-perspective-icon{
    width:26px !important;height:26px !important;
    background:#FFF7DD !important;color:#A96D00 !important;
  }
  .home-page #why-us .why2-mobile-perspective-icon svg{width:15px !important;height:15px !important;}
  .home-page #why-us .why2-mobile-target{
    font-size:6.5px !important;line-height:1.2 !important;color:#875A00 !important;
  }
  .home-page #why-us .why2-mobile-perspective h3{
    margin-top:1px !important;
    font-size:13.5px !important;line-height:1.15 !important;color:#111214 !important;
  }
  .home-page #why-us .why2-mobile-perspective-copy{
    margin-top:5px !important;
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    overflow:hidden !important;
    font-size:8.7px !important;
    line-height:1.4 !important;
    color:#55585F !important;
  }
  .home-page #why-us .why2-mobile-convergence{
    display:grid !important;
    grid-template-columns:27px 1fr !important;
    gap:8px !important;
    margin-top:8px !important;
    padding:8px 10px !important;
    border:1px solid rgba(17,18,20,.13) !important;
    border-radius:12px !important;
    background:#fff !important;
  }
  .home-page #why-us .why2-mobile-check{
    width:27px !important;height:27px !important;font-size:13px !important;
    background:#F2B200 !important;color:#111214 !important;
  }
  .home-page #why-us .why2-mobile-convergence strong{
    font-size:10px !important;line-height:1.35 !important;color:#111214 !important;
  }
  .home-page #why-us .why2-mobile-convergence strong mark{color:#8A5900 !important;}
  .home-page #why-us .why2-mobile-convergence p{
    margin-top:2px !important;
    display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:1 !important;
    overflow:hidden !important;
    font-size:8px !important;line-height:1.3 !important;color:#55585F !important;
  }

  /* ----- PROFILE: expanded text must stay visible ----- */
  .home-page #profile .profile-details{
    border-top-color:rgba(17,18,20,.16) !important;
    border-bottom-color:rgba(17,18,20,.16) !important;
  }
  .home-page #profile .profile-details summary{
    color:#111214 !important;
    opacity:1 !important;
  }
  .home-page #profile .profile-details[open] .bio,
  .home-page #profile .profile-details[open] .bio p{
    color:#45484E !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  /* ----- YouTube: make the channel label clearly visible ----- */
  .home-page #youtube .youtube-kicker{
    margin-bottom:7px !important;
    font-size:18px !important;
    line-height:1.25 !important;
    letter-spacing:.04em !important;
    font-weight:950 !important;
    color:#FFD45A !important;
  }
  .home-page #youtube .youtube-title{
    margin-top:4px !important;
    color:#fff !important;
  }
  .home-page #youtube .youtube-description,
  .home-page #youtube .youtube-hashtags{color:rgba(255,255,255,.9) !important;}

  /* ----- NEWS list: never white-on-light ----- */
  .home-page #news .news-list,
  .home-page #news .news-item{color:#111214 !important;}
  .home-page #news .news-link{
    color:#111214 !important;
    opacity:1 !important;
  }
  .home-page #news .news-desc{
    color:#55585F !important;
    opacity:1 !important;
  }

  /* ----- News detail article ----- */
  .news-detail-page{
    background:#fff !important;
    color:#111214 !important;
  }
  .news-detail-page .news-detail-hero{
    background:#F2B200 !important;
    color:#111214 !important;
  }
  .news-detail-page .news-detail-date,
  .news-detail-page .news-detail-category,
  .news-detail-page .news-detail-title,
  .news-detail-page .news-detail-lead{
    color:#111214 !important;
    opacity:1 !important;
  }
  .news-detail-page .news-detail-category{
    background:rgba(255,255,255,.58) !important;
  }
  .news-detail-page .news-detail-body,
  .news-detail-page .news-detail-body p,
  .news-detail-page .news-detail-body h2,
  .news-detail-page .news-detail-body h3,
  .news-detail-page .news-detail-message,
  .news-detail-page .news-detail-message p,
  .news-detail-page .news-detail-back{
    color:#111214 !important;
    opacity:1 !important;
  }
  .news-detail-page .news-detail-message{
    background:#FFF7DD !important;
    border-color:rgba(242,178,0,.45) !important;
  }
  .news-detail-page .news-detail-home{
    background:#111214 !important;
    color:#fff !important;
    border-color:#111214 !important;
  }

  /* ----- Contact form: visible fields and strong submit CTA ----- */
  .home-page #contact-form .contact-form-wrap{
    margin-top:28px !important;
  }
  .home-page #contact-form .form-grid{
    gap:18px !important;
  }
  .home-page #contact-form .field label{
    margin-bottom:7px !important;
    color:#111214 !important;
  }
  .home-page #contact-form input,
  .home-page #contact-form textarea{
    display:block !important;
    width:100% !important;
    min-height:52px !important;
    padding:13px 14px !important;
    background:#fff !important;
    color:#111214 !important;
    border:2px solid #777B82 !important;
    border-radius:12px !important;
    box-shadow:0 1px 0 rgba(17,18,20,.04) !important;
    opacity:1 !important;
  }
  .home-page #contact-form textarea{min-height:150px !important;}
  .home-page #contact-form input::placeholder,
  .home-page #contact-form textarea::placeholder{color:#777B82 !important;}
  .home-page #contact-form input:focus,
  .home-page #contact-form textarea:focus{
    border-color:#A96D00 !important;
    box-shadow:0 0 0 3px rgba(242,178,0,.23) !important;
  }
  .home-page #contact-form .required{
    background:#FFF0BD !important;
    color:#7A4E00 !important;
  }
  .home-page #contact-form .optional{
    background:#ECEDEF !important;
    color:#50535A !important;
  }
  .home-page #contact-form .submit{
    min-height:56px !important;
    margin-top:22px !important;
    background:#F2B200 !important;
    color:#111214 !important;
    border:2px solid #111214 !important;
    box-shadow:0 7px 0 #111214 !important;
    font-size:17px !important;
    font-weight:950 !important;
    opacity:1 !important;
  }

  /* ----- All service-page buttons: unmistakable contrast ----- */
  .btn-dark,
  .btn-primary{
    background:#111214 !important;
    color:#fff !important;
    border:2px solid #111214 !important;
    box-shadow:none !important;
  }
  .btn-light,
  .btn-outline{
    background:#F2B200 !important;
    color:#111214 !important;
    border:2px solid #111214 !important;
    box-shadow:none !important;
  }
  .btn-dark span,.btn-primary span{color:#fff !important;}
  .btn-light span,.btn-outline span{color:#111214 !important;}
  .youtube-channel-btn{
    background:#F2B200 !important;
    color:#111214 !important;
    border:2px solid #111214 !important;
  }
  .related a,
  .related-grid a{
    background:#FFF3C7 !important;
    color:#111214 !important;
    border:1.5px solid #F2B200 !important;
  }

  /* ----- Common service-page text contrast ----- */
  body:not(.home-page):not(.news-detail-page) .section-title,
  body:not(.home-page):not(.news-detail-page) .overview-title,
  body:not(.home-page):not(.news-detail-page) .problem-card h3,
  body:not(.home-page):not(.news-detail-page) .use-card h3,
  body:not(.home-page):not(.news-detail-page) .scope-card h3,
  body:not(.home-page):not(.news-detail-page) .fit-card h3,
  body:not(.home-page):not(.news-detail-page) .strength-card h3,
  body:not(.home-page):not(.news-detail-page) .audience-card h3,
  body:not(.home-page):not(.news-detail-page) .format-card h3,
  body:not(.home-page):not(.news-detail-page) .approach-card h3,
  body:not(.home-page):not(.news-detail-page) summary{
    color:#111214 !important;
    opacity:1 !important;
  }
  body:not(.home-page):not(.news-detail-page) .section-lead,
  body:not(.home-page):not(.news-detail-page) .overview-lead,
  body:not(.home-page):not(.news-detail-page) .problem-card p,
  body:not(.home-page):not(.news-detail-page) .use-card p,
  body:not(.home-page):not(.news-detail-page) .scope-card p,
  body:not(.home-page):not(.news-detail-page) .fit-card p,
  body:not(.home-page):not(.news-detail-page) .strength-card p,
  body:not(.home-page):not(.news-detail-page) .audience-card p,
  body:not(.home-page):not(.news-detail-page) .format-card p,
  body:not(.home-page):not(.news-detail-page) .approach-card p,
  body:not(.home-page):not(.news-detail-page) details p{
    color:#55585F !important;
    opacity:1 !important;
  }

  /* ----- SNS tie-up page ----- */
  .sns-pr-page #assurance .assurance-lead{
    background:#fff !important;
    color:#111214 !important;
    border:1px solid rgba(17,18,20,.14) !important;
    border-left:5px solid #F2B200 !important;
    box-shadow:0 8px 24px rgba(17,18,20,.06) !important;
  }
  .sns-pr-page #assurance .assurance-lead strong{
    color:#111214 !important;
  }
  .sns-pr-page #assurance .assurance-lead p{
    color:#55585F !important;
  }
  .sns-pr-page #assurance .assurance-item{
    background:#fff !important;
    color:#111214 !important;
  }
  .sns-pr-page #assurance .assurance-item h3{color:#111214 !important;}
  .sns-pr-page #assurance .assurance-item p{color:#55585F !important;}
  .sns-pr-page #process{display:none !important;}
  .sns-pr-page .page-nav a[href="#process"]{display:none !important;}
  .sns-pr-page .hero-actions .btn-light,
  .sns-pr-page a[href="#works"].btn{
    background:#F2B200 !important;
    color:#111214 !important;
    border:2px solid #111214 !important;
  }
}


/* =========================================================
   Targeted smartphone fixes — 2026-09-02
   PC/tablet (>767px) remains unchanged.
   ========================================================= */

/* New compact WHY-US markup stays invisible outside smartphone width. */
.why-mobile-two-col{display:none;}

@media (max-width:767px){

  /* ----- MENU: force readable light drawer even when device is dark ----- */
  .menu-overlay{
    background:rgba(17,18,20,.50) !important;
  }
  .menu-drawer,
  .menu-drawer.is-open{
    background:#FFFFFF !important;
    color:#111214 !important;
    opacity:1 !important;
  }
  .menu-drawer-head{
    background:#FFFFFF !important;
    border-bottom-color:rgba(17,18,20,.16) !important;
  }
  .menu-drawer-title,
  .menu-links,
  .menu-links a,
  .menu-links a:visited,
  .menu-links a:hover,
  .menu-links a:focus,
  .menu-social-icons,
  .menu-social-icons a,
  .menu-social-icons a:visited{
    color:#111214 !important;
    opacity:1 !important;
    -webkit-text-fill-color:#111214 !important;
  }
  .menu-links a{
    background:#FFFFFF !important;
    border-bottom-color:rgba(17,18,20,.14) !important;
  }
  .menu-links a::after{
    color:#765000 !important;
    opacity:1 !important;
  }
  .menu-close{
    background:#FFFFFF !important;
    color:#111214 !important;
    border:2px solid #111214 !important;
    -webkit-text-fill-color:#111214 !important;
  }

  /* ----- PRODUCT DEVELOPMENT: compact 2-column WHY-US ----- */
  .product-development-page #why-us.section{
    min-height:0 !important;
    padding:28px 0 30px !important;
    background:#FFF9EB !important;
    color:#111214 !important;
  }
  .product-development-page #why-us .why-experience-intro{
    margin:0 !important;
  }
  .product-development-page #why-us .why-experience-intro .eyebrow{
    font-size:9px !important;
    line-height:1.3 !important;
  }
  .product-development-page #why-us .why-experience-intro .section-title{
    margin-top:4px !important;
    font-size:22px !important;
    line-height:1.2 !important;
    color:#111214 !important;
  }
  .product-development-page #why-us .why-experience-intro .section-lead{
    margin-top:6px !important;
    font-size:11.5px !important;
    line-height:1.5 !important;
    color:#55585f !important;
  }

  /* hide desktop diagram only on smartphone */
  .product-development-page #why-us .why2-wrap{
    display:none !important;
  }

  .product-development-page #why-us .why-mobile-two-col{
    display:grid !important;
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr) !important;
    gap:6px 7px !important;
    margin-top:14px !important;
    align-items:stretch !important;
  }
  .product-development-page #why-us .why-mobile-col-head{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:27px !important;
    padding:4px 5px !important;
    border-radius:999px !important;
    background:#111214 !important;
    color:#FFFFFF !important;
    font-size:9.5px !important;
    line-height:1.15 !important;
    font-weight:900 !important;
    text-align:center !important;
    -webkit-text-fill-color:#FFFFFF !important;
  }
  .product-development-page #why-us .why-mobile-flow-card,
  .product-development-page #why-us .why-mobile-view-card{
    min-height:62px !important;
    border-radius:12px !important;
    padding:8px !important;
  }
  .product-development-page #why-us .why-mobile-flow-card{
    position:relative !important;
    display:grid !important;
    grid-template-columns:27px 1fr !important;
    gap:7px !important;
    align-items:center !important;
    background:linear-gradient(135deg,#FFF1BE,#FFFDF7) !important;
    border:1px solid rgba(242,178,0,.38) !important;
  }
  .product-development-page #why-us .why-mobile-flow-card:not(:nth-last-child(-n+2))::after{
    content:"" !important;
    position:absolute !important;
    left:20px !important;
    bottom:-7px !important;
    width:2px !important;
    height:7px !important;
    background:#F2B200 !important;
  }
  .product-development-page #why-us .why-mobile-no{
    display:grid !important;
    place-items:center !important;
    width:27px !important;
    height:27px !important;
    border-radius:50% !important;
    background:#F2B200 !important;
    color:#111214 !important;
    font-size:9px !important;
    font-weight:950 !important;
  }
  .product-development-page #why-us .why-mobile-flow-card strong,
  .product-development-page #why-us .why-mobile-view-card strong{
    display:block !important;
    color:#111214 !important;
    -webkit-text-fill-color:#111214 !important;
    opacity:1 !important;
  }
  .product-development-page #why-us .why-mobile-flow-card strong{
    font-size:14px !important;
    line-height:1.15 !important;
  }
  .product-development-page #why-us .why-mobile-flow-card span:not(.why-mobile-no){
    display:block !important;
    margin-top:3px !important;
    color:#805700 !important;
    font-size:8.5px !important;
    line-height:1.25 !important;
    font-weight:800 !important;
  }
  .product-development-page #why-us .why-mobile-view-card{
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    background:#FFFFFF !important;
    border:1px solid rgba(17,18,20,.13) !important;
  }
  .product-development-page #why-us .why-mobile-view-card strong{
    font-size:12px !important;
    line-height:1.2 !important;
  }
  .product-development-page #why-us .why-mobile-view-card span{
    display:block !important;
    margin-top:4px !important;
    color:#55585f !important;
    font-size:8.5px !important;
    line-height:1.3 !important;
  }

  /* ----- Hide long process sections on smartphone only ----- */
  .accessible-video-page #scope{
    display:none !important;
  }
  .accessible-video-page .page-nav a[href="#scope"]{
    display:none !important;
  }
  .media-supervision-page #approach{
    display:none !important;
  }
  .media-supervision-page .page-nav a[href="#approach"]{
    display:none !important;
  }
}

/* Dark-mode safeguard: mobile navigation always remains readable. */
@media (max-width:767px) and (prefers-color-scheme:dark){
  .menu-drawer,
  .menu-drawer.is-open,
  .menu-drawer-head,
  .menu-links,
  .menu-links a{
    background:#FFFFFF !important;
    color:#111214 !important;
    -webkit-text-fill-color:#111214 !important;
  }
  .menu-drawer-title,
  .menu-close,
  .menu-links a::after{
    color:#111214 !important;
    -webkit-text-fill-color:#111214 !important;
  }
}