@charset "UTF-8";
/* ==========================================================================
   PDN 取扱ブランド紹介ページ
   PHILE WEB 特設サイト / 音元出版
   Figma「PDN特設サイトカンプV2」ページ「カンプV2」準拠
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. トークン
   -------------------------------------------------------------------------- */
:root {
  --font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;

  --c-text: #333;
  --c-dark: #343a40;
  --c-line: #343a40;
  --c-play: #ff0025;

  /* ブランドごとに brand 要素の style 属性で上書きされる */
  --accent: #003b9a;
  --brand-bg: #fff;

  --content-w: 954px;      /* カンプ: x243〜1197 */
  --header-h: 80px;

  --gap-col: 48px;         /* カード左右の間隔 */
  --gap-row: 36px;         /* カード上下の間隔 */
  --gap-kv: 104px;         /* キービジュアル → 最初の見出し */
  --gap-head: 48px;        /* 見出し → グリッド */
  --gap-more: 48px;        /* グリッド → もっと見るボタン */
  --gap-block: 112px;      /* ブロック間 */
  --pad-brand-bottom: 136px;
}

/* --------------------------------------------------------------------------
   2. リセット
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 500;
  color: var(--c-text);
  background: #fff;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, figure, ul, hgroup { margin: 0; padding: 0; }
ul { list-style: none; }
img { max-width: 100%; height: auto; vertical-align: bottom; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* フォーカスリング（キーボード操作時のみ） */
a:focus-visible,
button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   3. ヘッダー（このページ専用・上部固定）
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: var(--c-dark);
}

.site-header__inner {
  display: flex;
  align-items: center;
  height: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 59px 0 76px;
}

.site-header__logo { flex: none; margin-right: auto; }
.site-header__logo img { width: 230px; height: 32px; }

.gnav__list { display: flex; align-items: center; gap: 17px; }

.gnav__link {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  color: #fff;
  white-space: nowrap;
  transition: opacity .2s;
}
.gnav__link:hover { opacity: .7; }

/* 現在表示中のブランドを示す（js/main.js が付与） */
.gnav__link.is-current { position: relative; }
.gnav__link.is-current::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: #fff;
}

.site-header__pw { flex: none; margin-left: 51px; }
.site-header__pw img { width: 177px; height: 28px; }

.hamburger { display: none; }

/* --------------------------------------------------------------------------
   4. SP メニュー（全画面オーバーレイ）
   -------------------------------------------------------------------------- */
.sp-menu {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 56px;
  padding: 32px 24px 48px;
  background: rgba(255, 255, 255, .95);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sp-menu[hidden] { display: none; }

.sp-menu__list { display: flex; flex-direction: column; gap: 40px; padding-left: 40px; }

.sp-menu__link {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: #121212;
}

.sp-menu__pw { text-align: center; }
.sp-menu__pw img { width: 177px; height: 28px; }

/* --------------------------------------------------------------------------
   5. ブランドセクション
   -------------------------------------------------------------------------- */
.brand {
  background: var(--brand-bg);
  padding-bottom: var(--pad-brand-bottom);
  scroll-margin-top: var(--header-h);
  overflow: hidden;   /* キービジュアルの画面端はみ出しを抑える */
}

/* 5-1. キービジュアル + ブランド名 --------------------------------------- */
.brand__head { display: flex; align-items: center; }
.brand--kv-right .brand__head { flex-direction: row-reverse; }

.brand__kv { flex: none; width: 68.75%; }   /* カンプ: 990 / 1440 */
.brand__kv img { width: 100%; aspect-ratio: 990 / 557; object-fit: cover; }

.brand__title { flex: 1; min-width: 0; padding: 0 24px 0 124px; }
.brand--kv-right .brand__title { padding: 0 124px 0 105px; }

.brand__title-ja {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  color: var(--accent);
}

.brand__title-en {
  font-size: 40px;
  font-weight: 700;
  line-height: 54px;
  color: var(--accent);
  overflow-wrap: anywhere;
}

/* 5-2. ブロック（レビュー / 動画 / ニュース） ----------------------------- */
.brand__block {
  width: min(var(--content-w), 100% - 48px);
  margin: 0 auto;
  padding-top: var(--gap-block);
}
.brand__block:first-of-type { padding-top: var(--gap-kv); }

/* --------------------------------------------------------------------------
   6. セクション見出し（縦罫線 + 和文 + 英文）
   -------------------------------------------------------------------------- */
.section-head {
  position: relative;
  text-align: center;
  margin-bottom: var(--gap-head);
}

.section-head::before,
.section-head::after {
  content: "";
  position: absolute;
  top: 1px;
  width: 2px;
  height: 54px;
  background: var(--accent);
}
.section-head::before { left: calc(50% - 177px); }
.section-head::after  { left: calc(50% + 175px); }

.section-head__ja { font-size: 30px; font-weight: 700; line-height: 36px; }
.section-head__en { font-size: 16px; font-weight: 700; line-height: 19px; }

.section-head--light { color: #fff; }
.section-head--light::before,
.section-head--light::after { background: #fff; }

/* --------------------------------------------------------------------------
   7. カードグリッド
   -------------------------------------------------------------------------- */
.grid { display: grid; }

.grid--article {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-row) var(--gap-col);
  align-items: start;
}

.grid--video {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-col);
}

/* 「さらに表示」で開くまで隠す項目（js/main.js が制御） */
.card.is-hidden { display: none; }

/* 7-1. 記事カード（レビュー / ニュース） --------------------------------- */

/* グリッドアイテム／フレックスアイテムは既定が min-width:auto のため、
   最小コンテンツ幅より縮まずトラックからはみ出す。明示的に 0 に戻す。 */
.card { min-width: 0; }

.card__link { display: flex; gap: 8px; align-items: flex-start; min-width: 0; }

.card__thumb {
  flex: none;
  width: 140px;
  height: 93px;
  overflow: hidden;
  background: #e9ecef;
}
.card__thumb img { width: 100%; height: 100%; object-fit: cover; }

.card__title {
  min-width: 0;
  /* 「2.0S／3.0S／3.5S」のような分割できない英数字の連なりが
     カード幅を押し広げるのを防ぐ。通常の日本語・英単語の折り返しは変わらず、
     どうしても収まらないときだけ途中で折る。 */
  overflow-wrap: anywhere;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: .05em;
  color: var(--c-text);
  transition: color .2s;
}
.card__link:hover .card__title { color: var(--accent); }

.card--news .card__link { min-height: 93px; }

.card__date {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  margin-top: 0;
  text-align: right;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: .05em;
  color: var(--c-text);
}

/* 7-2. 動画カード -------------------------------------------------------- */
.video {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}

.video__thumb { width: 100%; height: 100%; object-fit: cover; }

.video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 43px;
  height: 31px;
  transform: translate(-50%, -50%);
  border-radius: 6px;
  background: var(--c-play);
  transition: transform .2s;
}
.video__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-42%, -50%);
  border-style: solid;
  border-width: 6px 0 6px 11px;
  border-color: transparent transparent transparent #fff;
}
.video:hover .video__play { transform: translate(-50%, -50%) scale(1.1); }

/* 再生時に差し込まれる iframe */
.video__frame { width: 100%; height: 100%; border: 0; }

/* --------------------------------------------------------------------------
   8. 「さらに表示」ボタン
   -------------------------------------------------------------------------- */
.more { margin-top: var(--gap-more); text-align: center; }

/* 全件表示し終わってボタンが消えたら、その余白も消す */
.more:has(.more__btn[hidden]) { margin-top: 0; }

/* .more__btn の display 指定が hidden 属性より強いため、明示的に打ち消す */
.more__btn[hidden] { display: none; }

.more__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 190px;
  height: 40px;
  padding: 0 22px;
  border: 1px solid var(--c-line);
  border-radius: 30px;
  background: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 19px;
  color: var(--c-dark);
  transition: background-color .2s, color .2s;
}
.more__btn:hover { background: var(--c-dark); color: #fff; }

/* --------------------------------------------------------------------------
   9. 株式会社PDNについて
   -------------------------------------------------------------------------- */
.about {
  background: var(--c-dark);
  color: #fff;
  padding: 46px 24px 69px;
  scroll-margin-top: var(--header-h);
}

.about__inner { max-width: var(--content-w); margin: 0 auto; text-align: center; }

.about__logo { margin-top: 46px; }
.about__logo img { width: 450px; height: 62px; }

.about__body {
  max-width: 762px;
  margin: 32px auto 0;
  text-align: left;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: .05em;
}

.about__cta { margin-top: 28px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 242px;
  height: 40px;
  padding: 0 22px;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 500;
  line-height: 19px;
  transition: opacity .2s;
}
.btn--light { background: #fff; color: var(--c-dark); }
.btn--light:hover { opacity: .8; }

/* --------------------------------------------------------------------------
   10. PHILE WEB 共通フッター
   ----------------------------------------------------------------
   /at-station/ の実装（assets/css/layout.css）から抽出した値をそのまま使用。
   他の特設サイトと同じ見た目・同じ挙動（PC=フルフッター / SP=著作権表示のみ）。
   -------------------------------------------------------------------------- */

/* SP が既定。641px 以上でPCフッターに切り替える */
#PCfooter { display: none; }
#SPfooter { display: block; }

#SPfooter .sp {
  padding: 10px 0;
  text-align: center;
  display: block;
  line-height: 1.2;
  font-size: 10px;
}

.nobull { list-style: none; }

/* ▲TOP。本体サイトと同じく、600px スクロールするまでは出さない
   （js/main.js が .is-visible を付け外しする） */
.page-top {
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.page-top.is-visible { opacity: 1; visibility: visible; }

.page-top a {
  display: block;
  position: fixed;
  bottom: 60px;
  right: 20px;
  z-index: 90;
  padding: 10px;
  background: #000;
  color: #fff;
  font-size: 12px;
  line-height: 12px;
  text-align: center;
}

.hoverFade { transition: opacity .2s; }
.hoverFade:hover { opacity: .7; }

@media only screen and (min-width: 641px) {
  #PCfooter { display: block; }
  #SPfooter { display: none; }

  #footer {
    padding: 50px 0 20px;
    background: #333;
  }

  #footer a {
    color: #edf0f5;
    text-decoration: none;
  }

  #footer .inner {
    width: 1080px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
  }

  #footer .inner .section_footer {
    width: 25%;
    font-size: 13px;
    /* 本体サイト（base.css）の行送りに合わせる。当ページの既定 1.5 だと 1px 詰まる */
    line-height: 21px;
  }

  #footer .inner .section_footer .title {
    font-size: 13px;
    color: #edf0f5;
    margin: 0 0 20px;
  }

  #footer .inner .section_footer li { margin: 0 0 .8em; }

  #footer .inner .section_footer .icon_social { margin-bottom: 15px; }
  #footer .inner .section_footer .icon_social li {
    display: inline-block;
    width: 15%;
  }
  #footer .inner .section_footer .icon_social img { height: 14px; }

  #footer .inner .section_footer .search_footer { position: relative; }

  #footer .inner .section_footer .search_footer #inputBox {
    /* 本体サイトは border-box を敷いていないので、幅190pxは padding を含まない。
       当ページは全体に border-box を適用しているため、ここだけ戻す */
    box-sizing: content-box;
    background: #757575;
    border-radius: 25px;
    border: none;
    padding: 10px 15px;
    width: 190px;
    color: #fff;
    font-size: 12px;
  }

  #footer .inner .section_footer .search_footer #searchSubmit {
    padding: 0;
    box-sizing: border-box;
    width: 15px;
    position: absolute;
    top: 9px;
    left: 160px;
  }

  #footer .inner .section_footer .partnership ul li {
    display: inline-block;
    float: left;
    margin-bottom: 16px;
  }
  #footer .inner .section_footer .partnership ul li img {
    height: 50px;
    margin-right: 15px;
    width: auto;
  }
  #footer .inner .section_footer .partnership ul li:nth-child(n+3) img { height: 36px; }

  #footer .copyright {
    font-style: normal;
    width: 100%;
    text-align: center;
    color: #d9d9d9;
    font-size: 11px;
  }

  #footer .copyright .logo_ongen {
    display: block;
    text-align: center;
    margin: 30px auto;
    width: 172px;
    height: auto;
  }
}

/* 1080px のフッター内枠が画面に収まらない幅での保険 */
@media only screen and (min-width: 641px) and (max-width: 1128px) {
  #footer .inner { width: auto; margin: 0 24px; }
}

/* ==========================================================================
   11. タブレット（〜1200px）
   ========================================================================== */
@media (max-width: 1200px) {
  .site-header__inner { padding: 0 24px; }
  .site-header__pw { margin-left: 24px; }
  .gnav__list { gap: 14px; }
  .gnav__link { font-size: 14px; }

  .brand__title { padding: 0 24px 0 48px; }
  .brand--kv-right .brand__title { padding: 0 48px 0 24px; }
  .brand__title-en { font-size: 32px; line-height: 44px; }
}

@media (max-width: 1000px) {
  /* ナビが収まらなくなるためハンバーガーへ切り替え */
  .gnav { display: none; }
  .site-header__pw { margin-left: auto; }
  .hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: none;
    width: 30px;
    height: 16px;
    margin-right: 24px;
  }
  .hamburger__bar {
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    transition: transform .25s, opacity .2s;
  }
  .hamburger[aria-expanded="true"] .hamburger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hamburger[aria-expanded="true"] .hamburger__bar:nth-child(2) { opacity: 0; }
  .hamburger[aria-expanded="true"] .hamburger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ==========================================================================
   12. スマートフォン（〜767px）— カンプ「SPフレームV2」準拠
   ========================================================================== */
@media (max-width: 767px) {
  :root {
    --header-h: 48px;
    --gap-col: 24px;
    --gap-row: 32px;
    --gap-kv: 33px;
    --gap-head: 32px;
    --gap-more: 36px;
    --gap-block: 70px;
    --pad-brand-bottom: 72px;
  }

  /* 12-1. ヘッダー */
  .site-header__inner { padding: 0 12px; }
  .hamburger { margin-right: 0; margin-left: 18px; }
  .site-header__logo { margin: 0 auto; }
  .site-header__logo img { width: 100px; height: 14px; }
  .site-header__pw { margin-left: 0; }
  .site-header__pw img { width: 87px; height: 14px; }

  .sp-menu__list { padding-left: 24px; gap: 32px; }
  .sp-menu__link { font-size: 22px; }
  .sp-menu__pw img { width: 120px; height: 19px; }

  /* 12-2. キービジュアル：ブランド名が上、画像が下（カンプSPと同じ順序） */
  .brand__head,
  .brand--kv-right .brand__head { flex-direction: column; align-items: stretch; }

  .brand__title,
  .brand--kv-right .brand__title { order: 1; padding: 32px 19px 0; }
  .brand__title-en { font-size: 40px; line-height: 54px; }

  .brand__kv { order: 2; width: 100%; margin-top: 8px; }
  .brand__kv img { aspect-ratio: 393 / 221; }

  .brand__block { width: 100%; padding-inline: 16px; }

  /* 12-3. 見出し：罫線をコンテンツ幅いっぱいに */
  .section-head::before,
  .section-head::after { top: 0; height: 40px; }
  .section-head::before { left: 0; }
  .section-head::after  { left: auto; right: 0; }

  .section-head__ja { font-size: 24px; line-height: 29px; }
  .section-head__en { font-size: 12px; line-height: 14px; }

  /* 12-4. グリッドは1列 */
  .grid--article,
  .grid--video { grid-template-columns: 1fr; }

  .card__thumb { width: 140px; height: 93px; }

  /* 12-5. PDNについて */
  .about { padding: 40px 16px 56px; }
  .about__logo { margin-top: 32px; }
  .about__logo img { width: min(280px, 80%); height: auto; }
  .about__body { margin-top: 24px; }
}

@media (max-width: 400px) {
  .brand__title-en { font-size: 34px; line-height: 46px; }
  .card__thumb { width: 120px; height: 80px; }
}