@charset "UTF-8";

html {
    scrollbar-gutter: stable;
    scroll-behavior: auto;
}
body {
    background: #eae5da;
}
body.loading-lock {
    overflow: hidden;
}
    @media screen and (min-width: 768px) {
        body { font-size: 18px; }
    }
        @media screen and (min-width: 1024px) {
            body { font-size: 20px; }
        }
            @media screen and (min-width: 1400px) {
                /* body { font-size: 22px; } */
                body { font-size: 20px; }
            }
                @media screen and (min-width: 1600px) {
                    /* body { font-size: 24px; } */
                    body { font-size: 22px; }
                }

img {
    width: 100%;
}
.sp {
    display: block;
}
.pc {
    display: none;
}

    @media screen and (min-width: 768px) {
        .sp {
            display: none;
        }
        .pc {
            display: block;
        }

    }

.mincho {
    font-family: toppan-bunkyu-midashi-min-st, serif;
}

.scroll-target {
    position: relative;
}

/* ---------- */
/* ローディング */
/* ---------- */
.loading {
    pointer-events: none;
    position: fixed;
    z-index: 100000;
    width: 100%;
    height: 100vh;
    background-color: #e0d5c5;
    opacity: 1;
    transition: opacity 1s ease 1s;
}
.loading::before {
    content: "";
    position: absolute;
    z-index: 100011;
    top: 10%;
    right: -15%;
    width: 220px;
    height: 52px;
    background-position: center center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/cloud01.svg);
    opacity: 0;
    animation: loading-fadein 1s linear 0.5s forwards;
}
.loading::after {
    content: "";
    position: absolute;
    z-index: 100011;
    top: 80%;
    left: -15%;
    width: 220px;
    height: 52px;
    background-position: center center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/cloud02.svg);
    opacity: 0;
    animation: loading-fadein 1s linear 0.5s forwards;
}
.loading.fade-out {
    opacity: 0;
}

.loading > div {
    position: absolute;
    z-index: 100000;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: loading-fadein 1s linear 0.5s forwards;
}
@keyframes loading-fadein {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.loading .frame-top {
    position: absolute;
    z-index: 100010;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
}
.loading .frame-top img.center {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
}
.loading .frame-top img.left {
    position: absolute;
    width: auto;
    height: 100%;
    left: 0;
}
.loading .frame-top img.right {
    position: absolute;
    width: auto;
    height: 100%;
    right: 0;
}

.loading .frame-middle {
    content: "";
    position: absolute;
    z-index: 100005;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.loading .frame-middle img.left {
    position: absolute;
    width: 60px;
    height: 100%;
    left: 0;
}
.loading .frame-middle img.right {
    position: absolute;
    width: 60px;
    height: 100%;
    right: 0;
}


.loading .frame-bottom {
    position: absolute;
    z-index: 100011;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
}
.loading .frame-bottom img.center {
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
}
.loading .frame-bottom img.left {
    position: absolute;
    width: auto;
    height: 100%;
    bottom: 0;
    left: 0;
}
.loading .frame-bottom img.right {
    position: absolute;
    width: auto;
    height: 100%;
    bottom: 0;
    right: 0;
}

.loading .obj-wrap {
    position: absolute;
    z-index: 100020;
    width: 75%;
    height: fit-content;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.loading .loading-text {
    position: relative;
    width: fit-content;
    padding: 8px 35px;
    height: 40px;
    margin: auto;
    text-align: center;
}
.loading .loading-text img.left {
    position: absolute;
    top: 0;
    left: 0;
    width: 26px;
    height: auto;
    rotate: -20deg;
}
.loading .loading-text img.right {
    position: absolute;
    top: 0;
    right: 0;
    width: 26px;
    height: auto;
    rotate: 20deg;
}

.loading .loading-text span {
    display: inline-flex;
    align-items: center;
    height: 25px;
    white-space: nowrap;
}
.loading .loading-text span img {
    display: block;
    height: 100%;
    width: auto;
}
.loading .loading-text .loading-dot {
    opacity: 0;
    animation: loading-dot 1.6s infinite;
}
.loading .loading-text .dot1 { animation-delay: 0s; }
.loading .loading-text .dot2 { animation-delay: 0.3s; }
.loading .loading-text .dot3 { animation-delay: 0.6s; }
@keyframes loading-dot {
    0% { opacity: 0; }
    25% { opacity: 0;}
    45% { opacity: 1; }
    100% { opacity: 1; }
}

.loading .loading-image {
    position: relative;
    width: 100%;
    height: 200px;
}

.loading .loading-image img {
    position: absolute;              /* ← relative ではなく absolute */
    width: 270px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* ← XもYも中央補正 */
    transform-origin: center center;  /* 念のため */
    animation: loading-image 2s infinite;
}
@keyframes loading-image {
    0%   { transform: translate(-50%, -50%) rotate(2deg); }
    50%  { transform: translate(-50%, -50%) rotate(-2deg); }
    100% { transform: translate(-50%, -50%) rotate(2deg); }
}

.loading .loading-logo {
    position: relative;
    width: fit-content;
    height: 20px;
    margin: 20px auto 0;
    text-align: center;
}
.loading .loading-logo img {
    display: block;
    height: 100%;
    width: auto;
}

    @media screen and (min-width: 768px) {


        .loading::before {
            top: 13%;
            right: -7%;
            width: 310px;
            height: 70px;
        }
        .loading::after {
            top: 77%;
            left: -7%;
            width: 310px;
            height: 70px;
        }

        .loading > div {
            width: 95%;
        }

        .loading .frame-top {
            top: 0;
            left: 0;
            width: 100%;
            height: 100px;
        }

        .loading .frame-middle img.left {
            width: 100px;
        }
        .loading .frame-middle img.right {
            width: 100px;
        }

        .loading .frame-bottom {
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100px;
        }



        .loading .loading-text {
            padding: 11px 45px;
            height: 60px;
        }
        .loading .loading-text img.left {
            width: 32px;
        }
        .loading .loading-text img.right {
            width: 32px;
        }

        .loading .loading-text span {
            height: 35px;
        }


        .loading .loading-image {
            height: min(210px, 23vw);
        }

        .loading .loading-image img {
            width: min(480px, 43vw);
        }

        .loading .loading-logo {
            height: 40px;
        }

    }

    @media screen and (min-width: 1200px) {
        .loading::before {
            top: 13%;
            right: -7%;
            width: 26%;
            height: 6vw;
        }
        .loading::after {
            top: 77%;
            left: -7%;
            width: 26%;
            height: 6vw;
        }

        .loading .loading-text {
            padding: 11px 45px;
            height: 60px;
        }
        .loading .loading-text::before {
            width: 60px;
            height: 60px;
        }
        .loading .loading-text::after {
            width: 60px;
            height: 60px;
        }

        .loading .loading-text span {
            height: 35px;
        }

        .loading .loading-image {
            height: 18vw;
        }

        .loading .loading-image img {
            width: 40vw;
        }

        .loading .loading-logo {
            height: 40px;
        }
    }

main {
    position: relative;
    z-index: 0;
}

section {
    position: relative;
    z-index: 0;
    width: 100%;
}

/* 
==========================================================
汎用アニメーション
==========================================================
*/

/* テキストアニメーション */
.text-animation {
    display: inline-block;
    white-space: pre-line;
    visibility: hidden;
    opacity: 0;
}
.text-animation.on {
    visibility: visible;
    opacity: 1;
}
.text-animation.off { animation: text-animation-leaving 0.4s ease-out forwards; }
@keyframes text-animation-leaving {
    0% {
        opacity: 1;
        visibility: visible;
    }
    99% {
        opacity: 0;
        visibility: visible;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}
.text-animation-line {
    display: block;
    overflow: hidden;
}
.text-animation-char {
    opacity: 0;
    display: inline-block;
    transform: scale(0.9);
    animation: typeFade 0.18s ease-out forwards;
}
@keyframes typeFade {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.text-animation .break {
    display: block;
    width: 100%;
    height: 0;
}

/* テキストワイプ */
.textwipe {
    display: block;
}
.textwipe .tw-line {
    line-height: 1;
    position: relative;
    display: block;
    width: fit-content;
    overflow: hidden;
}
.textwipe .tw-line::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #095772;
    transform: scaleX(0);
    transform-origin: left;
}
.textwipe .tw-text {
    position: relative;
    z-index: 1;
    display: inline-block;
    opacity: 0;
}
@keyframes textwipe-wipeIn {
    to { transform: scaleX(1); }
}
@keyframes textwipe-textFade {
    to { opacity: 1; }
}

/*汎用テキストワイプ 変更パラメータ*/
.textwipe .tw-line {
    font-size: 130%;
    font-weight: bold;
    padding: 10px 18px;
    margin-bottom: 6px;
}
.textwipe .tw-line::before { background: #000; }
.textwipe .tw-text { color: #fff; }
/* .on .textwipe .line::before { animation: textwipe-wipeIn 0.2s cubic-bezier(.2,.7,.2,1) forwards 0.5s; } */
/* .on .textwipe .text { animation: textwipe-textFade 0.2s ease-out forwards 1s; } */

/* セクション高さ調整 */
.target-hero,
.target-concept01,
.target-concept02,
.target-concept03,
.target-concept04,
.target-concept05,
.target-concept06,
.target-concept07,
.target-concept08,
.target-concept09
{
    height: 100vh;
    width: 100px;
}

/* 
==========================================================
イントロ ファーストビュー
==========================================================
*/

.intro {
    position: relative;
    z-index: 0;
    width: 100%;
}
.intro .wrap {
    position: fixed;
    z-index: 100;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;

    overflow: hidden;

    opacity: 1;
    transition: opacity 0.5s ease;

    pointer-events: none;
}
.intro .wrap.hidden {
    opacity: 0;
    pointer-events: none;
}

.intro .wave-back {
    position: fixed;
    width: 100%;
    height: 60vw;
    bottom: 0;
    left: 0;

    opacity: 1;
    background-position: top center;
    background-size: 30% auto;
    background-repeat: repeat-x;
    background-image: url(../img/top/intro-back.svg);
    transition: opacity 0.5s ease;
    pointer-events: none;
}
.intro .wave-back.hidden {
    opacity: 0;
}
.ratio-portrait .intro .wave-back { height: 60vw; background-size: 30% auto; }
.ratio-square .intro .wave-back { height: 30vw; background-size: 20% auto; }
.ratio-landscape .intro .wave-back { height: 300px; background-size: 200px auto; }

.intro .hero-contents,
.intro .hero-contents-back,
.intro .hero-contents-front {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform, opacity;
}

.intro .hero-contents {
    position: absolute;
    width: auto;
    height: auto;
    top: 44%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 1;

    transition: opacity 0.5s ease;
}
.intro .hero-contents.hidden { opacity: 0; }

.intro .hero-contents-back {
    position: absolute;
    width: auto;
    height: auto;
    top: 43%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 1;

    background-position: center center;
    background-size: 100% auto;
    background-repeat: no-repeat;

    transition: opacity 0.5s ease;
}
.ratio-portrait .intro .hero-contents-back { background-image: url(../img/top/hero-portrait-back.svg); }
.ratio-square .intro .hero-contents-back { background-image: url(../img/top/hero-square-back.svg); }
.ratio-landscape .intro .hero-contents-back { background-image: url(../img/top/hero-landscape-back.svg); }
.intro .hero-contents-back.hidden { opacity: 0;}

.intro .hero-contents-front {
    position: absolute;
    width: auto;
    height: auto;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.5s ease;
}
.intro .hero-contents-front.hidden { opacity: 0; }

/*layer01 菱形枠*/
.intro .hero-contents .layer01 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    background-position: center center;
    background-size: 100% auto;
    background-repeat: no-repeat;
}
.ratio-portrait .intro .hero-contents .layer01{ background-image: url(../img/top/hero-portrait-layer01.svg); }
.ratio-square .intro .hero-contents .layer01 { background-image: url(../img/top/hero-square-layer01.svg); }
.ratio-landscape .intro .hero-contents .layer01{ background-image: url(../img/top/hero-landscape-layer01.svg); }

/*layer02 菱形内部*/
.intro .hero-contents .layer02 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;

    /* GPU加速 */
    -webkit-transform: translate(-50%, -50%) translateZ(0);
    transform: translate(-50%, -50%) translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;

/* ---マスク---
    background-position: center center;
    background-size: 100% auto;
    background-repeat: no-repeat;
*/
}

/* 中身にも追加 */
.intro .hero-contents .layer02 .layer02a,
.intro .hero-contents .layer02 .hero-person01,
.intro .hero-contents .layer02 .hero-person02,
.intro .hero-contents .layer02 .layer02b,
.intro .hero-contents .layer02 .hero-person03,
.intro .hero-contents .layer02 .hero-person04,
.intro .hero-contents .layer02 .hero-person05,
.intro .hero-contents .layer02 .hero-person06 {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.ratio-portrait .intro .hero-contents .layer02 {
    -webkit-mask-image: url(../img/top/hero-portrait-layer02-mask.svg);
    mask-image: url(../img/top/hero-portrait-layer02-mask.svg);
}
.ratio-square .intro .hero-contents .layer02 {
    -webkit-mask-image: url(../img/top/hero-square-layer02-mask.svg);
    mask-image: url(../img/top/hero-square-layer02-mask.svg);
}
.ratio-landscape .intro .hero-contents .layer02 {
    -webkit-mask-image: url(../img/top/hero-landscape-layer02-mask.svg);
    mask-image: url(../img/top/hero-landscape-layer02-mask.svg);
}

/* ---マスク---
.ratio-portrait .intro .hero-contents .layer02 { background-image: url(../img/top/hero-portrait-layer02-mask.svg); }
.ratio-square .intro .hero-contents .layer02 { background-image: url(../img/top/hero-square-layer02-mask.svg); }
.ratio-landscape .intro .hero-contents .layer02 { background-image: url(../img/top/hero-landscape-layer02-mask.svg);}
*/

.intro .hero-contents .layer02 .layer02a {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.intro .hero-contents .layer02 .layer02a img {
    display: none;
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100%;
    transform: translate(-50%, 0);
}
.ratio-portrait .intro .hero-contents .layer02 .layer02a img.img-portrait { display: block; }
.ratio-square .intro .hero-contents .layer02 .layer02a img.img-square { display: block; }
.ratio-landscape .intro .hero-contents .layer02 .layer02a img.img-landscape { display: block; }


/*人物01*/
.intro .hero-contents .layer02 .hero-person01 {
    position: absolute;
    transform: translate(-50%, 100%);
    height: 100vh;
    background-position: top center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/intro-personA.webp);
}
.ratio-portrait .intro .hero-contents .layer02 .hero-person01 { width: 42%; top: 30%; left: 72%;}
.ratio-square .intro .hero-contents .layer02 .hero-person01 { width: 37%; top: 22%; left: 68%; }
.ratio-landscape .intro .hero-contents .layer02 .hero-person01 { width: 22%; top: 15%; left: 62%; }
.intro .wrap .hero-contents.on .layer02 .hero-person01 { animation: hero-person-bounce 0.8s ease-out 0.1s forwards; }

/*人物02*/
.intro .hero-contents .layer02 .hero-person02 {
    position: absolute;
    transform: translate(-50%, 100%);
    height: 100vh;
    background-position: top center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/intro-personB.webp);
}
.ratio-portrait .intro .hero-contents .layer02 .hero-person02 { width: 57%; top: 26%; left: 30%;}
.ratio-square .intro .hero-contents .layer02 .hero-person02 { width: 55%; top: 17%; left: 32%; }
.ratio-landscape .intro .hero-contents .layer02 .hero-person02 { width: 35%; top: 5%; left: 38%; }
.intro .wrap .hero-contents.on .layer02 .hero-person02 { animation: hero-person-bounce 0.8s ease-out 0s forwards; }

.intro .hero-contents .layer02 .layer02b {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 54%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.intro .hero-contents .layer02 .layer02b img {
    display: none;
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100%;
    transform: translate(-50%, 0);
}
.ratio-portrait .intro .hero-contents .layer02 .layer02b img.img-portrait { display: block; }
.ratio-square .intro .hero-contents .layer02 .layer02b img.img-square { display: block; }
.ratio-landscape .intro .hero-contents .layer02 .layer02b img.img-landscape { display: block; }

/*人物03*/
.intro .hero-contents .layer02 .hero-person03 {
    position: absolute;
    transform: translate(-50%, 100%);
    height: 100vh;
    background-position: top center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/intro-personC.webp);
}
.ratio-portrait .intro .hero-contents .layer02 .hero-person03 { width: 30%; top: 49%; left: 83%;}
.ratio-square .intro .hero-contents .layer02 .hero-person03 { width: 29%; top: 44%; left: 83%; }
.ratio-landscape .intro .hero-contents .layer02 .hero-person03 { width: 17%; top: 46%; left: 70%; }
.intro .wrap .hero-contents.on .layer02 .hero-person03 { animation: hero-person-bounce 0.8s ease-out 0.4s forwards; }

/*人物04*/
.intro .hero-contents .layer02 .hero-person04 {
    position: absolute;
    transform: translate(-50%, 100%);
    height: 100vh;
    background-position: top center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/intro-personD.webp);
}
.ratio-portrait .intro .hero-contents .layer02 .hero-person04 { width: 31%; top: 50%; left: 16%;}
.ratio-square .intro .hero-contents .layer02 .hero-person04 { width: 29%; top: 45%; left: 16%; }
.ratio-landscape .intro .hero-contents .layer02 .hero-person04 { width: 17%; top: 46%; left: 30%; }
.intro .wrap .hero-contents.on .layer02 .hero-person04 { animation: hero-person-bounce 0.8s ease-out 0.45s forwards; }

/*人物05*/
.intro .hero-contents .layer02 .hero-person05 {
    position: absolute;
    transform: translate(-50%, 100%);
    height: 100vh;
    background-position: top center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/intro-personF.webp);
}
.ratio-portrait .intro .hero-contents .layer02 .hero-person05 { width: 33%; top: 53%; left: 61%;}
.ratio-square .intro .hero-contents .layer02 .hero-person05 { width: 31%; top: 47%; left: 60%; }
.ratio-landscape .intro .hero-contents .layer02 .hero-person05 { width: 18%; top: 45%; left: 57%; }
.intro .wrap .hero-contents.on .layer02 .hero-person05 { animation: hero-person-bounce 0.8s ease-out 0.3s forwards; }

/*人物06*/
.intro .hero-contents .layer02 .hero-person06 {
    position: absolute;
    transform: translate(-50%, 100%);
    height: 100vh;
    background-position: top center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/intro-personE.webp?0122);
}
.ratio-portrait .intro .hero-contents .layer02 .hero-person06 { width: 29%; top: 53%; left: 38%;}
.ratio-square .intro .hero-contents .layer02 .hero-person06 { width: 28%; top: 47%; left: 39%; }
.ratio-landscape .intro .hero-contents .layer02 .hero-person06 { width: 17%; top: 46%; left: 43%;  }
.intro .wrap .hero-contents.on .layer02 .hero-person06 { animation: hero-person-bounce 0.8s ease-out 0.35s forwards; }

/*人物アニメーション設定*/
@keyframes hero-person-bounce {
    0%   { transform: translate(-50%, 100%); }
    40%  { transform: translate(-50%, -4%); }
    60%  { transform: translate(-50%, 2%); } 
    80%  { transform: translate(-50%, -1%); }
    100% { transform: translate(-50%, 0%); }
}

/*装飾(ぶどう)*/
.intro .hero-contents .hero-deco-grape {
    position: absolute;
    transform: translate(-50%, -50%);
    background-position: center center;
    background-size: 0% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/hero-deco-grape.webp);
}
.ratio-portrait .intro .hero-contents .hero-deco-grape { width: 28%; height: 10%; top: 80%; left: 50% }
.ratio-square .intro .hero-contents .hero-deco-grape { width: 23%; height: 11%; top: 78%; left: 50% }
.ratio-landscape .intro .hero-contents .hero-deco-grape { width: 13%; height: 13%; top: 91%; left: 50% }
.intro .wrap .hero-contents.on .hero-deco-grape { animation: hero-deco-bounce 0.4s ease-out 1.5s forwards; }

/*装飾(ワイン01右)*/
.intro .hero-contents .hero-deco-wine01-R {
    position: absolute;
    transform: translate(-50%, -50%) rotate(10deg);
    background-position: center center;
    background-size: 0% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/hero-deco-wine01.webp);
}
.ratio-portrait .intro .hero-contents .hero-deco-wine01-R { width: 6%; height: 11%; top: 71%; left: 80% }
.ratio-square .intro .hero-contents .hero-deco-wine01-R { width: 6%; height: 15%; top: 65%; left: 80% }
.ratio-landscape .intro .hero-contents .hero-deco-wine01-R { width: 3.5%; height: 20%; top: 57%; left: 80% }
.intro .wrap .hero-contents.on .hero-deco-wine01-R { animation: hero-deco-bounce 0.4s ease-out 1.6s forwards; }

/*装飾(ワイン02右)*/
.intro .hero-contents .hero-deco-wine02-R {
    position: absolute;
    transform: translate(-50%, -50%) rotate(10deg);
    background-position: center center;
    background-size: 0% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/hero-deco-wine02.webp);
}
.ratio-portrait .intro .hero-contents .hero-deco-wine02-R { width: 6%; height: 11%; top: 68%; left: 88% }
.ratio-square .intro .hero-contents .hero-deco-wine02-R { width: 6%; height: 15%; top: 61%; left: 88% }
.ratio-landscape .intro .hero-contents .hero-deco-wine02-R { width: 3.5%; height: 20%; top: 52%; left: 85% }
.intro .wrap .hero-contents.on .hero-deco-wine02-R { animation: hero-deco-bounce 0.4s ease-out 1.7s forwards; }

/*装飾(ワイン03右)*/
.intro .hero-contents .hero-deco-wine03-R {
    position: absolute;
    transform: translate(-50%, -50%) rotate(10deg);
    background-position: center center;
    background-size: 0% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/hero-deco-wine03.webp);
}
.ratio-portrait .intro .hero-contents .hero-deco-wine03-R { width: 6%; height: 11%; top: 65%; left: 96% }
.ratio-square .intro .hero-contents .hero-deco-wine03-R { width: 6%; height: 15%; top: 57%; left: 96% }
.ratio-landscape .intro .hero-contents .hero-deco-wine03-R { width: 3.5%; height: 20%; top: 48%; left: 90% }
.intro .wrap .hero-contents.on .hero-deco-wine03-R { animation: hero-deco-bounce 0.4s ease-out 1.8s forwards; }

/*装飾(ワイン01左)*/
.intro .hero-contents .hero-deco-wine01-L {
    position: absolute;
    transform: translate(-50%, -50%) rotate(-10deg);
    background-position: center center;
    background-size: 0% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/hero-deco-wine01.webp);
}
.ratio-portrait .intro .hero-contents .hero-deco-wine01-L { width: 6%; height: 11%; top: 71%; left: 20% }
.ratio-square .intro .hero-contents .hero-deco-wine01-L { width: 6%; height: 15%; top: 65%; left: 20% }
.ratio-landscape .intro .hero-contents .hero-deco-wine01-L { width: 3.5%; height: 20%; top: 57%; left: 20% }
.intro .wrap .hero-contents.on .hero-deco-wine01-L { animation: hero-deco-bounce 0.4s ease-out 1.6s forwards; }

/*装飾(ワイン02左)*/
.intro .hero-contents .hero-deco-wine02-L {
    position: absolute;
    transform: translate(-50%, -50%) rotate(-10deg);
    background-position: center center;
    background-size: 0% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/hero-deco-wine02.webp);
}
.ratio-portrait .intro .hero-contents .hero-deco-wine02-L { width: 6%; height: 11%; top: 68%; left: 12% }
.ratio-square .intro .hero-contents .hero-deco-wine02-L { width: 6%; height: 15%; top: 61%; left: 12% }
.ratio-landscape .intro .hero-contents .hero-deco-wine02-L { width: 3.5%; height: 20%; top: 52%; left: 15% }
.intro .wrap .hero-contents.on .hero-deco-wine02-L { animation: hero-deco-bounce 0.4s ease-out 1.7s forwards; }

/*装飾(ワイン03左)*/
.intro .hero-contents .hero-deco-wine03-L {
    position: absolute;
    transform: translate(-50%, -50%) rotate(-10deg);
    background-position: center center;
    background-size: 0% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/hero-deco-wine03.webp);
}
.ratio-portrait .intro .hero-contents .hero-deco-wine03-L { width: 6%; height: 11%; top: 65%; left: 4% }
.ratio-square .intro .hero-contents .hero-deco-wine03-L { width: 6%; height: 15%; top: 57%; left: 4% }
.ratio-landscape .intro .hero-contents .hero-deco-wine03-L { width: 3.5%; height: 20%; top: 48%; left: 10% }
.intro .wrap .hero-contents.on .hero-deco-wine03-L { animation: hero-deco-bounce 0.4s ease-out 1.8s forwards; }

/*装飾(ワイングラス)*/
.intro .hero-contents .hero-deco-glass {
    position: absolute;
    transform: translate(-50%, -50%);
    background-position: center center;
    background-size: 0% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/hero-deco-glass.webp);
}
.ratio-portrait .intro .hero-contents .hero-deco-glass { width: 17%; height: 13%; top: 35%; left: 91%;}
.ratio-square .intro .hero-contents .hero-deco-glass { width: 15%; height: 13%; top: 37%; left: 89% }
.ratio-landscape .intro .hero-contents .hero-deco-glass { width: 12%; height: 23%; top: 33%; left: 77% }
.intro .wrap .hero-contents.on .hero-deco-glass { animation: hero-deco-bounce 0.4s ease-out 2s forwards; }

/*装飾アニメーション設定*/
@keyframes hero-deco-bounce {
    0%   { background-size: 0 auto; }
    40%   { background-size: 100% auto; }
    60%   { background-size: 85% auto; }
    80%   { background-size: 92% auto; }
    100% { background-size: 90% auto; }
}

/*装飾(雲01)*/
.intro .hero-deco-cloud01 {
    position: absolute;
    transform: translate(-50%, -50%);
}
.ratio-portrait .intro .hero-deco-cloud01 {
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.ratio-portrait .intro .hero-deco-cloud01 { width: 40%; height: 13%; top: 12%; left: 18%; }
.ratio-portrait .intro .hero-deco-cloud01 { width: 18vh; height: 10.3vh; top: 10vh; left: 18%; }
.ratio-square .intro .hero-deco-cloud01 { width: 40%; height: 11%; top: 12%; left: 16%; }
.ratio-landscape .intro .hero-deco-cloud01 { width: 21%; height: 24%; top: 32%; left: 12.5%; }
.intro .hero-deco-cloud01 { animation: cloud-slide 10s ease 0s infinite; }

.ratio-portrait .intro .hero-deco-cloud01::before,
.ratio-portrait .intro .hero-deco-cloud01::after {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
.intro .hero-deco-cloud01::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: -27%;
    width: min(300px, 125%);
    height: min(68px, 49%);
    background: url(../img/top/cloud01.svg) no-repeat bottom center / contain;
}
.intro .hero-deco-cloud01::after {
    content: "";
    position: absolute;
    top: 0;
    left: 32%;
    width: min(216px, 32%);
    height: min(300px, 78%);
    background: url(../img/top/hero-deco-person01.webp) no-repeat top center / contain;
}
.ratio-landscape .intro .hero-deco-cloud01::before {
    bottom: 0;
    right: 0;
    width: 140%;
    height: 50%;
    background: url(../img/top/cloud02.svg) no-repeat bottom center / contain;
}
.ratio-landscape .intro .hero-deco-cloud01::after {
    left: 25%;
    width: 30%;
    height: 64%;
}

/*装飾(雲02)*/
.intro .hero-deco-cloud02 {
    position: absolute;
    transform: translate(-50%, -50%);
}
.ratio-portrait .intro .hero-deco-cloud02 {
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.ratio-portrait .intro .hero-deco-cloud02 { width: 40%; height: 11%; top: 19%; left: 92%; }
.ratio-portrait .intro .hero-deco-cloud02 { width: 19vh; height: 11vh; top: 14vh; left: 90%; }
.ratio-square .intro .hero-deco-cloud02 { width: 40%; height: 16%; top: 18%; left: 92%; }
.ratio-landscape .intro .hero-deco-cloud02 { width: 15%; height: 18%; top: 26%; left: 91%; }
.intro .hero-deco-cloud02 { animation: cloud-slide 10s ease 0s infinite; }

.ratio-portrait .intro .hero-deco-cloud02::before,
.ratio-portrait .intro .hero-deco-cloud02::after {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
.intro .hero-deco-cloud02::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: min(300px, 95%);
    height: min(68px, 36%);
    background: url(../img/top/cloud02.svg) no-repeat bottom center / contain;
}
.intro .hero-deco-cloud02::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 25%;
    width: min(199px, 36%);
    height: min(215px, 68%);
    background: url(../img/top/hero-deco-person02.webp) no-repeat bottom center / contain;
}
.ratio-landscape .intro .hero-deco-cloud02::before {
    bottom: 0;
    width: 190%;
    height: 66%;
    background: url(../img/top/cloud01.svg) no-repeat bottom center / contain;
}
.ratio-landscape .intro .hero-deco-cloud02::after {
    top: -4%;
    left: 20%;
    width: 44%;
    height: 73%;
}

/*装飾(雲02)*/
.intro .hero-deco-cloud03 {
    position: absolute;
    top: 4%;
    left: 34%;
    width: 27%;
    height: 12%;
    background-position: center center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/cloud01.svg);
    transform: translate(-50%, -50%);
}
.ratio-portrait .intro .hero-deco-cloud03 {display:none; }
.ratio-square .intro .hero-deco-cloud03 {display:none; }
.intro .hero-deco-cloud03 { animation: cloud-slide 10s ease 0s infinite; }

/* アニメーションの中でtranslateZを含める */
@keyframes cloud-slide {
    0%   { transform: translate(-45%, -50%) translateZ(0); }
    50%  { transform: translate(-55%, -50%) translateZ(0); }
    100% { transform: translate(-45%, -50%) translateZ(0); }
}

/*@keyframes cloud-slide {
0%   { transform: translate(-45%, -50%); }
50%  { transform: translate(-55%, -50%); }
100% { transform: translate(-45%, -50%); }
}*/

@media screen and (min-width: 480px) {
    .intro .hero-contents, .intro .hero-contents-back, .intro .hero-contents-front {
        top: 50%;
    }
    .intro .hero-contents .layer02 .layer02b {
        top: 50%;
    }
}

    @media screen and (min-width: 768px) {

    }
        @media screen and (min-width: 1024px) {

        }
            @media screen and (min-width: 1400px) {

            }
/* 
==========================================================
イントロ コンセプト
==========================================================
*/

/*樽*/
.intro .barrel,
.intro .barrel-text {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);

    opacity: 0;
    transition: opacity 0.5s ease;
        pointer-events: none;
}
.intro .barrel.on,
.intro .barrel-text.on {
    opacity: 1;
}


.ratio-portrait .intro .barrel,
.ratio-portrait .intro .barrel-text
 { width: 220vw; height: 220vw; top: 14%; }
.ratio-square .intro .barrel,
.ratio-square .intro .barrel-text
 { width: 170vw; height: 160vw; top: 16%; }
.ratio-landscape .intro .barrel,
.ratio-landscape .intro .barrel-text
 { width: 90vw; height: 90vw; top: 10%; }

.intro .barrel {
    background-position: center center;
    background-size: 92% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/barrel.webp);
}
.intro .barrel-text::before {
    content: "";
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.2;
    transform: translate(0, 0);
    background-position: center center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/barrel-text.svg);
    animation: barrel-text-rotation 60s linear infinite;
}
@keyframes barrel-text-rotation {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}

/*樽 人物01 BACK*/
.intro .concept-person01-back {
    position: absolute;
    transform: translate(0, 0);
    overflow: hidden;
}
.ratio-portrait .intro .concept-person01-back { width: 24%; height: 70vw; right: 9%; top: 9vh; transform: rotate(8deg);}
.ratio-square .intro .concept-person01-back { width: 24%; height: 70vw; right: 3vw; top: 9vw; }
.ratio-landscape .intro .concept-person01-back { width: 14%; height: 35vw; left: 67%; top: 5vw; }
.intro .concept-person01-back > div {
    position: absolute;
    width: 100%;
    height: 100vh;
    transform: translate(-50%, 100%);
    background-position: top center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/intro-personD.webp);
}

/*樽 人物01 FRONT*/
.intro .concept-person01-front {
    position: absolute;
    transform: translate(0, 0);
    bottom: 0;
    overflow: hidden;
}
.ratio-portrait .intro .concept-person01-front { width: 43%; height: 27vh; left: 2%;}
.ratio-square .intro .concept-person01-front { width: 32%; height: 45vw; left: 2%; }
.ratio-landscape .intro .concept-person01-front { width: 20%; height: 31vw; left: 8%; }
.intro .concept-person01-front > div {
    position: absolute;
    width: 100%;
    height: 100vh;
    transform: translate(-50%, 100%);
    background-position: top center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/intro-personA.webp);
}

/*樽 人物02 BACK*/
.intro .concept-person02-back {
    position: absolute;
    transform: translate(0, 0);
    overflow: hidden;
}
.ratio-portrait .intro .concept-person02-back { width: 21%; height: 70vw; right: 12%; top: 9vh; transform: rotate(14deg);}
.ratio-square .intro .concept-person02-back { width: 21%; height: 70vw; right: 5%; top: 6vw; }
.ratio-landscape .intro .concept-person02-back { width: 11%; height: 35vw; left: 69%; top: 5vw; }
.intro .concept-person02-back > div {
    position: absolute;
    width: 100%;
    height: 100vh;
    transform: translate(-50%, 100%);
    background-position: top center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/intro-personE.webp);
}

/*樽 人物02 FRONT*/
.intro .concept-person02-front {
    position: absolute;
    transform: translate(0, 0);
    bottom: 0;
    overflow: hidden;
}
.ratio-portrait .intro .concept-person02-front { width: 38%; height: 24vh; left: 1%;}
.ratio-square .intro .concept-person02-front { width: 33%; height: 41vw; left: 0; }
.ratio-landscape .intro .concept-person02-front { width: 20%; height: 28vw; left: 8%; }
.intro .concept-person02-front > div {
    position: absolute;
    width: 100%;
    height: 100vh;
    transform: translate(-50%, 100%);
    background-position: top center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/intro-personD.webp);
}

/*樽 人物03 BACK*/
.intro .concept-person03-back {
    position: absolute;
    transform: translate(0, 0);
    overflow: hidden;
}
.ratio-portrait .intro .concept-person03-back { width: 26%; height: 70vw; right: 8%; top: 9vh; transform: rotate(11deg);}
.ratio-square .intro .concept-person03-back { width: 29%; height: 70vw; right: 0; top: 6vw; }
.ratio-landscape .intro .concept-person03-back { width: 15%; height: 35vw; left: 67%; top: 4vw; }
.intro .concept-person03-back > div {
    position: absolute;
    width: 100%;
    height: 100vh;
    transform: translate(-50%, 100%);
    background-position: top center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/intro-personG.webp);
}

/*樽 人物03 FRONT*/
.intro .concept-person03-front {
    position: absolute;
    transform: translate(0, 0);
    bottom: 0;
    overflow: hidden;
}
.ratio-portrait .intro .concept-person03-front { width: 35%; height: 24vh; left: 4%; transform: rotate(3deg);}
.ratio-square .intro .concept-person03-front { width: 31%; height: 45vw; left: 2%; }
.ratio-landscape .intro .concept-person03-front { width: 19%; height: 30vw; left: 9%; }
.intro .concept-person03-front > div {
    position: absolute;
    width: 100%;
    height: 100vh;
    transform: translate(-50%, 100%);
    background-position: top center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/intro-personE.webp);
}

/*樽 人物04 BACK*/
.intro .concept-person04-back {
    position: absolute;
    transform: translate(0, 0);
    overflow: hidden;
}
.ratio-portrait .intro .concept-person04-back { width: 25%; height: 70vw; right: 7%; top: 9vh; transform: rotate(-1deg);}
.ratio-square .intro .concept-person04-back { width: 32%; height: 70vw; right: 0; top: 4vw; }
.ratio-landscape .intro .concept-person04-back { width: 16%; height: 35vw; left: 64%; top: 3vw; }
.intro .concept-person04-back > div {
    position: absolute;
    width: 100%;
    height: 100vh;
    transform: translate(-50%, 100%);
    background-position: top center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/intro-personH.webp);
}

/*樽 人物04 FRONT*/
.intro .concept-person04-front {
    position: absolute;
    transform: translate(0, 0);
    bottom: 0;
    overflow: hidden;
}
.ratio-portrait .intro .concept-person04-front { width: 46%; height: 24vh; left: 2%;}
.ratio-square .intro .concept-person04-front { width: 41%; height: 42vw; left: 0; }
.ratio-landscape .intro .concept-person04-front { width: 24%; height: 26vw; left: 7%; }
.intro .concept-person04-front > div {
    position: absolute;
    width: 100%;
    height: 100vh;
    transform: translate(-50%, 100%);
    background-position: top center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/intro-personG.webp);
}

/*樽 人物 共通バウンス設定*/
.intro .concept-person.on > div { animation: concept-person-bounce 0.6s ease-out forwards; }
@keyframes concept-person-bounce {
    0%   { transform: translate(0, 100%); opacity: 0; }
    40%  { transform: translate(0, 0%); opacity: 1;  }
    60%  { transform: translate(0, 4%); } 
    80%  { transform: translate(0, 1%); }
    100% { transform: translate(0, 2%); }
}
.intro .concept-person.off > div { animation: concept-person-leaving 0.3s ease-out forwards; }
@keyframes concept-person-leaving {
    0%   { transform: translate(0, 0%); opacity: 1; }
    20%   { opacity: 0; }
    100% { transform: translate(0, 100%); }
}

    @media screen and (min-width: 768px) {

    }
        @media screen and (min-width: 1024px) {

        }
            @media screen and (min-width: 1400px) {

            }

/*樽 メッセージ*/

.message-wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /*background-color: rgba(255, 0, 0, 0.1);*/
}
.ratio-portrait .message-wrap { padding: 75% 0 31%;}
.ratio-square .message-wrap {
    padding: 57% 0 39%;
}
.ratio-landscape .message-wrap { padding: 25% 0 5%; }

.concept-message {
    position: relative;
    bottom: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, 0);
    line-height: 1.5;
}
.ratio-portrait .concept-message { font-size: 5.2vw; }
.ratio-square .concept-message {
    /* font-size: 4.5vw; */
    font-size: min(25px, 4vw, 4.5vw);
}
.ratio-landscape .concept-message { font-size: 2vw; }

.concept-message li {

    position: absolute;
    width: 100%;
    text-align: center;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.concept-message li .text-fit {
    position: relative;
    display: block;
    width: fit-content;
    margin: auto;
    letter-spacing: 2.5px;
    font-feature-settings: "palt";
    line-height: 1.7;
}


.ratio-portrait .concept-message .br-p,
.ratio-square .concept-message .br-p {
    display: block;
}
.ratio-landscape .concept-message .br-p {
    display: none;
}
.ratio-portrait .concept-message .sp_none,
.ratio-square .concept-message .sp_none {
    display: none;
}

.ratio-landscape .concept-message .sp_none {
    display: block;
}

.concept-message .text-large {
    font-size: 140%;
}
.concept-message .text-color {
    color: #09556a
}

.concept-message05 .impact-block.text-large.text-color {
    font-size: 190%;
}
.char {
    display: inline-block;
}

.impact-char {
    display: inline-block;
}

.impact-inner {
    display: inline-block;
    transform-origin: center center;
}
.impact-block {
    display: inline-block;
    transform-origin: center center;
}

/*雲*/
.ratio-landscape .intro .concept-cloud {
    pointer-events: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 20vw;
}
.intro .concept-cloud {
    opacity: 0;
    transition: opacity 0.5s ease;
}
.intro .concept-cloud.on { opacity: 1; }

.intro .concept-cloud > div:nth-child(1) {
    position: absolute;
    top: 35%;
    left: 7%;
    width: 23%;
    height: 26%;
    background-position: center center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/cloud02.svg);
    transform: translate(-50%, -50%);
    animation: cloud-slide 10s ease 0s infinite;
}

.intro .concept-cloud > div:nth-child(2) {
    position: absolute;
    top: 69%;
    left: 91%;
    width: 23%;
    height: 26%;
    background-position: center center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/cloud01.svg);
    transform: translate(-50%, -50%);
    animation: cloud-slide 10s ease 0s infinite;
}

.intro .scrolldown {
    pointer-events: none;
    display: block;
    position: fixed;
    width: 40px;
    height: 25px;
    bottom: 2vw;
    left: 50%;
    transform: translate(-50%, 0%);

    background-position: center center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    animation: scrolldown 2s ease infinite;
}
.intro .scrolldown.brown { background-image: url(../img/top/scrolldown-brown.svg); }
.intro .scrolldown.white { background-image: url(../img/top/scrolldown-white.svg); }

@keyframes scrolldown {
    0%   { transform: translate(-50%, -10px); }
    50%  { transform: translate(-50%, 0px); }
    100% { transform: translate(-50%, 0); }
}

    

@media screen and (min-width: 480px) {
    .concept-message li .text-fit {
        line-height: 1.5;
    }
}

@media screen and (min-width: 768px) {
    .intro .scrolldown {
        bottom: 10px;
        width: 3vw;
        height: 1.5vw;
    }
}
@media screen and (min-width: 1024px) {
    .ratio-landscape .vision .goal-title {
        width: 26%;
        max-width: 600px;
    }
}

/* 
==========================================================
葡萄戦記
==========================================================
*/
.budo-senki {
    position: relative;
    z-index: -1;
    width: 100%;
    height: 50vh;
}
.budo-senki .display-adjustment {
    opacity: 0;
}
.budo-senki .display-adjustment.on {
    opacity: 1;
}
.budo-senki .wrap {
    visibility: hidden;
    position: fixed;
    z-index: 100;
    width: 100%;
    top: 0;
    left: 0;

}
.budo-senki .wrap.on {
    visibility: visible;
}
.budo-senki .wrap.start-flow {
    position: absolute;
    margin-top: 50vh;
}

.budo-senki .size-measure {
    background-position: top 32vw center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/budosenki-back-sp.svg);
}

.budo-senki .inner01 {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 1800px;

    padding: 70px 5% 0;
}

.budo-senki .title-box {
    position: relative;
}
.budo-senki .title {
    position: relative;
    overflow: hidden;

    margin: 0 auto 10px;

    width: 100%;
}

.budo-senki .title img {
    width: 100%;
    height: auto;
    display: block;
    clip-path: inset(0 100% 0 0);
}
.budo-senki .wrap.on .title img {
    animation: reveal 0.3s ease-out 0.5s forwards;    
}
@keyframes reveal {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
}

.budo-senki .title-sub {
    font-size: 80%;
    font-weight: bold;
    line-height: 1;
    padding: 0 5%;
    margin: 0 auto 15px;
}

.budo-senki .title-sub .textwipe .tw-line {
    font-weight: bold;
    padding: 4px 6px;
    margin: 0 0 5px 0;
    font-feature-settings: "palt";
    display: block;   
}
.budo-senki .title-sub .textwipe .tw-line::before { background: #095772; }
.budo-senki .title-sub .textwipe .tw-text { color: #fff; }
.budo-senki .wrap.on.on .textwipe .tw-line::before { animation: textwipe-wipeIn 0.2s cubic-bezier(.2,.7,.2,1) forwards 0.5s; }
.budo-senki .wrap.on.on .textwipe .tw-text { animation: textwipe-textFade 0.2s ease-out forwards 1s; }

.budo-senki .budosenki-movie {
    position: relative;
    margin: 0 0 10%;

}
.budo-senki .movie01 {
    position: relative;
    padding: 0;
    opacity: 0;
    transition: opacity 0.5s ease 1.5s;
}
.budo-senki .wrap.on .movie01 { opacity: 1; }

.budo-senki .movie01 img { transition: opacity 0.3s ease; }
.budo-senki .movie01 img:hover { opacity: 0.8; }


.budo-senki .movie02 {
    position: absolute;
    width: 35%;
    top: 63%;
    left: 60%;
    left: 60%;
    opacity: 0;
    transition: opacity 0.5s ease 1.7s;


}
.budo-senki .wrap.on .movie02 { opacity: 1; }

.budo-senki .movie02 img { transition: opacity 0.3s ease; }
.budo-senki .movie02 img:hover { opacity: 0.8; }



.budo-senki .movie03 {
    position: absolute;
    width: 36%;
    top: 76%;
    left: 25%;
    opacity: 0;
    transition: opacity 0.5s ease 1.9s;
}
.budo-senki .wrap.on .movie03 { opacity: 1; }

.budo-senki .movie03 img { transition: opacity 0.3s ease; }
.budo-senki .movie03 img:hover { opacity: 0.8; }


/*人物01*/
.budo-senki .budosenki-deco-person01 {
    position: absolute;
    width: 24%;
    height: 14%;
    top: 32%;
    left: 2%;
    background-position: center center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/budosenki-deco-person01.webp?0122);
    opacity: 0;
    transition: opacity 0.5s ease 2s;
}
.budo-senki .wrap.on .budosenki-deco-person01 { opacity: 1; }
/*人物02*/
.budo-senki .budosenki-deco-person02 {
    position: absolute;
    width: 7%;
    height: 9%;
    top: 26%;
    left: 75%;
    background-position: center center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/budosenki-deco-person02.webp);
    opacity: 0;
    transition: opacity 0.5s ease 2s;   
}
.budo-senki .wrap.on .budosenki-deco-person02 { opacity: 1; }
/*人物03*/
.budo-senki .budosenki-deco-person03 {
    position: absolute;
    width: 5%;
    height: 14vw;
    top: 68%;
    left: 10%;
    background-position: center center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/budosenki-deco-person03.webp);
    opacity: 0;
    transition: opacity 0.5s ease 2s;
}
.budo-senki .wrap.on .budosenki-deco-person03 { opacity: 1; }

/*人物04*/
.budo-senki .budosenki-deco-person04 {
    display: none;
}

/*人物05*/
.budo-senki .budosenki-deco-person05 {
    display: none;
}

/*雲*/
.budo-senki .budosenki-deco-cloud {
    display: none;
}

.budo-senki .link-btn {
    position: relative;
    padding: 15% 0 11%;
    text-align: center;
    opacity: 0;
    transition: opacity 0.5s ease 2.5s;   
}
.budo-senki .wrap.on .link-btn {
    opacity: 1;
}

.budo-senki .link-btn a {
    position: relative;
    display: inline-block;
    line-height: 1;
    color: #fff;
    padding: 10px 80px;
    border-radius: 100px;
    font-size: 120%;
    font-weight: bold;
    background-color: #b81717;
    transition: background-color 0.5s ease;
}
.budo-senki .link-btn a:hover {
    background-color: #816D46;
}
.budo-senki .link-btn a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 15%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 70px;
    background-position: center center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/budosenki-deco-person06.webp);
}
.budo-senki .link-btn a::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 85%;
    transform: translate(-50%, -50%);
    width: 33px;
    height: 65px;
    background-position: center center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/budosenki-deco-gunbai.webp);
}

.grape-thumb {
    width: 109%;
}

@media screen and (min-width: 480px) {
        .budo-senki .budosenki-deco-person02 {
        top: 22%;
        left: 75%;
    }

    .budo-senki .budosenki-deco-person01 {
        top: 28%;
        width: 22%;
    }

    .budo-senki .budosenki-deco-person03 {
        top: 65%;
    }
}

    @media screen and (min-width: 768px) {

        .budo-senki .title-sub {
            font-size: 100%;
        }
        .budo-senki .title-sub .textwipe .tw-line {
            padding: 10px 14px;
            margin-bottom: 10px;
        }

        .budo-senki .link-btn {
            padding: 35px 0;
        }

        .budo-senki .link-btn a {
            padding: 15px 150px;
            border-radius: 100px;
            font-size: 150%;
        }

        .budo-senki .link-btn a::before {
            left: 15%;
            width: 80px;
            height: 115px;
        }
        .budo-senki .link-btn a::after {
            left: 85%;
            width: 52px;
            height: 110px;
        }

        .budo-senki .budosenki-movie {
            margin: 0;
        }
        .budo-senki .movie02 {
           width: 20%;
            top: 52%;
            left: 80%;
        }

        .budo-senki .movie03 {
            width: 18%;
            top: 76%;
            left: 61%;
        }
        .grape-thumb {
            width: 100%;
        }
        .budo-senki .budosenki-deco-person01 {
            top: 39%;
            width: 17%;
            left: 8%;
            height: 15%;
        }
        .budo-senki .budosenki-deco-person02 {
            width: 5%;
            top: 31%;
            left: 67%;
        }
        .budo-senki .budosenki-deco-person03 {
            top: 82%;
            width: 4%;
            left: 10%;
        }
    }
        @media screen and (min-width: 1024px) {

            .budo-senki .size-measure {
                background-position: top 28vw center;
                background-image: url(../img/top/budosenki-back-pc.svg);
            }

            .budo-senki .inner01 {
                width: 90%;


                padding: 2vw 15% 0 15%;
            }



            .budo-senki .title-box {
                position: absolute;
                width: 40%;

                top: 4vw;
                left: 0;
            }



            .budo-senki .budosenki-movie {
                width: 100%;
                margin: 3vw 10% 0;
            }

            .budo-senki .movie01 {
                padding: 0;
            }


            .budo-senki .budosenki-deco-person01 {
                width: 16%;
                height: 29%;
                top: 40%;
                left: 5%;
            }
            .budo-senki .budosenki-deco-person02 {
                width: 4%;
                height: 17%;
                top: 39%;
                left: 93%;        
            }
            .budo-senki .budosenki-deco-person03 {
                width: 3%;
                height: 13%;
                top: 64%;
                left: 4%;
            }

            /*人物04*/
            .budo-senki .budosenki-deco-person04 {
                display: block;
                position: absolute;
                width: 6%;
                height: 11vw;
                top: 70%;
                left: 15%;
                background-position: center center;
                background-size: 100% auto;
                background-repeat: no-repeat;
                background-image: url(../img/top/budosenki-deco-person04.webp);
                opacity: 0;
                transition: opacity 0.5s ease 2s;
            }
            .budo-senki .wrap.on .budosenki-deco-person04 { opacity: 1; }

            /*人物05*/
            .budo-senki .budosenki-deco-person05 {
                display: block;
                position: absolute;
                width: 3.5%;
                height: 8vw;
                top: 70%;
                left: 82%;
                background-position: center center;
                background-size: 100% auto;
                background-repeat: no-repeat;
                background-image: url(../img/top/budosenki-deco-person05.webp);
                opacity: 0;
                transition: opacity 0.5s ease 2s;
            }
            .budo-senki .wrap.on .budosenki-deco-person05 { opacity: 1; }


            /*雲*/
            .budo-senki .budosenki-deco-cloud {
                display: block;
                position: absolute;
                top: 13%;
                left: 95%;
                width: 23%;
                height: 8%;
                background-position: center center;
                background-size: 100% auto;
                background-repeat: no-repeat;
                background-image: url(../img/top/cloud01.svg);
                transform: translate(-50%, -50%);
                opacity: 0;
                transition: opacity 0.5s ease 2s;
            }
            .budo-senki .wrap.on .budosenki-deco-cloud { opacity: 1; }

            .budo-senki .wrap.on .budosenki-deco-person03 {
                left: 4%;
                height: 15%;
                width: 3.4%;
                top: 69%;
            }
            .budo-senki .wrap.on .budosenki-deco-person01 {
                top: 43%;
                height: 28%;
                width: 16%;
                left: 2%;
            }

        }
            @media screen and (min-width: 1400px) {

            }

/* 
==========================================================
ビジョン
==========================================================
*/
@media screen and (min-width: 480px)  {
    .vision .horizontal > div {
        min-height: 500px;
        height: 88vw;
        padding: 76px 0 0;
    }

    .vision ul.horizontal-list li > div {
        width: 55vw;
    }

    .vision .goal-title {
        max-width: 440px;
    }
}

@media screen and (min-width: 768px) {

    .vision .wrap {
        padding: 100px 0 50px;
    }
    .vision .horizontal > div {
        padding: 120px 0 0;
        height: 53vw;
        min-height: 630px;
    }
    .vision ul.horizontal-list li > div {
        width: 36vw;
    }
    .vision .goal-title {
        width: 600px;
        max-width: none;
    }

    .vision ul.horizontal-list li div > div > p {
        font-size: 90%;
    }
}
@media screen and (min-width: 1024px) {
    .vision .wrap > div {
        background-size: 80% 100%;
    }
    .vision .wrap > div::before {
        background-size: 80% auto;
    }

    .vision .wrap > div::after {
        background-size: 80% auto;
    }
    .vision ul.horizontal-list li div > div .goal-head {
        font-size: 120%;
    }
    .vision ul.horizontal-list li div > div > p {
        font-size: 90%;
    }
    .vision ul.horizontal-list li > div {
        width: 26vw;
    }
    .vision .horizontal > div {
        max-height: 679px;
        height: 49vw;
        min-height: 550px;
        padding: 100px 0 0;
    }
}

@media screen and (min-width: 1400px) {
    .vision .horizontal > div {
        max-height: 620px;
    }
}
@media screen and (min-width: 1500px) {

    .vision .wrap > div {
        background-size: 1200px 100%;
        background-position: top 40vw center;
    }
    .vision .wrap > div::before {
        background-size: 1200px auto;
    }

    .vision .wrap > div::after {
        background-size: 1200px auto;
    }
    .vision ul.horizontal-list li div > div .goal-head {
        font-size: 140%;
    }
    .vision ul.horizontal-list li div > div > p {
        font-size: 90%;
    }
}

@media screen and (min-width: 1700px) {
    .vision ul.horizontal-list li > div {
        width: 22vw;
    }
    .vision .horizontal > div {
        max-height: 660px;
    }
}
.vision {
    position: relative;
    z-index: -10;
    width: 100%;
}

.vision::before {
    content: "";
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-position: top center;
    background-size: 94% auto;
    background-repeat: repeat-x;
    background-image: url(../img/top/bg-top.webp);
}
.vision.start-flow::before {
    position: absolute;
}

.vision .wrap {
    position: relative;
    z-index: 100;
    width: 100%;
    padding: 8% 0 50px;
}
.vision .wrap > div {
    position: relative;
    width: 100%;
    background-position: top 39vw center;
    background-size: 94% 100%;
    background-repeat: no-repeat;
    background-image: url(../img/top/vision-back.svg);
}
.vision .wrap > div::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-position: top center;
    background-size: 94% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/vision-back-top.svg);
}
.vision .wrap > div::after {
    content: "";
    position: absolute;
    z-index: 0;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 100vh;
    background-position: bottom center;
    background-size: 94% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/vision-back-bottom.svg);
}
.vision ul.horizontal-list li > div {
    background-color: #eae5d9;
    width: 62vw;
}
.vision .horizontal > div {
    min-height: 415px;
    padding: 60px 0 0;
    height: 112vw;
}
.vision .goal-title {
    max-width: 400px;
    width: 87vw;
}

/*タイトル*/
.vision .inner01 {
    position: relative;
    width: 100%;
    max-width: 1500px;
    margin: auto;
    padding: 0 4% 50px;
}

.vision .title {
    position: relative;
    margin: auto;
    width: 100%;
    height: 83vw;
}
.vision .title > div {
    transform: translate(-50%, 0);
}
.vision .title > div.text01 {
    position: absolute;
    z-index: 110;
    width: 20%;
    height: 20vw;
    top: 24vw;
    left: 6%;
    opacity: 0;
    transition: opacity 0.5s ease 0.2s;
}
.vision .scroll-target.on .title > div.text01 { opacity: 1; }

.vision .title > div.text02 {
    position: absolute;
    z-index: 100;
    width: 22%;
    height: 22vw;
    top: 11vw;
    left: 21%;
    opacity: 0;
    transition: opacity 0.5s ease 0.4s;
}
.vision .scroll-target.on .title > div.text02 { opacity: 1; }

.vision .title > div.text03 {
    position: absolute;
    z-index: 100;
    width: 22%;
    height: 22vw;
    top: 11vw;
    left: 79%;
    opacity: 0;
    transition: opacity 0.5s ease 0.6s;
}
.vision .scroll-target.on .title > div.text03 { opacity: 1; }

.vision .title > div.text04 {
    position: absolute;
    z-index: 110;
    width: 20%;
    height: 20vw;
    top: 24vw;
    left: 94%;
    opacity: 0;
    transition: opacity 0.5s ease 0.8s;
}
.vision .scroll-target.on .title > div.text04 { opacity: 1; }

.vision .title > div.text05 {
    position: absolute;
    z-index: 100;
    width: 30%;
    height: 10vw;
    top: 11vw;
    left: 50%;
    opacity: 0;
    transition: opacity 0.5s ease 0s;
}
.vision .scroll-target.on .title > div.text05 { opacity: 1; }

.vision .title-person {
    position: absolute;
    z-index: 100;
    top: 0;
    left: 50%;
    width: 94%;
    height: 111vw;
    transform: translate(-50%, 0);
    opacity: 0;
    transition: opacity 0.5s ease;
    overflow: hidden;

}
.vision .scroll-target.on .title-person {
    opacity: 1;
}
.vision .title-person-back {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 140%;
    height: 100vw;
    transform: translate(-50%, 0);

    background-position: bottom center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/vision-title-person-back.svg);

}
.vision .title-person-mask {
    position: absolute;
    bottom: 7px;
    left: 50%;
    width: 110%;
    height: 100%;
    transform: translate(-50%, 0);


    -webkit-mask-image: url(../img/top/vision-title-person-mask.svg);
    mask-image: url(../img/top/vision-title-person-mask.svg);
    -webkit-mask-size: 100% auto;
    mask-size: 100% auto;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: bottom center;
    mask-position: bottom center;

/* ---マスク---
    background-position: bottom center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/vision-title-person-mask.svg);
    opacity: 0.45;
*/
}

.vision .title-person01 {
    position: absolute;
    z-index: 100;
    top: 5vh;
    left: 50%;
    width: 63%;
    height: 100vw;
    transform: translate(-50%, 100%);

    background-position: top center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/vision-title-person01.webp);
}
.vision .scroll-target.on .title-person01 { animation: asdfasd 0.8s ease-out forwards 1s; }
@keyframes asdfasd {
    0%   { transform: translate(-50%, 100%); opacity: 0; }
    40%  { transform: translate(-50%, -4%); opacity: 1;  }
    60%  { transform: translate(-50%, 2%); } 
    80%  { transform: translate(-50%, -1%); }
    100% { transform: translate(-50%, 0%); }
}
.vision .title-person01 {
    position: absolute;
    top: 6vh;
    left: 50%;
    width: 63%;
    height: 100vw;
    transform: translate(-50%, 100%);

    background-position: top center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/vision-title-person01.webp);
}


.vision .title-text {
    color: #fff;
    position: relative;
    margin: auto;
    z-index: 100;
    width: 90%;
    transition: opacity 0.5s ease;

}

/*汎用テキストワイプ 変更パラメータ*/
.vision .inner01 .title-text-gold .textwipe .tw-line {
    font-size: 135%;
    padding: 4px 6px;
    font-feature-settings: "palt";
    font-weight: bold;
    margin-bottom: 6px;

}
.vision .inner01 .title-text-gold .textwipe .tw-line::before { background: #ccb96e; }
.vision .inner01 .title-text-gold .textwipe .tw-text { color: #000; }
.vision .scroll-target.on .inner01 .title-text-gold .textwipe .tw-line::before { animation: textwipe-wipeIn 0.2s cubic-bezier(.2,.7,.2,1) forwards 0.5s; } 
.vision .scroll-target.on .inner01 .title-text-gold .textwipe .tw-text { animation: textwipe-textFade 0.2s ease-out forwards 1s; } 


/* .vision .title-text > p:nth-child(1) {
    margin: 0 0 16px;
} */

.vision .title-text > p:nth-child(1) {
    margin: 0 0 22px;
}


.vision .vision-deco-cloud01 {
    position: absolute;
    overflow: hidden;
    top: -15vw;
    left: 0;
    width: 100%;
    height: 30vw;
    pointer-events: none;
}
.vision .vision-deco-cloud01::before {
    content: "";
    position: absolute;
    width: 50%;
    height: 40%;
    top: 30%;
    left: 10%;
    background-position: center center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/cloud02.svg);
    animation: cloud-slide 10s ease 0s infinite;
}
.vision .vision-deco-cloud01::after {
    content: "";
    position: absolute;
    width: 50%;
    height: 40%;
    top: 50%;
    left: 90%;
    background-position: center center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/cloud02.svg);
    animation: cloud-slide 10s ease 0s infinite;
}

.vision .vision-deco-cloud02 {
    display: none;
}
@media screen and (min-width: 480px) {
        .vision .inner01 .title-text-gold .textwipe .tw-line {
        font-size: 170%;
    }

    .vision .title-person-mask {
        bottom: 10px;
    }
    .vision .title-person01 {
        top: 8vh;
    }
}

    @media screen and (min-width: 768px) {
        .vision .inner01 {
            padding: 0 4%;
        }

        /*汎用テキストワイプ 変更パラメータ*/
        .vision .inner01 .title-text-gold .textwipe .tw-line {
            font-size: 170%;
            font-weight: bold;
            /* padding: 15px 15px; */
            margin-bottom: 11px;
        }

        .vision .inner01 .title-text {
            width: 60%;
            margin: -20% 0 0 3%;
        }
        .vision .title {
            height: 78vw;
        }
        .vision .title-person {
            height: 95vw;
        }
        .vision .title-person-back {
            width: 120%;
        }
        .vision .title-person01 {
            top: 10vh;
            width: 56%;
        }
        .vision .title-person-mask {
            bottom: 0;
        }
    }

        @media screen and (min-width: 1024px) {


            .vision .title {
                width: 90%;
                height: 58vw;
            }


            .vision .title > div.text01 {
                width: 20%;
                height: 20vw;
                top: 10vw;
                left: 9%;
            }

            .vision .title > div.text02 {
                width: 18%;
                height: 18vw;
                top: 5vw;
                left: 25%;
            }

            .vision .title > div.text03 {
                width: 18%;
                height: 18vw;
                top: 5vw;
                left: 75%;
            }

            .vision .title > div.text04 {
                width: 20%;
                height: 20vw;
                top: 10vw;
                left: 91%;
            }

            .vision .title > div.text05 {
                width: 30%;
                height: 10vw;
                top: 4vw;
                left: 50%;
            }

            .vision .title-person {
                width: 90%;
                height: 74vw;
            }

            .vision .title-person-back {
                width: 100%;
            }

            .vision .title-person-mask {
                width: 100%;
            }
            .vision .title-person01 {
                width: 52%;
            }

            .vision .title-text {
                width: 70%;
            }

            /*汎用テキストワイプ 変更パラメータ*/
            .vision .inner01 .title-text-gold .textwipe .tw-line {
                font-size: 170%;
                /* padding: 18px 18px; */
                margin-bottom: 16px;
            }

            .vision .vision-deco-cloud01 {
                position: absolute;
                overflow: hidden;
                top: -5vw;
                left: 0;
                width: 100%;
                height: 20vw;
            }
            .vision .vision-deco-cloud01::before {
                width: 35%;
                height: 50%;
                top: 30%;
                left: 10%;
            }
            .vision .vision-deco-cloud01::after {
                width: 35%;
                height: 50%;
                top: 50%;
                left: 100%;
            }

            .vision .vision-deco-cloud02 {
                display: block;
                position: absolute;
                overflow: hidden;
                top: 45vw;
                left: 0;
                width: 100%;
                height: 30vw;
                pointer-events: none;
            }
            .vision .vision-deco-cloud02::before {
                content: "";
                position: absolute;
                width: 28%;
                height: 50%;
                top: 85%;
                left: 0%;
                background-position: center center;
                background-size: 100% auto;
                background-repeat: no-repeat;
                background-image: url(../img/top/cloud01.svg);
                animation: cloud-slide 10s ease 0s infinite;     
            }
            .vision .vision-deco-cloud02::after {
                content: "";
                position: absolute;
                width: 36%;
                height: 50%;
                top: 29%;
                left: 95%;
                background-position: center center;
                background-size: 100% auto;
                background-repeat: no-repeat;
                background-image: url(../img/top/cloud01.svg);
                animation: cloud-slide 10s ease 0s infinite;
                z-index: 100;
            }
            .vision .inner01 .title-text {
                width: 46%;
                margin: -17% 0 0 13vw;
            }
            .vision .inner01 {
                padding: 0 4%;
            }
        }

        @media screen and (min-width: 1500px) {
            .vision .title {
                height: 68vw;
                max-height: 1040px;
            }

            .vision .title-person {
                height: 1110px;
            }

            .vision .title-person01 {
                top: 79px;
                width: 640px;
            }

            .vision .vision-deco-cloud01 {
                top: -5vw;
                left: 0;
                height: 20vw;
            }
            .vision .vision-deco-cloud01::before {
                width: 530px;
                height: 130px;
            }
            .vision .vision-deco-cloud01::after {
                width: 530px;
                height: 130px;
            }

            .vision .vision-deco-cloud02 {
                top: 648px;
                left: 0;
                height: 28vw;
            }
            .vision .vision-deco-cloud02::before {
                width: 530px;
                height: 130px;
            }
            .vision .vision-deco-cloud02::after {
                width: 530px;
                height: 130px;
            }
            .vision .title-text {
                position: absolute;
                top: 700px;
                width: 38%;
                left: 17%;
                margin: auto;
            }
            .vision .inner01 .title-text {
                font-size: 86%;
                max-width: 490px;
                margin: 0;
            }
            .vision .inner01 {
                max-width: 1600px;
            }
            .vision .title > div.text01 {
                width: 20%;
                height: 20vw;
                top: 10vw;
                left: 9%;
            }
            .vision .title > div.text02 {
                width: 18%;
                height: 18vw;
                top: 5vw;
                left: 25%;
            }
            .vision .title > div.text03 {
                width: 18%;
                height: 18vw;
                top: 5vw;
                left: 75%;
            }
            .vision .title > div.text04 {
                width: 20%;
                height: 20vw;
                top: 10vw;
                left: 91%;
            }

            .vision .title > div.text05 {
                width: 30%;
                height: 10vw;
                top: 4vw;
                left: 50%;
            }

            .vision .inner01 .title-text-gold .textwipe .tw-line {
                font-size: 170%;
            }
            .vision .title-person-mask, .vision .title-person-back {
                max-width: 1300px;
            }

        }

        /* @media screen and (min-width: 1600px) {
            .vision .title > div.text01 {
                width: 240px;
                height: 240px;
                top: 160px;
                left: 110px;
            }

            .vision .title > div.text02 {
                width: 220px;
                height: 220px;
                top: 80px;
                left: 300px
            }

            .vision .title > div.text03 {
                width: 220px;
                height: 220px;
                top: 80px;
                left: 900px;
            }

            .vision .title > div.text04 {
                width: 240px;
                height: 240px;
                top: 160px;
                left: 1090px;
            }

            .vision .title > div.text05 {
                width: 365px;
                height: 370px;
                top: 65px;
                left: 600px;
            }
        } */

/*5つの目標*/
.vision .inner02 {
    position: relative;
    z-index: 100;
    width: 100%;
}

.vision .side-scroll {
    position: relative;
    width: 100%;
    height: 300vh;
    opacity: 0;
    opacity: 0;transition: opacity 0.5s ease 1s;
}
.vision .scroll-target.on .side-scroll {
    opacity: 1;
}

.side-scroll .fix-back {
    display: block;
    width: 89vw;
    height: 90vh;    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.side-scroll .fix-back > span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 9999px;

    background-position: center center;
    background-size: 30% auto;
    background-repeat: repeat;
    background-image: url(../img/top/horizontal-back.svg);
}
.side-scroll .fix-back > span::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 25vw;
    background-position: left 8% center;
    background-size: 20% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/horizontal-deco.svg);
}
.side-scroll .fix-back > span::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30vw;
    background-position: right 8% center;
    background-size: 20% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/horizontal-deco.svg);
}

.side-scroll .fix-area {
    position: absolute;
    overflow: hidden;

    top: 0;
    left: 0;

    width: 100%;
    height: 100vh;
}
.side-scroll .fix-area.is-bottom {
    top: auto;
    bottom: 0;
}
.side-scroll .fix-area.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
}

.side-scroll .fix-area .scroll-wrap {
    position: absolute;
    padding: 60px 0 0;
    left: 0;
    top: 50%;
    min-height: 484px;
    height: 134vw;
    transform: translateY(-50%);
}

.side-scroll .fix-area .scroll-wrap .goal-title {
    position: absolute;
    top: 0;
    left: 50vw;
    transform: translateX(-50%);
    max-width: 400px;
    width: 87vw;
}

.side-scroll .fix-area ul {
    position: relative;
    display: flex;
    flex-wrap: nowrap;   /* ← ここを変更 */
    will-change: transform;
    height: 100%;
    box-sizing: border-box;
    width: auto;
    padding: 30px 10vw 0;
}
.side-scroll .fix-area ul li {
    position: relative;
    padding: 0 10px;
    height: 100%;
}
.side-scroll .fix-area ul li:first-child { padding: 0 10px 0 ; }
.side-scroll .fix-area ul li:last-child { padding: 0 0 0 10px; }

.side-scroll .fix-area ul li > div {
    position: relative;
    width: 75vw;
    height: 100%;
    background-position: top center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    border-radius: 20px;
    border: 2px solid #866d46;
    background-color: #eae5d9;
}

.side-scroll .fix-area ul li > div.goal01 { background-image: url(../img/top/vision-goal01.webp?0122); }
.side-scroll .fix-area ul li > div.goal02 { background-image: url(../img/top/vision-goal02.webp?0122); }
.side-scroll .fix-area ul li > div.goal03 { background-image: url(../img/top/vision-goal03.webp?0122); }
.side-scroll .fix-area ul li > div.goal04 { background-image: url(../img/top/vision-goal04.webp?0122); }
.side-scroll .fix-area ul li > div.goal05 { background-image: url(../img/top/vision-goal05.webp?0127_03); }

.side-scroll .fix-area ul li div > div {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 85%;
    height: 152px;
    transform: translate(-50%, 0%);
}
.side-scroll .fix-area ul li div > div .goal-head {
    font-size: 130%;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 20px;
}
.side-scroll .fix-area ul li div > div > p {
    font-size: 100%;
}
.side-scroll .text_small {
    font-size: 62%;
    display: block;
    margin-top: 7px;
}

    @media screen and (min-width: 480px) {
        .side-scroll .fix-area .scroll-wrap {
            height: 72vw;       
        }
        .side-scroll .fix-area ul li > div {
            width: 63vw;
            max-width: 330px;
        }

        .side-scroll .fix-area ul li > div.goal01 { background-image: url(../img/top/vision-goal01_pc.webp); }
        .side-scroll .fix-area ul li > div.goal02 { background-image: url(../img/top/vision-goal02_pc.webp); }
        .side-scroll .fix-area ul li > div.goal03 { background-image: url(../img/top/vision-goal03_pc.webp); }
        .side-scroll .fix-area ul li > div.goal04 { background-image: url(../img/top/vision-goal04_pc.webp); }
        .side-scroll .fix-area ul li > div.goal05 { background-image: url(../img/top/vision-goal05_pc.webp?0127_02); }
    }

    @media screen and (min-width: 768px) {

        .side-scroll .fix-back  {
            visibility: hidden;
        }
        .side-scroll .fix-area .scroll-wrap {
            padding: 120px 0 0;
            height: 72vw;
            max-height: 617px;
        }
        .side-scroll .fix-area .scroll-wrap .goal-title {
            max-width: none;
            width: 600px;
        }

        .side-scroll .fix-area ul li > div {
            width: 42vw;
            max-width: unset;
        }

        .side-scroll .fix-area ul li div > div {
            height: 160px;
        }
        .vision .inner02 {
            padding-top: 3%;
        }
    }

    @media screen and (min-width: 1024px) {
        .side-scroll .fix-area .scroll-wrap {
            padding: 100px 0 0;
            max-height: 638px;
            height: 56vw;
            min-height: 550px;
        }

        .side-scroll .fix-area .scroll-wrap .goal-title {
            width: 26%;
            max-width: 600px;
        }

        .side-scroll .fix-area ul li > div {
            width: 32vw;
            max-width: 400px;
        }
        .side-scroll .fix-area ul li div > div {
            height: 170px;
            height: 190px;
        }
        .vision .inner02 {
            padding-top: 6%;
        }
    }

    @media screen and (min-width: 1500px) {
        .vision .inner02 {
                padding-top: 1%;
        }
    }

    @media screen and (min-width: 1600px) {
        
        .side-scroll .fix-area ul li div > div > p {
            font-size: 93%;
        }
    }

    @media screen and (min-width: 1700px) {
        .side-scroll .fix-area ul li > div {
            width: 22vw;
        }
    }

/*テキスト*/
.vision .inner03 {
    position: relative;
    z-index: 100;
    width: 100%;
    height: auto;
}

.vision .inner03 > div > div:nth-child(1) {
    position: relative;
    margin: 0 auto 50px;
    height: 74vw;
    overflow: unset;
}
.vision .inner03 > div > div:nth-child(2) {
    position: relative;
    margin: auto;
    width: 80%;
}
.vision .inner03 > div > div:nth-child(2) > div {
    position: relative;
    width: 100%;
}
.vision .inner03 > div > div:nth-child(2) > div .text {
    opacity: 0;transition: opacity 0.5s ease 1s;
}
.vision .inner03 .scroll-target.on > div:nth-child(2) > div .text {
    opacity: 1;
}

.vision .vision-deco-cloud03 {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 30%;
    opacity: 0;
    transition: opacity 0.5s ease 0s;
}
.vision .inner03 .scroll-target.on .vision-deco-cloud03 { opacity: 1; }
.vision .vision-deco-cloud03::before {
    content: "";
    position: absolute;
    width: 50%;
    height: 100%;
    top: 50%;
    left: 10%;
    background-position: center center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/cloud02.svg);
    animation: cloud-slide 10s ease 0s infinite;
}

.vision .vision-deco-cloud04 {
    pointer-events: none;
    position: absolute;
    top: 55%;
    left: 0;
    width: 100%;
    height: 30%;
    opacity: 0;
    transition: opacity 0.5s ease 0s;
}
.vision .inner03 .scroll-target.on .vision-deco-cloud04 { opacity: 1; }
.vision .vision-deco-cloud04::before {
    content: "";
    position: absolute;
    width: 50%;
    height: 100%;
    top: 50%;
    left: -10%;
    background-position: center center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/cloud01.svg);
    animation: cloud-slide 10s ease 0s infinite;
}

.vision .vision-deco-cloud05 {
    pointer-events: none;
    position: absolute;
    top: 83%;
    left: 0;
    width: 100%;
    height: 30%;
    opacity: 0;
    transition: opacity 0.5s ease 0s;
}
.vision .inner03 .scroll-target.on .vision-deco-cloud05 { opacity: 1; }
.vision .vision-deco-cloud05::before {
    content: "";
    position: absolute;
    width: 50%;
    height: 100%;
    top: 50%;
    left: 80%;
    background-position: center center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/cloud01.svg);
    animation: cloud-slide 10s ease 0s infinite;
}

.vision .vision-deco-grape {
    position: absolute;
    width: 87%;
    height: 60vw;
    bottom: 16%;
    left: 20vw;
    background-position: center center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/vision-deco-grape.webp);
    opacity: 0;
    transition: opacity 0.5s ease 0.8s; 
}
.vision .inner03 .scroll-target.on .vision-deco-grape {
    opacity: 1;
}
.vision .vision-person01 {
    position: absolute;
    width: 36%;
    left: 7vw;
    height: 50vw;
    bottom: 27vw;
    left: 8%;
    overflow: hidden;  
}
.vision .vision-person01 > div {
    position: absolute;
    width: 100%;
    height: 100vh;
    transform: translate(-50%, 100%);
    background-position: top center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/vision-person01.webp);
}
.vision .inner03 .scroll-target.on .vision-person01 > div { animation: vision-person-bounce 0.6s ease-out forwards 0.5s; }
@keyframes vision-person-bounce {
    0%   { transform: translate(0, 100%); opacity: 0; }
    40%  { transform: translate(0, 0%); opacity: 1;  }
    60%  { transform: translate(0, 4%); } 
    80%  { transform: translate(0, 1%); }
    100% { transform: translate(0, 2%); }
}

.vision .vision-deco-fuji {
    position: absolute;
    width: 145%;
    height: 40vw;
    bottom: 1vw;
    left: -34vw;
    background-position: bottom left;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/vision-deco-fuji.webp);
    opacity: 0;
    transition: opacity 0.5s ease 0s;
}
.vision .inner03 .scroll-target.on .vision-deco-fuji {
    opacity: 1;
}

.vision .inner03 > div > div:nth-child(1) .title-text-gold {
    display: block;
    position: absolute;
    top: 4vw;
    left: 50%;
}
.vision .inner03 > div > div:nth-child(2) .title-text-gold {
    display: none;
    position: relative;
    margin-bottom: 32px;
}

/*汎用テキストワイプ 変更パラメータ*/
.vision .inner03 .title-text-gold .textwipe .tw-line {
    font-weight: bold;
    margin-bottom: 6px;
    font-size: 125%;
    padding: 4px 6px;
    font-feature-settings: "palt";
}
.vision .inner03 .title-text-gold .textwipe .tw-line::before { background: #ccb96e; }
.vision .inner03 .title-text-gold .textwipe .tw-text { color: #000; }
.vision .inner03 .scroll-target.on .title-text-gold .textwipe .tw-line::before { animation: textwipe-wipeIn 0.2s cubic-bezier(.2,.7,.2,1) forwards 0.5s; } 
.vision .inner03 .scroll-target.on .title-text-gold .textwipe .tw-text { animation: textwipe-textFade 0.2s ease-out forwards 1s; } 

@media screen and (min-width: 480px) {
    .vision .inner03 .title-text-gold .textwipe .tw-line {
        font-size: 170%;
    }
    .vision .inner03 > div > div:nth-child(2) > div .text {
        font-size: 90%;
    }
}

    @media screen and (min-width: 768px) {
        /*汎用テキストワイプ 変更パラメータ*/
        .vision .inner03 .title-text-gold .textwipe .tw-line {
            font-size: 170%;
            /* padding: 15px; */
            margin-bottom: 12px;
        }

        .vision .vision-deco-grape {
            width: 67%;
            height: 38vw;
            bottom: 24%;
            left: 32%;
        }
        .vision .vision-person01 {
            height: 44vw;
        }
        .vision .inner03 > div > div:nth-child(1) .title-text-gold {
            top: 11vw;
            left: 54%;
         }
        .vision .inner03 > div > div:nth-child(2) > div .text {
            font-size: 100%;
        }
    }

    @media screen and (min-width: 1024px) {
        .vision .inner03 {
            position: relative;
            z-index: 100;
            width: 100%;
            height: auto;
        }
        .vision .inner03 > div {
            padding: 0 0 160px;
        }

        .vision .inner03 > div > div:nth-child(1) {
            position: absolute;
            width: 100%;
            height: 65vw;
            bottom: 0;
            left: 0;
            margin: 0 auto;
        }

        .vision .inner03 > div > div:nth-child(2) {
            width: 80%;
        }
        .vision .inner03 > div > div:nth-child(2) > div {
            width: 50%;
            margin: 0 0 0 auto;
        }

        .vision .inner03 > div > div:nth-child(2) > div .text {
            font-size: 90%;
        }

        .vision .inner03 > div > div:nth-child(1) .title-text-gold {
            display: none;
        }
        .vision .inner03 > div > div:nth-child(2) .title-text-gold {
            display: block;
        }

        /*汎用テキストワイプ 変更パラメータ*/
        .vision .inner03 .title-text-gold .textwipe .tw-line {
            font-size: 170%;
            margin-bottom: 12px;
        }
        .vision .vision-deco-cloud03::before {
            width: 40%;
            top: 40%;
            height: 100%;
            left: 20%;
        }
        .vision .vision-deco-cloud04::before {
            width: 40%;
            height: 100%;
            left: -7%;
        }
        .vision .vision-deco-cloud05 {
            top: 78%;
            left: 4%;
        }

        .vision .vision-deco-cloud05::before {
            width: 40%;
            height: 100%;
            top: 55%;
            left: 60%;
        }
        .vision .vision-deco-grape {
            position: absolute;
            width: 36%;
            height: 26vw;
            bottom: 23%;
            left: 22%;
            opacity: 0;
            transition: opacity 0.5s ease 0.8s;
        }

        .vision .vision-person01 {
            width: 20%;
            height: 28vw;
            bottom: 33%;
            left: 8%;
        }

        .vision .vision-deco-fuji {
            width: 90%;
            height: 30vw;
            bottom: 10%;
            left: -19%;
        }
        .vision .vision-deco-cloud03 {
            top: 24%;
            left: -12%;
            width: 80%;
        }
    }
    @media screen and (min-width: 1200px) {
        .vision .inner03 > div {
            padding: 0 0 180px;
        }

        .vision .inner03 > div > div:nth-child(2) > div {
            width: 45%;
        }
        .vision .vision-deco-grape {
            width: 43%;
            height: 26vw;
            bottom: 24%;
            left: 19%;    
        }
    }

    @media screen and (min-width: 1400px) {

        .vision .inner03 {
            padding: 70px 50px;
        }
    }

    @media screen and (min-width: 1500px) {
        .vision .inner03 > div {
            padding: 0 0 200px;
        }

        .vision .vision-person01 {
            width: 19%;
            height: 27vw;
            bottom: 20%;
            left: 13%;
        }

        .vision .vision-deco-fuji {
            width: 80%;
            height: 30vw;
            bottom: 2%;
            left: -9%;
        }

        .vision .vision-deco-cloud03 {
            top: 39%;
            left: -5%;
            width: 45%;
        }
        .vision .vision-deco-cloud03::before {
            width: 530px;
            height: 130px;
            left: 20%;
        }

        .vision .vision-deco-cloud04 { top: 70%; }
        .vision .vision-deco-cloud04::before {
            width: 530px;
            height: 130px;
            left: 0%;
        }

        .vision .vision-deco-cloud05 { top: 81%; }
        .vision .vision-deco-cloud05::before {
            width: 530px;
            height: 130px;
            left: 60%;
        }
        .vision .inner03 .scroll-target.on .vision-deco-grape {
            bottom: 8vw;
            left: 19vw;
        }
    }

    @media screen and (min-width: 1600px) {

        .vision .inner03 > div > div:nth-child(2) {
            width: 1130px;
        }
    }

    @media screen and (min-width: 1700px) {
        .vision .inner03 > div {
            padding: 0 0 180px;
        }

        .vision .vision-person01 {
            width: 19%;
            height: 24vw;
            bottom: 26%;
            left: 9%;
        }

        .vision .vision-deco-fuji {
            width: 76%;
            height: 30vw;
            bottom: 5%;
            left: -11%;
        }
    }

    @media screen and (min-width: 1900px) {
        .vision .inner03 > div {
            padding: 0 0 300px;
        }

        .vision .vision-deco-fuji {
            width: 76%;
        }

    }

    @media screen and (min-width: 2100px) {
        .vision .inner03 > div {
            padding: 0 0 350px;
        }
    }
    @media screen and (min-width: 2300px) {
        .vision .inner03 > div {
            padding: 0 0 400px;
        }
    }

/*ワインスライド*/
.vision .inner04 {
    position: relative;
    z-index: 100;
    width: 100%;
    height: auto;
    padding: 50px 5% 0;
}

.vision .inner04 .title-text-gold {
    padding: 0 5%;
}

/*汎用テキストワイプ 変更パラメータ*/
.vision .inner04 .title-text-gold .textwipe .tw-line {
    font-size: 125%;
    font-weight: bold;
    padding: 4px 6px;
    margin-bottom: 6px;   
    font-feature-settings: "palt";
}
.vision .inner04 .title-text-gold .textwipe .tw-line::before { background: #ccb96e; }
.vision .inner04 .title-text-gold .textwipe .tw-text { color: #000; }
.vision .inner04 .scroll-target.on .title-text-gold .textwipe .tw-line::before { animation: textwipe-wipeIn 0.2s cubic-bezier(.2,.7,.2,1) forwards 0.5s; } 
.vision .inner04 .scroll-target.on .title-text-gold .textwipe .tw-text { animation: textwipe-textFade 0.2s ease-out forwards 1s; } 

.top-slider-back {
    position: absolute;
    width: 80%;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);

    background-position: center center;
    background-size: 80% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/vision-circle.webp);
}
.top-slider-back::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.4;
    background-position: center center;
    background-size: 98% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/vision-circle-text.svg);
    animation: circle-text-rotation 60s linear infinite;
}
@keyframes circle-text-rotation {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.top-slider {
    width: 100%;
    margin: auto;
    padding: 0 0 50vw;
    position: relative;
    z-index: 100;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.vision .scroll-target.on .top-slider {
    opacity: 1;
}

.top-slider .viewport {
    overflow: hidden;
    width: 100%;
    margin: -4% auto 0;
    position: relative;
    z-index: 100;
}

.top-slider .track-slide {
    display: flex;
    transition: transform 0.4s ease;
}

.top-slider .track-slide li {
    flex: 0 0 100%;
    height: 85vw;
    display: grid;
    place-items: center;
    position: relative;
}

.top-slider .track-slide li .circle {
    width: 44vw;
    height: 43vw;
    border-radius: 50%;
    transition: transform 0.4s ease, background-color 0.4s ease;
    transform: scale(1);
}

.top-slider .track-slide li.center .circle {
    transform: scale(1.5);
}

.top-slider .track-fade {
    position: relative;
    width: 80%;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);

}
.top-slider .track-fade li {
    text-align: left;
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.top-slider .track-fade li.is-active { opacity: 1; }


.top-slider .track-fade li > p:nth-child(1) {
    text-align: center;
}
.top-slider .track-fade li > p:nth-child(1) span {
    display: inline;
    color: #fff;
    background-color: #095772;
    line-height: 1.8;
    padding: 4px 6px;
    margin-bottom: 15px;  
    font-feature-settings: "palt";
    white-space: pre-wrap;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone; 
}

.top-slider .track li p:nth-of-type(2) {
    font-size: 90%;
    margin-top: 14px;
}
.top-slider .track-fade li > p:nth-child(2) span {
    margin-top: 5%;
}

.top-slider .slider-btn {
    position: absolute;
    z-index: 101;
    width: 7%;
    height: 10vw;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.top-slider .slider-btn.next {
    left: 2%;
    background-position: center center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/vision-slide-next.svg);
}

.top-slider .slider-btn.prev {
    right: 2%;
    background-position: center center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/vision-slide-prev.svg);
}

.vision .vision-deco-cloud06 {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vw;
    opacity: 0;
    transition: opacity 0.5s ease 0s;
}
.vision .inner04 .scroll-target.on .vision-deco-cloud06 { opacity: 1; }
.vision .vision-deco-cloud06::before {
    content: "";
    position: absolute;
    width: 50%;
    height: 20%;
    top: 10%;
    left: 100%;
    background-position: center center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/cloud02.svg);
    animation: cloud-slide 10s ease 0s infinite;
}

@media screen and (min-width: 400px) {


    .top-slider {
        padding: 0 0 35vw;
    }
}
@media screen and (min-width: 480px) {
        .vision .inner04 .title-text-gold .textwipe .tw-line {
        font-size: 170%;
    }
}

@media screen and (min-width: 768px) {
    .vision .inner04 {
        padding: 80px 5%;
    }

    /*汎用テキストワイプ 変更パラメータ*/
    .vision .inner04 .title-text-gold .textwipe .tw-line {
        font-size: 170%;
        /* padding: 15px; */
        margin-bottom: 12px;
    }

    .top-slider {
        padding: 0 0 15vw;
    }
}

@media (min-width:1024px){

    .vision .inner04 {
        padding: 60px 0 0;
    }
    .top-slider {
        width: 90%;
        max-width: 1300px;
        padding-bottom: 0;
    }
    .top-slider .viewport {
        overflow: hidden;
        width: 100%;
        margin: auto;
        position: relative;
        margin: -17vw auto 0;
    }

    .top-slider-back {
        transform: translate(-50%, -50%);
        width: min(845px, 53vw);
        height: min(845px, 53vw);
        background-size: 74% auto;
        top: 51%;
    }

    /*汎用テキストワイプ 変更パラメータ*/
    .vision .inner04 .title-text-gold .textwipe .tw-line {
        font-size: 170%;
        margin-bottom: 12px;
    }

    .top-slider .slide-wrap {
        transform: rotate(-20deg);
    }

    .top-slider .track-slide li {
        flex: 0 0 33.3333%;
        height: 80vw;
    }

    .top-slider .track-slide li .circle {
        width: min(354px, 22.5vw);
        height: min(330px, 21vw);
        border-radius: 50%;
        transition: transform 0.4s ease, background-color 0.4s ease;
        transform: rotate(20deg) scale(1);
    }

    .top-slider .track-slide li.center .circle {
        transform: rotate(20deg) scale(2);
    }

    .top-slider .slider-btn {
        width: 4%;
        height: 6vw;
    }
    .top-slider .slider-btn.next {
        left: 1%;
    }

    .top-slider .slider-btn.prev {
        right: 1%;
    }

    .vision .vision-deco-cloud06 {
        height: 65vw;
    }
    .vision .vision-deco-cloud06::before {
        top: 20%;
        left: 100%;
        width: 35%;
    }

    .vision .vision-deco-cloud06::after {
        content: "";
        position: absolute;
        width: 33%;
        height: 20%;
        top: 108%;
        left: 0;
        background-position: center center;
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-image: url(../img/top/cloud01.svg);
        animation: cloud-slide 10s ease 0s infinite;
        padding: 0;
    }
    .top-slider .track-fade li > p:nth-child(1) {
        margin-top: 0;
        text-align: left;
    }
    .top-slider .track-fade {
        position: absolute;
        width: 31%;
        bottom: 28.5vw;
        left: 80%;
        z-index: 100;
    }
}

@media (min-width:1500px){
    .vision .vision-deco-cloud06 {
        height: 900px
    }
    .vision .vision-deco-cloud06::before  {
        width: 530px;
        height: 130px;
        left: 90%;
    }
    .vision .vision-deco-cloud06::after  {
        width: 530px;
        height: 130px;
        left: 10%;
    }

}

/*5つの価値観*/
.vision .inner05 {
    position: relative;
    z-index: 100;
    width: 100%;
    height: auto;

    background-position: bottom center;
    background-size: 94% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/vision-end.webp); 
}
.vision .inner05 .scroll-target {
    opacity: 0;
    transition: opacity 0.5s ease;

}
.vision .inner05 .scroll-target.on {
    opacity: 1;
}


.vision .values-title {
    position: relative;
    margin: 0 auto 30px;
    max-width: 400px;
    width: 90vw;
}

.vision .values-text {
    position: relative;
    z-index: 0;

    margin: 0 auto 50px;
    width: 80%;
    font-size: 100%;
}

.vision-deco-scissors {
    position: absolute;
    z-index: -1;

    bottom: -12vw;
    left: -13%;
    width: 13vw;
    height: 13vw;
    background-position: center center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/vision-deco-scissors.png);
}
.vision-deco-greengrape {
    position: absolute;
    z-index: -1;
    bottom: 200px;
    left: 83%;
    width: 16vw;
    height: 16vw;
    background-position: center center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/vision-deco-greengrape.png);
}
.vision-deco-shoes {
    position: absolute;
    z-index: -1;

    bottom: 40px;
    left: 1%;
    width: 16vw;
    height: 16vw;
    background-position: center center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/vision-deco-shoes.png);
}

.vision ul.values-list {
    position: relative;
    margin: auto;
    width: 88%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* 基本は中央 */
     padding-bottom: 14%;
}
.vision ul.values-list li {
    width: 50%;
    padding: 0 1%;
}

.vision ul.values-list li > div {
    position: relative;
    z-index: 0;
    width: 100%;
    margin: 0 0 35px;
    padding: 9vw 15px 0;

    background-position: top center;
    background-size: 100% auto;
    background-repeat: no-repeat;
}
.vision ul.values-list li:nth-child(1) > div { background-image: url(../img/top/vision-values-list-back01.svg); }
.vision ul.values-list li:nth-child(2) > div { background-image: url(../img/top/vision-values-list-back02.svg); }
.vision ul.values-list li:nth-child(3) > div { background-image: url(../img/top/vision-values-list-back03.svg); }
.vision ul.values-list li:nth-child(4) > div { background-image: url(../img/top/vision-values-list-back04.svg); }
.vision ul.values-list li:nth-child(5) > div { background-image: url(../img/top/vision-values-list-back05.svg); }
.vision ul.values-list li > div::before {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: -12px;
    left: 0;
    width: 100%;
    height: 50px;
    background-position: bottom center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/vision-values-list-back-bottom.svg);
}

.vision ul.values-list li > div::before {
     bottom: -22px;
}
.vision ul.values-list li > div > p:nth-child(1) {
    margin: auto;
    height: 120px;
}
.vision ul.values-list li > div > p:nth-child(1) span {
    writing-mode: vertical-rl;
    position: absolute;
    transform: translate(-50%, 0%);
    left: 50%;
}
.vision ul.values-list li > div > p:nth-child(2) {
    border-top: 1px solid #000;
    padding: 10px 0 0;
    margin: 10px 0 0;
    font-size: 80%;
    height: 75px;
}

.vision .vision-deco-cloud07 {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vw;
    opacity: 0;
    transition: opacity 0.5s ease 0s;
}
.vision .inner05 .scroll-target.on .vision-deco-cloud07 { opacity: 1; }

    @media screen and (min-width: 768px) {
        .vision .values-title {
            width: 70%;
            max-width: none;
        }

        .vision ul.values-list li {

            width: 33.33%;

        }

        .vision ul.values-list li > div {
            padding: 6vw 30px 0;
            margin: 0 0 4.5vw;
        }
        .vision ul.values-list li > div::before {
           bottom: -8%; 
        }
        .vision ul.values-list li > div > p:nth-child(1) {
            font-size: 120%;
            height: 170px;
        }
        .vision ul.values-list li > div > p:nth-child(2) {
            padding: 10px 0 5px;
            min-height: 68px;
            height: auto;
            font-size: min(80%, 1.4vw);
        }
    }


    @media screen and (min-width: 1024px) {
        .vision .values-title {
            width: 60%;
            max-width: 700px;
        }

        .vision .values-text {
            width: 70%;
            text-align: center;
            font-size: 90%;
        }

        .vision ul.values-list {
            width: 80%;
        }

        .vision ul.values-list li > div {
            padding: 22% 11.3% 0;
        }
        .vision ul.values-list li > div > p:nth-child(1) {
            font-size: 120%;
            height: 200px;
        }

        .vision .vision-deco-cloud07 {
            height: 95vw;
        }
        .vision .vision-deco-cloud07::before {
            content: "";
            position: absolute;
            width: 30%;
            height: 7%;
            top: 9%;
            right: -26%;
            background-position: center center;
            background-size: 100% auto;
            background-repeat: no-repeat;
            background-image: url(../img/top/cloud02.svg);
            animation: cloud-slide 10s ease 0s infinite;
        }

        .vision .vision-deco-cloud07::after {
            content: "";
            position: absolute;
            width: 30%;
            height: 7%;
            top: 80%;
            left: 0%;
            background-position: center center;
            background-size: 100% auto;
            background-repeat: no-repeat;
            background-image: url(../img/top/cloud01.svg);
            animation: cloud-slide 10s ease 0s infinite;
        }

        .vision-deco-scissors {
            bottom: -4vw;
            left: 100%;
            width: 8vw;
            height: 8vw;
        }

        .vision-deco-greengrape {
            bottom: 290px;
            left: 16%;
            width: 8vw;
            height: 8vw;
        }
        .vision-deco-shoes {
            bottom: 90px;
            left: 77%;
            width: 8vw;
            height: 8vw;
        }
    }

    @media screen and (min-width: 1500px) {
        .vision .values-title {
            width: 40%;
        }

        .vision .values-text {
            width: 1100px;
        }

        .vision ul.values-list li > div > p:nth-child(1) {
            font-size: 140%;
            height: 250px;
        }

        .vision .vision-deco-cloud07::before {
            content: "";
            position: absolute;
            width: 50%;
            height: 20%;
            top: 10%;
            left: 110%;
            background-position: center center;
            background-size: 100% auto;
            background-repeat: no-repeat;
            background-image: url(../img/top/cloud02.svg);
            animation: cloud-slide 10s ease 0s infinite;
        }

        .vision .vision-deco-cloud07 {
            height: 1300px
        }
        .vision .vision-deco-cloud07::before {
            width: min(300px, 21%);
            height: min(68px, 7%);
            left: 90%;
        }

        .vision .vision-deco-cloud07::after {
            width: min(300px, 21%);
            height: min(68px, 7%);
            left: 10%;
        }
    }

/*仕事を知る*/
.movie .wrap {
    position: relative;
    z-index: 100;
    margin: 0 0 50px;
}

.movie .wrap .scroll-target {
    opacity: 0;
    transition: opacity 0.5s ease;
}
.movie .wrap .scroll-target.on {
    opacity: 1;
}

.movie .wrap > div {
    overflow: hidden;
    position: relative;
    width: 94%;
    margin: auto;
    padding: 21vw 0;
}
.movie .wrap .movie-back {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.movie .wrap > div .movie-back video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    filter: grayscale(100%);
}
.movie .wrap div .movie-back::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.movie .wrap div p {
    color: #fff;
    margin: 0 auto;
    width: 86%;
    font-size: 86%;
    line-height: 1.7;
}

.movie .wrap > div .title {
    text-align: center;
    font-size: 120%;
    margin: 0 auto 20px;
}
.movie .wrap > div .title span {
    font-size: 150%;
}
.movie .wrap > div .text {
    margin: 0 auto 20px;
}
.movie .wrap > div .link-btn {
    text-align: center;
}
.movie .wrap > div .link-btn a {
    display: inline-block;
    color: #fff;
    background-color: #b81717;
    font-size: 120%;
    padding: 14px 40px;
    border-radius: 100px;
    transition: background-color 0.5s ease;
    width: 100%;
}
.movie .wrap > div .link-btn a:hover {
    background-color: #db4242;
}

@media screen and (min-width: 480px) {
    .movie .wrap > div .link-btn a {
        width: auto;
    }
    .movie .wrap > div .text {
        text-align: center;
    }
    .movie .wrap > div .title {
        font-size: 160%;
    }
}

@media screen and (min-width: 1024px) {
    .movie .wrap {
        margin: 0 0 100px;
    }

    .movie .wrap > div p {
        width: 60%;
    }

    .movie .wrap > div .link-btn a {
        font-size: 140%;
        width: auto;
    }
}

/*メッセージ*/

.message .wrap {
    position: relative;
    z-index: 100;
    width: 100%;
    padding: 0 0 16%;
    margin: 0 0 16%;
    background-color: #bdb3ad;   
}
.message .wrap::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    height: 100%;
    background-position: 0 0;
    background-size: 100% auto;
    background-repeat: repeat-y;
    background-image: url(../img/top/message-deco-text02.svg);
    opacity: 0;
    transition: opacity 1s ease 1.5s;
    animation: message-text-scroll 20s linear infinite;
    display: none;
}
.message .scroll-target.on .wrap::before { opacity: 1; }

@keyframes message-text-scroll {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 0 100%;
    }
}

.message .wrap::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 100%;
    background-position: top center;
    background-size: 100% auto;
    background-repeat: repeat-y;
    background-image: url(../img/top/message-deco-text01.svg);
    opacity: 0;
    transition: opacity 1s ease 1.5s;
}
.message .scroll-target.on .wrap::after { opacity: 1; }

.message .head {
    position: relative;
    width: 100%;
    height: 70vw;
}

.message .head .message-map {
    position: absolute;
    left: -72vw;
    top: 0;
    width: 140%;
    height: 73vw;
    background-position: top left;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/message-map.svg);
    opacity: 0;
    transition: opacity 1s ease;   
}
.message .scroll-target.on .head .message-map { opacity: 1; }

.message .head .message-map::before {
    content: "";
    position: absolute;
    left: 40.8%;
    top: -6.5%;
    width: 59%;
    height: 100%;
    background-position: top center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/message-map-face.webp);
}

.message .head > div:nth-child(2) {
    position: absolute;
    text-align: left;
    top: 17vw;
    right: 3vw;
    width: fit-content;
    writing-mode: vertical-rl;
}

.message .head > div:nth-child(2) .title {
    font-size: 3vw;
    margin: 0 0 0 3vw;
    opacity: 0;
    transition: opacity 1s ease 0.3s;
}
.message .scroll-target.on .head > div:nth-child(2) .title { opacity: 1; }

.message .head > div:nth-child(2) .title span {
    display: inline-block;
    line-height: 1;
    padding: 2vw 1.5vw;
    color: #fff;
    background-color: #826948;
}
.message .head > div:nth-child(2) p {
    line-height: 1.4;
    font-size: 7vw;
    padding: 0;
    opacity: 0;
    transition: opacity 1s ease 0.6s;
}
.message .scroll-target.on .head > div:nth-child(2) p { opacity: 1; }

.message .text {
    opacity: 0;
    transition: opacity 1s ease 1.5s;
}
.message .scroll-target.on .text { opacity: 1; }

.message .text > p {
    margin: 0 9% 0 21%;
}

.message .text > p:nth-child(2) {
    text-align: right;
    font-size: 80%;
    margin-top: 20px;
}
.message .text > p:nth-child(3) {
    text-align: right;
    font-size: 110%;
}

@media screen and (min-width: 480px) {
    .message .wrap {
        padding: 0 0 12%;
        margin: 0 0 12%;
    }
}

    @media screen and (min-width: 768px) {
        .message .title {
            height: 50vw;
        }
        .message .head .message-map {
            left: -32%;
            top: 0;
            width: 90%;
            height: 55vw;
        }
        
        .message .wrap::before {
        display: block;
        }

        .message .head > div:nth-child(2) {
            top: 10vw;
            right: 14%;
        }

        .message .head > div:nth-child(2) p {
            font-size: 4vw;
        }
        .message .head {
            height: 47vw;
        }
    }

    @media screen and (min-width: 1024px) {
        .message .wrap::before {
            width: 5vw;
        }

        .message .wrap::after {
            width: 5vw;
        }

        .message .head {
            height: 45vw;
        }

        .message .head > div:nth-child(2) {
            top: 10vw;
            right: 15%;
        }

        .message .head > div:nth-child(2) .title {
            font-size: 110%;
            margin: 0 0 0 6%;
        }
        .message .head > div:nth-child(2) .title span {
            line-height: 1;
            padding: 13px 8px;
        }
        .message .head > div:nth-child(2) p {
            font-size: 220%;
            padding: 5vw 0 0 0;
        }
    }

    @media screen and (min-width: 1200px) {
        .message .head > div:nth-child(2) {
            right: 16%;
        }
        .message .head > div:nth-child(2) .title span {
            padding: 15px 10px;
        }
        .message .head > div:nth-child(2) .title {
            font-size: 120%;
            margin: 0 0 0 4%;
        }
        .message .head > div:nth-child(2) p {
            font-size: 250%;
            padding: 40px 0 0 0;
        }
    }

    @media screen and (min-width: 1400px) {
        .message .title {
            height: 44vw;
        }
        .message .head > div:nth-child(2) .title span {
            padding: 20px 13px;
        }
        .message .head > div:nth-child(2) .title {
            font-size: 120%;
            margin: 0 0 0 4%;
        }
        .message .head > div:nth-child(2) p {
            font-size: 250%;
            padding: 42px 0 0 0;
        }
        .message .text > p {
            margin: 0 15% 0 20%;
        }
    }

    @media screen and (min-width: 1600px) {
        .message .head > div:nth-child(2) .title span {
            padding: 20px 13px;
        }
        .message .head > div:nth-child(2) .title {
            font-size: 120%;
            margin: 0 0 0 4%;
        }
        .message .head > div:nth-child(2) p {
            font-size: 280%;
            padding: 45px 0 0 0;
        }
    }

    @media screen and (min-width: 1800px) {
        .message .head > div:nth-child(2) .title span {
            padding: 20px 13px;
        }
        .message .head > div:nth-child(2) .title {
            font-size: 130%;
            margin: 0 0 0 4%;
        }
        .message .head > div:nth-child(2) p {
            font-size: 300%;
            padding: 45px 0 0 0;
        }
        .message .text > p {
            margin: 0 20% 0 25%;
        }
    }

.flow .wrap {
    margin: 0 0 50px;
}
.flow .wrap .sec_wrap {
    position: relative;
    border: 11px solid rgb(204, 204, 204);
    border-image-source: url(https://stg.recruit.fujiclairwine.jp/wp-content/themes/fw_recruit/img/deco_waku_sen_03.webp);
    border-image-slice: 100;
    border-image-width: 50px;
    border-image-outset: 0px;
    border-image-repeat: round;
    width: 90%;
    margin: 0 auto;
    max-width: 1300px;
    background: linear-gradient(0deg, #f4ede6 36%, rgba(218, 227, 222, 1) 85%, rgba(195, 218, 214, 1) 100%);
    border-radius: 60px;
}

 .flow .sec_wrap .sec_box {
    padding: 0 20px 20px;
}

.flow .wrap .sec.guide_detail .inner {
    max-width: 900px;
    width: 100%;
}

.flow .wrap .flow .midasi_wrap {
    display: flex;
    align-items: end;
    justify-content: center;
    position: relative;
    border-bottom: solid 2px #866d46;
    margin-top: -6%;
}

.flow .wrap .img_wrap_01, .flow .img_wrap_02 {
    width: 20%;
}

.flow .wrap .img_wrap_01 img, .flow .img_wrap_02 img {
    width: 100%;
}

.flow .wrap .img_wrap_01 {
    max-width: 210px;
}

.flow .wrap .img_wrap_02 {
    max-width: 220px;
}

.flow .wrap .midasi_box {
    width: 60%;
    text-align: center;
    margin-bottom: 3.6%;
}

.flow .wrap .midasi_box .midasi {
    font-size: clamp(22px, 4vw, 40px);
}

.flow .wrap .midasi_box .text {
    font-size: clamp(11px, 1.3vw, 15px);
    display: none;
}

.flow .wrap .flow_num {
    font-family: toppan-bunkyu-midashi-min-st, serif;
    color: #003b75;
    font-size: clamp(20px, 5.8vw, 28px);
    padding: 3% 4% 3% 0;
    line-height: 1;
    border-right: solid 5px #c6cbcf;
    width: 7rem;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.flow .wrap .flow_num span {
    font-size: 50%;
    vertical-align: middle;
    padding-right: 7px;
    display: inline-block;
    line-height: 1;
}

.flow .wrap .flow_list {
    display: flex;
}

.flow .wrap .flow_text {
    padding: 3% 3% 3% 7%;
    font-family: toppan-bunkyu-midashi-min-st, serif;
    font-size: clamp(17px, 3vw, 25px);
    line-height: 1;
    display: flex;
    align-items: center;
    margin-left: 10px;
    border-bottom: solid 1px #a4b3c2;
    width: calc(100% - 7.6rem);
    flex-wrap: wrap;
}

.flow .wrap .flow_text .text {
    margin-right: 18px;
    margin: 6px 18px 6px 0;
}

.flow .wrap .flow_text .explanation {
    font-family: noto-sans-cjk-jp, sans-serif;
    color: #35689b;
    font-size: clamp(11px, 2vw, 15px);
    padding: 4px 8px 6px;
    border: solid 1px;
    vertical-align: middle;
}

.flow .wrap .flow_num::after {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #003b75;
    border-radius: 100px;
    position: absolute;
    right: -7%;
    top: 45%;
}

.flow .wrap .flow_text .font_size {
    font-size: 56%;
    display: inline-block;
    margin-bottom: 5px;
}

.flow .wrap .flow_list_04 .flow_text .text {
    margin-top: -10px;
}

.flow .wrap .flow_box {
    max-width: 800px;
    margin: 0 auto;
}

.flow .wrap .flow_wrap {
    margin-bottom: 6vw;
    margin-top: 3vw;
}
.flow .wrap .flow_wrap > .text {
    margin: 0 0 10px;
}

.flow .wrap .deco_03 {
    display: none;
}

@media screen and (min-width: 768px) {

    .flow .sec_wrap {
        border: 7px solid rgb(204, 204, 204);
        border-image-source: url(https://stg.recruit.fujiclairwine.jp/wp-content/themes/fw_recruit/img/deco_waku_sen_03.webp);
        border-image-slice: 100;
        border-image-width: 30px;
        border-image-outset: 0px;
        border-image-repeat: round;
        border-radius: 45px;
    }
}
@media screen and (min-width: 1024px) {
    .flow .wrap {
        margin: 0 0 100px;
    }
    .flow .wrap .midasi_box .text {
        display: block;
    }
    .flow .wrap .flow_wrap > .text {
        display: none;
    }
    .flow .wrap .deco_03 {
        display: block;
        width: 13vw;
        max-width: 200px;
        position: absolute;
        right: -5%;
        bottom: -12%;
    }
}

.entry .wrap {
    position: relative;
    z-index: 100;
    width: 100%;
    padding: 10vw 10% 60vw;
    background-color: #b81717;
    text-align: center;
}
.entry .wrap::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 65%;
    height: 58vw;
    transform: translate(-50%, 0);
    background-position: top center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../img/top/entry-person.webp);
}

.entry .title {
    font-size: clamp(50px, 9vw, 100px);
    color: #fff;
    line-height: 1;
    margin: 0 0 15px;
}

.entry .text {
    color: #fff;
    margin: 0 0 20px;
    font-size: 17px;
}
.entry .text br {
    display: none;
}

.entry .btn {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
}

.entry .btn > div {
    width: 100%;
    margin: 0 0 10px;
}
.entry .btn > div a {
   display: inline-block;
   width: 100%;
   text-align: center;
   border-radius: 50px;
   background-color: #fff; 
   font-size: clamp(21px, 2.4vw, 22px);
   border: solid 1px #fff;
   transition: 0.5s;
   padding: 11px 25px;
}
.entry .btn > div a:hover {
    background-color: #b81717;
    color: #fff;
    opacity: 1;
}

.entry .btn div:first-of-type {
    order: 2;
}

@media screen and (min-width: 768px) {
    .entry .wrap {
        padding: 10vw 20% 50vw;
    }
    .entry .wrap::before {
        width: 50%;
        height: 45vw;
    }
    .entry .btn > div a {
        font-size: 120%;
    }
}

@media screen and (min-width: 1024px) {
    .entry .wrap {
        padding: 6vw 40% 6vw 10%;
        text-align: left;
    }
    .entry .wrap::before {
        left: 79%;
        width: 30%;
        height: 33vw;
    }
    .entry .btn {
        flex-wrap: nowrap;   /* ← これが決定打 */
    }
    .entry .text br {
        display: block;
    }
    .entry .btn > div {
        width: 45%;
    }
    .entry .btn > div:nth-child(1) {
        padding-right: 20px;
    }
    .entry .btn > div a {
        font-size: 110%;
        padding: 10px 15px;
    }
    .entry .btn div:first-of-type {
        order: unset;
    }
}

@media screen and (min-width: 1200px) {
    .entry .wrap {
        padding: 6vw 40% 6vw 18%;
    }
    .entry .wrap::before {
        left: 77%;
        width: 29%;
        height: 29vw;
        max-height: 460px;
    }
    .entry .btn > div a {
        font-size: 120%;
        padding: 10px 15px;
    }
}

.debug {
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 10px;
    background-color: yellow;
}

@media (max-width: 1024px) {
    .flow .wrap .sec_wrap {
        border: 7px solid rgb(204, 204, 204);
        border-image-source: url(https://stg.recruit.fujiclairwine.jp/wp-content/themes/fw_recruit/img/deco_waku_sen_03.webp);
        border-image-slice: 100;
        border-image-width: 30px;
        border-image-outset: 0px;
        border-image-repeat: round;
        border-radius: 45px;
    }

    .vision .title {
        height: 105vw;
    }

    .vision .inner01 .title-text {
        margin-top: -34%;
    }
    .concept-message li {
        transform: translate(-50%, -10vh);
    }
}

@media (max-width: 480px) {
    .flow .wrap .flow_text {
        width: calc(100% - 4.2rem);
        padding: 5% 3% 5% 7%;
        flex-direction: column;
        align-items: flex-start;
    }

    .sec.flow .inner {
        width: 88%;
    }

    .flow .wrap .flow_num {
        padding: 3% 4% 5% 0;
    }

    .flow .wrap .flow_num {
        flex-direction: column;
        justify-content: center;
        width: 4rem;
    }

    .flow .wrap .img_wrap_01, .flow .wrap .img_wrap_02 {
        width: 29%;
    }

    .flow .sec_wrap .sec_box {
        padding: 0;
    }

    .flow .wrap .midasi_box {
        margin-bottom: 5.6%;
    }

    .flow .wrap .flow_num::after {
        right: -12%;
    }

    .budo-senki .inner01 {
        padding: 70px 3% 0;
    }

    .vision .inner01 {
        padding: 0 4%;
    }
    .concept-message li {
        transform: translate(-50%, -50%);
    }
}