@charset "UTF-8";

/* ==========================================
   COMMON CSS
   Noah Lab
========================================== */


/* ==========================================
   Body
========================================== */

body {
    min-width: 320px;

    font-family: var(--font-main);
    font-size: var(--font-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-base);

    color: var(--text-main);
    background-color: var(--bg-main);

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ==========================================
   Links
========================================== */

a {
    color: inherit;
    text-decoration: none;

    transition:
        color var(--transition-base),
        background-color var(--transition-base),
        opacity var(--transition-base);
}

a:hover {
    opacity: 0.8;
}


/* ==========================================
   Images
========================================== */

img {
    max-width: 100%;
    height: auto;
}


/* ==========================================
   Headings
========================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-tight);
}


/* ==========================================
   Paragraph
========================================== */

p {
    line-height: var(--line-height-base);
}


/* ==========================================
   Lists
========================================== */

ul,
ol {
    list-style: none;
}


/* ==========================================
   Buttons
========================================== */

button {
    font-family: inherit;
    color: inherit;

    cursor: pointer;

    transition:
        color var(--transition-base),
        background-color var(--transition-base),
        border-color var(--transition-base),
        opacity var(--transition-base),
        transform var(--transition-base);
}

button:hover {
    opacity: 0.8;
}


/* ==========================================
   Form Elements
========================================== */

input,
textarea,
select {
    width: 100%;

    font-family: inherit;
    font-size: var(--font-base);
    line-height: var(--line-height-base);
}

textarea {
    min-height: 160px;
}


/* ==========================================
   Focus
========================================== */

:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 3px;
}


/* ==========================================
   Selection
========================================== */

::selection {
    color: var(--bg-card);
    background-color: var(--accent-blue);
}


/* ==========================================
   Horizontal Rule
========================================== */

hr {
    margin: 0;

    border: 0;
    border-top: 1px solid var(--border-color);
}


/* ==========================================
   Screen Reader Only
========================================== */

.screen-reader-text {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);

    white-space: nowrap;

    border: 0;
}


/* ==========================================
   Text Utility
========================================== */

.text-center {
    text-align: center;
}


/* ==========================================
   Section
========================================== */

.section {
    padding-block: var(--space-8);
}


/* ==========================================
   Section Heading
========================================== */

.section-heading {
    margin-bottom: var(--space-6);

    text-align: center;
}

.section-label {
    margin-bottom: var(--space-2);

    font-family: var(--font-sans);
    font-size: var(--font-xs);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
    letter-spacing: 0.12em;

    color: var(--accent-beige);

    text-transform: uppercase;
}

.section-title {
    font-size: var(--font-xl);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-tight);
}

.section-text {
    max-width: var(--container-narrow);

    margin-top: var(--space-4);
    margin-inline: auto;

    font-size: var(--font-sm);
    color: var(--text-sub);
}


/* ==========================================
   Page Heading
========================================== */

.page-heading {
    padding-block: var(--space-7);

    text-align: center;
}

.page-heading-label {
    margin-bottom: var(--space-2);

    font-family: var(--font-sans);
    font-size: var(--font-xs);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
    letter-spacing: 0.12em;

    color: var(--accent-beige);

    text-transform: uppercase;
}

.page-heading-title {
    font-size: var(--font-2xl);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-tight);
}

.page-heading-text {
    max-width: var(--container-narrow);

    margin-top: var(--space-4);
    margin-inline: auto;

    font-size: var(--font-sm);
    color: var(--text-sub);
}


/* ==========================================
   Breadcrumb
========================================== */

.breadcrumb {
    padding-block: var(--space-3);

    font-family: var(--font-sans);
    font-size: var(--font-xs);

    color: var(--text-sub);
}

.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: var(--space-2);

    margin: 0;
    padding: 0;
}

.breadcrumb-item {
    display: flex;
    align-items: center;

    gap: var(--space-2);
}

.breadcrumb-item:not(:last-child)::after {
    content: "/";

    color: var(--border-color);
}

.breadcrumb-link:hover {
    color: var(--text-main);

    opacity: 1;
}


/* ==========================================
   Category Label
========================================== */

.category-label {
    display: inline-block;

    padding: 4px 10px;

    font-family: var(--font-sans);
    font-size: var(--font-xs);
    line-height: var(--line-height-tight);

    color: var(--text-sub);

    background-color: var(--bg-sub);

    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
}


/* ==========================================
   Date
========================================== */

.date {
    font-family: var(--font-sans);
    font-size: var(--font-xs);
    line-height: var(--line-height-tight);

    color: var(--text-sub);
}


/* ==========================================
   Card Base
========================================== */

.card {
    overflow: hidden;

    background-color: var(--bg-card);

    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);

    transition:
        box-shadow var(--transition-base),
        transform var(--transition-base);
}

.card:hover {
    box-shadow: var(--shadow-sm);
}


/* ==========================================
   Thumbnail
========================================== */

.thumbnail {
    aspect-ratio: var(--thumbnail-ratio);

    overflow: hidden;

    background-color: var(--bg-sub);
}

.thumbnail img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform var(--transition-slow);
}


/*
 * カード全体をホバーしたときに
 * サムネイルを少し拡大する場合に使用
 */

.card:hover .thumbnail img {
    transform: scale(1.03);
}


/* ==========================================
   Content Area
========================================== */

.content-area {
    width: 100%;
}


/* ==========================================
   Affiliate
========================================== */

.affiliate-box {
    padding: var(--space-5);

    background-color: var(--affiliate-bg);

    border: 1px solid var(--affiliate-border);
    border-radius: var(--radius-md);
}

.affiliate-box-title {
    margin-bottom: var(--space-3);

    font-size: var(--font-lg);
    line-height: var(--line-height-tight);
}

.affiliate-box-text {
    margin-bottom: var(--space-4);

    font-size: var(--font-sm);

    color: var(--text-sub);
}


/* ==========================================
   Common Button
========================================== */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;

    padding: 10px 24px;

    font-family: var(--font-sans);
    font-size: var(--font-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;

    color: var(--bg-card);

    background-color: var(--accent-beige);

    border: 1px solid var(--accent-beige);
    border-radius: var(--radius-full);

    transition:
        color var(--transition-base),
        background-color var(--transition-base),
        border-color var(--transition-base),
        opacity var(--transition-base),
        transform var(--transition-base);
}

.button:hover {
    opacity: 1;

    background-color: var(--accent-blue);
    border-color: var(--accent-blue);

    transform: translateY(-1px);
}

.button:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 3px;
}


/* ==========================================
   Container
========================================== */

.container {
    width: 100%;
    max-width: var(--container-width);

    margin-inline: auto;
    padding-inline: var(--container-padding);
}


/* ==========================================
   Narrow Container
========================================== */

.container-narrow {
    width: 100%;
    max-width: var(--container-narrow);

    margin-inline: auto;
    padding-inline: var(--container-padding);
}


/* ==========================================
   Tablet / PC
========================================== */

@media (min-width: 768px) {

    /* ======================================
       Section
    ====================================== */

    .section {
        padding-block: var(--space-9);
    }


    /* ======================================
       Section Heading
    ====================================== */

    .section-heading {
        margin-bottom: var(--space-7);
    }

    .section-title {
        font-size: var(--font-2xl);
    }

    .section-text {
        font-size: var(--font-base);
    }


    /* ======================================
       Page Heading
    ====================================== */

    .page-heading {
        padding-block: var(--space-8);
    }

    .page-heading-title {
        font-size: var(--font-3xl);
    }

    .page-heading-text {
        font-size: var(--font-base);
    }


    /* ======================================
       Affiliate
    ====================================== */

    .affiliate-box {
        padding: var(--space-6);
    }

}