@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400;1,700&display=swap");
.mod-en {
  font-family: "Roboto Condensed";
}

.mod-min {
  font-family: "Noto Serif JP";
}

.mod-en-min {
  font-family: "Amiri";
}

article {
  color: #000;
}
article a {
  color: #000;
}
article img {
  width: 100%;
}
article a {
  display: block;
}
article h2, article h3 {
  margin: 0;
}

@media print, screen and (min-width: 1024px) {
  .block-wrap {
    position: relative;
    -webkit-font-smoothing: antialiased;
  }
  .block-wrap img {
    width: 100%;
  }
  .block-wrap h2, .block-wrap h3, .block-wrap h4, .block-wrap p {
    margin: 0;
  }
  .block-wrap sup {
    font-size: 50%;
  }
  .block-wrap img {
    width: 100%;
  }
  /* ----------------------------------------------------------
  block-mv
  ---------------------------------------------------------- */
  .block-mv {
    position: relative;
    visibility: hidden;
  }
  body.is-intro-loaded .block-mv {
    visibility: visible;
  }
  .block-mv ._bg {
    background-color: #000;
    height: 48.75vw;
    overflow: hidden;
  }
  .block-mv ._bg iframe {
    width: 100vw;
    height: 76vw;
    pointer-events: none;
    transform: scale(1.02) translate(0, -10vw);
  }
  .block-mv ._texts {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .block-mv ._logo {
    width: 21.25vw;
    opacity: 0;
    transition-duration: 0.4s;
    transition-delay: 1s;
    transition-property: opacity;
  }
  body.is-intro-loaded .block-mv ._logo {
    opacity: 1;
  }
  /* ----------------------------------------------------------
  block-lead
  ---------------------------------------------------------- */
  .block-lead {
    padding: 5.5555555556vw 0 5vw 0;
    position: relative;
    text-align: center;
  }
  .block-lead ._lead {
    width: 28.4722222222vw;
    margin: 0 auto;
  }
  .block-lead ._texts {
    margin-top: 3.9583333333vw;
    display: flex;
    gap: 1.7361111111vw;
    flex-direction: column;
  }
  .block-lead p {
    font-size: 1.0416666667vw;
    text-align: center;
    line-height: 2;
    letter-spacing: 0.08em;
    color: #000;
  }
  /* ----------------------------------------------------------
  block-announce
  ---------------------------------------------------------- */
  .block-announce {
    position: relative;
    padding: 5.9027777778vw 0 6.5277777778vw 0;
  }
  .block-announce ._bar {
    display: block;
    position: absolute;
    top: 0;
    left: 35vw;
    width: 30vw;
    height: 1px;
    background: #000;
    opacity: 0;
    transition-duration: 1s;
    transition-delay: 0.4s;
    transition-property: left, width, opacity;
  }
  .block-announce ._bar.js-active {
    left: 4.16vw;
    width: 91.68vw;
    opacity: 1;
  }
  .block-announce ._texts {
    display: flex;
    gap: 2.0833333333vw;
    flex-direction: column;
    align-items: center;
  }
  .block-announce ._texts:after {
    content: "";
    display: block;
    margin: 0 auto;
    width: 5.5555555556vw;
    height: 1px;
    background: #000000;
    margin-top: 1.3888888889vw;
  }
  .block-announce ._texts ._date {
    width: 5.5555555556vw;
  }
  .block-announce ._texts ._lead {
    width: 23.9583333333vw;
  }
  .block-announce ._texts2 {
    margin-top: 3.4722222222vw;
    display: flex;
    gap: 1.3888888889vw;
    flex-direction: column;
    align-items: center;
  }
  .block-announce ._texts2 ._ti {
    font-size: 1.9444444444vw;
    text-align: center;
    font-weight: 400;
    font-style: italic;
    line-height: 1;
    letter-spacing: 0.06em;
    color: #000;
  }
  .block-announce ._texts2 ._lead {
    font-size: 1.0416666667vw;
    text-align: center;
    line-height: 2;
    letter-spacing: 0.08em;
    color: #000;
  }
  .block-announce ._products {
    width: 64.5833333333vw;
    margin: 0 auto;
    margin-top: 3.4722222222vw;
  }
  .block-announce ._btns {
    margin-top: 4.1666666667vw;
    text-align: center;
  }
  /* ----------------------------------------------------------
  block-scene1
  ---------------------------------------------------------- */
  .block-scene1 {
    position: relative;
    border-top: 2px solid #000;
  }
  .block-scene1 ._state {
    position: absolute;
    top: 0px;
    left: 0px;
    display: none;
  }
  .block-scene1:before {
    content: "";
    display: block;
    position: absolute;
    top: 5px;
    left: 0px;
    right: 0;
    height: 20px;
    border-top: 2px solid #000;
  }
  .block-scene1:after {
    display: block;
    content: "";
    padding-top: 114.9249583102%;
  }
  .block-scene1 ._btns {
    position: absolute;
    top: 93.5%;
    left: 0;
    right: 0;
    text-align: center;
  }
  .block-scene1 ._p1 {
    position: absolute;
    top: 10.04%;
    left: 20.81%;
    width: 58.37%;
    height: 33.86%;
  }
  .block-scene1 ._copy1 {
    position: absolute;
    top: 11.55%;
    left: 22.22%;
  }
  .block-scene1 ._p2 {
    position: absolute;
    top: 70.12%;
    left: 15.27%;
    width: 34.32%;
    height: 19.95%;
  }
  .block-scene1 ._p3 {
    position: absolute;
    top: 70.24%;
    left: 50.4%;
    width: 34.12%;
    height: 19.83%;
  }
  .block-scene1 ._title {
    position: absolute;
    top: 4.8%;
    left: 83.03%;
  }
  .block-scene1 ._title h2 {
    font-size: 2.6388888889vw;
    line-height: 1;
    font-style: italic;
    letter-spacing: 0.04em;
    writing-mode: vertical-rl;
  }
  .block-scene1 ._film {
    position: absolute;
    top: 48%;
    left: 0;
    right: 0;
    height: 25.37%;
    overflow: hidden;
  }
  .block-scene1 ._film ._img {
    margin-left: -5vw;
    max-width: auto;
    width: 230vw;
    height: 20vw;
    background-image: url(/starbucks-stand-by-beams/core/images/scenes/scene1_2.webp);
    background-repeat: repeat-x;
    background-size: 25% auto;
    transform: rotate(-5deg);
    animation: keyf_film 20s linear 0s infinite;
  }
  @keyframes keyf_film {
    0% {
      background-position-x: 0%;
    }
    100% {
      background-position-x: -100%;
    }
  }
  /* ----------------------------------------------------------
  block-scene2
  ---------------------------------------------------------- */
  .block-scene2 {
    position: relative;
  }
  .block-scene2 ._state {
    position: absolute;
    top: 0px;
    left: 0px;
    display: none;
  }
  .block-scene2 ._bar {
    display: block;
    position: absolute;
    top: 0;
    left: 35vw;
    width: 30vw;
    height: 1px;
    background: #000;
    opacity: 0;
    transition-duration: 1s;
    transition-delay: 0.4s;
    transition-property: left, width, opacity;
  }
  .block-scene2 ._bar.js-active {
    left: 4.16vw;
    width: 91.68vw;
    opacity: 1;
  }
  .block-scene2:after {
    display: block;
    content: "";
    padding-top: 327.4735964425%;
  }
  .block-scene2 ._p1 {
    position: absolute;
    top: 2.97%;
    left: 7.64%;
    width: 84.77%;
    height: 15.28%;
  }
  .block-scene2 ._p2 {
    position: absolute;
    top: 20.37%;
    left: 13.2%;
    width: 31.27%;
    height: 14.32%;
  }
  .block-scene2 ._p3 {
    position: absolute;
    top: 22.53%;
    left: 58.02%;
    width: 26.4%;
    height: 9.78%;
  }
  .block-scene2 ._p4 {
    position: absolute;
    top: 37.94%;
    left: 25.01%;
    width: 31.96%;
    height: 6.49%;
  }
  .block-scene2 ._p5 {
    position: absolute;
    top: 46.13%;
    left: 41.48%;
    width: 29.88%;
    height: 13.71%;
  }
  .block-scene2 ._p7 {
    position: absolute;
    top: 61.96%;
    left: 56.98%;
    width: 31.27%;
    height: 14.32%;
  }
  .block-scene2 ._p6 {
    position: absolute;
    top: 64.5%;
    left: 13.2%;
    width: 31.27%;
    height: 14.32%;
  }
  .block-scene2 ._p8 {
    position: absolute;
    top: 82.01%;
    left: 20.84%;
    width: 58.37%;
    height: 13.66%;
  }
  .block-scene2 ._copy1 {
    position: absolute;
    top: 1.71%;
    left: 7.62%;
  }
  .block-scene2 ._copy2 {
    position: absolute;
    top: 35.98%;
    left: 53.22%;
  }
  .block-scene2 ._copy3 {
    position: absolute;
    top: 50.88%;
    left: 34.46%;
  }
  .block-scene2 ._copy4 {
    position: absolute;
    top: 77.67%;
    left: 49.9%;
  }
  .block-scene2 ._btns {
    position: absolute;
    top: 96.5%;
    left: 0;
    right: 0;
    text-align: center;
  }
  .block-scene2 ._p1 ._in {
    width: 100%;
    height: 100%;
  }
  .block-scene2 ._p1 ._image {
    background-image: url("/starbucks-stand-by-beams/core/images/scenes/scene2_1.webp");
    background-size: cover;
    width: 100%;
    height: 100%;
  }
  /* ----------------------------------------------------------
  block-scene3
  ---------------------------------------------------------- */
  .block-scene3 {
    margin-top: -2px;
    position: relative;
    background-color: #7D4E22;
  }
  .block-scene3 ._state {
    position: absolute;
    top: 0px;
    left: 0px;
    display: none;
  }
  .block-scene3:after {
    display: block;
    content: "";
    padding-top: 156.0416666667%;
  }
  .block-scene3 ._p5 {
    position: absolute;
    top: 58.92%;
    left: 7.64%;
    width: 84.72%;
    height: 32.04%;
  }
  .block-scene3 ._copy1 {
    position: absolute;
    top: 1.81%;
    left: 69.84%;
  }
  .block-scene3 ._copy2 {
    position: absolute;
    top: 60.2%;
    left: 9.65%;
  }
  .block-scene3 ._p1 {
    position: absolute;
    top: 6.85%;
    left: 0%;
    width: 50%;
    height: 21.36%;
  }
  .block-scene3 ._p2 {
    position: absolute;
    top: 6.85%;
    left: 50%;
    width: 50%;
    height: 21.36%;
  }
  .block-scene3 ._p3 {
    position: absolute;
    top: 31.78%;
    left: 7.64%;
    width: 37.5%;
    height: 16.02%;
  }
  .block-scene3 ._p4 {
    position: absolute;
    top: 40.68%;
    left: 56.25%;
    width: 30.21%;
    height: 12.91%;
  }
  .block-scene3 ._btns {
    position: absolute;
    top: 92.8%;
    left: 0;
    right: 0;
    text-align: center;
  }
  .block-scene3 ._p5 ._in {
    width: 100%;
    height: 100%;
  }
  .block-scene3 ._p5 ._image {
    background-image: url("/starbucks-stand-by-beams/core/images/scenes/scene3_5.webp");
    background-size: cover;
    width: 100%;
    height: 100%;
  }
  /* ----------------------------------------------------------
  block-scene4
  ---------------------------------------------------------- */
  .block-scene4 {
    position: relative;
  }
  .block-scene4 ._state {
    position: absolute;
    top: 0px;
    left: 0px;
    display: none;
  }
  .block-scene4:after {
    display: block;
    content: "";
    padding-top: 122.2916666667%;
  }
  .block-scene4 ._copy1 {
    position: absolute;
    top: 23.26%;
    left: 33.95%;
  }
  .block-scene4 ._p5 {
    position: absolute;
    top: 47.64%;
    left: 7.64%;
    width: 84.72%;
    height: 40.89%;
  }
  .block-scene4 ._p2 {
    position: absolute;
    top: 18.85%;
    left: 28.75%;
    width: 18.33%;
    height: 22.54%;
  }
  .block-scene4 ._p1 {
    position: absolute;
    top: 7.44%;
    left: 10.07%;
    width: 16.18%;
    height: 19.88%;
  }
  .block-scene4 ._p4 {
    position: absolute;
    top: 8.4%;
    left: 64.93%;
    width: 25.07%;
    height: 30.72%;
  }
  .block-scene4 ._p3 {
    position: absolute;
    top: 6.93%;
    left: 53.68%;
    width: 12.71%;
    height: 15.56%;
  }
  .block-scene4 ._btns {
    position: absolute;
    top: 91%;
    left: 0;
    right: 0;
    text-align: center;
  }
  .block-scene4 ._p5 ._in {
    width: 100%;
    height: 100%;
  }
  .block-scene4 ._p5 ._image {
    background-image: url("/starbucks-stand-by-beams/core/images/scenes/scene4_5.webp");
    background-size: cover;
    width: 100%;
    height: 100%;
  }
  /* ----------------------------------------------------------
  block-item_list
  ---------------------------------------------------------- */
  .block-item_list {
    position: relative;
    border-top: 0.1388888889vw solid #000;
    padding: 4.5138888889vw 0 3.8194444444vw 0;
  }
  .block-item_list:before {
    content: "";
    display: block;
    position: absolute;
    top: 0.3472222222vw;
    left: 0;
    right: 0;
    height: 1.3888888889vw;
    border-top: 0.1388888889vw solid #000;
  }
  .block-item_list ._row-main h2 {
    margin: 0 0 0 4.1666666667vw;
    font-size: 2.5vw;
    font-style: italic;
    letter-spacing: 0.04em;
    line-height: 1.2;
  }
  .block-item_list ._row-main h3 {
    margin: 0 0 0 4.1666666667vw;
    padding: 0 0 0 1.3888888889vw;
    font-size: 1.9444444444vw;
    font-style: italic;
    letter-spacing: 0.04em;
    line-height: 1.2;
    position: relative;
  }
  .block-item_list ._row-main h3:after {
    content: "";
    display: block;
    position: absolute;
    top: 45%;
    left: 0;
    width: 0.8333333333vw;
    height: 1px;
    background: #000;
  }
  .block-item_list ._row-main ._title {
    display: flex;
    gap: 1.3888888889vw;
    flex-direction: column;
  }
  .block-item_list ._row-main ._title2 {
    padding: 4.1666666667vw 0 0 0;
  }
  .block-item_list ._row-main ._list {
    margin-top: 0.8333333333vw;
  }
  .block-item_list ._row-announce {
    padding: 4.5138888889vw 0 2.7777777778vw 0;
  }
  .block-item_list ._row-announce ._title {
    display: flex;
    gap: 2.0833333333vw;
    flex-direction: column;
    align-items: center;
  }
  .block-item_list ._row-announce ._title ._date {
    width: 5.4861111111vw;
  }
  .block-item_list ._row-announce ._title ._copy {
    width: 20.9027777778vw;
  }
  .block-item_list ._row-announce ._list {
    margin-top: 3.125vw;
    padding-left: 27.4305555556vw;
    width: 45.1388888889vw;
    display: flex;
    gap: 20px;
    flex-direction: column;
  }
  .block-item_list ._row-announce ._list p {
    margin: 0.6944444444vw 0;
    font-size: 0.8333333333vw;
  }
  .block-item_list ._row-announce ._list p._note {
    font-size: 0.6944444444vw;
  }
  .block-item_list ._row-announce ._btns {
    margin-top: 2.7777777778vw;
    text-align: center;
  }
  .mod-list li {
    font-size: 0.8333333333vw;
    line-height: 1.83;
    letter-spacing: 0.06em;
    color: #000;
    padding-left: 1.0416666667vw;
    position: relative;
  }
  .mod-list li:after {
    content: "※";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }
  .mod-itemlist-items {
    border-top: 1px solid #D5D5D5;
    display: flex;
    flex-wrap: wrap;
  }
  .mod-itemlist-items > li {
    position: relative;
    width: 20%;
    border-bottom: 1px solid #D5D5D5;
  }
  .mod-itemlist-items > li:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    bottom: 0;
    background: #D5D5D5;
  }
  .mod-itemlist-items > li:nth-child(5n+1):after {
    display: none;
  }
  .mod-itemlist-item {
    display: block;
    position: relative;
    padding: 1.6666666667vw 1.6666666667vw 2.7777777778vw 1.6666666667vw;
  }
  .mod-itemlist-item img {
    width: 100%;
  }
  .mod-itemlist-item.is-goods ._item-texts {
    height: 5.4861111111vw;
  }
  .mod-itemlist-item ._item-image {
    transition-property: transform;
    transition-duration: 0.2s;
  }
  .mod-itemlist-item ._item-image img {
    width: 16.6666666667vw;
  }
  .mod-itemlist-item ._item-texts {
    margin-top: 0.6944444444vw;
    padding: 0 0.4861111111vw;
    height: 7.2222222222vw;
  }
  .mod-itemlist-item ._item-texts ._name {
    font-size: 1.0416666667vw;
    line-height: 1.66;
    letter-spacing: 0.08em;
  }
  .mod-itemlist-item ._item-texts ._price {
    margin-top: 0.4861111111vw;
    font-size: 1.0416666667vw;
    line-height: 1.33;
    letter-spacing: 0.08em;
  }
  .mod-itemlist-item ._item-texts ._size {
    margin-top: 0.4861111111vw;
    font-size: 1.0416666667vw;
    font-weight: 300;
    line-height: 1.33;
    letter-spacing: 0.08em;
  }
  .mod-itemlist-item ._item-btns {
    margin-top: 20px;
    padding: 0 0.4861111111vw;
  }
  .mod-itemlist-item:hover ._item-image {
    transform: scale(1.05);
  }
  .mod-itemlist-item:hover .mod-btn-buy {
    background-color: #fff;
    color: #003E28;
  }
  .mod-itemlist-item:hover .mod-btn-buy:before {
    border-color: #003E28;
  }
  /* ----------------------------------------------------------
  block-shop
  ---------------------------------------------------------- */
  .block-shop {
    position: relative;
    border-top: 0.1388888889vw solid #000;
    padding: 4.1666666667vw 4.1666666667vw 6.5972222222vw 4.1666666667vw;
  }
  .block-shop:before {
    content: "";
    display: block;
    position: absolute;
    top: 0.3472222222vw;
    left: 0;
    right: 0;
    height: 1.3888888889vw;
    border-top: 0.1388888889vw solid #000;
  }
  .block-shop h2 {
    font-size: 2.5vw;
    font-style: italic;
    letter-spacing: 0.04em;
    line-height: 1.2;
  }
  .block-shop ._name h3 {
    font-size: 1.8055555556vw;
    font-style: italic;
    letter-spacing: 0.04em;
    line-height: 1.2;
  }
  .block-shop ._body {
    margin-top: 0.6944444444vw;
    margin-left: 17.7083333333vw;
  }
  .block-shop ._pagetop {
    margin-top: 2.9166666667vw;
    text-align: right;
  }
  .mod-dl {
    display: flex;
  }
  .mod-dl dt {
    width: 3.125vw;
    font-size: 0.9722222222vw;
    font-weight: 300;
    letter-spacing: 0.08em;
  }
  .mod-dl dd {
    font-size: 0.9722222222vw;
    font-weight: 300;
    letter-spacing: 0.08em;
  }
  .mod-shop-col {
    display: flex;
    gap: 2.7777777778vw;
    align-items: flex-end;
  }
  .mod-shop-col ._col-image {
    width: 27.0833333333vw;
  }
  .mod-shop-col ._col-texts {
    flex: 1;
  }
  .mod-shop-col ._col-texts ._add {
    margin-top: 0.3472222222vw;
    font-size: 0.9722222222vw;
    font-weight: 300;
    line-height: 1.57;
    letter-spacing: 0.08em;
    color: #252525;
  }
  .mod-shop-col ._col-texts ._dl {
    margin-top: 0.3472222222vw;
  }
  .mod-shop-col ._col-texts ._btns {
    margin-top: 0.4861111111vw;
  }
  .mod-deco {
    pointer-events: none;
  }
  .mod-hover {
    display: block;
    cursor: pointer;
  }
  .mod-hover:hover {
    opacity: 0.8;
  }
  .mod-btn-item-fix {
    position: fixed;
    right: 4.1666666667vw;
    bottom: 2.5vw;
    z-index: 20;
    visibility: hidden;
    opacity: 0;
    transition-duration: 0.2s;
    transition-property: visibility, opacity;
  }
  body.js-item-btn-start .mod-btn-item-fix {
    visibility: visible;
    opacity: 1;
  }
  body.js-item-btn-start.js-item-btn-end .mod-btn-item-fix {
    visibility: hidden;
    opacity: 0;
  }
  .mod-btn-item {
    display: inline-block;
    border: 1px solid #fff;
    background-color: #003E28;
    color: #fff;
    padding: 0.4861111111vw 0;
    font-size: 1.1111111111vw;
    font-family: "Roboto Condensed";
    line-height: 1;
    letter-spacing: 0.08em;
    width: 11.1111111111vw;
    text-align: center;
    box-sizing: border-box;
    border-radius: 3.4722222222vw;
    position: relative;
    cursor: pointer;
    transition-duration: 0.2s;
    transition-property: background-color, color, border-color;
  }
  .mod-btn-item:hover {
    background-color: #fff;
    color: #003E28;
  }
  .mod-btn-item:hover:before {
    border-color: #003E28;
  }
  .mod-btn-item:before {
    position: absolute;
    top: 48%;
    right: 1.25vw;
    display: block;
    content: "";
    height: 0.3472222222vw;
    width: 0.3472222222vw;
    border: 1px solid #fff;
    border-right-width: 0;
    border-top-width: 0;
    transform: translate(0, -50%) rotate(-45deg);
  }
  .mod-btn-buy {
    display: block;
    border: 1px solid #003E28;
    background-color: #003E28;
    border-radius: 3.4722222222vw;
    font-size: 1.1111111111vw;
    font-family: "Roboto Condensed";
    text-align: center;
    letter-spacing: 0.14em;
    color: #fff;
    transition-duration: 0.2s;
    transition-property: background-color, color, border-color;
    position: relative;
  }
  .mod-btn-buy:before {
    position: absolute;
    top: 50%;
    right: 0.8333333333vw;
    display: block;
    content: "";
    height: 0.3472222222vw;
    width: 0.3472222222vw;
    border: 1px solid #fff;
    border-left-width: 0;
    border-top-width: 0;
    transform: translate(0, -50%) rotate(-45deg);
  }
  .mod-btn-styling {
    display: inline-block;
    font-size: 1.1111111111vw;
    font-family: "Roboto Condensed";
    text-align: center;
    line-height: 1.25;
    letter-spacing: 0.08em;
    color: #003e28;
    padding: 0.6944444444vw;
    cursor: pointer;
    transition-duration: 0.2s;
    transition-property: opacity;
  }
  .mod-btn-styling.is-wh {
    color: #fff;
  }
  .mod-btn-styling:hover {
    opacity: 0.7;
  }
  .mod-btn-top {
    display: inline-block;
    font-size: 0.9722222222vw;
    font-family: "Roboto Condensed";
    text-align: right;
    line-height: 1.07;
    letter-spacing: 0.08em;
    color: #003e28;
    padding-right: 1.0416666667vw;
    position: relative;
    cursor: pointer;
    transition-duration: 0.2s;
    transition-property: opacity;
  }
  .mod-btn-top:before {
    position: absolute;
    top: 55%;
    right: 0;
    display: block;
    content: "";
    height: 0.2083333333vw;
    width: 0.2083333333vw;
    border: 1px solid #003e28;
    border-left-width: 0;
    border-bottom-width: 0;
    transform: translate(0, -50%) rotate(-45deg);
  }
  .mod-btn-top:hover {
    opacity: 0.7;
  }
  .mod-btn-online {
    display: inline-block;
    border: 1px solid #003E28;
    background-color: #003E28;
    border-radius: 3.4722222222vw;
    padding: 0.3472222222vw 2.7777777778vw;
    font-size: 1.1111111111vw;
    font-family: "Roboto Condensed";
    text-align: center;
    letter-spacing: 0.1em;
    color: #fff;
    position: relative;
    cursor: pointer;
    transition-duration: 0.2s;
    transition-property: background-color, color;
  }
  .mod-btn-online:hover {
    background-color: #fff;
    color: #003E28;
  }
  .mod-btn-online:hover:before {
    border-color: #003E28;
  }
  .mod-btn-online:before {
    position: absolute;
    top: 50%;
    right: 0.8333333333vw;
    display: block;
    content: "";
    height: 0.3472222222vw;
    width: 0.3472222222vw;
    border: 1px solid #fff;
    border-left-width: 0;
    border-top-width: 0;
    transform: translate(0, -50%) rotate(-45deg);
  }
  .mod-btn-map {
    display: inline-block;
    border: 1px solid #003E28;
    background-color: #003E28;
    border-radius: 3.4722222222vw;
    padding: 0.2083333333vw 0.9722222222vw 0.1388888889vw 0.9722222222vw;
    font-size: 0.9722222222vw;
    font-family: "Roboto Condensed";
    text-align: center;
    letter-spacing: 0.1em;
    color: #fff;
    position: relative;
    cursor: pointer;
    transition-duration: 0.2s;
    transition-property: background-color, color;
  }
  .mod-btn-map:hover {
    background-color: #fff;
    color: #003E28;
  }
  .mod-auto-image img {
    width: 100%;
  }
  .mod-auto-image ._item {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    opacity: 0;
    transition-timing-function: linear;
    transition-duration: 1s;
    transition-property: opacity;
  }
  .mod-auto-image ._item.is-current {
    opacity: 1;
    z-index: 10;
  }
  .mod-slide-texts div {
    overflow: hidden;
  }
  .mod-slide-texts div span {
    display: block;
    font-size: 1.1805555556vw;
    line-height: 1.2;
    font-style: italic;
    letter-spacing: 0.04em;
    transition-duration: 0.6s;
    transition-timing-function: cubic-bezier(0.21, 0.69, 0.305, 0.945);
    transition-property: transform;
    transform-origin: left top;
    transform: translate(0, 1.2vw) skew(3deg);
  }
  .mod-slide-texts div span.is-wh {
    color: #fff;
  }
  .mod-slide-texts div:nth-child(1) span {
    transition-delay: 0.6s;
  }
  .mod-slide-texts div:nth-child(2) span {
    transition-delay: 0.8s;
  }
  .mod-slide-texts div:nth-child(3) span {
    transition-delay: 1s;
  }
  .mod-slide-texts.is-delay div:nth-child(1) span {
    transition-delay: 1.6s;
  }
  .mod-slide-texts.is-delay div:nth-child(2) span {
    transition-delay: 1.8s;
  }
  .mod-slide-texts.is-delay div:nth-child(3) span {
    transition-delay: 2s;
  }
  .mod-slide-texts.js-active span {
    transform: translate(0, 0) skewY(0);
  }
  .mod-slide-texts-v {
    display: flex;
    flex-direction: row-reverse;
  }
  .mod-slide-texts-v div {
    overflow: hidden;
  }
  .mod-slide-texts-v div span {
    display: block;
    font-size: 1.1805555556vw;
    line-height: 1.2;
    font-style: italic;
    letter-spacing: 0.04em;
    writing-mode: vertical-rl;
    transition-duration: 0.6s;
    transition-timing-function: cubic-bezier(0.21, 0.69, 0.305, 0.945);
    transition-property: transform;
    transform-origin: left top;
    transform: translate(-1.2vw, 0) skewX(-3deg);
  }
  .mod-slide-texts-v div:nth-child(1) span {
    transition-delay: 0.6s;
  }
  .mod-slide-texts-v div:nth-child(2) span {
    transition-delay: 0.8s;
  }
  .mod-slide-texts-v div:nth-child(3) span {
    transition-delay: 1s;
  }
  .mod-slide-texts-v.js-active span {
    transform: translate(0, 0) skewX(0);
  }
  .mod-split-image {
    position: relative;
  }
  .mod-split-image.is-1 {
    width: 58.3333333333vw;
    height: 38.8888888889vw;
  }
  .mod-split-image.is-1 ._img {
    background-image: url(/starbucks-stand-by-beams/core/images/scenes/scene1_1.webp);
  }
  .mod-split-image.is-2 {
    width: 58.3333333333vw;
    height: 44.7222222222vw;
  }
  .mod-split-image.is-2 ._img {
    background-image: url(/starbucks-stand-by-beams/core/images/scenes/scene2_8.webp);
  }
  .mod-split-image ._img {
    position: absolute;
    top: 0px;
    left: 0px;
    background-size: 300% 200%;
    width: 33.3333333333%;
    height: 50%;
  }
  .mod-split-image ._11 {
    top: 0%;
    left: 0%;
    background-position: 0 0;
  }
  .mod-split-image ._12 {
    top: 0%;
    left: 33.3333333333%;
    background-position: 50% 0;
  }
  .mod-split-image ._13 {
    top: 0%;
    left: 66.6666666667%;
    background-position: 100% 0;
  }
  .mod-split-image ._21 {
    top: 50%;
    left: 0%;
    background-position: 0 100%;
  }
  .mod-split-image ._22 {
    top: 50%;
    left: 33.3333333333%;
    background-position: 50% 100%;
  }
  .mod-split-image ._23 {
    top: 50%;
    left: 66.6666666667%;
    background-position: 100% 100%;
  }
  .mod-anim-split ._img {
    transition-delay: 0.16s;
    transition-duration: 0.3s;
    transition-property: opacity;
    opacity: 0;
  }
  .mod-anim-split.js-active .is-1 {
    transition-delay: 0.2s;
  }
  .mod-anim-split.js-active .is-2 {
    transition-delay: 0.4s;
  }
  .mod-anim-split.js-active .is-3 {
    transition-delay: 0.6s;
  }
  .mod-anim-split.js-active .is-4 {
    transition-delay: 0.8s;
  }
  .mod-anim-split.js-active .is-5 {
    transition-delay: 1s;
  }
  .mod-anim-split.js-active .is-6 {
    transition-delay: 1.2s;
  }
  .mod-anim-split.js-active ._img {
    opacity: 1;
  }
  .mod-anim-pc {
    transition-duration: 0.7s;
    transition-property: opacity, transform;
  }
  .mod-anim-pc.is-fade {
    opacity: 0;
  }
  .mod-anim-pc.is-fade.js-active {
    opacity: 1;
  }
  .mod-anim-pc.is-top {
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
    transform: translate(0, -3vw);
  }
  .mod-anim-pc.is-top.js-active {
    opacity: 1;
    transform: translate(0, 0);
  }
  .mod-anim-pc.is-bottom {
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
    transform: translate(0, 2.5vw);
  }
  .mod-anim-pc.is-bottom.js-active {
    opacity: 1;
    transform: translate(0, 0);
  }
  .mod-anim-pc.is-fade-left {
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
    transform: translate(-2vw, 0);
  }
  .mod-anim-pc.is-fade-left.js-active {
    opacity: 1;
    transform: translate(0, 0);
  }
  .mod-anim-pc.is-right {
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
    transform: translate(2.5vw, 0);
  }
  .mod-anim-pc.is-right.js-active {
    opacity: 1;
    transform: translate(0, 0);
  }
  .mod-anim-pc.is-left {
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
    transform: translate(-2.5vw, 0);
  }
  .mod-anim-pc.is-left.js-active {
    opacity: 1;
    transform: translate(0, 0);
  }
  .mod-anim-pc.is-zoom {
    transition-duration: 0.8s;
    transform: scale(0.8);
    transform-origin: center center;
    opacity: 0;
  }
  .mod-anim-pc.is-zoom.js-active {
    transform: scale(1);
    opacity: 1;
  }
  .mod-anim.is-delay-0,
  .mod-anim-pc.is-delay-0 {
    transition-delay: 0s;
  }
  .mod-anim.is-delay-1,
  .mod-anim-pc.is-delay-1 {
    transition-delay: 0.1s;
  }
  .mod-anim.is-delay-2,
  .mod-anim-pc.is-delay-2 {
    transition-delay: 0.2s;
  }
  .mod-anim.is-delay-3,
  .mod-anim-pc.is-delay-3 {
    transition-delay: 0.3s;
  }
  .mod-anim.is-delay-4,
  .mod-anim-pc.is-delay-4 {
    transition-delay: 0.4s;
  }
  .mod-anim.is-delay-5,
  .mod-anim-pc.is-delay-5 {
    transition-delay: 0.5s;
  }
  .mod-anim.is-delay-6,
  .mod-anim-pc.is-delay-6 {
    transition-delay: 0.6s;
  }
  .mod-anim.is-delay-7,
  .mod-anim-pc.is-delay-7 {
    transition-delay: 0.7s;
  }
  .mod-anim.is-delay-8,
  .mod-anim-pc.is-delay-8 {
    transition-delay: 0.8s;
  }
  .mod-anim.is-delay-9,
  .mod-anim-pc.is-delay-9 {
    transition-delay: 0.9s;
  }
  .mod-anim.is-delay-10,
  .mod-anim-pc.is-delay-10 {
    transition-delay: 1s;
  }
  .mod-anim.is-delay-11,
  .mod-anim-pc.is-delay-11 {
    transition-delay: 1.1s;
  }
  .mod-anim.is-delay-12,
  .mod-anim-pc.is-delay-12 {
    transition-delay: 1.2s;
  }
  .mod-anim.is-delay-13,
  .mod-anim-pc.is-delay-13 {
    transition-delay: 1.3s;
  }
  .mod-anim.is-delay-14,
  .mod-anim-pc.is-delay-14 {
    transition-delay: 1.4s;
  }
  .mod-anim.is-delay-15,
  .mod-anim-pc.is-delay-15 {
    transition-delay: 1.5s;
  }
  .mod-anim.is-delay-16,
  .mod-anim-pc.is-delay-16 {
    transition-delay: 1.6s;
  }
  .mod-anim.is-delay-17,
  .mod-anim-pc.is-delay-17 {
    transition-delay: 1.7s;
  }
  .mod-anim.is-delay-18,
  .mod-anim-pc.is-delay-18 {
    transition-delay: 1.8s;
  }
  .mod-anim.is-delay-19,
  .mod-anim-pc.is-delay-19 {
    transition-delay: 1.9s;
  }
  .mod-anim.is-delay-20,
  .mod-anim-pc.is-delay-20 {
    transition-delay: 2s;
  }
  .mod-anim.is-delay-22,
  .mod-anim-pc.is-delay-22 {
    transition-delay: 2s;
  }
  .mod-anim.is-delay-24,
  .mod-anim-pc.is-delay-24 {
    transition-delay: 2s;
  }
  .mod-anim.is-delay-26,
  .mod-anim-pc.is-delay-26 {
    transition-delay: 2s;
  }
  .mod-anim.is-delay-28,
  .mod-anim-pc.is-delay-28 {
    transition-delay: 2s;
  }
  .mod-anim-custom ._p1,
  .mod-anim-custom ._p2,
  .mod-anim-custom ._p3,
  .mod-anim-custom ._p4 {
    transition-duration: 0.8s;
    transform: scale(0.8);
    transform-origin: center center;
    transition-property: transform, opacity;
    opacity: 0;
  }
  .mod-anim-custom ._p1 {
    transition-delay: 1.8s;
  }
  .mod-anim-custom ._p2 {
    transition-delay: 1.4s;
  }
  .mod-anim-custom ._p3 {
    transition-delay: 2s;
  }
  .mod-anim-custom ._p4 {
    transition-delay: 1.6s;
  }
  .mod-anim-custom.js-active ._p1,
  .mod-anim-custom.js-active ._p2,
  .mod-anim-custom.js-active ._p3,
  .mod-anim-custom.js-active ._p4 {
    transform: scale(1);
    opacity: 1;
  }
  .mod-announce-item {
    display: block;
    cursor: pointer;
    width: 9.0277777778vw;
    transition-duration: 0.2s;
  }
  .mod-announce-item:hover {
    opacity: 0.8;
  }
  .mod-announce-item ._item-image img {
    width: 100%;
  }
  .mod-announce-item ._item-texts {
    margin-top: 0.6944444444vw;
  }
  .mod-announce-item ._item-texts ._name {
    font-size: 0.9722222222vw;
    line-height: 1.6;
    letter-spacing: 0.08em;
    color: #000;
  }
  .mod-swiper {
    position: relative;
    --swiper-scrollbar-size:1px;
    --swiper-scrollbar-sides-offset:0px;
    padding: 0 0 1.7361111111vw 0;
  }
  .mod-swiper .swiper-slide {
    width: 11.1111111111vw;
  }
  .mod-swiper .swiper-button-prev {
    z-index: 10;
    position: absolute;
    top: 4.8611111111vw;
    left: -2.4305555556vw;
    width: 2.0833333333vw;
    height: 2.0833333333vw;
    border-radius: 50%;
    cursor: pointer;
    transition-duration: 0.2s;
    transition-property: opacity;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .mod-swiper .swiper-button-prev:hover {
    opacity: 0.8;
  }
  .mod-swiper .swiper-button-prev:after {
    color: #000;
    font-size: 0.8333333333vw;
  }
  .mod-swiper .swiper-button-next {
    z-index: 10;
    display: block;
    position: absolute;
    top: 4.8611111111vw;
    right: -2.4305555556vw;
    width: 2.0833333333vw;
    height: 2.0833333333vw;
    border-radius: 50%;
    cursor: pointer;
    transition-duration: 0.2s;
    transition-property: opacity;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .mod-swiper .swiper-button-next:hover {
    opacity: 0.8;
  }
  .mod-swiper .swiper-button-next:after {
    color: #000;
    font-size: 0.8333333333vw;
  }
  .mod-swiper .swiper-button-disabled {
    opacity: 0.4;
  }
  .mod-swiper .swiper-slide {
    transition-duration: 0.5s;
    transition-property: transform;
  }
  .mod-swiper .swiper-scrollbar {
    background-color: #E5E5E5;
  }
  .mod-swiper .swiper-scrollbar-drag {
    background-color: #000000;
  }
  .mod-modal-btn-close {
    --boxW:50px;
    --boxH:50px;
    --bar:24px;
    --thick:2px;
    position: relative;
    width: var(--boxW);
    height: var(--boxH);
    z-index: 10;
    cursor: pointer;
    transition-duration: 0.2s;
    transition-property: opacity;
  }
  .mod-modal-btn-close span {
    content: "";
    position: absolute;
    background: #fff;
    top: calc((var(--boxH) - var(--thick)) / 2);
    left: calc((var(--boxW) - var(--bar)) / 2);
    width: var(--bar);
    height: var(--thick);
    transform: rotate(-45deg);
  }
  .mod-modal-btn-close span:nth-child(2) {
    transform: rotate(45deg);
  }
  .mod-modal-btn-close:hover {
    opacity: 0.8;
  }
  .area-modal-styling {
    visibility: hidden;
    opacity: 0;
    transition-duration: 0.2s;
    transition-property: visibility, opacity;
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .area-modal-styling.js-show {
    visibility: visible;
    opacity: 1;
    z-index: 1000;
  }
  .area-modal-styling .mod-modal-btn-close {
    position: absolute;
    top: -3.8194444444vw;
    right: 0.6944444444vw;
  }
  .area-modal-styling ._modal-bg {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    overflow: hidden;
  }
  .area-modal-styling ._modal-btns {
    position: absolute;
    top: 1.0416666667vw;
    right: 5.5555555556vw;
    z-index: 10;
  }
  .area-modal-styling ._modal-box {
    position: absolute;
    background: #fff;
    width: 43.0555555556vw;
    height: 41.9444444444vw;
  }
  .area-modal-styling ._modal-box-body {
    position: absolute;
    inset: 0 0 0 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .area-modal-styling ._modal-box-body::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  .area-modal-styling ._page {
    display: none;
  }
  .block-modal-styling {
    padding: 4.1666666667vw 0 4.1666666667vw 5.5555555556vw;
    width: 31.9444444444vw;
    position: relative;
  }
  .block-modal-styling p {
    margin: 0;
  }
  .mod-modal-styling-items {
    margin: 0 auto;
    width: 31.9444444444vw;
  }
  .mod-modal-styling-items li {
    padding: 0 1.3888888889vw 1.3888888889vw 1.3888888889vw;
  }
  .mod-modal-styling-items li:nth-child(n+2) {
    border-top: 1px solid #C6C6C6;
    padding: 1.3888888889vw 1.3888888889vw;
  }
  .mod-modal-styling-item {
    display: flex;
    gap: 1.6666666667vw;
    position: relative;
  }
  .mod-modal-styling-item ._item-image {
    width: 4.1666666667vw;
    text-align: center;
    display: flex;
    gap: 0.4166666667vw;
    flex-direction: column;
  }
  .mod-modal-styling-item ._item-image img {
    width: 100%;
  }
  .mod-modal-styling-item ._item-image ._face {
    border-radius: 50%;
    overflow: hidden;
  }
  .mod-modal-styling-item ._item-image ._name {
    font-size: 1.1111111111vw;
    text-align: center;
    line-height: 1.42;
    letter-spacing: 0.06em;
    color: #000;
    font-style: italic;
    margin: 0 -10px;
  }
  .mod-modal-styling-item ._item-texts {
    flex: 1;
    position: relative;
    display: flex;
    gap: 0.6944444444vw;
    flex-direction: column;
    margin-top: 1.3888888889vw;
  }
  .mod-modal-styling-item ._item-texts.is-multi {
    margin-top: 0;
  }
  .mod-modal-styling-buy {
    padding: 0 5.5555555556vw 0 0;
    position: relative;
  }
  .mod-modal-styling-buy ._name {
    font-size: 1.0416666667vw;
    line-height: 1.66;
    letter-spacing: 0.08em;
    color: #000;
    transition-property: opacity;
  }
  .mod-modal-styling-buy ._price {
    font-size: 0.9722222222vw;
    line-height: 1.78;
    letter-spacing: 0.08em;
    color: #000;
  }
  .mod-modal-styling-buy ._btns {
    position: absolute;
    top: 0.3472222222vw;
    right: 0;
  }
  .mod-modal-styling-buy:hover ._name {
    transition-duration: 0.2s;
    opacity: 0.7;
  }
  .mod-modal-styling-buy:hover .mod-modal-btn-buy {
    background-color: #fff;
    color: #003E28;
  }
  .mod-modal-btn-buy {
    display: block;
    width: 4.1666666667vw;
    border: 1px solid #003E28;
    background-color: #003E28;
    border-radius: 3.4722222222vw;
    font-size: 0.9722222222vw;
    font-family: "Roboto Condensed";
    text-align: center;
    letter-spacing: 0.14em;
    line-height: 1;
    box-sizing: border-box;
    padding: 0.2083333333vw 0 0.1388888889vw 0.1388888889vw;
    color: #fff;
    position: relative;
    cursor: pointer;
    transition-duration: 0.2s;
    transition-property: background-color, color;
  }
  .u-sp {
    display: none;
  }
}
@media screen and (max-width: 1023px) {
  .block-wrap {
    position: relative;
    -webkit-font-smoothing: antialiased;
  }
  .block-wrap img {
    width: 100%;
  }
  .block-wrap h2, .block-wrap h3, .block-wrap h4, .block-wrap p {
    margin: 0;
  }
  .block-wrap sup {
    font-size: 50%;
  }
  .block-wrap img {
    width: 100%;
  }
  /* ----------------------------------------------------------
  block-mv
  ---------------------------------------------------------- */
  .block-mv {
    position: relative;
  }
  .block-mv ._bg {
    background-color: #000;
    height: 177vw;
    overflow: hidden;
  }
  .block-mv ._bg iframe {
    width: 100vw;
    height: 177vw;
    pointer-events: none;
    transition-duration: 0.8s;
    transform: scale(1.2);
  }
  body.is-intro-loaded .block-mv ._bg iframe {
    transform: scale(1);
  }
  .block-mv ._texts {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .block-mv ._logo {
    width: 58.6666666667vw;
    opacity: 0;
    transition-duration: 0.4s;
    transition-delay: 1s;
    transition-property: opacity;
  }
  body.is-intro-loaded .block-mv ._logo {
    opacity: 1;
  }
  /* ----------------------------------------------------------
  block-lead
  ---------------------------------------------------------- */
  .block-lead {
    padding: 21.3333333333vw 3.2vw 22.1333333333vw 3.2vw;
    position: relative;
  }
  .block-lead ._texts {
    margin-top: 9.3333333333vw;
    display: flex;
    gap: 3.4666666667vw;
    flex-direction: column;
  }
  .block-lead p {
    font-size: 3.7333333333vw;
    line-height: 1.85;
    letter-spacing: 0.08em;
    color: #000;
  }
  /* ----------------------------------------------------------
  block-announce
  ---------------------------------------------------------- */
  .block-announce {
    position: relative;
    padding: 13.8666666667vw 0 21.0666666667vw 0;
  }
  .block-announce ._bar {
    display: block;
    position: absolute;
    top: 0;
    left: 35vw;
    width: 30vw;
    height: 1px;
    background: #000;
    opacity: 0;
    transition-duration: 1s;
    transition-delay: 0.4s;
    transition-property: left, width, opacity;
  }
  .block-announce ._bar.js-active {
    left: 2.6666666667vw;
    width: 94.6666666667vw;
    opacity: 1;
  }
  .block-announce ._inner {
    margin: 0 2.6666666667vw;
  }
  .block-announce ._texts {
    display: flex;
    gap: 4.2666666667vw;
    flex-direction: column;
    align-items: center;
  }
  .block-announce ._texts:after {
    content: "";
    display: block;
    margin: 0 auto;
    width: 21.3333333333vw;
    height: 1px;
    background: #000000;
    margin-top: 6.6666666667vw;
  }
  .block-announce ._texts ._date {
    width: 17.8666666667vw;
  }
  .block-announce ._texts ._lead {
    width: 66.6666666667vw;
  }
  .block-announce ._texts2 {
    margin-top: 10.6666666667vw;
    display: flex;
    gap: 4vw;
    flex-direction: column;
    align-items: center;
  }
  .block-announce ._texts2 ._ti {
    font-size: 6.4vw;
    text-align: center;
    font-weight: 400;
    font-style: italic;
    line-height: 1;
    letter-spacing: 0.06em;
    color: #000;
  }
  .block-announce ._texts2 ._lead {
    font-size: 3.4666666667vw;
    text-align: center;
    line-height: 2.23;
    letter-spacing: 0.08em;
    color: #000;
  }
  .block-announce ._products {
    margin-top: 10.6666666667vw;
    margin-left: -2.6666666667vw;
    margin-right: -2.6666666667vw;
    padding: 0 1.3333333333vw;
    overflow: hidden;
    position: relative;
  }
  .block-announce ._btns {
    margin-top: 5.3333333333vw;
    text-align: right;
  }
  /* ----------------------------------------------------------
  block-scene1
  ---------------------------------------------------------- */
  .block-scene1 {
    position: relative;
    border-top: 1px solid #000;
    height: 660vw;
    --offset1:130vw;
  }
  .block-scene1 ._state {
    position: absolute;
    top: 0px;
    left: 0px;
    display: none;
  }
  .block-scene1:before {
    content: "";
    display: block;
    position: absolute;
    top: 2px;
    left: 0px;
    right: 0;
    height: 20px;
    border-top: 1px solid #000;
  }
  .block-scene1 ._title {
    position: absolute;
    top: 17vw;
    left: 46.89vw;
  }
  .block-scene1 ._title h2 {
    font-size: 6.9333333333vw;
    line-height: 1;
    font-style: italic;
    letter-spacing: 0.04em;
  }
  .block-scene1 ._p1 {
    position: absolute;
    top: 32vw;
    left: 0vw;
    width: 100vw;
  }
  .block-scene1 ._copy1 {
    position: absolute;
    top: 112vw;
    left: 2.67vw;
    width: 40vw;
  }
  .block-scene1 ._p2 {
    position: absolute;
    top: calc(var(--offset1) + 71vw);
    left: -2.13vw;
    right: 0;
    bottom: 36vw;
  }
  .block-scene1 ._p2 ._in {
    position: sticky;
    top: calc(50vh - 8vw);
    overflow: hidden;
  }
  .block-scene1 ._p2 ._in img {
    max-width: 103.73vw;
    width: 103.73vw;
  }
  .block-scene1 ._p3 {
    position: absolute;
    top: calc(var(--offset1) + 250vw);
    left: 3.2vw;
    width: 94.18vw;
    bottom: 36vw;
    z-index: 10;
  }
  .block-scene1 ._p3 img {
    transform: scale(0.95) rotate(3deg);
  }
  .block-scene1 ._p3 ._in {
    position: sticky;
    top: calc(50vh - 5vw);
  }
  .block-scene1 ._btns {
    position: absolute;
    bottom: 18vw;
    left: 0;
  }
  .block-scene1 ._film {
    position: absolute;
    top: var(--offset1);
    left: 0vw;
    width: 100vw;
    bottom: 74vw;
  }
  .block-scene1 ._film ._in {
    position: sticky;
    top: calc(50vh - 80vw);
    overflow: hidden;
    width: 100vw;
    height: 100vw;
  }
  .block-scene1 ._film ._in ._img {
    margin-left: -10vw;
    max-width: auto;
    width: 400vw;
    height: 60vw;
    background-image: url(/starbucks-stand-by-beams/core/images/scenes/scene1_2.webp);
    background-repeat: repeat-x;
    background-size: 50% auto;
    animation: keyf_film 10s linear 0s infinite;
    transform: rotate(-4deg);
  }
  @keyframes keyf_film {
    0% {
      background-position: 100% 0;
    }
    100% {
      background-position: 0 0;
    }
  }
  /* ----------------------------------------------------------
  block-scene2
  ---------------------------------------------------------- */
  .block-scene2 {
    position: relative;
    --offset1:150vw;
    height: calc(680vw + var(--offset1));
  }
  .block-scene2 ._state {
    position: absolute;
    top: 0px;
    left: 0px;
    display: none;
  }
  .block-scene2 ._bar {
    display: block;
    position: absolute;
    top: 0;
    left: 35vw;
    width: 30vw;
    height: 1px;
    background: #000;
    opacity: 0;
    transition-duration: 1s;
    transition-delay: 0.4s;
    transition-property: left, width, opacity;
  }
  .block-scene2 ._bar.js-active {
    left: 2.6666666667vw;
    width: 94.6666666667vw;
    opacity: 1;
  }
  .block-scene2 ._copy1 {
    position: absolute;
    top: 21vw;
    left: 2.61vw;
  }
  .block-scene2 ._copy1 ._in {
    position: sticky;
    top: calc(50vh - 47vw - 15vw);
  }
  .block-scene2 ._p1 {
    position: absolute;
    top: 36vw;
    left: 0vw;
    width: 100vw;
    height: 257vw;
  }
  .block-scene2 ._p1 ._in {
    position: sticky;
    top: calc(50vh - 47vw);
    left: 0;
    width: 100vw;
    height: 106.6666666667vw;
  }
  .block-scene2 ._p1 ._image {
    background-image: url("/starbucks-stand-by-beams/core/images/scenes/scene2_1.webp");
    background-size: cover;
    background-position: 0% 0%;
    width: 100%;
    height: 100%;
  }
  .block-scene2 ._p2 {
    position: absolute;
    top: calc(var(--offset1) + 159.73vw);
    left: 0vw;
    width: 53.33vw;
    height: 80vw;
  }
  .block-scene2 ._p3 {
    position: absolute;
    top: calc(var(--offset1) + 176.53vw);
    right: 0vw;
    width: 38.4vw;
    height: 46.67vw;
  }
  .block-scene2 ._p4 {
    position: absolute;
    top: calc(var(--offset1) + 276.53vw);
    left: 12vw;
    width: 64vw;
    height: 42.67vw;
  }
  .block-scene2 ._copy2 {
    position: absolute;
    top: calc(var(--offset1) + 255.49vw);
    left: 43.75vw;
  }
  .block-scene2 ._p5 {
    position: absolute;
    top: calc(var(--offset1) + 336.27vw);
    left: 38.67vw;
    width: 58.67vw;
  }
  .block-scene2 ._copy3 {
    position: absolute;
    top: calc(var(--offset1) + 362.4vw);
    left: 10.3vw;
  }
  .block-scene2 ._p7 {
    position: absolute;
    top: calc(var(--offset1) + 445.6vw);
    right: 0;
    width: 50.67vw;
    height: 76vw;
  }
  .block-scene2 ._p8 {
    position: absolute;
    top: calc(var(--offset1) + 566.4vw);
    left: 0vw;
    width: 100vw;
    height: 76.8vw;
  }
  .block-scene2 ._p6 {
    position: absolute;
    top: calc(var(--offset1) + 479.2vw);
    left: 0vw;
    width: 41.33vw;
    height: 61.87vw;
  }
  .block-scene2 ._copy4 {
    position: absolute;
    top: calc(var(--offset1) + 540.29vw);
    left: 51.58vw;
  }
  .block-scene2 ._btns {
    position: absolute;
    bottom: 18vw;
    left: 0;
  }
  /* ----------------------------------------------------------
  block-scene3
  ---------------------------------------------------------- */
  .block-scene3 {
    margin-top: -2px;
    position: relative;
    background-color: #7D4E22;
    --offset1:100vw;
    height: calc(476vw + var(--offset1));
  }
  .block-scene3 ._state {
    position: absolute;
    top: 0px;
    left: 0px;
    display: none;
  }
  .block-scene3 ._copy1 {
    position: absolute;
    top: 5.89vw;
    left: 41.27vw;
  }
  .block-scene3 ._p1-set {
    position: absolute;
    top: 35.73vw;
    left: 0vw;
    right: 0;
  }
  .block-scene3 .mod-anim-custom-sp._p1-set ._p1,
  .block-scene3 .mod-anim-custom-sp._p1-set ._p2 {
    transition-duration: 0.7s;
    transition-property: transform, opacity;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
    transform: translate(-2vw, 0);
  }
  .block-scene3 .mod-anim-custom-sp._p1-set ._p1.js-active,
  .block-scene3 .mod-anim-custom-sp._p1-set ._p2.js-active {
    opacity: 1;
    transform: translate(0, 0);
  }
  .block-scene3 .mod-anim-custom-sp._p1-set ._p2 {
    transition-delay: 0.12s;
  }
  .block-scene3 ._p3 {
    position: absolute;
    top: 190.67vw;
    left: 0vw;
    width: 94.67vw;
    height: 62.93vw;
  }
  .block-scene3 ._p4 {
    position: absolute;
    top: 264.27vw;
    right: 0;
    width: 76vw;
    height: 50.67vw;
  }
  .block-scene3 ._copy2 {
    position: absolute;
    top: 330.96vw;
    left: 2.42vw;
  }
  .block-scene3 ._copy2 ._in {
    position: sticky;
    top: calc(50vh - 61vw);
  }
  .block-scene3 ._p4 {
    overflow: hidden;
  }
  .block-scene3 ._p5 {
    position: absolute;
    top: 332.8vw;
    left: 0vw;
    right: 0;
    height: 206.67vw;
  }
  .block-scene3 ._p5 ._in {
    position: sticky;
    top: calc(50vh - 59vw);
    left: 0;
    width: 100vw;
    height: 106.6666666667vw;
  }
  .block-scene3 ._p5 ._image {
    background-image: url("/starbucks-stand-by-beams/core/images/scenes/scene3_5.webp");
    background-size: cover;
    background-position: 0% 0%;
    width: 100%;
    height: 100%;
  }
  .block-scene3 ._btns {
    position: absolute;
    bottom: 18vw;
    left: 0;
  }
  /* ----------------------------------------------------------
  block-scene4
  ---------------------------------------------------------- */
  .block-scene4 {
    position: relative;
    --offset1:40vw;
    height: 602.8vw;
  }
  .block-scene4 ._state {
    position: absolute;
    top: 0px;
    left: 0px;
    display: none;
  }
  .block-scene4 ._p2 {
    position: absolute;
    top: calc(var(--offset1) + 71.2vw);
    right: 0;
    width: 48.8vw;
    height: 73.07vw;
  }
  .block-scene4 ._p1 {
    position: absolute;
    top: calc(var(--offset1) + 21.33vw);
    left: 10.93vw;
    width: 42.93vw;
    height: 64.27vw;
  }
  .block-scene4 ._p4 {
    position: absolute;
    top: calc(var(--offset1) + 169.07vw);
    left: 20vw;
    width: 66.4vw;
    height: 99.47vw;
  }
  .block-scene4 ._p3 {
    position: absolute;
    top: calc(var(--offset1) + 115.2vw);
    left: 4.8vw;
    width: 39.2vw;
    height: 58.4vw;
  }
  .block-scene4 ._p1,
  .block-scene4 ._p2,
  .block-scene4 ._p3,
  .block-scene4 ._p4 {
    z-index: 10;
  }
  .block-scene4 ._copy1 {
    position: absolute;
    top: 96.82vw;
    left: 12.82vw;
    height: 239vw;
  }
  .block-scene4 ._copy1 ._in {
    position: sticky;
    top: calc(50vh - 5vw);
  }
  .block-scene4 ._p5-texts {
    position: absolute;
    top: -18.1vw;
    left: 12.82vw;
    opacity: 0;
  }
  .block-scene4 ._p5-texts span {
    display: block;
    font-size: 3.7333333333vw;
    line-height: 1.2;
    font-style: italic;
    letter-spacing: 0.04em;
  }
  .block-scene4.is-p5-fiexd ._copy1 {
    opacity: 0;
  }
  .block-scene4.is-p5-fiexd ._p5-texts {
    opacity: 1;
  }
  .block-scene4 ._p5 {
    position: absolute;
    top: calc(var(--offset1) + 299.87vw);
    left: 0;
    width: 100vw;
    height: 230vw;
  }
  .block-scene4 ._p5 ._in {
    position: sticky;
    top: calc(50vh - 58vw);
    left: 0;
    width: 100vw;
    height: 106.6666666667vw;
  }
  .block-scene4 ._p5 ._image {
    background-image: url("/starbucks-stand-by-beams/core/images/scenes/scene4_5.webp");
    background-size: cover;
    background-position: 0% 0%;
    width: 100%;
    height: 100%;
  }
  .block-scene4 ._btns {
    position: absolute;
    bottom: 18vw;
    left: 0;
  }
  /* ----------------------------------------------------------
  block-item_list
  ---------------------------------------------------------- */
  .block-item_list {
    position: relative;
    border-top: 0.2666666667vw solid #000;
    padding: 6.6666666667vw 0 6.6666666667vw 0;
  }
  .block-item_list:before {
    content: "";
    display: block;
    position: absolute;
    top: 0.5333333333vw;
    left: 0;
    right: 0;
    height: 5.3333333333vw;
    border-top: 0.2666666667vw solid #000;
  }
  .block-item_list ._row-main h2 {
    margin: 0 0 0 2.6666666667vw;
    font-size: 8.5333333333vw;
    font-style: italic;
    letter-spacing: 0.04em;
    line-height: 1.2;
  }
  .block-item_list ._row-main h3 {
    margin: 0 0 0 2.6666666667vw;
    padding: 0 0 0 5.3333333333vw;
    font-size: 6.4vw;
    font-style: italic;
    letter-spacing: 0.04em;
    line-height: 1.2;
    position: relative;
  }
  .block-item_list ._row-main h3:after {
    content: "";
    display: block;
    position: absolute;
    top: 45%;
    left: 0;
    width: 3.2vw;
    height: 1px;
    background: #000;
  }
  .block-item_list ._row-main img {
    vertical-align: baseline;
  }
  .block-item_list ._row-main ._title {
    display: flex;
    gap: 6.6666666667vw;
    flex-direction: column;
  }
  .block-item_list ._row-main ._title2 {
    margin-top: 16vw;
  }
  .block-item_list ._row-main ._title2 h3 {
    width: 14.6666666667vw;
  }
  .block-item_list ._row-main ._list {
    margin-top: 1.3333333333vw;
  }
  .block-item_list ._row-announce {
    padding: 11.2vw 2.6666666667vw 10.6666666667vw 2.6666666667vw;
  }
  .block-item_list ._row-announce ._title {
    display: flex;
    gap: 4vw;
    flex-direction: column;
    align-items: center;
  }
  .block-item_list ._row-announce ._title ._date {
    width: 17.8666666667vw;
  }
  .block-item_list ._row-announce ._title ._copy {
    width: 66.6666666667vw;
  }
  .block-item_list ._row-announce ._list {
    margin-top: 9.3333333333vw;
    display: flex;
    gap: 20px;
    flex-direction: column;
  }
  .block-item_list ._row-announce ._list p {
    margin: 2.6666666667vw 0;
    font-size: 2.9333333333vw;
  }
  .block-item_list ._row-announce ._list p._note {
    font-size: 2.6666666667vw;
  }
  .block-item_list ._row-announce ._btns {
    margin-top: 9.8666666667vw;
    text-align: center;
  }
  .mod-list li {
    line-height: 1.9;
    letter-spacing: 0.06em;
    color: #000;
    padding-left: 4vw;
    font-size: 2.9333333333vw;
    position: relative;
  }
  .mod-list li:after {
    content: "※";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }
  .mod-itemlist-items {
    border-top: 1px solid #D5D5D5;
    display: flex;
    flex-wrap: wrap;
  }
  .mod-itemlist-items > li {
    position: relative;
    width: 50%;
    border-bottom: 1px solid #D5D5D5;
  }
  .mod-itemlist-items > li:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    bottom: 0;
    background: #D5D5D5;
  }
  .mod-itemlist-items > li:nth-child(2n+1):after {
    display: none;
  }
  .mod-itemlist-item {
    height: 100%;
    box-sizing: border-box;
    display: block;
    position: relative;
    padding: 5.3333333333vw 5.3333333333vw 18.1333333333vw 5.3333333333vw;
  }
  .mod-itemlist-item img {
    width: 100%;
  }
  .mod-itemlist-item ._item-image {
    text-align: center;
  }
  .mod-itemlist-item ._item-image img {
    width: 36vw;
  }
  .mod-itemlist-item ._item-texts {
    margin-top: 4vw;
  }
  .mod-itemlist-item ._item-texts ._name {
    font-size: 3.7333333333vw;
    line-height: 1.42;
    letter-spacing: 0.08em;
  }
  .mod-itemlist-item ._item-texts ._price {
    margin-top: 2.1333333333vw;
    font-size: 3.7333333333vw;
    line-height: 1.42;
    letter-spacing: 0.08em;
  }
  .mod-itemlist-item ._item-texts ._size {
    margin-top: 1.8666666667vw;
    font-size: 3.7333333333vw;
    font-weight: 300;
    line-height: 1.42;
    letter-spacing: 0.08em;
  }
  .mod-itemlist-item ._item-btns {
    position: absolute;
    left: 5.3333333333vw;
    right: 5.3333333333vw;
    bottom: 8vw;
  }
  /* ----------------------------------------------------------
  block-shop
  ---------------------------------------------------------- */
  .block-shop {
    position: relative;
    border-top: 0.2666666667vw solid #000;
    padding: 16vw 2.6666666667vw 10.6666666667vw 2.6666666667vw;
  }
  .block-shop:before {
    content: "";
    display: block;
    position: absolute;
    top: 0.5333333333vw;
    left: 0;
    right: 0;
    height: 5.3333333333vw;
    border-top: 0.2666666667vw solid #000;
  }
  .block-shop h2 {
    font-size: 8vw;
    font-style: italic;
    letter-spacing: 0.04em;
    line-height: 1.2;
  }
  .block-shop ._name h3 {
    font-size: 6.4vw;
    font-style: italic;
    letter-spacing: 0.04em;
    line-height: 1.2;
  }
  .block-shop ._body {
    margin-top: 1.3333333333vw;
  }
  .block-shop ._pagetop {
    margin-top: 21.3333333333vw;
    text-align: center;
  }
  .mod-dl {
    display: flex;
  }
  .mod-dl dt {
    width: 12vw;
    font-size: 3.7333333333vw;
    font-weight: 300;
    letter-spacing: 0.08em;
  }
  .mod-dl dd {
    font-size: 3.7333333333vw;
    font-weight: 300;
    letter-spacing: 0.08em;
  }
  .mod-shop-col ._col-texts {
    margin-top: 4vw;
  }
  .mod-shop-col ._col-texts ._add {
    margin-top: 2.6666666667vw;
    font-size: 3.7333333333vw;
    font-weight: 300;
    line-height: 1.57;
    letter-spacing: 0.08em;
    color: #252525;
  }
  .mod-shop-col ._col-texts ._dl {
    margin-top: 1.3333333333vw;
  }
  .mod-shop-col ._col-texts ._btns {
    margin-top: 3.2vw;
  }
  .mod-btn-item-fix {
    position: fixed;
    right: 2.6666666667vw;
    bottom: 9.3333333333vw;
    z-index: 20;
    visibility: hidden;
    opacity: 0;
    transition-duration: 0.2s;
    transition-property: visibility, opacity;
  }
  body.js-item-btn-start .mod-btn-item-fix {
    visibility: visible;
    opacity: 1;
  }
  body.js-item-btn-start.js-item-btn-end .mod-btn-item-fix {
    visibility: hidden;
    opacity: 0;
  }
  .mod-btn-item {
    display: inline-block;
    background-color: #003E28;
    border: 1px solid #fff;
    color: #fff;
    padding: 1.3333333333vw 0;
    font-size: 3.4666666667vw;
    font-family: "Roboto Condensed";
    line-height: 1;
    letter-spacing: 0.08em;
    width: 38.6666666667vw;
    text-align: center;
    box-sizing: border-box;
    border-radius: 13.3333333333vw;
    position: relative;
  }
  .mod-btn-item:before {
    position: absolute;
    top: 48%;
    right: 2.6666666667vw;
    display: block;
    content: "";
    height: 0.8vw;
    width: 0.8vw;
    border: 1px solid #fff;
    border-right-width: 0;
    border-top-width: 0;
    transform: translate(0, -50%) rotate(-45deg);
  }
  .mod-btn-buy {
    display: block;
    background-color: #003E28;
    border-radius: 13.3333333333vw;
    font-size: 3.4666666667vw;
    font-family: "Roboto Condensed";
    line-height: 1;
    padding: 1.6vw 0;
    text-align: center;
    letter-spacing: 0.14em;
    color: #fff;
    position: relative;
  }
  .mod-btn-buy:before {
    position: absolute;
    top: 50%;
    right: 3.2vw;
    display: block;
    content: "";
    height: 1.3333333333vw;
    width: 1.3333333333vw;
    border: 1px solid #fff;
    border-left-width: 0;
    border-top-width: 0;
    transform: translate(0, -50%) rotate(-45deg);
  }
  .mod-btn-styling {
    display: inline-block;
    font-size: 3.4666666667vw;
    font-family: "Roboto Condensed";
    text-align: center;
    line-height: 1.25;
    letter-spacing: 0.08em;
    color: #003e28;
    padding: 2.6666666667vw;
  }
  .mod-btn-styling.is-wh {
    color: #fff;
  }
  .mod-btn-top {
    display: inline-block;
    font-size: 3.7333333333vw;
    font-family: "Roboto Condensed";
    text-align: right;
    line-height: 1.07;
    letter-spacing: 0.08em;
    color: #003e28;
    padding-right: 4vw;
    position: relative;
  }
  .mod-btn-top:before {
    position: absolute;
    top: 55%;
    right: 0;
    display: block;
    content: "";
    height: 0.8vw;
    width: 0.8vw;
    border: 1px solid #003e28;
    border-left-width: 0;
    border-bottom-width: 0;
    transform: translate(0, -50%) rotate(-45deg);
  }
  .mod-btn-online {
    display: inline-block;
    background-color: #003E28;
    border-radius: 13.3333333333vw;
    padding: 1.3333333333vw 10.6666666667vw;
    font-size: 3.4666666667vw;
    font-family: "Roboto Condensed";
    text-align: center;
    letter-spacing: 0.1em;
    color: #fff;
    position: relative;
  }
  .mod-btn-online:before {
    position: absolute;
    top: 50%;
    right: 3.2vw;
    display: block;
    content: "";
    height: 1.3333333333vw;
    width: 1.3333333333vw;
    border: 1px solid #fff;
    border-left-width: 0;
    border-top-width: 0;
    transform: translate(0, -50%) rotate(-45deg);
  }
  .mod-btn-map {
    display: inline-block;
    background-color: #003E28;
    border-radius: 13.3333333333vw;
    padding: 0.8vw 3.7333333333vw 0.5333333333vw 3.7333333333vw;
    font-size: 3.4666666667vw;
    font-family: "Roboto Condensed";
    text-align: center;
    letter-spacing: 0.1em;
    color: #fff;
    position: relative;
  }
  .mod-auto-image img {
    width: 100%;
  }
  .mod-auto-image ._item {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    opacity: 0;
    transition-timing-function: linear;
    transition-duration: 1s;
    transition-property: opacity;
  }
  .mod-auto-image ._item.is-current {
    opacity: 1;
    z-index: 10;
  }
  .mod-slide-texts div {
    overflow: hidden;
  }
  .mod-slide-texts div span {
    display: block;
    font-size: 3.7333333333vw;
    line-height: 1.2;
    font-style: italic;
    letter-spacing: 0.04em;
    transition-duration: 0.6s;
    transition-timing-function: cubic-bezier(0.21, 0.69, 0.305, 0.945);
    transition-property: transform;
    transform-origin: left top;
    transform: translate(0, 5vw) skewY(3deg);
  }
  .mod-slide-texts div span.is-wh {
    color: #fff;
  }
  .mod-slide-texts div:nth-child(1) span {
    transition-delay: 0.6s;
  }
  .mod-slide-texts div:nth-child(2) span {
    transition-delay: 0.8s;
  }
  .mod-slide-texts div:nth-child(3) span {
    transition-delay: 1s;
  }
  .mod-slide-texts.is-delay div:nth-child(1) span {
    transition-delay: 1.6s;
  }
  .mod-slide-texts.is-delay div:nth-child(2) span {
    transition-delay: 1.8s;
  }
  .mod-slide-texts.is-delay div:nth-child(3) span {
    transition-delay: 2s;
  }
  .mod-slide-texts.js-active span {
    transform: translate(0, 0) skewY(0);
  }
  .mod-slide-texts-v {
    display: flex;
    flex-direction: row-reverse;
  }
  .mod-slide-texts-v div {
    overflow: hidden;
  }
  .mod-slide-texts-v div span {
    display: block;
    font-size: 3.7333333333vw;
    line-height: 1.2;
    font-style: italic;
    letter-spacing: 0.04em;
    writing-mode: vertical-rl;
    transition-duration: 0.6s;
    transition-timing-function: cubic-bezier(0.21, 0.69, 0.305, 0.945);
    transition-property: transform;
    transform-origin: left top;
    transform: translate(-4vw, 0) skewX(-3deg);
  }
  .mod-slide-texts-v div:nth-child(1) span {
    transition-delay: 0.6s;
  }
  .mod-slide-texts-v div:nth-child(2) span {
    transition-delay: 0.8s;
  }
  .mod-slide-texts-v div:nth-child(3) span {
    transition-delay: 1s;
  }
  .mod-slide-texts-v.js-active span {
    transform: translate(0, 0) skewX(0);
  }
  .mod-split-image {
    position: relative;
  }
  .mod-split-image.is-1 {
    width: 100vw;
    height: 97.3333333333vw;
  }
  .mod-split-image.is-1 ._img {
    background-image: url(/starbucks-stand-by-beams/core/images/scenes/scene1_1_sp.webp);
  }
  .mod-split-image.is-2 {
    width: 100vw;
    height: 76.8vw;
  }
  .mod-split-image.is-2 ._img {
    background-image: url(/starbucks-stand-by-beams/core/images/scenes/scene2_8.webp);
  }
  .mod-split-image ._img {
    position: absolute;
    top: 0px;
    left: 0px;
    background-size: 300% 200%;
    width: 33.3333333333%;
    height: 50%;
  }
  .mod-split-image ._11 {
    top: 0%;
    left: 0%;
    background-position: 0 0;
  }
  .mod-split-image ._12 {
    top: 0%;
    left: 33.3333333333%;
    background-position: 50% 0;
  }
  .mod-split-image ._13 {
    top: 0%;
    left: 66.6666666667%;
    background-position: 100% 0;
  }
  .mod-split-image ._21 {
    top: 50%;
    left: 0%;
    background-position: 0 100%;
  }
  .mod-split-image ._22 {
    top: 50%;
    left: 33.3333333333%;
    background-position: 50% 100%;
  }
  .mod-split-image ._23 {
    top: 50%;
    left: 66.6666666667%;
    background-position: 100% 100%;
  }
  .mod-anim-split ._img {
    transition-delay: 0.16s;
    transition-duration: 0.3s;
    transition-property: opacity;
    opacity: 0;
  }
  .mod-anim-split.js-active .is-1 {
    transition-delay: 0.2s;
  }
  .mod-anim-split.js-active .is-2 {
    transition-delay: 0.4s;
  }
  .mod-anim-split.js-active .is-3 {
    transition-delay: 0.6s;
  }
  .mod-anim-split.js-active .is-4 {
    transition-delay: 0.8s;
  }
  .mod-anim-split.js-active .is-5 {
    transition-delay: 1s;
  }
  .mod-anim-split.js-active .is-6 {
    transition-delay: 1.2s;
  }
  .mod-anim-split.js-active ._img {
    opacity: 1;
  }
  .mod-anim-sp {
    transition-duration: 0.7s;
    transition-property: transform, opacity;
  }
  .mod-anim-sp.is-fade {
    opacity: 0;
  }
  .mod-anim-sp.is-fade.js-active {
    opacity: 1;
  }
  .mod-anim-sp.is-top {
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
    transform: translate(0, -3vw);
  }
  .mod-anim-sp.is-top.js-active {
    opacity: 1;
    transform: translate(0, 0);
  }
  .mod-anim-sp.is-bottom {
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
    transform: translate(0, 2.5vw);
  }
  .mod-anim-sp.is-bottom.js-active {
    opacity: 1;
    transform: translate(0, 0);
  }
  .mod-anim-sp.is-fade-left {
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
    transform: translate(-2vw, 0);
  }
  .mod-anim-sp.is-fade-left.js-active {
    opacity: 1;
    transform: translate(0, 0);
  }
  .mod-anim-sp.is-right {
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
    transform: translate(5vw, 0);
  }
  .mod-anim-sp.is-right.js-active {
    opacity: 1;
    transform: translate(0, 0);
  }
  .mod-anim-sp.is-left {
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
    transform: translate(-5vw, 0);
  }
  .mod-anim-sp.is-left.js-active {
    opacity: 1;
    transform: translate(0, 0);
  }
  .mod-anim-sp.is-zoom {
    transition-duration: 0.8s;
    transform: scale(0.8);
    transform-origin: center center;
    opacity: 0;
  }
  .mod-anim-sp.is-zoom.js-active {
    transform: scale(1);
    opacity: 1;
  }
  .mod-anim-sp.is-delay-0 {
    transition-delay: 0s;
  }
  .mod-anim-sp.is-delay-1 {
    transition-delay: 0.1s;
  }
  .mod-anim-sp.is-delay-2 {
    transition-delay: 0.2s;
  }
  .mod-anim-sp.is-delay-3 {
    transition-delay: 0.3s;
  }
  .mod-anim-sp.is-delay-4 {
    transition-delay: 0.4s;
  }
  .mod-anim-sp.is-delay-5 {
    transition-delay: 0.5s;
  }
  .mod-anim-sp.is-delay-6 {
    transition-delay: 0.6s;
  }
  .mod-anim-sp.is-delay-7 {
    transition-delay: 0.7s;
  }
  .mod-anim-sp.is-delay-8 {
    transition-delay: 0.8s;
  }
  .mod-anim-sp.is-delay-9 {
    transition-delay: 0.9s;
  }
  .mod-anim-sp.is-delay-10 {
    transition-delay: 1s;
  }
  .mod-anim-sp.is-delay-11 {
    transition-delay: 1.1s;
  }
  .mod-anim-sp.is-delay-12 {
    transition-delay: 1.2s;
  }
  .mod-anim-sp.is-delay-13 {
    transition-delay: 1.3s;
  }
  .mod-anim-sp.is-delay-14 {
    transition-delay: 1.4s;
  }
  .mod-anim-sp.is-delay-15 {
    transition-delay: 1.5s;
  }
  .mod-anim-sp.is-delay-16 {
    transition-delay: 1.6s;
  }
  .mod-anim-sp.is-delay-17 {
    transition-delay: 1.7s;
  }
  .mod-anim-sp.is-delay-18 {
    transition-delay: 1.8s;
  }
  .mod-anim-sp.is-delay-19 {
    transition-delay: 1.9s;
  }
  .mod-anim-sp.is-delay-20 {
    transition-delay: 2s;
  }
  .mod-anim-sp.is-delay-22 {
    transition-delay: 2s;
  }
  .mod-anim-sp.is-delay-24 {
    transition-delay: 2s;
  }
  .mod-anim-sp.is-delay-26 {
    transition-delay: 2s;
  }
  .mod-anim-sp.is-delay-28 {
    transition-delay: 2s;
  }
  .mod-announce-item {
    display: block;
    cursor: pointer;
    width: 22.6666666667vw;
  }
  .mod-announce-item ._item-image img {
    width: 100%;
  }
  .mod-announce-item ._item-texts {
    margin-top: 1.3333333333vw;
  }
  .mod-announce-item ._item-texts ._name {
    font-size: 3.2vw;
    line-height: 1.6;
    letter-spacing: 0.08em;
    color: #000;
  }
  .mod-swiper {
    position: relative;
    --swiper-scrollbar-size:1px;
    padding: 0 0 10.6666666667vw 1.3333333333vw;
  }
  .mod-swiper .swiper-slide {
    width: 28vw;
  }
  .mod-swiper .swiper {
    overflow: visible;
  }
  .mod-swiper .swiper-button-prev,
  .mod-swiper .swiper-button-next {
    display: none;
  }
  .mod-swiper .swiper-slide {
    transition-duration: 0.5s;
  }
  .mod-swiper .swiper-scrollbar {
    background-color: #E5E5E5;
  }
  .mod-swiper .swiper-scrollbar-drag {
    background-color: #000000;
  }
  .mod-modal-btn-close {
    --boxW:40px;
    --boxH:40px;
    --bar:14px;
    --thick:1px;
    position: relative;
    width: var(--boxW);
    height: var(--boxH);
    z-index: 10;
    cursor: pointer;
    transition-duration: 0.2s;
    transition-property: opacity;
  }
  .mod-modal-btn-close span {
    content: "";
    position: absolute;
    background: #fff;
    top: calc((var(--boxH) - var(--thick)) / 2);
    left: calc((var(--boxW) - var(--bar)) / 2);
    width: var(--bar);
    height: var(--thick);
    transform: rotate(-45deg);
  }
  .mod-modal-btn-close span:nth-child(2) {
    transform: rotate(45deg);
  }
  .mod-modal-btn-close:hover {
    opacity: 0.8;
  }
  .area-modal-styling {
    visibility: hidden;
    opacity: 0;
    transition-duration: 0.2s;
    transition-property: visibility, opacity;
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .area-modal-styling.js-show {
    visibility: visible;
    opacity: 1;
    z-index: 1000;
  }
  .area-modal-styling .mod-modal-btn-close {
    position: absolute;
    top: -50px;
    right: 0px;
  }
  .area-modal-styling ._modal-bg {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
  }
  .area-modal-styling ._modal-btns {
    position: absolute;
    top: 4vw;
    right: 21.3333333333vw;
    z-index: 10;
  }
  .area-modal-styling ._modal-box {
    position: absolute;
    background: #fff;
    inset: 110px 0 0 0;
  }
  .area-modal-styling ._modal-box-body {
    position: absolute;
    inset: 0 0 0 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .area-modal-styling ._page {
    display: none;
  }
  .block-modal-styling {
    padding: 10.6666666667vw 0;
    margin: 0 auto;
    position: relative;
  }
  .block-modal-styling p {
    margin: 0;
  }
  .mod-modal-styling-items {
    margin: 0 auto;
    padding: 0 2.6666666667vw 0 2.6666666667vw;
  }
  .mod-modal-styling-items li {
    padding: 0 0 5.3333333333vw 0;
  }
  .mod-modal-styling-items li:nth-child(n+2) {
    border-top: 1px solid #C6C6C6;
    padding: 5.3333333333vw 0;
  }
  .mod-modal-styling-item {
    display: flex;
    gap: 5.3333333333vw;
    position: relative;
  }
  .mod-modal-styling-item ._item-image {
    width: 13.3333333333vw;
    text-align: center;
    display: flex;
    gap: 2.6666666667vw;
    flex-direction: column;
  }
  .mod-modal-styling-item ._item-image img {
    width: 100%;
  }
  .mod-modal-styling-item ._item-image ._face {
    border-radius: 50%;
    overflow: hidden;
  }
  .mod-modal-styling-item ._item-image ._name {
    font-size: 3.7333333333vw;
    text-align: center;
    line-height: 1.42;
    letter-spacing: 0.03em;
    margin: 0 -1.5vw;
    color: #000;
    font-style: italic;
  }
  .mod-modal-styling-item ._item-texts {
    flex: 1;
    position: relative;
    display: flex;
    gap: 5.3333333333vw;
    flex-direction: column;
    margin-top: 5.3333333333vw;
  }
  .mod-modal-styling-item ._item-texts.is-multi {
    margin-top: 0;
  }
  .mod-modal-styling-buy {
    padding: 0 14.6666666667vw 0 0;
    position: relative;
  }
  .mod-modal-styling-buy ._name {
    font-size: 3.7333333333vw;
    line-height: 1.42;
    letter-spacing: 0.08em;
    color: #000;
  }
  .mod-modal-styling-buy ._price {
    margin-top: 0.8vw;
    font-size: 3.4666666667vw;
    line-height: 1.53;
    letter-spacing: 0.08em;
    color: #000;
  }
  .mod-modal-styling-buy ._btns {
    position: absolute;
    top: 2.1333333333vw;
    right: 0;
  }
  .mod-modal-btn-buy {
    display: block;
    width: 12vw;
    border: 1px solid #003E28;
    background-color: #003E28;
    border-radius: 13.3333333333vw;
    font-size: 14;
    text-align: center;
    letter-spacing: 0.14em;
    line-height: 1;
    box-sizing: border-box;
    padding: 0.5333333333vw 0 0.5333333333vw 0.5333333333vw;
    color: #fff;
    position: relative;
    cursor: pointer;
  }
  .u-pc {
    display: none;
  }
}