*{box-sizing:border-box}
:root{
    --navy:#123a59;
    --navy-dark:#0d2e48;
    --cream:#fcfaf5;
    --gold:#b89452;
    --ink:#26323d;
}
html {
    scroll-behavior:smooth;
}
body {
    margin:0;
    color:var(--ink);
    background:#fff;
    font-family: "Yuji Syuku", serif;
    background: url("assets/background.png") center top/contain repeat;
    overflow-x: hidden;
    height: auto;
}
body.nav-open {
    overflow: hidden;
}
img {
    display:block;
    max-width:100%;
}
a {
    text-decoration:none;
    color:inherit;
}
main,
.container {
    /* overflow: hidden; */
    z-index: 0;
}
.container{width:min(1080px,calc(100% - 48px));margin:auto}
.header {
    position:absolute;
    z-index:20;
    top:0;
    /* left:50%; */
    /* transform:translateX(-50%); */
    /* width:min(1440px,100%); */
    width: 100%;
    padding: 0px 34px;
    display:flex;
    justify-content:flex-end;
    align-items:flex-start
}
.brand{display:flex;align-items:center;gap:10px;font:500 12px/1.5 "Zen Old Mincho",serif;color:#1d262b}
.brand-seal{width:42px;height:42px;border:1px solid #222;border-radius:50%;display:grid;place-items:center}
.menu{border:0;background:transparent;width:46px;height:46px;padding:9px;display:grid;align-content:center;gap:7px}
.menu span{height:2px;background:#fff;display:block}
.hero-main {
    background-color: aliceblue;
    padding: 5px 0 50px;
    background: url(assets/hero-main.png) center top / cover no-repeat;
    min-height: 798px;
    background-size: contain;
    position: relative;
    width: 100%;
    height: auto;
    margin: auto;
}
.hero {
    /* min-height: 680px; */
    background: url(assets/hero.png) center top / cover no-repeat;
    background-size: contain;
    position: relative;
    width: 75%;
    height: auto;
    margin: auto;
    background-position: center;
    /* border-radius: 30px; */
    margin-top: 85px;
    /* box-shadow: 0 0 40px 0px rgb(145 145 145 / 10%); */
    /* box-shadow: 0 10px 30px rgba(80, 60, 30, 0.15); */
    /* box-shadow:
    0 6px 15px rgba(40, 30, 15, 0.20),
    0 20px 50px rgba(40, 30, 15, 0.28); */
    /* box-shadow: 0 8px 25px rgb(123 118 103 / 45%); */
    /* box-shadow: 0 1px 21px rgb(123 118 103 / 12%); */
}
.hero:before {
    /* content: "";
    position: absolute;
    height: 730px;
    width: 500px;
    background-color: #fcf9f1;
   left: 0; */
}
.hero:after {
    /* content:"";
    position:absolute;
    inset:1;
    background-color: #fcf9f1; */
    /* background:linear-gradient(90deg,rgba(252,250,245,.96) 0 38%,rgba(252,250,245,.58) 49%,rgba(252,250,245,.06) 72%); */
}
.hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: auto;
    padding-top: 140px;
    padding-left: 9%;
    transform: translateY(-60px) translateX(-2%);
}
.hero-title {
    font-family: "Klee One", cursive;
    font-weight: 600;
    font-style: normal;
    position: relative;

    line-height:1.2;
}
.mv-main-text {
    max-width: 355px;
    width: 354px;
    transform: translate(4%, -10%);
}
.niigata-text {
    max-width: 420px;
    width: 420px;
    transform: translate(-2%, 0%);
}
.title-main{font-size:68px;font-weight:700;letter-spacing:.04em}
.title-cross{font-size:40px;color:var(--gold);margin:8px 0 8px 150px}
.title-sub{font-size:45px;font-weight:700;letter-spacing:.04em}
.hero-lead{
    font: 600 22px/1.7 "Zen Old Mincho",serif;
    margin:24px 0 8px;
    line-height: 1.5;
}

.hero-copy {
    font: 600 16px/1.9 "Zen Old Mincho",serif;
    line-height: 1.5;
}
.date-main {
    width: 44%;
    margin: auto 0;
    margin-top: -35px;
    margin-left: -20px;
}
@media screen and (max-width: 1440px) {
    .date-main {
        width: 60%;
    }
}
@media screen and (max-width: 1400px) {
    .date-main {
        width: 45%;
    }
}
@media screen and (max-width: 1200px) {
    .date-main {
        width: 50%;
    }
}
@media screen and (max-width: 1100px) {
    .date-main {
        width: 55%;
    }
}
@media screen and (max-width: 1000px) {
    .date-main {
        width: 57%;
    }
}
@media screen and (max-width: 950px) {
    .date-main {
        width: 62%;
    }
}
@media screen and (max-width: 800px) {
    .date-main {
        width: 80%;
    }
}
@media screen and (max-width: 768px) {
    .date-main {
        width: 86%;
        margin: auto;
        margin-top: -5%;
    }
}
@media screen and (max-width: 700px) {
    .date-main {
        width: 90%;
    }
}
@media screen and (max-width: 641px) {
    .date-main {
        width: 100%;
    }
}
@media screen and (max-width: 400px) {
    .date-main {
        width: 95%;
        margin-bottom: -21%;
    }
}
.date {
    margin-top: 11px;
    width: 100%;
    /* min-height: 100px;
    height: auto; */
    color: #fff;
    padding: 45px 24px;
    text-align: center;
    font: 500 18px "Zen Old Mincho", serif;
    background: url(assets/date-waku.png?v=2) center top / cover no-repeat;
    padding-left: 45px;
    font-weight: bold;
    margin-bottom: -6px;
}
.date .date-within {
    transform: translateY(38%) translateX(-1%);
    display: flex;
    /* flex-direction: column; */
    gap: 18px;
    align-items: center;
    justify-content: center;
}
@media screen and (max-width: 1280px) {
    .date .date-within {
        transform: translateY(26%) translateX(-1%);
    }
}
@media screen and (max-width: 768px) {
    .date .date-within {
        transform: translateY(33%) translateX(-1%);
    }
}
@media screen and (max-width: 641px) {
    .date .date-within {
        transform: translateY(4%) translateX(-1%);
    }
}
@media screen and (max-width: 550px) {
    .date .date-within {
        transform: translateY(18%) translateX(-1%);
    }
}
@media screen and (max-width: 400px) {
    .date .date-within {
        transform: translateY(-5%) translateX(-1%);
    }
}
.date .date-within p{
    padding: 0;
    margin: 0;
}
.date .number {
    font-size: 38px;
}
.small-text-sp {
    display: none;
}
@media screen and (max-width: 768px) {
    .small-text-sp {
        display: block;
        font: 900 18px "Zen Old Mincho", serif;
        text-align: center;
        margin-top: 47px;
    }
}
@media screen and (max-width: 400px) {
    .date .number {
        font-size: 20px;
    }
    .small-text-sp {
        font: 900 18px "Zen Old Mincho", serif;
        text-align: center;
        margin-top: 30px;
        display: block;
    }
}
.multiply-text {
    margin: 15px 0 15px 170px;
    max-width: 53px;
    width: 53px;
}
.date-within .small-text {
    font-size: 15px;
    padding-right: 13px !important;
    border-right: 1px solid #fff;
}
@media screen and (max-width: 400px) {
    .date-within .small-text {
        font-size: 13px;
    }
}
.section {
    padding: 76px 0;
    position:relative;
    /* background-col
    or: #fdfaf366; */
}
.section.paper.benefits {
    padding: 20px 0 35px;
}
.section.paper.breweries {
    padding: 30px 0 100px;
    position: relative;
}
.bold-text {
    font-size: 19px;
}
/* .section.paper.breweries::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    max-width: 1500px;
    width: 100%;
    height: 200px;
    background: url(assets/breweries-position-img.png) center top / cover no-repeat !important;
    transform: rotate(1deg);
} */
.section.paper.breweries::before {
    content: "";
    position: absolute;
    left: 0;
    top: -29px;
    max-width: 480px;
    width: 100%;
    height: 200px;
    background: url(assets/breweries-left.png) center top / cover no-repeat !important;
    transform: rotate(1deg);
}
.section.paper.breweries::after {
    content: "";
    position: absolute;
    right: 0;
    top: -31px;
    max-width: 480px;
    width: 100%;
    height: 200px;
    background: url(assets/breweries-right.png) center top / cover no-repeat !important;
    transform: rotate(-1deg);
}
.paper.overview {
    position: relative;
    padding: 40px 0 85px;
    background: url("assets/paper-back.png") center top/cover no-repeat!important;
    /* z-index: 10; */
    min-height: 500px;
    /* background-size: cover; */
    width: 100%;
    height: auto;
    background-position: right;
    border-top: 13px solid #bfa867;
}

.paper.overview:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    height: 50px;
    background: url("assets/overview-left.png") center top/cover no-repeat!important;
}

.paper.overview:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -55px;
    z-index: 1;
    width: 100%;
    height: 55px;
    /* background: #123a59; */
    background: url("assets/after-.png") center top/cover no-repeat!important;
    border-radius: 90% 90% 0 0 / 100% 100% 0 0;
    transform: rotate(180deg);
}
.paper:before {
    /* content:"";
    position:absolute;
    inset:0;
    width: 500px;
    right: 0;
    bottom: 0;
    /* opacity:.22; */
    /* pointer-events:none; */
    /* background-image:repeating-linear-gradient(0deg,rgba(84,65,40,.045) 0 1px,transparent 1px 5px) */
    /* background: url("assets/rice-tree.svg") center right/contain no-repeat; */ 

    /* content: "";
    background-image: url("assets/rice-tree.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    width: 400px;
    height: 310px;
    aspect-ratio: 17/40;
    margin-inline: auto;
    position: absolute;
    bottom: 0;
    right: -5%; */
}
.section-title {
    position:relative;
    z-index:2;
    margin:0 0 22px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    font:600 40px "Zen Old Mincho",serif;
    letter-spacing:.08em;
    font-weight: bold;
}
.section-title span {
    /* width:72px;
    height:1px;
    background:#67727b; */
    color: rgb(1 39 79);
    /* border-bottom: 2px solid rgb(1 39 79); */
}
.section-title.light span{
    color:#fff;
    border-bottom: 2px solid #fff;
}
.section-title.light span{background:#fff}
.center-copy,
.section-desc {
    text-align:center;
    position:relative;
    z-index:2;
    font:700 20px/2 "Zen Old Mincho",serif;
    margin:0 0 32px;
    letter-spacing: 3px;
    color: rgb(1 39 79);
}
.center-copy {
    margin-top: 30px;
    line-height: 2;
    margin-bottom: 10px;
    font-size: 18px;
}
.section-desc {
    margin-bottom: 20px;
}
.mini-breweries {
    position: relative;
    z-index: 2;
    width: min(760px, 100%);
    margin: 26px auto 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: flex-end;
    gap: 0;
}
.mini-item{text-align:center}
.mini-icon {
    max-width: 100px;
    width: 100px;
    max-height: 100px;
    height: 100px;
    /* border:2px solid; */
    border-radius:50%;
    display:grid;
    place-items:center;
    margin:0 auto 8px;
    font:600 18px "Zen Old Mincho",serif;
    border-radius: 100px;
    background-color: rgb(1 39 79);
    padding: 10px;
}

.event-img {
    max-width: 70px;
    width: 70px;
    margin: auto;
    display: block;
}
.title-img {
    max-width: 180px;
    width: 180px;
    /* margin: auto;
    display: block; */
}
.breweries-img {
    max-width: 50px;
    width: 50px;
    height: auto;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 5px;
}
.mini-item strong {
    font:600 18px "Zen Old Mincho",serif;
}
.mini-breweries i {
    font-style:normal;
    font-size:38px;
    color:#80868b;
}

.how {
    color: #fff;
    padding: 80px 0 50px;
    position: relative;
    background: url(assets/how-back.png) right center / cover no-repeat !important;
    min-height: 526px;
    width: 100%;
    transform: translate(0%,-2%);
   /* overflow: hidden; */
}
.piece-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.piece-wrap img {
    width: 38%;
    margin: auto;
    display: block;
}
.piece-wrap img.left {
    margin-right: 0;
}
.piece-wrap img.right {
    margin-left: 0;
}
/* .how::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -12px;
    width: 100%;
    height: 55px;
    background: #123a59;
    border-radius: 80% 80% 0 0 / 100% 100% 0 0;
    transform: rotate(180deg);
} */
/* .how:before{content:"";position:absolute;inset:0;opacity:.15;background-image:radial-gradient(circle at 0 100%,transparent 15px,rgba(255,255,255,.12) 16px,transparent 17px);background-size:34px 17px} */
.how-sub {
    text-align:center;
    margin:0 0 34px;
    font-size: 20px;
    font:600 18px "Zen Old Mincho",serif;
}
.how-img {
    max-width: 200px;
    width: 200px;
    margin: auto;
}
.steps{position:relative;display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center;gap:15px}
.steps article{text-align:center}
.steps article>b{font:700 18px "Zen Old Mincho",serif}
.step-circle{width:142px;height:142px;border-radius:50%;background:var(--cream);color:var(--navy);display:grid;place-items:center;margin:5px auto 15px;font:700 34px "Zen Old Mincho",serif}
.steps h3{font:600 20px/1.55 "Zen Old Mincho",serif;margin:0 0 6px}
.steps p {
    font-size:15px;
    line-height:1.75;
    /* opacity:.8; */
    margin:0;
    font-family: "Zen Old Mincho",serif;
    font-weight: 600;
}
.arrow {
    font-size: 60px;
    opacity:.85;
    transform:translate(-50%,-50%);
}

.brewery-grid {
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}
.eng-title {
    font-size: 12px;
    margin-bottom: 15px;
}
.brewery-card {
    /* background:rgba(255,255,255,.75); */
    border:1px solid rgb(213 157 0 / 30%);
    /*box-shadow:0 10px 24px rgba(0,0,0,.06); */
    padding: 10px 10px 15px;
    text-align: center;
    border-radius: 13px;
    background: #FFF;
    box-shadow: 0 0 11px 0 rgba(18, 58, 89, 0.30);
    background: #FFF;
    box-shadow: 0 0 8px 0 rgb(213 157 0 / 30%);
    position: relative;
}
.brewery-card:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -55px;
    z-index: 1;
    width: 100%;
    height: 55px;
    /* background: #123a59; */
    background: url("assets/border.png") center top/cover no-repeat!important;
}
.brewery-card a:hover {
    transition: 0.3s;
}
.brewery-card img.shop-img {
    width:100%;
    aspect-ratio:1.55/1;
    object-fit:cover;
}
.brewery-card h3 {
    font:600 21px "Zen Old Mincho",serif;
    margin:0px 0 3px;
}
.brewery-card p {
    font:500 15px/1.8 "Zen Old Mincho",serif;
    margin:0;
}
.brewery-card a:hover {
    color: #93741e;
    transition: 0.3s;
}
.gatadao-grid {
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    align-items:center;
    gap:45px;
}
.section-title.left{justify-content:flex-start}
.gatadao-copy p{font:500 13px/1.9 "Zen Old Mincho",serif}
.gatadao-visual img{width:100%;max-height:360px;object-fit:cover;object-position:center 52%;mix-blend-mode:multiply}

.badge-strip {
    position: relative;
    z-index: 2;
    width: 50%;
    /* height: 250px; */
    object-fit: cover;
    object-position: center 55%;
    margin: auto;
    mix-blend-mode: multiply;
}

.cta{min-height:360px;background:url("assets/cta.png") center/cover no-repeat;position:relative;display:grid;place-items:center}
.cta:before{content:"";position:absolute;inset:0;background:rgba(12,45,70,.18)}
.cta-inner{position:relative;z-index:2;width:min(640px,calc(100% - 36px));text-align:center;color:#fff}
.cta-inner>p{font:500 27px "Zen Old Mincho",serif;letter-spacing:.06em;margin:0 0 24px}
.cta-btn{height:62px;margin:12px auto;display:flex;align-items:center;justify-content:center;font:600 17px "Zen Old Mincho",serif}
.cta-btn:before{content:"";width:38px}
.cta-btn span {
    /* margin-left: auto; */
    /* margin-right: 18px; */
    font-size: 18px;
    font-weight: bold;
}
.cta-primary{background:rgba(18,58,89,.94);border:1px solid #fff;color:#fff}
.cta-secondary{background:#fff;color:var(--navy)}

footer{background:var(--cream);padding:25px;text-align:center}
footer nav{display:flex;justify-content:center;gap:13px;font-size:12px;margin-bottom:16px}
footer small{font-size:10px;color:#777}

@media(max-width:1500px){
    .section.paper.breweries::before {
        top: -17px;
    }
}
@media(max-width:1440px){
    .section.paper.breweries::before {
        top: -17px;
    }
}
@media(max-width:1400px){
    .hero {
        width: 100%;
        box-shadow: unset;
    }
}
@media(max-width:1300px){
    .hero {
        margin-top: 70px;
    }
    .mv-main-text {
        max-width: 335px;
        width: 335px;
    }
    .niigata-text {
        max-width: 390px;
        width: 390px;
    }
    .multiply-text {
        margin: 15px 0 15px 159px;
        max-width: 44px;
        width: 39px;
    }
}
@media(max-width:900px){
    .hero {
        min-height: 790px;
        height: auto;
        background: url(assets/hero-sp.png) center top / cover no-repeat;
        width: 100%;
        margin-top: 0;
    }
    .title-main{font-size:54px}
    .title-sub{font-size:37px}
    .steps {
        grid-template-columns:1fr 1fr;
        gap:10px 20px;
    }
    .arrow {
        display:none;
    }
    .brewery-grid {
        gap: 15px;
    }
    .gatadao-grid{grid-template-columns:1fr 1fr}
    /* .badge-strip{height:210px} */
}
@media(max-width:768px){
    .hero {
        min-height: 880px;
    }
    .hero-inner {
        padding-top:247px;
        transform: translateY(10%) translateX(0%);
        padding-left: 0;
    }
    .hero-title::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 550px;
        background: url(assets/blur-back.png) center top / cover no-repeat !important;
        bottom: -160px;
        right: 5px;
    }
    .hero-lead {
        text-align: center;
        margin: 75px 0 8px;
    }
    .hero-copy {
        text-align: center;
    }
    .date {
        margin: auto;
        transform: translateY(-40%);
    }
    .piece-wrap img {
        width: 50%;
    }
}
@media(max-width:640px){
    .hero-title::before {
        right: 0;
    }
    .header{padding:14px 16px}
    .brand{font-size:9px}
    .brand-seal{width:34px;height:34px}
    .hero{
        background-position:61% top;
        min-height: 830px;
    }
    .hero:after{background:linear-gradient(180deg,rgba(252,250,245,.12) 0 35%,rgba(252,250,245,.9) 65%,rgba(252,250,245,.99) 100%)}
    .hero-inner {
        padding-top:271px;
        transform: translateY(10%) translateX(0%);
        padding-left: 0;
        margin: auto;
    }
    .title-main{font-size:42px}
    .title-cross{font-size:28px;margin-left:78px}
    .title-sub{font-size:28px}
    .hero-lead {
        font-size:18px;
        margin: 15px 0 8px;
        text-align: center;
    }
    .hero-copy {
        font-size:14px;
        text-align: center;
    }
    .date {
        width: 100%;
        font-size: 14px;
        height: auto;
        min-height: 63px;
        margin-top: 0;
        margin: auto;
        /* transform: translateY(10px); */
    }
    .section{padding:58px 0}
    .section-title {
        font-size:30px;
        gap:12px;
    }
    /* .section-title span {
        width: 60px;
        height: 2px;
    } */
    .center-copy,.section-desc {
        font-size: 15px;
        line-height: 1.8;
    }
    .mini-breweries {
        grid-template-columns:1fr;
        gap: 15px;
        margin-top: 0;
    }
    .mini-breweries i{display:none}
    .steps{grid-template-columns:1fr}
    .steps article {
        /* display:grid;
        grid-template-columns:105px 1fr;
        text-align:left; */
        align-items:center;
        /* column-gap:15px */
    }
    .step-circle{grid-column:1;grid-row:1/4;width:100px;height:100px;margin:0}
    .steps article>b{grid-column:1;grid-row:1;text-align:center;z-index:2;color:var(--navy);margin-bottom:-28px}
    .steps h3,.steps p{grid-column:2}
    .brewery-grid {
        /* grid-template-columns:1fr; */
        display: flex;
        flex-direction: column;
        gap: 45px;
    }
    .gatadao-grid{grid-template-columns:1fr}
    .section-title.left{justify-content:center}
    .gatadao-copy{text-align:center}
    .gatadao-visual img{max-height:270px}
    /* .badge-strip{height:180px} */
    .cta{min-height:315px}
    .cta-inner>p{font-size:21px}
    .cta-btn{font-size:14px;height:56px}
    .paper.overview {
        padding: 80px 0 85px;
    }
}


/* アカウント登録・使い方｜ここから */
.guide {
    background-size: cover;
    padding-bottom: 68px;
    padding-top: 68px;
    background-color: #e0c77f66;
    border-top: 5px solid #bfa867;
}


    /* min-height: 680px;
    background: url(assets/hero.png) center top / cover no-repeat;
    background-size: contain;
    position: relative;
    width: 70%;
    height: auto;
    margin: auto;
    background-position: right;
    border-radius: 10px;
    margin-top: 50px; */
.guide-title {
    text-align: center;
    padding-top: 62px;
    margin: 0 auto;
}
.guide-title img {
    margin: 0 auto;
}
.guide-panel {
    max-width: 1246px;
    width: 100%;
    border-radius: 20px;
    border: 12px solid #bfa867;
    /* background: rgba(255, 255, 255, 0.89); */
    
    background: url(assets/background-sm.png) center top / cover no-repeat;
    margin: auto;
    position: relative;
    margin-top: 40px;
}
.guide-panel legend {
    text-align: center;
    padding: 8px 30px;
    font-size: 28px;
    background-color: #fff;
    border: 4px solid #bfa867;
    border-radius: 10px;
    font-family:"Zen Old Mincho",serif;
    font-weight: bold;
}
.guide-panel__content {
    padding: 10px 100px 30px;
}
.guide-panel__content a {
    font-family:"Zen Old Mincho",serif;
    font-weight: bold;
}
.app-title img{
    width: 346px;
}
.guide-description {
    font-weight: 500;
    font-family:"Zen Old Mincho",serif;
}
.guide-steps {
    display: flex;
    gap: 28px;
    padding-top:32px;
    justify-content: center;
    flex-wrap: wrap;
}
.step-card {
    background: #fff;
    border-radius: 10px;
    /* border: 1px solid #9a9a9a; */
    position: relative;
    width: 250px;
    font-family:"Zen Old Mincho",serif;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.28);
}
    /* .register-btn {
    background-color: #123a59;
    color: #fff;
    padding: 10px 20px;
    margin-bottom: 30px;
    border-radius: 20px;
    font-weight: bold;
} */
.step-account-btn {
    border: 1px solid #6293b8;
    background: #123a59;
    box-shadow: 0 1px 0 0 #6293b8;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    padding: 12px 15px;
    color: #fff;
    text-decoration: none;
    border-radius: 70px;
    transition: 0.3s;
    display: inline-block;
    margin-bottom: 32px;
    align-self: center;
    
}
.step-account-btn:hover {
    translate: 0.1875rem 0.1875rem;
    box-shadow: 0 0 0 #6293b8;
    background: #123a59;
}
.step-small {
    font-size: 14px;
}
.step-number {
    position: absolute;
    top: 0;
    left: 50%;
    transform:translate(-50%,-50%);
    font-size: 20px;
    font-weight: bold;
    color: #fff;
}
.step-number img {
    width: 82px;
}
.step-title {
    text-align: center;
    background-color: #123a59;
    color: #fff;
    margin: 0;
    padding: 8px 0 10px 0;
    border-radius: 8px 8px 0 0;
}
.step__content {
    height: 237px;
    padding: 16px 10px 0 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
}
.step-text {
    font-weight: 500;
    padding-top: 0;
    margin-top: 0;
    font-size: 15px;
    line-height: 1.6;
}
/* .step-account-btn {
    border: 4px solid #DF2236;
    background: #F63F52;
    box-shadow: 0 4px 0 0 #DF2236;
    font-size: 19px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    padding: 12px 32px;
    color: #fff;
    text-decoration: none;
    border-radius: 70px;
    transition: 0.3s;
    display: inline-block;
    margin-bottom: 32px;
    align-self: center;
    
}
.step-account-btn:hover {
    translate: 0.1875rem 0.1875rem;
    box-shadow: 0 0 0 #DF2236;
    background: #F63F52;
} */
.step-image {
    width: 115px;
    align-self: center;
    margin: auto;
}

@media screen and (max-width: 1300px) {
    .guide-panel {
        background: rgba(255,255,255,0.85);
        width: auto;
        height: 100%;
        margin: 52px;
        border-radius: 30px;
        border: solid 10px #bfa867;
    }
}
@media screen and (max-width: 1120px) {
    .guide-panel {
        background: rgba(255,255,255,0.85);
        width: auto;
        height: 100%;
        margin: 52px;
        border-radius: 30px;
        border: solid 10px #bfa867;
    }
    .panellead {
        position: relative;
        inset: 0;
        transform: translate(0,0);
        max-width: 100%;
    }
    .guide-panel__content {
        padding: 0 50px 100px;
    }
}
@media screen and (max-width: 768px) {
    main {
        overflow-x: hidden;
    }
    .guide-title {
        padding: 16px 20px;
        margin: 0 auto;
    }
    .guide-title img {
        width: 90%;
        max-width: 560px;
        margin: 0 auto;
    }
    .guide-panel {
        width: 100%;
        height: 100%;
        padding: 20px;
        margin: 0 auto;
        border: none;
    }
    .guide-panel {
        background: none;
    }
    .panellead {
        position: relative;
        inset: 0;
        transform: translate(0,0);
        width: 80%;
        max-width: 400px;
        margin: 0 auto;
    }
    .guide-panel__content {
        padding: 0;
        line-height: 1.6;
    }
    .guide-head {
        text-align: center;
    }
    .app-title {
        margin: 0;
        padding-top: 20px;
    }
    .app-title img{
        width: 390px;
        margin: auto;
    }
    .step-card {
        width: 80%;
    }
    .step-image {
        width: 140px;
    }
}
.wallet-text {
    font-family: "Zen Old Mincho",serif;
}
@media screen and (max-width: 430px) {
    .app-title img{
        width: 80%;
        margin: auto;
    }
}
/* アカウント登録・使い方｜ここまで */


.hide-on-pc,
.nft-heart-wrap-tb {
    display: none!important;
}
.hide-on-sp {
    display: block!important;
}


@media screen and (max-width: 768px) {
    .hide-on-pc {
        display: block!important;
    }
    .hide-on-sp {
        display: none!important;   
    }
}


@media screen and (max-width: 768px) {
    .hide-on-pc {
        display: block!important;
    }
    .hide-on-sp {
        display: none!important;
    }
}
.nav-btn a {
    color: #fff;
    text-align: center;
    border-radius: 70px;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: 0.3s;
}
.account-btn {
    border: 3px solid #9b8958;
    background: #574000;
    box-shadow: 0 3px 0 0 #9b8958;
    font-family:"Zen Old Mincho",serif;
    font-size: 19px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    padding: 13px 40px;
    /* opacity: 0; */
}
.account-btn:hover {
    translate: 0.1875rem 0.1875rem!important;
    box-shadow: 0 0 0 #574000;
    background: #9b8958;
}
.x-btn {
    border: 3px solid #9b8958;
    background: #FFF;
    box-shadow: 0 3px 0 0 #574000;
    padding: 14px 45px;
    /* opacity: 0; */
}
@media(max-width:1400px){
    .account-btn,.x-btn {
        padding: 9px 40px;
    }
}
.x-btn:hover {
    translate: 0.1875rem 0.1875rem;
    box-shadow: 0 0 0 #574000;
    background: #FFF;
}
.nav-btn img {
    width: 25px;
    vertical-align: middle;
}


/* ==============================
    CTA SECTION
================================ */

.cta-section {
    position: relative;
    width: 100%;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 85px 20px;
    box-sizing: border-box;

    background: url(assets/cta-back.png) center top / cover no-repeat;
    background-size: cover;
    position: relative;
    width: 100%;
    height: auto;
    margin: auto;
    background-position: right;
}

.cta-section:after {
    position: absolute;
    content: "";
    background: url(assets/white-wave.png) center top / cover no-repeat;
    width: 210px;
    height: 73px;
    right: 15px;
    bottom: 20px;

}
/* ==============================
BUTON AREA
    ================================ */
.cta-area {
    position: relative;
    z-index: 2;
    width: min(100%, 465px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin: auto;
}
/* ==============================
COMMON BUTTON
================================ */
.cta-btn {
    position: relative;
    width: 100%;
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 75px 15px 50px;
    box-sizing: border-box;
    font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
}
/* hover */
.cta-btn:hover {
    transform: translateY(-2px);
}
/* ==============================
NAVY BUTTON
================================ */
.cta-btn--navy {
    color: #fff;
    background: linear-gradient( 135deg, #123d5c 0%, #092d49 100% );
    border: 2px solid #fff;
    clip-path: polygon( 12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px),
            calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px
        );
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.18), 0 15px 30px rgba(9, 45, 73, 0.2);
}
/* subtle 和柄 */
.cta-btn--navy::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.08;
    pointer-events: none;
    background-image: radial-gradient( circle at 0 100%, transparent 10px, rgba(255,255,255,.6) 11px,
            transparent 12px );
    background-size: 25px 25px;
}
/* ==============================
 SAKE ICON
================================ */
    .cta-icon {
        position: absolute;
        left: 32px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        color: #fff;
        font-size: 10px;
    }
    /* ==============================
    TEXT
    ================================ */
    .cta-text {
        position: relative;
        z-index: 2;
        text-align: center;
        transform: translateX(-18px);
    }
    /* ==============================
    CIRCLE ARROW
    ================================ */
    .cta-arrow {
        position: absolute;
        right: 45px;
        top: 50%;
        transform: translateY(-50%);
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid #fff;
        border-radius: 50%;
        box-sizing: border-box;
        transition: background 0.3s ease, transform 0.3s ease;
    }
    .cta-arrow.blue {
        border: 2px solid #123a59;
    }
    .cta-arrow span {
        width: 9px;
        height: 9px;
        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
        transform: translateX(-2px) rotate(45deg);
    }
    .cta-arrow.blue span{
        border-top: 2px solid #123a59;
        border-right: 2px solid #123a59;
    }
    .cta-btn--navy:hover .cta-arrow {
        background: rgba(255,255,255,.12);
        transform: translateY(-50%) translateX(3px);
    }
    /* ==============================
    WHITE BUTTON
    ================================ */

    .cta-btn--white {
        background: url(assets/white-back.png) center top / cover no-repeat;
        background-size: contain;
        position: relative;
        width: 467px;
        /* height: 126px; */
        margin: auto;
        background-position: right;
        font-family: "Zen Old Mincho",serif;
        font-size: 18px;
        font-weight: bold;
        padding: 47px 0;
        letter-spacing: 2px;
        color: #092d49;
    }

    .cta-btn--white span {
        margin-right: 0;
    }

    /* ==============================
    WHITE BUTTON ARROW
    ================================ */

    .cta-arrow-simple {
        position: absolute;
        right: 55px;
        top: 50%;
        width: 10px;
        height: 10px;
        border-top: 1.5px solid #123a59;
        border-right: 1.5px solid #123a59;
        transform: translateY(-50%) rotate(45deg);
        transition: right 0.3s ease;
    }
.cta-btn--white:hover .cta-arrow-simple {
        right: 55px;
}
/* ==============================
JAPANESE CLOUD DECORATION
================================ */
.wa-cloud {
    position: absolute;
    right: 4%;
    bottom: 30px;
    width: 130px;
    height: 60px;
    opacity: 0.75;
    pointer-events: none;
}


.cloud-line {
    position: absolute;
    display: block;
    height: 13px;
    border: 2px solid #d5bd7d;
    border-left: 0;
    border-radius:
        0
        20px
        20px
        0;
    box-sizing: border-box;
}
/* 上 */
.cloud-line--01 {
    width: 90px;
    right: 20px;
    top: 0;
}
/* 中 */

.cloud-line--02 {
    width: 120px;
    right: 0;
    top: 20px;
}
/* 下 */
.cloud-line--03 {
    width: 75px;

    right: 30px;
    top: 40px;
}

/* ==============================
TABLET
================================ */
@media screen and (max-width: 768px) {
    .account-btn {
        color: #fff!important;
        align-items: center !important;
        justify-content: center;
    }
    .x-btn img {
        width: 28px;
        margin: auto;
        display: block;
    }
    .cta-section {
        min-height: 270px;
        padding:
        50px
        30px;
    }
    .cta-area {
        width: min(100%, 500px);
    }
    .cta-btn {
        min-height: 64px;
        font-size: 17px;
    }
    .cta-btn--white {
        width: 82%;
        min-height: 56px;
        font-size: 16px;
    }
    .wa-cloud {
        width: 100px;
        right: 15px;
        bottom: 15px;
        transform: scale(.8);
        transform-origin: right bottom;
    }
}
    /* ==============================
    SMARTPHONE
    ================================ */
    @media screen and (max-width: 480px) {
    .cta-section {
        min-height: 230px;

        padding:
        40px
        18px;
    }
    .cta-area {
        width: 100%;

        gap: 12px;
    }
    .cta-btn {
        min-height: 58px;

        padding:
        12px
        58px
        12px
        38px;

        font-size: 14px;
    }
    .cta-icon {
        left: 18px;

        width: 18px;
        height: 18px;
    }
    .cta-arrow {
        right: 36px;

        width: 34px;
        height: 34px;
    }
    .cta-arrow span {
        width: 7px;
        height: 7px;
    }
    .cta-btn--white {
        width: 88%;
        min-height: 52px;
        padding:
        10px
        45px
        10px
        20px;
        font-size: 14px;
    }
    .cta-arrow-simple {
        right: 20px;
    }
}


footer {
    display: flex;
    width: 100%;
    padding: 14px 0 10px;
    justify-content: center;
    align-items: center;
    background: #092e4a;
    flex-direction: column;
}
.footer-box-list ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 0;
    margin: 0;
}
.official-site-link {
    color: #fff;
    font-family: "Zen Old Mincho",serif;
    margin-top: 30px;
}
.official-site-link p {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 15px;
    width: 100%;
    margin: auto;
    margin-bottom: 10px;
}
.official-site-link p span.line {
    background-color: #fff;
    height: 1px;
    width: 350px;
    margin: 0 20px;
    opacity: 0.6;
}
@media screen and (max-width: 768px) {
    .official-site-link {
        width: 100%;
    }
    .official-site-link p span {
        width: 100%;
    }
}
.footer-box-list ul li {
    list-style-type: none;
    border-left: 1px solid #ffffff8f;
    padding: 0 0 0 25px;
}
.link-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.link-wrap a {
    display: flex;
    gap: 5px;
    font-size: 14px;
    border-right: 1px solid #ffffff8f;
    padding-right: 20px;
}
.link-wrap a:hover {
    opacity: 0.8;
}
.border-none {
    border-right: unset!important;
}
.link-wrap img {
    width: 17px;
    height: 17px;
}
.footer-box-list ul li:first-child {
    border-left: unset;
}
.footer-box-list ul li a {
    text-decoration: none;
    color: #FFF;
    text-align: center;
    font-family: "Zen Old Mincho",serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.footer-box-list p {
    font-family: "Zen Old Mincho",serif;
    margin-bottom: 0;
    margin-top: 20px;
}
.cta-blue-back {
    background: url(assets/blue-back.png) center top / cover no-repeat;
    background-size: contain;
    position: relative;
    width: 467px;
    /* height: 126px; */
    margin: auto;
    background-position: right;
    font-family: "Zen Old Mincho",serif;
    font-size: 18px;
    font-weight: bold;
    padding: 47px 0;
    letter-spacing: 2px;
}

/*--------------------------------------------------------------
>>> hamburger-menu
---------------------------------------------------------------- */
.header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    margin: 0 auto;
    padding: 0 20px;
    opacity: 1;
    transition: all 1s;
}
#nav.open .header__inner,
.nav-lists__wrap.open {
    opacity: 1;
    transition: all 0.6s;
    /* overflow: hidden; */
}
/* navigation */
.nav-lists {
    display: flex;
    /* align-items: center; */
    justify-content: center;
    white-space: nowrap;
    gap: 20px;
}
.nav-lists li {
    font-size: 15px;
    display: block;
    padding: 0;
}
.nav-lists li a{
    justify-content: center;
}
/*--------------------------------------------------------------
>>> hamburger-menu
---------------------------------------------------------------- */
.hamburger-menu__outer {
    display: none;
    position: fixed;
    top: 15px;
    right: 25px;
    z-index: 1000;
    opacity: 1;
}
.hamburger-menu  {
    position: relative;
    border-radius: 6px;
    border: 2px solid #9b8958;
    background: #574000;
    box-shadow: 1px 2px 0 0 #9b8958;
    cursor: pointer;
    width: 55px;
    height: 55px;
    transition: .5s;
}
/*inner*/
.hamburger-menu span {
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 12px;
    height: 4px;
    background: #fff;
    width: 50%;
    border-radius: 5px;
}
.hamburger-menu span:nth-of-type(1) {
    top: 14px; 
}
.hamburger-menu span:nth-of-type(2) {
    top: 24px;
}
.hamburger-menu span:nth-of-type(3) {
    top: 34px;
}
.menu {
    font-size: 10px;
    background: transparent!important;
    color: white;
    bottom: 15px;
    width: 100%!important;
    left: 50%!important;
    transition: .2s;;
    text-align: center;
    transform: translate(-50%, 0);
}
.hamburger-menu.active span:nth-of-type(1) {
    top: 20px;
    left: 13px;
    transform: translateY(6px) rotate(-45deg);
    width: 52%;
}
.hamburger-menu.active span:nth-of-type(2) {
    opacity: 0;
}
.hamburger-menu.active span:nth-of-type(3){
    top: 32px;
    left: 13px;
    transform: translateY(-6px) rotate(45deg);
    width: 52%;
    transition: 0.2s;
}
.mask {
    display: none;
    opacity: 0;
    display: block;
}

.how-number-img {
    width: auto;
    margin: auto;
    transform: translate(0%, 82%);
}

@media screen and (max-width: 1300px) {
    .footer-box-list ul li a {
        font-size: 14px;
    }
}
@media screen and (max-width: 1080px) {
    .footer-box-list ul li {
        padding: 0 0 0 15px;
    }
}
@media screen and (max-width: 980px) {
    .footer-box-list ul {
        gap: 15px;
    }
}
@media screen and (max-width: 900px) {
    .footer-box-list ul li a {
        font-size: 10px;
    }
}
@media screen and (max-width: 880px) {
    .footer-box-list ul li a {
        font-size: 11px;
    }
}
.step-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 8px;
    width: 60%;
    margin: auto;
    background-color: #092e4a;
    padding: 3px 0;
}
.step-left span {
    color: #5473A2;
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 160%;
    display: flex;
    padding: 0 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 56px;
    background: rgba(255, 255, 255, 0.90);
}
.step-right p {
    display: flex!important;
}
.step-right p {
    color: #fff;
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 29px;
    letter-spacing: 1.049px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
}
.inner-img1 {
    width: 17px;
    aspect-ratio: 1/1;
    vertical-align: middle;
}
.inner-img2 {
    width: 26px;
    /* aspect-ratio: 1/1; */
    vertical-align: middle;
    padding: 0 3px;
}
.highlight {
    position: relative;
    display: inline-block;
    color: #7b5400;
    font-weight: 700;
    padding: 0 4px 6px;
    z-index: 1;
}

.highlight::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 2px;
    width: 100%;
    height: 7px;
    background: linear-gradient(90deg, transparent 0%, rgb(125 88 10 / 35%) 8%, rgb(131 91 7 / 70%) 45%, rgba(190, 140, 35, 0.45) 90%, transparent 100%);
    transform: skewX(-8deg);
    z-index: -1;

    /* content: "";
    position: absolute;
    left: -2%;
    bottom: 1px;
    width: 104%;
    height: 9px;
    background: #c79a3b;
    opacity: 0.45;
    clip-path: polygon(
        0 45%,
        6% 20%,
        15% 35%,
        28% 10%,
        42% 30%,
        58% 15%,
        72% 34%,
        88% 18%,
        100% 42%,
        96% 70%,
        80% 58%,
        65% 78%,
        48% 62%,
        30% 82%,
        14% 64%,
        0 76%
    );
    z-index: -1; */
}
@media screen and (max-width: 1500px) {
    .hero-main {
        background-size: cover;
    }
}
@media screen and (max-width: 1440px) {
    .hero-main {
        min-height: auto;
        padding-bottom: 0;
        background-size: cover;
    }
    .hero {
        margin-top: 30px;
    }
    .mv-main-text {
        max-width: 335px;
        width: 335px;
    }
    .multiply-text {
        max-width: 40px;
        width: 40px;
    }
}
@media screen and (max-width: 768px) {
    .hamburger-menu__outer,
    .header__inner {
        display: block;
    }
    header {
        padding: 0 20px;
    }
    .nav-btn.other-btn {
        display: none;
    }
    
    .nav-lists li {
        border-bottom: 1px solid #9b8958;
        position: relative;
    }
    .nav-lists li.hide-on-pc a {
        padding: 0;
        display: flex;
        padding: 10px 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        align-self: stretch;
        color: #574000;
        font-family:"Zen Old Mincho",serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        text-decoration: none;
        margin-top: 10px;
        position: relative;
    }
    .nav-lists li.hide-on-pc a::before {
        content: '';
        position: absolute;
        width: 22px;
        height: 23px;
        background-image: url(../img/right-arrow.png);
        bottom: 9px;
        right: 5px;
        background-size: cover;
    }
    .nav-lists li:first-child {
        border-left: none;
    }
    .nav-lists li:last-child {
        border-bottom: none;
    }
    .header__inner {
        border-bottom: 1px solid #574000;
        border-left: 1px solid #574000;
        background: #FFF;
        box-shadow: 0 1px 0 0 #574000;
        padding: 50px 30px 20px;
        height: 100%;
    }
    .nav-lists {
        flex-direction: column;
        padding-left: 0;
    }
    #nav {
        position:fixed;
        right: 0;
        top: 0%;
        bottom: 0;
        width: 75%;
        transition: all 1s;
        z-index: 0;
        transform: translateX(100%);
    }
    #nav.open {
        top: 0;
        z-index: 999;
        /* transform: translateX(0%); */
        transform: translateX(0%) translateY(0%);
        background-color: #fff;
    }
    .nav-lists__wrap.open {
        top: 0;
    }
    .mask.open {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background: #2f2b2a;
        opacity: .7;
        z-index: 0;
        transition: all 0.6s;
    }
    /* .header {
        background-color: #fff;
    } */
    /* .header__inner nav {
        transform: translateX(100%);
    } */
    .hero-main {
        padding-top: 0;
        padding-bottom: 0;
        min-height: 790px;
    }
    .mv-main-text {
        max-width: 350px;
        width: 300px;
        transform: translate(0%, -8%);
        margin: auto;
        z-index: 1;
        position: relative;
    }
    .niigata-text {
        max-width: 350px;
        width: 350px;
        margin: auto;
        z-index: 1;
        position: relative;
    }
    .multiply-text {
        margin: 15px 0 15px 130px;
        max-width: 28px;
        width: 28px;
        margin: auto;
        margin-top: 8px;
        margin-bottom: 8px;
        z-index: 1;
        position: relative;
    }
    .how {
        background: url(assets/how-back-sp.png) right center / cover no-repeat !important;
        height: auto;
        width: 100%;
        transform: translate(0%,-2%);
    }
    .how-number-img {
        width: auto;
        margin: auto;
        transform: translate(0%, 82%);
    }
    .section.paper.breweries::before {
        top: -29px;
        transform: rotate(0deg);
    }
    .section.paper.breweries::after {
        bottom: -6px;
        top: unset;
    }
    .brewery-card img.shop-img {
        object-fit: cover;
        height: 40%;
        object-position: bottom;
        aspect-ratio: 2 / 1;
    }
    .brewery-card:before {
        bottom: -36px;
    }
    .section.paper.breweries {
        padding: 10px 0 80px;
    }

    .guide-steps {
        padding-top: 0;
    }
    .footer-box-list ul {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
        gap: 0;
        width: 90%;
        margin: auto;
    }
    .footer-box-list ul li {
        border-left: unset;
        width: 100%;
        border-bottom: 1px solid #ffffffa6;
        padding: 15px 0 15px 10px;
        box-sizing: border-box;
    }
    .footer-box-list ul li a {
        font-size: 14px;
    }
    .footer-box-list {
        text-align: left;
        width: 100%;
        margin: auto;
    }
    .inner-img1 {
        width: 15px;
    }
}


.event-description {
    text-align: center;
    color: #0b3557;
    font-family: "Noto Serif JP", serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 2;
    margin-bottom: 36px;
}

.event-highlight {
    position: relative;
    display: inline-block;
    color: #b1842f;
    font-size: 20px;
    font-weight: 700;
    padding: 0 5px 5px;
    z-index: 1;
}

.event-highlight::after {
    content: "";
    position: absolute;
    left: -2%;
    bottom: 2px;
    width: 104%;
    height: 7px;
    background: #c89d43;
    opacity: 0.3;
    clip-path: polygon(
        0 45%,
        8% 20%,
        20% 35%,
        34% 15%,
        48% 30%,
        62% 13%,
        78% 35%,
        90% 18%,
        100% 40%,
        96% 70%,
        82% 58%,
        65% 76%,
        48% 62%,
        30% 80%,
        14% 62%,
        0 75%
    );
    z-index: -1;
}

.event-flow {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
}

.flow-item {
    position: relative;
    min-width: 220px;
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 24px 0 72px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid #c9a24d;
    border-radius: 999px;
    box-sizing: border-box;
}

.flow-number {
    position: absolute;
    left: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        #9a6d1c 0%,
        #d8b35d 45%,
        #b08029 70%,
        #8f641c 100%
    );
    color: #fff;
    font-family: "Noto Serif JP", serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    box-shadow:
        0 3px 8px rgba(117, 82, 25, 0.15),
        inset 0 1px 1px rgba(255, 255, 255, 0.4);
}

.flow-text {
    width: 100%;
    color: #0b3557;
    font-family: "Noto Serif JP", serif;
    font-size: 17px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}
.flow-text span {
    background-color: #835400;
    color: #fff;
    border-radius: 50px;
    padding: 2px 7px;
    font-size: 15px;
}
.flow-arrow {
    flex-shrink: 0;
    color: #c79b3b;
    font-size: 30px;
    font-family: serif;
    font-weight: 300;
    line-height: 1;
}
.benefit-text span {
    position: relative;
    display: inline-block;
    margin: 0 auto;
    color: #a9781d;
    font-family: "Noto Serif JP", serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-align: center;
    padding: 0 10px 8px;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7),
        0 2px 8px rgba(166, 116, 28, 0.12);
}
.benefit-text.blue span {
    /* color: rgb(1 39 79); */
    font-size: 25px;
}
.benefit-text span::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 2px;
    width: 100%;
    height: 7px;
    background: linear-gradient(90deg, transparent 0%, rgb(125 88 10 / 35%) 8%, rgb(131 91 7 / 70%) 45%, rgba(190, 140, 35, 0.45) 90%, transparent 100%);
    transform: skewX(-8deg);
    z-index: -1;
}
.benefit-text span::after {
    content: "";
    position: absolute;
    left: 2%;
    bottom: 0;
    width: 96%;
    height: 10px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(198, 151, 55, 0.2) 8%,
        rgba(198, 151, 55, 0.65) 45%,
        rgba(198, 151, 55, 0.4) 88%,
        transparent 100%
    );
    clip-path: polygon(
        0 45%,
        8% 25%,
        18% 38%,
        30% 14%,
        44% 32%,
        58% 18%,
        72% 34%,
        86% 20%,
        100% 42%,
        96% 74%,
        80% 62%,
        64% 78%,
        48% 64%,
        30% 82%,
        14% 66%,
        0 76%
    );
    z-index: -1;
}
.benefits-txt {
    font-size: 18px;
    text-align: center;
    font-family: "Noto Serif JP", serif;
    line-height: 1.8;
    font-weight: bold;
    color: rgb(1 39 79);
    letter-spacing: 2px;
    margin: 0;
}
.benefits-txt span {
    background-color: #ffd5768a;
    padding: 0 6px;
}
.brewery-card p {
    margin-bottom: 10px;
}
@media screen and (max-width: 767px) {
    .benefit-text span {
        font-size: 25px;
        line-height: 1.5;
        letter-spacing: 0.02em;
    }
    .benefit-text span::after {
        height: 7px;
    }
}
@media screen and (max-width: 1024px) {
    .event-flow {
        max-width: 720px;
        flex-wrap: wrap;
        gap: 16px 10px;
    }
    .flow-item {
        min-width: 280px;
    }
    .flow-arrow {
        font-size: 25px;
    }
}
@media screen and (max-width: 768px) {
    .hero {
        margin-top: 0;
    }
}
@media screen and (max-width: 767px) {
    .event-description {
        font-size: 15px;
        line-height: 1.8;
        margin-bottom: 28px;
        padding: 0 20px;
    }

    .event-highlight {
        font-size: 17px;
    }

    .event-flow {
        width: calc(100% - 40px);
        margin: 0 auto 40px;
        flex-direction: column;
        gap: 10px;
    }

    .flow-item {
        width: 100%;
        min-width: 0;
        height: 58px;
        padding-left: 65px;
        padding-right: 20px;
    }

    .flow-number {
        width: 58px;
        height: 58px;
        font-size: 19px;
    }

    .flow-text {
        font-size: 15px;
    }

    .flow-arrow {
        transform: rotate(90deg);
        font-size: 24px;
        line-height: 1;
    }
    .title-img {
        max-width: 100px;
        width: 100px;
    }
    .badge-strip {
        width: 100%;
    }
    .benefits-txt {
        font-size: 15px;
    }
    .guide-panel legend {
        font-size: 20px;
    }
}
@media screen and (max-width: 450px) {
    .title-img {
        max-width: 80px;
        width: 100px;
    }
    .paper.overview {
        padding: 40px 0 80px;
    }
    .section.paper.breweries::before {
        height: 160px;
    }
    .hero-inner {
        transform: translateY(6%) translateX(0%)
    }
    .hero {
        min-height: 756px;
    }
    .hero-main {
        min-height: 755px;
    }
    .section-title {
        gap: 0;
    }
    .section-title span {
        font-size: 28px;
        text-align: center;
    }
    .how-sub {
        font-size: 16px;
        margin-bottom: 20px;
    }
    .how-img {
        max-width: 180px;
        width: 180px;
    }
    .benefit-text span {
        font-size: 20px;
    }
    .section-title {
        width: 90%;
        margin: auto;
        margin-bottom: 25px;
    }
    .guide {
        padding-top: 35px;
        padding-bottom: 20px;
    }
    .guide-panel legend {
        padding: 10px 10px;
    }
    .step-text {
        font-size: 14px;
        margin-bottom: 0;
    }
    .cta-blue-back {
        width: 100%;
        padding-right: 40px;
        padding-bottom: 0;
        padding-top: 0;
    }
    .cta-inner>p {
        font-size: 16px;
    }
    .cta-btn span {
        font-size: 15px;
    }
    .cta-inner {
        width: 100%;
    }
    .guide-panel {
        padding: 0;
    }
    .piece-wrap {
        flex-direction: column;
    }
    .piece-wrap img {
        margin: auto;
        width: 100%;
    }
    .piece-wrap img.left {
        margin-right: unset;
    }
    .piece-wrap img.right {
        margin-left: unset;
    }
}
@media screen and (max-width: 400px) {
    .date {
        transform: translateY(-43px);
    }
}
@media screen and (max-width: 390px) {
    .mv-main-text {
        max-width: 275px;
        width: 275px;
    }
    .niigata-text {
        max-width: 330px;
        width: 320px;
        transform: unset;
    }
    .hero-inner {
        transform: translateY(-10%) translateX(0%);
    }
    .date {
        width: 100%;
        height: 60px;
    }
    .hero {
        min-height: 675px;
    }
    .hero-main {
        min-height: 675px;
    }
    .section-title span {
        font-size: 23px;
    }
    .cta-blue-back {
        padding: unset;
        padding-right: 50px;
    }
    .cta-btn {
        min-height: unset;
    }
    .cta-btn--white {
        width: 100%;
    }
    .cta-btn span {
        font-size: 14px;
    }
    .cta-arrow {
        right: 30px;
    }
}
.start-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Zen Old Mincho", serif;
    width: 90%;
    margin: auto;
    padding: 15px 0 15px;
    background: url(assets/present-back.png) center top / cover no-repeat;
}
.start-wrap p.center-text {
    margin: 0;
    font-size: 25px;
    font-weight: bold;
}
.start-wrap p.center-text span {
    color: #af8500;
}
.start-wrap p {
    margin: 0;
}
.start-center-wrap {
    padding: 0 30px 0 20px;
    font-size: 15px;
    font-weight: 600;
    color: #123a59;
}
.start-wrap img {
    width: 20%;
}
.start-wrap a {
    font-family: "Zen Old Mincho", serif;
    font-weight: bold;
    color: #fff;
    padding: 10px 32px;
    background-color: #123a59;
    border-radius: 25px;
    transition: 0.3s;
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
}
.start-wrap a img {
    width: 20px;
    height: 20px;
}
.start-wrap a:hover {
    opacity: 0.8;
}
.start-p-small {
    font-size: 14px;
    margin-top: 5px!important;
    font-weight: 600;
}
@media screen and (max-width: 1200px) {
    .start-wrap {
        width: 100%;
    }
}
@media screen and (max-width: 990px) {
    .start-wrap {
        background: url(assets/present-back-sp.png) center top / cover no-repeat;
        background-size: contain;
        height: 400px;
        width: 67%;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 20px;
    }
    .start-wrap p.center-text {
        font-size: 20px;
    }
    .start-wrap a {
        font-size: 14px;
        padding: 10px 20px;
    }
    .start-center-wrap {
        padding: 0 10px 0 10px;
    }
    .start-wrap img {
        width: 50%
    }
}
@media screen and (max-width: 550px) {
    .start-wrap {
        width: 75%;
    }
}
@media screen and (max-width: 510px) {
    .start-wrap {
        width: 85%;
    }
}
@media screen and (max-width: 490px) {
    .start-wrap {
        width: 95%;
        justify-content: flex-start;
        margin-bottom: 10px;
        border-radius: 20px;
    }
    .date .date-within {
        transform: translateY(0) translateX(-1%);
    }
    .small-text-sp {
        margin-bottom: 30px;
    }
}