/* CSS Document */

/**********************************************************
* CSS表記
* vol.01 / vol.02 / vol.03 共通で使える変数・コンポーネント
**********************************************************/
:root {
  --black: #444444;
  --red: #e62310;
  --red-light: #ff8282;
  --red-dark: #972618;
  --font-ja-sans: "Noto Sans JP", sans-serif;
  --width-header: min(100% - 20px, 1000px);
  --width-article: min(100% - 40px, 800px);
  --ease: ease;
}
body {
  color: var(--black);
  font-family: var(--font-ja-sans);
  -webkit-font-feature-settings: "palt";
  -moz-font-feature-settings: "palt";
  font-feature-settings: "palt";
}
main {
  overflow: visible;
  font-size: 1rem;
  line-height: 2;
}
@media (width <= 768px) {
  main {
    font-size: 0.875rem;
  }
}
img {
  pointer-events: none;
}

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

/**********************************************************
* ヘッダー
**********************************************************/
.header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  width: var(--width-header);
  line-height: 1;
  margin: 0 auto;
  padding-top: 40px;
  padding-bottom: 46px;
}
.header_logo {
  display: inline-block;
}
.header_logo img {
  width: clamp(240px, 36.458vw, 280px);
}
.header_txt {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(9px, 1.1719vw, 12px);
  font-family: var(--font-ja-sans);
  line-height: 1;
}
.header_txt .ad {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.header_txt .sponsored {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.05em;
}

@media (width <= 768px) {
  .header {
    flex-direction: column;
    justify-content: flex-start;
    padding: 10px 0 34px;
  }
  .header_txt {
    align-items: flex-start;
  }
}

/**********************************************************
* ファーストビュー
* vol差し替え: .fv__picture の画像 / .fv__nameplate の氏名 / .fv__vol のSVG
**********************************************************/
.fv {
  position: relative;
}
.fv__series {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4em;
  width: 100%;
  color: #fff;
  font-size: clamp(1.125rem, 3.125vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  text-align: center;
  background: linear-gradient(90deg, var(--red) 0%, var(--red-dark) 100%);
  padding: clamp(18px, 2.2vw, 26px) 0;
}
.fv__series-label {
  font-size: clamp(0.8125rem, 2vw, 1rem);
}
.fv__series-title {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.3em;
}
.fv__series-dash {
  letter-spacing: 0;
}
.fv__visual {
  position: relative;
  width: 100%;
  margin: 0 auto;
}
.fv__picture,
.fv__picture img {
  display: block;
  width: 100%;
  height: auto;
}
.fv__picture img {
  aspect-ratio: 2;
  object-fit: cover;
  object-position: center 30%;
}
.fv__nameplate {
  position: absolute;
  z-index: 2;
  bottom: 20px;
  left: 20px;
  width: fit-content;
  color: #fff;
  line-height: 1;
  font-weight: 700;
  background: linear-gradient(90deg, var(--red) 0%, var(--red-dark) 100%);
  padding: 23px 15px 15px;
}
.fv__name {
  font-size: clamp(1.5rem, 3.645833vw, 1.75rem);
  letter-spacing: 0.05em;
}
.fv__name-en {
  font-size: clamp(0.6875rem, 1.82291667vw, 0.875rem);
  letter-spacing: 0.05em;
  color: var(--red-light);
  margin-top: 8px;
}
.fv__title {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.5;
  margin-top: 20px;
}
.fv__vol {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: min(100% - 40px, 900px);
  margin: 0 auto;
  margin-top: -95px;
}
.fv__vol img {
  width: clamp(144px, 37.5vw, 288px);
  height: auto;
}

@media (width <= 768px) {
  .fv__series {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
  }
  .fv__picture img {
    aspect-ratio: 1.4286;
    object-position: center 20%;
  }
  .fv__nameplate {
    position: static;
    width: 100%;
  }
  .fv__vol {
    margin-top: calc(-1 * clamp(22px, 6.11111vw, 45px));
  }
}

/**********************************************************
* リード文
**********************************************************/
.lead-content {
  width: var(--width-article);
  margin: 0 auto;
  padding-top: 36px;
  padding-bottom: clamp(70px, 13.02083333vw, 100px);
}
.lead-content__title {
  font-size: clamp(1.375rem, 4.166667vw, 2rem);
  font-weight: 700;
  line-height: 1.4375;
}
.lead-content__text {
  letter-spacing: 0.05em;
  text-align: justify;
  margin-top: clamp(24px, 5.20833333vw, 40px);
}

/**********************************************************
* インタビュー本文
**********************************************************/
.article__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(50px, 9.11458333vw, 70px);
  width: var(--width-article);
  margin: 0 auto;
  padding-bottom: clamp(100px, 19.53125vw, 150px);
}
.article__section {
  text-align: justify;
  border-top: 5px solid var(--red);
  padding-top: clamp(30px, 5.20833333vw, 40px);
}
.article__heading {
  font-size: clamp(1.25rem, 5.55556vw, 1.625rem);
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: clamp(30px, 5.20833333vw, 40px);
}
.article__block {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.article__em {
  font-weight: 700;
}
.article__figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/**********************************************************
* PROFILE
**********************************************************/
.profile {
  border-top: 1px solid var(--black);
  padding-top: 15px;
}
.profile__heading {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
}
.profile__text {
  font-size: 0.75rem;
  line-height: 1.66667;
  text-align: justify;
  margin-top: 25px;
}
.article__note {
  font-size: 0.625rem;
  line-height: 1.6;
  margin-top: 40px;
}
.article__note a {
  color: var(--red);
  text-decoration: underline;
}

/**********************************************************
* 他ページ・リンク（vol.01 / vol.03）
**********************************************************/
.pager {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pager__item {
  background: linear-gradient(to right, var(--red), var(--red-dark), var(--red));
  background-size: 200% auto;
  background-position: left center;
  transition: background-position 0.4s var(--ease);
}
.pager__item:hover {
  background-position: right center;
}
.pager__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  width: var(--width-article);
  color: #fff;
  margin: 0 auto;
  padding: clamp(20px, 3.90625vw, 30px) 0;
}
.pager__text {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
}
.pager__vol {
  font-size: 1.125rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  line-height: 1;
}
.pager__title {
  font-size: clamp(1.125rem, 2.60416667vw, 1.25rem);
  font-weight: 700;
  line-height: 1.3;
}
.pager__arrow {
  flex-shrink: 0;
  width: clamp(40px, 7.8125vw, 60px);
  height: auto;
  transition: transform 0.25s var(--ease);
}
.pager__item:hover .pager__arrow {
  transform: translateX(4px);
}

/**********************************************************
* スポンサー・ロゴ
**********************************************************/
.sponsor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  width: var(--width-article);
  text-align: center;
  margin: 0 auto;
  padding: 70px 0 clamp(55px, 9.11458333vw, 70px);
}
.sponsor__lead {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.075em;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.sponsor__logo {
  width: clamp(270px, 39.0625vw, 300px);
  height: auto;
}