@charset "UTF-8";

@import url('//fonts.googleapis.com/css2?family=Kiwi+Maru&display=swap');
@import url('//fonts.googleapis.com/css2?family=Wendy+One&display=swap');

*,
*::before,
*::after {
  box-sizing: border-box;
}

body, h1, h2, h3, h4, h5, h6, p, ul, ol, li,
figure, blockquote, dl, dd {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}

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

body {
  line-height: 1.5;
  font-family: sans-serif;
  background-color: #fff;
  color: #000;
}

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

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

input, textarea, select, button {
  font: inherit;
}

/* ==== variable ==== */

:root {
    --color-primary: #7a1e1e;
    --color-secondary: #cda34f;
    --color-accent: #8e7b6b;
    --color-bg: #faf7f2;
    --color-font: #2b1e15;
    --color-link: #b3925e;

    --font-family: 'Kiwi Maru', sans-serif;
}

/* ==== base ==== */

html, body {
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

html{
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body{
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-font);
    background: linear-gradient(135deg,var(--color-bg) 0%,#f3eee7 50%,var(--color-bg) 100%);
    background-color: var(--color-bg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    &::before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        background: url(../img/bg-main_noise.png) 50% / calc(50 / var(--vw-base-size) * 100vw) auto;
    }
}


/* ==== layout ==== */

.l-wrapper{
    display: grid;
    grid-template: 
        "header main" auto
        "sidebar main" 1fr
        "footer footer" auto /
        240px 1fr;
    gap: 0 1rem;
    min-height: 100vh;
    @media (width <= 760px)  {
        grid-template: 
        "header" auto
        "main" 1fr
        "footer" auto /
        100vw 1fr;
    }
}
.l-header{
    grid-area: header;
    
    @media (width <= 760px)  {
        display: grid;
        grid-template-columns: 1fr max-content;
        gap: 2rem;
        padding: 1rem;
    }
    .header_sitename{
        container-type: inline-size;
        padding: 1.6rem 1.6rem 0;
        font-family: 'Wendy One', sans-serif;
        font-weight: normal;
        line-height: 1.2;
        color: var(--color-primary);
        @media (width <= 760px)  {
            padding: 0;
        }
        a{
            @media (width <= 760px)  {
                display: grid;
                grid-template-columns: max-content 1fr;
                grid-column: 1fr 1fr;
                align-items: center;
                gap: 0 0.6rem;
            }
        }
        span{
            display: block;
            font-size: 21.5cqw;
            @media (width <= 760px)  {
                line-height: 1;
                font-size: 5cqw;
                align-self: flex-end;
                &:nth-last-child(1){
                    align-self: flex-start;
                }
            }
        }
        em{
            font-style: normal;
            color: var(--color-secondary)
        }
        .name{
            font-size: 35cqw;
            line-height: 1;
            @media (width <= 760px)  {
                font-size: 14cqw;
                grid-area: 1 / 1 / span 2 / span 1;
            }
        }
    }
    .header_rose{
        container-type: inline-size;
        display: grid;
        justify-content: center;
        padding: 1rem 0;
        @media (width <= 760px)  {
            container-type: inherit;
            padding: 0;
            cursor: pointer;
            &.is-open{
                &::before{
                    transform: rotate(375deg);
                }
            }
        }
        &::before{
            content: "";
            display: inline-block;
            width: 40cqw;
            aspect-ratio: 1 / 1;
            mask-position: center center;
            mask-repeat: no-repeat;
            mask-size: contain;
            mask-image: url(../img/icon-rose.svg);
            background: var(--color-primary);     

            @media (width <= 760px)  {
                width: 10cqw;
                transition: transform 0.3s;

            }
        }
    }
    
}
.l-footer{
    grid-area: footer;

    border-top: 2px solid color-mix(in srgb, var(--color-accent) 10%, transparent);
    padding: 1rem 0;
    text-align: center;
}
.l-main{
    grid-area: main;

    padding: 2rem 0 4rem;
    display: grid;
    grid-template-rows: max-content 1fr;
    gap: 3rem;
    @media (width <= 760px)  {
        padding: 1rem 0 2rem;
        gap: 1rem;
    }
}
.l-sidebar{
    grid-area: sidebar;

    @media (width <= 760px)  {
        grid-area: 2 / 1 / span 1 / span 1;
        width: 100vw;
        height: 100%;
        background-color: var(--color-bg);
        position: relative;
        left: -100vw;
        transition: left 0.3s ease;
        &.is-open{
            left: 0;
        }
    }
    .sidebar_wrap{
        position: sticky;
        padding: 0 1.6rem 2rem;
    }
    .sidebar_hr{
        border: none;
        &::after{
            content: "";
            display: inline-block;
            width: 100%;
            height: 1rem;
            mask-position: center center;
            mask-repeat: no-repeat;
            mask-size: contain;
            mask-image: url(../img/icon-sword.svg);
            background: var(--color-primary);
        }
        &:nth-of-type(2){
            &::after{
                transform: rotate(180deg);
            }
        }
    }
}
.l-inner{
    padding: 0 2rem;
    @media (width <= 760px)  {
        width: 100vw;
        padding: 0 1rem;
    }
}


.l-gnav{
    .gnav_menu{
        .menu-item{
            a{
                display: grid;
                grid-template-columns: max-content 1fr;
                align-items: center;
                gap: 0.4rem;
                padding: 0.4rem 0;
            }
            a::before{
                content: "";
                display: inline-block;
                width: 1rem;
                height: 1rem;
                mask-position: center center;
                mask-repeat: no-repeat;
                mask-size: contain;
                mask-image: url(../img/icon-club.svg);
                background: var(--color-accent);
            }
        }
        .sub-menu{
            margin-left: 1rem;
        }
    }
}
.l-subnav{
    .subnav_menu{
        .menu-item{
            a{
                display: grid;
                grid-template-columns: max-content 1fr;
                align-items: center;
                gap: 0.4rem;
                padding: 0.4rem 0;
            }
            a::before{
                content: "";
                display: inline-block;
                width: 1rem;
                height: 1rem;
                mask-position: center center;
                mask-repeat: no-repeat;
                mask-size: contain;
                mask-image: url(../img/icon-club.svg);
                background: var(--color-accent);
            }
        }
    }
}


/* ==== compornent ==== */

.c-patetitle{
    padding: 2rem 0;
    @media (width <= 760px)  {
        padding-left: 1rem;
    }
    .title{
        display: grid;
        grid-template-columns: max-content 1fr;
        align-items: center;
        gap: 1rem;
        font-size: 2rem;
        font-weight: bold;
        color: var(--color-primary);
        line-height: 1.2;
        &::after{
            content: "";
            height: 1px;
            width: 100%;
            background: #7a1e1e;
        }
        ::first-letter{
            color: var(--color-secondary)
        }
    }
    &:has(.cat_name){
        padding: 1rem 0;
        .cat_name{
            font-size: 1rem;
            color: var(--color-primary);
            text-indent: 0.2rem;
        }
    }
}

.c-heading02{
    color: var(--color-accent);
    font-size: 1.5rem;
}

.c-heading03{
    font-weight: bold;
    font-size: larger;
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: center;
    gap: 0.4rem;
    margin: 1rem 0;
    &::before{
        content: "";
        display: inline-block;
        width: 2rem;
        aspect-ratio: 1 / 1;
        mask-position: center center;
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-image: url(../img/icon-king.svg);
        background: var(--color-accent);
    }
}

.c-block_wrap{
    display: grid;
    gap: 2rem;
    .wp-block-list{
        li{
            margin-left: 1rem;
            text-indent: -1rem;
            &::before{
                content: "・";
                margin-right: 0.2rem;
                vertical-align: bottom;
            }
        }
    }
    .wp-block-separator{
        height: 1px;
        width: 100%;
        background-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
        border: none;
    }
}

.c-list_notes{
    .list_item{
        font-size: smaller;
        color: color-mix(in srgb, var(--color-font) 60%, transparent);
        margin-left: 1.6rem;
        text-indent: -1rem;
        &::before{
            display: inline-block;
            content: "※";
            vertical-align: bottom;
            margin-right: 0.4rem;
            text-indent: 0;
        }
    }
}

/* ==== utility ==== */

.u-mt1{
    margin-top: 1rem;
}
.u-mt2{
    margin-top: 2rem;
}