@charset "UTF-8";
a.app-nav__item {
    font-size: 20px;
}
/* 既定：Web表示 */
.only-app {
    display: none !important;
}

.only-web {
    display: block !important;
}

/* アプリ表示（htmlに is-churatoku-app が付いたら切替） */
html.is-churatoku-app .only-app {
    display: block !important;
}

html.is-churatoku-app .only-web {
    display: none !important;
}

/* ==========================
   アプリヘッダ（モバイルのみ）
   ========================== */
:root {
    --app-header-h: 79px; /* ヘッダ高さ（必要なら調整） */
}

/* PC幅では出さない（アプリでも基本モバイル想定） */
@media (min-width: 769px) {
    html.is-churatoku-app .app-header {
        display: none !important;
    }
}

/* モバイル幅：アプリ時のみ表示 */
@media (max-width: 768px) {
    html.is-churatoku-app .app-header {
        position: sticky; /* 上固定。完全固定がよければ fixed に */
        top: 0;
        z-index: 9999;
        background: #fff;
        border-bottom: 1px solid rgba(0,0,0,0.08);
        padding-top: env(safe-area-inset-top);
    }

    /* fixed運用にしたい場合は sticky→fixed にして、下のpaddingを有効化 */
    /* html.is-churatoku-app body { padding-top: calc(var(--app-header-h) + env(safe-area-inset-top)); } */

    html.is-churatoku-app .app-nav {
        height: var(--app-header-h);
        display: flex;
        align-items: baseline;
        padding-top: 3px;
        padding: 2px 1.5%;
        font-weight: 600;
    }

    html.is-churatoku-app .app-nav__item {
        flex: 1 1 0;
        text-decoration: none;
        color: #333;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        -webkit-tap-highlight-color: transparent;
    }

    html.is-churatoku-app .app-nav__icon {
        display: block;
 /*       width: 30px !important;
        height: 30px !important;*/
        object-fit: contain;
        object-position: 50% 50%;
        display: block;
    }

    html.is-churatoku-app .app-nav__iconbox {
        height: 30px; 
        display: flex;
        align-items: center; 
        justify-content: center; 
    }

    html.is-churatoku-app .app-nav__icon {
        max-height: 21px;
        max-width: 31px;
        width: auto;
        height: auto;
        display: block;
    }

    html.is-churatoku-app .app-nav__label {
        display: block;
        font-size: 11px;
        line-height: 1.1;
        text-align: center;
        white-space: nowrap; /* 1行派は基本これでOK */
    }

        /* 2行ラベルだけ改行を許可 */
        html.is-churatoku-app .app-nav__label.two-line {
            white-space: normal;
            padding-top: 0px;
        }

    /* ON状態（必要なら色だけ変える等） */
    html.is-churatoku-app .app-nav__item.is-active {
        color: #111;
        font-weight: 600;
    }
}



/*------------------------------------*
    ページ共通要素
\*------------------------------------*/
ul, h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0; }

a {
  text-decoration: none; }

@media (max-width: 768px) {
    html.is-churatoku-app .app-nav {
        background: #FFA13A; /* オレンジ帯 */
    }

    html.is-churatoku-app .app-nav__item {
        position: relative;
        padding: 7px 0;
        border-radius: 7px; /* タップ時の保険 */
    }

        /* ===== ON状態の白い角丸背景 ===== */
        html.is-churatoku-app .app-nav__item.is-active::before {
            content: "";
            position: absolute;
            inset: 4px; /* 余白。数字で雰囲気調整 */
            background: #fff;
            border-radius: 7px;
            z-index: 0;
            width: 83%;
            height: 72px;
            margin: 0 auto;
        }

    /* 中身は前面に出す */
    html.is-churatoku-app .app-nav__icon,
    html.is-churatoku-app .app-nav__label {
        position: relative;
        z-index: 1;
        padding-top: 8px;
    }

    /* テキスト色 */
    html.is-churatoku-app .app-nav__label {
        color: #FFF; /* OFF時 */
    }
    .app-nav__item.is-active .app-nav__label {
        color: #FF9933;
    }
    html.is-churatoku-app .app-nav__item.is-active .app-nav__label {
        font-weight: 600;
    }
}