@charset "UTF-8";


/*=======================================================*/
/*      		セクション毎のCSS   			  		  */
/*======================================================*/


/*======= 共通 ======*/

/* 親要素からはみ出して画面いっぱいに */
.full {
	margin: 0 calc(50% - 50vw);
	width: 100vw;
}



/*======= TOP ======*/
/*ご挨拶*/
.greeting {
	padding: clamp(40px, 6vw, 90px) 0 var(--v-space);
	background-color: var(--base-color);
	position: relative; /* sectionの位置を相対的にする*/
	z-index: 1; /* 背景画像より上に表示 */
}

.greeting-spot {
	color: var(--accent-color1);
	font-size: 1.2em;
}


/*画像とリード文並べる*/
.g-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
  margin-top:-40px;
}

/* グリッド全体 */
.g-container > div {
  display: grid;
  grid-template-columns: 1fr 4fr; /* 1:4 */
  gap: 20px;
  align-items: center;   /* 縦方向の中央寄せ */
  min-height: 200px;
  padding: 16px;
  border-radius: 8px;
}

/* 左のセル（画像用） */
.g-container > div > :first-child {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 画像のスタイル */
.g-container img {
  display: block;
  max-width: 350px;
  max-height: 225px;
  width: auto;
  height: auto;
  object-fit: cover;
}

@media screen and (max-width: 568px) { 
	.g-container img {
	  max-width:initial;
	}
}

/* 右のセル（テキスト用） */
.g-container > div > :last-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* テキスト整形 */
.g-container p {
  margin: 0;
  line-height: 1.6;
  font-size: 16px;
  color: #222;
}

/* スマホ時 */
@media (max-width: 767px) {
  .g-container > div {
    grid-template-columns: 1fr; /* 1列 */
    gap: 12px;
    min-height: auto;
  }
  .g-container img {
    width: 100%;
    max-height: none;
  }
}

/*======= コンテンツ ======*/


/*======= Service 仏事・ご祈祷 ======*/

span.month{
	color:var(--accent-color1);
}

.secS {
	padding: var(--v-space) 0;
	background-color: #FFF;
	background-image: url(../img/bg_03.png);
	background-size:cover;
	background-position: bottom;
	position: relative; /* sectionの位置を相対的にする*/ 
	z-index: 1; /* 背景画像より上に表示 */ 
}



/*カード*/
.secS-card__item{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap:10px;
}
@media only screen and (max-width: 968px) {
	.secS-card__item{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
}
@media only screen and (max-width: 568px) {
	.secS-card__item{
		display: grid;
		grid-template-columns: repeat(1, 1fr);
	}
}
.secS-card__item div{
	/*子要素のそれぞれのdivの高さを揃える記述*/
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
	/*ここまで*/

	padding: 10px;
	background-color:white;
	box-sizing: border-box;
}
.secS-card__item H4{
	padding: 5px 0;
	font-size: clamp(16px,1.5vw,20px);
	font-weight: bold;
	line-height: 1.3;
	text-align: center;
	font-weight:800;
    font-family: 'Noto Serif JP', serif !important;
}
.secS-card__item p{
	display: inline-block;
    font-size: 15px;
    line-height: 1.5;
}


.secS-card__item2{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap:10px;
}
@media only screen and (max-width: 968px) {
	.secS-card__item2{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
}
@media only screen and (max-width: 568px) {
	.secS-card__item2{
		display: grid;
		grid-template-columns: repeat(1, 1fr);
	}
}
.secS-card__item2 div{
	/*子要素のそれぞれのdivの高さを揃える記述*/
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
	/*ここまで*/

	padding: 10px;
	background-color:white;
	box-sizing: border-box;
}
.secS-card__item2 H4{
	padding: 5px 0;
	font-size: clamp(16px,1.5vw,20px);
	font-weight: bold;
	line-height: 1.3;
	text-align: center;
	font-weight:800;
    font-family: 'Noto Serif JP', serif !important;
}
.secS-card__item2 p{
	display: inline-block;
    font-size: 15px;
    line-height: 1.5;
}



/*======= Event 年中行事 ======*/

.secE {
	padding: var(--v-space) 0;
	background-color: #FFF;
	background-image: url(../img/bg_04.png);
	background-size:cover;
	background-position: bottom;
	position: relative; /* sectionの位置を相対的にする*/ 
	z-index: 1; /* 背景画像より上に表示 */ 


   background-color: rgba(255, 255, 255, 0.3) !important;
   background-blend-mode: overlay;

}

/*セクションの間イメージ画像*/
.sec-adimg{
	padding: 0;
}
.sec-adimg-container {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: 1fr;
	grid-column-gap: 0px;
	grid-row-gap: 0px;
}
.sec-adimg-container-item1 { grid-area: 1 / 1 / 2 / 2; }
.sec-adimg-container-item2 { grid-area: 1 / 2 / 2 / 3; }
.sec-adimg-container-item3 { grid-area: 1 / 3 / 2 / 4; }
.sec-adimg-container-item4 { grid-area: 1 / 4 / 2 / 5; }
.sec-adimg-container-item5 { grid-area: 1 / 5 / 2 / 6; }

/* SP: 上3枚＋下2枚（3枚2枚） */
@media (max-width:568px){
  .sec-adimg-container{
    display:flex;           /* ← GridからFlexへ */
    flex-wrap:wrap;
    gap:0;
  }
  /* PC用の grid-area を無効化（子要素が div 以外でも効くように） */
  .sec-adimg-container [class^="sec-adimg-container-item"]{
    grid-area:auto !important;
  }

  /* 1～3枚目は3等分（33.333%）→ 上段3枚 */
  .sec-adimg-container > *:nth-child(-n+3){ width:33.3333%; }

  /* 4～5枚目は2等分（50%）→ 下段2枚 */
  .sec-adimg-container > *:nth-child(n+4){ width:50%; }
}

/*カード*/
.secE-card__item{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap:10px;
}
@media only screen and (max-width: 968px) {
	.secE-card__item{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
}
@media only screen and (max-width: 568px) {
	.secE-card__item{
		display: grid;
		grid-template-columns: repeat(1, 1fr);
	}
}
.secE-card__item div{
	/*子要素のそれぞれのdivの高さを揃える記述*/
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
	/*ここまで*/

	padding: 10px;
	background-color:white;
	box-sizing: border-box;
}
.secE-card__item H4{
	padding: 5px 0;
	font-size: clamp(16px,1.5vw,20px);
	font-weight: bold;
	line-height: 1.3;
	text-align: center;

    font-family: 'Noto Serif JP', serif !important;
	font-weight:900 !important;
}
.secE-card__item p{
	display: inline-block;
    font-size: 15px;
    line-height: 1.5;
}

/*======= History 法蓮寺の歴史 ======*/

.secH {
	padding: var(--v-space) 0;
	background-color: #edf1f5;


}
.waku80{
	margin:0 auto;
	width:90%;
}

@media screen and (max-width: 568px) { 
	.waku80{
		margin:0 auto;
		width:initial;
	}
}
h3.title {
	text-align:center;
	margin-top:3em;
	font-size: clamp(25px, 3vw, 30px);
	min-height: 0vw;
	font-weight: 400;
	color: #444;
}

h3.title::after {
	margin:0 auto;
    display: block;
    content: '';
    width: 160px;
    height: 0px;
    margin-top: 0.6em;
    margin-bottom: 0.2rem;
    border-bottom: 3px double var(--accent-color1);
    font-weight: bold;
    font-size: 26px;
	margin-bottom:2em;
}

h3.title + p {
	margin-top: 0.5em;
	margin-bottom: 1em;
	color: var(--txt-color);
	font-family: "Montserrat", sans-serif;
	font-size: 15px;
}

@media screen and (max-width: 868px) {
	h3.title {
		text-align:center;
	}
	h3.title::after {
		margin-right:auto;
		margin-left:auto;
	}
	h3.title + p {
		text-align:center;
	}
}

h3.title{
    font-family: 'Noto Serif JP', serif !important;
	font-weight:900;
}
span.h3sm{
	font-size:15px;
}



/*======= FAQ ======*/
.faq_sec1 {
	padding: var(--v-space) 0;
	background-color: #FCF3E2;

	position: relative;
	/* sectionの位置を相対的にする*/
	z-index: 1;
	/* 背景画像より上に表示 */
}

.faq-item {
	display: grid;
	grid-template-columns: 1.5em 1fr;
	column-gap: 10px;
	row-gap: 5px;
}

.faq-label {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: bold;
	font-size: 110%;
	line-height: 1.5;
	border-radius: 3px;
	width: 1.5em;
	text-align: center;
	align-self: start;
	/* lavelを上揃えに */
}

.faq-label.q {
	background-color: var(--accent-color3);
}

.faq-label.a {
	background-color: var(--accent-color1);
}

.faq-question,
.faq-answer {
	margin: 0;
	line-height: 1.6;
	text-align: justify;

    font-family: 'Noto Serif JP', serif !important;
	font-weight:400;
}

.faq-question {
	font-weight:900;
}

hr.faqHr {
	height: 0px;
	border: 1px dashed var(--accent-color2);
	margin: 20px auto;
}
.contentsbgA {
    padding: 15px;
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, .1);
    margin-bottom: 20px;
}

/*======= 寺院案内ページ ======*/
/*寺院案内*/
.info_sec1{
	padding: var(--v-space) 0;
	background-color: #FFF;
	background-image: url(../img/bg_06.png);
	background-size:cover;
	background-position: top;

	position: relative; /* sectionの位置を相対的にする*/ 
	z-index: 1; /* 背景画像より上に表示 */ 
	
   background-color: rgba(255, 255, 255, 0.5) !important;
   background-blend-mode: overlay;
}

/* 年間行事専用テーブル */
.event-table .small-text {
	font-size: 0.9em;
}

/* PC用：tdは横並びのまま */
.event-table .info1,
.event-table .info-time,
.event-table .info2 {
	vertical-align: top;
}

/* スマホ・タブ表示 */
@media screen and (max-width: 768px) {
	/* tr間隔 */
	.event-table {
		border-collapse: separate; /* tr間隔のため */
		border-spacing: 0 10px; /* trの縦間隔 */
	}

	/* td表示調整 */
	.event-table td {
		display: block;
		width: 100%;
		padding: 4px 0;
	}

	.event-table .info1,
	.event-table .info-time {
		display: inline-block;
		width: auto;
		margin-right: 5px;
		border-bottom: none; /* スマホのみ下線削除 */
	}

	.event-table .info2 {
		display: block;
		width: 100%;
		margin-top: 2px;
		padding-bottom: 13px;
	}
}

/* 概要・アクセス部分のテーブル */
.info1 {
	font-weight: bold;
	border-bottom: 1px dashed var(--accent-color2);
	padding: 5px;
	width: 5.25em;

	font-family: 'Noto Serif JP', serif !important;
	font-weight: 900 !important;
}

.info-time {
	border-bottom: 1px dashed var(--accent-color2);
	padding: 5px;
	width: 6em;
	font-family: 'Noto Serif JP', serif !important;
	font-weight: 500 !important;
    text-align: left;
}

.info2 {
	border-bottom: 1px dashed var(--accent-color2);
	padding: 5px;
	width: 400px;
	font-family: 'Noto Serif JP', serif !important;
	font-weight: 400;
}

@media screen and (max-width: 568px) {
	.info1 {
		display: block;
		padding: 8px 2px 2px 2px;
		width: 100%;
		border-bottom: 1px solid rgba(255,255,255,0);
	}
	.info-time {
		display: block;
		padding: 2px 2px;
		width: 100%;
		text-align: left;
	}
	.info2 {
		display: block;
		padding: 2px;
		width: 99%;
	}
}

.info-sec1-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 5px 5px;
}

@media (min-width: 568px) {
	.info-sec1-container {
		grid-template-columns: repeat(6, 1fr);
	}
}

.small-text {
	font-size: 0.9em;
	font-weight: 400;
}

/*寺院概要*/
.bg_b{
	background: rgba(255, 255, 255, 0.8);
	padding:40px;
}
@media screen and (max-width: 568px) {
	.bg_b {
		padding: 20px;
	}
}

.access_sec1{
	padding: var(--v-space) 0;
	background-color: #FFF;
	
	position: relative; /* sectionの位置を相対的にする*/ 
	z-index: 1; /* 背景画像より上に表示 */ 
}


/*======= 調整 ======*/
.l-c {
    margin-right: auto;
    margin-left: auto;
}

.spot-heading01 {
    font-size: clamp(40px, 6vw, 60px);
    font-style: italic;
    text-align: center;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.spot-heading02 {
    font-size: clamp(22px, 2.7vw, 30px);
    line-height: 1em;
    font-weight: 700;
    text-align: center;
    font-family: 'YakuHanJPs', 'Noto Sans Japanese', sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "MS Pゴシック", "MS PGothic", Arial, Helvetica, Verdana;
}

/*その他*/
strong{
	font-weight:normal;
}




/* === 年中行事表　PC/共通（この表だけ）=== */
/* === PC/共通 ====================== */
table.schedule{ 
  display: table !important;
  width: 100%;
  border-collapse: collapse !important;
}
table.schedule tr{ display: table-row !important; }
table.schedule td{
  display: table-cell !important;
  padding: 8px 12px;
  vertical-align: top;
}
table.schedule tr + tr td{ border-top: 1px dashed #ddd; }

/* 日付・時間は改行させない（PCで縦割れ防止） */
table.schedule td:nth-child(1),
table.schedule td:nth-child(2){ white-space: nowrap; }

/* === スマホ：上段=日付/時間 横並び、下段=詳細 全幅 === */
@media (max-width: 568px){
  table.schedule tr{
    display: grid !important;
    grid-template-columns: 1fr 1fr; /* 左:日付 右:時間（両方1frなので左寄せされる） */
    grid-template-areas:
      "date time"
      "detail detail";
    padding: 8px 0;
  }
  table.schedule td{
    display: block !important;
    border: 0;
    padding: 4px 12px;
  }
  table.schedule td:nth-child(1){ grid-area: date; }
  table.schedule td:nth-child(2){ grid-area: time; }   /* ← text-align削除 */
  table.schedule td:nth-child(3){
    grid-area: detail;
    padding-top: 2px;
    white-space: normal;
  }
}