/* Responsive CSS — HPP HP
 *
 * 設計:
 *   - 1441px <  viewport       : PC（main を 1440 で止め、外側は body navy）→ layout.css 側で対応
 *   - 1024px <= viewport <=1441: PC（標準）
 *   - viewport < 1024px        : SP モード（ビューポート幅いっぱいの流動レイアウト）
 *
 * ※ タブレット専用の中間レイアウトは作らない。<1024px は全部 SP デザインで表示する。
 * ※ 旧実装は body を 375px に固定して左右を sp-bg.png で埋めていたが、
 *    375px より広い実機（iPhone 12〜16 は 390〜440px）で左右に青い帯が出るため廃止。
 *    375px は「デザインの基準幅」であって「表示幅」ではない。
 *    行長が伸びすぎないよう、テキスト列は --sp-content-max で頭打ちにして中央寄せする。
 * ============================================================ */

/* ============================================================
 * SP MODE (max-width: 1023px)
 * ビューポート幅いっぱいに広がる流動レイアウト。
 * 以下、SP デザイン（旧 max-width: 767px の中身）も同じブロックに含める。
 * ============================================================ */

@media (max-width: 1023px) {

  /* SP のテキスト列の上限幅。これ以上広いビューポート（タブレット等）でも
   * 中身は中央寄せで留め、セクション背景だけを画面いっぱいに広げる。 */
  :root {
    --sp-content-max: 520px;
  }

  /* ---- レスポンシブ改行ユーティリティ (SP 側は br-sp を活かし br-pc を消す) ---- */
  .br-sp { display: inline; }
  .br-pc { display: none; }

  /* ---- SP モード本体: ビューポート幅いっぱい ---- */
  body {
    width: 100%;
    max-width: none;
    margin: 0;
    background-color: var(--color-navy-primary);
    overflow-x: hidden;
  }

  /* 固定ヘッダーも画面幅いっぱい */
  .site-header {
    left: 0;
    right: 0;
    transform: none;
    width: 100%;
    max-width: none;
  }

  /* ---- 以下、SP デザイン（旧 mobile ブロック） ---- */

  /* ---- Layout / Container ---- */
  .container {
    padding-left: var(--spacing-md); /* 24px */
    padding-right: var(--spacing-md);
  }

  /* ---- Header: hide nav, show hamburger ---- */
  .site-header {
    padding: 0 var(--spacing-md);
    padding-top: 16px;
  }

  .site-header.is-scrolled {
    padding: 0 var(--spacing-md);
    height: 64px;
  }

  /* services セクション（one-scroll）中はヘッダーを非表示にする */
  .site-header.is-services-active {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition-base), visibility var(--transition-base);
  }

  .site-header__nav {
    display: none;
  }

  .site-header__hamburger {
    display: flex;
  }

  /* ---- Hero ---- */
  /* SP: 基本 100svh、ただし 800px を超えないように min() でキャップ。
   *  ※ min-height は付けない — min-height は max-height を上書きしてしまうため。 */
  .hero {
    height: min(100svh, 800px);
    min-height: 0;
    max-height: 800px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Hero content: centered column on SP */
  .hero__content {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    z-index: 4;
    padding: 120px 24px 80px;
  }

  /* Side text: horizontal centered on SP */
  .hero__side-text {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    height: auto;
    z-index: 4;
    pointer-events: none;
    text-align: center;
  }

  .hero__side-text-col {
    position: static !important;
    writing-mode: horizontal-tb;
    font-size: 34px;
    line-height: 1.55;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.95);
    right: auto !important;
    top: auto !important;
  }

  /* Tagline: horizontal centered on SP */
  .hero__tagline {
    position: static;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: 20px;
    line-height: 1.6;
    letter-spacing: 0.1em;
    gap: 0;
    margin-top: 40px;
  }

  .hero__tagline-column {
    writing-mode: horizontal-tb;
    font-feature-settings: normal;
  }

  /* SP: show brackets「」(PC hides them) */
  .hero__tagline-bracket {
    display: inline;
  }

  .hero__scroll {
    left: var(--spacing-md);
    bottom: 120px;
  }

  /* ---- Section titles EN: smaller font ---- */
  .pikapika__title-en,
  .partners__title-en,
  .affiliates__title-en {
    font-size: 56px;
  }

  .partners__title,
  .affiliates__title {
    width: auto;
    height: auto;
  }

  .pikapika__title-ja,
  .partners__title-ja,
  .affiliates__title-ja {
    font-size: 28px;
  }

  /* ---- Hero bottom gradient: SP は Figma 136:1314 (gradients-white-sp) を使用 ----
   * PC 用 hero-gradient.svg は 1441 幅で設計されているため、375px に圧縮すると
   * 中央のカーブが鋭い「山」になる。SP は 375 幅で描かれた SVG を使う。 */
  .hero__gradient {
    background-image: url("../images/hero-gradient-sp.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .hero__gradient img {
    display: none;
  }

  /* ---- Pick Up: Figma node 136:822 ---- */
  .pickup {
    padding: 80px 20px 96px;
    gap: 40px;
  }

  .pickup__title {
    width: 100%;
    height: 56px;
    padding: 0;
    white-space: nowrap;
  }

  .pickup__title-en {
    font-size: 80px;
    inset: -30.36% 0 -12.5% 0;
  }

  .pickup__title-ja {
    font-size: 24px;
    letter-spacing: 4.8px;
    inset: 35.71% 0 0 0;
  }

  .pickup__cards {
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: 100%;
    max-width: 400px;
    padding: 0;
    box-sizing: border-box;
  }

  .pickup__card {
    width: 100%;
  }

  .pickup__cta {
    width: 100%;
  }

  /* ---- PIKAPIKA: Figma node 136:831 ---- */

  .pikapika {
    min-height: auto;
    padding-bottom: 48px;
  }

  /* Inner card: 345px wide, border-radius 24px, stretch to content
   * Bottom inset matches .pikapika padding-bottom so the navy card
   * stops above the section's bottom spacing */
  .pikapika__bg {
    width: calc(100% - 30px);
    max-width: 420px;
    height: auto;
    top: 0;
    bottom: 48px;
    border-radius: 24px;
  }

  /* 中身の幅は .pikapika__bg（ネイビーのカード）と必ず一致させる。
   * ずれると本文がカードからはみ出す。 */
  .pikapika__inner {
    padding: 80px 20px 40px;
    gap: 56px;
    width: calc(100% - 30px);
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  /* Title: EN 48px, JA 24px, centered */
  .pikapika__title {
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    text-align: center;
    width: 100%;
    white-space: normal;
  }

  .pikapika__title-en {
    font-size: 48px;
    line-height: 1;
    white-space: normal;
    text-align: center;
  }

  .pikapika__title-ja {
    font-size: 24px;
    letter-spacing: 4.8px;
    margin: 59px 0 0 0;
    text-align: center;
    justify-self: center;
  }

  .pikapika__title-ja .pikapika__title-ja-suffix {
    font-size: 24px;
    letter-spacing: 4.8px;
  }

  /* Body: single column, gap 24px */
  .pikapika__body {
    flex-direction: column;
    gap: 24px;
    margin-top: 0;
  }

  .pikapika__text-col {
    width: 100%;
    gap: 28px;
  }

  /* Keyword: 24px */
  .pikapika__keyword {
    font-size: 24px;
    letter-spacing: 3.6px;
  }

  /* Description: 14px */
  .pikapika__description {
    font-size: 14px;
  }

  .pikapika__figure-col {
    width: 100%;
    height: auto;
  }

  /* ---- Highlight: Figma node 136:876 ---- */
  .highlight {
    min-height: auto;
  }

  .highlight__inner {
    padding: 120px 15px 48px;
    gap: 48px;
  }

  /* Anchor the bg image to the top of the section on SP */
  .highlight__bg-img {
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
  }

  /* Title: Figma SP は 32px だが palt が効かない環境では幅が溢れるため、
   * 視覚的にFigmaと一致するよう 28px / letter-spacing 4.2px に調整。 */
  .highlight__title-main {
    font-size: 28px;
    letter-spacing: 4.2px;
    white-space: normal;
  }

  .highlight__title-line {
    white-space: nowrap;
  }

  .highlight__title-sub {
    font-size: 14px;
    letter-spacing: 0;
  }

  .highlight__br-mobile {
    display: inline;
  }

  /* Bottom text: left-aligned, 14px */
  .highlight__bottom-text {
    text-align: left;
  }

  .highlight__bottom-text p {
    font-size: 14px;
  }

  /* ---- Services: all slides 100vh ---- */
  .services__slide {
    height: 100vh;
    min-height: 600px;
    /* JS でワンスワイプ = 1スライドを完全制御するため、ネイティブスクロールを止める */
    touch-action: none;
  }

  .services__cover-inner {
    min-height: 100vh;
    height: 100vh;
    padding: 64px var(--spacing-md);
  }

  .services__cover-title {
    font-size: 52px;
  }

  /* Service card: image top, text below, 100vh */
  .services__card-inner {
    flex-direction: column;
    align-items: center;
    height: 100vh;
    min-height: 600px;
    padding: 0 48px 48px;
    gap: 32px;
  }

  .services__card-image {
    order: -1;
  }

  .services__card-text {
    width: 100%;
    max-width: var(--sp-content-max);
    padding: 0;
    gap: 32px;
    align-items: center;
  }

  /* Meta: vertical layout, centered */
  .services__card-meta {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .services__card-number {
    font-size: 14px;
  }

  .services__card-meta-rule {
    width: 1px;
    height: 16px;
    flex: 0 0 16px;
  }

  .services__card-category-label {
    font-size: 14px;
  }

  .services__card-title {
    font-size: 40px;
    text-align: center;
  }

  .services__card-body {
    text-align: left;
    width: 100%;
  }

  .services__card-subtitle,
  .services__card-desc {
    font-size: 13px;
  }

  .services__card-link {
    font-size: 12px;
    text-align: center;
  }

  /* カード内ボタン (三島式): SP は横並びのまま幅を詰める */
  .services__card-actions {
    justify-content: center;
    gap: 12px;
    width: 100%;
  }

  .services__card-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 12px;
    font-size: 13px;
  }

  /* Image: card-inner の左右 padding (48px) を打ち消して画面幅いっぱいに広げる */
  .services__card-image {
    align-self: stretch;
    width: auto;
    max-width: none;
    height: 188px;
    margin-left: -48px;
    margin-right: -48px;
    order: -1;
  }

  /* Slide 04 (Meditation is a Friend) uses the bg illustration as the
   * visual; hide the top photo on SP */
  .services__slide--04 .services__card-image {
    display: none;
  }

  /* SP 専用の背景画像 (Figma SP デザインのカラフルなブロブ背景) */
  .services__slide--04 {
    background-color: #ffffff;
    background-image: url("../images/service-04-bg-sp.png");
    background-position: center;
  }

  /* SP: カード本体の白背景は無くして背景のブロブ画像を活かす */
  .services__slide--04 .services__card-text {
    background-color: transparent;
  }

  /* Image非表示で上に寄ってしまうため、中身を縦中央寄せ */
  .services__slide--04 .services__card-inner {
    justify-content: center;
  }

  /* Tag: bottom right */
  .services__card-tag {
    font-size: 12px;
    bottom: 24px;
    right: 16px;
  }

  /* Show shared indicator on SP, with adjusted left position */
  .services__indicator {
    display: block;
  }

  /* SP: 画面左端から一定の余白で固定。
   * カード本文は .services__card-inner の padding (48px) の内側にあるので重ならない。 */
  .services__dot-nav {
    left: 16px;
  }

  .services__scroll {
    left: 10px;
    bottom: 48px;
  }

  /* ---- Recruit: Figma node 136:1164 ---- */
  .recruit {
    padding: 96px 20px;
    gap: 56px;
  }

  .recruit__title {
    width: 100%;
    max-width: 420px;
    height: 56px;
  }

  .recruit__title-en {
    font-size: clamp(44px, 17vw, 64px);
    letter-spacing: 1.28px;
  }

  .recruit__title-ja {
    font-size: 28px;
    letter-spacing: 5.6px;
    top: 35.71%;
  }

  .recruit__body {
    gap: 16px;
  }

  .recruit__lead {
    font-size: 18px;
    letter-spacing: 0.9px;
  }

  .recruit__desc {
    font-size: 14px;
  }

  /* ---- Contact: stack cards vertically ---- */
  .contact {
    padding-top: 96px;
  }

  .contact__title-en {
    font-size: 64px;
  }

  .contact__title {
    margin-bottom: -12px;
  }

  .contact__card-wrapper {
    width: calc(100% - 32px);
    max-width: var(--sp-content-max);
    margin-left: auto;
    margin-right: auto;
    padding: 48px 24px;
  }

  .contact__cards {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  .contact__card-title {
    font-size: 24px;
    letter-spacing: 2px;
  }

  .contact__btn {
    width: 280px;
    max-width: 100%;
    height: 56px;
    font-size: 16px;
  }

  /* ---- Affiliates: Figma node 136:1206 ---- */
  .affiliates {
    min-height: auto;
    background-image: url("../images/affiliates-bg-sp.png");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
  }

  /* SP: PC 用の bg image / overlay は非表示にして上記 background-image に統一 */
  .affiliates__bg {
    display: none;
  }

  .affiliates__inner {
    padding: 96px 20px 100px;
  }

  .affiliates__title {
    width: 345px;
    max-width: 100%;
    height: 121px;
  }

  .affiliates__title-en {
    font-size: 56px;
    letter-spacing: 1.12px;
    line-height: 0.8;
    white-space: pre-wrap;
  }

  .affiliates__title-ja {
    font-size: 28px;
    letter-spacing: 5.6px;
    top: 62%;
  }

  .affiliates__desc {
    font-size: 14px;
    letter-spacing: 0;
    margin-bottom: 40px;
  }

  .affiliates__cards {
    flex-direction: column;
    align-items: center;
    gap: 37px;
  }

  .affiliates__card {
    flex: none;
    width: 300px;
    max-width: 100%;
  }

  .affiliates__card-image {
    width: 300px;
    max-width: 100%;
    height: 169px;
  }

  .affiliates__card-name {
    font-size: 18px;
    letter-spacing: 0.9px;
  }

  .affiliates__card-desc {
    font-size: 14px;
  }

  /* ---- Partners: Figma node 136:1194 ---- */
  .partners {
    padding: 120px 20px 160px;
    gap: 80px;
  }

  .partners__title {
    width: 100%;
    max-width: 420px;
    height: 56px;
  }

  .partners__title-en {
    font-size: clamp(34px, 12.8vw, 48px);
    letter-spacing: 0.96px;
  }

  .partners__title-ja {
    font-size: 28px;
    letter-spacing: 5.6px;
  }

  .partners__logos {
    padding: 0;
    gap: 40px;
  }

  .partners__logo-row {
    gap: 40px;
  }

  .partners__logo-img {
    height: 80px;
    max-width: none;
  }

  .partners__logo-placeholder {
    width: 140px;
    height: 80px;
  }

  /* ---- Footer: Figma SP 136:1235 ----
   * brand (logo + 会社情報) を上、サイトマップ | 関連サイト を下に縦積み。
   * 横一列に並べていた PC レイアウトを縦方向に組み替える。 */
  .site-footer {
    padding: 64px var(--spacing-md) var(--spacing-md);
  }

  .site-footer__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
    width: 100%;
  }

  .site-footer__brand {
    width: 100%;
  }

  .site-footer__nav-columns {
    flex-direction: row;
    justify-content: center;
    gap: 80px;
    width: 100%;
  }

  /* ---- Footer bottom: legal links on top line, copyright below ---- */
  .site-footer__copyright {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 12px;
    text-align: center;
    font-size: 11px;
  }

  .site-footer__copyright-sep {
    display: none;
  }

  /* ============================================================
   * 下層ページ共通 (page.css / company.css) の SP 上書き
   * Figma node: 136:2756 (SP/会社概要)
   * ============================================================ */

  /* ---- 下層 FV ---- */
  .page-fv {
    height: 200px;
  }
  .page-fv__title-en {
    font-size: 32px;
    letter-spacing: 3.2px;
  }
  .page-fv__title-ja {
    font-size: 16px;
    letter-spacing: 1.6px;
  }

  /* ---- 本文ラッパー ---- */
  .page-content {
    padding: 96px 0;
  }
  .page-content__inner {
    padding: 0 20px;
  }
  .page-content__sections > * + * {
    margin-top: 80px;
  }

  /* ---- フリーテキスト領域: モバイル時はフォントを少し下げる ---- */
  .page-content__free h2 {
    font-size: 24px;
    letter-spacing: 1.2px;
    margin-top: 48px;
  }
  .page-content__free h3 {
    font-size: 18px;
    margin-top: 32px;
  }
  .page-content__free p {
    font-size: 14px;
  }
  .page-content__free th {
    width: auto;
  }

  /* ---- 経営理念 ---- */
  .philosophy__heading {
    font-size: 24px;
    letter-spacing: 1.2px;
  }
  .philosophy__lead {
    font-size: 14px;
  }

  /* ---- MVV カード: ラベル上 / 本文下の 1 カラムに ---- */
  .mvv-card {
    border-radius: 24px;
  }
  .mvv-card__inner {
    padding: 32px 24px;
    gap: 24px;
  }
  .mvv-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .mvv-row__label {
    font-size: 24px;
    letter-spacing: 1.2px;
    text-align: left;
  }
  .mvv-row__title {
    font-size: 20px;
    letter-spacing: 1px;
  }
  .mvv-row__text {
    font-size: 14px;
  }

  /* ---- 代表メッセージ ---- */
  .greeting {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .greeting__image {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    max-width: 335px;
    margin: 0 auto;
  }
  .greeting__body {
    gap: 24px;
  }
  .greeting__lead {
    font-size: 20px;
    letter-spacing: 1px;
    text-align: center;
  }
  .greeting__text {
    font-size: 14px;
  }

  /* ---- 会社情報 ---- */
  .company-info {
    width: 100%;
    gap: 24px;
  }
  .company-info__heading {
    font-size: 20px;
    letter-spacing: 1px;
  }
  .company-info__row {
    grid-template-columns: 96px 1fr;
    gap: 8px;
    padding: 16px 0;
    font-size: 14px;
    letter-spacing: 0.7px;
  }

  /* ---- お知らせ一覧: 1 カラム（Pick Up の SP と同じ見せ方） ---- */
  .news-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }

  .news-pagination {
    margin-top: 48px;
  }

  .news-pagination .nav-links {
    gap: 8px;
  }

  .news-pagination .page-numbers {
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    font-size: 13px;
  }
}

/* ============================================================
 * 低い高さのビューポート（スマホ横向き等 / height <= 600px）
 * Our Services はワンスクロール（touch-action: none）で 1 スライド = 1 画面のため、
 * min-height: 600px のままだと横向きで本文やボタンが画面外に出て触れなくなる。
 * ここでは高さの下限を外し、1 画面に収まるよう各パーツを縮める。
 * ============================================================ */

@media (max-width: 1023px) and (max-height: 600px) {

  .services__slide,
  .services__card-inner,
  .services__cover-inner {
    height: 100svh;
    min-height: 0;
  }

  /* 左の dot-nav と本文がぶつからないよう左右の余白は保つ */
  .services__card-inner {
    padding: 0 40px 20px;
    gap: 16px;
  }

  /* 上部の写真は高さ基準にして、本文の場所を確保する */
  .services__card-image {
    height: 26svh;
    margin-left: -40px;
    margin-right: -40px;
  }

  /* ドット列も詰めて縦の占有を減らす */
  .services__dot-nav {
    left: 10px;
    gap: 8px;
  }

  .services__scroll {
    left: 6px;
    bottom: 20px;
  }

  .services__scroll-line {
    height: 32px;
  }

  .services__card-text {
    gap: 16px;
  }

  .services__card-meta {
    flex-direction: row;
    gap: 12px;
  }

  .services__card-meta-rule {
    width: 16px;
    height: 1px;
    flex: 0 0 16px;
  }

  .services__card-title {
    font-size: 28px;
  }

  .services__card-logo {
    width: 220px;
  }

  .services__card-subtitle,
  .services__card-subtitle--en,
  .services__card-desc {
    font-size: 12px;
    line-height: 1.8;
  }

  .services__card-btn {
    padding: 8px 12px;
    font-size: 12px;
  }

  .services__cover-title {
    font-size: 40px;
  }

  .services__cover-inner {
    gap: 24px;
  }

  .services__card-tag {
    bottom: 12px;
  }
}


/* ============================================================
 * PC 中間レンジ (1024px–1279px)
 * 1024 ぎりぎりだと our services の card-inner (max-width 1024px) が
 * viewport いっぱいに広がり、左の dot-nav (left:64px) が card-text に
 * 被り、左右の余白も無くなる。
 * テキスト幅とイメージ幅を縮め、左右に余白を確保する。
 * ============================================================ */
@media (min-width: 1024px) and (max-width: 1279px) {
  /* ---- Header: 横の余白を 120px → 40px に圧縮 ---- */
  .site-header {
    padding: 32px 40px 0;
  }
  .site-header.is-scrolled {
    padding: 0 40px;
  }

  /* ---- Our Services: dot-nav (left:64px) と被らないよう内側に寄せる ---- */
  .services__card-inner {
    padding: 0 96px;
  }
  .services__card-text {
    width: 440px;
  }
  .services__card-image {
    width: 360px;
    height: 450px;
  }

  /* ---- What is PIKA PIKA?: navy カード (1024px) 内に body を収める ---- */
  .pikapika__body {
    max-width: 1000px;
    margin: 0 auto;
    gap: 24px;
  }
  /* タイトルを 1024 カード内に収め、英タイトル・日本語タイトルを
   * 同じグリッドセルの中央に重ねる（理想の見え方: Figma 1278px 状態）。
   * PC 時の 190px 左マージン / 54px 上マージンは解除する。 */
  .pikapika__title {
    place-items: center;
  }
  .pikapika__title-en {
    font-size: 72px;
  }
  .pikapika__title-ja {
    margin: 54px 0 0 0;
  }
}