@charset "utf-8";


/* =================================================================
    
   商品説明ページ　.product

   ================================================================= */
     

/* ----------  メインイメージ（.product-main）  ---------- */ 

.top-image{
	background:url(../img/product/product-main-img.png) no-repeat center bottom;
}


/* ----------  Dr.Thomasとは（.about-dr.thomas）  ---------- */ 

 .merit_02 .box{
	padding:56px 0 0;
}
.about-thomas{
	  background:#fff;
}
.health-management{
	padding-top:40px;
	border-top:1px solid #333;
}
.health-management-support{
	margin-top:40px;
}
.health-management-support h4{
	background:#fff;
	display:inline-block;
	padding:0 16px;
}
.health-management-support hr{
	border:none;
	border-bottom:#003489 8px solid;
	margin-top:-20px;
}
.health-management-detail{
	margin-top:40px;
	background:url(../img/product/detail-thomas-arrow.png) no-repeat 40% 50%;
}
.detail-demerit{
	float:left;
}
.detail-demerit li{
	margin-bottom:8px;
	padding:16px 8px;
	font-size:14px;
	color:#fff;
	background:#535353;
	border-radius:8px;	
}
.detail-thomas{
	float:left;
	margin:0 90px 0 40px;
	padding:24px;
	text-align:left;
	background:#fff;
	border:#003489 4px solid;
	border-radius:8px;
}
.detail-thomas h4{
	font-size:24px;
}
.detail-thomas .alignright li{
	width:90px;
	height:70px;
	float:left;
	margin:0 0 16px 8px;
	padding-top:20px;
	color:#fff;
	text-align:center;
	background:#003489;
	border-radius:45px;
	font-size:12px;
}
.detail-thomas dl{
	clear:both;
	padding:5px 10px;
		margin-top:8px;
		font-size:14px;
}
.detail-thomas dl dt{
	width:140px;
		color:#fff;
		float:left;
		display:block;
}
.detail-thomas dl dd{
	width:320px;
	margin-left:16px;
	font-size:12px;
	float:left;
		display:block;
}
.detail-thomas01{
	background:#ff9800;
}
.detail-thomas02{
	background:#f44336;
}
.detail-thomas03{
	background:#009688;
}
.detail-merit{
	float:left;
}
.detail-merit li{
	margin-bottom:8px;
	padding:16px 8px;
	font-size:14px;
	color:#333;
	background:#d2d2d2;
	border-radius:8px;	
}
.health-management-support h5{
	background:#003489;
	color:#fff;
	width:30px;
	padding:44px 10px;
	font-size:30px;
	float:right;
}


/* ----------  機能概要（.functional-overview）  ---------- */ 

.functional-overview{
	 background:#eefaff;
}
.functional-overview p{
	text-align:left;
}
.functional-detail{
	z-index:9961;
	position: relative;
	padding:0px 40px 24px;
}
.functional-detail ul.inline li{
	margin-top:16px;
	vertical-align:text-top;
	text-align:center;
}
.functional-detail li{
	margin-bottom:8px;
	text-align:left;
	font-size:12px;
	position:relative;
	display:inline-block;
}

.functional-detail>li:first-child{
	margin-top:24px;
	width:207px;
	float:left;
}
.functional-detail>li:nth-child(2){
	text-align:center;
	margin-left:53px;
}
.functional-detail>li:last-child{
	width:207px;
	float:right;
	margin-right:53px;
}
.functional-detail li:first-child li:first-child{
	width:207px;
	background:url(../img/top/merit_03-detail-bg01.png) no-repeat;
	height:48px;
	padding:8px 41px 16px 12px;
}
.functional-detail li:first-child li:nth-child(2){
	width:207px;
	background:url(../img/top/merit_03-detail-bg02.png) no-repeat;
	height:29px;
	padding:8px 41px 16px 12px;
}
.functional-detail li:first-child li:nth-child(3){
	width:207px;
	background:url(../img/top/merit_03-detail-bg03.png) no-repeat;
	height:29px;
	padding:8px 41px 16px 12px;
}
.functional-detail li:first-child li:nth-child(4){
	width:207px;
	background:url(../img/top/merit_03-detail-bg04.png) no-repeat;
	height:29px;
	padding:8px 41px 16px 12px;
}
.functional-detail>li:last-child li:first-child{
	width:207px;
	background:url(../img/top/merit_03-detail-bg05.png) no-repeat;
	height:29px;
	margin-top:56px;
	padding:8px 12px 16px 41px;
}
.functional-detail>li:last-child li:nth-child(2){
	width:207px;
	background:url(../img/top/merit_03-detail-bg06.png) no-repeat;
	height:48px;
	padding:8px 12px 16px 41px;
}
.functional-detail>li:last-child li:nth-child(3){
	width:207px;
	background:url(../img/top/merit_03-detail-bg07.png) no-repeat;
	height:29px;
	padding:8px 12px 16px 41px;
}


/* ----------  Dr.Thomas　８つのプログラム（.program-list）  ---------- */ 
.program-list {
	  background:#89deff;
}
.program-list ul.program li{
	float:left;
		margin:8px 8px 0 0;
	background:#fff;
	border:#89deff 1px solid;
	position:relative;
	box-sizing:border-box;
	text-align:center;
	display:table;
}
.program-list ul.program li:nth-child(4),.merit_04 ul.program li:nth-child(8){
	margin:8px 0 0 0;
}
.program-list ul.program li .list04-box{
	display:table-cell;
	width:203px;
	height:134px;
	padding:16px;
	color:#003489;
	text-align:center;
	vertical-align:middle;
}


/*.program-list ul.program li a:hover{
	color:#fec200;
}*/
.program-list ul.program li:nth-child(1) .list04-box{
	background:url(../img/top/program01.png) no-repeat center;
	background-size:auto;
}
.program-list ul.program li:nth-child(2) .list04-box{
	background:url(../img/top/program02.png) no-repeat center;
	background-size:auto;
}
.program-list ul.program li:nth-child(3) .list04-box{
	background:url(../img/top/program03.png) no-repeat center;
	background-size:auto;
}
.program-list ul.program li:nth-child(4) .list04-box{
	background:url(../img/top/program04.png) no-repeat center;
	background-size:auto;
}
.program-list ul.program li:nth-child(5) .list04-box{
	background:url(../img/top/program06.png) no-repeat center;
	background-size:auto;
}
.program-list ul.program li:nth-child(6) .list04-box{
	background:url(../img/top/program07.png) no-repeat center;
	background-size:auto;
}
.program-list ul.program li:nth-child(7) .list04-box{
	background:url(../img/top/program08.png) no-repeat center;
	background-size:auto;
}
.program-list ul.program li:nth-child(8) .list04-box{
	background:url(../img/top/program05.png) no-repeat center;
	background-size:auto;
}


/* ----------  システム監修医（.supervision）  ---------- */

.supervision{
	padding:80px 0 40px;
	background:#fff;
}

.supervision .box{
	padding:80px 0 40px;
}
.sano{
	margin-top:24px;
	text-align:left;
}
.sano dl{
	display:block;
	width:712px;
	float:left;
}
.sano dt{
	padding:16px 0;
	color:#003489;
	font-size:24px;
	line-height:1em;
	border-top:#003489 1px solid;
	border-bottom:#003489 1px solid;
	font-weight:700;
}
.sano dd{
	margin-top:16px;
}
.sano p{
	padding:16px;
	border:#333 solid 1px;
	clear:both;
	word-break:break-all;
}

/* =================================================================

   メディアクエリー

   ================================================================= */

@media only screen and (max-width: 960px) {
.top-image{
	background:url(../img/product/product-main-img-sp.png) no-repeat center bottom;
}
.top-image .box{
		background:none;
		text-align:center;
	}
	
	.top-image img{
		max-width:70%;
	}
	h1{
		width:100%;
		margin:32px 0;
		font-size:19px;
		text-align:center;
	}
	.top-image .box h1 img.pc-none{
		max-width:80%;
		margin:-10% auto -20%;
	}
	.top-image ul.inline{
		display:block;
		text-align:center;
	}
	.top-image ul.inline li{
		width:40%;
		margin:0 1%;
	}
	.top-image ul.inline li a{
		margin:0;
	}  
	.top-image h3{
		font-size:18px;
		text-align:center;
	}
	.top-image h3 img.top-chach{
		max-width:100%;
	}

/* ----------  Dr.Thomasとは（.about-dr.thomas）  ---------- */ 
.health-management-detail {
    background:none;
}
.health-management-detail img.arrow{
	width:auto;
	margin:auto;
		-webkit-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
}
.detail-demerit{
	float:none;
	display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}
.detail-demerit li{
	display:inline-block;
	width:48%;
	margin:4px 1%;
	box-sizing:border-box;
}
.detail-thomas{
	float:none;
width:100%;

	margin:0;
	padding:16px;
box-sizing:border-box;
	text-align:left;
	background:#fff;
	border:#003489 4px solid;
	border-radius:8px;
}

.detail-thomas .alignleft,.detail-thomas .alignright{
	float:none;
display:block;
text-align:center
}
.detail-thomas .alignright li{
	width:30%;
	height:70px;
	margin:0 0 16px 8px;
	padding-top:20px;
	color:#fff;
	text-align:center;
	background:#003489;
	border-radius:45px;
	font-size:12px;
}
.detail-thomas dl{
	clear:both;
	padding:5px 10px;
		margin-top:8px;
		font-size:14px;
}
.detail-thomas dl dt{
	width:90%;
		color:#fff;
		float:left;
		display:block;
}
.detail-thomas dl dd{
	width:90%;
	margin-left:16px;
	font-size:12px;
	float:left;
		display:block;
}
.detail-thomas01{
	background:#ff9800;
}
.detail-thomas02{
	background:#f44336;
}
.detail-thomas03{
	background:#009688;
}
.detail-merit{
	float:none;
	display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}
.detail-merit li{	
display:inline-block;
	width:48%;
	margin:4px 1%;
	box-sizing:border-box;
	margin-bottom:8px;
	padding:16px 8px;
	font-size:14px;
	color:#333;
	background:#d2d2d2;
	border-radius:8px;	
}

.health-management-support h5{
	background:#003489;
	color:#fff;
	width:100%;
	padding:10px 0;
	font-size:30px;
	float:right;
}

/* ----------  機能概要（.functional-overview）  ---------- */ 

.functional-detail{
	padding:0;
}

	.functional-detail>li:first-child{
		margin-top:0;
		width:100%;
		margin-bottom:0;
	}
	.functional-detail>li:nth-child(2){
		display:none;
	}
	.functional-detail>li:last-child{
		width:100%;
		margin-right:0;
	}
	.functional-detail li li{
		border-radius:8px;
		box-sizing:border-box;
	}
	.functional-detail li li:before{
		width:20px;
		display:inline-block;
		content:"?";
		color:#fff;
		font-weight:700;
		background:#003489;
		text-align:center;
		margin-right:8px;
		border-radius:30px;
	}
	.functional-detail li:first-child li:first-child{
		width:100%;
		height:auto;
		padding:8px;
		background:#fff;
		border:#9c27b0 4px solid;
	}
	.functional-detail li:first-child li:nth-child(2){
		width:100%;
		height:auto;
		padding:8px;
		background:#fff;
		border:#009688 4px solid;
	}
	.functional-detail li:first-child li:nth-child(3){
		width:100%;
		height:auto;
		padding:8px;
		background:#fff;
		border:#f44336 4px solid;
	}
	.functional-detail li:first-child li:nth-child(4){
		width:100%;
		height:auto;
		padding:8px;
		background:#fff;
		border:#9e9e9e 4px solid;
	}
	.functional-detail>li:last-child li:first-child{
		width:100%;
		height:auto;
		margin-top:0;
		padding:8px;
		background:#fff;
		border:#4caf50 4px solid;
	}
	.functional-detail>li:last-child li:nth-child(2){
		width:100%;
		height:auto;
		padding:8px;
		background:#fff;
		border:#ff9800 4px solid;
	}
	.functional-detail>li:last-child li:nth-child(3){
		width:100%;
		height:auto;
		padding:8px;
		background:#fff;
		border:#00bcd4 4px solid;
	}
	.functional-overview h4 img{
		width:auto;
		margin:-30px auto;
	}
	
	
/* ----------  Dr.Thomas　８つのプログラム（.merit_04）  ---------- */ 
	.program-list ul.program{
		width:100%;
	}
	.program-list ul.program li{
		width:50%;
		margin:0;
		border:#89deff 4px solid;
	}
	.program-list ul.program li:nth-child(4),.merit_04 ul.program li:nth-child(8){
		margin:0;
	}
	.program-list ul.program li .list04-box{
		width:90%;
	}
}