/*
Theme Name:  Arkhe Child
Template:    arkhe
Description: Arkhe専用の子テーマ
Version:     1.0.0
*/

/**
 * ==============================================================================
 * 井口工務所 オリジナル装飾デザインキット (Arkhe用)
 * ==============================================================================
 */


/* --- 1. 見出し（H1～H5） --- */


/* H2：信頼感のある紺色の塗り（セクション見出し） */

.topH2{
	background-color: #45392f; /* 濃いブラウン */
            color: #ffffff;
            padding: 15px 20px;
            font-weight: bold;
            letter-spacing: 0.05em;
}

.l-main .c-postContent h2 {
background: linear-gradient(to bottom, #f0ede4 0%, #cdc3a7 100%); /* 上から下のグラデーション */
            color: #443c33; /* 焦げ茶色の文字 */
            padding: 12px 20px;
            font-size: 1.3rem;
            font-weight: bold;
            border-left: 1px solid #b7ac8f; /* 微かな縁取り */
            border-right: 1px solid #b7ac8f;
}

/* H3：吹き出し風、または下線（サブセクション） */
.l-main .c-postContent h3 {
    color: #1a325d; /* 濃い紺色 */
            font-size: 1.25rem;
            font-weight: bold;
            line-height: 1.6;
            border-bottom: 1px solid #333; /* 下の線 */
            padding-bottom: 8px;
            display: inline-block;
            width: 100%;
}

.l-main .c-postContent h3::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 20%;
    height: 2px;
    background: #a68cbe; /* アクセントカラー */
}

/* H4：シンプルな左線 */
.l-main .c-postContent h4 {
    padding-left: 0.6em;
    border-left: 4px solid #002b5b;
    font-size: 1.1rem;
    margin-top: 2em;
}

/* --- 2. リストタグ（点・数字） --- */

/* 点（ul）：旧サイトの「選ばれる理由」風のダイヤ型 */
.l-main .c-postContent ul li {
    list-style: none;
    position: relative;
    padding-left: 1.8em;
    margin-bottom: 0.5em;
}

.l-main .c-postContent ul li::before {
    content: "◆"; /* 旧サイト参照 [cite: 18, 51] */
    position: absolute;
    left: 0;
    color: #002b5b;
    font-size: 0.9em;
}

/* --- リストタグ（数字）：標準スタイル --- */

/* リスト全体の基本設定をリセット */
.l-main .c-postContent ol {
    list-style: decimal !important; /* 標準の数字 (1. 2. 3...) に戻す */
    padding-left: 1.5em !important; /* 数字が表示されるスペースを確保 */
    counter-reset: none !important; /* 独自カウンターを無効化 */
    margin-bottom: 1.5em !important;
}

/* 各項目の余白調整 */
.l-main .c-postContent ol li {
    display: list-item !important;  /* 標準のリスト挙動に戻す */
    padding-left: 0.5em !important; /* 数字とテキストの間の微調整 */
    margin-bottom: 0.5em !important;
    position: static !important;    /* 以前の relative 指定を解除 */
}

/* 以前作成した「青い丸」を完全に消去 */
.l-main .c-postContent ol li::before {
    content: none !important;
}

/* --- 3. テーブル（比較表・料金表用） --- */

.l-main .c-postContent table {
    width: 100%;
    border-collapse: collapse;
    border-top: 3px solid #002b5b;
}

.l-main .c-postContent th {
    background: #f0f4f8;
    color: #002b5b;
    font-weight: bold;
    padding: 12px;
    border: 1px solid #d1d9e1;
}

.l-main .c-postContent td {
    padding: 12px;
    border: 1px solid #d1d9e1;
}

/* --- 4. アコーディオン (Q&A用) --- */

.p-qaBox {
    margin-bottom: 1em;
    border: 1px solid #d1d9e1;
}

.p-qaBox__q {
    background: #002b5b;
    color: #fff;
    padding: 10px 15px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
}

.p-qaBox__q::before {
    content: "Q";
    margin-right: 10px;
    color: #e0d0b0;
}

.p-qaBox__a {
    padding: 15px;
    background: #fff;
    border-top: 1px solid #d1d9e1;
}

.p-qaBox__a::before {
    content: "A";
    margin-right: 10px;
    color: #c00;
    font-weight: bold;
}

/* --- 5. 強調ボックス（解決事例・お客様満足度用） --- */

.u-iguchi-box {
    padding: 2em;
    background: #fff;
    border: 2px solid #e0d0b0; /* 金茶色の枠線 [cite: 25, 26] */
    border-radius: 8px;
    position: relative;
}

.u-iguchi-box::after {
    content: "大正14年創業の信頼"; /* [cite: 50, 162] */
    position: absolute;
    top: -12px;
    left: 20px;
    background: #e0d0b0;
    color: #fff;
    padding: 2px 10px;
    font-size: 0.7em;
    font-weight: bold;
}

/* --- 井口工務所専用：高機能タブ装飾 (p-custom-tabs) --- */
/**
 * タブブロック（Snow Monkey Blocks）のカスタマイズ
 * クラス名: .p-tabIguchi
 */

/* 1. タブボタン全体のレイアウト調整 */
.p-tabIguchi .smb-tabs__tabs {
    border-bottom: none !important;
    display: flex !important;
}

.p-tabIguchi .smb-tabs__tab-wrapper {
    flex: 1 !important;
    margin: 0 !important; /* ボタン間の隙間をなくす */
}

/* 2. ボタン部分のデザイン */
.p-tabIguchi .smb-tabs__tab {
    width: 100% !important;
    font-size: 1.15rem !important; /* フォントサイズを大きく */
    font-weight: bold !important;
    padding: 22px 10px !important; /* パディングを設ける */
    background: linear-gradient(to bottom, #ffffff 0%, #e6e6e6 100%) !important; /* グレーのグラデーション */
    border: 1px solid #ccc !important; /* 押されていないタブ含め全て罫線で囲う */
    border-bottom: none !important; /* ボディの枠線と重ねるため下線は消す */
    border-radius: 0 !important;
    position: relative;
    transition: background 0.3s ease;
}

/* 3. 選択中（アクティブ）のタブ装飾：下向き矢印 */
.p-tabIguchi .smb-tabs__tab[aria-selected="true"] {
    background: linear-gradient(to bottom, #f7f7f7 0%, #dcdcdc 100%) !important;
}

.p-tabIguchi .smb-tabs__tab[aria-selected="true"]::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #999; /* グレーの小さな矢印 */
}

/* 4. テキストエリア（ボディ）部分 */
.p-tabIguchi .smb-tabs__body {
	background-color:#fcf5ed;
    padding: 0px 0px !important; /* テキストエリアにパディングを設ける */
    margin-top: -1px; /* タブボタンの境界線と合わせる */
}
.p-tabIguchi .smb-tabs__body p{
    margin:20px;
}

/* 各ボタン内のテキスト色の再現（必要に応じて） */
.p-tabIguchi .smb-tabs__tab-wrapper:nth-child(1) .smb-tabs__tab { color: #800000 !important; } /* 建物：エンジ */
.p-tabIguchi .smb-tabs__tab-wrapper:nth-child(2) .smb-tabs__tab { color: #103623 !important; } /* 区分：緑 */
.p-tabIguchi .smb-tabs__tab-wrapper:nth-child(3) .smb-tabs__tab { color: #003366 !important; } /* 土地：紺 */
.p-tabIguchi .smb-tabs__tab-wrapper:nth-child(4) .smb-tabs__tab { color: #542b7b !important; } /* 区分：紫 */
.p-tabIguchi .smb-tabs__tab-wrapper:nth-child(5) .smb-tabs__tab { color: #684c00 !important; } /* 土地：黄 */


/* スマートフォン表示での調整 */
@media (max-width: 767px) {
    .p-tabIguchi .smb-tabs__tab {
        font-size: 0.95rem !important;
        padding: 15px 5px !important;
    }
    .p-tabIguchi .smb-tabs__body {
        padding: 25px 15px !important;
    }
}

/* CSSで画像を差し替える（簡易版） */
.u-img-swap1:hover img {
    content: url('https://iguchi-koumusyo.com/wp-content/uploads/2026/03/bl04_01_on.jpg');
}
.u-img-swap2:hover img {
    content: url('https:/iguchi-koumusyo.com/wp-content/uploads/2026/03/bl04_02_on.jpg');
}
.u-img-swap3:hover img {
    content: url('https://iguchi-koumusyo.com/wp-content/uploads/2026/03/bl04_03_on.jpg');
}
.u-img-swap4:hover img {
    content: url('https://iguchi-koumusyo.com/wp-content/uploads/2026/03/bl04_04_on.jpg');
}
.u-img-swap5:hover img {
    content: url('https://iguchi-koumusyo.com/wp-content/uploads/2026/03/bl04_05_on.jpg');
}
.u-img-swap6:hover img {
    content: url('https://iguchi-koumusyo.com/wp-content/uploads/2026/03/bl04_06_on.jpg');
}

/* 明朝体（高級感・信頼感）に変更するクラス */
.u-font-serif {
    font-family: "BIZ UDPMincho", "MS PMincho", serif !important;
}

/**
 * 汎用ホバーエフェクト：マウスを乗せると白っぽく光る
 */
.u-hover-white {
    transition: opacity 0.3s, filter 0.3s; /* 0.3秒かけて滑らかに変化  */
    cursor: pointer; /* カーソルを指マークにする */
}

.u-hover-white:hover {
    opacity: 0.75; /* 少し透明にして背景の白を透かす */
    filter: brightness(1.1); /* 明るさを1.1倍にする */
}

/* 画像がリンク（aタグ）の場合の調整 */
a.u-hover-white:hover {
    text-decoration: none;
}


/**
 * 画像ボタン：マウスオーバーで色を反転させる
 */
.u-img-invert {
    transition: filter 0.3s ease; /* 0.3秒かけて滑らかに変化 */
    cursor: pointer;
}

.u-img-invert:hover {
    filter: invert(100%); /* 色を完全に反転 */
}

/* （応用）色反転ではなく、少し明るくして「押せる感」を出す場合 */
.u-img-bright {
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.u-img-bright:hover {
    filter: brightness(1.2); /* 20%明るくする */
    opacity: 0.9;            /* 少し透明にする */
}

/**
 * 画像ボタン：マウスオーバーで茶色の光（オーラ）を帯びる
 */
.u-img-brown-glow {
    transition: all 0.3s ease; /* 変化を滑らかに */
}

.u-img-brown-glow:hover {
    /* 茶色の光を外側に放つ（色：#a68c5b を使用） */
    filter: drop-shadow(0 0 15px rgba(166, 140, 91, 0.7)); 
    
    /* わずかに浮き上がらせて「押せる感」を強調 */
    transform: translateY(-3px);
    
    /* ほんの少しだけ明るくして光っている感を出す */
    filter: drop-shadow(0 0 15px rgba(166, 140, 91, 0.7)) brightness(1.1);
}

/**
 * 画像リンク：標準のホバー演出（水色・半透明）をリセット
 */

/* 1. 画像を包むリンク自体の背景色と透明度を固定 */
.wp-block-image a:hover,
a:hover .u-img-brown-glow,
a:hover .u-img-invert {
    background-color: transparent !important; /* 水色背景を消去 */
    opacity: 1 !important;                   /* 半透明（0.7等）を1に戻す */
    box-shadow: none !important;              /* 余計な影を消去 */
}

/* 2. 画像自体の透明度も念のため固定 */
.u-img-brown-glow,
.u-img-invert {
    opacity: 1 !important;
}

/**
 * 画像やカバーブロックのマージンを完全にゼロにするクラス
 */
.u-m0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 画像ブロック自体の下マージンも消す */
.u-m0 figure {
    margin: 0 !important;
}

/* 縦並びのブロック間の隙間を消すための設定（Arkhe用） */
.u-m0.wp-block-image,
.u-m0.wp-block-cover {
    display: block !important;
}

/**
 * 箱全体をクリック可能にする（透明なリンクの拡大）
 */
.u-clickable-box {
    position: relative;
    transition: background 0.3s;
}

.u-clickable-box a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* 箱全体を覆う */
}

.u-clickable-box:hover {
    background-color: rgba(255, 255, 255, 0.05); /* 触った時に少し色を変える */
}

/**
 * 汎用全幅クラス（背景は全幅、中身は中央寄せ）
 */

/* 親要素：画面幅いっぱいに広げる */
.u-full-bleed {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    position: relative;
    left: 0;
    right: 0;
    /* 背景色や画像を設定しやすくするための余白 */
    padding-top: 40px;
    padding-bottom: 40px;
}

/* 子要素：コンテンツを中央に寄せる */
.u-full-bleed__inner {
    /* Arkheの標準コンテナ幅を使用 */
    max-width: var(--ark-width--container, 1200px);
    margin-left: auto !important;
    margin-right: auto !important;
    /* スマホ時の左右余白 */
    padding-left: 20px;
    padding-right: 20px;
}

/**
 * 汎用テーブル：60/40分割スペック表
 */
.u-table-spec {
    width: 100% !important;
    border-collapse: collapse !important;
    table-layout: fixed !important; /* 列幅を固定するために必須 */
    border: 1px solid #d1d9e1 !important; /* 外枠のグレー */
    margin-bottom: 1.5em !important;
}

.u-table-spec th,
.u-table-spec td {
    padding: 12px 15px !important;
    border: 1px solid #d1d9e1 !important; /* 中の罫線 */
    vertical-align: middle !important;
    font-size: 16px;
    line-height: 1.6;
}

/* 左側（1列目）：幅60% + 薄グレー背景 */
.u-table-spec tr > *:first-child {
    width: 60% !important;
    background-color: #f7f7f7 !important;
    font-weight: bold;
    color: #333;
}

/* 右側（2列目）：幅40% + 白背景 */
.u-table-spec tr > *:last-child {
    width: 40% !important;
    background-color: #ffffff !important;
}

/* スマホ表示：画面が狭い場合は幅を自動調整（文字が潰れないように） */
@media (max-width: 599px) {
    .u-table-spec {
        table-layout: auto !important;
    }
    .u-table-spec tr > *:first-child {
        width: 50% !important;
    }
    .u-table-spec tr > *:last-child {
        width: 50% !important;
    }
}

/**
 * 固定ページリスト：テーブル風装飾（罫線・アイコン修正 決定版）
 */

/**
 * リストの最上部に固定ヘッダー行（よくあるQ&A）を追加
 */
.u-qa-list.wp-block-page-list::before {
    content: "INDEX" !important; /* 表示する文字 */
    display: block !important;
    background-color: #a68c5b !important; /* ヘッダーの茶色 */
    color: #fff !important;               /* 文字は白 */
    padding: 12px 20px !important;        /* 他の行と高さを合わせる */
    font-weight: bold !important;
    font-size: 1.1rem !important;
    border-bottom: 1px solid #a68c5b !important;
    box-sizing: border-box !important;
}

/* 1. リスト全体の初期化：枠線と背景 */
.u-qa-list.wp-block-page-list,
.u-qa-list.wp-block-page-list ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-indent: 0 !important;
}

/* 外枠（上・右・左のみ） */
.u-qa-list.wp-block-page-list {
    border: 1px solid #a68c5b !important;
    border-bottom: none !important; /* 下線は中のアイテムで引くので消す */
    background-color: #fff !important;
}

/* 2. リスト項目(li)から装飾を一旦すべて外す */
.u-qa-list.wp-block-page-list li {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* 菱形アイコンを強制非表示 */
.u-qa-list.wp-block-page-list li::before,
.u-qa-list.wp-block-page-list li::after {
    content: none !important;
    display: none !important;
}

/* 3. 【重要】リンク自体に下線を引くことで「親子の間の線」を出す */
.u-qa-list.wp-block-page-list .wp-block-pages-list__item__link {
    display: block !important;
    padding: 14px 20px !important;
    text-decoration: none !important;
    color: #333 !important;
    line-height: 1.5 !important;
    border-bottom: 1px solid #a68c5b !important; /* すべてのテキストの下に線を引く */
    transition: background 0.2s;
}

/* 4. 記号とホバーの調整 */
.u-qa-list.wp-block-page-list .wp-block-pages-list__item__link::before {
    content: ">" !important;
    margin-right: 12px !important;
    color: #a68c5b !important;
    font-weight: bold !important;
}

.u-qa-list.wp-block-page-list .wp-block-pages-list__item__link:hover {
    background-color: #fcfaf5 !important;
}

/* 5. 階層ごとのインデント（左余白）調整 */
/* 第2階層（子ページ） */
.u-qa-list.wp-block-page-list ul li .wp-block-pages-list__item__link {
    padding-left: 45px !important;
}

/* 第3階層（孫ページ） */
.u-qa-list.wp-block-page-list ul ul li .wp-block-pages-list__item__link {
    padding-left: 70px !important;
}


/**
 * 固定ページリスト：ウィジェット用　親しか表示しない
 */
.parent-page-list li > ul,
.parent-page-list li > .children {
    display: none !important;
}

.widget-border{
border: 1px solid #000;	
}