@media (width < 1280px){
:root {
	--fixed-img-w:0px;
}

/*==================================================
  Basic
==================================================*/
.header_btn {
	--gap:5px;
	--span-height:3px;

	position:fixed;
	inset:0 0 auto auto;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:var(--gap);
	padding:15px;
	background-color:transparent;
	border:none;
	border-radius:0 0 0 20px;
	color:var(--black);
	font-size:10px;
	font-weight:bold;
	font-family:inherit;
	cursor:pointer;
	z-index:9999;

	& .wrap {
		position:relative;
		display:flex;
		flex-direction:inherit;
		gap:inherit;
		width:100%;
		height:calc(var(--gap) * 2 + var(--span-height) * 3);
	}
	& span {
		position:absolute;
		width:100%;
		height:var(--span-height);
		background-color:var(--black);
		transition:
			inset var(--trans),
			rotate var(--trans),
			opacity var(--trans);
		}
	& span:nth-of-type(1) { inset-block:0 auto;}
	& span:nth-of-type(2) { inset-block:50% auto; translate:0 -50%;}
	& span:nth-of-type(3) { inset-block:auto 0;}
	& .t { display:grid;}
	& .t p { grid-column:1/-1; grid-row:1/-1;}
	& .t p:nth-of-type(1) { opacity:1; transition:opacity var(--trans);}
	& .t p:nth-of-type(2) { opacity:0; transition:opacity var(--trans);}

	/* .active */
	&.active {
		& span:nth-of-type(1) { inset-block:calc(50% - var(--span-height) / 2) auto; rotate:30deg;}
		& span:nth-of-type(2) { opacity:0;}
		& span:nth-of-type(3) { inset-block:auto calc(50% - var(--span-height) / 2); rotate:-30deg;}
		& .t p:nth-of-type(1) { opacity:0;}
		& .t p:nth-of-type(2) { opacity:1;}
	}
}

header {
	inset:0 0 auto auto;
	width:100%;
	height:100%;
	background-color:var(--pri);
	color:var(--white);
	translate:100% 0;
	transition:translate var(--trans);
	
	& nav { width:fit-content; margin:70px auto 0;}
	& a:not(.green) { color:var(--black); border-color:inherit;}
	& a.green { background-color:#fff; color:var(--black);}
	& a:is(.access, .recruit):before { background-color:var(--pri);}
}
body:has(.header_btn.active) { overflow:hidden; height:100svh;}
.header_btn.active + header { translate:0 0;}

header + .info_box {
	/* viewport:768-*1280px  16-25px */
	--midashi-fs:clamp(1rem, calc(0.156rem + 1.758vw), 1.563rem);
	--info_box_pb:3rem;

	flex-direction:column;
	position:fixed;
	padding:0 1.25rem calc(1rem + var(--info_box_pb));
	width:325px;
	backdrop-filter:none;	/* safariバグのため無効化 */
	background-color:var(--white);
	border-radius:30px;
	inset:100% auto auto calc((100% - var(--left-space)) / 2 + var(--left-space))!important;
	translate:-50% calc(var(--midashi-fs) * -3);
	transition:translate var(--trans);
	z-index:calc(var(--header-z-index) - 1);

	&:after { display:none;}
	& .midashi {
		display:grid;
		grid-template-columns:1em 1fr 1em;
		width:100%;
		margin-block:1em;
		font-size:var(--midashi-fs);
		text-align:center;
		writing-mode:unset;
		cursor:pointer;
	}
	& .midashi:before,
	& .midashi:after { content:"";}
	& .midashi:after {
		display:block;
		width:1em;
		height:auto;
		aspect-ratio:1;
		background:
			url(../image/icon_arrow2.svg) no-repeat center / contain;
		border-radius:100%;
		transition:rotate var(--trans);
	}
	& p {
		/* viewport:768-1280px  11-18px */
		font-size:11px;
		text-align:center;
	}
	& a[href^="tel"] {
		/* viewport:768-1280px  34-48px */
		font-size:34px;
	}
	& .calendar {
		margin-bottom:10px;
		/* viewport:768-1280px  14-17px */
		font-size:14px;
	}
	& .calendar :is(th, td) { padding-inline:0.5em;}

	/* .active */
	&.active {
		translate:-50% calc(-100% + var(--info_box_pb));

		& .midashi:after { rotate:180deg;}
	}
}

.fixed { display:none;}


/*==================================================
  TOP
==================================================*/
.fv {
	& :is(.mainimg, .subimg) { width:calc(100% - var(--content-inline-gap));}
}


/*==================================================
  SUBPAGE
==================================================*/
#subpage .overflow_wrap > table.hyou { width:1056px!important;}

}




@media only screen and (max-width:768px){
:root {
	--left-space:5vw;
	--content-inline-gap:5vw;
	--content-width:85vw;
}
.pc { display:none;}
.sm { display:block;}
a[href^="tel:"] { pointer-events:auto;}

main { container:main / inline-size;}

/*====================================================================================================
  SUB PAGE
====================================================================================================*/
/* TITLE */
#page_title h2 { width:90%; font-size:212.5%; }

/* MIDASHI */
/* #subpage h3 { margin:0 2% 20px; }
#subpage h3 small { font-size:112.5%; }
#subpage h3 b { font-size:182.5%; } */
#subpage h3.midashi { margin-block:10px;}
#subpage h4.mid { margin:0 2% 20px; font-size: 125%;}
#subpage h4:not([class]) { margin:0 2% 20px; font-size: 112.5%;}

/* CATCH COPY */
#subpage .catch { font-size:2rem;}

/* COMMON */
#subpage .comment1 { margin:0 2% 20px; font-size:100%; }
#subpage .comment2 { margin:0 2% 20px; padding:5%; font-size:100%; }
#subpage .comment2::before { top:10px; left:10px; width:38px; height:30px; }
#subpage .comment3 { margin:0 2% 20px; padding:5%; font-size:100%; }
#subpage .comment3::before { top:10px; left:10px; width:28px; height:31px; }

/* HYOU */
#subpage table.hyou { margin:0 2%; width:96%; table-layout:auto; border-left:none; font-size:1rem;}
#subpage table.hyou2 :is(th, td) {
	table-layout:auto !important;
	display:block !important;
	padding:0.5em 1em !important;
	width:100% !important;
	height:auto !important;
	border-right: none;
}
#subpage table.hyou td .sm_mid { display:block;}

/* 2RETU */
#subpage table.hyou2 td table :is(th, td) {
	display:table-cell !important;
	padding:5% !important;
	width:auto !important;
	height:auto !important;
}
#subpage table.hyou2 tr * + :is(th, td) { border-left:none; border-top:solid 1px rgb(var(--black-rgb) / 0.3);}

/* 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 ol li { font-size:100%; }

/* LINK */
#subpage .link2,
#subpage .link3,
#subpage .link4 { width:96%;}
#subpage .link a { font-size:100%; }
#subpage .file2,
#subpage .file3,
#subpage .file4 { width:96%;}

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

/* PHOTO BOX */
#subpage ul.photo_box { clear:none !important; float:none !important; margin:3rem 2%; width:96% !important; text-align:center;}
#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%; text-align:center;}
#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:80% !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,
#subpage .box3,
#subpage .box4 { float:none; margin:3rem 2%; width:96%; }
#subpage .box1:after,
#subpage .box2:after,
#subpage .box3:after,
#subpage .box4:after { display:none; }
#subpage .box1 .catch { margin:0 0 20px !important;}
#subpage .box1 h4,
#subpage .box2 h4,
#subpage .box3 h4,
#subpage .box4 h4 { margin:10px 0;}
#subpage .come { font-size:100%; }
#subpage .photo-c { float:none; padding:0; width:100%;}
#subpage .photo-c img { max-width:80%!important; height:auto !important; padding:0; }
#subpage .photo-l,
#subpage .photo-r { float:none; margin:0; width:100%; text-align:center; max-width:unset;}
#subpage :is(.photo, .photo-l, .photo-r) img { max-width:80%!important; height:auto!important; margin-inline:auto; padding:0;}
#subpage .box1 .photo-c img { border-radius:30px; }

/* LINE */
#subpage .line {
	margin:0 2% 20px;
	padding-block:15px;
	background-size:cover;
	background-image:image-set(
		url(../image/line_sp.webp) type("image/webp"),
		url(../image/line_sp.png)
	);
	
	&.type-left { background-position:center left;}
	&.type-right { background-position:center right;}
}

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

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

/* FAQ */
#subpage dl.faq { font-size:100%; }
#subpage dl.faq+dl.faq { margin-top:50px; }
#subpage dl.faq dt,
#subpage dl.faq dd { margin-block:20px; }

/* COMMENT */
#subpage .comment4_cat { flex-direction: column;}

/* FORM */
.page_contact form th {width:auto;}

/*====================================================================================================
  OTHER
====================================================================================================*/
.subpage {

	& section.fv {

		& .catch { right:0px;}
		& .cat { inset-block:calc(var(--slide-w) / 370 * 300 * 0.5766) auto;}
	}

	& footer .f_img img { height:calc(100vw / 4 * 3);}
}

.page_company .other .photo-l { margin-bottom:25vw!important;}
.page_company .other .photo-l:before { width:50%;}
.page_company .other .photo-l:after { width:45%;}




/*====================================================================================================
  Basic
====================================================================================================*/
.content_container { margin-inline:0 5vw;}
.content_container:not(.news) h2 { margin-block:1rem; writing-mode:unset; font-size:30px; letter-spacing:0;}


header + .info_box {

	& a[href^="tel"]{ font-size:34px;}
}

footer {
	--radius:65px;

	margin-bottom:30px;
	padding:var(--content-inline-gap) 0 50px var(--content-inline-gap);
	border-radius:var(--radius) 0 0 var(--radius);

	& .wrap { gap:40px;}
	& .map {
		border-radius:
			calc(var(--radius) - var(--content-inline-gap))
			0
			0
			calc(var(--radius) - var(--content-inline-gap));
	}
	& .map iframe { aspect-ratio:335/320;}
	& .info_box {

		& .logo { width:237px;}
		& p { font-size:12px;}
		& p:nth-of-type(1) { margin-top:1.5em;}
		& p:nth-of-type(3) { margin-top:1.8333em;}
		& a[href^="tel"] { font-size:37px;}
		& .calendar { margin-block:1.75em 0; font-size:13px;}
	}
}

/*====================================================================================================
  TOP
====================================================================================================*/

#top .fv {
	overflow-x:clip;

	& h1 { padding:1.25rem 0 1.25rem 1rem; font-size:1rem;}
	& h1 img { width:210px;}
	& .mainimg { max-width:unset; width:100%; height:400px; border-radius:0; object-position:top 50% right -10rem;}
	& .catch {
		font-size:3rem;
		line-height:1.5;
		text-shadow:
			0px 0px 10px var(--white),
			0px 0px 10px var(--white),
			0px 0px 10px var(--white),
			0px 0px 10px var(--white);
	}
	& .catch_sub { margin-top:1.2222em; width:var(--content-width); font-size:1.125rem;}
}

#top .content_container.news {
	margin-block:60px 70px;
	padding:2rem 2rem 3rem var(--content-inline-gap);

	& h2 { font-size:20px;}
	& ul { font-size:13px;}
	& li {
		display:grid;
		grid-template-columns:subgrid;
		grid-column:span 3;
	}
	& :is(.day, .cont) { font-size:14px;}
	& .cont { grid-column:span 3;}

	& .btn { position:static; margin:2em auto 0;}
}

#top :is(.about, .guide) {
	display:block;
	padding-left:var(--content-inline-gap);
	font-size:17px;
}
#top .about {

	& h3 { font-size:21px;}
	& .btn { margin:1em auto 2.5em 0;}
	& .img {
		margin-inline:calc((var(--left-space) + var(--content-inline-gap)) * -1) 0;
		width:calc(100cqw + var(--left-space));
		overflow-x:clip;
	}
	& .img img {
		width:calc((100cqw + var(--left-space)) * 1.2);
		max-width:unset;
		margin-left:calc((100cqw + var(--left-space)) / -10);
	}
}
#top .guide {
	margin-top:35vw;
	padding-bottom:85px;

	& h3 { font-size:22px;}
	& .img { margin-block:0 25px; height:70px;}
}

section:has(.adm) { width:100%;}
#top .adm {
	display:block;
	width:100%;

	& :is(h2, .adm_start) {
		padding-inline:
			calc(var(--left-space) + var(--content-inline-gap))
			var(--content-inline-gap);
	}
	& h2 { margin-block:0 8px;}
	& h3 { font-size:21px;}
	& .text { margin-top:1rem; font-size:17px;}
	& .btn { margin-top:1.5rem;}
	& .adm_end { width:100%;}
	& .adm_end_wrap {
		--mask-flow:to left;
		--mask-gradient-pos:20%;

		height:auto;
	}
	& .slide + .slide { margin-top:0px; margin-left:var(--gap);}
}


/*====================================================================================================
  SUB
====================================================================================================*/
#subpage {
	font-size:1rem;

	& .fv h1 { padding:1.25rem 0 1.25rem 1rem; font-size:1rem;}
	& .fv h1 img { width:210px;}
	& .fv .subimg { height:220px;}
	& .pan { padding-block:30px;}
	& .subpage_wrap { padding-inline:var(--content-inline-gap); padding-bottom:calc(var(--content-inline-gap) * 3);}
	& footer { padding-top:calc(var(--content-inline-gap) * 3); border-start-start-radius:0px;}
}


/*---------------------------------------------------------------------------
  お知らせ一覧（news_list.html）
---------------------------------------------------------------------------*/
.news_list {
	font-size:13px;
	
	& li {
		display:grid;
		grid-template-columns:subgrid;
		grid-column:span 3;
	}
	& :is(.day, .cont) { font-size:14px;}
	& .cont { grid-column:span 3;}
}


/*---------------------------------------------------------------------------
  医者一覧（doctor.html）
---------------------------------------------------------------------------*/
.doctor {

	& .subpage_wrap .box2 :is(h4, .come) { text-align:center;}
}

}