@charset "UTF-8";
/* Webフォント：追加ヘッダの読み込みに頼らず、このCSSからも確実に読み込む（SPで太字が効かない対策） */
@import url("https://fonts.googleapis.com/css2?family=Cardo:ital@0;1&family=Noto+Sans+JP:wght@400;500&family=Noto+Serif+JP:wght@500;600&family=Shippori+Mincho:wght@600&display=swap");
/* =========================================================
   Special Interview「美を紡ぐひと」#01 早坂香須子さん
   - スタイルはすべて .iv 配下に限定（サイト共通CSSとの干渉防止）
   - ブレイクポイント：767px以下をSP
   ========================================================= */

/* ---------------------------------------------------------
   レイアウト調整（このページだけに適用）
   - layout.css の .pane-contents .container は
     「左メニュー（auto）＋メイン（1fr）」の2列grid。
     このページは左メニューを使わないため grid を解除する
   - コンテナ幅はデザインどおり1200pxに固定し、中央に配置する
     （幅100%にすると、UNITE側の要素が中身の幅に縮んで左寄せになる）
   --------------------------------------------------------- */
.pane-contents .container:has(#interview) {
  display: block;
}

@media (min-width: 768px) {
  .pane-contents .container:has(#interview) {
    width: 1200px;
    margin: 0 auto;
  }
}

#interview.forcms_block {
  width: 100%;
}

/* ---------------------------------------------------------
   Base
   --------------------------------------------------------- */
.iv {
  --iv-green: #40614e;
  --iv-beige: #f2deb6;
  --iv-accent: #e5866d;
  --iv-text: #191919;
  --iv-strong: #191919;
  --iv-gray: #e8e8e8;
  --iv-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --iv-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --iv-mincho: "A1明朝", "A1 Mincho", "Shippori Mincho", "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --iv-en: "Cardo", "Times New Roman", serif;

  overflow-x: hidden;
  overflow-x: clip; /* 左右フローティング時の横スクロール防止 */
  padding-bottom: 140px;
  background: #fff;
  color: var(--iv-text);
  font-family: var(--iv-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.875;
  letter-spacing: 0;
  text-align: left;
  font-feature-settings: normal; /* サイト共通CSSの palt（字詰め）を解除し、デザインどおりの字送りにする */
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

.iv *,
.iv *::before,
.iv *::after {
  box-sizing: border-box;
}

.iv h1,
.iv h2,
.iv p,
.iv figure {
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.iv img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.iv a {
  color: inherit;
  text-decoration: none;
}

.iv .u-sp {
  display: none;
}

/* ---------------------------------------------------------
   Layout
   --------------------------------------------------------- */
.iv .iv__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.iv .iv__body {
  width: 80%; /* 本文幅 960px / 1200px */
  margin: 0 auto;
}

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */
.iv .iv-hero {
  display: grid;
  grid-template-columns: 346px 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "head photo"
    "foot photo";
  height: 628px;
  background: var(--iv-beige);
  color: var(--iv-green);
}

.iv .iv-hero__head {
  grid-area: head;
  padding: 96px 46px 0 20px;
  text-align: right;
}

.iv .iv-hero__label {
  font-family: var(--iv-en);
  font-size: 21px;
  line-height: 1.2857;
  letter-spacing: 0.1em;
}

.iv .iv-hero__title {
  /* サイト共通CSSのh1指定に左右されないよう、右揃えを明示 */
  display: block;
  float: none;
  width: auto;
  max-width: none;
  margin: 64px -0.1em 0 0;
  padding: 0;
  text-align: right;
  font-family: var(--iv-mincho);
  font-size: 36px;
  font-weight: 600;
  line-height: 1.361;
  letter-spacing: 0.1em;
}

.iv .iv-hero__sub {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-family: var(--iv-en);
  font-size: 18px;
  font-style: italic;
  line-height: 1.4;
}

.iv .iv-hero__sub::before {
  content: "";
  width: 90px;
  height: 1px;
  background: currentColor;
  transform: scaleY(0.5);
}

.iv .iv-hero__foot {
  grid-area: foot;
  padding: 0 46px 84px 20px;
  text-align: right;
}

.iv .iv-hero__num {
  font-size: 14px;
  line-height: 1.4;
}

.iv .iv-hero__role {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.5;
}

.iv .iv-hero__name {
  margin-top: 6px;
  font-family: var(--iv-mincho);
  font-size: 25px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.1em;
}

.iv .iv-hero__name-suffix {
  margin-left: 0.1em;
  font-size: 21px;
}

.iv .iv-hero__en {
  margin-top: 12px;
  font-family: var(--iv-en);
  font-size: 18px;
  font-style: italic;
  line-height: 1.4;
}

.iv .iv-hero__photo {
  grid-area: photo;
  overflow: hidden;
}

/* ---------------------------------------------------------
   Lead
   --------------------------------------------------------- */
.iv .iv-lead {
  margin-bottom: 76px;
  padding: 92px 0 38px;
  border-bottom: 0.5px solid var(--iv-green);
}

.iv .iv-lead__title {
  padding-left: 0.2em; /* 字間分の中央ずれ補正 */
  color: var(--iv-green);
  font-family: var(--iv-serif);
  font-size: 33px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.2em;
  text-align: center;
}

.iv .iv-lead__text {
  margin-top: 20px;
  color: #323232;
  font-weight: 500;
  line-height: 2.125;
  text-align: justify;
}

/* ---------------------------------------------------------
   Heading
   --------------------------------------------------------- */
.iv .iv-heading {
  margin: 0 0 45px;
  padding: 0 0 0 0.2em;
  color: var(--iv-green);
  font-family: var(--iv-serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 36px;
  letter-spacing: 0.2em;
  text-align: center;
}

/* 写真の横に並ぶ見出し（字間の中央補正をなくし、1行の幅をデザインに合わせる） */
@media (min-width: 768px) {
  .iv .iv-media .iv-heading {
    padding-left: 0;
  }
}

/* 写真の横に並ぶ見出しの開始位置 */
.iv .iv-heading--offset-l {
  padding-top: 40px;
}

.iv .iv-heading--offset-m {
  margin-bottom: 65px;
  padding-top: 22px;
}

.iv .iv-heading--offset-s {
  margin-top: -6px;
  margin-bottom: 65px;
  padding-top: 0;
}

/* ---------------------------------------------------------
   Q & A
   --------------------------------------------------------- */
.iv .iv-q {
  margin-bottom: 30px;
  color: var(--iv-strong);
  font-weight: 500;
  text-align: justify;
}

.iv .iv-a {
  margin-bottom: 30px;
  text-align: justify;
}

.iv .iv-a__name {
  margin-right: 1em;
  color: var(--iv-accent);
  font-weight: 500;
}

.iv .iv-a__note {
  display: block;
  font-size: 12px;
  line-height: 1.6;
}

/* ---------------------------------------------------------
   Figure
   --------------------------------------------------------- */
.iv .iv-fig {
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

/* 左に配置（本文の外側へ120pxはみ出す） */
.iv .iv-fig--left {
  float: left;
  width: 62.5%;
  margin: 0 5% 30px -12.5%;
}

/* 右に配置 */
.iv .iv-fig--right {
  float: right;
  width: 62.5%;
  margin: 0 -12.5% 30px 5.83%; /* 写真とテキストの間 56px */
}

@media (min-width: 768px) {
  .iv .iv-fig--right.iv-fig--gap-l {
    margin-top: 8px;
    margin-left: 7.5%; /* 写真とテキストの間 72px */
  }
}

/* 写真に対するテキストの縦位置をデザインに合わせる（テキストを8px上げる） */
.iv .iv-media--lift {
  margin-top: -8px;
}

.iv .iv-fig--portrait {
  aspect-ratio: 3 / 4;
}

.iv .iv-fig--portrait.iv-fig--drop {
  /* 本文の上2行は全幅、3行目から回り込み。写真はさらに下げて、テキストとの間に余白をとる */
  padding-top: 110px;
  aspect-ratio: auto;
  shape-outside: inset(60px 0 0 0);
}

.iv .iv-fig--drop img {
  height: auto;
  aspect-ratio: 3 / 4;
}

.iv .iv-fig--desk {
  width: 55.2%;
  margin-right: 7.3%;
  aspect-ratio: 530 / 396;
}

/* 縦に2枚並ぶ写真（左配置） */
.iv .iv-fig-stack {
  display: grid;
  gap: 50px;
  float: left;
  width: 62.5%;
  margin: 0 5% 30px -12.5%;
}

/* 全幅 */
.iv .iv-fig--wide,
.iv .iv-fig-pair,
.iv .iv-fig-trio {
  clear: both;
  width: 125%;
  margin: 70px -12.5% 50px;
}

.iv .iv-fig--wide {
  aspect-ratio: 1200 / 450;
}

.iv .iv-fig--band {
  aspect-ratio: 1200 / 300;
}

.iv .iv-fig-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.iv .iv-fig-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 27px;
  margin-top: 100px;
}

.iv .iv-fig-trio .iv-fig {
  aspect-ratio: 382 / 286;
}

.iv .iv-fig--wide + .iv-fig--wide,
.iv .iv-fig--wide + .iv-fig-pair,
.iv .iv-fig-pair + .iv-fig--wide,
.iv .iv-fig-trio + .iv-fig--wide {
  margin-top: 50px;
}

/* ---------------------------------------------------------
   Media（写真＋回り込みテキストのまとまり）
   PC：通常フロー（テキストが写真に回り込む）
   SP：縦並び＋orderで写真の位置を入れ替え
   --------------------------------------------------------- */
.iv .iv-media--spaced {
  margin-top: 100px;
}

/* 写真の高さまでを1つのまとまりにし、続く本文を写真の下から全幅で始める（PCのみ） */
@media (min-width: 768px) {
  .iv .iv-media--contain {
    display: flow-root;
  }

  .iv .iv-media--contain > .iv-fig--desk,
  .iv .iv-media--contain > .iv-fig-stack {
    margin-bottom: 34px;
  }
}

/* ---------------------------------------------------------
   Information
   --------------------------------------------------------- */
.iv .iv-info {
  clear: both;
  padding-top: 140px;
  text-align: center;
}

.iv .iv-info__title {
  margin-bottom: 38px;
  color: var(--iv-green);
  font-family: var(--iv-en);
  font-size: 24px;
  font-style: italic;
  line-height: 1.4;
}

.iv .iv-info__banner {
  display: block;
  overflow: hidden;
  width: 83.33%;
  max-width: 800px;
  margin: 0 auto;
  aspect-ratio: 2 / 1;
  background: var(--iv-gray);
  transition: opacity 0.3s ease;
}

.iv .iv-info__banner:hover {
  opacity: 0.8;
}

/* ---------------------------------------------------------
   Profile
   --------------------------------------------------------- */
.iv .iv-profile {
  display: flex;
  align-items: flex-start;
  gap: 49px;
  width: 94.4%;
  max-width: 906px;
  margin: 165px auto 0;
}

.iv .iv-profile__photo {
  flex: 0 0 300px;
  overflow: hidden;
  aspect-ratio: 300 / 399;
}

.iv .iv-profile__body {
  flex: 1;
  padding-top: 34px;
  font-size: 14px;
  line-height: 2;
}

.iv .iv-profile__label {
  margin-bottom: 12px;
  color: var(--iv-green);
  font-family: var(--iv-en);
  font-size: 20px;
  font-style: italic;
  line-height: 1.4;
}

.iv .iv-profile__name {
  margin-bottom: 22px;
  font-size: 16px;
  line-height: 1.75;
}

.iv .iv-profile__name-en {
  font-family: var(--iv-en);
  font-size: 18px;
}

.iv .iv-profile__text + .iv-profile__text {
  margin-top: 28px;
}

/* ---------------------------------------------------------
   Animation（スクロールでフローティング）
   JSが .is-anim を付与した場合のみ初期状態を非表示にする
   動きはBAUMジャーナルに合わせる（移動30px／1秒／ease）
   --------------------------------------------------------- */
.iv.is-anim [data-anim] {
  opacity: 0;
  transition:
    opacity 1s ease,
    transform 1s ease;
  transition-delay: var(--iv-delay, 0s);
}

.iv.is-anim [data-anim="up"] {
  transform: translate3d(0, 30px, 0);
}

.iv.is-anim [data-anim="left"] {
  transform: translate3d(-30px, 0, 0);
}

.iv.is-anim [data-anim="right"] {
  transform: translate3d(30px, 0, 0);
}

.iv.is-anim [data-anim].is-inview {
  opacity: 1;
  transform: none;
}

/* =========================================================
   SP
   ========================================================= */
@media (max-width: 767px) {
  .iv {
    padding-bottom: 80px;
    line-height: 2;
  }

  .iv .u-sp {
    display: inline;
  }

  .iv .u-pc {
    display: none;
  }

  .iv .iv__inner {
    padding: 0 30px;
  }

  .iv .iv__body {
    width: auto;
  }

  /* Hero */
  .iv .iv-hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "head"
      "photo"
      "foot";
    height: auto;
    margin: 0 -30px;
  }

  .iv .iv-hero__head {
    padding: 75px 48px 0;
  }

  .iv .iv-hero__label {
    font-size: 17px;
  }

  .iv .iv-hero__title {
    margin-top: 22px;
    font-size: 29px;
  }

  .iv .iv-hero__sub {
    margin-top: 8px;
    font-size: 14.5px;
  }

  .iv .iv-hero__sub::before {
    width: 73px;
  }

  .iv .iv-hero__photo {
    margin-top: 35px;
    aspect-ratio: 390 / 275;
  }

  .iv .iv-hero__foot {
    padding: 36px 48px 26px;
  }

  .iv .iv-hero__role {
    margin-top: 10px;
    font-size: 14px;
  }

  .iv .iv-hero__name {
    margin-top: 8px;
    font-size: 24px;
  }

  .iv .iv-hero__name-suffix {
    margin-left: 0;
    font-size: 24px;
  }

  .iv .iv-hero__en {
    margin-top: 14px;
    font-size: 16px;
  }

  /* Lead */
  .iv .iv-lead {
    margin-bottom: 40px;
    padding: 70px 0 40px;
  }

  .iv .iv-lead__title {
    padding-left: 0.2em;
    font-size: 20px;
    line-height: 1.7;
    letter-spacing: 0.2em;
  }

  .iv .iv-lead__text {
    margin-top: 36px;
    padding: 0 9px;
    line-height: 2;
  }

  /* Heading */
  .iv .iv-heading,
  .iv .iv-heading--offset-l,
  .iv .iv-heading--offset-m,
  .iv .iv-heading--offset-s {
    margin: 0 -12px 60px;
    padding: 40px 0 0 0.2em;
    font-size: min(18px, 4.62vw); /* 390px幅で18px。狭い端末でも1行16文字を収める */
    line-height: 2;
    letter-spacing: 0.2em;
  }

  /* Q & A */
  .iv .iv-q,
  .iv .iv-a {
    margin-bottom: 32px;
  }

  .iv .iv-a__note {
    font-size: 14px;
    line-height: 2.2857;
  }

  /* Media */
  .iv .iv-media {
    display: flex;
    flex-direction: column;
  }

  .iv .iv-media > .iv-heading {
    order: -2;
  }

  .iv .iv-media > .is-sp-first {
    order: -1;
  }

  .iv .iv-media > .is-sp-last {
    order: 1;
  }

  .iv .iv-media > .is-sp-after {
    order: 2;
  }

  .iv .iv-media--spaced,
  .iv .iv-media--lift {
    margin-top: 0;
  }

  /* Figure */
  .iv .iv-fig--left,
  .iv .iv-fig--right,
  .iv .iv-fig--desk,
  .iv .iv-fig-stack {
    float: none;
    width: auto;
    margin: 0 0 32px;
  }

  .iv .iv-fig--portrait.iv-fig--drop {
    padding-top: 0;
    shape-outside: none;
  }

  .iv .iv-fig--desk {
    aspect-ratio: 4 / 3;
  }

  .iv .iv-fig-stack {
    gap: 14px;
  }

  .iv .iv-fig--wide,
  .iv .iv-fig-trio,
  .iv .iv-fig--wide + .iv-fig--wide,
  .iv .iv-fig-pair + .iv-fig--wide,
  .iv .iv-fig-trio + .iv-fig--wide {
    width: auto;
    margin: 0 -30px 32px;
  }

  .iv .iv-fig-pair,
  .iv .iv-fig--wide + .iv-fig-pair {
    grid-template-columns: 1fr;
    gap: 14px;
    width: auto;
    margin: 0 0 32px;
  }

  .iv .iv-fig-trio {
    gap: 7px;
  }

  /* Information */
  .iv .iv-info {
    padding-top: 80px;
  }

  .iv .iv-info__title {
    margin-bottom: 30px;
    font-size: 18px;
  }

  .iv .iv-info__banner {
    width: 100%;
  }

  /* Profile */
  .iv .iv-profile {
    flex-direction: column;
    gap: 0;
    width: auto;
    margin-top: 100px;
  }

  .iv .iv-profile__photo {
    flex: none;
    width: 100%;
    aspect-ratio: 330 / 439;
  }

  .iv .iv-profile__body {
    padding: 36px 15px 0;
    line-height: 1.857;
  }

  .iv .iv-profile__label {
    margin-bottom: 24px;
    font-size: 18px;
    text-align: center;
  }

  .iv .iv-profile__name {
    margin-bottom: 18px;
    font-size: 14px;
    line-height: 1.857;
  }

  .iv .iv-profile__name-en {
    font-size: 14px;
  }

  /* SPはすべて下からフローティング */
  .iv.is-anim [data-anim="left"],
  .iv.is-anim [data-anim="right"] {
    transform: translate3d(0, 30px, 0);
  }
}

/* 動きを減らす設定のユーザーにはアニメーションを適用しない */
@media (prefers-reduced-motion: reduce) {
  .iv.is-anim [data-anim] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}