/* CSS Document */

/**********************************************************
* CSS表記（英語版のみ）
**********************************************************/
:root {
  --black: #444444;
  --main-color: #526f84;
  --sub-red: #c8113d;
  --font-en-sans: "Lato", sans-serif;
  --font-en-serif: "EB Garamond", serif;
  /* main_title_en_*.svg の viewBox="0 0 489.99 277.41" — 空の #mainTitleTarget でも高さが出るように（OA 移動先の getBoundingClientRect 用） */
  --main-title-en-aspect: 489.99 / 277.41;
}
body {
  font-family: var(--font-en-serif);
}
main{font-size: 1.25rem; line-height: 1.75; overflow: clip;}
@media (width <= 768px) {
  main{font-size: 1rem;}
}
img {pointer-events: none;}

/******　PC、スマホ・タブレット オンリー仕様　******/
@media (width <= 768px) {.pc_only {display: none;}}
@media not all and (width <= 768px) {.sp_only {display: none;}}

/**********************************************************
* メイン
**********************************************************/
.header_txt {
  font-family: var(--font-en-sans);
}
.header_txt .ad {
  letter-spacing: 0;
}
.header_txt .sponsored {
  letter-spacing: 0;
}

/* ファーストビュー（英語タイトル: 幅は従来どおり、縦は EN SVG の viewBox 比で確保） */
.mainTitle {
  width: var(--width-L);
  margin: 0 auto;
}
/* 横幅の「100% − 40px」相当は .mainTitle { width: var(--width-L) } の親幅で効かせる */
.mainTitle_inner {
  width: min(100%, 480px);
  aspect-ratio: var(--main-title-en-aspect);
}
.mainTitle_inner img,
.mainTitle_inner svg {
  display: block;
  width: 100%;
  height: auto;
}
/* fixed オーバーレイ内では 100% がビューポート基準になるため、.mainTitle_inner と同じ実効幅に var(--width-L) で合わせる */
.opening-title-host {
  width: min(var(--width-L), 480px);
  max-width: 100%;
  aspect-ratio: var(--main-title-en-aspect);
}
.opening-title-host svg {
  display: block;
  width: 100%;
  height: auto;
}
.mainImage {
  margin-top: -50px;
}
.mainImage_text .subTitle {
  font-size: 2.65rem;
  font-family: var(--font-en-serif);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.11111;
}
.fv_leadTxt {
  font-family: var(--font-en-serif);
  font-weight: 400;
  letter-spacing: 0.05em;
  text-align: left;
}
@media (width <= 810px) {
  .mainImage {
    margin-top: 0;
  }
}
@media (width <= 768px) {
  .mainTitle {
    justify-content: center;
    text-align: center;
  }
  .mainTitle_inner {
    width: min(100%, 400px);
  }
  .opening-title-host {
    width: min(var(--width-L), 400px);
  }
  .mainImage {
    margin-top: 40px;
  }
  .fv_leadTxt {
    margin-top: 27px;
  }
}

/* 登場人物プロフィール */
.profiles_name {
  font-size: 1.25rem;
  letter-spacing: 0.025em;
}
.profiles_role {
  margin-top: 0.75rem;
  letter-spacing: 0.025em;
  font-family: var(--font-en-sans);
}
.profiles_bio {
  font-size: 0.875rem;
  letter-spacing: 0;
  font-family: var(--font-en-serif);
  text-align: left;
}

/* インタビュー */
.interview_contents_title {
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 1.3;
}
.interview_contents_text {
  text-align: left;
}
.interview_contents_text span {
  font-weight: 900;
  font-family: var(--font-en-sans);
}