@charset "UTF-8";
/* 共通パーツ。画像・色・字下げは2025年の聖剣サイトに準拠。 */
:root {
  --content-width: 1100px;
  --bg-main: #000000;
  --text-main: #000000;
  --title-main: #002F79;
  --accent-arrow: #FF9B00;
  --link-main: #0090E7;
  --header-height: 80px;
}
@media (max-width: 959px) {
  :root {
    --header-height: 50px;
  }
}

/* タイトル */
.title {
  color: var(--title-main);
  font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
  font-weight: 700;
  font-style: normal;
  text-align: center;
  font-size: 4.0rem;
  line-height: 1;
  margin: 50px 0 40px 0;
  text-shadow: 1px 1px 2px #FFFFFF;
}
@media screen and (max-width: 960px) {
  .title {
    font-size: 3.2rem;
    margin: 10px 0 40px 0;
  }
}
.title_img {
  text-align: center;
  margin: 10px 0 0px 0;
}

/* ボックス：YSLの寸法・余白仕様、聖剣の配色 */
.intro_box1,
.tic_box1,
.comment_box1 {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--content-width);
  font-size: 1.6rem;
  background-color: rgba(255,255,255,0.30);
  border: 1px solid #A4965C;
  border-radius: 1.3rem;
}

.tic_box1 {
  margin: 0 auto 30px;
  line-height: 1.8;
  padding: 1.5em 2.3em;
}

@media (max-width: 960px) {
  .tic_box1 {
    font-size: 1.5rem;
    line-height: 1.7;
    margin-bottom: 20px;
    padding: 1em 1.4em;
  }
}

/* イントロ */
.intro_box1 {
  margin: 0 auto;
  line-height: 1.9;
  padding: 1.8em 2.5em;
}

@media (max-width: 960px) {
  .intro_box1 {
    padding: 1.2em 1.5em;
  }
}

/* 内側の幅を狭めず、親ボックスのpaddingで余白を統一する。 */
.box_text1 {
  width: 100%;
  max-width: none;
  margin: 0;
  text-align: left;
}

/* 聖剣のゲーム紹介。画像・本文とも親ボックスの内幅に合わせる。 */
.intro_box9 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  margin: 1rem 0 0;
  padding: 0 0 1rem;
}

/* コメントも同じ親padding方式に揃え、聖剣の枠と色を保持。 */
.comment_box1 {
  margin: 0 auto 30px;
  padding: 1.8em 2.5em;
  line-height: 1.9;
}
@media (max-width: 960px) {
  .comment_box1 {
    padding: 1.2em 1.5em;
  }
}

/* サイズ・余白ユーティリティ */
.img100per {
  width: 100%;
}

.img50per {
  width: 50%;
}

.big0 {
  font-size: 1.6rem;
  font-weight: bold;
}
.big1 {
  font-size: 1.9rem;
  font-weight: bold;
}
.big2 {
  font-size: 2.4rem;
  font-weight: bold;
}

.small1 {
  font-size: 1.0rem;
}
.small2 {
  font-size: 1.3rem;
}

.small4 {
  font-size: 65%;
}

.mar_t5 {
  margin-top: 5px;
}
.mar_t10 {
  margin-top: 10px;
}
.mar_t15 {
  margin-top: 15px;
}
.mar_t20 {
  margin-top: 20px;
}
.mar_t25 {
  margin-top: 25px;
}
.mar_t30 {
  margin-top: 30px;
}
.mar_t40 {
  margin-top: 40px;
}

.mar_t50 {
  margin-top: 50px;
}
.mar_t60 {
  margin-top: 60px;
}
.mar_t70 {
  margin-top: 70px;
}

.mar_b10 {
  margin-bottom: 10px;
}

@media screen and (max-width: 960px) {
  .big0 {
    font-size: 1.5rem;
  }
  .big1 {
    font-size: 1.7rem;
  }
  .big2 {
    font-size: 2.0rem;
  }

  .small1 {
    font-size: 0.9rem;
  }
  .small2 {
    font-size: 1.2rem;
  }

  .mar_t10 {
    margin-top: 8px;
  }
  .mar_t15 {
    margin-top: 13px;
  }
  .mar_t20 {
    margin-top: 16px;
  }
  .mar_t25 {
    margin-top: 20px;
  }
  .mar_t30 {
    margin-top: 24px;
  }
  .mar_t40 {
    margin-top: 28px;
  }

  .mar_t50 {
    margin-top: 38px;
  }
  .mar_t60 {
    margin-top: 45px;
  }
  .mar_t70 {
    margin-top: 50px;
  }

  .mar_b10 {
    margin-bottom: 8px;
  }
}

/* テキスト関連 */
small {
  font-size: 1.4rem;
  line-height: 1.7;
}

.midashi_text1 {
  color: #B38F19;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(255,216,37,1.00);
}
.midashi_text2 {
  color: #193B76;
  font-weight: bold;
}
.midashi_text3 {
  color: #001F58;
  font-weight: bold;
}
.midashi_text4 {
  color: #F40A60;
  font-weight: bold;
}

.text_arrow {
  color: var(--accent-arrow);
  font-weight: bold;
}

.text1em {
  padding-inline-start: 1em;
  text-indent: -1em;
}

.text3em {
  padding-inline-start: 3em;
  text-indent: -3em;
}

.text1em_all {
  padding-inline-start: 1em;
}

/* 記号は本文に記述する。※・≫・箇条書きの折り返しを1文字分下げる。
<div class="text1em">※注意事項</div>
text1em_all は全行字下げ、text3em は3文字分のぶら下げ。 */
.text-center {
  text-align: center;
}

.title_img img {
  width: 100%;
  max-width: 520px;
}
:where([id]) {
  scroll-margin-top: var(--header-height);
}
:where(a, button):focus-visible {
  outline: 2px solid var(--link-main);
  outline-offset: 4px;
}
iframe {
  border: 0;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  /* NEWSとボタンの短いホバーは、元サイトと同様に維持する。 */
  *:not(.news_list a):not(.cast-movie a):not(.btn_slide):not(.btn_slide *),
  *:not(.btn_slide)::before,
  *:not(.btn_slide)::after {
    transition-duration: 0.01ms !important;
  }
}

/* 本文・素材サイズ */
.width-full {
  width: 100%;
}
.content-wide {
  width: 100%;
  max-width: var(--content-width);
}
.game-title-image {
  width: 100%;
  max-width: 522px;
}
.sponsor-image {
  width: 60%;
  max-width: 190px;
}

/* イントロ：2025年公演 */
.intro-2025-title {
  text-align: left;
}
.intro-2025-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 30px;
  align-items: start;
}
.intro-2025-visual img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 768px) {
  .intro-2025-title {
    text-align: center;
  }
  .intro-2025-title img {
    width: 155px;
    max-width: 100%;
    height: auto;
  }
  .intro-2025-content {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .intro-2025-visual {
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
  }
}