@charset "UTF-8";


@media screen and (max-width: 768px) {

  /* ========================================================
  ベース設定
  =========================================================*/
  :root {
    /* カラー */
    --Main: #000;
    --Sub: #443078;
    --Accent: #CC0000;
    --Back: #F2F2F2;
    --grey: #7A7C86;

    /* フォント */
    --Font_sans: YakuHanJP, "Noto Sans JP", sans-serif;
  }
  
  /* レスポンシブ */
  @media screen and (max-width: 425px) {
    .html {
      font-size: calc(100vw / 375 * 16);
    }

    .inner {
      width: 100%;
      max-width: auto;
    }
  }


  /* ========================================================
  共通パーツ
  =========================================================*/
  .forPC {
    display: none;
  }
  
  .forSP {
    display: block;
  }

  .forPC-inline {
    display: none;
  }
  
  .forSP-inline {
    display: inline;
  }
  
  .inner {
    width: 23.4375rem;
    max-width: 23.4375rem;
  }

  a:hover {
    filter: brightness(1);
  }

  /* モーダル */
  dialog a:focus,
  dialog button:focus,
  dialog input:focus,
  dialog select:focus,
  dialog textarea:focus {
    outline: none;
    box-shadow: none;
  }

  dialog a,
  dialog button {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  .modal {
    max-height: 70vh;
  }

  .modalCloseBtn {
    bottom: -0.5625rem;
  }

  .modalOpenBtn:hover,
  .modalCloseBtn:hover {
    filter: brightness(1);
  }

  /* アコーディオン */
  .accBtn::after {
    right: 0.625rem;
  }

  .accBtn.is-active::after {
    right: 1rem;
  }


  /* ========================================================
  FV
  =========================================================*/
  .fv {
    padding: 1.0625rem 0 2.9375rem;
  }

  .fv::after {
    width: 17rem;
    left: -7.5rem;
    bottom: -1.1875rem;
  }

  .fv__flex {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .fv__flex-wrap {
    order: 1;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.5625rem;
    padding-left: 0.1875rem;
  }

  .fv__logo {
    width: 16.8125rem;
    margin-top: 0.75rem;
    margin-left: 0;
  }

  .fv__emblem {
    width: 2.5rem;
    margin: 0;
  }

  .fv__img {
    order: 2;
    width: 19.6875rem;
    margin-top: 0.625rem;
    margin-right: 0;
  }

  .fv__catch {
    order: 3;
    width: 20rem;
    margin-top: 0.75rem;
  }

  .fv__catch img {
    width: 100%;
  }

  .fv__info {
    order: 4;
    width: 20rem;
    margin-top: 0.9375rem;
  }

  .fv__info img {
    width: 100%;
  }

  .fv__btn {
    width: 20rem;
    margin-top: 1.375rem;
  }


  /* ========================================================
  MOVIE
  =========================================================*/
  .movie {
    background: url(../img/movie_bg_sp.png) no-repeat center / cover;
    padding: 1.6875rem 0 2.5625rem;
  }

  .movie__head-ttl {
    height: 0.75rem;
    margin-left: 0.125rem;
  }

  .movie__inner {
    width: 17.5rem;
    padding: 0;
  }

  .movie__video {
    margin-top: 0.6875rem;
  }


  /* ========================================================
  CAMPAIGN
  =========================================================*/
  .campaign {
    background: url(../img/line_stripe_white.svg) repeat-x top center / auto 0.75rem,
                var(--Sub);
    padding: 3.25rem 0 2.375rem;
  }

  .campaign__inner {
    width: 20.625rem;
  }

  .campaign__ttl {
    height: 1.25rem;
    margin-left: 0;
  }

  .campaign__box {
    box-shadow: 0px 0px 31.54px 0px rgba(27, 35, 52, 0.2);
    margin-top: 2.5rem;
  }

  .campaign__box-btn {
    right: auto;
    bottom: 3.0625rem;
    left: 50%;
    transform: translateX(-50%);
  }


  /* ========================================================
  PRODUCT
  =========================================================*/
  .product {
    background: url(../img/line_stripe_white.svg) repeat-x top center / auto 0.75rem,
                linear-gradient(270deg, #2F0632 0.01%, #000000 50%, #2F0632 100%);
    padding: 52px 0 0;
  }
  
  .product__head-num {
    height: 1.5rem;
  }

  .product__head-label {
    height: 2.1875rem;
    margin-top: 0.75rem;
  }

  .product__head-ttl {
    height: 2.5625rem;
    margin-top: 0.8125rem;
  }

  .product__overview {
    grid-template-columns: auto 1fr;
    gap: 1.5rem 1.125rem;
    padding-right: 1.125rem;
    padding-left: 1.25rem;
  }

  .product__overview-mij {
    grid-row: 1;
    grid-column: 1;
    width: 6rem;
  }

  .product__overview-name {
    grid-row: 1;
    grid-column: 2;
    height: 4.25rem;
  }

  .product__overview-desc {
    grid-row: 2;
    grid-column: span 2;
  }

  .product__overview-desc-subname {
    height: 1rem;
  }

  .product__overview-desc-txt {
    font-weight: 700;
    font-size: 0.75rem;
    margin-top: 0.875rem;
  }

  .product01__detail {
    display: block;
    background: url(../img/product_01_detail_bg_sp.png) no-repeat center top / cover;
    padding-bottom: 2.25rem;
    margin-top: 2.0625rem;
  }

  .product01__detail-slider-slide {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 0 1.25rem 3rem;
  }

  .product01__detail-slider-img01 {
    width: 8.625rem;
  }

  .product01__detail-slider-img02 {
    width: 9rem;
  }

  .product01__detail-slider-img03 {
    width: 9rem;
  }

  .product01__detail-slider-img04 {
    width: 14.0625rem;
  }

  .product01__detail-slider-img05 {
    width: 17.5rem;
  }

  .product01__detail-slider-img06 {
    width: 9.25rem;
  }

  .product01__detail-slider-img07 {
    width: 11.1875rem;
  }

  .product01__detail-slider-img08 {
    width: 6.8125rem;
  }

  .product01__detail-slider-img09 {
    width: 20.9375rem;
  }

  .product01__detail-slider-grid-item-caption {
    font-weight: 700;
    font-size: 0.75rem;
    line-height: 1;
    color: #fff;
  }

  .product01__detail-slider-img01 + .product01__detail-slider-grid-item-caption {
    margin-top: 0.25rem;
  }

  .product01__detail-slider-img02 + .product01__detail-slider-grid-item-caption {
    margin-top: 0.875rem;
  }

  .product01__detail-slider-img03 + .product01__detail-slider-grid-item-caption {
    margin-top: 0.875rem;
  }

  .product01__detail-slider-img07 + .product01__detail-slider-grid-item-caption,
  .product01__detail-slider-img08 + .product01__detail-slider-grid-item-caption,
  .product01__detail-slider-img09 + .product01__detail-slider-grid-item-caption {
    font-size: 1rem;
    line-height: 1.6;
    margin-top: 0.5rem;
  }

  .product01__detail-slider-slide01 .product01__detail-slider-grid {
    display: grid;
    grid-template-columns: 8.625rem 9rem;
    gap: 0 0.375rem;
    margin: 0 auto;
  }

  .product01__detail-slider-grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .product01__detail-slider-slide01 .product01__detail-slider-grid-item:nth-of-type(1) {
    grid-row: 1 / 3;
    grid-column: 1;
    padding-bottom: 0.875rem;
  }

  .product01__detail-slider-slide01 .product01__detail-slider-grid-item:nth-of-type(2) {
    grid-row: 1;
    grid-column: 2;
    padding-top: 2.0625rem;
  }

  .product01__detail-slider-slide01 .product01__detail-slider-grid-item:nth-of-type(3) {
    grid-row: 2;
    grid-column: 2;
    align-self: flex-end;
    padding-bottom: 0.875rem;
  }

  .product01__detail-slider-slide05 .product01__detail-slider-grid {
    display: grid;
    grid-template-columns: 11.1875rem 6.8125rem;
    gap: 1.5rem 2.9375rem;
    margin: 0 auto;
  }

  .product01__detail-slider-slide05 .product01__detail-slider-grid-item:nth-of-type(1) {
    grid-row: 1;
    grid-column: 1;
    justify-self: left;
  }

  .product01__detail-slider-slide05 .product01__detail-slider-grid-item:nth-of-type(2) {
    grid-row: 1;
    grid-column: 2;
    justify-self: right;
  }

  .product01__detail-slider-slide05 .product01__detail-slider-grid-item:nth-of-type(3) {
    grid-row: 2;
    grid-column: 1 / 3;
  }

  .product01__detail-slider-box {
    font-size: 0.75rem;
    color: #fff;
    background: linear-gradient(180deg, #101010 0%, #2D0505 100%);
    box-shadow: 0 0 0 0.0625rem var(--Accent);
    width: 100%;
    padding: 1.25rem;
    margin-top: 1rem;
    position: relative;
  }

  .product01__detail-slider-img04 + .product01__detail-slider-box {
    margin-top: 3.1875rem;
  }

  .product01__detail-slider-img05 + .product01__detail-slider-box {
    margin-top: 4.0625rem;
  }

  .product01__detail-slider-img06 + .product01__detail-slider-box {
    margin-top: 3.375rem;
  }

  .product01__detail-slider-slide05 .product01__detail-slider-box {
    margin-top: 1.6875rem;
  }

  .product01__detail-slider-box-ttl {
    display: flex;
    justify-content: center;
    height: 1.5625rem;
  }

  .product01__detail-slider-box-txt {
    text-align: justify;
    margin-top: 1rem;
    filter: drop-shadow(0 0 0.25rem var(--Main));
  }

  .splide__pagination {
    bottom: 0.625rem;
  }

  .splide__pagination__page {
    background: #555;
    width: 0.375rem;
    height: 0.375rem;
    opacity: 1;
  }

  .splide__pagination__page.is-active {
    transform: scale(1);
  }

  .splide__arrow {
    border-radius: 0;
    width: 7.125rem;
    height: 2rem;
    top: auto;
    bottom: 0;
    transform: translateY(0);
    opacity: 1;
  }

  .splide__arrow:disabled {
    display: none;
  }

  .splide__arrow:hover:not(:disabled) {
    opacity: 1;
  }

  .splide__arrow--prev {
    background: url(../img/product_slider_btn_prev.png) no-repeat center / contain;
    left: 1.25rem;
  }

  .splide__arrow--next {
    background: url(../img/product_slider_btn_next.png) no-repeat center / contain;
    right: 1.25rem;
  }

  .splide__arrow svg {
    display: none;
  }

  .product01__detail-copy {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
  }

  .product01__detail-copy img {
    height: 1.125rem;
  }

  .product01__detail-btn {
    display: block;
    width: 20.9375rem;
    margin: 1.5rem auto 0;
  }

  .product__detail-modal {
    border: none;
    width: 100%;
    max-width: 100%;
    max-height: 100vh;
    padding: 2.5rem 0 6.25rem;
    margin: 0;
  }

  .product__detail-modal-inner {
    width: 100%;
    padding: 0 1.25rem;
  }

  .product__detail-modal-ttl {
    height: 1.1875rem;
  }

  .product__detail-modal-ttl:nth-of-type(n+2) {
    height: 1.5625rem;
    margin-top: 1.9375rem;
  }

  .table th,
  .table td {
    font-size: 0.625rem;
  }

  .product__detail-modal-table {
    width: 100%;
    margin-top: 1.5rem;
  }

  .product__detail-modal-table .col01 {
    width: 3rem;
  }

  .product__detail-modal-table .col02 {
    width: 6.375rem;
  }

  .product__detail-modal-table th[rowspan="5"] {
    text-align: center;
    padding: 0;
  }

  .product__detail-modal-btn {
    width: 100%;
  }


  /* ========================================================
  LIMITED
  =========================================================*/
  .limited {
    background: url(../img/line_stripe_red_pc.svg) repeat-x top center / auto 1.5rem,
                linear-gradient(270deg, #361111 0.01%, #000000 50%, #361111 100%);
    padding: 5.875rem 0 2.3125rem;
  }

  .limited__inner {
    width: 100%;
    padding: 0 1.25rem;
  }

  .limited::before {
    background-image: url(../img/limited_01_sidetxt_sp.png);
    top: 2.25rem;
    width: 23.4375rem;
    height: 3rem;
    left: 50%;
    transform: translate(-50%, 0);
  }

  .limited01__imgs {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    justify-items: center;
    margin-top: 1.5rem;
  }

  .limited01__imgs::before {
    display: none;
  }

  .limited01__box {
    flex-direction: column;
    padding: 1.25rem 0;
    margin-top: 1.5rem;
  }

  .limited01__box-txt {
    height: 1.3125rem;
  }


  /* ========================================================
  CV
  =========================================================*/
  .cv {
    padding: 3.6875rem 0 3.625rem;
  }

  .cv__btn {
    width: 20rem;
  }


  /* ========================================================
  COMING SOON
  =========================================================*/
  .comingsoon {
    padding: 2rem 0 2.25rem;
    margin: 0;
  }

  .comingsoon::before,
  .comingsoon::after {
    display: none;
  }

  .comingsoon__label {
    height: 2.3125rem;
  }

  .comingsoon__catch {
    height: 4.875rem;
  }

  .comingsoon__box {
    background: url(../img/comingsoon_box_bg_sp.png) no-repeat center / contain;
    width: 22.1875rem;
    padding: 2.5rem 0 1.3125rem;
    margin-top: 1.5625rem;
  }

  .comingsoon__box-wrap {
    flex-direction: column;
    gap: 1rem;
  }

  .comingsoon__box-img {
    width: 15rem;
  }

  .comingsoon__box-txt {
    margin-top: 1rem;
  }


  /* ========================================================
  HISTORY
  =========================================================*/
  .history {
    padding: 4.8125rem 0 2.5rem;
  }

  .history__inner {
    width: 100%;
    padding: 0 1.25rem;
  }

  .history__head {
    background: none;
    width: 100%;
    padding: 0;
  }

  .history__head-num {
    height: 1.5rem;
  }

  .history__head-label {
    height: 2.5625rem;
    margin-top: 0.5rem;
  }

  .history__head-logo {
    height: 1.5rem;
    margin-top: 1rem;
  }

  .history__head-ttl {
    height: 2.6875rem;
    margin-top: 2rem;
  }

  .history__head-txt {
    height: 4.5rem;
  }

  .history__list-item01 .history__list-item-head-num {
    width: 2.5625rem;
  }

  .history__list-item02 .history__list-item-head-num {
    width: 2.6875rem;
  }

  .history__list-item03 .history__list-item-head-num {
    width: 2.625rem;
  }

  .history__list-item04 .history__list-item-head-num {
    width: 2.625rem;
  }

  .history__list-item05 .history__list-item-head-num {
    width: 2.5625rem;
  }

  .history__list-item06 .history__list-item-head-num {
    width: 2.5625rem;
  }

  .history__list-item-head-name-ja {
    height: 1.3125rem;
  }

  .history__list {
    background: url(../img/history_line_sp.svg) no-repeat center / contain;
    padding: 0;
    margin-top: 2.5rem;
  }

  .history__list::before {
    display: none;
    /* background: #fff;
    width: 0.25rem;
    transform: translateX(-50%);
    z-index: -1; */
  }

  .history__list-item {
    flex-direction: column;
    justify-content: flex-end;
    background: url(../img/history_box_bg_sp.png) no-repeat center / contain;
    height: 22.5rem;
    padding: 0 1.25rem 2.375rem;
  }

  .history__list-item:nth-of-type(n+2) {
    margin-top: 2.5rem;
  }

  .history__list-item .history__list-item-left {
    width: 100%;
    padding: 0;
    margin-right: 0;
  }

  .history__list-item-center {
    width: 100%;
    margin-top: 1.25rem;
    margin-right: 0;
  }

  .history__list-item .history__list-item-right {
    width: 100%;
    padding: 0;
    margin-top: 1rem;
  }

  .history__list-item-modal {
    background: transparent;
    /* border: 0.0625rem solid #fff; */
    width: 20.9375rem;
    max-height: calc(70vh + 104px);
    overflow: hidden;
    /* padding: 2rem 0; */
  }

  .history__list-item-modal-inner {
    background: var(--Main);
    border: 0.0625rem solid #fff;
    width: 20.9375rem;
    max-height: 70vh;
    padding: 2rem 0;
    overflow: auto;
    padding: 2rem 1.5rem;
  }

  .history__list-item-modal .history__list-item-product {
    margin-top: 1.5rem;
  }

  .history__list-item01 .history__list-item-modal .history__list-item-product {
    width: 15rem;
  }

  .history__list-item02 .history__list-item-modal .history__list-item-product {
    width: 11.1875rem;
  }

  .history__list-item03 .history__list-item-modal .history__list-item-product {
    width: 12.25rem;
  }

  .history__list-item04 .history__list-item-modal .history__list-item-product {
    width: 8.75rem;
  }

  .history__list-item05 .history__list-item-modal .history__list-item-product {
    width: 14rem;
  }

  .history__list-item06 .history__list-item-modal .history__list-item-product {
    width: 14rem;
  }

  .history__list-item-modal .history__list-item-txt {
    font-weight: 700;
    font-size: 0.75rem;
  }

  .history__list-item01 .history__list-item-modal .history__list-item-info {
    margin-top: 1.3125rem;
  }

  .history__list-item02 .history__list-item-modal .history__list-item-info {
    margin-top: 1.25rem;
  }

  .history__list-item03 .history__list-item-modal .history__list-item-info {
    margin-top: 1.5rem;
  }

  .history__list-item04 .history__list-item-modal .history__list-item-info {
    margin-top: 1.5rem;
  }

  .history__list-item05 .history__list-item-modal .history__list-item-info {
    margin-top: 1.5rem;
  }

  .history__list-item06 .history__list-item-modal .history__list-item-info {
    margin-top: 1.5rem;
  }

  .history__list-item-modal-btn {
    display: block;
    margin-top: 1.5rem;
  }

  .history__list-item-modal-closeBtn {
    height: 2.5rem;
    position: relative;
    z-index: 10;
  }


  /* ========================================================
  SPECIAL
  =========================================================*/
  .special {
    background: url(../img/line_stripe_white.svg) repeat-x top center / auto 0.75rem,
                var(--Sub);
    padding: 3.25rem 0 1.625rem;
  }

  .special__inner {
    width: 100%;
    padding-right: 0.9375rem;
    padding-left: 1.25rem;
  }

  .special__ttl {
    height: 1.25rem;
    margin-left: 0.125rem;
  }

  .special__box {
    background: url(../img/special_box_bg_sp.png) no-repeat center / contain;
    padding: 2.5625rem 0.25rem 2rem 0;
    margin-top: 2.1875rem;
  }

  .special__box-head {
    height: 4.8125rem;
  }

  .special__box-txt {
    font-size: 0.75rem;
    width: 15.9375rem;
    margin-top: 0.8125rem;
  }

  .special__box-wrap {
    width: 100%;
    padding: 1.75rem 0;
    margin-top: 0.6875rem;
  }

  .special__box-wrap::before,
  .special__box-wrap::after {
    width: 16.5rem;
    left: 2.25rem;
  }

  .special__box-btn {
    width: 16.5rem;
    margin-top: 1.5rem;
  }


  /* ========================================================
  DEVELOPMENT STORIES
  =========================================================*/
  .story {
    background: url(../img/line_stripe_white.svg) repeat-x top center / auto 0.75rem;
    padding: 5rem 0 0.5625rem;
  }

  .story__inner {
    width: 100%;
    padding: 0 1.25rem;
  }

  .story__head-label {
    height: 3.3125rem;
  }

  .story__head-ttl {
    height: 2.5625rem;
    margin-top: 1rem;
  }

  .story__box {
    background: none;
    padding: 0;
    margin-top: 2.5rem;
  }

  .story__box-head {
    flex-direction: column;
    gap: 1.8125rem;
    padding-bottom: 2.25rem;
  }

  .story__box-head-catch {
    height: 3.875rem;
    margin-top: 0;
  }

  .story__box-head-person {
    height: 6.0625rem;
  }

  .story__box-video {
    width: 100%;
    margin-top: 2.75rem;
  }

  .moreCont {
    transition: max-height 1s ease;
  }

  .moreCont::after {
    background: linear-gradient(to bottom, transparent 0px, #111 3rem, #111 100%);
    height: 146px;
  }

  .story__box-list-item01 {
    max-height: 607px;
  }

  .story__box-list-item02 {
    max-height: 683px;
  }

  .story__box-list-item03 {
    max-height: 713px;
  }

  .story__box-list-item:nth-of-type(n+2) {
    margin-top: 2rem;
  }

  .story__box-list-item::after {
    top: auto;
    bottom: 0;
  }

  .story__box-list-item__wrap {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 2rem 1.875rem 2.125rem;
  }

  .story__box-list-item-head {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .story__box-list-item02 .story__box-list-item-head-txt,
  .story__box-list-item03 .story__box-list-item-head-txt {
    height: 3.375rem;
  }

  .story__box-list-item-img {
    grid-row: 2;
    grid-column: 1;
    width: 100%;
    margin-top: 1rem;
  }

  .story__box-list-item-txt--top {
    grid-row: 3;
    grid-column: 1;
    width: 100%;
    margin-top: 1.5rem;
  }

  .story__box-list-item-txt--bottom {
    grid-row: 4;
    grid-column: 1;
    margin-top: 1.5rem;
  }

  .story__box-list-item .story__box-list-item-btn {
    width: 17.1875rem;
    bottom: 2.125rem;
  }

  .story__box-list-item-btn:hover {
    opacity: 1;
  }


  /* ========================================================
  FAQ
  =========================================================*/
  .faq {
    background: url(../img/line_stripe_white.svg) repeat-x top center / auto 0.75rem;
    padding: 44px 0 58px;
  }

  .faq__inner {
    width: 100%;
    padding: 0 1.25rem;
  }

  .faq__head-label {
    height: 3.3125rem;
  }

  .faq__head-ttl {
    height: 2.0625rem;
    margin-top: 0.875rem;
  }

  .faq__content {
    margin-top: 2.6875rem;
  }

  .faq__box:nth-of-type(n+2) {
    margin-top: 1.5rem;
  }

  .faq__box-q {
    height: 4.625rem;
  }

  .faq__box-q.is-active {
    height: 5.875rem;
  }

  .faq__box-q-txt {
    height: 2.625rem;
  }

  .faq__box-a-txt {
    font-weight: 700;
    font-size: 0.75rem;
    padding: 1.5rem 1rem 1.5rem 1.5rem;
  }

  .faq__btn {
    width: 20rem;
    margin: 3.75rem auto 0;
  }


  /* ========================================================
  CONTACT
  =========================================================*/
  .contact {
    padding: 2.5rem 0;
  }

  .contact__inner {
    padding: 0 1.25rem;
  }

  .contact__list {
    margin-top: 2rem;
  }

  .contact__list-item:nth-of-type(n+2) {
    margin-top: 4rem;
  }

  .contact__list-item-ttl {
    height: 4.3125rem;
  }

  .contact__list-item-btns {
    flex-direction: column;
    margin-top: 2rem;
  }

  .contact__list-item-tel:hover {
    opacity: 1;
  }

  .contact__list-item-txt {
    font-weight: 700;
    font-size: 0.75rem;
  }

  .contact__list-item-link {
    margin-top: 1rem;
  }

  .contact__list-item-link:hover {
    opacity: 1;
  }

  .contact__list-item02 .contact__list-item-txt {
    text-align: left;
  }

  .contact__list-item02 .contact__list-item-btn {
    width: 100%;
  }

}