@charset "UTF-8";

nav {background: #af760c;}
#nav_menu li span {color: rgba(255,255,255,0.5);}
@media all and (min-width: 1201px) {
	#nav_menu ul {padding: 0;}
	#nav_menu li {
		border-left: 1px solid rgba(255,255,255,0.3);
	}
	#nav_menu li a {
		padding: 10px 0;
		box-sizing: border-box;
	}
	#nav_menu li a:hover {opacity: 1; background: #c5a05a;}
	#nav_menu li:last-child {border-right: 1px solid rgba(255,255,255,0.3);}
}

/* ---------------------------------------------------
	トップページ
--------------------------------------------------- */
.main {
	position: relative;
	width: 100%;
	height: 400px;
	padding-top: 100px;
	overflow: hidden;
	background: url(../img/main_bg_soroban.png) no-repeat center 100px fixed, #c5a05a;
}
.main_product {
}

.main_title {
	position: relative;
	max-width: 1200px;
	height: 100%;
	margin: 0 auto;
	padding: 40px 50px;
	box-sizing: border-box;
}

/* パンくず */
#breadcrumb {
	width: 100%;
	padding: 0.2em 0;
	border-bottom: 1px solid #ccc;
	background: #fff;
}
#breadcrumb p {
	margin: 0 auto;
	margin: 0 auto;
	max-width: 1200px;
	padding-left: 10px;
	font-size: 12px;
	color: #333;
}
#breadcrumb a {
	font-weight: bold;
	color: #0000ee;
}

@media all and (min-width: 641px) {
	.main_title .main_point {
		position: absolute;
		top: 50px;
		left: 50%;
		z-index: 2;
		margin-left: -75px;
	}
	.main_title .main_item_area {
		position: absolute;
		top: 30px;
		right: 0;
		display: block;
		width: 450px;
		height: 360px;
	}
	.main_title .main_item {
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
	}
	.main_title .main_item a:first-child {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		display: block;
	}
	.main_title .main_item a:last-child {
		position: absolute;
		bottom: 0;
		right: 0;
		z-index: 3;
		display: block;
	}
	.main_title .main_item a:first-child img {width: 100%;}
	.main_title .main_item a:last-child img {width: 100%;}
}
@media all and (max-width: 960px) {
	.main {height: 350px;}
	.main_title .main_point {top: 10px;}
	.main_title img {max-width: 300px;}
	.main_title .main_point img {max-width: 150px;}
	.main_title .main_item_area {top: 80px; width: 360px; height: 240px;}
}
@media all and (max-width: 640px) {
	.main {height: auto;}
	.main_title {text-align: center;}
	.main_title img {max-width: 300px;}
	.main_title .main_point {text-align: center;}
	.main_title .main_point img {max-width: 120px;}
	.main_title .main_item_area {margin-bottom: 2em; width: 100%; height: auto;}
}


/* ---------------------------------------------------
	ダウンロード、サイドメニュー
--------------------------------------------------- */
.main_link_area {
	padding: 0.5em 0;
	background: #efefef;
}
.main_link_area.main_link_pickup {background:linear-gradient(60deg, #333, #c5a05a);}

/* ダウンロード */
.main_download {
	position: relative;
	margin: 0 auto;
	max-width: 1200px;
	padding-right: 280px;
	box-sizing: border-box;
}
.main_download h2 {
  display: inline-block;
	margin: 0.5em 0 0.2em;
	padding-left: 0.5em;
	box-sizing: border-box;
	font-size: 1.2em;
	font-weight: bold;
	border-left: 3px solid #af760c;
}
.main_download table {
	margin: 0.5em 0;
	width: 100%;
}
.main_download table th {
	width: 12.5%;
	padding: 0.2em 0.5em;
	box-sizing: border-box;
	color: #fff;
	font-size: 0.9em;
	border: 1px solid #af760c;
	background: #c5a05a;
}
.main_download table td {
	position: relative;
	padding: 0.5em 1.2em;
	box-sizing: border-box;
	vertical-align: middle;
	border: 1px solid #af760c;
	background: #fff;
}
.main_download table td:first-child {padding: 0.5em;}
.main_download table td a:hover {
	opacity: 1;
	filter: hue-rotate(90deg);
}
.main_download table td svg {
	width: 100%;
	max-width: 100px;
}
.main_download table td svg .cls-1{fill: #af760c !important;}
.main_download table td svg .cls-2{fill: #f5e3d2 !important;}

.main_download p {margin-bottom: 0.5em;}
.main_download p span {font-size: 0.8em;}

@media all and (max-width: 960px) {
	.main_download {padding: 1%;}
}
@media all and (max-width: 640px) {
	.main_download table th {padding: 0.2em; font-size: 0.6em;}
	.main_download table td {padding: 0.5em; line-height: 1.2em; font-size: 0.6em !important;}
}


/* サイドメニュー */
.download_menu {
	margin-bottom: 20px;
	width: 240px;
	min-height: 480px;
	padding: 10px;
	box-sizing: border-box;
	background: #fff;
	box-shadow: 0 0 3px #333;
}
.download_menu h3 {
	padding: 0.5em;
	box-sizing: border-box;
	text-align: center;
	color: #fff;
	background: #c5a05a;
}
.download_menu li {
	position: relative;
	margin-top: -1px;
}
.download_menu li a {
	display: inline-block;
	width: 100%;
	height: 100%;
	padding: 0.5em 0.5em 0.5em 40px;
	box-sizing: border-box;
	color: #333;
	font-size: 0.8em;
	font-weight: bold;
	border: 1px solid #ccc;
}
.download_menu li img {
	position: absolute;
	top: 50%;
	left: 10px;
	margin-top: -12px;
	height: 24px;
}
.download_menu li svg {
	position: absolute;
	top: 50%;
	left: 10px;
	margin-top: -12px;
	height: 24px;
}
.download_menu li a:hover {
	color: #fff;
	background: #c5a05a;
	opacity: 1;
}
.download_menu li a:hover svg .cls-1 {fill: #c5a05a !important;}
.download_menu li a:hover svg .cls-2,
.download_menu li a:hover svg .cls-3,
.download_menu li a:hover svg .cls-4 {fill: #fff !important;}

.download_menu dl dt {
	display: inline-block;
	padding: 0.1em 3.5em;
	color: #fff;
	font-size: 0.6em;
	font-weight: bold;
	background: #af760c;
}
.download_menu dl dd {
	display: block;
	text-align: center;
	color: #c5a05a;
	font-size: 1.5em;
	font-weight: bold;
}

/* .support_menu {
	margin-bottom: 20px;
	width: 240px;
	padding: 10px;
	box-sizing: border-box;
	background: #fff;
	box-shadow: 0 0 3px #333;
}
.support_menu h3 {
	padding: 0.5em;
	box-sizing: border-box;
	text-align: center;
	color: #fff;
	background: #c5a05a;
}
.support_menu .support_set img {
	margin: 0.5em 0;
	width: 100%;
}
.support_menu li {
	position: relative;
	margin-top: -1px;
}
.support_menu li a {
	display: inline-block;
	width: 100%;
	height: 100%;
	padding: 1em 0.5em 1em 50px;
	box-sizing: border-box;
	color: #333;
	font-size: 0.8em;
	font-weight: bold;
	border: 1px solid #ccc;
}
.support_menu li img {
	position: absolute;
	top: 50%;
	left: 10px;
	margin-top: -12px;
	height: 24px;
}
.support_menu li svg {
	position: absolute;
	top: 50%;
	left: 10px;
	margin-top: -12px;
	height: 24px;
	fill: #c5a05a !important;
}
.support_menu li a:hover {
	color: #fff;
	background: #c5a05a;
	opacity: 1;
}
.support_menu li a:hover svg {fill: #fff !important;}
.support_time {
	margin: 0.5em 0;
	font-size: 1em;
	text-align: center;
}
.support_time strong {display:block; font-weight: bold;}
.support_time span {font-size: 0.8em;}

.support_menu dl dt {
	display: inline-block;
	margin: 0.5em 0 0.2em;
	padding: 0.2em 3.5em;
	color: #fff;
	font-size: 0.6em;
	font-weight: bold;
	background: #af760c;
}
.support_menu dl dd {
	display: block;
	text-align: center;
	color: #c5a05a;
	font-size: 1.5em;
	font-weight: bold;
} */

.side_pickup {
	margin: 1em 0;
	width: 240px;
}
.side_pickup a{display: inline-block;}
.side_pickup a:nth-child(n+2){margin-top: 20px;}
.side_pickup a img {width: 100%;}

@media all and (min-width: 1201px) {
	.main_link_area aside {
		position: absolute;
		top: 10px;
		right: calc((100vw - 1200px) / 2);
		z-index: 2;
	}
	#sidemenu_key {display: none;}
}
@media all and (max-width: 1200px) {
	.main_link_area aside {
		position: absolute;
		top: 10px;
		right: 1%;
		z-index: 2;
	}
	#sidemenu_key {display: none;}
}
@media all and (max-width: 960px) {
	.main_link_area aside {
		position: fixed;
		top: 0;
		left: -240px;
		z-index: 1000;
		width: 240px;
		height: 100%;
	}
	#sidemenu {
		float: left;
		width: 240px;
		height: 100%;
		box-sizing: border-box;
		overflow-y: auto;
		-ms-overflow-style: none;
		scrollbar-width: none;  
		background: rgba(0,0,0,0.75);
	}
	#sidemenu::-webkit-scrollbar {
		display:none;
	}
	#sidemenu_key {
		position: absolute;
		float: left;
		display: inline-block;
		margin-top: 180px;
		padding: 30px 0.7em;
		text-align: center;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		letter-spacing: 0.3em;
		color: #FFF;
		font-size: 1.0em;
		font-weight: bold;
		border-radius: 0 5px 5px 0;
		background: rgba(0,0,0,0.75);
		cursor: pointer;
	}
	aside::after {
		content: "";
		display: block;
		clear: both;
	}
	.support_menu {
		background: none;
		box-shadow: none;
	}
	/* .support_menu h3 {margin-bottom: 0.5em;}
	.support_set {display: none;}
	.support_menu ul li a {color: #fff;}
	.support_time {color:#fff;} */

	.download_menu {
		min-height: auto;
		background: none;
		box-shadow: none;
	}
	.download_menu h3 {margin-bottom: 0.5em;}
	.download_menu ul li a {color: #fff;}
	
	.side_pickup {
		padding: 0 10px;
		box-sizing: border-box;
	}
}



/* コンテンツ部分
/* ======================================================= */
.content_area {
	max-width: 1200px;
	min-height: 1200px;
	margin: 0 auto;
	padding-right: 280px;
	box-sizing: border-box;
	line-height: 1.5em;
}
.content_title {
	margin: 50px 0 50px;
	text-align: center;
	box-sizing: border-box;
	font-size: 1.8em;
	font-weight: bold;
	line-height: 1.2em;
}
.content_title span {
	color: #c5a05a;
	font-size: 0.6em;
}
.content_title small {
	padding: 0 1em;
	box-sizing: border-box;
	color: #fff;
	font-size: 0.6em;
	background: #333;
}

@media all and (max-width: 960px) {
	.content_area {padding: 1%;}
}
@media all and (max-width: 640px) {

}


/* キャッチ部分
/* ======================================================= */
.catch_area {
	padding: 1em 0;
	box-sizing: border-box;
	background: #af760c;
}
.catch {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1%;
	padding-right: 280px;
	box-sizing: border-box;	
}
.catch p {
	text-align: justify;
	color: #ff3;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1.5em;
}
.catch p a {
    color: #ff3;
    font-weight: bold;
    text-decoration: underline;
}
@media all and (max-width: 960px) {
	.catch {padding: 0 2%;}
}

/* インフォメーション
/* ======================================================= */
.info_area {
	margin: 30px auto;
}
.topics,
.news_other,
.news_kkbest,
.news_picappo,
.news_ozzone,
.news_r-ozzone,
.news_alumi,
.news_soroban {display: none;}
.news_soroban-cu {display: block;}

.on_other,
.on_kkbest,
.on_picappo,
.on_ozzone,
.on_r-ozzone,
.on_soroban {display: none;}
.on_soroban-cu {display: inline;}

.information {
	max-width: 920px;
	width: 100%;
	margin: 0 auto;
	display: table;
}
.information li {
	padding: 0.5em;
	box-sizing: border-box;
	color: #333;
	font-size: 0.8em;
	line-height: 1.5em;
	list-style: none;
	border-bottom: 1px dashed #CCC;
}
.information li p {
	height: 100%;
	vertical-align: top;
}
.information li span {
	position: relative;
	display: inline-block;
	margin: 0 1em;
	width: 80px;
	padding: 0.2em 0.5em;
	box-sizing: border-box;
	text-align: center;
	color: #FFF;
	font-size: 0.8em;
	border-radius: 5px;
	background: #333;
}
.information li:last-child {
	display: none;
}

/* .information li .products::before {
	position: absolute;
	content: "";
	display: block;
	height: calc(100% - 0.4em);
	border-left: 5px solid #0062df;
} */
.information li .products {background: #0062df;}
.information li .event {background: #f3981c;}
.information li .news {background: #eb4949;}

@media all and (max-width: 640px) {
	.information li p {
		display: block;
		margin-bottom: 10px;
	}
}
@media all and (min-width: 641px) {
	.information li p {
		display: table-cell;
	}
}

.main_information {
	background: url("../img/main_company.jpg") no-repeat center fixed;
	background-size: cover;
}
.information_left,
.information_right {
	vertical-align: top;
}
.information_left img,
.information_right img {
	margin: 0 1%;
	width: 98%;
}
.information .small {
	display: block;
	margin-bottom: 1em;
	padding: 0 2%;
	font-size: 0.8em;
}
.information_left .small,
.information_right .small {
	display: block;
	margin-bottom: 1em;
	padding: 0 2%;
	text-align: right;
	font-size: 0.8em;
}
.information h1 {
	font-size: 2em;
}
.information h3 {
	margin: 50px 1% 10px;
	font-size: 20px;
	border-bottom: solid 3px #c5c5c5;
	position: relative;
}

.information h3:after {
	position: absolute;
	content: " ";
	display: block;
	border-bottom: solid 3px #0062df;
	bottom: -3px;
	width: 20%;
}
.information p {
	margin: 0 1%;
}
.information p a {
	font-weight: bold;
	vertical-align: top;
	text-decoration: underline;
}
.b_blue{
	font-size: 22px;
	text-align: center;
	margin-top: 30px;
	margin-bottom: 30px;
	color: #4169e1;
	border: solid 2px #4169e1;
	padding: 0.3em;
	border-radius: 0.5em;
}
.information .link {
	display: inline-block;
/*	margin: 5px 10px 10px;*/
	width: 80px;
	padding: 1px 5px;
	text-align: center;
	color: #FFF;
	font-size: 13px;
	font-weight: bold;
	border-radius: 5px;
	background: #003399;
}
.information .link:hover {
	opacity: 0.7;
}
.information .link_pdf {
	display: inline-block;
/*	margin: 5px 10px 10px;*/
	width: 80px;
	padding: 1px 5px;
	text-align: center;
	color: #FFF;
	font-size: 13px;
	font-weight: bold;
	border-radius: 5px;
	background: #C00;
}
.information .link_pdf:hover {
	opacity: 0.7;
}
.information .kiji {
	margin-bottom: 30px;
	line-height: 3em;
}
.information iframe {
	display: block;
	margin: 0 auto 20px;
}
.information .waku {
	margin: 1%;
	padding: 2em;
	box-sizing: border-box;
	border: 1px solid #ccc;
}
.event_photo1 {
	margin: 10px 0;
	width: 100%;
	text-align: center;
}
.event_photo {
	margin: 10px 0;
	width: 100%;
}
.event_photo3 {
	margin: 10px 0;
	width: 100%;
}
.event_photo4 {
	display: flex;
	flex-wrap: wrap;
	margin: 10px 0;
	width: 100%;
}
.event_photo4 img {
	margin: 0;
	padding: 0;
}
@media all and (min-width: 641px) {
	.information_left {display: inline-block; width: 60%;}
	.information_right {
		display: inline-block;
		width: 36%;
		margin-left: 3%;
	}
	.event_photo img {
		display: inline-block;
		margin: 1%;
		width: 47%;
		padding: 0;
		vertical-align: top;
	}
	.event_photo3 img {
		display: inline-block;
		margin: 1%;
		width: 31%;
		padding: 0;
		vertical-align: top;
	}
	.event_photo4 img {
		width: 25%;
	}
}
@media all and (max-width: 640px) {
	.information_left {display: block; width: 100%;}
	.information_right {display: block; width: 100%;}
	.event_photo img {
		display: block;
		margin: 1%;
		width: 98%;
		height: auto;
		vertical-align: top;
	}
	.event_photo3 img {
		display: inline-block;
		margin: 1%;
		width: 47%;
		height: auto;
		vertical-align: top;
	}
	.information iframe {
		margin: 0 1% 20px;
		width: 98%;
	}
	.event_photo4 img {
		width: 50%;
	}
}



/* スペック
/* ======================================================= */
.spec_area {
	margin-bottom: 30px;
}
.spec {
	margin-bottom: 20px;
	padding: 1em;
	box-sizing: border-box;
	border:2px solid #c5a05a;
}
.spec h3 {
	display: block;
	margin-bottom: 0.5em;
	padding: 0.2em 1em;
	box-sizing: border-box;
	text-align: center;
	color: #fff;
	font-size: 1.2em;
	font-weight: bold;
	background: #af760c;
}
.spec table {
	width: 100%;
	font-size: 0.8em;
	border-spacing: 0 5px;
	border-collapse: separate;
}
.spec table th {
	margin-bottom: 5px;
	width: 20%;
	padding: 0.5em;
	box-sizing: border-box;
	font-weight: bold;
	border-bottom: 1px dashed #ccc;
	background: #f5e3d2;
}
.spec table td {
	padding: 0.5em 1em;
	box-sizing: border-box;
	border-bottom: 1px dashed #ccc;
}

@media all and (max-width: 960px) {
}
@media all and (max-width: 640px) {
}


/* 特長
/* ======================================================= */
.feature_area ul {
	display: flex;
	flex-wrap: wrap;
}
.feature_area ul li {
	position: relative;
	margin: 30px 1%;
	width: 48%;
	padding: 1em;
	box-sizing: border-box;
	text-align: center;
	border: 1px solid #c5a05a;
}
.feature_area ul .feature_num {
	position: absolute;
	top: -20px;
	left: 50%;
	display: block;
	margin-left: -20px;
	width: 40px;
	height: 40px;
	text-align: center;
	line-height: 1.6em;
	color: #fff;
	font-size: 1.6em;
	font-weight: bold;
	background: #c5a05a;
}
.feature_area ul h4 {
	margin-top: calc(20px + 0.2em);
	font-size: 1.2em;
	font-weight: bold;
}
.feature_area ul a {
	display: inline-block;
	margin: 1em 0 2em;
	padding: 0.5em 2em;
	box-sizing: border-box;
	color: #fff;
	font-size: 0.8em;
	border-radius: 2em;
	background: #c5a05a;
}
.feature_area ul img {
	margin: 1em auto;
	width: 80%;
}

@media all and (max-width: 960px) {
}
@media all and (max-width: 640px) {
	.feature_area ul li {width: 98%;}
}


/* ---------------------------------------------------
	フッターサポート
--------------------------------------------------- */
.contact_area {
	margin-top: 50px;
	width: 100%;
	padding: 2em 1%;
	box-sizing: border-box;
	background: #efefef;
}
.contact_footer {
	margin: 0 auto;
	max-width: 1200px;
	border: 2px solid #c5a05a;
	background: #fff;
}
.contact_footer h2 {
	margin-bottom: 1em;
	padding: 0.5em 1em;
	box-sizing: border-box;
	text-align: center;
	color: #fff;
	font-weight: bold;
	background: #c5a05a;
}
.contact_footer p {
	margin: 2em 0 1em;
	width: 100%;
	padding: 0 1em;
	box-sizing: border-box;
	text-align: center;
	font-weight: bold;
	line-height: 1.5em;
}
.contact_footer p span {
	font-size: 0.9em;
	font-weight: normal;
}
.contact_footer .add {text-align: center;}
.contact_footer address {
	display: inline-block;
	color: #c5a05a;
	font-size: 2em;
	font-weight: bold;
}
.contact_footer address span {
	margin-right: 0.5em;
	padding: 0.1em 1em;
	box-sizing: border-box;
	color: #fff;
	font-size: 0.5em;
	font-weight: bold;
	border-radius: 5px;
	background: #c5a05a;
}
.contact_footer address:first-child {margin-right: 2em;}
.contact_footer address small {
	font-size: 0.6em;
	font-weight: bold;
}
.contact_footer ul {
	display: flex;
	flex-wrap: wrap;
	padding: 1%;
	box-sizing: border-box;
	text-align: center;
}
.contact_footer ul li {
	position: relative;
	display: inline-block;
	margin: 1%;
	width: 23%;
	min-height: 60px;
	box-sizing: border-box;
	vertical-align: middle;
	text-align: left;
	border: 1px solid #c5a05a;
}
.contact_footer ul li a {
	display: table;
	width: 100%;
	height: 100%;
	padding: 0.5em 0.5em 0.5em 50px;
	box-sizing: border-box;
	color: #c5a05a;
}
.contact_footer ul li svg {
	position: absolute;
	top: 50%;
	left: 10px;
	margin-top: -15px;
	max-width: 30px;
	fill: #c5a05a !important;
}
.contact_footer ul li span {
	display: table-cell;
	vertical-align: middle;
}
.contact_footer ul li a:hover {
	color: #fff;
	background: #c5a05a;
	opacity: 1;
}
.contact_footer ul li a:hover img {
	filter: brightness(0) invert(100);
}
.contact_footer ul li a:hover svg {fill: #fff !important;}
@media only screen and (max-width: 768px) {
	.contact_footer ul li {width: 48%;}
	.contact_footer address {display: block;margin: 0.5em 0;text-align: center;font-size: 1.5em;}
	.contact_footer address:first-child {margin-right: 0;}
	.contact_footer address span {display: inline-block;}
}


/* ---------------------------------------------------
	ポップアップ
--------------------------------------------------- */
.pop {
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 1000;
	width: 360px;
	animation: rotation 3s infinite linear;
}
.pop a:hover {
	opacity: 1;
}
.pop_delete {
	position: fixed;
	bottom: 270px;
	right: 0;
	z-index: 1001;
	width: 30px;
	animation: rotation 3s infinite linear;
}
.pop_delete img:hover {
	filter: saturate(250%);
}
@-webkit-keyframes rotation {
	0% {-webkit-transform: translateY(0);}
	5% {-webkit-transform: translateY(-10px);}
	10% {-webkit-transform: translateY(0);}
	15% {-webkit-transform: translateY(-10px);}
	20% {-webkit-transform: translateY(0);}
}
@keyframes rotation {
	0% {transform: translateY(0);}
	5% {transform: translateY(-10px);}
	10% {transform: translateY(0);}
	15% {transform: translateY(-10px);}
	20% {transform: translateY(0);}
}

.mass_media {display: none;}


/* ======================================================= */

/* ---------------------------------------------------
	ページ 共通
--------------------------------------------------- */
.page_main {
	width: 100%;
	height: 250px;
	padding-top: 100px;
	box-sizing: border-box;
	text-align: center;
	background: url(../img/main_bg_soroban.png) no-repeat center 100px fixed, #c5a05a;
}
.page_title {
	display: block;
	margin-top: 40px;
	color: #fff;
	font-size: 2em;
}
.page_title span {
	display: block;
	margin: 0.2em 0 0 0;
	color: rgba(0,0,0,0.5);
	font-size: 0.5em;
	font-weight: bold;
}
.s_title {
	position: relative;
	margin: -70px 0 10px;
    padding-top: 120px;
    font-size: 20px;
    border-bottom: solid 3px #c5c5c5;
}
.s_title:after {
    position: absolute;
    content: " ";
    display: block;
    border-bottom: solid 3px #c5a05a;
    bottom: -3px;
    width: 20%;
}
.s_title span {font-size: 0.8em;}

.content_area .col2 {
	display: flex;
	margin: 0.5em 0;
}
.content_area .col2 .col_left,
.content_area .col2 .col_right {width: 50%;}
.content_area .col2 .col_left img,
.content_area .col2 .col_right img {margin: 1%;width: 98%;}

@media only screen and (max-width: 640px) {
	.content_area .col2 {flex-wrap: wrap;}
	.content_area .col2 .col_left,
	.content_area .col2 .col_right {
		width: 100%;
	}
}


/* 特長
======================================================= */
.feature_title {
    display: block;
    margin: -120px 0 1em 0;
	padding-top: 120px;
    text-align: left;
    border-bottom: 1px solid #c5a05a;
}
.feature_title .number {
    margin-bottom: 10px;
    display: inline-block;
    width: 35px;
    height: 35px;
	line-height: 1.6em;
    color: #FFF;
    font-size: 1.5em;
    font-weight: bold;
    background: #c5a05a;
    text-align: center;
}
.feature_title p {
	display: inline-block;
    margin-left: 10px;
    font-size: 1.2em;
	font-weight: bold;
    color: #333;
}
.feature_video {text-align: center;}
.feature_video video {
	width: 100%;
	max-width: 640px;
}
.feature h4 {
	margin-bottom: 0.5em;
	font-size: 1.2em;
	font-weight: bold;
}
.feature h4::before {
	content: "●";
	color: #c5a05a;
	font-size: 1.2em;
}
.feature hr {border: 1px dashed #ccc;}
.col_flex {
	display: flex;
	flex-wrap: wrap;
}
.col_flex figcaption {
	display: block;
	font-size: 1.2em;
	font-weight: bold;
}
.col_flex figcaption::before {
	content: "●";
	color: #c5a05a;
	font-size: 1.2em;
}
.col_flex dl {
	margin: 1% 1% 30px;
	width: 48%;
}
.col_flex dl video {width: 100%;}

@media (max-width: 640px) {
	.col_flex dl {width: 98%;}
}


/* 性能
======================================================= */
.test_table {
	width: 100%;
}
.test_table th,
.test_table td {
	padding: 0.2em 0.5em;
	box-sizing: border-box;
	font-size: 0.8rem;
	border: 1px solid #ccc;
}
.test_table th {
    color: #fff;
	font-weight: bold;
    background: #c5a05a;	
}
.test_table td {text-align: center;}

.endurance {
	text-align: center;
}
.endurance .table_endurance1,
.endurance .table_endurance2 {
    display: inline-block;
    margin: 0 30px;
}
.endurance table {
    width: 100%;
    margin-bottom: 10px;
    font-size: 14px;
    text-align: center;
}
.endurance th,
.endurance td {
	padding: 0.2em 0.5em;
	box-sizing: border-box;
	font-size: 0.8rem;
	border: 1px solid #ccc;
}
.endurance table th {
    font-weight: bold;
    color: #fff;
    border: 1px solid #CCC;
    background: #c5a05a;
}
.endurance p {
    text-align: justify;
    font-size: 14px;
}


/* 構造・仕様
======================================================= */
.st_type {
	font-size: 1.2em;
	font-weight: bold;
}
.st_type::before {
	content: "●";
	display: inline-block;
	margin-right: 0.1em;
	vertical-align: bottom;
	color: #c5a05a;
	font-size: 1.5em;
}
.st_img {margin: 1em 0; text-align: center;}
.st_table {
	width: 100%;
}
.st_table th,
.st_table td {
	padding: 0.2em 0.5em;
	box-sizing: border-box;
	font-size: 0.8rem;
	border: 1px solid #ccc;
}
.st_table th {
    color: #fff;
	font-weight: bold;
    background: #c5a05a;	
}
.st_table td {text-align: center;}

.st_table tr:nth-child(even) td {background: #f4f4f4;}
.st_ph {
	display: flex;
	flex-wrap: wrap;
	margin-top: 1rem;
}
.st_ph figure {
	margin: 1%;
	display: block;
	width: 31%;
}
.st_ph figure figcaption {
	margin-bottom: 10px;
    padding: 5px 10px;
    color: #FFF;
    text-align: center;
	border: 1px solid #666;
    background: #666;
}
.st_ph figure img {
	box-sizing: border-box;
	border: 1px solid #ccc;
}
@media (max-width: 640px) {
	.st_ph figure {width: 48%;}
}

/* ラインナップ
======================================================= */
.lineup_table {
	width: 100%;
}
.lineup_table th,
.lineup_table td {
	padding: 0.2em 0.5em;
	box-sizing: border-box;
	font-size: 0.8rem;
	border: 1px solid #ccc;
}
.lineup_table th {
    color: #fff;
    font-weight: bold;
    background: #c5a05a;	
}
.lineup_table td {text-align: center;}

.lineup_table tr:nth-child(even) td {background: #f4f4f4;}


/* 施工手順
======================================================= */
.process_flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 1em auto;
}
.process_operation {
	display: block;
	width: 50%;
	padding: 1em;
	box-sizing: border-box;
	counter-reset: count 0;
}
.process_operation2 {
	display: block;
	width: 50%;
	padding: 1em;
	box-sizing: border-box;
	border-left: 2px solid #af760c;
	background: #efefef;
}
.process_operation_size {
	display: block;
	margin-bottom: 2em;
	width: 100%;
	text-align: center;
}
.process_operation_size p:first-child {
	display: block;
	padding: 0.1em 1em;
	box-sizing: border-box;
	color: #fff;
	font-size: 1em;
	border: 1px solid #333;
	background: #c5a05a;
}
.process_operation_size p:last-child {
	display: block;
	padding: 0.5em;
	box-sizing: border-box;
	border: 1px solid #333;
	background: #333;
}
.process_operation_size p:last-child strong {
	display: inline-block;
	margin: 0 0.25em;
	padding: 0.25em 1em;
	box-sizing: border-box;
	font-size: 1.5em;
	font-weight: bold;
	border-radius: 10px;
	background: #fff;
}
.process_operation hr {
	margin: 0.5em 0;
	border: 1px dashed #ccc;
}
.process_operation .left_content {
	position: relative;
	display: inline-block;
	width: 100%;
	padding-left: 60px;
	box-sizing: border-box;
	text-align: left;
	vertical-align: top;
}
.process_operation .left_content::before {
	content: counter(count);
	counter-increment: count 1;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 50px;
	height: 50px;
	padding: 0.25em 0;
	box-sizing: border-box;
	text-align: center;
	color: #fff;
	font-size: 2.5em;
	font-weight: bold;
	background: #c5a05a;
}
.process_operation .left_content .bg_gray {
	padding: 0.3em 1em;
	box-sizing: border-box;
	text-align: center;
	color: #fff;
	background: #c5a05a;
}
.process_operation .left_content img {width: 100%;}
.process_operation h3 {
	display: block;
	margin-bottom: 1em;
	width: 100%;
	padding: 0.2em 1em;
	box-sizing: border-box;
	text-align: center;
	color: #fff;
	font-size: 1.2em;
	font-weight: bold;
	background: #333;
}
.process_operation .right_content {
	display: inline-block;
	padding: 0.5em 0 1em 60px;
	text-align: left;
	vertical-align: top;
	box-sizing: border-box;
	width: 100%;
}
.process_operation .right_content span {
	color: #C00;
	font-weight: bold;
}
.process_operation .right_content img {
	display: block;
	margin-bottom: 10px;
}
.process_caution {
	margin-top: 30px;
	border: 1px solid #900;
}
.process_caution th,
.process_caution td {
	padding: 0.3em 1em;
	box-sizing: border-box;
	border: 1px solid #900;
}
.process_caution th {
	color: #fff;
	background: #900;
}
.process_caution ul {
	text-align: left;
	counter-reset: count 0;
}
.process_caution ul li {
	padding: 0.5em 0.5em 0.5em 1.5em;
	box-sizing: border-box;
	list-style: none outside;
	border-bottom: 1px dashed #ccc;
}
.process_caution ul li:before {
	margin-left: -1.3em;
	content: counter(count) ". ";
	counter-increment: count 1;
}
.process_caution ul li:last-child {
	border-bottom: none;
}

.process_operation2 p {text-align: center;}
.process_operation2 iframe {
	margin-top: 0.5em;
	aspect-ratio: 16 / 9;
}

@media (max-width: 640px) {
	.process_operation {width: 100%;} 
	.process_operation2 {width: 100%; border-left: none; border-top: 2px solid #af760c;} 
}