/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra

**/

html {
    scrollbar-gutter: stable;
}

/*
 * 重なり順（数値が大きいほど手前）
 * 装飾 < ヘッダー < カート < スプラッシュ < メニュー < 紙ノイズ（最前面・全画面）
 */
:root {
    --islando-z-bat: 100;
    --islando-z-hermit: 110;
    --islando-z-header: 1000;
    --islando-z-cart: 2000;
    --islando-z-cart-panel: 12000;
    --islando-z-splash: 50000;
    --islando-z-nav: 65000;
    --islando-z-texture: 100000;
}

/* Astra 標準ヘッダーを fixed で追従（sticky が効かない環境向け） */
.ast-site-header-wrap,
#masthead {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: var(--islando-z-header);
    box-shadow: none;
}

/* Astra透明ヘッダー機能が #masthead を absolute にするのを上書き */
body.ast-theme-transparent-header #masthead {
    position: fixed;
    left: 0;
    right: 0;
}

body.admin-bar .ast-site-header-wrap,
body.admin-bar #masthead {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .ast-site-header-wrap,
    body.admin-bar #masthead {
        top: 46px;
    }
}

/*
 * サイトナビ（オフキャンバス）
 * ・トリガー: #masthead 内の button.iland-site-nav-trigger（ヘッダーに手動配置）
 * ・ルート〜シート: functions.php の iland_render_site_nav_drawer（#iland-site-nav、装飾 .iland-site-nav__frame / 本文 .iland-site-nav__inner）
 */

/* トグル周りの装飾が切れないようにする */
#masthead,
#masthead .main-header-bar,
#masthead .main-header-bar-wrap,
#masthead .ast-main-header-wrap,
#masthead .ast-button-wrap,
#masthead .ast-builder-layout-element {
    overflow: visible;
}

:root {
    --iland-site-nav-toggle-image: url("assets/hamberger2.webp");
    --iland-site-nav-toggle-size: 60px;
}

#masthead .iland-site-nav-trigger {
    position: relative;
    overflow: visible;
    width: var(--iland-site-nav-toggle-size);
    height: var(--iland-site-nav-toggle-size);
    padding: 0;
    border: 0;
    background-color: transparent;
    background-image: var(--iland-site-nav-toggle-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    line-height: 1;
    border-radius: 0;
}

#masthead .iland-site-nav-trigger .ast-icon,
#masthead .iland-site-nav-trigger svg,
#masthead .iland-site-nav-trigger .menu-toggle-icon {
    display: none !important;
}

/* 大コウモリ APNG（TOP 用のサイズ。下層ページは --iland-bat-height-header） */
.iland-bat-parallax {
    --iland-bat-height: clamp(140px, 18vw, 220px);
    pointer-events: none;
    line-height: 0;
    z-index: var(--islando-z-bat);
}

/* スプラッシュ中：スクロール不可（JS 読み込み前から body_class で付与） */
html:has(body.islando-splash-active) {
    overflow: hidden;
    overscroll-behavior: none;
}

body.islando-splash-active {
    overflow: hidden;
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    touch-action: none;
    overscroll-behavior: none;
}

body.islando-splash-active .iland-bat-parallax {
    visibility: hidden;
}

/* 振り子（rotate のみ・落下完了後に --sway で開始） */
.iland-bat-parallax__pendulum {
    display: block;
    width: fit-content;
    margin: 0 auto;
    line-height: 0;
    transform-origin: top center;
}

/*
 * 振り子は落下と同じ 720ms 後に自動開始（JS で play-state / --sway を切替えない）
 * --sway-ready は登場時に付け外ししない（animation 定義が変わると1フレーム飛ぶ）
 */
.iland-bat-parallax--sway-ready .iland-bat-parallax__pendulum {
    animation: islando-bat-sway 3.4s ease-in-out 720ms infinite both;
}

.iland-bat-parallax__img {
    display: block;
    height: var(--iland-bat-height);
    width: auto;
    max-width: none;
    object-fit: contain;
    /* 登場前：画像1枚分＋余白ぶん画面上に待機（不透明のまま） */
    --iland-bat-enter-offset: calc(100% + 16px);
}

/* WAAPI 非対応時のみ CSS 落下 */
.iland-bat-parallax--use-css-drop .iland-bat-parallax__img {
    animation: islando-bat-drop-in 0.72s cubic-bezier(0.22, 1.15, 0.36, 1) forwards;
}

.iland-bat-parallax:not(.iland-bat-parallax--enter):not(.iland-bat-parallax--entered) .iland-bat-parallax__img {
    transform: translateY(calc(-1 * var(--iland-bat-enter-offset)));
}

.iland-bat-parallax--entered .iland-bat-parallax__img {
    transform: translateY(0);
}

@keyframes islando-bat-drop-in {
    0% {
        transform: translateY(calc(-1 * var(--iland-bat-enter-offset)));
    }
    62% {
        transform: translateY(6px);
    }
    82% {
        transform: translateY(-3px);
    }
    100% {
        transform: translateY(0);
    }
}

/* TOP：ページ先頭から吊り下げ／スクロールで上へ流れる */
.iland-bat-parallax--front {
    --iland-bat-anchor: -25px;
    position: absolute;
    top: var(--iland-bat-anchor);
    left: 50%;
    transform: translate(-50%, 0);
    will-change: transform;
}

/*
 * TOP 以外の蝙蝠（調整は主にここ）
 * --iland-bat-peek-ratio … 画像の高さ = ヘッダー高 × この値（2 前後で見える量≈ヘッダー1個分）
 * --iland-bat-peek-offset … 上下の微調整（px・正で下へ）
 * --iland-bat-img-top … JS が自動計算（手動で上書きも可）
 * --iland-bat-height-header … 画像の表示高さ（JS が ratio から設定）
 */
.iland-bat-parallax--header {
    --iland-bat-header-h: 72px;
    --iland-bat-peek-ratio: 2;
    --iland-bat-peek-offset: 0px;
    --iland-bat-height-header: calc(var(--iland-bat-header-h) * var(--iland-bat-peek-ratio));
    --iland-bat-img-top: -72px;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(100vw, 280px);
    overflow: visible;
    text-align: center;
}

.iland-bat-parallax--header .iland-bat-parallax__img {
    position: relative;
    top: var(--iland-bat-img-top);
    height: var(--iland-bat-height-header);
}

@keyframes islando-bat-sway {
    0%,
    100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-4deg);
    }
    75% {
        transform: rotate(4deg);
    }
}

/* ── オフキャンバス本体 ── */
.iland-site-nav {
    position: fixed;
    inset: 0;
    z-index: var(--islando-z-nav);
    pointer-events: none;
    visibility: hidden;
}

.iland-site-nav.is-open {
    pointer-events: auto;
    visibility: visible;
}

.iland-site-nav__veil {
    position: absolute;
    inset: 0;
    background: rgba(20, 18, 16, 0.45);
    opacity: 0;
    transition: opacity 0.35s ease;
    cursor: pointer;
}

.iland-site-nav.is-open .iland-site-nav__veil {
    opacity: 1;
}

.iland-site-nav__sheet {
    position: absolute;
    top: 0;
    right: 0;
    width: min(100%, 340px);
    height: 100%;
    max-height: 100dvh;
    overflow: auto;
    padding: 0.75rem 0.5rem 1.25rem 0.65rem;
    box-sizing: border-box;
    background-color: #f4ece0;
    border-left: 3px double #1c1916;
    box-shadow: -8px 0 28px rgba(0, 0, 0, 0.2);
    transform: translateX(100%);
    transition: transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 大正ロマン風：内側の二重枠（.iland-site-nav__frame） */
.iland-site-nav__frame {
    position: absolute;
    top: 10px;
    right: 10px;
    bottom: 14px;
    left: 8px;
    z-index: 1;
    pointer-events: none;
    border: 2px solid #1c1916;
    box-shadow: inset 0 0 0 1px rgba(139, 41, 66, 0.45);
}


.iland-site-nav__inner {
    position: relative;
    z-index: 2;
    padding: 2.5rem 1rem 1.5rem 0.85rem;
    min-height: 120px;
}

.iland-site-nav.is-open .iland-site-nav__sheet {
    transform: translateX(0);
}

/* メニュー開閉：スクロール停止（position:fixed なし＝先頭へ飛ばない） */
html:has(body.iland-site-nav--open) {
    overflow: hidden;
    overscroll-behavior: none;
}

body.iland-site-nav--open {
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
}

.iland-site-nav__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 2px solid #1c1916;
    border-radius: 0;
    background: #fefcf6;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.iland-site-nav__close-bar {
    position: absolute;
    width: 22px;
    height: 2px;
    background: #1c1916;
}

.iland-site-nav__close:hover {
    background: #fefcf6;
    border: 2px solid #1c1916;
}
.iland-site-nav__close-bar:first-of-type {
    transform: rotate(45deg);
}

.iland-site-nav__close-bar:last-of-type {
    transform: rotate(-45deg);
}

/* シート内: 見出し・リンク */
.iland-site-nav__masthead {
    text-align: center;
    padding: 0.25rem 0.5rem 1rem;
    margin: 0 0 1rem;
    border-bottom: 1px dashed rgba(139, 41, 66, 0.35);
}

.iland-site-nav__en {
    margin: 0 0 0.35rem;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
    font-size: 0.72rem;
    letter-spacing: 0.45em;
    text-indent: 0.45em;
    text-transform: uppercase;
    color: #5c3d47;
}

.iland-site-nav__ja {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: #141210;
}

.iland-site-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.iland-site-nav__item + .iland-site-nav__item {
    margin-top: 0.1rem;
}

.iland-site-nav__link {
    display: block;
    padding: 0.75rem 0.35rem;
    color: #1c1916;
    text-decoration: none;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    border-bottom: 1px dashed rgba(28, 25, 22, 0.3);
    transition: background-color 0.2s ease, color 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
    .iland-site-nav__veil,
    .iland-site-nav__sheet {
        transition: none;
    }
}

/* サイトロゴを暖簾風に */
.site-branding {
    position: relative;
    margin: 0 auto;
    padding: 10px 2px;
    background: midnightblue;
  }
  
  .site-branding:before,
  .site-branding:after {
    position: absolute; 
    z-index: -1;
    content: '';
  }
  
  .site-branding:before {
    top: 5px;
    width: 75px;
    height: 7px;
    background: burlywood;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .site-branding:after {
    left: 17px;
    transform: rotate(3deg);
    bottom: 8px;
    box-shadow: 0 10px 10px #000;
    background: #777;
    width: 40px;
    height: 10px;
  }

.splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #435598;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: black;
    z-index: var(--islando-z-splash);
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
}

.splash-image-box {
    width: 80px;
    height: 80px;
}

.splash-anime-image,
.splash-anime-image--kuropoppo {
    width: 80px;
    height: 80px;
    object-fit: contain;
}


.splash-screen-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 0;
    height: 0;
}

.splash-screen-text span {
    font-size: 16px;
    font-weight: bolder;
    color: #fefcf6;
    position: absolute;
    transform-origin: 50% 100%;
}

/* 画面下部・横向きカスタムスクロールバー（ヤドカリ・海辺トーン） */
.islando-hermit-scrollbar {
    /* 画像の見た目の重心がずれるときだけ微調整（例: 4px や -6px） */
    --hermit-visual-offset-x: 0px;
    --islando-hermit-dock-y: 100%;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--islando-z-hermit);
    pointer-events: none;
    padding: 8px 16px calc(12px + env(safe-area-inset-bottom, 0));
    box-sizing: border-box;
    transform: translateY(var(--islando-hermit-dock-y));
    will-change: transform;
}

.islando-hermit-scrollbar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: #ead8b3;
    border-radius: 30% 30% 0 0;
}

.islando-hermit-scrollbar--noscroll {
    visibility: hidden;
}

/* 転がり込み開始前はヤドカリ本体だけ非表示 */
.islando-hermit-scrollbar.islando-hermit-awaiting-roll .islando-hermit-scrollbar__thumb {
    opacity: 0 !important;
    visibility: hidden !important;
}

.islando-hermit-scrollbar__inner {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
}

/* ヤドカリ：トラック／ゲージは非表示（つまみ位置計算用に DOM は残す） */
.islando-hermit-scrollbar__track {
    position: relative;
    height: 0;
    background: transparent;
    border: 0;
    overflow: visible;
}

.islando-hermit-scrollbar__fill {
    display: none;
}

.islando-hermit-scrollbar__thumb {
    position: absolute;
    left: 0;
    top: auto;
    bottom: -10px;
    width: 52px;
    height: 52px;
    margin-bottom: 2px;
    transform: translateX(0);
    will-change: transform;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    isolation: isolate;
}

.islando-hermit-scrollbar__thumb-inner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transform: translateX(0);
}

.islando-hermit-scrollbar__thumb.islando-hermit-roll--top .islando-hermit-img--shell,
.islando-hermit-scrollbar__thumb.islando-hermit-roll--bottom .islando-hermit-img--shell {
    animation: islando-hermit-roll 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes islando-hermit-roll {
    0% {
        transform: scaleX(var(--islando-hermit-flip, 1)) rotate(-360deg);
    }
    100% {
        transform: scaleX(var(--islando-hermit-flip, 1)) rotate(0deg);
    }
}

.islando-hermit-scrollbar__thumb::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 10%;
    width: 50px;
    height: 10px;
    transform: translateX(-50%) scaleX(1.05);
    background: rgba(0, 0, 0, 0.25);
    filter: none;
    border-radius: 50%;
    z-index: 1;
}

.islando-hermit-img {
    position: absolute;
    z-index: 2;
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(15, 74, 88, 0.25));
    transform-origin: center center;
}

.islando-hermit-scrollbar.is-moving .islando-hermit-scrollbar__thumb {
    animation: islando-hermit-bob 0.6s ease-in-out infinite;
}

/* 向き（左右反転）は transform 衝突を避けるため CSS 変数で管理 */
.islando-hermit-scrollbar {
    --islando-hermit-flip: 1;
}

.islando-hermit-scrollbar.is-scroll-up {
    --islando-hermit-flip: -1;
}

/* 端の転がり演出中は進行方向に合わせて向きを強制（スクロール方向より優先） */
.islando-hermit-scrollbar.islando-hermit-force-face-left {
    --islando-hermit-flip: -1;
}

.islando-hermit-scrollbar.islando-hermit-force-face-right {
    --islando-hermit-flip: 1;
}

/* 通常時（回転中でない）も殻/歩き画像に反転を適用 */
.islando-hermit-img--shell,
.islando-hermit-img--move {
    transform: scaleX(var(--islando-hermit-flip, 1));
}

.islando-hermit-img[hidden] {
    display: none !important;
}

@keyframes islando-hermit-bob {
    0% {
        margin-bottom: 0.5px;
    }
    25% {
        margin-bottom: 3px;
    }
    50% {
        margin-bottom: 0px;
    }
    75% {
        margin-bottom: 2px;
    }
    100% {
        margin-bottom: 0.5px;
    }
}

/* 紙テクスチャ（style.css から wp-content/uploads への相対パス） */
.paper-texture {
    background-image: url("assets/concrete-wall.png");
    background-repeat: repeat;
    background-position: 0 0;
}

/* 3Dフリップ用コンテナ */
.flip {
    perspective: 1000px;
    display: inline-block; 
}
.flip__inner {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
    /* 画像の実サイズに合わせる（例） */
    width: 100px;
    height: 100px;
}

/* 常にゆっくり回転させる例（ホバー不要ならこちらだけ） */

.flip__inner {
    animation: flip-spin 5s ease-in-out 3.5s infinite;
}
@keyframes flip-spin {
    0%   { transform: rotateY(0deg); }
    25% { transform: rotateY(360deg); }
    26% { transform: rotateY(360deg); }
    100%{ transform: rotateY(360deg); }
}

.flip__face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 5px;
    overflow: hidden;
    transform: rotate(-45deg);
}
/* 表面：画像 */
.flip__front {
    z-index: 2;
    box-shadow: -3px 3px 5px rgba(0, 0, 0, 0.15);
}
.flip__front .flip-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
    box-shadow: -3px 3px 5px rgba(0, 0, 0, 0.25);
}
/* 裏面：真っ白・コンテンツなし */
.flip__back {
    transform: rotateY(180deg) rotate(-45deg);
    background: #6c6464;
    box-shadow: -3px 3px 5px rgba(0, 0, 0, 0.15);
}

.rotate90 {
    transform: rotate(90deg);
}

.rotate180 {
    transform: rotate(180deg);
}

.rotate270 {
    transform: rotate(270deg);
}   

/* 左上角：疑似要素の右下角が .letter の左上角に重なる（letterstamp.png） */
.letter {
    position: relative;
    overflow: visible;
}

.letter > p {
    text-align: left;
}

.letter::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 80px;
    height: 80px;
    background-image: url("assets/letterstamp.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transform: translate(-40%, -83%) rotate(-8deg);
    transform-origin: 100% 100%;
    pointer-events: none;
    z-index: 1;
}


/* サイト全体に紙っぽい微細ノイズを重ねる（クリック操作は邪魔しない） */
body {
    position: relative;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: var(--islando-z-texture);
    opacity: 0.5;
    mix-blend-mode: multiply;
    background-image:
        /* 規則性のない粒状ノイズ（SVG turbulence） */
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='220'%20height='220'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.85'%20numOctaves='3'%20seed='8'/%3E%3C/filter%3E%3Crect%20width='220'%20height='220'%20filter='url(%23n)'%20opacity='.35'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='240'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.55'%20numOctaves='2'%20seed='17'/%3E%3C/filter%3E%3Crect%20width='240'%20height='240'%20filter='url(%23n)'%20opacity='.22'/%3E%3C/svg%3E");
    background-size: 260px 260px, 340px 340px;
    background-repeat: repeat;
}

/* 商品関連 */
.product-image {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

.product-label {
    align-items: baseline;
}

.product-item {
    max-width: 300px;
}

.product-hr {
    border-top: 1px solid #666;
}

@media (prefers-reduced-motion: reduce) {
    body::before {
        opacity: 0.1;
    }

    .iland-bat-parallax--enter .iland-bat-parallax__img,
    .iland-bat-parallax:not(.iland-bat-parallax--enter):not(.iland-bat-parallax--entered) .iland-bat-parallax__img,
    .iland-bat-parallax--entered .iland-bat-parallax__img {
        animation: none;
        transform: none;
    }

    .iland-bat-parallax--sway-ready .iland-bat-parallax__pendulum {
        animation: none;
    }
}


/* Modern Cart：プラグイン既定(9999)より下にし、スプラッシュの背面へ */
#moderncart-floating-cart {
    z-index: var(--islando-z-cart) !important;
}

.moderncart-slide-out-panel,
.moderncart-cart-panel,
.moderncart-overlay {
    z-index: var(--islando-z-cart-panel) !important;
}

/* スプラッシュ表示中はフローティング UI を隠す（main.js が body に class 付与） */
body.islando-splash-active #moderncart-floating-cart,
body.islando-splash-active .islando-hermit-scrollbar {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#moderncart-floating-cart .moderncart-floating-cart-count {
    background-color: #b48a35;
}

#moderncart-floating-cart .moderncart-floating-cart-button-notification{
    width: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
}

#moderncart-floating-cart .moderncart-floating-cart-button {
    box-shadow: 0 3px 5px #7a7a7a8a;
    border:5px double #fefcf6;
    position: static;
}