/*
Theme Name: Enmeiin
Theme URI: https://unagino-otera.jp/
Author: Shohta
Description: 彦倉虚空蔵尊・延命院 公式サイト用テーマ。旧Twenty Thirteenの雰囲気（暖色系配色・グレーのナビゲーション・写真を活かしたレイアウト）を踏襲しつつ、最新のWordPress/PHPに合わせて作り直したオリジナルテーマです。
Version: 1.0.0
Requires PHP: 8.0
Text Domain: enmeiin
*/

/* ---------- 変数 ---------- */
:root {
	--color-bg: #ffffff;
	--color-text: #2b1a12;
	--color-accent: #db572f;
	--color-accent-dark: #b8431f;
	--color-header-bg: #4a4442;
	--color-header-text: #f7f5e7;
	--color-footer-bg: #210d10;
	--color-footer-text: #e8e5ce;
	--font-heading: "Bitter", "Noto Serif JP", serif;
	--font-body: "Source Sans Pro", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
	--content-max: 1600px; /* 旧サイトの本文コンテンツ(praySection等)がmax-width:1600pxを前提にしていたため合わせている */
}

/* ---------- リセット・基本 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.8;
}
img { max-width: 100%; height: auto; }
a { color: var(--color-accent); text-decoration: none; }
a:hover, a:focus { color: var(--color-accent-dark); text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); line-height: 1.35; }

.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	overflow: hidden;
	height: 1px; width: 1px;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	position: static !important;
	clip: auto !important;
	height: auto; width: auto;
}

/* ---------- ヘッダー / ナビゲーション ---------- */
.site-header {
	background: var(--color-header-bg);
	color: var(--color-header-text);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 100;
}

/* ログイン中はWP管理バー(通常32px、モバイル幅では46px)が画面最上部に
   固定表示されるため、その分だけ固定ヘッダーの位置を下げて重ならない
   ようにする */
body.admin-bar .site-header {
	top: 32px;
}
@media (max-width: 782px) {
	body.admin-bar .site-header {
		top: 46px;
	}
}
.site-header-inner {
	max-width: var(--content-max);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding: 5px 10px;
}
.home-link {
	display: block;
	color: var(--color-header-text);
}
.home-link:hover, .home-link:focus { color: #fff; text-decoration: none; }
.site-title {
	margin: 0;
	font-size: 1.4rem;
	letter-spacing: 0.04em;
}
.site-description {
	margin: 2px 0 0;
	font-size: 0.8rem;
	font-weight: normal;
	color: rgba(247, 245, 231, 0.75);
}

.main-navigation { width: 100%; }
.main-navigation ul {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 22px;
}
.main-navigation a {
	display: inline-block;
	padding: 6px 2px;
	color: var(--color-header-text);
	font-size: 0.95rem;
	border-bottom: 2px solid transparent;
}
.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
	color: var(--color-accent);
	border-bottom-color: var(--color-accent);
	text-decoration: none;
}
.menu-toggle {
	display: none;
	background: none;
	border: none;
	color: var(--color-header-text);
	font-size: 1.6rem;
	cursor: pointer;
}

@media (max-width: 700px) {
	.menu-toggle { display: block; }
	.main-navigation ul { display: none; flex-direction: column; gap: 4px; }
	.main-navigation.is-open ul { display: flex; }
}

/* ---------- メインコンテンツ ---------- */
/* position:relativeを付けておくことで、ヒーロー画像を持つページの
   絶対配置ヘッダー(body:has(.sectionCover) .site-header)の基準を
   #page自身にする。これが無いと絶対配置の基準がビューポート自体になり、
   ログイン中のWP管理バー(32px)による本文の押し下げをヘッダーが無視して
   画面最上部にぴったり張り付いてしまい、通常ページ(ヘッダーが通常の
   flow配置で管理バー分正しく押し下げられる)との間でメニュー上部の
   余白がページによって異なって見える原因になっていた。 */
#page { display: flex; flex-direction: column; min-height: 100vh; position: relative; }
#main.site-main { flex: 1 0 auto; }

.content-wrap {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 30px 20px 60px;
}

.entry-header .entry-thumbnail { margin: 0 0 20px; }
.entry-title { font-size: 1.8rem; margin: 0 0 20px; }
/* 本文(縁起・虚空蔵菩薩の説明などの長文)を少し大きく読みやすくする。
   小さめに設定されている補足テキスト類(0.8em等)はここからの相対値なので
   合わせて少しだけ大きくなるが、本文に対して小さいバランスは保たれる。 */
.entry-content { font-size: 1.125rem; }
.entry-content > *:first-child { margin-top: 0; }
.entry-content iframe,
.entry-content video { max-width: 100%; }

/* ---------- 個別投稿(お知らせ等)の表示統一 ----------
   投稿本文は長年クラシックエディタで個別に体裁を整えてきた経緯があり、
   投稿ごとに見た目がバラバラになっていた。single.phpのテンプレート側で
   本文を<article><div class="postWrapper">で共通に括ることで、
   投稿データ自体には一切手を加えずに全投稿の見た目を一括で統一する。 */
.postWrapper {
	max-width: 900px;
	margin: 0 auto;
	padding: 40px 20px 60px;
}

.backToNews {
	margin: 0 0 25px;
	font-size: 0.95rem;
}

.backToNews a {
	color: var(--color-accent);
	font-weight: 700;
}

.backToNews a:hover,
.backToNews a:focus {
	color: var(--color-accent-dark);
}

.backToNewsBottom {
	margin: 40px 0 0;
	padding-top: 20px;
	border-top: 1px solid #e6ddd0;
}

/* blockquote(太字の引用・昔話などの本文中の引用ブロック)が
   ブラウザ標準のインデント(margin:1em 40px)のまま左寄りに表示され、
   右側のスペースが余ってしまっていたのを、幅を絞って中央寄せにする。
   旧クラシックエディタ時代に本文へ直接書き込まれたインラインstyle
   (width/float/margin指定等)が残っている場合があり、それらは通常の
   外部CSSより優先されてしまうため、!importantで確実に上書きする。 */
.entry-content blockquote {
	width: auto !important;
	max-width: 1200px !important;
	margin: 30px auto !important;
	padding: 20px 30px !important;
	text-align: center !important;
	float: none !important;
}

/* うなぎ供養ページなどにある「段落全体を<strong>で太字にしただけ」の
   引用箇所(実際の<blockquote>タグではないケース)にも同じ中央寄せを
   適用する。段落の中身が単一の<strong>だけで構成されている場合を対象とする */
.entry-content p:has(> strong:only-child) {
	width: auto !important;
	max-width: 1200px !important;
	margin: 30px auto !important;
	padding: 20px 30px !important;
	text-align: center !important;
	float: none !important;
}
.entry-content table {
	width: 100%;
	max-width: 100%;
	margin: 0 auto 2em;
	border-collapse: collapse;
}

.page-links { margin-top: 30px; clear: both; }

/* ---------- サイドバー ---------- */
.widget-area { margin-top: 40px; }
.widget { margin-bottom: 30px; }
.widget-title { font-size: 1rem; border-bottom: 1px solid #ddd; padding-bottom: 6px; }

/* ---------- フッター ---------- */
/* SNSシェアボタン(.social / .fa / .ha / .tw / .line)は
   旧テーマから移植したCSS(このファイル末尾の「旧サイトのカスタムCSS」節)で
   スタイリングされる。ここではフッター本体のみ。 */
.site-footer {
	background: var(--color-footer-bg);
	color: var(--color-footer-text);
	margin-top: 60px;
}
.site-info {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 20px 20px 30px;
	text-align: center;
	font-size: 0.8rem;
	color: rgba(232, 229, 206, 0.75);
}
.site-info a { color: var(--color-footer-text); }

/* ---------- アーカイブ/一覧 ---------- */
.post-list article { margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(0,0,0,0.08); }
.entry-meta { font-size: 0.8rem; color: #7a6a60; }
.entry-meta .edit-link { margin-left: 8px; }

/* ---------- ページヘッダー(アーカイブ/検索/404) ---------- */
.page-header { margin-bottom: 30px; padding-bottom: 20px; border-bottom: 2px solid var(--color-accent); }
.page-title { font-size: 1.6rem; margin: 0 0 6px; }
.page-title span { color: var(--color-accent); }
.archive-description { font-size: 0.95rem; color: #55463d; }

/* ---------- コメント ---------- */
.comments-area { max-width: var(--content-max); margin: 50px auto 0; padding: 0 20px; }
.comments-title { font-size: 1.2rem; }
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-list .comment { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid rgba(0,0,0,0.08); }
.comment-list .children { list-style: none; margin: 20px 0 0 30px; padding: 0; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	max-width: 480px;
	padding: 8px 10px;
	border: 1px solid #ccc;
	font-family: var(--font-body);
}
.comment-form textarea { max-width: 100%; }
.comment-form input[type="submit"] {
	background: var(--color-accent);
	color: #fff;
	border: none;
	padding: 10px 24px;
	cursor: pointer;
	font-family: var(--font-heading);
}
.comment-form input[type="submit"]:hover { background: var(--color-accent-dark); }

/* ---------- ページネーション ---------- */
.pagination, .nav-links { display: flex; gap: 10px; margin-top: 30px; }
.page-numbers { padding: 6px 12px; border: 1px solid #ddd; }
.page-numbers.current { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }

/* ---------- ウィジェット (フッター) ---------- */
#main-widget-area { padding-top: 30px; display: flex; flex-wrap: wrap; gap: 30px; }
#main-widget-area .widget { flex: 1 1 240px; margin-bottom: 0; }
#main-widget-area .widget-title { color: var(--color-footer-text); border-bottom-color: rgba(232,229,206,0.25); }


/* ============================================================
   旧サイトのカスタムCSS(旧テーマ style.css の "8.0 Custom" 以降)
   を移植したもの。ホームページのヒーロー画像・記事カード、
   各固定ページ(祈願・うなぎ供養・墓地等)の独自レイアウト、
   フッターSNSボタンのデザインはすべてここに定義されている。
   ============================================================ */

/**
 * 8.0 Custom
 * ----------------------------------------------------------------------------
 */
.sectionCover{
	width: 100%;
	height: 100vh;}

.topCoverImg{
	position: relative;
	top: 0;
    	left: 0;
    	overflow: hidden;
    	width: 100%;
    	height: 100%;
}

.topCoverInner{
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
}

.topCoverInner p{
	margin: 0 0 0;}

.topCoverBack{
	position: absolute;
   	top: 0;
  	left: 0;
   	overflow: hidden;
   	width: 100%;
  	height: 100%;
  	background: rgba(0,0,0,0.5);
 	-webkit-background-size: cover;
 	background-size: cover;
  	border: 0 #fff solid;
}

.topCoverTitle{
	position: absolute;
	width: 100%;
	top: 50%;
	left: 65%;
	margin-top: -7px;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	font-weight: 600;
	color: white;
	font-style: italic;
	line-height: 1.1;
}

.topCoverTOP{
	top: 50%;
	left: 70%;}

.topCoverKOKUZO{
	top: 50%;
	left: 57%;
	width: 68%;}

.topCoverPRAY{
	top: 50%;
	left: 67%;}

.topCoverGRAVE{
	top: 50%;
	width: 58%;
	left: 60%;}

.topCoverTitle1{
	font-size: 2.9em;
	letter-spacing: 0.1em;
}

.topCoverTitle2{
	font-size: 2.9em;
	letter-spacing: 0.1em;}

.topCoverTitle3{
	font-size: 3.4em;
	letter-spacing: 0.1em;}

.topCoverTitle4{
	font-size: 1.7em;}

.sectionTOP {
	margin-bottom: 85px;
	padding: 0 25px;}

.sectionTOP h3{
	margin: 40px 0;}

.sectionTOP p{
	line-height: 3;
	font-size: 1.15em;}

/* トップページの「御礼」セクションだけ、ホームの.content-wrapが
   max-width:none(画面幅いっぱい)になっている影響で本文が横に広がりすぎて
   読みにくくなっていた。他ページの本文と同じ「.content-wrapの最大幅
   (--content-max)で中央寄せ」という考え方に揃える */
.sectionThank {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 0 25px;
}

/* トップページ冒頭の引用文("由緒ある伝統と関東三大虚空蔵尊の一つである
   「彦倉虚空蔵尊」を奉る埼玉県三郷の名刹")を、リファレンスに合わせて
   大きく・中央寄せの見出し的な扱いにする */
.sectionTOP blockquote {
	max-width: 900px;
	margin: 0 auto 40px;
	padding: 0 20px;
	text-align: center;
}

.sectionTOP blockquote p {
	font-size: 1.6em;
	line-height: 1.8;
	font-weight: 700;
	font-family: var(--font-heading);
}

.sectionTOP span{
	color: #D80C18;
	font-weight: 700;}

div.map {
	width: 100% !important;
	padding: 0 80px;
}

.articleWrapper{
	width: 100%;
	height: 520px;
	display: table;}

.topArticleImg {
	display: table-cell;
	vertical-align: middle;
	width: 60%;}

.topArticleMobileImg{
	display: none;}


.topArticleDesc {
	display: table-cell;
	vertical-align: middle;
	width: 40%;
	padding: 40px;}

.topArticleDesc h4{
	position: relative;
	text-align: center;
	margin-bottom: 70px;
	font-size: 30px;
	}

.topArticleDesc h4:after {
	position: absolute;
	content: '';
	bottom: -3px;
	right: 150px;
	width: 45%;
	border-bottom: solid 2px black;
}


p.topGoToPage {
	text-align: right;
	margin: auto 30px auto 0px;
	position: relative;
	padding: 0 35px;}

p.topGoToPage:before {
	position: absolute;
	content: '';
	bottom: -3px;
	right: 0;
	width: 0;
	height: 0;
	border: none;
	border-right: solid 25px transparent;
	border-bottom: solid 12px #D80C18;
}

p.topGoToPage:after {
	position: absolute;
	content: '';
	bottom: -3px;
	right: 10px;
	width: 35%;
	border-bottom: solid 2px #D80C18;
}

.accessInfo{
	text-align: center;
	margin: 80px 15px;
}

.accessInfo h3{
	position: relative;
	margin-bottom: 45px;}

.accessInfo h3:after {
	position: absolute;
	content: '';
	bottom: -3px;
	right: 300px;
	width: 30%;
	border-bottom: solid 2px black;
}

/*Route Guide*/

.accessSectionLeft{
	width: 50%;
	float: left;
    	min-height: 1px;
    	-webkit-box-sizing: border-box;
    	box-sizing: border-box;
}

.accessSectionLeft:after{
	clear: both;
}

.accessSectionRight{
	width: 50%;
	float: left;
    	min-height: 1px;
    	-webkit-box-sizing: border-box;
    	box-sizing: border-box;
}

.accessSectionRight:after{
	clear: both;
}

.accessDetail{
	margin: 5px;
	text-align: center;
}

.accessDetail h4{
	position: relative;
	padding: 0.25em 0.5em;
	border-top: solid 2px black;
	border-bottom: solid 2px black;
	font-size: 21px;
}

.accessDetail h4:before, .accessDetail h4:after{
	content: '';
	position: absolute;
	top: -7px;
	width: 2px;
  	height: -webkit-calc(100% + 14px);
	height: calc(100% + 14px);
	background-color: black;
}

.accessDetail h4:before {left: 7px;}
.accessDetail h4:after {right: 7px;}

.accessDetail p{
	position: relative;
	display: inline-block;
	padding: 0 55px;
	margin: 15px 0 0;
	font-size: 19px;
}

.accessDetail p:before, .accessDetail p:after{
	content: '';
	position: absolute;
	top: 50%;
	display: inline-block;
	width: 45px;
	height: 2px;
	border-top: solid 1px black;
	border-bottom: solid 1px black;
}

.accessDetail p:before {left:0;}
.accessDetail p:after {right: 0;}

.accessDetail ul{
	margin-bottom: 55px;
	text-align: left;
	font-size: 16px;
	list-style: none;
	padding: 10px;
}

.accessDetail ul li{
    	line-height: 1.7;
   	padding: 0.5em 0 0.5em 1.4em;
   	border-bottom: dashed 2px silver;
   	list-style-type: none!important;}


/*News*/


.news h3{
	margin-top: 65px; 
	text-align: center;
	position: relative;
	margin-bottom: 45px;
	padding: 10px 0;
}

.news h3:after {
	position: absolute;
	content: '';
	bottom: -3px;
	right: 330px;
	width: 25%;
	border-bottom: solid 2px black;
}

.news ul li {
	line-height: 1.7;
	padding: 0.5em 0 0.5em 1.4em;
	border-bottom: dashed 2px silver;
	list-style-type: none!important;
}

.news ul li span{
	margin-right: 35px;
}

p.newsGoToPage {
	text-align: right;
	margin: auto 30px auto 0px;
	position: relative;
	padding: 0 35px;}

p.newsGoToPage:before {
	position: absolute;
	content: '';
	bottom: -3px;
	right: 0;
	width: 0;
	height: 0;
	border: none;
	border-right: solid 25px transparent;
	border-bottom: solid 12px #D80C18;
}

p.newsGoToPage:after {
	position: absolute;
	content: '';
	bottom: -3px;
	right: 10px;
	width: 19%;
	border-bottom: solid 2px #D80C18;
}


/*Social SNS Button*/

@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?7ydtcs');
  src:  url('./fonts/icomoon.eot?7ydtcs#iefix') format('embedded-opentype'),
    url('./fonts/icomoon.ttf?7ydtcs') format('truetype'),
    url('./fonts/icomoon.woff?7ydtcs') format('woff'),
    url('fonts/icomoon.svg?7ydtcs#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-facebook:before {
  content: "\e901";
  color: #3b5998;
}
.icon-hatena:before {
  content: "\e90a";
  color: #00a4de;
}

.icon-line_a:before {
  content: "\e90b";
  color: #00c300;
}

.icon-twitter:before {
  content: "\e910";
  color: #55acee;
}


.social {
text-align: center;
padding: 0px 0px 50px 0px;
}
 
.social li {
display: inline-block;
width: 80px;
height: 80px;
padding: 0px;
position: relative;
margin: 0px 11px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
list-style:none;
}
 
.social li i {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
display: inline-block;
width: 40px;
height: 40px;
position: absolute;
right: 50%;
top: 50%;
margin-right: -20px;
margin-top: -20px;
}
 
.social li i:before {
font-size: 36px;
}
 
.social li a {
display: block;
width: 80px;
height: 80px;
border-radius: 5px;
border: 3px solid #c0c0c0;
color: #333333;
box-sizing: border-box;
position: relative;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: borderColor 0.3s;
transition: borderColor 0.3s;
}
 
.social li a:after {
content: "";
position: absolute;
z-index: -1;
-webkit-transition: width 0.3s, opacity 0.3s;
transition: width 0.3s, opacity 0.3s;
width: 0;
height: 105%;
top: 50%;
left: 50%;
background: #333333;
opacity: 0;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
border-radius: 3px;
}

.social li a:hover:after {
width: 100%;
opacity: 1;
}
 
.social li a:hover i:before {
color: #fff;
}
 
/*facebook adjustment*/

.icon-facebook{
margin-top: -22px !important;
margin-right: -18px !important;
}

.icon-facebook:before {
font-size: 41px !important;
}

/*facebook*/
.fa a:after {
background: #3b5998 !important;
}
 
.fa a:hover {
border-color: #3b5998 !important;
}
 
/*hatena*/
.ha a:after {
background: #2C6EBD !important;
}
 
.ha a:hover {
border-color: #2C6EBD !important;
}
 
/*twitter*/
.tw a:after {
background: #00aced !important;
}
 
.tw a:hover {
border-color: #00aced !important;
}
 
/*line*/
.line a:after {
background: #1EC221 !important;
}
 
.line a:hover {
border-color: #1EC221 !important;
}

/*Hikokura Kokuzo*/

.kokuzoTitle, .enmeiTitle{
	text-align: center;
	position: relative;
	margin-bottom: 45px;
	padding: 10px 0;
}

.kokuzoTitle:after, .enmeiTitle:after {
	position: absolute;
	content: '';
	bottom: -3px;
	right: 320px;
	width: 25%;
	border-bottom: solid 2px black;
}

.kokuzoTitle2{
	text-align: center;
	position: relative;
	margin-bottom: 45px;
	padding: 10px 0;
}

.kokuzoTitle2:after {
	position: absolute;
	content: '';
	bottom: -3px;
	right: 320px;
	width: 25%;
	border-bottom: solid 2px black;
}

.kokuzoShowcaseList{
	list-style-type:none;}

.kokuzoShowcase{
	box-sizing:border-box;
	max-width:440px;
	width: 33%;
	display: inline-block;
	vertical-align: top;
	padding: 0 25px;
	text-align:center;}

.showcaseTitle{}

.showcaseText p{
	margin: 0 0 5px;
	font-size: 0.8em;}


.calendarBoxLeft{
	box-sizing:border-box;
	max-width:220px;
	width: 33%;
	display: inline-block;
	vertical-align: top;
	padding: 0 0 0 45px;}

.calendarBoxLeft img{
	width: auto;}


.calendarBoxRight{
	box-sizing:border-box;
	width: 67%;
	display: inline-block;
	vertical-align: top;
	padding: 0 20px;}

.calendarBoxRight ul{
	list-style-type:none;
	margin: 0;}

.calendarBoxRight ul li{
    	border-bottom: dashed 2px silver;
	margin: 0 0 15px;}

.calendarBoxRight ul p{
	font-size: 0.85em;
	margin: 0;
	line-height: 2;}

.calendarContentBox{
	margin: 0 0 15px;}

.calendarContentBox h4{
	margin: 13px 0;
	color: #D80C18;
    	font-weight: 700;}

/*Pray and Omamori*/

h3.prayTitle{
	position: relative;
	margin-bottom: 45px;
	text-align: center;
	padding: 15px;
	margin: 50px 0 35px;}

h3.prayTitle:after {
	position: absolute;
	content: '';
	bottom: -3px;
	right: 262px;
	width: 37%;
	border-bottom: solid 2px black;
}


h3.prayTitle2{
	position: relative;
	margin-bottom: 45px;
	text-align: center;
	padding: 15px;
	margin: 50px 0 70px;}

h3.prayTitle2:after {
	position: absolute;
	content: '';
	bottom: -3px;
	right: 325px;
	width: 33%;
	border-bottom: solid 2px black;
}

.unagiSection{
	padding:0 10px;
}

.praySection{
    	max-width: 1600px;
   	min-width: 1024px;
   	margin: 0 auto;
	box-sizing: border-box;}

.praySectionComment{
	text-align: center;
	margin-bottom: 0px;
	font-size: 14px;
	color: red;
}

.prayBoxArea{
 	display: table-cell;
 	vertical-align: middle;
  	width: 60%;
	padding: 0px;
 	box-sizing: border-box;
}

.prayDeskIMG{
		display: block;}

.prayMobileIMG{
		display: none;}

.prayBoxDesc{
	display: table-cell;
 	vertical-align: middle;
  	width: 40%;
	padding: 0px;
 	box-sizing: border-box;
 	padding: 25px 35px 45px;
	font-weight: 600;
	border: 1px dotted #ededed;
}

.prayBoxDesc h4{
 	text-align: center;
	position: relative;
	margin-bottom: 70px;
	font-size: 28px;
	color: #D80C18;
}

.prayBoxDesc p{
 	font-size: 18px;
}

.prayUnderBox {
	margin: 25px 0 15px;
	font-size: 16px;
	padding: 5px 0;}

.prayUnderBox h4{
	color: #D80C18;
}

.prayTable td{
	box-sizing: content-box;
    	font-size: 16px;
    	letter-spacing: 0.05em;
    	padding: 10px;
    	border-left: 1px solid #ededed;
    	border-right: 1px solid #ededed;
	font-weight: 600;
	text-align: center;
}

th.prayTableTitle{	
	box-sizing: content-box;
    	font-size: 18px;
    	letter-spacing: 0.05em;
    	padding: 8px;
    	border-left: 1px solid #ededed;
    	border-right: 1px solid #ededed;
	font-weight: 600;
    	background-color: #f1f1f1;
	text-align: center;
}

.prayMenColor{
	color: #0066c0;}

.prayWomenColor{
	color: #D80C18;}

.amuletShowcaseList{
	list-style-type:none;}

.amuletShowcase{
	box-sizing:border-box;
	max-width:440px;
	width: 24%;
	display: inline-block;
	vertical-align: top;
	padding: 0 20px;
	text-align:center;}

.amuletShowcaseText p{
	margin: 0 0 5px;
	font-size: 0.8em;}

/*Unagi Page*/

.eelTitle{
	position: relative;
	margin-bottom: 45px;
	text-align: center;
	padding: 15px;}

.eelTitle:after {
	position: absolute;
	content: '';
	bottom: -3px;
	right: 262px;
	width: 37%;
	border-bottom: solid 2px black;
}

.eelQuote{
	margin: 20px 0px !important;}

.eelQuote p{
    font-size: 25px !important;}


/*Application Form*/

h3.applicationTitle{
	position: relative;
	margin-bottom: 45px;
	text-align: center;
	padding: 15px;
	margin: 50px 0 35px;}

h3.applicationTitle:after {
	position: absolute;
	content: '';
	bottom: -3px;
	right: 262px;
	width: 37%;
	border-bottom: solid 2px black;
}

tr.unagiTable td{
	box-sizing: content-box;
    	font-size: 16px;
    	letter-spacing: 0.05em;
    	padding: 10px;
    	border-left: 1px solid #ededed;
    	border-right: 1px solid #ededed;
	font-weight: 600;
}

td.unagiTableLeft {
    	width: 23%;
    	background-color: #f1f1f1;
	text-align: center;
	color: #D80C18;
}

td.unagiTableRight {
    	width: 77%;
}

/* ---------- Contact Form 7 (申込みフォーム) ----------
   旧サイトのCSSはブラウザ標準の見た目に近く簡素だったため、
   サイト全体のトーン(アクセントカラー・見出しフォント等)に合わせて
   刷新する。 */
.wpcf7 {
	max-width: 700px;
	margin: 20px auto;
	padding: 30px 25px;
	background: #faf8f3;
	border: 1px solid #e6ddd0;
	border-radius: 8px;
	font-size: 1rem;
}

.wpcf7-form p {
	margin: 0 0 22px;
}

.wpcf7-form label {
	display: block;
	margin-bottom: 8px;
	font-weight: 700;
	color: var(--color-text);
}

.wpcf7-form-control,
.wpcf7-text,
.wpcf7-email,
.wpcf7-tel,
.wpcf7-number,
.wpcf7-textarea,
.wpcf7-select,
.wpcf7-form select {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	height: auto;
	padding: 10px 12px;
	margin: 0;
	border: 1px solid #cfc4b3;
	border-radius: 4px;
	background: #fff;
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--color-text);
	transition: border-color .2s ease, box-shadow .2s ease;
}

.wpcf7-form-control:focus,
.wpcf7-text:focus,
.wpcf7-email:focus,
.wpcf7-tel:focus,
.wpcf7-number:focus,
.wpcf7-textarea:focus,
.wpcf7-select:focus,
.wpcf7-form select:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(219, 87, 47, 0.15);
}

.wpcf7-textarea {
	min-height: 140px;
	resize: vertical;
}

.wpcf7-list-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 16px 8px 0;
	vertical-align: middle;
	font-weight: normal;
}

.wpcf7-number {
	width: 90px !important;
	display: inline-block;
	text-align: center;
}

.wpcf7 table {
	width: 100%;
	border-collapse: collapse;
	margin: 10px 0 25px;
}

.wpcf7 table td,
.wpcf7 table th {
	padding: 10px 8px;
	border-bottom: 1px solid #e6ddd0;
	text-align: left;
	vertical-align: middle;
}

.wpcf7-submit {
	display: block !important;
	width: auto;
	min-width: 220px;
	margin: 35px auto 10px;
	padding: 14px 40px;
	background: var(--color-accent);
	color: #fff;
	border: none;
	border-radius: 4px;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	cursor: pointer;
	transition: background-color .2s ease;
}

.wpcf7-submit:hover,
.wpcf7-submit:focus {
	background: var(--color-accent-dark);
}

.wpcf7-not-valid-tip {
	display: block;
	margin: 6px 0 0;
	color: #c0392b;
	font-size: 0.875rem;
}

.screen-reader-response,
.wpcf7-response-output,
.wpcf7-validation-errors {
	margin: 20px 0 0 !important;
	padding: 12px 16px !important;
	border-radius: 4px;
	font-size: 0.95rem;
}

.wpcf7-response-output {
	border: 1px solid #cfc4b3;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: #4caf50 !important;
	color: #2e7d32;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
	border-color: #c0392b !important;
	color: #c0392b;
}

@media (max-width: 700px) {
	.wpcf7 {
		padding: 20px 16px;
	}
}

/*Grave*/

.graveBoxArea{
 	display: table-cell;
  	width: 57%;
	padding: 0px;
 	box-sizing: border-box;
}

.graveBoxDesc{
	display: table-cell;
 	vertical-align: middle;
  	width: 43%;
	padding: 0px;
 	box-sizing: border-box;
	font-weight: 600;
	border: 1px dotted #ededed;
 	padding: 0px 45px 0px;
	font-weight: 600;
}

.graveDeskImg{
		display: table-cell;}

.graveMobileImg{
		display: none;}

.graveBoxDesc h4{
	position: relative;
   	text-align: center;
 	margin-bottom: 50px;
	font-size: 30px;}

.graveBoxDesc h5{
	position: relative;
	font-size: 24px;}

.graveBoxDesc p{
	font-size: 17px;
}

.graveBoxDesc span{
	color: #D80C18;
    	font-weight: 700;
}

ul.graveMatter{
	padding: 0 0 0 40px;
}

ul.graveMatter li{
	font-size: 14px;
	color: #D80C18;
}

ul.graveListSupplement{
	list-style-type: none;
	padding: 0 0 0 0;
}

ul.graveListSupplement li{
	font-size: 14px;
	
}

/*New Post*/

.post{
	padding: 80px 0 130px;
	width: 980px;
	margin: 0 auto;}

.postWrapper{
	padding: 40px 0 0;}

.postWrapper h2{
	color: #D80C18;
	margin: 0px;
	border-bottom: dashed 2px silver;
	padding: 0 0 5px;}

.postWrapper h3{
	font-size: 14px;
	margin: 10px 0 0;}

.postContent{
	padding: 40px 0 0;}

.postContent p{
	font-size: 18px;}

.postImage{
	display: inline-block;
    	vertical-align: top;}

.postImage img{
	width: 700px;
    	height:400px;}

/**
 * 9.0 Media Queries
 * ----------------------------------------------------------------------------
 */

/* Does the same thing as <meta name="viewport" content="width=device-width">,
 * but in the future W3C standard way. -ms- prefix is required for IE10+ to
 * render responsive styling in Windows 8 "snapped" views; IE10+ does not honor
 * the meta tag. See http://core.trac.wordpress.org/ticket/25888.
 */
@-ms-viewport {
	width: device-width;
}
@viewport {
	width: device-width;
}

@media (max-width: 1599px) {
	.site {
		border: 0;
    		position: relative;
    		width: 100%;
		overflow: hidden;
	}
}

@media (max-width: 1069px) {
	.sidebar img.alignleft,
	.sidebar .wp-caption.alignleft {
		margin-left: 0;
	}

	.sidebar img.alignright,
	.sidebar .wp-caption.alignright {
		margin-right: 0;
	}

	.error404 .page-header {
		margin-left: auto;
		max-width: 604px;
		width: 100%;
	}

	.archive-header,
	.search .page-header,
	.archive .page-header,
	.blog .page-header,
	.error404 .page-content,
	.search .page-content,
	.archive .page-content,
	.attachment .entry-header,
	.attachment .entry-content,
	.post-navigation .nav-links,
	.sidebar .site-info,
	.site-footer .widget-area {
		padding-left: 20px;
		padding-right: 20px;
	}

	.error404 .page-title {
		font-size: 24px;
		padding: 180px;
	}

	.error404 .page-title:before {
		font-size: 554px;
	}

	.attachment .image-navigation {
		max-width: 724px;
	}

	.image-navigation .nav-previous,
	.image-navigation .nav-next {
		position: static;
	}

	.site-main .widget-area {
		margin-right: 60px;
	}
}

@media (max-width: 999px) {
	section{
		width: 100%;
	}

	.sidebar .entry-header,
	.sidebar .entry-content,
	.sidebar .entry-summary,
	.sidebar .entry-meta,
	.sidebar .comment-list,
	.sidebar .comment-reply-title,
	.sidebar .comment-navigation,
	.sidebar .comment-respond .comment-form,
	.sidebar .featured-gallery,
	.sidebar .post-navigation .nav-links,
	.author.sidebar .author-info {
		max-width: 604px;
		padding-left: 0;
		padding-right: 0;
	}

	.sidebar .site-info,
	.search.sidebar .page-content,
	.blog.sidebar .page-content,
	.attachment .entry-header,
	.sidebar .comments-title {
		max-width: 604px;
	}

	.sidebar .archive-meta,
	.attachment .entry-header,
	.search.sidebar .page-content,
	.blog.sidebar .page-content,
	.sidebar .site-info,
	.sidebar .comments-title,
	.sidebar .no-comments {
		padding-left: 0;
		padding-right: 0;
	}

	.attachment .entry-meta {
		float: left;
		text-align: left;
		width: 100%;
	}

	.attachment .entry-content {
		max-width: 100%;
		padding: 40px 0;
	}

	.format-status .entry-content {
		padding-top: 40px;
	}

	.format-status .entry-meta {
		padding-bottom: 40px;
	}

	.sidebar .format-status .entry-content,
	.sidebar .format-status .entry-meta {
		padding-left: 35px;
	}

	.sidebar .format-status .entry-content:before,
	.sidebar .format-status .entry-meta:before {
		left: 10px;
	}

	.sidebar .format-status .entry-content p:first-child:before {
		left: 4px;
	}

	.sidebar .paging-navigation .nav-links {
		padding: 0 60px;
	}

	.site-main .sidebar-container {
		height: auto;
		margin: 0 auto;
		max-width: 604px;
		position: relative;
		top: 20px;
	}

	.site-main .widget-area {
		float: none;
		margin: 0;
		width: 100%;
	}

	.sidebar .site-footer .widget-area {
		max-width: 100%;
		left: 0;
	}
	
	.sectionCover{
		width: 900px;
		height: 580px;}


	.topCoverTitle{
		position: absolute;
		width: 100%;
		top: 22%;
		left: 65%;
		margin-top: -7px;
		-webkit-transform: translate(-50%,-50%);
		-ms-transform: translate(-50%,-50%);
		-o-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
		font-weight: 600;
		color: white;
		font-style: italic;
		line-height: 1.1;
	}
	
	.topCoverTOP{
		top: 4%;
    		left: 50%;
    		font-size: 1.0em;
   		text-align: center;
		z-index: 2;}

	.topCoverTitle p{
		font-size: 0.8em;}

	.sectionThank p{
		text-align: left !important;}
	
	h2.topCoverTitle3{
		font-size: 2.0em;
		padding: 0 55px;}

	p.topCoverTitle2{
		font-size: 2.0em;}

	.topCoverInner{
		position: static;}

	.topCoverInner img{
		position: absolute;
    		left: -30%;}

	.topCoverBack{
		z-index: 1;}

	.entry-content blockquote{
		font-size: 1.6em !important;
		margin: 0 auto;
 	 	overflow: hidden;
 		padding: 25px 2px 0;}

	.sectionTOP p{
		line-height: 2;
		font-size: 0.8em;}

	.articleWrapper{
		display: block;
		height: 100%;}

	.topArticleImg{
		display: none;}

	.topArticleDesc{
		display: inline-block;
		width: 100%;
		padding: 0;}

	.topArticleDesc h4{
		margin-bottom: 40px;}

	.topArticleDesc h4:after{
		right: 105px;}

	.topArticleMobileImg{
		display: block;}

	.topArticleDesc p{
		padding: 15px 20px 0;
		font-size: 0.8em;}

	p.topGoToPage {
	    	text-align: right;
    		margin: auto 40px 15px 0px;
    		position: relative;
    		padding: 0 35px;}

	.news h3:after{
		width: 40%;
		right: 120px;}

	.news ul{
		padding: 0 5px;}

	.news ul li {
		line-height: 1.7;
		padding: 0.5em 0 0.5em 1.4em;
		border-bottom: dashed 2px silver;
		list-style-type: none!important;
		font-size: 0.7em;}
	
	p.newsGoToPage{
		font-size: 0.7em;}

	div.topCoverKOKUZO{
		top: 4%;
		left: 50%;
		width: 85%;
		z-index: 2;}

	div.topCoverKOKUZO h2.topCoverTitle1{
		font-size: 2.0em;}

	.kokuzoTitle:after, .enmeiTitle:after, .kokuzoTitle2:after{
		right: 120px;}
	
	ul.kokuzoShowcaseList{
		padding: 0 5px;}
	
	li.kokuzoShowcase {
    		box-sizing: border-box;
		width: 47%;
   		padding: 0 2px;}

	.showcaseText p {
   	 	margin: 0 0 5px;
   		font-size: 0.7em;}

	.calendarBoxLeft {
		box-sizing: border-box;
   		max-width: 220px;
  		width: 21%;
 		display: inline-block;
 		vertical-align: top;
 		padding: 0 3px 0 0px;}

	.calendarBoxRight{
		width: 76%;
		padding: 0 1px 0 5px;}

	.calendarBoxRight ul{
		padding: 0;}

	.calendarBoxRight ul p {
	 	font-size: 0.65em;
		margin: 0;
  	  	line-height: 2;}

	.eelTitle:after {
  		  bottom: -3px;
  		  right: 102px;}

	.topCoverPRAY {
   		top: 4%;
   		left: 58%;
   		font-size: 0.9em;
		z-index: 2;}

	.praySection {
		min-width: 100%;
		text-align: center;}

	.praySectionComment{
		text-align: center;
		margin-bottom: 0px;
		font-size: 14px;
		color: red;}

	.prayBoxArea{
		display: block;
		width: 100%;
		padding: 0;}

	h3.prayTitle2:after {
	right: 125px;
	width: 33%;
	}

	h3.prayTitle:after {
    	right: 97px;}

	.prayDeskIMG{
		display: none;}

	.prayMobileIMG{
		display: block;}

	.prayBoxDesc p {
		padding: 0 20px;
    		font-size: 0.8em;
		}

	th.prayTableTitle {
    		font-size: 1em;
    		padding: 4px;}

	.prayTable td {
  		box-sizing: content-box;
  		font-size: 1em;}

	.prayBoxDesc h4{
		margin-bottom: 25px;}

	.prayUnderBox {
    		margin: 25px 0 15px;
    		font-size: 16px;
    		padding: 5px 15px;}

	.amuletShowcaseList{
		padding: 0 3px;}

	.amuletShowcase {
    		box-sizing: border-box;
    		max-width: 440px;
    		width: 30%;
		padding: 0 1px;}

	.amuletShowcase h4{
		font-size: 0.75em;}

	.enmeiTitle {
		font-size: 1.2em;
    		margin-bottom: 45px;
   		padding: 10px 0;}

	.topCoverGRAVE {
		font-size: 0.7em;
    		width: 80%;
		top: 5%;
    		left: 50%;
		z-index: 2;}

	.graveBoxDesc{
		display: block;
		width: 100%;
		padding: 7px;}

	.graveBoxDesc h4{
		margin-bottom: 25px;
		font-size: 1.2em;}

	.graveBoxDesc h5{
		margin: 15px 0;
		font-size: 1em;}

	ul.graveMatter li{
	font-size: 0.7em;}

	.graveBoxDesc p {
    		font-size: 0.8em;}

	.graveDeskImg{
		display: none;}

	.graveMobileImg{
		display: block;}

	.accessInfo{
		font-size: 0.8em;}

	.accessInfo h3{
		font-size: 1.8em;
		margin-bottom: 25px;}

	.accessInfo h3:after{
		right: 120px;}


	.accessSectionLeft, .accessSectionRight{
		width: 100%;}

	.accessDetail h4 {
   		position: relative;
    		padding: 0.25em 0.5em;
    		border-top: solid 2px black;
    		border-bottom: solid 2px black;
  		font-size: 0.7em;}
	
	.accessDetail p {
    		padding: 0 35px;
    		margin: 15px 0 0;
    		font-size: 0.7em;}

	.accessDetail p:before, .accessDetail p:after {
    		content: '';
    		position: absolute;
    		top: 50%;
   		display: inline-block;
   		width: 25px;
   		height: 2px;
    		border-top: solid 1px black;
    		border-bottom: solid 1px black;}

	.accessDetail ul li{
		font-size: 0.8em;}

	div.map{
		padding: 0 40px;}

	.social li {
    		display: inline-block;
    		width: 55px;
    		height: 50px;
    		padding: 0px;
    		position: relative;
    		margin: 0px 10px;}

	.social li a {
   		width: 60px;
    		height: 60px;}

	.social li i {
    		-webkit-transform: rotate(-45deg);
    		-ms-transform: rotate(-45deg);
    		transform: rotate(-45deg);
    		display: inline-block;
    		width: 40px;
    		height: 40px;
    		position: absolute;
    		right: 40%;
    		top: 60%;}

	.social li i:before {
    		font-size: 25px;}

	.icon-facebook:before {
    		font-size: 30px !important;}

	li.ha{
		display: none;}

	.site-info p{
	padding: 0 15px;
	font-size: 0.9em;}

	}

	.post{
	padding: 80px 15px 0;
	width: 100%;
	margin: 0 auto;}


/* Collapse oversized image and pulled images after iPad breakpoint. */
@media (max-width: 767px) {
	.entry-content img.alignleft,
	.entry-content .wp-caption.alignleft {
		margin-left: 0;
	}

	.entry-content img.alignright,
	.entry-content .wp-caption.alignright {
		margin-right: 0;
	}

	.attachment .image-navigation,
	.attachment .entry-attachment .attachment {
		max-width: 604px;
		padding: 0;
		width: 100%;
	}

	.gallery-caption {
		display: none;
	}
}

@media (max-width: 643px) {
	.site-title {
		font-size: 30px;
	}

	#content .entry-header,
	#content .entry-content,
	#content .entry-summary,
	#content footer.entry-meta,
	#content .featured-gallery,
	.search.sidebar .page-content,
	.blog.sidebar .page-content,
	.sidebar .post-navigation .nav-links,
	.paging-navigation .nav-links,
	#content .author-info,
	.comments-area .comments-title,
	.comments-area .comment-list,
	.comments-area .comment-navigation,
	.comment-respond,
	.sidebar .site-info,
	.sidebar .paging-navigation .nav-links {
	
	padding: 0 0 20px;
	}

	#content .format-status .entry-content,
	#content .format-status .entry-met {
		padding-left: 35px;
	}

	/* Small menu */
	.menu-toggle {
		cursor: pointer;
		display: inline-block;
		font: bold 16px/1.3 "Source Sans Pro", Helvetica, sans-serif;
		margin: 0;
		padding: 3px 0 10px 20px;
    		font-size: 1.5em;
	}

	.menu-toggle:after {
		content: "\f502";
		font-size: 12px;
		padding-left: 8px;
		vertical-align: -4px;
	}

	.toggled-on .menu-toggle:after {
		content: "\f500";
		vertical-align: 2px;
	}

	.toggled-on .nav-menu,
	.toggled-on .nav-menu > ul {
		display: block;
		margin-left: 0;
		padding: 0;
		width: 100%;
	}

	.toggled-on li,
	.toggled-on .children {
		display: block;
	}

	.toggled-on .nav-menu li > ul {
		background-color: transparent;
		display: block;
		float: none;
		margin-left: 20px;
		position: relative;
		left: auto;
		top: auto;
	}

	.toggled-on .nav-menu li > ul a {
		color: #141412;
		width: auto;
	}

	.toggled-on .nav-menu li:hover > a,
	.toggled-on .nav-menu .children a {
		background-color: transparent;
		color: #141412;
	}

	.toggled-on .nav-menu li a:hover,
	.toggled-on .nav-menu ul a:hover {
		background-color: #db572f;
		color: #fff;
	}

	ul.nav-menu,
	div.nav-menu > ul {
		display: none;
	}

	#content .featured-gallery {
		padding-left: 24px;
	}

	.gallery-columns-1 .gallery-item {
		margin-right: 0;
		width: 100%;
	}

	.entry-title,
	.format-chat .entry-title,
	.format-image .entry-title,
	.format-gallery .entry-title,
	.format-video .entry-title {
		font-size: 22px;
		font-weight: bold;
	}

	.format-quote blockquote,
	.format-status .entry-content {
		font-size: 18px;
	}

	.format-quote blockquote small,
	.format-quote blockquote cite {
		font-size: 13px;
	}

	.error404 .page-title {
		padding: 40px 0 0;
	}

	.error404 .page-title:before {
		content: normal;
	}

	.comment-author {
		margin-right: 30px;
	}

	.comment-author .avatar {
		height: auto;
		max-width: 100%;
	}

	.comment-metadata,
	.comment-content,
	.comment-list .reply {
		width: 70%;
		width: -webkit-calc(100% - 104px);
		width:         calc(100% - 104px);
	}

	.comment-form input[type="text"],
	.comment-form input[type="email"],
	.comment-form input[type="url"] {
		width: -webkit-calc(100% - 120px);
		width:         calc(100% - 120px);
	}

	.comment-form textarea {
		height: 80px; /* Smaller field for mobile. */
	}

	/* Audio */
	.format-audio .entry-content:before {
		display: none;
	}

	.format-audio .audio-content {
		background-image: none;
		float: none;
		padding-left: 0;
		width: auto;
	}

	.post{
	padding: 80px 15px 0;
	width: 100%;
	margin: 0 auto;}
}

/* Mobile devices */
@media (max-width: 360px) {
	.site {
   	 border: 0;
   	 position: relative;
   	 width: 100%;
   	 overflow: hidden;}
	
	.post{
	padding: 80px 15px 0px;
	width: 100%;
	margin: 0 auto;}

	.topCoverTitle p{
		font-size: 0.7em;
		padding: 0 3px;}
	
	h2.topCoverTitle3{
		font-size: 1.6em;
		padding: 0 45px;}

	p.topCoverTitle2{
		font-size: 1.7em;}

	div.topCoverKOKUZO h2.topCoverTitle1{
		font-size: 1.6em;}

	.topCoverTitle1 {
    		font-size: 1.9em;
    		letter-spacing: 0.1em;}

	.entry-content blockquote {
   	 	font-size: 1.3em !important;
    		padding: 25px 2px 0;}

	.gallery {
		margin-left: 0;
	}

	.gallery .gallery-item,
	.gallery-columns-2.gallery-size-thumbnail .gallery-item {
		max-width: none;
		width: 49%;
		width: -webkit-calc(50% - 4px);
		width:         calc(50% - 4px);
	}

	.gallery-columns-1.gallery-size-medium,
	.gallery-columns-1.gallery-size-thumbnail,
	.gallery-columns-2.gallery-size-thumbnail,
	.gallery-columns-3.gallery-size-thumbnail {
		display: block;
	}

	.gallery-columns-1 .gallery-item,
	.gallery-columns-1.gallery-size-medium .gallery-item,
	.gallery-columns-1.gallery-size-thumbnail .gallery-item {
		text-align: center;
		width: 98%;
		width: -webkit-calc(100% - 4px);
		width:         calc(100% - 4px);
	}

	.gallery-columns-3 .gallery-item:nth-of-type(3n),
	.gallery-columns-5 .gallery-item:nth-of-type(5n),
	.gallery-columns-7 .gallery-item:nth-of-type(7n),
	.gallery-columns-9 .gallery-item:nth-of-type(9n) {
		margin-right: 4px;
	}

	.gallery br {
		display: none;
	}

	.gallery .gallery-item:nth-of-type(even) {
		margin-right: 0;
	}

	/* Comments */
	.comment-author {
		margin: 0 0 5px;
		max-width: 100%;
	}

	.comment-author .avatar {
		display: inline;
		margin: 0 5px 0 0;
		max-width: 20px;
	}

	.comment-metadata,
	.comment-content,
	.comment-list .reply {
		width: 100%;
	}
}


/**
 * 10.0 Print
 * ----------------------------------------------------------------------------
 */

/* Retina-specific styles. */
@media print,
	(-o-min-device-pixel-ratio: 5/4),
	(-webkit-min-device-pixel-ratio: 1.25),
	(min-resolution: 120dpi) {

	.site-header .search-field {
		background-image: url(images/search-icon-2x.png);
	}

	.format-audio .audio-content,
	.format-status .entry-content:before,
	.format-status .entry-meta:before,
	.comment-list > li:after,
	.comment-list .children > li:before {
		background-image: url(images/dotted-line-2x.png);
	}
}

@media print {
	body {
		background: none !important;
		color: #000;
		font-size: 10pt;
	}

	footer a[rel="bookmark"]:link:after,
	footer a[rel="bookmark"]:visited:after {
		content: " [" attr(href) "] "; /* Show URLs */
	}

	.site {
		max-width: 98%;
	}

	.site-header {
		background-image: none !important;
	}

	.site-header .home-link {
		max-width: none;
		min-height: 0;
	}

	.site-title {
		color: #000;
		font-size: 21pt;
	}

	.site-description {
		font-size: 10pt;
	}

	.author-avatar,
	.site-footer,
	.comment-respond,
	.comments-area .comment-edit-link,
	.comments-area .reply,
	.comments-link,
	.entry-meta .edit-link,
	.page-links,
	.site-content nav,
	.widget-area,
	.main-navigation,
	.navbar,
	.more-link {
		display: none;
	}

	.entry-header,
	.entry-content,
	.entry-summary,
	.entry-meta {
		margin: 0;
		width: 100%;
	}

	.page-title,
	.entry-title {
		font-size: 21pt;
	}

	.entry-meta,
	.entry-meta a {
		color: #444;
		font-size: 10pt;
	}

	.entry-content img.alignleft,
	.entry-content .wp-caption.alignleft {
		margin-left: 0;
	}

	.entry-content img.alignright,
	.entry-content .wp-caption.alignright {
		margin-right: 0;
	}

	.format-image .entry-content .size-full {
		margin: 0;
	}

	/* Remove colors from post formats */
	.hentry {
		background-color: #fff;
	}

	/* Comments */
	.comments-area > li.comment {
		background: none;
		position: relative;
		width: auto;
	}

	.comment-metadata {
		float: none;
	}

	.comment-author .fn,
	.comment-reply-link,
	.comment-reply-login {
		color: #333;
	}
} /* @media print の閉じ括弧(旧テーマからの移植時に欠落していたものを補完) */


/* ============================================================
   ヒーロー画像(.sectionCover)セクション全般の調整
   トップページに限らず、うなぎ供養・彦倉虚空蔵尊・祈祷祈願・墓地など
   .sectionCoverを使う全ページに共通して適用する。
   ============================================================ */

/* topCoverTitleの絶対配置がbody全体ではなくヒーロー領域内に
   収まるよう、位置の基準をsectionCoverに限定する(重要なバグ修正) */
.sectionCover {
	position: relative;
	overflow: hidden;
}

/* .sectionCoverのwidth:100%は「親要素いっぱい」の意味だが、通常ページは
   .content-wrapへ最大幅(--content-max)を設定しているため、そのままだと
   ヒーロー画像の左右に余白ができてしまう。ヒーローだけは全ページ共通で
   ビューポート幅いっぱいに広げる(旧サイトと同じ見た目)。 */
.sectionCover {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* ヒーロー画像がsectionCoverの高さ(100vh)いっぱいに表示されない問題の修正。
   .topCoverInnerに高さの指定が無く、実際の<img>も画像本来の縦横比のまま
   幅基準で縮小されるだけだったため、上下に隙間ができていた。
   object-fit:coverで枠いっぱいに敷き詰める(はみ出た部分はトリミング)。 */
.topCoverInner {
	height: 100%;
}

.topCoverInner p {
	height: 100%;
	margin: 0;
}

.topCoverInner img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

/* ヒーロー画像(.sectionCover)を持つページ(トップページに限らず、
   彦倉虚空蔵尊・うなぎ供養・祈祷祈願・お守り・延命院墓地など)では、
   ページ見出し("祈祷・祈願"等)とサイトタイトル/説明文を非表示にし、
   ヒーロー画像内の見出し(topCoverTitle)だけを見せる(旧サイトの見た目に合わせる)。
   ページ内に.sectionCoverが存在するかどうかで自動判定する。 */
/* サイトタイトル・説明文は常に非表示にする。ヒーロー画像の有無に関わらず
   全ページでヘッダーの見た目(コンパクトなナビゲーションバーのみ)を統一する。
   (「うなぎ供養会申し込み」「お守り申し込み」のようにヒーロー画像を持たない
   ページだけタイトル文字列が表示されたままになり、他のページと見た目が
   揃っていなかったための修正) */
.site-title,
.site-description {
	display: none;
}

/* ページ見出し(entry-title)は常に非表示にする。ヒーロー画像を持つページは
   画像内の見出しと二重表示になるため、ヒーロー画像を持たないページ
   (「うなぎ供養会申し込み」「お守り」等)も本文側に同じ見出しが
   既にあり不要なため、全ページ共通で非表示にする */
.entry-title {
	display: none;
}

/* ヒーロー画像を持つページは全て、ヘッダーをヒーロー画像の上に重ねる
   半透明バーにする(トップページ・その他のページで見た目を統一する) */
body:has(.sectionCover) .site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: rgba(20, 16, 14, 0.55);
}

/* ヘッダーが画像の上に重なる分、ヒーロー画像側の開始位置が
   ヘッダーの下に押し下げられないよう、上パディングを外す
   (トップページ・その他のページ共通) */
body:has(.sectionCover) .content-wrap {
	padding-top: 0;
}

/* ヘッダーをposition:fixed(スクロールに追従)にしたことで、ヘッダーが
   ドキュメントの通常の流れから外れ、本文がその下に隠れてしまうため、
   ヒーロー画像を持たないページ(ヘッダーの下にすぐ本文が来るページ)
   だけ、ヘッダーの高さぶんの上パディングを本文側に足す。
   (ヒーロー画像を持つページは画像がヘッダーの背後まで伸びる意図的な
   デザインなので、上のルール通りpadding-top:0のままにする) */
body:not(:has(.sectionCover)) .content-wrap {
	padding-top: 90px;
}

/* 通常ページ(本文)は.content-wrapの最大幅(--content-max)で中央寄せするが、
   ホームページは旧サイトと同様、画面幅いっぱいに広げるレイアウトのため
   ホームページに限り最大幅の制限自体を外す(ヒーロー画像・記事カードの
   両方に効くよう、ここでまとめて指定する)。 */
.home .content-wrap {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/* ============================================================
   見出し下線デザインの統一
   これまで各ページ(縁起・虚空蔵菩薩・境内案内・祈祷祈願・お守り・
   うなぎ供養・ホームの記事カードなど)ごとに、見出し下線の位置指定が
   "right: 320pxで幅25%"のように旧デザイン時の本文幅を前提にした
   固定値になっていたため、実際の本文幅と合わずズレて表示されていた。
   全ページ共通で「見出し中央の真下に、同じ長さの短い線」に統一する。 */
.topArticleDesc h4:after,
.accessInfo h3:after,
.news h3:after,
.kokuzoTitle:after,
.enmeiTitle:after,
.kokuzoTitle2:after,
h3.prayTitle:after,
h3.prayTitle2:after,
h3.applicationTitle:after,
.eelTitle:after {
	left: 50%;
	right: auto;
	width: 60px;
	transform: translateX(-50%);
}

/* ============================================================
   ナビゲーションメニューの中央揃え
   サイトタイトルを非表示にしたことでヘッダー内にナビゲーションだけが
   残ったが、メニュー項目自体が左詰め(flexのデフォルト)のままだったため
   左に偏って見えていた。全ページ共通でメニューを中央に揃える。
   ============================================================ */
.main-navigation ul {
	justify-content: center;
}

@media (max-width: 700px) {
	.main-navigation ul {
		align-items: center;
		text-align: center;
	}
}

/* ============================================================
   モバイル表示でのヒーロー画像レイアウト修正
   旧テーマから移植した max-width:999px 以下のレスポンシブ指定が、
   .sectionCoverを幅900px/高さ580pxの固定ボックスに戻したり、
   .topCoverInner imgをposition:absolute; left:-30%で左にずらしたり、
   タイトルの縦位置をtop:4%等(ヘッダーと重なる位置)に戻したりしていて、
   PC版で行った「画面いっぱい・縦中央」の修正がモバイルでは効いていなかった。
   ここで(ビューポート幅を問わず)最終的な値を上書きし、PC・モバイルの
   どちらでも同じ考え方(全画面表示・縦中央配置)になるようにする。 */
.sectionCover {
	height: 100vh;
}

.topCoverInner img {
	position: static;
	top: auto;
	left: auto;
}

.topCoverTitle {
	top: 50%;
}

.topCoverTOP {
	top: 50%;
}

.topCoverKOKUZO {
	top: 50%;
}

.topCoverPRAY {
	top: 50%;
}

.topCoverGRAVE {
	top: 50%;
}