@charset "utf-8";

/* !Reseting
---------------------------------------------------------- */
.ct_bg div, .ct_bg pre, .ct_bg p, .ct_bg blockquote, .ct_bg figure, .ct_bg dl, .ct_bg dt, .ct_bg dd, .ct_bg ul, .ct_bg ol, .ct_bg li, .ct_bg h1, .ct_bg h2, .ct_bg h3, .ct_bg h4, .ct_bg h5, .ct_bg h6, .ct_bg form, .ct_bg fieldset, .ct_bg th, .ct_bg td
{ margin: 0; padding: 0;}
.ct_bg input, .ct_bg textarea
{ margin: 0; font-size: 100%;}
.ct_bg label
{ cursor: pointer;}
.ct_bg table
{ border-collapse: collapse; border-spacing: 0; font-size: 100%;}
.ct_bg fieldset, .ct_bg img
{ border: 0;}
.ct_bg img
{ vertical-align: top;}
.ct_bg address, .ct_bg caption, .ct_bg cite, .ct_bg code, .ct_bg dfn, .ct_bg em, .ct_bg th, .ct_bg var
{ font-style: normal; font-weight: normal;}
.ct_bg ol, .ct_bg ul
{ list-style: none;}
.ct_bg caption, .ct_bg th
{ text-align: left;}
.ct_bg h1, .ct_bg h2, .ct_bg h3, .ct_bg h4, .ct_bg h5, .ct_bg h6
{ font-size: 100%; font-weight: normal;}
.ct_bg q:after, .ct_bg q:before
{ content:'';}
.ct_bg a, .ct_bg input
{ outline: none; }
.ct_bg abbr, .ct_bg acronym
{ border: 0;}
.ct_bg span,
.ct_bg small {
  font-family: inherit;
  font-weight: inherit;
}
.ct_bg strong {
  font-family: inherit;
  font-weight: bold;
}
.ct_bg li:before {
  content: normal;
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  position: initial;
  left: auto;
  top: auto;
}

#contents {
  padding: 0;
  width: 100%;
}

.onlySP {
  display: none;
}
.ct_bg br.onlySP {
  display: none;
}

/* !Base
   --u : デザイン上の1px。PCは1440px幅、SPは400px幅を基準に、画面幅に合わせてサイズ（文字含む）が縮む
---------------------------------------------------------- */
.ct_bg {
  container-type: inline-size;
  position: relative;
  color: #222;
  font-family: "M PLUS 1", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  overflow-x: clip;
}

/* コンテンツ領域の幅（スクロールバーを除く）を基準にする。
   コンテンツ幅960px＋左右に（ブラウザ枠18px＋余白22px）を確保した1040px以上は固定、それ未満は縮む */
.ct_bg .frameArea01,
.ct_bg .wrapper01 {
  --u: min(1px, calc(100cqw / 1040));
}

.ct_bg a {
  color: #222;
  text-decoration: underline;
}
.ct_bg a:hover {
  text-decoration: none;
}

.ct_bg picture {
  display: block;
}

.ct_bg .center {
  text-align: center !important;
}
.ct_bg .right {
  text-align: right !important;
}

/* ページ内アンカーリンクをスムーズにスクロール */
@media (prefers-reduced-motion: no-preference) {
html {
  scroll-behavior: smooth;
}
}

.ct_bg .howtoArea01,
.ct_bg .lineupArea01 .inner01,
.ct_bg .movieArea01 {
  scroll-margin-top: calc(171 * var(--u)); /* 固定ヘッダー（131px）＋余白（40px）。PCのみ */
}

/* !ブラウザ枠（ブラウザ枠内に常に表示。ヘッダ・フッタにはかぶせない）
---------------------------------------------------------- */
/* 枠は、JSで高さを変えず、CSSだけで画面に合わせる（スクロール中のちらつきを防ぐ）。
   ・上・左・右：.frame01（画面と同じ高さ。上端はスクロールでヘッダーの下に付き、下端は画面の外にはみ出す）
   ・下：.frameArea01::after（画面の下端に貼り付く（sticky）。ページの最後では、コンテンツ領域の下端で止まる） */
.ct_bg .frameArea01 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.ct_bg .frameArea01 .frame01 {
  position: sticky;
  top: 0;
  flex: none;
  box-sizing: border-box;
  height: 100vh;
  border: calc(12 * var(--u)) solid #fff;
  border-bottom: 0;
}
.ct_bg .frameArea01 .frame01::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: calc(6 * var(--u)) solid #222;
  border-bottom: 0;
  content: "";
}
.ct_bg .frameArea01::after {
  position: sticky;
  bottom: 0;
  flex: none;
  box-sizing: border-box;
  height: calc(18 * var(--u));
  margin-top: auto;
  background:
    linear-gradient(#fff, #fff) 0 100%/100% calc(12 * var(--u)) no-repeat,
    linear-gradient(#222, #222) calc(12 * var(--u)) 0/calc(100% - 24 * var(--u)) calc(6 * var(--u)) no-repeat;
  content: "";
}

/* !Layout
---------------------------------------------------------- */
.ct_bg .wrapper01 {
  position: relative;
  z-index: 0;
  --gap: calc(120 * var(--u)); /* セクション同士の間隔（商品ラインナップの中でも同じ値になるよう、ここで確定させる） */
  padding: calc(26 * var(--u)) 0 calc(80 * var(--u));
}

/* セクション同士の間隔 */
.ct_bg .wrapper01 > * + * {
  margin-top: var(--gap);
}
.ct_bg .wrapper01 > .opening01,
.ct_bg .wrapper01 > .headerFix01,
.ct_bg .wrapper01 > .bubbleArea01 {
  margin-top: 0;
}

/* 見出し（画像タイトル＋日本語サブ） */
.ct_bg .title02,
.ct_bg .title03,
.ct_bg .productArea01 .title01 {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ct_bg .title02 img,
.ct_bg .title03 img,
.ct_bg .productArea01 .title01 img {
  height: auto;
  margin-bottom: calc(-4 * var(--u));
}
.ct_bg .title02 img,
.ct_bg .title03 img {
  width: calc(640 * var(--u));
}
.ct_bg .productArea01 .title01 img {
  width: calc(340 * var(--u));
}
.ct_bg .sub01 {
  color: #6e6e6e;
  font-size: calc(18 * var(--u));
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
}

/* !mainArea01
---------------------------------------------------------- */
.ct_bg .mainArea01 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(16 * var(--u));
}

.ct_bg .headTitleArea01 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(8 * var(--u));
  position: static;
  padding: 0;
  width: auto;
}
.ct_bg .headTitleArea01 > .text01 {
  margin: 0;
  font-size: calc(12 * var(--u));
  font-weight: 500;
  line-height: 1.5;
}
.ct_bg .headTitleArea01 > .title01 {
  padding: calc(6 * var(--u));
  border-radius: calc(20 * var(--u));
  background: #fff;
  font-size: 0;
  line-height: 0;
}
.ct_bg .headTitleArea01 > .title01 img {
  width: calc(370 * var(--u));
  height: auto;
}

.ct_bg .navi01 {
  display: flex;
  justify-content: flex-end;
  gap: calc(24 * var(--u));
}
.ct_bg .navi01 a {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: calc(304 * var(--u));
  height: calc(63 * var(--u));
  padding: calc(6 * var(--u)) calc(40 * var(--u)) calc(7 * var(--u));
  border-radius: calc(10 * var(--u));
  background: #222;
  box-shadow: 0 calc(4 * var(--u)) 0 rgba(0, 0, 0, .2);
  color: #fff;
  font-size: calc(24 * var(--u));
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
}

/* !productArea01
---------------------------------------------------------- */
.ct_bg .productArea01 .inner01 {
  position: relative;
  width: calc(960 * var(--u));
  margin: 0 auto;
  padding-top: calc(40 * var(--u));
}
.ct_bg .productArea01 .title01 {
  position: absolute;
  top: calc(4 * var(--u));
  left: 0;
  z-index: 1;
  width: 100%;
}
.ct_bg .productArea01 .box01 {
  position: relative;
  box-sizing: border-box;
  padding: calc(90 * var(--u)) 0 calc(40 * var(--u));
  border-radius: calc(30 * var(--u));
  background: rgba(255, 255, 255, .9);
  text-align: center;
}
.ct_bg .productArea01 .box01::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/bg_product_waku01.svg) no-repeat 0 0/100% 100%;
  content: "";
}
.ct_bg .productArea01 .lead01 {
  position: relative;
  font-size: calc(40 * var(--u));
  font-weight: 800;
  line-height: 1.5;
}
.ct_bg .productArea01 .text01 {
  position: relative;
  margin-top: calc(20 * var(--u));
  font-size: calc(24 * var(--u));
  font-weight: 800;
  line-height: 1.75;
}

/* !howtoArea01
---------------------------------------------------------- */
.ct_bg .howtoArea01 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(20 * var(--u));
}

.ct_bg .howto01 {
  position: relative;
  width: calc(960 * var(--u));
  height: calc(520 * var(--u));
}
.ct_bg .howto01 > p {
  position: absolute;
}
.ct_bg .howto01 > p img {
  width: 100%;
  height: auto;
}
.ct_bg .howto01 .pkg01 { top: calc(18 * var(--u)); left: 0; width: calc(360 * var(--u)); }
.ct_bg .howto01 .runner01 { top: calc(34 * var(--u)); left: calc(233 * var(--u)); width: calc(307 * var(--u)); }
.ct_bg .howto01 .paki01 { top: calc(30 * var(--u)); left: calc(540 * var(--u)); width: calc(110 * var(--u)); }
.ct_bg .howto01 .arrow01 { top: calc(146 * var(--u)); left: calc(480 * var(--u)); width: calc(189 * var(--u)); }
.ct_bg .howto01 .charm01 { top: calc(12 * var(--u)); left: calc(679 * var(--u)); width: calc(281 * var(--u)); }
.ct_bg .howto01 .text01 { top: calc(414 * var(--u)); left: calc(416 * var(--u)); width: calc(544 * var(--u)); }

.ct_bg .note01 {
  font-size: calc(14 * var(--u));
  line-height: 1.75;
  text-align: center;
}

/* !lineupArea01
---------------------------------------------------------- */
/* 商品ラインナップはコンテンツ幅1200px。左右40pxの余白を残し、それより狭くなったら縮む */
.ct_bg .lineupArea01 {
  --u: min(1px, calc((100cqw - 80px) / 1200));
  box-sizing: border-box;
  padding: calc(120 * var(--u)) 40px;
  background: rgba(255, 255, 255, .9);
}
.ct_bg .lineupArea01 .inner01 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(40 * var(--u));
  width: calc(1200 * var(--u));
  margin: 0 auto;
}

.ct_bg .lineupArea01 .block01 + .block01 {
  margin-top: calc(40 * var(--u));
}
.ct_bg .lineupArea01 .block01 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(20 * var(--u));
  width: 100%;
}
.ct_bg .lineupArea01 .block01 .image01 {
  width: 100%;
}
.ct_bg .lineupArea01 .block01 .image01 img {
  width: 100%;
  height: auto;
  border-radius: calc(10 * var(--u));
}

/* 購入エリア（横並びは高さ揃え） */
.ct_bg .cvList01 {
  display: flex;
  align-items: stretch;
  gap: calc(20 * var(--u));
  width: 100%;
}
.ct_bg .cv01 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(20 * var(--u));
  box-sizing: border-box;
  flex: 1;
  min-width: 0;
  padding: calc(30 * var(--u)) calc(30 * var(--u)) calc(40 * var(--u));
  border-radius: calc(24 * var(--u));
  background: #fff;
}

.ct_bg .cv01 .waku01 {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.ct_bg .cv01 .waku01 .top01,
.ct_bg .cv01 .waku01 .btm01 {
  flex: none;
  height: calc(203 * var(--u));
  background: no-repeat center/100% 100%;
}
.ct_bg .cv01 .waku01 .top01 {
  background-image: url(../img/bg_cv_waku_top01.svg);
}
.ct_bg .cv01 .waku01 .btm01 {
  background-image: url(../img/bg_cv_waku_btm01.svg);
}
.ct_bg .cv01 .waku01 .mid01 {
  flex: 1;
  min-height: 1px;
  border-right: calc(6 * var(--u)) solid #bbb;
  border-left: calc(6 * var(--u)) solid #bbb;
}

.ct_bg .cv01 .photo01 {
  position: relative;
  width: calc(225 * var(--u));
  aspect-ratio: 1 / 1; /* 商品画像は正方形 */
  background: #d9d9d9;
}
.ct_bg .cv01 .photo01 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ct_bg .cv01 .info01 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(10 * var(--u));
  width: calc(225 * var(--u));
  text-align: center;
}
.ct_bg .cv01 .series01 {
  color: #0075bb;
  font-size: calc(14 * var(--u));
  font-weight: 800;
  line-height: 1.5;
  white-space: nowrap;
}
.ct_bg .cv01 .name01 {
  margin-top: calc(-10 * var(--u));
  font-size: calc(18 * var(--u));
  font-weight: 800;
  line-height: 1.5;
}
.ct_bg .cv01 .date01 {
  padding: calc(1 * var(--u)) calc(10 * var(--u)) calc(3 * var(--u));
  border-radius: calc(4 * var(--u));
  background: #0075bb;
  color: #fff;
  font-size: calc(14 * var(--u));
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}
.ct_bg .cv01 .price01 {
  font-size: calc(12 * var(--u));
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}
.ct_bg .cv01 .price01 small {
  font-size: calc(10 * var(--u));
}

.ct_bg .cv01 .btn01 {
  position: relative;
  box-sizing: border-box;
  width: 100%;
}
.ct_bg .cv01 .btn01 a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--u));
  box-sizing: border-box;
  padding: calc(10 * var(--u)) calc(20 * var(--u)) calc(12 * var(--u));
  border: calc(3 * var(--u)) solid #222;
  border-radius: calc(40 * var(--u));
  background: #222;
  box-shadow: 0 calc(4 * var(--u)) 0 rgba(0, 0, 0, .2);
  color: #fff;
  font-size: calc(20 * var(--u));
  font-weight: 800;
  line-height: 1.5;
  text-decoration: none;
}
.ct_bg .cv01 .btn01 a::before {
  flex: none;
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
  background: url(../img/icon_cart01.svg) no-repeat 0 0/100%;
  content: "";
}
.ct_bg .cv01 .btn01 a.reserve::before {
  background-image: url(../img/icon_reserve01.svg);
}
.ct_bg .cv01 .btn01 a.waiting::before {
  background-image: url(../img/icon_waiting01.svg);
}
/* 「入荷案内申込み」は文字数が多いので、改行されないようにする（PCはカード幅に収まるよう、左右の余白を詰める） */
.ct_bg .cv01 .btn01 a.waiting {
  padding-right: calc(12 * var(--u));
  padding-left: calc(12 * var(--u));
  white-space: nowrap;
}
.ct_bg .cv01 .btn01.seven01 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(4 * var(--u));
  box-sizing: border-box;
  padding: calc(5 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u));
  background: #e5e6e6;
}
.ct_bg .cv01 .btn01.seven01 .title02 {
  font-size: calc(16 * var(--u));
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
}
.ct_bg .cv01 .btn01.seven01 .note02 {
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: calc(10 * var(--u));
  font-weight: 500;
  line-height: 1.5;
  list-style: none;
}
.ct_bg .cv01 .btn01.seven01 .note02 li {
  position: relative;
  padding-left: calc(15 * var(--u));
}
.ct_bg .cv01 .btn01.seven01 .note02 li::before {
  position: absolute;
  left: calc(5 * var(--u));
  content: "・";
}

/* 2枚の画像の切り替え（common/js/common.js。2つ目の画像を、1つ目に重ねてふわっと表示する） */
.ct_bg .swap01 {
  position: relative;
}
.ct_bg .swap01 > *:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .8s ease;
}
.ct_bg .swap01.is-swapped > *:nth-child(2) {
  opacity: 1;
}
.ct_bg .swap01 picture {
  overflow: hidden;
}
.ct_bg .image01.swap01 {
  border-radius: calc(10 * var(--u));
  overflow: hidden;
}

/* !mainSlider01
---------------------------------------------------------- */
.ct_bg .mainSlider01 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(16 * var(--u));
  width: calc(960 * var(--u));
}
.ct_bg .mainSlider01 .viewport01 {
  width: 100%;
  overflow: hidden;
  border-radius: calc(10 * var(--u));
  touch-action: pan-y;
}
.ct_bg .mainSlider01 .slideList01 {
  display: flex;
  transition: transform .5s ease;
}
.ct_bg .mainSlider01 .slide01 {
  flex: none;
  width: 100%;
}
.ct_bg .mainSlider01 .slide01 img {
  width: 100%;
  height: auto;
  -webkit-user-drag: none;
  user-select: none;
}
.ct_bg .mainSlider01 .pager01 {
  display: flex;
  gap: calc(16 * var(--u));
}
.ct_bg .mainSlider01 .pager01 button {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  padding: 0;
  border: calc(4 * var(--u)) solid #bbb;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}
.ct_bg .mainSlider01 .pager01 button[aria-current] {
  cursor: default;
}
.ct_bg .mainSlider01 .pager01 button[aria-current]::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  margin: auto;
  border-radius: 50%;
  background: #0075bb;
  content: "";
}
.ct_bg .mainSlider01 .pager01 button:focus-visible {
  outline: 2px solid #0075bb;
  outline-offset: 2px;
}

/* !movieArea01
---------------------------------------------------------- */
.ct_bg .movieArea01 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(40 * var(--u));
}
.ct_bg .title04 {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ct_bg .title04 img {
  width: calc(640 * var(--u));
  height: auto;
  margin-bottom: calc(-4 * var(--u));
}

.ct_bg .movieList01 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(40 * var(--u));
}
.ct_bg .shortList01 {
  display: flex;
  gap: calc(20 * var(--u));
}

.ct_bg .movie01 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
  box-sizing: border-box;
  padding: calc(30 * var(--u));
  border-radius: calc(24 * var(--u));
  background: #fff;
}
.ct_bg .movie01::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  content: "";
}
.ct_bg .movie01.type01 {
  width: calc(960 * var(--u));
}
.ct_bg .movie01.type01::before {
  background: url(../img/bg_movie_waku01.svg) no-repeat 0 0/100% 100%;
}
.ct_bg .movie01.type02 {
  width: calc(306 * var(--u));
}
.ct_bg .movie01.type02::before {
  background: url(../img/bg_movie_short_waku01.svg) no-repeat 0 0/100% 100%;
}

.ct_bg .movie01 .video01 {
  position: relative;
  overflow: hidden;
  background: #d9d9d9;
}
.ct_bg .hidden01 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.ct_bg .movie01 .play01 {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.ct_bg .movie01 .play01 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 再生ボタン */
.ct_bg .movie01 .play01::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(80 * var(--u));
  height: calc(80 * var(--u));
  margin: calc(-40 * var(--u)) 0 0 calc(-40 * var(--u));
  border-radius: 50%;
  background: #222;
  box-shadow: 0 calc(4 * var(--u)) 0 rgba(0, 0, 0, .2);
  content: "";
}
.ct_bg .movie01 .play01::after {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: calc(-16 * var(--u)) 0 0 calc(-10 * var(--u));
  border-style: solid;
  border-width: calc(16 * var(--u)) 0 calc(16 * var(--u)) calc(28 * var(--u));
  border-color: transparent transparent transparent #fff;
  content: "";
}
.ct_bg .movie01.type02 .play01::before {
  width: calc(60 * var(--u));
  height: calc(60 * var(--u));
  margin: calc(-30 * var(--u)) 0 0 calc(-30 * var(--u));
}
.ct_bg .movie01.type02 .play01::after {
  margin: calc(-12 * var(--u)) 0 0 calc(-8 * var(--u));
  border-width: calc(12 * var(--u)) 0 calc(12 * var(--u)) calc(21 * var(--u));
}
.ct_bg .movie01.type01 .video01 {
  aspect-ratio: 900 / 506;
}
.ct_bg .movie01.type02 .video01 {
  aspect-ratio: 9 / 16;
}
.ct_bg .movie01 .title01 {
  position: relative;
  font-size: calc(16 * var(--u));
  font-weight: 800;
  line-height: 1.75;
}
.ct_bg .movie01.type01 .title01 {
  text-align: center;
}
.ct_bg .movie01.type02 .title01 {
  padding: 0 calc(10 * var(--u));
}

.ct_bg .more01 a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: calc(320 * var(--u));
  padding: calc(14 * var(--u)) calc(40 * var(--u)) calc(16 * var(--u));
  border: calc(3 * var(--u)) solid #222;
  border-radius: calc(56 * var(--u));
  background: #222;
  box-shadow: 0 calc(4 * var(--u)) 0 rgba(0, 0, 0, .2);
  color: #fff;
  font-size: calc(28 * var(--u));
  font-weight: 800;
  line-height: 1.5;
  text-decoration: none;
}
.ct_bg .more01 a::after {
  position: absolute;
  top: 50%;
  right: calc(17 * var(--u));
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  margin-top: calc(-8 * var(--u));
  background: url(../img/icon_arrow01.svg) no-repeat 0 0/100%;
  content: "";
}

/* !bubbleArea01（メイン画像の左右のフキダシ装飾。横はメイン画像の中心を基準に置き、スクロールしても画面に対して位置を固定する。コンテンツの背面に表示）
---------------------------------------------------------- */
.ct_bg .bubbleArea01 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* 背景の柄。background-attachment: fixed はスクロールのたびに再描画されてカクつくため、画面に貼り付く（sticky）レイヤーで代用する */
.ct_bg .bubbleArea01::before {
  position: sticky;
  top: 0;
  display: block;
  height: 100vh;
  margin-bottom: -100vh;
  background: url(../img/bg_manga01.png) repeat center top/calc(1000 * var(--u)) auto;
  content: "";
}
/* スクロールしても、最上部にいる時と同じ位置に留まる（top は common.js がヘッダーの高さに合わせて設定する） */
.ct_bg .bubbleArea01 .bubbleBox01 {
  position: sticky;
  top: 114px;
  height: calc(834 * var(--u));
}
.ct_bg .bubbleArea01 .fukidashi01 {
  position: absolute;
  display: block;
  height: auto;
}
.ct_bg .fukidashi01.g1 {
  top: calc(558 * var(--u));
  left: calc(50% + 510 * var(--u));
  width: calc(141 * var(--u));
}
.ct_bg .fukidashi01.g2 {
  top: calc(77 * var(--u));
  left: calc(50% + -822 * var(--u));
  width: calc(141 * var(--u));
}
.ct_bg .fukidashi01.a1 {
  top: calc(41 * var(--u));
  left: calc(50% + -652 * var(--u));
  width: calc(159 * var(--u));
}
.ct_bg .fukidashi01.b1 {
  top: calc(281 * var(--u));
  left: calc(50% + -732 * var(--u));
  width: calc(190 * var(--u));
}
.ct_bg .fukidashi01.i1 {
  top: calc(53 * var(--u));
  left: calc(50% + 496 * var(--u));
  width: calc(193 * var(--u));
}
.ct_bg .fukidashi01.d1 {
  top: calc(342 * var(--u));
  left: calc(50% + 508 * var(--u));
  width: calc(205 * var(--u));
}
.ct_bg .fukidashi01.d2 {
  top: calc(432 * var(--u));
  left: calc(50% + -852 * var(--u));
  width: calc(205 * var(--u));
}
.ct_bg .fukidashi01.e1 {
  top: calc(561 * var(--u));
  left: calc(50% + -683 * var(--u));
  width: calc(160 * var(--u));
}
.ct_bg .fukidashi01.c1 {
  top: calc(466 * var(--u));
  left: calc(50% + -597 * var(--u));
  width: calc(57 * var(--u));
}
.ct_bg .fukidashi01.c2 {
  top: calc(753 * var(--u));
  left: calc(50% + -694 * var(--u));
  width: calc(86 * var(--u));
}
.ct_bg .fukidashi01.c3 {
  top: calc(202 * var(--u));
  left: calc(50% + 529 * var(--u));
  width: calc(63 * var(--u));
}
.ct_bg .fukidashi01.c4 {
  top: calc(239 * var(--u));
  left: calc(50% + 619 * var(--u));
  width: calc(93 * var(--u));
}
.ct_bg .fukidashi01.c5 {
  top: calc(715 * var(--u));
  left: calc(50% + 609 * var(--u));
  width: calc(56 * var(--u));
}
.ct_bg .fukidashi01.c6 {
  top: calc(521 * var(--u));
  left: calc(50% + 649 * var(--u));
  width: calc(56 * var(--u));
}
.ct_bg .fukidashi01.c7 {
  top: calc(193 * var(--u));
  left: calc(50% + -666 * var(--u));
  width: calc(57 * var(--u));
}
.ct_bg .fukidashi01.c8 {
  top: calc(247 * var(--u));
  left: calc(50% + -583 * var(--u));
  width: calc(41 * var(--u));
}

/* !plugin（Fancybox：動画モーダル）
---------------------------------------------------------- */
.fancybox-bg {
  background: #222 !important;
}

/* !opening01（オープニング演出。common/js/opening.js で生成する）
---------------------------------------------------------- */
/* 演出が始まるまで、TOPの中身を隠す（背景の柄だけが見える） */
html.is-opening .ct_bg .wrapper01 > *:not(.opening01) {
  opacity: 0;
}
html.is-opening-lock {
  overflow: hidden;
  scrollbar-gutter: stable;
}

.ct_bg .opening01 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
  width: 100%;
  container-type: size;
  overflow: hidden;
}
.ct_bg .opening01.is-skip {
  opacity: 0;
  transition: opacity .25s;
}
/* 背景の柄（TOPの中身を隠す） */
.ct_bg .opening01::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/bg_manga01.png) repeat fixed center top/calc(1000 * var(--u)) auto;
  transition: opacity 2.2s ease;
  content: "";
}
.ct_bg .opening01.is-reveal::before {
  opacity: .55;
}
.ct_bg .opening01.is-out::before {
  opacity: 0;
  transition-duration: .75s;
  transition-delay: 0s;
}

/* 雲を並べる領域（デザインの1440×710を、画面いっぱいに広がるよう拡大） */
.ct_bg .opening01 .canvas01 {
  --k: max(calc(100cqw / 1440), calc(100cqh / 710));
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(1440 * var(--k));
  height: calc(710 * var(--k));
  transform: translate(-50%, -50%);
}
.ct_bg .opening01 .cloud01 {
  position: absolute;
  top: calc(var(--y) * 1%);
  left: calc(var(--x) * 1%);
  width: calc(var(--w) * 1%);
  aspect-ratio: 164 / 154;
  background: url(../img/img_op_cloud01.svg) no-repeat 0 0/100% 100%;
  transform: rotate(var(--r)) scale(0);
  will-change: transform, opacity;
  animation: cloudPop .4s cubic-bezier(.2, 1.5, .4, 1) var(--d) both;
}
.ct_bg .opening01 .cloud01.type02 {
  aspect-ratio: 300 / 300;
  background-image: url(../img/img_op_cloud02.svg);
}
.ct_bg .opening01 .cloud01.type03 {
  aspect-ratio: 298 / 300;
  background-image: url(../img/img_op_cloud03.svg);
}
.ct_bg .opening01.is-out .cloud01 {
  animation: cloudMove .55s cubic-bezier(.25, .6, .35, 1) var(--o) both, cloudFade .55s ease var(--o) both;
}
@keyframes cloudPop {
  from {
    transform: rotate(var(--r)) scale(0);
  }
  to {
    transform: rotate(var(--r)) scale(1);
  }
}
@keyframes cloudMove {
  from {
    transform: translate(0, 0) rotate(var(--r)) scale(1);
  }
  to {
    transform: translate(var(--ox), var(--oy)) rotate(var(--r)) scale(1.1);
  }
}
@keyframes cloudFade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.ct_bg .opening01 .skip01 {
  position: absolute;
  z-index: 2;
  right: calc(30 * var(--u));
  bottom: calc(30 * var(--u));
  box-sizing: border-box;
  width: calc(140 * var(--u));
  padding: calc(4 * var(--u)) calc(40 * var(--u)) calc(6 * var(--u));
  border: calc(3 * var(--u)) solid #222;
  border-radius: calc(56 * var(--u));
  background: #222;
  box-shadow: 0 calc(4 * var(--u)) 0 rgba(0, 0, 0, .2);
  color: #fff;
  font-family: inherit;
  font-size: calc(20 * var(--u));
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
  cursor: pointer;
}
.ct_bg .opening01 .skip01::after {
  position: absolute;
  top: calc(12 * var(--u));
  right: calc(12 * var(--u));
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  background: url(../img/icon_arrow01.svg) no-repeat 0 0/100%;
  content: "";
}
.ct_bg .opening01 .skip01:focus-visible {
  outline: 3px solid #ff0;
  outline-offset: 3px;
}
.ct_bg .opening01.is-out .skip01 {
  visibility: hidden;
}

/* !ボタンのホバー（黄色の背景・黒の文字とアイコン）
---------------------------------------------------------- */
.ct_bg .navi01 a,
.ct_bg .cv01 .btn01 a,
.ct_bg .more01 a,
.ct_bg .opening01 .skip01 {
  transition: background-color .2s, box-shadow .2s;
}
@media (any-hover: hover) {
.ct_bg .navi01 a:hover,
.ct_bg .cv01 .btn01 a:hover,
.ct_bg .more01 a:hover,
.ct_bg .opening01 .skip01:hover {
  background-color: #ff0;
  color: #222;
}
.ct_bg .navi01 a:hover {
  box-shadow: inset 0 0 0 calc(3 * var(--u)) #222, 0 calc(4 * var(--u)) 0 rgba(0, 0, 0, .2);
}
.ct_bg .cv01 .btn01 a:hover::before {
  background-image: url(../img/icon_cart01_on.svg);
}
.ct_bg .cv01 .btn01 a.reserve:hover::before {
  background-image: url(../img/icon_reserve01_on.svg);
}
.ct_bg .cv01 .btn01 a.waiting:hover::before {
  background-image: url(../img/icon_waiting01_on.svg);
}
.ct_bg .more01 a:hover::after,
.ct_bg .opening01 .skip01:hover::after {
  background-image: url(../img/icon_arrow01_on.svg);
}
}
/* キーボードで選択した時も、ホバーと同じ見た目にする */
.ct_bg .navi01 a:focus-visible,
.ct_bg .cv01 .btn01 a:focus-visible,
.ct_bg .more01 a:focus-visible,
.ct_bg .opening01 .skip01:focus-visible {
  background-color: #ff0;
  color: #222;
  outline: 3px solid #0075bb;
  outline-offset: 3px;
}
.ct_bg .navi01 a:focus-visible {
  box-shadow: inset 0 0 0 calc(3 * var(--u)) #222, 0 calc(4 * var(--u)) 0 rgba(0, 0, 0, .2);
}
.ct_bg .cv01 .btn01 a:focus-visible::before {
  background-image: url(../img/icon_cart01_on.svg);
}
.ct_bg .cv01 .btn01 a.reserve:focus-visible::before {
  background-image: url(../img/icon_reserve01_on.svg);
}
.ct_bg .cv01 .btn01 a.waiting:focus-visible::before {
  background-image: url(../img/icon_waiting01_on.svg);
}
.ct_bg .more01 a:focus-visible::after,
.ct_bg .opening01 .skip01:focus-visible::after {
  background-image: url(../img/icon_arrow01_on.svg);
}

/* !footTopArea01
---------------------------------------------------------- */
.ct_bg .footTopArea01 {
  padding-bottom: calc(24 * var(--u)); /* コピーライトの下の余白（黒枠の下辺との間） */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(40 * var(--u));
}
.ct_bg .snsBtn01 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--u));
}
.ct_bg .snsBtn01 > li {
  line-height: 1;
}
.ct_bg .copyright01 {
  font-size: calc(14 * var(--u));
  line-height: 1.75;
}

/* !下層ページ（商品ラインナップ・ムービー）
---------------------------------------------------------- */
.ct_bg .wrapper01.type02 {
  --gap: calc(80 * var(--u));
  padding-top: 0;
}
.ct_bg .wrapper01 > .headerArea02 + * {
  margin-top: 0;
}

/* ヘッダー（ロゴ・ナビ） */
.ct_bg .headerArea02 {
  position: sticky;
  z-index: 11;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: calc(30 * var(--u)) calc(30 * var(--u)) calc(20 * var(--u));
  pointer-events: none;
}
/* 固定したヘッダーの下にあるコンテンツを操作できるよう、ロゴ・ナビだけ操作を受け付ける */
.ct_bg .headerArea02 a {
  pointer-events: auto;
}
.ct_bg .logo02 {
  flex: none;
  padding: calc(6 * var(--u));
  border-radius: calc(14.4 * var(--u));
  background: #fff;
  font-size: 0;
  line-height: 0;
}
.ct_bg .logo02 a {
  display: block;
}
.ct_bg .logo02 img {
  width: calc(260 * var(--u));
  height: auto;
}
.ct_bg .info02 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(10 * var(--u));
}
.ct_bg .text02 {
  font-size: calc(12 * var(--u));
  font-weight: 500;
  line-height: 1.5;
  text-align: right;
}
.ct_bg .navi02 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(8 * var(--u));
}
.ct_bg .navi02 a {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: calc(180 * var(--u));
  height: calc(49 * var(--u));
  border: calc(3 * var(--u)) solid #222;
  border-radius: calc(10 * var(--u));
  background: #222;
  box-shadow: 0 calc(4 * var(--u)) 0 rgba(0, 0, 0, .2);
  color: #fff;
  font-size: calc(18 * var(--u));
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
}
.ct_bg .navi02 a[aria-current] {
  height: calc(53 * var(--u));
}

/* TOPで、メイン部分を過ぎたら、下層ページと同じヘッダーを固定表示する（PCのみ。common/js/common.js） */
.ct_bg .headerFix01 {
  position: absolute;
  z-index: 11;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.ct_bg .headerFix01 .headerFixBox01 {
  position: sticky;
  top: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s, visibility .3s;
}
.ct_bg .headerFix01 .headerFixBox01.is-show {
  visibility: visible;
  opacity: 1;
}
.ct_bg .headerFix01 .headerArea02 {
  position: static;
}

/* SPのメニュー（PCでは表示しない） */
.ct_bg .menuBtn01,
.ct_bg .menuWrap01 {
  display: none;
}

/* 下層ページの見出し・余白 */
.ct_bg .lineupArea01.type02 {
  padding: calc(30 * var(--u)) 40px 0;
  background: none;
}
.ct_bg .movieArea01.type02 {
  padding-top: calc(30 * var(--u));
}
.ct_bg .wideList01 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(20 * var(--u));
}

/* ヘッダーのナビのホバー */
.ct_bg .navi02 a {
  transition: background-color .2s;
}
@media (any-hover: hover) {
.ct_bg .navi02 a:hover {
  background-color: #ff0;
  color: #222;
}
}
.ct_bg .navi02 a:focus-visible {
  background-color: #ff0;
  color: #222;
  outline: 3px solid #0075bb;
  outline-offset: 3px;
}

/* !SP
---------------------------------------------------------- */
@media screen and (max-width: 767px) {
.onlyPC {
  display: none;
}
.onlySP {
  display: block;
}
.ct_bg br.onlySP {
  display: inline;
}

.ct_bg .frameArea01,
.ct_bg .wrapper01 {
  --u: calc(100cqw / 400);
}
.ct_bg .howtoArea01,
.ct_bg .lineupArea01 .inner01,
.ct_bg .movieArea01 {
  scroll-margin-top: calc(118 * var(--u)); /* メニューボタンの下（ボタン下端は約102）＋余白（16）。見出しにボタンが被らないようにする */
}
.ct_bg .wrapper01 {
  background-size: calc(500 * var(--u)) auto;
}

.ct_bg .wrapper01 {
  --gap: calc(80 * var(--u));
}

.ct_bg .title02 img,
.ct_bg .title03 img {
  width: calc(340 * var(--u));
}
.ct_bg .productArea01 .title01 img {
  width: calc(160 * var(--u));
}

.ct_bg .mainArea01 {
  padding: 0 calc(30 * var(--u));
}
.ct_bg .headTitleArea01 {
  gap: calc(4 * var(--u));
}
.ct_bg .headTitleArea01 > .text01 {
  font-size: calc(10 * var(--u));
}
.ct_bg .headTitleArea01 > .title01 {
  padding: calc(3 * var(--u));
  border-radius: calc(8 * var(--u));
}
.ct_bg .headTitleArea01 > .title01 img {
  width: calc(200 * var(--u));
}
.ct_bg .navi01 {
  justify-content: center;
  gap: calc(5 * var(--u));
}
.ct_bg .navi01 a {
  width: calc(110 * var(--u));
  height: calc(56 * var(--u));
  padding: calc(6 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u));
  font-size: calc(15 * var(--u));
  line-height: 1.2;
}

.ct_bg .productArea01 .inner01 {
  width: calc(340 * var(--u));
  padding-top: calc(16 * var(--u));
}
.ct_bg .productArea01 .title01 {
  top: 0;
}
.ct_bg .productArea01 .box01 {
  padding: calc(70 * var(--u)) 0 calc(40 * var(--u));
}
.ct_bg .productArea01 .box01::before {
  background-image: url(../img/bg_product_waku01_sp.svg);
  background-size: 100% auto; /* SVGは340×577で、枠は上の286px分だけ。縦に引き伸ばさない */
}
.ct_bg .productArea01 .lead01 {
  font-size: calc(24 * var(--u));
}
.ct_bg .productArea01 .text01 {
  width: calc(280 * var(--u));
  margin: calc(20 * var(--u)) auto 0;
  font-size: calc(16 * var(--u));
}

.ct_bg .howto01 {
  width: calc(340 * var(--u));
  height: calc(503 * var(--u));
}
.ct_bg .howto01 .pkg01 { top: calc(2 * var(--u)); left: 0; width: calc(159 * var(--u)); }
.ct_bg .howto01 .runner01 { top: calc(12 * var(--u)); left: calc(135 * var(--u)); width: calc(135 * var(--u)); }
.ct_bg .howto01 .paki01 { top: calc(8 * var(--u)); left: calc(270 * var(--u)); width: calc(61 * var(--u)); }
.ct_bg .howto01 .arrow01 {
  display: flex;
  align-items: center;
  justify-content: center;
  top: calc(64 * var(--u));
  left: calc(214.32 * var(--u));
  width: calc(144.425 * var(--u));
  height: calc(167.543 * var(--u));
}
.ct_bg .howto01 .arrow01 img {
  flex: none;
  width: calc(146.494 * var(--u));
  transform: rotate(104.77deg) scaleY(-1);
}
.ct_bg .howto01 .charm01 { top: calc(195 * var(--u)); left: calc(81 * var(--u)); width: calc(178 * var(--u)); }
.ct_bg .howto01 .text01 { top: calc(437 * var(--u)); left: 0; width: calc(340 * var(--u)); }

.ct_bg .note01 {
  width: calc(314 * var(--u));
  font-size: calc(12 * var(--u));
}

.ct_bg .lineupArea01 {
  --u: calc(100cqw / 400);
  padding: calc(80 * var(--u)) calc(30 * var(--u));
}
.ct_bg .lineupArea01 .inner01 {
  width: calc(340 * var(--u));
}

.ct_bg .cvList01 {
  flex-direction: column;
  align-items: center;
  width: calc(340 * var(--u));
}
.ct_bg .cv01 {
  flex: none;
  width: calc(340 * var(--u));
}

.ct_bg .cv01 .waku01 {
  background: url(../img/bg_cv_waku01_sp.svg) no-repeat 0 0/100% 100%;
}
.ct_bg .cv01 .waku01 > span {
  display: none;
}

.ct_bg .cv01 .photo01 {
  width: calc(280 * var(--u));
}
.ct_bg .cv01 .info01 {
  width: calc(280 * var(--u));
}
.ct_bg .cv01 .series01 {
  font-size: calc(16 * var(--u));
}
.ct_bg .cv01 .name01 {
  font-size: calc(20 * var(--u));
}
.ct_bg .cv01 .price01 {
  font-size: calc(14 * var(--u));
}
.ct_bg .cv01 .price01 small {
  font-size: calc(12 * var(--u));
}

.ct_bg .cv01 .btn01 {
  width: calc(280 * var(--u));
}
.ct_bg .cv01 .btn01 a {
  padding: calc(10 * var(--u)) calc(30 * var(--u)) calc(12 * var(--u));
  font-size: calc(22 * var(--u));
}
.ct_bg .cv01 .btn01 a.waiting {
  padding-right: calc(30 * var(--u));
  padding-left: calc(30 * var(--u));
}
.ct_bg .cv01 .btn01.seven01 {
  padding: calc(5 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u));
}
.ct_bg .cv01 .btn01.seven01 .note02 {
  width: calc(260 * var(--u));
}

.ct_bg .title04 img {
  width: calc(340 * var(--u));
}

.ct_bg .mainSlider01 {
  width: calc(340 * var(--u));
}

.ct_bg .movieArea01 {
  padding: 0 calc(30 * var(--u));
}
.ct_bg .movieList01 {
  gap: calc(40 * var(--u));
}
.ct_bg .shortList01 {
  flex-direction: column;
}
.ct_bg .movie01.type01,
.ct_bg .movie01.type02 {
  width: calc(340 * var(--u));
}
.ct_bg .movie01.type01::before {
  background-image: url(../img/bg_movie_waku01_sp.svg);
}
.ct_bg .movie01.type02::before {
  background-image: url(../img/bg_movie_short_waku01_sp.svg);
}
.ct_bg .movie01.type01 .video01 {
  aspect-ratio: 280 / 158;
}
.ct_bg .movie01.type02 .title01 {
  padding: 0;
}

.ct_bg .more01 a {
  min-width: calc(280 * var(--u));
  padding: calc(10 * var(--u)) calc(40 * var(--u)) calc(12 * var(--u));
  font-size: calc(24 * var(--u));
}

.ct_bg .snsBtn01 {
  flex-wrap: wrap;
}


.ct_bg .opening01::before {
  background-size: calc(500 * var(--u)) auto;
}

/* オープニングの雲を並べる領域（SPは400×700） */
.ct_bg .opening01 .canvas01 {
  --k: max(calc(100cqw / 400), calc(100cqh / 700));
  width: calc(400 * var(--k));
  height: calc(700 * var(--k));
}
/* SPの雲は、SVG（マスク入りで描画が重く、iPhoneで雲が出ない・一気に埋まる原因になる）ではなく、軽い画像（WebP）を使う。PCはSVGのまま */
.ct_bg .opening01 .cloud01 {
  background-image: url(../img/img_op_cloud01_sp.webp);
}
.ct_bg .opening01 .cloud01.type02 {
  background-image: url(../img/img_op_cloud02_sp.webp);
}
.ct_bg .opening01 .cloud01.type03 {
  background-image: url(../img/img_op_cloud03_sp.webp);
}
/* SPの雲は、CSSの時間ではなく、common/js/opening.js が .is-in を付けたタイミングで出す（描画が重くて動きが止まっても、一気に出てしまわないように） */
.ct_bg .opening01 .cloud01 {
  animation: none;
}
.ct_bg .opening01:not(.is-out) .cloud01.is-in {
  animation: cloudPop .4s cubic-bezier(.2, 1.5, .4, 1) both;
}
/* 演出が始まる前から、背面のTOPを（ほぼ見えない状態で）描画しておく。演出の途中で初めて描画すると、動きが止まるため */
html.is-opening .ct_bg .wrapper01 > *:not(.opening01) {
  opacity: .01;
}

/* フキダシ装飾（SP） */
.ct_bg .bubbleArea01 .bubbleBox01 {
  top: 61px;
  height: calc(691 * var(--u));
}
.ct_bg .fukidashi01.g1 {
  top: calc(520 * var(--u));
  left: calc(50% + 122 * var(--u));
  width: calc(90 * var(--u));
}
.ct_bg .fukidashi01.g2 {
  display: none;
}
.ct_bg .fukidashi01.a1 {
  top: calc(42 * var(--u));
  left: calc(50% + -226 * var(--u));
  width: calc(101 * var(--u));
}
.ct_bg .fukidashi01.b1 {
  top: calc(247 * var(--u));
  left: calc(50% + -252 * var(--u));
  width: calc(121 * var(--u));
}
.ct_bg .fukidashi01.i1 {
  top: calc(52 * var(--u));
  left: calc(50% + 113 * var(--u));
  width: calc(98 * var(--u));
}
.ct_bg .fukidashi01.d1 {
  top: calc(275.1 * var(--u));
  left: calc(50% + 120.9 * var(--u));
  width: calc(131.3 * var(--u));
}
.ct_bg .fukidashi01.d2 {
  display: none;
}
.ct_bg .fukidashi01.e1 {
  top: calc(489 * var(--u));
  left: calc(50% + -220 * var(--u));
  width: calc(102 * var(--u));
}
.ct_bg .fukidashi01.c1 {
  top: calc(429 * var(--u));
  left: calc(50% + -166 * var(--u));
  width: calc(37.2 * var(--u));
}
.ct_bg .fukidashi01.c2 {
  top: calc(612 * var(--u));
  left: calc(50% + -210 * var(--u));
  width: calc(55 * var(--u));
}
.ct_bg .fukidashi01.c3 {
  top: calc(176.1 * var(--u));
  left: calc(50% + 153.9 * var(--u));
  width: calc(40 * var(--u));
}
.ct_bg .fukidashi01.c4 {
  display: none;
}
.ct_bg .fukidashi01.c5 {
  top: calc(658 * var(--u));
  left: calc(50% + 155 * var(--u));
  width: calc(35 * var(--u));
}
.ct_bg .fukidashi01.c6 {
  top: calc(427.1 * var(--u));
  left: calc(50% + 169.9 * var(--u));
  width: calc(36 * var(--u));
}
.ct_bg .fukidashi01.c7 {
  top: calc(176 * var(--u));
  left: calc(50% + -205 * var(--u));
  width: calc(36 * var(--u));
}
.ct_bg .fukidashi01.c8 {
  display: none;
}

/* 下層ページ（SP） */
.ct_bg .headerFix01 {
  display: none;
}
.ct_bg .headerArea02 {
  position: static;
  flex-direction: column-reverse;
  align-items: flex-start;
  justify-content: center;
  gap: calc(2 * var(--u));
  height: calc(116 * var(--u));
  padding: calc(20 * var(--u)) calc(30 * var(--u)) calc(10 * var(--u));
}
.ct_bg .logo02 {
  padding: calc(3 * var(--u));
  border-radius: calc(8 * var(--u));
}
.ct_bg .logo02 img {
  width: calc(141 * var(--u));
}
.ct_bg .info02 {
  align-items: flex-start;
  width: calc(276 * var(--u));
}
.ct_bg .text02 {
  font-size: calc(10 * var(--u));
  text-align: left;
}
.ct_bg .navi02 {
  display: none;
}

.ct_bg .lineupArea01.type02 {
  padding: calc(30 * var(--u)) calc(30 * var(--u)) 0;
}
.ct_bg .movieArea01.type02 {
  padding: calc(30 * var(--u)) calc(30 * var(--u)) 0;
}

/* SPのメニュー（黒枠の中に置く。メニューボタン→ボタンの左にメニューが開く） */
.ct_bg .menuBtn01,
.ct_bg .menuClose01 {
  position: absolute;
  z-index: 2;
  top: calc(18 * var(--u));
  box-sizing: border-box;
  width: calc(60 * var(--u));
  height: calc(70 * var(--u));
  padding: 0;
  /* 枠線は border ではなく inset の影で描く（上・左・下）。
     border は画面によって端数が切り捨てられ（例：3→2px）、メニューのパネルとの位置合わせが1px前後ずれて、継ぎ目に線が見えるため */
  border: 0;
  border-radius: calc(10 * var(--u)) 0 0 calc(10 * var(--u));
  box-shadow:
    inset calc(3 * var(--u)) 0 0 0 #6e6e6e,
    inset 0 calc(3 * var(--u)) 0 0 #6e6e6e,
    inset 0 calc(-3 * var(--u)) 0 0 #6e6e6e;
  background: #fff;
  color: #222;
  font-family: "Montserrat", sans-serif;
  cursor: pointer;
  pointer-events: auto;
}
.ct_bg .menuBtn01 {
  display: block;
  right: calc(6 * var(--u));
}
/* TOPのメニューボタンは、メイン部分を過ぎるまで表示しない */
.ct_bg .menuBtn01[data-fix] {
  transition: opacity .3s, visibility .3s;
}
.ct_bg .menuBtn01[data-fix]:not(.is-show) {
  visibility: hidden;
  opacity: 0;
}
/* 開いている間は、メニューボタンを隠す（TOPの上の遷移に負けないよう、動きなしですぐに）。閉じるボタン（パネルの左端に付いていて、閉じている時のメニューボタンと同じ位置から出てくる）に、すぐ入れ替わる */
.ct_bg .menuBtn01[aria-expanded="true"],
.ct_bg .menuBtn01[data-fix][aria-expanded="true"] {
  visibility: hidden;
  transition: none;
}
.ct_bg .menuBtn01 .bars01 {
  position: absolute;
  top: calc(17 * var(--u));
  left: calc(16 * var(--u));
  width: calc(32 * var(--u));
  height: calc(21 * var(--u));
  background:
    linear-gradient(#222, #222) 0 0/100% calc(3 * var(--u)) no-repeat,
    linear-gradient(#222, #222) 0 50%/100% calc(3 * var(--u)) no-repeat,
    linear-gradient(#222, #222) 0 100%/100% calc(3 * var(--u)) no-repeat;
}
.ct_bg .menuBtn01 .label01,
.ct_bg .menuClose01 .label01 {
  position: absolute;
  top: calc(45 * var(--u));
  right: 0;
  left: calc(3 * var(--u));
  font-size: calc(13 * var(--u));
  font-weight: 700;
  line-height: 1;
  text-align: center;
}
.ct_bg .menuWrap01 {
  display: block;
  position: absolute;
  z-index: 1;
  top: 0;
  right: calc(6 * var(--u));
  left: 0;
  height: calc(340 * var(--u));
  overflow: hidden;
  pointer-events: none;
}
.ct_bg .menuPanel01 {
  border-radius: 0 0 0 calc(10 * var(--u)); /* 白い背景が、角丸の枠からはみ出さないように */
  position: absolute;
  top: calc(18 * var(--u));
  right: 0;
  left: calc(75 * var(--u));
  box-sizing: border-box;
  height: calc(291 * var(--u));
  background: #fff;
  pointer-events: auto;
  /* 開閉は、右（黒枠の外）からスライドして入ってくる。はみ出た部分は .menuWrap01 で隠れる。閉じ終わったら visibility で操作できないようにする */
  visibility: hidden;
  transform: translateX(calc(100% - 3 * var(--u)));
  transition: transform .35s cubic-bezier(.22, .61, .36, 1), visibility 0s .35s;
}
.ct_bg .menuPanel01::before,
.ct_bg .menuPanel01::after {
  /* 枠線は、パネル自身の border ではなく、重ねた要素に影（inset）で描く。
     border は、画面によって端数が切り捨てられ（例：3→2px）、中の閉じるボタンの位置と上でずれる原因になるため */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  pointer-events: none;
  content: "";
}
/* 上の枠線 */
.ct_bg .menuPanel01::before {
  box-shadow: inset 0 calc(3 * var(--u)) 0 0 #6e6e6e;
}
/* 左と下の枠線。左の枠線は、閉じるボタン（高さ70）の下端の枠線（67〜70）から下だけにする。
   ボタンの右端と重なると、端数のずれで、ボタンの右端に薄い縦線が見えるため */
.ct_bg .menuPanel01::after {
  border-radius: 0 0 0 calc(10 * var(--u));
  box-shadow:
    inset calc(3 * var(--u)) 0 0 0 #6e6e6e,
    inset 0 calc(-3 * var(--u)) 0 0 #6e6e6e;
  clip-path: inset(calc(67 * var(--u)) 0 0 0);
}
.ct_bg .menuPanel01.is-open {
  visibility: visible;
  transform: translateX(0);
  transition: transform .35s cubic-bezier(.22, .61, .36, 1), visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
.ct_bg .menuPanel01,
.ct_bg .menuPanel01.is-open {
  transition: none;
}
}
.ct_bg .menuClose01 {
  left: calc(-57 * var(--u));
  top: 0;
}
.ct_bg .menuClose01 .cross01 {
  position: absolute;
  top: calc(17 * var(--u));
  left: calc(16 * var(--u));
  width: calc(32 * var(--u));
  height: calc(21 * var(--u));
}
.ct_bg .menuClose01 .cross01::before,
.ct_bg .menuClose01 .cross01::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(30 * var(--u));
  height: calc(3 * var(--u));
  margin: calc(-1.5 * var(--u)) 0 0 calc(-15 * var(--u));
  border-radius: calc(2 * var(--u));
  background: #222;
  content: "";
}
.ct_bg .menuClose01 .cross01::before {
  transform: rotate(45deg);
}
.ct_bg .menuClose01 .cross01::after {
  transform: rotate(-45deg);
}
.ct_bg .menuList01 {
  position: absolute;
  top: calc(20 * var(--u));
  left: calc(33 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(15 * var(--u));
  width: calc(250 * var(--u));
}
.ct_bg .menuList01 a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: calc(17 * var(--u));
  border-bottom: calc(2 * var(--u)) solid #bbb;
  color: #222;
  font-size: calc(20 * var(--u));
  font-weight: 800;
  line-height: 1.5;
  text-decoration: none;
}
.ct_bg .menuList01 a::after {
  flex: none;
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  background: url(../img/icon_arrow02.svg) no-repeat 0 0/100%;
  content: "";
}
/* タップした時の、青い枠（ハイライト）を出さない */
.ct_bg .menuBtn01,
.ct_bg .menuClose01,
.ct_bg .menuList01 a {
  -webkit-tap-highlight-color: transparent;
}
.ct_bg .menuBtn01:focus-visible,
.ct_bg .menuClose01:focus-visible,
.ct_bg .menuList01 a:focus-visible {
  outline: 3px solid #0075bb;
  outline-offset: 2px;
}
}

/* SPの画像は、PCと縦横比が違う（正方形）。画像が届く前も、同じ高さの場所を確保して、読み込み後にレイアウトがずれないようにする（アンカーリンクの位置ずれ対策）。
   <source> の width / height でも指定しているが、未対応のブラウザ向けにCSSでも指定する */
@media screen and (max-width: 767px) {
.ct_bg .lineupArea01 .block01 .image01 img,
.ct_bg .mainSlider01 .slide01 img {
  aspect-ratio: 1 / 1;
}
}

/* 演出が始まるまでの間も、背景の柄は表示する（白い画面にしない）。フキダシは、演出が終わるまで隠す */
html.is-opening .ct_bg .wrapper01 > .bubbleArea01 {
  opacity: 1;
}
html.is-opening .ct_bg .bubbleArea01 .bubbleBox01 {
  opacity: 0;
}

/* ヘッダーの小さいテキスト：背景の画像と重なっても読めるよう、白い縁取りを付ける。
   TOPのメイン画像の上の中央に出るテキスト（.headTitleArea01 > .text01）は、背景と重ならないので縁取りなし */
.ct_bg .text02 {
  -webkit-text-stroke: calc(4 * var(--u)) #fff;
  paint-order: stroke fill;
  text-shadow: 0 0 calc(2 * var(--u)) #fff;
}

/* Safari（iPhone）だけ：画面下のツールバーの下に、枠の外側のページが透けて見えるため、枠の下を白く塗りつぶす。
   -webkit-touch-callout を判定に使い、iOS以外（Androidなど）には適用しない。
   枠の下辺（.frameArea01::after）の影を、真下に伸ばして白く塗る。影はページと一緒に描かれるので、ツールバーの高さが変わっても追従する。
   .ct_bg の外（青いフッター）にはみ出さないよう、.ct_bg の外は切り取る（overflow: clip） */
@media screen and (max-width: 767px) {
@supports (-webkit-touch-callout: none) {
.ct_bg {
  overflow: clip;
}
.ct_bg .frameArea01::after {
  box-shadow: 0 160px 0 0 #fff;
}
}
}

/* 閉じる時：メニューを戻し始めるのと同時に、閉じるボタンの見た目（✕とClose）を、メニューボタンの見た目（≡とMenu）に切り替える（common/js/common.js が .is-menu を付ける）。
   そのあと、同じ見た目のまま横に戻るので、戻り終わってメニューボタンに入れ替わっても、切り替わりに見えない */
.ct_bg .menuClose01 .cross01,
.ct_bg .menuClose01 .label01 {
  transition: opacity .1s;
}
.ct_bg .menuClose01::before,
.ct_bg .menuClose01::after {
  position: absolute;
  opacity: 0;
  transition: opacity .1s;
  content: "";
}
.ct_bg .menuClose01::before {
  top: calc(17 * var(--u));
  left: calc(16 * var(--u));
  width: calc(32 * var(--u));
  height: calc(21 * var(--u));
  background:
    linear-gradient(#222, #222) 0 0/100% calc(3 * var(--u)) no-repeat,
    linear-gradient(#222, #222) 0 50%/100% calc(3 * var(--u)) no-repeat,
    linear-gradient(#222, #222) 0 100%/100% calc(3 * var(--u)) no-repeat;
}
.ct_bg .menuClose01::after {
  top: calc(45 * var(--u));
  right: 0;
  left: calc(3 * var(--u));
  font-size: calc(13 * var(--u));
  font-weight: 700;
  line-height: 1;
  text-align: center;
  content: "Menu";
}
.ct_bg .menuClose01.is-menu .cross01,
.ct_bg .menuClose01.is-menu .label01 {
  opacity: 0;
}
.ct_bg .menuClose01.is-menu::before,
.ct_bg .menuClose01.is-menu::after {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.ct_bg .menuClose01 .cross01,
.ct_bg .menuClose01 .label01,
.ct_bg .menuClose01::before,
.ct_bg .menuClose01::after {
  transition: none;
}
}

/* 商品ラインナップのページ：キャラクター別のタブ（見出しの下）。選んだキャラクターのブロックだけを表示する（JS：common.js）。
   選んでいるタブは白地で、下に三角を付ける。JSが動かない時は、全て表示して、ページ内のリンクで移動する */
.ct_bg .localNavi01 {
  display: flex;
  justify-content: center;
  gap: calc(24 * var(--u));
}
.ct_bg .localNavi01 a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: calc(304 * var(--u));
  height: calc(63 * var(--u));
  padding: calc(6 * var(--u)) calc(20 * var(--u)) calc(7 * var(--u));
  border-radius: calc(10 * var(--u));
  background: #222;
  box-shadow: 0 calc(4 * var(--u)) 0 rgba(0, 0, 0, .2);
  color: #fff;
  font-size: calc(24 * var(--u));
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s, box-shadow .2s;
}
.ct_bg .localNavi01 a:focus-visible {
  outline: 3px solid #0075bb;
  outline-offset: 3px;
}
@media (any-hover: hover) {
.ct_bg .localNavi01 a:not([aria-selected="true"]):hover {
  background-color: #ff0;
  box-shadow: inset 0 0 0 calc(3 * var(--u)) #222, 0 calc(4 * var(--u)) 0 rgba(0, 0, 0, .2);
  color: #222;
}
}
/* 選んでいるタブ。枠は内側に描いて、大きさを変えない */
.ct_bg .localNavi01 a[aria-selected="true"] {
  background: #fff;
  box-shadow: inset 0 0 0 calc(3 * var(--u)) #222;
  color: #222;
  pointer-events: none; /* 選んでいるタブは、押せない */
}
.ct_bg .localNavi01 a[aria-selected="true"]::after {
  content: "";
  position: absolute;
  bottom: calc(-12 * var(--u));
  left: 0;
  right: 0;
  width: calc(17.3205 * var(--u));
  height: calc(15 * var(--u));
  margin: auto;
  background: #222;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
/* 選んでいないキャラクターのブロックは隠す（.is-tab は、JSが絞り込みを始めた時に付き、3つとも表示している間は .is-all も付く） */
.ct_bg .lineupArea01 .block01[hidden] {
  display: none;
}
.ct_bg .lineupArea01.is-tab .inner01 {
  position: relative; /* 切り替え中、消えていくブロックを、同じ位置に重ねる基準 */
}
.ct_bg .lineupArea01.is-tab:not(.is-all) .block01 + .block01 {
  margin-top: 0;
}
.ct_bg .lineupArea01 .block01 {
  scroll-margin-top: calc(171 * var(--u));
}
@media screen and (max-width: 767px) {
.ct_bg .localNavi01 {
  gap: calc(5 * var(--u));
}
.ct_bg .localNavi01 a {
  width: calc(110 * var(--u));
  height: calc(56 * var(--u));
  padding: calc(6 * var(--u)) calc(4 * var(--u)) calc(10 * var(--u));
  font-size: calc(13 * var(--u));
  line-height: 1.2;
  white-space: nowrap;
}
.ct_bg .localNavi01 a[aria-selected="true"]::after {
  bottom: calc(-8 * var(--u));
  width: calc(12.1244 * var(--u));
  height: calc(10.5 * var(--u));
}
.ct_bg .lineupArea01 .block01 {
  scroll-margin-top: calc(118 * var(--u));
}
}