@charset "UTF-8";

/* ----------------------------------------------------------------------
   about.css  会社紹介ページ（/about/）
   ----------------------------------------------------------------------
   1. p-about-lead   リード文＋写真
   2. p-company      会社概要
   3. p-locations    拠点
   4. p-works        実績・主な取引先

   ヘッダー・フッター・ページタイトル部・CONTACT・中見出し（c-subhead）・
   定義リスト（c-deflist）は common.css
   各コンポーネントの直後に、そのコンポーネントのレスポンシブ指定を置く
   ---------------------------------------------------------------------- */

/* ==========================================================================
   p-about-lead  リード文＋写真
   ========================================================================== */

.p-about-lead {
  padding: 8rem 0 11rem;
}

.p-about-lead__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3rem;
}

.p-about-lead__text {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.8;
  color: #333;
}

/* 写真は幅が縮んでも比率を保つ（Figma 1200 × 360）。
   height は auto にしないと、img要素のheight属性が優先されて aspect-ratio が効かない */
.p-about-lead__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 10 / 3;
  object-fit: cover;
}

@media (max-width: 1023px) {
  /* ----- p-about-lead ----- */
  .p-about-lead {
    padding: 6rem 0 8rem;
  }

  .p-about-lead__text {
    font-size: 1.8rem;
  }
}

@media (max-width: 767px) {
  .p-about-lead {
    padding: 4rem 0 6rem;
  }

  .p-about-lead__inner {
    gap: 2rem;
  }

  .p-about-lead__text {
    font-size: 1.5rem;
  }

  /* SPは横長すぎると被写体が分からなくなるため、やや縦を足す */
  .p-about-lead__img {
    aspect-ratio: 3 / 2;
  }
}

/* ==========================================================================
   p-company  会社概要
   ==========================================================================
   2カラムの中身は c-deflist（common.css）を使う */

.p-company {
  padding-bottom: 10rem;
}

@media (max-width: 767px) {
  /* ----- p-company ----- */
  .p-company {
    padding-bottom: 6rem;
  }
}

/* ==========================================================================
   p-locations  拠点
   ========================================================================== */

.p-locations {
  padding: 10rem 0;
  background-color: #f2f2f2;
}

.p-locations__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4rem;
}

.p-locations__lead {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.8;
  color: #333;
}

.p-locations__list {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  width: 100%;
}

.p-locations__card {
  padding: 4rem;
  background-color: #fff;
}

/* 大阪拠点は「左に本文／右に地図」の2カラム */
.p-locations__card--osaka {
  display: flex;
  align-items: flex-start;
  gap: 6rem;
}

.p-locations__body {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-width: 0;
  gap: 1.6rem;
}

.p-locations__text {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: .054rem;
  color: #333;
}

/* Googleマップの埋め込み */
.p-locations__map {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  height: 35rem;
  border: 0;
}

/* 京都・west creative は見出し（または見出し＋住所）と地図の下に、
   グレーの枠（p-locations__panel）を重ねる */
.p-locations__card--kyoto,
.p-locations__card--creative {
  display: flex;
  flex-direction: column;
}

.p-locations__card--kyoto {
  gap: 2rem;
}

.p-locations__card--creative {
  gap: 6rem;
}

.p-locations__kyoto-body,
.p-locations__creative-head {
  display: flex;
  align-items: flex-start;
}

.p-locations__kyoto-body {
  gap: 4rem;
}

.p-locations__creative-head {
  gap: 6rem;
}

/* 代表プロフィール・事業紹介を載せるグレーの枠 */
.p-locations__panel {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  padding: 3rem;
  background-color: #f2f2f2;
}

.p-locations__profile {
  display: flex;
  flex: 0 0 18.3rem;
  flex-direction: column;
  gap: 1.4rem;
}

/* Figmaの写真枠（183 × 206）の比率を保つ */
.p-locations__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 183 / 206;
  object-fit: cover;
}

.p-locations__rep {
  display: flex;
  align-items: flex-end;
  gap: 1.5rem;
  font-weight: 500;
  color: #141414;
}

/* 「代表」は2文字を必ず横1行で出す。字間の分だけ右に戻して、
   Figmaどおり写真の左端から32pxの幅に収める */
.p-locations__rep-label {
  flex-shrink: 0;
  margin-right: -.35rem;
  padding-bottom: .6rem;
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: .35rem;
  white-space: nowrap;
}

.p-locations__rep-names {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  width: 13.6rem;
}

.p-locations__rep-kana {
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: .25rem;
}

/* 26px×4文字＋字間でちょうど136pxに収まる。最後の文字の後ろに入る
   字間の分だけ右に戻して、ふりがなとの中央を揃える */
.p-locations__rep-name {
  margin-right: -1.066rem;
  font-size: 2.6rem;
  line-height: 1.0769; /* Figma 28px / 26px */
  letter-spacing: 1.066rem;
}

/* グレーの枠の中の本文カラム（経歴／事業分野、west creativeの2本） */
.p-locations__cols {
  display: flex;
  flex: 1 1 0;
  align-items: flex-start;
  min-width: 0;
  gap: 2rem;
}

.p-locations__col {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-width: 0;
  gap: 1.4rem;
}

.p-locations__col-title {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .224rem;
  color: #f6741b;
}

.p-locations__strong {
  font-weight: 700;
}

.p-locations__other {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
}

.p-locations__other-list {
  display: flex;
  gap: 8rem;
}

.p-locations__other-item {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  min-width: 0;
  gap: 1.6rem;
  padding: 2.9rem 3rem 2.9rem 2.9rem;
  background-color: #000;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .126rem;
  color: #fff;
}

.p-locations__other-icon {
  flex-shrink: 0;
  width: 1.9rem;
  height: 1.9rem;
}

@media (max-width: 1023px) {
  /* ----- p-locations ----- */
  .p-locations {
    padding: 8rem 0;
  }

  /* 本文と地図を横に並べると両方が狭くなるため縦積みにする */
  .p-locations__card--osaka,
  .p-locations__kyoto-body,
  .p-locations__creative-head {
    flex-direction: column;
    gap: 3rem;
  }

  .p-locations__card--creative {
    gap: 4rem;
  }

  .p-locations__body,
  .p-locations__map {
    flex: none;
    width: 100%;
  }

  /* 代表写真と本文2カラムを横に並べると本文が細くなるため縦積みにする */
  .p-locations__panel {
    flex-direction: column;
    gap: 2.4rem;
  }

  .p-locations__profile {
    flex: none;
    width: 18.3rem;
    max-width: 100%;
  }

  .p-locations__cols {
    flex: none;
    width: 100%;
    gap: 3rem;
  }

  .p-locations__other-list {
    gap: 4rem;
  }
}

@media (max-width: 767px) {
  .p-locations {
    padding: 6rem 0;
  }

  .p-locations__inner,
  .p-locations__list {
    gap: 3rem;
  }

  .p-locations__card {
    padding: 2.4rem;
  }

  .p-locations__lead,
  .p-locations__text {
    font-size: 1.4rem;
  }

  .p-locations__map {
    height: 24rem;
  }

  .p-locations__panel {
    padding: 2rem;
  }

  /* 見出しと本文が細くなるため2カラムを縦積みにする */
  .p-locations__cols {
    flex-direction: column;
    gap: 2.4rem;
  }

  .p-locations__col {
    flex: none;
    width: 100%;
  }

  .p-locations__col-title {
    font-size: 1.5rem;
    letter-spacing: .15rem;
  }

  .p-locations__rep-label {
    margin-right: -.25rem;
    font-size: 1.3rem;
    letter-spacing: .25rem;
  }

  .p-locations__rep-names {
    width: 11.2rem;
  }

  .p-locations__rep-name {
    margin-right: -.8rem;
    font-size: 2.2rem;
    letter-spacing: .8rem;
  }

  .p-locations__other-list {
    flex-direction: column;
    gap: 1.6rem;
  }

  .p-locations__other-item {
    flex: none;
    padding: 2rem 2rem 2rem 1.8rem;
    font-size: 1.5rem;
  }
}

/* ==========================================================================
   p-works  実績・主な取引先
   ========================================================================== */

.p-works {
  padding: 10rem 0;
}

.p-works__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4rem;
}

.p-works__lead {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.8;
  color: #333;
}

.p-works__list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* 行の上下に29pxの余白を取り、行間の罫線で区切る（Figma #888） */
.p-works__row {
  display: flex;
  flex-direction: column;
  gap: 2.9rem;
  padding: 2.9rem 0;
}

.p-works__row:first-child {
  padding-top: 0;
}

.p-works__row:last-child {
  padding-bottom: 0;
}

.p-works__row + .p-works__row {
  border-top: 1px solid #888;
}

.p-works__row-main {
  display: flex;
  align-items: center;
  gap: 4rem;
}

/* ロゴの枠。ロゴごとの表示サイズはFigmaの実測値で個別に指定する */
.p-works__logo {
  display: flex;
  flex: 0 0 10.7939rem;
  align-items: center;
  justify-content: center;
  width: 10.7939rem;
  height: 5.2rem;
}

.p-works__logo-img {
  display: block;
}

.p-works__logo-img--tbs {
  width: 7.148rem;
  height: 4.02rem;
}

.p-works__logo-img--bs-tbs {
  width: 10.7939rem;
  height: 2.524rem;
}

.p-works__logo-img--tv-asahi {
  width: 9.79rem;
  height: 5.2rem;
}

.p-works__logo-img--fuji-tv {
  width: 5.33rem;
  height: 5.2rem;
}

.p-works__logo-img--ntv {
  width: 4.958rem;
  height: 2.305rem;
}

.p-works__logo-img--tv-tokyo {
  width: 6.996rem;
  height: 2.31rem;
}

.p-works__logo-img--nhk {
  width: 7.443rem;
  height: 2.142rem;
}

.p-works__logo-img--wowow {
  width: 12.02rem;
  height: 3.286rem;
}

/* 映画・CMはロゴの代わりに文字のラベル。
   字間の分だけ右に寄るため、padding-leftの半分で見た目を中央に戻す */
.p-works__label {
  display: flex;
  flex: 0 0 10.7939rem;
  align-items: center;
  justify-content: center;
  width: 10.7939rem;
  height: 5.2rem;
  padding-left: .711rem;
  background-color: rgba(246, 116, 27, .3);
  font-size: 1.6545rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .71145rem;
  color: #f6741b;
}

.p-works__text {
  flex: 1 1 0;
  min-width: 0;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: .054rem;
  color: #333;
}

.p-works__more {
  display: flex;
  align-self: flex-end;
  align-items: center;
  gap: .8rem;
  font-family: "Inter", sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #f6741b;
  white-space: nowrap;
}

.p-works__more-icon {
  flex-shrink: 0;
  width: 3.926rem;
  height: 2.4rem;
}

@media (max-width: 1023px) {
  /* ----- p-works ----- */
  .p-works {
    padding: 8rem 0;
  }

  .p-works__row-main {
    gap: 3rem;
  }

  .p-works__text {
    font-size: 1.6rem;
  }
}

@media (max-width: 767px) {
  .p-works {
    padding: 6rem 0;
  }

  .p-works__inner {
    gap: 3rem;
  }

  .p-works__lead {
    font-size: 1.4rem;
  }

  .p-works__row {
    gap: 2rem;
    padding: 2rem 0;
  }

  /* ロゴの横に本文を置くと本文が細くなるため、ロゴを上に積む */
  .p-works__row-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
  }

  .p-works__logo {
    justify-content: flex-start;
  }

  .p-works__label {
    justify-content: center;
  }

  .p-works__text {
    flex: none;
    width: 100%;
    font-size: 1.4rem;
  }
}