@charset "utf-8";

/* =========================================================
   EQUIPMENT PAGE
   PCは既存common.cssを活用
   ========================================================= */

.equipment-page #undercommon section {
	overflow: visible;
}


/* =========================================================
   TABLET / SMARTPHONE
   ========================================================= */

@media screen and (max-width: 1021px) {

	.equipment-page #undercommon {
		width: auto;
		margin-right: 15px;
		margin-left: 15px;
	}


	/* =============================================
	   メイン画像
	   ============================================= */

	.equipment-page #undercommon h2.mainimg {
		margin-bottom: 35px;
	}

	.equipment-page #undercommon h2.mainimg img {
		display: block;
		width: 100%;
		height: auto;
		min-height: 88px;
		object-fit: cover;
	}


	/* =============================================
	   共通見出し
	   ============================================= */

	.equipment-page #undercommon section h3.ttl {
		font-size: 22px;
		line-height: 1.45;
		letter-spacing: .04em;
	}

	.equipment-page #undercommon section h4 {
		margin-bottom: 35px;
	}


	/* =====================================================
	   HOSPITAL EQUIPMENT
	   ===================================================== */

	.equipment-page #equipment article.first {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 35px 25px;
	}


	/* PCのfloat解除 */

	.equipment-page .bottom_margin,
	.equipment-page .bottom_margin2,
	.equipment-page .photo_place {
		float: none;
		width: auto;
		margin: 0;
		padding: 0;
		overflow: visible;
	}


	/*
	   外観・手術室は横幅いっぱい
	*/

	.equipment-page .bottom_margin,
	.equipment-page .bottom_margin2 {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 25px;
		align-items: flex-start;
	}


	/* 外観 */

	.equipment-page .bottom_margin p,
	.equipment-page .bottom_margin dl {
		float: none;
		width: auto;
		margin: 0;
	}


	/* 手術室 */

	.equipment-page .bottom_margin2 p,
	.equipment-page .bottom_margin2 dl {
		float: none;
		width: auto;
		margin: 0;
	}


	/* 画像 */

	.equipment-page #equipment article p {
		width: 100%;
		margin: 0;
	}

	.equipment-page #equipment article p img {
	display: block;
    max-width: 100%;
    height: auto;
    margin: 0px auto;
	}


	/* 通常設備カード */

	.equipment-page .photo_place {
		display: block;
	}

	.equipment-page .photo_place p,
	.equipment-page .photo_place dl {
		float: none;
		width: 100%;
		margin: 0;
	}


	/* テキスト */

	.equipment-page #equipment dl {
		box-sizing: border-box;
		width: 100%;
	}

	.equipment-page #equipment dl dt {
		margin: 15px 0 8px;
		padding: 0 0 7px;
		font-size: 17px;
		line-height: 1.5;
	}

	.equipment-page #equipment dl dd {
		padding: 0;
		font-size: 14px;
		line-height: 1.8;
	}


	/* =====================================================
	   MEDICAL EQUIPMENT
	   ===================================================== */

	.equipment-page .medical_machine {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 45px 30px;
		width: 100%;
	}


	/*
	   既存の510px固定・floatを解除
	*/

	.equipment-page .medical_machine dl {
		display: flex;
		flex-direction: column;
		float: none;
		width: 100%;
		height: auto;
		min-height: 0;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}


	/* タイトル */

	.equipment-page #medical dl dt {
		width: auto;
		margin: 0 0 12px;
		padding: 0 0 7px;
		font-size: 17px;
		line-height: 1.5;
	}


	/* 説明文 */

	.equipment-page .medical_machine dl > dd:not([class]) {
		order: 2;
		width: 100%;
		margin: 0;
		padding: 0;
		font-size: 14px;
		line-height: 1.8;
	}


	/* =============================================
	   医療機器画像
	   全position系をリセット
	   ============================================= */

	.equipment-page .medical_machine .position,
	.equipment-page .medical_machine .position05,
	.equipment-page .medical_machine .position06,
	.equipment-page .medical_machine .position07,
	.equipment-page .medical_machine .position08,
	.equipment-page .medical_machine .position09,
	.equipment-page .medical_machine .position10,
	.equipment-page .medical_machine .position13,
	.equipment-page .medical_machine .position14 {
		order: 1;
		float: none;
		width: 100%;
		height: 220px;
		margin: 0 0 18px;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}


	.equipment-page .medical_machine .position img,
	.equipment-page .medical_machine .position05 img,
	.equipment-page .medical_machine .position06 img,
	.equipment-page .medical_machine .position07 img,
	.equipment-page .medical_machine .position08 img,
	.equipment-page .medical_machine .position09 img,
	.equipment-page .medical_machine .position10 img,
	.equipment-page .medical_machine .position13 img,
	.equipment-page .medical_machine .position14 img {
		display: block;
		width: auto;
		max-width: 100%;
		max-height: 220px;
		height: auto;
		object-fit: contain;
	}

}


/* =========================================================
   SMARTPHONE
   ========================================================= */

@media screen and (max-width: 767px) {

	.equipment-page #undercommon section {
		margin-bottom: 70px;
	}


	/* =====================================================
	   院内設備
	   完全1列
	   ===================================================== */

	.equipment-page #equipment article.first {
		display: block;
	}


	.equipment-page .bottom_margin,
	.equipment-page .bottom_margin2,
	.equipment-page .photo_place {
		display: flex;
		flex-direction: column;
		width: 100%;
		margin-bottom: 45px;
	}


	/*
	   手術室はHTML上
	   dl → 画像
	   なので、スマホでは画像を上へ
	*/

	.equipment-page .bottom_margin2 p {
		order: 1;
	}

	.equipment-page .bottom_margin2 dl {
		order: 2;
	}


	.equipment-page #equipment article p img {
		max-width: 100%;
	}


	.equipment-page #equipment dl dt {
		margin-top: 15px;
		font-size: 17px;
	}


	.equipment-page #equipment dl dd {
		font-size: 14px;
		line-height: 1.85;
	}


	/* =====================================================
	   医療機器
	   完全1列
	   ===================================================== */

	.equipment-page .medical_machine {
		display: block;
	}


	.equipment-page .medical_machine dl {
		width: 100%;
		margin-bottom: 55px;
		padding-bottom: 45px;
		border-bottom: 1px solid #ddd;
	}


	.equipment-page .medical_machine dl:last-child {
		margin-bottom: 0;
		padding-bottom: 0;
		border-bottom: 0;
	}


	.equipment-page #medical dl dt {
		font-size: 18px;
	}


	.equipment-page .medical_machine dl > dd:not([class]) {
		font-size: 14px;
		line-height: 1.9;
	}


	.equipment-page .medical_machine .position,
	.equipment-page .medical_machine .position05,
	.equipment-page .medical_machine .position06,
	.equipment-page .medical_machine .position07,
	.equipment-page .medical_machine .position08,
	.equipment-page .medical_machine .position09,
	.equipment-page .medical_machine .position10,
	.equipment-page .medical_machine .position13,
	.equipment-page .medical_machine .position14 {
		height: 260px;
		margin-bottom: 20px;
	}


	.equipment-page .medical_machine .position img,
	.equipment-page .medical_machine .position05 img,
	.equipment-page .medical_machine .position06 img,
	.equipment-page .medical_machine .position07 img,
	.equipment-page .medical_machine .position08 img,
	.equipment-page .medical_machine .position09 img,
	.equipment-page .medical_machine .position10 img,
	.equipment-page .medical_machine .position13 img,
	.equipment-page .medical_machine .position14 img {
		max-height: 260px;
	}

}


/* =========================================================
   SMALL SMARTPHONE
   ========================================================= */

@media screen and (max-width: 480px) {

	.equipment-page #undercommon {
		margin-right: 12px;
		margin-left: 12px;
	}


	.equipment-page .bottom_margin,
	.equipment-page .bottom_margin2,
	.equipment-page .photo_place {
		margin-bottom: 40px;
	}


	.equipment-page .medical_machine dl {
		margin-bottom: 45px;
		padding-bottom: 40px;
	}


	.equipment-page .medical_machine .position,
	.equipment-page .medical_machine .position05,
	.equipment-page .medical_machine .position06,
	.equipment-page .medical_machine .position07,
	.equipment-page .medical_machine .position08,
	.equipment-page .medical_machine .position09,
	.equipment-page .medical_machine .position10,
	.equipment-page .medical_machine .position13,
	.equipment-page .medical_machine .position14 {
		height: 220px;
	}


	.equipment-page .medical_machine .position img,
	.equipment-page .medical_machine .position05 img,
	.equipment-page .medical_machine .position06 img,
	.equipment-page .medical_machine .position07 img,
	.equipment-page .medical_machine .position08 img,
	.equipment-page .medical_machine .position09 img,
	.equipment-page .medical_machine .position10 img,
	.equipment-page .medical_machine .position13 img,
	.equipment-page .medical_machine .position14 img {
		max-height: 220px;
	}

}