/*
Theme Name: 五泉ひゃんで花火大会 2025
Theme URI:
Description:
Author:
Author URI:
Template:
Version: 1.0
License: proprietary
License URI:
Tags:
Text Domain:
*/

/******************************************************************************
Note
******************************************************************************/

/******************************************************************************
Index
・タグの上書き
・クラスの上書き
・クラスの新規定義(共通)
******************************************************************************/
@media (min-width: 576px) {  /* sm */
}
@media (min-width: 768px) {  /* md */
}
@media (min-width: 992px) {  /* lg */
}
@media (min-width: 1200px) {  /* xl */
}
@media (min-width: 1400px) {  /* xxl */
}

/******************************************************************************
  フォント
******************************************************************************/
@font-face {
  font-family: "Mochiy Pop One";
  src: url("./assets/fonts/MochiyPopOne-Regular.ttf");
}

.font_mochiy_pop_one {
  font-family: "Mochiy Pop One";
}

@font-face {
  font-family: "RocknRoll One";
  src: url("./assets/fonts/RocknRollOne-Regular.ttf");
}

.font_rocknroll_one {
  font-family: "RocknRoll One";
}

/******************************************************************************
  タグの上書き
******************************************************************************/

/*
:root {scroll-behavior: unset;}
*/

body {
  background-color: black;
  color: white;
}

/******************************************************************************
  クラスの上書き
******************************************************************************/

/******************************************************************************
  クラスの新規定義(共通)
******************************************************************************/
.test {
}

.hero {
  /*
  background-position: 50% 40%;
  animation: parallax linear both;
  animation-timeline: view();
  background-size: 400px;
  background-position: top;
  */
  background-image: url(assets/img/bg/body.jpg);
  background-position: center top;
  background-size: contain;
  background-color: black;
  background-repeat: no-repeat;

  /*
  animation: parallax_0 linear both;
  animation-timeline: scroll();
  */
}
@media (max-width: 430px) {  /* default */
  .hero {
    background-size: 430px;
  }
}

@media (min-width: 431) {  /* default */
  .hero {
    background-size: 500px;
  }
}
@media (min-width: 576px) {  /* sm */
  .hero {
    background-size: 600px;
  }
}
@media (min-width: 768px) {  /* md */
  .hero {
    background-size: 800px;
  }
}
@media (min-width: 992px) {  /* lg */
}
@media (min-width: 1200px) {  /* xl */
}
@media (min-width: 1400px) {  /* xxl */
}

@keyframes parallax_0 {
/*
  0% {
    background-position: center -40%;
  }
  100% {
    background-position: center 60%;
  }
*/
from {
  background-position: center 0px;
}
to {
  background-position: center 250px;
}

}


/*** 縦書き ***/
.writing_v {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}


.outline_black_3px {
  display        : inline-block;
  letter-spacing : 2px;                /* 文字間 */
  text-shadow    : 
       3px  3px 3px #000000,
      -3px  3px 3px #000000,
       3px -3px 3px #000000,
      -3px -3px 3px #000000,
       3px  0px 3px #000000,
       0px  3px 3px #000000,
      -3px  0px 3px #000000,
       0px -3px 3px #000000;        /* 文字の影 */
}

.outline_white_2px_4px {
  display        : inline-block;
  letter-spacing : 4px;                /* 文字間 */
  text-shadow    : 
       2px  2px 4px #ffffff,
      -2px  2px 4px #ffffff,
       2px -2px 4px #ffffff,
      -2px -2px 4px #ffffff,
       2px  0px 4px #ffffff,
       0px  2px 4px #ffffff,
      -2px  0px 4px #ffffff,
       0px -2px 4px #ffffff;        /* 文字の影 */
}

.outline_white_10px {
  text-shadow: 0px 0px 10px rgba(255, 255, 255, 1), 0px 0px 10px rgba(255, 255, 255, 1)
}
/******************************************************************************
  共通
******************************************************************************/
nav.nav {
  z-index: 10000;

}
ul.main_nav {
  background-image: linear-gradient(180deg, rgba(254, 119, 193, 1), rgba(232, 31, 135, 1));
}
.main_nav .nav-link {
  font-size: 0.9rem;
}

.the_title {
  font-size: calc(0.8rem + 1.5vw);
  color: #4da6ff;
}

.catch_copy {
  font-size: 0.9rem;
  color: #4da6ff;
}
@media (min-width: 576px) {  /* sm */
  .catch_copy {
    font-size: 1.2rem;
  }
}
@media (min-width: 768px) {  /* md */
  .catch_copy {
    font-size: 1.5rem;
  }
}

.event_date {
  font-size: 0.8rem;
  color: #ffe15a;
}
.event_date .str {
  font-size: 0.5rem;
}
.day_of_week {
  text-shadow: none;
  color: white;
  font-size: 0.7rem;
}
.circle_light_blue {
  width: 1.0rem;
  height: 1.0rem;
  line-height: 1.0rem;
  border-radius: 50%;
  background-color: #4da6ff;
  text-align: center;
  letter-spacing: 0px;
}
@media (min-width: 576px) {  /* sm */
  .event_date {
    font-size: 1.2rem;
  }
  .event_date .str {
    font-size: 0.9rem;
  }
  .day_of_week {
    font-size: 1.2rem;
  }
  .circle_light_blue {
    width: 1.8rem;
    height: 1.8rem;
    line-height: 1.8rem;
  }
}
@media (min-width: 768px) {  /* md */
  .event_date {
    font-size: 2.0rem;
  }
  .day_of_week {
    font-size: 1.5rem;
  }
  .circle_light_blue {
    width: 2.2rem;
    height: 2.2rem;
    line-height: 2.2rem;
  }
}

/*** content / card ***/
.card,
.card p,
.card table,
.card .table > :not(caption) > * > * {
  color: black !important;
}

/*** news ***/
.news.card {
  color: black;
}
.news.card table td {
  background-color: unset;
}

/*** information ***/
.pagination .page-link.active,
.pagination .active > .page-link {
  background-color: #e75297;
  border-color: #e75297;
}



/*** banner section ***/
.banner_section1 .banner_item img {
  max-height:60px;
}
.banner_section2 .banner_item img {
  max-width: 150px;
  max-height: 80px;
}

/*** footer ***/
footer {
  background-color: #002855;;
}
footer h4 {
  font-size: 1rem;
}
footer h5 {
  font-size: 0.9rem;
}
footer p {
  font-size: 0.8rem;
}

footer .copyright {
  background-color: #001a37;
}