main > header {
    top:0;
    padding-top:64px;
    height:100dvh;
    max-height:1000px;
}

#fader {
    min-width:100%;
    min-height:100%;
}

.mv-copy {
    position:absolute;
    right:5vw;
    bottom:0;
    width:380px;
    height:100%;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
}
.mv-copy h1 {
    margin:120px 0 20px 0;
    height:60%;
    display:flex;
    align-items: center;
    justify-content: center;
}
.mv-copy h1 img {
    width:auto;
    height:100%;
    max-height:400px;
}
.mv-copy ul {
    max-width:100%;
    gap:15px;
    margin-bottom:3vw;
}

.mv-message {
    background:var(--color-white);
}
.mv-message > div {
    max-width:600px;
    margin-inline:auto;
    padding-inline:var(--padding);
}
.mv-message img {
    position:absolute;
    width:500px;
    top:-40px;
    left:20px;
    opacity:0;
    animation:mv-fade 2s ease 1s forwards;
}
@keyframes mv-fade {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
.mv-message p {
    writing-mode: vertical-rl;
    line-height:2;
    font-size:1.4em;
    margin-left:auto;
    margin-right:0;
    margin-top:40px;
    white-space: nowrap;
    height:fit-content;
}

#sec-1 {
    background-color:rgb(235 129 171 / 0.1);
}
#sec-1 .bg-1 {
    left: 60px;
    top: 20px;
}
#sec-1 .bg-2 {
    right: 60px;
    top: 80px;
}
#sec-1 h1 {
    width:30%;
    min-width:280px;
    margin:0 auto;
    font-size:1.3em;
    text-align:center;
}
#sec-1 h1 img {
    margin:20px;
    width:60%;
}
#sec-1 .wrap.flex {
    margin-top:-60px !important;
    gap:20px;
    margin:0;
}
#sec-1 .wrap li {
    background:var(--color-white);
    border-radius:20px;
    box-shadow:0 0 10px 3px rgb(235 129 171 / 0.3);
    padding:calc(var(--padding) * 0.8);
    width:calc((100% - 40px) / 3);
}
#sec-1 .wrap li:nth-of-type(2) ,
#sec-1 .wrap li:nth-of-type(5) {
    top:160px;
}
#sec-1 .wrap li h2 {
    text-align:center;
    font-size:1.2em;
    color:var(--color-enji);
    display:flex;
	align-items: center;
	justify-content: center;
    min-height:3em;
}
#sec-1 .wrap li img {
    margin-top:10px;
}
#sec-1 .wrap li p {
    margin-top:10px;
    min-height:5em;
}

#sec-1 .scroll-mark {
    display:none;
}

#sec-2 {
    padding:0;
}
#sec-2 .photo-column h1 + p {
    margin-top:50px;
    margin-inline:auto;
    width:80%;
}
#sec-2 .slick {
    margin-top:0;
}
#sec-2 .slick li {
    width:26vw;
    margin-inline:1px;
}


#sec-3 {
    padding-bottom:0;
}
#sec-3 .lead {
    font-size:1.3em;
    font-family: "A1 Mincho", serif;
    padding-bottom:60px;
}

#sec-3 article {
    padding-top:var(--section-space);
    padding-bottom:var(--section-space);
}
#sec-3 article:nth-of-type(1) {
    background:var(--color-white);
    border-top-right-radius: 10vw;
    margin-top:calc(10vw * -1);
}
#sec-3 article:nth-of-type(2) {
    background:#faf1f6;
    border-top-left-radius: 10vw;
}
#sec-3 article .image figure {
    border-radius:10px;
    margin-top:0;
}
#sec-3 article .image > img {
    position:absolute;
    top:-40px;
    left:-40px;
    width:120px;
    z-index: 2;
}
#sec-3 article .name {
    min-width:fit-content;
}
#sec-3 article .name h1 {
    color:var(--color-red);
    font-size:5em;
    display:flex;
    gap:10px;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    flex:1;
}
#sec-3 article .name h1 div {
    margin-top:-0.4em;
}
#sec-3 article .name h1 small {
    color:#703477;
    font-size:0.3em;
    font-family: "Noto Serif JP", serif;
    display:flex;
    flex-direction: column;
    gap:2px;
    text-align:center;
    letter-spacing: -1px;
}
#sec-3 article .name h1 small span {
    background:#efd0e4;
}
#sec-3 article .name h1 ruby {
    display: flex;
    gap:10px;
    align-items: center;
}
#sec-3 article .name h1 rb {
    font-size:0.3em;
    margin-top:1em;
}
#sec-3 article .name > img {
    position:absolute;
    right:-100px;
    top:-20px;
}
#sec-3 article .name .price {
    margin-top:0;
    display: flex;
    justify-content: flex-start;
}
#sec-3 article .name .price small {
    font-size:1.4em;
    margin:0;
    margin-right:16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 1;
    gap:4px;
}
#sec-3 article .name .price small span {
    background:var(--color-dark-gray);
    color:var(--color-white);
    text-align:center;
    border-radius:6px;
    padding:4px;
    width:100%;
    font-size:0.9em;
}
#sec-3 article .name .price strong {
    font-size:5em;
    line-height: 1;
    margin:0;
}
#sec-3 article .name .price em {
    font-size:3.2em;
    line-height: 1;
    font-style:normal;
    margin:0;
    margin-top:0.5em;
}
#sec-3 article .name .price em span {
    font-size:0.35em;
    line-height: 1;
    margin:0;
    position:absolute;
    width:100%;
    top:-0.8em;
    left:1em;
}
#sec-3 article .name .price + p span {
    border:solid 1px var(--color-black);
    padding:2px 5px;
    margin-bottom:4px;
    display:inline-block;
    width:fit-content;
}
#sec-3 article h2 {
    color:var(--color-enji);
    font-size:1.2em;
    border:solid 1px var(--color-enji);
    padding:2px 14px;
    border-bottom-right-radius: 14px;
    width:fit-content;
}
#sec-3 article ol {
    counter-reset:kuyou;
    background:url(../_img/line_dot.svg) left top 15px / 6px repeat-x;
}
#sec-3 article:nth-of-type(1) ol li:last-of-type {
    background:var(--color-white);
}
#sec-3 article:nth-of-type(2) ol li:last-of-type {
    background:#faf1f6;
}
#sec-3 article ol li::before {
    counter-increment:kuyou;
    content:counter(kuyou);
    width:26px;
    height:26px;
    font-size:1.4em;
    display:flex;
    align-items: center;
    justify-content: center;
	border-radius:100%;
	background:var(--color-red);
    color:var(--color-white);
    position:absolute;
    top:4px;
    left:0;
}
#sec-3 article ol li > div {
    margin-top:0;
}
#sec-3 article ol li h3 {
    color:var(--color-enji);
    font-size:1.6em;
    margin-left:26px;
    width:fit-content;
    margin-top:0;
    padding-left:5px;
    padding-right:15px;
    background:var(--color-white);
}
#sec-3 article:nth-of-type(2) ol li h3 {
    background:#faf1f6;
}
#sec-3 article ol li p {
    font-size:1.2em;
    font-weight:600;
    margin-top:10px;
    line-height:1.2;
}

#sec-3 article ol li p small {
    display:block;
    margin-top:10px;
}


#sec-4 h1 {
    font-size:1.4em;
    width:fit-content;
    padding:5px 40px;
    background:#c657a3;
    color:var(--color-white);
    margin:0 auto;
    line-height:1.1;
}
#sec-4 p {
    font-weight:bold;
    margin-top:30px;
}
#sec-4 li {
    text-align:center;
    font-size:1.1em;
    font-weight:bold;
    line-height:1.2;
}
#sec-4 li figure {
    padding:3px;
    margin-bottom:10px;
}
#sec-4 li small {
    display:block;
    font-weight:normal;
    margin:0;
}

#sec-4 .scroll-mark {
    display:none;
}


#sec-5 {
    background:#ecf7e1;
    padding:0;
}
#sec-5 h1 {
    color:var(--color-green);
    font-size:2em;
}
#sec-5 h1 span {
    display:block;
    color:var(--color-black);
    font-size:0.6em;
}
#sec-5 .photo-column > div > div {
    width:100%;
}


#sec-6 .bg-1 {
    left: 60px;
    top: 200px;
}
#sec-6 .bg-2 {
    right: 60px;
    top:100px;
}
#sec-6 h1 {
    font-size:1.6em;
    text-align:center;
}
#sec-6 .grid {
    margin-top:40px;
    gap:var(--gap) calc(var(--gap) * 2);
}
#sec-6 .grid button {
    background:none;
    border:none;
    color:var(--color-enji);
    text-align:left;
}
#sec-6 .grid li figure {
    border:solid 1px #4e8fc2;
    margin-bottom:5px;
}

@media (max-width : 1150px) {
    #sec-3 article .image > img {
        top:-20px;
        left:-10px;
    }
}
@media (max-width : 1020px) {
    #sec-1 .flex ul li {
        padding:calc(var(--padding) / 2);
    }
}
@media (max-width : 920px) {
    #sec-1 .wrap.flex {
        margin-top:20px !important;
    }
    #sec-1 .wrap li {
        width:calc((100% - 20px) / 2);
    }
    #sec-1 .wrap li:nth-of-type(2) ,
    #sec-1 .wrap li:nth-of-type(5) {
        top:0;
    }
}
@media (max-width : 720px) {
    #fader li {
        background-position-x: center !important;
    }

    .mv-copy h1 {
        justify-content: flex-end;
        margin-right:20px;
    }
    .mv-copy ul {
        margin-bottom:5vw;
    }

    #sec-3 article > div > .flex {
        flex-direction: column;
    }
    #sec-3 article ol {
        background:url(../_img/line_dot_2.svg) left 10px top / auto 6px repeat-y;
    }
    #sec-3 article ol li::before {
        top:0;
    }
    #sec-3 article ol li p {
        margin-left:34px;
    }
    #sec-3 article ol li img {
        margin-left:34px;
    }
}
@media (max-width : 520px) {
    main > header ,
    #fader {
        height:calc(100dvh - 70px);
        min-height:auto;
        aspect-ratio:auto;
    }

    .mv-message img {
        width:400px;
        left:50%;
        translate: -50% 0;
    }
    .mv-message p {
        margin-left:auto;
        margin-right:auto;
     }

    #sec-1 .wrap.flex {
        flex-direction:row;
        flex-wrap: nowrap;
        gap:0;
        width:calc((300px * 8) + (20px * 8));
    }
    #sec-1 .wrap.flex li {
        width:300px;
        margin:10px;
    }
    #sec-1 .wrap.flex li h2 {
        font-size:1.4em;
    }

    #sec-1 .tomb-list {
        overflow-x:scroll;
        overflow-y:hidden;
        margin-inline:-30px;
    }

    #sec-1 .scroll-mark {
        display:block;
        position:absolute;
        top:100px;
        left:calc(50% - 100px);
        width:200px;
        text-align:center;
        background:var(--color-dark-glass);
        border-radius:var(--radius);
        padding:var(--padding);
        color:var(--color-white);
        place-items: center;
        z-index:3;
    }
    #sec-1 .scroll-mark i {
        font-size:4em;
        animation:scroll-mark-arrow 0.6s linear infinite alternate;
        position:relative;
    }
    #sec-1 .scroll-mark small {
        margin:0;
        display:block;
    }

    #sec-2 .photo-column h1 img {
        width:50px;
    }
    #sec-2 .photo-column h1 + p {
        width:100%;
    }

    #sec-2 .slick li {
        width:40vw;
    }

    #sec-3 .lead {
        font-size:1.5em;
    }
    #sec-3 article .image > img {
        width:100px;
        left:-20px;
        top:-40px;
    }
    #sec-3 article .name .price {
        font-size:1.1em;
    }
    #sec-3 article .name .price em {
        font-size:2.4em;
        padding-top:0.4em;
    }

    #sec-4 .tomb-list {
        overflow-x:scroll;
        overflow-y:hidden;
    }
    #sec-4 ul {
        gap:20px 10px;
        grid-template-columns: repeat(9, 1fr);
    }
    #sec-4 ul li {
        min-width:160px;
    }

    #sec-4 .scroll-mark {
        display:block;
        position:absolute;
        top:50px;
        left:calc(50% - 100px);
        width:200px;
        text-align:center;
        background:var(--color-dark-glass);
        border-radius:var(--radius);
        padding:var(--padding);
        color:var(--color-white);
        place-items: center;
        z-index:3;
    }
    #sec-4 .scroll-mark i {
        font-size:4em;
        animation:scroll-mark-arrow 0.6s linear infinite alternate;
        position:relative;
    }
    #sec-4 .scroll-mark small {
        margin:0;
        display:block;
    }

    @keyframes scroll-mark-arrow {
        0% {
            left:20px;
        }
        100% {
            left:-20px;
        }
    }
}