@charset "utf-8";

#pageBody > section > .inner {
	max-width : 1024px;
	padding-right : 32px;
	padding-left : 32px;
}

#pageBody h2.contentTitle {
	flex-direction : column;
}

/* mainVisual */
#pageBody > section#mainVisual {
	margin-bottom : 0;
	padding : 0;
}
#mainVisual {
	display : flex;
	position : relative;
	overflow : hidden;
	justify-content : center;
	align-items : center;
	height : 780px;
	margin-bottom : 0;
}
#mainVisual video,
#mainVisual img {
	width : 100%;
	height : 100%;
	object-fit : cover;
}
#mainVisual .overlay {
	display : none;
	position : absolute;
	top : 0;
	left : 0;
	width : 100%;
	height : 100%;
	background : url(/common/img/bg_check_white_alpha100.png);
}
#mainVisual .copy {
	position : absolute;
	top : 50%;
	right : 1em;
	font-size : 3em;
	line-height : 1.25;
	transform : translateY(-50%);
	text-shadow : 0 0 0.1em #ffffff, 0 0 0.25em #ffffff, 0 0 0.5em #ffffff;
	letter-spacing : 0.25em;
}
#mainVisual .copy span {
	display : block;
	font-family : "新ゴ R";
	font-size : 0.33em;
	margin-bottom : 0.5em;
	letter-spacing : 0.125em;
}

/* information */
#pageBody > section#information {
	margin-bottom : 0;
	background-color : #fafafa;
}
#information > .inner {
	display : flex;
	margin : 0 auto;
	padding : 2em 32px;
}
#information h2 {
	line-height : 1.45;
	margin-right : 1.5em;
	margin-bottom : 0;
	padding-right : 1.5em;
	border-right : 1px solid #000000;
}
#information p {
	line-height : 1.45;
}
#information p span {
	margin-right : 1.5em;
}

/* greeting */
#pageBody > section#greeting {
	margin-bottom : 0;
	padding : 0;
}
#greeting {
	position : relative;
	height : 800px;
	margin-bottom : 0;
	padding : 0;
}
#pageBody #greeting h2.contentTitle {
	align-items : flex-start;
}
#greeting .content {
	display : flex;
	position : absolute;
	top : 80px;
	left : 50%;
	flex-direction : column;
	justify-content : center;
	width : 60%;
	height : 720px;
	transform : translateX(-10vw);
	background: #f0faff;
}
#greeting .content.anim {
	transition : 0.4s ease-out;
	transform : translateX(-10vw) translateY(60px);
	opacity : 0;
}
#greeting .content.anim.fire {
	transform : translateX(-10vw) translateY(0);
	opacity : 1;
}
#greeting .content > .inner {
	margin-left : 10vw;
	padding : 24px 4vw;
}
#greeting .content > .inner > p {
	margin-bottom : 2em;
}
#greeting .content > .inner > .copy {
	font-size : 1.4em;
	margin-bottom : 1em;
}
#greeting .content .button a {
	display : inline-block;
	position : relative;
	max-width : 100%;
	padding : 1em 8em 1em 1em;
	transition : 0.2s ease-out;
	color : #ffffff;
	background-color : #0183bc;
}
#greeting .content .button a:hover {
  	opacity: 0.7;
	-moz-opacity:0.7;
	filter: alpha(opacity=70);
}
#greeting .content .button a::after {
	display : inline-block;
	position : absolute;
	top : 50%;
	right : 1em;
	content : ">";
	transform : translateY(-50%);
}
#greeting .ctsImg {
	width : 50vw;
	height : 720px;
}
#greeting .ctsImg.anim {
	transition : 0.4s ease-out;
	transform : translateY(60px);
	opacity : 0;
}
#greeting .ctsImg.anim.fire {
	transform : translateY(0);
	opacity : 1;
}
#greeting .ctsImg img {
	width : 100%;
	height : 100%;
	object-fit : cover;
	-o-object-fit : cover;
}

/* treatment */
#pageBody > section#treatment {
	margin-bottom : 0;
	padding : 0;
}
#treatment {
	position : relative;
	height : 780px;
	margin-bottom : 0;
}
#treatment .content {
	display : flex;
	justify-content : flex-end;
	align-items : center;
	width : 60%;
	height : 780px;
	background: #F8F8F8;
}
#treatment .content > .inner {
	margin-right : 10vw;
	padding : 24px 4vw;
}
#treatment .content.anim {
	transition : 0.4s ease-out;
	transform : translateY(60px);
	opacity : 0;
}
#treatment .content.anim.fire {
	transform : translateY(0);
	opacity : 1;
}
#treatment .content > .inner > p {
	margin-bottom : 2em;
}
#treatment .content > .inner > .copy {
	font-size : 1.4em;
	margin-bottom : 1em;
}
#treatment .content ul {
	display : grid;
	grid-template-columns : 1fr 1fr 1fr 1fr;
	grid-template-rows : 1fr auto;
	grid-gap : 16px;
	margin-bottom : 2.4em;
}
#treatment .content ul li:nth-child(1) {
	grid-column : 1 /3;
	grid-row : 1/2;
}
#treatment .content ul li:nth-child(2) {
	grid-column : 3 /5;
	grid-row : 1/2;
}
#treatment .content ul li:nth-child(3) {
	grid-column : 1 /2;
	grid-row : 2/3;
}
#treatment .content ul li:nth-child(4) {
	grid-column : 2 /3;
	grid-row : 2/3;
}
#treatment .content ul li:nth-child(5) {
	grid-column : 3 /4;
	grid-row : 2/3;
}
#treatment .content ul li:nth-child(6) {
	grid-column : 4 /5;
	grid-row : 2/3;
}
#treatment .content ul li {
	display : flex;
	flex-direction : column;
	padding : 1em;
	transition : 0.2s ease-out;
    background-color: #FFF;
	border: 2px solid #FFFFFF;
}
#treatment .content ul li:hover {
	border: 2px solid #0183BC;
}
#treatment .content ul li:nth-child(1),
#treatment .content ul li:nth-child(2) {
	text-align : center;
	border-radius : 3em;
}
#treatment .content ul li:nth-child(3),
#treatment .content ul li:nth-child(4),
#treatment .content ul li:nth-child(5),
#treatment .content ul li:nth-child(6) {
	border-radius : 12vw;
}
#treatment .content ul li .caption {
	font-size : clamp(0.65em, 1vw, 1em);
	order : 1;
	margin-bottom : 12px;
	letter-spacing : 0;
	color : #0183bc;
}
#treatment .content ul li .img {
	display : flex;
	justify-content : center;
	align-items : center;
	order : 2;
	height : 40px;
	margin-bottom : 8px;
}
#treatment .content ul li .img img {
	width : 100%;
	height : 100%;
	object-fit : contain;
}
#treatment .content ul li h3 {
	font-family : "新ゴ R";
	font-size : clamp(0.65em, 1vw, 1em);
	order : 3;
	margin-bottom : 5px;
	letter-spacing : 0;
}
#treatment .content .button {
	text-align : center;
}
#treatment .content .button a {
	display : inline-block;
	position : relative;
	max-width : 100%;
	padding : 1em 8em 1em 1em;
	transition : 0.2s ease-out;
	color : #ffffff;
	background-color : #0183bc;
}
#treatment .content .button a:hover {
  	opacity: 0.7;
	-moz-opacity:0.7;
	filter: alpha(opacity=70);
}
#treatment .content .button a::after {
	display : inline-block;
	position : absolute;
	top : 50%;
	right : 1em;
	content : ">";
	transform : translateY(-50%);
}

#treatment .ctsImg {
	position : absolute;
	top : 80px;
	left : 50%;
	width : 50%;
	height : 620px;
}
#treatment .ctsImg.anim {
	transition : 0.4s ease-out;
	transform : translateY(60px);
	opacity : 0;
}
#treatment .ctsImg.anim.fire {
	transform : translateY(0);
	opacity : 1;
}
#treatment .ctsImg img {
	width : 100%;
	height : 100%;
	object-fit : cover;
	-o-object-fit : cover;
}

/* clinic */
#pageBody > section#clinic {
	margin : 148px 0 0;
	background: #f0faff;
}
#clinic > .inner {
	display : -ms-grid;
	display :     grid;
	grid-template-columns : 1fr 1fr;
	grid-gap : 24px;
	position : relative;
	max-width : 1024px;
	margin : 0 auto;
	padding : 240px 0 100px;

	-ms-grid-columns : 1fr 24px 1fr;
}
#clinic .content > h2 {
	margin-bottom : 0.4em;
	text-align : left;
}
#clinic .content > p {
	margin-bottom : 1em;
}
#clinic .content .button a {
	display : inline-block;
	position : relative;
	max-width : 100%;
	padding : 1em 8em 1em 1em;
	transition : 0.2s ease-out;
	color : #ffffff;
	background-color : #0183bc;
}
#clinic .content .button a:hover {
  	opacity: 0.7;
	-moz-opacity:0.7;
	filter: alpha(opacity=70);
}
#clinic .content .button a::after {
	display : inline-block;
	position : absolute;
	top : 50%;
	right : 1em;
	content : ">";
	transform : translateY(-50%);
}
#clinic .schedule table {
	width : 100%;
	margin-bottom : 1.4em;
	border-collapse : collapse;
}
#clinic .schedule table th,
#clinic .schedule table td {
	font-family : "UD新ゴ コンデンス90 L";
	padding : 1em;
	text-align : center;
	letter-spacing : 0.0625em;
}
#clinic .schedule table th {
	font-family : "UD新ゴ コンデンス90 M";
	border-bottom : 1px solid #000000;
}
#clinic .schedule table tr > *:first-child {
	border-right : 1px solid #000000;
}
#clinic .schedule > p {
	font-size : 0.75em;
}
#clinic .ctsImg {
	display : grid;
	grid-template-columns : 1fr 1fr 1fr;
	grid-gap : 48px;
	position : absolute;
	top : -80px;
	padding : 0 32px;
}
#clinic .ctsImg.anim > * {
	transition : 0.4s ease-out;
	transform : translateY(60px);
	opacity : 0;
}
#clinic .ctsImg.anim.fire > * {
	transform : translateY(0);
	opacity : 1;
}
#clinic .ctsImg.anim.fire > *:nth-child(1) {
	transition-delay : 0ms;
}
#clinic .ctsImg.anim.fire > *:nth-child(2) {
	transition-delay : 150ms;
}
#clinic .ctsImg.anim.fire > *:nth-child(3) {
	transition-delay : 250ms;
}
#clinic .ctsImg img {
	width : 100%;
	height : 100%;
	object-fit : cover;
}

/* access */
#pageBody > section#access {
	position : relative;
	margin-bottom : 0;
	background-color : #ffffff;
}
#pageBody #access h2.contentTitle {
	align-items : flex-start;
}
#access > .googleMap {
	position : absolute;
	top : 0;
	left : 0;
	width : 50%;
	height : 100%;
}
#access > .content {
	margin-left : 50%;
}
#access > .content > .inner {
	padding : 48px 4vw;
}
#access > .content > .inner > p {
	margin-bottom : 1.2em;
}
#access > .content > .inner > p.name {
	font-size : 1.45em;
	margin-bottom : 0.75em;
}




/* dfNav */
#pageBody > section#dfNav {
	margin : 0;
	padding : 60px 32px;
	background-color : #F8F8F8;
}
#dfNav > ul {
	display : grid;
	grid-template-columns : 1fr 1fr 1fr;
	grid-gap : 24px;
	max-width : 1024px;
	margin : 0 auto;
}
#dfNav > ul li img {
	width : 100%;
}






/* --- for 2K or more pc ---
@media screen and (min-width: 1980px) {
} */

/* --- for HD pc ---
@media screen and (min-width: 1440px) and (max-width: 1979px) {
} */

/* --- for normal pc --- 
@media screen and (min-width: 1024px) and (max-width: 1439px) {
}*/

/* --- for tablet --- */
@media screen and (min-width: 768px) and (max-width: 1023px) {
	/* mainVisual */
	#mainVisual {
		height : 72vw;
	}
	#mainVisual .copy {
		font-size : 2em;
	}

	/* greeting */
	#greeting {
		height : 570px;
	}
	#greeting .content {
		height : 480px;
	}
	#greeting .ctsImg {
		height : 480px;
	}

	#treatment {
		height : 770px;
	}
	#treatment .content {
		height : 680px;
	}
	#treatment .ctsImg {
		height : 680px;
	}
	#treatment .content ul {
		grid-gap : 1vw;
	}
	#treatment .content ul li .img {
		height : 4.5vw;
	}

	/* clinic */
	#pageBody > section#clinic {
		margin-top : 128px;
	}
	#clinic > .inner {
		grid-template-columns : 1fr 55%;
		padding-top : 160px;
		padding-bottom : 60px;
	}
	#clinic .ctsImg {
		grid-gap : 24px;
	}
	#clinic .ctsImg img {
		height : 200px;
	}

}

/* --- for mobile --- */
@media screen and (max-width: 767px) {
	/* mainVisual */
	#mainVisual {
		height : 52vw;
	}
	#mainVisual .copy {
		position : absolute;
		top : 50%;
		right : 1em;
		font-size : 1.25em;
		line-height : 1.25;
		transform : translateY(-50%);
		text-shadow : 0 0 0.1em #ffffff, 0 0 0.25em #ffffff, 0 0 0.5em #ffffff;
		letter-spacing : 0.25em;
	}

	/* information */
	#information > .inner {
		display : block;
	}
	#information h2 {
		margin-right : 0;
		margin-bottom : 0.5em;
		padding-right : 0;
		border-right : none;
	}

	/* greeting */
	#greeting {
		height : auto;
	}
	#greeting .content {
		position : static;
		top : 0;
		left : 0;
		width : auto;
		height : auto;
		transform : none;
	}
	#greeting .content.anim {
		transform : translateX(0) translateY(60px);
	}
	#greeting .content.anim.fire {
		transform : translateX(0) translateY(0);
	}
	#greeting .content > .inner {
		max-width : 100%;
		margin-left : 0;
		padding : 24px;
	}
	#greeting .content .button a {
		display : block;
	}
	#greeting .ctsImg {
		width : auto;
		height : auto;
	}
	#greeting .ctsImg img {
		width : 100%;
		height : auto;
		object-fit : contain;
	}

	/* treatment */
	#treatment {
		height : auto;
	}
	#treatment .content {
		display : block;
		width : auto;
		height : auto;
	}
	#treatment .content > .inner {
		max-width : 100%;
		margin-right : 0;
		padding : 24px;
	}
	#treatment .content > .inner > p {
		margin-bottom : 2em;
	}
	#treatment .content > .inner > .copy {
		font-size : 1.4em;
		margin-bottom : 1em;
	}

	#treatment .content ul {
		display : grid;
		grid-template-columns : 1fr 1fr;
		grid-template-rows : 1fr auto auto;
		grid-gap : 16px;
		margin-bottom : 2.4em;
	}
	#treatment .content ul li {
		padding : 2em 1em;
	}
	#treatment .content ul li:nth-child(1) {
		grid-column : 1 /2;
		grid-row : 1/2;
	}
	#treatment .content ul li:nth-child(2) {
		grid-column : 2 /3;
		grid-row : 1/2;
	}
	#treatment .content ul li:nth-child(3) {
		border-radius : 50%;

		grid-column : 1 /2;
		grid-row : 2/3;
	}
	#treatment .content ul li:nth-child(4) {
		border-radius : 50%;

		grid-column : 2 /3;
		grid-row : 2/3;
	}
	#treatment .content ul li:nth-child(5) {
		border-radius : 50%;

		grid-column : 1 /2;
		grid-row : 3/4;
	}
	#treatment .content ul li:nth-child(6) {
		border-radius : 50%;

		grid-column : 2 /3;
		grid-row : 3/4;
	}
	#treatment .content ul li h3 {
		font-size : 1em;
		margin-bottom : 0.5em;
	}
	#treatment .content ul li .caption {
		font-size : 0.8em;
	}
	#treatment .content ul li .img {
		height : 60px;
		margin-bottom : 12px;
	}
	#treatment .content .button a {
		display : block;
		text-align : left;
	}
	#treatment .ctsImg {
		position : static;
		width : auto;
		height : auto;
	}

	/* clinic */
	#pageBody > section#clinic {
		margin : 0;
	}
	#pageBody > section#clinic > .inner {
		display : block;
		padding : 24px;
	}
	#clinic .content {
		margin-bottom : 24px;
	}
	#clinic .schedule table {
		margin-bottom : 1em;
	}
	#clinic .schedule table th,
	#clinic .schedule table td {
		font-size : 0.9em;
		padding : 0.8em 0.65em;
	}
	#clinic .schedule > p {
		margin-bottom : 32px;
	}
	#clinic .ctsImg {
		display : block;
		position : static;
		padding : 0;
	}
	#clinic .ctsImg > li:not(:last-child) {
		margin-bottom : 24px;
	}
	#clinic .ctsImg img {
		width : 100%;
		height : auto;
		object-fit : none;
	}

	#clinic .content .button a {
		display : block;
	}

	/* access */
	#pageBody > section#access {
		position : static;
		margin-bottom : 0;
		background-color : #ffffff;
	}
	#access > .googleMap {
		position : static;
		width : 100%;
		height : 240px;
	}
	#access > .content {
		margin-left : 0;
	}
	#access > .content > .inner {
		max-width : 100%;
		padding : 24px;
	}

	
	/* dfNav */
	
	#pageBody > section#dfNav {
		padding : 24px 12px;
	}
	#dfNav > ul {
		grid-template-columns : 1fr 1fr;
		grid-gap : 8px;
	}
	

}