@charset "UTF-8";

:root {
  --cc-gray-00: #FFFFFF;
  --cc-gray-900: rgba(32, 32, 32, 0.9);
}

@media (max-width: 1023px) {
  .cmContainer {
    padding-block: 0 calc(80 * var(--sp-w));
  }
}

/* 下部リスト */
.specialSub {
  display: grid;
  margin: 0;
}

@media (max-width: 1023px) {
  .specialSub {
    grid-template-columns: repeat(2, 1fr);
    column-gap: calc(16 * var(--sp-w));
    width: 91.4%;
    margin: auto;
  }
}
@media (min-width: 1024px) {
  .cmTypeContainer .specialSub {
    column-gap: 1.96%;
    margin-bottom: 72px;
  }
  .shamaisonStyle .specialSub {
    margin-bottom: 16px;
  }
  .cmTypeContainer .reason__button {
    margin-bottom: 96px;
  }
}

.specialSub__item {
  display: grid;
  grid-template-rows: auto auto 1fr;
  grid-template-columns: auto auto auto 1fr 28px;
  position: relative;
}

@media (max-width: 1023px) {
  .specialSub__item {
    width: 100%;
    border-bottom: 0;
  }
}

.specialSub__item__link {
  grid-row: 1/-1;
  grid-column: 1/-1;
  display: grid;
  grid-template-rows: subgrid;
  grid-template-columns: subgrid;
  margin-bottom: 24px;
}

@media (max-width: 1023px) {
  .specialSub__item__link {
    display: flex;
    flex-direction: column;
    margin-bottom: calc(24 * var(--sp-w));
  }
}

.specialSub__item__img {
  grid-row: 1/2;
  grid-column: 1/-1;
  position: relative;
  line-height: 0;
}

@media (min-width: 1024px) {
  .specialSub__item__img {
    margin-bottom: 16px;
  }
}

.specialSub__item__img img {
  display: block;
  border-radius: 6px;
}

.specialSub__item__subHeading {
  grid-row: 2/3;
  grid-column: 1/-2;
  font-family: var(--ff-zen);
  font-size: 14px;
  line-height: 1.6;
  color: var(--cc-gray-700);
}

.specialSub__item__heading {
  grid-row: 3/4;
  grid-column: 1/3;
  font-family: var(--ff-zen);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  transition-duration: .5s;
  transition-property: color;
}

.specialSub__item__heading>img {
  display: inline-block;
  width: 24px;
  vertical-align: calc(.5em - .5lh + 2px);
  margin-left: 6px;
}

@media (max-width: 1023px) {
  .specialSub__item__heading span {
    letter-spacing: calc(-0.5 * var(--sp-w));
  }
}

@media (hover:hover) and (pointer:fine) {
  .specialSub__item__link:hover .specialSub__item__img::after {
    opacity: 1;
  }

  .specialSub__item__link:hover .specialSub__item__heading {
    color: var(--cc-red-700);
  }

  .specialSub__item__link:hover::before {
    background-color: var(--cc-red-700);
  }

  .specialSub__item__link:hover::after {
    transform: translateX(50%);
    clip-path: polygon(0% 0, 50% 0, 50% 100%, 0% 100%);
  }
}

@media (min-width: 1024px) {
  .specialSub {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 2%;
    position: relative;
  }

  .specialSub::after {
    content: "";
  }

  .specialSub__item:not(:nth-child(3n+1)) {}
}

@media (max-width: 1023px) {
  .specialSub__item {
    display: grid;
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-columns: calc(96 * var(--sp-w)) auto auto 1fr calc(22 * var(--sp-w));
    column-gap: calc(8 * var(--sp-w));
    padding-block: calc(16 * var(--sp-w));
  }

  .specialSub__item::before {
    border-top-width: calc(2 * var(--sp-w));
    width: calc(40 * var(--sp-w));
    left: calc(20 * var(--sp-w));
  }

  .specialSub__item__img {
    grid-row: 1/-1;
    grid-column: 1/2;
  }

  .specialSub__item__img img {
    display: block;
  }

  .specialSub__item__subHeading {
    grid-row: 2/3;
    grid-column: 2/-2;
    font-size: calc(12 * var(--sp-w));
  }

  .specialSub__item__heading {
    grid-row: 3/4;
    grid-column: 2/3;
    font-size: calc(16 * var(--sp-w));
  }

  .specialSub__item__heading>img {
    margin-left: calc(6 * var(--sp-w));
    width: calc(16 * var(--sp-w));
    vertical-align: calc(.5em - .5lh + calc(2 * var(--sp-w)));
  }
}

@media screen and (min-width: 1024px) {
  .cmTypeContainer {
    width: calc(100% - 8px);
    max-width: 1224px;
    margin: auto;
  }
}
@media (min-width: 1024px) and (max-width: 1220px) {
  .cmTypeContainer {
    width: calc(100% - 56px);
  }
}
@media screen and (max-width: 1023px) {
  .cmTypeContainer {
    margin-inline: auto;
  }
}

.videoTitle {
  font-size: 32px;
  border-bottom: 0;
}

.videoTitle span {
  letter-spacing: -0.05em;
}

@media screen and (max-width: 1023px) {
  .videoTitle {
    font-size: calc(20 * var(--sp-w));
  }
}

.videoText {
  font-family: var(--ff-noto-sans);
}

@media screen and (max-width: 1023px) {
  .videoText {
    font-size: calc(16 * var(--sp-w));
  }
}

.videoContainerText {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-top: auto;
}

@media screen and (max-width: 1023px) {
  .videoContainerText {
    max-width: none;
    height: auto;
  }
}

@media screen and (min-width: 1024px) {
  .videoContainerText {
    width: 32.04%;
    padding-left: 1.3%;
  }
}

.videoContainer .js-open-reasonModal {
  display: flex;
  align-items: flex-start;
  gap: 1.96%;
  margin-top: 40px;
  margin-bottom: 64px;
}

@media (max-width: 1023px) {
  .videoContainer .js-open-reasonModal {
    display: block;
    margin-top: 0;
    margin-bottom: calc(40 * var(--sp-w));
  }
}

@media (min-width: 1024px) {
  .videoContainer {
    width: 100%;
    margin: auto;
  }
}

@media (max-width: 1023px) {
  .videoContainer {
    flex-direction: column;
    margin: 0 calc(16 * var(--sp-w));
  }
}

@media (max-width: 1023px) {
  .l2-h1A {
    font-size: calc(20 * var(--sp-w));
  }
}

.l2-h2A>.l2-h2A__inner {
  margin: 0;
}

@media (max-width: 1023px) {
  .l2-h2A>.l2-h2A__inner {
    font-size: calc(18 * var(--sp-w));
    padding: 0 0 calc(8 * var(--sp-w)) 0;
  }
}

@media (max-width: 1023px) {
  .l2-h2A>.l2-h2A__inner::after {
    left: 0;
  }
}

@media (min-width: 1024px) {
  .cmTypeContainer .l2-h2A {
    margin-top: 32px;
  }
}

@media (max-width: 1023px) {
  .cmTypeContainer .l2-h2A {
    margin-top: 0;
    margin: auto;
    margin: 0 calc(16 * var(--sp-w));
  }
}

@media (max-width: 1023px) {
  .videoContainerText .l2-h2A {
    margin: 0 0 calc(16 * var(--sp-w)) 0;
  }
}

@media (max-width: 1023px) {
  .specialSub__item__link .specialSub__item__heading {
    font-size: calc(14 * var(--sp-w));
    margin-top: calc(8 * var(--sp-w))
  }
}

@media (max-width: 1023px) {
  .specialSub__item {
    padding-block: 0;
    padding: 0;
  }
}

.modalContainer>.reason__button a {
  width: auto;
}

@media (max-width: 1023px) {
  .reason__button a {
    padding-right: calc(16 * var(--sp-w));
    margin-bottom: calc(56 * var(--sp-w));
  }

  .modalContainer>.reason__button a {
    padding-right: 0;
  }
}

.movieContainer {
  position: relative;
  display: inline-block;
}

@media (min-width: 1024px) {
  .mainPhoto {
    width: 66%;
  }
}

@media (max-width: 1023px) {
  .movieContainer {
    display: block;
  }
}
@media (max-width: 1023px) {
  .movieContainer.mainPhoto {
    width: 100%;
    margin: 24px 0;
  }
}
.movieContainer img{
  border-radius:6px;
}
@media (max-width: 1023px) {
  .movieContainer img {
    border-radius: calc(3 * var(--sp-w));
  }
}
.movieContainer.mainPhoto img{
  border-radius:8px;
}
@media (max-width: 1023px) {
  .movieContainer.mainPhoto img {
    border-radius: calc(6 * var(--sp-w));
  }
}
.thumbnail {
  border-radius: 8px;
}

.playButton {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 64px;
  transform: translate(-50%, -50%);
}

.playButton.mainVideo {
  width: 88px;
}

@media (max-width: 1023px) {
  .playButton {
    width: calc(40 * var(--sp-w));
  }
}

@media (max-width: 1023px) {
  .playButton.mainVideo {
    width: calc(64 * var(--sp-w));
  }
}

.movieModal {
  padding: 0;
  align-items: normal;
  border-radius: 0;
}

.reasonModal__inner {
  max-width: 1016px;
  margin: auto;
  padding: 144px 0;
}

@media (max-width: 1023px) {
  .reasonModal__inner {
    padding-top: calc(80 * var(--sp-w));
    padding-bottom: calc(16 * var(--sp-w));
    height: 100%;
  }
}

.movieModal__content {
  background-color: var(--cc-gray-900);
  backdrop-filter: blur(10px);
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}
.reasonModal .movieModal__content .swiper {
  height: auto;
}
@media (max-width: 1023px) {
  .reasonModal .movieModal__content .swiper {
    margin-top: 0;
    margin-bottom: 0;
  }
}

.rt-player {
  width: 1016px;
  background-color: grey;
}

@media screen and (min-width: 1024px) {
  .reasonModal__right__text {
    width: 495px;
  }
}

@media screen and (min-width: 1024px) {
  .modalContainer {
    display: flex;
    align-items: flex-end;
  }
}

.swiper .js-text-anim01 {
  color: var(--cc-gray-00);
}
@media screen and (min-width: 1024px) {
  a.js-open-reasonModal  .videoTitle {
    transition: 0.3s ease-in;
  }
}
@media screen and (min-width: 1024px) {
  a.js-open-reasonModal:hover .videoTitle {
    color: var(--cc-red-700);
  }
}
@media screen and (min-width: 1024px) {
  a.js-open-reasonModal .playButton {
    border-radius: 100%;
    transition: background-color 0.3s ease-in;
  }
}
@media screen and (min-width: 1024px) {
  a.js-open-reasonModal:hover .playButton {
    border-radius: 100%;
    background-color: rgba(255, 255, 255, 0.2);
    border: solid 1 #fff;
  }
}
@media (min-width: 1024px) {
  .reasonModal__MenuWrapper {
    max-width: 1016px;
    margin: auto;
    position: relative;
  }

  .reasonModal__MenuActions {
    right: 0;
    top: 48px;
    width: 116px;
  }

  .reasonModal__MenuBtn {
    width: 116px;
    height: 64px;
  }

  .reasonModal__MenuBtn::before {
    width: 116px;
  }

  .reasonModal__MenuBtn::after {
    height: 64px;
  }

  .reasonModal__MenuBtn .reasonModal__MenuBtnText {
    font-size: 18px;
    bottom: 16px;
  }

  .reasonModal__MenuBtn .reasonModal__MenuBtnIcon span {
    width: 50px;
    top: 14px;
  }
}
@media (min-width: 1440px) {
  .reasonModal__MenuActions {
    right: -147px;
  }
}

@media (max-width: 1023px) {
  .reasonModal__MenuActions {
    width: calc(72 * var(--sp-w));
    right: calc(16 * var(--sp-w));
    top: calc(16 * var(--sp-w));
  }

  .reasonModal__MenuActions img {
    width: calc(72 * var(--sp-w));
  }
}

.reasonModal__left {
  width: 100%;
}

.cmContainer {
  color: var(--cc-black-sm);
  background-color: var(--cc-gray-50);
  margin: auto;
}

@media (min-width: 1024px) {
  .cmContainer {
    padding-block: 112px 160px;
  }
}

.swiper-slide {
  display: block;
  overflow-y: auto;
}

@media (max-width: 1023px) {
  .swiper {
    margin: calc(16 * var(--sp-w));
  }
}

.reason__button .js-text-anim01__text--narrow {
  padding-right: 24px;
  width: 261px;
}

@media (max-width: 1023px) {
  .reason__button .js-text-anim01__text--narrow {
    padding-right: calc(16 * var(--sp-w));
    width: calc(224 * var(--sp-w));
  }
}

.swiper-slide .reason__button .js-text-anim01__text--narrow {
  padding-right: 112px;
  width: 192px;
}

@media (max-width: 1023px) {
  .swiper-slide .reason__button .js-text-anim01__text--narrow {
    padding-right: calc(50 * var(--sp-w));
    width: calc(120 * var(--sp-w));
  }
}

@media (min-width: 1024px) {
  .p2-pcW1224 {
    margin-inline: auto;
    width: 1224px;
    max-width: calc(100% - 8px);
  }
}

@media (max-width: 1023px) {
  .movieModal .reasonModal__right__title p::before {
    width: calc(24 * var(--sp-w));
  }
}

@media (max-width: 1023px) {
  .shamaisonStyle h2 {
    padding: 0;
  }
}

@media (max-width: 1023px) {
  .shamaisonStyle {
    padding: calc(32 * var(--sp-w)) 0 0 0;
  }
}

.cmContainer+.breadcrumb2 {
  margin-top: 0;
}