@charset "utf-8";

/*====================================================================================================
  WHOLE
====================================================================================================*/
@media only screen and (max-width: 820px) {
    html { font-size: 16px;}
    .pc { display: none!important;}
    .tb { display: block;}
    .sm { display: none;}
    :root { --content-margin: 60px;}

}
@media only screen and (max-width: 468px) {
    #main_content { margin: 0 auto;}

    .pc { display: none!important;}
    .tb { display: none;}
    .sm { display: block;}
}

/*====================================================================================================
  #BASE & #HEADER
====================================================================================================*/
@media screen and (max-width: 1024px) {
  
  html body #base { 
    padding-top: 0; /* メイン画像をヘッダーの下へ */
  }
  
  html body #header { 
    top: 5px; 
    position: fixed; 
    background-color: transparent;
    box-shadow: none;
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    height: 70px; 
    padding-inline: 4%; 
  }
  #header .h_nav { display: none; }
  #header .logo_wrap,
  #header:has(.h_nav.is-scrolled) .logo_wrap {
    position: static !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
  }
  #header .logo,
  #header:has(.h_nav.is-scrolled) .logo_wrap .logo {
    position: static !important;       /* PC用の絶対配置(absolute)を強制リセット */
    width: auto !important;            /* 固定幅(clamp)を強制解除 */
    height: auto !important;           /* アスペクト比を強制解除 */
    background-image: none !important; /* 斜めのロゴ背景を完全に消去 */
    clip-path: none;
    background-color: rgba(255, 255, 255, 0.85) !important; 
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important; /* iOS用 */
    
    border-radius: 12px !important;
    padding: 10px 14px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    margin-top: 0 !important;
    pointer-events: auto !important;
  }

  #header .logo a {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
  }
  #header .logo img,
  #header:has(.h_nav.is-scrolled) .logo_wrap .logo img { 
    width: 75px !important; 
    height: auto !important; 
  }
  #header .logo_type,
  #header:has(.h_nav.is-scrolled) .logo_wrap .logo_type {
    font-size: 14px !important;
    line-height: 1.3 !important;
  }

  /* --------------------------------------------------------------------------
      .openbtn（ハンバーガーボタン）
  -------------------------------------------------------------------------- */
  #header .openbtn {
    display: flex;
    position: static; 
    cursor: pointer;
    width: 52px; 
    height: 52px; 
    background: #fff; 
    border: none;
    border-radius: 12px; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 9999;
	  margin-left: auto;
    pointer-events: auto;
  }

  .openbtn-area {
    position: relative;
    width: 26px; 
    height: 20px; 
    margin: auto;
  }

  .openbtn span {
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 0;
    height: 3px;
    border-radius: 2px;
    background-color: var(--color-heading);
    width: 26px;
  }

  .openbtn span:nth-of-type(1) { top: 0; }
  .openbtn span:nth-of-type(2) { top: 8px; }
  .openbtn span:nth-of-type(3) { top: 16px; }

  .openbtn.active span:nth-of-type(1) {
    top: 8px;
    left: 2px;
    transform: rotate(-45deg);
    width: 22px;
  }
  .openbtn.active span:nth-of-type(2) { opacity: 0; }
  .openbtn.active span:nth-of-type(3) {
    top: 8px;
    left: 2px;
    transform: rotate(45deg);
    width: 22px;
  }

/* --------------------------------------------------------------------------
      #h_nav_sm（リンク範囲修正＆白い角丸15px版）
  -------------------------------------------------------------------------- */
  #h_nav_sm {
    display: flex !important; 
    position: fixed !important;
    z-index: 9998 !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--color-primary) !important;
    background-image: url(../../image/top/bg-effect.png) !important;
    background-blend-mode: multiply !important;
    background-repeat: repeat !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    justify-content: center;
    align-items: flex-start;
  }

  #h_nav_sm.panelactive {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    padding-top: 80px !important;
  }

  #h_nav_sm ul {
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    width: 100%;
  }
  
  #h_nav_sm ul li {
    margin-bottom: 1.2rem !important; 
    padding: 0 !important;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    width: 80% !important;
    margin-inline: auto !important;
  }
  
  #h_nav_sm.panelactive ul li {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
  #h_nav_sm.panelactive ul li:nth-child(1) { transition-delay: 0.1s; }
  #h_nav_sm.panelactive ul li:nth-child(2) { transition-delay: 0.2s; }
  #h_nav_sm.panelactive ul li:nth-child(3) { transition-delay: 0.3s; }
  #h_nav_sm.panelactive ul li:nth-child(4) { transition-delay: 0.4s; }
  
  #h_nav_sm ul li a {
    color: #333 !important;
    text-decoration: none !important;
    font-size: 1.3rem !important; 
    font-weight: 700 !important;
    display: block !important;
    padding: 8px 20px !important; 
    width: 100% !important;
    box-sizing: border-box !important;
    background-color: #FAF8D7!important;
    border-radius: 15px !important;
    border: 1px solid var(--color-heading);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
  }
  #h_nav_sm ul li a:hover {
    color: var(--color-heading) !important;
  }

  /* メニュー展開時のロゴ最前面 */
  #header:has(.openbtn.active) .logo {
    position: relative; 
    z-index: 9999;      
  }
  html body #header:has(.openbtn.active) {
    z-index: 9999 !important;
  }
  #h_nav_sm.panelactive {
    pointer-events: auto !important;
  }
}

/*====================================================================================================
  #TOPPAGE
====================================================================================================*/
/*---------------------------------------------------------------------------
  .mainimg
---------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  /* ▼ セレクタを top.css と合わせて優先順位を勝ち取ります ▼ */
  #toppage ul.slide img {
    height: 400px;
  }
  #subpage .mainimg img {
    height: 250px;
  }
}
@media screen and (max-width: 468px) {
  .mainimg .slick-dots {
    display: none !important; /* ドットを非表示 */
  }
}


/*====================================================================================================
  CONTENT
====================================================================================================*/


/*---------------------------------------------------------------------------
  .info_wrap
---------------------------------------------------------------------------*/
@media only screen and (max-width: 820px) {
  #toppage .info_inner,
  #toppage .info_inner:nth-of-type(2) { 
    flex-direction: column;
  }
  #toppage .info_come,
  #toppage .info_img {
    width: 100%;
  }
  #toppage .info_img {
    justify-content: center;
  }
  #toppage .info_img_l,
  #toppage .info_img_r {
    max-width: 300px; 
  }
}

/* --------------------------------------------------------------------------
  .news_erea（index.html,news.html共通） 
-------------------------------------------------------------------------- */
@media only screen and (max-width: 1024px) {
  /* カテゴリータブ */
  #main_content .news_area_tab {
    grid-template-columns: repeat(4, auto);
    grid-template-rows: repeat(2, auto);
    gap: 16px;
    justify-content: center;
  }
}

@media only screen and (max-width: 610px) {
  /* カテゴリータブ */
  #main_content .news_area_tab {
    grid-template-columns: repeat(3, auto);
    grid-template-rows: repeat(3, auto);
    gap: 16px;
    justify-content: center;
  }
}
@media only screen and (max-width: 480px) {
  /* カテゴリータブ */
  #main_content .news_area_tab label {
    padding: 0.5rem 1.5rem;
  }
}


/*---------------------------------------------------------------------------
  .card_wrap
---------------------------------------------------------------------------*/
@media only screen and (max-width: 1280px) {
  .card_wrap {
    padding-inline: 2%;
  }
}
@media only screen and (max-width: 820px) {
  #toppage .card_wrap {
    flex-direction: column;
  }
  #toppage .card_inner {
    width: 100%;
    min-width: 200px;
    max-width: 600px;
    margin-inline: auto;
  }
}

/*---------------------------------------------------------------------------
  .area_link
---------------------------------------------------------------------------*/
@media only screen and (max-width: 768px) {
  #toppage .area_link{ flex-direction: column;}
}

/*---------------------------------------------------------------------------
  .sns_access
---------------------------------------------------------------------------*/
@media only screen and (max-width: 1024px) {
  #toppage .sns_access {
    grid-template-columns: 1fr;
  }
  #toppage .fb,
  #toppage .access {
    width: 100%;
    max-width: 90%;
    margin-inline: auto;
  }
  #toppage .fb iframe {
    width: 100%;
    max-width: 450px;
    display: block;
    margin-inline: auto;
  }
  #toppage .access iframe {
    width: 100%;
    height: 450px; 
  }
}

/*====================================================================================================
  #SUBPAGE
====================================================================================================*/


/*====================================================================================================
  KAERU
====================================================================================================*/

@media only screen and (max-width: 820px) {

	/* MIDASHI */
	#subpage h3 { margin:0 2% 80px;}
	#subpage h4.mid {
    margin:0 2% 20px;
  }
	#subpage h4 { margin:0 2% 20px;}
	#subpage .inline_cirlce { margin-inline:2%; font-size:18px;}

	/* COMMON */
	#subpage .comment1 { margin:0 2.5% 20px;}
	#subpage :is(.comment2, .comment3, .comment4) { margin:0 2.5% 20px; padding:5%;}

	/* HYOU */
	#subpage table.hyou { margin:0 auto; width:85%; table-layout:auto;}
	#subpage table.hyou th,
	#subpage table.hyou td{
		table-layout:auto !important;
		display:block !important;
		padding:2% 5%!important;
		width:100% !important;
		height:auto !important;
		font-size:1rem;
	}
	#subpage table.hyou td {
	border-bottom: 1px solid #CCC!important;
	}
	#subpage table.pc_tit { display:none;}
	#subpage table.hyou .sm_mid {
    display:block;
  	color:var(--color-brown);
    font-weight:700;

  }

	/* 2RETU */
	#subpage table.hyou2 td table {}
	#subpage table.hyou2 td table th,
	#subpage table.hyou2 td table td {
		display:table-cell !important;
		padding:5% !important;
		width:auto !important;
		height:auto !important;
	}

	/* 3RETU */
	#subpage table.hyou3 { border-top:1px solid #DDD;}
	#subpage table.hyou3+table.hyou3 { border-top:1px solid #DDD;}

	/* 4RETU */
	#subpage table.hyou4 {border-top:1px solid #DDD;}
	#subpage table.hyou4+table.hyou4 { border-top:1px solid #DDD;}

	/* 5RETU */
	#subpage table.hyou5 { border-top:1px solid #DDD;}
	#subpage table.hyou5+table.hyou5 { border-top:1px solid #DDD;}

	/* FREE */
	#subpage .pc_table { display:none;}
	#subpage .sm_table { display:block;}
	#subpage .sm_table table td { padding:5% !important;}
		
	/* FREE2 */
	#subpage table.free { margin:20px 2% 0; border-top:1px solid #DDD !important; border-bottom:1px solid #DDD !important;}
	#subpage table.free td {
		table-layout:auto !important;
		display:block !important;
		padding:5% !important;
		width:90% !important;
		height:auto !important;
		border-bottom:none;
	}
	#subpage table.free td:last-child {border-bottom:none;}
	#subpage table.free td div.sm {display:block !important; text-align:center; border-bottom:none !important /*1px solid #1F266C*/;}
	#subpage table.free tr:nth-child(1) td:nth-child(1),
	#subpage table.free tr:nth-child(1) td:nth-child(3) {border-bottom:1px dotted #DDD !important;}

	/* FIX */
	#subpage .fix_table {font-size:1vw;}
	#subpage .fix_table table { padding: 0;}
	#subpage .fix_table table th,
	#subpage .fix_table table td { padding:2%;}

	/* LIST */
	#subpage ul.list-ul { margin:0 2%;}

	/* LINK */
	#subpage .link2,
	#subpage .link3,
	#subpage .link4 {width:auto; float:none; clear:both;}
	#subpage .file2,
	#subpage .file3,
	#subpage .file4 {width:auto; float:none; clear:both;}
	#subpage .pdf { margin-inline:2%;}

	/* EMBEDDED */
	#subpage .embedded { margin: 0 auto; width: 90%; }
	#subpage .embedded iframe { width: 100%; height: 300px;}

	/* PHOTO BOX */
	#subpage ul.photo_box { clear:none !important; float:none !important; margin:5% 2%; width:96% !important;}
	#subpage ul.g1 li,
	#subpage ul.g2 li,
	#subpage ul.g3 li,
	#subpage ul.g4 li,
	#subpage ul.g5 li{ margin:15px 0; width:100%;}
	#subpage ul.g1 li.photo img,
	#subpage ul.g2 li.photo img,
	#subpage ul.g3 li.photo img,
	#subpage ul.g4 li.photo img,
	#subpage ul.g5 li.photo img { max-width:100% !important; height:auto !important;}
		

	/* YOUTUBE */
	#subpage .youtube {position: relative; width: 100%;}
	#subpage .youtube iframe { width: 100% !important;  height: 100% !important;}

	/* BOX */
	#subpage .temple-box { margin:0 2%; width:96%;}
	#subpage .temple-box:after { display:none;}
	#subpage .box1,
	#subpage .box2 { float:none;margin: 0 2% 20px; width:96%;}
	#subpage .box1:after,
	#subpage .box2:after { display:none;}
	#subpage .box1 .catch { margin:0 0 20px !important;}
	#subpage .box1 h4,
	#subpage .box2 h4 { margin:10px 0; }
	#subpage .photo-c { float:none; padding:0; width:100%;}
	#subpage .photo-c img { max-width:100%!important; height:auto !important; margin:0;}
	#subpage .photo-l,
	#subpage .photo-r { float:none; padding:0; width:100%; text-align:center;}
	#subpage .photo-l img,
	#subpage .photo-r img { max-width:100%!important; height:auto !important; margin:0;}

	/* LINE */
	#subpage .line {
		margin:0 2% 20px;
		height:50px;
		background-size:100% auto;
	}

	/* BUTTON */
	#subpage .btn { float:none; margin:1% 5%;}
	#subpage .b1,
	#subpage .b2,
	#subpage .b3 { width:fit-content; margin-inline:auto; min-width: 55%;}

	/* COLUMNBOX */
	#subpage .column {}
	#subpage .column:after { display:none;}
	#subpage .column .col2 { float:none; margin: 2%; width: 96%;}
	#subpage .column .col3 { float:none; margin: 2%; width: 96%;}
	#subpage .column .col4 { float:none; margin: 2%; width: 96%;}
	#subpage .column .col5 { float:none; margin: 2%; width: 96%;}

	/* FLOW */
	#subpage ul.flow_box { width: 100%;}
	#subpage ul.flow_box:after { display:none;}
	#subpage ul.flow_box li { float:none; width:96% !important;}
	#subpage ul.flow_box li a:hover {}
	#subpage .flow1+.flow1 { margin-top:30px;}
	#subpage .flow1+.flow1:before { top:-30px;}
	#subpage ul.flow_box li+li { margin-top:30px;}
	#subpage ul.flow_box li+li:before {
		position:absolute;
		top:-30px;
		left:0;
		display:block;
		clear:both;
		content:"";
		width:100%;
		height:30px;
		background:url(../image/flow_bg_sm.png) no-repeat center center;
	}
	#subpage .flow1a+.flow1a {margin-top:30px;}
	#subpage .flow1a+.flow1a:before { top:-30px; width:100%;}
	#subpage .flow1a li+li { margin-top:5px !important; padding: 0 !important;}


}

/*====================================================================================================
  #FOOTER
====================================================================================================*/
@media only screen and (max-width: 820px) {
  #footer .footer_inner_l {
  margin-inline: auto;
  }
  #footer .footer_inner_r {
  display: none;
  }
}

/* --------------------------------------------------------------------------
  #PAGETOP
-------------------------------------------------------------------------- */
@media only screen and (max-width: 540px) {
  #page-top {
    right: 15px;
  }
  #page-top a {
    width: 60px;
    height: 60px;
  }
   #page-top a:after {
    width: 24px;
    height: auto;
   }
}