/* --------------- reset.css --------------- */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap");
html, body, main, header, h1, ul, li, p, div, span, img, a {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    font-size: 16px;
    color: #111;
        overflow-x: hidden;
}

header, footer {
    display: block;
}

* {
    margin: 0;
    padding: 0;
    font-family: "avenir-next-lt-pro", sans-serif;
    font-weight: 700;
    font-style: normal;
}

body {
    line-height: 1;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    font-family: "Noto Sans JP", sans-serif;
    margin: 0 auto;
    position: relative;
    width: 100%;
}

ul {
    list-style: none;
    list-style-type: none;
}

a {
    color: #111;
    display: block;
    text-decoration: none;
}
p {
    font-size: 1rem;
    line-height: 1.6;
}

img {
    width: 100%;
    pointer-events: none;
    vertical-align:top;
}

main {
    display: block;
}

/* --------------- //reset.css --------------- */
/* --------------- style.css --------------- */
.sp_br {
    display: block;
}
.kv_area {
    position: relative;
}
.kv_imgs {
    display: grid;
    width: 100%;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
}
.kv_imgs > img {
    grid-area: 1 / 1;
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    object-fit: cover;
}
.kv_sp_fade > .kv_1 {
    animation: kv-focus 10s ease-in-out infinite,
        kv-zoom-out 10s linear -1.25s infinite both;
}
.kv_sp_fade > .kv_2 {
    opacity: 0;
    animation: kv-fade 10s ease-in-out infinite,
        kv-zoom-out 10s linear 3.75s infinite both;
}
@keyframes kv-fade {
    0%, 37.5%, 100% {
        opacity: 0;
        filter: blur(6px);
    }
    50%, 87.5% {
        opacity: 1;
        filter: blur(0);
    }
}
@keyframes kv-focus {
    0%, 50%, 100% {
        filter: blur(0);
    }
    87.5% {
        filter: blur(6px);
    }
}
@keyframes kv-zoom-out {
    0% {
        transform: scale(1.12);
    }
    62.5% {
        transform: scale(1);
    }
    62.5001%, 100% {
        transform: scale(1.12);
    }
}
.kv_area h1 {
    position: absolute;
    top: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    text-shadow: 0 2px 8px rgb(255 255 255 / 20%);
}
.kv_area h1 span {
color: orangered;
    line-height: 1.6;
    font-size: 1rem;
    font-weight: 700;
    text-wrap: nowrap;
}
.kv_area h1 span.kv_heading {
    font-size: 1.25rem;
}
.kv_area h1 span.kv_title {
    font-size: 1.75rem;
}

.scrolldown {
    position: absolute;
    bottom: 32px;
    left: 50%;
    width: 80px;
    transform: translateX(-50%);
color: orangered;
    pointer-events: none;
    text-shadow: 0 2px 8px rgb(255 255 255 / 20%);
}
.scrolldown svg {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    fill: currentColor;
    transform-box: border-box;
    transform-origin: 50% 50%;
    animation: scroll-rotate 20s linear infinite;
}
.scrolldown text {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
@keyframes scroll-rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.kv_area .top_links {
    position: absolute;
    bottom: 7.5rem;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.kv_area .top_links a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: .625rem;
    padding: .625rem;
    background-image: linear-gradient(90deg, #11111140, transparent);
}
.kv_area .top_links a:hover {
    background-image: linear-gradient(90deg, #11111180, transparent);
}
.kv_area .top_links a .ndls_mini_look,
.kv_area .top_links a .subu_mini_look {
    display: block;
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    overflow: hidden;
}
.kv_area .top_links a .ndls_mini_look img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.kv_area .top_links a .collaboration_txt {
    color: #fff;
    font-size: 0.75rem;
    line-height: 1.4;
}

main {
    padding-top: 100px;
}
.look_container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
}
.look_container .collabo_txt {
    position: absolute;
    top: 1.75rem;
    left: 0;
    z-index: 100;
    mix-blend-mode: multiply;
    line-height: 1;
}
.look_container .collabo_txt.kyne {
    top: -4px;
    left: 0;
    color: #906FAC;
    font-size: 3.5rem;
}
.look_container .collabo_txt.w_c_l {
    top: -4px;
    left: 4px;
    color: #9E869C;
    font-size: 2.5rem;
    text-wrap: nowrap;
}
.look_container .collabo_txt.w_c_l .wavy {
    font-size: 4rem;
}
.look_container .collabo_txt.w_c_l .c_lim {
    display: block;
    font-size: 2.5rem;
    transform: rotate(90deg) translate(100px, 100px);
}
.look_container .collabo_txt.souhan {
    position: absolute;
    top: 4px;
    left: -2px;
}
.look_container .collabo_txt.souhan .souhan_txt{
    transform-origin: top left;
    transform: rotate(90deg) translateY(-100%);
    display: block;
    width: max-content;
    color: #455D2F;
    font-size: 3.25rem;
    text-wrap: nowrap;
}

@media (min-width: 768px) {
    .look_container .collabo_txt.kyne {
        font-size: 5rem;
}
.look_container .collabo_txt.w_c_l .wavy {
    font-size: 5rem;
}
.look_container .collabo_txt.w_c_l .c_lim {
    font-size: 3.5rem;
    transform: rotate(90deg) translate(140px, 140px);
}
.look_container .collabo_txt.souhan .souhan_txt {
        font-size: 5rem;
}
}


.look_container.look14_container {
    gap: 2.5rem;
}
.look_list_container {
    margin: 0 auto;
    padding: 0 20px;
    max-width: 600px;
}
.look_list_container li {
    margin: 0 auto;
    padding-bottom: 80px;
}
.look_list_container li.closer {
    padding-bottom: 40px;
}
.look_container .look_num {
    position: absolute;
    top: -1rem;
    left: 0;
    display: block;
    color: #111;
    font-size: .625rem;
    font-weight: 400;
}
.look_box {
        position: relative;
}
/* ---------- portrait-1 ---------- */
.look_box.portrait-1 {
    width: 90%;
    max-width: 534px;
    height: auto;
}
.look_box.portrait-1.look01_01_box {
    margin-right: auto;
}
.look_box.portrait-1.look02_01_box {
    margin-right: auto;
}
.look_box.portrait-1.look02_02_box {
    margin-left: auto;
}
.look_box.portrait-1.look08_01_box {
    margin-left: auto;
}
.look_box.portrait-1.look09_01_box {
    margin: 0 auto;
}
@media (min-width:768px) {
.look_box.portrait-1.look02_01_box {
    margin: 0 auto;
}
.look_box.portrait-1.look02_02_box {
    margin: 20rem auto 0;
}
}
/* ---------- //portrait-1 ---------- */

/* ---------- portrait-2 ---------- */
.look_box.portrait-2 {
    width: 90%;
    max-width: 560px;
    height: auto;
}
.look_box.portrait-2.look11_01_box {
    margin-right: auto;
}
.look_box.portrait-2.look14_01_box {
    margin-right: auto;
}
.look_box.portrait-2.look14_02_box {
    margin-left: auto;
}
@media (min-width:768px) {
    .look_box.portrait-2.look14_02_box {
        margin-top: 10rem;
    }
}
/* ---------- //portrait-2 ---------- */

/* ---------- portrait-small ---------- */
.look_box.portrait-small {
    width: 80%;
    max-width: 400px;
    height: auto;
}
.look_box.portrait-small.look10_01_box {
    z-index: 100;
}
/* ---------- //portrait-small ---------- */

/* ---------- portrait-large ---------- */
.look_box.portrait-large {
    width: 90%;
    max-width: 640px;
    height: auto;
}
.look_box.portrait-large.look10_02_box {
    margin-left: auto;
}
.look_box.portrait-large.look12_02_box {
    margin-left: auto;
}
.look_box.portrait-large.look13_01_box {
    margin-right: auto;
}
@media (min-width:768px) {
.look_box.portrait-large.look12_02_box {
    margin-top: -12.5rem;
}
.look_box.portrait-large.look10_02_box {
    margin-top: -17.5rem;
}
}
/* ---------- //portrait-small ---------- */

/* ---------- landscape-1 ---------- */
.look_box.landscape-1 {
    width: 100%;
    max-width: 900px;
    height: auto;
}
.look_box.landscape-1.look03_01_box {
    margin-right: auto;
}
.look_box.landscape-1.look04_01_box {
    margin: 0 auto;
}
.look_box.landscape-1.look05_01_box {
    margin-left: auto;
}
.look_box.landscape-1.look06_01_box {
    margin-right: auto;
}
.look_box.landscape-1.look06_02_box {
    margin-left: auto;
}
@media (min-width:768px) {
    .look_box.landscape-1.look06_02_box {
    margin-top: -7.5rem;
}
}
/* ---------- //landscape-1 ---------- */

/* ---------- landscape-2 ---------- */
.look_box.landscape-2 {
    width: 90%;
    max-width: 720px;
    height: auto;
}
.look_box.landscape-2.look12_01_box {
    margin-right: auto;
        z-index: 100;
}
/* ---------- //landscape-2 ---------- */

/* ---------- landscape-small ---------- */
.look_box.landscape-small {
    width: 90%;
    max-width: 600px;
    height: auto;
}
.look_box.landscape-small.look07_01_box {
    margin-right: auto;
}
.look_box.landscape-small.look11_02_box {
    margin-left: auto;
}
@media (min-width:768px) {
.look_box.landscape-small.look11_02_box {
    margin-top: -7.5rem;
}
}
/* ---------- //landscape-small ---------- */
/* ---------- landscape-large ---------- */
.look_box.landscape-large {
    width: 100%;
    max-width: 1000px;
    height: auto;
}
.look_box.landscape-large.look01_02_box {
    margin: 0 auto;
}
/* ---------- //landscape-large ---------- */


.price_txt {
    font-size: 0.75rem;
    font-weight: 500;
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}
.price_txt span {
    font-weight: 500;
}
.price_txt a {
    font-size: .75rem;
    font-weight: 500;
    display: inline-block;
    border: solid .75px #111;
    border-radius: 20px;
    line-height: 1;
    padding: .125rem .5rem;
    margin-top: .25rem;
}
.price_txt a:hover {
    color: #fff;
    background-color: #111;
}

.photo_by p {
    text-align: center;
    font-size: .75rem;
    color: #111;
    margin-bottom: 1.75rem;
}

footer {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 0 auto;
    padding: 40px 0;
    border-top: solid .75px #111;
}
footer .ext_links {
    font-size: 0.75rem;
}
footer .ext_links:hover {
    color: #fff;
    background-color: #111;
}


@media (min-width: 768px) {
    .scrolldown {
        width: 100px;
    }
    .sp_br {
    display: none;
}
    .kv_imgs {
        display: flex;
        height: 100vh;
    }
    .kv_imgs > img {
        width: 50%;
        height: 100%;
        object-fit: cover;
    }
    .kv_sp_fade > .kv_1,
    .kv_sp_fade > .kv_2 {
        animation: none;
        filter: none;
    }
    .kv_sp_fade > .kv_2 {
        opacity: 1;
    }
    .kv_area {
        position: relative;
    }
    .kv_area h1 {
    top: 5rem;
}
    .kv_area h1 span.kv_heading,
    .kv_area h1 span.kv_title {
        font-size: 2rem;
    }
    .kv_area h1 span.kv_subtitle {
        font-size: 1.25rem;
    }
    .kv_area .top_links a .collaboration_txt {
    font-size: 1rem;
}
.kv_area .top_links a {
    gap: .75rem;
    padding: .75rem;
}

main {
    padding-top: 200px;
}
main .main_bg {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: url('../images/main_bg.jpg') no-repeat center / cover;
    opacity: .1;
    z-index: -1;
}
.look_list_container {
    padding: 0 40px;
}
.look_container {
    gap: 2.5rem;
}
.look_container.look02_container {
    flex-direction: row;
    }
.look_container.look14_container {
    flex-direction: row;
}
    .price_txt {
        margin-top: 10px;
        font-size: 0.875rem;
    }
    .look_list_container {
    max-width: 1200px;
}
.look_list_container li {
    padding-bottom: 160px;
}
.look_list_container li.closer {
    padding-bottom: 80px;
}

.photo_by p {
    font-size: .875rem;
    margin-bottom: 2.5rem;
}

    footer {
        gap: 16px;
        padding: 80px 0;
    }
    footer .ext_links {
        font-size: 0.875rem;
    }
}
/* --------------- //style.css --------------- */
/* --------------- inview.js --------------- */
.fadeIn {
    opacity: 0;
    transition: 1s;
  }
  .fadeIn.is-show {
    opacity: 1;
  }
.look_container .collabo_txt.fadeIn {
    transform: translateX(-8px);
    transition: opacity 1s ease 0.3s, transform 1s ease 0.3s;
}
.look_container .collabo_txt.fadeIn.is-show {
    transform: translateX(0);
}
/* --------------- //inview.js --------------- */