/* ========================================================================== 
   ATERIA SITE - RESPONSIVE OVERRIDES
   --------------------------------------------------------------------------
   このファイルだけで「タブレット / スマホ」の最終調整を追いやすくしています。
   common.css のPCデザインを壊さないよう、こちらを後読みしてください。

   ブレイクポイント
   - Tablet : 768px ～ 1024px
   - Mobile : ～ 767px
   ========================================================================== */

/* --------------------------------------------------------------------------
   00. 共通のはみ出し対策
   -------------------------------------------------------------------------- */
html,
body {
  max-width: 100%;
}

body {
  overflow-x: clip;
}

img,
svg {
  max-width: 100%;
}

/* ========================================================================== 
   01. TABLET  (768px - 1024px)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {

  /* ----- 共通：余白・文字 ----- */
  .section {
    padding-block: 58px;
  }

  .section-title {
    font-size: 32px;
    margin-bottom: 28px;
  }

  /* ----- 共通：ヘッダー ----- */
  .header-inner {
    gap: 16px;
  }

  .brand {
    min-width: 190px;
  }

  .header-cta {
    min-height: 46px;
    padding-inline: 18px;
    font-size: 14px;
  }

  /* ----- 共通：下層ヒーロー ----- */
  .page-hero-grid {
    grid-template-columns: .9fr 1.1fr;
    gap: 28px;
  }

  .page-hero-copy {
    padding-block: 30px 52px;
  }

  .page-hero h1 {
    font-size: 42px;
  }

  .page-hero-media img {
    border-radius: 0 0 0 80px;
  }

  /* ----- 共通CTA ----- */
  .common-cta {
    width: min(calc(100% - 40px), 900px);
  }

  .common-cta-inner {
    min-height: 220px;
    padding: 26px 220px 26px 28px;
    grid-template-columns: 1fr;
  }

  .common-cta h2 {
    font-size: 27px;
    line-height: 1.45;
  }

  .common-cta p {
    font-size: 14px;
  }

  .common-cta .btn {
    min-height: 46px;
    padding-inline: 16px;
    font-size: 13px;
  }

  .cta-person {
    width: 210px;
  }

  /* ----- 共通フッター ----- */
  .footer-grid {
    gap: 28px;
  }

  /* ------------------------------------------------------------------------
     TOP
     ------------------------------------------------------------------------ */
  body[data-page="index"] .top-hero-grid {
    grid-template-columns: .88fr 1.12fr;
  }

  body[data-page="index"] .top-hero h1 {
    font-size: 40px;
  }

  body[data-page="index"] .top-hero-media img {
    height: 390px;
  }

  body[data-page="index"] .work-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  body[data-page="index"] .flow-mini {
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
  }

  body[data-page="index"] .flow-mini .card img {
    width: 92px;
    height: 92px;
  }

  body[data-page="index"] .flow-mini .card:not(:last-child)::after {
    right: -8px;
  }

  body[data-page="index"] .news-preview {
    grid-template-columns: 1fr;
  }

  body[data-page="index"] .news-preview > .card,
  body[data-page="index"] .news-preview > #commonCta {
    min-height: 0;
  }

  body[data-page="index"] .news-preview #commonCta .common-cta {
    width: 100%;
  }

  /* ------------------------------------------------------------------------
     アテリアについて
     ------------------------------------------------------------------------ */
  body[data-page="about"] .page-hero-grid {
    grid-template-columns: .9fr 1.1fr;
  }

  body[data-page="about"] .page-hero h1 {
    font-size: 40px;
  }

  .about-thoughts-grid {
    grid-template-columns: .9fr 1.1fr;
    gap: 30px;
  }

  .about-collage {
    min-height: 340px;
  }

  .about-overview-grid {
    grid-template-columns: 1fr;
  }

  .about-overview .about-access {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 18px;
    align-items: end;
  }

  .about-overview .about-access .photo-rounded {
    height: 230px;
  }

  /* ------------------------------------------------------------------------
     できること
     ------------------------------------------------------------------------ */
  body[data-page="service"] .container {
    width: min(calc(100% - 40px), 900px);
  }

  body[data-page="service"] .page-hero-grid {
    grid-template-columns: .9fr 1.1fr;
    gap: 28px;
    min-height: 430px;
  }

  body[data-page="service"] .page-hero h1 {
    font-size: 46px;
  }

  body[data-page="service"] .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  body[data-page="service"] .service-card:last-child {
    grid-column: 1 / -1;
    max-width: 50%;
    justify-self: center;
  }

  body[data-page="service"] .support-band {
    grid-template-columns: 1fr;
  }

  body[data-page="service"] .day-flow {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 18px;
  }

  body[data-page="service"] .day-item::after {
    display: none;
  }

  /* ------------------------------------------------------------------------
     ご利用までの流れ
     ------------------------------------------------------------------------ */
  body[data-page="flow"] .container {
    width: min(calc(100% - 40px), 900px);
  }

  .flow-steps-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .flow-support-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ------------------------------------------------------------------------
     お知らせ
     768pxで横スクロールしていたため、本文とサイドバーを縦配置に変更。
     ------------------------------------------------------------------------ */
  body[data-page="news"] .container {
    width: min(calc(100% - 40px), 900px);
  }

  body[data-page="news"] .page-hero-grid {
    grid-template-columns: .9fr 1.1fr;
    gap: 30px;
  }

  body[data-page="news"] .page-hero-copy {
    padding-left: 0;
  }

  body[data-page="news"] .page-hero h1 {
    font-size: 46px;
  }

  body[data-page="news"] .news-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-page="news"] .news-feature {
    grid-template-columns: 280px minmax(0, 1fr);
  }

  body[data-page="news"] .news-item {
    grid-template-columns: 130px 80px minmax(0, 1fr) 20px;
  }

  body[data-page="news"] .news-item img {
    width: 130px;
  }

  body[data-page="news"] .news-layout > aside {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  body[data-page="news"] .sidebar-box {
    margin-bottom: 0;
  }

  /* ------------------------------------------------------------------------
     お問い合わせ
     768pxでフォームとアクセス欄が横にはみ出していたため縦配置に変更。
     ------------------------------------------------------------------------ */
  body[data-page="contact"] .container {
    width: min(calc(100% - 40px), 900px);
  }

  .contact-hero-grid {
    grid-template-columns: .9fr 1.1fr;
    gap: 28px;
  }

  .contact-hero-copy {
    padding-left: 0;
  }

  .contact-hero-copy h1 {
    font-size: 44px;
  }

  .contact-method-wrap {
    width: min(calc(100% - 40px), 900px);
  }

  body[data-page="contact"] .contact-methods {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="contact"] .contact-method {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    padding: 28px 22px;
  }

  .contact-method-icon {
    transform: scale(.82);
    transform-origin: left top;
  }

  .contact-phone {
    font-size: 24px;
  }

  .contact-mail {
    font-size: 14px;
    overflow-wrap: anywhere;
  }

  .contact-method-copy p {
    margin-left: 0;
  }

  body[data-page="contact"] .contact-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-page="contact"] .access-card {
    max-width: 620px;
    width: 100%;
    justify-self: center;
  }

  body[data-page="contact"] .form-row {
    grid-template-columns: 190px minmax(0, 1fr);
  }

  .check-group {
    grid-template-columns: repeat(2, minmax(0, max-content));
    gap: 10px 20px;
  }
}

/* ========================================================================== 
   02. MOBILE  (0px - 767px)
   ========================================================================== */
@media (max-width: 767px) {

  /* ----- 共通：余白・文字 ----- */
  .section {
    padding-block: 44px;
  }

  .section-title {
    font-size: 27px;
    margin-bottom: 24px;
  }

  .lead {
    font-size: 16px;
  }

  /* ----- 共通：ヘッダー ----- */
  .header-inner {
    height: 68px;
    gap: 10px;
  }

  .brand {
    min-width: 0;
    flex: 1;
  }

  .brand img {
    width: 48px;
    height: 48px;
  }

  .brand-copy strong {
    font-size: 17px;
  }

  .menu-toggle {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
  }

  /* ----- 共通：ボタン ----- */
  .btn {
    min-height: 48px;
    padding-inline: 18px;
  }

  /* ----- 共通：CTA ----- */
  .common-cta {
    width: calc(100% - 32px);
    margin-block: 18px 34px;
  }

  .common-cta-inner {
    padding: 24px 20px 165px;
    min-height: 0;
  }

  .common-cta h2 {
    font-size: 23px;
  }

  .common-cta p {
    font-size: 13px;
  }

  .cta-person {
    width: 165px;
    height: 155px;
  }

  .cta-buttons {
    gap: 10px;
  }

  /* ----- 共通：フッター ----- */
  .footer-grid {
    padding-block: 30px 24px;
    gap: 22px;
  }

  .footer-links {
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
  }

  /* ------------------------------------------------------------------------
     TOP
     ------------------------------------------------------------------------ */
  body[data-page="index"] .top-hero-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    min-height: 0;
    padding-block: 10px 28px;
  }

  body[data-page="index"] .top-hero-media {
    order: -1;
    padding-top: 0;
  }

  body[data-page="index"] .top-hero-media img {
    height: 235px;
    border-radius: 0 0 48px 48px;
  }

  body[data-page="index"] .top-hero h1 {
    font-size: 34px;
  }

  body[data-page="index"] .recruit-box {
    margin-top: 0;
  }

  body[data-page="index"] .work-grid,
  body[data-page="index"] .flow-mini,
  body[data-page="index"] .news-preview {
    grid-template-columns: 1fr;
  }

  /* ------------------------------------------------------------------------
     アテリアについて
     ------------------------------------------------------------------------ */
  body[data-page="about"] .page-hero h1 {
    font-size: 34px;
  }

  .about-copy {
    padding-left: 0;
  }

  .about-collage {
    min-height: 315px;
  }

  .about-overview .about-access {
    display: block;
  }

  .eligibility-card {
    padding: 22px 110px 22px 20px;
  }

  /* ------------------------------------------------------------------------
     できること
     ------------------------------------------------------------------------ */
  body[data-page="service"] .container {
    width: calc(100% - 32px);
  }

  body[data-page="service"] .service-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="service"] .service-card:last-child {
    grid-column: auto;
    max-width: none;
  }

  body[data-page="service"] .support-band {
    grid-template-columns: 1fr;
    padding: 22px 18px;
  }

  body[data-page="service"] .day-flow {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  body[data-page="service"] .day-item::after {
    display: none;
  }

  /* ------------------------------------------------------------------------
     ご利用までの流れ
     ------------------------------------------------------------------------ */
  .flow-steps-grid,
  .flow-support-grid {
    grid-template-columns: 1fr;
  }

  .flow-step img {
    height: 180px;
  }

  /* ------------------------------------------------------------------------
     お知らせ
     ------------------------------------------------------------------------ */
  body[data-page="news"] .news-layout,
  body[data-page="news"] .news-feature {
    grid-template-columns: 1fr;
  }

  body[data-page="news"] .news-feature img {
    height: 200px;
  }

  body[data-page="news"] .news-item {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  body[data-page="news"] .news-item img {
    width: 88px;
    height: 58px;
  }

  body[data-page="news"] .news-layout > aside {
    display: grid;
    grid-template-columns: 1fr;
  }

  /* ------------------------------------------------------------------------
     お問い合わせ
     ------------------------------------------------------------------------ */
  body[data-page="contact"] .contact-methods,
  body[data-page="contact"] .contact-layout {
    grid-template-columns: 1fr;
  }

  body[data-page="contact"] .contact-method {
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 22px 18px;
  }

  body[data-page="contact"] .contact-method + .contact-method {
    border-left: 0;
    border-top: 1px solid #e6e0d8;
  }

  body[data-page="contact"] .form-card,
  body[data-page="contact"] .access-card {
    padding: 20px 16px;
  }

  body[data-page="contact"] .form-row {
    grid-template-columns: 1fr;
  }

  .check-group {
    grid-template-columns: 1fr 1fr;
    padding: 12px;
  }

  .contact-submit {
    min-width: 100%;
  }

  .map-link {
    height: 220px;
  }
}


/* ==========================================================================
   99. FOOTER FINAL GUARANTEE / フッター幅 最終保証
   --------------------------------------------------------------------------
   ページ固有レスポンシブ設定より後に読み、全ページの幅を必ず統一する。
   ========================================================================== */
.site-footer .footer-inner.footer-grid{
  width:min(var(--max),calc(100% - 48px));
  margin-inline:auto;
}
@media (max-width:1100px){
  .site-footer .footer-inner.footer-grid{width:min(calc(100% - 40px),900px)}
}
@media (max-width:767px){
  .site-footer .footer-inner.footer-grid{width:calc(100% - 32px)}
}

/* ==========================================================================
   100. TOP MOBILE OVERFLOW FIX / TOPスマホ横はみ出し修正
   --------------------------------------------------------------------------
   お知らせカードのmin-content幅が親グリッドを押し広げないようにする。
   ========================================================================== */
@media (max-width:767px){
  body[data-page="index"] .news-preview{
    grid-template-columns:minmax(0,1fr);
    min-width:0;
  }
  body[data-page="index"] .news-preview > *{
    min-width:0;
    max-width:100%;
  }
  body[data-page="index"] .news-row{
    grid-template-columns:90px minmax(0,1fr);
    min-width:0;
  }
  body[data-page="index"] .news-row span{
    min-width:0;
    overflow-wrap:anywhere;
  }
}

/* ==========================================================================
   101. CTA MOBILE TITLE / CTAスマホ見出し
   --------------------------------------------------------------------------
   「ご相談」の途中で改行・欠けが起きないよう、意味のまとまりで2行化する。
   ========================================================================== */
@media (max-width:767px){
  .common-cta h2 .orange,
  .common-cta h2 .cta-title-rest{
    display:block;
    white-space:nowrap;
  }
  .common-cta p{
    overflow-wrap:anywhere;
  }
}


/* ==========================================================================
   08. PUBLICATION FINISH / 公開前仕上げ（レスポンシブ）
   ========================================================================== */
@media (max-width:767px){
  .privacy-card{padding:26px 20px}
  .privacy-card h2{font-size:18px}
  .privacy-contact>div{grid-template-columns:1fr}
  .privacy-contact dt{padding-bottom:4px}
  .privacy-contact dd{padding-top:4px;overflow-wrap:anywhere}
  .news-detail-heading h1{font-size:30px}
  .news-detail-image{height:220px}
  .news-detail-body{padding:26px 20px}
  .news-detail-period{font-size:16px}
  .map-open-label{right:8px;bottom:8px}
}


/* ========================================================================== 
   15. ABOUT MOBILE REFINEMENT v4 / アテリアについて スマホ最終調整
   --------------------------------------------------------------------------
   対象: ～767px の「アテリアについて」ページのみ。
   PC / Tablet には影響させない。

   01. ヒーローを1列化（タイトル・説明 → 写真）
   02. 「アテリアが大切にしていること」の不自然な改行を防止
   03. 4カードの高さ・余白をスマホ向けに圧縮
   04. 「アテリアの想い」本文の可読性を改善
   05. 「ご利用いただける方」の人物・本文の余白を整理
   ========================================================================== */
@media (max-width: 767px) {

  /* ------------------------------------------------------------------------
     01. PAGE HERO / ヒーロー
     ------------------------------------------------------------------------ */
  body[data-page="about"] .page-hero-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    min-height: 0;
    padding-bottom: 28px;
  }

  body[data-page="about"] .page-hero-copy {
    order: 1;
    padding: 24px 0 8px;
  }

  body[data-page="about"] .page-hero h1 {
    font-size: 32px;
    line-height: 1.3;
    white-space: nowrap;
    margin-bottom: 12px;
  }

  body[data-page="about"] .page-hero .lead {
    font-size: 15px;
    line-height: 1.75;
    margin-bottom: 10px;
  }

  body[data-page="about"] .page-hero-copy > p:last-child {
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 0;
  }

  body[data-page="about"] .page-hero-media {
    order: 2;
    min-height: 0;
    height: auto;
    align-self: auto;
  }

  body[data-page="about"] .page-hero-media img {
    display: block;
    width: 100%;
    height: 230px;
    object-fit: cover;
    object-position: center;
    border-radius: 0 0 48px 48px;
  }

  /* ------------------------------------------------------------------------
     02. SECTION TITLE / 大切にしていること
     ------------------------------------------------------------------------ */
  body[data-page="about"] .about-values .section-title {
    font-size: clamp(21px, 6vw, 24px);
    line-height: 1.45;
    letter-spacing: .035em;
    white-space: nowrap;
    margin-bottom: 22px;
  }

  /* ------------------------------------------------------------------------
     03. VALUE CARDS / 4つのカードをコンパクト化
     ------------------------------------------------------------------------ */
  body[data-page="about"] .about-feature-grid {
    gap: 12px;
  }

  body[data-page="about"] .about-feature-grid .feature-card {
    min-height: 0;
    padding: 20px 18px 18px;
  }

  body[data-page="about"] .about-feature-grid .feature-icon {
    width: 66px;
    height: 66px;
    font-size: 38px;
    margin-bottom: 10px;
  }

  body[data-page="about"] .about-feature-grid h3 {
    font-size: 16px;
    line-height: 1.55;
    margin-bottom: 7px;
  }

  body[data-page="about"] .about-feature-grid p {
    font-size: 13.5px;
    line-height: 1.75;
    margin: 0;
  }

  body[data-page="about"] .about-feature-grid p br {
    display: none;
  }

  /* ------------------------------------------------------------------------
     04. THOUGHTS COPY / アテリアの想い本文
     ------------------------------------------------------------------------ */
  body[data-page="about"] .about-thoughts {
    padding-top: 44px;
    padding-bottom: 52px;
  }

  body[data-page="about"] .about-thoughts-grid {
    gap: 20px;
  }

  body[data-page="about"] .about-copy {
    padding-left: 0;
    font-size: 15px;
    line-height: 1.9;
  }

  body[data-page="about"] .about-copy p {
    margin-bottom: 14px;
  }

  /* ------------------------------------------------------------------------
     05. ELIGIBILITY / ご利用いただける方
     ------------------------------------------------------------------------ */
  body[data-page="about"] .about-eligibility-grid {
    gap: 12px;
  }

  body[data-page="about"] .eligibility-card {
    min-height: 0;
    padding: 18px 92px 18px 18px;
  }

  body[data-page="about"] .eligibility-card h3 {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 9px;
  }

  body[data-page="about"] .eligibility-card p {
    font-size: 12.5px;
    line-height: 1.7;
    margin: 5px 0;
  }

  body[data-page="about"] .eligibility-card img {
    right: 4px;
    width: 82px;
    height: 112px;
  }
}

/* ==========================================================================
   06. PRIVACY / プライバシーポリシー・スマホ時のタイトル改行調整
   実WordPress環境で確認済みの手動修正を正式テーマへ反映。
   ========================================================================== */
@media (max-width: 480px) {
  .privacy-hero-grid h1 {
    font-size: clamp(26px, 7vw, 30px);
    white-space: nowrap;
  }
}