/* =========================================================
   Common.css
   「-緋彩乃式- official site」
   全ページ共通スタイル
   ========================================================= */


/* ---------------------------------------------------------
   1. 基本設定
   --------------------------------------------------------- */

:root {
    /* 基本カラー */
    --color-black: #000000;
    --color-sumi: #111111;
    --color-white: #f5f5f2;
    --color-red: #6e1118;
    --color-gold: #b89a52;

    /* 基本フォント */
    --font-serif:
        "Noto Serif JP",
        "Yu Mincho",
        "Hiragino Mincho ProN",
        serif;

    --font-sans:
        "Noto Sans JP",
        "Yu Gothic",
        "Hiragino Kaku Gothic ProN",
        sans-serif;
}


/* ---------------------------------------------------------
   2. リセット
   --------------------------------------------------------- */

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

html {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

    min-width: 320px;

    background-color: var(--color-black);
    color: var(--color-white);

    font-family: var(--font-serif);
    line-height: 1.8;

    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure {
    margin: 0;
    padding: 0;
}

ul,
ol {
    list-style: none;
}

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

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

button {
    border: 0;
    padding: 0;
    background: none;
    color: inherit;
}

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


/* ---------------------------------------------------------
   3. 共通レイアウト
   --------------------------------------------------------- */

main {
    width: 100%;
}

section {
    position: relative;
}


/* ---------------------------------------------------------
   4. 共通リンク
   --------------------------------------------------------- */

a {
    transition:
        opacity 0.3s ease,
        color 0.3s ease;
}

a:hover {
    opacity: 0.75;
}

a:focus-visible,
button:focus-visible {
    outline: 1px solid var(--color-gold);
    outline-offset: 4px;
}


/* ---------------------------------------------------------
   5. 共通Header
   --------------------------------------------------------- */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;

    width: 100%;
}


/* ---------------------------------------------------------
   6. 共通Side Menu
   --------------------------------------------------------- */

.side-menu {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 900;

    height: 100vh;
}


/* ---------------------------------------------------------
   7. 共通Footer
   --------------------------------------------------------- */

.site-footer {
    position: relative;

    width: 100%;
    padding: 2rem 1rem;

    text-align: center;
}


/* ---------------------------------------------------------
   8. 共通Top Button
   --------------------------------------------------------- */

.top-button {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 800;

    display: block;

    visibility: hidden;
    opacity: 0;
    pointer-events: none;

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}


/* ---------------------------------------------------------
   9. アクセシビリティ
   --------------------------------------------------------- */

/*
   キーボード操作時のみ表示されるフォーカスリングを
   消さない。
*/

:focus:not(:focus-visible) {
    outline: none;
}


/* ---------------------------------------------------------
   10. Reduced Motion
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ---------------------------------------------------------
   11. スマートフォン
   --------------------------------------------------------- */

@media (max-width: 767px) {

    body {
        font-size: 15px;
    }

    .site-footer {
        padding:
            1.5rem 1rem;
    }

    .top-button {
        right: 1rem;
        bottom: 1rem;
    }
}