/* 新規追加class */

/* basic */

/* --left-menu-r */

img {
  height: auto;
}

.lp-main {
  overflow: hidden;
  position: relative;
  width: calc(550 * var(--r));
  margin: 0 auto;
  border-right:calc(1 * var(--r)) solid #fff100;
  border-left:calc(1 * var(--r)) solid #fff100;
}

.lp-main-content {
  position: relative;
  overflow: hidden;
}

.scroll-text-left {
  position: fixed;
  top: 0;
  height: 100vh;
  overflow: hidden;
  left: calc(
    (100% - calc(550 * var(--r))) / 2
    + calc(10 * var(--r))
  );
  width: calc(15 * var(--r));
  opacity: 0.8;
}

.scroll-text-left img {
  display: block;
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  margin-bottom: calc(8 * var(--r));
}

.scroll-text-right {
  position: fixed;
  top: 0;
  height: 100vh;
  overflow: hidden;
  right: calc(
    (100% - calc(550 * var(--r))) / 2
    + calc(10 * var(--r))
  );
  width: calc(15 * var(--r));
  opacity: 0.8;
}

.scroll-text-right img {
  display: block;
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  margin-bottom: calc(8 * var(--r));
}

/* left */

.border-b {
  border-bottom: calc(1 * var(--r)) solid white;
}

.lp-left {
  position: fixed;
  top: 0;
  left: 0;
  width: calc((100% - calc(550 * var(--r))) / 2);
  height: 100vh;
  background-image: url('/cms/feature/bukatsu_debut/img/pc-bg-l.png');
  background-repeat: no-repeat;
  background-position-x: right;
  display: flex;
  justify-content: center;
  overflow-y: auto;
  z-index: 150;
}

.lp-left-menu-wrapper {
  position: fixed;
  display: flex;
  justify-content: center;
  top: 50%;
  right: calc(50% + calc(275 * var(--r)));
  transform: translateY(-50%);
}

.lp-left-menu-bg {
  display: flex;
  justify-content: center;
}

.lp-left-menu-bg img {
  width: calc(445 * var(--r));
}

.lp-left-menu-list {
  position: absolute;
  display: flex;
  flex-direction: column;
  top: 57.8%;
  left: 52.6%;
  transform: translate(-50%, -50%);
  width: calc(154 * var(--r));
}

.lp-left-menu-item-wrapper {
  display: flex;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
}

.lp-left-menu-item {
  margin-right: auto;
  margin-left: auto;
}

.lp-left-menu-item:hover {
  opacity: 0.7;
  transition: opacity 0.3s ease;
}


.lp-left-menu-item img {
  display: block;
  width: calc(154 * var(--r));
}

@media screen and (min-width: 1024px) and (max-width: 1440px) {
  .lp-left-menu-wrapper {
    right: calc(50% + calc(275 * var(--r)));
  }

  .lp-left-menu-item img {
    width: 8.5vw;
  }
  
  .lp-left-menu-list {
    width: 8.5vw;
  }

  .lp-left-menu-bg img {
    width: 25vw;
  }

}

/* right */

.lp-right {
  position: fixed;
  top: 0;
  right: 0;
  width: calc((100% - calc(550 * var(--r))) / 2);
  height: 100vh;
  background-image: url('/cms/feature/bukatsu_debut/img/pc-bg-r.png');
  background-repeat: no-repeat;
  background-position-x: left;
  display: flex;
  justify-content: center;
  overflow-y: auto;
  z-index: 150;
}

.lp-right-img{
  position: fixed;
  display: flex;
  justify-content: center;
  top: 50%;
  right: 0;
  width: calc((50% - calc(275 * var(--r))));
  transform: translateY(-50%);
}

.lp-right-img img {
  width: calc(445 * var(--r));
}

@media screen and (min-width: 1024px) and (max-width: 1440px) {
  .lp-left {
    /* background-size: 445px; */
    padding-right: calc(20 * var(--r));
    padding-left: calc(20 * var(--r));
  }

  .lp-right {
    /* background-size: 445px; */
    padding-left: calc(20 * var(--r));
    padding-right: calc(20 * var(--r));
  }
}

@media screen and (max-width: 1023px) {
  .lp-left {
    display: none;
  }

  .lp-right {
    display: none;
  }
}

/* mv */
.sec-mv-main-img img {
  width: calc(550 * var(--r));
  margin-top: calc(13 * var(--r));
}

/* intro */

.sec-intro {
  margin-top: calc(142 * var(--r));
}

.sec-intro-container {
  position: relative;
  max-width: calc(550 * var(--r));
  margin: 0 auto;
}

.sec-intro-ike-01 {
  position: absolute;
  top: calc(-98 * var(--r));
  left: calc(-34 * var(--r));
}
.sec-intro-ike-01 img {
  width: calc(180 * var(--r));
}
.sec-intro-ike-02 {
  position: absolute;
  top: calc(328 * var(--r));
  right: calc(-47 * var(--r));
}
.sec-intro-ike-02 img {
  width: calc(239 * var(--r));
}

.sec-intro-ike-03 {
  position: absolute;
  bottom: calc(-68 * var(--r));
  left: calc(-71 * var(--r));
}
.sec-intro-ike-03 img {
  width: calc(286 * var(--r));
}

.sec-intro-ike-04 {
  position: absolute;
  bottom: calc(-221 * var(--r));
  right: calc(-35 * var(--r));
}
.sec-intro-ike-04 img {
  width: calc(228 * var(--r));
}

.sec-intro-kira-01 {
  position: absolute;
  top: calc(397 * var(--r));
  left: 0;
}
.sec-intro-kira-01 img {
  width: calc(550 * var(--r));
}

.sec-intro-kira-02 {
  position: absolute;
  top: calc(861 * var(--r));
  right: 0;
}
.sec-intro-kira-02 img {
  width: calc(550 * var(--r));
}


.sec-intro-text {
  width: 100%;
  margin-bottom: calc(130 * var(--r));
}

.sec-intro-text2 {
  width: 100%;
  margin-bottom: calc(168 * var(--r));
}

.sec-intro-head {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: calc(70 * var(--r));
  width: calc(437 * var(--r));
}

.sec-intro-img {
  width: 100%;
  margin-bottom: calc(65 * var(--r));
}

.sec-intro-star {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: calc(114 * var(--r));
  width: calc(48 * var(--r));
}

/* menu */

.sec-menu {
}

.sec-menu-container {
  position: relative;
}

.sec-menu-ike-01 {
  position: absolute;
  bottom: calc(-9 * var(--r));
  left: calc(-4 * var(--r));
}
.sec-menu-ike-01 img {
  width: calc(229 * var(--r));
}
.sec-menu-ike-02 {
  position: absolute;
  bottom: calc(-259 * var(--r));
  right: calc(-41 * var(--r));
}
.sec-menu-ike-02 img {
  width: calc(230 * var(--r));
}

.sec-menu-star {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: calc(182 * var(--r));
  width: calc(48 * var(--r));
}

.sec-menu-main {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: calc(126 * var(--r));

}

.sec-menu-main img {
  display: block;
  width: calc(472 * var(--r));
  height: auto;
}

.sec-menu-list {
  position: absolute;
  display: flex;
  flex-direction: column;
  top: 56.1%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(258 * var(--r));
}

.sec-menu-item-wrapper {
  display: flex;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
}

.sec-menu-item {
  margin-right: auto;
  margin-left: auto;
}

.sec-menu-item:hover {
  opacity: 0.7;
  transition: opacity 0.3s ease;
}


.sec-menu-item img {
  display: block;
  width: calc(258 * var(--r));
}

/* cp */

.sec-cp {
}

.sec-cp-container {
  position: relative;
}

.sec-cp-ike-01 {
  position: absolute;
  bottom: calc(-38 * var(--r));
  right: calc(-31 * var(--r));
}
.sec-cp-ike-01 img {
  width: calc(205 * var(--r));
}
.sec-cp-ike-02 {
  position: absolute;
  bottom: calc(-240 * var(--r));
  left: calc(-80 * var(--r));
}
.sec-cp-ike-02 img {
  width: calc(254 * var(--r));
}

.sec-cp-main {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
}

.sec-cp-main img {
  display: block;
  width: calc(420 * var(--r));
  height: auto;
}

.sec-cp-content {
  position: absolute;
  top: 0;
  text-align: center;
}

.sec-cp-content-container {
}

.sec-cp-yeah {
  display: flex;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: calc(64 * var(--r));
  margin-bottom: calc(26 * var(--r));
}

.sec-cp-yeah img {
  width: calc(496 * var(--r));
}

.sec-cp-ttl-pc {
  display: flex;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: calc(40 * var(--r));
}

.sec-cp-ttl-pc img {
  width: calc(207 * var(--r));
}

.sec-cp-border {
  width: calc(324 * var(--r));
  margin-left: auto;
  margin-right: auto;
  border: none;
  border-top: 1px solid #fff000;
  margin-bottom: calc(18 * var(--r));
}

.sec-cp-ike-img {
  display: flex;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: calc(40 * var(--r));
}

.sec-cp-ike-img img {
  width: calc(426 * var(--r));
}

.sec-cp-info {
  display: flex;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: calc(64 * var(--r));
}

.sec-cp-info img {
  width: calc(359 * var(--r));
}

.sec-cp-case-wrapper {
  position: relative;
}

.sec-cp-case-main {
  display: flex;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: calc(17 * var(--r));
}

.sec-cp-case-main img {
  width: calc(305 * var(--r));
}

.sec-cp-case-button {
  position: absolute;
  top: calc(276 * var(--r));
  left: 50%;
  transform: translateX(-50%);
}

.sec-cp-case-button:hover {
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.sec-cp-case-button img {
  width: calc(163 * var(--r));
}

.sec-cp-case-caption {
  width: 100%;
  max-width: calc(305 * var(--r));;
  margin: auto;
}

.sec-cp-case-caption li {
  white-space: nowrap;
  position: relative;
  font-size: calc(13 * var(--r));
  line-height: 1.75;
  color: white;
  text-align: left;
  padding-left: calc(18 * var(--r));
}

.sec-cp-case-caption li::before {
  content: '※';
  position: absolute;
  left: 0;
  top: 0;
  font-size: calc(13 * var(--r));
  color: white;
}

.sec-cp-bottom {
  display: flex;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: calc(101 * var(--r));
}


.sec-cp-bottom img {
  width: calc(456 * var(--r));
  margin-bottom: calc(17 * var(--r));
}

.sec-cp-head {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: calc(70 * var(--r));
  width: calc(270 * var(--r));
}

.sec-cp-star {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: calc(182 * var(--r));
  width: calc(48 * var(--r));
}

/* sports */

.sec-sports {
}

.sec-sports-container {
  position: relative;
}

.sec-sports-ike-01 {
  position: absolute;
  bottom: calc(16 * var(--r));
    right: calc(5 * var(--r));
}
.sec-sports-ike-01 img {
  width: calc(207 * var(--r));
}
.sec-sports-ike-02 {
  position: absolute;
  bottom: calc(-279 * var(--r));
  left: calc(-31 * var(--r));
}
.sec-sports-ike-02 img {
  width: calc(172 * var(--r));
}

.sec-sports-head {
  text-align: center;
  margin-bottom: calc(40 * var(--r));
}

.sec-sports-head img {
  max-width: 100%;
}

.sports-carousel {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
}

.sports-carousel .slick-list {
  overflow: hidden;
}

.sports-carousel .slick-track {
  display: flex;
}

.sports-carousel .slick-slide {
  flex-shrink: 0;
  width: calc(490 * var(--r));
  margin: 0 calc(30 * var(--r));
}

.sports-carousel-item {
  display: block;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.sports-carousel-item:hover {
  opacity: 0.8;
}

.sports-carousel-item img {
  width: 100%;
  height: auto;
  display: block;
}

.sports-carousel .slick-prev,
.sports-carousel .slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: calc(49 * var(--r));
  height: calc(55 * var(--r));
  border: none;
  padding: 0;
  margin: 0;
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  z-index: 10;
}

.sports-carousel .slick-prev {
  left: calc(32 * var(--r));
  background-image: url('/cms/feature/bukatsu_debut/img/sports-car-btn-left2.png');
}

.sports-carousel .slick-next {
  right: calc(32 * var(--r));
  background-image: url('/cms/feature/bukatsu_debut/img/sports-car-btn-right2.png');
}

.sports-carousel .slick-prev:hover {
  background-image: url('/cms/feature/bukatsu_debut/img/sports-car-btn-left.png');
}

.sports-carousel .slick-next:hover {
  background-image: url('/cms/feature/bukatsu_debut/img/sports-car-btn-right.png');
}

.sec-sports-head {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: calc(74 * var(--r));
  width: calc(184 * var(--r));
}

.sec-sports-bottom {
  display: flex;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: calc(152 * var(--r));
}


.sec-sports-bottom img {
  width: calc(462 * var(--r));
}

.sec-sports-star {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: calc(182 * var(--r));
  width: calc(48 * var(--r));
}

/* other */

.sec-other {
}

.sec-other-container {
}

.sec-other-head {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: calc(32 * var(--r));
  width: calc(247 * var(--r));
}

.sec-other-main {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: calc(20 * var(--r));
  width: 100%;
}

.sec-other-main img {
  display: block;
  width: calc(460 * var(--r));
  height: auto;
}

.sec-other-content {
  position: absolute;
  top: calc(104 * var(--r));
  text-align: center;
  margin-bottom: calc(20 * var(--r));
}

.sec-other-c1 {
  display: flex;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: calc(35 * var(--r));
}

.sec-other-c1 img {
  width: calc(310 * var(--r));
}

.sec-other-border {
  width: calc(324 * var(--r));
  margin-left: auto;
  margin-right: auto;
  border: none;
  border-top: 1px solid #fff000;
  margin-bottom: calc(35 * var(--r));
}

.sec-other-c3 {
  display: flex;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: calc(35 * var(--r));
}

.sec-other-c3 img {
  width: calc(310 * var(--r));
}

.sec-other-c2 {
  display: flex;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}

.sec-other-c2 img {
  width: calc(310 * var(--r));
}

.sec-other-button {
  display: flex;
  justify-content: center;
  margin-top: calc(35 * var(--r));
}

.sec-other-button:hover {
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.sec-other-button img {
  width: calc(215 * var(--r));
}

.sec-other-bottom {
  display: flex;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: calc(80 * var(--r));
}

.sec-other-bottom img {
  width: calc(334 * var(--r));
}

/* store */
.sec-store {
}

.sec-store-bg {
  display: block;
}

.sec-store-main {
  background-color: #001671;
}

.sec-store-head {
  display: flex;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: calc(80 * var(--r));
}
.sec-store-head img {
  width: calc(184 * var(--r));
}

.sec-store-acco {
  text-align: center;
  padding-bottom: calc(112 * var(--r));
}

.acco-item {
}

.acco-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--r));
  cursor: pointer;
  padding: calc(15 * var(--r)) 0;
  transition: color 0.3s ease;
}

.acco-header:hover {
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.acco-title {
  font-size: calc(18.5 * var(--r));
  letter-spacing: 0.02em;
  color: white;
  font-weight: bold;
  transition: color 0.3s ease;
}

.acco-icon {
  font-size: calc(18.5 * var(--r));
  color: white;
  transition: color 0.3s ease;
}

.acco-icon::before {
  content: '▼';
}

.acco-item.active .acco-title,
.acco-item.active .acco-icon {
  color: #fff000;
}

.acco-content {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: calc(10 * var(--r));
  padding: calc(20 * var(--r)) 0;
}

.acco-item.active .acco-content {
  display: flex;
}

.acco-content a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-size: calc(18.5 * var(--r));
  letter-spacing: 0.02em;
  line-height: 2;
}

.acco-content p {
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-size: calc(14 * var(--r));
  letter-spacing: 0.02em;
  line-height: 1;
  margin-top: calc(-10 * var(--r));
}

.acco-content a::after {
  content: '≫';
  padding-left: calc(15 * var(--r));
}

.acco-content a:hover {
  opacity: 0.7;
}

.sec-store-bottom {
  display: flex;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}

.sec-store-bottom img {
  width: calc(435 * var(--r));
}

/* ==============================================
   基本スタイル
============================================== */
.lpwrap {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, "メイリオ", Meiryo, sans-serif;
  --scale: 1;
  --r: calc(var(--scale) * 1px);
  --left-menu-scale:-menu-r: calc(var(--left-menu-scale) * 1px);
  --left-menu-r: calc(var(--left-menu-scale) * 1px);
  display: flex;
  justify-content: center;
  position: relative;
}

.lpwrap img {
  max-width: 100%;
}

/* ==============================================
   レイアウト
============================================== */
.l-container {
  max-width: calc(1440 * var(--r));
  width: 100%;
  margin: 0 auto;
  background-color: #C82744;
  position: relative;
  overflow-x: hidden;
}

/* ==============================================
   アニメーション - fuwatto
============================================== */
.fuwatto {
  opacity: 0;
  transform: translate(calc(-50 * var(--r)), calc(50 * var(--r)));
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.fuwatto.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

.fuwatto-right {
  opacity: 0;
  transform: translate(calc(50 * var(--r)), calc(50 * var(--r)));
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.fuwatto-right.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

.hidden_fuwatto {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.hidden_fuwatto.visible {
  opacity: 1;
  visibility: visible;
}

/* ==============================================
   メニュースクロールボタン
============================================== */
#menu-scroll-button {
  position: fixed;
  bottom: calc(100 * var(--r));
  right: calc(20 * var(--r));
  width: calc(78 * var(--r));
  height: calc(75.5 * var(--r));
  z-index: 9999;
  cursor: pointer;
  transition: opacity 0.3s, visibility 0.3s;
}

#menu-scroll-button:hover {
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

#menu-scroll-button img {
  width: 100%;
  height: auto;
}

@media (min-width: 1024px) {
  #menu-scroll-button {
    display: none !important;
  }
}

@media only screen and (max-width: 767px) {
	.pane-footer .block-page-top a {
    display: none;
  }
}
/* ==============================================
   流れる文字
============================================== */
#flowing-text {
  position: fixed;
  right: calc(20 * var(--r));
  top: 0;
  height: 100vh;
  overflow: hidden;
  z-index: 9998;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  animation: flowDown 10s linear infinite;
}

.flowing-text-item {
  margin-bottom: calc(8 * var(--r));
}

.flowing-text-item img {
  display: block;
}

@keyframes flowDown {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}

#top-scroll-button.hidden_fuwatto {
  opacity: 0;
  visibility: hidden;
}

#top-scroll-button.visible {
  opacity: 1;
  visibility: visible;
}