@charset "utf-8";

html {
	font-size: 10px;
	line-height: 1.5;
	color: #333;
	text-align: left;
	background: #e5e5e5;
}

body{
	width: 100%;
	max-width: 65em;
	margin: 0 auto;
	background: #fff;
	font-size: 1.4em;
}

/* header */
header {
	box-sizing: border-box;
	background: #fff;
	max-width: 56em;
	width:calc(100% - 6em);
	margin: 0 auto;
	padding: 0;
	position: relative;
	overflow: hidden;
}
header h1 {
	line-height: 1;
}

.main {
  background: #fff;
	max-width: 56em;
	width:calc(100% - 6em);
  margin: 0 auto 2.25em;
  box-sizing: border-box;
 line-height: 1.75;
}

.main > h2 {
	box-sizing: border-box;
	margin: 0 auto;
	background: #2883C9;
	border-radius: 5px;
	text-align: center;
	padding: 20px;
	color: #fff;
	font-family: 'Hiragino Sans',"Hiragino Kaku Gothic W4 JIS2004", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "BIZ UDPGothic","游ゴシック Medium", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, sans-serif;
	font-size: 2.14em;
	line-height: 1.5;
}

h3 {
	margin-bottom: 5px;
	color: #2883C9;
	font-size: 16px;
	font-weight: bold;
}

p {
	margin-bottom: 15px;
}

.setumei {
	margin: 20px 0;
}

.tyuiten {
	font-size: 12px;
}

.area {
	margin: 40px auto;
}

footer {
	font-size: 10px;
	text-align: center;
}

.sp {
	display: none;
}
.main .area p.sentence{
 line-height: 2.5;
}
a{
 word-wrap:break-word;
}
ul.disk{
 margin-left: 1.3em;
}
ul.disk li{
 list-style: disc outside;
}
.indent{padding-left: 1em;text-indent: -1em;}
@media (max-width: 480px) {
	body {
		width: 100%;
		min-width: 320px;
	}
	header {
		width: 94%;
		margin: 0 3%;
	}
	.main {
		width: 94%;
		margin: 0 3%;
	}
	
	.main > h2 {
		padding: 15px;
		font-size: 20px;
	}

	.sp {
	display: block;
	}
	
}
.device-grid {
  display: grid;
  grid-template-columns: 3em 10em 1fr 1fr;
  margin-top:2lh;
}

/* 共通セル */
.device-grid > div {
  border: 1px solid #ccc;
  padding: 1em;
}
.device-grid > div:nth-child(n+2):not(.dg-vertical){
	border-left: none;
}
.device-grid > div:nth-child(n+8){
	border-top: none;
}
/* */
.device-grid > div.blank{
	grid-column: 1 / 3;
  border: none;
}

/* ヘッダー */
.device-grid > div.dg-header {
	background: #2883C9;
	color: #fff;
	border-color: #fff;
  text-align: center;
	font-size: 1.2857em;
  font-weight: bold;
	border-bottom: none;
	padding: .5em 1em;
}
.dg-header hr{
	border:none;
	border-top: 1px solid rgba(255,255,255,0.6);
	margin: .25em 0;
}
/* 縦ラベル */
.dg-vertical {
  writing-mode: vertical-rl;
  text-orientation: upright;
	font-feature-settings: initial;
  text-align: center;
  background-color: #EEF6FC;
  font-weight: bold;
	letter-spacing: .5em;
  grid-row: 2 / span 2;
	border-top-left-radius:.5em;
	border-bottom-left-radius:.5em;
	line-height: 1;
}
.dg-vertical span{
	display: inline-block;
	transform: translateX(.1em);
}
.dg-cell:nth-last-child(1){
	border-bottom-right-radius:.5em;
}
/* 機器列 */
.dg-device{
	background-color: #EEF6FC;
	text-align: center;
	line-height: 1.5;
}
.dg-cell.blank-cell{
	background-color: #EEF6FC;
}
.device-img {
  margin-top:1px;
	margin-bottom: .25em;
  max-width: 100%;
  height: auto;
}
/* 通常セル */
.dg-device strong,.dg-cell strong{
	font-weight: bold;
	display: block;
}
.dg-device strong{
	font-size: 1.2857em;
}
.dg-cell strong,.dg-vertical{
  font-size: 1.142857em;
}
.dg-header strong{
	font-weight: bold;
	display: block;
}
.dg-device strong,.dg-cell strong{
	margin-bottom: .5em;
}
.dg-device strong{
	color: #2883C9;
}
.dg-cell p{line-height: 1.5;margin-bottom:0;}
.dg-cell span:has(a){
	display: flex;
	align-items: center;
	word-break: break-all;
	gap:.25em;
}
.dg-cell span:has(a):before{
	content: "⇒";
	color:#333;
	text-decoration: none;
}
.freecall{
	font-size: 1.3em;
	padding-left: 1.5em;
	background: url("/corporate/images/share/icon/free_call.svg") no-repeat left top .22em;
	background-size: auto 1.25em;
	font-weight: bold;
}
.device-grid > div.sp-br{
	border-bottom-right-radius:.5em;
}
.freecall small{font-weight: normal;font-size: .75em;}
@media screen and (min-width: 481px) {
	.sp-only{
		display: none;
	}
	.dg-header:nth-child(2){
		border-top-left-radius:.5em;
	}
	.dg-header:nth-child(3){
		border-top-right-radius:.5em;
	}
	.device-img.cont{
		max-width: 52.5%;
	}
	.device-grid > div.dg-cell.sp-br{
		grid-column: 3 / 5;
		padding: 0;
	}
	.device-grid > div.dg-cell.sp-br .pc-flex{
		display: flex;
		padding: 1em 1em 1em;
		align-items: center;
		justify-content: space-between;
		background-image: linear-gradient(to left,#E9E9E9 0%,transparent 75%);
		clip-path: polygon(93% 0%, 100% 50%, 93% 100%, 0 100%, 0 0);
	}
	.device-grid > div.dg-cell.sp-br .pc-flex p{max-width:calc(50% - 1em);}
	.dg-cell strong.gray{color:#737373;margin-right:1em;margin-bottom: 0;}
	.freecall small{display:inline-block;margin-left: 1em;}
}
@media screen and (max-width: 480px) {
	.pc-only{display: none !important;}
  .device-grid {
    grid-template-columns: 10em 1fr;
  }
	.dg-header{
		grid-column: 1 / 3;
		border-top-left-radius:.5em;
		border-top-right-radius:.5em;
	}
	.dg-header.sp-only{margin-top: 1.5lh;}
  .pc-only,.dg-vertical,.blank {
		display: none;
	}
	.dg-device{
		border-left:1px solid #ccc !important;
	}
	.device-img.cont{
		max-width: 47.5%;
	}
	.dg-device:has(.device-img.cont){
		border-bottom-left-radius:.5em;
	}
	.freecall small{display: block;}
}
@media print{
	.sp-only{
		display: none;
	}
	header,main.main{max-width: 100%;width:calc(100% - 4em);}
	header h1 {
		padding:.25lh 0 0;
	}
	.device-img.cont{
		max-width: 52.5%;
	}
	.device-grid{ page-break-before: always; }
	.device-grid > div.dg-cell.sp-br{
		display:grid;
		grid-column: 3 / 5;
		place-content: center;
	}
	.device-grid > div.dg-cell.sp-br{
		grid-column: 3 / 5;
		padding: 0;
	}
	.device-grid > div.dg-cell.sp-br .pc-flex{
		display: flex;
		padding: 1em 1em 1em;
		align-items: center;
		justify-content: space-between;
		background-image: linear-gradient(to left,#E9E9E9 0%,transparent 75%);
		clip-path: polygon(93% 0%, 100% 50%, 93% 100%, 0 100%, 0 0);
	}
	.device-grid > div.dg-cell.sp-br .pc-flex p{max-width:calc(50% - 1em);}
}