/*===================================================================
    追従ボタン
===================================================================*/
.float-wrap {
    position: fixed;
    bottom: 24%;
    right: 0;
    z-index: 10;
}

.float-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 30px;
    height: 130px;
    margin-bottom: 8px;
    border-radius: 5px 0 0 5px;
    
}

.float-btn--contact{
    background-color: #671821;
}
.float-btn--request{
    background-color: #99471F;
}

.float-btn--order{
    background-color: #CA650E;
}

.float-btn-text {
    writing-mode: vertical-rl;
    margin: 0;
    letter-spacing: 0.1em;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

/* .float-btn--contact {
    background-color: #9A5977;
}
.float-btn--request {
    background-color: #AD4256;
}
.float-btn--order {
    background-color: #C35A4C;
}
 */

@media screen and (max-width: 600px) {
    .float-wrap {
        display: flex;
        justify-content: space-between;
        bottom: 10px;
        right: auto;
        left: 0;
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }

    .float-btn {
        flex-direction: row;
        /* width: 49%; */
        width: 33%;
        height: 32px;
        border-radius: 5px;
    }

    .float-btn-text {
        writing-mode: horizontal-tb;
        letter-spacing: 0em;
    }
    
}

@media screen and (max-width: 480px) {
    .float-wrap {
        padding-left: 10px;
        padding-right: 10px;
    }

}


.page_top_btn {
    bottom: 8%;
}


/*===================================================================
    製品詳細ページの一覧へ戻るページのボタン
===================================================================*/
.return-back {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    width: 240px;
    height: 40px;
    background-color: #dc000c;
    border: 1px solid #dc000c;
    color: #fff;
    border-radius: 5px;
    transition: .3s ease;
    margin: 0 auto 40px;
}

.return-back:hover {
    background-color: #fff;
    color: #C8161D;
}


/*===================================================================
    共通ヘッダー
===================================================================*/
.site-header-logo img {
  max-height: 100px !important;
}
@media(max-width: 991.98px) {
  .site-header-logo img {
    max-height: 50px !important;
  }
}

@media (min-width: 992px) {
  .site-header--layout--nav-float .site-header-logo {
    margin-right: 1em !important;
  }
}
/*.header-top {
  color: #000!important;
}
.header-top .header-top-description{
    font-size:150% !important;
}*/
@media (min-width: 992px) {
.vk-campaign-text {
    font-size:110% !important;
}
}
@media(max-width: 991.98px) {
.vk-campaign-text {
    padding-right:60px !important;
    font-size:91% !important;
    justify-content: left !important;
  }
}

.device-mobile .page-header {
  background-position: center !important;
}

/* ================================== */
/* スライダーFOUC対策 CSS (Opacity版) */
/* ================================== */

/* コンテナの基本的なスタイル */
.vk_mainslider {
  min-height: 200px;
  background-color: #fff;
  overflow: hidden;
  position: relative;
}

/* 読み込み完了後に画像を表示するスタイル */
body .vk_mainslider.slider-loaded img {
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 0.5s ease-in-out !important;
}

/* 読み込み完了後に矢印を表示するスタイル */
body .vk_mainslider.slider-loaded .swiper-button-prev,
body .vk_mainslider.slider-loaded .swiper-button-next {
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 0.5s ease-in-out !important;
}

/* ================================== */
/* カスタム投稿アーカイブタイトル装飾 (Flexbox + margin:auto 版) */
/* ================================== */

h1.archive-header-title {
    display: flex; /* フレックスボックスを利用 */
    align-items: center; /* 縦方向の中央揃え */
    justify-content: center; /* ★ まずは全体を中央へ */
    width: 80%; /* ★ 幅を少し狭め、マージンで調整しやすくする (適宜調整) */
    margin: 1em auto; /* ★ 上下余白と、左右autoで中央揃えを試みる */
    position: relative; /* 念のため */
    text-align: left; /* テキストは左揃え */
}

/* ロゴ (左側) */
h1.archive-header-title::before {
    content: '';
    display: block;
    width: 60px;
    height: 69px;
    background-image: url('https://www.seianjo.co.jp/shumari/wp-content/uploads/2025/05/icon-headline.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    margin-right: 15px; /* ロゴとテキストの間の余白 */
    flex-shrink: 0;
}

/* ★★★ この部分は削除、または無効化 ★★★ */
h1.archive-header-title::after {
    content: none;
    display: none;
}
/* ================================== */

/* ================================== */
/* 通常投稿タイトル装飾 (ロゴ左) */
/* ================================== */

/* h1.entry-title をフレックスボックスにする */
/* ★ もし投稿以外のページにも影響が出る場合は、
      body.single h1.entry-title のようにセレクタを限定します ★ */
h1.entry-title {
    display: flex; /* フレックスボックスを利用 */
    align-items: center; /* 要素を縦方向の中央に揃える */
    justify-content: flex-start; /* 左揃え (デフォルトですが念のため) */
}

/* h1.entry-title の前にロゴを追加する */
/* ★ もし投稿以外のページにも影響が出る場合は、
      body.single h1.entry-title::before のようにセレクタを限定します ★ */
h1.entry-title::before {
    content: ''; /* 疑似要素を表示するために必須 */
    display: block; /* ブロック要素として表示 */
    width: 60px; /* ロゴの幅を指定 */
    height: 69px; /* ロゴの高さを指定 */
    /* ★★★ ロゴ画像のURL - 正しいかご確認ください ★★★ */
    background-image: url('/shumari/wp-content/uploads/2025/05/icon-headline.png');
    background-size: contain; /* 画像全体が収まるように調整 */
    background-repeat: no-repeat; /* 画像を繰り返さない */
    background-position: center center; /* 画像を中央に配置 */
    margin-right: 15px; /* ロゴとタイトルの間の余白（適宜調整） */
    flex-shrink: 0; /* ロゴが縮まないようにする */
}
html body.archive .site-body,
html body.single .site-body {
    padding-top: 1em !important; /* ★ 30px に変更 ★ */
}

/* ================================== */


/* ================================== */
/* 関連製品一覧カードスタイル調整 */
/* ================================== */

.related-lineup-grid {
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px; /* カラム間の余白調整用 */
    margin-right: -10px; /* カラム間の余白調整用 */
}

.related-lineup-grid .vk_post.card {
    display: flex;
    flex-direction: column;
    width: calc(25% - 20px); /* PCで4カラム表示の場合 (余白20px) */
    margin: 0 10px 20px 10px; /* 上下左右の余白 */
    box-sizing: border-box;
}

.related-lineup-grid .vk_post_imgOuter {
    padding-top: 66.66%; /* 画像のアスペクト比 3:2 の例 */
    position: relative;
    background-size: cover;
    background-position: center;
}

.related-lineup-grid .vk_post_imgOuter_img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.related-lineup-grid .vk_post_body {
    flex-grow: 1;
}

/* レスポンシブ対応 (カラム数の調整) */
@media (max-width: 991px) {
    .related-lineup-grid .vk_post.card {
        width: calc(33.333% - 20px); /* 3カラム */
    }
}
@media (max-width: 767px) {
    .related-lineup-grid .vk_post.card {
        width: calc(50% - 20px); /* 2カラム */
    }
}
@media (max-width: 575px) {
    .related-lineup-grid .vk_post.card {
        width: calc(100% - 20px); /* 1カラム */
    }
}
/* ================================== */