/* ===========================================================================
   タイポグラフィ
   通常テキストは LINE Seed JP（https://seed.line.me/）を優先フォントに。
   CDN は jsDelivr 上の fontsource ビルド、OFL ライセンスなので直リンク可。
   --font-family-english（ロゴ/大見出しの英字書体）はブランド意図で維持。
   ========================================================================= */
html {
  --font-family-heading:
    "LINE Seed JP", YakuHanJP, "Hiragino Sans", Meiryo, "Helvetica Neue",
    Helvetica, Arial, sans-serif;
  --font-family-text: var(--font-family-heading);
}

/* ===========================================================================
   トップページ ヒーロー
   元は抽象的な「designequal→DESIGN=」ループアニメーションだったが、
   フッター手前の Team セクションと同じ写真(assets/img/top.png)を使い、
   普通のデザイン会社サイト風の写真+見出しヒーローに変更。
   ========================================================================= */
.DqHero_media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.DqHero_image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.DqHero_overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.42) 38%,
    rgba(0, 0, 0, 0.08) 68%
  );
}

.DqHero_content {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 2.4vw, 22px);
  width: 100%;
  max-width: 720px;
  padding: 0 24px clamp(96px, 13vw, 140px);
  color: #fff;
  text-align: left;
}

@media (min-width: 769px) {
  .DqHero_content {
    padding-inline: 80px;
  }
}

.DqHero_eyebrow {
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.75);
}

.DqHero_title {
  margin: 0;
  font-weight: 700;
  font-size: clamp(3rem, 7vw, 5.6rem);
  line-height: 1.28;
  letter-spacing: -0.01em;
}

.DqHero_lead {
  max-width: 52ch;
  margin: 0;
  font-size: clamp(1.3rem, 1.8vw, 1.5rem);
  font-weight: 300;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.85);
}

.DqHero_actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
}

.DqHero_actionOutline {
  color: #fff;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.6);
}

/* ===========================================================================
   Works ギャラリー
   カード画像は 580x662。枠は 610/840 なので object-fit を指定しないと
   既定の fill で横につぶれる。
   ========================================================================= */
.Works_image__iJzfc {
  object-fit: cover;
  object-position: center;
}

/* ===========================================================================
   横スクロール対策
   もとの静的エクスポート側に残っていた、ビューポートをはみ出す指定を潰す
   ========================================================================= */

/* Ken Burns（site.js）で 1.06 倍した画像がはみ出していたので、親でクリップする */
.Concept_galleryImage__FkHYx {
  overflow: hidden;
}

/* Team の見出しは white-space:nowrap のままだと、日本語コピーが 1 行で
   ビューポートを大きくはみ出す（横スクロールの原因） */
.Team_content__lrpm7 {
  width: min(100% - 40px, 1000px);
}

.Team_title__gTEtm {
  font-size: clamp(2.6rem, 7.5vw, 6.4rem);
  line-height: 1.35;
  white-space: normal;
}

/* 区切り線が 100vw ＝ スクロールバー幅ぶん広く、常に数 px はみ出していた */
.Footer_copyright__1ODhL::before {
  width: 100%;
}

/* ===========================================================================
   静的書き出しで消えたままだったテキスト
   もとは React 側のスクロール演出でフェードインさせる想定の opacity:0 だが、
   その JS がこの書き出しに含まれておらず、ずっと非表示になっていた。
   初期値を戻し、表示は site.js の reveal に任せる。
   ========================================================================= */
.Concept_galleryText__T6fM8,
.Concept_gallerySubText__TOwyg,
.Team_title__gTEtm {
  opacity: 1;
}

/* ===========================================================================
   ヘッダー
   Flow / FAQ が増えてナビが 6 項目になったので、中間幅では間隔を詰める
   ========================================================================= */
@media (min-width: 769px) and (max-width: 1180px) {
  .Header_navigation__57bfi {
    gap: 20px;
  }

  .Header_navActions__M_Ile {
    gap: 20px;
  }

  .Header_actions__zh1ZG {
    gap: 20px;
  }
}

/* ナビが日本語ラベルになった＋言語スイッチャーを撤去したので、
   空いた分だけ文字を大きくする。フォントも本文と同じ LINE Seed JP に統一 */
.Header_logo__V9h3K {
  font-size: 1.6rem;
}

@media (min-width: 769px) {
  .Header_logo__V9h3K {
    font-size: 1.9rem;
  }
}

.Header_navLink__8V6kV {
  font-size: 1.5rem;
  font-weight: 500;
}

.Header_contactButton__oMREj,
.Header_entryButton___HaVE {
  height: 34px;
  padding: 0 16px;
  font-size: 1.4rem;
}

@media (min-width: 769px) {
  .Header_contactButton__oMREj,
  .Header_entryButton___HaVE {
    padding: 0 20px;
  }
}


/* ===========================================================================
   Pricing 補足リンク
   ========================================================================= */
.Pricing_footnote {
  margin: clamp(24px, 3vw, 32px) 0 0;
  font-size: clamp(1.2rem, 1.6vw, 1.3rem);
  font-weight: 300;
  line-height: 2;
  text-align: center;
  color: rgba(0, 0, 0, 0.55);
}

.Pricing_footnote a {
  color: #111;
  text-underline-offset: 3px;
}

/* ===========================================================================
   下層ページ共通（reasons / flow / faq）
   ========================================================================= */
.Page_hero {
  position: relative;
  padding: calc(var(--header_height, 62px) + clamp(72px, 12vw, 160px)) 24px
    clamp(56px, 8vw, 120px);
  background: #000;
  color: #fff;
}

@media (min-width: 769px) {
  .Page_hero {
    padding-inline: 80px;
  }
}

.Page_heroInner {
  width: 100%;
  max-width: var(--max-component-width, 1120px);
  margin: 0 auto;
}

.Page_eyebrow {
  display: block;
  margin: 0 0 20px;
  font-family: var(--font-family-english, serif);
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.Page_title {
  margin: 0;
  font-family: var(--font-family-english, serif);
  font-size: clamp(3.2rem, 8vw, 6.4rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
}

.Page_lead {
  max-width: 62ch;
  margin: clamp(20px, 3vw, 32px) 0 0;
  font-size: clamp(1.4rem, 2vw, 1.6rem);
  font-weight: 300;
  line-height: 2;
  color: rgba(255, 255, 255, 0.72);
}

.Page_section {
  padding: clamp(72px, 11vw, 160px) 24px;
  background: #fff;
  color: #111;
}

@media (min-width: 769px) {
  .Page_section {
    padding-inline: 80px;
  }
}

.Page_section--dark {
  background: #0d0d0d;
  color: #fff;
}

.Page_inner {
  width: 100%;
  max-width: var(--max-component-width, 1120px);
  margin: 0 auto;
}

.Page_sectionTitle {
  margin: 0 0 clamp(36px, 5vw, 64px);
  font-family: var(--font-family-english, serif);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.Page_sectionTitle + .Page_sectionLead {
  margin: calc(-1 * clamp(20px, 3vw, 40px)) 0 clamp(36px, 5vw, 56px);
  font-size: clamp(1.3rem, 1.8vw, 1.5rem);
  font-weight: 300;
  line-height: 1.9;
  color: rgba(0, 0, 0, 0.62);
}

.Page_section--dark .Page_sectionTitle + .Page_sectionLead {
  color: rgba(255, 255, 255, 0.65);
}

/* --- 理由カード（reasons.html） --------------------------------------- */
.Reason_list {
  display: grid;
  gap: 1px;
  background: rgba(0, 0, 0, 0.12);
  border-block: 1px solid rgba(0, 0, 0, 0.12);
}

@media (min-width: 900px) {
  .Reason_list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.Reason_item {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 40px);
  background: #fff;
}

.Reason_number {
  font-family: var(--font-family-english, serif);
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: 0.06em;
  color: #c0392b;
}

.Reason_title {
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 2.2rem);
  font-weight: 500;
  line-height: 1.5;
  color: #111;
}

.Reason_titleEn {
  display: block;
  margin-top: 6px;
  font-family: var(--font-family-english, serif);
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgba(0, 0, 0, 0.45);
}

.Reason_body {
  margin: 0;
  font-size: clamp(1.3rem, 1.8vw, 1.5rem);
  font-weight: 300;
  line-height: 2;
  color: rgba(0, 0, 0, 0.68);
}

/* --- 制作フロー（flow.html） ------------------------------------------ */
.Flow_list {
  counter-reset: flow;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.Flow_item {
  position: relative;
  display: grid;
  gap: 10px 32px;
  padding: clamp(28px, 4vw, 44px) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.Flow_item:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

@media (min-width: 769px) {
  .Flow_item {
    grid-template-columns: 96px minmax(0, 300px) minmax(0, 1fr);
    align-items: baseline;
  }
}

.Flow_step {
  font-family: var(--font-family-english, serif);
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
}

.Flow_title {
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
}

.Flow_body {
  margin: 0;
  font-size: clamp(1.3rem, 1.8vw, 1.5rem);
  font-weight: 300;
  line-height: 2;
  color: rgba(255, 255, 255, 0.7);
}

.Flow_meta {
  display: inline-block;
  margin-top: 12px;
  padding: 5px 12px;
  font-size: 1.1rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 100px;
}

/* --- FAQ（faq.html） --------------------------------------------------- */
.Faq_group + .Faq_group {
  margin-top: clamp(56px, 8vw, 96px);
}

.Faq_groupTitle {
  margin: 0 0 24px;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #c0392b;
}

.Faq_item {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.Faq_item:last-child {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.Faq_question {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
  padding: clamp(22px, 3vw, 30px) 0;
  font-family: inherit;
  font-size: clamp(1.5rem, 2.2vw, 1.8rem);
  font-weight: 500;
  line-height: 1.7;
  text-align: left;
  color: #111;
  background: none;
  border: 0;
  cursor: pointer;
}

.Faq_mark {
  flex: none;
  font-family: var(--font-family-english, serif);
  font-weight: 400;
  color: #c0392b;
}

/* 要素そのものではなく中の path を回転させる。
   要素を transform すると回転後のバウンディングボックスが行幅を超え、
   ページに横スクロールが出てしまうため。 */
.Faq_icon {
  flex: none;
  margin-left: auto;
  width: 20px;
  height: 20px;
  overflow: visible;
}

.Faq_icon path {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.3s ease;
}

/* 既定は開いた状態。JS が読み込まれたときだけ data-open="false" で畳む
   （JS が動かない環境でも回答が読める） */
.Faq_answer {
  display: grid;
  grid-template-rows: 1fr;
}

/* 初期化で畳むときにアニメーションさせないよう、JS が準備できてから付ける */
.js-faq-ready .Faq_answer {
  transition: grid-template-rows 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.Faq_item[data-open="false"] .Faq_answer {
  grid-template-rows: 0fr;
}

.Faq_item:not([data-open="false"]) .Faq_icon path {
  transform: rotate(45deg);
}

.Faq_answerInner {
  overflow: hidden;
}

.Faq_answerInner > p {
  margin: 0 0 clamp(22px, 3vw, 30px);
  padding-right: 30px;
  font-size: clamp(1.3rem, 1.8vw, 1.5rem);
  font-weight: 300;
  line-height: 2;
  color: rgba(0, 0, 0, 0.68);
}

@media (prefers-reduced-motion: reduce) {
  .Faq_answer,
  .Faq_icon path {
    transition: none;
  }
}

/* --- ページ下部の CTA -------------------------------------------------- */
.PageCta_section {
  padding: clamp(72px, 11vw, 140px) 24px;
  text-align: center;
  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.PageCta_title {
  margin: 0 0 18px;
  font-family: var(--font-family-english, serif);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #111;
}

.PageCta_lead {
  max-width: 56ch;
  margin: 0 auto clamp(32px, 4vw, 48px);
  font-size: clamp(1.3rem, 1.8vw, 1.5rem);
  font-weight: 300;
  line-height: 2;
  color: rgba(0, 0, 0, 0.62);
}

.PageCta_actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}