@charset "UTF-8";
main {
  font-family: "heisei-kaku-gothic-std", sans-serif;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  color: #333;
  background-color: #fbfbfd;
}

a {
  color: #333;
  text-decoration: none;
  transition-duration: 0.3s;
  opacity: 1;
  cursor: pointer;
}

a:hover {
  color: #666;
  transition-duration: 0.3s;
  opacity: 0.7;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  font-style: italic;
}

.char-saki {
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W6", "Yu Gothic Medium", "Yu Gothic", "游ゴシック", "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
  font-weight: 600;
}

/* ========== ▼ ここから: オープニングカードアニメーション（CSS） ========== */
body.is-init {
  overflow: hidden;
}

.block-intro {
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fbfbfd;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.block-intro img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.block-intro ._inner {
  position: relative;
  width: 50vw;
  height: 25vw;
}

/* カード初期位置（PC）: 中央に重なるように配置 */
.block-intro ._p1 {
  position: absolute;
  top: 1.5vw;
  left: 11.8vw;
  width: 24.4vw;
  height: 18.3vw;
}

.block-intro ._p2 {
  position: absolute;
  top: 3vw;
  left: 16.2vw;
  width: 23vw;
  height: 18.3vw;
}

.block-intro ._p3 {
  position: absolute;
  top: 3.1vw;
  left: 11.4vw;
  width: 12.9vw;
  height: 18.1vw;
}

.block-intro ._p4 {
  position: absolute;
  top: 0;
  left: 28.4vw;
  width: 13vw;
  height: 17.2vw;
}

.block-intro ._p5 {
  position: absolute;
  top: 12.2vw;
  left: 8.9vw;
  width: 8.8vw;
  height: 12.5vw;
}

.block-intro ._p6 {
  position: absolute;
  top: 4.2vw;
  left: 14.9vw;
  width: 9.1vw;
  height: 9.8vw;
}

/* カード散開位置（PC）: 四方へ飛び散る */
.block-intro ._p1.js-active2 {
  top: 34.9vw;
  left: 20.3vw;
}

.block-intro ._p2.js-active2 {
  top: 14.7vw;
  left: 48.9vw;
}

.block-intro ._p3.js-active2 {
  top: -6.5vw;
  left: -21.1vw;
}

.block-intro ._p4.js-active2 {
  top: -16.1vw;
  left: 45.6vw;
}

.block-intro ._p5.js-active2 {
  top: 29.9vw;
  left: -1.4vw;
}

.block-intro ._p6.js-active2 {
  top: -18.8vw;
  left: 10.1vw;
  width: 17.4vw;
  height: 18.7vw;
}

/* カードアニメーション制御 */
.mod-anim-intro {
  opacity: 0;
  transition-duration: 1s;
}

.mod-anim-intro.js-active {
  opacity: 1;
}

.mod-anim-intro.js-active2 {
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-duration: 1.5s;
  opacity: 0;
}

/* ========== ▲ ここまで: オープニングカードアニメーション（CSS） ========== */
/* ========== ▼ ここから: スクロールアニメーション（CSS） ========== */
/* IntersectionObserver で .js-active を付与して発火
   - mod-anim: 方向付きフェードイン（is-top / is-bottom / is-left / is-fade）
   - mod-anim2: テキストグラデーションリビール（is-text-fade）
   JS: common.js の IntersectionObserver セクション */
.mod-anim {
  opacity: 0;
  transition-delay: 0.2s;
  transition-duration: 0.7s;
  transition-property: opacity, transform;
}

.mod-anim.is-top {
  transform: translate(0, -100px);
}

.mod-anim.is-top.js-active {
  opacity: 1;
  transform: translate(0, 0);
}

.mod-anim.is-bottom {
  transform: translate(0, 100px);
}

.mod-anim.is-bottom.js-active {
  opacity: 1;
  transform: translate(0, 0);
}

.mod-anim.is-left {
  transform: translate(-100px, 0);
}

.mod-anim.is-left.js-active {
  opacity: 1;
  transform: translate(0, 0);
}

.mod-anim.is-fade {
  transform: none;
}

.mod-anim.is-fade.js-active {
  opacity: 1;
}

/* スクロールアニメーション遅延 */
.mod-anim.is-delay-02 {
  transition-delay: 0.2s;
}

.mod-anim.is-delay-03 {
  transition-delay: 0.3s;
}

.mod-anim.is-delay-04 {
  transition-delay: 0.4s;
}

.mod-anim.is-delay-05 {
  transition-delay: 0.5s;
}

.mod-anim.is-delay-06 {
  transition-delay: 0.6s;
}

.mod-anim.is-delay-07 {
  transition-delay: 0.7s;
}

/* テキストグラデーションリビール */
.mod-anim2.is-text-fade {
  background-image: linear-gradient(-90deg, rgba(51, 51, 51, 0) 50%, #333 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 400% 100%;
  background-position: right 0 center;
  transition: background-position 1s ease;
  opacity: 1;
}

/* ========== ▲ ここまで: スクロールアニメーション（CSS） ========== */ /*# sourceMappingURL=common.css.map */