@charset "utf-8";

/* =========================================================
   HEALTH CHECK PAGE
   PCは既存common.cssを使用
   1021px以下のみレスポンシブ対応
   ========================================================= */

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

@media screen and (min-width: 1021px) {
	.sp{
		display: none;
	}
}

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

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

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

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

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


	/* =====================================================
	   INTRO
	   ===================================================== */

	.check-page #intro {
		background: none;
	}
	
	img.check01{
		display: block;
		margin: 0px auto 20px auto;
		text-align: center;
		width: 100%;
		height: auto;
	}

	.check-page #intro p {
		margin: 0 0 20px !important;
		font-size: 14px;
		line-height: 1.95;
	}

	.check-page #intro p br {
		display: none;
	}

	.check-page #intro h5 {
		margin-top: 20px;
		font-size: 18px;
		line-height: 1.6;
	}


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

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

	.check-page #undercommon section h4 {
		margin-bottom: 30px;
	}


	/* =====================================================
	   BASIC PACK
	   ===================================================== */

	.check-page #BASIC {
		clear: both;
	}

	/*
	   PCでは
	   左1枚＋右6枚
	   ですが、スマホでは全部1列
	*/

	.check-page #BASIC .left_box,
	.check-page #BASIC .right_box {
		float: none;
		width: 100%;
		margin: 0;
		padding: 0;
	}

	.check-page #BASIC .right_box {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		margin-top: 10px;
	}

	.check-page #BASIC .left_box li,
	.check-page #BASIC .right_box li {
		float: none;
		width: 100%;
		margin: 0;
		box-sizing: border-box;
		background-size: cover;
		background-position: right center;
		border: 7px solid #e1e1e1;
	}


	/*
	   大カード
	*/

	.check-page #BASIC .left_box .photo_bg01 {
		height: 240px;
	}


	/*
	   小カード
	*/

	.check-page #BASIC .right_box li {
		height: 113px;
	}


	/* dl */

	.check-page #BASIC li dl,
	.check-page #BASIC .left_box dl,
	.check-page #BASIC .right_box dl {
		width: auto !important;
		margin: 0 !important;
		padding: 18px;
		box-sizing: border-box;
	}

	.check-page #BASIC li dt,
	.check-page #BASIC .left_box dl dt,
	.check-page #BASIC .right_box dt {
		width: auto;
		margin: 0 !important;
		font-size: 17px;
		line-height: 1.5;
	}

	.check-page #BASIC li dd {
		width: auto !important;
		margin: 8px 0 0 !important;
		font-size: 12px !important;
		line-height: 1.6;
	}


	/* =====================================================
	   OPTION
	   ===================================================== */

	.check-page #option {
		clear: both;
		padding-top: 70px;
	}

	.check-page #option .left_box01,
	.check-page #option .center_box,
	.check-page #option .right_box01 {
		float: none;
		width: 100%;
		margin: 0;
		padding: 0;
	}


	/*
	   OPTIONは
	   大1 + 小4 + 大1
	*/

	.check-page #option .center_box {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		margin: 10px 0;
	}

	.check-page #option .left_box01 li,
	.check-page #option .center_box li,
	.check-page #option .right_box01 li {
		float: none;
		width: 100%;
		margin: 0;
		box-sizing: border-box;
		background-size: cover;
		background-position: center center;
	}

	.check-page #option .left_box01 .photo_bg01,
	.check-page #option .right_box01 .photo_bg07 {
		height: 240px;
	}

	.check-page #option .center_box li {
		height: 113px;
	}


	/* dl */

	.check-page #option li dl,
	.check-page #option .left_box01 dl,
	.check-page #option .center_box dl,
	.check-page #option .right_box01 dl {
		width: auto !important;
		margin: 0 !important;
		padding: 18px;
		box-sizing: border-box;
	}

	.check-page #option li dt,
	.check-page #option .left_box01 dl dt,
	.check-page #option .center_box dt,
	.check-page #option .right_box01 dt {
		width: auto;
		margin: 0 !important;
		font-size: 17px;
		line-height: 1.5;
	}

	.check-page #option li dd,
	.check-page #option .left_box01 dl dd,
	.check-page #option .center_box dd,
	.check-page #option .right_box01 dd {
		width: auto !important;
		margin: 8px 0 0 !important;
		font-size: 12px !important;
		line-height: 1.6;
	}

#BASIC .photo_bg01 {
  background: url(../img/medical_photo01_sp.jpg) no-repeat right center;
	background-size: auto !important;
}
#BASIC .photo_bg02 {
  background: url(../img/medical_photo02_sp.jpg) no-repeat right center;
  background-size: auto !important;
}
#BASIC .photo_bg03 {
  background: url(../img/medical_photo03_sp.jpg) no-repeat right center;
	background-size: auto !important;
}
#BASIC .photo_bg04 {
  background: url(../img/medical_photo04_sp.jpg) no-repeat right center;
	background-size: auto !important;
}
#BASIC .photo_bg05 {
  background: url(../img/medical_photo05_sp.jpg) no-repeat right center;
	background-size: auto !important;
}
#BASIC .photo_bg06 {
  background: url(../img/medical_photo06_sp.jpg) no-repeat right center;
	background-size: auto !important;
}
#BASIC .photo_bg07 {
  background: url(../img/medical_photo07_sp.jpg) no-repeat right center;
	background-size: auto !important;
}
#option .photo_bg01{
background: url(../img/medical_photo08_sp.jpg) no-repeat right center;
background-size: auto !important;
}
#option .photo_bg02{
background: url(../img/medical_photo09_sp.jpg) no-repeat right center;
background-size: auto !important;
}
#option .photo_bg03{
background: url(../img/medical_photo11_sp.jpg) no-repeat right center;
background-size: auto !important;
}
#option .photo_bg04{
background: url(../img/medical_photo10_sp.jpg) no-repeat right center;
background-size: auto !important;
}
#option .photo_bg05{
background: url(../img/medical_photo12_sp.jpg) no-repeat right center;
background-size: auto !important;
}
#option .photo_bg06{
background: url(../img/medical_photo13_sp.jpg) no-repeat right center;
background-size: auto !important;
}
#option .photo_bg07{
background: url(../img/medical_photo13_sp.jpg) no-repeat right center;
background-size: auto !important;
}
.check-page #option .left_box01 li,
.check-page #option .center_box li,
.check-page #option .right_box01 li{
border: 7px solid #e1e1e1;
	background-position: right center;
}

}


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

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

	.check-page #undercommon section {
		margin-bottom: 65px;
	}


	/* INTRO */

	.check-page #intro {
		/*padding-top: 55%;*/
	}


	/* =====================================================
	   BASIC
	   スマホは完全1列
	   ===================================================== */

	.check-page #BASIC .right_box {
		display: block;
		margin-top: 10px;
	}

	.check-page #BASIC .left_box li,
	.check-page #BASIC .right_box li {
		height: 115px;
		margin-bottom: 10px;
	}

	.check-page #BASIC .left_box .photo_bg01 {
		height: 230px;
	}


	/* =====================================================
	   OPTION
	   スマホは完全1列
	   ===================================================== */

	.check-page #option {
		padding-top: 50px;
	}

	.check-page #option .center_box {
		display: block;
		margin: 10px 0;
	}

	.check-page #option .left_box01 li,
	.check-page #option .center_box li,
	.check-page #option .right_box01 li {
		height: 115px;
		margin-bottom: 10px;
	}

	.check-page #option .left_box01 .photo_bg01,
	.check-page #option .right_box01 .photo_bg07 {
		height: 230px;
	}

}


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

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

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

	.check-page #intro {
		padding-top: 60%;
	}

	.check-page #BASIC .left_box li,
	.check-page #BASIC .right_box li,
	.check-page #option .left_box01 li,
	.check-page #option .center_box li,
	.check-page #option .right_box01 li {
		height: 160px;
	}

	.check-page #BASIC .left_box .photo_bg01,
	.check-page #option .left_box01 .photo_bg01,
	.check-page #option .right_box01 .photo_bg07 {
		height: 210px;
	}

}