@charset "UTF-8";
/* components.css（共通パーツ集） */

/* =========================
   Accent
   ※ここだけ変えると全体が追従
========================= */
:root{
  --accent1:#ff4fa3; /* 主役ピンク */
  --accent2:#b0126a; /* 濃いピンク */
  --accent3:#ff7bbf; /* 明るいピンク */
}

/* =========================
   Title（共通）
========================= */
.title{
  font-weight: 900;
  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;
}

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

/* =========================
   STORY title（共通）
========================= */
.story_title{
  font-weight: 800;
  font-style: normal;
  font-size: 2.8rem;
  line-height: 1.4;
  margin: 0;

  /* 赤→ピンク */
  background: linear-gradient(to bottom, var(--accent3), var(--accent1));
  -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.3rem; }
}

/* =========================
   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;
}

/* 見出し用（元の色味を維持しつつピンク寄りへ） */
.midashi_text1 { color: var(--accent1); font-weight: bold; }
.midashi_text2 { color: #FFFFFF; font-weight: bold; }
.midashi_text3 { color: #E3DDA9; 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(--accent1); font-weight: bold;
  text-shadow: 0 0 7px #000000, 0 0 15px #000000;
}

.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: 2.8rem;
  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(176, 18, 106, 0.65),
               0 0 15px rgba(255, 79, 163, 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: rgba(0,0,0,0.50);
  border: 1px solid #867E69;
  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: rgba(0,0,0,0.40);
  border: 1px #867E69 solid;
  border-radius: 1.3rem;
}
@media (max-width: 960px){
  .intro_box1{ padding: 1.2em 1.5em; }
}

.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;
}

/* =========================
   Access
========================= */
.iframe_map{ width: 100%; height: 500px; }
@media (max-width: 960px){
  .iframe_map{ height: 300px; }
}

/* =========================
   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; }
}