@charset "utf-8";

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td,
xmp {
    margin: 0;
    padding: 0
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

fieldset,
img {
    border: 0
}

ol,
ul {
    list-style: none
}

caption,
th {
    text-align: left
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: normal
}

* {
    box-sizing: border-box;
}

body {
    min-height: 100dvh;

    color: #262626;
    background-color: #f4f5f7;
}

img {
    max-width: 100%;
    vertical-align: bottom;
}

input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-size: 100%
}

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

a,
button {
    cursor: pointer;
}

/* reset end */

:root {
    /* 文字色 */
    --font-black2: #222;
    --font-black3: #333;
    --font-black4: #444;
    --font-black7: #777;
    --font-pink: #c45c8b;
    --font-darkpink: #a44b73;
    --font-white: #fff;
    --font-darkwhite: #ccc;
    --font-orange: #f76c6c;


    /* 背景色 */
    --header-backcolor: #fdf5f7;
    --body-backcolor: #f8f4f6;
    --button-backcolor: #c45c8b;
    --footer-backcolor: #222;

    /* フォントサイズ */
    --font-size-ss: 13px;
    --font-size-s: 16px;
    --font-size-m: 20px;
    --font-size-l: 24px;

    /* 余白サイズ */
    --spacing-ss: 8px;
    --spacing-s: 16px;
    --spacing-m: 24px;
    --spacing-l: 40px;
}


/* 基本スタイル */
body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    margin: 0 auto;
    padding: 0;
    background-color: #f8f4f6;
    position: relative;


    /* ヘッダー */
    header {
        background-color: #fdf5f7;
        position: relative;


        .logo {
            padding: 8px 14px;

            h1 {
                font-size: 28px;
                margin: 4px 0;
            }

            a {
                text-decoration: none;
                color: #c45c8b;
            }

            .subtitle {
                display: block;
                font-size: 14.4px;
                color: #444;
                margin-top: 6px;

            }
        }

        .header-description {
            font-size: 13.6px;
            color: #777;
            margin-top: 3px;
        }

    }

    .button-sp {
        display: none;

        @media(width <=768px) {
            width: fit-content;
            display: block;
            position: fixed;
            top: 4px;
            right: 70px;
            z-index: 100;

            a {
                height: 52px;

                display: inline-flex;
                align-items: center;
                background-color: #c45c8b;
                color: white;
                text-decoration: none;
                padding: 0.5rem 1rem;
                border: solid 2px var(--font-black3);
                border-radius: 6px;
                font-weight: bold;
                transition: background-color 0.3s;

                &:hover {
                    background-color: #a44b73;
                }

                img {
                    height: 24px;
                    margin-right: 8px;
                }
            }
        }

    }

    /* ハンバーガーメニュー全体 */
    .hamburger-menu {
        display: none;
        right: 1rem;
        z-index: 100;

        @media(width <=768px) {
            display: block;
            position: fixed;
            top: 4px;
            background-color: var(--font-black3);
            padding: 5px;
            border-radius: 5px;
            height: 52px;

            .menu-btn {
                position: relative;
                display: block;
                width: 40px;
                height: 30px;
                cursor: pointer;
                z-index: 1001;

                span,
                &::before,
                &::after {
                    content: '';
                    display: block;
                    height: 4px;
                    width: 100%;
                    background: var(--font-white);
                    border-radius: 2px;
                    position: absolute;
                    transition: 0.3s;
                }

                span {
                    top: -20px;
                }

                &::before {
                    top: -30px;
                }

                &::after {
                    bottom: 36px;
                }
            }

            .m-div {
                text-align: center;
                font-size: 0.75rem;
                color: var(--font-white);
                margin-top: 32px;
                position: relative;
                top: -4px;
            }

            #menu-btn-check:checked+.menu-btn {
                &::before {
                    transform: rotate(45deg);
                    top: -18px;
                }

                &::after {
                    transform: rotate(-45deg);
                    bottom: 44px;
                }

                span {
                    opacity: 0;
                }
            }

            .menu-content {
                display: none;
                position: absolute;
                top: 50px;
                right: 0;
                width: 250px;
                background: var(--font-black3);
                border: 1px solid #ccc;
                border-radius: 8px;
                box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
                z-index: 1000;
                padding: 20px;

                .nav-list--sp {
                    list-style: none;
                    padding: 0;
                    margin: 0;

                    li {
                        margin-bottom: 15px;

                        a {
                            text-decoration: none;
                            color: var(--font-white);
                            font-size: 1rem;
                        }
                    }
                }
            }

            #menu-btn-check:checked~.menu-content {
                display: block;
            }

            #menu-btn-check {
                display: none;
            }
        }
    }

    /* ナビゲーション */
    .nav {
        padding: 1rem;
        background-color: var(--font-black3);
        display: flex;
        gap: 20px;
        align-items: center;
        justify-content: center;
        position: sticky;
        top: 0;
        z-index: 50;

        @media(width <=768px) {
            display: none;
        }

        .nav-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;

            li a {
                color: var(--font-white);
                font-weight: bold;

                &:hover {
                    color: #c45c8b;
                }
            }
        }

        .button {

            a {
                display: inline-flex;
                align-items: center;
                background-color: #c45c8b;
                color: white;
                text-decoration: none;
                padding: 0.5rem 1rem;
                border-radius: 6px;
                font-weight: bold;
                transition: background-color 0.3s;

                &:hover {
                    background-color: #a44b73;
                }

                img {
                    height: 24px;
                    margin-right: 8px;
                }
            }
        }
    }

    /* パンくずリスト */
    .breadcrumb {
        background-color: #ffe0b2;
        padding: 0.75rem 1rem;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
        font-size: 0.875rem;
        font-weight: 500;
        overflow-x: auto;

        ol {
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
            gap: 0.5rem;
            list-style: none;
            margin: 0;
            padding: 0;

            li {
                display: flex;
                align-items: center;

                a {
                    display: inline-flex;
                    align-items: center;
                    gap: 0.25rem;
                    color: inherit;
                    text-decoration: none;
                    transition: color 0.3s;

                    &:hover {
                        color: #c45c8b;
                    }

                    .icon {
                        display: flex;
                        align-items: center;
                    }

                    svg {
                        width: 1rem;
                        height: 1rem;
                        stroke: currentColor;
                    }
                }

                &.breadcrumb-separator {
                    display: flex;
                    align-items: center;

                    svg {
                        stroke: #999;
                    }
                }
            }
        }

        @media (width <=768px) {
            font-size: 0.75rem;
            padding: 0.5rem 0.75rem;
            border-radius: 6px;
        }
    }

    .site-footer {
        background-color: #222;
        color: #fff;
        padding: 40px 20px;
        font-size: 0.95rem;

        .footer-inner {
            max-width: 1100px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;

            .footer-logo {
                h2 {
                    font-size: 1.8rem;
                    margin-bottom: 0.5rem;
                }

                p {
                    font-size: 1rem;
                    color: #ccc;
                    margin-bottom: 1.5rem;
                }
            }

            .footer-nav {
                ul {
                    list-style: none;
                    padding: 0;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    gap: 1.2rem;
                    margin-bottom: 1.5rem;

                    a {
                        color: #fff;
                        text-decoration: none;
                        transition: color 0.3s;

                        &:hover {
                            color: #f76c6c;
                        }
                    }

                    @media(width <=600px) {
                        flex-direction: column;
                        gap: 0.6rem;
                    }
                }

                .footer-copy {
                    small {
                        color: #aaa;
                    }
                }
            }
        }
    }
}