@charset "UTF-8";
/*読み込み完了までアニメーションストップ*/
body.animations-paused * {
  animation-play-state: paused !important;
  transition: none !important;
}

.h-fit {
    height: 100%;
}
.w-fit {
    width: 100%;
}
.img-cover {
    width: 100%;
    height: auto;
}
p {
  font-size: 1.4em;
}
.jump {
  scroll-margin-top: 80px;
}
@media screen and (max-width: 767px) {
  .jump {
    scroll-margin-top: 48px;
  }
}
/*
h2.big-title {
    text-align: center;
    padding: 1rem 2rem;
    font-weight: bold;
    font-size: 40px;
    border: 3px solid rgb(0, 0, 0);
    color: rgb(0, 0, 0);
    background-color: #fdd97f;
    width: 50%;
    margin: 0 auto;
}
*/
/*H4見出し*/
h2.big-title {
  text-align: center;
  padding: 1rem 2rem;
  font-weight: bold;
  color: #000000;/*文字色*/
  font-size: 3.5rem;/*文字サイズ*/
  padding: 8px 65px;/*文字回りの余白（上下 左右）*/
  display: block;
  position: relative;
  width: 40%;
  margin: 0 auto;
  color: #fff;
  text-align: center;
  font-weight: bold;
  text-shadow:
    0 0 5px #fff,         /* 内側の光 */
    0 0 10px #e732a9,        /* 外側の光（薄め） */
    0 0 20px #e732a9,        /* 外側の光（強め） */
    0 0 40px #e732a9,        /* 広がり */
    0 0 80px #e732a9,        /* 二重に強調された外周 */
    0 0 90px #e732a9;
}
h2.big-title::before,
h2.big-title-long::before {
  content: "❖";
  font-weight: 900;/*マーク部の太さ*/
  position: absolute;
  font-size: 4rem;/*マーク部のサイズ*/
  left: 0;
  top: 0;
  color: #ffffff;/*マーク部の色*/
}
h2.big-title::after,
h2.big-titlelong::after {
  content: "❖";
  font-weight: 900;/*マーク部の太さ*/
  position: absolute;
  font-size: 4rem;/*マーク部のサイズ*/
  right: 0;
  top: 0;
  color: #ffffff;/*マーク部の色*/
}
h2.big-title-long {
  text-align: center;
  padding: 1rem 2rem;
  font-weight: bold;
  color: #000000;/*文字色*/
  font-size: 3.5rem;/*文字サイズ*/
  padding: 8px 65px;/*文字回りの余白（上下 左右）*/
  display: block;
  position: relative;
  width: 70%;
  margin: 0 auto;
  color: #fff;
  text-align: center;
  font-weight: bold;
  text-shadow:
    0 0 5px #fff,         /* 内側の光 */
    0 0 10px #e732a9,        /* 外側の光（薄め） */
    0 0 20px #e732a9,        /* 外側の光（強め） */
    0 0 40px #e732a9,        /* 広がり */
    0 0 80px #e732a9,        /* 二重に強調された外周 */
    0 0 90px #e732a9;
}
@media screen and (max-width: 912px) {
  h2.big-title,
  h2.big-title-long {
    font-size: 2.3rem;/*文字サイズ*/
  }
  h2.big-title::before,
  h2.big-title::after,
  h2.big-title-long::before,
  h2.big-title-long::after {
    font-size: 3rem;
  }
}
@media screen and (max-width: 767px) {
  h2.big-title,
  h2.big-title-long {
    width: 100%;
  }
  h2.big-title-long {
    font-size: 1.75rem;/*文字サイズ*/
    padding: 15px 65px;/*文字回りの余白（上下 左右）*/
  }
}

@media screen and (min-width: 768px) {
section .container-fluid {
  width:90%;
}
}

/**************************************************************************************
ヘッダー関連
***************************************************************************************/
header .head_content {
    width: 100%;
    height: 80px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    padding-right: 83px;
    position: fixed;
    top: 0;
    background-color: #000645;
    z-index: 999;
}
.item1 {
  position: fixed;
  left: 0;
}
header .head_icon {
  display: flex;
  flex-wrap: wrap;
  position: fixed;
  height: 80px;
}
header .head_icon div {
  padding:0.8rem;
}
@media screen and (max-width: 767px) {
  header .head_icon div {
    padding:0rem;
  }
}
header .icon-toggle {
    display: block;
    width: 83px;
    height: 80px;
    cursor: pointer;
    z-index: 60;
    text-align: center;
    position: fixed;
    right: 0;
    top: 0;
    transition-property: all;
    background-color: #8083ff;
}
@media screen and  (max-width: 767px) {
    header .head_content {
        height: 48px;
        padding-right: 48px;
        justify-content: flex-start;
    }
    header .icon-toggle {
        width: 48px;
        height: 48px;
    }
    header .head_icon {
      height: 48px;
      width: 100%;
      max-width: 100%;
      align-content: space-around;
  }
  header .head_icon div{
    padding-right:1.5%;
}
}
.icon-toggle a {
    display: inline-block;
}
.square {
    height:80px;
}
.logo-image {
    height:50px;
}
@media screen and  (min-width: 1024px) {
.x-image {
  padding:2vw;
}
}
@media screen and  (max-width: 1024px) {
  .logo-image {
      height:35px;
      position: relative;
      top: 15%;
  }
}  
@media screen and  (max-width: 767px) {
    .logo-image {
        height:24px;
        position:unset;
    }
    .x-image {
        aspect-ratio:1/1;
    }
}
@media screen and  (max-width: 360px) {
  .logo-image {
      height:22px;
  }
}

.navbar-toggler .bar {
	display: block;
	width: 75%;
	height: 5%;
	margin: 15% 15%;
	background-color: #ffffff; /* ← ここで白色に設定 */
	border-radius: 1px;
	transition: all 0.4s ease;       /* ← アニメーション追加 */
	transform-origin: center center; /* ← 回転の基点を中央に */
}
.navbar-toggler:focus {
	outline: none;
	box-shadow: none;
}

/* 通常時はアニメーションあり（フェードアウト対応） */
.navbar-toggler .bar:nth-child(2) {
	transition: opacity 0.3s ease;
}

/* 閉じるとき（非表示から復帰）はアニメーションなし */
.closing .navbar-toggler .bar:nth-child(2) {
	transition: none;
}

/* 開いている状態 */
.navbar-toggler[aria-expanded="true"] {
	border: none;
}

/* 1本目 → 時計回りに45度 */
.navbar-toggler[aria-expanded="true"] .bar:nth-child(1) {
	position: relative;
	transform: rotate(45deg) translate(15%, 300%);
}

/* 2本目 → 非表示 */
.navbar-toggler[aria-expanded="true"] .bar:nth-child(2) {
	opacity: 0;
}

/* 3本目 → 時計回りに-45度 */
.navbar-toggler[aria-expanded="true"] .bar:nth-child(3) {
	position: relative;
	transform: rotate(-45deg) translate(15%, -300%);
}

.container>.navbar-header, .container-fluid>.navbar-header, .container>.navbar-collapse, .container-fluid>.navbar-collapse {
	padding: 0!important;
}

.row {padding-top:0;}

.navbar .container {
    --bs-gutter-x: 0rem;
}
.nav {
    justify-content: space-evenly;
}
.navbar {
    --bs-navbar-padding-y: 0rem;
}

/*ハンバーガー中身*/
.head_content2 {
  height:80px;
  width:100%;
}
.head_content2 .head_icon2 div {
  padding: 0.8rem;
}
.fixed-hamburger {
  z-index: 1001!important;
}
.head_icon2 {
  display: flex;
  flex-wrap: nowrap;
  height: 100%;
}
.dropdown-menu-slide {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgb(0, 0, 0);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}
@media screen and (max-width: 767px) {
  .head_content2 {
    height:48px;
  }
  .head_content2 .head_icon2 div {
    padding: 0.8rem;
  }
}
.head-menu h4 {
  position: relative;
  display: inline-block;
  padding: 1rem 2rem 1rem 3rem;
  color: #fff;
  border-radius: 100vh 0 0 100vh;
  background: #31ad41;
  width: 100%;
}

.head-menu h4:before {
  position: absolute;
  top: calc(50% - 7px);
  left: 10px;
  width: 14px;
  height: 14px;
  content: '';
  border-radius: 50%;
  background: #fff;
}
@media screen and (max-width: 767px) {
  .head-menu h4:before {
    top: calc(50% - 3.5px);
    left: 10px;
    width: 7px;
    height: 7px;
  }
  .head-menu h4 {
    font-size: 0.8rem;
    padding: 1rem 0.5rem 1rem 1.5rem;
  }
}
/*リスト*/
.head-menu ul {
  padding: 0.5em 1em 0.5em 3.3em;
  position: relative;
}

.head-menu ul li {
  color: #fff;
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none!important;
  font-size: 1.4em;
}
.head-menu ul a {
  text-decoration: none!important;
}

.head-menu ul li:before {
  content: "▶";
  position: absolute;
  left : 1em; /*左端からのアイコンまで*/
  color: gray; /*アイコン色*/
}
@media screen and (max-width: 767px) {
  .head-menu ul {
    padding: 0.5em 1em 0.5em 2.3em;
  }
  
  .head-menu ul li {
    font-size: 1.0em;
  }
  
}
/*横並び*/
.yoko ul {
  padding: 0.5em 1em;
  display: flex; /* 横並びにする */
  gap: 1em;       /* 各liの間隔 */
  list-style: none;
  width: 100%;
}

.yoko ul li {
  position: relative;
  padding-left: 1.5em; /* ▶ の分だけ左にスペース */
}

.yoko ul li::before {
  content: "▶";
  position: absolute;
  left: 0;
  color: gray;
}

/* アニメーション追加 */
.collapse:not(.show) {
  display: block;
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}

.collapse.show {
  height: auto;
  transition: height 0.3s ease;
}
/* アニメーション追加 */

.head-menu.container {
  max-width: 75%;
  padding: 0;
  height: 100vh;
}
@media screen and (max-width: 912px) {
  .head-menu.container {
    max-width: 95%;
  }
}
/*メニュー内でスクロール*/
#topMenu {
  background-color: rgb(0, 0, 0);
  max-height:100vh;
}

#topMenu {
  overflow-y: scroll; /* スクロール機能は維持 */
  -ms-overflow-style: none;  /* IE, Edge用 */
  scrollbar-width: none;     /* Firefox用 */
}
/*スクロールバー非表示処理*/
#topMenu::-webkit-scrollbar,
#topMenu::-webkit-scrollbar {
  display: none; /* Chrome, Safari用 */
}


/**************************************************************************************
メインビジュアルポスター
***************************************************************************************/
#page-mainvisual {
    width: 100%;
    height: calc(100vh - 80px);
    background-image: 
    url(/girlsallstar2025/img/poster.png);
    background-repeat: 
    no-repeat;
    background-size: 
    100% auto;
    background-position: 
    center top;
    margin-top: 80px;
    position: relative;
}
.poster-chara-01 {
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index: 2;
  background-image: url(/girlsallstar2025/img/poster_1.png);
  background-repeat: no-repeat;
  background-size: 60%;
  background-position: center top;
}
.poster-title {
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index: 1;
  overflow: hidden;
}
.img-box {
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  overflow: hidden;
}
/*文字画像共通の設定*/
.poster-title span{
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  background-repeat: no-repeat;
  pointer-events: none; /* 必要なら */
}
.poster-title-01 {
  background-image: url(/girlsallstar2025/img/text/01.png);
  background-size: 15%;
  background-position: right 65vw top 0;
}
.poster-title-02 {
  background-image: url(/girlsallstar2025/img/text/02.png); 
  background-size: 5%;
  background-position: right 67vw top 10vw;
}
.poster-title-03 {
  background-image: url(/girlsallstar2025/img/text/03.png);
  background-size: 6%;
  background-position: right 61vw top 3vw;
}
.poster-title-04 {
  background-image: url(/girlsallstar2025/img/text/04.png);
  background-size: 6%;
  background-position: right 55vw top 2vw;
}
.poster-title-05 {
  background-image: url(/girlsallstar2025/img/text/05.png);
  background-size: 6%;
  background-position: right 50vw top 0vw;
}
.poster-title-06 {
  background-image: url(/girlsallstar2025/img/text/06.png);
  background-size: 5%;
  background-position: right 45.5vw top 1.3vw;
}
.poster-title-07 {
  background-image: url(/girlsallstar2025/img/text/07.png);
  background-size: 4%;
  background-position: right 42.5vw top 4vw;
}
.poster-title-08 {
  background-image: url(/girlsallstar2025/img/text/08.png);
  background-size: 6%;
  background-position: right 32.5vw top 0;
}
.poster-title-09 {
  background-image: url(/girlsallstar2025/img/text/09.png);
  background-size: 4%;
  background-position: right 29vw top 4vw;
}
.poster-title-10 {
  background-image: url(/girlsallstar2025/img/text/10.png);
  background-size: 11%;
  background-position: right 18vw top 2vw;
}
.poster-title-11 {
  background-image: url(/girlsallstar2025/img/text/11.png);
  background-size: 10%;
  background-position: right 14vw top 10vw;
}
.poster-title-12 {
  background-image: url(/girlsallstar2025/img/text/12.png);
  background-size: 14%;
  background-position: right 18vw top 20vw;
}

.poster-logo {
  position: absolute;
  left:4vw;
  bottom:-3vw;
  width:88vh;
  max-width: 55vw;
  z-index: 3;
}
.poster-day {
  position: absolute;
  left:1vw;
  bottom:1vw;
  width:70vh;
  max-width: 40vw;
  z-index: 3;
}
/**/
#schedule {
    width: 100%;
    height:10vw;
    background: linear-gradient(175deg, #cbfbfe00 50%,#b297df 50%);
    position: absolute;
    bottom: 0;
    z-index: 2;
}
@media screen and (max-width: 767px) {
  #page-mainvisual {
    width: 100%;
    height: calc(100vh - 80px);
    background-image: url(/girlsallstar2025/img/poster.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin-top: 80px;
    position: relative;
  }
  .poster-chara-01 {
    background-size: 180%;
  }
  .poster-title-01 {
    background-image: url(/girlsallstar2025/img/text/01.png);
    background-size: 26%;
    background-position: left 0vw top 12vw;
  }
  
  .poster-title-02 {
    background-image: url(/girlsallstar2025/img/text/02.png);
    background-size: 10%;
    background-position: left 17vw top 25vw;
  }
  
  .poster-title-03 {
    background-image: url(/girlsallstar2025/img/text/03.png);
    background-size: 12%;
    background-position: left 25vw top 7vw;
  }
  
  .poster-title-04 {
    background-image: url(/girlsallstar2025/img/text/04.png);
    background-size: 12%;
    background-position: left 35vw top 2vw;
  }
  
  .poster-title-05 {
    background-image: url(/girlsallstar2025/img/text/05.png);
    background-size: 12%;
    background-position: left 45vw top 0;
  }
  
  .poster-title-06 {
    background-image: url(/girlsallstar2025/img/text/06.png);
    background-size: 14%;
    background-position: left 56vw top 0;
  }
  
  .poster-title-07 {
    background-image: url(/girlsallstar2025/img/text/07.png);
    background-size: 12%;
    background-position: left 60vw top 10vw;
  }
  
  .poster-title-08 {
    background-image: url(/girlsallstar2025/img/text/08.png);
    background-size: 12%;
    background-position: right 8vw top 0;
  }
  
  .poster-title-09 {
    background-image: url(/girlsallstar2025/img/text/09.png);
    background-size: 10%;
    background-position: right 0vw top 8vw;
  }
  
  .poster-title-10 {
    background-image: url(/girlsallstar2025/img/text/10.png);
    background-size: 20%;
    background-position: right -3vw top 15vw;
  }
  
  .poster-title-11 {
    background-image: url(/girlsallstar2025/img/text/11.png);
    background-size: 20%;
    background-position: right -5vw top 30vw;
  }
  
  .poster-title-12 {
    background-image: url(/girlsallstar2025/img/text/12.png);
    background-size: 20%;
    background-position: right 2vw top 53vw;
  }
  
  #page-mainvisual {
    margin-top: 48px;
  }
  #schedule {
    height:30vw;
  }
.poster-logo {
  position: absolute;
  left:0vw;
  top:20vh;
  width:100%;
  max-width: 100%;
  z-index: 3;
}
.poster-day {
  position: absolute;
  left: 6vw;
  bottom: 16vh;
  width: 65%;
  max-width: 100%;
  z-index: 3;
}

.poster-titlead-01 {
  opacity: 0;
  background-image: url(/girlsallstar2025/img/text/text_1.png);
  background-size: 72%;
  background-position: left 0vw top 0vw;
}

.poster-titlead-02 {
  opacity: 0;
  background-image: url(/girlsallstar2025/img/text/text_2.png);
  background-size: 30%;
    background-position: right -7vw top 0vw;
}

}
@media screen and (width: 540px) and (height: 720px) {
  .poster-logo {
    position: absolute;
    left:0vw;
    top: 24vh;
    width: 100%;
    max-width: 65%;
    z-index: 3;
  }
  .poster-day {
    position: absolute;
    left: 2vw;
    bottom: 16vh;
    width: 65%;
    max-width: 55%;
    z-index: 3;
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  /* 縦向きのiPad用のスタイル */
  #page-mainvisual {
    width: 100%;
    height: calc(100vh - 80px);
    background-image:  url(/girlsallstar2025/img/poster.png);
    background-repeat:  no-repeat;
    background-size:  cover;
    background-position:  center;
    margin-top: 80px;
    position: relative;
  }
  .poster-chara-01 {
    background-size: 180%;
  }
  .poster-title-01 {
    background-image: url(/girlsallstar2025/img/text/01.png);
    background-size: 26%;
    background-position: left 0vw top 7vh;
  }
  
  .poster-title-02 {
    background-image: url(/girlsallstar2025/img/text/02.png);
    background-size: 10%;
    background-position: left 17vw top 15vh;
  }
  
  .poster-title-03 {
    background-image: url(/girlsallstar2025/img/text/03.png);
    background-size: 12%;
    background-position: left 25vw top 5vh;
  }
  
  .poster-title-04 {
    background-image: url(/girlsallstar2025/img/text/04.png);
    background-size: 12%;
    background-position: left 35vw top 2vh;
  }
  
  .poster-title-05 {
    background-image: url(/girlsallstar2025/img/text/05.png);
    background-size: 12%;
    background-position: left 45vw top 0;
  }
  
  .poster-title-06 {
    background-image: url(/girlsallstar2025/img/text/06.png);
    background-size: 14%;
    background-position: left 56vw top 0;
  }
  
  .poster-title-07 {
    background-image: url(/girlsallstar2025/img/text/07.png);
    background-size: 12%;
    background-position: left 60vw top 7vh;
  }
  
  .poster-title-08 {
    background-image: url(/girlsallstar2025/img/text/08.png);
    background-size: 12%;
    background-position: right 8vw top 0;
  }
  
  .poster-title-09 {
    background-image: url(/girlsallstar2025/img/text/09.png);
    background-size: 10%;
    background-position: right 0vw top 4vh;
  }
  
  .poster-title-10 {
    background-image: url(/girlsallstar2025/img/text/10.png);
    background-size: 20%;
    background-position: right -3vw top 13vw;
  }
  
  .poster-title-11 {
    background-image: url(/girlsallstar2025/img/text/11.png);
    background-size: 20%;
    background-position: right -5vw top 28vw;
  }
  
  .poster-title-12 {
    background-image: url(/girlsallstar2025/img/text/12.png);
    background-size: 20%;
    background-position: right 2vw top 51vw;
  }
    
.poster-logo {
  position: absolute;
  left: 2vw;
  bottom: 11vh;
  width: 88vh;
  max-width: 70vw;
  z-index: 3;
}
.poster-day {
  position: absolute;
  left: 3vw;
  bottom: 16vh;
  width: 70vh;
  max-width: 50vw;
  z-index: 3;
}
}
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  /* 横向きのiPad用のスタイル */
  #page-mainvisual {
    width: 100%;
    height: calc(100vh - 80px);
    background-image: url(/girlsallstar2025/img/poster.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    margin-top: 80px;
    position: relative;
  }
  .poster-chara-01 {
    background-size: 70%;
  }
  .poster-title-01 {
    background-image: url(/girlsallstar2025/img/text/01.png);
    background-size: 15%;
    background-position: right 65vw top 0;
  }
  
  .poster-title-02 {
    background-image: url(/girlsallstar2025/img/text/02.png);
    background-size: 5%;
    background-position: right 67vw top 10vw;
  }
  
  .poster-title-03 {
    background-image: url(/girlsallstar2025/img/text/03.png);
    background-size: 6%;
    background-position: right 61vw top 5vh;
  }
  
  .poster-title-04 {
    background-image: url(/girlsallstar2025/img/text/04.png);
    background-size: 6%;
    background-position: right 55vw top 3vh;
  }
  
  .poster-title-05 {
    background-image: url(/girlsallstar2025/img/text/05.png);
    background-size: 6%;
    background-position: right 50vw top 0vh;
  }
  
  .poster-title-06 {
    background-image: url(/girlsallstar2025/img/text/06.png);
    background-size: 5%;
    background-position: right 45.5vw top 1.5vh;
  }
  
  .poster-title-07 {
    background-image: url(/girlsallstar2025/img/text/07.png);
    background-size: 4%;
    background-position: right 42.5vw top 6vh;
  }
  
  .poster-title-08 {
    background-image: url(/girlsallstar2025/img/text/08.png);
    background-size: 6%;
    background-position: right 32.5vw top 0;
  }
  
  .poster-title-09 {
    background-image: url(/girlsallstar2025/img/text/09.png);
    background-size: 4%;
    background-position: right 29vw top 8vh;
  }
  
  .poster-title-10 {
    background-image: url(/girlsallstar2025/img/text/10.png);
    background-size: 11%;
    background-position: right 18vw top 3vw;
  }
  
  .poster-title-11 {
    background-image: url(/girlsallstar2025/img/text/11.png);
    background-size: 10%;
    background-position: right 14vw top 11vw;
  }
  
  .poster-title-12 {
    background-image: url(/girlsallstar2025/img/text/12.png);
    background-size: 14%;
    background-position: right 18vw top 21vw;
  }
  
}

/*アニメーション*/

@keyframes zoomIn {
  0% {
    transform: scale(2.0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
/*
@keyframes rolling {
  0% {
    transform: rotate(-20deg);
    opacity: 0;
  }
  100% {
    transform: rotate(720deg);
    opacity: 1;
  }
}

/*ブッちぎるのは*/

.poster-title-01 {
  animation: zoomIn 0.35s ease-in-out forwards
}
.poster-title-02 {
  opacity: 0;
  animation: zoomIn 0.35s ease-in-out forwards;
  animation-delay: 0.05s;
}
.poster-title-03 {
  opacity: 0;
  animation: zoomIn 0.35s ease-in-out forwards;
  animation-delay: 0.1s;
}
.poster-title-04 {
  opacity: 0;
  animation: zoomIn 0.35s ease-in-out forwards;
  animation-delay: 0.15s;
}
.poster-title-05 {
  opacity: 0;
  animation: zoomIn 0.35s ease-in-out forwards;
  animation-delay: 0.2s;
}
.poster-title-06 {
  opacity: 0;
  animation: zoomIn 0.35s ease-in-out forwards;
  animation-delay: 0.25s;
}
.poster-title-07 {
  opacity: 0;
  animation: zoomIn 0.35s ease-in-out forwards;
  animation-delay: 0.3s;
}
/*この*/

.poster-title-08 {
  opacity: 0;
  animation: zoomIn 0.35s ease-in-out forwards;
  animation-delay: 0.6s;
}
.poster-title-09 {
  opacity: 0;
  animation: zoomIn 0.35s ease-in-out forwards;
  animation-delay: 0.65s;
}
/*アタシ*/

.poster-title-10 {
  opacity: 0;
  animation: zoomIn 0.35s ease-in-out forwards;
  animation-delay: 0.9s;
}
.poster-title-11 {
  opacity: 0;
  animation: zoomIn 0.35s ease-in-out forwards;
  animation-delay: 1.0s;
}
.poster-title-12 {
  opacity: 0;
  animation: zoomIn 0.35s ease-in-out forwards;
  animation-delay: 1.1s;
}

.poster-logo{
  opacity: 0;
  animation: zoomIn 0.7s ease-in-out forwards,
  glowPulse 2s ease-in-out infinite;
  animation-delay: 1.45s, 3.0s;
}
.poster-day{
  opacity: 0;
  animation: zoomIn 0.7s ease-in-out forwards;
  animation-delay: 2.15s;
}

@keyframes glowPulse {
  0%   { filter: drop-shadow(0 0 0px #ffffff00) ; }
  50%  { filter: drop-shadow(0 0 20px rgb(255, 144, 213)) brightness(1.2); }
  100% { filter: drop-shadow(0 0 0px #ffffff00) ; }
}

/*
.poster-title-03 {
  opacity: 0;
  animation: rolling 0.35s ease-in-out forwards;
  animation-delay: 0.2s;
  transform-origin: 35% 15%; 
}
*/
.poster-light {
  width: 100%;
  height: 99%;
  overflow: hidden;
  position: absolute;
  z-index: 1;
}
.poster-light .dot {
  position: absolute;
  border-radius: 50%;
  background: white;
  mix-blend-mode: screen;
  filter: blur(4px);
  pointer-events: none;
  opacity: 0.6;
  box-shadow:
    0 0 15px rgba(255, 255, 200, 0.8),
    0 0 30px rgba(255, 255, 200, 0.4);
  will-change: transform, opacity;
}

.Android [class^="poster-title-"] {
  opacity: 0;
  animation: none;
  transform: none;
  transition: unset;
}

.Android .poster-titlead-01 {
  animation: zoomIn 0.7s ease-in-out forwards;
}

.Android .poster-titlead-02 {
  animation: zoomIn 0.7s ease-in-out forwards;
  animation-delay: 0.7s;
}


/*ミニキャラ*/
.rinkai-mini {
  position: absolute;
  right:3%;
  bottom: 0;
  width:20%;
  transform-origin: bottom center;
}
@media screen and (max-width: 767px) {
  .rinkai-mini {
    position: absolute;
    right:5%;
    bottom: -6.5vh;
    width:35%;
    transform-origin: bottom center;
  }
}

.poyopoyo {
  animation: poyopoyo 13s ease-out infinite;
  animation-delay: 3s;
  opacity: 1;
}

@keyframes poyopoyo {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  1%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  2%  { transform: scale(1.2, 0.8) translate(0%, 7%); }
  3%  { transform: scale(1.0, 0.9) translate(0%, 0%); }
  4%  { transform: scale(0.9, 1.0) translate(0%, -15%); }
  5%  { transform: scale(0.9, 1.0) translate(0%, -12%); }
  6%  { transform: scale(1.2, 0.8) translate(0%, 7%); }
  7%  { transform: scale(1.0, 1.0) translate(0%, 0%); }

  20%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  21%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  22%  { transform: scale(1.2, 0.8) translate(0%, 7%); }
  23%  { transform: scale(1.0, 0.9) translate(0%, 0%); }
  24%  { transform: scale(0.9, 1.0) translate(0%, -15%); }
  25%  { transform: scale(0.9, 1.0) translate(0%, -12%); }
  26%  { transform: scale(1.2, 0.8) translate(0%, 7%); }
  27%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
  28%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  29%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  30%  { transform: scale(1.2, 0.8) translate(0%, 7%); }
  31%  { transform: scale(1.0, 0.9) translate(0%, 0%); }
  32%  { transform: scale(0.9, 1.0) translate(0%, -15%); }
  33%  { transform: scale(0.9, 1.0) translate(0%, -12%); }
  34%  { transform: scale(1.2, 0.8) translate(0%, 7%); }
  35%  { transform: scale(1.0, 1.0) translate(0%, 0%); }

  40%  { transform: rotate(0deg); }
  60%  { transform: rotate(5deg); }
  80%  { transform: rotate(-5deg); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

@keyframes wiperMove {
  0%,40%,60%,80%,100% {
    transform: rotate(0deg);
  }
  50%,70% {
    transform: rotate(10deg);
  }
}
/* 発走時間／カウントダウン
=========================================== */
#section-schedule {
  padding: 0px;
  height: 48px;
  width:48px;
  position:absolute;
  top: 0px;
  right:0px;
}
#section-schedule .containertime {
  width:100%;
  height:100%;
  position: relative;
}
.countdown {
  position:absolute;
  right:35%;
  bottom:0;
  /*font-size: small;*/
  text-align: center;
  width:30%;
  aspect-ratio: 3 / 2;
  background: url(/girlsallstar2025/img/kaisai.png);
  background-repeat: no-repeat;
  background-size: contain;
  color: #000;
  transform-origin: bottom right;
  animation: wiperMove 2s infinite ease-in-out;
  animation-delay: 3s;
}
.countdown #timerPC {
  display: flex;
  align-items: center;  
  justify-content: center;
  height: 70%;
  line-height:1;
  font-size:13px;
}
.countdown #timerSP .race-end {
  font-size:16px;
}

#startingTime, #timerPC {
   text-align: center;
}
#timerPC .text-count,
#timerSP .text-count,
.text-day {
  font-weight: bold;
  color: #ff0f63;
  margin-left: 4px;
  margin-right: 4px;
}
#section-schedulePC {
  display: none;
}
@media screen and (min-width: 768px) {
  #section-schedulePC {
    display: block;
  }
}
@media screen and (min-width: 768px) {
  #section-schedule {
    display: none;
  }
  #section-schedulePC {
    z-index: 15;
    padding: 0px;
    height: 100%;
    width:100%;
    position:absolute;
    top: 0px;
  }
  #section-schedulePC .containertime {
    height: 24.66257668711656%;
    width:100%;
    position:absolute;
    bottom: 0px;
  }
  /* 発走予定時間テキスト */
  #startingTime {
    text-align: left;
    margin-left: -15px;
  }
  #startingTime .text-time{
    color: #ff0f63;
  }
  #section-schedulePC .text-raceno {
    font-size: 1.2vw;
  }

  .countdown {
    width:25%;
    position:absolute;
    bottom: 70%;
    right:16%;
    background-size: contain;
    color: #000;
    height: 100%;
    transform-origin: bottom right;
    
  }
  #timer {
    text-align: right;
  }
  
  .countdown #timerPC{
    text-align: right;
    font-size: 18px;
    line-height:1;
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(-25%, -50%);
  }
  .countdown .text-count {
    font-size:40px;
  }
  .countdown #timerPC .race-day {
    white-space:nowrap;
    margin: auto 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90%;
    font-size:25px;
  }
  .countdown #timerPC .race-end {
    white-space:nowrap;
    margin: auto 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90%;
    font-size: 3vw;
  }
}
@media screen and (min-width: 1024px) {
  .countdown #timerPC{
    font-size:25px;
  }
  .countdown #timerPC .race-day{
    font-size: 3vw;
  }
  .countdown .text-count {
    font-size: 3vw;
  }
}
@media screen and (min-width: 1200px) {
  .countdown #timerPC{
    font-size:2rem;
  }
  .countdown #timerPC .race-day{
    font-size: 3vw;
  }
  .countdown .text-count {
    font-size: 4vw;
  }
  
}
/**************************************************************************************
お知らせ
***************************************************************************************/
.news {
    background-color: #fff;
    color: #000;
    font-weight: bold;
    border-radius: 10px;
    border: 3px solid #030644;
}
.title-img {
    align-items: baseline;
    font-weight: bold;
    font-size: 30px;
    margin-top: 20px;
    margin-bottom: 10px;
}
.panel-info .scroll-y {
    /*height: 180px;*/
    height:17vw;
}
@media screen and (max-width: 767px) {
  .panel-info .scroll-y {
    height: 180px;
}
}
/* スクロールバー指定 */
.scroll-y {
    padding-right: 12px;
    overflow-y: auto;
    scrollbar-color: #8383fc #f8fcff;
    /*scrollbar-width: thin;*/
}
.scroll-y::-webkit-scrollbar {
    width: 8px;
}
.scroll-y::-webkit-scrollbar-thumb {
    background-color: #8383fc;
    border-radius: 4px;
}
.scroll-y::-webkit-scrollbar-track {
    background-color: #f8fcff;
    border-radius: 4px;
}
.updates {
    padding: 0px 20px 0px 20px !important;
    list-style: none;
}
.updates li {
    font-size: 1.2em;
    margin: 0;
    padding: 15px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.8);
}
.updates li .date {
    color: #000;
    font-size: 1.3rem;
}
.container-fluid .updates a {
    font-weight: bold;
    color: #000;
    text-decoration: none;
    font-size: 1.2em;
}
.title-img span {
    margin-left: 8px;
    font-family: "Noto Sans Japanese", sans-serif;
    font-size: 1.5rem;
    line-height: 1;
    white-space: nowrap;
}
@media screen and (max-width: 767px) {
  .container-fluid .updates a {
    font-size: 1.1em;
}
}
/**************************************************************************************
お知らせスライダー
***************************************************************************************/
.topics {
    position: relative;
    display: none;
    padding-bottom: 20px;
  }
  .topics a:hover:after {
    content: "";
    position: absolute;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-blend-mode: overlay;
    background-image:repeating-linear-gradient(rgba(17, 24, 39, 0.4), rgba(17, 24, 39, 0.4) 1px, transparent 1px, transparent 2px);
  }
  
  .topics.slick-initialized {
    display: block;
  }
  
  .topics .slick-arrow {
    /*background: transparent none no-repeat scroll center center;*/
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    z-index: 100;
    display: block;
    width: 32px;
    height: 0;
    padding-top: 32px;
    border: 0 none;
    overflow: hidden;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }
  
  .topics .slick-arrow:hover {
    opacity: 0.9;
  }
  .topics .slick-prev {
    background-image: url(../img/btn_prev_red.png);
    left: -16px;
  }
  .topics .slick-next {
    background-image: url(../img/btn_next_red.png);
    right: -16px;
  }
  
  .slick-dots {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
    text-align: center;
    height: 0;
  }
  .slick-dots li {
    display: inline-block;
    list-style: outside none;
    padding: 0 4px;
  }
  .slick-dots li button {
    display: block;
    background: #D5B5CE;
    border: 0 none;
    overflow: hidden;
    width: 12px;
    height: 0;
    border-radius: 50%;
    padding-top: 12px;
  }
  
  .slick-dots li.slick-active button {
    background-color: #D93859;
  }
  @media screen and (max-width: 767px) {
    .topics .slick-dots {
      display: none !important;
    }
  }
  @media screen and (min-width: 768px) {
    .topics .slick-arrow {
      /*background: transparent none no-repeat scroll center center;*/
      width: 48px;
      padding-top: 48px;
    }
    .topics .slick-prev {
      left: -24px;
    }
    .topics .slick-next {
      right: -24px;
    }
  }

/**************************************************************************************
ライブ・CM
***************************************************************************************/
.youtube-16-9 iframe {
  width:40vw;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  display: block;
}
@media screen and (max-width: 767px) {
  .youtube-16-9 iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    padding-left: 0%;
  }
}

.frame_wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 動画の比率　*/
  overflow: hidden;
}
.frame_wrap .arrow,
.frame_wrap .arrow::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%,-50%);
}
.frame_wrap .arrow {
  width: 56px;
  height: 56px;
  pointer-events: none;
  background-image:url(/girlsallstar2025/img/icon_youtube.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.movie img:hover{ cursor: pointer;}
.frame_wrap img {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: auto;
  transform: translateY(-50%);
  cursor: pointer;
  
}
.frame_wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*liveバナー*/
.img-live {
  position: relative;
  display: none;
}
.img-live a:hover:after {
  content: "";
  position: absolute;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-blend-mode: overlay;
  background-image:repeating-linear-gradient(rgba(17, 24, 39, 0.4), rgba(17, 24, 39, 0.4) 1px, transparent 1px, transparent 2px);
}

.img-live.slick-initialized {
  display: block;
}

/**************************************************************************************
コンテンツ
***************************************************************************************/

@media screen and (min-width: 768px) {
  #section-contents .col-md-2 {
    width:20%;
  }
#section-contents .col-md-3 img {
  display: block;
  width:75%;
  margin: 0 auto;
}
}
#section-contents img {
  transition: transform 0.3s ease;
  z-index: 1;
  position: relative;
}

.img-s img:hover {
  transform: scale(1.2);
}
.img-m img:hover {
  transform: scale(1.16);
  z-index: 3;
}
.img-l {
  transform: scale(0.9);
}
.img-l img:hover {
  transform: scale(1.1);
  z-index: 2;
}

@media screen and (max-width: 767px) {
#section-contents img:hover {
  transform: scale(1.1);
}
}

.panel-wait {
  position: relative;
  display: inline-block;
  pointer-events: none;                 /* クリック無効 */
  cursor: default;                      /* 通常の矢印カーソル */
  text-decoration: none;                /* 下線除去（リンク用） */
  color: inherit;                       /* 文字色継承 */
  transition: none !important;          /* アニメーション無効 */
}
/* 初期状態：非表示 */
.overlay-text {
  position: absolute;
  justify-content: center;
  align-items: center;
  width:100%;
  height:100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);  /* 半透明黒背景 */
  font-weight: bold;
  color: white;
  text-shadow:
    -1px -1px 0 #000,  
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000; /* 黒い縁取り */
  padding: 0em;
  font-size: 2.7em;
  display: none;
  z-index: 3;
}
.head-menu .overlay-text {
  font-size: 1.5em;
}
@media screen and (max-width: 768px) {
  .head-menu .overlay-text {
    font-size: 0.9em;
  }
}
@media screen and (max-width: 767px) {
  .overlay-text {
    padding: 0em;
    font-size: 1.0em;
  }
  .head-menu .overlay-text {
    font-size: 0.9em;
  }
}
/* オーバーレイを表示 */
.panel-wait .overlay-text {
  display: flex;
}

/**************************************************************************************
リンクバナー
***************************************************************************************/
.links-area {
  width:90%;
  margin: 0 auto;
}
#section-links {
    position: relative;
    padding-top: 50px;
    padding-bottom: 50px;
    width:90%;
    margin: 0 auto;;
  }
  #section-links .container {
    background-color: #fff;
    border: 2px solid #80726b;
    border-radius:10px;
    padding:20px;
  }
  
  #section-links a {
    position: relative;
    display: block;
  }
  #section-links a:hover:after {
    content: "";
    position: absolute;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 1;
  
    background-blend-mode: overlay;
    background-image:repeating-linear-gradient(rgba(17, 24, 39, 0.4), rgba(17, 24, 39, 0.4) 1px, transparent 1px, transparent 2px);
  }

#section-links .slick-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    z-index: 100;
    display: block;
    width: 32px;
    height: 0;
    padding-top: 32px;
    border: 0 none;
    overflow: hidden;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }
  #section-links .slick-arrow:hover {
    opacity: 0.9;
  }
  #section-links .slick-prev {
    background-image: url(../img/btn_prev_blue.png);
    left: -16px;
  }
  #section-links .slick-next {
    background-image: url(../img/btn_next_blue.png);
    right: -16px;
  }
  
  
  @media screen and (max-width: 767px) {
    #section-links .slick-dots {
      display: none !important;
    }
  }
  @media screen and (min-width: 768px) {
    #section-links .slick-arrow {
      /*background: transparent none no-repeat scroll center center;*/
      width: 48px;
      padding-top: 48px;
    }
    #section-links .slick-prev {
      left: -24px;
    }
    #section-links .slick-next {
      right: -24px;
    }
  }
.flags .col-md-3 {
    padding-right: 15px;
    padding-left: 15px;
}
/**************************************************************************************
フローティング
***************************************************************************************/
/*#float-gotop {*/
.btn-pagetop{
  width: 48px;
  height: 48px;
  margin-left: -24px;
  border-radius: 50%;
  background-color: rgba(217, 56, 89,0.8);
  background-image: url(../img/icon_arrow_pagetop.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
  outline: none;
  z-index: 100;
  cursor: pointer;
}
.btn-pagetop:hover{
  background-color: rgba(219, 11, 53, 0.5)
}
.global-footer {
    display: block;
    position: fixed;
    bottom: 0;
    width: 40%;
    height: 100px;
    opacity: 1;
    transition: opacity 0.5s ease, transform 0.5s ease;
    z-index: 995;
  }
  .global-footer-vote {
    position: fixed;
    list-style: none;
    display: flex;
    width: 100%;
    position: absolute;
    left: 10px;
    bottom:0px;
    border-radius: 5px;
    padding: 15px 10px 10px 10px;
    margin-bottom: 0px;
    background: rgba(0, 0, 0, 0.5);
    opacity: 1;
    transition: opacity 0.5s ease;
  }
  
  .global-footer-vote-none {
    list-style: none;
    display: flex;
    width: 30%;
    position: absolute;
    left: 10px;
    border-radius: 5px;
    padding: 15px 10px 10px 10px;
  }
  
  body.midnight .global-footer-vote {
    background: rgba(255, 255, 255, 0.5);
  }
  
  .global-footer-vote li,
  .global-footer-vote-none li {
    margin: 0 5px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: space-between;
    justify-content: space-around;
    align-items: center;
  }
  
  .global-footer-vote li {
    width: calc(100% / 4 - 10px);
  }
  
  .global-footer-vote li img {
    width: 100%;
    transition: .3s;
  }
  
  @media screen and (min-width: 750px) {
    .global-footer-vote li img:hover {
        transform: scale(1.1);
    }
  }
  
  #global-footer-page-top-button {
    font-size: 3rem;
    color: #053075;
  }
  @media screen and (max-width: 800px) {
    .global-footer {
      width: calc(100% - 40px);
    }
    .global-footer-vote {
      width: calc(100% - 40px);
    }
    .btn-pagetop{
      height:35px;
      width:35px;
      background-size: 18px 18px;
    }
    #chat_banner {
      bottom: 50px !important;
    }
  }

  #chat_banner {
    z-index: 995!important;
}
@media screen and (max-width: 767px) {
  #chat_banner {
    bottom: 50px!important;
}
.global-footer {
    width: 90%;
  }
  .global-footer-vote {
    padding: 10px 10px 10px 10px;
  }
}

.slow,
.chat_banner_img,
.chat_banner_close_img {
  opacity: 0;
  animation: slowIn 1s ease forwards;
  animation-delay: 4s;  /* 2秒後に開始 */
}

@keyframes slowIn {
  to {
    opacity: 1;
  }
}
/**************************************************************************************
フッター
***************************************************************************************/
footer {
  background-color: #000;
}
@media screen and (max-width: 767px) {
    footer .utsunomiya_area .col-12 {
        margin-top: 16px;
    }
    footer {
        margin-bottom: 90px;
    }
    }
    @media screen and (min-width: 768px) {
    footer {
        margin-bottom: 100px;
    }/*2023.09.05 Footerのheightが可変のため、削除*/
    #page-address {
    padding: 60px 0 0 0;
    }
}

  a.footer_link {
    color: #fff;
    text-decoration: underline;
  }
  
  .footer_link:hover {
    text-decoration: none;
  }

  /* Photo Copyright */
  .photo-copyright {
    display: none;
    font-size: 12px;
    color: #9ca3af;
    list-style: none;
    padding-left: 0;
    margin-left: 1em;
  }
  @media screen and (min-width: 768px) {
    .photo-copyright li{display: inline-block;}
    .photo-copyright li:not(:last-child):after {
      content: "／";
      margin-left: 2px;
    }
  }
  
  /* copyright */
  #page-footer {
    position: relative;
    /*background-color: #fff;*/
  }
  
  #page-footer .gotop {
    position: absolute;
    right: 16px;
    bottom: 24px;
    width: 48px;
    height: 48px;
    margin-left: -24px;
    border-radius: 50%;
    background-image: url(../img/icon_arrow_pagetop.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 24px 24px;
  }
  #page-footer .copyright {
    /*text-align: center;*/
    font-size: 0.9em;
    color: #9ca3af;
    padding-top: 10px;
  }
/**************************************************************************************
背景全体
***************************************************************************************/
body {
  background-color: #000;
  color: #fff;
}
.bg-wave {
    /*background-image: url()*/
    background-color: #370344;
}

#section-live {
  background: linear-gradient(180deg, #370344,#0e2567);
}
#section-news {
  background: linear-gradient(180deg, #3a333f);
}
#section-contents {
  background: linear-gradient(180deg, #660e67,#370344);
}
/*
#section-links {
  width: 100%;
  background: linear-gradient(180deg, #dcfff3);
}
*/
/**************************************************************************************
コンテンツ切り替え
***************************************************************************************/
.bg-cut-up {
  width: 100%;
  height:10vw;
  background: linear-gradient(175deg, #fdef3000 50%,#b297df 50%);
}
.bg-cut-down {
    width: 100%;
    height:10vw;
    background: linear-gradient(175deg, #b297df 50%,#e3f78a00 50%);
}
@media screen and (max-width: 767px) {
  .bg-cut-down,
  .bg-cut-up {
    height:30vw;
}  
}
/**************************************************************************************
アニメーション
***************************************************************************************/
.fade-in {
  opacity: 0;
  transition-duration: 500ms;
  transition-property: opacity, transform;
}
.fade-in-up {
  transform: translate(0, 50px);
}
.scroll-in {
  opacity: 1;
  transform: translate(0, 0);
}

/**************************************************************************************
下層
***************************************************************************************/
/* VISUAL
=========================================== */
.visual {
  height: 35vw;
  position: relative;
  text-align: center;
  overflow: hidden;
  margin-top: 48px;
  background: url(../img/kasou.png),url(../img/poster.png);
  background-repeat: no-repeat,no-repeat;
  background-position: right 0vw bottom 0,center top;
  background-size:contain,cover;
}

.visual_rinkai {
  height: 35vw;
  position: relative;
  text-align: center;
  overflow: hidden;
  margin-top: 48px;
  background: url(../img/kasou_rinkai.png),url(../img/poster.png);
  background-repeat: no-repeat,no-repeat;
  background-position: right 0vw bottom 0,center top;
  background-size:contain,cover;
}

@media screen and (min-width: 768px) {
  .visual {
    height: 320px;
    position: relative;
    background-size:100%;
    margin-top: 80px;
    background: url(../img/kasou.png),url(../img/kasou_2.png),url(../img/kasou_3.png);
    background-repeat: no-repeat,no-repeat,no-repeat;
    background-position: center bottom 0,center top,center top;
    background-size:contain,cover,cover;
  }
  .visual_rinkai {
    height: 320px;
    position: relative;
    background-size:100%;
    margin-top: 80px;
    background: url(../img/kasou_rinkai.png),url(../img/kasou_2.png),url(../img/kasou_3.png);
    background-repeat: no-repeat,no-repeat,no-repeat;
    background-position: center bottom 0,center top,center top;
    background-size:contain,cover,cover;
  }
  .visual:before,
  .visual_rinkai:before {
    content: "";
    display: block;
    padding-top: 15%;
    /* 高さを幅の15%に固定 */
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .visual,
  .visual_rinkai {
    width: 100%;
    height: auto;
  }
}

/*枠*/
.event-area {
  background-color: #fff;
  color: #000;
  font-weight: bold;
  border-radius: 10px;
  border: 3px solid #030644;
  padding: 20px 12px;
}