@charset "utf-8";

/*====================================================================================================
  WHOLE
====================================================================================================*/
@media only screen and (min-width: 1200px) {
    a[href*="tel:"] {
        pointer-events: none;
        cursor: default;
        text-decoration: none;
	}
}
@media only screen and (max-width: 820px) {
	.pc { display: none!important;}
	.sm { display: block!important;}
}


/*====================================================================================================
  BASE
====================================================================================================*/

/*====================================================================================================
  MAIN
====================================================================================================*/
@media only screen and (max-width: 1200px) {
	#main { padding-inline: 10px;}
}

/*====================================================================================================
  HEADER
====================================================================================================*/
@media only screen and (max-width: 1200px) {
	:root { --h-height: 70px;}
	#header .h_nav { display: none!important;}
	#header .h_wrap2 { display: none!important;}
	#header .contact { display: none!important;}
	#header .h_box1 { height: var(--h-height); }
	#header h1,
	#header h1 a {
		width: 360px;
		margin-left: 5px;
		background-size: 360px auto;
	}

/*========= CSS for NAVIGATION ===============*/
	#header .openbtn { display: block!important; top: 0; position: fixed;}
	#header #h_nav_sm{
		display: block;
		position:fixed;
		z-index: 999;
		top: -100%;
		left:0;
		width:100%;
		height: 100dvh;
		background:	var(--primary-color);
		transition: all 0.6s;
	}
	#header #h_nav_sm.panelactive{
		top: 0;
	}

/*NAVIGATION*/
	#header #h_nav_sm ul {
		display: flex;
		flex-direction: column;
		line-height: 3.5rem;
		width: 90%;
		position: absolute;
		z-index: 999;
		left: 50%;
		transform: translate(-50%,-50%);
		top: 27%;
	}
	#header #h_nav_sm li{
		list-style: none;
		text-align: center;
		border-bottom: solid 1px #fff;
	}
	#header #h_nav_sm li a{
		color: #fff;
		text-decoration: none;
		padding: 0;
		display: block;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		font-size: 1.125rem;
	}
	#header ul li:last-child a { width: 100%; background: inherit;}

/*========= CSS for BUTTON ===============*/
	#header .openbtn{
		position:fixed;
		z-index: 9999;
		right: 0;
		cursor: pointer;
		width: 70px;
		height: var(--h-height);
		background: var(--primary-color);
	}	
	#header .openbtn span{
		display: inline-block;
		transition: all .4s;
		position: absolute;
		left: 14px;
		height: 2px;
		background-color: #fff;
		width: 35px;
	}
	#header .openbtn span:nth-of-type(1) { top:25px; left: 17px;}
	#header .openbtn span:nth-of-type(2) { top:35px; left: 17px;}
	#header .openbtn span:nth-of-type(3) { top:45px; left: 17px;}
	#header .openbtn.active span:nth-of-type(1) { top: 25px; left: 18px; transform: translateY(7px) rotate(-35deg); width: 45%;}
	#header .openbtn.active span:nth-of-type(2) { opacity: 0;}
	#header .openbtn.active span:nth-of-type(3){ top: 37px; left: 18px; transform: translateY(-5px) rotate(35deg); width: 45%;}

}
@media only screen and (max-width: 420px) {
	#header h1,
	#header h1 a {
		width: 280px;
		margin-left: 5px;
		background-size: 280px auto;
	}
}
@media only screen and (max-width: 375px) {
	#header #h_nav_sm ul { top: 40%;}
}



/*====================================================================================================
  TOPPAGE
====================================================================================================*/
@media only screen and (max-width: 1200px) {
	#toppage  .mainimg { top: 70px;}
}
@media only screen and (max-width: 1024px) {
	#toppage .news_list { flex-direction: column; gap: 0.5rem;}
	#toppage .news_box dl dd { padding-left: 0; width: 100%;}
	#toppage .news_box { min-height: calc(1.5em * 15);}
}

/*====================================================================================================
  SUBPAGE
====================================================================================================*/
@media only screen and (max-width: 1200px) {
	#subpage #main { padding: 70px 10px 80px;}
	#subpage h2 { height: 70px; line-height: 70px;}
}
/*====================================================================================================
  FOOTER
====================================================================================================*/
@media only screen and (max-width: 820px) {
	#footer .f_wrap {
		flex-direction: column-reverse;
		gap: 1rem;
	}
	#footer .f_nav ul{
		gap: 1rem;
		justify-content: start;
	}
}

@media only screen and (max-width: 468px) {
	#footer .f_nav ul{
		flex-direction: column;
		gap: 0.625rem;
	}
}

@media only screen and (max-width: 468px) {
	#toppage .news_box dl dd { width: 100%;}
}

/*====================================================================================================
  COPYLIGHT
====================================================================================================*/
@media only screen and (max-width: 390px) {
	#footer .copy { font-size: 0.9rem;}
}

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

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

	/* MIDASHI */
	#subpage h3 { margin:0 2% 80px; font-size:24px;}
	#subpage h4.mid { margin:0 2% 20px; font-size:19.5px;}
	#subpage h4 { margin:0 2% 20px; font-size:18px;}
	#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 2%; width:96%; table-layout:auto;}
	#subpage table.hyou th,
	#subpage table.hyou td{
		table-layout:auto !important;
		display:block !important;
		padding:5% !important;
		width:90% !important;
		height:auto !important;
	}
	#subpage table.pc_tit { display:none;}
	#subpage table.hyou .sm_mid { display:block;}

	/* 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 {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 auto 20px; width:70%;}
	#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;}
}