@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
*/
.fp-grid-container-hitorigoto {
    color: #000000 !important;
}
/* 住職の独り言タイトルと本文が緑色になるのを黒に変更　！！削除不可！！ */
#main .info{
    color: #000000 !important;
}
/************************************
** 1. 共通設定 (全デバイス)
** 基本的にモバイルファーストの記述
************************************/
/* --- 全体・背景 --- */
.content .cf {
	background-color: #fff;
}
/* --- 住職の独り言背景（デフォルトだと薄緑色になる） --- */
/* カスタム投稿 info の個別ページ全体の背景を白にする */
.info,
.single-info #main,
.single-info .article,
.single-info .entry-content{
    background-color: #ffffff !important;
    border: 1px solid #ffffff !important; /* 太さを追加 */
    padding: 15px;
    border-radius: 4px;
}
/* 文字色 */
.single-info .entry-content .entry-card-snippet {
    color: #000000 !important;
}
.info {
    color: #000000 !important;
}
/* 日付を強制的に黒色にして表示させる */
.single-info .date-tags {
    display: block !important;
    visibility: visible !important;
    color: #333333 !important; /* 濃いグレー */
    margin: 10px 0 20px;
}

.single-info .post-date {
    color: #333333 !important;
}
/* --- タイトルバナーセクション (#pageTitBnr) --- */
body:not(.home):not(.front-page) #pageTitBnr {
	width: 100%;
	position: relative;
	min-height: 250px;
	background-image: url('あなたの背景画像のURL.jpg');
	background-size: cover;
	background-position: center center;
	text-align: center;
	background: transparent;
	z-index: 2;
}
body:not(.home):not(.front-page) #pageTitBnr::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.4);
	z-index: 1;
}
body:not(.home):not(.front-page) #pageTitInner {
	position: relative;
	z-index: 2;
	text-align: center;
	background: transparent;
}
body:not(.home):not(.front-page) #pageTitBnr #pageTitInner #pageTit {
	color: white;
	font-size: 34px;
	letter-spacing: 0.5em;
	opacity: 1.0;
}
body:not(.home):not(.front-page) #pageTitBnr #pageTitInner #pageTit .title-span {
	display: block;
	font-size: 18px;
	letter-spacing: 0.4em;
}
body:not(.home):not(.front-page) .coverBox {
	padding: 100px 0 0 0;
}
/* --- ヘッダー・ナビゲーション --- */
#header-container, .fixed-header {
	border-bottom: 2px solid;
	border-top: 2px solid;
}
#navi, .fixed-header {
	background-color: #c7c4a5;
	background-repeat: repeat;
}
#menu-mainmenu-1 a:link, #menu-mainmenu-1 a:visited {
	color: #000000;
}
.navi-in {
	border-top: none;
}
/* ※.fixed-headerは削除不可※ */
.fixed-header .has-sub {
	display: inline-block;
}
.fixed-header .navi-in > ul li:hover > ul {
	display: block;
}
/* --- フッター --- */
.footer {
	background-color: #c7c4a5;
}
.article-footer, .entry-footer {
	margin: 0;
	padding: 0;
	border: none;
}
.footer-menu a {
	font-size: 80%;
	text-decoration: none;
}
.footer-menu a:link, .footer-menu a:visited {
	color: #000000;
}
.footer-menu a:hover {
	border-bottom: 1px solid #000000;
}
.footer-menu li {
	line-height: 1.3;
}
.footer-bottom {
	display: none;
}
/* --- 見出し (h2) --- */
#main h2 {
	background: url('./images/info_back.png');
	border-top: none;
	text-shadow: none;
	color: #FFF;
	position: relative;
	padding: 10px 0 10px 32px;
	font-size:120%;
}
#main h2:before {
	content: '';
	display: block;
	width: 12px;
	height: 12px;
	position: absolute;
	top: calc(50% - 8px);
	left: 12px;
	background: url('./images/square.png') no-repeat;
}
/* --- グリッドコンテナ基本 (1列表示) --- */
.fp-grid-container, .fp-grid-container-hitorigoto {
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr;
	margin: 0 auto;
	max-width: 1200px;
	padding: 10px;
}
.fp-grid-container .grid-item img, .fp-grid-container2 .grid-item img {
	display: block;
	width: 100%;
	height: auto;
}
.fp-grid-container-hitorigoto .grid-item-hitorigoto img {
	display: block;
	height: 150px;
}
/* --- その他ユーティリティ --- */
h1, h2, h3, h4, h5, h6, .site-name-text, .toiawase-child {
	font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "MS P明朝", "MS PMincho", serif;
}
.date-tags, .author-info {
	display: none;
}
.entry-title {
	font-size: 2em;
	margin-bottom: 2em;
	text-align: center;
}
.item-label {
	font-size: 1.2em;
}
.menu-item p, .menu-subtitle {
	margin: 0;
	padding: 0;
}
.menu-subtitle {
	color: gray;
	font-size: 70%;
}
.site-name-text {
	font-size: 3em;
}
.post-date {
	color: #780606;
}
/* --- 問い合わせ・バナー・段組の基本 --- */
.toiawase {
	display: grid;
	font-size: 1.3em;
	font-weight: bolder;
	padding: 15px;
	place-items: center;
}
.toiawase-child {
	text-align: center;
}
.toiawase-anchor {
	border: none;
	text-decoration: none !important;
	color: #ffffff;
	margin: 0;
	padding: 0;
}
.column-wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.column-wrapper .column-item {
	border: 1px solid #dcdcdc;
	border-radius: 10px;
	box-sizing: border-box;
	margin-bottom: 20px;
	padding: 20px;
	width: 48%;
}
.column-item h3 {
	margin-top: 0;
}
.banner-row {
	display: flex;
	gap: 20px;
	width: 100%;
	max-width: 1200px;
	margin: 20px auto;
}
#my-custom-area .banner-row.row-3 .banner-area {
	flex: 1 1 0%;
	min-height: 150px;
}


/************************************
** 2. スマホ・タブレット向け設定 (画面が狭い時)
************************************/

@media screen and (max-width: 768px) {
/* サイトタイトル */
.site-name-text{
	font-size:60px!important;
}
/* 段組を1列に */
    .column-wrapper .column-item {
	width: 100%;
}
/* バナーを縦並びに */
    .banner-row {
	flex-direction: column;
	gap: 15px;
	padding: 0 5%;
}
.banner-row .banner-area {
	width: 100%;
	flex: 0 0 auto;
	min-height: 120px;
}
.banner-box {
	width: 85%;
	height: 50px;
}
.banner-title {
	font-size: 1.5rem;
	letter-spacing: 0.15em;
}
}


/************************************
** 3. PC・デスクトップ向け設定 (画面が広い時)
************************************/

/* --- 中画面以上 (600px〜) : 2列表示 --- */
@media (min-width: 600px) {
.fp-grid-container, .fp-grid-container-hitorigoto {
	gap: 30px;
	grid-template-columns: repeat(2, 1fr);
	padding: 20px;
}
}

/* --- 大画面 (1024px〜) : 3列表示など --- */
@media (min-width: 1024px) {
.fp-grid-container, .fp-grid-container-hitorigoto {
	gap: 40px;
	grid-template-columns: repeat(3, 1fr);
}
.fp-grid-container2 {
	display: grid;
	gap: 40px;
	grid-template-columns: repeat(2, 1fr);
}
}


/************************************
** 4. フロントページ専用バナーの高さ設定
************************************/
.is-front-page-banner {
    width: 100%;
    position: relative;
    height: 400px; /* PCでの高さ */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* スマートフォンでの出し分け */
@media screen and (max-width: 767px) {
    .is-front-page-banner {
        height: 250px; /* SPでの高さ */
    }
    /* data属性のURLを背景画像として適用 (モダンブラウザのみ対応) */
    .is-front-page-banner[data-sp-img] {
        background-image: attr(data-sp-img url);
    }
    /* ※attr()が効かない場合、JavaScriptでの切り替えも検討が必要です。 */
}

/* タイトル位置の調整など */
.is-front-page-banner .coverBox {
    padding: 150px 0 0 0; 
}
.archive-title{display:none!important;}