:root {
    /* Fixed Colors */
    --fc-x: #000000;

    /* Branding Colors */
    --bc-base: #f9dfb6;
    --bc-main: #22284f;
    --bc-accent: #ff870f;

    /* UI Colors */
    --uc-content-fg: #33231b;
    --uc-content-fg-supplement: #946549;
    --uc-content-bg: var(--bc-base);
    --uc-icon-hover: #ffffff;

    /* Effect Colors */
    --ec-sunset-light: #fffff8;
    --ec-sunset-dark: #ff870f;
    --ec-shadow-light: #ffffff;
    --ec-shadow-dark: #4e290480;
    --ec-backdrop: #00000080;

    /* Box Shadows */
    --bs-shadow: 4px 4px 12px var(--ec-shadow-dark);
    --bs-link: 0 0 12px var(--bc-accent), 0 0 24px var(--bc-accent);

    /* Text Shadows */
    --ts-clarify: 0 0 4px var(--ec-shadow-light), 0 0 8px var(--ec-shadow-light);

    /* Filters */
    --ft-clarify: drop-shadow(0 0 4px var(--ec-shadow-light));

    /* Font Families */
    --ff-base: 'Sawarabi Gothic', sans-serif;

    /* Font Weights */
    --fw-normal: 400;
    --fw-bold: 700;

    /* Gaps */
    --gap-small: 12px;
    --gap-medium: 60px;
    --gap-large: 80px;
    --gap-verylarge: 120px;

    /* Margins / Paddings */
    --mg-page-horiz: 20px;

    /* Border Radiuses */
    --br-small: 4px;
    --br-normal: 16px;

    /* Transitions */
    --tr-hover: all 0.2s ease;

    /* Others */
    --minwidth-phone: 300px;
}

/* ========================================================================= */
/* Total Styles                                                              */
/* ========================================================================= */
* {
    box-sizing: border-box;
}

html {
    /* コンテンツが少なくても、背景のグラデーションをビューいっぱいに表示します。*/
    min-height: 100%;
}

body {
    margin: 0;
    font-family: var(--ff-base);
    font-size: 16px;
    font-weight: var(--fw-normal);
    line-height: 1.5;
    color: var(--uc-content-fg);
    background:
        linear-gradient(to bottom, #0B486b, transparent 600px),
        linear-gradient(to top, #edad63, transparent 600px),
        linear-gradient(var(--uc-content-bg), var(--uc-content-bg));
    background-color: var(--uc-content-bg);
}

p {
    margin: 0;
}

dialog {
    border-style: none;
    border-radius: var(--br-normal);
}

dialog::backdrop {
    background-color: var(--ec-backdrop);
}

/* ========================================================================= */
/* Partial Styles: header                                                    */
/* ========================================================================= */
.header {
    display: flex;
    align-items: center;
    justify-content: center;
    /* ビューの横幅にあわせて、高さを調整します。 */
    height: 20vw;
    /* ビューの横幅が一定より小さくなった場合、それ以降は一定の高さとします。画像の実サイズとあわせる必要があります。 */
    min-height: 160px;
    /* 背景画像の下端にグラデーションがかかっている影響で、下マージンは若干大きくします。 */
    padding: 20px var(--mg-page-horiz) 40px var(--mg-page-horiz);
    background-image: url('/images/header.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.page-title {
    width: 100%;
    margin: 0;
    text-align: center;
}

.page-title-logo {
    /* ビューの横幅にあわせて、高さを調整します。 */
    height: 8vw;
    /* ビューの横幅が一定より小さくなった場合、それ以降は一定の高さとします。 */
    min-height: 80px;
    /* ビューの横幅が一定より小さくなった場合、それ以降は一定の高さとします。 */
    max-height: 140px;
    /* SVG の currentColor から参照される色です。 */
    color: var(--ec-sunset-light);
    animation: kf-sunset 10s infinite;
}

/* ========================================================================= */
/* Partial Styles: main                                                      */
/* ========================================================================= */
.main {
    display: flex;
    flex-direction: column;
    gap: var(--gap-large);
    align-items: center;
    padding: 20px var(--mg-page-horiz);
}

.section {
    width: 100%;
    container: _section / inline-size;
}

.section-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.75rem;
    font-weight: var(--fw-bold);
    color: var(--bc-main);
}

.section-title-logo-image {
    height: 40px;
    filter: var(--ft-clarify);
}

.section-icon {
    /* 画像の色を CSS 側で自由に変更できるように、元画像はマスクとして扱っています。 */
    /* 画像の実サイズとあわせる必要があります。 */
    width: 100px;
    /* 画像の実サイズとあわせる必要があります。 */
    height: 32px;
    /* マスクされた結果の、最終的な色を指定します。 */
    background-color: var(--uc-content-fg);
}

.section-icon_products {
    mask-image: url('/images/sections/products.webp');
}

.section-icon_inquiry {
    mask-image: url('/images/sections/inquiry.webp');
}

.text-block {
    display: flex;
    flex-direction: column;
    gap: var(--gap-small);
    align-items: center;
}

.card-list {
    display: flex;
    gap: var(--gap-verylarge);
    justify-content: center;
    /* リスト独自の余白を削除します。 */
    padding: 0;
    /* リスト独自の余白を削除します。 */
    margin: 0;
    list-style: none;
}

@container _section (width<=800px) {

    /* コンテナの横幅が一定以上小さくなったら、カードを縦並びにします。 */
    .card-list {
        flex-direction: column;
        gap: var(--gap-medium);
        align-items: center;
    }
}

.card {
    display: flex;
    flex-direction: column;
    gap: var(--gap-small);
    align-items: center;
    width: 300px;
}

.card-image-link {
    display: block;
    border-radius: var(--br-normal);
    transition: var(--tr-hover);
}

@media (hover: hover) {
    .card-image-link:hover {
        box-shadow: var(--bs-link);
    }
}

@media (hover: none) {
    .card-image-link:active {
        box-shadow: var(--bs-link);
    }
}

.card-image {
    display: block;
    border: 8px solid #e0d9cf;
    border-radius: var(--br-normal);
    box-shadow: var(--bs-shadow);
}

.card-image_mawaru {
    background-color: #24242b;
    background-image: url('https://assets.tk2kpdn.com/corp/products/mawaru-bg.webp');
}

.card-image_poketorusearcher {
    background: repeating-linear-gradient(to left, #ffd2c3, #ffd2c3 10px, #fdeed9 10px, #fdeed9 20px);
}

.card-title-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card-title {
    font-size: 1.25rem;
    font-weight: var(--fw-bold);
    color: var(--bc-main);
}

.card-title-link {
    color: var(--bc-main);
    text-decoration: none;
    transition: var(--tr-hover);
}

@media (hover: hover) {
    .card-title-link:hover {
        color: var(--bc-accent);
    }
}

@media (hover: none) {
    .card-title-link:active {
        color: var(--bc-accent);
    }
}

.card-subtitle {
    font-size: 0.875rem;
    font-weight: var(--fw-bold);
    color: var(--uc-content-fg-supplement);
}

.card-description {
    text-align: justify;
}

.dialog_full {
    /* margin を指定すると中央に表示されないようになってしまうため、幅の調整でマージンを表現します。 */
    width: calc(100% - (12px * 2));
    min-width: var(--minwidth-phone);
    max-width: 800px;
    /* margin を指定すると中央に表示されないようになってしまうため、高さの調整でマージンを表現します。 */
    height: calc(100% - (12px * 2));
}

.dialog-container {
    display: flex;
    gap: var(--gap-small);
    flex-direction: column;
    height: 100%;
}

.dialog-content {
    flex: 1;
}

.dialog-operation-block {
    display: flex;
    gap: var(--gap-small);
    justify-content: center;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 16px;
    /* <button> はユーザーエージェントで font-family が上書きされるようなので、設定します。*/
    font-family: var(--ff-base);
    white-space: nowrap;
    cursor: pointer;
    border-style: none;
    border-radius: var(--br-small);
}

.button_primary {
    background-color: var(--bc-accent);
}

@media (hover: hover) {
    .button_primary:hover {
        background-color: color-mix(in srgb, var(--bc-accent), #ffffff 10%);
    }
}

@media (hover: none) {
    .button_primary:active {
        background-color: color-mix(in srgb, var(--bc-accent), #ffffff 10%);
    }
}

/* ========================================================================= */
/* Partial Styles: footer                                                    */
/* ========================================================================= */
.footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    /* ビューの横幅にあわせて、高さを調整します。 */
    height: 20vw;
    /* ビューの横幅が一定より小さくなった場合、それ以降は一定の高さとします。画像の実サイズとあわせる必要があります。 */
    min-height: 160px;
    /* 背景画像の上端にグラデーションがかかっている影響で、上マージンは若干大きくします。 */
    padding: 40px var(--mg-page-horiz) 20px var(--mg-page-horiz);
    background-image: url('/images/footer.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    font-weight: var(--fw-bold);
    text-shadow: var(--ts-clarify);
}

/* ========================================================================= */
/* Partial Styles: semantics                                                 */
/* ========================================================================= */
.strong {
    font-weight: var(--fw-bold);
}

.strong-super {
    font-weight: var(--fw-bold);
    color: var(--bc-main);
}

/* ========================================================================= */
/* Partial Styles: socials                                                   */
/* ========================================================================= */
.social-link {
    display: block;
    padding: 8px;
    border-style: solid;
    border-width: 1px;
    border-radius: var(--br-small);
    transition: var(--tr-hover);
}

@media (hover: hover) {
    .social-link:hover {
        color: var(--uc-icon-hover);
    }
}

@media (hover: none) {
    .social-link:active {
        color: var(--uc-icon-hover);
    }
}

.social-link_x {
    color: var(--fc-x);
    border-color: var(--fc-x);
}

@media (hover: hover) {
    .social-link_x:hover {
        background-color: var(--fc-x);
    }
}

@media (hover: none) {
    .social-link_x:active {
        background-color: var(--fc-x);
    }
}

.social-icon-image {
    display: block;
    width: 16px;
    height: 16px;
}

/* ========================================================================= */
/* Keyframes                                                                 */
/* ========================================================================= */
@keyframes kf-sunset {

    0%,
    100% {
        filter:
            drop-shadow(0 0 2px var(--ec-sunset-light)) drop-shadow(0 0 8px var(--ec-sunset-dark));
    }

    50% {
        filter:
            drop-shadow(0 0 4px var(--ec-sunset-light)) drop-shadow(0 0 12px var(--ec-sunset-dark));
    }
}