﻿
#productMoreDetail{}
	
/******************************
PC
******************************/
@media screen and (min-width:769px){
	
/*** digitalPrintPoint  ************************/
	
	#productMoreDetail .digitalPrintPoint{
		display: block;
		margin-bottom: 30px;
	}
	
	#productMoreDetail .digitalPrintPoint > ul{
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-align:stretch;
		-ms-flex-align:stretch;
		-webkit-align-items:stretch;
		align-items: stretch;
		-webkit-justify-content: left;
		justify-content: left;
		width: 100%;
	}
	
	#productMoreDetail .digitalPrintPoint > ul > li{
		display: block;
		width: 16.07142857142857%;
		border: 1px solid #dbdbdb;
		margin-right: 0.71428571428571%;
		position: relative;
	}
	#productMoreDetail .digitalPrintPoint > ul > li:nth-child(6n){margin-right: 0;}
	
	#productMoreDetail .digitalPrintPoint > ul > li > dl{display: block;}
	#productMoreDetail .digitalPrintPoint > ul > li > dl > dt{
		display: block;
		width: 40px; height: 40px;
		line-height: 40px;
		background: #01906d;
		font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
		color: #FFFFFF;
		font-size: 24px;
		text-align: center;
		position: absolute;
		left: 0; top: 0;
	}
	#productMoreDetail .digitalPrintPoint > ul > li:nth-of-type(2n) > dl > dt{background: #005f48;}
	
	#productMoreDetail .digitalPrintPoint > ul > li > dl > dd.img{display: block;}
	#productMoreDetail .digitalPrintPoint > ul > li > dl > dd.img > img{display: block; width: 100%; height: auto;}
	
	#productMoreDetail .digitalPrintPoint > ul > li > dl > dd.text{
		display: text;
		padding: 5px 0;
		font-weight: 700;
		font-size: 15px;
		text-align: center;
		line-height: 1.4;
		letter-spacing: -0.01em;
	}
	#productMoreDetail .digitalPrintPoint > ul > li > dl > dd.text > span{
		display: block;
		font-size: 14px;
		font-weight: normal;
		letter-spacing: -0.04em;
	}


/*** digitalPrintServicePoint  ************************/
	#productMoreDetail .grayBox .twoLineBox dl.digitalPrintServicePoint{}
	
	#productMoreDetail .grayBox .twoLineBox dl.digitalPrintServicePoint {display: block;}
	#productMoreDetail .grayBox .twoLineBox dl.digitalPrintServicePoint > dt{
		display: block;
		padding: 10px 0;
		background: #e5751b;
		color: #FFFFFF;
		font-size: 24px;
		font-weight: 700;
		text-align: center;
	}
	#productMoreDetail .grayBox .twoLineBox dl.digitalPrintServicePoint > dt > span{
		display: block;
		font-size: 18px;
		color: #fff6a9;
	}
	#productMoreDetail .grayBox .twoLineBox .rightBox dl.digitalPrintServicePoint > dt{ background: #288d74;}

	
	#productMoreDetail .grayBox .twoLineBox dl.digitalPrintServicePoint > dd{
		display: table;
		width: 100%;
		padding: 10px 0;
		border-bottom: 1px dotted #CCCCCC;
	}
	#productMoreDetail .grayBox .twoLineBox dl.digitalPrintServicePoint > dd:nth-last-of-type(1){border-bottom: none;}

	
	#productMoreDetail .grayBox .twoLineBox dl.digitalPrintServicePoint > dd > span:nth-of-type(1){
		display: table-cell;
		width: 46px;
		vertical-align: middle;
		text-align: center;
	}
	#productMoreDetail .grayBox .twoLineBox dl.digitalPrintServicePoint > dd > span:nth-of-type(1) > span{
		display: block;
		width: 46px; height: 46px;
		line-height: 46px;
		border-radius: 23px;
		font-size: 12px;
		font-weight: 700;
		color: #FFFFFF;
		background: #e5751b;
	}
	#productMoreDetail .grayBox .twoLineBox .rightBox dl.digitalPrintServicePoint > dd > span:nth-of-type(1) > span{background: #288d74;}
	
	#productMoreDetail .grayBox .twoLineBox dl.digitalPrintServicePoint > dd > span:nth-of-type(2){
		display: table-cell;
		width: calc(100% - 46px);
		padding-left: 10px;
		vertical-align: middle;
		text-align: left;
		font-size: 16px;
		font-weight: 700;
	}
	
/*** digitalPrintServicePoint  ************************/
	#productMoreDetail .digitalPrintFunctionComparison{
		padding: 20px;
		margin-top: 30px;
		background: #FFFFFF;
		position: relative;
	}
	
	#productMoreDetail .digitalPrintFunctionComparison > h4{
		display: block;
		width: 50%;
		font-weight: 700;
		text-align: left;
		position: absolute;
		left: 20px;
		top: 25px;
		font-size: 20px;
	}
	
	#productMoreDetail .digitalPrintFunctionComparison table{width: 100%; margin: 0 auto;}
	
	#productMoreDetail .digitalPrintFunctionComparison table th,
	#productMoreDetail .digitalPrintFunctionComparison table td{
		border: 1px solid #CCCCCC;
		padding: 10px 10px;
		font-size: 16px;
	}
	
	#productMoreDetail .digitalPrintFunctionComparison table th{text-align: left;}
	
	#productMoreDetail .digitalPrintFunctionComparison table > thead > tr > th{font-weight: 700; text-align: center;}
	#productMoreDetail .digitalPrintFunctionComparison table > thead > tr > th:nth-of-type(1){border: none;}
	
	#productMoreDetail .digitalPrintFunctionComparison table td{text-align: center; width: 25%;}
	
	#productMoreDetail .digitalPrintFunctionComparison table td.impossible{background: #efefef;}
	#productMoreDetail .digitalPrintFunctionComparison table td.possible{font-weight: 700;}
	

}

/******************************
PC Responsive
******************************/
@media screen and (min-width: 768px) and ( max-width:1120px) {

	#productMoreDetail .digitalPrintPoint > ul > li > dl > dt{
		width: calc( 40 * (100vw / 1120)); 
		height: calc( 40 * (100vw / 1120));
		line-height: calc( 40 * (100vw / 1120));
		font-size: calc( 24 * (100vw / 1120));
	}
	#productMoreDetail .digitalPrintPoint > ul > li > dl > dd.text{font-size: calc( 15 * (100vw / 1120));}
	#productMoreDetail .digitalPrintPoint > ul > li > dl > dd.text > span{font-size: calc( 14 * (100vw / 1120));}
	
	#productMoreDetail .grayBox .twoLineBox dl.digitalPrintServicePoint > dt{font-size: calc( 24 * (100vw / 1120));}
	#productMoreDetail .grayBox .twoLineBox dl.digitalPrintServicePoint > dt > span{font-size: calc( 18 * (100vw / 1120));}
	
	#productMoreDetail .digitalPrintFunctionComparison table th > span{display: block;}
	#productMoreDetail .digitalPrintFunctionComparison table > thead > tr > th > span{display: inline;}
}






/******************************
SP
******************************/
@media screen and ( max-width:768px) {

	#productMoreDetail .digitalPrintPoint{
		display: block;
		margin-bottom:  calc(30 * (100vw / 320));
	}
	
	#productMoreDetail .digitalPrintPoint > ul{
		display: block;
	}
	
	#productMoreDetail .digitalPrintPoint > ul > li{
		display: block;
		border: 1px solid #dbdbdb;
		position: relative;
		margin-bottom:  calc(5 * (100vw / 320));
	}
	#productMoreDetail .digitalPrintPoint > ul > li:nth-last-of-type(1){margin-bottom: 0;}
	
	#productMoreDetail .digitalPrintPoint > ul > li > dl{
		display: block;
		position: relative;
		padding-left:  calc(110 * (100vw / 320));
		min-height: calc(85 * (100vw / 320));
	}
	#productMoreDetail .digitalPrintPoint > ul > li > dl > dt{
		display: block;
		width: calc(30 * (100vw / 320)); height: calc(30 * (100vw / 320));
		line-height: calc(30 * (100vw / 320));
		background: #01906d;
		font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
		color: #FFFFFF;
		font-size: 1.6rem;
		text-align: center;
		position: absolute;
		left: 0; top: 0;
		z-index: 2;
	}
	#productMoreDetail .digitalPrintPoint > ul > li:nth-of-type(2n) > dl > dt{background: #005f48;}
	
	#productMoreDetail .digitalPrintPoint > ul > li > dl > dd.img{
		display: block;
		width: calc(110 * (100vw / 320));
		min-height: calc(85 * (100vw / 320));
		overflow: hidden;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
	}
	#productMoreDetail .digitalPrintPoint > ul > li > dl > dd.img > img{display: block; width: 100%; height: auto;}
	
	#productMoreDetail .digitalPrintPoint > ul > li > dl > dd.text{
		display: text;
		padding: calc(20 * (100vw / 320)) 0 0 calc(8 * (100vw / 320));
		font-weight: 700;
		font-size: 1.6rem;
		text-align: left;
		line-height: 1.4;
	}
	#productMoreDetail .digitalPrintPoint > ul > li > dl > dd.text > span{
		display: block;
		padding-bottom: calc(2 * (100vw / 320));
		font-size: 1.4rem;
		font-weight: normal;
	}


/*** digitalPrintServicePoint  ************************/
	#productMoreDetail .grayBox .twoLineBox dl.digitalPrintServicePoint{}
	
	#productMoreDetail .grayBox .twoLineBox dl.digitalPrintServicePoint {display: block;}
	#productMoreDetail .grayBox .twoLineBox dl.digitalPrintServicePoint > dt{
		display: block;
		padding: calc(8 * (100vw / 320)) 0;
		background: #e5751b;
		color: #FFFFFF;
		font-size: 1.6rem;
		font-weight: 700;
		text-align: center;
	}
	#productMoreDetail .grayBox .twoLineBox dl.digitalPrintServicePoint > dt > span{
		display: block;
		font-size: 1.4rem;
		color: #fff6a9;
	}
	#productMoreDetail .grayBox .twoLineBox .rightBox dl.digitalPrintServicePoint > dt{ background: #288d74;}

	#productMoreDetail .grayBox .twoLineBox dl.digitalPrintServicePoint > dd{
		display: table;
		width: 100%;
		padding:  calc(10 * (100vw / 320)) 0;
		border-bottom: 1px dotted #CCCCCC;
	}
	#productMoreDetail .grayBox .twoLineBox dl.digitalPrintServicePoint > dd:nth-last-of-type(1){border-bottom: none;}

	
	#productMoreDetail .grayBox .twoLineBox dl.digitalPrintServicePoint > dd > span:nth-of-type(1){
		display: table-cell;
		width: calc(48 * (100vw / 320));
		vertical-align: middle;
		text-align: center;
	}
	#productMoreDetail .grayBox .twoLineBox dl.digitalPrintServicePoint > dd > span:nth-of-type(1) > span{
		display: block;
		width: calc(48 * (100vw / 320)); height: calc(48 * (100vw / 320));
		line-height: calc(48 * (100vw / 320));
		border-radius: calc(24 * (100vw / 320));
		font-size: 1.2rem;
		font-weight: 700;
		color: #FFFFFF;
		background: #e5751b;
	}
	#productMoreDetail .grayBox .twoLineBox .rightBox dl.digitalPrintServicePoint > dd > span:nth-of-type(1) > span{background: #288d74;}
	
	#productMoreDetail .grayBox .twoLineBox dl.digitalPrintServicePoint > dd > span:nth-of-type(2){
		display: table-cell;
		width: calc(100% - 48 * (100vw / 320));
		padding-left: calc(10 * (100vw / 320));
		vertical-align: middle;
		text-align: left;
		font-size: 1.4rem;
		font-weight: 700;
	}
	
/*** digitalPrintServicePoint  ************************/
	#productMoreDetail .digitalPrintFunctionComparison{
		margin-top:  calc(20 * (100vw / 320));
	}
	
	#productMoreDetail .digitalPrintFunctionComparison > h4{
		display: block;
		margin-bottom: calc(10 * (100vw / 320));
		font-size:  1.6rem;
		font-weight: 700;
		text-align: center;
	}
	
	#productMoreDetail .digitalPrintFunctionComparison table{width: 100%; margin: 0 auto;}
	
	#productMoreDetail .digitalPrintFunctionComparison table th,
	#productMoreDetail .digitalPrintFunctionComparison table td{
		border: 1px solid #CCCCCC;
		padding:  calc(5 * (100vw / 320));
		font-size:  1.4rem;
		background: #FFFFFF;
	}
	
	#productMoreDetail .digitalPrintFunctionComparison table th{text-align: left;}
	#productMoreDetail .digitalPrintFunctionComparison table th > span{font-size: 1.2rem;}
	
	#productMoreDetail .digitalPrintFunctionComparison table > thead > tr > th{
		font-size:  1.2rem;
		padding-left: 0;
		padding-right: 0;
		font-weight: 700;
		text-align: center;
	}
	#productMoreDetail .digitalPrintFunctionComparison table > thead > tr > th:nth-of-type(1){border: none; background-color: transparent;}
	#productMoreDetail .digitalPrintFunctionComparison table > thead > tr > th:nth-of-type(2){color: #e5751b;}
	#productMoreDetail .digitalPrintFunctionComparison table > thead > tr > th:nth-of-type(3){color: #288d74;}
	
	#productMoreDetail .digitalPrintFunctionComparison table td{text-align: center; width: 21%;}
	
	#productMoreDetail .digitalPrintFunctionComparison table td.impossible{background: #efefef;}
	#productMoreDetail .digitalPrintFunctionComparison table td.possible{font-weight: 700;}

}

