/* ============================================
   responsive.css — レスポンシブ対応
   Breakpoints: tablet = 1024px / mobile = 768px / small = 480px
   ============================================ */

/* ============================================
   Tablet: max-width 1024px
   ============================================ */
@media (max-width: 1024px) {
  /* Hero：タブレット */
  .hero__content {
    padding-top: calc(var(--header-height) + var(--space-md));
    padding-bottom: var(--space-xl);
    padding-left: clamp(24px, 5%, 64px);
    padding-right: clamp(24px, 5%, 64px);
  }
  .hero__photo-wrap {
    width: 60%;
    border-top-left-radius: 34% 24%;
    border-bottom-left-radius: 34% 24%;
  }
  .hero__door-edge {
    display: none;
  }

  /* ナビリスト：5項目 + CTA + Menu が769px以上で収まるようgapを縮小 */
  .header__nav-list {
    gap: var(--space-md);
  }

  /* 主力サービス：タブレット保護（3カラムグリッドを解除） */
  .section--service-main {
    display: block;
  }
  .msvc-sidebar {
    display: none;
  }
  .msvc-panel {
    display: grid;
    grid-template-columns: clamp(200px, 36%, 320px) 1fr;
    grid-template-rows: auto;
    min-height: unset;
  }
  .msvc-items {
    grid-column: 1 / -1;
    flex-direction: row;
  }
  .msvc-item {
    border-left: none;
    border-top: 1px solid var(--color-border);
  }
  .msvc-photo {
    height: clamp(260px, 36vw, 400px);
  }
  .msvc-footer {
    grid-template-columns: auto 1fr auto;
  }

  /* News：タブレット保護 */
  .section--news {
    display: block;
  }
  .nws-sidebar {
    display: none;
  }
  .nws-panel {
    grid-template-columns: minmax(260px, 33%) 1fr;
    max-width: none;
    margin-inline: 0;
  }

  /* Works：タブレット調整 */
  .wks-header {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  .wks-lead {
    max-width: 100%;
    align-self: auto;
  }
  .wks-sub__ph,
  .wks-sub__img {
    width: 38%;
  }

  /* Conceptセクション：タブレット調整 */
  .section--concept {
    grid-template-columns: clamp(36px, 3.5vw, 48px) 1fr;
  }

  .cncpt-upper {
    grid-template-columns: 1fr minmax(0, 42%);
    min-height: clamp(280px, 34vw, 440px);
  }

  .cncpt-topbar__brand {
    display: none;
  }

  /* CTAバナー：縦並び */
  .cta-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-lg) var(--space-xl);
    gap: var(--space-md);
  }

  .cta-banner__desc {
    max-width: 100%;
  }

  /* Contact：タブレット */
  .cntct-body {
    padding: var(--space-lg) var(--space-lg);
  }

  /* ---- contact: タブレットでもサイドを縦積み ---- */
  .contact-layout {
    grid-template-columns: 1fr;
  }

  /* ---- Trust：タブレット対応 ---- */
  .trst-year-bg {
    font-size: clamp(100px, 16vw, 180px);
  }

  /* ---- About Hero: タブレット以下では写真エリア非表示・左パネル全幅 ---- */
  .about-hero__visual {
    display: none;
  }

  .about-hero__body {
    flex: none;
    width: 100%;
  }

  .about-hero__body::after {
    display: none;
  }

  /* ---- Subpage Hero ---- */
  .subpage-hero__visual {
    display: none;
  }

  .subpage-hero__body {
    flex: none;
    width: 100%;
    padding-bottom: var(--space-xl); /* 写真非表示時: 104px → 64px */
  }

  .subpage-hero__body::after {
    display: none;
  }

}

/* ============================================
   Mobile: max-width 768px
   ============================================ */
@media (max-width: 768px) {
  :root {
    --header-height: var(--header-height-sm);
    /* セクション余白をモバイル向けに圧縮（60px→40px） */
    /* header-height-smが未定義の場合の保険 */
    --section-padding: 40px;
  }

  /* ---- Header：タブレット以下 ---- */
  /* タブレットではPCナビを非表示。CTAとMenuボタンは表示 */
  .header__nav {
    display: none;
  }

  /* ドロワー幅をタブレット向けに調整 */
  .header__drawer {
    width: min(360px, 90vw);
  }

  /* モバイルでCTAボタンを非表示（ドロワー内で代替） */
  .header__cta-btn {
    display: none;
  }

  /* ---- Hero：スマホ ---- */
  .hero {
    min-height: auto;
  }

  .hero__content {
    padding: var(--space-md);
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
  }

  .hero__title {
    font-size: clamp(1.75rem, 8vw, 2.2rem);
    letter-spacing: -0.02em;
    margin-bottom: var(--space-sm);
  }

  .hero__desc {
    font-size: var(--text-sm);
    line-height: 1.75;
    margin-bottom: var(--space-md);
  }

  .hero__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .hero__actions .btn {
    width: 100%;
    justify-content: center;
    max-width: 340px;
  }

  /* 縦テキスト・スクロールインジケーターはスマホで非表示 */
  .hero__scroll {
    display: none;
  }

  /* ニュースバーは右寄せを維持 */
  .hero__bar {
    justify-content: flex-end;
  }

  /* スマホ：写真を full-bleed に戻し、アーチ・オーバーレイをリセット */
  .hero__photo-wrap {
    width: 100%;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .hero__photo-wrap::before {
    display: none;
  }
  .hero__photo {
    object-position: 55% center; /* SP：扉と自然光を両立 */
  }
  .hero__door-edge {
    display: none;
  }
  .hero__paper {
    align-items: center;
    background: linear-gradient(
      110deg,
      rgba(250, 248, 245, 0.95) 0%,
      rgba(250, 248, 245, 0.95) 22%,
      rgba(250, 248, 245, 0.62) 35%,
      rgba(250, 248, 245, 0.10) 48%,
      transparent 56%
    );
  }
  .hero__title-rule {
    margin-bottom: var(--space-sm);
  }

  /* ---- セクション見出し下余白を縮小 ---- */
  .section-heading {
    margin-bottom: var(--space-md);
  }

  /* News：スマホ縦積み */
  .section--news {
    display: block;
  }
  .nws-sidebar {
    display: none;
  }
  .nws-panel {
    grid-template-columns: 1fr;
  }
  .nws-info {
    border-right: none;
    border-bottom: 1px solid rgba(232, 226, 217, 0.35);
    padding: var(--space-lg) var(--space-md);
  }
  .section--news .news-list {
    padding: var(--space-md) var(--space-md) calc(var(--space-md) + 28px);
  }
  .nws-card-wrap {
    padding: var(--space-md) var(--space-md) calc(var(--space-md) + 28px);
  }

  /* ---- Conceptセクション：スマホ縦積み ---- */
  .section--concept {
    grid-template-columns: 1fr;
  }

  .cncpt-sidebar {
    display: none;
  }

  .cncpt-upper {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .cncpt-photo {
    height: clamp(220px, 58vw, 300px);
    order: -1; /* スマホでは写真を上に */
  }

  .cncpt-text {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-md);
    justify-content: flex-start;
    order: 0;
  }

  /* ---- Trust：スマホ対応 ---- */
  .trst-year-bg {
    font-size: clamp(80px, 30vw, 130px);
    bottom: -0.05em;
  }
  .trst-header {
    max-width: none;
    margin-bottom: var(--space-lg);
  }
  .trst-achv-item {
    grid-template-columns: 42px 1fr;
    row-gap: var(--space-xs);
    padding: var(--space-md) 0;
  }
  .trst-achv-year {
    grid-column: 2;
    text-align: left;
    padding-top: 0;
  }

  /* ---- 主力サービス：スマホ対応 ---- */
  .msvc-panel {
    grid-template-columns: 1fr;
  }
  .msvc-green {
    padding: var(--space-lg) var(--space-md);
  }
  .msvc-photo {
    height: clamp(220px, 56vw, 340px);
  }
  .msvc-items {
    flex-direction: column;
  }
  .msvc-item {
    padding: var(--space-md);
  }
  .msvc-footer {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    text-align: center;
    justify-items: center;
  }
  .msvc-footer__copy {
    white-space: normal;
    text-align: center;
  }
  .msvc-sub__header::before,
  .msvc-sub__header::after {
    display: none;
  }
  .msvc-sub__intro {
    white-space: normal;
    text-align: center;
  }
  .msvc-sub__list {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  .msvc-sub__item {
    padding: 0;
  }
  .msvc-sub__item + .msvc-sub__item {
    border-left: none;
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-md);
  }

  /* ---- Works：スマホ対応 ---- */
  .wks-header {
    padding: var(--space-lg) var(--space-md);
  }
  .wks-grid {
    grid-template-columns: 1fr;
    min-height: unset;
    padding: 0 var(--space-md);
    gap: var(--space-md);
  }
  .wks-main {
    height: clamp(220px, 56vw, 360px);
  }
  .wks-subs {
    gap: var(--space-sm);
  }
  .wks-sub__ph,
  .wks-sub__img {
    width: 38%;
  }

  /* ---- スマホ固定CTA被り防止：main 下部に余白確保 ---- */
  main {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  /* ---- CTAバナー tel ---- */
  .cta-banner__tel {
    flex-direction: column;
    gap: 3px;
    align-items: flex-start;
  }

  .cta-banner__tel-num {
    font-size: var(--text-lg);
  }

  /* ---- カードグリッド：1列 ---- */
  .card-grid,
  .card-grid--3 {
    grid-template-columns: 1fr;
  }

  /* ---- ニュースリスト ---- */
  .news-item__link {
    flex-wrap: wrap;
    gap: 6px;
    padding-block: var(--space-sm);
  }

  /* タイトル+矢印を常に独立した行に表示 */
  .news-item__main {
    flex-basis: 100%;
    margin-top: 2px;
  }

  /* 固定CTAとのスペースは .section--news .news-list の padding-bottom で確保済み */

  /* ---- contact ---- */
  .contact-form {
    padding: var(--space-md);
  }

  .contact-intro {
    text-align: left;
    margin-bottom: var(--space-xl);
  }

  .form-radio-group {
    flex-direction: column;
    gap: 10px;
  }

  /* ---- CTAバナー ---- */
  .cta-banner {
    padding: var(--space-lg) var(--space-md);
    align-items: stretch;
  }

  .cta-banner__title {
    font-size: var(--text-xl);
  }

  .cta-banner .btn {
    width: 100%;
    justify-content: center;
  }

  /* ---- Contact：スマホ縦積み ---- */
  .cntct-panel {
    grid-template-columns: 1fr;
  }

  .cntct-body {
    padding: var(--space-lg) var(--space-md);
  }

  .cntct-visual {
    min-height: 240px;
    order: -1;
  }

  .cntct-actions {
    width: 100%;
  }

  /* ---- Footer ---- */
  .footer__inner {
    flex-direction: column;
    gap: var(--space-md);
    padding-block: var(--space-md);
  }

  .footer__nav {
    align-self: stretch;
  }

  .footer__totop-text {
    display: none;
  }

  .footer__info {
    text-align: left;
    border-left: none;
    padding-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: var(--space-md);
  }

  .footer__nav-list {
    grid-template-columns: 1fr 1fr;
    gap: 14px var(--space-sm);
  }

  .footer__bottom-inner {
    flex-direction: row;
  }

  /* モバイルCTAボタン分のパディング */
  .footer__bottom {
    padding-bottom: calc(var(--space-md) + 76px + env(safe-area-inset-bottom));
  }

  /* ---- モバイル固定CTAボタン表示 ---- */
  .mobile-cta {
    display: block;
  }

  /* ---- ページHero ---- */
  .page-hero {
    padding-top: calc(var(--header-height) + var(--space-lg));
    padding-bottom: var(--space-lg);
  }

  .page-hero__title {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }

  .page-hero__desc {
    font-size: var(--text-sm);
  }

  /* ---- LP 共通コンポーネント：スマホ ---- */

  /* Lead Section */
  .lp-lead__copy {
    font-size: clamp(1.25rem, 5.5vw, 1.5rem);
  }

  /* Image + Text Block */
  .lp-img-text {
    grid-template-columns: 1fr;
    min-height: unset;
  }

  .lp-img-text__visual {
    height: clamp(220px, 55vw, 320px);
  }

  .lp-img-text--reverse .lp-img-text__visual {
    order: unset;
  }

  .lp-img-text--reverse .lp-img-text__body {
    order: unset;
  }

  .lp-img-text__body {
    padding: var(--space-lg) var(--space-md);
  }

  /* CTA Block */
  .lp-cta__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .lp-cta__actions .btn {
    width: 100%;
    justify-content: center;
    max-width: 340px;
    margin-inline: auto;
  }

  /* ---- Lower Contact CTA ---- */
  .lower-contact-cta {
    padding-inline: var(--space-sm);
  }

  /* ---- About Hero ---- */
  .about-hero {
    min-height: clamp(480px, 62svh, 720px);
  }

  .about-hero__content {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
    max-width: 100%;
  }

  .about-hero__breadcrumb {
    left: var(--space-lg);
  }

  .about-hero__scroll {
    display: none;
  }

  /* ---- Subpage Hero ---- */
  .subpage-hero {
    min-height: clamp(480px, 62svh, 720px);
  }

  .subpage-hero__content {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
    max-width: 100%;
  }

  .subpage-hero__breadcrumb {
    left: var(--space-lg);
  }

  .subpage-hero__scroll {
    display: none;
  }
}

/* ============================================
   Small Mobile: max-width 480px
   ============================================ */
@media (max-width: 480px) {
  .section-heading__title {
    font-size: var(--text-2xl);
  }

  .btn--lg {
    padding: 14px 24px;
    font-size: var(--text-base);
  }

  .msvc-title {
    font-size: clamp(1.4rem, 5.5vw, 1.75rem);
  }

  .cta-banner__title {
    font-size: var(--text-lg);
  }

  .cncpt-heading {
    font-size: clamp(1.6rem, 7.5vw, 2rem);
  }

  /* サービスLP：小画面ではアイコン非表示・2列 */
  .service-feature-lp {
    grid-template-columns: 2rem 1fr;
    gap: 0 12px;
  }

  .service-feature-lp__icon {
    display: none;
  }

  /* ニュースカード：タイトルを独立行に折り返し */
  .nws-card {
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-sm);
  }

  .nws-card__title {
    flex-basis: 100%;
    order: 3;
  }

  .nws-card__arrow {
    display: none;
  }

  /* ---- Lower Contact CTA ---- */
  .lower-contact-cta__inner {
    gap: var(--space-md);
    padding-block: var(--space-md);
  }

  .lower-contact-cta__channel {
    padding-block: var(--space-md);
    padding-inline: var(--space-sm);
  }

  .lower-contact-cta__meta-block {
    padding: var(--space-sm) var(--space-md);
  }

  /* ---- About Hero ---- */
  .about-hero {
    min-height: clamp(440px, 56svh, 680px);
  }

  .about-hero__body {
    padding-top: calc(var(--header-height-sm) + var(--space-md));
  }

  .about-hero__content {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  .about-hero__title {
    font-size: clamp(1.6rem, 7vw, 1.9rem);
  }

  .about-hero__catch {
    margin-bottom: var(--space-sm);
  }

  .about-hero__breadcrumb {
    left: var(--space-md);
    bottom: var(--space-md);
  }

  /* ---- Subpage Hero ---- */
  .subpage-hero {
    min-height: clamp(440px, 56svh, 680px);
  }

  .subpage-hero__body {
    padding-top: calc(var(--header-height-sm) + var(--space-md));
    padding-bottom: var(--space-lg); /* 小画面: 64px → 40px */
  }

  .subpage-hero__content {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  .subpage-hero__title {
    font-size: clamp(1.6rem, 7vw, 1.9rem);
  }

  .subpage-hero__breadcrumb {
    left: var(--space-md);
    bottom: var(--space-md);
  }
}