@charset "utf-8";
@-ms-viewport {
	width: device-width;
}
/*---------------------------------------
チェック
---------------------------------------*/
/*
*{
	border:1px solid #FF0000;
}
*/

/*---------------------------------------
clearfix
---------------------------------------*/
.clearfix {
	*zoom: 1;
}
.clearfix:before, .clearfix:after {
	display: table;
	content: "";
	line-height: 0;
}
.clearfix:after {
	clear: both;
}

/*---------------------------------------
全体　共通
---------------------------------------*/
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
	font-family: YakuHanJP, 'Noto Sans JP', "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
	font-feature-settings: "palt";
	font-weight: 400;
	position: relative;
}
.layout_center {
  overflow: hidden;
  background: #000000;
  color: #ffffff;
}
.site_main{
	padding: 0 3% 15% 3%;
}

/*---------------------------------------
全体3分割レイアウト
---------------------------------------*/
.page_frame {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-columns: 1fr min(100%, 390px) 1fr;
}

/* 左右背景 */
.left_bg {
  position: relative;
  background: url("../../images/common/bg/bg_wave_big_left.png") no-repeat top left / 75%,url("../../images/common/pat/pat_01.png") repeat center / 350px,#000000;
  overflow: hidden;
}
.right_bg {
  position: relative;
  background: url("../../images/common/bg/bg_wave_big_right.png") no-repeat bottom right / 90%,url("../../images/common/pat/pat_01.png") repeat center / 350px,#000000;
  overflow: hidden;
}
.side_deco {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}
.side_deco img {
  max-width: 60%;
  height: auto;
  display: block;
  opacity: 0.9;
}

/* 中央カラム */
.center_area {
  position: relative;
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
}
.center_bg {
  position: absolute;
  inset: 0;
  background: url("../../images/common/bg/login_bg_02.jpg") no-repeat center center;
  background-size: cover;
  z-index: 0;
}
.center_bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(33,30,35,0.9);
}

/*---------------------------------------
ヘッダー
---------------------------------------*/
/* headerレイアウト */
.site_header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 20;
  padding: 20px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header_left,
.header_right{
  display:flex;
  align-items:center;
}

.header_left i{
  font-size:22px;
  color:#ffffff;
}

.header_back,
.header_home{
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
}

.hamburger_btn{
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  position:relative;
}
.hamburger_btn img{
	width: 35px;
}

/* header背景 */
.site_header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.45) 0%,
    rgba(0,0,0,0.45) 70%,
    rgba(0,0,0,0) 100%
  );
  z-index: -1;
}

/* アイコン切り替え */
.menu_close_icon{
  display:none;
}
.hamburger_btn.active .menu_open_icon{
  display:none;
}
.hamburger_btn.active .menu_close_icon{
  display:block;
}

/*---------------------------------------
スクロール領域
---------------------------------------*/
.center_scroll {
  position: relative;
  z-index: 10;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: contain;
}
.center_scroll::-webkit-scrollbar {
  display: none;
}

/* SP */
@media screen and (max-width: 390px) {
  .page_frame {
    display: block;
  }
  .left_bg,
  .right_bg {
    display: none;
  }
  .center_area {
    width: 100%;
  }
}

/*---------------------------------------
共通モーダル
---------------------------------------*/

body.is_modal_open {
  overflow: hidden;
}

/* オーバーレイ */

.modal_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: rgba(0,0,0,0.55);
  z-index: 9999;

  opacity: 0;
  visibility: hidden;

  transition: opacity .25s ease;
}

.modal_overlay.is_show {
  opacity: 1;
  visibility: visible;
}

.modal_overlay.is_closing {
  opacity: 0;
}


/* モーダルパネル */

.modal_panel {
  position: absolute;
  left: 50%;
  top: 0;

  transform: translate(-50%, 100%);

  width: 100%;
  max-width: 390px;

  height: 100vh;
  height: 100dvh;

  background: url("../../images/common/bg/bg_wave_big_right.png") no-repeat bottom right / 50%,rgba(20,20,20,0.96);

  overflow: hidden;

  transition: transform 0.35s ease;
	border-radius: 12px 12px 0 0;
}

/* 開いた時 */

.modal_overlay.is_show .modal_panel {
  transform: translate(-50%, 0);
}

/* 閉じる時 */

.modal_overlay.is_closing .modal_panel {
  transform: translate(-50%, 100%);
}


/* モーダルスクロール領域 */

.modal_inner {
  position: relative;

  height: 100vh;
  height: 100dvh;

  overflow-y: auto;

  -webkit-overflow-scrolling: touch;

  box-sizing: border-box;

  scrollbar-width: none;
  -ms-overflow-style: none;
}

.modal_inner::-webkit-scrollbar {
  display: none;
}


/* 閉じるボタン */

.modal_close {
  position: absolute;

  top: 20px;
  right: 16px;

  z-index: 20;

  width: 35px;

  background: none;
  border: none;
  padding: 0;

  cursor: pointer;
}

.modal_close img {
  display: block;
  width: 100%;
}


/*---------------------------------------
モーダル内部共通
---------------------------------------*/

.modal_contents {
  box-sizing: border-box;
	min-height: 100%;
}

/* モーダルタイトル */

.modal_contents h2 {
  margin: 0 0 16px;
}

/* モーダル内テキスト */

.modal_contents p {
  margin: 0;
}


/* ローディング / エラー */

.modal_loading,
.modal_error {
  padding-top: 40px;
  text-align: center;
  color: #ffffff;
}


/*---------------------------------------
SP調整
---------------------------------------*/

@media screen and (max-width: 390px) {

  .modal_panel {
    max-width: none;
  }

}

/*---------------------------------------
共通 勝率ゲージ
---------------------------------------*/
.rate_gauge{
  width: 40px;
  flex-shrink: 0;
}

.rate_gauge_circle{
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: conic-gradient(
    #f0a43a 0deg 225deg,
    #d9d9d9 225deg 360deg
  );
  -webkit-mask: radial-gradient(circle, transparent 0 12px, #000 13px);
  mask: radial-gradient(circle, transparent 0 12px, #000 13px);
}

.rate_gauge_inner{
  display: none;
}

@media screen and (max-width: 390px) {

}

/*---------------------------------------
共通 横スライダー　PCドラッグ
---------------------------------------*/
.js_drag_scroll{
  cursor: grab;
}

.js_drag_scroll.is_dragging{
  cursor: grabbing;
  user-select: none;
}

/*---------------------------------------
共通 ページタイトル
---------------------------------------*/
.page_heading {
  margin-bottom: 1em;
}

.page_title {
  display: flex;
  align-items: center;
  gap: 0.3em;
  margin: 0;
  color: #ffffff;
  font-size: 25px;
  font-weight: 700;
}

.page_title_text {
  display: inline-block;
}

.page_title_help_btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  appearance: none;
}

.page_title_help_btn img {
  display: block;
  width: 100%;
  height: auto;
}

/*---------------------------------------
共通 ローディング
---------------------------------------*/
/* グローバルローディング */
.global_loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
}

.global_loading_bar {
  display: block;
  width: 0;
  height: 100%;
  background: #b99e66;
}

.global_loading.is_loading .global_loading_bar {
  animation: loadingBarMove 1.2s ease-out forwards;
}

@keyframes loadingBarMove {
  0% {
    width: 0%;
  }
  100% {
    width: 85%;
  }
}

/* プチローディング */
.mini_loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 238, 214, 0.12);
  opacity: 0;
  visibility: hidden;
  /*
  pointer-events: none;
  */
  pointer-events: auto;
  z-index: 9998;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.mini_loading.is_show {
  opacity: 1;
  visibility: visible;
}

.mini_loading_spinner {
  position: relative;
  width: 25px;
  height: 25px;
}

.mini_loading_spinner span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 12px;
  margin: -6px 0 0 -2.5px;
  border-radius: 999px;
  background: #8f8f8f; /* ベースグレー */
  transform-origin: 50% 16px;
  opacity: 0.2;
  animation: miniSpinnerFade 1.1s linear infinite;
}

/* 9本配置（360÷9=40度） */
.mini_loading_spinner span:nth-child(1) { transform: rotate(0deg) translateY(-11px);  animation-delay: 0s; }
.mini_loading_spinner span:nth-child(2) { transform: rotate(40deg) translateY(-11px); animation-delay: 0.12s; }
.mini_loading_spinner span:nth-child(3) { transform: rotate(80deg) translateY(-11px); animation-delay: 0.24s; }
.mini_loading_spinner span:nth-child(4) { transform: rotate(120deg) translateY(-11px); animation-delay: 0.36s; }
.mini_loading_spinner span:nth-child(5) { transform: rotate(160deg) translateY(-11px); animation-delay: 0.48s; }
.mini_loading_spinner span:nth-child(6) { transform: rotate(200deg) translateY(-11px); animation-delay: 0.60s; }
.mini_loading_spinner span:nth-child(7) { transform: rotate(240deg) translateY(-11px); animation-delay: 0.72s; }
.mini_loading_spinner span:nth-child(8) { transform: rotate(280deg) translateY(-11px); animation-delay: 0.84s; }
.mini_loading_spinner span:nth-child(9) { transform: rotate(320deg) translateY(-11px); animation-delay: 0.96s; }

/* 明るさが流れるアニメーション */
@keyframes miniSpinnerFade {
  0% {
    opacity: 1;
    background: #e6e6e6; /* 明るいグレー（先頭） */
  }
  100% {
    opacity: 0.2;
    background: #8f8f8f; /* ベースグレー */
  }
}

/*---------------------------------------
出現アニメーション（fade-up）
---------------------------------------*/
.js_fade_up {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 1s ease-out, transform 1s ease-out;
	will-change: opacity, transform;
}
.js_fade_up.is_show {
	opacity: 1;
	transform: translateY(0);
}

/*---------------------------------------
表示領域で出現（blur）
---------------------------------------*/
.js_blur_in{
	opacity: 0;
	filter: blur(20px);
	transition:
		opacity 1s ease,
		filter 1s ease;
}

.js_blur_in.is_show{
	opacity: 1;
	filter: blur(0);
}

/*---------------------------------------
KV 出現アニメーション（blur）
---------------------------------------*/
.blur_in {
	opacity: 0;
	filter: blur(5vw);
}

.blur_in_small {
	opacity: 0;
	filter: blur(20px);
}

/* ローディング終了後に発火 */
body.is_before_top_loaded .blur_in {
	animation-name: blurIn;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}

body.is_before_top_loaded .blur_in_small {
	animation-name: blurInSmall;
	animation-duration: 1.2s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}

@keyframes blurIn {
	0% {
		opacity: 0;
		filter: blur(5vw);
	}

	100% {
		opacity: 1;
		filter: blur(0);
	}
}

@keyframes blurInSmall {
	0% {
		opacity: 0;
		filter: blur(20px);
	}

	100% {
		opacity: 1;
		filter: blur(0);
	}
}