@charset "utf-8";
/* -----------------------------------------
リセット・設定用css

＜class名ルール＞
このファイルで使用するclassには以下の接頭語を付加する。
（他のcssファイルでは不要）
・汎用クラス：「.c_xxx」（common）
・モジュール：「.m_xxx」（module）
・モジュール内のパーツ：「.p_xxx」（parts）
・モジュールの状態：「.s_xxx」（state）
※JSのみで使用：「.js_xxx」
----------------------------------------- */

/* header
----------------------------------------- */

.logo {
	width: 25%;
	margin: 6px 0;
	float: left;
}

.ttl {
	width: 45%;
	margin: 7px 0 7px 20px;
	float: left;
}

.pdfBtn {
	text-align: right;
}
@media print {
	.pdfBtn {
		display: none;
	}
}

@media screen and (max-width: 800px) {
	.logo {
		width: 215px;
		float: none;
		margin: 5px 0 7px 7px;
	}
	.ttl {
		width: 100%;
		text-align: center;
		float: none;
		margin: 0;
		padding: 13px 0;
	}
	.ttl img {
		width: 270px;
	}
	.pdfBtn {
		display: none;
	}
}

/* flame
----------------------------------------- */

.outerContent {
	float: left;
	width: 100%;
	margin-left: -200px;
}

.content {
	margin-left: 200px;
}

@media screen and (max-width: 800px) {
	.outerContent {
		margin: 0 20px 0 0;
		width: inherit;
		float: none;
	}
	.content {
		margin: 0;
	}
}
@media screen and (max-width: 680px) {
	.outerContent {
		margin: 0 20px;
	}
}

.sec01 {
	margin: 0 auto 80px;
	overflow: hidden;
}

@media screen and (max-width: 1099px) {
	.sec01 {
		max-width: 900px;
	}
}

/* content
----------------------------------------- */

.type {
	width: 25%;
	padding-left: 18px;
}

.type > div {
	background: url(/product/catalog/img/bg_01dotted.png);
	background-size: 6px;
	position: relative;
	display: table;
	width: 100%;
	height: 175px;
	float: left;
	margin-bottom: 11px;
}

.type p {
	position: relative;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	font-size: 192.9%;
	font-weight: bold;
}

.type > div:before {
	position: absolute;
	content: "";
	width: 195px;
	height: 195px;
	background-color: #fff;
	border-radius: 50%;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
}
@media screen and (max-width: 1099px) {
	.type {
		width: 33.3%;
	}
}
@media screen and (max-width: 899px) {
	.type {
		width: 50%;
	}
}
@media screen and (max-width: 680px) {
	.type {
		width: 100%;
		padding-left: 0;
	}
	.type > div {
		margin-bottom: 20px;
	}
	.type > div:before {
		width: 135px;
		height: 135px;
	}
	.type p {
		font-size: 150%;
	}
}

/* 
----------------------------------------- */