/* ========== メニューボタン ========== */

/* モーダルの土台（初期状態は非表示かつタッチ・クリック無効） */
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* クラス .is-open がついた瞬間にふんわり表示される */
.modal-container.is-open {
  opacity: 1;
  visibility: visible;
}

.modal-container.is-open .modal-content,
.modal-container.is-open .modal-content2 {
  transform: translateY(0);
}

/* 背景の半透明の黒マスク */
.modal-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}

.modal-bg2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7);
}

/* モーダルの白背景ボックス */
.modal-content {
  position: relative;
  background-color: #fff;
  width: calc(90% - 90px);
  max-width: 920px;
  padding: 45px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transform: translateY(20px);
  transition: transform 0.4s ease;
  max-height: 85vh;
  /* モーダル自体の最大高さを指定 */
  overflow: visible;
}

.modal-content2 {
  position: relative;
  background-color: #fff;
  width: calc(90% - 90px);
  max-width: 900px;
  padding: 45px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transform: translateY(20px);
  transition: transform 0.4s ease;
  max-height: 85vh;
  /* モーダル自体の最大高さを指定 */
  overflow: visible;
}

.modal-scroll-area {
  max-height: 85vh;
  /* 枠の高さに合わせる */
  overflow-y: auto;
  /* ここだけで縦スクロールさせる */
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

/* 2. 閉じるボタンを白枠の「外側の右上」に配置 */
.modal-close {
  position: absolute;
  top: -50px;
  /* 白枠の「上」へマイナス方向に突き出させる */
  right: -5px;
  /* 白枠の「右端」に合わせる */
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 10;
}

.modal-close2 {
  position: absolute;
  top: -50px;
  /* 白枠の「上」へマイナス方向に突き出させる */
  right: -5px;
  /* 白枠の「右端」に合わせる */
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 10;
}

/* 3. 2本の線（擬似要素）で「×」を描画する（背景が暗いので色は白にしています） */
.modal-close::before,
.modal-close::after,
.modal-close2::before,
.modal-close2::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  /* 線の太さ */
  background-color: #fff;
  /* 線の色（暗い背景に映える白） */
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.modal-close2::before,
.modal-close2::after {
  background-color: #000;
}

/* 4. それぞれの線を斜めに交差させて「×」にする */
.modal-close::before,
.modal-close2::before {
  transform: rotate(45deg);
}

.modal-close::after,
.modal-close2::after {
  transform: rotate(-45deg);
}

/* ホバー時に少し回転させるなどのおしゃれな動き（お好みで） */
.modal-close:hover::before,
.modal-close:hover::after {
  background-color: #ddd;
  /* ホバー時に少し薄いグレーにする等 */
}

/* 中身のレイアウト（簡易版） */
.modal-inner {
  display: flex;
  justify-content: space-between;
  gap: 45px;
  align-items: stretch;
}

.modal-inner2 {
  display: flex;
  justify-content: space-between;
}

/* 左右の各カラム：縦方向のFlexboxにする */
.modal-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* 中身を縦に並べる */
}

/* 中身のボディ部分：flex:1 を指定して、余った高さをここに埋めさせる */
.modal-col-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}

.modal-col a {
  transition: .3s;
}

.modal-col a:hover {
  opacity: .8;
}

/* 右側だけボックスが1つのため、左側の2つ分の高さと同じになるように引き伸ばす */
.modal-col:last-child .modal-box-single {
  flex: 1;
  /* これにより右側のボックスが縦に伸びて、左側と高さがピタッと一致します */
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(135deg, #dbeaff, #bfd3ff 56%, #767cf4);
}

.modal-col-title {
  font-size: 30px;
  text-align: center;
  color: #003366;
}

.modal-box,
.modal-box2 {
  font-size: 24px;
  line-height: 1.3;
  font-weight: bold;
  color: #000;
  text-align: center;
  background-image: linear-gradient(135deg, #ffebd4, #ffded3 56%, #e89271);
  padding: 35px 0;
  position: relative;
}

.modal-box span {
  font-size: 18px;
}

.modal-box2 {
  font-size: 20px;
  padding: 15px 0;
  margin-top: 20px;
}

/* 右下の三角を擬似要素で作成 */
.modal-box::after,
.modal-box2::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 15px;
  /* 三角の横幅サイズ */
  height: 15px;
  /* 三角の縦幅サイズ */
  /* 左上から右下にかけて「透明 → 濃い青」のグラデーションにすることで、綺麗な直角三角形を作る */
  background: linear-gradient(135deg, transparent 50%, #003366 50%);
}

/* 注釈のスタイル（必要に応じて） */
.modal-note {
  font-size: 12px;
  color: #000;
  margin-top: 30px;
  margin-bottom: 15px;
}

/* 一番下のボタンを常に底面に固定（押し下げる） */
.modal-btn.primary {
  margin-top: auto;
  line-height: 1.5;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  background-image: linear-gradient(135deg, #003366, #0050c8);
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
}

.modal-btn.primary span {
  font-size: 18px;
}

.modal-btn.primary::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 20px;
  height: 15px;
  background-image: url(../share/img/win-icon-white.svg);
  background-size: cover;
}

.modal-divider {
  background-color: #003366;
  width: 1px;
}

.modal-list a {
  opacity: .8;
}

.blank-win {
  position: relative;
  padding-right: 25px;
}

.blank-win::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 15px;
  background-image: url(../share/img/win-icon-blue.svg);
  background-repeat: no-repeat;
  background-size: cover;
  right: 0;
}

.arrow-link {
  position: relative;
  display: inline-block;
  padding-right: 20px;
  /* 矢印のスペースを空ける */
  text-decoration: none;
  color: #003366;
  /* リンクの文字色に合わせて調整 */
}

.arrow-link::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 5px;
  width: 6px;
  height: 6px;
  /* 枠線を使って「くの字」を作る */
  border-top: 2px solid #003366;
  border-right: 2px solid #003366;
  /* 45度回転させて矢印にする */
  transform: translateY(-50%) rotate(45deg);
}

.modal-list-title {
  font-size: 20px;
  font-weight: bold;
  color: #003366;
  position: relative;
}

.modal-list-title::after {
  content: "";
  width: 21px;
  height: 21px;
  background-image: url("../share/img/arrow_icon.svg");
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  margin-left: 10px;
}

.modal-list-link {
  color: #003366;
  font-size: 16px;
  margin-top: 15px;
  margin-left: 15px;
}

.modal-list-link-bottom-wrap {
  text-align: right;
}

.modal-list-link-bottom-inner {
  text-align: left;
  display: inline-block;
  margin-top: 40px;
}

.modal-list-link-bottom {
  color: #003366;
  font-size: 16px;
  margin-top: 15px;
  margin-left: 15px;
  padding-left: 15px;
  position: relative;
}

.modal-list-link-bottom::before {
  content: '';
  /* 必須 */
  position: absolute;
  top: 45%;
  /* 垂直方向の中央に配置 */
  left: 0;
  transform: translateY(-50%);
  /* 基準位置からさらに上に半分ずらして完全な中央揃えにする */

  /* --- ここで三角形を描画する --- */
  width: 0;
  height: 0;
  border-style: solid;
  /* 上・右・下・左のボーダーで三角形を作る */
  /* border-width: 【高さの半分】 0 【高さの半分】 【幅】 */
  border-width: 6px 0 6px 6px;
  /* 高さ10px、幅8pxの三角 */
  /* border-color: transparent transparent transparent 【色】 */
  border-color: transparent transparent transparent #003366;
  /* 左側だけ色をつけて三角にする */
}

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

  .modal-content {
    max-height: 85vh;
    max-height: 85dvh;
    overflow: visible;
    /* 閉じるボタンが隠れないようにする */
    box-sizing: border-box;
    width: calc(90% - 12vw);
    padding: 6vw;
  }

  .modal-content2 {
    max-height: 85vh;
    max-height: 85dvh;
    width: 90%;
    overflow: visible;
    /* 閉じるボタンが隠れないようにする */
    box-sizing: border-box;
  }

  /* 3. モーダル内のスクロールエリアの重複設定をリセット（白枠側にスクロールを持たせるため） */
  .modal-scroll-area {
    max-height: calc(85vh - 40px);
    max-height: calc(85dvh - 40px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* iOSでの滑らかなスクロール */
  }

  .modal-close,
  .modal-close2 {
    top: -8vw;
    right: -1vw;
    width: 7.7vw;
    height: 7.7vw;
  }

  .modal-inner,
  .modal-inner2 {
    display: block;
  }

  .modal-col-title {
    font-size: 4.8vw;
  }

  .modal-col-body {
    margin-top: 2.66vw;
  }

  .modal-divider {
    width: 100%;
    height: 1px;
    margin: 3.33vw 0;
  }

  .modal-box,
  .modal-box2 {
    font-size: 4.26vw;
    padding: 4.66vw 0;
  }

  .modal-box::after,
  .modal-box2::after {
    right: 2vw;
    bottom: 2vw;
    width: 2.4vw;
    height: 2.4vw;
  }

  .modal-box span {
    font-size: 3.33vw;
    margin-right: 3.33vw;
  }

  .modal-box2 {
    font-size: 3.2vw;
    padding: 3.73vw 0;
    margin-top: 2.4vw;
  }

  .modal-note {
    font-size: 2.5vw;
    margin-top: 2.7vw;
    margin-bottom: 2vw;
  }

  .modal-btn.primary {
    font-size: 3.2vw;
    height: auto;
    padding: 4vw 0;
  }

  .modal-btn.primary span {
    font-size: 3.2vw;
  }

  .modal-btn.primary::after {
    right: 2vw;
    bottom: 2vw;
    width: 4vw;
    height: 3vw;
  }

  .modal-list-title {
    font-size: 4.76vw;
    margin-top: 5vw;
  }

  .modal-list-title::after {
    width: 4.9vw;
    height: 4.9vw;
    margin-left: 1.5vw;
    top: 8%;
  }

  .modal-list-link {
    font-size: 3.6vw;
    margin-top: 2.6vw;
    margin-left: 3.73vw;
  }

  .arrow-link {
    padding-right: 3.5vw;
  }

  .arrow-link::after {
    width: 1vw;
    height: 1vw;
  }

  .blank-win::after {
    width: 4.13vw;
    height: 3.2vw;
    margin-left: 1vw;
    top: 10%;
  }

  .modal-list-link-bottom-wrap {
    display: none;
  }
}


header {
  min-height: 65px;
  /* ヘッダーがfixedになっても親のスペースを空け続ける */
  position: relative;
  z-index: 30;
  transition: .4s;
}

.header-inner {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  color: #fff;
  position: relative;
}

.header-inner a {
  display: flex;
  align-items: center;
  transition: .3s;
}

.header-inner a:hover {
  color: #fff;
  opacity: .8;
}

.header-bg {
  width: 100%;
  background-image: linear-gradient(90deg, #003366, #0050c8);
  position: relative;
  transition: all 0.4s ease;
  z-index: 30;
  height: 65px;
  display: flex;
  align-items: center;
}

/* 固定されたときに、ふわっと上からスライドインさせる */
.header-bg.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* 影をつけて浮遊感を出すと、よりスムーズに見えます */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);

  /* ふわっと出すアニメーションを適用 */
  animation: headerFadeIn 0.3s ease;
}

/* 上からスッと現れるアニメーションの定義 */
@keyframes headerFadeIn {
  0% {
    transform: translateY(-10px);
    /* 少し上の位置から */
  }

  100% {
    transform: translateY(0);
    /* 元の位置へ */
  }
}

.corp-wrap {
  display: flex;
  align-items: center;
  /* PCでは会社名と英語を横並びにするならここもflexに */
}

.header-corp-name {
  font-size: 23px;
  font-weight: 700;
  line-height: 1.3;
}

.header-corp-name-en {
  font-size: 12px;
  line-height: 1.3;
  margin-left: 15px;
}

.header-page-name {
  font-size: 31px;
  line-height: 1.3;
  margin-left: 20px;
  padding-left: 20px;
  position: relative;
}

.header-page-name::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 30px;
  /* 線の高さをお好みで調整 */
  background-color: #fff;
}

.header-btn-wrap {
  position: absolute;
  display: flex;
  right: 0;
  top: 0;
  bottom: 0;
  align-items: center;
}

.header-top-btn-wrap {
  position: absolute;
  display: none;
  right: 0;
  top: 0;
  bottom: 0;
  align-items: center;
}

#header-container.page-top .header-btn-wrap {
  display: none;
}

#header-container.page-top .header-top-btn-wrap {
  display: flex;
}

.menu-label {
  font-size: 16px;
  color: #fff;
  margin-right: 15px;
}

.hamburger {
  display: block;
  width: 45px;
  z-index: 25;
  margin-right: 25px;
  text-align: center;
  cursor: pointer;
}

.header-btn-wrap .hamburger {
  margin-right: 0;
}

.hamburger span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: #fff;
  margin: 12px 0;
  transition: .4s;
}

.enter-btn,
.enter-btn-bottom {
  color: #003366;
  font-size: 22px;
  font-weight: bold;
  display: none;
  justify-content: center;
  align-items: center;
  width: 225px;
  height: 65px;
  background: linear-gradient(135deg, #dda9ff, #a8d1ff 50%, #b4feff);
  cursor: pointer;
  position: relative;
  transition: .3s;
  z-index: 30;
}

#header-container.page-top .enter-btn {
  display: flex;
}

.enter-btn:hover,
.enter-btn-bottom:hover {
  filter: brightness(1.12);
}

/* 画面ロック時に html と body の両方を固定する */
/* html.is-scroll-lock,
body.is-scroll-lock {
  overflow: hidden;
}

body.is-scroll-lock {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
} */

@media screen and (max-width:1000px) {
  .corp-wrap {
    display: block;
  }

  .header-corp-name-en {
    margin-left: 0;
    line-height: 1;
  }

  .header-corp-name {
    font-size: 18px;
  }
}

@media screen and (max-width:800px) {
  .menu-label {
    display: none;
  }
}

@media screen and (max-width: 760px) {
  #header-container.page-top .enter-btn {
    display: none;
  }

  .hamburger {
    width: 6vw;
    margin-right: 5vw;
  }

  #header-container.page-top .enter-btn-bottom {
    display: flex;
    position: fixed;
    font-size: 5vw;
    width: 100%;
    bottom: 0;
    top: auto;
    left: 0;
    right: 0;
    height: 10vw;
  }

  .enter-btn-bottom.is-absolute {
    top: calc(var(--footer-top) - var(--el-height) - 0px) !important;
  }
}

@media screen and (max-width: 639px) {
  header {
    min-height: 14.7vw;
  }

  .header-bg {
    height: 14.7vw;
  }

  .header-corp-name {
    font-size: 3.11vw;
  }

  .header-corp-name-en {
    font-size: 2vw;
  }

  .header-page-name {
    font-size: 6.58vw;
    margin-left: 2.7vw;
    padding-left: 2.7vw;
  }

  .header-page-name::before {
    width: .3vw;
    height: 6.3vw;
  }

  #header-container.page-top .enter-btn-bottom {
    font-size: 6.4vw;
    height: 16vw;
  }

  .hamburger {
    width: 7.73vw;
  }

  .hamburger span {
    height: .4vw;
    margin: 2.4vw 0;
  }
}




/* ========== フッター ========== */

/* 1. ソニーの自動生成ボタンを完全に消す */
.s5-returnToTop {
  display: none !important;
}

#footer-container {
  padding: 0;
}

/* 2. 自作のトップへ戻るボタン（右下固定、フッター手前で止まる対応） */
.my-custom-totop {
  position: fixed;
  right: 40px;
  bottom: 30px;
  width: 40px;
  height: 32px;
  cursor: pointer;
  background: url('../share/img/icon_01.png') no-repeat;
  opacity: 0.5;
  transition: opacity 0.3s, top 0.3s;
  z-index: 99;
  display: none;
  /* 最初はスクロールするまで非表示 */
}

.my-custom-totop:hover {
  opacity: 1;
}

/* --- 共通の絶対配置設定 --- */
.is-absolute {
  position: absolute !important;
  bottom: auto !important;
}

.my-custom-totop.is-absolute {
  /* PCのときの距離 */
  top: calc(var(--footer-top) - var(--el-height) - 30px) !important;
}

.blue-bg-footer {
  background-color: #003366;
  width: 100%;
  padding: .1px;
}

.blue-bg-footer a {
  transition: .3s;
}

.blue-bg-footer a:hover {
  opacity: .8 !important;
  color: #fff;
}

.inner-1200-wrap {
  width: 90%;
  max-width: 1200px;
  margin: 45px auto;
  color: #fff;
  position: relative;
}

.impressed-logo {
  position: absolute;
  right: 0;
  top: 0;
  width: 200px;
}

.footer-title {
  font-size: 20px;
}

.footer-flex {
  margin-top: 40px;
  display: flex;
}

.footer-flex-inner {
  display: flex;
}

.footer-flex-list {
  margin-right: 60px;
}

@media screen and (max-width: 900px) {
  .footer-flex-list {
    margin-right: 10px;
  }

  .footer-flex-list:last-child {
    margin-right: 0;
  }
}

@media screen and (max-width: 770px) {
  .footer-title {
    font-size: 16px;
  }

  .my-custom-totop {
    right: 3vw;
    bottom: 12vw;
  }
}

.footer-flex-list-title {
  font-size: 17px;
  font-weight: bold;
  position: relative;
}

.footer-flex-list-title::after {
  content: "";
  width: 17px;
  height: 17px;
  /* top: 5px; */
  background-image: url("../share/img/arrow_icon.svg");
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  margin-left: 5px;
}

.blank-win-grade {
  position: relative;
}

.blank-win-grade::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 12px;
  top: 2px;
  background-image: url(../share/img/win-icon-gradation.svg);
  background-repeat: no-repeat;
  background-size: cover;
  margin-left: 5px;
}

.arrow-link-white {
  position: relative;
  display: inline-block;
  padding-right: 15px;
  /* 矢印のスペースを空ける */
  text-decoration: none;
  color: #fff;
  /* リンクの文字色に合わせて調整 */
}

.arrow-link-white::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 5px;
  width: 6px;
  height: 6px;
  /* 枠線を使って「くの字」を作る */
  border-top: 1px solid #fff !important;
  border-right: 1px solid #fff !important;
  /* 45度回転させて矢印にする */
  transform: translateY(-50%) rotate(45deg);
}

.footer-flex-list-text {
  font-size: 14px;
  margin-top: 15px;
  margin-left: 15px;
}

.footer-bottom-text-wrap {
  text-align: right;
}

.footer-bottom-text-inner {
  text-align: left;
  display: inline-block;
}

.footer-bottom-list-text {
  font-size: 14px;
  margin-top: 15px;
  padding-left: 10px;
  position: relative;
}

.footer-bottom-list-text::before {
  content: '';
  position: absolute;
  top: 45%;
  left: 0;
  transform: translateY(-50%);
  /* 三角形のサイズを指定 */
  width: 6px;
  height: 12px;
  /* 好きなグラデーションを設定（例として水色〜白系のグラデーション） */
  background: linear-gradient(135deg, #1fa8fd 0%, #a2ffff 100%);
  /* 四角形を右向きの三角形に切り抜く */
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

@media screen and (max-width: 680px) {
  .inner-1200-wrap {
    margin: 6vw auto;
  }

  .impressed-logo {
    top: auto;
    width: 45vw;
    bottom: 20vw;
  }

  .footer-flex {
    margin-top: 6vw;
    display: block;
  }

  .footer-flex-inner {
    margin-top: 6vw;
    justify-content: space-between;
  }

  .footer-flex-list-title {
    font-size: 4vw;
  }

  .footer-flex-list-title::after {
    width: 4vw;
    height: 4vw;
    top: .3vw;
    margin-left: 1vw;
  }

  .footer-flex-list-text {
    font-size: 3.33vw;
    margin-top: 2.3vw;
    margin-left: 2.6vw;
  }

  .blank-win-grade::after {
    width: 3.33vw;
    height: 2.53vw;
    top: .5vw;
    margin-left: 1vw;
  }

  .arrow-link-white {
    padding-right: 4vw;
  }

  .arrow-link-white::after {
    right: 2vw;
    width: 1.5vw;
    height: 1.5vw;
  }

  .footer-bottom-text-wrap {
    text-align: left;
    margin-top: 20vw;
  }

  .footer-bottom-list-text {
    font-size: 3.33vw;
    margin-top: 2.3vw;
    padding-left: 3vw;
  }

  .footer-bottom-list-text::before {
    width: 1.5vw;
    height: 3vw;
  }
}

.s5-pageFooter {
  margin-top: 0 !important;
}

@media screen and (max-width:639px) {
  .footer-title {
    font-size: 4.39vw;
  }

  .my-custom-totop {
    bottom: 20vw;
  }
}