@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/*コンテンツ上部メインビジュアル*/
.main-g img{
	max-width: 100%;
　　height: auto;
}

.content-top {
    margin: 0;
}

#media_image-2 {
    margin-bottom: 0;
}

.content {
    margin-top: 0;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
	/* 外側の枠線があるカラム全体の左右に余白を作る */
    .home-block-care {
        margin-right: 15px !important;
        margin-left: 15px !important;
        /* もし枠線が画面幅いっぱいになるのを防ぐ場合は box-sizing を指定 */
        box-sizing: border-box !important;
    }

    /* カラム内の個別のコンテンツ（画像やテキスト）にも微調整 */
    .home-block-care {
        padding-right: 15px !important;
        padding-left: 15px !important;
    }

/* インスタフィード全体を包むエリアに左右余白を作る */
    .my-insta-feed {
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }

    /* 画像同士の間隔を少し広げてスッキリさせる場合（お好みで） */
    .my-insta-feed #sb_instagram .sbi_photo {
        margin-bottom: 10px !important;
    }

    /* 画像が2列、1列になった際、親要素の幅を超えないようにする */
    .my-insta-feed #sb_instagram {
        width: 100% !important;
        margin: 0 auto !important;
    }

/* クラス名 page-deco-image を持つ要素に左右余白を追加 */
    .page-deco-image {
        padding-left: 15px !important;
        padding-right: 15px !important;
        
        /* 画像がはみ出さないようサイズ計算を調整 */
        box-sizing: border-box !important;
        
        /* もし画像自体が横幅いっぱい(100%)設定なら幅も微調整 */
        display: block !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* 画像そのものに対して余白をつけたい場合 */
    .page-deco-image img {
        width: 100% !important;
        height: auto !important;
    }	
	
.is-style-bracket-box.is-style-square-brackets-box {
        /* 文字を一行に固定 */
        white-space: nowrap !important;
        
        /* 画面幅に合わせて文字サイズを自動で縮小させる */
        font-size: clamp(14px, 4vw, 24px) !important;
        
        /* 括弧が被らないように左右の余白を十分に確保 */
        padding-left: 40px !important;
        padding-right: 40px !important;
        
        /* ボックスを中央寄せし、幅を文字に合わせる */
        display: table !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: auto !important;
        box-sizing: border-box !important;
    }

    /* 左側のカギ括弧「 の位置を固定 */
    .is-style-bracket-box.is-style-square-brackets-box::before {
        position: absolute !important;
        left: 5px !important;
        top: 0 !important;
        margin: 0 !important;
    }

    /* 右側のカギ括弧 」の位置を固定 */
    .is-style-bracket-box.is-style-square-brackets-box::after {
        position: absolute !important;
        right: 5px !important;
        bottom: 0 !important;
        margin: 0 !important;
    }
	
	/* page-ex-txt クラス内の p タグに余白を適用 */
    .page-ex-txt {
        padding-left: 15px !important;
        padding-right: 15px !important;
        
        /* テキストの折り返しを自然にする設定 */
        box-sizing: border-box !important;
        line-height: 1.8; /* 行間を少し広げると読みやすくなります */
        margin-bottom: 1.5em; /* 段落間の余白 */
    }

/* ボックス全体の外側に余白を作る（要素自体を少し内側に寄せる） */
    .custom-come-box.is-style-balloon-bottom-box {
        margin-left: 15px !important;
        margin-right: 15px !important;
        
        /* 左右15pxずつの隙間を作るために、横幅を調整 */
        width: auto !important; 
        max-width: calc(100% - 30px) !important;
        
        /* 中央に配置 */
        display: block !important;
    }

/* テーブルの外側に余白を作りたい場合（ボックスごと内側に寄せる） */
    .is-style-regular {
        display: block !important;
        width: auto !important;
        /* 左右に 15px の外側余白を設ける */
        margin-left: 15px !important;
        margin-right: 15px !important;
        /* 横揺れ防止 */
        box-sizing: border-box !important;
    }

/* table-come-box クラスの中の p タグに限定して余白を適用 */
    .table-come-box {
        padding-left: 15px !important;
        padding-right: 15px !important;
        
        /* 要素の幅計算を正しく行う */
        box-sizing: border-box !important;
        
        /* テキストが不自然に浮かないよう、上下の余白も微調整（必要に応じて） */
        margin-top: 1em !important;
        margin-bottom: 1em !important;
        
        /* 中央寄せを確実にする */
        text-align: center !important; 
    }

	.check-list-center {
        padding-left: 15px !important;
        padding-right: 15px !important;
        
        /* 余白を含めて横幅を計算し、はみ出しを防止 */
        box-sizing: border-box !important;
        
        /* テキストを中央寄せにする場合（不要なら削除してください） */
        text-align: center !important;
        
        /* 読みやすくするための行間調整 */
        line-height: 1.8 !important;
    }

/* custom-form-txt クラスの中にある p タグに余白を適用 */
    .custom-form-txt p {
        padding-left: 15px !important;
        padding-right: 15px !important;
        
        /* 左右余白を足しても横幅が100%を超えないように設定 */
        box-sizing: border-box !important;
        
        /* テキストの配置を中央にする（必要に応じて） */
        text-align: center !important;
        
        /* 前後の要素との間隔を調整 */
        margin-top: 1.5em !important;
        margin-bottom: 1.5em !important;
    }

/* 1. フッター全体のレイアウトを縦並びに強制 */
    .footer-in.wrap,
    .footer-widgets,
    .footer-horizontal-wrapper,
    .footer-bottom-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
    }

/* 1. ウィジェット自体の余白をゼロにする */
    .footer-left .widget,
    .footer-left aside,
    .custom-html-widget {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 2. ロゴを確実に表示する */
    .logo-box {
        display: block !important;
        margin-bottom: 0px !important;
    }
    .logo-box img {
        width: 150px !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }
    
    /* 下部の不要な重複ロゴは消す */
    .footer-bottom-logo {
        display: none !important;
    }

    /* 3. SNSアイコンを表示させ、横並びにする */
    .sns-box {
        display: flex !important;
        flex-direction: row !important; /* SNSのみ横並び */
        justify-content: center !important;
        gap: 25px !important;
        margin: 0px !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* アイコンの色とサイズを強制指定 */
    .sns-box a {
        display: inline-block !important;
        text-decoration: none !important;
    }
    .sns-box .fab {
        font-size: 30px !important;
        color: #333 !important;
        display: inline-block !important;
    }

    /* 4. メニューを1行ずつ表示 */
    .navi-footer-in ul {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
        width: 100% !important;	
    }

    .navi-footer-in ul li {
        border: none !important;
        padding: 2px 0 !important;
        margin: 0 !important;
        width: 100% !important;
        text-align: center !important;
    }

    .navi-footer-in ul li a {
        font-size: 15px !important;
        color: #333 !important;
        display: block !important;
    }

	/* 4. メニューの余白調整 */
	.footer-bottom {
		margin-top: 0px !important;
		padding: 0px !important;
	}

	
/* 不要な要素の非表示 */
    .address-box, .footer-bottom-logo {
        display: none !important;
    }

/* フッター上の余白調整 */	
	.breadcrumb{
		margin: 0px !important;
		padding-bottom: 1em !important;		
	}

	.footer-horizontal-wrapper{
		padding: 0px !important;				
	}
}

/*480px以下*/
@media screen and (max-width: 480px){
/* 指定したボタン（home-care-button）の文字サイズを小さくする */
    .is-style-fill .wp-block-button__link,
    .is-style-fill a {
        /* 文字サイズを13pxに固定（お好みで12px〜14pxで調整してください） */
        font-size: 13px !important;
        
        /* ボタン自体の左右余白も少し削ると、より収まりが良くなります */
        padding-left: 30px !important;
        padding-right: 30px !important;
        
        /* 横幅を文字に合わせる */
        width: auto !important;
        display: inline-flex !important;
    }

    /* ボタンの親要素：中央に配置する */
    .wp-block-button.is-style-fill {
        display: flex !important;
        justify-content: center !important;
    }
	
	.is-style-bracket-box.is-style-square-brackets-box {
        /* 文字サイズをさらに小さく（14px〜18px程度で可変） */
        font-size: clamp(12px, 4.5vw, 18px) !important;
        
        /* 左右の余白を少し詰めて、文字が使える幅を確保する */
        padding-left: 25px !important;
        padding-right: 25px !important;
        
        /* ボックス自体の上下の余白もスマホ向けに調整 */
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }

    /* カギ括弧のサイズも文字に合わせて少し小さくする */
    .is-style-bracket-box.is-style-square-brackets-box::before,
    .is-style-bracket-box.is-style-square-brackets-box::after {
        font-size: 0.9em !important; /* 文字サイズの90%の大きさに */
    }
	
/* ボタンを包む親要素（pタグ）の横幅を調整して中央に寄せる */
    .form-submit-area p {
        display: block !important;
        width: 100% !important;
        /* 左右に15pxずつの余白を確保 */
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    /* ボタン自体の横幅を「余白を引いた100%」にする */
    .form-submit-area .wpcf7-submit {
        width: 100% !important;
        margin: 0 auto !important;
        display: block !important;
    }

    /* スピナー（読み込み中のアイコン）が原因で右に寄るのを防ぐ */
    .wpcf7-spinner {
        display: block !important;
        margin: 10px auto 0 !important; /* ボタンの下に配置 */
        position: static !important;
    }	
}

/* h1 見出しを明朝体 & レスポンシブ調整 */
.title-txt {
    font-family: "Sawarabi Mincho", "YuMincho", "Yu Mincho", "MS PMincho", serif !important;
    font-size: clamp(28px, 5vw, 42px) !important;   
    line-height: 1.4 !important; /* 行間を詰めると、より見出しらしくなります */
    color: #604c3f !important;
    text-align: center;
    letter-spacing: -0.05em;
 	margin-bottom:20px;
    /* 改行をできるだけ防ぐ設定 */
    white-space: nowrap;     /* 絶対に改行させない */
    overflow: hidden;        /* はみ出た場合は隠す（念のため） */
    text-overflow: ellipsis; /* もし超絶に狭い画面で入り切らない場合は「...」にする */
}

/* 非常に幅の狭いスマホ（320px等）で文字がはみ出る場合の予備設定 */
@media screen and (max-width: 380px) {
    .title-txt {
        font-size: 22px !important; /* 限界まで狭い時は少しだけ下げる */
        letter-spacing: -0.08em;    /* さらに文字間を詰めて収める */
    }
}

/* h1 見出しを明朝体の英字と日本語のサイズ調整 */
.size-down-title{
    font-size: clamp(24px, 4vw, 40px) !important;   	
}

/************************************
** ヘッダー　メニュー関係
************************************/
/* --- 1. ヘッダーとフッター共通の設定 --- */

/* 背景を透明にし、文字を薄くする */
.menu-pc .menu-item:not(.header-line-btn) a:hover,
.menu-footer .menu-item a:hover {
    background-color: transparent !important;
    opacity: 0.5 !important;
}

/* 下線を表示する */
/* ヘッダーは .item-label に対して、フッターは a に対して適用 */
.menu-pc .menu-item:not(.header-line-btn) a:hover .item-label,
.menu-footer .menu-item a:hover {
    text-decoration: underline !important;
    text-underline-offset: 6px;
    text-decoration-thickness: 1px;
}

/* --- 2. カレント（現在地）の背景色を消す --- */
.menu-pc .menu-item.current-menu-item a,
.menu-footer .menu-item.current-menu-item a {
    background-color: transparent !important;
}

/* --- 3. LINE予約ボタン（ヘッダーのみ）の除外設定 --- */
.menu-pc .header-line-btn a:hover {
    background-color: #06C755 !important; /* LINEのブランドカラー */
    opacity: 1 !important;
    text-decoration: none !important;
}

/* LINE予約ボタンのマウスオーバー設定 */
.menu-pc .header-line-btn a:hover {
    opacity: 0.7 !important;           /* 他のメニューと同じ薄さにする */
    background-color: #06C755 !important; /* 背景色は維持（またはお好みの色に） */
    text-decoration: none !important;    /* ボタンなので下線は出さない設定 */
}

/* 動きを滑らかにする設定（まだ入れていない場合） */
.menu-pc .header-line-btn a {
    transition: opacity 0.3s ease;
}

/************************************
** 固定ページ共通
************************************/

/* 1. 右上の日付（更新日）を非表示にする */
.date-tags, .post-date, .post-update {
    display: none !important;
}

/* 2. 固定ページの左右の余白（隙間）をゼロにする */
.page .main {
    padding: 0 !important;
    max-width: 100% !important;
}

/* 3. 記事本文エリアの余白もリセットする */
.page .entry-content {
    margin: 0 !important;
}

/* 4. 画像の下にできる小さな隙間も消す（必要に応じて） */
.page .entry-content img {
    vertical-align: bottom;
}

/* sp-center-btnという名前をつけたボタンだけをスマホで中央にする */
@media screen and (max-width: 768px) {
    .sp-center-btn {
        display: flex !important;
        justify-content: center !important;
        width: 100%;
    }
}

/* LINEボタンのサイズと位置の調整 */
.header-line-btn a {
	height:50px;
    background-color: #06C755 !important;
    color: #fff !important;
    border-radius: 30px;
    padding: 3px 16px !important; 
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5px !important; 
}

/* ロゴのサイズもボタンに合わせて微調整 */
.header-line-btn a i {
    font-size: 1.6em; /* 少し小さくしてスリムなボタンに合わせます */
    margin-right: 5px;
	transform: translateY(2px);
}

/* かぎ括弧スタイルの余白を狭くする */
.is-style-bracket-box {
    padding: 20px 30px !important; /* 上下20px、左右30pxに縮小（元はもっと広い） */
	font-family: "Sawarabi Mincho", "YuMincho", "Yu Mincho", "MS PMincho", serif;
}

/* 括弧自体の位置を文字に近づける */
.is-style-bracket-box::before,
.is-style-bracket-box::after {
    width: 30px !important;  /* 括弧の横幅 */
    height: 50px !important; /* 括弧の縦幅 */
}

.is-style-bracket-box::before {
    top: 5px !important;  /* 上の括弧を少し下げる */
    left: 100px !important; /* 上の括弧を少し右に寄せる */
}

.is-style-bracket-box::after {
    bottom: 5px !important;  /* 下の括弧を少し上げる */
    right: 100px !important;   /* 下の括弧を少し左に寄せる */
}

/* ***********2カラム用見出し*********** */
/* かぎ括弧スタイルの余白を狭くする */
.is-style-bracket-box-2 {
    padding: 20px 30px !important; /* 上下20px、左右30pxに縮小（元はもっと広い） */
	font-family: "Sawarabi Mincho", "YuMincho", "Yu Mincho", "MS PMincho", serif;
}

/* 括弧自体の位置を文字に近づける */
.is-style-bracket-box-2::before,
.is-style-bracket-box-2::after {
    width: 30px !important;  /* 括弧の横幅 */
    height: 50px !important; /* 括弧の縦幅 */
}

.is-style-bracket-box-2::before {
    top: 5px !important;  /* 上の括弧を少し下げる */
    left: 150px !important; /* 上の括弧を少し右に寄せる */
}

.is-style-bracket-box-2::after {
    bottom: 5px !important;  /* 下の括弧を少し上げる */
    right: 150px !important;   /* 下の括弧を少し左に寄せる */
}

.page-title-image.wp-block-cover {
    width: 100% !important;
    max-width: 100% !important;
    /* PC・スマホ共通で高さを400pxに固定 */
    height: 400px !important;
    min-height: 400px !important; 
    padding: 0 !important;
    margin: 0 auto !important;
}

/* 背景画像の制御 */
.page-title-image.wp-block-cover img.wp-block-cover__image-background {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* タイトル文字（inner-container）の配置設定 */
.page-title-image.wp-block-cover .wp-block-cover__inner-container {
    width: 100% !important;
    max-width: 1200px !important; /* コンテンツ幅に合わせる */
    z-index: 10;
    /* タイトルを左寄せにする場合（画像のデザインに合わせる） */
    display: flex !important;
    justify-content: flex-start !important; 
    align-items: center !important;
    padding-left: 5% !important;
}

/* スマホ表示（768px以下）での調整 */
@media screen and (max-width: 768px) {
    .page-title-image.wp-block-cover {
        height: 250px !important; /* スマホでは400pxだと高すぎる場合、250px程度に調整 */
        min-height: 250px !important;
    }
    
    .page-title-image.wp-block-cover .wp-block-cover__inner-container {
        justify-content: center !important; /* スマホでは中央寄せ */
        padding-left: 0 !important;
    }
}

/* --- 固定ページタイトルテキスト（.page-title-txt）の調整 --- */

.page-title-image.wp-block-cover .page-title-txt {
    /* フォントファミリーの指定 */
    font-family: "Sawarabi Mincho", "YuMincho", "Yu Mincho", "MS PMincho", serif !important;
    font-weight: bold;
    color: #604c3f; /* ロゴに合わせた茶色（必要に応じて変更してください） */
    
    /* 配置の調整 */
    width: 100% !important;
    max-width: 1400px !important; /* コンテンツの最大幅に合わせる（もっと左なら1600px等へ） */
    margin: 0 auto !important;   /* 中央に箱を置いてから */
    padding-left: 20px !important; /* 箱の左端からの距離（ここを減らすほど左に寄ります） */
    
    display: block !important;
    text-align: left !important;
}

/* 親コンテナ側の配置も左寄せを徹底する */
.page-title-image.wp-block-cover .wp-block-cover__inner-container {
    justify-content: flex-start !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important; /* 親自体を全幅いっぱいに広げる */
}

/* スマホ表示（768px以下） */
@media screen and (max-width: 768px) {
    .page-title-image.wp-block-cover .page-title-txt {
        margin-left: 20px; !important;
        text-align: left !important; /* スマホでは中央の方が見栄えが良い場合が多いです */
        font-size: 1.8rem !important;  /* サイズの微調整 */
    }
}

/************************************
**ホーム用
************************************/
/* 地図全体のベース設定 */
.map-container {
    width: 100%;       /* 基本は100%（スマホ用） */
    max-width: 800px;  /* 最大でも800pxまで（PC用） */
    margin: 0 auto;    /* センターに配置 */
    line-height: 0;    /* 下部の不要な隙間を消す */
}

/* iframe（地図本体）を枠にフィットさせる */
.map-container iframe {
    width: 100% !important;
}

/* メインビジュアル：1400pxを境に「見え方」を維持して縮小 */
.custom-main-visual {
    width: 100% !important;
    display: flex !important;
    position: relative !important;
    overflow: hidden !important;
    margin: 0 auto !important;

    /* 【1】1400px以上の時の設定：高さを780pxで固定 */
    height: 780px !important;
}

/* 背景画像：常に中央を基準に「カバー（端をカット）」し続ける */
.custom-main-visual img.wp-block-cover__image-background {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* 1400px以下になっても端を隠したままにする */
    object-position: center !important;
}

/* 【2】1400px以下の時の設定：その時の「見た目」を維持して縮小 */
@media screen and (max-width: 1400px) {
    .custom-main-visual {
        height: auto !important; /* 固定高さを解除して可変にする */
        
        /* 重要：1400pxの時の「見た目」の比率を指定します。
           もし1400pxの時に画像全体ではなく、特定の比率で見せたい場合はここを調整します。
        */
        aspect-ratio: 1400 / 780 !important; 
    }
}

/* 透過画像（文字部分）の配置調整 */
/* 透過画像（文字部分）の配置調整 */
.custom-main-visual .custom-main-txt {
    width: 100% !important;
    max-width: 1400px !important; /* コンテナ自体の幅 */
    margin: 0 auto !important;
    z-index: 10;
    display: flex !important;
    justify-content: flex-end !important; /* 右寄せ */
    align-items: center !important;
    
    /* ★ここを「0」に近づけるほど、より右端に寄ります */
    padding-right: 2% !important; 
}

/* もし「1400pxの枠」を超えて、画面の本当の右端まで持っていきたい場合 */
@media screen and (min-width: 1401px) {
    .custom-main-visual .custom-main-txt {
        max-width: 100% !important; /* 1400pxの制限を解除 */
        padding-right: 40px !important; /* 画面右端からの絶対的な距離 */
    }
}

/* 文字画像のサイズ（画面幅に合わせて伸縮） */
.custom-main-visual .custom-main-txt img:not(.wp-block-cover__image-background) {
    width: 65vw !important;
    max-width: 800px !important;
	min-width: 350px !important; /* 縮みすぎて読めなくならないよう最小サイズを設定 */
    height: auto !important;
}

/* スマホ・タブレット用（768px以下） */
@media screen and (max-width: 768px) {
    .custom-main-visual {
        aspect-ratio: 1400 / 780 !important; 
        min-height: 0 !important; 
        height: auto !important;
        /* 親要素で中身を中央に寄せる設定 */
        display: flex !important;
        justify-content: center !important; 
        align-items: center !important;
    }

    /* 背景画像の固定設定 */
    .custom-main-visual img.wp-block-cover__image-background {
        object-fit: cover !important; 
        object-position: center !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* ★文字コンテナをセンターに固定する修正 */
    .custom-main-visual .custom-main-txt {
        width: 100% !important;
        max-width: 100% !important; /* PC時の制限を解除 */
        padding-right: 0 !important;  /* 右寄せ用の余白を消す */
        margin: 0 auto !important;
        display: flex !important;
        justify-content: center !important; /* 中の画像を中央へ */
        align-items: center !important;
        position: absolute !important;     /* 背景の上の中央に配置 */
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important; /* 完全に真ん中へ */
    }

    /* 文字画像自体のサイズ調整 */
    .custom-main-visual .custom-main-txt img:not(.wp-block-cover__image-background) {
        width: 70vw !important; /* 背景に対してのサイズ感（お好みで調整） */
        max-width: none !important;
        min-width: 0 !important;
        height: auto !important;
    }
}

/* ボタンの親要素も含めて指定し、より強力に上書きします */
.wp-block-button.is-style-fill a.wp-block-button__link:hover {
    opacity: 0.7 !important;           /* 全体を薄くする */
    background-color: #604c3f !important; /* 現在の背景色を強制維持 */
    color: #ffffff !important;          /* 文字色を白に強制固定 */
    text-decoration: none !important;    /* 下線が出るのを防止 */
}

/* 別のクラス名（wp-element-button）が干渉している場合を想定 */
.wp-block-button.is-style-fill .wp-block-button__link.wp-element-button:hover {
    opacity: 0.8 !important;
    background-color: #604c3f !important;
    color: #ffffff !important;
}

/* 通常時のアニメーション設定 */
.wp-block-button.is-style-fill a.wp-block-button__link,
.wp-block-button.is-style-fill .wp-block-button__link.wp-element-button {
    transition: opacity 0.3s ease !important;
}

/* 1. 投稿全体のテキスト・改行によるズレを完全に封じ込める */
.my-insta-feed .sbi_item {
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
}

/* 2. 画像リンク（aタグ）自体を正方形の箱にし、はみ出る中身をカット */
.my-insta-feed a.sbi_photo {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    font-size: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* 3. 【重要】リンク内の「本来の画像」だけを残し、それ以外のタグを全消去 */
/* これでCocoonが生成したブログカード内の重複画像を消します */
.my-insta-feed a.sbi_photo > *:not(img) {
    display: none !important;
    visibility: hidden !important;
}

/* 4. 本来の画像を枠いっぱいに広げる */
.my-insta-feed a.sbi_photo img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    z-index: 1 !important;
}

/* 1. ボタン全体のコンテナ：中央寄せと要素の整列を固定 */
.my-insta-feed #sbi_load {
    padding: 20px 0 !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: stretch !important; /* 高さを揃えるための設定 */
    gap: 12px !important;
    flex-wrap: wrap !important;
}

/* 2. ボタン共通：高さを固定し、中身を中央に配置 */
.my-insta-feed #sbi_load .sbi_load_btn,
.my-insta-feed #sbi_load .sbi_follow_btn,
.my-insta-feed #sbi_load .sbi_follow_btn a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 44px !important; /* 高さを明確に固定 */
    box-sizing: border-box !important;
    margin: 0 !important;
    vertical-align: middle !important; /* 基準線を中央に */
}

/* 3. 各ボタンの個別サイズとデザイン */
.my-insta-feed #sbi_load .sbi_load_btn,
.my-insta-feed #sbi_load .sbi_follow_btn a {
    min-width: 160px !important;
    padding: 0 20px !important;
    font-size: 14px !important;
    font-weight: bold !important;
    color: #fff !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer !important;
    line-height: 1 !important; /* 行間によるズレを防止 */
}

/* 4. フォローボタンの外枠spanの干渉を排除 */
.my-insta-feed #sbi_load .sbi_follow_btn {
    padding: 0 !important;
    background: none !important;
}

/* 5. 色の設定 */
.my-insta-feed #sbi_load .sbi_load_btn {
    background-color: #444 !important;
}

.my-insta-feed #sbi_load .sbi_follow_btn a {
    background-color: #408bd1 !important;
}

/* 6. アイコンの垂直位置微調整 */
.my-insta-feed #sbi_load .sbi_follow_btn svg {
    width: 16px !important;
    height: 16px !important;
    margin-right: 8px !important;
    fill: #fff !important;
    display: inline-block !important;
    vertical-align: middle !important;
    position: relative !important;
    top: -1px !important; /* アイコンが重く見える場合に1px上げる調整 */
}
/************************************
**愛犬のために用
************************************/

/* 下側の太い線を消して、4辺同じ枠線にする */
.article h5 {
    border-bottom: 1px solid #604c3f !important;
}

/* スマホ表示（画面幅767px以下）の時だけ適用 */
@media screen and (max-width: 767px) {
    .merit_box {
        margin-left: 20px;  /* 左側の外側に余白 */
        margin-right: 20px; /* 右側の外側に余白 */
    }
}

/************************************
**フォーム用
************************************/
/* フォーム全体の幅（背景は透明にする） */
.wpcf7 {
    max-width: 1000px;
    margin: 0 auto;
    background-color: transparent !important; /* 全体の背景は透明に */
    padding: 0;
}

/* 入力項目エリアだけに背景をつける */
.form-body {
    background-color: #e6f9ff; /* 水色の背景 */
    padding: 40px;
    margin-bottom: 30px; /* ボタンとの間の隙間 */
}

/* ★横並びの核心：フレックスボックス設定★ */
.custom-form-item {
    display: flex !important; /* 横並びを強制 */
    flex-wrap: nowrap;        /* 折り返しを禁止 */
    align-items: flex-start;  /* 上揃え */
    margin-bottom: 30px;
}


/* 左側：ラベル部分 */
.custom-form-item label {
    display: flex !important;
    align-items: center;
    width: 250px !important;  /* ラベルの固定幅（ここを調整して横幅を合わせる） */
    flex-shrink: 0;           /* ラベルが潰れないように固定 */
    font-weight: bold;
    margin-bottom: 0 !important;
    padding-top: 10px;        /* 入力欄との高さ調整 */
}

/* ★必須ラベルの角丸・赤背景★ */
.required-tag {
    background-color: #d9534f; /* 赤色 */
    color: #ffffff; /* 文字色は白 */
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px; /* 角丸 */
    margin-left: 10px; /* 文字との間隔 */
    display: inline-block;
}

/* 右側：入力欄部分 */
.input-field {
    flex-grow: 1;             /* 残りの幅をすべて使う */
}

/* 入力欄の幅調整 */
.wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-checkbox) {
    width: 100% !important; /* 親のdivに対して100% */
    max-width: 400px; /* 入力欄自体の最大幅 */
    border: 1px solid #ccc;
}

/* 親のpタグを中央揃えのベースにする */
.form-submit-area p {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    margin: 0 !important;
    text-align: center !important;
}

/* 送信ボタンのスタイル */
.form-submit-area .wpcf7-submit {
    background-color: #604c3f !important;
    color: #fff !important;
    width: 300px !important;
    max-width: 100% !important;
    padding: 12px 0 !important;
    font-size: 1.1em !important;
    border: none !important;
    cursor: pointer !important;
    z-index: 1; /* スピナーより上に配置 */
}

/* スピナー（読み込み中のぐるぐる）の余白を無視させる */
.form-submit-area .wpcf7-spinner {
    position: absolute !important;
    right: 50% !important;
    margin-right: -170px !important; /* ボタンの幅(300px/2)の外側に配置 */
    margin-left: 0 !important;
}

/* マウスを乗せた時 */
.wpcf7 .wpcf7-submit:hover {
    opacity: 0.8 !important;
}

/* スマホ表示の時は縦並びにする */
@media screen and (max-width: 600px) {
    .custom-form-item {
        flex-direction: column;
    }
    .custom-form-item label {
        width: 100%;
        margin-bottom: 5px;
    }
    .wpcf7-form-control {
        max-width: 100% !important;
    }
}

/* お問い合わせ内容（textarea）の幅だけを広げる */
#contact-custom-style textarea,
.form-body textarea {
    max-width: 100% !important; /* 横幅を親要素（水色枠）いっぱいまで広げる */
    min-height: 200px;         /* 高さも少し出すと入力しやすくなります */
}

.custom-form-txt{
    font-size: 0.8em;
	text-align:center;
	padding:10px 0;
}

/************************************
**テーブル用
************************************/
/* テーブル全体の幅と中央寄せ */
table {
    max-width: 1000px !important;
    width: 100% !important;
    margin: 0 auto !important;
    border-collapse: collapse;
}

/* 1. 一番上の行（ヘッダー）：茶色 */
table tr:first-child th,
table tr:first-child td {
    background-color: #604c3f !important; /* 指定の濃い茶色 */
    color: #ffffff !important;           /* 文字は白 */
    text-align: center;
}

/* 2. 偶数行（2, 4, 6...行目）：水色 */
table tr:nth-child(even) {
    background-color: #ffffff !important; /* 指定の水色 */
}

/* 3. 奇数行（3, 5, 7...行目）：白 */
/* 1行目(first-child)を除外して白を指定 */
table tr:nth-child(odd):not(:first-child) {
    background-color: #e6f9ff !important; /* 白色 */
}

/* 各セルの枠線と余白 */
table th, table td {
    border: 1px solid #dcdcdc !important; /* 枠線を薄いグレーにすると上品です */
    padding: 15px !important;
}

/* クラス名を指定して幅を1000pxに固定する */
.custom-come-box {
    max-width: 1000px !important; /* テーブルの幅に合わせる */
    width: 100% !important;        /* スマホでは画面幅に合わせる */
    margin-left: auto !important;  /* 左の余白を自動にして中央寄せ */
    margin-right: auto !important; /* 右の余白を自動にして中央寄せ */
    box-sizing: border-box !important;
}

/* もし枠線内の余白を調整したい場合（必要に応じて） */
.custom-come-box {
    padding: 20px !important;
}

/* テーブル下説明文 */
.table-come-box {
    max-width: 800px !important;
    width: 100% !important;        /* スマホでは画面幅に合わせる */
    margin-left: auto !important;  /* 左の余白を自動にして中央寄せ */
    margin-right: auto !important; /* 右の余白を自動にして中央寄せ */
    box-sizing: border-box !important;
}

/* スペシャルケア料金矢印調整 */
.price-arrow {
    /* 左右の余白を 10px から 20px に広げる */
    margin: 0 20px !important; 
    color: #604c3f;
    /* 矢印自体の大きさも少し調整したい場合は以下を追加 */
    font-size: 1.1em;
    vertical-align: middle;
}

.price-red {
    color: #d9534f;
    font-weight: bold; /* 後の金額を少し太くすると、より視認性が上がります */
}

.marker-under {
    display: inline-block !important;
    position: relative;
	padding-bottom: 4px !important;    /* 文字と線の間の距離 */
    font-weight: bold !important;
    background: none !important; /* 他の背景色を消す */

	/* ★行間（改行時の余白）を広げる設定 */
    margin-bottom: 5px !important;     /* 行同士の物理的な距離を確保 */
}

/* 疑似要素でストライプを作成 */
.marker-under::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6px; /* 線の太さ */
    
    /* 45度の斜線ストライプを作成 */
    background: repeating-linear-gradient(
        45deg,
        #4199d8,         /* 線の色 */
        #4199d8 2px,     /* 線の幅 */
        transparent 2px, /* 隙間の色（透明） */
        transparent 4px  /* 隙間の幅 */
    );
}

/************************************
**スペシャルケア用
************************************/

/* リスト全体を左寄せのまま中央に寄せる */
.check-list-center {
    display: table;        /* 中身の幅に合わせる */
    margin-left: auto;     /* 左右オートで中央配置 */
    margin-right: auto;
    text-align: left;      /* 文字自体は左寄せ */
    line-height: 2.0;      /* 行間を広げて見やすく調整 */
}

/* チェックボックスアイコンと文字の間に余白を入れる */
.check-list-center .fa-check-square {
    margin-right: 8px;     /* アイコン右側の余白 */
    color: #604c3f;        /* 必要であればロゴに合わせた色に変更 */
}

.wp-image-264 {
    margin-bottom: 0 !important;
}

/* 親要素のfigureタグにも余白がついている場合 */
.wp-block-image.alignfull {
    margin-bottom: 0 !important;
}

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

/* フッター左のウィジェットエリアを全幅にする */
.footer-widgets .footer-left {
    width: 100% !important;
    float: none !important;
    display: block !important;
}
.footer-widgets .footer-center, 
.footer-widgets .footer-right {
    display: none !important;
}

/* 3つの要素を横一列に並べる設定 */
.footer-horizontal-wrapper {
    display: flex;
    justify-content: center; /* 中央に寄せる */
    align-items: center;     /* 上下の高さを中央で揃える */
    gap: 40px;               /* 要素同士の間隔（広すぎる場合は30px等に調整） */
    padding: 20px 0;
    flex-wrap: nowrap;       /* PCでは絶対に折り返さない */
}

/* ロゴのサイズ設定 */
.logo-box img {
    width: 120px; /* 横並び用にバランスの良いサイズ */
    height: auto;
    display: block;
}

/* 住所テキストの設定 */
.address-box {
    font-size: 14px;
    line-height: 1.6;
    text-align: left;
}
.address-box p {
    margin: 0 !important;
}
.address-box .small-text {
    font-size: 11px;
    color: #666;
    margin-top: 4px !important;
}

/* SNSアイコンの設定 */
.sns-box {
    display: flex;
    gap: 15px; /* アイコン同士の隙間 */
}
.sns-box a {
    text-decoration: none;
    color: #333333;
    font-size: 40px; /* アイコンの大きさ */
    line-height: 1;
}

/* スマホでは画面が狭いため縦並びに切り替える */
@media screen and (max-width: 960px) {
    .footer-horizontal-wrapper {
        flex-direction: column; /* 縦に並べる */
        gap: 20px;
        text-align: center;
    }
    .address-box {
        text-align: center;
    }
}

.footer {
    margin-top: 0 !important;
}

/* フッターSNSアイコンのマウスオーバー設定 */
.footer-item.sns-box a {
    transition: opacity 0.3s ease; /* 動きを滑らかにする */
}

.footer-item.sns-box a:hover {
    opacity: 0.6 !important;       /* マウスオーバーで薄くする */
    background-color: transparent !important; /* 背景色が変わるのを防ぐ */
}

/* もしアイコンの色がデフォルトで変わってしまう場合（必要に応じて） */
.footer-item.sns-box a:hover span {
    text-decoration: none !important; /* アイコンに下線が出ないようにする */
}

/* --- 1. ヘッダー右上のメニューボタン（三本線） --- */
.mobile-footer-menu-buttons {
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
    width: 60px !important;
    height: 60px !important;
    background: transparent !important;
    box-shadow: none !important;
    z-index: 9999 !important;
}

/* 不要なボタンと親要素の背景を完全に消去 */
.mobile-footer-menu-buttons .home-menu-button,
.mobile-footer-menu-buttons .search-menu-button,
.mobile-footer-menu-buttons .top-menu-button,
.mobile-footer-menu-buttons .navi-menu-button {
    display: none !important;
}
/* メニューボタンのみ表示を許可 */
.mobile-footer-menu-buttons .navi-menu-button {
    display: block !important;
    background: transparent !important;
}

/* ボタン本体のデザイン */
.mobile-footer-menu-buttons #navi-menu-open {
    display: flex !important;
    background: #b58c6d !important;
    color: #fff !important;
    border-radius: 4px !important;
    width: 55px !important;
    height: 55px !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
}

/* アイコンと文字の位置下げ */
.mobile-footer-menu-buttons .menu-icon,
.mobile-footer-menu-buttons .menu-caption {
    position: relative !important;
    top: 4px !important;
}

/* --- 2. メニュー展開後（ドロワー）のデザイン --- */

/* X（閉じる）ボタンの色とロゴ挿入 */
.navi-menu-close-button {
    color: #b58c6d !important;
    font-size: 30px !important;
    padding: 20px 20px 10px !important;
    display: block !important;
    text-align: center !important;
}

.navi-menu-close-button::after {
    content: "";
    display: block;
    width: 160px; /* ロゴの幅 */
    height: 80px; /* ロゴの高さ */
    margin: 10px auto 0;
    background: url(http://riku-dogsalon.local/wp-content/uploads/2025/12/riku-logo-k-1.png) no-repeat center center;
    background-size: contain;
}

/* 各メニュー項目のデザインと点線 */
.menu-drawer .menu-item {
    border-bottom: 1px dotted #b58c6d !important;
}

.menu-drawer .menu-item a {
    color: #333 !important;
    padding: 18px 15px !important;
    display: block !important;
    font-size: 15px;
}

/* --- 3. LINE予約ボタンのカスタマイズ（PC版に寄せる） --- */
.menu-drawer .header-line-btn {
    border-bottom: none !important; /* LINEボタンの下に点線はいらない */
    margin: 20px 15px !important;
}

.menu-drawer .header-line-btn a {
    background-color: #06C755 !important; /* LINEカラー */
    color: #fff !important; /* 文字色を白に */
    border-radius: 50px !important; /* 丸いカプセル型 */
    padding: 12px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-weight: bold !important;
    text-decoration: none !important;
}

/* LINEアイコンの調整 */
.menu-drawer .header-line-btn a i {
    font-size: 22px !important;
    margin-right: 8px !important;
    color: #fff !important;
}