/* ========================================
   KAGENEKO-CHAN
   Common CSS
======================================== */

/* 自分用メモ 

    Headerより上の対象をしていない効果は、1枚やプレハブを対象に発動しているというよりも；
    環境設定やプロジェクト設定...フィールドその物を対象として発動しているということに近いか...？
    「*」のついた効果は、「フィールドの全てのHTML要素に以下の効果を適用する。」らしい。増殖するGや、効果エンチャント系の効果に似ているか...。天気に似ている。
    「.○○」系はHTML側でクラス特性を付与した階層及び1体を対象として発動させている。
*/

/* ========================================
   Reset / Base
======================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background-color: #F5F6F7;
    color: #15171A;
    font-family: "Noto Sans JP", sans-serif;
    line-height: 1.7;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}


/* ========================================
   Common Elements
======================================== */

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

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

button {
    font: inherit;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}


/* ========================================
   <<<<<<<<<< Header >>>>>>>>>>
======================================== */

.site-header {
    width: 100%;
    background-color: #F5F6F7;
    border-bottom: 1px solid #D7DBDF;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(1200px, calc(100% - 40px));
    height: 72px;
    margin-inline: auto;
}

.site-header__logo {
    font-family: "Montserrat", sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

/*ハンバーガーメニューをエクシーズ召喚*/
/*(html側のヘッダのspan3体を対象にX召喚)*/
.site-header__menu-button {
    display: flex;
    flex-direction: column; /* ← そういう動きもあるのか...ふぁみちゃん的おもしろポイントなのだ。列に効果の及ぶ範囲を限定する事でハンバーガーメニューを作ることができる。かなりの巧さ旨さを感じる。*/
    justify-content: center;
    gap: 5px;

    width: 42px;
    height: 42px;

    padding: 8px;

    background: none;
    border: none;

    cursor: pointer;
}

.site-header__menu-button span {
    display: block;

    width: 100%;
    height: 2px;

    background-color: #202328;

    /* ハンバーガーを開いた際にハンバーガーを変形させて✕にするように追加。*/
    transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

    /* メニューOPEN時は三本線を×へ */
    .site-header__menu-button.is-open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .site-header__menu-button.is-open span:nth-child(2) {
        opacity: 0;
    }

    .site-header__menu-button.is-open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

/* ========================================
   Header Navigation
======================================== */

.site-header {
    position: relative;
    z-index: 1000;
}

.site-header__inner {
    position: relative;
}


/* メニュー本体 */
.site-header__nav {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    padding: 8px;
    background-color: #FFFFFF;
    border: 1px solid #D7DBDF;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    /* 普段は隠す */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}


    /* JSからis-openが付いた時 */
    .site-header__nav.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }


/* リンクを縦に並べる */
.site-header__nav-list {
    display: flex;
    flex-direction: column;
}


    /* 各メニュー */
    .site-header__nav-list a {
        display: block;
        padding: 10px 14px;
        border-radius: 6px;
        font-family: "Montserrat", sans-serif;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.08em;
        transition: background-color 0.2s, color 0.2s;
    }


        .site-header__nav-list a:hover {
            background-color: #202328;
            color: #FFFFFF;
        }

/* ========================================
   HEADER - Mobile
======================================== */

@media (max-width: 768px) {

    .site-header__inner {
        width: calc(100% - 24px);
        height: 56px;
    }

    .site-header__logo {
        font-size: 16px;
        letter-spacing: 0.08em;
    }

    .site-header__menu-button {
        width: 36px;
        height: 36px;
        padding: 7px;
    }

        .site-header__menu-button span {
            height: 2px;
        }
}

/* ========================================
   <<<<<<<<<< Footer >>>>>>>>>>
======================================== */

.site-footer {
    position: relative;
    margin-top: 100px;
    background-color: #202328;
    color: #FFFFFF;
}

.site-footer__inner {
    width: min(1200px, calc(100% - 40px));
    margin-inline: auto;
    padding: 48px 0 32px;
}


/* Logo */

.site-footer__logo {
    display: inline-block;
    margin-bottom: 24px;
    font-family: "Montserrat", sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.08em;
}


/* Navigation */

.site-footer__nav {
    margin-bottom: 32px;
}

.site-footer__nav-list {
    display: flex;
    gap: 24px;
}

    .site-footer__nav-list a {
        font-family: "Montserrat", sans-serif;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0.08em;
        color: #D7DBDF;
        transition: color 0.2s;
    }

        .site-footer__nav-list a:hover {
            color: #D94F55;
        }


/* Copyright */

.site-footer__copyright {
    margin-bottom: 0;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    color: #AEB4BA;
}


    /* ========================================
   Footer Tab Decoration
======================================== */

    .site-footer::before {
        content: "";
        position: absolute;
        left: 0;
        top: -32px;
        width: 100%;
        height: 34px;
        background-color: #202328;
        clip-path: polygon( 0 100%, 72% 100%, 76% 0, 100% 0, 100% 100% );
        pointer-events: none;
    }

@media (max-width: 768px) {

    .site-footer::before {
        top: -22px;
        height: 22px;
        clip-path: polygon( 0 100%, 68% 100%, 75% 0, 100% 0, 100% 100% );
    }
}

/* ========================================
   Footer - Mobile
======================================== */

@media (max-width: 768px) {

    .site-footer {
        margin-top: 72px;
    }

    .site-footer__nav-list {
        flex-wrap: wrap;
        gap: 12px 20px;
    }
}