/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/


/*
MY ヘッダーの下線
*/
/* リッチテキスト（PRICE＋価格）の p タグの基本設定 */
.brxe-text p {
    display: block;
    position: relative;
    text-decoration: none;
    color: inherit;
}
@media (min-width: 1024px) { /* 1024px以上の画面サイズで適用 */
    /* 価格の下にアンダーラインを作成（初期状態は非表示） */
    .brxe-text p:last-child::after {
        content: "";
        position: absolute;
        bottom: -8px; /* 下線の位置をさらに下げる */
        left: -5%;
        height: 1px; /* 下線を細くする */
        width: 110%; /* 横幅を 110% に拡大 */
        background: #000;
        border-radius: 50px;
        transform: scaleX(0); /* 初期状態では非表示 */
        transform-origin: left; /* 左から右に広がる */
        transition: transform 0.2s ease-in-out;
    }
    /* .brxe-text に hover すると価格のアンダーラインが左から右に広がる */
    .brxe-text:hover p:last-child::after {
        transform: scaleX(1);
    }
}


/*
MY フッターのナビゲーションメニューの文字と下線の間の幅
*/
.bricks-nav-menu > li > a {
    font-size: 13px;
    color: var(--bricks-color-tenrzp);
    font-family: "Noto Sans JP";
    text-decoration: none !important; /* デフォルトの下線を完全に削除 */
    position: relative;
}

.bricks-nav-menu > li > a::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: repeating-linear-gradient(
        to right,
        rgba(255, 255, 255, 0.5),
        rgba(255, 255, 255, 0.5) 2px,
        transparent 2px,
        transparent 4px
    ); /* 点線のスタイル */
    position: absolute;
    bottom: 3.3px; /* 文字と下線の間隔を調整 */
    left: 0;
}


/*
MY よくある質問のみ固定ヘッダーを解除
*/
.page-id-796 #brx-header, 
.page-id-796 #brxe-khxbmi {
    position: relative !important;
    top: 0 !important;
}
@media (max-width: 768px) { /* 768px以下の画面サイズに適用 */
    .page-id-796 #brxe-000ff0 {
        margin-top: -220px;
    }
}



/*
MY スキップリンクの見た目を削除
*/
.skip-link {
    position: absolute;
    left: -9999px; /* 画面外に移動して非表示 */
    top: auto;
}
.skip-link:focus {
    left: 0; /* フォーカスされたときのみ表示 */
    top: 0;
    background: #fff;
    padding: 10px;
    z-index: 1000;
}



/*
MY スマホヘッダーとPCヘッダーの設定
*/
@media (max-width: 767px) {
    .mobile-header {
        display: block !important;
    }
    .pc-header {
        display: none !important;
    }
}
@media (min-width: 768px) {
    .mobile-header {
        display: none !important;
    }
    .pc-header {
        display: block !important;
    }
}