/* base  css ver2.0 ttm */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:500,700&display=swap&subset=japanese');
#catalog{
	text-align: center;
	font-size:14px;
	line-height:1.6;
	font-family: 'Noto Sans JP', sans-serif;
}
#catalog h1,#catalog h2,#catalog h3,#catalog h4,#catalog h5,#catalog p,#catalog ul,#catalog ol,#catalog li,#catalog dl,#catalog dd,#catalog dt{margin:0;padding:0px;}
div#layout *{box-sizing:border-box;}
div#layout img {border:0;vertical-align: middle;max-width: 100%;}
div#layout p {text-align: left;}
div#layout a {text-decoration: none;}
div#layout a:hover {text-decoration: underline;}
div#layout a:hover img{
	opacity:0.7;
	filter: alpha(opacity=70);
	}

	#catalog .phr{
		float: right;
		margin-left:1.5em;
		}
	#catalog .phl{
		float: left;
		margin-right:1.5em;
		}
	#catalog .phc{
		margin:auto;
		text-align: center;
		}
	#catalog .clear:after{
		content:"";
		display: block;
		clear:both;
		}
	#catalog .youtube{
		position: relative;
		width: 100%;
		padding-top: 56.25% ;
		}
	#catalog .youtube iframe{
		position: absolute;
		top: 0;
		left: 0;
		width: 100% !important;
		height: 100% !important;
	}
/*/// responsible /*/
.visible640,
.visible480,
.visible768,
.visible950{
	display: none ;
	}

/*------------ common ---------------------------*/

#catalog #keyvisual{
	margin-bottom: 5%;
	}
#catalog p{
	margin:1.5em auto;
	text-align: left;
	}
#catalog h2{
	text-align: left;
	font-size:clamp(23px,4.2vw,33px);
	font-weight: bold;
	margin:6% 0 4% ;
	line-height: 1.3;
	color:#3FA8B4;
	}
	#catalog h2 .mini{
		font-size:.6em;
	}
#catalog h2 + h3 {
	margin-top:3%;
	}
#catalog h3{
	border-left:5px solid #28A7E1;
	color:#03559D;
	font-size:clamp(20px,3.4vw,25px);
	text-align: left;
	margin:3em 0 1em;
	padding-left:10px;
	line-height: 1.4;
	font-weight: bold;
	}
#catalog h3.ti{
	padding-left: 45px;
	border:0;
	position: relative;
	color:#55AC67;
	}
#catalog h3.ti:before{
	content: "";
	display: block;
	width:40px;
	height:40px;
	background:url(../img/mark_01.png) no-repeat center center;
	background-size: contain;
	position: absolute;
	left:0;
	top:50%;
	transform:translateY(-50%);
}
#catalog h3.new{
	padding-left:90px;
}
#catalog h3.new:before{
	width:85px;
	height:40px;
	background:url(../img/mark_02.png) no-repeat center center;
}
#catalog h4{
	font-size:clamp(17px,2vw,20px);
	color:white;
	padding:.3em 1em;
	background:#AD78B7;
	width: fit-content;
	margin:0;
}
#catalog h4 + .kakomi{
	margin-top:0;
}
#catalog .osusume dt{
	position: relative;
	font-size:clamp(16px,2.2vw,20px);
	color:#55AC67;
	font-weight: bold;
	text-align: left;
	padding-left:35px;
	margin-bottom: 10px;
}
#catalog .osusume dd{
	text-align: left;
}
#catalog .osusume dt:before{
	content: "";
	display: block;
	width:30px;
	height:40px;
	background:url(../img/mark_dt.png) no-repeat center center;
	background-size: contain;
	position: absolute;
	left:0;
	top:50%;
	transform:translateY(-50%);
}
#catalog .red{
	color:red;
}
#catalog .mini{
	font-size:.8em !important;
}
#catalog .under-line{
	text-decoration: underline;
}
#catalog .cut{
	margin:2em auto;
	text-align: center;
}
#catalog .flex{
	display: flex;
}
#catalog .flex .row{
	width:50%;
}
#catalog .flex .row:nth-child(1){
	padding:0 20px 0 0;
}
#catalog .flex .row p:nth-child(1){
	margin-top:0;
}


#catalog .row > p:nth-child(1),
#catalog .row > .cut:nth-child(1){
	margin-top:0;
}
#catalog .arrow{
	margin:30px auto;
	text-align: center;
	}

#catalog strong{
	color:#A91B05;
	}


/* btn */
#catalog .btn a{
	display: block;
	margin:auto;
	width:fit-content;
	padding:1em 1.5em;
	border-radius: 10px;
	background:#0E00CC;
	box-shadow: 0 3px 6px rgba(0,0,0,.2);
	text-align: center;
	font-size:clamp(17px,2vw,20px);
	color:white;
	font-weight: bold;
	transition: .5s all ease;
}
#catalog .btn a:hover{
	text-decoration: none;
	filter: hue-rotate(45deg);
}
/*number*/
#catalog .no{
	position: relative;
	width:30px;
	height: 14px;
	display: inline-block;
}
#catalog .no:before{
	background:#FC0000;
	border-radius:20px;
	color:white;
	font-size: 1.1em;
	font-weight: bold;
	text-align: center;
	display: inline-block;
	font-style: normal;
	line-height: 1.3;
	position: absolute;
	top:50%;
	left:50%;
	width:20px;
	height: 20px;
	transform:translate(-50%,-40%);
	vertical-align: middle;
}
	#catalog .no.no01:before{
		content:"1";
}
	#catalog .no.no02:before{
		content:"2";
}
	#catalog .no.no03:before{
		content:"3";
}

/* numbering */
#catalog ul,
#catalog ol {
	text-align: left;
	list-style: none;
	}
#catalog .number li{
	padding-left:30px;
	}
#catalog .number{
	counter-reset:num;
	}
#catalog .number li,
#catalog .number dl dt{
	position: relative;
	}
#catalog .number li:before,
#catalog .number dl dt:before{
	counter-increment:num;
	content:counter(num);
	color:white;
	font-weight: bold;
	font-size:clamp(16px,2vw,18px);
	text-align: center;
	background:#FFBC03;
	border-radius:100px;
	display: inline-block;
	width:30px;
	height: 30px;
	line-height: 1.6;
	margin-right:5px;
	position: absolute;
	left:0;
	top:50%;
	transform:translate(0,-50%);
	}
#catalog .number dl{
	text-align: left;
	margin-bottom: 1em;
	}
#catalog .number dl dt{
	font-size:clamp(16px,2.2vw,20px);
	font-weight: bold;
	color:#108CBB;
	padding:10px 0 10px 35px;
	line-height: 1.2;
	}
#catalog .number dl dd{
	padding-left:1em;
}
#catalog .number li:before{
	background:#004CFF;
	width:30px;
	height: 30px;
	font-size:18px;
}
#catalog ul.number, #catalog ol.number{
	margin-left: 1em;
}
#catalog .number li{
	font-size:clamp(14px,2vw,16px);
	font-weight: bold;
	margin:.8em 0;
	padding-left:37px;
	line-height: 1.4;
}



/* kakomi /*/
#catalog .kakomi{
	border-width:2px;
	border-style:solid;
	border-color:#AD78B7;
	position: relative;
	padding:20px;

	margin:40px auto 20px;
}
#catalog .kakomi .title h3{
	color:white;
	font-weight: 900;
	border:0;
	padding:0;
	margin:0;
	text-align: center;
}
#catalog .kakomi.red h4{
	color:red;
	font-size:22px;
	font-weight: bold;
}
#catalog .kakomi .title{
	position: absolute;
	top:0;
	left:50%;
	transform:translate(-50%,-50%);
	display: inline-block;
	border-radius:100px;
	padding:15px 30px;
	min-width: 280px;
}

#catalog table.comparison{
	border-collapse:collapse;
}
#catalog table.comparison tr th,
#catalog table.comparison tr td{
	border:1px solid #bbb;
	padding:5px;
	font-weight: 400;
}
#catalog table.comparison tr th{
	width:fit-content;
	white-space: nowrap;
	text-align: right;
}

/*spec*/
#catalog .caution{
	font-size:11px;
	color:#FF0000;
	text-align: left;
}

#catalog .spec {
	display: block;
	}
#catalog .spec .row{
	padding:0 20px 0 0;
	}
#catalog .spec p{
	margin:5px 0;
	font-size:13px;
	}
#catalog .spec dl{
	text-align: left;
	margin:0px 0 20px;
}
#catalog .spec > dl > dt{
	font-size:18px;
	color:#C20E23;
	font-weight: bold;
	margin-bottom: 5px;
}
#catalog .spec > dl > dd{
	font-size:13px;
}
#catalog .spec .row{
	padding:0 20px 0 0;
}
#catalog .spec dl dl dd{
	padding-left:2em;
}