@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: 820px) {
	#main { width: 100%; padding: 0 10px;}
}

/*====================================================================================================
  HEADER
====================================================================================================*/
@media only screen and (max-width: 1400px) {
	#header .h_nav ul { gap: 1rem;}
}
@media only screen and (max-width: 1200px) {
	:root { --h-height: 70px;}
	#header { height: var(--h-height); pointer-events: auto;}
	#header .h_inner { height: var(--h-height); display: none;}
	#header_logo { margin-left: 0.5rem; z-index: 999999;}
	#header_logo img { width: 293px !important;}
	#header .tel_icon { width: 21px;}

/*========= CSS for NAVIGATION ===============*/
	#header #h_nav_sm {
		display: block;
		position:fixed;
		z-index: 999;
		top: -100dvh;
		left:0;
		width:100%;
		height: calc(100dvh - var(--h-height));
		transition: all 0.6s;
	}

	#header #h_nav_sm.panelactive { top: var(--h-height);}
	#header .openbtn { display: block !important;}

/*NAVIGATION*/
	#header #h_nav_sm ul {
		margin: 0 auto 2rem;
		padding: 0 1.666666rem; 
		width: 100%;
		height: calc(100dvh - var(--h-height));
		overflow-y: auto;
		position: absolute;
		z-index: 999;
		left: 50%;
		transform: translate(-50%, 0);
		background: #fff;
	}
	#header #h_nav_sm ul li:nth-of-type(1) {
		padding-block: 20px;
		line-height: 1.6;
		background: var(--light-violet);
		border-radius: 10px;
		text-align: center;
		margin-bottom: 1rem;
	}
	#header #h_nav_sm ul li:nth-of-type(1) a {
		font-size: 32px;
		color: var(--violet);
		font-weight: 700;
	}
	#header #h_nav_sm ul li:nth-of-type(1) b {
		background: #fff;
		padding: 0.1em 1.5em;
		font-size: 13px;
		border-radius: 5px;
	}
	#header #h_nav_sm li:last-of-type{ border-bottom: none;}

	#header #h_nav_sm ul li:not(:nth-of-type(1)) {
		text-decoration: none;
		text-align: left;
		display: block;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		font-size: 1.4rem;
		line-height: 3;
		font-weight: 700;
		border-bottom: 1px solid #D1C1E6;
	}

/*========= CSS for BUTTON ===============*/
	#header .openbtn{
		position: relative;
		cursor: pointer;
		width: 70px;
		height:var(--h-height);
		right: 0;
		background: var(--violet);
		z-index: 999999;
	}
	/*ボタン内側*/
	#header .openbtn span{
		display: inline-block;
		transition: all .4s;/*アニメーションの設定*/
		position: absolute;
		height: 3px;
		background: #fff;
		width: 54.28%;
		left: 17px;
		border-radius: 20px;
	}
	#header .openbtn::before {
	content: "メニュー";
	position: absolute;
	bottom: 20px;
	left: 15px;
	color: #fff;
	font-size: 10px;
	}

	#header .openbtn span:nth-of-type(1) { top:15px;}
	#header .openbtn span:nth-of-type(2) {
		top:24px;
		left:17px;
		font-size:0.8rem;
		font-weight: 700;
		text-transform: uppercase;
		color: #fff;
	}
	#header .openbtn span:nth-of-type(3) { top:33px;}
	/*activeクラスが付与されると線が回転して×になり、Menu表記をしている2つ目の要素が透過して消える*/
	#header .openbtn.active {
		background: #fff;
		z-index: 999999;
	}
	#header .openbtn.active span { background: var(--violet);}
	#header .openbtn.active span:nth-of-type(1) {
		top: 15px;
		left: 15px;
		transform: translateY(6px) rotate(-45deg);
		width: 54%;
	}
	#header .openbtn.active span:nth-of-type(2) { opacity: 0;}
	#header .openbtn.active span:nth-of-type(3) {
		top: 15px;
		left: 15px;
		transform: translateY(6px) rotate(45deg);
	}
	#header .active::before {
		content: "閉じる";
		bottom: 22px;
		left: 19px;
		color: var(--violet);
	}
	#header .h_box:has(.active) {
		background-color: #fff;
	}
}
@media only screen and (max-width: 375px) {
	#header_logo img { width: 250px !important;}
}


/*====================================================================================================
  TOPPAGE
====================================================================================================*/
@media only screen and (max-width: 1200px) {
	#toppage .news_area { padding-inline: 1.66666rem;}
	#toppage .guid { gap: 10px;}
	#toppage .guid_wrap { min-width: 370px;}
	#toppage .news { border-radius: 100% 100% 0% 0% / 10% 10% 0% 0%;}
}
@media only screen and (max-width: 1130px) {
	#toppage .guid { flex-direction: column; width: 100%;}
}



@media only screen and (max-width: 820px) {
	#toppage h2 {
	width: 100%;
	top: 15%;
	left: 50%;
	transform: translate(-50%, -15%);
	text-align: center;
	}
	#toppage .access_box { padding: 2rem 1.66666rem 2.66666rem}
	#toppage .add_box {
		grid-auto-flow: row;
		grid-template-columns: 1fr;
		grid-template-rows: repeat(3, auto);
		row-gap: 1.25rem;
		grid-template-areas:
			"add_item1"
			"add_item3"
			"add_item2";
	}
	#toppage .add_box .add_pt { width: 100%;}
	#toppage .add_box .logo { width: 278px;}
	#toppage .sch_box { flex-direction: column; align-items: center;}
	#toppage .sch_msg::after,
	#toppage .access::before { width: 162px;}
	#toppage .sch_msg::after { left: 10px;}
	#toppage .access::before { right: 10px;}
	#footer .f_tree { width: 360px; left: calc(50% - 204px)}
}
@media only screen and (max-width: 540px) {
	#footer .f_tree { width: 208px; left: calc(50% - 118px)}
}
@media only screen and (max-width: 390px) {
	#toppage #main { padding-inline: 10px;}
	#toppage .sch_wrap { width: 100%; height: auto; padding: 30px 25px;}
	#toppage .sch_inner tbody {
		grid-auto-flow: column;
		grid-template-columns: 76px repeat(2, 1fr);
	}
	#toppage .sch_inner tbody tr.part { border-right: 2px dotted #ccc;}
	#toppage .sch_inner tbody.col2 { grid-template-columns: 76px 1fr;}
	#toppage .sch_inner tbody tr {
		grid-auto-flow: column; 
		grid-template-columns: auto;
		grid-template-rows: repeat(8, 1fr);
		align-items: center;
	}
	#toppage .sch_inner tbody th { position: relative; padding: 4px;}
	#toppage .sch_inner tbody td {
		position: relative;
		padding: 4px;
	}
	#toppage .sch_inner tbody th::after,
	#toppage .sch_inner tbody td::after {
		position: absolute;
		content: "";
		width: 100%;
		height: 1px;
		left: 0;
		bottom: -0.5em;
		background: linear-gradient(to bottom, #ccc 0 50%);
	 }
	#toppage .sch_inner tr:not(:first-child) { border-bottom: none;}
	#toppage .sch_inner tr:not(:last-child) { margin-bottom: 0;}
	#toppage .guid_wrap { width: 100%; min-width: 355px;}
}

/*====================================================================================================
  SUBPAGE
====================================================================================================*/
@media only screen and (max-width: 1200px) {
	#subpage { top: var(--h-height);}
	#subpage p.indention { height: 20px;}
}

/*====================================================================================================
  FOOTER
====================================================================================================*/
@media only screen and (max-width: 1600px) {
	#page-top,
	#page-top a {
		right: 0;
		bottom: 20px;
		width: 80px;
		height: 80px;
	}
}
@media only screen and (max-width: 820px) {
	#footer .f_box {
		flex-direction: column;
		gap: 1.933333rem;
		text-align: center;
		align-items: center;
	}
	#footer .link_bnr { flex-direction: column; gap: 1.333333rem;}
	#footer .logo { width: 283px;}
	#footer .copy { font-size: clamp(0.75rem, 0.677rem + 0.22vw, 0.938rem);} /* 1200:12px, 1920:15px */
}

/*====================================================================================================
  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 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;}

	/* 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;}

/*---------------------------------------------------------------------------
  Doctor 追加
---------------------------------------------------------------------------*/
#subpage .doctor {
	flex-direction: column;
	align-items: center;
	gap:1.5rem;
}
#subpage .doctor .d_name { gap: 1.5rem}

}

@media only screen and (max-width: 412px) {
	#subpage .doctor .d_name { flex-direction: column; gap: 1rem;}
	#subpage .doctor .name { align-self: center;}
	#subpage .link4 { width: 45%;}
}