@charset "UTF-8";
body {
  background: #fffced;
  animation: fade 2.5s;
  animation-fill-mode: forwards; }

@keyframes fade {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
main {
  background: #fff;
  max-width: 700px;
  margin-inline: auto; }

img {
  width: 100%;
  vertical-align: bottom; }

.u-jp {
  font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; }

.u-sp {
  display: block; }
  @media (min-width: 700px) {
    .u-sp {
      display: none; } }

.u-pc {
  display: none; }
  @media (min-width: 700px) {
    .u-pc {
      display: block; } }

.c-sticky {
  position: sticky;
  top: 0;
  z-index: 0; }

.c-stickyBox {
  height: 100vh;
  width: 100vw;
  margin-left: -5.5%; }
  @media (min-width: 700px) {
    .c-stickyBox {
      width: 700px;
      margin-left: -50px; } }

.c-credit {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 600;
  line-height: 1.7;
  margin-top: 10px;
  text-transform: uppercase;
  z-index: 10;
  letter-spacing: 1px; }
  @media (min-width: 700px) {
    .c-credit {
      font-size: 14px; } }

.c-multiply {
  position: relative;
  mix-blend-mode: multiply;
  z-index: 10; }

.l-mv {
  background-image: url("https://img.ur-s.me/commerce/project/recommend_item/260227/mv_sp.jpg");
  height: 98vh;
  width: 100%;
  background-size: cover;
  background-position: center; }
  @media (min-width: 700px) {
    .l-mv {
      height: 100vh;
      background-image: url("https://img.ur-s.me/commerce/project/recommend_item/260227/mv_pc.jpg"); } }
  .l-mv .l-mv_logo {
    position: relative;
    left: 5%;
    top: 52%;
    width: 90%; }
    .l-mv .l-mv_logo .l-mv_logo__sub {
      width: 40%;
      right: 0;
      position: absolute;
      margin-top: 5px;
      animation: fade 2s;
      animation-fill-mode: forwards;
      animation-delay: 2.5s; }

.l-main {
  margin: 70px auto 0;
  width: 90%; }
  @media (min-width: 700px) {
    .l-main {
      width: 600px;
      margin-top: 100px; } }
  .l-main .p-haya {
    margin: -30px auto 70px;
    border: .5px solid #000;
    padding: 40px;
    font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
    font-size: 14px;
    text-align: center;
    width: 100%; }
    @media (min-width: 700px) {
      .l-main .p-haya {
        margin-bottom: 100px; } }
    .l-main .p-haya span {
      font-size: 17px; }
    .l-main .p-haya big {
      font-size: 26px; }
    .l-main .p-haya .p-haya_btn {
      position: relative;
      width: 150px;
      margin: 15px auto 0;
      font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
      background: transparent;
      border: .5px solid #000;
      cursor: pointer;
      transition: all 0.3s ease;
      padding: 10px 0 5px;
      text-align: center;
      z-index: 1;
      max-width: 400px; }
      .l-main .p-haya .p-haya_btn::after {
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        width: 100%;
        height: 100%;
        border: .5px solid #000;
        background: transparent;
        z-index: 0;
        transition: all 0.3s ease;
        pointer-events: none; }
      .l-main .p-haya .p-haya_btn:hover::after {
        top: 0px;
        left: 0px; }
  .l-main .p-style2, .l-main .p-style3, .l-main .p-style4, .l-main .p-style5, .l-main .p-style6, .l-main .p-style7, .l-main .p-style8, .l-main .p-style9, .l-main .p-style10, .l-main .p-style11 {
    margin-top: 100px; }
    @media (min-width: 700px) {
      .l-main .p-style2, .l-main .p-style3, .l-main .p-style4, .l-main .p-style5, .l-main .p-style6, .l-main .p-style7, .l-main .p-style8, .l-main .p-style9, .l-main .p-style10, .l-main .p-style11 {
        margin-top: 120px; } }
  .l-main .p-style1, .l-main .p-style2, .l-main .p-style3, .l-main .p-style4, .l-main .p-style5, .l-main .p-style6, .l-main .p-style7, .l-main .p-style8, .l-main .p-style9, .l-main .p-style10, .l-main .p-style11 {
    display: flex;
    flex-direction: column; }
  .l-main .p-style1 .c-switchImgBox {
    aspect-ratio: 904 / 1340; }
  .l-main .p-style1 .p-style1_sub {
    margin-top: 40px;
    width: 80%;
    margin-left: auto; }
    @media (min-width: 700px) {
      .l-main .p-style1 .p-style1_sub {
        margin-top: 70px; } }
  .l-main .p-style2 {
    margin-top: calc(-30vh + 100px); }
    @media (min-width: 700px) {
      .l-main .p-style2 {
        margin-top: calc(-22vh + 100px); } }
    .l-main .p-style2 .c-switchImgBox {
      aspect-ratio: 226 / 335; }
    .l-main .p-style2 .c-stickyBox {
      height: calc( 100vw * var(--bg-ratio) + (100vw * var(--sub2-ratio) / 2) ); }
    .l-main .p-style2 :root {
      --bg-ratio: 138 / 97;
      /* height / width */
      --sub2-ratio: 185 / 274; }
    .l-main .p-style2 .p-style2_sub1 {
      margin: 0 auto;
      width: 65%; }
    .l-main .p-style2 .p-style2_sub2 {
      margin: 40px auto 0;
      width: 65%; }
      @media (min-width: 700px) {
        .l-main .p-style2 .p-style2_sub2 {
          margin-top: 70px; } }
    .l-main .p-style2 .c-sticky {
      padding-top: 30vh; }
      @media (min-width: 700px) {
        .l-main .p-style2 .c-sticky {
          padding-top: 22vh; } }
    .l-main .p-style2 .p-style2_main {
      margin-top: 40px; }
      @media (min-width: 700px) {
        .l-main .p-style2 .p-style2_main {
          margin-top: 70px; } }
      .l-main .p-style2 .p-style2_main .c-imageWrapper {
        aspect-ratio: 23 / 34;
        width: 90vw; }
        @media (min-width: 700px) {
          .l-main .p-style2 .p-style2_main .c-imageWrapper {
            width: 600px; } }
  .l-main .p-style3 .c-switchImgBox {
    aspect-ratio: 185 / 274; }
  .l-main .p-style3 .p-style3_main {
    margin-bottom: 40px; }
    @media (min-width: 700px) {
      .l-main .p-style3 .p-style3_main {
        margin-bottom: 70px; } }
  .l-main .p-style4 .c-switchImgBox {
    aspect-ratio: 185 / 274; }
  .l-main .p-style4 .p-style4_sub1 {
    margin: 0 auto 40px;
    width: 65%; }
    @media (min-width: 700px) {
      .l-main .p-style4 .p-style4_sub1 {
        margin-bottom: 70px; } }
  .l-main .p-style4 .p-style4_sub2 {
    margin: 40px auto 0;
    width: 85%; }
    @media (min-width: 700px) {
      .l-main .p-style4 .p-style4_sub2 {
        margin-top: 70px; } }
  .l-main .p-style5 .c-switchImgBox {
    aspect-ratio: 320 / 417; }
  .l-main .p-style5 .p-style5_bg {
    margin-bottom: 40px;
    background-image: url(https://img.ur-s.me/commerce/project/recommend_item/260227/style5_bg.jpg);
    background-size: cover;
    background-position: center;
    width: 100vw;
    margin-left: -5.5%; }
    @media (min-width: 700px) {
      .l-main .p-style5 .p-style5_bg {
        width: 700px;
        margin-left: -50px;
        margin-bottom: 70px; } }
    .l-main .p-style5 .p-style5_bg .p-style5_bgImg {
      position: absolute;
      left: 0; }
    .l-main .p-style5 .p-style5_bg .p-style5_main {
      position: relative;
      margin: auto;
      padding: 45px; }
      @media (min-width: 700px) {
        .l-main .p-style5 .p-style5_bg .p-style5_main {
          padding: 75px; } }
  .l-main .p-style5 .p-style5_sub {
    width: 85%;
    margin-inline: auto; }
  .l-main .p-style6 .c-switchImgBox {
    aspect-ratio: 185 / 274; }
  .l-main .p-style6 .p-style6_main {
    margin-bottom: 40px; }
    @media (min-width: 700px) {
      .l-main .p-style6 .p-style6_main {
        margin-bottom: 70px; } }
  .l-main .p-style7 .p-style7_sub1 {
    width: 75%;
    margin: 40px auto; }
    @media (min-width: 700px) {
      .l-main .p-style7 .p-style7_sub1 {
        margin: 70px auto; } }
  .l-main .p-style7 .p-style7_sub2 {
    width: 90%;
    margin-inline: auto; }
  .l-main .p-style8 .p-style8_main {
    margin: 40px auto; }
    @media (min-width: 700px) {
      .l-main .p-style8 .p-style8_main {
        margin: 70px auto; } }
  .l-main .p-style8 .p-style8_sub1 {
    width: 80%;
    margin: 0 auto; }
  .l-main .p-style9 {
    margin-top: calc(-25vh + 100px); }
    .l-main .p-style9 .c-switchImgBox {
      aspect-ratio: 185 / 274; }
    .l-main .p-style9 .c-stickyBox {
      height: calc( 100vw * var(--bg-ratio) + (100vw * var(--sub-ratio) / 2) ); }
    .l-main .p-style9 :root {
      --bg-ratio: 23 / 15;
      /* height / width */
      --sub-ratio: 185 / 274; }
    .l-main .p-style9 .c-sticky {
      padding-top: 25vh;
      padding-bottom: 40px; }
      @media (min-width: 700px) {
        .l-main .p-style9 .c-sticky {
          padding-bottom: 70px; } }
    .l-main .p-style9 .p-style9_sub {
      width: 65%;
      margin: 0 auto;
      padding: 40px 0 200px; }
      @media (min-width: 700px) {
        .l-main .p-style9 .p-style9_sub {
          padding: 0px 0 70px; } }
  .l-main .p-style10 .c-switchImgBox {
    aspect-ratio: 185 / 274; }
  .l-main .p-style10 .p-style10_main {
    margin-bottom: 40px; }
    @media (min-width: 700px) {
      .l-main .p-style10 .p-style10_main {
        margin-bottom: 70px; } }
  .l-main .p-style11 .p-style11_sub2 {
    width: 70%;
    margin: 40px auto; }
    @media (min-width: 700px) {
      .l-main .p-style11 .p-style11_sub2 {
        margin: 70px auto; } }
  .l-main .p-btnArea {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 80px;
    align-items: center; }
    .l-main .p-btnArea .p-btnArea_inner {
      position: relative;
      width: 98%;
      font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
      background: transparent;
      border: .5px solid #000;
      cursor: pointer;
      transition: all 0.3s ease;
      padding: 25px 0 20px;
      text-align: center;
      z-index: 1;
      max-width: 400px; }
      @media (min-width: 700px) {
        .l-main .p-btnArea .p-btnArea_inner {
          padding: 30px 0 15px; } }
      .l-main .p-btnArea .p-btnArea_inner::after {
        content: "";
        position: absolute;
        top: 10px;
        left: 10px;
        width: 100%;
        height: 100%;
        border: .5px solid #000;
        background: transparent;
        z-index: 0;
        transition: all 0.3s ease;
        pointer-events: none; }
      .l-main .p-btnArea .p-btnArea_inner:hover::after {
        top: 0px;
        left: 0px; }

.l-brand {
  text-align: center;
  font-size: 10px;
  width: 100%;
  margin: 70px auto 0;
  padding-bottom: 20px;
  font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; }
  .l-brand .p-brandLogo {
    width: 80px;
    margin: 0 auto 10px; }
  .l-brand .l-brand_follow {
    font-size: 11px; }
  .l-brand .l-brand_container {
    display: flex;
    justify-content: center;
    font-size: 16px; }
    .l-brand .l-brand_container div {
      margin: 0 7px; }
  .l-brand .l-brand_copyright {
    font-size: 12px;
    margin: 10px auto 0; }

.js-fade {
  opacity: 0;
  transition: opacity 1s ease, transform 1s ease; }

/* 下からふわっ */
.fade-up {
  transform: translateY(100px); }

/* その場でふわっ */
.fade-in {
  transform: translateY(0); }

.js-fade.is-active {
  opacity: 1;
  transform: translateY(0); }

/***************************************************
 * Generated by SVG Artista on 2/3/2026, 6:42:54 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/
@-webkit-keyframes animate-svg-fill-1 {
  0% {
    fill: transparent; }
  100% {
    fill: #ffff90; } }
@keyframes animate-svg-fill-1 {
  0% {
    fill: transparent; }
  100% {
    fill: #ffff90; } }
.svg-elem-1 {
  -webkit-animation: animate-svg-fill-1 0.7s linear 0.8s both;
  animation: animate-svg-fill-1 0.7s linear 0.8s both; }

@-webkit-keyframes animate-svg-fill-2 {
  0% {
    fill: transparent; }
  100% {
    fill: #ffff90; } }
@keyframes animate-svg-fill-2 {
  0% {
    fill: transparent; }
  100% {
    fill: #ffff90; } }
.svg-elem-2 {
  -webkit-animation: animate-svg-fill-2 0.7s linear 0.9s both;
  animation: animate-svg-fill-2 0.7s linear 0.9s both; }

@-webkit-keyframes animate-svg-fill-3 {
  0% {
    fill: transparent; }
  100% {
    fill: #ffff90; } }
@keyframes animate-svg-fill-3 {
  0% {
    fill: transparent; }
  100% {
    fill: #ffff90; } }
.svg-elem-3 {
  -webkit-animation: animate-svg-fill-3 0.7s linear 1s both;
  animation: animate-svg-fill-3 0.7s linear 1s both; }

@-webkit-keyframes animate-svg-fill-4 {
  0% {
    fill: transparent; }
  100% {
    fill: #ffff90; } }
@keyframes animate-svg-fill-4 {
  0% {
    fill: transparent; }
  100% {
    fill: #ffff90; } }
.svg-elem-4 {
  -webkit-animation: animate-svg-fill-4 0.7s linear 1.1s both;
  animation: animate-svg-fill-4 0.7s linear 1.1s both; }

@-webkit-keyframes animate-svg-fill-5 {
  0% {
    fill: transparent; }
  100% {
    fill: #ffff90; } }
@keyframes animate-svg-fill-5 {
  0% {
    fill: transparent; }
  100% {
    fill: #ffff90; } }
.svg-elem-5 {
  -webkit-animation: animate-svg-fill-5 0.7s linear 1.2000000000000002s both;
  animation: animate-svg-fill-5 0.7s linear 1.2000000000000002s both; }

@-webkit-keyframes animate-svg-fill-6 {
  0% {
    fill: transparent; }
  100% {
    fill: #ffff90; } }
@keyframes animate-svg-fill-6 {
  0% {
    fill: transparent; }
  100% {
    fill: #ffff90; } }
.svg-elem-6 {
  -webkit-animation: animate-svg-fill-6 0.7s linear 1.3s both;
  animation: animate-svg-fill-6 0.7s linear 1.3s both; }

@-webkit-keyframes animate-svg-fill-7 {
  0% {
    fill: transparent; }
  100% {
    fill: #ffff90; } }
@keyframes animate-svg-fill-7 {
  0% {
    fill: transparent; }
  100% {
    fill: #ffff90; } }
.svg-elem-7 {
  -webkit-animation: animate-svg-fill-7 0.7s linear 1.4000000000000001s both;
  animation: animate-svg-fill-7 0.7s linear 1.4000000000000001s both; }

@-webkit-keyframes animate-svg-fill-8 {
  0% {
    fill: transparent; }
  100% {
    fill: #ffff90; } }
@keyframes animate-svg-fill-8 {
  0% {
    fill: transparent; }
  100% {
    fill: #ffff90; } }
.svg-elem-8 {
  -webkit-animation: animate-svg-fill-8 0.7s linear 1.5s both;
  animation: animate-svg-fill-8 0.7s linear 1.5s both; }

@-webkit-keyframes animate-svg-fill-9 {
  0% {
    fill: transparent; }
  100% {
    fill: #ffff90; } }
@keyframes animate-svg-fill-9 {
  0% {
    fill: transparent; }
  100% {
    fill: #ffff90; } }
.svg-elem-9 {
  -webkit-animation: animate-svg-fill-9 0.7s linear 1.6s both;
  animation: animate-svg-fill-9 0.7s linear 1.6s both; }

@-webkit-keyframes animate-svg-fill-10 {
  0% {
    fill: transparent; }
  100% {
    fill: #ffff90; } }
@keyframes animate-svg-fill-10 {
  0% {
    fill: transparent; }
  100% {
    fill: #ffff90; } }
.svg-elem-10 {
  -webkit-animation: animate-svg-fill-10 0.7s linear 1.7000000000000002s both;
  animation: animate-svg-fill-10 0.7s linear 1.7000000000000002s both; }

.c-switchImgBox {
  position: relative; }

.c-switchImgBox img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: opacity 0.8s;
  touch-action: pan-y;
  /* 縦スクロールを殺さない */
  object-fit: cover; }

.c-switchImgBox .git-image {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0; }