:root {
    --black: #000000;
    --black-1c: #1c1c1c;
    --black-24: #242424;
    --black-40: rgba(0, 0, 0, 0.4);
    --black-45: rgba(0, 0, 0, 0.45);
    --black-54: rgba(0, 0, 0, 0.54);
    --black-68: rgba(0, 0, 0, 0.68);
    --black-70: rgba(0, 0, 0, 0.7);
    --black-85: rgba(0, 0, 0, 0.85);
    --black-88: rgba(0, 0, 0, 0.88);
    --white: #ffffff;
    --white-10: rgba(255, 255, 255, 0.1);
    --white-54: rgba(255, 255, 255, 0.54);
    --white-60: rgba(255, 255, 255, 0.6);
    --white-70: rgba(255, 255, 255, 0.7);
    --white-73: rgba(255, 255, 255, 0.73);
    --white-78: rgba(255, 255, 255, 0.78);
    --white-80: rgba(255, 255, 255, 0.8);
    --white-86: rgba(255, 255, 255, 0.86);
    --white-90: rgba(255, 255, 255, 0.9);
    --beige: #d6c4a2;
    --greyish-brown: #4e4e4e;
    --greyish-brown-2: #585858;
    --greyish-brown-3: rgba(78, 78, 78, 0.87);
    --greyish-brown-4: #606060;
    --very-light-brown: #e9d09d;
    --very-light-brown-67: rgba(202, 179, 135, 0.67);
    --very-light-pink-70: rgba(255, 253, 249, 0.7);
    --cerulean-blue: #0d6fec;
    --header-height: 47px;
    --spacing: 3.75rem;
    --spacing-xs: 0.5rem;
    --spacing-2: 2.5rem;
    --spacing-3: 4.375rem;
    --spacing-4: 1.875rem;
    --spacing-5: 0.688rem;
    --spacing-6: 1.063rem;
    --spacing-7: 0.938rem;
    --spacing-8: 1.75rem;
    --spacing-9: 0.75rem;
    --spacing-10: 1.5rem;
    --spacing-11: 0.313rem;
    --spacing-12: 1.125rem;
    --spacing-13: 2.313rem;
    --spacing-14: 0.875rem;
    --spacing-15: 4.688rem;
    --spacing-16: 0.625rem;
    --spacing-17: 7.5rem;
}

html, body {
    width: 100%;
    height: 100%;
}
/* bodyのメイン指定: scrollをfixedに戻すが、iOS対策を強化 */
body {
    background: url(../img/bg/page/wallpaper.png) no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed; /* 固定に戻す */
    padding-top: var(--header-height);
    min-height: 100vh; /* 下まで最大化（そのまま） */
    overflow-y: auto; /* スクロール可能（前回の修正そのまま） */
    -webkit-overflow-scrolling: touch; /* iOSスムーズスクロール（そのまま） */
}

/* iOS Safari特有のナビゲーションバー対策（拡張） */
@supports (-webkit-touch-callout: none) {
    body {
        min-height: -webkit-fill-available; /* バー伸縮対応（そのまま） */
        background-attachment: scroll; /* iOS限定でfixedをscrollにフォールバック（途切れと揺れ防止） */
    }
    html {
        height: -webkit-fill-available; /* htmlにも適用してビューポート全体をカバー */
    }
}

/* 背景途切れ防止のための追加擬似要素（オプション: fixed背景を擬似固定） */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: inherit; /* bodyの背景を継承 */
    z-index: -1; /* コンテンツの下に */
    pointer-events: none; /* クリック干渉なし */
}

@supports (-webkit-touch-callout: none) {
    body::before {
        height: -webkit-fill-available; /* iOSバー対応 */
    }
}

@media (hover: none) {
    body {
        background-attachment: scroll;
        background-size: 100% 100vh;
        background-position-x: 0;
    }
 }

.container {
    max-width: 100%!important;
}

:focus {
    outline: none!important;
}
a::selection,
.text__title::selection,
.text__title-white::selection {
    background-color: transparent;
}

/*
Assets
*/
.bg__menu-mobile {
    background-color: var(--white-60);
}

/*
Texts
*/
.text__title-white,
.text__title-beige {
    display: inline-block;
    margin-top: var(--spacing-7);
}
.text__date {
    display: inline-block;
}
#main__post-block__date-types p.text__date:last-child {
    margin-left: var(--spacing-14);
}
.text__date-active::before {
    content: '';
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background-color: var(--very-light-brown);
    display: inline-block;
    margin-right: 3px;
    margin-bottom: 2px;
    vertical-align: middle;
}
.text__year {
    margin-bottom: var(--spacing-14);
}
.text__title-archive {
    display: inline-block;
}

/*
Header
*/
header {
    background-color: var(--white);
    height: var(--header-height);
}

/*
Main
*/
main {
    -webkit-transition: background-color .3s ease-in-out;
    transition: background-color .3s ease-in-out;
}

#main__post-block {
    padding: 46px 33px calc( 65px - var(--spacing-7) );
}
#main__post-block h1 {
    border-bottom: solid 5px var(--very-light-brown);
    display: inline-block;
    padding-bottom: var(--spacing-16);
}
#main__post-block > div > .text__date:last-child {
    margin-left: var(--spacing-14);
}
#main__post-block__date-types {
    margin-bottom: 25px;
}
#main__post-block__years .main__post-block__year {
    margin-bottom: 51px;
}
#main__post-block__years .main__post-block__year:last-child {
    margin-bottom: 0;
}
.main__post-block__row {
    margin-bottom: 13px;
}
#main__post-block__years .main__post-block__row:last-child {
    margin-bottom: 0;
}
.main__post-block__row .text__title-archive {
    margin-left: var(--spacing-14);
}

/*
Media Queries
*/
@media only screen and (min-width: 768px) {

    :root {
        --header-height: 87px;
    }
    body {
        background-image: url(../img/bg/page/wallpaper-md.png);
    }
    .container {
        padding-left: var(--spacing-4);
        padding-right: var(--spacing-4);
    }

    .hamburger {
        padding-top: 34px!important;
    }
    .hamburger-box {
        width: 37px!important;
        height: 22px!important;
    }
    .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
        width: 37px!important;
    }
    .hamburger-inner::before {
        top: -10px!important;
    }
    .hamburger-inner::after {
        bottom: -10px!important;
    }
    .hamburger--collapse .hamburger-inner::after {
        top: -20px!important;
    }
    .hamburger--collapse.is-active .hamburger-inner {
        -webkit-transform: translate3d(0, -10px, 0) rotate(-45deg)!important;
                transform: translate3d(0, -10px, 0) rotate(-45deg)!important;
    }
    .hamburger--collapse.is-active .hamburger-inner::after,
    .hamburger--collapse.is-active .hamburger-inner::before {
        top: 0!important;
    }

    .text__title-beige {
        margin-top: var(--spacing-4);
    }
    #main__post-block__years .main__post-block__year {
        margin-bottom: 42px;
    }
    #main__post-block__date-types p.text__date:last-child {
        margin-left: var(--spacing-9);
    }
    .text__date-active::before {
        width: 13px;
        height: 13px;
    }
    .text__year {
        margin-bottom: 13px;
    }
    .main__post-block__row .text__title-archive {
        margin-left: 0;
    }

    #main__post-block {
        padding: 77px 42px calc( 65px - var(--spacing-7) );
    }
    #main__post-block__date-types {
        margin-bottom: 38px;
    }
    .main__post-block__row {
        margin-bottom: var(--spacing-12);
    }


}
@media only screen and (min-width: 992px) {

    :root {
        --header-height: 70px;
    }

    body {
        background-image: url(../img/bg/page/wallpaper-lg.png);
        padding-top: 0;
    }

    header {
        padding-top: var(--spacing-4);
        background-color: transparent;
        position: relative !important;
        top: 0 !important;
    }

    main {
        padding-top: 58px;
    }

    #main__post-block {
        background-color: var(--very-light-pink-70);
        max-width: 725px;
        margin-bottom: var(--spacing-7);
        padding: 65px 85px calc( 65px - var(--spacing-7) );
    }
    #main__post-block h1 {
        margin-bottom: 35px !important;
        padding-bottom: 10px;
    }
    #main__post-block__date-types {
        margin-bottom: 0;
    }
    .text__date-active::before {
        width: 11px;
        height: 11px;
    }
    #main__post-block__years .main__post-block__year {
        margin-bottom: var(--spacing-2);
    }
    .text__year {
        margin-bottom: var(--spacing-14);
    }
    .main__post-block__row {
        margin-bottom: var(--spacing-9);
    }

}

@media only screen and (min-width: 1300px) {
    #main__post-block {
        max-width: 763px;
        padding: 85px 90px calc( 65px - var(--spacing-7) );
    }
}
@media only screen and (min-width: 1400px) {
    #main__post-block {
        max-width: 863px;
        padding: 107px 139px calc( 65px - var(--spacing-7) );
    }
}

@media only screen and (min-width: 1690px) {

    body {
        background-image: url(../img/bg/page/wallpaper-xl.png);
    }

    .container {
        padding-left: var(--spacing);
        padding-right: var(--spacing);
    }

    main {
        padding-top: 67px;
    }

    #main__post-block {
        max-width: 963px;
        margin-top: 0;
    }
    #main__post-block__date-types p.text__date:last-child {
        margin-left: 23px;
    }

    .text__date-active::before {
        width: 13px;
        height: 13px;
    }
    #main__post-block__years .main__post-block__year {
        margin-bottom: 58px;
    }
    .text__year {
        margin-bottom: 21px;
    }
    .main__post-block__row {
        margin-bottom: var(--spacing-12);
    }

}

/*
Max Width 767px & DPI 2
*/
@media only screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2),
    only screen and (max-width: 767px) and (min--moz-device-pixel-ratio: 2),
    only screen and (max-width: 767px) and (-o-min-device-pixel-ratio: 2/1),
    only screen and (max-width: 767px) and (min-device-pixel-ratio: 2),
    only screen and (max-width: 767px) and (min-resolution: 192dpi),
    only screen and (max-width: 767px) and (min-resolution: 2dppx) {

    body {
        background-image: url(../img/bg/page/wallpaper@2x.png);
    }

}

/*
Max Width 767px & DPI 3
*/
@media only screen and (max-width: 767px) and (-o-min-device-pixel-ratio: 9/4),
       only screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2.25),
       only screen and (max-width: 767px) and (min-device-pixel-ratio: 2.25),
       only screen and (max-width: 767px) and (min-resolution: 2.25dppx) {

    body {
        background-image: url(../img/bg/page/wallpaper@3x.png);
    }

}

/*
Min Width 768px & DPI 2
*/
@media only screen and (min-width: 768px) and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min-width: 768px) and (min--moz-device-pixel-ratio: 2),
    only screen and (min-width: 768px) and (-o-min-device-pixel-ratio: 2/1),
    only screen and (min-width: 768px) and (min-device-pixel-ratio: 2),
    only screen and (min-width: 768px) and (min-resolution: 192dpi),
    only screen and (min-width: 768px) and (min-resolution: 2dppx) {

    body {
        background-image: url(../img/bg/page/wallpaper-md@2x.png);
    }

}

/*
Min Width 992px & DPI 2
*/
@media only screen and (min-width: 992px) and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min-width: 992px) and (min--moz-device-pixel-ratio: 2),
    only screen and (min-width: 992px) and (-o-min-device-pixel-ratio: 2/1),
    only screen and (min-width: 992px) and (min-device-pixel-ratio: 2),
    only screen and (min-width: 992px) and (min-resolution: 192dpi),
    only screen and (min-width: 992px) and (min-resolution: 2dppx) {

    body {
        background-image: url(../img/bg/page/wallpaper-lg@2x.png);
    }

}

/*
Min Width 992px & DPI 3
*/
@media only screen and (min-width: 992px) and (-o-min-device-pixel-ratio: 9/4),
       only screen and (min-width: 992px) and (-webkit-min-device-pixel-ratio: 2.25),
       only screen and (min-width: 992px) and (min-device-pixel-ratio: 2.25),
       only screen and (min-width: 992px) and (min-resolution: 2.25dppx) {

    body {
        background-image: url(../img/bg/page/wallpaper-lg@3x.png);
    }

}

/*
Min Width 1200px & DPI 2
*/
@media only screen and (min-width: 1690px) and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min-width: 1690px) and (min--moz-device-pixel-ratio: 2),
    only screen and (min-width: 1690px) and (-o-min-device-pixel-ratio: 2/1),
    only screen and (min-width: 1690px) and (min-device-pixel-ratio: 2),
    only screen and (min-width: 1690px) and (min-resolution: 192dpi),
    only screen and (min-width: 1690px) and (min-resolution: 2dppx) {

    body {
        background-image: url(../img/bg/page/wallpaper-xl@2x.png);
    }

}