@charset "utf-8";

/* ==================================================================
	service.css
	
=================================================================== */

/* =================================
   ■ 共通指定
================================== */
/* ◇ section
-------------------------------- */
section {
	padding: 50px 0;
	margin: 0 auto;
}

/* ◇ box
-------------------------------- */
.graybox {
	padding: 40px 30px;
	margin: 40px auto;
}
	.graybox p.text {
		margin-bottom: 0;
	}
	.graybox p.image {
		margin: auto;
		text-align: center;
	}
	.graybox .list li {
		background-color: #2D2853;
		border-radius: 4px;
		color: #fff;
		font-size: 1.8rem;
		padding: 17px 10px;
		width: 32%;
		max-width: 269px;
		margin: 20px auto 0;
		line-height: 1.2;
		display: flex;
		justify-content: center;
		align-items: center;
	}

/* ◇ calendar
-------------------------------- */
#calendar .calendar {
	position: relative;
	margin-top: 30px;
}
	#calendar .calendar::before {
		content: "";
		display: block;
		padding-top: 60%;
	}
	#calendar .calendar iframe {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
	}

/* =================================
   ■ index ページ
================================== */

/* =================================
   ■ diabetes ページ
================================== */
/* --------------------------------
   □ special
-------------------------------- */
#special h3.lv3_line {
	margin-bottom: 0;
}
/* licence */
#special #licence ul.list > li {
	width: 49%;
	max-width: 440px;
	margin-bottom: 40px;
}
#special #licence ul.list > li dt {
	width: 28%;
	max-width: 120px;
}
#special #licence ul.list > li dd {
	width: 68%;
	max-width: 298px;
}
	#special #licence ul.list > li dd .ttl {
		font-size: 2.0rem;
		letter-spacing: 0;
		margin-bottom: 10px;
	}
	#special #licence ul.list > li dd .ttl span,
	#special #licence ul.list > li dd .text {
		font-size: 1.5rem;
	}
	#special #licence ul.list > li dd .ttl span {
		margin-left: 10px;
	}

/* test */
#special #test .tableStyle {
	margin: 40px 0;
}
#special .whitebox {
	border: 4px solid #F1F1F1;
	padding: 40px 45px;
	margin: 40px auto;
}
	#special .whitebox p.image {
		width: 39%;
		max-width: 312px;
		text-align: center;
	}
	#special .whitebox dl {
		width: 58%;
		max-width: 467px;
	}
		#special .whitebox dt {
			font-size: 2rem;
			letter-spacing: 0.02em;
			line-height: 1.5;
			margin-bottom: 20px;
		}
		#special .whitebox dd {
			letter-spacing: 0;
		}

/* treatment */
#special #treatment .graybox {
	margin-bottom: 0;
}
	#special #treatment .graybox p.image {
		margin: 30px auto;
	}

/* --------------------------------
   □ symptom
-------------------------------- */
#symptom .asterisk._ss {
	font-size: 1.4rem;
}
#symptom .border dl {
	width: 49%;
	max-width: 441px;
	padding: 20px;
	border-top: 1px solid #36353D;
	border-bottom: 1px solid #36353D;
	margin-top: 40px;
}
	#symptom .border dt {
		font-size: 2.0rem;
		letter-spacing: 0;
		text-align: center;
		margin-bottom: 15px;
	}
	#symptom .border dd {
		font-size: 1.5rem;
		letter-spacing: 0;
		line-height: 1.8;
	}
#symptom .border#complications dl{
	margin-top: 20px;
}
	#symptom .border#complications dl:nth-child(n+3) {
		border-top: none;
		margin-top: 0;
	}

/* --------------------------------
   □ flow
-------------------------------- */
#flow .flexbox.list li {
	width: 100%;
	margin-top: 30px;
}
	#flow .flexbox.list dt {
		width: 31%;
		max-width: 283px;
	}
	#flow .flexbox.list dd {
		width: 66%;
		max-width: 597px;
	}
	#flow .flexbox.list dd .ttl {
		font-size: 2.0rem;
		letter-spacing: 0;
		margin-bottom: 10px;
	}
#flow .flexbox.image {
	margin-top: 40px;
}
	#flow .flexbox.image p {
		width: 49%;
		max-width: 439px;
	}

/* =================================
   ■ medecine ページ
================================== */

/* --------------------------------
   □ about
-------------------------------- */
#about .brackets {
	width: 100%;
	margin: 50px auto;
	padding: 30px;
	position: relative;
}
	#about .brackets:before,
	#about .brackets:after {
		content: '';
		width: 30px;
		height: 30px;
		position: absolute;
	}
	#about .brackets:before {
		border-left: solid 1px #36353D;
		border-top: solid 1px #36353D;
		top: 0;
		left: 0;
	}
	#about .brackets:after {
		border-right: solid 1px #36353D;
		border-bottom: solid 1px #36353D;
		bottom: 0;
		right: 0;
	}
	#about .brackets .text {
		font-size: 3rem;
		letter-spacing: 0;
		line-height: 2;
		text-align: center;
	}
#about .graybox {
	margin-bottom: 0;
}
	#about .graybox h5.lv5 {
		margin-bottom: 10px;
	}
	#about .graybox .list li {
		padding: 10px;
		width: 24%;
		max-width: 201px;
		margin-top: 10px;
		line-height: 1.2;
	}
		#about .graybox .list li.none {
			padding: 0;
		}

/* --------------------------------
   □ advanced
-------------------------------- */
#advanced .graybox {
	margin-bottom: 0;
}
#advanced .flexbox ul.listdot {
	width: 48%;
	max-width: 405px;
}

/* --------------------------------
   □ concern
-------------------------------- */
#concern .graybox {
	margin-bottom: 0;
}
#concern .flexbox .txtArea {
	width: 58%;
	max-width: 525px;
}
	#concern .flexbox .txtArea .text {
		margin-bottom: 20px;
	}
#concern .flexbox figure {
	width: 38%;
	max-width: 315px;
}
#concern .buttonStyle.arrow a {
    background: transparent;
    color: #36353D;
	border: 1px solid #36353D;
}

/* =================================
   ■ dermatology ページ
================================== */



@media (max-width: 1300px) and 
(min-width: 768px) {
	/* =================================
	   ■ 共通指定
	================================== */

	/* =================================
	   ■ index ページ
	================================== */

	/* =================================
	   ■ diabetes ページ
	================================== */
	
	/* --------------------------------
	   □ special
	-------------------------------- */

	/* --------------------------------
	   □ symptom
	-------------------------------- */

	/* --------------------------------
	   □ flow
	-------------------------------- */

	/* =================================
	   ■ medecine ページ
	================================== */

	/* =================================
	   ■ dermatology ページ
	================================== */

}


/* タブレット用
-------------------------------------------- */
@media (max-width: 999px) and 
(min-width: 768px) {
	/* =================================
	   ■ medecine ページ
	================================== */
	/* --------------------------------
	   □ about
	-------------------------------- */
	#about .graybox .list li {
		padding: 10px;
		width: 48%;
		max-width: 269px;
		font-size: 1.6rem;
	}

}


@media only screen and
(max-width : 767px) {
	/* =================================
	   ■ 共通指定
	================================== */
	/* ◇ section
	-------------------------------- */
	section {
		padding: 30px 0;
	}

	/* ◇ box
	-------------------------------- */
	.graybox {
		padding: 30px 4%;
		margin: 30px auto;
	}
		.graybox .list li {
			font-size: 1.6rem;
			padding: 10px;
		}

	/* ◇ calendar
	-------------------------------- */
	#calendar .calendar::before {
		content: "";
		display: block;
		padding-top: 65vh;
	}

	/* =================================
	   ■ index ページ
	================================== */



	/* =================================
	   ■ diabetes ページ
	================================== */
	/* --------------------------------
	   □ special
	-------------------------------- */
	/* licence */
	#special #licence ul.list > li {
		max-width: inherit;
		margin-bottom: 20px;
	}
		#special #licence ul.list > li:last-child {
			margin-bottom: 0;
		}
		#special #licence ul.list > li dt {
			width: 20%;
		}
		#special #licence ul.list > li dd {
			max-width: inherit;
			width: 76%;
		}
		#special #licence ul.list > li dd .ttl {
			font-size: 1.8rem;
		}

	/* test */
	#special #test .tableStyle {
		margin: 30px 0 15px;
	}
	#special .whitebox {
		border: 2px solid #F1F1F1;
		padding: 30px 4%;
		margin: 0 auto;
	}
		#special .whitebox p.image {
			margin-bottom: 20px;
		}
		#special .whitebox dt {
			font-size: 1.8rem;
			letter-spacing: 0;
		}
		#special .whitebox dd {
			font-size: 1.5rem;
			letter-spacing: 0;
			line-height: 1.8;
			text-align: left;
		}

	/* treatment */
	#special #treatment .graybox p.image {
		margin: 20px auto;
	}

	/* --------------------------------
	   □ symptom
	-------------------------------- */
	#symptom .asterisk._ss {
		margin-top: 20px;
	}
	#symptom .border {
		margin-top: 30px;
	}
		#symptom .border dl {
			max-width: inherit;
			padding: 0;
			margin: 0;
			border: none;
		}
		#symptom .border dt {
			font-size: 1.8rem;
			padding: 15px 0;
			border-top: none;
			background: #F1F1F1;
			margin-bottom: 0;
			text-align: center;
		}
		#symptom .border dd {
			padding: 15px 0;
			font-size: 1.5rem;
			line-height: 1.8;
		}
		#symptom .border#complications dl {
			margin-top: 0;
		}
	#symptom .graybox {
		margin-top: 15px;
	}

	/* --------------------------------
	   □ flow
	-------------------------------- */
	#flow .flexbox.list li {
		margin-top: 20px;
	}
		#flow .flexbox.list dt {
			max-width: inherit;
			margin-bottom: 20px;
		}
		#flow .flexbox.list dd {
			max-width: inherit;
		}
		#flow .flexbox.list dt img {
			width: 100%;
		}
		#flow .flexbox.list dd .ttl {
			font-size: 1.8rem;
		}
	#flow .flexbox.image {
		margin-top: 0;
	}
		#flow .flexbox.image .image {
			margin-top: 20px;
			max-width: inherit;
		}
		#flow .flexbox.image .image img {
			width: 100%;
		}

	/* =================================
	   ■ medecine ページ
	================================== */
	/* --------------------------------
	   □ about
	-------------------------------- */
	#about .brackets {
		padding: 4%;
		margin: 30px auto;
	}
		#about .brackets .text {
			font-size: 1.8rem;
		}
	#about .graybox .list li {
		padding: 10px;
		width: 100%;
		max-width: 269px;
	}

	/* --------------------------------
	   □ advanced
	-------------------------------- */
	#advanced .flexbox ul {
		margin-bottom: 0;
	}
		#advanced .flexbox ul:last-child {
			margin-bottom: 10px;
		}

	/* --------------------------------
	   □ concern
	-------------------------------- */
	#concern .buttonStyle.arrow {
		margin-bottom: 30px;
	}

	/* =================================
	   ■ dermatology ページ
	================================== */


	/* =================================
	   ■ lipid ページ
	================================== */
	/* --------------------------------
	   □ diagnosis
	-------------------------------- */
	body.lipid #diagnosis ul.listdot {
		margin-bottom: 0;
	}
}