/* 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,calc(33 / 768 * 100vw),33px);
		font-weight: bold;
		margin:6% 0 4% ;
		line-height: 1.3;
		color:#df3600;
		}
		#catalog h2 .mini{
			font-size:.6em;
		}
	#catalog h2 + h3 {
		margin-top:3%;
		}
	#catalog h3{
		border-left:5px solid #345ec8;
		color:#407fdf;
		font-size:clamp(20px,calc(25 / 768 * 100vw),25px);
		text-align: left;
		margin:3em 0 1em;
		padding-left:10px;
		line-height: 1.4;
		font-weight: bold;
		}
	#catalog h3.ti{
		padding-left: calc(clamp(40px,calc(50 / 768 * 100vw),50px) + 8px);
		border:0;
		padding-left:55px;
		position: relative;
		}
	#catalog h3.ti:before{
		content: "";
		display: block;
		width:clamp(35px,4vw,45px);
		aspect-ratio:45/50;
		background:url(../img/mark_h3.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 .cut{
		margin:2em auto;
		text-align: center;
	}
	#catalog h3.ti + .cut{
		margin-top:0;
	}
	#catalog .arrow + .cut {
		margin-top:0;
	}
	#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 .intro{
		margin-bottom: 20px;
		align-items: flex-start;
	}
	#catalog .intro .image img{
		width:100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}
	#catalog .intro .flex{
		flex-wrap: wrap;
	}
	#catalog .intro .row.odr03{
		width:100%;
		margin-top:1em;
		order:3;
	}

	/*------- org ------*/
	#catalog strong{
		color:#DF5A00;
	}
	#catalog p.red strong{
		color:inherit;
		text-decoration: underline;
	}

	#catalog .grid{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
	#catalog .grid3{
		display: grid;
		gap:15px;
		grid-template-columns: repeat(auto-fit,minmax(230px, 1fr));
		list-style: none;
		margin:1em;
	}
	#catalog .grid dl{
		margin:1em;
	}
	#catalog .grid dl dt{
		font-size:16px;
		font-weight: bold;
		color:white;
		text-align: left;
		padding:.3em 1em;
		background:#2DA1AA;
	}
	#catalog ul.list{
		font-size:15px;
		font-weight: bold;
		color:#2DA1AA;
		text-align: left;
		margin:.5em 0 0 1.5em;
		list-style: none;
	}
		#catalog ul.list .green{ color:#2BD502;}
		#catalog ul.list .yellow{ color:#FF9E2E;}
		#catalog ul.list .red{ color:#EB2811;}
	#catalog .grid3 .btn a{
		padding:1em 0;
	}


#catalog .caution{
	font-size:11px;
	color:#FF0000;
	text-align: left;
}

#catalog .btnarea{
	margin:40px auto;
}

#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 .waku.red{
	border:3px solid red;
	padding:.5em 1em;
}
