/*
Theme Name:bloom-child
Template:bloom_tcd053
Version:2.1.1
*/


/* ブログを非表示に */
li.p-breadcrumb__item:nth-child(2) {
  display: none;
}

/*　ペットの名前 */
.petname {
    align-items: center;

    /*
    display: inline;
    background-color: #c71722;
	color: #ffffff;
	border-radius: 3em;
	*/
    padding: 0.25em 0.5em;
	font-size: 1rem !important;
	background-color: #F5EBE1;
    border-radius: 0.5em;
    color: #262321;
}
.petname_title {
	/*background-color: #c71722;
	color: #ffffff;
	border-radius: 3em;
	padding: 0.25em 0.5em;
	margin-right: 0.5em;
	font-size: 0.8em;*/
}
.petname_title:after {
	content: "：";
}

.owner {
	font-size: 1rem !important;
	text-align: right;
	background-color: #ffffff;
	color: #c71722;
}

/* 投稿ページのみでアイキャッチ画像を非表示にする */
.single-post .p-entry__thumbnail {
    display: none;
}

/* 写真は間隔1emでいくつあっても横並び */
.imgbox {
	margin-top: 1rem;
	display: flex !important;
	justify-content: center !important;
	gap: 1em;
  align-items: center;
  flex-wrap: nowrap;
}
.imgbox img {
    /* ★サイズ統一の必須設定（レスポンシブ） */
    /* 1. 親要素の幅に対する割合で幅を決定 */
    width: 80% !important; 
    /* 2. 画像が大きくなりすぎるのを防ぐ最大幅を設定 */
    max-width: 300px !important; 

    /* 3. 高さを横幅に合わせる（正方形にする） */
    aspect-ratio: 1 / 1; 

    /* 4. 画像のトリミング方法を指定 */
    object-fit: cover; 

    /* 横幅を親要素に合わせて設定（必要に応じて調整） */
    max-width: 100%; 
    height: auto; /* aspect-ratioが効かない場合のフォールバック */
}
/* 3. 画像が1つしかない場合の中央寄せ設定 */
.imgbox {
    display: flex !important; /* Flexboxを強制適用 */
    justify-content: center !important; /* 水平方向の中央寄せを強制 */
    align-items: center; /* 垂直方向の中央寄せ（任意） */
    
    /* 画像の幅を計算するために、親要素の幅を確保 */
    width: 100%; 
    
    /* 既存のレイアウトに影響を与えないように高さを自動に */
    min-height: 1px;
}

/* 投稿ページで、段落間があきすぎなのを調整 */
.single-post .p-entry__body p {
    line-height: 2;
    margin-bottom: 1.5em;
}

/* 投稿ページでmetaの出力を止める */
.single-post .p-entry__meta {
	display: none;
}

/* --- footerアーカイブをCSSでドロップダウン風にする --- */

/* 1. リスト全体（ドロップダウンの親）の基本スタイル */
.wp-block-archives-list {
    position: relative; /* 子要素を絶対位置で配置するための基準点にする */
    display: inline-block; /* 中身に合わせた幅にする */
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    width: 220px; /* ドロップダウンの横幅を指定 */
    cursor: pointer;
}

/* 2. 常に表示されるタイトル部分（疑似要素で作成） */
.wp-block-archives-list::before {
    content: "アーカイブを選択 ▼"; /* 表示するテキスト */
    display: block;
    padding: 12px 15px;
    color: #333;
    font-weight: bold;
}

/* 3. リスト項目（li）を初期状態では非表示にする */
.wp-block-archives-list li {
    display: none;
    list-style: none; /* 先頭の点を消す */
    margin: 0;
}

/* 4. マウスが乗った時にリスト項目（li）を表示する */
.wp-block-archives-list:hover li {
    display: block; /* ブロック要素として表示 */
}

/* 5. マウスが乗った時にタイトル部分を非表示にする */
.wp-block-archives-list:hover::before {
    display: none;
}

/* 6. リスト項目のリンク（aタグ）のスタイル */
.wp-block-archives-list li a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #444;
    background-color: #fff;
    border-top: 1px solid #eee;
}

/* 7. リンクにマウスが乗った時のスタイル */
.wp-block-archives-list li a:hover {
    background-color: #f0f0f0;
}


.products {
    /* リスト全体を中央寄せするためのFlexbox設定 */
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}

.products a {
    /* 領域の80%幅に設定 */
    width: 80% !important; 
    
    /* 要素をブロック化 */
    display: block;
    
    /* 中央寄せ（Flexboxまたはmargin: auto; で実現） */
    margin: 10px auto; 
    padding: 10px;
    
    /* aタグの文字色を黒に設定 */
    color: #000000 !important;
    
    /* テキストを中央揃え */
    text-align: center;
}

.products a img {
    /* 画像サイズを表示可能領域（aタグ）の90%に設定 */
    max-width: 90%;
    height: auto;
    display: block !important;
	margin-left: auto;
    margin-right: auto;
	margin-bottom: 5px;
    /* hover時の変化を滑らかにする設定をモバイル側にも記述 */
    transition: none !important;
}

/* モバイルでのアクティブ状態（hoverに相当） */
.products a:active {
    /* タッチした時に100%に拡大 */
    max-width: 100%;
    transform: scale(1.05);
}

/* トップインデックスタブ用 */
ul.menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 15px 20px 3px;
}
ul.menu li {
    display: flex;
    align-items: center;
    padding-right: 4em;
    margin-bottom: 15px;
}
ul.menu li::before {
/* --- 基本設定 (共通) --- */
    content: "";
    display: inline-block;
    margin-right: 10px;

    /* --- 三角形を描画 --- */
    /* 1. ベースの三角形（上向き）を作成 */
    width: 0;
    height: 0;
    border-left: 4.5px solid transparent;  /* 元の幅(9px)の半分 */
    border-right: 4.5px solid transparent; /* 元の幅(9px)の半分 */
    border-bottom: 7.8px solid #000;      /* 元の高さ(10px)と色。#000はお好みの色に変更してください */

    /* 2. 三角形を回転させる */
    transform: rotate(90deg); /* 90度回転させて右向き (►) にする */

    /* (任意) テキストとの垂直位置を調整 */
    vertical-align: middle;
}
ul.menu li a {
    color: #736357;
}
ul.menu li a:hover {
    text-decoration: underline;
}

/* コメント欄全体を非表示にする */
.c-comment {
    display: none;
}
	
/* 404カスタムコンテンツのスタイル */
.p-404-custom-content {
    margin-top: 30px; /* タイトルとの間に余白を設ける */
    padding: 20px;
    text-align: left;
}

.p-404-custom-content ul {
	padding-left: 20px !important;
    list-style: none !important; /* リストの黒丸を削除 */
    padding: 0;
    margin-top: 20px;
}

.p-404-custom-content li {
    margin-bottom: 5px !important;
}
	
/* 二重線の解消 */
.l-main > .p-breadcrumb {
    border-top: none !important;
    border-bottom: none !important;
}
	
/* フォーム用 */
.wpcf7 .field em {
    display: inline-block;
    width: 3em;
    font-size: 0.8rem;
    color: #fff;
    background-color: #C1272D;
    border: 1px solid #C1272D;
    text-align: center;
    line-height: 1rem;
    font-style: normal;
    margin-left: 0.5rem;
}
.wpcf7 label {
    font-weight: 700;
	display: block;
}
.wpcf7 .info-tip {
    color: #666666;
}
.wpcf7 .btn-wrap {
    display: flex;
    width: 100%;
    gap: 20px;
}
.wpcf7 .btn-wrap > div {
    flex: 1;
}
.wpcf7 input.wpcf7-previous {
    background-color: #eeeeee;
    color: #3e3e3e;
}
.wpcf7 input.wpcf7-submit {
	background-color: var(--wp--preset--color--vivid-red)
}
	




/* PC表示時のみ適用 */
@media screen and (min-width: 1024px) {

  /* ヘッダー全体をFlexboxコンテナに設定し、縦並びに変更 */
  .l-header {
    display: flex;
    flex-direction: column; /* 要素を縦並びにする */
    align-items: center; /* 要素を水平方向の中央に配置 */
    padding: 0.5em 0; /* ヘッダーの上下の余白を縮小 */
  }

  /* メニューバーの表示順を2番目に変更 */
  .l-header__bar {
    order: 2;
    width: 100%; /* 横幅いっぱいに広げる */
  }

  /* PC用ロゴを含むコンテナの表示順を1番目に変更 */
  .l-header > .l-inner {
    order: 1;
    margin-bottom: 0.5em; /* ロゴとメニューの間の余白を縮小 */
  }
  /* メニューバー内の画像がコンテナに収まるように調整 */
  .l-header__bar img {
    max-width: 100%;
    height: auto;
    object-fit: contain; /* 画像の比率を維持してフィットさせる */
	  
	}
  /* メニューバー内のナビゲーションを中央揃えにする */
  .l-header__bar .l-inner {
    display: flex;
    justify-content: center; /* メニュー項目を中央に配置 */
  }

  /* メニュー項目の高さを調整 */
  .p-global-nav > li > a {
    padding-top: 0.2em;
    padding-bottom: 0.2em;
  }

  /* PC用のロゴは表示 */
  .l-header__logo--pc {
    display: block;
		margin-top: 0;
		margin-bottom: 0;
  }

  /* PC表示ではモバイル用のロゴを非表示にする */
  .l-header__logo--mobile {
    display: none;
  }
    .products a {
        /* PC向けに領域の50%幅に設定を上書き */
        width: 50% !important; 
        transform: scale(1);
    }
    
    /* hover時のエフェクトをPCで有効化 */
    .products a:hover {
        /* hoverしたら100%に拡大 */
        max-width: 100%;
        transform: scale(1.05);
		z-index: 10;
        position: relative;
    }
    
    /* モバイルのアクティブ状態をPCでは無効にする */
    .products a:hover img {
        /* PCでは :hover を優先するため、:active の拡大を解除 */
        max-width: 90%;
        transform: scale(1);
    }
    /* モバイルのアクティブ状態をPCでは無効にする */
    .products a:active {
        transform: scale(1);
    }

}