@charset "UTF-8";

.fv {
    position: relative;
    background-color: var(--color-secondary);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
    overflow: hidden;
}

.fv__main {
    width: 100%;
    max-width: calc(var(--base-size) * 375);
    margin: 0 auto;
}
.fv__main-img {
    display: block;
    width: 100%;
    height: auto;
}

.fv__sdgs-icon {
    display: none;
}

@media (min-width: 768px)
{
    .fv {
        background-image: url("../img/home/fv-bg.jpg");
    }

    .fv__main {
        width: calc(var(--base-size) * 1000);
        max-width: 100%;
    }
    .fv__main-img {
        width: calc(var(--base-size) * 1300);
        max-width: none;
        margin-right: calc(var(--base-size) * -300);
    }

    .fv__sdgs-icon {
        display: block;
        position: absolute;
        top: calc(var(--base-size) * 32);
        left: calc(var(--base-size) * 50);
        width: calc(var(--base-size) * 168);
    }
    .fv__sdgs-icon-img {
        display: block;
        width: 100%;
        height: auto;
    }
}

@media (min-width: 768px) and (min-resolution: 2dppx)
{
    .fv {
        background-image: url("../img/home/fv-bg_2x.jpg");
    }
}





/* メニュー ～ クロスメイクとは */

.about__nav {
    display: grid;
    align-items: stretch;
    grid-template-columns: 1fr;
    gap: calc(var(--base-size) * 36);
}

.about__nav-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: calc(var(--base-size) * 36);
    width: 100%;
    height: 100%;
    padding: calc(var(--base-size) * 28) calc(var(--base-size) * 30);
    border: max(calc(var(--base-size) * 2), 2px) solid #000;
    border-radius: calc(var(--base-size) * 12);
    box-shadow: calc(var(--base-size) * 3) calc(var(--base-size) * 3) calc(var(--base-size) * 6) 0 rgba(0, 0, 0, 0.25);
    background-color: #fff;
    color: var(--color-primary);
}
.about__nav-link--accent {
    color: var(--color-accent);
}
.about__nav-link::before,
.about__nav-link::after {
    content: "";
    display: block;
    width: calc(var(--base-size) * 26);
    height: calc(var(--base-size) * 26);
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    pointer-events: none;
}
.about__nav-link::before {
    top: calc(var(--base-size) * -12);
    right: calc(var(--base-size) * 28);
}
.about__nav-link::after {
    bottom: calc(var(--base-size) * -12);
    left: calc(var(--base-size) * 28);
}
.about__nav-link-icon {
    width: calc(var(--base-size) * 100);
}
.about__nav-link-icon-img {
    display: block;
    width: 100%;
    height: auto;
}
.about__nav-link-text {
    position: relative;
    padding-bottom: calc(var(--base-size) * 20);
    min-width: calc(var(--base-size) * 112);
    font-size: calc(var(--base-size) * 18);
    font-weight: 500;
    text-align: center;
}
.about__nav-link-text::after {
    content: "";
    display: block;
    width: calc(var(--base-size) * 100);
    height: calc(var(--base-size) * 10);
    background: url("../img/home/about-nav-arrow.svg") no-repeat center center / contain;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
}

.about-clothmake {
    margin-top: calc(var(--base-size) * 120);
}
.about-clothmake__video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-top: calc(var(--base-size) * 40);
}
.about-clothmake__video iframe,
.about-clothmake__video video {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    border: none;
}

.about-clothmake__text {
    margin-top: calc(var(--base-size) * 40);
    font-size: calc(var(--base-size) * 15);
}

.about-clothmake__nav {
    margin-top: calc(var(--base-size) * 40);
}

@media (min-width: 768px)
{
    .about__nav {
        grid-template-columns: repeat(3, 1fr);
        gap: calc(var(--base-size) * 60);
    }
    .about__nav-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: stretch;
        gap: calc(var(--base-size) * 30);
        padding: calc(var(--base-size) * 40);
        border: max(calc(var(--base-size) * 2), 2px) solid #000;
        border-radius: calc(var(--base-size) * 12);
        box-shadow: calc(var(--base-size) * 3) calc(var(--base-size) * 3) calc(var(--base-size) * 6) 0 rgba(0, 0, 0, 0.25);
    }
    .about__nav-link::before,
    .about__nav-link::after {
        width: calc(var(--base-size) * 34);
        height: calc(var(--base-size) * 34);
    }
    .about__nav-link::before {
        top: calc(var(--base-size) * -17);
        right: calc(var(--base-size) * 20);
    }
    .about__nav-link::after {
        bottom: calc(var(--base-size) * -17);
        left: calc(var(--base-size) * 20);
    }
    .about__nav-link-icon {
        width: calc(var(--base-size) * 132);
    }
    .about__nav-link-text {
        padding-bottom: 0;
        min-width: none;
        flex-grow: 2;
        font-size: calc(var(--base-size) * 28);
    }
    .about__nav-link-text::after {
        width: calc(var(--base-size) * 100);
        height: calc(var(--base-size) * 10);
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        margin: calc(var(--base-size) * 40) auto 0 auto;
    }

    .about-clothmake {
        margin-top: calc(var(--base-size) * 200);
    }
    .about-clothmake__video {
        margin-top: calc(var(--base-size) * 70);
    }

    .about-clothmake__text {
        margin-top: calc(var(--base-size) * 40);
        font-size: calc(var(--base-size) * 18);
        text-align: center;
    }

    .about-clothmake__nav {
        margin-top: calc(var(--base-size) * 70);
    }
}

@media (hover: hover)
{
    .about__nav-link {
        transition: transform 0.075s linear;
    }
    .about__nav-link:hover {
        transform: scale(1.02);
    }
}





/* 加盟店検索 */

.search-section {
    position: relative;
    background-color: var(--color-secondary);
    padding: calc(var(--base-size) * 120) 0;
}
.search-form {
    position: relative;
    z-index: 2;
    margin-top: calc(var(--base-size) * 40);
}

.search-form__area-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--base-size) * 15) calc(var(--base-size) * 11);
    max-width: calc(var(--base-size) * 325);
    padding: calc(var(--base-size) * 20);
    border-radius: calc(var(--base-size) * 10);
    background-color: #fff;
}
.search-form__area-input {
    display: none;
}
.search-form__area-label {
    display: block;
    padding: calc(var(--base-size) * 10) calc(var(--base-size) * 14);
    border-radius: calc(var(--base-size) * 5);
    background-color: var(--color-primary);
    color: #fff;
    font-size: calc(var(--base-size) * 16);
    font-weight: 500;
    cursor: pointer;
}

.search-form__categories {
    overflow: hidden;
    width: auto;
    opacity: 1;
}
.search-form__categories:not(.--is-open) {
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}
.search-form__categories.--is-loading {
    opacity: 0;
    pointer-events: none;
}
.search-form__category {
    position: relative;
    padding-top: calc(var(--base-size) * 40);
}
.search-form__category::after {
    content: "";
    display: block;
    clip-path: polygon(0 0, 100% 0, 50% 100%);    
    width: calc(var(--base-size) * 20);
    height: calc(calc(var(--base-size) * 12) * tan(60deg));
    background-color: #fff;
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.search-form__category-list {
    display: grid;
    place-items: stretch;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--base-size) * 15);
    width: 100%;
    padding: 0 calc(var(--base-size) * 10);
}
.search-form__category-input {
    display: none;
}
.search-form__category-label {
    position: relative;
    display: flex;
    align-items: center;
    height: calc(var(--base-size) * 44);
    padding: calc(var(--base-size) * 10) calc(var(--base-size) * 46) calc(var(--base-size) * 10) calc(var(--base-size) * 20);
    border-radius: 9999px;
    font-size: calc(var(--base-size) * 16);
    background-color: #fff;
    color: inherit;
    cursor: pointer;
}
.search-form__category-label::before,
.search-form__category-label::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
}
.search-form__category-label::before {
    width: calc(var(--base-size) * 22);
    height: calc(var(--base-size) * 22);
    border-radius: 50%;
    background-color: var(--color-primary);
    right: calc(var(--base-size) * 12);
}
.search-form__category-label::after {
    width: calc(var(--base-size) * 6);
    height: calc(var(--base-size) * 6);
    border: solid 1px #fff;
    border-width: 1px 1px 0 0;
    right: calc(var(--base-size) * 21);
    transform: rotate(45deg);
}

.search-form__division {
    display: grid;
    place-items: center;
    place-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.9);
    padding: calc(var(--base-size) * 50) calc(var(--base-size) * 20);
    border-radius: calc(var(--base-size) * 10);
    width: 100%;
    max-width: 100%;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.search-form__division:not(.--is-open) {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}
.search-form__division-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--base-size) * 20);
    padding-top: calc(var(--base-size) * 12);
}
.search-form__division-list:empty {
    padding-top: 0;
}
.search-form__division-item.disabled {
    opacity: 0.5;
    pointer-events: none;
}
.search-form__division-input {
    display: none;
}
.search-form__division-label {
    font-size: calc(var(--base-size) * 16);
    color: #fff;
    text-decoration: underline;
    cursor: pointer;
}
.search-form__division-close-button {
    position: absolute;
    top: calc(var(--base-size) * 22);
    right: calc(var(--base-size) * 22);
    display: block;
    width: calc(var(--base-size) * 28);
    height: calc(var(--base-size) * 28);
    cursor: pointer;
}
.search-form__division-close-button::before,
.search-form__division-close-button::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100%;
    height: calc(var(--base-size) * 2);
    background-color: #fff;
}
.search-form__division-close-button::before {
    transform: rotate(45deg);
}
.search-form__division-close-button::after {
    transform: rotate(-45deg);
}
.search-form__division-close-button-text {
    display: none;
}
.search-form__division .search-form__division-not-found {
    color: #fff;
    font-size: calc(var(--base-size) * 14);
    text-align: center;
}

.search-form__store {
    display: grid;
    place-items: center;
    place-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    background-color: rgba(0, 0, 0, 0.9);
    padding: calc(var(--base-size) * 50) calc(var(--base-size) * 20);
    border-radius: calc(var(--base-size) * 10);
    width: 100%;
    max-width: 100%;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.search-form__store:not(.--is-open) {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}
.search-form__store-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--base-size) * 20);
    padding-top: calc(var(--base-size) * 12);
}
.search-form__store-item {
    position: relative;
    padding-left: calc(var(--base-size) * 16);
}
.search-form__store-item::before {
    content: "";
    display: block;
    position: absolute;
    top: calc(var(--base-size) * 11);
    left: 0;
    width: calc(var(--base-size) * 4);
    height: calc(var(--base-size) * 4);
    border-radius: 50%;
    background-color: #fff;
}
.search-form__store-link {
    display: flex;
    flex-direction: column;
    font-size: calc(var(--base-size) * 16);
    color: #fff;
    cursor: pointer;
}
.search-form__store-link > span {
    text-decoration: underline;
}
.search-form__store-close-button {
    position: absolute;
    top: calc(var(--base-size) * 22);
    right: calc(var(--base-size) * 22);
    display: block;
    width: calc(var(--base-size) * 28);
    height: calc(var(--base-size) * 28);
    cursor: pointer;
}
.search-form__store-close-button::before,
.search-form__store-close-button::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100%;
    height: calc(var(--base-size) * 2);
    background-color: #fff;
}
.search-form__store-close-button::before {
    transform: rotate(45deg);
}
.search-form__store-close-button::after {
    transform: rotate(-45deg);
}
.search-form__store-close-button-text {
    display: none;
}

.japan-map {
    display: none;
}

@media (min-width: 768px)
{
    .search-section {
        padding: calc(var(--base-size) * 100) 0;
        min-height: calc(var(--base-size) * 726);
    }
    .search-form {
        margin-top: calc(var(--base-size) * 77);
        display: flex;
        align-items: flex-start;
        justify-content: center;
    }

    .search-form__area-list {
        gap: calc(var(--base-size) * 15);
        max-width: none;
        width: calc(var(--base-size) * 395);
        padding: calc(var(--base-size) * 20);
        border-radius: calc(var(--base-size) * 10);
    }
    .search-form__area-label {
        padding: calc(var(--base-size) * 10) calc(var(--base-size) * 14);
        border-radius: calc(var(--base-size) * 5);
        font-size: calc(var(--base-size) * 16);
    }

    .search-form__category {
        padding: 0 calc(var(--base-size) * 140) 0 0;
    }
    .search-form__category::after {
        clip-path: polygon(0 0, 100% 50%, 0 100%); 
        width: calc(var(--base-size) * 22);
        height: calc(calc(var(--base-size) * 12) * tan(60deg));
        top: calc(var(--base-size) * 31);
        left: -1px;
        right: auto;
        margin: 0;
    }
    .search-form__category-list {
        grid-template-columns: repeat(3, 1fr);
        gap: calc(var(--base-size) * 15);
        width: calc(var(--base-size) * 465);
        padding: calc(var(--base-size) * 20) 0 calc(var(--base-size) * 20) calc(var(--base-size) * 36);
    }
    .search-form__category-label {
        height: calc(var(--base-size) * 44);
        padding: calc(var(--base-size) * 10) calc(var(--base-size) * 16);
        font-size: calc(var(--base-size) * 16);
    }
    .search-form__category-label::before {
        width: calc(var(--base-size) * 22);
        height: calc(var(--base-size) * 22);
        right: calc(var(--base-size) * 12);
    }
    .search-form__category-label::after {
        width: calc(var(--base-size) * 6);
        height: calc(var(--base-size) * 6);
        right: calc(var(--base-size) * 21);
    }

    .search-form__division {
        padding: calc(var(--base-size) * 100);
        border-radius: calc(var(--base-size) * 20);
        width: auto;
        max-width: calc(var(--base-size) * 925);
    }
    .search-form__division-list {
        grid-template-columns: repeat(5, 1fr);
        gap: calc(var(--base-size) * 20);
        padding-top: 0;
    }
    .search-form__division-label {
        font-size: calc(var(--base-size) * 16);
    }
    .search-form__division-close-button {
        top: calc(var(--base-size) * 36);
        right: calc(var(--base-size) * 36);
        width: calc(var(--base-size) * 28);
        height: calc(var(--base-size) * 28);
    }
    .search-form__division-close-button::before,
    .search-form__division-close-button::after {
        height: calc(var(--base-size) * 2);
    }
    .search-form__division .search-form__division-not-found {
        font-size: calc(var(--base-size) * 16);
    }

    .search-form__store {
        padding: calc(var(--base-size) * 100);
        border-radius: calc(var(--base-size) * 20);
        width: auto;
        max-width: calc(var(--base-size) * 925);
    }
    .search-form__store-list {
        gap: calc(var(--base-size) * 20);
        padding-top: 0;
    }
    .search-form__store-item {
        padding-left: calc(var(--base-size) * 16);
    }
    .search-form__store-item::before {
        top: calc(var(--base-size) * 11);
        width: calc(var(--base-size) * 4);
        height: calc(var(--base-size) * 4);
    }
    .search-form__store-link {
        flex-direction: row;
        gap: 0.75em;
        font-size: calc(var(--base-size) * 16);
    }
    .search-form__store-close-button {
        top: calc(var(--base-size) * 36);
        right: calc(var(--base-size) * 36);
        width: calc(var(--base-size) * 28);
        height: calc(var(--base-size) * 28);
    }
    .search-form__store-close-button::before,
    .search-form__store-close-button::after {
        height: calc(var(--base-size) * 2);
    }

    .japan-map {
        position: absolute;
        z-index: 1;
        display: block;
        width: 100%;
        height: calc(var(--base-size) * 608);
        max-width: 1502px;
        margin: 0 auto;
        padding: 0 calc(var(--base-size) * 40);
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        pointer-events: none;
    }
    .japan-map-img {
        display: block;
        width: calc(var(--base-size) * 502);
        height: 100%;
        margin-left: auto;
    }
}

@media (hover: hover)
{
    .search-form__area-label {
        transition: transform 0.075s linear, color 0.075s linear;
    }
    .search-form__area-label:hover {
        transform: scale(1.01);
        color: #EBFF00;
    }

    .search-form__category-label {
        transition: background-color 0.075s linear, color 0.075s linear;
    }
    .search-form__category-label:hover::before,
    .search-form__category-label:hover::after {
        transition: background-color 0.075s linear, border-color 0.075s linear;
    }
    .search-form__category-label:hover {
        background-color: var(--color-primary);
        color: #fff;
    }
    .search-form__category-label:hover::before {
        background-color: #fff;
    }
    .search-form__category-label:hover::after {
        border-color: var(--color-primary);
    }

    .search-form__division-label {
        transition: color 0.075s linear;
    }
    .search-form__division-label:hover {
        color: var(--color-primary);
    }

    .search-form__division-close-button::before,
    .search-form__division-close-button::after {
        transition: background-color 0.075s linear;
    }
    .search-form__division-close-button:hover::before,
    .search-form__division-close-button:hover::after {
        background-color: var(--color-primary);
    }

    .search-form__store-link {
        transition: color 0.075s linear;
    }
    .search-form__store-link:hover {
        color: var(--color-primary);
    }

    .search-form__store-close-button::before,
    .search-form__store-close-button::after {
        transition: background-color 0.075s linear;
    }
    .search-form__store-close-button:hover::before,
    .search-form__store-close-button:hover::after {
        background-color: var(--color-primary);
    }
}





/* ピックアップコンテンツ */

.pickup-list-item {
    width: 100%;
}

.pickup-list-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--base-size) * 15);
    background-color: var(--color-primary);
    color: #fff;
    text-decoration: none;
    border-radius: calc(var(--base-size) * 10);
    padding: calc(var(--base-size) * 18);
}
.pickup-list-link-img {
    display: block;
    width: calc(var(--base-size) * 290);
    max-width: 100%;
    height: auto;
    border-radius: calc(var(--base-size) * 10);
}

.pickup-list-link-text {
    position: relative;
    display: block;
    width: 100%;
    font-size: calc(var(--base-size) * 18);
    font-weight: 500;
    letter-spacing: 0.15em;
    text-align: center;
}
.pickup-list-link-text::after {
    content: "";
    display: block;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    height: calc(calc(var(--base-size) * 7) * tan(60deg));
    width: calc(var(--base-size) * 12);
    background-color: #fff;
    position: absolute;
    right: calc(var(--base-size) * 8);
    top: 50%;
    transform: translateY(-50%);
}

@media (min-width: 768px)
{
    .pickup-list-item {
        width: 100%;
    }

    .pickup-list-link {
        flex-direction: row;
        gap: calc(var(--base-size) * 50);
        border-radius: calc(var(--base-size) * 15);
        padding: calc(var(--base-size) * 20);
    }
    .pickup-list-link-img {
        width: calc(var(--base-size) * 282);
        border-radius: calc(var(--base-size) * 10);
    }

    .pickup-list-link-text {
        flex-grow: 2;
        width: auto;
        height: 100%;
        font-size: calc(var(--base-size) * 32);
        letter-spacing: 0.15em;
        text-align: left;
        padding-right: calc(var(--base-size) * 60);
    }
    .pickup-list-link-text::after {
        height: calc(calc(var(--base-size) * 9) * tan(60deg));
        width: calc(var(--base-size) * 14);
        right: calc(var(--base-size) * 30);
    }
}

@media (hover: hover)
{
    .pickup-list-link {
        transition: transform 0.1s linear;
    }
    .pickup-list-link:hover {
        transform: scale(1.02);
    }
}





/* 背景ペイント */

.section__bg-img.--sbg-01 {
    top: calc(var(--base-size) * 36);
}
.section__bg-img.--sbg-02 {
    top: calc(var(--base-size) * 658);
}
.section__bg-img.--sbg-03 {
    top: calc(var(--base-size) * 580);
}
.section__bg-img.--sbg-04 {
    top: calc(var(--base-size) * 1410);
}

.section__bg-img.--sbg-05 {
    top: calc(var(--base-size) * 20);
}
.section__bg-img.--sbg-06 {
    top: calc(var(--base-size) * 350);
}
.section__bg-img.--sbg-07 {
    top: calc(var(--base-size) * 280);
}
.section__bg-img.--sbg-08 {
    top: calc(var(--base-size) * 868);
}

@media (min-width: 768px)
{
    .section__bg-img.--sbg-01 {
        top: calc(var(--base-size) * 120);
    }
    .section__bg-img.--sbg-02 {
        top: calc(var(--base-size) * 972);
    }
    .section__bg-img.--sbg-03 {
        top: calc(var(--base-size) * 460);
    }
    .section__bg-img.--sbg-04 {
        top: calc(var(--base-size) * 1340);
    }

    .section__bg-img.--sbg-05 {
        top: calc(var(--base-size) * 90);
    }
    .section__bg-img.--sbg-06 {
        top: calc(var(--base-size) * 706);
    }
    .section__bg-img.--sbg-07 {
        top: calc(var(--base-size) * 330);
    }
    .section__bg-img.--sbg-08 {
        top: calc(var(--base-size) * 970);
    }
}