/* CSS Document */
body{
  cursor: auto;   /* ブラウザ純正の矢印 */
}
.cursor-dot{
  position: fixed;
  top: 0;
  left: 0;
  width: 0px;
  height: 0px;
  background: rgba(0,0,0,0.6);   /* ピルの色 */
  border-radius: 999px;          /* 8pxなら円、64×24ならピルに自動でなる */
  overflow: hidden;              /* 小さい間はテキストを隠す */
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width .25s cubic-bezier(.2,.8,.2,1),
  height .25s cubic-bezier(.2,.8,.2,1),
  opacity .2s ease;
}
.cursor-dot.is-drag{
  width: 64px;
  height: 24px;
  background: rgba(0,0,0,0.1);
}
.cursor-dot .cursor-label{
  color: #fff;
  font-size: 11px;
  letter-spacing: .1em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .12s ease;   /* 通常はすぐ消える */
}
.cursor-dot.is-drag .cursor-label{
  opacity: 1;
  transition: opacity .2s ease .18s;  /* 箱が広がった後に出す（0.18s遅延） */
}
/* TOP
------------------------------------------------------------*/
header{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  padding: 0 24px;
  display: flex;
  height: 80px;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
  opacity: 0;
  animation: fadeInHeader 0.4s ease-out 1.2s forwards;
}

header p a{
  color: #FFF;
  font-family: "Helvetica Neue";
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  width: 124px;
}

header p a:hover{
  color: #FFF;
  text-decoration: underline;
}

@keyframes fadeInHeader {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

header h1{
  display: flex;
  width: 100%;
  gap: 11px;
}

@media screen and (max-width: 768px) {
  header{
    padding: 0 16px;
    height: 48px;
  }

  header p a{
    font-size: 10px;
    gap: 6px;
    width: 105px;
  }

  header p a:hover{
    color: #FFF;
    text-decoration: underline;
  }

  @keyframes fadeInHeader {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  header h1{
    display: flex;
    width: 100%;
    gap: 11px;
  }

  header h1 svg{
    width: 197px;
    height: auto;
  }
}

.mid{
  width: 100%;
  max-width: 1240px;
  padding: 0 40px;
  display: flex;
  justify-content: space-between;
  margin: 350px auto 0px;
}

.mid h3{
  color: #FFF;
  font-size: 82px;
  font-style: normal;
  font-weight: 600;
  line-height: 140%; /* 114.8px */
  width: 500px;
}

.mid p{
  width: 540px;
  color: #FFF;
  font-size: 24px;
  font-weight: 600;
  line-height: 220%; /* 52.8px */
  margin-top: 210px;
}

@media screen and (max-width: 768px) {
  .mid{
    max-width: 100%;
    padding: 0 20px;
    margin: 120px auto 0px;
    display: block;
  }

  .mid h3{
    font-size: 40px;
    font-weight: 600;
    line-height: 140%; /* 114.8px */
    width: 100%;
  }

  .mid p{
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    line-height: 220%; /* 52.8px */
    margin-top: 40px;
  }
}

/*TOP------------------------------------------------------------*/

/* TOP
------------------------------------------------------------*/
.top{
  width: 100%;
  padding:80px 50px 0;
}

.top h2 span{
  display: block;
}

.top h2 .company{
  margin-top: 27px;
  margin-bottom: 12px;
}



@media screen and (max-width: 768px) {
  .top{
    width: 100%;
    padding:82px 0px 0;
  }

  .top h2 span{
    display: block;
  }



}

/*TOP------------------------------------------------------------*/

/* wave
------------------------------------------------------------*/
.wave-wrap { width: 100%; }
.wave { display: block; width: 100%; height: 280px; }
@media screen and (max-width: 768px) {
}

main{
  position: relative;
}

#rive-canvas{
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 5;
  min-height: 580px;
  cursor: auto;
}

#rive-canvas.active{
  z-index: 100;
}

@media (hover: none) {
  #rive-canvas {
    pointer-events: none;
  }
}

.rive-cursor{
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity .2s ease;
  transform: translate(-9999px, -9999px);
}
.rive-cursor img{
  display: block;
  width: 48px;    /* ← ここでサイズ指定（自由に変えられる） */
  height: auto;
}

/*wave------------------------------------------------------------*/

/*pic_area------------------------------------------------------------*/
.pic_area{
  position: relative;
  width: 100%;
  background: url(../images/bg_gallery.png) no-repeat center center;
  background-size: 100% auto;
  padding: 280px 0;
}

.pic_area h3{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none;
}

@media screen and (max-width: 768px) {
  .pic_area{
    position: relative;
    width: 100%;
    background: url(../images/bg_gallery_sp.png) no-repeat center center;
    background-size: 100% auto;
    padding: 60px 0;
  }

  .pic_area h3{
    width: 240px;
  }

  .pic_area h3 svg{
    width: 100%;
    height: auto;
  }
}

/*/pic_area------------------------------------------------------------*/

.modal_cover{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(15px);
  z-index: 21;
  display: none;
}

.pic_modal{
  display: none;
}

.pic_modal .inner{
  position: fixed;
  z-index: 2;
  width: 730px;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  font-family: "Fjalla One", sans-serif;
  font-weight: 400;
  font-style: normal;
  z-index: 30;
  display: none;
}

.pic_modal .close{
  position: fixed;
  right: 36px;
  top: 36px;
  z-index: 35;
}

.pic_modal .date{
  text-align: center;
  display: flex;
  gap: 4px;
  margin-bottom: 15px;
  color: #1A30A3;
  font-size: 14px;
  line-height: normal;
  letter-spacing: 1.12px;
  justify-content: center;
  align-items: end;
}

.pic_modal .date .date-val{
  font-size: 40px;
  line-height: 1;
  letter-spacing: normal;
  position: relative;
  top: 7px;
}

.pic_modal .char{
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity .4s ease, transform .4s ease;
}
.pic_modal .char.is-visible{
  opacity: 1;
  transform: translateY(0);
}

.pic_modal .date span.date_label{
  font-size: 14px;
  line-height: 1;
  letter-spacing: normal;
  position: relative;
  top: 2px;
}

.pic_modal .slide_view{
  margin: 0 auto 20px;
  height: 61.1vh;
  max-height: 440px;
  transition: width .45s ease;
}

#canvas-container{
  cursor: grab;
}

.pic_modal .slide_pic{
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  position: relative;
  height: 100%;
  transition: transform .45s ease;
  will-change: transform;
  touch-action: pan-y;
}
.pic_modal .slide_pic.dragging{
  transition: none;
}
.pic_modal .slide_pic.cursor-drag{
  cursor: grab;
}
.pic_modal .slide_pic.cursor-drag.dragging{
  cursor: grabbing;
}
.pic_modal .slide_pic li{
  flex: 0 0 auto;
  height: 100%;
  list-style: none;
}
.pic_modal .slide_pic li img{
  height: 100%;
  width: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.pic_modal .no a{ cursor: pointer; }

.pic_modal .no a{
  padding: 10px 25px 10px 10px;
}

.pic_modal .no a.prev{
  padding: 10px 10px 10px 25px;
}

.pic_modal .no{
  text-align: center;
  color: #1A30A3;
  text-align: center;
  font-size: 10px;
  margin-bottom: 10px;
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.pic_modal .text{
  color: #1A30A3;
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 175%; /* 24.5px */
}

.pic_modal .change_modal{
  position: fixed;
  right: 40px;
  bottom: 5px;
  z-index: 25;
  width: 132px;
  height: 132px;
}

.pic_modal .change_modal .icon{
  display: block;
  width: 49px;
  height: 49px;
  position: absolute;
  left: calc(50% + 1px);
  top: 50%;
  transform: translate(-50%,-50%);
  transition: all 0.4s;
}

.pic_modal .change_modal:hover .icon{
  transform: translate(-50%,-50%) scale(1.2);
}

.pic_modal .change_modal{
  position: fixed;
  right: 40px;
  bottom: 5px;
  z-index: 25;
  width: 132px;
  height: 132px;
  transform-origin: center center;   /* 中心基準＝その場で拡大 */
  transition: transform 0.4s;
}
.pic_modal .change_modal:hover{
  transform: scale(1.3);
}

@media screen and (max-width: 768px) {
  .pic_modal .change_modal{
    position: fixed;
    right: 50%;
    transform: translateX(50%);
    /*
    bottom: 35px;
    */
    bottom: 15px;
    width: 126px;
    height: 126px;
  }

  .pic_modal .change_modal .icon{
    display: block;
    width: 58px;
    height: 58px;
    position: absolute;
    left: calc(50% + 3px);
    top: calc(50% + 2px);
    transform: translate(-50%,-50%);
    transition: all 0.4s;
  }

  .pic_modal .change_modal:hover .icon{
    transform: translate(-50%,-50%) scale(1);
  }
  .pic_modal .change_modal:hover{
    transform: translateX(50%);
  }
}

.change_modal .ring {
  display: inline-block; /* 回転（transform）を有効にするために必須 */

  /* 10秒かけて / 等速(linear)で / 無限に(infinite)回転 */
  animation: rotateTextCircle 10s linear infinite;

  /* 回転の中心がズレるのを防ぐ設定 */
  transform-origin: center;
}

/* 無限回転のアニメーション定義 */
@keyframes rotateTextCircle {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/***********************************************/
/* 画面の余白をリセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  width: 100%;
  overflow-x: hidden;
}

/* 青い背景 */
.background {
  width: 100vw;
  height: 100vh;
  background: #5666be; /* 前回の青色 */
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  /*overflow: hidden;*/
  animation: fadeOutBgBlue 0.6s linear 2.3s forwards;
}

/* アニメーションするコンテナ全体 (拡大) */
.animated-container {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: scale(0);
  /* 拡大アニメーションの設定：1秒(1s) / 等速(linear) / 終了状態を維持(forwards) */
  animation: growTogether 1s linear forwards;
  flex-wrap: wrap;
  z-index: 1;
}

/* グレーの円 */
.circle {
  width: 150vmax;
  height: 150vmax;
  background-color: #929697; /* 前回のグレー */
  border-radius: 50%;
  position: absolute;
}

/* テキストPNG要素 (配置調整と回転) */
.text-png {
  position: absolute;
  /* ご自身で調整されたベストなサイズをベースにレスポンシブ化 */
  width: calc(150vmax + 32vmax);
  height: calc(150vmax + 32vmax);

  /* テキストPNG画像 */
  background-image: url('../images/ring_text.png'); /* 画像ファイルを指定 */
  background-size: contain; /* コンテナに収める */
  background-repeat: no-repeat;
  background-position: center;
  z-index: 10;

  /* 回転アニメーションの設定：10秒で1回転(10s) / 等速(linear) / 無限ループ(infinite) */
  animation: rotateText 10s linear infinite;
  will-change: transform;   /* GPUレイヤーに載せて再ラスタライズを防ぐ */
  backface-visibility: hidden;   /* レイヤー化を確実にする保険 */
  animation: none;
}

.text-png {
  position: absolute;
  width: 70vmax;    /* 実寸を小さく（描画負荷を下げる）。旧: calc(150vmax + 32vmax) */
  height: 70vmax;
  background-image: url('./a.svg');   /* PNGにするなら ./a.png */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 10;
  animation: rotateText 10s linear infinite;
  will-change: transform;
}

/* ＝ 後半（穴あき演出）のスタイル ＝ */

/* 後半の要素（コンテンツ＋フチの文字）をまとめるコンテナ */
.hole-container {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none; /* アニメーション中の誤クリック防止 */
  z-index: 2;
}

/* 穴が開いていくコンテンツ層 */
.main-content {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: auto; /* アミュニーション完了後は中のボタン等を押せるようにする */
  z-index: 1;
}

/* 【確認用】穴の奥に見えるコンテンツ */
.actual-content {
  width: 100%;
  height: 100%;
  background:url(./images/bg_top.png) no-repeat center center #1A30A3; /* 前回の青色 */
  background-size: auto 100vh;
  display: flex;
  justify-content: center;
  /*align-items: center;*/
  font-family: sans-serif;
  flex-wrap: wrap;
  z-index: 1;
  position: relative;
  animation: fadeOutBgNavy 0.6s linear 2.3s forwards;
}

/* 後半用のテキストリングを拡大させるコンテナ */
.second-text-container {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: scale(0);
  /* 穴が開くスピードと完全に同期させるため、0.3秒遅れで1秒かけて拡大 */
  animation: growHoleText 1s linear 0.3s forwards;
  z-index: 1;
}

@keyframes fadeOutBgBlue {
  to { background-color: rgba(86, 102, 190, 0); }   /* #5666be */
}
@keyframes fadeOutBgNavy {
  to { background-color: rgba(26, 48, 163, 0); }    /* #1A30A3 */
}


/* ＝ 🔴 Rive Canvas用のスタイル（配置と拡大の修正） ＝ */

.tori-container {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 20;
  pointer-events: none;
}

/* 全画面サイズの拡大用コンテナ */
.tori1-png {
  position: absolute;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: scale(0);
  /* 0.9秒遅れて、0.5秒かけて等速拡大 */
  animation: growRiveCanvas 0.5s linear 0.9s forwards;
}

/* 🔴 緑背景を排除し、Canvasを綺麗に中央配置するための透明なラッパー */
.rive-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent; /* 背景は透明にして穴の奥を見せる */
}


/* ＝ アニメーションの定義 ＝ */

/* 前半：グレーの円が拡大 */
@keyframes growTogether {
  0% {
    transform: scale(0);
    visibility: visible;
  }
  99% {
    transform: scale(1);
    visibility: visible;
  }
  100% {
    transform: scale(1);
    visibility: hidden; /*  アニメーション終了と同時にパッと消す */
  }
}

/* 共通：テキストが回転 */
@keyframes rotateText {
  0%   { transform: scale(2.6) rotate(0deg); }
  100% { transform: scale(2.6) rotate(360deg); }
}

/* 後半：グレー背景に中央から穴を開ける */
@keyframes openHole {
  0% { clip-path: circle(0vmax at 50% 50%); }
  100% { clip-path: circle(75vmax at 50% 50%); }
}

/* 後半：穴のフチのテキストを拡大 */
@keyframes growHoleText {
  0% {
    transform: scale(0);
    visibility: visible;
  }
  99% {
    transform: scale(1);
    visibility: visible;
  }
  100% {
    transform: scale(1);
    visibility: hidden; /* 拡大しきったらパッと消す */
  }
}

/* Canvasの拡大アニメーション（消えずに残る） */
@keyframes growRiveCanvas {
  0% { transform: scale(0); }
  100% { transform: scale(1.7); }
}

.top h2 span.main_ttl,
.top h2 span.company,
.top h2 span.since{
  display: inline-block;
  overflow: hidden;      /* 下に隠したSVGを非表示にする */
  position: relative;
  vertical-align: bottom; /* インラインブロック特有の縦位置のズレを防止 */
  width: 100%;
}

.top h2 span.main_ttl svg,
.top h2 span.company svg,
.top h2 span.since svg{
  position: relative;
  transform: translateY(105%);

  /* アニメーションの指定 */
  /* 0.6秒かけて / 1.4秒遅らせて始動 / スムーズな減速 / 終了状態(top:0)をキープ */
  animation: slideUpTitle 0.6s cubic-bezier(0.25, 1, 0.5, 1) 0.8s forwards;
}

/* 上にスライドしてくるアニメーションの定義 */
@keyframes slideUpTitle {
  0% {
    transform: translateY(105%); /* 開始：それぞれ自分の高さ分だけ下 */
  }
  100% {
    transform: translateY(0%);   /* 終了：元の位置 */
  }
}

/* 外枠のspan：1行ずつ綺麗に改行させ、はみ出た文字を隠す */
.mid h3 span,
.mid p span {
  display: block;
  overflow: hidden;
  position: relative;
  vertical-align: bottom;
  white-space: nowrap;
}

/* 中身の文字：初期状態は下に105%ずらして隠しておく */
.mid_inner{
  transform: none;
  transition: none;
}
.mid h3 span,
.mid p span{
  overflow: visible;
}
.mid .char{
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity .4s ease, transform .4s ease;
}
.mid .char.is-visible{
  opacity: 1;
  transform: translateY(0);
}

@media screen and (max-width: 1180px) {
  .mid{
    display: block;
  }

  .mid p{
    margin-top: 80px;
  }
}

.bg-glow{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url(../images/bg.png) no-repeat center center;
  background-size: 800px 800px;   /* 画面を覆う。四角のまま出したいなら contain */
}

@media screen and (max-width: 768px) {
  #rive-canvas{
    pointer-events: none;
    max-width: 120vw;
    max-height: 120vh;
    width: 120vw;
    height: 120vh;
    position: relative;
    top: 30px;
  }
  .actual-content {
    display: block;
  }

  .top h2 span.main_ttl,
  .top h2 span.company,
  .top h2 span.since{
    display: inline-block;
    overflow: hidden;      /* 下に隠したSVGを非表示にする */
    position: relative;
    vertical-align: bottom; /* インラインブロック特有の縦位置のズレを防止 */
    width: 100%;
  }

  .top h2 span.main_ttl{
    width: 226px;
    margin: 0 auto;
    display: block;
  }

  .top h2 span.company{
    position: absolute;
    z-index: 6;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    width: 204px;
  }

  /* 外枠のspan：1行ずつ綺麗に改行させ、はみ出た文字を隠す */
  .mid h3 span,
  .mid p span {
    display: block;
    overflow: hidden;
    position: relative;
    vertical-align: bottom;
  }

  /* 中身の文字：初期状態は下に105%ずらして隠しておく */
  .mid_inner {
    display: block;
    transform: translateY(105%);
    /* タイトルと同じスムーズな減速の動きを指定 */
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  }

  /* JavaScriptによって画面内に入ったクラスがつくと、元の位置（0%）に上がってくる */
  .mid_inner.is-active {
    transform: translateY(0%);
  }

  .bg-glow{
    background: url(../images/bg_sp.png) no-repeat center center;
    background-size: 100% auto;   /* 画面を覆う。四角のまま出したいなら contain */
  }
}


.pic_modal .text{
  line-height: 175%; /* 24.5px */
}

.pic_modal .text .char{
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity .4s ease, transform .4s ease;
}
.pic_modal .text .char.is-visible{
  opacity: 1;
  transform: translateY(0);
}

.pic_modal .slide_pic li img,
.pic_modal .slide_pic li video{
  height: 100%;
  width: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.mascot_text{
  --h: max(100vh, 580px);   /* rive-canvasと同じ。580pxで下げ止まり */
  position: absolute;
  left: 50%;
  top: calc(var(--h) / 2);   /* canvasの中心に合わせる */
  transform: translate(calc(var(--h) * 0.40), calc(var(--h) * 0.14));

  z-index: 6;
  opacity: 0;
  animation: mascotIn 0.6s ease 3s forwards;   /* 3秒後に表示 */
}
@keyframes mascotIn{
  to { opacity: 1; }
}
@media screen and (max-width: 768px) {
  .mascot_text{
    top: calc(var(--h) / 2);        /* 縦は canvas 中心のまま */
    transform: translate(93px, 32vw);  /* 中身が vw基準で縮むので vw に。右へ/下へ、数値で調整 */
  }
  .mascot_text svg{
    width: 83px;
    height: auto;
  }
}

html.no-scroll,
body.no-scroll{
  overflow: hidden;
  height: 100%;
}


@media screen and (max-width: 768px) {
  .pic_modal .inner {
    width: 100%;
    top: 0%;
    left: 0;
    transform: translateY(0%);

    margin-top: 50px;
  }
  .pic_modal .close{
    right: 20px;
    top: 20px;
  }

  .pic_modal .no{
    text-align: left;
    padding: 0 36px;
    justify-content: left;
    position: relative;
    left: -25px;
  }

  .pic_modal .text{
    color: #1A30A3;
    text-align: left;
    padding: 0 36px;
  }

  .pic_modal .slide_view{
    margin: 0 auto 20px;
    height: 61.1vh;
    max-height: 440px;
    transition: width .45s ease;
  }

  .pic_modal .slide_view{
    height: auto;
    max-height: none;
  }
  .pic_modal .slide_pic,
  .pic_modal .slide_pic li{
    height: auto;
  }
  .pic_modal .slide_pic li img,
  .pic_modal .slide_pic li video{
    width: auto;
    height: auto;
    max-width: 100vw;   /* ← 画面幅を上限に */
    max-height: 70vh;   /* 縦の上限（お好みで調整） */
  }
}

@media screen and (max-width: 768px) {
  .pic_modal .slide_view,
  .pic_modal .slide_pic,
  .pic_modal .slide_pic li{
    height: auto;
  }
  .pic_modal .slide_pic li img,
  .pic_modal .slide_pic li video{
    /* 横長(1460x880)が画面幅100vwに収まる高さ。縦長も同じ高さになる */
    height: calc(100vw * 880 / 1460);   /* ≒ 60.3vw */
    width: auto;
    max-width: 100vw;
    max-height: none;
  }
}

.pic_modal .no a.is-disabled svg path{
  fill: #C2C4C9;
}
.pic_modal .no a.is-disabled{
  pointer-events: none;   /* 押せないように（グレーだけにしたいなら消してOK） */
  cursor: default;
}

/*ローディング終わりまでアニメーションを止める*/
/*
.main-content,
.second-text-container{
  animation-play-state: paused;
}
body.loaded .main-content,
body.loaded .second-text-container{
  animation-play-state: running;
}*/

/*新オープニング*/
@property --hole {
  syntax: '<length>';
  initial-value: 0px;
  inherits: false;
}

.layer {
  position: absolute;
  inset: 0;
  background: #5666BE;
  z-index: 20;
  pointer-events: none;
  --hole: 0px;
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent var(--hole), #000 calc(var(--hole) + 1px));
  mask: radial-gradient(circle at 50% 50%, transparent var(--hole), #000 calc(var(--hole) + 1px));
  animation: holeGrow 2.2s cubic-bezier(0.6, 0, 0.2, 1) forwards;
}
@keyframes holeGrow {
  0%   { --hole: 0px; }
  100% { --hole: 90vmax; }
}

.opening {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0);
  animation: openGrow 2.4s cubic-bezier(0.6, 0, 0.2, 1) forwards;
  will-change: transform;
  z-index: 21;
  pointer-events: none;
}
.opening .ring {
  width: 80vmax;
  height: 80vmax;
  background: url(../images/circle.png) center / contain no-repeat;
  will-change: transform;
  animation: ringSpin 2s linear infinite;
}
@keyframes openGrow {
  0%   { transform: scale(0); }
  100% { transform: scale(7); }
}
@keyframes ringSpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.u-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

html.modal-open,
html.modal-open body {
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;   /* SPで背景へのタッチスクロールを抜けさせない */
}

.pic_modal .swipe-area {
  width: 100%;          /* .inner の幅いっぱい＝画像の左右の余白もスワイプ対象に */
  touch-action: none;   /* SPで横スワイプ中に背景が動かないように */
}

.pic_modal .inner,
.pic_modal .swipe-area {
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.gdpr {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease; /* 変化をスムーズに */
}

.gdpr.is-active {
  opacity: 1;
  pointer-events: auto;
}