@charset "UTF-8";

/* components.css（共通パーツ集） */

/* =========================
カラー設定
========================= */
:root {

  /* =========================
  Base
  ========================= */
  --bg-main: #01020A;
  --text-main: #E7E3DC;
  --text-sub: #CBCBCB;
  --text-muted: #9A948A;
  --text-white: #FFFFFF;

  /* =========================
  Accent
  ========================= */
  --accent1: #E1B04F;
  --accent2: #D30C0A;
  --accent3: #EB1E1C;
  --accent4: #CBC2A3;
  --accent5: #E11E1F;
  --accent6: #EA192B;

  /* =========================
  Border / Line
  ========================= */
  --line-main: #5D4F3F;
  --line-sub: #5D4F3F;
  --line-soft: rgba(255,255,255,0.08);
  --line-hover: #60553D;

  /* =========================
  Header
  ========================= */

  /* =========================
  Footer
  ========================= */
  --footer-grad-1: rgba(1,2,10,0.60);
  --footer-grad-2: rgba(1,2,10,0.70);

  /* =========================
  Box
  ========================= */
  --box-bg: rgba(1,2,10,0.40);

  /* =========================
  News
  ========================= */

  /* =========================
  Fixed Btn（固定ボタン）
  ========================= */
  --fixed-btn-bg: rgba(17,19,32,0.85);
}

/* =========================
Title（共通）
========================= */
.title {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-size: 5.0rem;
  line-height: 1;
  letter-spacing: 0.05rem;
  text-align: center;
  margin: 0;

  /* 赤→ピンク */
  background: linear-gradient(to bottom, var(--accent3), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* 一文字目だけ赤 */
.title_first {
  background: none;
  -webkit-text-fill-color: var(--accent5);
  color: var(--accent5);
}

@media screen and (max-width: 960px) {
  .title {
    font-size: 3.1rem;
  }

}

/* =========================
STORY title（共通）
========================= */
.story_title {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-size: 2.6rem;
  line-height: 1.4;
  margin: 0;

  /* グラデ */
  background: linear-gradient(to bottom, var(--accent3), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

@media screen and (max-width: 960px) {
  .story_title {
    font-size: 2.1rem;
  }

}

/* =========================
Text helpers
========================= */
small {
  font-size: 0.85em;
  line-height: 1.65;
}

.small1 {
  font-size: 88%;
}

.small2 {
  font-size: 80%;
}

.small3 {
  font-size: 70%;
  line-height: 1;
}

/* schedule等で <small> を使わず囲いたい時用 */
.small-note {
  font-size: 0.85em;
  line-height: 1.65;
}

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

.text1em_all {
  padding-left: 1em;
}

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

.text_arrow2 {
  font-weight: bold;
  background: linear-gradient(to left, var(--accent3) 50%, var(--accent1) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.text_arrow3 {
  color: #50B1E4;
  font-weight: bold;
}

/* 見出し用 */
.midashi_text1 {
  color: var(--accent1);
  font-weight: bold;
}

.midashi_text2 {
  color: var(--accent4);
  font-weight: bold;
}

.midashi_text3 {
  color: var(--accent3);
  font-weight: bold;
}

.midashi_text4 {
  font-weight: bold;
  background: -webkit-linear-gradient(top, #FFFFFF 20%, #A6A6A6 95%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.midashi_text5 {
  color: var(--accent5);
  font-weight: bold;
  text-shadow: 0 0 7px #000000, 0 0 15px #000000;
}

.moji_spacing { letter-spacing: -.2em; width: 2em; margin: 0 0.5em 0 0.2em; }

.text_yellow1 {
  color: #E5D6AB;
  font-weight: bold;
}

.text_yellow2 {
  color: #9C7605;
  font-weight: bold;
}

.text_orange1 {
  color: var(--accent1);
  font-weight: bold;
}

.text_white1 {
  color: #FFFFFF;
  font-weight: bold;
}

.text_white2 {
  color: #FFFFFF;
}

.text_background {
  color: #ffffff;
  display: inline;
  padding: 12px 25px;
  background: linear-gradient(transparent 0%, #000000 0%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.main_text_right {
  text-align: right;
  width: 100%;
  margin: 0.5rem 0 2rem;
}

.mincho {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "MS P明朝", "MS明朝", serif;
  transform: rotate(.03deg);
}

/* =========================
Sub title（共通）
========================= */
.sub_title1 {
  font-size: 3.2rem;
  font-weight: bold;
  padding: 0.1rem 0 0.5rem 2.6rem;
  margin-top: 40px;
  margin-bottom: 30px;
  letter-spacing: 0px;
  text-shadow: 0 0 8px rgba(16,90,176,0.65), 0 0 15px rgba(16,90,176,0.35);
  border-left: 10px var(--accent2) solid;
  border-bottom: 1px var(--accent2) solid;
}

@media (max-width: 960px) {
  .sub_title1 {
    font-size: 2.0rem;
    padding: 0.4rem 0 0.7rem 1.7rem;
    margin-top: 25px;
    margin-bottom: 18px;
    border-left: 7px var(--accent2) solid;
  }

}

/* =========================
Card / Box
========================= */
.tic_box1 {
  box-sizing: border-box;
  margin: 0 auto 30px;
  width: 100%;
  max-width: 1100px;
  font-size: 1.6rem;
  line-height: 1.8;
  padding: 1.5em 2.3em;
  background-color: var(--box-bg);
  border: 1px solid var(--line-main);
  border-radius: 1.3rem;
}

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

}

/* intro_box1 / box2 */
.intro_box1 {
  box-sizing: border-box;
  margin: 0 auto;
  width: 100%;
  max-width: 1100px;
  font-size: 1.6rem;
  line-height: 1.9;
  padding: 1.8em 2.5em;
  background-color: var(--box-bg);
  border: 1px solid var(--line-sub);
  border-radius: 1.3rem;
}

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

}

.story_text1 {
  font-size: 1.6rem;
  line-height: 1.7;
}

@media (max-width: 960px) {
  .story_text1 {
    font-size: 1.6rem;
    line-height: 1.7;
  }

}

.box2 {
  width: 100%;
  max-width: 850px;
  margin: 0 auto 40px;
  padding: 30px 0 35px;
  background-image: linear-gradient(to bottom, rgba(255,255,255,0.15) 50%, rgba(182,177,83,0.20) 100%);
  border: 1px #CAB870 solid;
  border-radius: 1.2rem;
}

@media (max-width: 960px) {
  .box2 {
    margin-bottom: 0;
    padding: 20px 0;
  }

}

.box_text1 {
  width: 100%;
  max-width: none;
  margin: 0;
  text-align: left;
}

/* =========================
Movie (YouTube)
========================= */
.movie-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  background: rgba(0,0,0,0.40);
  border: 1px solid #a08352;
  border-image: linear-gradient(to right, #AB997A, #886D4F);
  border-image-slice: 1;
}

.movie-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.mov_text_right {
  text-align: right;
  width: 100%;
  margin: 0.7rem 0 1.5rem;
}

/* =========================
Utilities
========================= */
.img100per {
  width: 100%;
}

.img90per {
  width: 90%;
}

.img80per {
  width: 80%;
}

.img70per {
  width: 70%;
}

.img60per {
  width: 60%;
}

.img50per {
  width: 50%;
}

.img40per {
  width: 40%;
}

.big00 {
  font-size: 1.05em;
  font-weight: bold;
  line-height: 1;
}

.big0 {
  font-size: 1.1em;
  font-weight: bold;
  line-height: 1;
}

.big1 {
  font-size: 1.3em;
  font-weight: bold;
  line-height: 1;
}

.big2 {
  font-size: 1.6em;
  font-weight: bold;
  line-height: 1.1;
}

.big3 {
  font-size: 2.0em;
  font-weight: bold;
  line-height: 1.2;
}

.big4 {
  font-size: 2.5em;
  font-weight: bold;
  line-height: 1.3;
}

.big9 {
  font-size: 4.6em;
  font-weight: bold;
  line-height: 1.3;
}

@media (max-width: 960px) {
  .big0 {
    font-size: 1.05em;
  }

  .big1 {
    font-size: 1.2em;
  }

  .big2 {
    font-size: 1.35em;
  }

  .big3 {
    font-size: 1.8em;
  }

  .big4 {
    font-size: 2.2em;
  }

  .big9 {
    font-size: 3.8em;
  }

}

/* margin utilities（必要に応じて増やせる） */
.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_t35 {
  margin-top: 35px;
}

.mar_t40 {
  margin-top: 40px;
}

.mar_t45 {
  margin-top: 45px;
}

.mar_t50 {
  margin-top: 50px;
}

.mar_t60 {
  margin-top: 60px;
}

.mar_t70 {
  margin-top: 70px;
}

.mar_t80 {
  margin-top: 80px;
}

.mar_t90 {
  margin-top: 90px;
}

.mar_t100 {
  margin-top: 100px;
}

.mar_t120 {
  margin-top: 120px;
}

.mar_b70 {
  margin-bottom: 70px;
}

.mar_b80 {
  margin-bottom: 80px;
}

.mar_b90 {
  margin-bottom: 90px;
}

.mar_b100 {
  margin-bottom: 100px;
}

@media (max-width: 960px) {
  .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_t35 {
    margin-top: 26px;
  }

  .mar_t40 {
    margin-top: 28px;
  }

  .mar_t45 {
    margin-top: 32px;
  }

  .mar_t50 {
    margin-top: 38px;
  }

  .mar_t60 {
    margin-top: 45px;
  }

  .mar_t70 {
    margin-top: 50px;
  }

  .mar_t80 {
    margin-top: 60px;
  }

  .mar_t90 {
    margin-top: 65px;
  }

  .mar_t100 {
    margin-top: 75px;
  }

  .mar_t120 {
    margin-top: 90px;
  }

  .mar_b70 {
    margin-bottom: 50px;
  }

  .mar_b80 {
    margin-bottom: 60px;
  }

  .mar_b90 {
    margin-bottom: 65px;
  }

  .mar_b100 {
    margin-bottom: 75px;
  }

}