@charset "UTF-8";
main { background-color:var(--bg-color);}
footer { border-start-start-radius:0px;}
.fv {

	& .img { position:relative;}
	& .subimg { width: min(100% - 235px, 1500px); height: 317px;}
	& .subimg img {
		width:100%;
		height:100%;
		object-fit:cover;
		object-position:center right;
		border-radius:0 300px 300px 0;
	}
	& .catch {
		position:absolute;
		inset:50% auto auto var(--content-inline-gap);
		margin:0;
		text-shadow:0px 0px 10px var(--white),
					0px 0px 10px var(--white),
					0px 0px 10px var(--white),
					0px 0px 10px var(--white);
		translate:0 -50%;
	}
}

.subpage_wrap {
	display:flow-root;
	padding-left:var(--content-inline-gap);
	padding-bottom:var(--content-inline-gap);
	width:min(1200px, 100% - var(--fixed-img-w));
}



/*---------------------------------------------------------------------------
  PAN
---------------------------------------------------------------------------*/
.pan {
    display:flex;
	gap:1em;
	margin-left:var(--content-inline-gap);
	padding-block:3.375em;

	& li { position:relative;}
	& li:not(:has(.home)) { padding-left:2em;}
	& li:not(:has(.home)):before {
		content:"＞";
		position:absolute;
		inset:0 auto auto 0;
	}

	& .home{
		position:relative;
		padding-left:1em;
	}
	& .home:before {
		content:"";
		position:absolute;
		display:block;
		width:0.75em;
		height:auto;
		aspect-ratio:12/10;
		background-color:var(--black);
		mask:url(../image/icon_home.svg) no-repeat center / contain;
		inset:50% auto auto 0;
		translate:0 -50%;
	}
}


/*================================================================================
    SUBPAGE
================================================================================*/
.subpage {

    & section.fv {

        & .img :is(img, video) { width:100%; max-height:720px; object-fit:cover; border-radius:50px 0 0 50px;}
        & .catch { right:calc(100% - (var(--catch-title-font-size) * 1.8) / 2);}
        & .catch p:first-of-type { margin-block:0;}
        & .cat { inset-block:auto 0px;}
    }
    & footer .f_img img { height:640px;}
}
#subpage { display:flow-root;}


/*---------------------------------------------------------------------------
  KAIGYOU
---------------------------------------------------------------------------*/

#subpage p.indention {
	clear:both;
	margin: 0 2%;
	height:40px;
	text-indent: -9999px;
	background:none;
}


/*---------------------------------------------------------------------------
  MIDASHI
---------------------------------------------------------------------------*/
#subpage .subpage_wrap :where(h3, h4) { margin:100px 2% 30px;}
#subpage .subpage_wrap :where(h3, h4):first-child { margin-top:0px;}
#subpage h3 {
	clear:both;
	/* viewport:768-1280px  30-50px */
	font-size:clamp(1.875rem, calc(0rem + 3.906vw), 3.125rem);
	font-weight:bold;
	line-height:1.4;
	color:var(--sec);
}
#subpage h4.mid {
	clear:both;
	color:var(--black);
	/* viewport:768-1280px  21-38px */
	font-size:clamp(1.313rem, calc(-0.281rem + 3.32vw), 2.375rem);
	font-weight:bold;
	line-height:1.4;
}
#subpage h4:not(.mid) {
	clear:both;
	/* viewport:768-1280px  22-25px */
	font-size:clamp(1.375rem, calc(1.094rem + 0.586vw), 1.563rem);
	font-weight:600;
	line-height:1.4;
	color:var(--pri);
}


/*---------------------------------------------------------------------------
  COMMENT
---------------------------------------------------------------------------*/
#subpage :is(.comment1, .comment2, .comment3) {
	clear:both;
	margin:0 2% 30px;
	text-align:justify;
}
#subpage :is(.comment2, .comment3) {
	position:relative;
	padding:60px 95px;
	background-color:rgb(var(--sec-rgb) / 0.1);
	border-radius:50px;
}
#subpage :is(.comment2, .comment3):before {
	content:"";
	position:absolute;
	display:block;
	height:auto;
	background-color:var(--sec);
	mask:url() no-repeat center / contain;
	-webkit-mask:url() no-repeat center / contain;
	inset:30px auto auto 30px;
	pointer-events:none;
}
#subpage .comment2:before {
	width:48px;
	aspect-ratio:48/40;
	mask-image:url(../image/icon_comment2.svg);
	-webkit-mask-image:url(../image/icon_comment2.svg);
}
#subpage .comment3:before {
	width:38px;
	aspect-ratio:38/41;
	mask-image:url(../image/icon_comment3.svg);
	-webkit-mask-image:url(../image/icon_comment3.svg);
}


/*---------------------------------------------------------------------------
  HYOU
---------------------------------------------------------------------------*/

#subpage .overflow_wrap { width:100%; overflow:auto; scrollbar-width:thin;}

#subpage table.hyou {
	--border:solid 1px #b2b2b2;

	clear:both;
	margin:0 2%;
	width:96%;
	font-size:18px;
	border-collapse:collapse;
	border-top:var(--border);
}
#subpage table.hyou:not(:has(+ table.hyou)) { border-bottom:var(--border);}
#subpage table.hyou :is(th, td) { padding:20px 30px;}
#subpage table.hyou th { background-color:rgb(var(--sec-rgb) / 0.2);}

#subpage table:is(.hyou3, .hyou4, .hyou5, .hyou6) :is(th, td) { border-inline:var(--border);}
#subpage table:is(.hyou3, .hyou4, .hyou5, .hyou6):has(td) { border-top:none;}

#subpage table.hyou2 th { width:30%}
#subpage table.hyou2 td { width:70%;}
#subpage table.hyou3 :is(th, td) { width:calc(100% / 3);}
#subpage table.hyou4 :is(th, td) { width:25%;}
#subpage table.hyou5 :is(th, td) { width:20%;}
#subpage table.hyou6 :is(th, td) { width:calc(100% / 6);}

/*---------------------------------------------------------------------------
  LIST
---------------------------------------------------------------------------*/

#subpage ul.list-ul {
	clear:both;
	margin:0 2%;
	padding:5px 0;

	&.box2 { clear:unset;}
	& li { position:relative; padding-left:1.125em;}
	& li:before {
		content:"";
		position:absolute;
		display:block;
		width:10px;
		height:auto;
		aspect-ratio:1;
		background-color:var(--pri);
		border-radius:100%;
		inset:0.5lh auto auto 0;
		translate:0% -50%;
	}
	&:not(:has(+ ul.list-ul.box2)) { float:none; clear:both;}
}

#subpage *:not(.list-ol):has( + .list-ol) {
	counter-reset:num;
}
#subpage .list-ol {
	counter-increment:num;
	clear:both;
	margin:0 2%;
	padding:5px 0;
}
#subpage .list-ol div {
	padding-left:1.375rem;
	text-indent:-1.125rem;
}
#subpage .list-ol div:before {
	content:counter(num)".";
	padding-right:0.375em;
	font-weight: 700;
	color: var(--sec);
}

/*---------------------------------------------------------------------------
  LINK
---------------------------------------------------------------------------*/

#subpage .link {
	clear:both;
	margin:1em 2%;
	font-weight:bold;

	& a {
		color:#00659E;
		text-decoration:underline;

		@media (any-hover:hover) { &:hover { color:#71A5C3;}}
		@media (any-hover:none) { &:active { color:#71A5C3;}}
	}
	& + .link { margin-top:0;}
}


#subpage .file {
	clear:both;
	margin:0 2%;
	padding: 0 0 10px;
}
#subpage .file img { padding-right:10px;}
#subpage .pdf { margin:1rem 2%;}
#subpage .pdf + .pdf { margin-top:0px;}
/* LINK PLURAL�@*************************/
/* LINK BOX2 */ #subpage .link2 { clear:none; float:left; width:46%;}
/* LINK BOX3 */ #subpage .link3 { clear:none; float:left; width:29.3%;}
/* LINK BOX4 */ #subpage .link4 { clear:none; float:left; width:21%;}

/* FILE PLURAL�@*************************/
/* FILE BOX2 */ #subpage .file2 { clear:none; float:left; width:46%;}
/* FILE BOX3 */ #subpage .file3 { clear:none; float:left; width:29.3%;}
/* FILE BOX4 */ #subpage .file4 { clear:none; float:left; width:21%;}


/*---------------------------------------------------------------------------
  EMBEDDED
---------------------------------------------------------------------------*/

#subpage .embedded {
  position:relative;
	clear:both;
	margin: 0 2%;
	padding:0 0 20px;
}
#subpage .embedded iframe { width: 100%;}


/*---------------------------------------------------------------------------
  PHOTO
---------------------------------------------------------------------------*/

#subpage .photo-l {	float:left;}
#subpage .photo-r {	float:right;}
#subpage .photo-c { clear:both; text-align:center;}
#subpage .photo-l { margin:0 40px 0 0; max-width:55%;}
#subpage .photo-r { margin:0 0 0 40px; max-width:55%;}
#subpage .photo-c { margin:0 0 40px;}
#subpage .photo-l p,
#subpage .photo-r p,
#subpage .photo-c p { padding: 0 0 5px;}
#subpage :is(.photo-l, .photo-r, .photo-c, .photo) img { width:100%;}

#subpage .box1 :is(.photo-l, .photo-r, .photo-c) img { border-radius:100px;}
#subpage .box2 :is(.photo-l, .photo-r, .photo-c) img { border-radius:50px;}

#subpage :is(.box1, .box2) h4:not(:empty) + .come { margin-top:16px;}

#subpage .caption { margin-top:0.8888em; text-align:center;}
#subpage .caption:empty { display:none;}
#subpage .caption:has(input[name="openWin"]) { min-height:1lh; position:relative;}

/* PHOTO BOX�@*************************/
#subpage ul.photo_box { float:left; margin:2%;}
#subpage ul.photo_box li.photo { margin:0 0 5px; text-align:center;}
#subpage ul.photo_box li.youtube iframe {
	width:100%;
	height:auto;
	aspect-ratio:16/9;
	border-radius:50px;
}
#subpage ul.g1 { width:96%; float:none;}
#subpage ul.g2 { width:46%;}
#subpage ul.g3 { width:29.3%;}
#subpage ul.g4 { width:21%;}

#subpage ul.g1 { /*max-width:600px;*/ margin-inline:auto;}

#subpage ul.g1 img { border-radius:100px;}
#subpage ul.g2 img { border-radius:100px;}
#subpage ul.g3 img { border-radius:50px;}
#subpage ul.g4 img { border-radius:40px;}


/*---------------------------------------------------------------------------
  BOX
---------------------------------------------------------------------------*/

#subpage :is(.box1, .box2) h4 { clear:none; border:none; padding:0; margin:0;}
#subpage :is(.box1, .box2) h4:empty { display:none;}

/* BOX1 */
#subpage .box1 { clear:both; margin:50px 2%; width:96%;}
#subpage .box1 :is(.photo-c, .photo-l, .photo-r) img { max-width:600px; height:auto;}
#subpage .box1:after { display:block; clear:both; content:"";}

/* BOX2 */
#subpage .box2 { float:left; margin:50px 2%; width:46%;}
#subpage .box2 :is(.photo-l, .photo-r) img { max-width:210px; height:auto;}

/*---------------------------------------------------------------------------
  LINE
---------------------------------------------------------------------------*/

#subpage .line {
	clear:both;
	margin:0 2%;
	padding:30px 0;
	width:96%;
	background:image-set(
		url(../image/line.webp) type("image/webp"),
		url(../image/line.png)
	) no-repeat center / contain;

	&.type-left {
		background-image:image-set(
			url(../image/line-left.webp) type("image/webp"),
			url(../image/line-left.png)
		);
	}
	&.type-right {
		background-image:image-set(
			url(../image/line-right.webp) type("image/webp"),
			url(../image/line-right.png)
		);
	}
}
#subpage .line hr {
	display:none;
	height: 1px;
	border: none;
	border-top: 1px #AAA dotted;
}


/*---------------------------------------------------------------------------
  BUTTON
---------------------------------------------------------------------------*/

#subpage .btn {
	float:left;
	margin:1% 2%;
	padding:10px;
}
#subpage .btn > div { width:fit-content; margin-inline:auto;}
#subpage .btn:not(.b1) a { width:100%;}
/* BUTTON BOX1 */ #subpage .b1 { width:fit-content; clear: both; float:none; margin:0 auto;}
/* BUTTON BOX2 */ #subpage .b2 { width:46%;}
/* BUTTON BOX3 */ #subpage .b3 { width:29.3%;}

/*---------------------------------------------------------------------------
  COLUMNBOX
---------------------------------------------------------------------------*/
#subpage .column {}
#subpage .column:after { /*float_clear*/ display:block; clear:both; content:"";}
#subpage .column .col2 { float: left; margin: 2%; width: 46%;}
#subpage .column .col3 { float: left; margin: 2%; width: 29.3%;}
#subpage .column .col2:nth-child(2+1),
#subpage .column .col3:nth-child(3+1) { clear:both;}

/*---------------------------------------------------------------------------
  FLOW
---------------------------------------------------------------------------*/

#subpage ul.flow_box {}
#subpage ul.flow_box:after { /*float_clear*/ display:block; clear:both; content:"";}
#subpage ul.flow_box li {
	position:relative;
	float:left;
	margin:1% 2%;
	padding:15px;
	color:#FFF;
	text-align:center;
	background:#222;
	border-radius: 5px; /* CSS3 */
	-webkit-border-radius: 5px; /* Safari,Google Chrome */
	-moz-border-radius: 5px;/* Firefox */
	box-sizing:border-box;
}
#subpage ul.flow_box li a:hover {
	background:#999;
	border-radius: 5px; /* CSS3 */
	-webkit-border-radius: 5px; /* Safari,Google Chrome */
	-moz-border-radius: 5px;/* Firefox */
}
#subpage ul.flow_box li+li:before {
	position:absolute;
	top:0;
	left:-22px;
	display:block;
	clear:both;
	content:"";
	width:15px;
	height:100%;
	background:url(../image/flow_bg_pc.png) no-repeat center center;
}
#subpage .flow1 { position:relative;}
#subpage .flow1 li { float: none; width:96%;}
#subpage .flow1+.flow1:before {
	position:absolute;
	top:-15px;
	left:0;
	display:block;
	clear:both;
	content:"";
	width:100%;
	height:30px;
	background:url(../image/flow_bg_sm.png) no-repeat center center;
}
#subpage .flow2 li { width:46%;}
#subpage .flow3 li { width:29.3%;}
#subpage .flow4 li { width:21%;}

#subpage .flow1a { position:relative;}
#subpage .flow1a+.flow1a {margin-top:3%;}
#subpage .flow1a li+li:before { display:none !important;}
#subpage .flow1a li:nth-child(1) { width:32%; background:#222;}
#subpage .flow1a li:nth-child(2) { width:60%; padding:0; text-align: left; color: #343434; background: none;}
#subpage .flow1a+.flow1a:before {
	position:absolute;
	top:-25px;
	left:0;
	display:block;
	clear:both;
	content:"";
	width:36%;
	height:30px;
	background:url(../image/flow_bg_sm.png) no-repeat center center;
}

/*---------------------------------------------------------------------------
  FAQ
---------------------------------------------------------------------------*/

#subpage dl.faq {
	--icon-gap:15px;
	--padding-inline:54px;

	clear:both;
	margin:0 2%;
	padding:20px;
	background-color:rgb(var(--sec-rgb) / 0.1);
	border-radius:20px;

	& + dl.faq { margin-top:20px;}
	& :is(dt, dd) { padding-block:0.2em;}
	& dt {
		position:relative;
		background:url(../image/icon_Q.svg) no-repeat center left / 38px auto;
		font-size:20px;
		font-weight:bold;
	}
	& dt label { display:block; padding-inline:var(--padding-inline); cursor:pointer;}
	& dt label:before,
	& dt label:after {
		content:"";
		position:absolute;
		display:block;
		background-color:var(--sec);
		width:28px;
		height:5px;
		border-radius:100vmax;
		inset:50% calc(var(--padding-inline) / 2) auto auto;
		translate:50% -50%;
	}
	& dt label:after { rotate:90deg; transition:rotate var(--trans);}
	& dt input[type="checkbox"] { display:none;}
	& dd {
		display:grid;
		grid-template-rows:0fr;
		margin-top:0px;
		padding-inline:var(--padding-inline);
		background:url(../image/icon_A.svg) no-repeat top left / 38px auto;
		opacity:0;
		transition:
			margin var(--trans),
			grid-template-rows var(--trans),
			opacity var(--trans);
	}
	& dd > div { overflow:hidden;}

	/* :checked */
	& dt label:has(input[type="checkbox"]:checked):after { rotate:180deg;}
	& dt:has(input[type="checkbox"]:checked) + dd {
		grid-template-rows:1fr;
		margin-top:var(--icon-gap);
		opacity:1;
	}
}



/*---------------------------------------------------------------------------
  入院・面会（admission.html）
---------------------------------------------------------------------------*/
.process {
	--triangle-w:2.25em;
	--triangle-h:calc(tan(60deg) * var(--triangle-w) / 2);
	--arrow-t:calc(var(--triangle-w) / 3);


	display:grid;
	grid-template-columns:repeat(2, 1fr);
	/* viewport:768-1280px  20-100px */
	gap:0 clamp(1.25rem, calc(-6.25rem + 15.625vw), 6.25rem);

	/* viewport:768-1280px  14-16px */
	font-size:clamp(0.875rem, calc(0.688rem + 0.391vw), 1rem);

	& :where(.column1, .column2) {
		padding:1.25em 1.5em;
		border:solid 4px var(--pri);
		border-radius:10px;
		height:fit-content;
		background-color:#fff;
	}
	& :where(.column1, .column2) > :is(div, span) { width:fit-content; margin-inline:auto;}
	& :nth-child(1 of .column1) { margin-top:0;}
	& :nth-last-child(1 of .column1) { width:fit-content; margin-inline:auto; padding-inline:4.5em;}
	& .column1 { grid-column:span 2; margin-top:3.125em;}
	& .column2 { grid-column:span 1; margin-top:1.875em;}
	& .no3 { grid-row:span 2; margin-top:60px;}
	& :is(.column_wrap, .no8, .no9, .no10) { position:relative; z-index:1;}
	& .column_wrap:before,
	& :is(.column_wrap, .no8, .no9, .no10):after { content:""; position:absolute; display:block;}
	& .column_wrap:before {
		inset:0 auto auto 50%;
		translate:-50% 0;
		width:var(--arrow-t);
		height:calc(100% + var(--triangle-h));
		background-color:var(--pri);
		z-index:-1;
	}
	& :is(.column_wrap, .no8, .no9, .no10):after { 
		width:var(--triangle-w);
		height:var(--triangle-h);
		background-color:var(--pri);
		clip-path:polygon(0 0, 100% 0, 50% 100%);
		translate:-50% 0;
	}
	& .column_wrap:after { inset:calc(100% + var(--triangle-h) / 2) auto auto 50%;}
	& :is(.no8, .no9, .no10):after { inset:auto auto calc(100% + var(--triangle-h) / 2) 50%;}
}

/*---------------------------------------------------------------------------
  お知らせ一覧（news_list.html）
---------------------------------------------------------------------------*/
.news_list {
	display:grid;
	grid-template-columns:auto auto 1fr;
	align-items:baseline;
	gap:2em 1em;
	margin-top:2em;
	font-size:15px;

    & li { display:grid; grid-template-columns:subgrid; grid-column:span 3;}
    & :is(.day, .cont) { font-size:18px;}
    & .type { padding-inline:1.5em; height:fit-content; color:var(--white); letter-spacing:0.05em; text-align:center; border-radius:100vmax;}
    & .type.green { background-color:var(--sec);}
    & .type.orange { background-color:var(--pri-dark);}

	/* preview */
	& > table[align="center"] { grid-column:span 3;}
	& > .kaeru-box { grid-column:span 3; display:grid; grid-template-columns:subgrid; align-items:start;}
}