/* CSS Document */

/**********************************************************
* CSS表記
* 宣言順: position → display/box → font/text → border/background → transform → margin/padding → その他
**********************************************************/
:root {
  --black: #444444;
  --red: #e72410;
  --red-dark: #b32313;
  --fv-red: #d42b1e;
  --slate: #475156;
  --bg: #f4f4f4;
  --bubble: #fdefdb;
  --contest-bg: #fdeae6;
  --line: #cccccc;
  --font-ja-sans: "Noto Sans JP", sans-serif;
  --font-ja-serif: YakuHanMP, "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  --width-header: min(100% - 20px, 1000px);
  --width-M: min(100% - 40px, 800px);
  --width-S: min(100% - 40px, 720px);
  --radius: 16px;
}
body {
  font-family: var(--font-ja-sans);
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  color: var(--black);
}
main {
  overflow: clip;
  font-size: 1rem;
  line-height: 2;
}
img { pointer-events: none; }
.entry,
.contest { scroll-margin-top: 80px; }

@media (width <= 768px) {
  main { font-size: 0.875rem; }
}

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

/**********************************************************
* メイン
**********************************************************/
.header {
  background-color: var(--bg);
}
.header__inner {
  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: 40px 0 clamp(40px, 4vw, 48px);
}
.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);
  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__inner {
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 10px;
  }
  .header_txt { align-items: flex-start; }
}

/**********************************************************
* 共通
**********************************************************/
.label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  color: #fff;
  text-align: center;
  background-color: var(--red);
  border-radius: 5px;
  padding: 9px;
}
.note {
  font-size: 0.625rem;
  line-height: 1.4;
  text-indent: 0;
}

/**********************************************************
* ファーストビュー
**********************************************************/
.fv {
  background-color: var(--bg);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.10);
  padding-bottom: clamp(50px, 9.1145833vw, 70px);
}
.fv__hero {
  position: relative;
  padding-top: clamp(30px, 7.8vw, 60px);
}
.fv__band {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: clamp(160px, calc(30.95vw + 48px), 420px);
  background-color: var(--red);
}
.fv__photo {
  position: relative;
  z-index: 1;
  width: var(--width-M);
  margin: 0 auto;
}
.fv__photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 1600 / 900;
  border-radius: 20px;
}
.fv__content {
  width: var(--width-M);
  margin: clamp(35px, 9.722vw, 50px) auto 0;
}
.fv__catch {
  font-size: clamp(1.875rem, 6.51041667vw, 3.5rem);
  font-weight: 500;
  line-height: 1.25;
}
.fv__catch-em {
  font-style: normal;
  color: var(--fv-red);
}
.fv__lead {
  text-align: justify;
  text-indent: 1em;
  margin-top: 28px;
}
.fv__define {
  background-color: #fff;
  margin-top: 40px;
  padding: 30px;
}
.fv__define-title {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  border-bottom: 1px dotted var(--black);
  padding-bottom: 16px;
}
.fv__define-title::before {
  display: block;
  flex: none;
  width: 0.45em;
  height: 0.55em;
  background-color: var(--red);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  content: "";
}
.fv__define p {
  font-size: 0.875rem;
  text-align: justify;
  margin-top: 16px;
}
.fv__define-strong { font-weight: 700; }

/**********************************************************
* 目次
**********************************************************/
.index { border-bottom: 1px solid var(--line); }
.index__inner {
  width: var(--width-M);
  margin: 0 auto;
  padding-block: clamp(50px, 9.11458333vw, 70px);
}
.index__list {
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}
.index__list > li {
  display: flex;
  flex: none;
  width: 240px;
  max-width: 100%;
}
.index__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
}
@container (inline-size < 800px) {
  .index__list > li {
    width: clamp(240px, calc((100cqi - 40px) / 2), 300px);
  }
}
@container (inline-size < 520px) {
  .index__list > li {
    width: min(300px, 100%);
  }
}
.index__card .label {
  align-self: stretch;
  width: 100%;
}
.index__title {
  width: 100%;
  font-family: var(--font-ja-serif);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.33333;
  border-bottom: 1px dotted var(--black);
  margin-top: 15px;
  padding-bottom: 15px;
}
.index__role {
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.4;
  margin-top: 14px;
}
.index__name {
  font-family: var(--font-ja-serif);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1;
  margin-top: 6px;
}
.index__name span { font-size: 0.6em; font-weight: 500; }
.index__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  margin-top: 14px;
}
.index__pair .index__role { margin-top: 0; }
.index__name.alone { margin-top: 10px; }
.index__arrow {
  width: 41px;
  margin-top: auto;
  padding-top: 20px;
  transition: transform 0.2s ease;
}
.index__card:hover .index__arrow,
.index__card:focus-visible .index__arrow {
  transform: translateY(6px);
}

@media (width <= 768px) {
  .index__inner { padding-block: 40px 36px; }
}

/**********************************************************
* 講演・トーク
**********************************************************/
.entry__inner {
  width: var(--width-S);
  margin: 0 auto;
  padding-block: 64px 48px;
}
.entry__title {
  font-family: var(--font-ja-serif);
  font-size: clamp(1.5rem, 5.208333vw, 2.5rem);
  font-weight: 500;
  line-height: 1.35;
  margin-top: clamp(20px, 3.90625vw, 30px);
}
.entry__name,
.entry__names {
  font-family: var(--font-ja-serif);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.35;
  margin-top: 20px;
}
.entry__name span {
  font-size: 0.6em;
  font-weight: 500;
  margin-left: 0.5em;
}
.entry__names {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 1.25em;
  row-gap: 0;
}
.entry__names span span {
  font-size: 0.6em;
  font-weight: 500;
  margin-left: 0.5em;
}
.entry__role {
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.4;
  margin-top: 10px;
}
.entry__photo { margin-top: clamp(20px, 3.90625vw, 30px); }
.entry__photo img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.entry__body { margin-top: 30px; }
.entry__body p {
  font-family: var(--font-ja-serif);
  text-align: justify;
  text-indent: 1em;
}
.entry__body sup {
  font-size: 0.6em;
  font-weight: 500;
  vertical-align: super;
}
.entry__body .note {
  font-family: var(--font-ja-sans);
  text-indent: 0;
  margin-top: 20px;
}

@media (width <= 768px) {
  .entry__inner { padding-block: 48px 36px; }
}

/**********************************************************
* 図表
**********************************************************/
.graph {
  text-indent: 0;
  margin-block: 30px;
}
.graph__title {
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.2;
  border-bottom: 1px solid #717171;
  margin-bottom: 30px;
  padding-bottom: 20px;
}
.graph__title::before {
  display: inline-block;
  font-size: 0.7em;
  line-height: calc(1.2 / 0.7);
  letter-spacing: 0.1em;
  color: var(--red);
  vertical-align: top;
  margin-right: 1em;
  content: "図１";
}
.graph img {
  width: min(100%, 670px);
  height: auto;
  margin: 0 auto;
}
.graph__source {
  font-size: 0.625rem;
  line-height: 1.7;
  border-top: 1px solid #717171;
  margin-top: 30px;
  padding-top: 20px;
}

/**********************************************************
* 質疑
**********************************************************/
.qa-wrap {
  padding-block: 30px 140px;
}
.qa {
  width: var(--width-M);
  margin: 0 auto;
}
.qa__title-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.qa__title {
  position: relative;
  display: inline-block;
  font-size: clamp(1rem, 4.4444vw, 1.25rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--red);
  text-align: center;
}
.qa__title::before,
.qa__title::after {
  position: absolute;
  top: 50%;
  display: block;
  width: 100vw;
  height: 1px;
  background-color: var(--line);
  transform: translateY(-50%);
  content: "";
}
.qa__title::before {
  left: -102vw;
}
.qa__title::after {
  right: -102vw;
}
.qa__list {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: clamp(45px, 9.11458333vw, 70px);
}
.qa__item {
  position: relative;
  display: flex;
  align-items: center;
  padding-inline: clamp(100px, 16.92708333vw, 130px);
}
.qa__item--host { justify-content: flex-end; }
.qa__person {
  position: absolute;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: clamp(70px, 13.0208333vw, 100px);
  text-align: center;
}
.qa__item--guest .qa__person { left: 0; }
.qa__item--host .qa__person { right: 0; }
.qa__person img { width: 100%; height: auto; }
.qa__person figcaption {
  position: absolute;
  top: 100%;
  left: 50%;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--slate);
  white-space: nowrap;
  transform: translateX(-50%);
  margin-top: 4px;
}
.qa__person span { font-size: 0.75rem; font-weight: 700; }
.qa__text {
  position: relative;
  width: min(400px, 100%);
  font-size: 0.875rem;
  line-height: 1.7;
  text-align: justify;
  background-color: var(--bubble);
  padding: 16px 20px;
}
.qa__item--guest .qa__text::before,
.qa__item--host .qa__text::before {
  position: absolute;
  top: 50%;
  width: 20px;
  height: 16px;
  background-color: var(--bubble);
  transform: translateY(-50%);
  content: "";
}
.qa__item--guest .qa__text::before {
  left: -20px;
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}
.qa__item--host .qa__text::before {
  right: -20px;
  clip-path: polygon(100% 50%, 0 0, 0 100%);
}

@media (width <= 560px) {
  .qa__list { gap: 46px; }
  .qa__item { padding-inline: 0; }
  .qa__item--guest { padding-left: 100px; }
  .qa__item--host { padding-right: 100px; }
  .qa__item--guest .qa__text::before,
  .qa__item--host .qa__text::before {
    top: auto;
    bottom: 20px;
    transform: translateY(0);
  }
}

/**********************************************************
* コンテスト
**********************************************************/
.contest {
  position: relative;
  background-color: var(--contest-bg);
  padding: clamp(60px, 10.416667vw, 80px) 0 72px;
}
.contest__inner {
  width: var(--width-S);
  margin: 0 auto;
}
.contest__announce {
  position: absolute;
  top: -20px;
  left: 50%;
  width: 240px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  background-color: var(--red);
  border-radius: 999px;
  transform: translateX(-50%);
  margin: 0 auto 0;
  padding: 12px 0;
}
.contest__announce::after {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 12px;
  height: 12px;
  background-color: var(--red);
  transform: translateX(-50%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  content: "";
}
.contest__title {
  font-size: clamp(1.5625rem, 4.6875vw, 2.25rem);
  font-weight: 700;
  line-height: 1.333;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.contest__title span { display: inline-block; }
.contest__visual { margin-top: clamp(20px, 3.90625vw, 30px); }
.contest__visual img {
  width: 100%;
  height: auto;
  border-radius: 20px;
}
.contest__lead {
  letter-spacing: 0.05em;
  text-align: justify;
  text-indent: 1em;
  margin-top: clamp(20px, 5.208333vw, 40px);
}
.judges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px 80px;
  margin-top: clamp(60px, 9.11458333vw, 70px);
}
.judge__photo { position: relative; }
.judge__photo > img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.judge__photo > .judge__balloon {
  position: absolute;
  z-index: 1;
  top: -30px;
  left: 10px;
  width: 100px;
  height: auto;
}
.judge__label {
  width: fit-content;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  border: 1px solid currentColor;
  margin: 20px auto 0;
  padding: 0.25em 0.5em;
}
.judge__name {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  margin-top: 12px;
}
.judge__name span { font-size: 0.6em; font-weight: 500; }
.judge__role {
  font-size: 0.625rem;
  line-height: 1;
  text-align: center;
  margin-top: 10px;
}
.judge__text {
  font-size: 0.875rem;
  letter-spacing: -0.025em;
  text-align: justify;
  text-indent: 1em;
  margin-top: 20px;
}

@media (width <= 768px) {
  .judges { grid-template-columns: 1fr; }
}

/**********************************************************
* スポンサー・ロゴ
**********************************************************/
.sponsor {
  width: 100%;
  padding: clamp(50px, 13.888889vw, 70px) 0;
}
.sponsor__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--width-M);
  margin: 0 auto;
}
.sponsor__logo img { width: clamp(280px, 77.7778vw, 360px); }