@charset "utf-8";

.anim {
	transition : 0.4s ease-out;
	transform : translateY(60px);
	opacity : 0;
}
.anim.fire {
	transform : translateY(0);
	opacity : 1;
}

#pageTitle {
	background : url(/housevisit/img/bg_content_header.jpg) 50% 50% no-repeat;
	background-size : cover;
}

#jqPopupContent_container .ctsImg {
	max-width : 540px;
	margin-bottom : 0.5em;
}
#jqPopupContent_container .ctsImg img {
	width : 100%;
}
#jqPopupContent_container .caption {
	font-size : 0.8em;
	letter-spacing : 1px;
}

nav#ctsNav {
	z-index : 2;
	position : relative;
	margin-bottom : 32px;
}
nav#ctsNav ul {
	display : grid;
	grid-template-columns : auto auto auto auto auto;
	grid-gap : 16px;
	max-width : 1024px;
	margin : 0 auto;
	padding : 0 32px;
}
nav#ctsNav ul li {
	display : flex;
}
nav#ctsNav ul li a {
	display : flex;
	line-height : 1.45;
	flex-basis : 100%;
	justify-content : center;
	align-items : center;
	padding : 0.8em 0.4em;
	color : #ffffff;
	border-radius : 3em;
	background-color : #73ccef;
}
nav#ctsNav ul li a:hover {
  	opacity: 0.7;
	-moz-opacity:0.7;
	filter: alpha(opacity=70);
}
/* visitDentistry inspection */
#pageBody > section#visitDentistry,
#pageBody > section#inspection {
	position : relative;
	margin-top : -120px;
	padding-top : 120px;
}
#pageBody #visitDentistry h2.contentTitle,
#pageBody #inspection h2.contentTitle {
	align-items : flex-start;
}
#inspection > .inner {
	display : flex;
	justify-content : flex-end;
	max-width : 1024px;
	margin : 0 auto;
}
#visitDentistry .leadTexts {
	margin-right : calc(calc(100vw * 0.35) - calc(calc(100vw - 1024px) / 2));
	margin-bottom : 48px;
	padding-right : 48px;
}
#visitDentistry .leadTexts h3 {
	font-size : 1.75em;
	text-align : left;
}
#inspection .leadTexts {
	margin-bottom : 48px;
	margin-left : 50%;
	padding-left : 48px;
}
#inspection .leadTexts > p:not(:last-child) {
	margin-bottom : 1em;
}
#visitDentistry .merit {
	display : flex;
}
#visitDentistry .merit h3 {
	display : flex;
	font-size : 1.2em;
	flex-basis : 12em;
	flex-grow : 1;
	justify-content : center;
	align-items : center;
	margin : 0;
	padding : 24px;
	background-color : #0183bc;
	color: #FFF;
}
#visitDentistry .merit ul {
	flex-grow : 1;
	padding : 32px;
	background-color : #fafafa;
}
#visitDentistry .merit ul > li {
	position : relative;
	line-height : 1.25;
	margin-left : 1.4em;
}
#visitDentistry .merit ul > li::before {
	display : inline-block;
	position : absolute;
	top : 0.1em;
	left : -1.4em;
	width : 10px;
	height : 5px;
	content : "";
	transform : translateY(-50%);
	transform : rotate(-45deg);
	border-bottom : 3px solid #73ccef;
	border-left : 3px solid #73ccef;
}
#visitDentistry .merit ul > li:not(:last-child) {
	margin-bottom : 0.8em;
}
#visitDentistry .ctsImg {
	position : absolute;
	top : 0;
	right : 0;
	width : 35%;
	height : 400px;
	padding-top : 7.2em;
}
#inspection .ctsImg {
	display : grid;
	grid-template-columns : 1fr 1fr 1fr;
	grid-template-rows : 1fr auto auto;
	position : absolute;
	top : 0;
	left : 0;
	width : 50%;
	padding-top : 7.2em;
}
#inspection .ctsImg > li:first-child {
	max-height : 400px;

	grid-column : 1 / 4;
}
#inspection .ctsImg .caption {
	font-size : 0.65em;
	padding : 0.4em;
	text-align : center;
	letter-spacing : 0.0625em;
	background-color : #f6f3f0;
}
#visitDentistry .ctsImg img,
#inspection .ctsImg img {
	width : 100%;
}

/* oralFrailty */
#pageBody > section#oralFrailty {
	background: #fafafa;
}
#oralFrailty > .inner {
	padding-top : 48px;
	padding-bottom : 48px;
}
#oralFrailty .ctsBody > p:not(:last-child) {
	margin-bottom : 1em;
}
#oralFrailty .ctsImg {
	display : inline;
	float : right;
	width : 50%;
	margin : 0 0 2em 2em;
}
#oralFrailty .ctsImg img {
	width : 100%;
}

/* area */
#area {
	margin-top : -120px;
	padding-top : 120px;
}
#area > .inner {
	display : grid;
	grid-template-columns : 1fr 1fr;
	grid-gap : 32px;
}
#area .areaList {
	margin-bottom : 24px;
	padding : 2em;
	background: #fafafa;
}
#area .areaList > ul {
	display : grid;
	grid-template-columns : 1fr 1fr 1fr 1fr ;
	grid-gap: 8px;
}
#area .areaList > ul > li {
	flex-basis : 25%;
}
#area .areaList > ul:not(:last-child),
#area .areaList > p:not(:last-child) {
	margin-bottom : 1em;
}

#area .ctsImg img {
	width : 100%;
}

/* flow */
#flow {
	margin-top : -120px;
	padding-top : 120px;
}
#flow #flowList > li {
	display : grid;
	grid-template-columns : 20% 80%;
	position : relative;
}
#flow #flowList > li:not(:last-child) {
	padding-bottom : 64px;
}
#flow #flowList > li:not(:last-child)::after {
	display : inline-block;
	position : absolute;
	bottom : 24px;
	left : 50%;
	width : 0;
	height : 0;
	content : "";
	transform : translateX(-50%);
	border-width : 40px 100px 0 100px;
	border-style : solid;
	border-color : #0183bc transparent transparent transparent;
}
#flow #flowList h3 {
	display : flex;
	font-size : 1em;
	justify-content : center;
	align-items : center;
	margin-bottom : 0;
	padding : 1.2em;
	color : #ffffff;
	background-color : #0183bc;
}
#flow #flowList .content {
	padding : 2em;
	background-color : #f0faff;
}
#flow #flowList .content .contactInfo {
	font-size : 1.4em;
	font-weight : 700;
}
#flow #flowList .content .contactInfo::before {
	display : inline;
	margin-right : 0.25em;
	padding-left : 1em;
	content : "";
	background : url(/housevisit/img/icon_tel.png) 50% no-repeat;
	background-size : contain;
}

/* fee */
#fee {
	margin-top : -120px;
	padding-top : 120px;
}
#fee .leadTexts {
	max-width : 42em;
	margin : 0 auto 24px;
}
#fee .leadTexts > p {
	text-indent : -0.7em;
}
#fee .insurance {
	display : grid;
	grid-template-columns : 1fr 1fr;
	grid-gap : 48px;
	position : relative;
	margin-bottom : 32px;
	padding : 60px 32px 32px;
	background: #f0faff;
}
#fee .insurance::before {
	display : inline-block;
	position : absolute;
	top : 50%;
	left : 50%;
	width : 20px;
	height : 1px;
	content : "";
	transform : translateX(-50%);
	background-color : #000000;
}
#fee .insurance::after {
	display : inline-block;
	position : absolute;
	top : 50%;
	left : 50%;
	width : 1px;
	height : 20px;
	content : "";
	transform : translateY(-50%);
	background-color : #000000;
}
#fee .insurance .content {
	font-size : 0.8em;
	padding : 1.6em;
	letter-spacing : 0.0625em;
	background-color : #ffffff;
}
#fee .insurance h3 {
	font-size : 1.4em;
	width : 6em;
	margin : -2.2em auto 1.6em;
	padding : 0.4em 0.6em;
	color : #ffffff;
	background-color : #0183bc;
}
#fee .insurance .price {
	margin-bottom : 1.2em;
	text-align : center;
}
#fee .insurance .price span {
	font-size : 1.6em;
	line-height : 1.45;
	text-decoration : underline;
}
#fee .insurance > .content:nth-child(2) .price span {
	margin-right : 0;
}
#fee .insurance .column {
	display : grid;
	grid-template-columns : 1fr 1fr;
	grid-gap : 32px;
	position : relative;
	margin-bottom : 16px;
}
#fee .insurance .column::before {
	display : inline-block;
	position : absolute;
	top : 50%;
	left : 50%;
	width : 12px;
	height : 1px;
	content : "";
	transform : translateX(-50%);
	background-color : #0183bc;
}
#fee .insurance .column::after {
	display : inline-block;
	position : absolute;
	top : 50%;
	left : 50%;
	width : 1px;
	height : 12px;
	content : "";
	transform : translateY(-50%);
	background-color : #0183bc;
}
#fee .insurance .menu {
	padding : 2em 1.4em;
	text-align : center;
	border : 1px solid #0183bc;
}
#fee .insurance .menu h4 {
	font-size : 1.2em;
	margin-bottom : 0.6em;
}

#fee .welfare {
	display : grid;
	grid-template-columns : 30% 70%;
	position : relative;
}
#fee .welfare h3 {
	display : flex;
	font-size : 1.25em;
	justify-content : center;
	align-items : center;
	margin-bottom : 0;
	padding : 1.2em;
	background-color : #0183bc;
	color: #FFF;
}
#fee .welfare .content {
	padding : 2em;
	background-color : #fafafa;
}
#fee .welfare .content > p {
	position : relative;
	margin-bottom : 0.2em;
	padding-left : 1.4em;
}
#fee .welfare .content > p::before {
	position : absolute;
	top : 0.5em;
	left : 0;
	width : 10px;
	height : 5px;
	content : "";
	transform : rotate(-45deg);
	border-bottom : 3px solid #73ccef;
	border-left : 3px solid #73ccef;
}

/* --- 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) {
	#visitDentistry .leadTexts {
		margin-right : calc(100vw * 0.35);
		padding-right : 0;
	}
	#inspection .leadTexts {
		padding-left : 24px;
	}
}

/* --- for mobile --- */
@media screen and (max-width: 767px) {
	nav#ctsNav ul {
		display : grid;
		grid-template-columns : auto auto auto;
		grid-gap : 8px;
		font-size : 0.75em;
		margin : 0 auto;
		padding : 0 24px;
		letter-spacing : 1px;
	}
	#visitDentistry .leadTexts {
		margin-right : 0;
		margin-bottom : 32px;
		padding-right : 0;
	}
	#visitDentistry .merit {
		display : block;
		margin-bottom : 24px;
	}
	#visitDentistry .ctsImg {
		position : static;
		width : auto;
		height : auto;
		padding-top : 0;
	}

	#oralFrailty > .inner .ctsImg {
		display : block;
		float : none;
		width : 100%;
		margin : 0 0 2em 0;
	}

	#inspection .leadTexts {
		margin-bottom : 32px;
		margin-left : 0;
		padding-left : 0;
	}
	#inspection .ctsImg {
		grid-template-columns : 1fr 1fr;
		position : static;
		width : auto;
		height : auto;
		padding-top : 0;
	}
	#inspection .ctsImg > li:first-child {
		grid-column : 1 / 3;
	}

	#area > .inner {
		display : block;
	}
	#area .areaList > ul {
		grid-template-columns : 1fr 1fr 1fr;
		grid-gap : 8px;
	}
	#area .ctsBody {
		margin-bottom : 24px;
	}
	#flow #flowList > li {
		display : block;
	}
	#flow #flowList .content .contactInfo {
		text-align : center;
	}

	#fee .leadTexts {
		padding-left : 1em;
	}
	#fee .insurance {
		display : block;
		margin-bottom : 32px;
		padding : 32px 16px 16px;
	}
	#fee .insurance .content:first-child {
		margin-bottom : 4em;
	}
	#fee .insurance::before,
	#fee .insurance::after {
		display : none;
	}
	#fee .welfare {
		display : block;
	}
}