@charset "utf-8";

/* =========================================================
   Smartphone-first responsive enhancements
   PC styles remain unchanged. Applied at 768px and below.
========================================================= */

@media screen and (max-width: 768px) {
  html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
  }

  body {
    overflow-x: hidden;
    line-height: 1.75;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  /* Header */
  #header-top {
    display: none;
  }

  .header-inner,
  .home .header-inner,
  .oneday-page .header-inner {
    min-height: 72px;
    padding: 8px 58px 8px 14px;
  }

  #logo,
  .home #logo {
    width: min(210px, 58vw);
    margin: 0;
  }

  #logo img {
    width: 100%;
    height: auto;
  }

  #menubar_hdr {
    position: fixed;
    top: 14px;
    right: 14px;
    width: 46px;
    height: 46px;
    z-index: 100001;
    border-radius: 10px;
  }

  #menubar {
    font-size: 1rem;
  }

  #menubar ul {
    padding: 76px 18px 24px;
  }

  #menubar li a {
    padding: 14px 8px;
    line-height: 1.45;
  }

  /* Main layout */
  #container,
  #contents,
  #contents.bg1,
  #contents.bg2 {
    width: 100%;
    max-width: none;
    margin: 0;
  }

  #contents main,
  main {
    width: 100%;
    max-width: none;
    padding-left: 14px;
    padding-right: 14px;
  }

  main > section,
  #contents main > section {
    margin-top: 34px;
    margin-bottom: 34px;
  }

  .pagehead {
    padding: 30px 10px 20px;
    text-align: center;
  }

  .pagehead h2,
  .firsttitle,
  #contents h2 {
    font-size: clamp(1.65rem, 8vw, 2.15rem);
    line-height: 1.35;
  }

  .pagehead__en,
  #contents h2 .small {
    font-size: .78rem;
    letter-spacing: .18em;
  }

  .pagehead__lead,
  .lead {
    font-size: 1rem;
    line-height: 1.8;
    text-align: left;
  }

  h3 {
    font-size: clamp(1.3rem, 6vw, 1.7rem);
    line-height: 1.45;
  }

  h4 {
    font-size: 1.2rem;
    line-height: 1.45;
  }

  p,
  li,
  dt,
  dd {
    font-size: 1rem;
  }

  /* Cards and grids */
  .flow-grid,
  .list-grid1,
  .oneday-grid,
  .teacher-grid,
  .column2,
  .column3 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .flow-item,
  .list-grid1 .list,
  .oneday-card,
  .teacher-card {
    width: 100%;
    margin: 0;
    padding: 18px;
    border-radius: 18px;
  }

  .flow-item .icon img {
    max-height: 190px;
    object-fit: contain;
  }

  .list-grid1 .list figure {
    margin: -18px -18px 14px;
  }

  .list-grid1 .list figure img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  /* Profile / image + text sections */
  .list-normal .list,
  .list-normal .list.reverse,
  .salon-intro__inner,
  .teacher-hero__inner,
  .greeting .teacher-hero__inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
  }

  .list-normal .image,
  .list-normal .list.reverse .image,
  .list-normal .text,
  .list-normal .list.reverse .text,
  .teacher-hero__photo,
  .teacher-hero__body,
  .salon-intro__media,
  .salon-intro__text {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
  }

  .list-normal .image img,
  .teacher-hero__photo img,
  .salon-intro__media img {
    width: 100%;
    max-height: 460px;
    object-fit: cover;
    object-position: center top;
    border-radius: 16px;
  }

  .list-normal .text {
    padding: 0 2px;
  }

  .teacher-hero__list.two-col,
  .two-col {
    columns: 1 !important;
  }

  /* Teacher thumbnail slider: larger tap targets */
  .teacher-thumb-section {
    padding: 0 4px;
  }

  .teacher-thumb-slider .img > div {
    padding: 4px;
  }

  .teacher-thumb-slider img,
  .thumbnail-slide img {
    border-radius: 14px;
  }

  /* Buttons and CTAs */
  .btn,
  p.btn,
  .cta .btn,
  .btn-consult-teacher,
  .line-cta__link {
    width: 100%;
    max-width: none;
  }

  .btn a,
  p.btn a,
  .cta .btn a,
  .btn-consult-teacher,
  .line-cta__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    padding: 13px 16px;
    border-radius: 999px;
    font-size: 1rem;
    line-height: 1.35;
    text-align: center;
  }

  /* Forms */
  form,
  .form-area,
  .formmailer-embed {
    width: 100%;
  }

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  select,
  textarea {
    width: 100% !important;
    max-width: 100%;
    min-height: 48px;
    padding: 11px 12px;
    font-size: 16px;
    border-radius: 10px;
  }

  textarea {
    min-height: 140px;
  }

  input[type="radio"],
  input[type="checkbox"] {
    width: 20px;
    height: 20px;
  }

  /* Tables / data lists */
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .oneday-info {
    grid-template-columns: 1fr !important;
  }

  .oneday-info dt {
    padding-bottom: 2px;
    border-bottom: 0 !important;
  }

  .oneday-info dd {
    padding-top: 0;
  }

  /* Footer */
  #footer-contents {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 34px 18px;
  }

  #footer-contents .left,
  #footer-contents .right {
    width: 100%;
  }

  .iframe-box {
    aspect-ratio: 4 / 3;
  }

  .iframe-box iframe {
    width: 100%;
    height: 100%;
  }

  #footermenu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 16px;
    padding: 28px 18px;
  }

  #footermenu ul {
    width: 100%;
    margin: 0;
  }

  #footermenu li {
    line-height: 1.65;
  }

  footer {
    padding: 18px 14px 110px;
    text-align: center;
  }

  /* Fixed menus: keep visible but reduce obstruction */
  .fixed-line-menu,
  .fixed-event-menu {
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    transform: none !important;
  }

  .fixed-line-menu {
    bottom: 10px !important;
  }

  .fixed-event-menu {
    bottom: 78px !important;
  }

  .fixed-line-menu__inner,
  .fixed-event-menu__inner {
    min-height: 58px;
    padding: 9px 12px;
    border-radius: 14px;
  }

  .fixed-line-menu__txt,
  .fixed-event-menu__txt {
    font-size: .78rem;
    line-height: 1.3;
  }

  .fixed-respa-menu {
    right: 8px !important;
    bottom: 146px !important;
    top: auto !important;
    width: 48px !important;
  }

  /* Prevent decorative items from crowding narrow screens */
  .animation-text,
  main::before,
  main::after {
    display: none !important;
  }
}

@media screen and (max-width: 390px) {
  #footermenu {
    grid-template-columns: 1fr;
  }

  .slide0-mobile__title .text {
    font-size: 2rem;
  }

  .slide0-mobile__card h3 {
    font-size: 1.2rem;
  }
}


/* =========================================================
   Additional mobile-first refinements for 90% smartphone use
========================================================= */
@media screen and (max-width: 768px) {
  body {
    padding-bottom: 76px;
    background-attachment: scroll !important;
  }

  /* Keep readable line length */
  #contents main,
  main,
  .inner,
  .panel,
  .pagehead,
  .feature-flow .inner {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Navigation: larger touch targets and simpler hierarchy */
  #menubar nav > ul > li > a {
    font-size: 1.05rem;
    font-weight: 700;
  }

  #menubar li ul a {
    font-size: .95rem;
    padding-left: 20px;
  }

  /* Common multi-column layouts */
  .line-hero__grid,
  .access-grid,
  .greeting-wrap,
  .partner-grid,
  .feature3,
  .steps,
  .stepFlow,
  .corp-menu,
  .corp-list,
  .tp-flow,
  .cta__inner,
  .cta__buttons {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* School flow cards */
  .tp-node {
    grid-template-columns: 48px 1fr !important;
    gap: 12px !important;
    min-height: 0;
    padding: 16px;
  }

  .tp-node__illust {
    grid-column: 1 / -1;
    width: 100% !important;
    max-height: 170px;
    object-fit: contain;
  }

  .tp-arrow {
    width: 2px !important;
    height: 28px !important;
    margin: 0 auto !important;
  }

  .tp-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .tp-btn {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
  }

  /* One-day detail: SP-specific image and single-column information */
  .oneday-fv,
  .oneday-pagehead {
    margin-left: -14px !important;
    margin-right: -14px !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  .oneday-fv picture,
  .oneday-fv__link,
  .oneday-fv__banner {
    display: block;
    width: 100%;
  }

  .oneday-fv__banner {
    height: auto !important;
    object-fit: contain !important;
  }

  .oneday-summary,
  .oneday-card,
  .oneday-related,
  .oneday-apply-cta {
    padding: 18px !important;
    border-radius: 18px !important;
  }

  .oneday-card h3 {
    white-space: normal !important;
    font-size: clamp(1.35rem, 6.8vw, 1.75rem) !important;
  }

  .oneday-points-media {
    grid-template-columns: 1fr !important;
  }

  .oneday-card__head-photo--certificate {
    max-width: 280px !important;
    margin: 0 auto !important;
  }

  .oneday-teacher-mini {
    display: grid !important;
    grid-template-columns: 78px 1fr !important;
    gap: 12px !important;
    align-items: center;
    padding: 14px !important;
  }

  .oneday-teacher-mini img {
    width: 78px !important;
    height: 78px !important;
    object-fit: cover;
  }

  /* LINE page: on phones, prioritize the add button; QR is desktop-only */
  .line-hero__qr {
    display: none !important;
  }

  .line-hero,
  .line-stepsWrap,
  .line-faq,
  .panel {
    padding: 18px !important;
    border-radius: 18px !important;
  }

  .line-hero__title {
    font-size: clamp(1.55rem, 7vw, 2rem) !important;
  }

  .line-btn {
    width: 100% !important;
    min-height: 54px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .stepFlow__item,
  .steps__item,
  .feature3__item,
  .partner-card,
  .corp-card {
    width: 100% !important;
    padding: 16px !important;
    border-radius: 16px !important;
  }

  /* Teacher list: image first, readable text, no huge portrait */
  .teacher-thumb-lead {
    text-align: center;
    font-size: .92rem;
  }

  .list-normal .list {
    padding: 0 0 28px !important;
    margin-bottom: 34px !important;
  }

  .list-normal .image img,
  .list-normal .list.teacher-sawawaki .image img {
    max-height: 390px !important;
    object-fit: contain !important;
    background: #fff;
  }

  .list-normal .text h4,
  .list-normal .text h5 {
    text-align: center;
  }

  /* FAQ and long text blocks */
  .faq,
  .faq__body,
  .info-table,
  .panel p,
  .panel li {
    line-height: 1.8;
  }

  details summary,
  .faq summary {
    min-height: 50px;
    display: flex;
    align-items: center;
    padding: 12px 14px;
  }

  /* Image treatment: show more useful area on phones */
  .list-grid1 .list figure img,
  .partner-card img,
  .corp-card__img img,
  .feature3__item img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
  }

  /* Bottom fixed dock: LINE + event side by side, not stacked */
  .fixed-line-menu,
  .fixed-event-menu {
    top: auto !important;
    bottom: 8px !important;
    width: calc(50% - 13px) !important;
    max-width: none !important;
    z-index: 100000 !important;
  }

  .fixed-line-menu {
    left: 8px !important;
    right: auto !important;
  }

  .fixed-event-menu {
    left: auto !important;
    right: 8px !important;
  }

  .fixed-line-menu__inner,
  .fixed-event-menu__inner {
    min-height: 58px !important;
    padding: 8px 10px !important;
    gap: 8px !important;
  }

  .fixed-line-menu__icon,
  .fixed-event-menu__icon {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
  }

  .fixed-line-menu__txt,
  .fixed-event-menu__txt {
    font-size: .68rem !important;
    line-height: 1.25 !important;
  }

  .fixed-respa-menu {
    bottom: 76px !important;
    right: 8px !important;
    width: 42px !important;
  }

  .pagetop {
    bottom: 82px !important;
    left: 8px !important;
    right: auto !important;
  }
}

@media screen and (max-width: 430px) {
  #contents main,
  main {
    padding-left: 12px;
    padding-right: 12px;
  }

  .pagehead h2,
  .firsttitle,
  #contents h2 {
    font-size: clamp(1.45rem, 7.2vw, 1.9rem);
  }

  .tp-actions {
    grid-template-columns: 1fr !important;
  }

  .fixed-line-menu__txt,
  .fixed-event-menu__txt {
    font-size: .62rem !important;
  }
}