@charset "UTF-8";
/**
  スクロール位置で表示アニメーション
 **/
/* 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; }

@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; }

/**
  yorimichi-mvアニメーション
 **/
@keyframes yorimichi-kakimaru {
  0%,
  30% {
    opacity: 0; }
  40% {
    opacity: 1;
    right: -100px;
    bottom: -300px; }
  70%,
  100% {
    right: 3%;
    bottom: -30%; } }

@keyframes yorimichi-ano {
  0%,
  10% {
    opacity: 0; }
  20% {
    opacity: 1;
    left: -200px;
    bottom: -500px; }
  60%,
  100% {
    left: 3%;
    bottom: -52%; } }

@keyframes yorimichi-closed-door {
  0% {
    opacity: 1; }
  33%,
  100% {
    opacity: 0; } }

@keyframes yorimichi-opened-door {
  0% {
    opacity: 0; }
  33%,
  100% {
    opacity: 1; } }

/**
  product-list
 **/
@keyframes slideIn {
  0% {
    transform: translateX(180px);
    opacity: 0; }
  100% {
    transform: translateX(0); }
  40%,
  100% {
    opacity: 1; } }

.product-list.is-animated .product-list__item {
  animation: slideIn 0.3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  opacity: 0; }
  .product-list.is-animated .product-list__item--1 {
    animation-delay: 0.1s; }
  .product-list.is-animated .product-list__item--2 {
    animation-delay: 0.2s; }
  .product-list.is-animated .product-list__item--3 {
    animation-delay: 0.3s; }
  .product-list.is-animated .product-list__item--4 {
    animation-delay: 0.4s; }
  .product-list.is-animated .product-list__item--5 {
    animation-delay: 0.5s; }
  .product-list.is-animated .product-list__item--6 {
    animation-delay: 0.6s; }
  .product-list.is-animated .product-list__item--7 {
    animation-delay: 0.7s; }
  .product-list.is-animated .product-list__item--8 {
    animation-delay: 0.8s; }

/* Foundation
--------------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 14vw; }

body {
  padding: 0;
  margin: 0;
  font-family: 'Noto Sans JP', 'ヒラギノ角ゴ Pro W3', 'メイリオ', sans-serif;
  line-height: 1.5;
  color: #171c61; }

.main {
  overflow: hidden; }
  .main--yellow {
    background-color: #fbcf05; }

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

/* Reset
--------------- */
* {
  box-sizing: border-box; }

ul[class],
ol[class] {
  padding-right: 0;
  padding-left: 0;
  list-style: none; }

picture {
  position: relative;
  z-index: 1;
  display: block; }

figure {
  display: block;
  margin: 0; }

/* 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; }

/* Layout
--------------- */
.base-layout {
  padding-right: 5.33333vw;
  padding-left: 5.33333vw;
  margin-right: auto;
  margin-left: auto; }
  @media screen and (min-width: 768px) {
    .base-layout {
      max-width: 580px;
      padding-right: 20px;
      padding-left: 20px; } }

.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--mini {
      padding-right: 13.33333vw;
      padding-left: 13.33333vw; } }
  @media screen and (max-width: 768px) {
    .contents-layout--large {
      padding-right: 2.66667vw;
      padding-left: 2.66667vw; } }
  .contents-layout--center {
    text-align: center; }

.lead-section {
  position: relative;
  z-index: 1;
  padding: 10.13333vw 0 0;
  background-color: #fdd118;
  overflow: hidden; }
  @media screen and (min-width: 768px) {
    .lead-section {
      padding: 98px 0 0; } }
  .lead-section__inner {
    position: relative; }
    @media screen and (min-width: 768px) {
      .lead-section__inner {
        width: 906px;
        padding: 0 20px 280px;
        margin: 0 auto; } }
  .lead-section__text {
    width: 70%;
    margin: auto; }
    @media screen and (min-width: 768px) {
      .lead-section__text {
        margin: 0; } }
  .lead-section .main-bnr-grid {
    margin: 0 0 60px; }
  .lead-section__ano {
    width: 69.2vw;
    margin: 13px auto -19.73333vw; }
    @media screen and (min-width: 768px) {
      .lead-section__ano {
        position: absolute;
        bottom: -30px;
        right: -90px;
        width: auto;
        margin: 0; } }

.apl-section {
  background-color: #e63828; }
  @media screen and (min-width: 768px) {
    .apl-section {
      padding-bottom: 100px; } }

.download-section {
  padding-bottom: 14.13333vw;
  background-color: #171c61; }
  @media screen and (min-width: 768px) {
    .download-section {
      padding-bottom: 96px; } }
  .download-section--oblique {
    position: relative;
    padding-top: 10.66667vw; }
    .download-section--oblique::before {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      padding: 50% 0;
      content: '';
      background-color: #171c61;
      transform: skewY(-8deg);
      transform-origin: bottom left; }
    @media screen and (min-width: 768px) {
      .download-section--oblique {
        padding-top: 0; } }
    .download-section--oblique .download-title {
      padding-bottom: 6.13333vw;
      text-align: center;
      transform: translateY(0); }
      @media screen and (min-width: 768px) {
        .download-section--oblique .download-title {
          padding-bottom: 0;
          margin-bottom: 0;
          text-align: center;
          transform: translateY(-100px); }
          .download-section--oblique .download-title + * {
            margin-top: -80px; } }
    @media screen and (min-width: 768px) {
      .download-section--oblique .app-grid {
        margin-top: -30px; } }

.movie-section {
  position: relative;
  padding: 12.66667vw 0 12vw;
  background: url(/brand/special/img/cm-bg_sp.png) center 0 repeat;
  background-size: contain; }
  @media screen and (min-width: 768px) {
    .movie-section {
      padding: 90px 0 140px;
      background: url(/brand/special/img/cm-bg_pc.png) center 0 no-repeat;
      background-size: cover; } }
  @media screen and (min-width: 768px) {
    .movie-section .contents-layout {
      max-width: 947px;
      padding: 0; } }

.yorimichi-section {
  position: relative;
  padding: 10.66667vw 0;
  background-color: #171c61; }
  @media screen and (min-width: 768px) {
    .yorimichi-section {
      padding: 94px 0 148px; } }
  .yorimichi-section .contents-layout {
    padding-right: 0;
    padding-left: 0; }

/* Header
--------------- */
.header {
  padding: 9.33333vw 0 4vw;
  text-align: center;
  background-color: #fbcf05; }
  @media screen and (min-width: 768px) {
    .header {
      padding: 70px 0 30px; } }
  .header__logo {
    display: inline-block;
    text-align: center; }
    @media screen and (min-width: 768px) {
      .header__logo img {
        width: 250px; } }

.header-logo {
  width: 157px; }

/* Nav
--------------- */
.nav {
  background: #e43828;
  position: fixed;
  top: 0;
  z-index: 1000;
  width: 100vw; }

.nav-list {
  display: flex;
  margin: 0;
  border-bottom: 0.2em solid #fff;
  align-items: flex-end; }
  .nav-list__item {
    width: calc(100% / 4);
    height: fit-content;
    position: relative; }
    .nav-list__item::before {
      content: '';
      width: 0.53333vw;
      height: 68%;
      background-color: #fff;
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%); }
    .nav-list__item:last-child::before {
      display: none; }
  .nav-list__link {
    padding: 7% 0;
    font-size: 2.4vw;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center; }
    .nav-list__link:has(.nav-list__img--cm) {
      gap: 4px; }
  .nav-list__img--about {
    width: 2.13333vw; }
  .nav-list__img--product {
    width: 8.13333vw; }
  .nav-list__img--movie {
    width: 8.13333vw; }
  .nav-list__img--cm {
    width: 8.53333vw; }

/* MV
--------------- */
.main-visual-layout {
  position: relative;
  padding-bottom: 4vw;
  background-image: url(/brand/special/img/mv_bg_sp_header.png), url(/brand/special/img/mv_bg_sp_body.png);
  background-repeat: no-repeat, repeat-y;
  background-size: 100% auto; }
  @media screen and (min-width: 768px) {
    .main-visual-layout {
      padding-bottom: 35px; } }
  .main-visual-layout::before {
    position: absolute;
    bottom: -5.33333vw;
    left: 50%;
    width: 1px;
    height: 30.13333vw;
    content: '';
    background-color: #fbcf05; }
    @media screen and (min-width: 768px) {
      .main-visual-layout::before {
        bottom: -30px;
        height: 190px; } }

.mv-title {
  padding-top: 14.13333vw;
  margin: 0; }
  @media screen and (min-width: 768px) {
    .mv-title {
      padding-top: 88px; } }
  .mv-title__item-1 {
    width: 82.26667vw;
    margin-left: -2.66667vw; }
    @media screen and (min-width: 768px) {
      .mv-title__item-1 {
        width: 513px;
        margin-left: -37px; } }
  .mv-title__item-2 {
    padding-left: 16.8vw;
    margin-top: -5.33333vw;
    text-align: right;
    transform: translateX(2.66667vw); }
    @media screen and (min-width: 768px) {
      .mv-title__item-2 {
        width: 466px;
        padding-left: 0;
        margin-top: -34px;
        transform: translateX(84px); } }
  .mv-title__item-3 {
    width: 72.53333vw;
    margin: 0 auto; }
    @media screen and (min-width: 768px) {
      .mv-title__item-3 {
        width: 440px; } }

.mv-arrow {
  position: relative;
  width: 61.86667vw;
  margin: 8vw auto 0;
  transform-origin: center bottom;
  animation-name: bounce;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-fill-mode: both; }
  @media screen and (min-width: 768px) {
    .mv-arrow {
      width: 371px;
      margin-top: 47px; } }

.mv-apl-bnr {
  position: relative;
  width: 62vw;
  margin: 6.66667vw auto 0; }
  @media screen and (min-width: 768px) {
    .mv-apl-bnr {
      width: 371px;
      margin-top: 40px; } }

.main-yorimichi-layout {
  background-color: #e63828;
  background-size: cover; }
  @media screen and (min-width: 768px) {
    .main-yorimichi-layout {
      height: 866px; } }
  .main-yorimichi-layout__bnr {
    position: absolute;
    bottom: 6vw;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2; }
    @media screen and (min-width: 768px) {
      .main-yorimichi-layout__bnr {
        bottom: 45px; } }
    .main-yorimichi-layout__bnr a {
      width: 68.93333vw;
      margin: 0 auto; }
      @media screen and (min-width: 768px) {
        .main-yorimichi-layout__bnr a {
          width: auto; } }

.main-yorimichi-contents-layout {
  position: relative; }

/* slick slider */
.main-yorimichi-slider {
  margin: 0;
  transition-timing-function: linear; }
  .main-yorimichi-slider__item {
    width: 488px; }

.main-yorimichi-pagenation {
  display: flex;
  gap: 8px;
  position: absolute;
  bottom: 39.06667vw;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  margin: 0; }
  @media screen and (min-width: 768px) {
    .main-yorimichi-pagenation {
      bottom: 180px; } }
  .main-yorimichi-pagenation__item {
    display: flex;
    align-items: center; }
    .main-yorimichi-pagenation__item button {
      padding: 0;
      width: 2.13333vw;
      height: 2.13333vw;
      position: relative;
      background: transparent;
      border: 2px solid #fff;
      border-radius: 50%;
      cursor: pointer; }
      @media screen and (min-width: 768px) {
        .main-yorimichi-pagenation__item button {
          width: 10px;
          height: 10px; } }
      .main-yorimichi-pagenation__item button.slick-active {
        background: #fff; }

.main-yorimichi-text {
  animation-name: bound-text;
  animation-duration: 0.8s; }

.main-yorimichi-bnr {
  width: 100vw; }
  @media screen and (min-width: 768px) {
    .main-yorimichi-bnr {
      width: auto; } }
  .main-yorimichi-bnr .note-lists--center {
    margin-top: 6px; }

.main-image {
  position: relative;
  align-self: center;
  width: 498px;
  height: 716px; }
  @media screen and (max-width: 768px) {
    .main-image {
      width: 95vw;
      height: 100vw; } }
  .main-image__background {
    opacity: 0;
    position: absolute;
    z-index: 1;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat; }
    @media screen and (max-width: 768px) {
      .main-image__background {
        top: -36.5%;
        left: 50%;
        width: 59%;
        height: 80%;
        transform: translate(-50%, 50.5%);
        background-image: url(/brand/special/img/mv_shop_bg_sp.png);
        -webkit-mask-image: url(/brand/special/img/mv_shop_mask_sp.png);
        mask-image: url(/brand/special/img/mv_shop_mask_sp.png); } }
    @media screen and (min-width: 768px) {
      .main-image__background {
        left: 15px;
        bottom: 50%;
        width: 355px;
        height: 522px;
        transform: translateY(51.5%);
        background-image: url(/brand/special/img/mv_shop_bg_pc.png);
        -webkit-mask-image: url(/brand/special/img/mv_shop_mask_pc.png);
        mask-image: url(/brand/special/img/mv_shop_mask_pc.png); } }
    .main-image__background.is-animated {
      opacity: 1; }
  .main-image__kakimaru {
    position: absolute;
    z-index: 2; }
    @media screen and (max-width: 768px) {
      .main-image__kakimaru {
        width: 30%;
        max-width: 139px; } }
    .main-image__kakimaru.is-animated {
      animation-name: yorimichi-kakimaru;
      animation-duration: 3s;
      animation-fill-mode: forwards; }
  .main-image__ano {
    position: absolute;
    z-index: 2; }
    @media screen and (max-width: 768px) {
      .main-image__ano {
        width: 55%;
        max-width: 263px; } }
    .main-image__ano.is-animated {
      animation-name: yorimichi-ano;
      animation-duration: 3s;
      animation-fill-mode: forwards; }
  .main-image__closed-door, .main-image__opened-door {
    position: absolute;
    background-repeat: no-repeat;
    background-position: left bottom;
    animation-duration: 4s;
    animation-fill-mode: forwards; }
  .main-image__closed-door {
    z-index: 5; }
    @media screen and (max-width: 768px) {
      .main-image__closed-door {
        left: 50%;
        top: -40%;
        width: 63%;
        transform: translate(-50%, 50%); } }
    @media screen and (min-width: 768px) {
      .main-image__closed-door {
        bottom: 50%;
        min-width: 390px;
        min-height: 543px;
        transform: translateY(calc(50% - 3px)); } }
    .main-image__closed-door.is-animated {
      animation-name: yorimichi-closed-door;
      animation-duration: 3s;
      animation-fill-mode: forwards; }
  .main-image__opened-door {
    opacity: 0;
    z-index: 4; }
    @media screen and (max-width: 768px) {
      .main-image__opened-door {
        left: 60%;
        top: -57%;
        width: 80%;
        transform: translate(-50%, 50%); } }
    @media screen and (min-width: 768px) {
      .main-image__opened-door {
        bottom: 50%;
        min-width: 498px;
        transform: translateY(50%); } }
    .main-image__opened-door.is-animated {
      animation-name: yorimichi-opened-door;
      animation-duration: 3s;
      animation-fill-mode: forwards; }
  .main-image__thumbs-up {
    opacity: 0;
    position: absolute;
    z-index: 4;
    transform: rotate(-5deg); }
    @media screen and (max-width: 768px) {
      .main-image__thumbs-up {
        right: 7%;
        top: 2%;
        width: 55%; } }
    @media screen and (min-width: 768px) {
      .main-image__thumbs-up {
        left: 170px;
        top: 88px;
        width: 273px; } }
    .main-image__thumbs-up.is-animated {
      opacity: 1; }

.main-bnr-grid {
  display: grid;
  gap: 4vw;
  margin-top: 4vw; }
  @media screen and (min-width: 768px) {
    .main-bnr-grid {
      text-align: center; } }

/* 固定ボタン
--------------- */
.fixed-main-bnr {
  position: fixed;
  bottom: 20px;
  left: 50%;
  z-index: 10;
  width: 100%;
  padding-right: 10.66667vw;
  padding-left: 10.66667vw;
  transform: translateX(-50%); }
  @media screen and (min-width: 768px) {
    .fixed-main-bnr {
      display: none; } }

/* Contents
--------------- */
.thumbs-up {
  position: absolute;
  bottom: 25.46667vw;
  right: 4.53333vw;
  background: url(/brand/special/img/thumbs-up-bg_sp.png) top center no-repeat;
  background-size: cover;
  width: 46.93333vw; }
  @media screen and (min-width: 768px) {
    .thumbs-up {
      bottom: 35px;
      right: auto;
      left: 220px;
      margin: 0;
      background-image: url(/brand/special/img/thumbs-up-bg_pc.png);
      width: auto; } }

.apl-item {
  position: relative;
  padding: 9.33333vw 0 13.33333vw; }
  @media screen and (min-width: 768px) {
    .apl-item {
      padding: 60px 0 70px; } }
  .apl-item + .apl-item::before {
    position: absolute;
    top: -4vw;
    left: 0;
    display: inline-block;
    width: 100%;
    height: 6vw;
    content: '';
    background: url(/brand/special/img/apl_bg_allow_sp.png);
    background-repeat: no-repeat;
    background-size: 100% auto; }
    @media screen and (min-width: 768px) {
      .apl-item + .apl-item::before {
        top: -20px;
        height: 43px;
        background-image: url(/brand/special/img/apl_bg_allow_pc.png); } }

.apl-heading {
  position: relative;
  padding-bottom: 1.86667vw;
  margin: 0; }
  .apl-heading__main-text {
    position: absolute;
    top: 8vw;
    right: 0;
    width: 81.81818%; }
    @media screen and (min-width: 768px) {
      .apl-heading__main-text {
        top: 50px;
        width: 80.2974%; } }

.note-lists {
  position: relative;
  font-size: 10px;
  color: #fff; }
  @media screen and (min-width: 768px) {
    .note-lists {
      font-size: 12px; } }
  .note-lists__item {
    padding-left: 1em;
    text-indent: -1em; }
    .note-lists__item:first-child {
      margin-bottom: 7px; }
  .note-lists--center {
    margin: 10px 0 0; }
    .note-lists--center .note-lists__item {
      text-align: center; }
  .note-lists--bold {
    font-weight: bold; }
  .note-lists--dl {
    color: #e53828; }
  .note-lists--apl {
    color: #f9cd05; }

.download-title {
  margin-top: 0;
  margin-right: -10.66667vw;
  margin-left: -10.66667vw;
  transform: translateY(-6.13333vw); }
  @media screen and (min-width: 768px) {
    .download-title {
      margin-right: -20px;
      margin-left: -20px;
      transform: translateY(-70px); } }

.bnr-grid {
  position: relative;
  display: grid;
  gap: 50px;
  justify-content: center; }
  @media screen and (min-width: 768px) {
    .bnr-grid {
      margin-top: 96px; } }
  @media screen and (min-width: 768px) {
    .bnr-grid__item {
      max-width: 417px; } }
  .bnr-grid__item a {
    width: 68.93333vw;
    margin: 0 auto; }
    @media screen and (min-width: 768px) {
      .bnr-grid__item a {
        width: auto; } }
  .bnr-grid--adjustment {
    margin-top: 0; }

.apl-main-title {
  position: relative;
  margin: 0 0 13.33333vw;
  background-color: #171c61; }
  @media screen and (min-width: 768px) {
    .apl-main-title {
      padding: 0 20px;
      margin: 0;
      text-align: center;
      background-color: transparent; }
      .apl-main-title::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 60%;
        content: '';
        background-color: #171c61;
        transform: skewY(-8deg) translateY(-45%); } }
  @media screen and (min-width: 1240px) {
    .apl-main-title::before {
      top: -20%;
      transform: skewY(-8deg) translateY(-50%); } }
  .apl-main-title::after {
    position: absolute;
    bottom: -30%;
    left: 0;
    width: 100%;
    padding: 0 0 30%;
    content: '';
    background-color: #171c61;
    transform: skewY(-8deg);
    transform-origin: bottom left; }
    @media screen and (min-width: 768px) {
      .apl-main-title::after {
        bottom: -2vw;
        padding-bottom: 20vw; } }

.app-grid {
  position: relative;
  display: flex;
  gap: 25px;
  max-width: 710px;
  margin-right: auto;
  margin-left: auto; }
  @media screen and (max-width: 768px) {
    .app-grid {
      display: none; } }

.app-images {
  display: flex;
  gap: 25px; }

.app-grid-text {
  margin: 30px 0 0;
  font-size: 13px;
  color: #fff;
  background: url(/brand/special/img/app_bg_arrow.png) 100% 100% no-repeat; }

.app-note {
  position: relative;
  margin-top: 25px;
  font-size: 12px;
  color: #fff;
  text-align: center; }

.cm-title {
  padding: 0 0 8.8vw;
  margin: 0 auto;
  width: 41.46667vw; }
  @media screen and (min-width: 768px) {
    .cm-title {
      padding-bottom: 80px;
      text-align: center;
      margin: 0;
      width: auto; } }

.youtube-lists {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4vw;
  margin: 0; }
  @media screen and (min-width: 768px) {
    .youtube-lists {
      max-width: 945px;
      margin: 0 auto;
      gap: 35px; } }
  .youtube-lists__item {
    width: 72%;
    max-width: 380px;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.72s cubic-bezier(0.16, 0.05, 0, 1);
    transform: scale(0.95) translate3d(0, 1em, 0); }
    @media screen and (min-width: 768px) {
      .youtube-lists__item {
        padding: 0;
        width: 291px; } }
    .youtube-lists__item.is-animated {
      opacity: 1;
      transform: scale(1) translateZ(0); }

.yorimichi-title {
  display: flex;
  justify-content: center;
  padding-bottom: 5.33333vw;
  margin: 0; }
  @media screen and (min-width: 768px) {
    .yorimichi-title {
      padding-bottom: 57px; } }
  .yorimichi-title img[src*='01'] {
    width: 70.8vw; }
    @media screen and (min-width: 768px) {
      .yorimichi-title img[src*='01'] {
        width: auto; } }
  .yorimichi-title img[src*='02'] {
    width: 14.66667vw; }
    @media screen and (min-width: 768px) {
      .yorimichi-title img[src*='02'] {
        width: auto; } }

[data-movie-id] {
  cursor: pointer; }

.thumbnail {
  position: relative;
  display: block; }

.thumbnail-dot {
  position: absolute;
  top: 50%; }
  .thumbnail-dot--1 {
    top: 40%;
    left: 0;
    transform: translate(-50%, 0); }
    @media screen and (min-width: 768px) {
      .thumbnail-dot--1 {
        top: 85px; } }
    .thumbnail-dot--1 img {
      width: 17.06667vw; }
      @media screen and (min-width: 768px) {
        .thumbnail-dot--1 img {
          width: auto; } }
  .thumbnail-dot--2 {
    top: 37%;
    right: 0;
    transform: translate(50%, 0); }
    @media screen and (min-width: 768px) {
      .thumbnail-dot--2 {
        top: 71px;
        right: -32px;
        transform: none; } }
    .thumbnail-dot--2 img {
      width: 17.06667vw; }
      @media screen and (min-width: 768px) {
        .thumbnail-dot--2 img {
          width: auto; } }
  .thumbnail-dot--3 {
    top: 50%;
    left: 0;
    transform: translate(-50%, 0); }
    @media screen and (min-width: 768px) {
      .thumbnail-dot--3 {
        top: auto;
        right: 0;
        bottom: 30px;
        left: auto;
        transform: translate(50%, 0); } }
    .thumbnail-dot--3 img {
      width: 22vw; }
      @media screen and (min-width: 768px) {
        .thumbnail-dot--3 img {
          width: auto; } }
  .thumbnail-dot--4 {
    top: 65%;
    right: 0;
    transform: translate(50%, 0); }
    @media screen and (min-width: 768px) {
      .thumbnail-dot--4 {
        top: auto;
        right: auto;
        bottom: 30px;
        left: 0;
        transform: translate(-50%, 0); } }
    .thumbnail-dot--4 img {
      width: 17.06667vw; }
      @media screen and (min-width: 768px) {
        .thumbnail-dot--4 img {
          width: auto; } }
  .thumbnail-dot--5 {
    top: 37%;
    left: 0;
    transform: translate(-50%, 0); }
    @media screen and (min-width: 768px) {
      .thumbnail-dot--5 {
        top: 70px;
        left: -32px;
        transform: none; } }
    .thumbnail-dot--5 img {
      width: 22vw; }
      @media screen and (min-width: 768px) {
        .thumbnail-dot--5 img {
          width: auto; } }
  .thumbnail-dot--6 {
    top: 40%;
    right: 0;
    transform: translate(50%, 0); }
    @media screen and (min-width: 768px) {
      .thumbnail-dot--6 {
        top: 75px;
        right: -44px;
        transform: none; } }
    .thumbnail-dot--6 img {
      width: 17.06667vw; }
      @media screen and (min-width: 768px) {
        .thumbnail-dot--6 img {
          width: auto; } }
  .thumbnail-dot--7 {
    top: 64%;
    right: 0;
    transform: translate(50%, 0); }
    @media screen and (min-width: 768px) {
      .thumbnail-dot--7 {
        top: 70px;
        right: auto;
        left: -45px;
        transform: none; } }
    .thumbnail-dot--7 img {
      width: 22vw; }
      @media screen and (min-width: 768px) {
        .thumbnail-dot--7 img {
          width: auto; } }
  .thumbnail-dot--8 {
    top: 40%;
    left: 0;
    transform: translate(-50%, 0); }
    @media screen and (min-width: 768px) {
      .thumbnail-dot--8 {
        top: 143px;
        right: -40px;
        left: auto;
        transform: none; } }
    .thumbnail-dot--8 img {
      width: 17.06667vw; }
      @media screen and (min-width: 768px) {
        .thumbnail-dot--8 img {
          width: auto; } }

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

/* Footer
--------------- */
.footer {
  padding: 20px 0 40px;
  background-color: #fbcf05; }
  .footer__copyright {
    display: block;
    font-size: 10px;
    font-weight: bold;
    text-align: center; }

/* 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%; }

/* youtuber
--------------- */
.youtuber-section {
  padding: 16.53333vw 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; }
    @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: 68.53333vw; }
      @media screen and (min-width: 768px) {
        .youtuber-section__lead img {
          width: 428px; } }

.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 + .youtuber-movie-layout {
    margin-top: 45px; }
    @media screen and (min-width: 768px) {
      .youtuber-movie-layout + .youtuber-movie-layout {
        margin-top: 56px; } }
  .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: 1.86667vw; } }
  .youtuber-movie-layout__text {
    position: relative;
    padding-top: 4%;
    line-height: 1;
    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--kaminari {
        width: 30.4vw; } }
    @media screen and (max-width: 768px) {
      .youtuber-movie-layout__text--ojodesu {
        width: 35.6vw; } }
    @media screen and (max-width: 768px) {
      .youtuber-movie-layout__text--zenopro {
        width: 32.8vw; } }
    @media screen and (max-width: 768px) {
      .youtuber-movie-layout__text--torippy {
        width: 34.13333vw; } }
    @media screen and (max-width: 768px) {
      .youtuber-movie-layout__text--kson {
        width: 23.86667vw; } }
  @media screen and (min-width: 768px) {
    .youtuber-movie-layout:nth-child(2n) .youtuber-movie-layout__img {
      float: right;
      margin-right: 0;
      margin-left: 24px; } }

.youtuber-sub-title {
  margin: 0;
  text-align: left; }
  @media screen and (max-width: 768px) {
    .youtuber-sub-title {
      margin-top: 6%;
      width: 100%; } }

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

/* bnr
--------------- */
.bnr-section {
  padding: 10.66667vw 0;
  background: #171c60; }
  .bnr-section a {
    width: 68.93333vw;
    margin: 0 auto; }
  .bnr-section .note-lists {
    color: #f9cd05;
    margin-top: 17px; }

/* product
--------------- */
.product-section {
  padding: 55px 0 65px;
  background-color: #171c60; }
  @media screen and (min-width: 768px) {
    .product-section {
      padding: 90px 0 100px; } }
  .product-section__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px 12px;
    margin-block: 15px 0; }
  .product-section__note {
    margin-block: 15px 0;
    text-align: center;
    font-size: 13px;
    color: #fefefe; }

.product-text {
  margin: 0;
  display: grid;
  place-items: center; }
  @media screen and (max-width: 768px) {
    .product-text__lead {
      width: 75%; } }
  .product-text__title {
    margin-top: 12px; }
    @media screen and (max-width: 768px) {
      .product-text__title {
        width: 95%; } }
  .product-text__detail {
    margin-top: 5%; }
    @media screen and (max-width: 768px) {
      .product-text__detail {
        width: 75%; } }
    @media screen and (min-width: 768px) {
      .product-text__detail {
        margin-top: 24px; } }

.product-list__item {
  opacity: 0;
  width: calc((100% / 2) - 6px); }
  @media screen and (min-width: 768px) {
    .product-list__item {
      width: calc((100% / 3) - 8px); } }

.product-list__link:hover {
  filter: brightness(1.5); }

.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: 560px;
  max-width: 90%;
  margin: auto; }
  @media screen and (min-width: 768px) {
    .product-modal-container {
      width: 560px;
      height: 668px;
      margin: auto; } }

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

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

.product-modal-item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  width: 100%;
  max-width: 560px; }
  .product-modal-item.is-active {
    opacity: 1; }