@media print, screen and (min-width: 1024px) {
  .block-opening {
    position: fixed;
    inset: 0;
    background: #003E29;
    z-index: 1000000;
    --delay-base:1.6s;
    --delay:2.0s;
    transition-duration: 0.6s;
    transition-delay: calc(var(--delay-base) + var(--delay));
    overflow: hidden;
    clip-path: inset(0px);
  }
  .block-opening.is-skip {
    display: none;
  }
  .block-opening ._window1,
  .block-opening ._window2 {
    background: #fff;
    transition-delay: 1s;
    transition-duration: 0.4s;
    position: absolute;
    left: 0;
    right: 0;
    height: 51vh;
  }
  .block-opening ._window1 {
    top: 0;
  }
  .block-opening ._window2 {
    bottom: 0;
  }
  .block-opening.is-active ._window1 {
    transform: translate(0, -52vh);
  }
  .block-opening.is-active ._window2 {
    transform: translate(0, 52vh);
  }
  .block-opening ._logo-stand {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition-duration: 0.6s;
    transition-delay: calc(var(--delay-base) + var(--delay));
  }
  .block-opening ._logo-stand ._logo-stand-inner {
    transition-duration: 5s;
    width: 19.4444444444vw;
    transition-timing-function: linear;
  }
  .block-opening.is-active ._logo-stand ._logo-stand-inner {
    transform: scale(0.8);
  }
  .block-opening ._logos {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition-duration: 0.1s;
    transition-delay: 1s;
  }
  .block-opening ._logos ._logos-inner {
    display: flex;
    justify-content: space-between;
    gap: 2.7777777778vw;
    align-items: center;
  }
  .block-opening ._logos ._logo-staba {
    position: relative;
    width: 5.9027777778vw;
    opacity: 0;
    transition-duration: 0.6s;
  }
  .block-opening ._logos ._logo-beams {
    position: relative;
    width: 6.5972222222vw;
    opacity: 0;
    transition-duration: 0.6s;
    transition-delay: 0.2s;
  }
  .block-opening.is-active ._logos {
    opacity: 0;
  }
  .block-opening.is-active ._logo-staba {
    opacity: 1;
  }
  .block-opening.is-active ._logo-beams {
    opacity: 1;
  }
  .block-opening ._scene-photos {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translate(0, 0);
    transition-duration: 0.6s;
    transition-delay: calc(var(--delay-base) + var(--delay));
  }
  .block-opening.is-active {
    clip-path: inset(0px 0px 100%);
  }
  .block-opening ._photo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .mod-opening-photo ._photo-inner {
    overflow: hidden;
    transition-property: transform;
    transition-duration: 0.3s;
  }
  .mod-opening-photo ._photo-inner img {
    transition-property: transform;
    transition-duration: 0.3s;
  }
  .mod-opening-photo.is-a {
    --delay:0.2s;
  }
  .mod-opening-photo.is-a ._photo-inner {
    transform: translate(0, 100vh);
    transition-delay: calc(var(--delay-base) + var(--delay));
  }
  .mod-opening-photo.is-a ._photo-inner img {
    transform: translate(0, -100vh);
    transition-delay: calc(var(--delay-base) + var(--delay));
  }
  .is-active .mod-opening-photo.is-a ._photo-inner {
    transform: translate(0, 0);
  }
  .is-active .mod-opening-photo.is-a ._photo-inner img {
    transform: translate(0, 0);
  }
  .mod-opening-photo.is-b {
    --delay:0.5s;
  }
  .mod-opening-photo.is-b ._photo-inner {
    transform: translate(-100vw, 0);
    transition-delay: calc(var(--delay-base) + var(--delay));
  }
  .mod-opening-photo.is-b ._photo-inner img {
    transform: translate(100vw, 0);
    transition-delay: calc(var(--delay-base) + var(--delay));
  }
  .is-active .mod-opening-photo.is-b ._photo-inner {
    transform: translate(0, 0);
  }
  .is-active .mod-opening-photo.is-b ._photo-inner img {
    transform: translate(0, 0);
  }
  .mod-opening-photo.is-c {
    --delay:0.8s;
  }
  .mod-opening-photo.is-c ._photo-inner {
    transform: translate(0, -100vh);
    transition-delay: calc(var(--delay-base) + var(--delay));
  }
  .mod-opening-photo.is-c ._photo-inner img {
    transform: translate(0, 100vh);
    transition-delay: calc(var(--delay-base) + var(--delay));
  }
  .is-active .mod-opening-photo.is-c ._photo-inner {
    transform: translate(0, 0);
  }
  .is-active .mod-opening-photo.is-c ._photo-inner img {
    transform: translate(0, 0);
  }
  .mod-opening-photo.is-d {
    --delay:1.1s;
  }
  .mod-opening-photo.is-d ._photo-inner {
    transform: translate(100vw, 0);
    transition-delay: calc(var(--delay-base) + var(--delay));
  }
  .mod-opening-photo.is-d ._photo-inner img {
    transform: translate(-100vw, 0);
    transition-delay: calc(var(--delay-base) + var(--delay));
  }
  .is-active .mod-opening-photo.is-d ._photo-inner {
    transform: translate(0, 0);
  }
  .is-active .mod-opening-photo.is-d ._photo-inner img {
    transform: translate(0, 0);
  }
  .mod-opening-photo img {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
  }
  .block-main {
    position: relative;
    padding: 1.3888888889vw 2.7777777778vw 4.1666666667vw 2.7777777778vw;
    height: 20vw;
  }
  .block-main ._inner {
    height: 55vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6944444444vw;
  }
  .block-main img {
    width: 100%;
  }
  .block-main ._logo {
    width: 16.6666666667vw;
  }
  .block-main ._image {
    position: relative;
    width: 100%;
    height: 41.2vw;
  }
  .block-concept-wrap {
    position: relative;
    opacity: 0;
    transition-duration: 0.4s;
    z-index: -1;
    visibility: hidden;
  }
  body.is-pos-concept .block-concept-wrap {
    opacity: 1;
    z-index: 10;
    visibility: visible;
  }
  .block-concept-wrap:before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    transition-duration: 0.2s;
    background: url(/starbucks-stand-by-beams/index/images/concept/bg.jpg?) center;
  }
  body.is-pos-reccomend .block-concept-wrap:before {
    opacity: 0;
    z-index: -1;
    visibility: hidden;
  }
  .block-concept-wrap ._head {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    height: 15vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(/starbucks-stand-by-beams/index/images/concept/bg2.png?) center bottom;
    background-size: 100% 100%;
    z-index: 10;
  }
  .block-concept-wrap img {
    width: 100%;
  }
  .block-concept {
    position: relative;
  }
  .block-concept ._body {
    margin-top: 35vw;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.3888888889vw;
  }
  .block-concept ._logo {
    width: 16.6666666667vw;
    margin: 0 auto;
  }
  .block-concept ._lead {
    width: 36.8055555556vw;
    margin: 0 auto;
  }
  .block-concept ._texts-wrap {
    margin-top: 3.125vw;
    width: 80vw;
    position: relative;
    height: 15vw;
    opacity: 0;
    transition-duration: 0.2s;
    transition-delay: 0.4s;
  }
  body.is-pos-concept .block-concept ._texts-wrap {
    opacity: 1;
  }
  .block-concept ._texts {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    gap: 2.0833333333vw;
    flex-direction: column;
  }
  .block-concept ._texts.is-bg {
    opacity: 0.2;
  }
  .block-concept ._texts.is-front {
    opacity: 1;
    clip-path: inset(0px 0px 50%);
  }
  .block-concept ._texts p {
    text-align: center;
    font-size: 1.0416666667vw;
    color: #ffffff;
    line-height: 1.8;
    letter-spacing: 0.01em;
  }
  .block-reccomend-items {
    margin-top: -20vw;
    position: relative;
    transition-duration: 0.4s;
    opacity: 0;
    background-color: #fff;
    z-index: 20;
  }
  body.is-pos-reccomend .block-reccomend-items {
    opacity: 1;
  }
  .block-reccomend-items ._head-wh {
    position: sticky;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 15vw;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20;
  }
  .block-reccomend-items ._head-wh img {
    opacity: 0.2;
  }
  .block-reccomend-items ._inner {
    position: relative;
    margin-top: 15vw;
    padding: 5vw 0 2vw 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    background-color: #fff;
  }
  .block-reccomend-items ._ti {
    font-size: 1.9444444444vw;
    text-align: center;
    font-weight: 400;
    font-style: italic;
    line-height: 1;
    letter-spacing: 0.06em;
    color: #000;
  }
  .block-reccomend-items ._slider {
    width: 69.4444444444vw;
    margin: 0 auto;
    margin-top: 3.4722222222vw;
  }
  .block-reccomend-items ._btns {
    margin-top: 2.7777777778vw;
    text-align: center;
  }
  .block-seasonal {
    padding: 2.7777777778vw 0;
  }
  .block-seasonal ._inner {
    border-top: 1px solid #ADADAD;
    width: 69.4444444444vw;
    margin: 0 auto;
    padding: 6.25vw 0 3.4722222222vw 0;
  }
  .block-seasonal ._title {
    display: flex;
    flex-direction: column;
    gap: 0.6944444444vw;
    align-items: center;
  }
  .block-seasonal ._title h2 {
    font-size: 2.3611111111vw;
    line-height: 1;
    letter-spacing: 0.06;
    transform: skew(-10deg);
  }
  .block-seasonal ._title ._doc {
    text-align: center;
    margin-top: 1.5277777778vw;
    font-size: 1.0416666667vw;
    line-height: 1.6;
    letter-spacing: 0.08;
  }
  .block-seasonal ._images-wrap {
    width: 48.6111111111vw;
    margin: 0 auto;
    margin-top: 3.4722222222vw;
  }
  .block-seasonal ._btns {
    width: 13.8888888889vw;
    padding: 1.3888888889vw;
    margin: 0 auto;
    margin-top: 2.0833333333vw;
  }
  .block-seasonal ._archeves {
    margin-top: 2.7777777778vw;
  }
  .block-seasonal ._archeves .mod-seasonal-items {
    margin-bottom: 1.3888888889vw;
  }
  .mod-seasonal-items {
    display: flex;
    flex-direction: row;
    gap: 1.3888888889vw 1.3888888889vw;
    flex-wrap: wrap;
  }
  .mod-seasonal-items > li {
    width: calc((100% - 4.1666666667vw) / 4);
  }
  .mod-seasonal-item ._item-texts {
    margin-top: 0.6944444444vw;
  }
  .mod-seasonal-item ._item-texts ._name {
    font-size: 0.9027777778vw;
    line-height: 1.54;
    letter-spacing: 0.02;
    color: #000000;
  }
  .mod-seasonal-item ._item-texts ._date {
    font-size: 0.8333333333vw;
    line-height: 2.17;
    letter-spacing: 0.01;
    color: #999999;
  }
  .block-core {
    position: relative;
    background: #7d4e22;
    height: 111.11vw;
    overflow: hidden;
  }
  .block-core h2 {
    font-size: 2.3611111111vw;
    line-height: 1;
    letter-spacing: 0.06;
    color: #ffffff;
    text-align: center;
    transform: skew(-10deg);
  }
  .block-core ._doc {
    font-size: 1.0416666667vw;
    line-height: 1.6;
    letter-spacing: 0.08;
    color: #ffffff;
    text-align: center;
  }
  .block-core ._copy1 {
    font-size: 1.1805555556vw;
    line-height: 1.41;
    letter-spacing: 0.06;
    color: #ffffff;
  }
  .block-core h2 {
    position: absolute;
    top: 8.57vw;
    left: 36.04vw;
    width: 26.94vw;
  }
  .block-core ._doc {
    position: absolute;
    top: 13vw;
    left: 15.28vw;
    width: 69.44vw;
  }
  .block-core ._copy1 {
    position: absolute;
    top: 60.76vw;
    left: 70vw;
  }
  .block-core ._p1 {
    position: absolute;
    top: 21.11vw;
    left: 40.49vw;
    width: 55.56vw;
  }
  .block-core ._p2 {
    position: absolute;
    top: 27.5vw;
    left: 10.49vw;
    width: 23.33vw;
  }
  .block-core ._p3 {
    position: absolute;
    top: 51.18vw;
    left: 0vw;
    width: 30vw;
  }
  .block-core ._p5 {
    position: absolute;
    top: 65.35vw;
    left: 44.93vw;
    width: 15.56vw;
  }
  .block-core ._p6 {
    position: absolute;
    top: 74.44vw;
    left: 73.33vw;
    width: 26.67vw;
  }
  .block-core ._p4 {
    position: absolute;
    top: 79.1vw;
    left: 4.17vw;
    width: 31.67vw;
  }
  .block-core ._btns {
    position: absolute;
    top: 102.78vw;
    left: 43.23vw;
    width: 13.89vw;
  }
  .block-extra {
    position: relative;
    padding: 8.3333333333vw 0 6.25vw 0;
  }
  .block-extra img {
    width: 100%;
  }
  .block-extra ._inner {
    width: 69.4444444444vw;
    margin: 0 auto;
  }
  .block-extra ._title {
    display: flex;
    flex-direction: column;
    gap: 0.6944444444vw;
    align-items: center;
    text-align: center;
  }
  .block-extra ._title h2 {
    font-size: 2.3611111111vw;
    line-height: 1;
    letter-spacing: 0.06;
    transform: skew(-10deg);
  }
  .block-extra ._title ._doc {
    margin-top: 1.5277777778vw;
    font-size: 1.0416666667vw;
    line-height: 1.6;
    letter-spacing: 0.08;
  }
  .block-extra ._images-wrap {
    margin: 0 auto;
    margin-top: 3.4722222222vw;
  }
  .block-extra ._archeves {
    margin-top: 2.7777777778vw;
  }
  .block-extra ._archeves .mod-extra-items {
    margin-bottom: 1.3888888889vw;
  }
  .mod-extra-items {
    display: flex;
    flex-direction: row;
    gap: 2.7777777778vw 3.0555555556vw;
    flex-wrap: wrap;
  }
  .mod-extra-items > li {
    width: calc((100% - 6.2vw) / 3);
  }
  .mod-extra-item {
    display: block;
    cursor: pointer;
    transition-duration: 0.2s;
  }
  .mod-extra-item:hover {
    opacity: 0.7;
  }
  .mod-extra-item ._item-texts {
    margin-top: 0.6944444444vw;
  }
  .mod-extra-item ._item-texts ._name {
    font-size: 1.0416666667vw;
    line-height: 1.54;
    letter-spacing: 0.02;
    color: #000000;
  }
  .mod-extra-item ._item-texts ._date {
    font-size: 0.8333333333vw;
    line-height: 2.17;
    letter-spacing: 0.01;
    color: #999999;
  }
  .block-label {
    background: url(/starbucks-stand-by-beams/index/images/tape.png);
    background-size: auto 3.4722222222vw;
    height: 3.4722222222vw;
    animation: keyf_bg 5s linear 0s infinite;
  }
  @keyframes keyf_bg {
    0% {
      background-position-x: 15.416vw;
    }
    100% {
      background-position-x: 0;
    }
  }
  .block-reccomend-items2 {
    position: relative;
  }
  .block-reccomend-items2 ._inner {
    padding: 8.3333333333vw 0 7.6388888889vw 0;
  }
  .block-reccomend-items2 ._logo {
    width: 16.6666666667vw;
    margin: 0 auto;
  }
  .block-reccomend-items2 ._slider {
    width: 69.4444444444vw;
    margin: 0 auto;
    margin-top: 3.4722222222vw;
  }
  .block-reccomend-items2 ._btns {
    margin-top: 2.7777777778vw;
    text-align: center;
  }
  .mod-hover {
    cursor: pointer;
    transition-duration: 0.2s;
  }
  .mod-hover:hover {
    opacity: 0.95;
  }
  .mod-btn-online {
    display: inline-block;
    border: 1px solid #003E28;
    background-color: #003E28;
    border-radius: 3.4722222222vw;
    padding: 0.4861111111vw 2.7777777778vw;
    font-size: 0.8333333333vw;
    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: 1.0416666667vw;
    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-archives {
    display: block;
    padding: 1.3888888889vw;
    text-align: center;
    font-weight: normal;
    font-size: 0.9722222222vw;
    letter-spacing: 0.08em;
    color: #003e28;
    cursor: pointer;
    transition-duration: 0.2s;
  }
  .mod-btn-archives:hover {
    opacity: 0.8;
  }
  .mod-btn-archives span {
    display: inline-block;
    position: relative;
    padding: 0 1.3888888889vw 0 0;
  }
  .mod-btn-archives span:before {
    position: absolute;
    top: 40%;
    right: 0;
    display: block;
    content: "";
    height: 0.2083333333vw;
    width: 0.2083333333vw;
    border: 1px solid #000;
    border-right-width: 0;
    border-top-width: 0;
    transform: translate(0, -50%) rotate(-45deg);
  }
  .mod-btn-more {
    display: block;
    font-weight: normal;
    font-size: 0.9027777778vw;
    letter-spacing: 0.08em;
    line-height: 2.0833333333vw;
    text-align: center;
    border: 1px solid #fff;
    border-radius: 3.4722222222vw;
    color: #fff;
    cursor: pointer;
    transition-duration: 0.2s;
  }
  .mod-btn-more.is-dark {
    border: 1px solid #000;
    color: #000;
  }
  .mod-btn-more:hover {
    color: #7d4e22;
    background-color: #fff;
  }
  .mod-btn-more:hover:before {
    border-color: #7d4e22;
  }
  .mod-btn-more:before {
    position: absolute;
    top: 50%;
    right: 1.0416666667vw;
    display: block;
    content: "";
    height: 0.2777777778vw;
    width: 0.2777777778vw;
    border: 1px solid #fff;
    border-left-width: 0;
    border-top-width: 0;
    transform: translate(0, -50%) rotate(-45deg);
  }
  .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.3vw) 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-recommend-item {
    display: block;
    cursor: pointer;
    width: 9.0277777778vw;
    transition-duration: 0.2s;
  }
  .mod-recommend-item:hover {
    opacity: 0.8;
  }
  .mod-recommend-item ._item-image img {
    width: 100%;
  }
  .mod-recommend-item ._item-texts {
    margin-top: 0.6944444444vw;
  }
  .mod-recommend-item ._item-texts ._name {
    font-size: 0.9722222222vw;
    line-height: 1.6;
    letter-spacing: 0.08em;
    color: #000;
  }
  .mod-swiper-mv {
    --swiper-pagination-bullet-horizontal-gap:7px;
    --swiper-theme-color:#000000;
  }
  .mod-swiper-items {
    position: relative;
    --swiper-scrollbar-size:1px;
    --swiper-scrollbar-sides-offset:0px;
    padding: 0 0 1.7361111111vw 0;
  }
  .mod-swiper-items .swiper-slide {
    width: 11.8055555556vw;
  }
  .mod-swiper-items .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-items .swiper-button-prev:hover {
    opacity: 0.8;
  }
  .mod-swiper-items .swiper-button-prev:after {
    color: #000;
    font-size: 0.8333333333vw;
  }
  .mod-swiper-items .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-items .swiper-button-next:hover {
    opacity: 0.8;
  }
  .mod-swiper-items .swiper-button-next:after {
    color: #000;
    font-size: 0.8333333333vw;
  }
  .mod-swiper-items .swiper-button-disabled {
    opacity: 0.4;
  }
  .mod-swiper-items .swiper-slide {
    transition-duration: 0.5s;
    transition-property: transform;
  }
  .mod-swiper-items .swiper-scrollbar {
    background-color: #E5E5E5;
  }
  .mod-swiper-items .swiper-scrollbar-drag {
    background-color: #000000;
  }
}
@media screen and (max-width: 1023px) {
  .block-opening {
    position: fixed;
    inset: 0;
    background: #003E29;
    z-index: 1000000;
    --delay-base:1.6s;
    --delay:2.0s;
    transition-duration: 0.6s;
    transition-delay: calc(var(--delay-base) + var(--delay));
    overflow: hidden;
    clip-path: inset(0px);
  }
  .block-opening.is-skip {
    display: none;
  }
  .block-opening ._window1,
  .block-opening ._window2 {
    background: #fff;
    transition-delay: 1s;
    transition-duration: 0.4s;
    position: absolute;
    left: 0;
    right: 0;
    height: 51vh;
  }
  .block-opening ._window1 {
    top: 0;
  }
  .block-opening ._window2 {
    bottom: 0;
  }
  .block-opening.is-active ._window1 {
    transform: translate(0, -52vh);
  }
  .block-opening.is-active ._window2 {
    transform: translate(0, 52vh);
  }
  .block-opening ._logo-stand {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition-duration: 0.6s;
    transition-delay: calc(var(--delay-base) + var(--delay));
  }
  .block-opening ._logo-stand ._logo-stand-inner {
    transition-duration: 5s;
    width: 74.6666666667vw;
    transition-timing-function: linear;
  }
  .block-opening.is-active ._logo-stand ._logo-stand-inner {
    transform: scale(0.8);
  }
  .block-opening ._logos {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition-duration: 0.1s;
    transition-delay: 1s;
  }
  .block-opening ._logos ._logos-inner {
    display: flex;
    justify-content: space-between;
    gap: 10.6666666667vw;
    align-items: center;
  }
  .block-opening ._logos ._logo-staba {
    position: relative;
    width: 22.6666666667vw;
    opacity: 0;
    transition-duration: 0.6s;
  }
  .block-opening ._logos ._logo-beams {
    position: relative;
    width: 25.3333333333vw;
    opacity: 0;
    transition-duration: 0.6s;
    transition-delay: 0.2s;
  }
  .block-opening.is-active ._logos {
    opacity: 0;
  }
  .block-opening.is-active ._logo-staba {
    opacity: 1;
  }
  .block-opening.is-active ._logo-beams {
    opacity: 1;
  }
  .block-opening ._scene-photos {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translate(0, 0);
    transition-duration: 0.6s;
    transition-delay: calc(var(--delay-base) + var(--delay));
  }
  .block-opening.is-active {
    clip-path: inset(0px 0px 100%);
  }
  .block-opening ._photo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .mod-opening-photo ._photo-inner {
    overflow: hidden;
    transition-property: transform;
    transition-duration: 0.3s;
  }
  .mod-opening-photo ._photo-inner img {
    transition-property: transform;
    transition-duration: 0.3s;
  }
  .mod-opening-photo.is-a {
    --delay:0.2s;
  }
  .mod-opening-photo.is-a ._photo-inner {
    transform: translate(0, 100vh);
    transition-delay: calc(var(--delay-base) + var(--delay));
  }
  .mod-opening-photo.is-a ._photo-inner img {
    transform: translate(0, -100vh);
    transition-delay: calc(var(--delay-base) + var(--delay));
  }
  .is-active .mod-opening-photo.is-a ._photo-inner {
    transform: translate(0, 0);
  }
  .is-active .mod-opening-photo.is-a ._photo-inner img {
    transform: translate(0, 0);
  }
  .mod-opening-photo.is-b {
    --delay:0.5s;
  }
  .mod-opening-photo.is-b ._photo-inner {
    transform: translate(-100vw, 0);
    transition-delay: calc(var(--delay-base) + var(--delay));
  }
  .mod-opening-photo.is-b ._photo-inner img {
    transform: translate(100vw, 0);
    transition-delay: calc(var(--delay-base) + var(--delay));
  }
  .is-active .mod-opening-photo.is-b ._photo-inner {
    transform: translate(0, 0);
  }
  .is-active .mod-opening-photo.is-b ._photo-inner img {
    transform: translate(0, 0);
  }
  .mod-opening-photo.is-c {
    --delay:0.8s;
  }
  .mod-opening-photo.is-c ._photo-inner {
    transform: translate(0, -100vh);
    transition-delay: calc(var(--delay-base) + var(--delay));
  }
  .mod-opening-photo.is-c ._photo-inner img {
    transform: translate(0, 100vh);
    transition-delay: calc(var(--delay-base) + var(--delay));
  }
  .is-active .mod-opening-photo.is-c ._photo-inner {
    transform: translate(0, 0);
  }
  .is-active .mod-opening-photo.is-c ._photo-inner img {
    transform: translate(0, 0);
  }
  .mod-opening-photo.is-d {
    --delay:1.1s;
  }
  .mod-opening-photo.is-d ._photo-inner {
    transform: translate(100vw, 0);
    transition-delay: calc(var(--delay-base) + var(--delay));
  }
  .mod-opening-photo.is-d ._photo-inner img {
    transform: translate(-100vw, 0);
    transition-delay: calc(var(--delay-base) + var(--delay));
  }
  .is-active .mod-opening-photo.is-d ._photo-inner {
    transform: translate(0, 0);
  }
  .is-active .mod-opening-photo.is-d ._photo-inner img {
    transform: translate(0, 0);
  }
  .mod-opening-photo img {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
  }
  .block-main {
    position: relative;
    padding: 5.3333333333vw 2.6666666667vw 16vw 2.6666666667vw;
    height: 70vw;
  }
  .block-main ._inner {
    height: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.6666666667vw;
  }
  .block-main img {
    width: 100%;
  }
  .block-main ._logo {
    width: 58.6666666667vw;
  }
  .block-main ._image {
    position: relative;
    width: 100%;
    padding: 0 0 10vw 0;
  }
  .block-concept-wrap {
    position: relative;
    opacity: 0;
    transition-duration: 0.4s;
    z-index: -1;
    visibility: hidden;
    background: url(/starbucks-stand-by-beams/index/images/concept/sp/bg.jpg?) top center;
    background-size: 100% auto;
  }
  body.is-pos-concept .block-concept-wrap {
    opacity: 1;
    z-index: 10;
    visibility: visible;
  }
  .block-concept-wrap ._head {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    height: 40vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(/starbucks-stand-by-beams/index/images/concept/bg2.png?) center bottom;
    background-size: 100% 100%;
    z-index: 10;
  }
  .block-concept-wrap ._head ._logo {
    width: 58.6666666667vw;
    margin: 0 auto;
  }
  .block-concept-wrap img {
    width: 100%;
  }
  .block-concept {
    position: relative;
  }
  .block-concept ._body {
    margin-top: 100vw;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5.3333333333vw;
  }
  .block-concept ._lead {
    width: 64vw;
    margin: 0 auto;
  }
  .block-concept ._texts-wrap {
    margin-top: 12vw;
    width: 100vw;
    position: relative;
    height: 100vw;
    opacity: 0;
    transition-duration: 0.2s;
    transition-delay: 0.4s;
  }
  body.is-pos-concept .block-concept ._texts-wrap {
    opacity: 1;
  }
  .block-concept ._texts {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    gap: 8vw;
    flex-direction: column;
  }
  .block-concept ._texts.is-bg {
    opacity: 0.2;
  }
  .block-concept ._texts.is-front {
    opacity: 1;
    clip-path: inset(0px 0px 50%);
  }
  .block-concept ._texts p {
    text-align: center;
    font-size: 3.7333333333vw;
    color: #ffffff;
    letter-spacing: 0.01em;
    line-height: 1.86;
  }
  .block-reccomend-items {
    margin-top: -60vw;
    position: relative;
    transition-duration: 0.4s;
    opacity: 0;
    background-color: #fff;
    z-index: 20;
  }
  body.is-pos-reccomend .block-reccomend-items {
    opacity: 1;
  }
  .block-reccomend-items ._head-wh {
    position: sticky;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 40vw;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20;
  }
  .block-reccomend-items ._head-wh img {
    opacity: 0.2;
  }
  .block-reccomend-items ._head-wh ._logo {
    width: 58.6666666667vw;
    margin: 0 auto;
  }
  .block-reccomend-items ._inner {
    position: relative;
    margin-top: 35vw;
    padding: 5vw 0 8vw 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    overflow: hidden;
  }
  .block-reccomend-items ._ti {
    font-size: 6.4vw;
    text-align: center;
    font-weight: 400;
    font-style: italic;
    line-height: 1;
    letter-spacing: 0.06em;
    color: #000;
  }
  .block-reccomend-items ._slider {
    width: 93.3333333333vw;
    margin: 0 auto;
    margin-top: 13.3333333333vw;
  }
  .block-reccomend-items ._btns {
    margin-top: 9.3333333333vw;
    text-align: center;
  }
  .block-seasonal {
    padding: 10.6666666667vw 0 21.3333333333vw 0;
  }
  .block-seasonal ._inner {
    border-top: 1px solid #ADADAD;
    width: 94.6666666667vw;
    margin: 0 auto;
    padding: 20vw 0 0 0;
  }
  .block-seasonal ._title {
    display: flex;
    flex-direction: column;
    gap: 2.6666666667vw;
    align-items: center;
    text-align: center;
  }
  .block-seasonal ._title h2 {
    font-size: 7.4666666667vw;
    line-height: 1;
    letter-spacing: 0.06;
    transform: skew(-10deg);
  }
  .block-seasonal ._title ._doc {
    margin-top: 4vw;
    font-size: 3.7333333333vw;
    line-height: 1.43;
    letter-spacing: 0.08;
  }
  .block-seasonal ._images-wrap {
    margin: -2.6666666667vw;
    margin-top: 10.6666666667vw;
  }
  .block-seasonal ._btns {
    width: 48vw;
    margin: 0 auto;
    margin-top: 16vw;
  }
  .block-seasonal ._archeves {
    margin-top: 8vw;
    padding: 0 5.3333333333vw;
  }
  .block-seasonal ._archeves .mod-seasonal-items {
    margin-bottom: 5.3333333333vw;
  }
  .mod-seasonal-items {
    display: flex;
    flex-direction: row;
    gap: 9.3333333333vw 5.3333333333vw;
    flex-wrap: wrap;
  }
  .mod-seasonal-items > li {
    width: calc((100% - 5.4vw) / 2);
  }
  .mod-seasonal-item {
    display: block;
  }
  .mod-seasonal-item ._item-texts {
    margin-top: 2.6666666667vw;
  }
  .mod-seasonal-item ._item-texts ._name {
    font-size: 3.4666666667vw;
    line-height: 1.54;
    letter-spacing: 0.02;
    color: #000000;
  }
  .mod-seasonal-item ._item-texts ._date {
    font-size: 3.2vw;
    line-height: 2.17;
    letter-spacing: 0.01;
    color: #999999;
  }
  .block-core {
    position: relative;
    background: #7d4e22;
    height: 298.67vw;
    width: 100vw;
    overflow: hidden;
  }
  .block-core h2 {
    font-size: 7.4666666667vw;
    line-height: 1;
    letter-spacing: 0.06;
    color: #ffffff;
    text-align: center;
    transform: skew(-10deg);
  }
  .block-core ._doc {
    font-size: 3.7333333333vw;
    line-height: 1.43;
    letter-spacing: 0.08;
    color: #ffffff;
    text-align: center;
  }
  .block-core ._copy1 {
    font-size: 4.5333333333vw;
    line-height: 1.41;
    letter-spacing: 0.06;
    color: #ffffff;
  }
  .block-core h2 {
    position: absolute;
    top: 17.4vw;
    left: 5vw;
    right: 5vw;
  }
  .block-core ._doc {
    position: absolute;
    top: 31.2vw;
    left: 0;
    right: 0;
  }
  .block-core ._p1 {
    position: absolute;
    top: 62.13vw;
    left: 6.67vw;
    width: 93.33vw;
  }
  .block-core ._copy1 {
    position: absolute;
    top: 130.67vw;
    left: 47.2vw;
    width: 49.87vw;
  }
  .block-core ._p2 {
    position: absolute;
    top: 138.67vw;
    left: 0vw;
    width: 36.8vw;
  }
  .block-core ._p6 {
    position: absolute;
    top: 164.57vw;
    left: 62.13vw;
    width: 32.53vw;
  }
  .block-core ._p3 {
    position: absolute;
    top: 181.07vw;
    left: 5.33vw;
    width: 47.47vw;
  }
  .block-core ._p5 {
    position: absolute;
    top: 218.13vw;
    left: 76vw;
    width: 24vw;
  }
  .block-core ._p4 {
    position: absolute;
    top: 225.07vw;
    left: 0vw;
    width: 58.4vw;
  }
  .block-core ._btns {
    position: absolute;
    top: 274.67vw;
    left: 26.4vw;
    width: 49.07vw;
  }
  .block-extra {
    position: relative;
    img-width: 100%;
    padding: 22.6666666667vw 2.6666666667vw 24vw 2.6666666667vw;
  }
  .block-extra ._inner {
    margin: 0 auto;
  }
  .block-extra ._title {
    display: flex;
    flex-direction: column;
    gap: 2.6666666667vw;
    align-items: center;
    text-align: center;
  }
  .block-extra ._title h2 {
    font-size: 7.4666666667vw;
    line-height: 1;
    letter-spacing: 0.06;
    transform: skew(-10deg);
  }
  .block-extra ._title ._doc {
    margin-top: 4vw;
    font-size: 3.7333333333vw;
    line-height: 1.43;
    letter-spacing: 0.08;
  }
  .block-extra ._archeves {
    margin-top: 8vw;
  }
  .block-extra ._archeves .mod-extra-items {
    margin-bottom: 5.3333333333vw;
  }
  .mod-extra-items {
    display: flex;
    flex-direction: row;
    gap: 10.6666666667vw 4vw;
    flex-wrap: wrap;
  }
  .mod-extra-items > li {
    width: calc((100% - 4vw) / 2);
  }
  .mod-extra-item {
    display: block;
  }
  .mod-extra-item ._item-texts {
    margin-top: 4vw;
  }
  .mod-extra-item ._item-texts ._name {
    font-size: 3.2vw;
    line-height: 1.54;
    letter-spacing: 0.02;
    color: #000000;
  }
  .mod-extra-item ._item-texts ._date {
    font-size: 3.2vw;
    line-height: 2.17;
    letter-spacing: 0.01;
    color: #999999;
  }
  .block-label {
    background: url(/starbucks-stand-by-beams/index/images/tape.png);
    background-size: auto 13.3333333333vw;
    height: 13.3333333333vw;
    animation: keyf_bg 5s linear 0s infinite;
  }
  @keyframes keyf_bg {
    0% {
      background-position-x: 59.2vw;
    }
    100% {
      background-position-x: 0;
    }
  }
  .block-reccomend-items2 {
    overflow: hidden;
    position: relative;
  }
  .block-reccomend-items2 ._inner {
    padding: 21.3333333333vw 0 21.3333333333vw 0;
  }
  .block-reccomend-items2 ._logo {
    width: 58.6666666667vw;
    margin: 0 auto;
  }
  .block-reccomend-items2 ._slider {
    width: 93.3333333333vw;
    margin: 0 auto;
    margin-top: 13.3333333333vw;
  }
  .block-reccomend-items2 ._btns {
    margin-top: 10.6666666667vw;
    text-align: center;
  }
  .mod-btn-online {
    display: inline-block;
    border: 1px solid #003E28;
    background-color: #003E28;
    border-radius: 13.3333333333vw;
    padding: 1.8666666667vw 10.6666666667vw;
    font-size: 3.2vw;
    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: 4vw;
    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-archives {
    padding: 2.6666666667vw;
    text-align: center;
    font-weight: normal;
    font-size: 3.4666666667vw;
    letter-spacing: 0.08em;
    color: #003e28;
  }
  .mod-btn-archives span {
    display: inline-block;
    position: relative;
    padding: 0 5.3333333333vw 0 0;
  }
  .mod-btn-archives span:before {
    position: absolute;
    top: 40%;
    right: 0;
    display: block;
    content: "";
    height: 0.8vw;
    width: 0.8vw;
    border: 1px solid #000;
    border-right-width: 0;
    border-top-width: 0;
    transform: translate(0, -50%) rotate(-45deg);
  }
  .mod-btn-more {
    display: block;
    font-weight: normal;
    font-size: 3.4666666667vw;
    letter-spacing: 0.08em;
    line-height: 8vw;
    text-align: center;
    border: 1px solid #fff;
    border-radius: 13.3333333333vw;
    color: #fff;
  }
  .mod-btn-more.is-dark {
    border: 1px solid #000;
    color: #000;
  }
  .mod-btn-more:before {
    position: absolute;
    top: 50%;
    right: 4vw;
    display: block;
    content: "";
    height: 1.0666666667vw;
    width: 1.0666666667vw;
    border: 1px solid #fff;
    border-left-width: 0;
    border-top-width: 0;
    transform: translate(0, -50%) rotate(-45deg);
  }
  .mod-slide-texts div {
    overflow: hidden;
  }
  .mod-slide-texts div span {
    display: block;
    font-size: 4.5333333333vw;
    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.3vw) 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-recommend-item {
    display: block;
    cursor: pointer;
    width: 22.6666666667vw;
  }
  .mod-recommend-item ._item-image img {
    width: 100%;
  }
  .mod-recommend-item ._item-texts {
    margin-top: 1.3333333333vw;
  }
  .mod-recommend-item ._item-texts ._name {
    font-size: 3.2vw;
    line-height: 1.6;
    letter-spacing: 0.08em;
    color: #000;
  }
  .mod-swiper-mv {
    --swiper-pagination-bullet-horizontal-gap:7px;
    --swiper-theme-color:#000000;
  }
  .mod-swiper-items {
    position: relative;
    --swiper-scrollbar-size:1px;
    padding: 0 0 10.6666666667vw 1.3333333333vw;
  }
  .mod-swiper-items .swiper-slide {
    width: 28vw;
  }
  .mod-swiper-items .swiper {
    overflow: visible;
  }
  .mod-swiper-items .swiper-button-prev,
  .mod-swiper-items .swiper-button-next {
    display: none;
  }
  .mod-swiper-items .swiper-slide {
    transition-duration: 0.5s;
  }
  .mod-swiper-items .swiper-scrollbar {
    background-color: #E5E5E5;
  }
  .mod-swiper-items .swiper-scrollbar-drag {
    background-color: #000000;
  }
}