@charset "UTF-8";
@forward 'sass:math' as math-*;
/**
  スクロール位置で表示アニメーション
 **/
/* bound text animation
--------------- */
@keyframes bound-text {
  0%,
  100% {
    transform: translateY(0); }
  30% {
    transform: translateY(-25%); }
  90% {
    transform: translateY(0); } }

/* bound text animation
--------------- */
.is-animated .animation-zoom-in {
  animation-name: zoomInAnime;
  animation-duration: 0.5s; }

@keyframes zoomInAnime {
  0% {
    transform: scale(1); }
  50% {
    transform: translateY(-15%) scale(1.1); }
  100% {
    transform: translateY(0) scale(1); } }

/* zoomOut animation
--------------- */
.animation-zoom-out {
  opacity: 0; }
  .is-animated .animation-zoom-out {
    animation-name: zoomOutAnime;
    animation-duration: 0.7s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards; }

@keyframes zoomOutAnime {
  0% {
    opacity: 0; }
  50% {
    opacity: 1;
    transform: scale(1.2); }
  100% {
    opacity: 1;
    transform: scale(1); } }

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0); }
  40% {
    transform: translateY(-20px); }
  60% {
    transform: translateY(-10px); } }

/* bottom fadeIn animation
--------------- */
.animation-bottom-fade-in {
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.5, 0, 0, 1), transform 1s cubic-bezier(0.5, 0, 0, 1);
  transform: translateY(50px); }
  .is-animated .animation-bottom-fade-in {
    opacity: 1;
    transform: translateY(0); }

/* Button animation
--------------- */
@keyframes scale {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(1.05, 1.05); }
  100% {
    transform: scale(1); } }

.button-anim {
  display: block;
  transition: 0.5s;
  animation-name: scale;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite; }
  .button-anim:hover {
    animation: none; }

.button-bounce {
  position: relative;
  transform-origin: center bottom;
  animation-name: bounce;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-fill-mode: both; }

.button-hover {
  display: block;
  transition: 0.5s; }
  .button-hover:hover {
    transform: scale(1.05, 1.05); }

/* bound text animation
--------------- */
@keyframes movingThumb {
  0%,
  100% {
    transform: translateX(0px) rotate(0deg); }
  50% {
    transform: translateX(0px) rotate(3deg); } }

.thumb-animation.is-moving {
  transition: transform 0.3s ease-in-out;
  transform: rotate(0deg);
  transform-origin: 50% 100%;
  animation: movingThumb 0.5s linear 2; }

/*
kaitori
*/
/* 「パッ」 */
@keyframes scaleUp {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

/* step 「パッと売れる」 */
.step__heading-img-02-container .step__heading-img-02-first {
  opacity: 0;
  transition: none;
  transform: scale(0); }

.step__heading-img-02-container.is-animated .step__heading-img-02-first {
  animation: scaleUp 0.15s ease-out 0.5s forwards; }

/* .product 「パッと売れる」 */
.product__heading-02-container .product__heading-02-first {
  opacity: 0;
  transition: none;
  transform: scale(0); }

.product__heading-02-container.is-animated .product__heading-02-first {
  animation: scaleUp 0.15s ease-out 0.5s forwards; }

/* あのさんがクイッと動く */
.is-animated .js-thumb-animation {
  opacity: 1;
  transition: transform 0.3s ease-in-out;
  transform: rotate(0deg);
  transform-origin: 50% 100%;
  animation: movingThumb 0.5s linear 2;
  animation-delay: 1.5s;
  animation-fill-mode: forwards; }

/* ? */
@keyframes movingText {
  0%,
  100% {
    transform: translateX(0px) rotate(0deg); }
  50% {
    transform: translateX(5px) rotate(7.5deg); } }

.text-animation.is-moving {
  transition: transform 0.3s ease-in-out;
  transform: rotate(0deg);
  transform-origin: 50% 100%;
  animation: movingText 0.5s linear 1;
  animation-delay: 0.5s; }

/* Button animation
--------------- */
@keyframes scale {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(1.05, 1.05); }
  100% {
    transform: scale(1); } }

.button-anim {
  display: block;
  transition: 0.5s;
  animation-name: scale;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite; }
  .button-anim:hover {
    animation: none; }

.button-bounce {
  position: relative;
  transform-origin: center bottom;
  animation-name: bounce;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-fill-mode: both; }

.button-hover-scall {
  display: block;
  transition: 0.5s; }
  .button-hover-scall:hover {
    transform: scale(1.05, 1.05); }

.button-hover-rise {
  display: block;
  cursor: pointer;
  transition: transform 0.3s ease; }
  .button-hover-rise:hover {
    transform: translateY(-10px); }

/* step animation
--------------- */
.step__step-list .step__step-list-item {
  opacity: 0;
  transition: opacity 0.4s ease,
 transform 0.4s ease;
  transform: translateY(-10px); }
  @media screen and (min-width: 768px) {
    .step__step-list .step__step-list-item {
      transform: translateY(0);
      transform: translateX(-10px); } }

.step__step-list.is-animated .step__step-list-item {
  opacity: 1;
  transform: translateX(0);
  transform: translateY(0); }

.step__step-list.is-animated .step__step-list-item:nth-child(1) {
  transition-delay: 0.2s; }

.step__step-list.is-animated .step__step-list-item:nth-child(2) {
  transition-delay: 0.4s; }

.step__step-list.is-animated .step__step-list-item:nth-child(3) {
  transition-delay: 0.6s; }

/* 「左右に揺れる」傾きが2回変わる(SP)
--------------- */
@keyframes tiltAnimation {
  0% {
    transform: rotate(0deg); }
  33% {
    transform: rotate(5deg); }
  66% {
    transform: rotate(-10deg); }
  100% {
    transform: rotate(0deg); } }

/* 「ガサゴソ」揺れる(PC)
--------------- */
@keyframes shake {
  0% {
    transform: translateX(0) rotate(0deg); }
  25% {
    transform: translateX(3px) rotate(2deg); }
  50% {
    transform: translateX(-5px) rotate(-3deg); }
  75% {
    transform: translateX(5px) rotate(3deg); }
  100% {
    transform: translateX(0) rotate(0deg); } }

.animation-shake.is-moving {
  position: relative;
  z-index: 10;
  animation-name: tiltAnimation;
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  animation-iteration-count: 1; }
  @media screen and (min-width: 768px) {
    .animation-shake.is-moving {
      z-index: unset;
      animation-name: shake;
      animation-duration: 0.6s; } }

/* MV Animation
--------------- */
/*
① 段ボールの下からスライド
*/
.mv__visual-img {
  transition: transform 0.4s ease-out 0.2s;
  transform: translateY(100%); }
  .mv__visual-img.is-animated {
    transform: translateY(0); }

/*
② 「パッ」
*/
.mv__lead-01-first {
  opacity: 0;
  transition: none;
  transform: scale(0); }
  .mv__lead-01-first.is-animated {
    animation: scaleUp 0.15s ease-out 1s forwards; }

/*
③ 「と売るなら」
*/
.mv__lead-01-second {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.43s ease-in-out 1.35s; }
  .mv__lead-01-second.is-animated {
    clip-path: inset(0 0 0 0); }

/*
④ 「ブックオフよね。」
*/
.mv__lead-02-img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.45s ease-in-out 2s; }
  .mv__lead-02-img.is-animated {
    clip-path: inset(0 0 0 0); }

body {
  margin: 0; }

.main {
  position: relative;
  padding: 0;
  margin: 0;
  overflow: hidden;
  font-family: "Noto Sans CJK JP", "Noto Sans", "Noto Sans JP Subset", sans-serif;
  background-color: #fff100; }

main img {
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: bottom; }

/* header
--------------- */
#detail-page {
  top: 0;
  padding-top: 4px;
  margin-bottom: 0;
  overflow: hidden; }

/* bread-clumb
--------------- */
.bread-crumb-wrap {
  position: relative;
  width: 960px;
  margin: 0 auto; }

.bread-crumb::after {
  display: block;
  height: 0;
  clear: both;
  font-size: 0;
  visibility: hidden;
  content: ' '; }

.bread-crumb > #home {
  padding-left: 12px;
  background: url(/common/images/bread-clumb-home-bg-01.png) left 1px no-repeat; }

.bread-crumb li {
  display: inline;
  color: #666; }

/** -------------------------------------------------
 * mv
---------------------------------------------------- **/
.mv {
  padding-top: 9.86667vw;
  background-color: #e63828; }
  @media screen and (min-width: 768px) {
    .mv {
      padding-top: 70px; } }
  .mv__layout {
    position: relative; }
    @media screen and (min-width: 768px) {
      .mv__layout {
        width: 100%;
        max-width: 1100px;
        margin-inline: auto; } }
  .mv__title {
    padding-inline: 4.93333vw;
    margin-block: 0;
    margin-inline: auto; }
    @media screen and (min-width: 768px) {
      .mv__title {
        position: absolute;
        top: 0;
        right: calc((6 / 1100) * 100%);
        width: calc((433 / 1100) * 100%);
        padding: 0;
        margin-top: calc((30 / 1100) * 100%); } }
  .mv__title-img {
    aspect-ratio: 676/222; }
    @media screen and (min-width: 768px) {
      .mv__title-img {
        aspect-ratio: 433/350; } }
  .mv__inner {
    position: relative;
    width: 100%;
    margin-top: 3.6vw; }
    @media screen and (min-width: 768px) {
      .mv__inner {
        width: calc((874 / 1100) * 100%);
        aspect-ratio: 874/737;
        margin-top: 0; } }
  .mv__lead-01-container {
    position: absolute;
    top: 0;
    right: 8.93333vw;
    width: 9.46667vw;
    aspect-ratio: 71/341; }
    @media screen and (min-width: 768px) {
      .mv__lead-01-container {
        right: calc((262 / 874) * 100%);
        width: calc((63 / 874) * 100%); } }
  .mv__lead-01-first {
    position: absolute;
    top: 0;
    left: 0; }
  .mv__lead-01-second {
    position: absolute;
    bottom: 0;
    left: 0; }
  .mv__lead-02 {
    position: absolute;
    top: 0;
    left: 11.2vw;
    width: 5.33333vw; }
    @media screen and (min-width: 768px) {
      .mv__lead-02 {
        left: calc((45 / 874) * 100%);
        width: calc((35 / 874) * 100%); } }
  .mv__visual {
    width: 100%;
    aspect-ratio: 750 / 824;
    padding-top: 1.46667vw;
    overflow: hidden; }
    @media screen and (min-width: 768px) {
      .mv__visual {
        position: absolute;
        right: 0;
        bottom: 0;
        width: calc((971 / 874) * 100%);
        aspect-ratio: 971 / 737;
        padding: 0; } }
  .mv__visual-img {
    aspect-ratio: 750/824; }
    @media screen and (min-width: 768px) {
      .mv__visual-img {
        aspect-ratio: 971/737; } }
  .mv__btn {
    position: absolute;
    bottom: 3.2vw;
    left: 50%;
    width: 52.26667vw;
    height: auto;
    transform: translateX(calc(-50% + 8px)); }
    @media screen and (min-width: 768px) {
      .mv__btn {
        bottom: 18px;
        width: calc((331 / 1100) * 100%); } }
  .mv__btn-link {
    display: block;
    width: 100%; }

/** -------------------------------------------------
 * step
 ---------------------------------------------------- **/
.step {
  padding-top: 11.333%;
  padding-bottom: 17.066%;
  background-color: #171c60; }
  @media screen and (min-width: 768px) {
    .step {
      padding-top: min(calc((65 / 950) * 100%), 65px);
      padding-bottom: min(calc((110 / 950) * 100%), 110px); } }
  .step__layout {
    width: 100%; }
    @media screen and (min-width: 768px) {
      .step__layout {
        max-width: 950px;
        margin-inline: auto; } }
  .step__heading-container {
    position: relative;
    padding-top: calc((111 / 750) * 100%);
    padding-right: calc((28 / 750) * 100%);
    padding-left: calc((184 / 750) * 100%); }
    @media screen and (min-width: 768px) {
      .step__heading-container {
        padding-top: calc((108 / 950) * 100%);
        padding-right: calc((12 / 950) * 100%);
        padding-left: calc((286 / 950) * 100%); } }
  .step__heading {
    margin: 0; }
  .step__heading-img-01 {
    position: relative;
    display: inline-block;
    width: calc((165 / 269) * 100%);
    padding-left: calc((66 / 269) * 100%); }
    @media screen and (min-width: 768px) {
      .step__heading-img-01 {
        width: calc((370 / 652) * 100%);
        padding-left: calc((168 / 652) * 100%); } }
  .step__heading-img-02-container {
    position: relative;
    display: inline-block;
    width: 100%;
    aspect-ratio: 652/127;
    margin-top: calc((6.5 / 269) * 100%); }
    @media screen and (min-width: 768px) {
      .step__heading-img-02-container {
        margin-top: calc((10 / 652) * 100%); } }
  .step__heading-img-02-first, .step__heading-img-02-second {
    position: absolute;
    top: 0; }
  .step__heading-img-02-first {
    left: 0;
    width: 38.19%;
    width: calc((249 / 652) * 100%); }
  .step__heading-img-02-second {
    right: 0;
    width: calc((403 / 652) * 100%); }
  .step__heading-img-03 {
    position: absolute;
    top: 0;
    left: 0;
    width: calc((319 / 750) * 100%); }
    @media screen and (min-width: 768px) {
      .step__heading-img-03 {
        left: calc((34 / 950) * 100%);
        width: calc((360 / 950) * 100%); } }
  .step__contents {
    margin-top: calc((53 / 750) * 100%); }
    @media screen and (min-width: 768px) {
      .step__contents {
        margin-top: calc((38 / 950) * 100%); } }
  .step__step-heading {
    width: calc((340 / 750) * 100%);
    margin-inline: auto; }
    @media screen and (min-width: 768px) {
      .step__step-heading {
        width: calc((357 / 950) * 100%); } }
  .step__step-list {
    padding-inline: calc((101 / 750) * 100%);
    margin-top: calc((19 / 750) * 100%); }
    @media screen and (min-width: 768px) {
      .step__step-list {
        display: flex;
        gap: calc((32 / 950) * 100%);
        padding-inline: 0;
        margin-top: calc((14 / 950) * 100%); } }
  .step__step-list-item {
    position: relative;
    flex-grow: 1; }
  .step__step-list-item + .step__step-list-item {
    margin-top: calc((53 / 548) * 100%); }
    .step__step-list-item + .step__step-list-item::before {
      position: absolute;
      top: calc((-42 / 256) * 100%);
      left: 50%;
      display: block;
      width: calc((53 / 548) * 100%);
      aspect-ratio: 53/32;
      content: '';
      background: url("/brand/kaitori/images/arrow-bottom.png") center 100% no-repeat;
      transform: translateX(-50%); }
    @media screen and (min-width: 768px) {
      .step__step-list-item + .step__step-list-item {
        margin-top: 0; }
        .step__step-list-item + .step__step-list-item::before {
          top: 50%;
          left: calc((-27 / 292) * 100%);
          width: calc((23 / 292) * 100%);
          height: auto;
          aspect-ratio: 23/37;
          background: url("/brand/kaitori/images/arrow-right.png") center/contain no-repeat;
          transform: translate(0, -50%); } }
  .step__step-list-item-img {
    aspect-ratio: 548/257; }
    @media screen and (min-width: 768px) {
      .step__step-list-item-img {
        aspect-ratio: 292/257; } }
  .step__cashless-heading {
    position: relative;
    z-index: 1;
    width: calc((519 / 750) * 100%);
    margin-inline: auto;
    margin-top: calc((128 / 750) * 100%); }
    .step__cashless-heading:before {
      position: absolute;
      top: calc((-96 / 148) * 100%);
      left: calc((-72 / 519) * 100%);
      z-index: -1;
      display: block;
      width: calc((138 / 519) * 100%);
      aspect-ratio: 1/1;
      content: '';
      background: url("/brand/kaitori/images/step-sarani.png") center/contain no-repeat; }
    @media screen and (min-width: 768px) {
      .step__cashless-heading {
        width: calc((738 / 950) * 100%);
        margin-top: calc((57 / 950) * 100%); }
        .step__cashless-heading:before {
          top: calc((-24 / 54) * 100%);
          left: calc((-92 / 738) * 100%);
          width: calc((83 / 738) * 100%); } }
  .step__cashless-heading-img {
    aspect-ratio: 519/147; }
    @media screen and (min-width: 768px) {
      .step__cashless-heading-img {
        aspect-ratio: 738/54; } }
  .step__cashless-btn {
    width: calc((529 / 750) * 100%);
    margin-inline: auto;
    margin-top: calc((25 / 750) * 100%);
    text-align: center; }
    @media screen and (min-width: 768px) {
      .step__cashless-btn {
        width: calc((537 / 950) * 100%);
        margin-top: calc((35 / 950) * 100%); } }
  .step__cashless-btn-link {
    display: inline-block;
    width: 100%;
    padding-bottom: 4px;
    border-bottom: 1px solid #f9cd05; }
    @media screen and (min-width: 768px) {
      .step__cashless-btn-link {
        padding-bottom: 6px;
        border-width: 3px; } }

/** -------------------------------------------------
 * product
 ---------------------------------------------------- **/
.product {
  padding-top: calc((51 / 750) * 100%);
  padding-bottom: calc((17 / 750) * 100%);
  background-color: #fbcf05; }
  @media screen and (min-width: 768px) {
    .product {
      padding-top: min(calc((47 / 950) * 100%), 65px);
      padding-bottom: min(calc((11 / 950) * 100%), 110px); } }
  @media screen and (min-width: 768px) {
    .product__heading-layout {
      max-width: 950px;
      margin-inline: auto; } }
  .product__heading-container {
    position: relative;
    padding-top: calc((37 / 750) * 100%);
    padding-right: calc((182 / 750) * 100%);
    padding-left: calc((31 / 750) * 100%); }
    @media screen and (min-width: 768px) {
      .product__heading-container {
        padding-top: calc((70 / 950) * 100%);
        padding-right: calc((292 / 950) * 100%);
        padding-left: 0; } }
  .product__heading {
    margin: 0; }
  .product__heading-01 {
    display: inline-block;
    width: calc((361 / 538) * 100%);
    padding-left: calc((98 / 538) * 100%); }
    @media screen and (min-width: 768px) {
      .product__heading-01 {
        width: 100%;
        padding-left: 0; } }
  .product__heading-01-img {
    aspect-ratio: 361/136; }
    @media screen and (min-width: 768px) {
      .product__heading-01-img {
        aspect-ratio: 658/81; } }
  .product__heading-02-container {
    position: relative;
    display: inline-block;
    width: 100%;
    aspect-ratio: 652/127;
    margin-top: calc((17 / 538) * 100%); }
    @media screen and (min-width: 768px) {
      .product__heading-02-container {
        width: calc((652 / 658) * 100%);
        margin-top: calc((16 / 658) * 100%);
        margin-left: calc((5 / 658) * 100%); } }
  .product__heading-02-first, .product__heading-02-second {
    position: absolute;
    top: 0; }
  .product__heading-02-first {
    left: 0;
    width: calc((249 / 652) * 100%); }
  .product__heading-02-second {
    right: 0;
    width: calc((403 / 652) * 100%); }
  .product__heading-03 {
    position: absolute;
    top: 0;
    right: 0;
    width: calc((239 / 750) * 100%); }
    @media screen and (min-width: 768px) {
      .product__heading-03 {
        right: calc((-86 / 950) * 100%);
        width: calc((360 / 950) * 100%); } }
  .product__heading-03-img {
    aspect-ratio: 239/286; }
    @media screen and (min-width: 768px) {
      .product__heading-03-img {
        aspect-ratio: 360/322; } }
  .product__heading-lead {
    width: calc((604 / 750) * 100%);
    margin-inline: auto;
    margin-top: calc((43 / 750) * 100%); }
    @media screen and (min-width: 768px) {
      .product__heading-lead {
        width: calc((613 / 950) * 100%);
        margin-top: calc((37 / 950) * 100%); } }
  .product__cardboard {
    margin-top: calc((45 / 750) * 100%); }
    @media screen and (min-width: 768px) {
      .product__cardboard {
        margin-top: min(3.157%, 30px); } }
  .product__bottom {
    margin-top: calc((46 / 750) * 100%); }
    @media screen and (min-width: 768px) {
      .product__bottom {
        margin-top: min(5.263%, 50px); } }
  .product__layout {
    padding-inline: calc((58.5 / 750) * 100%); }
    @media screen and (min-width: 768px) {
      .product__layout {
        max-width: 1076px;
        padding-inline: 0;
        margin-inline: auto; } }
  .product__list-heading {
    width: calc((454 / 750) * 100%);
    margin-block: 0;
    margin-inline: auto; }
    @media screen and (min-width: 768px) {
      .product__list-heading {
        width: calc((456 / 1100) * 100%); } }
  .product__product-list {
    margin-top: calc((36 / 750) * 100%); }
    @media screen and (min-width: 768px) {
      .product__product-list {
        margin-top: min(3.789%, 36px); } }
  .product__note {
    margin-top: calc((76 / 750) * 100%);
    font-size: 1.86667vw;
    font-weight: bold;
    color: #171c61;
    text-align: center; }
    @media screen and (min-width: 768px) {
      .product__note {
        margin-top: 78px;
        font-size: 11px; } }

.cardboard {
  aspect-ratio: 750/757;
  background: url("/brand/kaitori/images/product-bg_sp.png") center/cover no-repeat; }
  @media screen and (min-width: 768px) {
    .cardboard {
      aspect-ratio: unset;
      background: url("/brand/kaitori/images/product-bg_pc.png") center/cover no-repeat; } }
  .cardboard__layout {
    width: 100%;
    height: 100%; }
    @media screen and (min-width: 768px) {
      .cardboard__layout {
        max-width: 950px;
        aspect-ratio: 950/691;
        margin-inline: auto; } }
  .cardboard__content {
    position: relative;
    width: 100%;
    height: 100%; }
  .cardboard__cardboard {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100%;
    aspect-ratio: 864/326;
    background: url("/brand/kaitori/images/product-cardboard_sp.png") center/cover no-repeat;
    transform: translateX(-50%); }
    @media screen and (min-width: 768px) {
      .cardboard__cardboard {
        width: calc((862 / 950) * 100%);
        background: url("/brand/kaitori/images/product-cardboard_pc.png") center/cover no-repeat; } }
  .cardboard__items {
    position: relative;
    width: 100%;
    aspect-ratio: 750/521;
    overflow: hidden; }
    @media screen and (min-width: 768px) {
      .cardboard__items {
        aspect-ratio: 950/425; } }
  .cardboard__item {
    position: absolute;
    bottom: 0;
    left: 0; }
  .cardboard__item--hobby {
    bottom: calc((72 / 520) * 100%);
    left: calc((503 / 750) * 100%);
    width: calc((167 / 750) * 100%); }
    .cardboard__item--hobby img {
      aspect-ratio: 167/279; }
    @media screen and (min-width: 768px) {
      .cardboard__item--hobby {
        bottom: calc((75 / 425) * 100%);
        left: calc((572 / 950) * 100%);
        width: calc((166 / 950) * 100%); }
        .cardboard__item--hobby img {
          aspect-ratio: 166/257; } }
  .cardboard__item--game {
    bottom: calc((185 / 520) * 100%);
    left: calc((36 / 750) * 100%);
    width: calc((190 / 750) * 100%); }
    .cardboard__item--game img {
      aspect-ratio: 190/164; }
    @media screen and (min-width: 768px) {
      .cardboard__item--game {
        bottom: calc((152 / 425) * 100%);
        left: calc((132 / 950) * 100%);
        width: calc((198 / 950) * 100%); }
        .cardboard__item--game img {
          aspect-ratio: 198/164; } }
  .cardboard__item--book {
    bottom: calc((-38 / 520) * 100%);
    left: calc((19 / 750) * 100%);
    width: calc((291 / 750) * 100%); }
    .cardboard__item--book img {
      aspect-ratio: 291/259; }
    @media screen and (min-width: 768px) {
      .cardboard__item--book {
        bottom: calc((-53 / 425) * 100%);
        left: calc((96 / 950) * 100%);
        width: calc((287 / 950) * 100%); }
        .cardboard__item--book img {
          aspect-ratio: 287/255; } }
  .cardboard__item--clothing {
    bottom: calc((70 / 520) * 100%);
    left: calc((237 / 750) * 100%);
    width: calc((315 / 750) * 100%); }
    .cardboard__item--clothing img {
      aspect-ratio: 315/269; }
    @media screen and (min-width: 768px) {
      .cardboard__item--clothing {
        bottom: calc((54 / 425) * 100%);
        left: calc((301 / 950) * 100%);
        width: calc((330 / 950) * 100%); }
        .cardboard__item--clothing img {
          aspect-ratio: 330/270; } }
  .cardboard__item--cd {
    bottom: calc((-55 / 520) * 100%);
    left: calc((340 / 750) * 100%);
    width: calc((255 / 750) * 100%); }
    .cardboard__item--cd img {
      aspect-ratio: 255/272; }
    @media screen and (min-width: 768px) {
      .cardboard__item--cd {
        bottom: calc((-44 / 425) * 100%);
        left: calc((448 / 950) * 100%);
        width: calc((198 / 950) * 100%); }
        .cardboard__item--cd img {
          aspect-ratio: 198/238; } }
  .cardboard__item--cards {
    bottom: calc((-37 / 520) * 100%);
    left: calc((181 / 750) * 100%);
    width: calc((256 / 750) * 100%); }
    .cardboard__item--cards img {
      aspect-ratio: 256/202; }
    @media screen and (min-width: 768px) {
      .cardboard__item--cards {
        bottom: calc((-30 / 425) * 100%);
        left: calc((321 / 950) * 100%);
        width: calc((189 / 950) * 100%); }
        .cardboard__item--cards img {
          aspect-ratio: 189/143; } }
  .cardboard__item--electronics {
    bottom: calc((-24 / 520) * 100%);
    left: calc((526 / 750) * 100%);
    width: calc((181 / 750) * 100%); }
    .cardboard__item--electronics img {
      aspect-ratio: 181/249; }
    @media screen and (min-width: 768px) {
      .cardboard__item--electronics {
        bottom: calc((-44 / 425) * 100%);
        left: calc((606 / 950) * 100%);
        width: calc((166 / 950) * 100%); }
        .cardboard__item--electronics img {
          aspect-ratio: 166/246; } }
  .cardboard__item--mobile {
    bottom: calc((182 / 520) * 100%);
    left: calc((174 / 750) * 100%);
    width: calc((159 / 750) * 100%); }
    .cardboard__item--mobile img {
      aspect-ratio: 159/178; }
    @media screen and (min-width: 768px) {
      .cardboard__item--mobile {
        bottom: calc((182 / 425) * 100%);
        left: calc((271 / 950) * 100%);
        width: calc((129 / 950) * 100%); }
        .cardboard__item--mobile img {
          aspect-ratio: 129/161; } }

.product-list {
  display: flex;
  flex-wrap: wrap;
  gap: 14.5px;
  justify-content: center;
  padding: 0;
  list-style: none; }
  @media screen and (min-width: 768px) {
    .product-list {
      gap: 24px; } }
  .product-list__item {
    flex: 0 1 calc((100% / 3) - (24px * 2 / 3)); }
    @media screen and (min-width: 768px) {
      .product-list__item {
        flex: 0 1 calc((100% / 6) - (24px * 5 / 6)); } }
  .product-list__link:hover {
    filter: brightness(1.5); }
  .product-list__link--pointer-none {
    pointer-events: none; }

/** -------------------------------------------------
 * youtuber
---------------------------------------------------- **/
.youtuber-section {
  padding: 55px 0 65px;
  background-color: #e43828; }
  @media screen and (min-width: 768px) {
    .youtuber-section {
      padding: 90px 0 100px;
      text-align: center; } }
  .youtuber-section__title {
    margin: 0;
    text-align: center; }
    .youtuber-section__title img {
      width: 573px; }
      @media screen and (max-width: 768px) {
        .youtuber-section__title img {
          width: 77.86667vw; } }
  .youtuber-section__lead {
    margin-block: 25px 0;
    text-align: center; }
    @media screen and (min-width: 768px) {
      .youtuber-section__lead {
        margin-top: 45px; } }
    .youtuber-section__lead img {
      width: 82%; }
      @media screen and (min-width: 768px) {
        .youtuber-section__lead img {
          width: 628px; } }

.youtuber-movie-layout {
  display: inline-block;
  width: 100%;
  margin-top: 36px; }
  @media screen and (min-width: 768px) {
    .youtuber-movie-layout {
      max-width: 680px;
      margin-top: 68px; } }
  .youtuber-movie-layout__img {
    float: left;
    text-align: center;
    flex-shrink: 0; }
    @media screen and (min-width: 768px) {
      .youtuber-movie-layout__img {
        width: 312px;
        margin-right: 24px; } }
    @media screen and (max-width: 768px) {
      .youtuber-movie-layout__img {
        width: 52.8vw;
        margin-right: 2.13333vw; } }
  .youtuber-movie-layout__text {
    position: relative;
    padding-top: 4%;
    margin-block: 2.7%;
    text-align: left; }
    @media screen and (max-width: 768px) {
      .youtuber-movie-layout__text {
        display: flex;
        flex-direction: column;
        margin-block: 0;
        padding-top: 7%; } }
    @media screen and (max-width: 768px) {
      .youtuber-movie-layout__text--kson {
        width: 23.86667vw; } }
    .youtuber-movie-layout__text--kson img {
      width: 156px; }

.youtuber-movie-text {
  margin-block: 12px 0;
  font-size: 12px;
  line-height: 2;
  color: #fff; }
  @media screen and (min-width: 768px) {
    .youtuber-movie-text {
      font-size: 13px;
      text-align: left; } }

.contents-layout {
  max-width: 884px;
  padding-right: 10.66667vw;
  padding-left: 10.66667vw;
  margin-right: auto;
  margin-left: auto; }
  @media screen and (min-width: 768px) {
    .contents-layout {
      padding-right: 20px;
      padding-left: 20px; } }
  @media screen and (max-width: 768px) {
    .contents-layout--large {
      padding-right: 2.66667vw;
      padding-left: 2.66667vw; } }

/** -------------------------------------------------
 * gallery
---------------------------------------------------- **/
.gallery {
  position: relative;
  padding-top: 14.26667vw;
  padding-bottom: 15.06667vw;
  background: url(/brand/kaitori/images/gallery-bg_sp.png) center 0 no-repeat;
  background-size: cover; }
  @media screen and (min-width: 768px) {
    .gallery {
      padding-top: 44px;
      padding-bottom: 40px;
      background-image: url(/brand/kaitori/images/gallery-bg_pc.png); } }
  @media screen and (min-width: 768px) {
    .gallery__layout {
      max-width: 618px;
      margin-inline: auto; } }
  .gallery__heading {
    width: calc((334 / 750) * 100%);
    margin-block: 0;
    margin-inline: auto;
    line-height: 0; }
    @media screen and (min-width: 768px) {
      .gallery__heading {
        width: calc((334 / 618) * 100%);
        text-align: center; } }
  .gallery__youtube-lists {
    padding-inline: calc((185.5 / 750) * 100%);
    margin-top: calc((57 / 750) * 100%); }
    @media screen and (min-width: 768px) {
      .gallery__youtube-lists {
        padding-inline: 0;
        margin-top: 33px; } }

.youtube-lists {
  display: flex;
  flex-wrap: wrap;
  gap: 3.86667vw;
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none; }
  @media screen and (min-width: 768px) {
    .youtube-lists {
      display: flex;
      flex-wrap: wrap;
      gap: 36px; } }
  .youtube-lists__item {
    position: relative;
    width: 100%;
    max-width: 380px;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.72s cubic-bezier(0.16, 0.05, 0, 1); }
    @media screen and (min-width: 768px) {
      .youtube-lists__item {
        flex: 0 1 calc(50% - 18px); } }
  .youtube-lists__item:before {
    position: absolute;
    display: block;
    pointer-events: none;
    content: ''; }
    @media screen and (min-width: 768px) {
      .youtube-lists__item:before {
        width: 97px;
        height: 36px; } }
  .youtube-lists__item--1:before {
    right: -10.4vw;
    bottom: 4vw;
    width: 22vw;
    height: 8.13333vw;
    background: url("/brand/kaitori/images/gallery-shape-01.png") center/100% no-repeat; }
    @media screen and (min-width: 768px) {
      .youtube-lists__item--1:before {
        right: auto;
        bottom: 96px;
        left: -45px;
        width: 97px;
        height: 36px;
        background: url("/brand/kaitori/images/gallery-shape-01.png") center/100% no-repeat; } }
  .youtube-lists__item--2:before {
    bottom: 17.06667vw;
    left: -8vw;
    width: 17.06667vw;
    height: 6.4vw;
    background: url("/brand/kaitori/images/gallery-shape-02.png") center/100% no-repeat; }
    @media screen and (min-width: 768px) {
      .youtube-lists__item--2:before {
        right: auto;
        bottom: 42px;
        left: -4px;
        width: 97px;
        height: 36px;
        background: url("/brand/kaitori/images/gallery-shape-02.png") center/100% no-repeat; } }
  .youtube-lists__item--3:before {
    right: -10.4vw;
    bottom: 4vw;
    width: 22vw;
    height: 8.13333vw;
    background: url("/brand/kaitori/images/gallery-shape-01.png") center/100% no-repeat; }
    @media screen and (min-width: 768px) {
      .youtube-lists__item--3:before {
        right: -6px;
        bottom: 34px;
        left: auto;
        width: 97px;
        height: 36px;
        background: url("/brand/kaitori/images/gallery-shape-02.png") center/100% no-repeat; } }
  .youtube-lists__item--4:before {
    bottom: 17.06667vw;
    left: -8vw;
    width: 17.06667vw;
    height: 6.4vw;
    background: url("/brand/kaitori/images/gallery-shape-02.png") center/100% no-repeat; }
    @media screen and (min-width: 768px) {
      .youtube-lists__item--4:before {
        right: -47px;
        bottom: 34px;
        left: auto;
        width: 97px;
        height: 36px;
        background: url("/brand/kaitori/images/gallery-shape-01.png") center/100% no-repeat; } }

/** -------------------------------------------------
 * detour
---------------------------------------------------- **/
.yorimichi {
  position: relative;
  padding-top: 5.2vw;
  padding-bottom: 7.2vw;
  background-color: #171c60; }
  @media screen and (min-width: 768px) {
    .yorimichi {
      padding-block: 52px 118px; } }
  @media screen and (min-width: 768px) {
    .yorimichi__layout {
      max-width: 778px;
      margin-inline: auto; } }
  .yorimichi__yorimichi-title {
    width: 51.2vw;
    margin-block: 0;
    margin-inline: auto; }
    @media screen and (min-width: 768px) {
      .yorimichi__yorimichi-title {
        width: 384px; } }
  .yorimichi__content {
    width: 62.26667vw;
    margin-inline: auto;
    margin-top: 4.26667vw; }
    @media screen and (min-width: 768px) {
      .yorimichi__content {
        display: flex;
        gap: 33px;
        align-items: flex-end;
        width: 100%;
        margin-top: 35px; } }
  .yorimichi__btn {
    width: 100%; }
  .yorimichi__btn + .yorimichi__btn {
    margin-top: 3.73333vw; }
    @media screen and (min-width: 768px) {
      .yorimichi__btn + .yorimichi__btn {
        margin-top: 0; } }

.yorimichi-title {
  position: relative;
  text-align: center; }
  .yorimichi-title__heading {
    position: relative;
    display: inline-block;
    width: 100%;
    aspect-ratio: 384/97;
    margin-block: 0;
    margin-inline: auto; }
  .yorimichi-title__img-01, .yorimichi-title__img-02 {
    position: absolute;
    top: 0; }
  .yorimichi-title__img-01 {
    left: 0;
    width: calc((320 / 384) * 100%); }
  .yorimichi-title__img-02 {
    right: 0;
    width: calc((64 / 384) * 100%); }

/** -------------------------------------------------
 * faq
---------------------------------------------------- **/
.faq {
  padding-block: calc((71 / 750) * 100%);
  background-color: #fbcf05; }
  @media screen and (min-width: 768px) {
    .faq {
      padding-block: 54px 69px; } }
  .faq__heading {
    width: 43.6vw;
    margin-block: 0;
    margin-inline: auto;
    text-align: center; }
    @media screen and (min-width: 768px) {
      .faq__heading {
        width: 366px;
        height: 59px; } }
  .faq__faq-list {
    margin-top: calc((24 / 750) * 100%);
    margin-bottom: 0; }
    @media screen and (min-width: 768px) {
      .faq__faq-list {
        width: 100%;
        max-width: 760px;
        margin-inline: auto;
        margin-top: 24px; } }
  .faq__btn {
    width: calc((333 / 750) * 100%);
    margin-inline: auto;
    margin-top: calc((64 / 750) * 100%); }
    @media screen and (min-width: 768px) {
      .faq__btn {
        width: 373px;
        margin-top: 28px; } }

.faq-list {
  padding-inline: calc((35 / 750) * 100%); }
  @media screen and (min-width: 768px) {
    .faq-list {
      padding-inline: 0; } }
  .faq-list__item {
    width: 100%; }
  .faq-list__item + .faq-list__item {
    margin-top: calc((23 / 680) * 100%); }
    @media screen and (min-width: 768px) {
      .faq-list__item + .faq-list__item {
        margin-top: calc((19 / 760) * 100%); } }
  .faq-list__term {
    position: relative;
    padding-block: calc((20 / 680) * 100%);
    padding-right: calc((70 / 680) * 100%);
    padding-left: calc((76 / 680) * 100%);
    line-height: 0;
    background-color: #e63828; }
    @media screen and (min-width: 768px) {
      .faq-list__term {
        padding-block: calc((17 / 760) * 100%);
        padding-right: calc((79 / 760) * 100%);
        padding-left: calc((85 / 760) * 100%); } }
  .faq-list__term:before {
    position: absolute;
    top: 50%;
    left: calc((18 / 680) * 100%);
    display: block;
    width: calc((33 / 680) * 100%);
    aspect-ratio: 1/1;
    content: '';
    background: url("/brand/kaitori/images/faq-q.png") center/contain no-repeat;
    transform: translateY(-50%); }
    @media screen and (min-width: 768px) {
      .faq-list__term:before {
        left: calc((18 / 760) * 100%);
        width: calc((33 / 760) * 100%); } }
  .faq-list__term:after {
    position: absolute;
    top: 50%;
    right: 2.806%;
    display: block;
    width: 5.169%;
    height: 28.947%;
    content: '';
    background: url("/brand/kaitori/images/faq-arrow.png") center/contain no-repeat;
    transition: transform 0.3s ease;
    transform: translateY(-50%) rotate(0deg); }
    @media screen and (min-width: 768px) {
      .faq-list__term:after {
        right: calc((20 / 760) * 100%);
        width: calc((40 / 760) * 100%);
        height: calc((23 / 68) * 100%); } }
  .faq-list__term-img {
    width: 100%; }
  .faq-list__description {
    position: relative;
    padding-block: 20px;
    padding-right: calc((70 / 680) * 100%);
    padding-left: calc((76 / 680) * 100%);
    margin: 0;
    background-color: #171c60; }
    @media screen and (min-width: 768px) {
      .faq-list__description {
        padding-block: 18px;
        padding-right: calc((79 / 760) * 100%);
        padding-left: calc((85 / 760) * 100%); } }
  .faq-list__description::before {
    position: absolute;
    top: 18px;
    left: calc((18 / 680) * 100%);
    display: block;
    width: calc((30 / 680) * 100%);
    aspect-ratio: 35/34;
    content: '';
    background: url("/brand/kaitori/images/faq-a.png") center/contain no-repeat; }
    @media screen and (min-width: 768px) {
      .faq-list__description::before {
        left: calc((20 / 760) * 100%);
        width: calc((30 / 760) * 100%); } }
  .faq-list__description-text {
    margin-block: 0;
    font-size: 10px;
    font-weight: bold;
    line-height: 1.777;
    color: #fff; }
    @media screen and (min-width: 768px) {
      .faq-list__description-text {
        font-size: 12px;
        line-height: 1.833; } }

.js-accordion-box {
  box-sizing: content-box;
  max-height: 0;
  padding-block: 0;
  overflow: hidden;
  transition: max-height 0.3s ease,
 padding 0.3s ease; }

.js-accordion._open .js-accordion-box {
  padding-block: 20px; }

.js-accordion._open .faq-list__term::after {
  transform: translateY(-50%) rotate(-180deg); }

/** -------------------------------------------------
 * copy
---------------------------------------------------- **/
.copy {
  padding-block: 1.33333vw;
  background-color: #fbcf05; }
  @media screen and (min-width: 768px) {
    .copy {
      padding-block: 20px; } }
  .copy__img {
    width: calc((471 / 760) * 100%);
    margin-inline: auto;
    line-height: 0; }
    @media screen and (min-width: 768px) {
      .copy__img {
        width: 378px; } }

/* Modal
--------------- */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden auto;
  visibility: hidden;
  background-color: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: 0.3s; }

.has-modal .modal {
  visibility: visible;
  opacity: 1; }

.modal-container {
  position: relative;
  width: 90%;
  margin: auto; }
  @media screen and (min-width: 768px) {
    .modal-container {
      width: 700px; } }

.modal-close {
  position: absolute;
  top: -35px;
  right: 0;
  display: block;
  width: 20px;
  height: 20px;
  cursor: pointer; }
  @media screen and (min-width: 768px) {
    .modal-close {
      top: -55px;
      width: 40px;
      height: 40px; } }

.modal-content {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden; }
  .modal-content iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

.youtube {
  pointer-events: none;
  opacity: 0; }
  .youtube.is-active {
    pointer-events: visible;
    opacity: 1; }

/* .product-modal
--------------- */
.product-modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden auto;
  visibility: hidden;
  background-color: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: 0.3s; }

.has-product-modal .product-modal {
  visibility: visible;
  opacity: 1; }

.product-modal-container {
  position: relative;
  width: 500px;
  max-width: 90%;
  margin: auto; }
  @media screen and (min-width: 768px) {
    .product-modal-container {
      width: 480px;
      height: 573px;
      margin: auto; } }

.product-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 10;
  width: 11%;
  max-width: 60px;
  height: 11%;
  max-height: 60px;
  cursor: pointer; }

.product-modal-content {
  position: relative;
  height: 0;
  padding-bottom: 120%; }

.product-modal-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  max-width: 500px;
  opacity: 0;
  transform: translate(-50%, -50%); }
  @media screen and (min-width: 768px) {
    .product-modal-item {
      max-width: 480px; } }
  .product-modal-item.is-active {
    opacity: 1; }

/* Utility
--------------- */
.display-pc {
  display: none; }
  @media screen and (min-width: 768px) {
    .display-pc {
      display: block; } }

.display-sp {
  display: block; }
  @media screen and (min-width: 768px) {
    .display-sp {
      display: none; } }

.text-uppercase {
  text-transform: uppercase; }

@media screen and (min-width: 768px) {
  .layout-spacing {
    padding-inline: 24px; } }