@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: #f4f4f4;

  --color-purple: #8180b2;
  --color-blue: #91b5d4;
  --color-yellow: #FEE680;
  --color-brown: #A3644C;


  --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: "Yu Mincho", "YuMincho", "Zen Old Mincho", serif;
  font-size: 62.5%;
  letter-spacing: 2px;
  color: var(--color-purple);
  width: 982px;
}

.ContentWrap.emprechu5{
  color: var(--color-blue);
}
.ContentWrap.emprechu5 h2{
  color: var(--color-txt-sakaguchi);
}

.ContentWrap.roman5{
  color: var(--color-brown);
}
.ContentWrap.roman5 h2{
  color: var(--color-yellow);
}


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

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

/* font style */
.ivypresto {
  font-family: ivypresto-display, serif;
  font-weight: 400;
font-style: normal;
}

.ivypresto.italic {
  font-style: italic;
}

.bebas {
  font-family: bebas-neue-pro, sans-serif;
  font-weight: 500;
font-style: normal;
}

.shippori {
  font-family: shippori-mincho, sans-serif;
  font-weight: 500;
font-style: normal;
}

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

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

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


.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.romero2 .wrap:has(h2),
.ContentWrap.emprechu5 .wrap:has(h2),
.ContentWrap.roman5 .wrap:has(h2){
  padding: 0;
  position: relative;
}


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

.romero2 .italic.wrap--right,
.emprechu5 .italic.wrap--right{
 font-size: 116px;
 line-height: 30px;
 text-align: right;
}

.roman5 .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;
}


.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 3px 11px 0px rgb(17 17 26 / 21%);
}
.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-purple);
  background: 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/valentine2025/img/set_bg.jpg);
}

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

.emprechu5 .wrap-item--button a{
  background: var(--color-blue);
}

.roman5 .wrap-item--button a{
  background: var(--color-brown);
}

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

.pattern-yt {
  text-align: center;
  background-image: url(https://gigaplus.makeshop.jp/sdarts/project/valentine2025/img/bg_movie.jpg);
  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: 40px;
}



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

.ContentWrap.pattern-yt .bebas{
  font-size : 17px;
  color: var(--color-purple);
  padding-bottom: 80px;
  display: block;
}

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

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

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

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

.ContentWrap .wrap-contents.icon,
.ContentWrap .wrap-contents.pic-up{
  padding-bottom: 32px;
}

.ContentWrap .wrap-contents.icon,
.ContentWrap .wrap-contents.logo{
  border-top: #8180b221 2px dashed;
}

.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 auto;
}

.ContentWrap.romero2 .pic-up img,
.ContentWrap.emprechu5 .pic-up img,
.ContentWrap.roman5 .pic-up img
{
  width: 200px;
}

.ContentWrap.romero2 .pic-up img,
.ContentWrap.emprechu5 .pic-up img,
.ContentWrap.roman5 .pic-up img{
  width: 135px;
}

.ContentWrap.romero2 .pic-up img,
.ContentWrap.emprechu5 .pic-up img,
.ContentWrap.roman5 .pic-up img{
  width: 149px;
}


.ContentWrap .wrap.wrap-set {
  text-align: center;
  background-image: url(https://gigaplus.makeshop.jp/sdarts/project/valentine2025/img/all_01.png);
  background-repeat: no-repeat;
  background-size: 70%;
  background-position-x: -26%;
  background-position-y: 112%;
  padding-top: 40px;
  padding-bottom: 40px;
}


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

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

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

.wrap-set .font-sml.shippori{
  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 img {
  margin-bottom: 0.8rem;
  filter: drop-shadow(2px 2px 3px #00000025);
}

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

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

.ContentWrap .grid img{
  width: 430px;
}

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

.wrap-set .flex-text{
  font-size: 48px;
  padding-bottom: 24px;
}
.ContentWrap.footer .wrap{
  padding: 0;
}

.wrap-box.wrap-box--L.wrap.pouch{
  align-items: flex-start;
}

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




@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: center;
    background: var(--color-base-01);
  }

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

  .ContentWrap .wrap-box--L {
    /* align-items: flex-start; */
  }

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

  /* .ContentWrap .wrap-box > div {
    width: 60%;
  } */

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

  .romero2 .wrap-box--R .wrap-contents img,
  .emprechu5 .wrap-box--R .wrap-contents img,
  .roman5 .wrap-box--R .wrap-contents img {
    display: block;
    width: 100%;
    /* width: 39%; */
  }

  .emprechu5 .wrap-box--R .wrap-contents.pic-up img,
  .emprechu5 .wrap-box--R .wrap-contents.logo img{
    display: block;
    width: 75%;
  }


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

  .ContentWrap .wrap-contents {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 24px;
    padding-top: 32px;
  }

  .ContentWrap .wrap-contents:first-of-type{
    padding-top: 0;
  }

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

  .ContentWrap .wrap-box--L {
    /* justify-content: flex-end; */
    z-index: 1;
  }

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

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

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

  .ContentWrap .wrap-item h3 {
    padding-bottom: 0.8rem;
  }
  /* .ContentWrap .wrap-item p {
    padding-top: 0.8rem;
    line-height: 1.3rem;
  } */
  .ContentWrap .wrap-item--txt {
    margin-bottom: 2.4rem;

  }

  .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: 25%;
  }

  .wrap-set--flex-card {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

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

  .wrap-set--flex-card div {
    display: block;
    padding-left: 1.6rem;
    width: 25%;
  }

  .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:  2px 1px 7px 0px rgb(17 17 26 / 16%);
}

  .romero2 .wrap-item--button a:hover,
  .romero2 .wrap-item--button a:hover{
    background-color: #5c5c8f;
  }

  .emprechu5 .wrap-item--button a:hover,
  .emprechu5 .wrap-item--button a:hover{
    background-color: #749bbd;
  }

  .roman5 .wrap-item--button a:hover,
  .roman5 .wrap-item--button a:hover{
    background-color: #794530;
  }

  .pattern-B .wrap-item--button a:hover {
    transition: all 0.5s;
    background: #d4d3d3;
    box-shadow:  2px 1px 7px 0px rgb(17 17 26 / 16%);

  }

}

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

  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: 2rem;
  }

  .pc-view {
    display: none;
  }

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


  .ContentWrap .wrap-box {
    padding-top: 1.6rem;
    justify-content: space-between;
  }

  .ContentWrap.romero2,
  .ContentWrap.emprechu5,
  .ContentWrap.roman5 {
    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;
  }

  .romero2 .italic.wrap--right,
  .emprechu5 .italic.wrap--right,
  .roman5 .italic.wrap--right{
    font-size: 64px;
    line-height: 63px;
  }





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




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

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

  .emprechu5 .wrap-box--R .wrap-contents.pic-up img,
  .emprechu5 .wrap-box--R .wrap-contents.logo img{
    width: 50%;
  }

  .ContentWrap .wrap-contents.icon div, .ContentWrap .wrap-contents.logo div{
    margin-top: 32px;
  }

  .ContentWrap .barrel-detail{
    width: 58%;
    margin-top: 40px;
    margin-bottom: 40px;

  }

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


  .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: center;
  }

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



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

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

  .romero2 .wrap-box--L .wrap-contents img,
  .emprechu5 .wrap-box--L .wrap-contents img,
  .roman5 .wrap-box--L .wrap-contents img {
    margin-left: 0;
    width: 100%;
  }

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

  .ContentWrap .wrap-item h3 {
    padding-bottom: 0.4rem;
  }


  .wrap-item--button {
    margin-top: 1.6rem;
  }

  .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-card {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 1rem;
  }

  .wrap-set--flex-card div {
    width: 47%;
  }
  .wrap-set--flex-card img {
    margin-bottom: 0.4rem;
  }

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

  iframe {
    width: 100%;
  }

  .Valentine 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;
  }
  .wrap-item--button a::after{
    top: 1.2rem;
  }

  .wrap-set .flex-text{
    width: 100%;
    margin: 0 auto;
    flex-wrap: wrap;
    font-size: 40px;
    letter-spacing: 20px;
  }

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

  .wrap-set--flex-barrel img {
    width: 60%;
  }

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

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

  .ContentWrap .wrap.wrap-set{
    background-size: 171%;
    background-position-x: 60%;
    background-position-y: 107%;
    padding-top: 40px;
    padding-bottom: 309px;

  }

  .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 .sp-view{
    width: 100%;
    line-height: 59px;
    letter-spacing: -4px;
  }

  .ContentWrap.pattern-yt .bebas{
    padding-bottom: 0px;
    margin-top: 44px;
  }
  .wrap-set .font-sml.shippori{
    font-size:16px;
  }


  .ContentWrap .wrap-item h3{
    font-size: 31px;
    line-height: 38px;
  }
}

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


}