:root {
    --color-pink: #F51199;
    --color-orange: #F34925;
    --color-blue: #135FD2;
    --color-green: #33C234;
    --color-yellow: #D7C500;
    --main-letter-color: #ffffff;
    --padding-topbottom: clamp(1.5rem, 0.3696rem + 3.4783vw, 3.5rem);
    --padding-leftright: clamp(2.5rem, -0.3261rem + 8.6957vw, 7.5rem);
    --font-family: "Roboto", 'Noto Sans JP', sans-serif;
    --font-family-japanese: 'Noto Sans JP', sans-serif;
    --font-family-english: "Roboto", sans-serif;
}

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

html {
    scroll-behavior: smooth;
}

body {
    text-rendering: optimizeLegibility;
    /* macOS/iOS Safari/Chrome向けのアンチエイリアシング設定 (補完的) */
    -webkit-font-smoothing: antialiased;
    /* macOS Firefox向けのアンチエイリアシング設定 (補完的) */
    -moz-osx-font-smoothing: grayscale;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    white-space: nowrap;
    /* テキストの折り返しを防ぐ */
    clip: rect(0 0 0 0);
    /* 描画領域をクリップ */
    overflow: hidden;
    /* はみ出した内容を隠す */
}

#wrapper {
    box-sizing: border-box;
    position: relative;
    background-color: var(--background-main-color);
    color: var(--main-letter-color);
    font-family: var(--font-family);
    font-size: 20px;
    width: 100%;
    /* min-height: 100vh; */
    /* font-feature-settings: "palt"; */
    padding-bottom: 10rem;
    background-image: url(../images/bg.webp);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center top;
    /* height:100vh; */
    line-height: 1.2;
}

.big {
    display: block;
}

.mid {
    display: none;
}

.sml {
    display: none;
}

.container {
    position: relative;
    width: 100%;
    padding-top: 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
        "monday title tuesday"
        "wednesday thursday friday"
        "about about about";
    row-gap: 1rem;
    column-gap: .5%;
}

.title img:first-of-type {
    position: relative;
    z-index: 10;
    /* アニメーションの指定 */
    animation: shrinkTitle 1.2s cubic-bezier(0.19, 1, 0.22, 1) forwards;

    /* 変化の基準点を要素の中央にする */
    transform-origin: center center;
}

@keyframes shrinkTitle {
    0% {
        opacity: 0;
        transform: scale(10);
        /* 開始時はページ全体に広がるレベルで拡大 */
        filter: blur(10px);
        /* 最初は少しぼかすと綺麗になります */
    }

    10% {
        opacity: 1;
        /* パッと表示させる */
    }

    100% {
        opacity: 1;
        transform: scale(1);
        /* 実際のサイズに戻る */
        filter: blur(0);
    }
}

.title {
    grid-area: title
}

.monday {
    grid-area: monday
}

.tuesday {
    grid-area: tuesday
}

.wednesday {
    grid-area: wednesday
}

.thursday {
    grid-area: thursday
}

.friday {
    grid-area: friday
}

.about {
    grid-area: about
}

article img {
    display: block;
    position: relative;
    width: 100%;
}

article.title {
    position: relative;
    display: flex;
    /* width: 480px; */
    padding-top: 11%;
    flex-direction: column;
    align-items: center;
    /* gap: 8px; */
}

article.day {
    position: relative;
    /* display: flex; */
    /* width: 480px; */
    /* height: 656px; */
    /* padding: 96.6% 6.6% 0 6.6%; */
    /* flex-direction: column;
    align-items: center;
    gap: 12px; */
}

.ppl {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
}

.links {
    position: absolute;
    display: flex;
    bottom: 2%;
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
    row-gap: auto;
    align-content: space-between;
    height: 29.3%;
    padding: 1% 8%;
    align-items: center;
    justify-content: space-evenly;
}


.links_wrapper {
    position: absolute;
    display: flex;
    bottom: 2%;
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
    row-gap: auto;
    height: 44.8%;
    align-content: space-between;
    padding: 1% 8%;
    align-items: center;
    justify-content: space-evenly;
}

.wednesday .links {
    bottom: 0;
    position: relative;
    width: 100%;
    padding: 0;
    align-content: space-between;
    align-items: center;
    justify-content: space-evenly;
    height: 50%;
}

.links_inami {
    position: relative;
    display: flex;
    padding: 8% 0 0 30%;
    flex-direction: column;
    align-items: center;
    flex: 1 0 0;
    align-self: stretch;
    justify-content: center;
}

article a,
article a:hover,
article a:visited {
    text-decoration: none;
    color: var(--main-letter-color);
    width: 100%;
}

.mail {
    position: relative;
    display: flex;
    padding: 16px 8px;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    border-radius: 16px;
    border: 2px solid #FFF;
}

.mail:hover,
.sns:hover {
    opacity: .8;
}

.mail li:first-of-type {
    width: clamp(1.875rem, 0.3049rem + 2.439vw, 2.5rem);
    height: clamp(1.875rem, 0.3049rem + 2.439vw, 2.5rem);
    aspect-ratio: 1/1;
}

.mail li:last-of-type {
    font-size: clamp(1.375rem, -0.1951rem + 2.439vw, 2rem);
    font-style: normal;
    font-weight: 900;
}

/* 伊波コーナー用ボタン縮小スタイル */
.inami_inner {
    display: flex;
    flex-direction: column;
    gap: 12%;
    width: 100%;
    justify-content: space-between;
}

.inami_inner .mail {
    padding: 6% 2%;
    border-radius: 8px;
    border: 1px solid #FFF;
}

.inami_inner .mail li:first-of-type {
    width: 1.2rem;
    height: 1.2rem;
}

.inami_inner .mail li:last-of-type {
    font-size: 1rem;
}

.inami_inner .sns {
    padding: 6% 2%;
}

.inami_inner .sns li:first-of-type {
    font-size: 12px;
    padding-top: 2px;
}

.inami_inner .sns li:last-of-type {
    font-size: 16px;
}

.monday .mail {
    background: var(--color-pink);
}

.tuesday .mail {
    background: var(--color-orange)
}

.wednesday .mail {
    background: var(--color-blue);
}

.thursday .mail {
    background: var(--color-green);
}

.friday .mail {
    background: var(--color-yellow);
}

.sns {
    position: relative;
    display: flex;
    padding: 16px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    background: #000;
}

.sns li:first-of-type {
    display: flex;
    padding-top: 6px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-style: normal;
    font-weight: 900;
}

.sns li:last-of-type {
    font-size: 32px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

.about {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: calc(100vw - var(--padding-leftright) * 2);
    margin: 4rem auto;
    /* 177.778% */
    flex: 1 0 0;
    padding: 2rem;
    /* 1. Fill (黒 20%) */
    background: rgba(0, 0, 0, 0.2);

    /* 2. Frost (すりガラスのぼかし) */
    /* 画像では Frost: 0 ですが、ガラスの質感を出したい場合は数px〜10px程度付与します */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    /* 3. 縁の光の反射 (100%白の透明度調整) */
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    /* 形状に合わせて調整 */

    /* 4. Light(-45°) / Depth / Refraction の立体感と屈折ハイライト */
    box-shadow:
        /* 左上(-45°)からの光ハイライト */
        inset 1.5px 1.5px 2px 0px rgba(255, 255, 255, 0.35),
        /* 右下への落ち影・屈折の厚み感 */
        inset -1.5px -1.5px 2px 0px rgba(0, 0, 0, 0.25),
        /* 外側のドロップシャドウ */
        0px 8px 24px rgba(0, 0, 0, 0.3);
}

.about p {
    color: #ffffff;
    text-align: center;
    font-size: clamp(1.625rem, 0.0549rem + 2.439vw, 2.25rem);
    font-style: normal;
    font-weight: 700;
    line-height: 1.6;
}

/* アニメーション */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 画面内に入ったとき（JSで付与） */
.fade-in.is-show {
    opacity: 1;
    transform: translateY(0);
}



/*===============================================
●style.css 画面の横幅が1032pxまで
===============================================*/
@media screen and (max-width: 1032px) {

    .container {
        position: relative;
        padding-top: 1rem;
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* ★2カラムで配置 */
        grid-template-areas:
            "title title"
            "monday tuesday"
            "wednesday thursday"
            "friday about";
        row-gap: 1.5rem;
        column-gap: 4%;
        width: 92%;
        margin: 0 auto;
    }

    article.title {
        padding-top: 1rem;
        width: 90%;
        margin: 0 auto;
    }

    .mail {
        position: relative;
        display: flex;
        padding: 6% 2%;
    }


    .mail li:last-of-type {
        font-size: clamp(1rem, 2vw, 1.4rem);
    }

    .sns {
        padding: 6%;
    }

    .sns li:first-of-type {
        font-size: 1.2rem;
    }


    .sns li:last-of-type {
        font-size: 1.5rem;
    }

    .about {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        /* width: calc(100vw - var(--padding-leftright) * 2); */
        /* margin: 4rem auto; */
        flex: 1 0 0;
        /* padding: 2rem; */
        background: rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        border: 1px solid rgba(255, 255, 255, 0.25);
        border-radius: 12px;
        box-shadow: inset 1.5px 1.5px 2px 0px rgba(255, 255, 255, 0.35), inset -1.5px -1.5px 2px 0px rgba(0, 0, 0, 0.25), 0px 8px 24px rgba(0, 0, 0, 0.3);
        padding: 1rem;
        /* height: 90%; */
        margin-top: 2%;
        margin-bottom: 2%;
        width: auto;
    }

    .about p {
        font-size: 24px;
        /* 36pxから縮小 */
        line-height: 1.8;
        /* 行間も可読性に合わせて調整 */
    }





    .mid {
        display: block;
    }
}

/*===============================================
●style.css 画面の横幅が600pxまで スマホ
===============================================*/
@media screen and (max-width: 600px) {

    #wrapper {
        position: relative;
        /* 親要素からはみ出さないようにクリップする */
        clip-path: inset(0);
    }

    #wrapper::before {
        content: "";
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: -1;
        /* コンテンツの裏側に配置 */

        /* 背景画像の設定 */
        background-image: url("../images/bg_s.webp");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .container {
        position: relative;
        padding-top: 1rem;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "title"
            "monday"
            "tuesday"
            "wednesday"
            "thursday"
            "friday"
            "about";
        row-gap: 1rem;
        column-gap: 0;
        width: 94%;
        margin: 0 auto;
    }

    .sml {
        display: block;
    }

    .mid {
        display: none;
    }

    .big {
        display: none;
    }

    /* 以下を追加 */
    #wrapper {
        font-size: 16px;
        /* 全体のベースフォントを20pxから16pxに落とす */
    }

    article.title {
        width: 90%;
        margin: 0 auto;
    }

    .mail {
        padding: 4% 2%;
        align-items: center;
    }

    .mail li:last-of-type {
        font-size: 1.25rem;
        /* 約20px相当 */
    }

    .sns {
        padding: 4%;
    }

    .sns li:first-of-type {
        font-size: 14px;
    }

    .sns li:last-of-type {
        font-size: 22px;
    }

    .about {
        width: 100%;
    }

    .about p {
        font-size: 18px;
        /* スマホで読みやすいサイズに */
        line-height: 1.6;
    }

    .inami_inner {
        gap: 8%;
    }
}

/*===============================================
●style.css 画面の横幅が360pxまで スマホ
===============================================*/
@media screen and (max-width: 360px) {

    /* 以下を追加 */
    #wrapper {
        font-size: 14px;
    }

    .mail li:last-of-type {
        font-size: 1rem;
        /* 約14〜16px相当 */
    }

    .sns li:first-of-type {
        font-size: 12px;
    }

    .sns li:last-of-type {
        font-size: 18px;
    }

    .about p {
        font-size: 16px;
        line-height: 1.5;
    }
}