@charset "utf-8";

/* ---- common ----- */
#contents { padding:55px 0 70px; }
.bg_glay { background:#f6f6f6; }
.sec_box { margin-bottom:60px; }

/* title */
.pagettl { padding:3.5em 0 3em; background:#f0ece0 url(../img/common/ptn_asanoha.svg); }
.pagettl .conttl { margin-bottom:0; font-size:1.5em; }

.subttl { position:relative; margin-bottom:1em; padding-bottom:.5em; font-size:1.375em; font-weight:bold; line-height:1.5; border-bottom:1px solid #eee; }
.subttl:before { content:""; position:absolute; bottom:-1px; left:0; z-index:2;
 width:1em; height:2px; background:#a68554; }

.subttl2 { position:relative; margin:1.8em 0 .8em; padding-left:1.5em; font-size:1.1em; font-weight:bold; line-height:1.6; }
.subttl2:before { content:""; position:absolute; top:.7em; left:.3em; width:.5em; height:2px; background:#a68554; }
.subttl2:first-child { margin-top:0; }

/* pan */
.pan { overflow:hidden; border-bottom:1px solid #8d6c3a; background:#a68554; }
.pan li { position:relative; display:inline-block; color:#fff; font-size:.875em; }
.pan li a { display:block; color:#fff; }
.pan li a:hover { opacity:.7; }
.pan li a, .pan li:last-child { padding:.55em 1.3em .55em; }
  .pan li:before, .pan li:after{ content:""; position:absolute; right:-.6em; width:1px; height:100%; background:#8d6c3a; }
  .pan li:before { bottom:50%; transform:rotate(-28deg) translateY(-2px) translateX(-10px); }
  .pan li:after { top:50%; transform:rotate(28deg) translateY(2px) translateX(-10px); }

  .pan li:last-child:before, .pan li:last-child:after { display:none; }


/* form */
.submit { margin:30px 0; }
.btn_submit { display:inline-block; padding:.5em 2.6em .6em; color:#df4c34;
 font-size:1.125em; font-family:"tbcgothic-std",sans-serif;
 letter-spacing:.1em; border:2px solid #df4c34; background:#fff;
 -webkit-transition:all .5s; transition:all .5s;
 -webkit-appearance:none; }
.btn_submit:hover { color:#fff; background:#df4c34; }
input, textarea { font-family:inherit; font-weight:500; }

/* tabNav */
.tabNav { margin-bottom:60px; }
.tabNav li { width:33%; }
.tabNav .tabItem { display:block; height:100%; padding:.8em .5em; border-top:3px solid #5b8133; border-right:1px solid #dddddd; border-left:1px solid #dddddd; color:#000; text-align:center; cursor:pointer; background:#eeeeee; }
.tabNav .tabItem.active, .tabNav .active .tabItem  { background:#fff; }

/* ---- contents ----- */

/* 霊場紹介
================================================== */

/*　一覧　----------------　*/
.temple_list li { width:31%; margin-right:3.5%; margin-bottom:7.5%; }
.temple_list a { color:#333; }
.temple_list li figure { overflow:hidden; }
.temple_list li .name { font-size:1.125em; font-weight:bold; }
.temple_list li .name span.number { padding:.4em .6em .3em; border:1px solid #434343; font-size:0.7em; margin-right:.8em; }
.temple_list li .reserve_box { padding:.6em 1.2em .5em; border:1px solid #e5e5e5; background:#f6f6f6; }
.temple_list li .reserve_box .ico { font-size:.8em; }
.temple_list li .reserve_box dt { border-right:1px solid #e5e5e5; }
.temple_list li .reserve_box dt { margin-right:1em; padding-right:1em; }

/*　詳細　----------------　*/
.intro { position:relative; }
.ttl_reijo { margin-bottom:2em; }
.ttl_reijo .name { margin-left:.5em; font-size:1.75em; font-weight:bold; }
.ttl_reijo .name rp, .ttl_reijo span rt { font-weight:normal; }

/* 予約 */
.reserve_box dt { font-weight:bold; }
.reserve_box dd { -webkit-flex:1; flex:1; }
.reserve_box .ico { display:inline-block; padding:.2em .8em .1em; text-align:center; color:#fff; line-height:1.5; border-radius:1em; }
.reserve_box .ico + .ico { margin-left:.5em; }
.reserve_box .ico.res1 { background:#486a00; }
.reserve_box .ico.res2 { background:#c32626; }
.reserve_box .ico.res99 { background:#666; }

.intro .reserve_box { position:absolute; top:0; right:0; min-width:320px;
 padding:.6em 1.2em .5em; border:1px solid #e5e5e5; background:#f6f6f6; }
.intro .reserve_box .ico { font-size:.938em; }
.intro .reserve_box dt { border-right:1px solid #e5e5e5; }
.intro .reserve_box dt { margin-right:1em; padding-right:1em; }

.summary .reserve_box { margin-top:30px; padding:1em 1.5em; border:1px solid #dad7cb; background:#fff; }
.summary .reserve_box > * { padding:.5em 0; }

.summary .ico { font-size:1.125em; padding-top:.1em; }
.summary .txt { font-weight:bold; margin:.8em 0 0; font-size:.938em; }

/* スライド・御詠歌画像 */
.img_area { margin-bottom:45px; }
.img_area .eika { width:28%; max-width:250px; }
.img_area .main_img { width:68%; max-width:680px; }
.img_area .slick-slide img { max-height:415px; }


.slick-dots li { float:left; margin-right:.5em; line-height:0; }
.slick-dots button { position:relative; width:18px; padding:8px; font-size:0; text-indent:-9999px; cursor:pointer;border:none; background:none; }
.slick-dots button:focus { outline:none; }
.slick-dots button:before { position:absolute; top:0; right:0; bottom:0; left:0;  width:100%; height:4px; margin:auto 0;content:''; background:#1b1b1b; opacity:.3; }
.slick-active button:before { opacity:1; }

/* 画像一覧 */
.intro + .flex.inner { margin-top:-60px; }
.sub_img_list li { text-align:center; }
.sub_img_list li p { margin:0; font-size:.85em; }

/* お知らせ */
.news { padding:1.5em 1em; }
.news .subttl { border-bottom:none; }
.news .news_txt { height:180px; padding:1.2em; background:#fff;
 overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
.news .news_txt p { margin-top:0; }

/* 見どころ */
.highlight .img.flex { margin-top:1.5em; }

/* 年間行事 */
.event_list li { padding:.6em 1.5em; line-height:1.5; }
.event_list li:nth-child(odd) { background:#f6f6f6; }
.event_list .date { display:block; width:7.7em; margin-right:1.5em; font-weight:bold; }
.event_list .name { display:block; flex:1; -webkit-flex:1; }

.month_box { margin-top:40px; padding-top:30px; border-top:1px solid #eee; }

/* 御朱印 */
.shuin { padding:40px 0; background:#f2eee9; }
.ttl_shuin { margin-bottom:.8em; text-align:center; font-size:1.375em; font-weight:bold; }
.ttl_shuin span { position:relative; padding:0 1.2em; }
.ttl_shuin span:before, .ttl_shuin span:after { content:""; position:absolute; top:0; bottom:0;
 width:8px; height:8px; margin:auto 0; border-radius:50%; background:#cb3e3e; }
.ttl_shuin span:before { left:0; }
.ttl_shuin span:after { right:0; }

.shuin_list li { width:20%; padding:0 .8em; text-align:center; }
.shuin_list li figcaption { line-height:1.6; margin-top:.3em; }

/* 概要 */
.summary { background:#f6f6f6; }
.summary .temple_name { margin-bottom:1.4em; text-align:center; font-weight:bold; }
.summary .temple_name .number { display:block; }
.summary .temple_name .name { padding-left:.5em; font-size:1.5em; }
.summary_detail { padding:50px 0; }
.tbl { width:100%; border-top:1px solid #dad7cb;  }
.tbl tr > * { padding:1em 0; border-bottom:1px solid #dad7cb; }
.tbl th { width:10em; text-align:left; padding-left:1.5em; padding-right:1.5em; vertical-align:baseline; }
.hp_link { position:relative; display:inline-block; padding-right:1.5em; }
.hp_link:after { content:""; position:absolute; top:.4em; right:0; width:.85em; height:.85em; background:url(../img/common/ico_open.svg) no-repeat center / 100%; }

.acc_list > * { width:50%; }
.acc_list dt { position:relative; margin-bottom:.5em; padding-top:.1em; padding-left:2.2em; font-weight:bold; }
.acc_list dt:before { content:""; position:absolute; top:0; left:0; bottom:0;
 width:1.4em; height:1.4em; margin:auto 0; background:no-repeat center / 100%; }

.acc_list .train dt:before  { background-image:url(../img/common/ico_train.svg); }
.acc_list .car dt:before  { background-image:url(../img/common/ico_car.svg); }

/* 誘導ボタン */
.reijo_nav  { margin-bottom:70px; }
.reijo_nav li { width:32% }
.reijo_nav li a { display:block; }

/* 二十五霊場について
================================================== */
.inner_box01 > p { width:65%; }
.inner_box01 > figure { width:32%; }
#outline .award { padding:30px; }
#outline .award > div p { width:65%; }
#outline .award > div figure { width:32%; }
#outline .award h4.summaryttl { font-size:1.125em; font-weight:bold; }
#outline .contact { margin-top:40px; }

/* お参りのマナー
================================================== */
#manner .step02,#manner .step03 { margin-top:40px; }
#manner .inner_box01 > p { margin:0; }

#manner .step01 .lead_box { width:65%; }
#manner .step01 .lead_box figure { width:32%; }
#manner .step01 .lead_box > p { margin:0; }

#manner .step01 .lead_box h4 { margin:0 0 20px; border-bottom:1px solid #a68554; font-size:1.125em; font-weight:bold; }
#manner .flow { padding:20px; margin:20px auto 0; }
#manner .flow ul { width:68%; padding:0 0 0 20px; }
#manner .flow ul li { list-style-type:decimal; }

figcaption { text-align:center; font-size:.85em; }

/* 旅行会社・表装業者のご紹介
================================================== */
#contractor .inner_box { margin-bottom:40px; }
#contractor .access .tbl th { width:5em; }
.tabNav_inner .ttl { margin-bottom:1.5em; font-size:1.6em; font-weight:bold; text-align:center; }

.access { padding:2.5%; margin-top:40px; }
.access .txt_box { width:48%; }
.access .txt_box em { font-size:1.375em; }
.access .txt_box .tbl { margin-top:15px; }
.access iframe { width:48%; }

.greeting p span { display:block; text-align:right; }
.bskanko .greeting p { width:65%; }
.bskanko .greeting .image { width:32%; }

.yaguchi figcaption { text-align: start;}
.yaguchi .greeting .flex_left { width: 55%;}
.yaguchi .greeting .flex_left figure { align-items: end;}
.yaguchi .greeting .flex_right {flex: 1; text-align: end;}
.yaguchi .greeting figure img { max-width: 45%;}

.yaguchi .kachogara figure { flex-direction: row-reverse; align-items: end; gap: 1em;}
.kachogara ul { flex: 1;}
.kachogara ul li { width: 48%;text-align: center;}

.yaguchi .access .tbl th[colspan*="2"] { padding-bottom: unset; border-bottom: unset;}
.yaguchi .access .tbl td[colspan*="2"] { padding-top: unset; padding-left: 1.5em;}



/* 霊場巡りモデルコース
================================================== */
#course .course_box + .course_box { margin-top:-60px; }
#course { counter-reset:cnt; }
#course .course_box .subttl { padding-left:2em; }
#course .course_box .subttl::after { counter-increment:cnt; content:counter(cnt); display:inline-block; position:absolute; top:0; left:0; padding:.3em .6em; font-size:.7em; border:1px solid #434343; }

#course .root_box { display:flex; display:-webkit-flex; -webkit-flex-direction:column; flex-direction:column; width:32.5%; padding:.5em 1.2em 1.2em; background:#f5f5f5; }
#course .root_day { padding-top:.8em; font-size:1.1em; text-align:center; position:relative; }
#course .root_list { -webkit-flex-direction:column; flex-direction:column; height:100%; margin-top:1em; position:relative; }
#course .root_list::before { content:""; display:block; position:absolute; top:0; bottom:0; left:50%; border-left:1px solid #666; }
#course .root_list li { width:100%; padding:2% 0; text-align:center; position:relative; }
#course .root_list li + li { margin-top:2em; }
#course .root_list li.start, #course .root_list li.goal { background:#ddd; }
#course .root_list li.area { padding:.6em 0 .5em; background-color:#a68554; }
#course .root_list li.temple { display:flex; display:-webkit-flex; padding:0; line-height:1.6; }
#course .root_list li.temple a { width:100%; display:block; padding:1em 32% 1em 2%; color:#fff; background-color:#5b8133; position:relative; }
#course .root_list li.temple a .image { content:""; display:block; width:30%; position:absolute; top:0; bottom:0; right:0; background:no-repeat 50% 50%; background-size:cover; }
#course .root_list li.temple a:hover { background:#b28747; }
#course .root_list li.hotel { background:#fff; }

.course_box { margin-top:-120px; padding-top:120px; }



/* 法然上人の一生で見る
================================================== */
.chronology { border-left:1px solid #666; }
.chronology dt { position:relative; width:10.5em; padding:.8em .8em .8em 1.8em; font-size:1.25em; }
.chronology dt:before { content:""; position:absolute; top:1.4em; left:-5px; width:9px; height:9px; border-radius:50%; background:#666; }
.chronology dt:after { content:""; position:absolute; top:1.6em; left:.8em; width:.6em; height:1px; background:#888; }
.chronology dd { -webkit-flex:1; flex:1; padding:1.3em 0 1.3em 1em; }
.chronology .item:first-of-type dd { margin-top:-1.8em; }
.chronology .item:first-of-type dt { margin-top:-1.5em; }
.chronology .item:nth-of-type(even) { background:#f5f5f5; }
.chronology dd p.txt { margin:0; width:60%; }

.chronology .list { margin-top:.8em; }
.chronology .list li.temple { display:flex; display:-webkit-flex; width:48%; max-width:280px; margin-right:2%; }
.chronology .list li.temple a { width:100%; display:block; padding:.6em 30% .6em 5%; color:#fff; line-height:1.5; background-color:#5b8133; position:relative; }
.chronology .list li.temple a .image { content:""; display:block; width:25%; position:absolute; top:0; bottom:0; right:0; background:no-repeat 50% 50%; background-size:cover; }


@media screen and (min-width:960px) {

  #course .root_box:not(:last-child) { margin-right:1%; }
  .acc_list.col1 > * { width:100%; }
  .acc_list .acc_group:nth-child(odd) { padding-right:1.8em; }
  .acc_list .acc_group:nth-child(even) { padding-left:1.8em; border-left:1px solid  #dad7cb; }

  .summary .reserve_box dt { margin-right:1.5em; padding-right:2em; padding-left:1em; font-size:1.125em; font-weight:bold; border-right:1px solid #dad7cb; }

}

@media screen and (min-width:600px) {
  .temple_list li:nth-child(3n) { margin-right:0; }
  .reijo_nav li:not(:last-child) { margin-right:1%; }

  /* 画像一覧 */
  .intro + .flex.inner > div { width:64%; }

  .sub_img_list { width:32%; margin-top:1.3em; }
  .sub_img_list li { width:100%; }
  .sub_img_list li + li { margin-top:1em; }
}

/* ================================================================
  タブレット
=================================================================== */
@media screen and (max-width:959px) {

  .dropdown { z-index:1; cursor:pointer; }
  .dropdown:after { content:""; position:absolute; top:1em; right:.5em; z-index:-1; width:.3em; height:.3em;
    -webkit-transform:rotate(45deg); transform:rotate(45deg);
    border-right:1px solid #666; border-bottom:1px solid #666;
    -webkit-transition:all .3s ease-out; transition:all .3s ease-out; }
  .dropdown.active:after { -webkit-transform:rotate(225deg) translateY(-.2em) translateX(-.15em);
    transform:rotate(225deg) translateY(-.2em) translateX(-.15em); }

	/* 霊場紹介
  ================================================== */

  /*　一覧　----------------　*/
	.temple_list li .reserve_box dt { margin-right:.5em; padding-right:.5em; }
	.reserve_box .ico { padding:.2em .5em; }
  .temple_list li .reserve_box { padding-left:1em; padding-right:1em; }

  /* 詳細　----------------　*/
  .intro .reserve_box { min-width:0; }

  .acc_list > * { width:100%; }
  .acc_list .acc_group:nth-child(odd) { margin-bottom:1.5em; padding-bottom:.5em; border-bottom:1px solid  #dad7cb; }

  .summary .reserve_box { -webkit-flex-direction:column; flex-direction:column; }
  .summary .reserve_box dt { margin-bottom:.5rem; font-size:1.1em; border-bottom:1px solid #dad7cb; }


	/* 霊場巡りモデルコース
  ================================================== */
	#course .root_box { width:100%; padding-bottom:.6em; }
  #course .root_box:first-child { padding-top:1.2em; }
  #course .root_box:last-child  { padding-bottom:1.2em; }
  #course .root_day.dropdown { padding:.5em 0; background:#fff; border:1px solid #ddd; }
  #course .root_day.dropdown.active { border:none; }
  #course .root_day.dropdown::after { top:0; right: 1em; bottom:0; margin:auto 0; }


/* 旅行会社・表装業者のご紹介
================================================== */
.yaguchi .greeting .greeting_box { justify-content: center; row-gap: 1.5em;}
.yaguchi .greeting .flex_left { width: 100%;}
.yaguchi .greeting .flex_left figure { justify-content: center;}
.yaguchi .greeting .flex_left figure img { max-width: 70%;}
.yaguchi .greeting .flex_right {flex: unset; width: 50%; text-align: center;}

.yaguchi .kachogara figure { flex-direction: column; align-items: center;}

}

@media screen and (max-width:700px) {
  .img_area .slick-slide img { max-height:312px; }

  .ttl_reijo { margin-bottom:.5em; }
  .intro .reserve_box { position:static; margin-bottom:2em; }

}

/* ============================================================================
  スマホ
============================================================================ */
@media screen and (max-width:599px) {

  /* ------ common ------ */
  .tabNav { margin-bottom:30px; }


	/* 霊場紹介
  ================================================== */

	/*　一覧　----------------　*/
	.temple_list li { width:48%; margin-right:0; }
  .temple_list li:nth-child(odd) { margin-right:4%; }
  .temple_list li .reserve_box { padding:.4em .6em .3em; font-size:.9em; }
	.reserve_box .ico + .ico { margin-left:.3em; }

  /* 詳細　*/
  .img_area .slick-slide img { max-height:180px; }

  .sub_img_list  { display:-webkit-flex; display:flex; margin:-30px 0 20px; }
  .sub_img_list li { width:48%; margin-bottom:1em; }

  .news .subttl { width:100%; margin-bottom:1em; padding-top:0; }
  .news .subttl br { display:none; }
  .news .news_txt { width:100%; }

  .tbl th { width:7em; padding-left:1em; padding-right:1em; }

  .reijo_nav li { width:100%; margin-bottom:5px; }





  /* マナー
  ================================================== */
	#manner .step01 .lead_box { width:100%; }
	#manner .flow ul { width:100%; }
	#manner .step01 .lead_box figure { width:100%; margin-top:1em; }
	#manner .step01 .lead_box figure img { width:100%; }

	.inner_box01 > figure,.inner_box01 > p { width:100%; }
	.inner_box01 > figure { margin-top:1em; }
	#outline .award > div figure,#outline .award > div p { width:100%; }

	.bskanko .greeting p,.bskanko .greeting .image { width:100%; }
	.bskanko .greeting .image { text-align:center; }
	.bskanko .greeting .image figure { width:48%; }
	.bskanko .button { width:100%; }



	.chronology dt { width:100%; padding-bottom:0; }
	.chronology dd { padding:.5em 0 1.3em 2.2em; }
	.chronology .item:first-of-type dd { margin-top:0; }
  #history li.temple { width:100%; margin-right:0; }
  #history li.temple + li { margin-top:.5em; }

/* 旅行会社・表装業者のご紹介
================================================== */
.yaguchi .greeting .flex_left figure { justify-content: center;}
.yaguchi .greeting .flex_left figure img { max-width: 100%;}

.kachogara ul {flex-direction: column; gap: 1.5em;}
.kachogara ul li { width: 100%;text-align: center;}
.yaguchi .greeting p { width:100%; }
.access .txt_box,.access iframe { width:100%; }
}

@media screen and (max-width:480px) {
  .img_area .slick-slide img { max-height:160px; }

}