/* =============================================================================
   karinto専用テーマ オーバーライドCSS
   標準テーマのナビ/フッターを非表示にして karinto 仕様の表示に切替
   ============================================================================= */

/* 標準navbar-customを完全非表示 */
.navbar-custom.navbar-fixed-top,
nav.navbar-custom {
    display: none !important;
}
/* navbar非表示に伴いbodyのpadding-topを取り消し */
body {
    padding-top: 0 !important;
}

/* 既存サイト構造の主要メイン（背景白）を透明に（kunni.cssのbody背景を見えるように）
   style.css の `body > * { background: #fff; }` が <main> や <header> 等を白塗りしてしまうので
   それも透明化する */
body > main,
body > header,
body > div,
.navbar-custom ~ .main,
.main,
.bg-fix-box {
    background: transparent !important;
}

/* 標準フッター(.pc-footer-modern, .footer)とその上の.module-extra-small.footerを非表示 */
.module-extra-small.footer,
footer.footer,
.pc-footer-modern,
.sp-footer-modern,
.sp-fixed-footer {
    display: none !important;
}

/* スライドメニュー(slide_menu.css)も非表示（karintoは独自MENUを使う） */
.slide-menu-overlay,
.slide-menu-container {
    display: none !important;
}

/* パンくずリストはkarintoテーマでは非表示 */
.breadcrumb-nav,
nav[aria-label="breadcrumb"] {
    display: none !important;
}

/* navbar非表示に伴うヘッダー〜コンテンツ間の余白を削減
   style.cssの body.is-logged-in .main { padding-top: calc(55px + ...) !important; } を
   打ち消し（navbar-fixed-topがないため不要） */
html body.is-logged-in .main,
html .navbar-custom ~ .main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
.module-extra-small {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* karinto独自のヘッダー位置取り（背景は透過） */
header.header {
    position: relative;
    background: transparent !important;
    margin-bottom: 0 !important;
    padding-bottom: 0;
}
/* .header_inner は kunni.css で rgba(255,255,255,0.5) が指定されているため
   PC幅で白っぽくなる。完全透過に上書き */
.header_inner {
    background-color: transparent !important;
    background: transparent !important;
}

/* karinto独自フッターの表示制御は kunni-footer.css のメディアクエリに完全に任せる
   （PCでは menu-independent-container と footer-independent は非表示、
     SPでは両方表示、PC/SP共通で footer-independent-main は表示）
   → ここでは display:block を強制しない */

/* karintoはmypage中心のためleft-column/right-columnは非表示 */
.col-lg-3.col-lg-pull-9.side_menu,
.col-lg-3.col-lg-push-9.side_menu {
    display: none !important;
}
.col-lg-9.col-lg-push-3,
.col-lg-9.col-lg-pull-3 {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
}

/* =============================================================================
   karinto 専用フッターを透過化（標準テーマのフッター色が継承されないように）
   ============================================================================= */
.module-extra-small.footer-independent-main,
#footer-independent,
.footer-independent-main,
.footer-independent-main footer {
    background: transparent !important;
    border-top: none !important;
    color: inherit !important;
}
/* メインフッターのリンク文字色も継承（テーマ色に染まらないように） */
.footer-independent-main a,
#footer-independent a {
    color: inherit !important;
}

/* =============================================================================
   ヘッダーナビのホバーエフェクト（公式サイトに合わせた文字回転）
   PC幅 (769px以上) で .nav_list li a にホバー時 rotateX(360deg) を適用
   ============================================================================= */
@media screen and (min-width: 769px) {
    .nav_list li a {
        transition: all 0.8s ease-in-out;
    }
    .nav_list li a:hover {
        color: #333;
        transform: rotateX(360deg);
    }
}

/* =============================================================================
   karinto: タイトル画像（h2.ttl）スタイル
   login.php 等で <h2 class="ttl"><img/><span>...</span></h2> を表示する
   ============================================================================= */
h2.ttl {
    margin-top: 25px;
    line-height: 1.2;
    margin-bottom: 20px;
    text-align: center;
}
h2.ttl img {
    height: 80px;
    max-width: 100%;
}
h2.ttl span {
    font-size: 16px;
    display: block;
    font-family: 'Jost', sans-serif;
    font-weight: 600;
    margin-top: 8px;
}
@media screen and (max-width: 640px) {
    h2.ttl img {
        height: 4.8rem;
    }
    h2.ttl span {
        font-size: 1.6rem;
    }
}

/* =============================================================================
   karinto: login.php フォームを公式サイト(maruhi)風に装飾
   ============================================================================= */
.karinto-login-box {
    background: #fff !important;
    border-radius: 16px;
    border: 1px solid #000;
    box-shadow: 0 4px 0 #000;
    padding: 40px 24px;
    margin: 24px auto 32px;
    max-width: 640px;
}
@media screen and (max-width: 640px) {
    .karinto-login-box {
        padding: 28px 16px;
    }
}
/* インプット：角丸ピル */
.karinto-login-box .form-control {
    border-radius: 100px !important;
    border: 1px solid #000 !important;
    padding: 14px 20px !important;
    font-size: 16px;
    height: auto !important;
}
.karinto-login-box .form-control:focus {
    border-color: #000 !important;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.08) !important;
}
/* ログインボタン：黒・角丸ピル */
.karinto-login-box .btn-primary,
.karinto-login-box .btn-round.btn-primary {
    background: #000 !important;
    border-color: #000 !important;
    color: #fff !important;
    border-radius: 100px !important;
    padding: 12px 32px !important;
    font-weight: 700;
}
.karinto-login-box .btn-primary:hover,
.karinto-login-box .btn-round.btn-primary:hover {
    background: #333 !important;
    border-color: #333 !important;
    color: #fff !important;
}
/* ロック中の無効ボタンも黒 */
.karinto-login-box .btn-danger[disabled] {
    background: #555 !important;
    border-color: #555 !important;
    color: #fff !important;
    border-radius: 100px !important;
    padding: 12px 32px !important;
}
/* パスワードを忘れた方リンクの位置調整 */
.karinto-login-box .pull-right.small a {
    color: #555;
    text-decoration: underline;
}


/* =============================================================================
   karinto: メインフォントを公式と同じ M PLUS Rounded 1c + YakuHanRP に統一
   dev の style.css が body に LINE Seed JP を指定しているのを上書き
   ============================================================================= */
html,
body {
    font-family: YakuHanRP, "M PLUS Rounded 1c", sans-serif !important;
}

/* =============================================================================
   karinto: login.php フォーム上下の余白調整
   電話番号(最初のform-group)の上に20px、ログインボタン(最後のform-group)の下に20px
   ============================================================================= */
.karinto-login-box .form-group:first-of-type {
    margin-top: 20px !important;
}
.karinto-login-box .form-group:last-of-type {
    margin-bottom: 20px !important;
}

/* =============================================================================
   karinto: アラートメッセージも角丸に
   ============================================================================= */
.karinto-login-box .alert {
    margin-top: 20px;
    border-radius: 16px !important;
    border: 1px solid currentColor;
    padding: 12px 20px;
}

/* =============================================================================
   karinto: SPメニュー(独立版)のクリック干渉を解消
   - header.header が z-index:1000 で .black_bg(z-index:100) を内包しており、
     stacking context により .black_bg が menu-independent-button(z-index:100) より
     上に重なってクリックを奪う場合があるため、SP要素のz-indexを最上位に引き上げ
   - 同時に未使用の .black_bg / .nav (karinto では使わない左右ドロワー) は
     pointer-events:none で完全にイベント無効化
   ============================================================================= */
@media screen and (max-width: 640px) {
    .header .black_bg,
    .header .nav {
        pointer-events: none !important;
    }
    /* z-index 階層（header=1000 より上、かつ各要素の重ね順を維持）
       - footer-independent (下部固定ナビ):   1100 → ベースレイヤー
       - menu-independent (ドロワー本体):     1101 → ナビより上
       - menu-independent-button (中央ボタン):1102 → 最前面（タップでドロワーをトグル）
    */
    .footer-independent       { z-index: 1100 !important; }
    .menu-independent         { z-index: 1101 !important; }
    .menu-independent-button  { z-index: 1102 !important; }

    .menu-independent-button,
    .footer-independent ul li a,
    .menu-independent ul li a {
        pointer-events: auto !important;
    }
}