@charset "UTF-8";

/* =========================================================
   可変レスポンシブの上書き
   - 共通の可変余白 / タイポグラフィ / コンテナ幅
   - ヘッダーは意図的に除外し、可変化前の仕様を維持する
   ========================================================= */

:root{
  --anchor-fluid-gutter: clamp(16px, 3.2vw, 32px);
  --anchor-fluid-section-y: clamp(40px, 7vw, 88px);
  --anchor-fluid-section-y-tight: clamp(28px, 4.6vw, 56px);
  --anchor-fluid-title: clamp(24px, 2.6vw, 40px);
  --anchor-fluid-title-sm: clamp(20px, 2vw, 32px);
  --anchor-fluid-text: clamp(14px, 1.05vw, 16px);
  --anchor-fluid-text-sm: clamp(12px, 0.9vw, 14px);
  --anchor-fluid-card-pad: clamp(16px, 2.2vw, 28px);
  --anchor-fluid-radius: clamp(10px, 1.3vw, 20px);
  --anchor-fluid-container: min(1120px, calc(100vw - (var(--anchor-fluid-gutter) * 2)));
}

html{ overflow-x: clip; }
body{ overflow-x: clip; }
*, *::before, *::after{ box-sizing: border-box; }
img, svg, video, iframe{ max-width: 100%; }
body, p, li, dd, dt, input, textarea, select, button{ overflow-wrap: anywhere; }

.site-main__inner,
.l-container,
.top-service__inner,
.service-section__inner,
.fv__inner,
.front-about__inner,
.front-reasons__inner,
.front-voice__inner,
.front-company__inner,
.front-cta__inner,
.top-hero__inner,
.top-features__inner,
.home-cta__inner,
.footer-map__inner,
.single-main,
.archive-main,
.search-main,
.error404-main{
  width: min(100%, var(--anchor-fluid-container));
  max-width: var(--anchor-fluid-container);
  margin-inline: auto;
  padding-inline: 0;
}

/* カスタムHTMLの「全幅」レイアウトは、共通コンテナ幅で狭めない。
   .l-container と同時に付くため、liquid-responsive.css 側で明示的に戻す。 */
.l-container.l-container--full{
  width: 100%;
  max-width: none;
  padding-inline: 0;
}

/* ヒーローの「全体の最大横幅（PC px）」を優先する。
   .site-main__inner の共通幅指定に負けないよう、ヒーロー内側だけ上書きする。 */
.top-hero__inner{
  width: min(100%, var(--hero-inner-maxw, 1100px));
  max-width: min(var(--hero-inner-maxw, 1100px), calc(100vw - (var(--anchor-fluid-gutter) * 2)));
  margin-inline: auto;
  padding-inline: 0;
}

.site-main__inner,
.l-container,
.top-service__inner,
.service-section__inner,
.fv,
.front-about__inner,
.front-reasons__inner,
.front-voice__inner,
.front-company__inner,
.front-cta__inner,
.top-hero,
.top-features,
.home-cta__inner,
.archive-main,
.search-main,
.single-main,
.error404-main{
  padding-inline: var(--anchor-fluid-gutter);
}

.c-section,
.home-cta,
.front-about,
.front-reasons,
.front-voice,
.front-company,
.front-cta,
.top-features,
.top-service,
.top-worries,
.top-profile,
.top-voice,
.fv{
  padding-block: var(--anchor-fluid-section-y);
}

/* ヒーローはインラインの --hero-pad-y から専用のカスタマイザー余白値を使う。
   ヒーロー余白コントロールが効くように、共通の可変余白ルールより後に置く。 */
.top-hero{
  padding-block: var(--hero-pad-y, var(--anchor-fluid-section-y));
}

.site-footer{
  padding-block: clamp(28px, 5vw, 48px) clamp(16px, 3vw, 24px);
  padding-inline: var(--anchor-fluid-gutter);
}

.c-section__title,
.c-pageTitle,
.front-about__title,
.front-service__title,
.front-reasons__title,
.front-voice__title,
.front-cta__title,
.fv__title,
.top-features__title,
.top-worries__title,
.top-hero__title,
.top-service__title,
.top-profile__title,
.top-voice__title,
.archive-hero__title{
  font-size: var(--anchor-fluid-title);
  line-height: 1.35;
}

.c-section__lead,
.fv__lead,
.front-about__text,
.front-reasons__lead,
.front-voice__lead,
.front-cta__lead,
.top-features__text,
.top-worries__text,
.top-service__text,
.top-profile__text,
.top-voice__text,
.archive-hero__lead{
  font-size: var(--anchor-fluid-text);
}

.footer-copy,
.footer-access__label,
.footer-access__text{
  font-size: var(--anchor-fluid-text-sm);
}

.global-nav__list{
  gap: clamp(10px, 1.6vw, 24px);
}

.global-nav__list > li > a,
.global-nav__list > li > button,
.global-nav__list > li.menu-item--cta > a{
  min-width: 0;
  font-size: clamp(13px, 1vw, 15px);
}

.top-features__grid,
.top-service__grid,
.top-worries__grid,
.top-voice__list,
.c-postList,
.archive-posts,
.search-results,
.footer-columns{
  gap: clamp(16px, 2vw, 28px);
}

.top-features__card,
.service-card,
.top-voice__item,
.archive-card,
.search-card,
.c-card,
.home-cta__tel,
.home-cta__actions,
.footer-column,
.top-worries__item,
.top-profile__box{
  min-width: 0;
  padding: var(--anchor-fluid-card-pad);
  border-radius: var(--anchor-fluid-radius);
}

.top-features__card-title,
.service-card__title,
.top-voice__title,
.archive-card__title,
.search-card__title,
.top-worries__item-title,
.top-profile__name{
  font-size: var(--anchor-fluid-title-sm);
  line-height: 1.45;
}

.fv{
  padding-top: clamp(48px, 7vw, 80px);
  padding-bottom: clamp(40px, 6vw, 60px);
}

.fv__inner,
.front-about__inner,
.front-company__inner,
.home-cta__inner,
.top-hero__inner,
.top-profile__grid{
  gap: clamp(20px, 4vw, 40px);
}

.fv__image-wrap,
.top-profile__media,
.top-hero__media,
.archive-card__thumb,
.c-postCard__thumb{
  border-radius: clamp(16px, 2vw, 32px);
  overflow: hidden;
}

.fv__image-wrap{
  max-width: min(100%, clamp(320px, 36vw, 520px));
}

.footer-map__inner iframe,
.footer-map__placeholder{
  height: clamp(220px, 32vw, 320px);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="number"],
textarea,
select{
  max-width: 100%;
  min-height: 44px;
}

@media (min-width: 768px){
  .archive-posts,
  .search-results,
  .c-postList{
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
  }

  /*
   * カスタマイザーに「表示列数（PC）」があるトップセクションは、
   * liquid-responsive.css 側の auto-fit で上書きしない。
   * auto-fit にするとカード幅に応じて列数が自動変更され、
   * 各セクションのCSS変数（--af-cols / --aw-cols / --as-cols / --av-cols）が効かなくなる。
   */
  .top-features__grid{
    grid-template-columns: repeat(var(--af-cols, 3), minmax(0, 1fr)) !important;
  }

  .top-worries__grid{
    grid-template-columns: repeat(var(--aw-cols, 3), minmax(0, 1fr)) !important;
  }

  .top-service__grid{
    grid-template-columns: repeat(var(--as-cols, 3), minmax(0, 1fr)) !important;
  }

  .top-voice__list{
    grid-template-columns: repeat(var(--av-cols, 3), minmax(0, 1fr)) !important;
  }

  .footer-columns{
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  }
}

@media (max-width: 1024px){
  .submenu-toggle{
    width: clamp(40px, 5.2vw, 44px);
    height: clamp(40px, 5.2vw, 44px);
    margin-right: clamp(8px, 1.6vw, 12px);
  }
}

@media (max-width: 767px){
  .fv__inner,
  .front-about__inner,
  .front-company__inner,
  .home-cta__inner,
  .top-hero__inner,
  .top-profile__grid{
    gap: clamp(16px, 5vw, 24px);
  }

  .fv__buttons,
  .home-cta__actions{
    width: 100%;
  }

  .fv__buttons > *,
  .home-cta__actions > *{
    flex: 1 1 auto;
  }

  .footer-columns.footer-columns--single{
    flex-direction: column;
  }
}


/* =========================================
   可変レスポンシブ修正：代表/プロフィール系セクション
   - 中間幅でプロフィール/Aboutのテキストカラムが狭くなりすぎるのを防ぐ
   ========================================= */
.top-profile__content,
.top-about .profile-card__body{
  min-width: 0;
  width: 100%;
}

@media (max-width: 960px){
  .top-profile__grid{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "media"
      "content" !important;
  }

  .top-profile--img-right .top-profile__grid{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "media"
      "content" !important;
  }

  .top-profile__media{
    max-width: min(100%, 340px);
    margin-left: auto;
    margin-right: auto;
  }

  .top-profile__content{
    width: 100%;
  }
}

@media (max-width: 960px){
  .top-about .profile-card{
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .top-about .profile-card__media{
    flex-basis: auto;
    margin-left: auto;
    margin-right: auto;
  }

  .top-about .profile-card__meta{
    justify-content: center;
  }
}


/* =========================================
   トッププロフィール：モバイル時の小見出し順序修正
   - 1カラム時は小さいサブタイトルを画像より上に表示する
   ========================================= */
.top-profile__kicker--mobile{
  display: none;
}

@media (max-width: 960px){
  .top-profile__kicker--mobile{
    display: block;
    width: fit-content;
    margin: 0 auto 16px;
    text-align: center;
  }

  .top-profile__content .top-profile__kicker{
    display: none;
  }
}


/* =========================================
   トップAbout：モバイル時の役職/小見出し順序修正
   - 1カラム時は小さいサブタイトルを画像より上に表示する
   ========================================= */
.top-about .profile-card__role--mobile{
  display: none !important;
}

@media (max-width: 960px){
  .top-about__inner > .profile-card__role--mobile{
    display: block !important;
    width: fit-content;
    margin: 0 auto 16px;
    text-align: center;
  }

  .top-about .profile-card__body .profile-card__role{
    display: none !important;
  }
}


/* =========================================
   CTA：モバイル時のラベル中央寄せ修正
   - 1カラム時は小さいサブタイトルのみ中央寄せする
   ========================================= */
@media (max-width: 1024px){
  .home-cta__inner{
    align-items: center;
  }

  .home-cta__text{
    width: 100%;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .home-cta__label{
    display: table;
    margin: 0 auto 8px;
    text-align: center;
  }
}

/* =========================================
   CTA inner配置修正
   - 他のトップセクションと同じく、内側コンテナの左右余白を維持する
   - .home-cta のセクション余白で inner幅の計算がずれないようにする
   ========================================= */
.home-cta{
  padding-inline: 0;
}

.home-cta__inner{
  padding-inline: var(--anchor-fluid-gutter);
}