/*
記事一覧
*/

.c-articles {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 5);
}

.c-articles__item__link {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--spacing) * 4);
    transition: all 220ms ease;
}

.c-articles__item__link:hover {
    opacity: 0.8;
}

@media (min-width: 1024px) {
    .c-articles__item__link {
        grid-template-columns: 1fr auto;
        column-gap: calc(var(--spacing) * 5);
    }
}

.c-articles__item__link__thumbnail {
    align-self: center;
    grid-row: 1;
    aspect-ratio: 285/180;
    object-fit: cover;
    width: 100%;
    max-width: 512px;
}

@media (min-width: 1024px) {
    .c-articles__item__link__thumbnail {
        grid-row: auto;
        max-width: calc(var(--spacing) * 72);
    }
}

/*
記事
*/

.c-article-title {
    font-family: var(--font-heisei);
    font-size: 1.875rem;
}

.c-article-date {
    font-family: var(--font-heisei);
    font-size: 0.75rem;
}

/*
workship: prose
*/

.c-workshop-prose {
    font-size: 1rem;
    font-family: var(--font-serif);
}

.c-workshop-prose p {
    margin-top: 0;
    margin-bottom: calc(var(--spacing) * 8);
}

.c-workshop-prose h3 {
    font-size: 1.5rem;
    margin-bottom: calc(var(--spacing) * 10);
}

.c-workshop-prose img {
    display: block;
    margin: 0 auto calc(var(--spacing) * 8);
}

@media (min-width: 1024px) {
    .c-workshop-prose {
        font-size: 1.125rem;
    }

    .c-workshop-prose p {
        margin-bottom: calc(var(--spacing) * 16);
    }

    .c-workshop-prose img {
        margin-bottom: calc(var(--spacing) * 16);
    }
}

/*
news: prose
*/

.c-news-prose {
    font-size: 1rem;
    font-family: var(--font-serif);
}

@media (min-width: 1024px) {
    .c-news-prose {
        font-size: 1.125rem;
    }
}

.c-news-prose p {
    margin-top: 0;
    margin-bottom: calc(var(--spacing) * 8);
}

@media (min-width: 1024px) {
    .c-news-prose p {
        margin-bottom: calc(var(--spacing) * 16);
    }
}

.c-news-prose h3 {
    font-size: 1.5rem;
    margin-bottom: calc(var(--spacing) * 10);
}

.c-news-prose img {
    display: block;
    margin: 0 auto calc(var(--spacing) * 8);
}

@media (min-width: 1024px) {
    .c-news-prose img {
        margin-bottom: calc(var(--spacing) * 16);
    }
}

/*
動画
*/

.c-videos {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--spacing) * 9);
}

@media (min-width: 768px) {
    .c-videos {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .c-videos {
        grid-template-columns: repeat(3, 1fr);
    }
}

.c-videos__item {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
    width: 100%;
    transition: transform 220ms ease;
}

.c-videos__item:hover {
    transform: scale(1.05);
}

.c-videos__item__thumbnail {
    display: block;
    aspect-ratio: 300/170;
    object-fit: cover;
    width: 100%;
}

.c-videos__item__title {
    font-family: var(--font-heisei);
    font-size: 1rem;
    margin: 0;
}

/*
リール
*/

.c-reels {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: calc(var(--spacing) * 14);
    row-gap: calc(var(--spacing) * 4);
}

@media (min-width: 768px) {
    .c-reels {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .c-reels {
        grid-template-columns: repeat(6, 1fr);
    }
}

.c-reels__item {
    display: flex;
    flex-direction: column;
    transition: transform 220ms ease;
    width: 100%;
}

.c-reels__item:hover {
    transform: scale(1.05);
}

.c-reels__item__thumbnail {
    display: block;
    aspect-ratio: 111/166;
    object-fit: cover;
    width: 100%;
}

/*
工芸品一覧
*/
.c-crafts {
    --aspect: 204 / 144;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: calc(var(--spacing) * 4);
    row-gap: calc(var(--spacing) * 6);
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .c-crafts {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .c-crafts {
        grid-template-columns: repeat(5, 1fr);
    }
}

.c-crafts__card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: all 220ms ease;
}

.c-crafts__card:hover {
    opacity: 0.8;
}

.c-crafts__thumbnail {
    display: block;
    aspect-ratio: 204/144;
    overflow: hidden;
    background: #eee;
}

.c-crafts__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.c-crafts__noimage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #e5e7eb;
    color: #6b7280;
}

.c-crafts__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    row-gap: calc(var(--spacing) * 1);
}

.c-crafts__title {
    text-decoration: none;
    font-family: var(--font-serif);
    font-size: 1.125rem;
}

.c-crafts__title-kana {
    text-decoration: none;
    font-family: var(--font-serif);
    font-size: 1rem;
    margin-top: calc(var(--spacing) * -1);
    width: 100%;
}

/* Crafts responsive grid (sm/md/lg) */
@media (min-width: 640px) {
    .c-crafts__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .c-crafts__list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .c-crafts__list {
        grid-template-columns: repeat(5, 1fr);
    }
}

.c-crafts__shop__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 1.5);

    aspect-ratio: var(--aspect);
    background-color: #8F8BAA;

    color: white;
    font-family: var(--font-serif);

    width: 100%;

    transition: all 220ms ease;
}

.c-crafts__shop__link:hover {
    opacity: 0.8;
}

/*
crafts: desc
*/

.c-crafts-description {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: calc(var(--spacing) * 16);
    row-gap: calc(var(--spacing) * 4);
}

@media (min-width: 1024px) {
    .c-crafts-description {
        grid-template-columns: repeat(2, 1fr);
    }
}

.c-crafts-description__image {
    width: 100%;
    height: auto;
    display: block;
}

.c-crafts-description__inner {
    display: flex;
    flex-direction: column;
    column-gap: calc(var(--spacing) * 8);
    row-gap: calc(var(--spacing) * 2);
}

.c-crafts-description__inner__name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: calc(var(--spacing) * 4.5);
    font-family: var(--font-serif);
    margin: 0;
}

.c-crafts-description__inner__text {
    font-family: var(--font-hiragino);
    font-size: 1rem;
    line-height: 1.8;
}

@media (min-width: 1024px) {
    .c-crafts-description__inner__text {
        font-size: 1.125rem;
    }
}

/*
crafts-in-life: featured prose
*/

.c-crafts-life-thumbnail {
    display: block;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    max-width: 512px;
    width: 100%;
}

.c-crafts-life-prose {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: calc(var(--spacing) * 16);

    font-size: 1rem;
    font-family: var(--font-serif);
}

@media (min-width: 1024px) {
    .c-crafts-life-prose {
        font-size: 1.125rem;
        grid-template-columns: repeat(2, 1fr);
    }
}

.c-crafts-life-prose h3 {
    border-bottom: 1px solid black;

    font-size: 1.5rem;
    text-align: center;

    padding-bottom: calc(var(--spacing) * 5);
    margin-bottom: calc(var(--spacing) * 10);
}

@media (min-width: 1024px) {
    .c-crafts-life-prose h3 {
        grid-column: span 2;
    }
}

.c-crafts-life-prose p {
    margin-top: 0;
    margin-bottom: calc(var(--spacing) * 8);
}

@media (min-width: 1024px) {
    .c-crafts-life-prose p {
        margin-bottom: calc(var(--spacing) * 16);
    }
}

.c-crafts-life-prose img {
    display: block;
    margin: 0 auto calc(var(--spacing) * 8);
    width: 100%;
}

@media (min-width: 1024px) {
    .c-crafts-life-prose img {
        margin: 0 auto calc(var(--spacing) * 16);
    }
}

/*
artisans: list
*/

.c-artisans-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--spacing) * 8);
}

@media (min-width: 768px) {
    .c-artisans-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .c-artisans-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

.c-artisans-list__item {
    padding: calc(var(--spacing) * 6);
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    transition: transform 300ms ease;
}

.c-artisans-list__item:hover {
    transform: scale(1.02);
}

.c-artisans-list__item__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: calc(var(--spacing) * 4);
}

.c-artisans-list__item__inner img {
    display: block;
    aspect-ratio: 300 / 170;
    object-fit: cover;
    width: 100%;
}

.c-artisans-list__item__inner__body {
    flex-grow: 1;
}

/*
artisans: prose
*/

.c-artisans-prose {
    font-size: 1rem;
    font-family: var(--font-serif);
}

@media (min-width: 1024px) {
    .c-artisans-prose {
        font-size: 1.125rem;
    }
}

.c-artisans-prose h3 {
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: calc(var(--spacing) * 6);
}

.c-artisans-prose p {
    margin: 0 auto calc(var(--spacing) * 8);
    max-width: 56rem;
}

@media (min-width: 1024px) {
    .c-artisans-prose p {
        margin-bottom: calc(var(--spacing) * 16);
    }
}

.c-artisans-prose img {
    display: block;
    margin: 0 auto calc(var(--spacing) * 8);
    width: auto;
}

@media (min-width: 1024px) {
    .c-artisans-prose img {
        margin: 0 auto calc(var(--spacing) * 16);
    }
}

.c-artisans-prose hr {
    margin: 0 auto calc(var(--spacing) * 16);
    max-width: 820px;
}