@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Zen+Old+Mincho&display=swap");
html {
  scroll-behavior: smooth;
}

:root {
  /* color */
  --color-main: #ff79b0;
  --color-base-02: #f4bdc9;
  --color-base-03: #eda2af;

  --color-base-01: #fbfbf7;

  --color-goto-blue: #7ab5f9;
  --color-azemoto-blue: #14397c;
  --color-sakai-blue: #4d9ff5;

  --color-text-wh: #eae2da;
  --color-txt-sakaguchi: #edeae5;

  --color-bg-grad: linear-gradient(
    0deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.664) 20%,
    rgb(255, 255, 255) 93.9%,
    rgba(255, 255, 255, 0) 94%,
    rgba(255, 255, 255, 0) 100%
  );
}

/* fadeUp　フェードアップ */
/* .fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}


@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(50px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
} */

.fadeUpTrigger,
.fadeUp {
  opacity: 1;
}

/* blur　ぼかし */
/* .blurImg.right{
  animation-name: blurImgRigth;
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
  opacity: 0;
}

.blurImg.left{
  animation-name: blurImgLeft;
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes blurImgRigth {
  from {
    filter: blur(10px);
    transform: translateX(50px) translateY(-10px);
    opacity: 0;
  }

  to {
    filter: blur(0px);
    transform: translateX(0) translateY(0);
    opacity: 1;
  }
}

@keyframes blurImgLeft {
  from {
    filter: blur(10px);
    transform: translateX(-50px) translateY(10px);
    opacity: 0;
  }

  to {
    filter: blur(0px);
    transform: translateX(0) translateY(0);
    opacity: 1;
  }
} */

.blurTrigger,
.blurImg {
  opacity: 1;
}

.ContentWrap {
  font-family: dnp-shuei-gothic-kin-std, sans-serif;
  font-size: 62.5%;
  letter-spacing: 0.8px;
  color: var(-color-goto-blue);
  width: 982px;
}

.ContentWrap.kidtype2_5,
.ContentWrap.ryuseitype-zero .txt-dec {
  color: var(--color-goto-blue);
}

.ContentWrap.versus {
  color: var(--color-sakai-blue);
}

.ContentWrap.ryuseitype-zero,
.ContentWrap.kidtype2_5 .txt-dec,
.ContentWrap.versus .txt-dec,
.ContentWrap .wrap.wrap-set a {
  color: var(--color-azemoto-blue);
}

.ContentWrap .wrap {
  padding: 0 40px;
}

.margin-bottom {
  margin-bottom: 4.8rem;
}

/* font style */
.rama-gothic-m {
  font-family: rama-gothic-m, serif;
  font-style: normal;
}

.wrap-item--button a {
  font-family: dnp-shuei-gothic-kin-std, sans-serif;
}

.font-thin {
  font-weight: 400;
}

.font-nomal {
  font-weight: 500;
}

.font-bold {
  font-weight: 900;
}

.font-sml {
  font-size: clamp(0.8rem, calc(1rem + 0.625vw), 1rem);
  line-height: clamp(
    calc(0.8rem + 0.4rem),
    calc(1rem + 0.625vw + 0.4rem),
    calc(1rem + 0.4rem)
  );
}

.font-mid {
  font-size: clamp(1.2rem, calc(1rem + 0.625vw), 1.7rem);
}

.font-lg {
  font-size: clamp(2.4rem, calc(2.2rem + 0.625vw), 2.9rem);
  line-height: 1.6rem;
}

.wrap .font-lg {
  margin-bottom: 1rem;
}

.wrap .wrap-img {
  position: relative;
  z-index: 10;
}

.ContentWrap.kidtype2_5 .wrap:has(h2),
.ContentWrap.ryuseitype-zero .wrap:has(h2),
.ContentWrap.versus .wrap:has(h2) {
  padding: 0;
  position: relative;
}

.versus .italic.wrap--right {
  font-size: 116px;
  line-height: 75px;
  text-align: right;
}

.kidtype2_5 .italic.wrap--right,
.ryuseitype-zero .italic.wrap--right {
  font-size: 116px;
  line-height: 30px;
  text-align: right;
}

.versus .italic.wrap--right {
  line-height: 53px;
}

.ContentWrap .romer.wrap {
  height: 680px;
}

.sp-view {
  display: none;
}

main .pc-view {
  max-width: 982px;
}

.wrap-contents-txt {
  position: relative;
  line-height: 28px;
}

.wrap-item--button a {
  display: inline-block;
  width: 100%;
  padding: 1.2rem;
  text-align: center;
  position: relative;
  border-radius: 8px;
  font-size: 24px;
  /* box-shadow: 4px 4px 0px 0px rgb(17 17 26 / 21%); */
  border: 3px solid;
}
.wrap-item--button a::after {
  content: ">";
  position: absolute;
  display: inline-block;
  width: 2rem;
  height: 2rem;
  top: 1.2rem;
  right: 1.2rem;
  z-index: 999;
  background-size: contain;
}
.pattern-A {
  background-color: var(--color-base-01);
}

.pattern-B {
  background-color: var(--color-base-02);
}
.pattern-B .wrap-item--button a {
  color: var(-color-goto-blue);
  background: var(--color-base-01);
  border: var(--color-base-01);
}

.pattern-B p {
  color: var(--color-text-wh);
}

.pattern-B:has(.wrap-set) {
  background-image: url(https://gigaplus.makeshop.jp/sdarts/project/whiteday2025/img/set_bg.jpg);
  background-color: #24499c;
}

.pattern-A .wrap-item--button a {
  color: #fff;
  background: var(-color-goto-blue);
}

.barrel-detail .wrap-contents-txt span {
  color: var(--color-base-01);
}

.kidtype2_5 .wrap-item--button a {
  border: 3px solid var(--color-goto-blue);
}
.kidtype2_5 .wrap-item--button a,
.kidtype2_5 .barrel-detail .wrap-contents-txt span {
  background: var(--color-goto-blue);
}

.ryuseitype-zero .wrap-item--button a {
  border: 3px solid var(--color-azemoto-blue);
}
.ryuseitype-zero .wrap-item--button a,
.ryuseitype-zero .barrel-detail .wrap-contents-txt span {
  background: var(--color-azemoto-blue);
}

.versus .wrap-item--button a {
  border: 3px solid var(--color-sakai-blue);
}
.versus .wrap-item--button a,
.versus .barrel-detail .wrap-contents-txt span {
  background: var(--color-sakai-blue);
}

.pattern-C {
  background-color: var(--color-base-01);
}
.pattern-C .wrap-item--button a {
  color: var(--color-base-01);
  background-color: var(--color-azemoto-blue);
  border: 3px solid var(--color-azemoto-blue);
}

.wrap-set--flex .wrap-item--button a {
  border: 3px solid var(--color-base-01);
}

.pattern-yt {
  text-align: center;
  background-image: url(https://gigaplus.makeshop.jp/sdarts/project/whiteday2025/img/bg_movie.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-color: var(--color-base-01);
  background-position-y: 80%;
}

.pattern-yt .wrap {
  padding-top: 80px;
  padding-bottom: 80px;
}

.ContentWrap.pattern-yt h2 {
  font-size: 48px;
  line-height: 34px;
  text-align: right;
  color: var(--color-text-wh);
  margin-bottom: 40px;
}

.ContentWrap.pattern-yt .txt-dec {
  font-size: 28px;
  color: #14397c;
  display: block;
  text-shadow: 1px 1px 0 var(--color-text-wh), -1px -1px 0 var(--color-text-wh),
    -1px 0px 0 var(--color-text-wh), 0px -1px 0 var(--color-text-wh);
}

.ContentWrap.pattern-yt .iframeWrap-parent {
  margin-bottom: 40px;
}

.clover {
  display: block;
  position: absolute;
  top: 50%;
}

.clover.left {
  transform: rotateZ(90deg);
  left: 80px;
}
.clover.right {
  transform: rotateZ(-90deg);
  right: 80px;
}

.ContentWrap .wrap-box {
  display: flex;
  flex-direction: row-reverse;
  gap: 24px;
}
.ContentWrap .wrap-box--R {
  padding-top: 40px;
  padding-bottom: 40px;
}
.ContentWrap .wrap-box--L {
  flex-direction: row;
  padding-top: 40px;
  padding-bottom: 40px;
}

.ContentWrap .wrap-item h3 {
  font-size: 54px;
  line-height: 52px;
  letter-spacing: 1.29px;
}

.ContentWrap .wrap-item .wrap-item--txt p {
  font-size: 26px;
  line-height: 36px;
  letter-spacing: 1px;
}

.ContentWrap .barrel-detail {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 32px;
}

.ContentWrap .barrel-detail .wrap-contents:has(.wrap-contents-txt) {
  border: 1px solid;
  border-radius: 20px;
  padding: 32px 16px;
}

.ContentWrap .wrap-contents.pic-up div,
.ContentWrap .wrap-contents.icon div,
.ContentWrap .wrap-contents.logo div {
  display: block;
}

.ContentWrap .wrap-contents.pic-up div img,
.ContentWrap .wrap-contents.icon div img,
.ContentWrap .wrap-contents.logo div img {
  margin: 0;
}

.ContentWrap.kidtype2_5 .pic-up img,
.ContentWrap.ryuseitype-zero .pic-up img,
.ContentWrap.versus .pic-up img {
  width: 200px;
}

.ContentWrap.kidtype2_5 .pic-up img,
.ContentWrap.ryuseitype-zero .pic-up img,
.ContentWrap.versus .pic-up img {
  width: 135px;
}

.ContentWrap.kidtype2_5 .pic-up img,
.ContentWrap.ryuseitype-zero .pic-up img,
.ContentWrap.versus .pic-up img {
  width: 149px;
}

.ContentWrap .wrap.wrap-set {
  text-align: center;
  background-image: url();
  background-repeat: no-repeat;
  background-size: 70%;
  background-position-x: -26%;
  background-position-y: 112%;
  padding-top: 40px;
  padding-bottom: 40px;
  z-index: 2;
}

.wrap-set p,
.wrap-set .wrap-set--flex {
  padding-bottom: 2.4rem;
  letter-spacing: 1.4px;
}

.wrap-set .wrap-set--flex .font-sml {
  letter-spacing: 0.6px;
}

.wrap-set span {
  /* display: block; */
  margin-bottom: 0rem;
}

.wrap-set .font-sml .font-bold {
  font-size: 21px;
  line-height: 48px;
}

.wrap-set .font-sml.shuei {
  padding-bottom: 40px;
}

.wrap-set .wrap-set--flex-barrel {
  padding-bottom: 88px;
  justify-content: space-evenly;
}

.wrap-set--flex-card {
  text-align: left;
  align-items: top;
}

.wrap-set--flex-card div,
.wrap-set--flex-card img {
  width: 136px;
}

.wrap-set--flex-card img {
  margin-bottom: 0.8rem;
  filter: drop-shadow(2px 2px 3px #00000025);
}

.wrap-set--flex-card p {
  font-size: 21px;
}

.wrap-set span.bg_set {
  display: block;
  position: absolute;
  clip-path: fill-box;
  width: 630px;
  height: 993px;
  top: 0;
  right: 0;
  background-image: url(https://gigaplus.makeshop.jp/sdarts/project/whiteday2025/img/all_01.jpg);
  background-blend-mode: luminosity;
  background-size: 200%;
  background-position: 74% 98%;
  background-color: #24499c;
  opacity: 38%;
  z-index: 1;
}

.wrap-set .wrap-item--button,
.pattern-C .wrap-item--button {
  max-width: calc(982px - 25rem);
  margin: auto;
}

.ContentWrap .barrel-detail,
.ContentWrap .wrap-item,
.ContentWrap .wrap.wrap-set .wrap-set--flex div:has(.wrap-set--flex-card),
.ContentWrap .grid img,
.wrap-set--flex.container .all,
.wrap-set--flex.container .all img {
  width: 440px;
}

.flex-text {
  display: flex;
  justify-content: center;
  gap: 0.48px;
}

.wrap-set .flex-text {
  font-size: 48px;
  padding-top: 40px;
  padding-bottom: 0px;
  width: 100%;
  justify-content: space-between;
  align-items: baseline;
  z-index: 2;
  position: relative;
}

.wrap-set .flex-text span {
  content: "";
  background-image: url(https://gigaplus.makeshop.jp/sdarts/project/whiteday2025/img/bg_movie.svg);
  display: block;
  width: 295px;
  height: 34px;
  background-size: 304%;
}

.wrap-set--flex.container {
  justify-content: space-between;
  padding-bottom: 0;
  align-items: center;
}

.ContentWrap.footer .wrap {
  padding: 0;
}

.pouch .wrap-item img {
  width: 100%;
  padding-top: 32px;
}

.pc-view.blurTrigger.right {
  margin-bottom: 30px;
}

@media screen and (min-width: 769px) {
  .wrap-img {
    width: 100%;
  }

  .ContentWrap .wrap {
    position: relative;
  }

  .ContentWrap .wrap--right {
    position: absolute;
    right: 40px;
    bottom: 32px;
    z-index: 20;
  }

  .ContentWrap .wrap:has(h2) {
    width: 982px;
  }

  .ContentWrap .wrap-box {
    justify-content: space-between;
    align-items: stretch;
    background: var(--color-base-01);
  }

  .ContentWrap .wrap-contents.pic-up div,
  .ContentWrap .wrap-contents.icon div,
  .ContentWrap .wrap-contents.logo div {
    display: block;
  }

  .ContentWrap .wrap-box > img {
    height: auto;
  }

  .wrap-contents img {
    display: block;
    width: 20%;
  }

  .kidtype2_5 .wrap-box--R .wrap-contents:not(.grid) img,
  .ryuseitype-zero .wrap-box--R .wrap-contents:not(.grid) img,
  .versus .wrap-box--R .wrap-contents:not(.grid) img {
    display: block;
    width: 126px;
  }

  .wrap-contents-txt {
    width: 100%;
  }

  .ContentWrap .wrap-contents:has(.wrap-contents-txt) {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .wrap-box--R .wrap-contents {
    align-items: center;
    justify-content: space-between;
    column-gap: 16px;
  }

  .ContentWrap .wrap-box--L {
    z-index: 1;
  }

  .ContentWrap .wrap-box--L > img {
    width: 18%;
    margin-left: 6rem;
  }

  .wrap-box--column {
    display: flex;
    flex-direction: row-reverse;
    z-index: 999;
    width: 20%;
    justify-content: flex-end;
    object-fit: contain;
    column-gap: 2rem;
    align-items: baseline;
  }

  .wrap-box--column img {
    object-fit: contain;
    width: 35%;
  }

  .wrap-box--column img:first-of-type {
    object-fit: contain;
    width: 30%;
  }

  .pc-bg--right {
    position: absolute;
    top: 67.6%;
    right: 0;
    width: 20%;
    z-index: 0;
  }

  .pattern-A,
  .pattern-B {
    position: relative;
  }

  .bg-margin {
    display: block;
    width: 982px;
    height: 4.8rem;
  }

  .pattern-A .bg-margin {
    background-color: var(--color-base-01);
  }

  .ContentWrap .wrap-item {
    z-index: 1;
    padding-top: 32px;
  }

  .ContentWrap .wrap-item h3 {
    padding-bottom: 20px;
  }

  .ContentWrap .wrap-item--txt {
    margin-bottom: 30px;
  }

  .wrap-box.wrap-box--L.wrap.pouch {
    flex-direction: row-reverse;
  }

  .emprechu .wrap-box--L .wrap-contents img {
    width: 74%;
  }
  .emprechu .wrap-box--column img:first-of-type {
    width: 39%;
  }
  .roman .wrap-box--column img:first-of-type {
    width: 35%;
  }
  .roman .wrap-box--L .wrap-contents img {
    width: 34.5%;
  }

  .wrap-set--flex {
    display: flex;
    justify-content: center;
  }
  .wrap-set--flex-barrel {
    align-items: center;
  }
  .wrap-set--flex-barrel img {
    width: auto;

    max-height: 228px;
  }

  .wrap-set--flex-card {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
  }

  .wrap-set--flex-card img {
    width: 100%;
  }

  .wrap-set--flex-card div {
    display: block;
    /* padding-left: 1.6rem; */
  }

  .wrap-set--flex-card:has(.wrap-item--button) div {
    width: 50%;
    margin-top: 50px;
    margin-bottom: 50px;
  }

  .wrap-set {
    background-position: 90% 93%;
  }
  /* .pattern-yt {
    padding-bottom: 2.4rem;
  } */
  .pattern-yt .wrap .font-lg {
    padding-bottom: 2rem;
  }
  .pattern-C {
    padding-bottom: 4.8rem;
  }
  .pattern-C img {
    width: 100%;
  }

  .pattern-C .wrap-item--button {
    margin-top: 5rem;
  }

  .Handsome {
    line-height: 3rem;
  }

  .emprechu .wrap-img::after {
    width: 100 !important;
    bottom: -4.5rem !important;
    right: -0.4rem !important;
  }

  .wrap-item--button a:hover,
  .wrap-item--button a:hover {
    transition: all 0.5s;
    box-shadow: 0px 0px 0px 0px rgb(17 17 26 / 21%);
  }

  .kidtype2_5 .wrap-item--button a:hover {
    background-color: var(--color-base-01);
    color: var(--color-goto-blue);
  }

  .ryuseitype-zero .wrap-item--button a:hover {
    background-color: var(--color-base-01);
    color: var(--color-azemoto-blue);
  }

  .versus .wrap-item--button a:hover {
    background-color: var(--color-base-01);
    color: var(--color-sakai-blue);
  }

  .wrap-set--flex .wrap-item--button a:hover {
    background: #24499c;
    color: var(--color-base-01);
  }

  .pattern-C .wrap-item--button a:hover {
    background-color: var(--color-base-01);
    color: var(--color-azemoto-blue);
  }
}

@media screen and (max-width: 768px) {
  .ContentWrap {
    width: 100vw !important;
    position: relative;
  }
  .ContentWrap .wrap {
    /* padding: 2.4rem 1rem 0; */
    padding: 0 20px;
  }

  section {
    padding-top: 0.8rem;
    padding-bottom: 3.4rem;
  }

  .font-sml {
    font-size: 13px;
    letter-spacing: 0px;
  }

  .font-mid {
    font-size: 1.2rem;
  }

  .wrap-set .font-lg {
    font-size: 1.8rem;
  }

  .Handsome {
    letter-spacing: 1px;
  }

  .margin-bottom {
    margin-bottom: 16px;
  }

  .pc-view {
    display: none;
  }

  .sp-view {
    display: block;
    max-width: 100vw;
  }

  .ContentWrap .wrap-box {
    padding-top: 1.6rem;
    justify-content: space-between;
    flex-direction: column-reverse;
    gap: 0;
  }

  .ContentWrap.kidtype2_5,
  .ContentWrap.ryuseitype-zero,
  .ContentWrap.versus {
    padding-top: 0;
    padding-bottom: 0;
  }

  .ContentWrap .wrap-box > img {
    width: 34%;
    height: auto;
    object-fit: contain;
    z-index: 30;
  }

  .ContentWrap .wrap--right {
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 20;
  }

  .kidtype2_5 .italic.wrap--right,
  .ryuseitype-zero .italic.wrap--right,
  .versus .italic.wrap--right {
    font-size: 64px;
    line-height: 63px;
  }

  .ContentWrap .barrel-detail,
  .ContentWrap .wrap-item,
  .ContentWrap .wrap.wrap-set .wrap-set--flex div:has(.wrap-set--flex-card),
  .ContentWrap .grid img,
  .wrap-set--flex.container .all,
  .wrap-set--flex.container .all img {
    width: 100%;
  }

  .ContentWrap .wrap-contents.pic-up div,
  .ContentWrap .wrap-contents.icon div,
  .ContentWrap .wrap-contents.logo div {
    width: 100%;
  }

  .ContentWrap .barrel-detail {
    width: 100%;
    gap: 24px;
    /* margin-top: 40px;
    margin-bottom: 40px; */
  }

  .ContentWrap .wrap-box div:has(.wrap-item--txt) {
    width: 100%;
  }

  .ContentWrap .wrap-contents:has(.wrap-contents-txt) {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
  }

  .ContentWrap .barrel-detail .wrap-contents:has(.wrap-contents-txt) {
    padding: 16px;
  }

  .wrap-box--R {
    margin-bottom: 24px;
    align-items: center;
  }

  .ContentWrap .barrel-detail .wrap-contents:has(.wrap-contents-txt) {
    border-radius: 12px;
  }

  .ContentWrap .wrap-box--R > div::before {
    left: -60px;
  }

  .ContentWrap .wrap-box--L {
    padding-top: 0%;
    padding-bottom: 2.4rem;
    justify-content: flex-end;
    flex-direction: column;
  }

  .ContentWrap .wrap-box--L > div::before {
    right: -60px;
  }
  .ContentWrap .wrap-contents {
    text-align: left;
  }

  .ContentWrap .wrap-contents img {
    margin-bottom: 0.8rem;
  }

  .ContentWrap .wrap-contents.pic-up div,
  .ContentWrap .wrap-contents.icon div,
  .ContentWrap .wrap-contents.pic-up img,
  .ContentWrap .wrap-contents.icon img {
    width: 100%;
    max-width: 108px;
  }

  .wrap-box--L {
    column-gap: 13px;
  }

  .ContentWrap .wrap-box--L > img {
    width: 35%;
  }

  .kidtype2_5 .wrap-box--L .wrap-contents img,
  .ryuseitype-zero .wrap-box--L .wrap-contents img,
  .versus .wrap-box--L .wrap-contents img {
    margin-left: 0;
    width: 100%;
  }

  .emprechu .wrap-box--L .wrap-contents img {
    width: 100%;
  }

  .wrap-box--column {
    display: flex;
    flex-direction: column;
    z-index: 999;
    width: 40%;
    justify-content: flex-end;
  }

  .wrap-box--column img {
    width: 85%;
  }

  .wrap-box--column img:first-of-type {
    margin-bottom: 1.2rem;
  }

  .wrap-set--flex-barrel {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
  }

  .wrap-set--flex-barrel div,
  .wrap-set--flex-barrel div img {
    width: 80%;
    height: auto;
  }

  .wrap-set--flex-barrel div:nth-of-type(2) img {
    width: 100%;
  }

  .wrap-set .wrap-set--flex.wrap-set--flex-card {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    row-gap: 1rem;
    padding-bottom: 0px;
  }

  .wrap-set--flex-card div {
    width: 46%;
    padding-bottom: 0px;
  }

  .wrap-set .wrap-set--flex-card p {
    padding-bottom: 0;
    letter-spacing: 1px !important;
  }

  .wrap-set p,
  .wrap-set .wrap-set--flex {
    padding-bottom: 24px;
  }
  .wrap-set {
    background-size: 44%;
    background-position: 90% 95%;
  }

  iframe {
    width: 100%;
  }

  .Whiteday img:not([width]) {
    zoom: unset;
  }

  .iframeWrap-child {
    position: relative;
    width: 100%;
    height: 0;
    /* 以下タテヨコ比（アスペクト比） */
    padding-top: 75%; /* 4:3 */
    padding-top: 66%; /* 3:2 */
    padding-top: 56%; /* 16:9 */
  }
  .iframeWrap-child iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .wrap-item--button a {
    padding: 1.2rem;
    width: 100%;
  }
  .wrap-item--button a::after {
    top: 1.2rem;
  }

  .wrap-set .flex-text {
    width: 100%;
    margin: 0 auto;
    flex-wrap: wrap;
    font-size: 40px;
    line-height: 40px;
    letter-spacing: 1px;
    padding-top: 24px;
  }

  .wrap-set--flex-barre {
    gap: 24px;
  }

  .wrap-set--flex-card img {
    width: 100%;
  }

  .wrap-set--flex-card .wrap-item--button {
    width: 100%;
  }

  .ContentWrap .wrap.wrap-set {
    z-index: 2;
    position: relative;
    padding-top: 16px;
    padding-bottom: 0px;
  }

  .pattern-B:has(.wrap-set) {
    padding-bottom: 0;
  }

  .pattern-yt {
    background-position-x: center;
    background-position-y: 80%;
  }

  .pattern-yt .wrap {
    padding: 3.4rem 2.4rem 0rem;
  }

  .pattern-C {
    padding-top: 0;
  }

  .pattern-C img {
    width: 100%;
  }

  .pattern-C .wrap-item--button {
    padding-left: 2.4rem;
    padding-right: 2.4rem;
  }

  .pattern-C .wrap-item--button a {
    margin-top: 40px;
  }

  .wrap-set .flex-text {
    text-align: center;
    align-items: center;
  }

  .wrap-set .flex-text span {
    width: 16vw;
    background-size: 593%;
  }

  .ContentWrap.pattern-yt .txt-dec {
    padding-bottom: 0px;
    margin-top: 44px;
  }
  .wrap-set .font-sml.shuei {
    letter-spacing: 0px;
  }

  .js-offcanvas-btn span {
    display: block;
  }

  #pagetop {
    height: auto;
  }

  .ContentWrap .wrap-item h3 {
    font-size: 38px;
    line-height: 38px;
  }
  .pattern-B:has(.wrap-set) {
    background-position: center;
    background-size: contain;
  }

  .wrap-set--flex.container {
    display: flex;
    flex-direction: column-reverse;
    padding-bottom: 123vw;
  }

  .wrap-set--flex.container .all {
    position: absolute;
    left: 0;
    bottom: 24px;
    width: 70%;
  }

  .clover,
  .clover img {
    width: 16px;
    height: 16px;
  }

  .clover.left {
    left: 10px;
  }
  .clover.right {
    right: 10px;
  }

  .wrap-set .wrap-set--flex .font-sml {
    letter-spacing: 0px;
  }

  .wrap-set span.bg_set {
    width: 70vw;
    height: 375px;
    background-repeat: no-repeat;
    background-position: 73% 97%;
  }

  .wrap-set span.bg_set.sp-view.left{
    top: 33%;
    left: 0;
    width: 70vw;
    background-repeat: no-repeat;
    background-position: 2% 93%;
  }

  .wrap-set span.bg_set.sp-view.right{
    top: 80%;
    right: 0;
    width: 70vw;
    background-repeat: no-repeat;
    background-position: 97% 93%;
  }

  .ContentWrap .wrap-box--L {
    gap: 0 !important;
  }

  .margin-bottom,
  .wrap-item--button {
    margin-top: 0.8rem !important;
  }

  .wrap-item--button a {
    padding: 1rem !important;
    font-size: 20px !important;
  }

  .wrap-item--button a::after {
    top: 1rem !important;
  }

  .wrap-item--button {
    padding-left: 2.4rem !important;
    padding-right: 2.4rem !important;
  }

  .footer .wrap-item--button {
    padding-left: 4.8rem !important;
    padding-right: 4.8rem !important;
  }

  .wrap-set .flex-text .sp-view {
    letter-spacing: -4.3px;
  }
  .wrap-set .font-sml.shippori {
    letter-spacing: -1px !important;
    font-size: 15px !important;
    line-height: 24px !important;
  }
}

@media screen and (max-width: 375px) {
  .margin-bottom {
    margin-bottom: 16px;
  }
}