/*
Theme Name:MONAD child
Theme URI:https://tcd-theme.com/tcd110
Description:WordPressテーマ「MONAD」の子テーマ
Template:monad_tcd110
Author:TCD
Author URI:https://tcd-theme.com/
Version:1.0
*/

/*
  ここから下にCSSを追記してください。
*/

/* =================================
   Contact Form7 メッセージ本文修正
   ================================= */

/* メッセージ本文 */
.wpcf7 textarea{
background:#ffffff !important;
border:1px solid #cccccc !important;
width:100%;
padding:12px;
box-sizing:border-box;
}

/* PC */
.wpcf7 textarea{
min-height:180px;
}

/* スマホ */
@media screen and (max-width:768px){
.wpcf7 textarea{
min-height:140px;}
}

/* =================================
   Contact Form 7 デザイン（完全上書き）
   ゴールド背景 + 白枠1本
   レスポンシブ対応
================================= */

/* 外枠（1本だけにする） */
.wpcf7{
background:#d4af37 !important;
border:2px solid #ffffff !important;
padding:30px !important;
box-sizing:border-box;
}

/* 内側の枠を削除（二重防止） */
.wpcf7 form,
.wpcf7-form{
background:transparent !important;
border:none !important;
box-shadow:none !important;
padding:0 !important;
margin:0 !important;
}

/* 入力欄 */
.wpcf7 input,
.wpcf7 textarea,
.wpcf7 select{
width:100%;
padding:12px;
background:#ffffff;
border:1px solid #cccccc;
box-sizing:border-box;
font-size:16px;
}

/* フォーカス */
.wpcf7 input:focus,
.wpcf7 textarea:focus{
border:1px solid #d4af37;
outline:none;
}

/* 送信ボタン */
.wpcf7 input[type="submit"]{
background:#ff4040;
color:#ffffff;
border:none;
padding:14px 32px;
cursor:pointer;
font-size:16px;
}

/* hover */
.wpcf7 input[type="submit"]:hover{
background:#ffffff;
color:#ff4040;
}

/* =========================
   レスポンシブ
========================= */

@media screen and (max-width:768px){

.wpcf7{
padding:20px !important;
}

.wpcf7 input,
.wpcf7 textarea{
font-size:16px;
}

.wpcf7 input[type="submit"]{
width:100%;
padding:16px;
}

}

/* =========================
   Contactページ 本番デザイン再現
========================= */

/* ページ全体背景 */
body{
background:#000000 !important;
color:#ffffff;
}

/* コンテンツ背景 */
#container,
#content,
#main_content{
background:#000000 !important;
}

/* 見出し */
h1,h2,h3,h4,h5{
color:#d32f2f;
}

/* テキスト */
p,li,span,label{
color:#ffffff;
}

/* 入力フォーム */
input,
textarea,
select{
background:#111111;
color:#ffffff;
border:1px solid #555;
padding:10px;
width:100%;
box-sizing:border-box;
}

/* メッセージ本文 */
textarea{
min-height:180px;
}

/* 送信ボタン */
input[type="submit"]{
background:#d32f2f;
color:#ffffff;
border:none;
padding:14px 30px;
cursor:pointer;
}

/* hover */
input[type="submit"]:hover{
background:#ff4040;
}

/* =========================
   レスポンシブ
========================= */

@media screen and (max-width:768px){

#container{
width:100%;
padding:0 15px;
box-sizing:border-box;
}

input,
textarea{
font-size:16px;
}

input[type="submit"]{
width:100%;
}

}

/* Contactタイトルを赤に */
#page_headline span{
color:#d32f2f !important;
}

/* メニュー文字を赤に */
#global_menu a{
color:#d32f2f !important;
}

/* マウスを乗せた時 */
#global_menu a:hover{
color:#ff4040 !important;
}

/* 現在のページ（Contactなど） */
#global_menu .current-menu-item a{
color:#d32f2f !important;
}

/* メニュー文字色 */
#global_menu > ul > li > a{
color:#d32f2f;
text-decoration:none;
}

/* マウスを乗せたとき → アンダーバー */
#global_menu > ul > li > a:hover{
text-decoration:underline;
}

/* 現在のページ（今開いているページ） → ゴールド */
#global_menu > ul > li.current-menu-item > a{
color:#d4af37 !important;
text-decoration:none;
}
/* ヘッダー背景を黒に */
#header{
background:#000000 !important;
}
/* フッター背景を赤に */
#footer_info,
#footer_info p,
#footer_info2,
#footer_info2 p{
color:#d32f2f !important;
}

/* フッターリンク */
#footer_info a{
color:#d32f2f !important;
}

/* トップへ戻るボタンをゴールド */
#page_top,
#page_top a,
#return_top,
#return_top a{
background:#d4af37 !important;
color:#000 !important;
}

/* マウスオン */
#page_top:hover,
#return_top:hover{
background:#c9a227 !important;
}
/* Agreementページボタンエリア */
.custom-button-container{
text-align:center;
margin:60px 0;
}

/* ボタンデザイン */
.custom-button{
display:inline-block;
background:#d32f2f;
color:#ffffff !important;
font-size:18px;
font-weight:bold;
padding:16px 200px;
text-decoration:none;
border-radius:6px;
letter-spacing:1px;
transition:all .3s;
}

/* ホバー */
.custom-button:hover{
background:#d4af37;
color:#000 !important;
transform:translateY(-2px);
}

/* TOPページ ボタンコンテナ */
.custom-button-container{
display:flex;
flex-wrap:wrap;
gap:20px;
justify-content:center;
margin-top:50px;
padding:0 10px;
}


/* TOPページ ボタンデザイン */
.custom-button-container .custom-button{
background-color:black;
color:#d4af37;
border:3px solid #d4af37;
padding:23px 25px;
font-size:20px;
font-weight:bold;
cursor:pointer;
text-align:center;
text-decoration:none;
border-radius:50px;
transition:background-color 0.3s, color 0.3s;
min-width:140px;
max-width:220px;
flex:1 1 auto;
box-sizing:border-box;
}

/* hover */
.custom-button-container .custom-button:hover{
background-color:#d4af37;
color:black;
}

/* スマホ */
@media (max-width:600px){

.custom-button-container{
flex-direction:column;
}

.custom-button-container .custom-button{
font-size:16px;
padding:15px 20px;
flex:1 1 100%;
max-width:none;
}

}

/* コンテンツ背景を黒に変更 */
.cb_white_bg{
background-color:#000 !important;
}

/* 内側コンテンツも黒 */
.cb_white_bg .content,
.cb_white_bg .post_content{
background-color:#000 !important;
}

.blog .category_list a{
color:#ff0000 !important;
}

.blog .category_list li:hover a{
color:#8B0000 !important;
}

/* parent-dog 画像が切れないようにする */
#service_content_list .service_content .image_wrap {
    aspect-ratio: initial;
}
#service_content_list .service_content .image_wrap img {
    position: initial;
}

/* Agreementページ RBKボタン */
.page-agreement .post_content .custom-button{
color:#d32f2f !important;      /* 文字 赤 */
border:2px solid #d4af37;      /* 枠 ゴールド */
padding:18px 65px;             /* 横長 */
text-decoration:none;
}

/* マウスON */
.page-agreement .post_content .custom-button:hover{
background:#d4af37;
color:#d32f2f !important;
text-decoration:underline;
}

/* コンテンツ1 背景をワイド表示 */
.cb_white_bg{
position:relative;
z-index:1;
}

.cb_white_bg::before{
content:"";
position:absolute;
left:50%;
transform:translateX(-50%);
width:100vw;
height:100%;
background:#000;
top:0;
z-index:-1;
}


/* TOP コンテンツ2 ボタン文字色 */
.home .custom-button-container .custom-button{
color:#dd3333 !important;
border:3px solid #d4af37;
}

/* オンマウス */
.home .custom-button-container .custom-button:hover{
color:#dd3333 !important;
}


/* ===== サイト共通ボタン ===== */

.custom-button{
display:inline-block;
background:#000;
color:#dd3333;
border:3px solid #d4af37;
border-radius:50px;
padding:18px 60px;
text-align:center;
text-decoration:none;
font-weight:bold;
white-space:nowrap;
transition:0.3s;
}

/* hover */
.custom-button:hover{
background:#d4af37;
color:#dd3333;
text-decoration:underline;
}


/* parent-dog ページ 犬名と「詳しく見る」を赤に */
.page-parent-dog #service_content_list .service_content .title{
color:#dd3333 !important;
}

.page-parent-dog #service_content_list .service_content .more{
color:#dd3333 !important;
}

/* hoverでも赤 */
.page-parent-dog #service_content_list .service_content:hover .title,
.page-parent-dog #service_content_list .service_content:hover .more{
color:#dd3333 !important;
}

#service_content_list .service_content a{
color:#dd3333 !important;
}


/* parent-dog 個別ページ（single_service）限定 */
/* ========================================
   parent-dog 個別ページ（single） 色変更
   デザインはそのまま、色だけ変更
======================================== */
/* =========================
   parent-dog 個別ページ カスタム（タイトル背景ゴールド）
========================= */

/* 投稿タイトル（h2.headline span） 背景ゴールド、文字赤、枠ゴールド、角丸なし */
.single-service #service_header h2.headline span {
    background-color: #d4af37 !important;   /* 背景ゴールド */
    color: #dd3333 !important;              /* 文字赤 */
    border: 2px solid #d4af37 !important;   /* 枠ゴールド */
    padding: 20px 30px !important;          /* 文字周りの余白 */
    border-radius: 0 !important;            /* 角丸なし */
    display: inline-block !important;
}

/* =========================
   parent-dog 個別ページ カスタム（写真カード枠調整）
========================= */

/* 写真カードの枠 ゴールド、写真のサイズや余白は維持 */
.single-service #service_header {
    border: 3px solid #d4af37 !important;   /* 枠ゴールド */
    padding: 80px !important;               /* 写真と枠の間に余白 */
    box-sizing: border-box;
    display: inline-block;                  /* 写真のサイズを崩さない */
}

/* 写真そのものは元のサイズを維持 */
.single-service #service_header picture,
.single-service #service_header img {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
}

/* =========================
   レスポンシブ対応（スマホ・タブレット）
========================= */
@media screen and (max-width:768px) {
    /* タイトル余白を縮小 */
    .single-service #service_header h2.headline span {
        padding: 12px 20px !important;
        font-size: 16px !important; /* 文字サイズも調整 */
    }

    /* 写真カードの枠の余白縮小 */
    .single-service #service_header {
        padding: 40px !important;
    }
}

/* タイトルは常に上で中央揃えにせず、幅いっぱいに表示 */
.single-service #service_header h2.headline span {
    display: inline-block !important;
    width: auto;
    background-color: #d4af37 !important; /* 背景ゴールド */
    color: #dd3333 !important;           /* 文字赤 */
    border: 2px solid #d4af37 !important;/* 枠ゴールド */
    padding: 20px 30px !important;       /* 文字周りの余白 */
    border-radius: 0 !important;         /* 角丸なし */
}

/* 写真カードの枠 ゴールド、スマホは枠内中央配置 */
.single-service #service_header .image,
.single-service #service_header picture,
.single-service #service_header img {
    display: block;
    margin: 0 auto;         /* 横中央 */
    max-width: 100%;
    height: auto;
}

/* スマホ表示時 */
@media screen and (max-width:480px) {
    .single-service #service_header {
        padding: 60px 20px 80px 20px !important; /* 上右下左 */
        box-sizing: border-box;
    }

    /* 写真カードだけ中央配置 */
    .single-service #service_header .image {
        display: flex !important;
        justify-content: center;
        align-items: center;
    }

    /* タイトルの余白を少し縮小 */
    .single-service #service_header h2.headline span {
        padding: 8px 12px !important;
        font-size: 14px !important;
    }
}

/* スマホ表示時 */
@media screen and (max-width:480px) {
    .single-service #service_header {
        padding: 60px 20px 80px 20px !important; /* 上右下左 */
        margin-top: 30px !important;             /* 上マージンを少し縮小 */
    }
}

/* ページ内リンク 上段 parent-dog */
.single-service #category_sort_button h2.headline span {
    color: #dd3333 !important;              /* 文字赤 */
}
#category_sort_button li.item a {
    background-color: transparent;   /* 背景は透明（つまり下が黒なら黒として見える） */
}


/* サービス アーカイブページ カード枠をゴールド */
.post-type-archive-service #service_content_list .service_content{
border:2px solid #d4af37 !important;
}




/* =====================================================
   CSS整理ブロック（既存CSSは変更しない）
   ===================================================== */

/* =================================
   共通基本設定
================================= */

body{
background:#000000;
color:#ffffff;
}

/* 見出し */
h1,h2,h3,h4,h5{
color:#d32f2f;
}

/* =================================
   共通フォーム
================================= */

input,
textarea,
select{
background:#111111;
color:#ffffff;
border:1px solid #555;
padding:10px;
width:100%;
box-sizing:border-box;
}

/* =================================
   共通ボタン
================================= */

.custom-button{
display:inline-block;
background:#000;
color:#dd3333;
border:3px solid #d4af37;
border-radius:50px;
padding:18px 60px;
text-align:center;
text-decoration:none;
font-weight:bold;
white-space:nowrap;
transition:0.3s;
}

.custom-button:hover{
background:#d4af37;
color:#dd3333;
text-decoration:underline;
}

/* =================================
   TOPボタン
================================= */

#page_top,
#page_top a,
#return_top,
#return_top a{
background:#d4af37 !important;
color:#000 !important;
}

/* =================================
   フッター
================================= */

#footer_info,
#footer_info p,
#footer_info2,
#footer_info2 p,
#footer_info a{
color:#d32f2f !important;
}

/* =================================
   サービスカード
================================= */

.post-type-archive-service #service_content_list .service_content{
border:2px solid #d4af37 !important;
}

/* =================================
   parent-dog 文字色
================================= */

.page-parent-dog #service_content_list .service_content .title,
.page-parent-dog #service_content_list .service_content .more{
color:#dd3333 !important;
}

/* ロード画面 キャッチフレーズ色 */
#loader_catch,
#loader_catch span{
color:#d4af37 !important;
}

/* parent-dog メニューの線色 */
#category_sort_button ol li{
border-color:#d4af37 !important;
}

/* parent-dog メニュー hover */
#category_sort_button ol li a:hover span{
color:#dd3333 !important;
}

/* parent-dog 現在ページ（Paris） */
#category_sort_button ol li.active_menu span{
color:#dd3333 !important;
}

/* ハンバーガーメニュー（三本線） */
#drawer_menu_button span,
#drawer_menu_button span:before,
#drawer_menu_button span:after{
background:#ffffff !important;
}

/* ============================== 
   パンくずリスト：家アイコンのみ & 中央寄せ
   ============================== */
#bread_crumb {
    display: flex;
    justify-content: center; /* 全体中央寄せ */
    padding: 10px 20px;
    background: #000;
    font-size: 16px;
    color: #fff;
}

#bread_crumb ul {
    display: flex;
    align-items: center;  /* li縦中央揃え */
    list-style: none;
    padding: 0;
    margin: 0;
}

/* li */
#bread_crumb li {
    display: flex;
    align-items: center; /* li内テキスト中央揃え */
}

/* 家アイコンのみ、文字は非表示 */
#bread_crumb li.home a span {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 15px; /* 家と次テキストの間隔 */
    background-image: url("https://it-promotion.sakura.ne.jp/test_ryusbase/wp-content/uploads/2026/03/名称未設定のデザイン-78.png");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    text-indent: -9999px; /* 文字を隠す */
}

/* 区切り「>」をテキスト中央に + 後ろにスペース */
#bread_crumb li + li:before {
    content: ">";              /* 記号だけ */
    color: #ffffff;
    display: inline-block;     /* flex は不要 */
    vertical-align: middle;    /* 文字中央に揃える */
    margin-left: px;          /* 左側スペース */
    margin-right: 25px;         /* 右側スペース */
}

/* リンク文字 */
#bread_crumb li a {
    color: #ffffff;
    text-decoration: none;
    display: inline-flex;
    align-items: center; /* 区切りとの高さ揃え */
}

/* ホバー時 */
#bread_crumb li a:hover {
    color: #dd3333;
}

/* 最後のアイテム（現在地） */
#bread_crumb li.last span {
    color: #ffffff;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    #bread_crumb li.home a span {
        width: 14px;
        height: 14px;
    }
    #bread_crumb li + li:before {
        margin: 0 4px;
    }
}