﻿/* coming soon */
#tisyou .comingsoon {
    font-size: clamp(24px, calc(50 / 1920 * 100vw), 50px);
    color: #707070;
    letter-spacing: 0;
    grid-column: 1 / -1;
    text-align: center;
    margin-top: 3em;
}
@media screen and (max-width: 767px) {
    #tisyou .comingsoon {
        font-size: clamp(14px, calc(24 / 430 * 100vw), 24px);
        margin-top: 0;
    }
}
/* ------------------------- */



#tisyou.tisyou-top {
    margin-top: 100px;
    padding-top: 0;
}
#tisyou.tisyou-top h2 {
    font-size: clamp(40px, calc(70 / 1920 * 100vw), 70px);
    margin-bottom: 1em;
}

/* hero */
.tisyou-top .hero-concept {
    max-width: min(1920px, 100%);
    margin: 0 auto;
}
.tisyou-top .hero-concept p {
    font-size: clamp(12px, calc(20 / 1920 * 100vw), 20px);
    color: #707070;
    line-height: 2;
    margin-top: 2em;
}
.tisyou-top .hero-concept p:first-child {
    margin-top: 0;
}

.tisyou-top .hero-concept--1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1300px;
    gap: min(140px, calc(140 / 1920 * 100vw));
    text-align: center;
    margin: min(220px, calc(220 / 1920 * 100vw)) auto min(175px, calc(175 / 1920 * 100vw));
}
.tisyou-top .hero-concept--1_image {
    width: clamp(350px, calc(611 / 1920 * 100vw), 611px);
}
.tisyou-top .hero-concept--1_text {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.tisyou-top .hero-concept--1 .tisyou_logo {
    width: min(300px, calc(300 / 1920 * 100vw));
    margin-bottom: 0!important;
}
.tisyou-top .hero-concept--1 .text_subtitle {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    font-size: clamp(18px, calc(50 / 1920 * 100vw), 50px);
    color: #565756;
    line-height: 2;
    letter-spacing: 0;
    margin-top: 1em;
}
.tisyou-top .hero-concept--1 .text_subtitle span {
    display: block;
    width: 100%;
    font-size: clamp(14px, calc(30 / 1920 * 100vw), 30px);
    color: #565756;
    line-height: 2;
    text-align: center;
    white-space: nowrap;
}
.tisyou-top .hero-concept--1 p:last-child {
    margin-top: 4em;
}

.tisyou-top .hero-concept--2 {
    position: relative;
    text-align: right;
}
.tisyou-top .hero-concept--2_image {
    width: clamp(600px, calc(1258 / 1920 * 100vw), 1258px);
}
.tisyou-top .hero-concept--2_text {
    position: absolute;
    bottom: min(120px, calc(120 / 1920 * 100vw));
    right: min(140px, calc(140 / 1920 * 100vw));
}
.tisyou-top .hero-concept--2 .text_dialogue {
    font-size: clamp(16px, calc(26 / 1920 * 100vw), 26px);
    font-weight: 500;
    line-height: 2;
}

.tisyou-top .hero-concept--3 {
    position: relative;
    text-align: left;
    margin-top: min(60px, calc(60 / 1920 * 100vw));
    margin-bottom: min(280px, calc(280 / 1920 * 100vw));
}
.tisyou-top .hero-concept--3_image {
    width: clamp(600px, calc(1359 / 1920 * 100vw), 1359px);
    margin-left: auto;
    margin-right: 0;
}
.tisyou-top .hero-concept--3_text {
    position: absolute;
    bottom: min(215px, calc(215 / 1920 * 100vw));
    left: min(140px, calc(140 / 1920 * 100vw));
}

@media screen and (min-width: 768px) {
    #tisyou.tisyou-top {
        --tisyou-hero-text-outline:
            0.05em 0.05em 0.1em #fff,
            -0.05em 0.05em 0.1em #fff,
            0.05em -0.05em 0.1em #fff,
            -0.05em -0.05em 0.1em #fff,
            0.05em 0 0.1em #fff,
            0 0.05em 0.1em #fff,
            -0.05em 0 0.1em #fff,
            0 -0.05em 0.1em #fff;
    }
    .tisyou-top .hero-concept--2 p,
    .tisyou-top .hero-concept--3 p {
        text-shadow: var(--tisyou-hero-text-outline);
    }
}

.tisyou-top .hero_scroll_indicator {
    display: none;
}

@keyframes tisyou-hero-scroll-line {
    0% {
        -webkit-transform: scale3d(1, 0, 1);
        transform: scale3d(1, 0, 1);
        opacity: 1;
        -webkit-animation-timing-function: var(--hero-scroll-indicator-easing-grow, cubic-bezier(0.4, 0, 0.2, 1));
        animation-timing-function: var(--hero-scroll-indicator-easing-grow, cubic-bezier(0.4, 0, 0.2, 1));
    }
    30% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
    }
    78% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        opacity: 1;
        -webkit-animation-timing-function: var(--hero-scroll-indicator-easing-fade, cubic-bezier(0.33, 0, 0.67, 1));
        animation-timing-function: var(--hero-scroll-indicator-easing-fade, cubic-bezier(0.33, 0, 0.67, 1));
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        opacity: 0;
    }
}

@keyframes tisyou-hero-scroll-arrow {
    0% {
        -webkit-transform: rotate(-45deg) scale3d(0, 1, 1);
        transform: rotate(-45deg) scale3d(0, 1, 1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
    }
    22% {
        -webkit-transform: rotate(-45deg) scale3d(0, 1, 1);
        transform: rotate(-45deg) scale3d(0, 1, 1);
        opacity: 1;
        -webkit-animation-timing-function: var(--hero-scroll-indicator-easing-grow, cubic-bezier(0.4, 0, 0.2, 1));
        animation-timing-function: var(--hero-scroll-indicator-easing-grow, cubic-bezier(0.4, 0, 0.2, 1));
    }
    32% {
        -webkit-transform: rotate(-45deg) scale3d(1, 1, 1);
        transform: rotate(-45deg) scale3d(1, 1, 1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
    }
    78% {
        -webkit-transform: rotate(-45deg) scale3d(1, 1, 1);
        transform: rotate(-45deg) scale3d(1, 1, 1);
        opacity: 1;
        -webkit-animation-timing-function: var(--hero-scroll-indicator-easing-fade, cubic-bezier(0.33, 0, 0.67, 1));
        animation-timing-function: var(--hero-scroll-indicator-easing-fade, cubic-bezier(0.33, 0, 0.67, 1));
    }
    100% {
        -webkit-transform: rotate(-45deg) scale3d(1, 1, 1);
        transform: rotate(-45deg) scale3d(1, 1, 1);
        opacity: 0;
    }
}

/* silver */
.tisyou-top .silver {
    max-width: min(1920px, 100%);
    padding: 0 min(60px, calc(60 / 1920 * 100vw));
    margin: 0 auto min(388px, calc(388 / 1920 * 100vw));
    box-sizing: border-box;
}
.tisyou-top .silver_content {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    justify-content: center;
    gap: min(80px, calc(80 / 1920 * 100vw));
    width: 100%;
    max-width: 100%;
}
.tisyou-top .silver_content_block {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: min(580px, calc(580 / 1920 * 100vw));
    justify-self: center;
}
.tisyou-top .silver_content_block:nth-child(4) {
    grid-column: 2 / span 2;
}
.tisyou-top .silver_content_block:nth-child(5) {
    grid-column: 4 / span 2;
}
.tisyou-top .silver_content_block p {
    font-size: clamp(16px, calc(30 / 1920 * 100vw), 30px);
    color: #707070;
    line-height: 2;
    letter-spacing: 0;
}

/* gallery */
.tisyou-top .gallery {
    grid-gap: 0;
    padding-inline: min(20px, calc(20 / 1920 * 100vw));
    margin: 0 auto;
    box-sizing: border-box;
}

.tisyou-top .gallery_content {
    display: grid;
    grid-template-columns: repeat(3, min(360px, calc((100% - min(20px, calc(20 / 1920 * 100vw)) * 2) / 3)));
    gap: min(10px, calc(10 / 1920 * 100vw));
    width: 100%;
    max-width: 1099px;
    margin: 0 auto;
    justify-content: center;
    box-sizing: border-box;
}

.tisyou-top .gallery_content_block {
    width: 100%;
}

.tisyou-top .gallery_content_block picture {
    display: block;
    width: 100%;
}

.tisyou-top .gallery_content_block img {
    display: block;
    width: 100%;
    height: auto;
}

/* introduction */
.tisyou-top .introduction {
    margin-top: min(480px, calc(480 / 1920 * 100vw));
    margin-bottom: min(140px, calc(140 / 1920 * 100vw));
}

.tisyou-top .introduction_content {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: min(70px, calc(70 / 1099 * 100vw));
}

.tisyou-top .introduction_block {
    display: flex;
    flex-direction: column;
    width: fit-content;
    max-width: 100%;
    flex-shrink: 0;
    align-items: center;
}

.tisyou-top .introduction_block_image {
    display: block;
    width: min(330px, calc(330 / 1099 * 100vw));
    max-width: 100%;
    padding: min(20px, calc(20 / 1099 * 100vw));
    border: 1px inset #707070;
    box-sizing: border-box;
}

.tisyou-top .introduction_block_image img {
    display: block;
    width: 100%;
    height: auto;
}

.tisyou-top .introduction_block_link {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: min(10px, calc(10 / 1099 * 100vw));
    width: min(262px, calc(262 / 1099 * 100vw));
    box-sizing: border-box;
    text-decoration: none;
    background: #fff;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    padding: min(20px, calc(20 / 1099 * 100vw)) 0 min(10px, calc(10 / 1099 * 100vw));
    margin-top: -50px;
}
.tisyou-top .introduction_block_link:hover {
    opacity: 1;
}

.tisyou-top .introduction_block_title {
    font-size: clamp(14px, calc(16 / 1099 * 100vw), 16px);;
    line-height: 1.8;
    letter-spacing: 0;
}
.tisyou-top .introduction p.introduction_block_title:hover {
    opacity: 0.4;
    transition: 0.6s;
}

.tisyou-top .introduction .introduction_block_button .btn.mini.btn_top_1 {
    display: inline-block;
    font-size: clamp(12px, calc(14 / 1099 * 100vw), 14px);
    letter-spacing: 0;
    cursor: pointer;
    padding-right: 1.286em;
}

.tisyou-top .introduction .introduction_block_button .btn.mini.btn_top_1::before {
    width: 0.643em;
    height: 0.643em;
    right: 0.143em;
    top: 0.286em;
}

.tisyou-top .introduction .introduction_block_button .btn.mini.btn_top_1::after {
    width: 100%;
    bottom: 0.071em;
    left: 0;
}

.tisyou-top .introduction .introduction_block_button .btn.mini.btn_top_1:hover::before {
    top: 0.429em;
}

.tisyou-top .introduction .introduction_block_button .btn.mini.btn_top_1:hover {
    opacity: 0.4;
    transition: 0.6s;
}



@media screen and (max-width: 767px) {
    html.tisyou-touch-scroll,
    html.tisyou-touch-scroll body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        height: auto;
    }

    /*
     * SP ヒーローのレイアウト契約（全ブラウザ共通）:
     *   100svh = ヘッダー領域 + ヒーロー
     * - 通常: padding-top でヘッダー分を確保
     * - ピン中（スライダー区間）: ヘッダーもヒーローも position:fixed で同じ座標系に置き、
     *   Chrome 復帰時の visualViewport ずれによる帯／上ずれを防ぐ
     * - ピン中のドキュメント高さは .hero-flow-spacer（100svh）で維持
     */
    #tisyou.tisyou-top {
        display: flow-root;
        margin-top: 0;
        padding-top: var(--hero-header-offset);
        box-sizing: border-box;
        --hero-header-offset: 65px;
        --hero-viewport-height: 100vh;
        --hero-slide-peek: 20px;
        --hero-slide-height: calc(var(--hero-viewport-height) - var(--hero-header-offset));
        --hero-slide-panel-height: calc(var(--hero-slide-height) - var(--hero-slide-peek));
    }

    @supports (height: 100dvh) {
        #tisyou.tisyou-top {
            --hero-viewport-height: 100dvh;
            --hero-slide-height: calc(var(--hero-viewport-height) - var(--hero-header-offset));
            --hero-slide-panel-height: calc(var(--hero-slide-height) - var(--hero-slide-peek));
        }
    }

    .tisyou-top .hero-flow-spacer {
        display: none;
        width: 100%;
        height: 0;
        margin: 0;
        padding: 0;
        border: 0;
        pointer-events: none;
        visibility: hidden;
    }

    /*
     * スライダー区間中はヘッダーを常時表示（白背景・固定）。
     * サイト共通の .scrolling / .fixed クラスは触らず、見た目だけ上書きする。
     * 区間外ではこの class を外し、scrollstop → .fixed の降りアニメを妨げない。
     */
    body.tisyou-hero-header-pin header.header {
        background-color: #fff !important;
        position: fixed !important;
        top: 0 !important;
        width: 100%;
        height: 65px;
        z-index: 999;
        opacity: 1;
        -webkit-transition: none;
        transition: none;
    }

    body.tisyou-hero-header-pin header.header .header__inside {
        position: fixed !important;
        top: 10px !important;
        left: 10px;
        width: 70px;
    }

    body.tisyou-hero-header-pin header.header .header__ham {
        position: fixed !important;
        top: 22px !important;
    }

    /* ピン中かつ先頭滞在時のみ: ヒーローをヘッダーと同じ fixed 座標系へ（Chrome 復帰ずれ対策）
     * 4枚目→SILVER スクロール中は in-flow に戻し、SILVER への被りを防ぐ */
    body.tisyou-hero-header-pin.tisyou-hero-fixed-shell #tisyou.tisyou-top {
        padding-top: 0;
    }

    body.tisyou-hero-header-pin.tisyou-hero-fixed-shell .tisyou-top .hero-flow-spacer {
        display: block;
        height: var(--hero-viewport-height);
        visibility: hidden;
    }

    body.tisyou-hero-header-pin.tisyou-hero-fixed-shell .tisyou-top .hero {
        position: fixed;
        top: var(--hero-header-offset);
        left: 0;
        right: 0;
        width: 100%;
        height: var(--hero-slide-height);
        max-height: var(--hero-slide-height);
        margin: 0;
        z-index: 2;
    }

    #tisyou.tisyou-top h2 {
        font-size: clamp(16px, calc(25 / 430 * 100vw), 25px);
    }

    .tisyou-top .hero {
        box-sizing: border-box;
        margin: 0;
        height: var(--hero-slide-height);
        max-height: var(--hero-slide-height);
        overflow: hidden;
        position: relative;
    }

    .tisyou-top .hero_slider {
        height: 100%;
        max-height: 100%;
        overflow: hidden;
    }

    .tisyou-top .js-tisyou-aos-pc.aos-init {
        opacity: 1 !important;
    }

    .tisyou-top .js-tisyou-aos-section {
        opacity: 0;
        -webkit-transform: translate3d(0, 100px, 0);
        transform: translate3d(0, 100px, 0);
    }

    .tisyou-top .js-tisyou-aos-section.is-aos-visible,
    .tisyou-top .js-tisyou-aos-section.is-aos-revealed {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    .tisyou-top .js-tisyou-aos-section.is-aos-visible:not(.is-section-waapi-active),
    .tisyou-top .js-tisyou-aos-section.is-aos-revealed:not(.is-section-waapi-active) {
        -webkit-transition: opacity 1s ease, transform 1s ease;
        transition: opacity 1s ease, transform 1s ease;
        transition-delay: 100ms;
    }

    .tisyou-top .js-tisyou-aos-section.is-section-waapi-active {
        opacity: 0;
        -webkit-transition: none !important;
        transition: none !important;
    }

    @-webkit-keyframes tisyou-section-fade-up {
        from {
            opacity: 0;
            -webkit-transform: translate3d(0, 100px, 0);
            transform: translate3d(0, 100px, 0);
        }
        to {
            opacity: 1;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
    }

    @keyframes tisyou-section-fade-up {
        from {
            opacity: 0;
            -webkit-transform: translate3d(0, 100px, 0);
            transform: translate3d(0, 100px, 0);
        }
        to {
            opacity: 1;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
    }

    .tisyou-top .hero_slider.is-hero-sliding .js-tisyou-aos-pc.aos-init {
        opacity: 1;
    }

    .tisyou-top .hero_slider.slick-initialized .slick-list {
        touch-action: none;
        position: relative;
        overflow: hidden;
        height: 100% !important;
        max-height: 100% !important;
    }

    .tisyou-top .hero_slider.slick-initialized.is-hero-last-slide .slick-list {
        touch-action: none;
    }

    /* SILVER へスクロール可能なときだけ pan-y（先頭の fixed-shell 中はスライド操作を優先） */
    body.tisyou-hero-header-pin:not(.tisyou-hero-fixed-shell) .tisyou-top .hero_slider.slick-initialized.is-hero-last-slide .slick-list,
    body:not(.tisyou-hero-header-pin) .tisyou-top .hero_slider.slick-initialized.is-hero-last-slide .slick-list {
        touch-action: pan-y;
    }

    .tisyou-top .js-hero-handoff-target {
        scroll-margin-top: var(--hero-header-offset, 65px);
    }

    .tisyou-top .hero_slider.slick-initialized .slick-track {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 100% !important;
        height: auto !important;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        will-change: transform;
    }

    .tisyou-top .hero_slider.is-hero-sliding .slick-track {
        pointer-events: none;
    }

    .tisyou-top .hero_slider.slick-initialized .slick-slide {
        position: relative !important;
        top: auto;
        left: auto;
        display: block !important;
        width: 100%;
        float: none;
        height: var(--hero-slide-panel-height) !important;
        min-height: 0;
        max-height: var(--hero-slide-panel-height) !important;
        -webkit-box-flex: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        opacity: 1;
        z-index: auto;
        pointer-events: auto;
        overflow: hidden;
        background: transparent;
    }

    .tisyou-top .hero_slider.slick-initialized .slick-slide > div {
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    /* 最終スライドは peek なしでヒーロー全高 */
    .tisyou-top .hero_slider.slick-initialized .slick-track > .slick-slide:last-of-type,
    .tisyou-top .hero_slider.slick-initialized .slick-slide:has(.hero_slide--3) {
        height: var(--hero-slide-height) !important;
        min-height: var(--hero-slide-height) !important;
        max-height: none !important;
    }

    .tisyou-top .hero_slider.slick-initialized .slick-slide.slick-active .hero_scroll_indicator {
        opacity: 1;
    }

    .slick-vertical .slick-slide {
        border: none!important;
    }

    .tisyou-top .hero_slider:not(.slick-initialized) .hero_slide:not(:first-child) {
        display: none;
    }

    .tisyou-top .hero_slider:not(.slick-initialized) .hero_slide:first-child {
        height: var(--hero-slide-height);
    }

    .tisyou-top .hero_slider.slick-initialized {
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden;
    }

    .tisyou-top .hero_slider.slick-initialized .slick-slide[aria-hidden="true"] {
        display: block !important;
    }

    .tisyou-top .hero_slide {
        position: relative;
        height: 100%;
        min-height: 0;
        max-height: 100%;
        overflow: hidden;
    }

    .tisyou-top .hero_slide .hero-mv,
    .tisyou-top .hero_slide .hero-concept {
        position: absolute;
        inset: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        min-height: 0;
        margin: 0;
        max-width: none;
        overflow: hidden;
    }

    .tisyou-top .hero_slide .hero-concept--2,
    .tisyou-top .hero_slide .hero-concept--3 {
        margin: 0;
        width: 100%;
        max-width: none;
    }

    .tisyou-top .hero_slide .hero-concept--2_image,
    .tisyou-top .hero_slide .hero-concept--3_image {
        width: 100%;
        margin: 0;
    }

    .tisyou-top .hero_slide--mv .hero-mv,
    .tisyou-top .hero_slide .hero-concept--1_image,
    .tisyou-top .hero_slide .hero-concept--2_image,
    .tisyou-top .hero_slide .hero-concept--3_image {
        position: absolute;
        inset: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
        margin: 0;
    }

    .tisyou-top .hero_slide--mv picture,
    .tisyou-top .hero_slide .hero-concept--1_image picture,
    .tisyou-top .hero_slide .hero-concept--2_image picture,
    .tisyou-top .hero_slide .hero-concept--3_image picture {
        display: block;
        width: 100%;
        height: 100%;
    }

    .tisyou-top .hero_slide--mv picture img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center calc(50% + 20px);
    }

    .tisyou-top .hero_slide .hero-concept--1_image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }

    .tisyou-top .hero_slide .hero-concept--2_image img,
    .tisyou-top .hero_slide .hero-concept--3_image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center;
    }

    .tisyou-top .hero_slide .hero-concept--1_text,
    .tisyou-top .hero_slide .hero-concept--2_text,
    .tisyou-top .hero_slide .hero-concept--3_text {
        position: absolute;
        z-index: 1;
    }

    .tisyou-top .hero_slide .hero_scroll_indicator {
        display: block;
        position: absolute;
        top: calc(var(--hero-slide-panel-height) - min(54px, calc(54 / 430 * 100vw)) - min(35px, calc(35 / 430 * 100vw)));
        right: 0;
        bottom: auto;
        left: 0;
        z-index: 10;
        width: min(12px, calc(12 / 430 * 100vw));
        height: min(54px, calc(54 / 430 * 100vw));
        margin: 0 auto;
        pointer-events: none;
        overflow: visible;
        --hero-scroll-line-height: calc(50 / 430 * 100vw);
        --hero-scroll-indicator-duration: 3s;
        --hero-scroll-indicator-easing-grow: cubic-bezier(0.4, 0, 0.2, 1);
        --hero-scroll-indicator-easing-fade: cubic-bezier(0.33, 0, 0.67, 1);
    }

    .tisyou-top .hero_slide--3 .hero_scroll_indicator {
        top: calc(var(--hero-slide-height) - min(54px, calc(54 / 430 * 100vw)) - min(35px, calc(35 / 430 * 100vw)));
    }

    .tisyou-top .hero_scroll_indicator_line {
        display: block;
        position: absolute;
        top: 0;
        left: 50%;
        width: 1px;
        height: var(--hero-scroll-line-height);
        margin-left: -0.5px;
        background-color: #707070;
        -webkit-transform: scale3d(1, 0, 1);
        transform: scale3d(1, 0, 1);
        -webkit-transform-origin: top center;
        transform-origin: top center;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .tisyou-top .hero_scroll_indicator_arrow {
        display: block;
        position: absolute;
        top: calc(var(--hero-scroll-line-height) - 0.5px);
        left: 50%;
        width: min(9px, calc(9 / 430 * 100vw));
        height: 1px;
        margin-left: -0.5px;
        background-color: #707070;
        -webkit-transform: rotate(-45deg) scale3d(0, 1, 1);
        transform: rotate(-45deg) scale3d(0, 1, 1);
        -webkit-transform-origin: left center;
        transform-origin: left center;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .tisyou-top .hero_scroll_indicator.is-waapi-active .hero_scroll_indicator_line,
    .tisyou-top .hero_scroll_indicator.is-waapi-active .hero_scroll_indicator_arrow {
        -webkit-animation: none !important;
        animation: none !important;
    }

    .tisyou-top .hero_scroll_indicator_line.is-active {
        -webkit-animation: tisyou-hero-scroll-line var(--hero-scroll-indicator-duration) infinite;
        animation: tisyou-hero-scroll-line var(--hero-scroll-indicator-duration) infinite;
    }

    .tisyou-top .hero_scroll_indicator_arrow.is-active {
        -webkit-animation: tisyou-hero-scroll-arrow var(--hero-scroll-indicator-duration) infinite;
        animation: tisyou-hero-scroll-arrow var(--hero-scroll-indicator-duration) infinite;
    }

    .tisyou-top .hero_slider .slick-dots {
        display: none !important;
    }

    @media (prefers-reduced-motion: reduce) {
        .tisyou-top .hero_scroll_indicator_line.is-active {
            -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
            -webkit-animation: none;
            animation: none;
        }

        .tisyou-top .hero_scroll_indicator_arrow.is-active {
            -webkit-transform: rotate(-45deg) scale3d(1, 1, 1);
            transform: rotate(-45deg) scale3d(1, 1, 1);
            -webkit-animation: none;
            animation: none;
        }
    }

    .tisyou-top .hero-concept p {
        font-size: clamp(10px, calc(12 / 430 * 100vw), 12px);
    }

    .tisyou-top .hero-concept--1_text {
        top: calc(50 / 850 * 100%);
        left: 50%;
        right: auto;
        bottom: auto;
        transform: translateX(-50%);
        text-align: center;
    }
    .tisyou-top .hero-concept--1 .tisyou_logo {
        width: min(136px, calc(136 / 430 * 100vw));
    }
    .tisyou-top .hero-concept--1 .text_subtitle {
        font-size: clamp(14px, calc(24 / 430 * 100vw), 24px);
        margin: min(16px, calc(16 / 430 * 100vw)) 0 min(56px, calc(56 / 430 * 100vw));
    }
    .tisyou-top .hero-concept--1 .text_subtitle span {
        font-size: clamp(12px, calc(14 / 430 * 100vw), 14px);
    }
    .tisyou-top .hero-concept--2_text {
        width: calc(280 / 430 * 100%);
        top: calc(50 / 850 * 100%);
        right: calc(40 / 430 * 100%);
        left: auto;
        bottom: auto;
        text-align: center;
    }
    .tisyou-top .hero-concept--2 .text_dialogue {
        font-size: clamp(10px, calc(12 / 430 * 100vw), 12px);
    }
    .tisyou-top .hero-concept--3_text {
        width: calc(310 / 430 * 100%);
        top: calc(45 / 850 * 100%);
        left: 50%;
        right: auto;
        bottom: auto;
        transform: translateX(-50%);
        text-align: center;
    }

    .tisyou-top .silver {
        position: relative;
        z-index: 1;
        padding: 0;
        margin: min(140px, calc(140 / 430 * 100vw)) auto min(190px, calc(190 / 430 * 100vw));
    }
    .tisyou-top .silver_content {
        grid-template-columns: repeat(2, 1fr);
        gap: min(85px, calc(85 / 430 * 100vw)) min(18px, calc(18 / 430 * 100vw));
        margin-top: min(45px, calc(45 / 430 * 100vw));
    }
    .tisyou-top .silver_content_block {
        grid-column: auto;
        max-width: min(190px, calc(190 / 430 * 100vw));
    }
    .tisyou-top .silver_content_block p {
        font-size: clamp(10px, calc(12 / 430 * 100vw), 12px);
    }

    .tisyou-top .silver_content_block:nth-child(4) {
        grid-column: auto;
    }

    .tisyou-top .silver_content_block:nth-child(5) {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc(50% - min(10px, calc(10 / 430 * 100vw)));
    }

    .tisyou-top .gallery {
        display: none;
    }

    .tisyou-top .introduction {
        margin-bottom: min(170px, calc(170 / 430 * 100vw));
    }
    .tisyou-top .introduction_content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: min(90px, calc(90 / 430 * 100vw));
        margin-top: min(30px, calc(30 / 430 * 100vw));
    }
    .tisyou-top .introduction_block_image {
        width: min(337px, calc(337 / 430 * 100vw));
    }
    .tisyou-top .introduction_block_link {
        width: min(248px, calc(248 / 430 * 100vw));
        padding: min(15px, calc(15 / 430 * 100vw)) 0 min(5px, calc(5 / 430 * 100vw));
        margin-top: min(-50px, calc(-50 / 430 * 100vw));
    }
    .tisyou-top .introduction_block_title {
        font-size: clamp(12px, calc(15 / 430 * 100vw), 15px);
    }
    .tisyou-top .introduction .introduction_block_button .btn.mini.btn_top_1 {
        font-size: clamp(10px, calc(12 / 430 * 100vw), 12px);
        padding-right: 1.333em;
        margin-top: 1em;
    }

    .tisyou-top .introduction .introduction_block_button .btn.mini.btn_top_1::before {
        width: 0.75em;
        height: 0.75em;
        top: 0.25em;
        right: 0.25em;
    }

    .tisyou-top .introduction .introduction_block_button .btn.mini.btn_top_1::after {
        width: calc(100% - 0.417em);
        bottom: 0.083em;
        left: 0.25em;
    }

    .tisyou-top .introduction .introduction_block_button .btn.mini.btn_top_1:hover::before {
        top: 0.5em;
    }
}