html {
    scroll-behavior: smooth;
}

/* ヘッダーの高さ分だけ “スクロール位置の上余白” を確保 */
:root {
    --header-offset: 100px;
    /* PC想定。実際のヘッダー高さに合わせて調整 */
}

@media (max-width: 768px) {
    :root {
        --header-offset: 72px;
    }

    /* SP想定 */
}

/* ブラウザのアンカー移動・ページ内スクロール全体に効く */
html {
    scroll-padding-top: var(--header-offset);
}

/* idを持つ要素がターゲットになった時の“隠れ防止” */
section[id],
[id] {
    scroll-margin-top: var(--header-offset);
}
/* ======================================
  Scroll Fade-In (4 directions)
  usage: class="fade-in-up" etc...
  JS adds: .is-visible
====================================== */

/* 共通（初期状態） */
.fade-in-up,
.fade-in-bottom,
.fade-in-right,
.fade-in-left{
  opacity: 0;
  transform: translate3d(var(--fx-x, 0px), var(--fx-y, 0px), 0);
  transition:
    opacity var(--fx-dur, .9s) ease,
    transform var(--fx-dur, .9s) ease;
  transition-delay: var(--fx-delay, 0s);
  will-change: opacity, transform;
}

/* 方向別（初期オフセット） */
.fade-in-up{     --fx-y: 50px; }
.fade-in-bottom{ --fx-y: -50px; }
.fade-in-right{  --fx-x: -50px; }
.fade-in-left{   --fx-x: 50px; }

/* 表示状態（JSで付与） */
.fade-in-up.is-visible,
.fade-in-bottom.is-visible,
.fade-in-right.is-visible,
.fade-in-left.is-visible{
  opacity: 1;
  --fx-x: 0px;
  --fx-y: 0px;
}

/* 任意：遅延を簡単に付けたい時（例: style="--fx-delay:.2s"） */
/*ドロワーナビゲーションロゴの設定*/
.custom-drawer-image {
    display: block;
    /* ブロックレベル要素として配置 */
    margin-top: 20px;
    /* 上部の隙間*/
    margin-left: auto;
    /* 左マージンを自動調整 */
    margin-right: auto;
    /* 右マージンを自動調整 */
    margin-bottom: 20px !important;
    /* 下部の隙間*/
    width: 100px;
    /* 画像の幅、必要に応じて調整 */
    height: auto;
    /* アスペクト比を保持 */
}

.c-drawer {
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

.c-drawer__inner {
    margin: 0 !important;
}

/*フッター上部の線の削除*/
.l-footer {
    border-top: 0px;
}

/*ページタイトルの削除*/
.page-id-65 .c-entry__header {
    display: none;
}

.page-id-47 .c-entry__header {
    display: none;
}

.page-id-113 .c-entry__header {
    display: none;
}

.page-id-124 .c-entry__header {
    display: none;
}

.page-id-135 .c-entry__header {
    display: none;
}

.page-id-60 .c-entry__header {
    display: none;
}

.page-id-531 .c-entry__header {
    display: none;
}

.page-id-548 .c-entry__header {
    display: none;
}

.page-id-591 .c-entry__header {
    display: none;
}

/*固定ページ上部にパディング*/
.l-contents__container {
    padding-top: clamp(70px,10vw,120px);
}

/*固定ページ上部・下部の隙間削除*/
.l-contents__inner {
    margin-top: 0px !important;
    padding-bottom: 0px !important;
}

/* reCAPTCHA表示を消す */
.grecaptcha-badge {
    /* 表示を消す */
    visibility: hidden !important;
    ;
}

/* サイズ別コンテナー */
.narrow-con {
    width: 85%;
    max-width: 1200px;
    margin: 0 auto;
}

.wide-con {
    width: 85%;
    max-width: 1800px;
    margin: 0 auto;
}

/*フレックスボックス*/
.flex-box {
    display: flex;
}

.flex-box-re {
    display: flex;
    flex-direction: row-reverse;
}

@media screen and (max-width: 767px) {

    .flex-box,
    .flex-box-re {
        flex-direction: column;
    }
}

.c-breadcrumbs .c-breadcrumbs__item a {
    transition: color .2s ease !important;
    color: #000;
    text-decoration: none;
}

.c-breadcrumbs .c-breadcrumbs__item a:hover {
    color: #B85A66;
}

/*タイトル*/
.ttl-con {
    margin-top: 20px;
}

.whk-icon {
    height: max(calc(var(--vh, 1vh) * 8), 60px);
    left: -20px;
    position: absolute;
    z-index: -1;
    opacity: 0.2;
}

.ttl-en-con {
    display: flex;
    align-items: center;
    position: relative;
}

.ttl-en {
    font-size: max(calc(var(--vh, 1vh) * 5), 38px);
    line-height: 1;

    color: #B85A66;
}

.ttl-jp {
    color: #B89F91;
    font-weight: normal;
    font-size: max(calc(var(--vh, 1vh) * 2), 18px);
}

.sub-ttl-en {
    font-size: max(4vh, 30px);
    margin-bottom: -1vh;
}

.sub-ttl-jp {
    font-weight: normal;
    font-size: max(1vw, 14px);
}

/* ===== 投稿ページカスタマイズ ===== */
.c-prev-next-nav {
    display: none;
}

.c-meta__item--author {
    display: none;
}

/* ===== ヘッダーカスタマイズ ===== */

.l-header {
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);

}

@media (max-width: 768px) {
    .l-header {
        background-color: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
    }
}

.menu-item:hover {
    color: #B89F91 !important;
}

/* Instagramアイコン（通常時） */
.header-icon .fa-instagram {
    font-size: 40px;
    color: #B85A66;
}

/* ホバー時（アイコン or リンクにマウスが乗ったら） */
.header-icon:hover .fa-instagram {
    color: #B89F91;
    /* ←ホバー色 */
}

/* ついでに：ホバーの色変化を滑らかに */
.header-icon .fa-instagram {
    transition: color .2s ease, transform .2s ease;
}

/* ついでに：ホバーで少しだけ大きく */
.header-icon:hover .fa-instagram {
    transform: scale(1.08);
}

/* ===== フッターカスタマイズ ===== */

.l-footer {
    border-top: 0px;
    background-color: #B85A66;
    z-index: 2;
    position: relative;
}

.whisk-footer {
    background-color: #B85A66;
    z-index: 2;
    position: relative;
}



/* ===== Top layout ===== */
.whisk-footer__top {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1.1fr;
    gap: 28px;
    padding-bottom: 26px;
}

@media (max-width: 1200px) {
    .whisk-footer__top {
        grid-template-columns: 1fr;
        gap: 22px;
    }
}

/* ===== Brand ===== */
/* ロゴリンクを基準にする */
.whisk-footer__logo {
    position: relative;
    display: inline-block;
    line-height: 0;
}

/* 既存のimgはサイズ計算用として残す（見えなくする） */
.whisk-footer__logo img {
    width: 200px;
    height: auto;
    display: block;
    opacity: 0;
    /* サイズは残して、画像だけ非表示 */
}

/* PNGをマスクとして表示 */
.whisk-footer__logo::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #fff;
    /* 通常色 */
    transition: background-color .25s ease;

    -webkit-mask: url('/wp-content/uploads/2026/02/Whisk-Logo-Beige-Transparent-scaled.png') center / contain no-repeat;
    mask: url('/wp-content/uploads/2026/02/Whisk-Logo-Beige-Transparent-scaled.png') center / contain no-repeat;
}

/* hover時の色 */
.whisk-footer__logo:hover::before {
    background-color: #B89F91;
}

/* キーボード操作時も色変える（任意だけどおすすめ） */
.whisk-footer__logo:focus-visible::before {
    background-color: #B89F91;
}

@media (max-width: 768px) {
    .whisk-footer__logo img {
        width: 170px;
        height: auto;
    }

    .whisk-footer__snsLink {
        font-size: 20px;
    }
}

.whisk-footer__sns {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.whisk-footer__snsLink {
    display: inline-flex;
    align-items: center;
    padding: 0px 10px 20px 10px;
    text-decoration: none;
    color: #fff;
    font-size: 30px;
    transition: color 0.2s ease;
}

.whisk-footer__snsLink:hover {
    color: #B89F91;
}

.whisk-footer__brand .whisk-footer__link {
    padding-left: 10px;
}

/* ===== Nav ===== */
.whisk-footer__nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

@media (max-width: 980px) {
    .whisk-footer__nav {
        grid-template-columns: 1fr;
    }
}

.whisk-footer__heading {
    margin: 0 0 10px;
    font-size: 17px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #B89F91;
}

.whisk-footer__list {
    margin: 0;
    list-style: none;
    display: grid;
    gap: 10px;
    font-size: 16px;
    padding: 5px 12px 12px 12px;
}

.whisk-footer__brand .whisk-footer__link {
    font-size: 12px;
}

/* ===== Info ===== */
.whisk-footer__dl {
    margin: 0;
    display: grid;
    gap: 12px;
}

.whisk-footer__row {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 12px;
    padding: 5px 12px 12px 12px;
}

@media (max-width: 520px) {
    .whisk-footer__row {
        grid-template-columns: 1fr;
    }
}

.whisk-footer__row dt {
    font-size: 14.5px;
    letter-spacing: .12em;
    color: #fff;
}

.whisk-footer__row dd {
    margin: 0;
    font-size: 15px;
    line-height: 1.9;
    color: #fff;
}

.whisk-footer__muted {
    color: #fff;
}

.whisk-footer__link {
    color: #fff;
    text-decoration: none;
    padding-bottom: 2px;
    transition: color .2s ease;
}

.whisk-footer__link:hover {
    color: #B89F91;
}

.whisk-footer__link.is-inline {
    display: inline-block;
}

.is-inline_note {
    font-size: 12px;
}

.is-inline_note span {
    display: inline-block;
    transition: transform .2s ease;
    margin-left: 5px;
}

.is-inline_note:hover span {
    transform: translateX(3px);
}

/* ===== Bottom ===== */
.whisk-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;

}

@media (max-width: 620px) {
    .whisk-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

.whisk-footer__copy {
    margin: 0;
    color: #fff;
    font-size: 12px;
}

/* toTop button */
.whisk-footer__toTop {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    text-decoration: none;
    color: #fff;
    transition: color .2s ease;
}

.whisk-footer__toTop:hover {
    color: #B89F91;
}

.whisk-footer__toTopIcon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(230, 194, 192, .30);
    color: #fff;
    font-size: 12px;
    transition: transform 0.2s ease;
}

.whisk-footer__toTop:hover .whisk-footer__toTopIcon {
    transform: translateY(-3px);

}

/* keyboard focus */
.whisk-footer a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}