@charset "UTF-8";

/* ==================================================
  01. Keyframes / Animation presets
  汎用アニメーション定義。各セクションから参照されるため上部に集約。
================================================== */

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(40px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes fadeLeft {
    0% {
        opacity: 0;
        transform: translateX(-40px)
    }

    100% {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes fadeRight {
    0% {
        opacity: 0;
        transform: translateX(40px)
    }

    100% {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes blurIn {
    0% {
        opacity: 0;
        -webkit-filter: blur(10px);
        filter: blur(10px);
    }

    99% {
        opacity: 1;
        -webkit-filter: blur(0);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        -webkit-filter: none;
        filter: none;
    }
}

@keyframes slideUp {
    0% {
        -webkit-mask-size: 100% 300%;
        mask-size: 100% 300%;
        -webkit-mask-position: 60% -40%;
        mask-position: 60% -40%
    }

    100% {
        -webkit-mask-size: 100% 190%;
        mask-size: 100% 190%;
        -webkit-mask-position: 0 100%;
        mask-position: 0 100%
    }
}

@keyframes loading {
    0%,40%,60%,80% {
        transform: scale(1)
    }

    50%,70% {
        transform: scale(.95)
    }
}

@keyframes steam {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0)
    }

    20% {
        opacity: 0;
        transform: scale(1) translateY(0)
    }

    21% {
        opacity: 0;
        transform: scale(.5) translateY(10%)
    }

    36% {
        opacity: 0
    }

    61% {
        opacity: .5
    }

    99% {
        opacity: 1;
        transform: scale(1) translateY(0)
    }

    100% {
        opacity: 1
    }
}

@keyframes steamRepeat {
    0% {
        opacity: 0;
        transform: scale(.5) translateY(10%)
    }

    30% {
        opacity: .5
    }

    60% {
        opacity: 1;
        transform: scale(1) translateY(0)
    }

    70% {
        opacity: 0
    }

    100% {
        opacity: 0
    }
}

@keyframes brushdrawLeft {
    0% {
        opacity: 0;
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    }

    100% {
        opacity: 1;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

@keyframes brushdrawRight {
    0% {
        opacity: 0;
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
        -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    }

    100% {
        opacity: 1;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

@keyframes bounce {
    0% {
        opacity: 0;
        transform: scale(.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}
@keyframes peron {
    0% {
        opacity: 0;
        transform: perspective(1000px) rotate(-2deg) rotateX(-6deg) scale(.99);
    }

    60% {
        opacity: 1;
        transform: perspective(1000px) rotate(.8deg) rotateX(1.5deg) scale(1);
    }

    100% {
        opacity: 1;
        transform: perspective(1000px) rotate(0) rotateX(0) scale(1);
    }
}

/* ==================================================
  02. Base / Global reset
================================================== */

body {
    font-family: 'Noto Sans JP', "メイリオ", Meiryo,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック","MS PGothic", sans-serif;
    padding: 0;
    visibility: visible !important;
}

img {
    max-width: 100%;
    vertical-align: bottom;
    -webkit-backface-visibility: hidden;
}

section {
    display: block !important;
    margin: 0;
    padding: 0;
}

@media screen and (max-width: 768px) {
    .pc_only {
        display: none!important
    }
}

@media screen and (min-width: 769px) {
    .sp_only {
        display: none!important
    }
}

/* ==================================================
  03. Preloading background layer
  ローディング中に見せる全面背景。
================================================== */

.lp-bg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9000;
}

.lp-bg.__hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .5s, visibility 0s .5s;
}

.lp-bg__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.lp-bg__img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}


/* ==================================================
  04. Loading screen
  ローディング画面・動画・Loading文字。動画上の網掛けもここで管理。
================================================== */

.lp-marugame-loading {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    overflow: hidden;
}

.lp-marugame-loading.__hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .5s, visibility 0s .5s;
}

.lp-marugame-loading__textbox {
    padding-top: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.lp-marugame-loading__textbox.__hidden {
    opacity: 0;
    transition: opacity .5s;
}

.lp-marugame-loading__textbox #__loadingtext {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.lp-marugame-loading__textbox #__loadingtext span {
    display: block;
    width: auto;
    padding: 0;
}

.lp-marugame-loading__textbox #__loadingtext img {
    display: block;
    width: auto;
	max-width: none;
    height: 32px;
}

.lp-marugame-loading__video {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 1;
    overflow: hidden;
}

.lp-marugame-loading .video-container {
    display: block;
    width: 101%;
    height: 100%;
    object-fit: cover;
    background-color: #f8f2eb;
}

/* 動画の上に白い網掛け */
.lp-marugame-loading__video::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: radial-gradient(circle, rgba(255,255,255,0.6) 0.5px, transparent 1.5px);
    background-size: 3px 3px;
    opacity: 1;
}

.lp-marugame-loading__intro {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.lp-marugame-loading__intro-txt {
    width: 10vw;
    min-width: 70px;
    max-width: 140px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.lp-marugame-loading__intro-txt span {
    display: block;
    position: relative;
    transform: scale(2);
    opacity: 0;
}

.lp-marugame-loading__intro-txt.__show span {
    transform: scale(1);
    opacity: 1;
    transition: all cubic-bezier(.65, 0, .2, 1) .6s .1s;
}

.lp-marugame-loading__intro-txt img {
    display: block;
    width: 100%;
    height: auto;
}


/* ==================================================
  05. LP root / background / container
================================================== */

.lp-marugame {
    overflow: hidden;
    width: 100%;
    position: relative;
    z-index: 1;
    opacity: 0;
}

.lp-marugame.__show {
    opacity: 1;
}

.lp-marugame a {
    transition: opacity ease .3s;
}

.lp-marugame a:hover {
    opacity: .8;
}

.lp-marugame__bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.lp-marugame__bg img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.lp-marugame__container {
    max-width: 1020px;
    margin: 0 auto;
    position: relative;
    display: flex;
    justify-content: flex-end;
}

.lp-marugame__contents {
    border-left: #fff solid 5px;
    border-right: #fff solid 5px;
    width: 510px;
    position: relative;
    z-index: 20;
    background: url(/synced-assets/menu_umashio/assets/img/contents_bg.jpg) center top repeat-y;
}

/* ==================================================
  06. Main visual / KV slider
  KV本体。Mac Safari対策として、KV内のaはdisplay:blockを維持。
================================================== */

.lp-marugame__contents .lp-marugame__contents__main {
    width: 100%;
    height: 745px;
    position: relative;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease-in-out;
}

.lp-marugame__contents .lp-marugame__contents__main.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* KVの各スライドを包むラッパー。
   現在は遷移しないが、再度アンカー復活の可能性があるためa構造は維持。
   inlineのままだとMac Safariで絶対配置要素の描画が崩れるためdisplay:block必須。 */
.lp-marugame__contents .lp-marugame__contents__main a {
    transition: opacity ease .3s;
    position: relative;
    display: block;
    cursor: default;
}

.lp-marugame__contents .lp-marugame__contents__main a:hover {
    opacity: 1;
}

.lp-marugame__contents .lp-marugame__contents__main .__announcement {
    width: 100%;
    position: relative;
    left: 0;
    top: 0;
    z-index: 100;
}

/* --------------------------------
  KV slide layout common
  絶対配置・基準レイアウト。width/top/leftの個別差分は下のindividualへ。
-------------------------------- */

.lp-marugame__contents__main .splide__slide {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.lp-marugame__contents__main .splide__slide .__img {
    width: 100%;
    position: relative;
    z-index: 1;
}

.lp-marugame__contents__main .splide__slide .__name1 {
    width: 100%;
    position: absolute;
    left: 0;
    top: 45.7%;
    z-index: 11;
}

.lp-marugame__contents__main .splide__slide .__name2 {
    width: 100%;
    position: absolute;
    left: 0;
    top: 45.7%;
    z-index: 10;
}

.lp-marugame__contents__main .splide__slide .__text {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}

.lp-marugame__contents__main .splide__slide .__icon {
    width: 24.933%;
    position: absolute;
    left: 2.666%;
    top: 64.9%;
    z-index: 10;
}

/* --------------------------------
  KV slide layout individual
  デザイン差分が大きいため、各KVの位置調整はここで個別管理。
-------------------------------- */

.lp-marugame__contents__main .kv0-slide .__name1 {
    width: 33.333%;
    top: 0;
}

.lp-marugame__contents__main .kv0-slide .__name2 {
    width: 33.333%;
    top: 0;
}

.lp-marugame__contents__main .kv0-slide .__icon {
	width: 19.333%;
	left: 19%;
	top: 45%;
}


.lp-marugame__contents__main .kv2-slide .__icon {
    top: 46.738%;
    left: 71%;
}

.lp-marugame__contents__main .kv3-slide .__name1 {
    top: 1%;
}

.lp-marugame__contents__main .kv3-slide .__name2 {
    top: 1%;
}

.lp-marugame__contents__main .kv3-slide .__icon {
    top: 1.91%;
    left: 72%;
}

/* --------------------------------
  KV animation common
  Splideのis-activeとJS付与の__activeを併用。
  is-active: スライド全体フェード / __active: 初回表示時の文字・アイコン演出。
-------------------------------- */

.js-fv-slide .splide__slide {
	background: #fff;
}

/* Splideのフェードに加えて、背景白へ抜くためのKV全体フェード。 */
.js-fv-slide .splide__slide > div {
    opacity: 0;
    transition: opacity 2s ease;
}

.js-fv-slide .splide__slide.is-active > div {
    opacity: 1;
}

.js-fv-slide .splide__slide span {
    display: block;
    position: relative;
    opacity: 0;
}

/* name1 */
.js-fv-slide .splide__slide .__name1 span {
    opacity: 0;
}

.js-fv-slide .splide__slide .__active .__name1 span {
    animation-name: bounce;
    animation-duration: .7s;
    animation-delay: 1.3s;
    animation-timing-function: cubic-bezier(.2, 1.4, .4, 1);
    animation-fill-mode: forwards;
}

/* name2 */

.js-fv-slide .kv0-slide .__name2 span {
    --name2-mask: url("/synced-assets/menu_umashio/assets/img/kv0_name2.webp");
}

.js-fv-slide .kv1-slide .__name2 span {
    --name2-mask: url("/synced-assets/menu_umashio/assets/img/kv1_name2.webp");
}

.js-fv-slide .kv2-slide .__name2 span {
    --name2-mask: url("/synced-assets/menu_umashio/assets/img/kv2_name2.webp");
}

.js-fv-slide .kv3-slide .__name2 span {
    --name2-mask: url("/synced-assets/menu_umashio/assets/img/kv3_name2.webp");
}

.js-fv-slide .splide__slide .__name2 span {
    overflow: hidden;
}

.js-fv-slide .splide__slide .__name2 span img {
    opacity: 0;
    display: block;
    -webkit-filter: blur(15px);
    filter: blur(15px);
}

.js-fv-slide .splide__slide .__name2 span::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;

    background: linear-gradient(
        110deg,
        transparent 0%,
        rgba(255,255,255,0) 45%,
        rgba(255,255,255,.8) 50%,
        rgba(255,255,255,0) 55%,
        transparent 100%
    );
    background-size: 35% 100%;
    background-repeat: no-repeat;
    background-position: -50% 0;

    mix-blend-mode: screen;

    -webkit-mask-image: var(--name2-mask);
    mask-image: var(--name2-mask);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.js-fv-slide .splide__slide .__active .__name2 span {
    opacity: 1;
}

.js-fv-slide .splide__slide .__active .__name2 span img {
    opacity: 1;
    -webkit-filter: blur(0);
    filter: blur(0);
    transition-property: opacity, -webkit-filter, filter;
    transition-duration: .7s, .7s, .7s;
    transition-timing-function: ease, ease, ease;
    transition-delay: .9s, .9s, .9s;
}

.js-fv-slide .splide__slide .__active .__name2 span::after {
    animation: name2Shine 1.5s ease 2s forwards;
}

@keyframes name2Shine {
    0% {
        opacity: 0;
        background-position: -50% 0;
    }

    20% {
        opacity: .9;
    }

    60% {
        opacity: .9;
    }

    100% {
        opacity: 0;
        background-position: 150% 0;
    }
}

.js-fv-slide .kv0-slide.__active .__name2 span::after,
.js-fv-slide .__active.kv0-slide .__name2 span::after {
	animation-name: name2ShineVertical;
}

.js-fv-slide .kv0-slide .__name2 span::after {
    background-size: 100% 35%;
    background-position: 0 -50%;
}

@keyframes name2ShineVertical {
    0% {
        opacity: 0;
        background-position: 0 -50%;
    }

    20% {
        opacity: .9;
    }

    60% {
        opacity: .9;
    }

    100% {
        opacity: 0;
        background-position: 0 150%;
    }
}

/* icon */
.js-fv-slide .splide__slide .__icon span {
    transform: scale(2) rotate(-10deg);
    opacity: 0;
}

.js-fv-slide .splide__slide .__active .__icon span {
    transform: scale(1) rotate(0deg);
    opacity: 1;
    transition-property: transform, opacity;
    transition-duration: .8s, .8s;
    transition-timing-function: cubic-bezier(.4,.05,.1,1), cubic-bezier(.4,.05,.1,1);
    transition-delay: 1.6s, 1.6s;
}

/* copy */
.js-fv-slide .splide__slide .__copy span {
    transform: translateY(-30px);
}

.js-fv-slide .splide__slide .__active .__copy span {
    transform: translateY(0);
    opacity: 1;
    transition: all ease .8s 1.6s;
}

.lp-marugame__contents .lp-marugame__contents__main .kv-nav-next {
    width: 30px;
    position: absolute;
    right: 0;
    top: 60%;
    z-index: 100;
}

.lp-marugame__contents .lp-marugame__contents__main .kv-nav-prev {
    width: 30px;
    position: absolute;
    left: 0;
    top: 60%;
    z-index: 100;
}


/* ==================================================
  07. Main navigation under KV
================================================== */

.lp-marugame__contents .lp-marugame__contents__navi {
    width: 100%;
    position: relative;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out 0.8s;
}

.lp-marugame__contents .lp-marugame__contents__navi.is-active {
    opacity: 1;
    pointer-events: auto;
}

.lp-marugame__contents .lp-marugame__contents__navi ul {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1%;
}

.lp-marugame__contents .lp-marugame__contents__navi ul li a {
    display: block;
}

/* ==================================================
  08. Intro CM modal area
================================================== */

.lp-marugame__contents .lp-marugame__intro__cm {
    position: relative;
}

.lp-marugame__contents .lp-marugame__intro__cm a.js-modal-video {
    display: block;
    position: absolute;
    top: 28%;
    left: 0;
    right: 0;
    margin: auto;
    width: 89%;
    background: #fff;
    outline: none;
    opacity: 1;
    transition: .6s;
}

.lp-marugame__contents .lp-marugame__intro__cm a.js-modal-video::before {
    content: "";
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 1px solid #fff;
    z-index: 2;
    pointer-events: none;
}

.lp-marugame__contents .lp-marugame__intro__cm a.js-modal-video::after {
    content: "";
    position: absolute;
    right: 34px;
    bottom: 34px;
    width: 0;
    height: 0;
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    border-left: 28px solid #fff;
    z-index: 3;
    pointer-events: none;
}

@media screen and (max-width: 768px) {
    .lp-marugame__contents .lp-marugame__intro__cm a.js-modal-video::before {
        right: 3vw;
        bottom: 3vw;
        width: 14vw;
        height: 14vw;
    }

    .lp-marugame__contents .lp-marugame__intro__cm a.js-modal-video::after {
        right: 6.7vw;
        bottom: 6.7vw;
        border-top-width: 3.5vw;
        border-bottom-width: 3.5vw;
        border-left-width: 5.2vw;
    }
}

.lp-marugame__contents .lp-marugame__intro__cm a.js-modal-video img {
    transition: .3s;
}

.lp-marugame__contents .lp-marugame__intro__cm a.js-modal-video:hover {
	transform: scale(1.02);
}

.lp-marugame__contents .lp-marugame__intro__cm a.js-modal-video:hover img {
    opacity: 0.8;
}
/* ==================================================
  09. Main copy section
  メインコピー、筆書き背景、ページ内動画。
================================================== */

.lp-marugame__contents .lp-marugame__contents__maincopy{
    position:relative;
}
.lp-marugame__contents .lp-marugame__contents__maincopy__inner > * {
	position: absolute;
}
.lp-marugame__contents .lp-marugame__contents__maincopy__inner .maincopy__read {
    top: 0;
    width: 26.666%;
    right: 8.1%;
}
.lp-marugame__contents .lp-marugame__contents__maincopy__inner .copy__item {
	z-index: 10;
}
.lp-marugame__contents .lp-marugame__contents__maincopy__inner .copy__item .copy {
    position: absolute;
    top: 0;
    left: 0;
}
.lp-marugame__contents .lp-marugame__contents__maincopy__inner .copy__item.item1 {
    top: 29.7%;
}
.lp-marugame__contents .lp-marugame__contents__maincopy__inner .copy__item.item2 {
    top: 62.6%;
}
.lp-marugame__contents .lp-marugame__contents__maincopy__inner .maincopy__text {
    top: 21.3%;
}

.lp-marugame__contents .lp-marugame__contents__maincopy .video__item {
    position: absolute;
    left: 0;
    right: 0;
    overflow: hidden;
    padding-top: 70.5%;
    mask-image: url(/synced-assets/menu_umashio/assets/img/maincopy_movie_mask.webp);
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url(/synced-assets/menu_umashio/assets/img/maincopy_movie_mask.webp);
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    width: 100%;
}
.lp-marugame__contents .lp-marugame__contents__maincopy .video__item video {
    width: 130%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: left;
}

.lp-marugame__contents .lp-marugame__contents__maincopy .video__item.item1 {
    top: 33.5%;
}

.lp-marugame__contents .lp-marugame__contents__maincopy .video__item.item2 {
    top: 66.5%;
}


.lp-marugame__contents__maincopy .scl-anim-elm {
    opacity: 0;
}
.lp-marugame__contents__maincopy .maincopy__read.scl-anim-init {
    animation: bounce .9s cubic-bezier(.2, 1.4, .4, 1) forwards;
}
.lp-marugame__contents__maincopy .maincopy__text.scl-anim-init {
    animation: blurIn 1s ease-out .3s forwards;
}
.lp-marugame__contents__maincopy .copy__item .bg.scl-anim-init {
    animation: brushdrawLeft .9s ease-out forwards;
}
.lp-marugame__contents__maincopy .copy__item .copy.scl-anim-init {
    animation: blurIn .9s ease-out .3s forwards;
}


/* ==================================================
  10. Udon sections common
  各うどんセクション共通。個別位置は __udon1 / __udon2 / __udon3 に分離。
================================================== */

.lp-marugame__contents .lp-marugame__contents__udon {
    width: 100%;
    position: relative;
}

.lp-marugame__contents .lp-marugame__contents__udon__inner > * {
	position: absolute;
}
.lp-marugame__contents .lp-marugame__contents__udon__inner .__name__item {
    top: 0;
}
.lp-marugame__contents .lp-marugame__contents__udon__inner .__name__item .name {
	position: absolute;
	top: 0;
	left: 0;
}
.lp-marugame__contents .lp-marugame__contents__udon__inner .__icon {
    z-index: 1;
    right: 0;
    width: 50%;
}
.lp-marugame__contents .lp-marugame__contents__udon__inner .__text {
    z-index: 1;
}

.lp-marugame__contents .lp-marugame__contents__udon__inner .scl-anim-elm {
    opacity: 0;
}
.lp-marugame__contents .lp-marugame__contents__udon__inner .__name__item .bg.scl-anim-init {
    animation: brushdrawLeft .5s ease-out forwards;
}
.lp-marugame__contents .lp-marugame__contents__udon__inner .__name__item .name.scl-anim-init {
    animation: blurIn .9s ease-out .3s forwards;
}
.lp-marugame__contents .lp-marugame__contents__udon__inner .__icon.scl-anim-elm {
    transform: translateY(-30px);
}
.lp-marugame__contents .lp-marugame__contents__udon__inner .__icon.scl-anim-init {
    transform: translateY(0);
    opacity: 1;
    transition: all ease .7s 1.2s;
}

.lp-marugame__contents .lp-marugame__contents__udon__inner .__text.scl-anim-init {
    animation: blurIn 1s ease-out .2s forwards;
}
.lp-marugame__contents .lp-marugame__contents__udon__inner .__img.scl-anim-init {
    animation: fadeUp 1s ease-out .5s forwards;
}
.lp-marugame__contents .lp-marugame__contents__udon .video__item {
    width: 88.4%;
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    overflow: hidden;
}

.lp-marugame__contents .lp-marugame__contents__udon .video__item video {
    width: 101%;
}

.lp-marugame__contents .lp-marugame__contents__udon .search {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 89%;
    background: #fff;
    opacity: 1;
    z-index: 10;
}

.lp-marugame__contents .lp-marugame__contents__udon .search img {
    transition: opacity ease .3s;
}

.lp-marugame__contents .lp-marugame__contents__udon .search:hover img {
    opacity: 0.8;
}

/* --------------------------------
  Udon 1 individual layout
-------------------------------- */

.lp-marugame__contents .lp-marugame__contents__udon.__udon1 {
    z-index: 100;
    margin-top: -20%;
}

.lp-marugame__contents .lp-marugame__contents__udon.__udon1 .base {
	margin-top: 18%;
}

.lp-marugame__contents .lp-marugame__contents__udon.__udon1 .__icon {
    top: 9.6%;
}

.lp-marugame__contents .lp-marugame__contents__udon.__udon1 .__text {
    top: 9.1%;
}

.lp-marugame__contents .lp-marugame__contents__udon.__udon1 .__img {
    top: 9.1%;
}

.lp-marugame__contents .lp-marugame__contents__udon.__udon1 .video__item {
    top: 60.5%;
}

.lp-marugame__contents .lp-marugame__contents__udon.__udon1 .search {
    top: 33.9%;
}

/* --------------------------------
  Udon 2 individual layout
-------------------------------- */

.lp-marugame__contents .lp-marugame__contents__udon.__udon2 {
    z-index: 150;
}

.lp-marugame__contents .lp-marugame__contents__udon.__udon2 .__icon {
    top: 5.9%;
}

.lp-marugame__contents .lp-marugame__contents__udon.__udon2 .__text {
    top: 5.6%;
}

.lp-marugame__contents .lp-marugame__contents__udon.__udon2 .__img {
    top: 5.6%;
}

.lp-marugame__contents .lp-marugame__contents__udon.__udon2 .video__item.item1 {
    top: 31.53%;
}

.lp-marugame__contents .lp-marugame__contents__udon.__udon2 .video__item.item2 {
    top: 50.93%;
}

.lp-marugame__contents .lp-marugame__contents__udon.__udon2 .search {
    top: 22%;
}


/* ==================================================
  11. Udon 2 point auto slide
  横自動スライド。JS側 startAutoXSlides() と連動。
================================================== */

.point__slide {
    top: 64.9%;
    left: 5.4%;
}

.point__slide .title {
    width: auto;
    position: absolute;
    width: 29.6%;
    z-index: 1;
}
.auto-x-slide {
    overflow: hidden;
    mask-image: url(/synced-assets/menu_umashio/assets/img/udon_ph_mask.webp);
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    width: 85.5%;
    margin-left: 7.1%;
    margin-top: 2.3%;
}

.auto-x-slide__track {
    display: flex;
    width: 100%;
    transform: translateX(0);
    will-change: transform;
}

.auto-x-slide__item {
    flex: 0 0 100%;
    width: 100%;
}

.auto-x-slide__item img {
    display: block;
    width: 100%;
    height: auto;
}

/* --------------------------------
  Udon 3 individual layout
-------------------------------- */

.lp-marugame__contents .lp-marugame__contents__udon.__udon3 {
    z-index: 200;
}

.lp-marugame__contents .lp-marugame__contents__udon.__udon3 .__icon {
    top: 6.4%;
}

.lp-marugame__contents .lp-marugame__contents__udon.__udon3 .__text {
    top: 6%;
}

.lp-marugame__contents .lp-marugame__contents__udon.__udon3 .__img {
    top: 6.1%;
}

.lp-marugame__contents .lp-marugame__contents__udon.__udon3 .video__item {
    top: 33.6%;
}

.lp-marugame__contents .lp-marugame__contents__udon.__udon3 .search {
    top: 23.9%;
}


.lp-marugame__contents .lp-marugame__contents__udon .__title.scl-anim-init {
    animation: bounce .7s cubic-bezier(.2, 1.4, .4, 1) .3s forwards;
}

.lp-marugame__contents .lp-marugame__contents__udon.__udon1 .__title {
    top: 39.7%;
}

.lp-marugame__contents .lp-marugame__contents__udon.__udon2 .__title.item1 {
    top: 26%;
}

.lp-marugame__contents .lp-marugame__contents__udon.__udon2 .__title.item2 {
    top: 45.7%;
}

.lp-marugame__contents .lp-marugame__contents__udon.__udon3 .__title {
    top: 27.9%;
}

/* こだわり要素の「ペロン」演出。
   カクつき対策で3D回転は弱め、backface-visibility / will-change を付与。 */
.lp-marugame__contents .lp-marugame__contents__udon .__kodawari.scl-anim-init {
    transform-origin: right top;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform, opacity;
    animation: peron 1.1s cubic-bezier(.22, 1, .36, 1) .3s forwards;
}

.lp-marugame__contents .lp-marugame__contents__udon.__udon2 .__kodawari {
    top: 82%;
}

.lp-marugame__contents .lp-marugame__contents__udon.__udon3 .__kodawari {
    top: 80.5%;
}

.lp-marugame__contents .lp-marugame__contents__udon.__udon3 .__img2.item1,
.lp-marugame__contents .lp-marugame__contents__udon.__udon3 .__detail.item1 {
    top: 45.1%;
}

.lp-marugame__contents .lp-marugame__contents__udon.__udon3 .__img2.item2,
.lp-marugame__contents .lp-marugame__contents__udon.__udon3 .__detail.item2 {
    top: 53.4%;
}

.lp-marugame__contents .lp-marugame__contents__udon.__udon3 .__img2.item1.scl-anim-init {
    animation: blurIn 1.7s cubic-bezier(.2, 1.4, .4, 1) .6s forwards;
}

.lp-marugame__contents .lp-marugame__contents__udon.__udon3 .__img2.item2.scl-anim-init {
    animation: blurIn 1.7s cubic-bezier(.2, 1.4, .4, 1) 1s forwards;
}


/* ==================================================
  12. Osusume section wrapper
================================================== */

.lp-marugame__contents .lp-marugame__contents__gentei {
    padding: 40px 0 40px;
    position: relative;
    z-index: 40;
}

/* ==================================================
  13. Floating menu
================================================== */

.lp-marugame-floatmenu {
    pointer-events: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 5;
    opacity: 0;
    transition: opacity ease .6s;
}

@media screen and (max-width: 1280px) {
    .lp-marugame-floatmenu {
        bottom: 52px;
    }
}

@media screen and (max-width: 768px) {
	.lp-marugame-floatmenu.__show {
	    opacity: 1;
	}
}

.lp-marugame-floatmenu__contents {
    pointer-events: none;
    max-width: 1020px;
    margin: 0 auto;
    position: relative;
    display: flex;
    justify-content: flex-end;
}

.lp-marugame-floatmenu__contents-inner {
    pointer-events: none;
    background-color: #fff;

    border-left: #fff solid 5px;
    border-right: #fff solid 5px;
    width: 510px;
}

.lp-marugame-floatmenu.__show .lp-marugame-floatmenu__contents-inner {
    pointer-events: auto;
}

.lp-marugame-floatmenu__contents-inner ul {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1%;
}

.lp-marugame-floatmenu__contents-inner ul li a {
    display: block;
}

/* ==================================================
  14. Side fixed menu
================================================== */

.lp-marugame__menu {
    position: fixed;
    right: 55%;
    top: 0;
    width: 50%;
    height: 100%;
    padding-top: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.lp-marugame__menu .lp-marugame__menu__contents {
    max-width: 510px;
}

.lp-marugame__menu .lp-marugame__menu__contents .menu-list {
    width: 75%;
}

.lp-marugame__menu .lp-marugame__menu__contents .menu-list li.__menu1 {
    margin-bottom: 0;
}

@media screen and (max-width: 1240px) {
    .lp-marugame__menu .lp-marugame__menu__contents .menu-list {
        margin: 0 auto;
    }
}

@media screen and (max-height: 800px) and (max-width: 1240px) {
    .lp-marugame__menu .lp-marugame__menu__contents {
        max-width: 66vh;
        width: 100%;
    }

    .lp-marugame__menu .lp-marugame__menu__contents .menu-list {
        width: 66.6666%;
        margin: 0 auto;
    }
}

@media screen and (max-height: 800px) and (min-width: 1241px) {
    .lp-marugame__menu .lp-marugame__menu__contents {
        max-width: 66vh;
        width: 100%;
    }

    .lp-marugame__menu .lp-marugame__menu__contents .menu-list {
        width: 66.6666%;
        margin: 0 auto;
    }
}

@media screen and (max-width: 1040px) {
    .lp-marugame__menu {
        position: fixed;
        right: 510px;
        top: 0;
        width: calc(100% - 510px);
    }

    .lp-marugame__menu .lp-marugame__menu__contents {
        /* width: 100%; */
    }
}

@media screen and (max-width: 768px) {
    .lp-marugame__container {
        max-width: inherit;
        margin: 0 auto;
        position: relative;
        display: flex;
        justify-content: flex-end;
    }

    .lp-marugame__contents {
        border-left: none;
        border-right: none;
        width: 100%;
    }

    .lp-marugame__contents .lp-marugame__contents__main {
        height: 149vw;
    }

    .lp-marugame__contents .lp-marugame__contents__main .kv-nav-next {
        width: 10vw;
    }

    .lp-marugame__contents .lp-marugame__contents__main .kv-nav-prev {
        width: 10vw !important;
    }

    .lp-marugame__contents .lp-marugame__contents__maincopy {
        width: 100%;
    }

    .lp-marugame__contents .lp-marugame__contents__udon {
        width: 100%;
        position: relative;

    }

    .lp-marugame__contents .lp-marugame__contents__gentei {
        padding: 10vw 0;
    }

    .lp-marugame-floatmenu__contents {
        max-width: inherit;
        width: 100%;
    }

    .lp-marugame-floatmenu__contents-inner {
        background-color: #fff;
        border-top: #fff solid 5px;
        border-left: none;
        border-right: none;
        width: 100%;
    }

    .lp-marugame__menu {
        display: none;
    }
}

/* ==================================================
  15. Statement / Footer overrides
  共通コンポーネント上書き。
================================================== */

.o-statement {
    line-height: normal;
    background-color: #fff!important
}

#component-statement {
    background-color: #fbf7ef;
    margin: 0 0 0 auto;
    position: relative;
    width: 100%;
    z-index: 2
}

#component-footer {
    position: relative;
    z-index: 1
}

#component-statement * {
    white-space: pre-line
}

.o-statement__content-wrapper {
    background-image: linear-gradient(180deg, #fbf7ef 120px, #fcefce 0, #fcefce)
}

.o-statement-top {
    margin: 0 auto auto!important;
    padding-top: 80px!important
}

.o-statement-top {
    align-items: center;
    flex-direction: row
}

.o-statement-top__heading {
    font-size: 26px
}

.o-statement-top__sentence-wrapper {
    margin-top: 0!important
}

.o-statement-bottom__background:before {
    content: "";
    display: block;
    padding-top: 106.6666666667%
}

.o-statement-bottom__background img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.o-statement-bottom__content {
    flex-direction: column;
    padding: 40px 30px
}

.o-statement-bottom__heading {
    font-size: 32px;
    line-height: 50px
}

.o-statement-bottom__button {
    justify-content: center
}

@media screen and (min-width: 768px) {
    .only--mobile {
        display: none!important
    }

    #component-statement {
        max-width: 550px
    }

    #component-footer {
        position: relative;
        z-index: 1
    }
}

.o-statement__content-wrapper {
    margin-bottom: 0
}

/* ==================================================
  16. Osusume Splide slider
  おすすめメニューのサブSplide。JS側 startSubSplide() と連動。
================================================== */

.osusume-slide-wrap {
    position: relative;
    background: url(/synced-assets/menu_umashio/assets/img/osusume_bg.webp) center top no-repeat;
    background-size: contain;
}

.osusume-slide {
    width: 100%;
}

.osusume-slide .splide__slide img {
    display: block;
    width: 100%;
    height: auto;
}

.osusume-slide .splide__slide .__img,.osusume-slide .splide__slide .__text {
    position: absolute;
    top: 0;
    opacity: 0;
}

.js-sub-slide .splide__slide.__active .__img {
    animation: fadeUp .4s ease-out forwards;
}

.js-sub-slide .splide__slide.__active .__text  {
	animation: blurIn .3s .3s ease-out forwards;
}

.osusume-slide .splide__slide .search {
    position: absolute;
    top: 86.1%;
    left: 0;
    right: 0;
    margin: auto;
    width: 89%;
    background: #fff;
    opacity: 1;
}

.osusume-slide .splide__slide .search img {
    transition: opacity ease .3s;
}

.osusume-slide .splide__slide .search:hover img {
    opacity: 0.8;
}

.osusume-slide-arrow {
    position: absolute;
    top: 20%;
    transform: translateY(-50%);
    z-index: 5;
    cursor: pointer;
    border: 0;
    background: none;
    padding: 0;
    width: 20px;
}

.osusume-slide-prev {
    left: 3%;
}

.osusume-slide-next {
    right: 3%;
}