@charset "utf-8";
@import url("https://fonts.googleapis.com/css?family=Cormorant+Garamond:400,500,600,700&display=swap&subset=japanese");
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400,500,700|Noto+Serif+JP:300,400,500,600,700&display=swap&subset=japanese");

/* ---------------------------------------------------------
1.base
--------------------------------------------------------- */
html,
body {
	width: 100%;
	height: 100%;
}
html {
	font-size: 62.5%; /* sets the base font to 10px for easier math */
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-overflow-scrolling: touch;
}

body {
	font-family: "Cormorant Garamond", "Noto Serif JP", "Noto Serif", "游明朝体",
		"YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3",
		"Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN",
		"Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro",
		"HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "Sawarabi Mincho", serif;
	font-size: 1.4rem; /* sets the default sizing to make sure nothing is actually 10px */
	line-height: 1.7;
	color: #333;
	background-color: #fff;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: auto;
}
* {
	-webkit-box-sizing: border-box; /* border-box ------------------------------ */
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

*:before,
*:after {
	-webkit-box-sizing: border-box; /* border-box ------------------------------ */
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	line-height: 1.3;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
code,
del,
em,
img,
strong,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
	margin: 0;
	padding: 0;
	font-style: normal;
}
ul,
ol,
li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
dl,
dl dd {
	margin: 0;
}
img {
	line-height: 1;
	vertical-align: bottom;
}
input,
button,
select,
textarea {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
}
figure,
figcaption {
	margin: 0;
	font-size: inherit;
}

blockquote,
q {
	quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
	content: "";
	content: none;
}

a {
	color: #00559d;
	text-decoration: underline;
}
#main a:visited {
	color: #7e318e !important;
	text-decoration: underline;
}
a:hover,
#main a:hover {
	text-decoration: none;
}
a:focus {
	outline: none;
}
canvas {
	image-rendering: optimizeQuality;
	image-rendering: -moz-crisp-edges;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: optimize-contrast;
	-ms-interpolation-mode: nearest-neighbor;
}
button {
	border: 0;
	background: transparent;
	-moz-box-shadow: 0 0 0 0 transparent;
	-webkit-box-shadow: 0 0 0 0 transparent;
	box-shadow: 0 0 0 0 transparent;
}
.clearfix:after {
	display: block;
	clear: both;
	content: "";
}

/*------------------------------------------------------------------------------
 2.LINK STYLES
 -------------------------------------------------------------------------------*/
a:link {
	color: #0777c9;
	text-decoration: underline;
}
a:visited {
	color: #0777c9;
}
a:hover {
	color: #00a040;
}
a:active {
	color: #0777c9;
}
.alpha:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha(opacity=70)";
}

/*------------------------------------------------------------------------------
	common
 -------------------------------------------------------------------------------*/
.fontGothic {
	font-family: "Noto Sans JP", sans-serif, Arial, "メイリオ", "Meiryo",
		"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック体",
		"Yu Gothic", "YuGothic", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic",
		sans-serif;
	font-weight: 400;
}
.fontMincho {
	font-family: "Cormorant Garamond", "Noto Serif JP", "Noto Serif", "游明朝体",
		"YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3",
		"Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN",
		"Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro",
		"HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "Sawarabi Mincho", serif !important;
}
.csTopContents img,
.csRenovation img,
.csSidingG img,
#csNavHoverWrapA ul li a img,
#csNavHoverWrapB ul li a img,
#csStyle article.csStyle__detail figure img,
#csOther a img,
.csCR__main h1 img,
.csCR__right > .wrap figure img {
	pointer-events: none;
}
/*
.fadeConts {
	transform: translateY(100px);
	transition: all 1s ease-out;
	opacity: 0;
}
.fadeConts.on {
	transform: translateY(0px);
	opacity: 1;
}
*/
.ws_nw {
	white-space: nowrap;
}
/*------------------------------------------------------------------------------
	header
 -------------------------------------------------------------------------------*/
#csWrap {
	min-width: 1240px;
	text-align: center;
	overflow: hidden;
	position: relative;
}
header {
	position: relative;
	z-index: 100;
	text-align: left;
}
header > div {
	width: 1200px;
	margin: 30px auto 20px auto;
}
.csHeader__logo {
	display: block;
	width: 166px;
	height: 25.3px;
	float: left;
}
.csHeader__logo a {
	display: inline-block;
}
.csHeader__logo img {
	width: 166px;
	float: left;
}
.csHeader__copy {
	display: block;
	width: 350px;
	font-size: 13px;
	float: left;
	padding: 9px 0 0 26px;
}
.csHeader__logoSite {
	clear: both;
	padding: 20px 0 0 0;
}
.csHeader__logoSite img {
}
header nav {
	min-width: 1200px;
	margin: auto;
	border-top: 2px solid #000000;
	background: rgba(0, 0, 0, 0.5);
}
header nav ul {
	width: 1200px;
	margin: 0 auto;
}
header nav > ul > li {
	white-space: nowrap;
}
header nav ul li {
	display: inline-block;
	color: #ffffff;
	font-weight: 600;
	font-size: 107.2%;
	margin: 0 65px 0 0;
	position: relative;
	cursor: pointer;
}
header nav ul li:nth-of-type(1) {
	margin: 0 35px 0 0;
}
header nav ul li:nth-of-type(2) {
	padding: 5px 30px 0 30px;
	margin-right: 35px;
}
header nav ul li:nth-of-type(4) {
	margin: 0 30px 0 0;
}
header nav ul li:nth-of-type(5) {
	padding: 5px 30px 0 30px;
	margin-right: 35px;
}
header nav ul li:last-child {
	margin: 0;
}
.csNavDrop {
	background: rgba(89, 87, 87, 0.95);
}

#csWrap .csNavDropmenu {
}

#csNavHoverWrapA {
	display: none;
	position: absolute;
	width: 1038px;
	left: 0px;
	padding: 20px 15px 20px 15px;
	background: rgba(89, 87, 87, 0.95);
	box-sizing: border-box;
}
#csNavHoverWrapA ul {
	font-size: 0px;
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#csNavHoverWrapA ul li {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	width: 175px;
}
#csNavHoverWrapA ul li:nth-child(n + 6) {
	margin-top: 23px;
}
#csNavHoverWrapA ul li a {
	text-align: center;
	padding: 0px 0 0px 0;
}
#csNavHoverWrapA ul li a img {
	width: 175px;
	height: 90px;
	transition: all 0.5s 0s;
}
#csNavHoverWrapA ul li p {
	font-size: 15px;
	margin: 0 0px 3px 0;
}
#csNavHoverWrapA ul li div {
	background: url("/center-siding-roof/img/navBack.png") no-repeat;
}
#csNavHoverWrapA ul li a:hover p span {
	border-bottom: 2px solid #cccccc;
}
#csNavHoverWrapA ul li a:hover img {
	opacity: 0.7;
}

#csNavHoverWrapB {
	display: none;
	position: absolute;
	width: 416px;
	left: 0px;
	padding: 20px 15px 20px 15px;
	background: rgba(89, 87, 87, 0.95);
}
#csNavHoverWrapB ul {
	font-size: 0px;
	width: 416px;
}
#csNavHoverWrapB ul li {
	margin: 0 33px 0 0;
	padding: 0 0 0 0;
}
#csNavHoverWrapB ul li:nth-of-type(6) {
	margin: 30px 33px 0 0;
	padding: 0 0 0 0;
}
#csNavHoverWrapB ul li a {
	text-align: center;
	padding: 0px 0 0px 0;
}
#csNavHoverWrapB ul li a img {
	width: 175px;
	height: 90px;
	transition: all 0.5s 0s;
}
#csNavHoverWrapB ul li p {
	font-size: 15px;
	margin: 0 0px 3px 0;
}
#csNavHoverWrapB ul li div {
	background: url("/center-siding-roof/img/navBack.png") no-repeat;
}
#csNavHoverWrapB ul li a:hover p span {
	border-bottom: 2px solid #cccccc;
}
#csNavHoverWrapB ul li a:hover img {
	opacity: 0.7;
}
header nav ul li a {
	display: inline-block;
	padding: 13px 0 11px 0;
	box-sizing: border-box;
	color: #ffffff;
	transition: all 1s 0s ease;
}
header nav > ul > li > a > span {
	display: inline-block;
	width: 0%;
	height: 5px;
	opacity: 0.6;
	background: #ffffff;
	transition: all 0.5s 0s;
	position: absolute;
	left: 0;
	top: 44px;
}
header nav ul li a:link {
	color: #ffffff;
	text-decoration: none;
}
header nav ul li a:visited {
	color: #ffffff;
}
header nav ul li a:hover {
	color: #ffffff;
}
header nav ul li a:active {
	color: #ffffff;
}
header nav ul li a:hover {
	color: #dcdcdc;
}
header nav ul li a:hover:not(.csNavStyle) span {
	color: #dcdcdc;
	width: 100%;
}
header.csFixed {
	position: fixed;
	top: -135px;
	width: 100%;
	min-width: 1240px;
}
main.csFixed {
	margin-top: 194px;
	margin-bottom: 85px;
}
/* Firefox */
@-moz-document url-prefix() {
	header.csFixed {
		top: -136px;
	}
}
main#csTop.csFixed {
	margin-top: 138px;
	margin-bottom: 80px;
}

/*------------------------------------------------------------------------------
	top
 -------------------------------------------------------------------------------*/
main {
	min-width: 1240px;
	max-width: 1920px;
	text-align: left;
	margin: 0 auto;
	position: relative;
}
#csTop {
	position: relative;
	margin: -49px auto 0 auto;
	overflow: hidden;
}
#csMainVisual {
	position: absolute;
	z-index: -1;
	width: 100%;
}
#csMainVisual__wrap {
}
#csMainVisual__wrap video {
	width: 100%;
	height: auto;
	object-fit: cover;
}
.csMainVisual__over {
	background: linear-gradient(to top, #ffffff, transparent);
	width: 100%;
	height: 500px;
	position: absolute;
	bottom: 0;
}
.csTopContents {
	width: 1200px;
	margin: 170px auto 0 auto;
}
.csTopContents__title {
	color: #ffffff;
	font-size: 229%;
	font-weight: 600;
	text-shadow: 2px 2px 8px #000000;
}
.csTopContents__read {
	color: #ffffff;
	font-size: 105%;
	font-weight: 600;
	text-shadow: 2px 2px 8px #000000;
	margin: 0 0 32px 0;
}
#csImg__img {
	letter-spacing: -0.4em;
	overflow: hidden;
}
#csImg__img a {
	float: left;
	position: relative;
	overflow: hidden;
}
#csImg__img a > div p {
	letter-spacing: 0px;
	font-size: 229%;
	font-weight: 700;
	position: absolute;
	z-index: 1;
	opacity: 0;
	transition: opacity 1s 0.2s;
}
#csImg__img a > div div {
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.8);
	position: absolute;
	left: -100%;
	transition: all 1s 0s;
}
#csImg__img a.mouseOn > div div {
	left: 0%;
}
#csImg__img a.mouseOn > div p {
	opacity: 1;
}
#csImg__img a.scrollOn > div p {
	opacity: 1;
	color: #ffffff;
	text-shadow: 2px 2px 8px #000000;
}
#csImg__img a {
	display: inline-block;
}
#csImg__img a:nth-of-type(1) {
	border-right: 2px solid #ffffff;
}
#csImg__img a:nth-of-type(2) div {
	border-bottom: 2px solid #ffffff;
}
#csImg__img a:nth-of-type(4) {
	margin: 2px 0;
}
#csImg__img a:nth-of-type(5) {
	margin-right: 2px;
}
#csImg__img a:nth-child(7) {
	float: right;
	margin-top: 2px;
}
#csImg__img a:nth-child(8) {
	margin: 2px 0;
}

#csImg__img a:nth-child(1) p {
	left: 251px;
	top: 201px;
}
#csImg__img a:nth-of-type(2) p {
	left: 84px;
	top: 88px;
}
#csImg__img a:nth-child(3) p {
	left: 125px;
	top: 88px;
}
#csImg__img a:nth-child(4) p {
	left: 453px;
	top: 109px;
}
#csImg__img a:nth-child(5) p {
	left: 163px;
	top: 157px;
}
#csImg__img a:nth-child(6) p {
	left: 197px;
	top: 157px;
}
#csImg__img a:nth-child(7) p {
	left: 261px;
	top: 200px;
}
#csImg__img a:nth-child(8) p {
	left: 75px;
	top: 87px;
}
#csImg__img a:nth-child(9) p {
	left: 78px;
	top: 87px;
}
#csImg__img a {
	color: #000000;
}
.csTopContents p:last-child {
	font-size: 86%;
	margin: 12px 0 0 0;
}
#csFooterArrow {
	width: 1200px;
	height: 46px;
	margin: 10px auto 0 auto;
	overflow: hidden;
	position: absolute;
	bottom: 443px;
	left: 50%;
	transform: translateX(-50%);
}
#csFooterArrow p {
	cursor: pointer;
	display: block;
	width: 46px;
	height: 46px;
	float: right;
}
#csFooterArrow p img {
	display: inline-block;
	float: right;
}
#csFooterArrow p img {
	width: 46px;
	height: 46px;
}
/*スタイリッシュデザイン*/
.csSdesign {
	width: 100%;
	min-width: 1200px;
	height: 1403px;
	text-align: center;
	margin-top: 150px;
	position: relative;
}
.csSdesign .wrap {
	width: 1920px;
	height: 1240px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}
.csSdesign .wrap > div,
.csSdesign .wrap > figure,
.csSdesign .wrap > p {
	position: absolute;
	overflow: hidden;
}
.csSdesign .wrap > div {
	transition: all 2s ease-in-out 0.2s;
	transform: translateY(50px);
	opacity: 0;
	top: 0px;
	left: 492px;
	z-index: 1;
}
.csSdesign .wrap > div.on {
	opacity: 1;
	transform: translateY(0px);
}
.csSdesign .wrap > figure::after {
	transition: transform 1s ease-in 0.2s;
	background-color: #f5f5f5;
	content: "";
	display: block;
	transform: translateX(-100%);
	width: 200%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.csSdesign .wrap > figure.on::after {
	transform: translateX(50%);
}
.csSdesign .wrap > figure img:first-child {
	transition: all 1s ease-out 1s;
	transform: translateX(-50px);
	visibility: hidden;
}
.csSdesign .wrap > figure.on img:first-child {
	visibility: visible;
	transform: translateX(0px);
}
.csSdesign .wrap > p {
	font-size: 22px;
	color: #666666;
	transition: all 2s ease-in-out 0.2s;
	transform: translateY(50px);
	opacity: 0;
	text-align: left;
	top: 360px;
	left: 855px;
	z-index: 1;
}
.csSdesign .wrap > p.on {
	opacity: 1;
	transform: translateY(0px);
}
.csSdesign .wrap > figure:nth-of-type(1) {
	top: 0px;
	right: 286px;
	z-index: 1;
}
.csSdesign .wrap > figure:nth-of-type(2) {
	top: 148px;
	left: 0px;
	width: 719px;
	height: 769px;
}
.csSdesign .wrap > figure:nth-of-type(2) p {
	border-bottom: 3px solid #fff;
	width: 100%;
	height: 60px;
	position: absolute;
	bottom: 65px;
	transition: all 1.2s ease-in-out 1.3s;
	transform: translateX(-50px);
	opacity: 0;
}
.csSdesign .wrap > figure:nth-of-type(2).on p {
	opacity: 1;
	transform: translateX(0px);
}
.csSdesign .wrap > figure:nth-of-type(2) p img {
	position: absolute;
	right: 43px;
}
.csSdesign .wrap > figure:nth-of-type(3) {
	top: 234px;
	right: 0px;
}
.csSdesign .wrap > figure:nth-of-type(4) {
	top: 584px;
	left: 719px;
}
.csSdesign .wrap > figure:nth-of-type(5) {
	top: 721px;
	right: 0px;
}
.csSdesign .wrap > figure:nth-of-type(5) p {
	border-bottom: 3px solid #fff;
	width: 100%;
	height: 114px;
	position: absolute;
	bottom: 28px;
	transition: all 1.2s ease-in-out 1.3s;
	transform: translateX(-50px);
	opacity: 0;
}
.csSdesign .wrap > figure:nth-of-type(5).on p {
	opacity: 1;
	transform: translateX(0px);
}
.csSdesign .wrap > figure:nth-of-type(5) p img {
	position: absolute;
	left: 43px;
}
.csSdesign button {
	width: 583px;
	height: 139px;
	position: absolute;
	box-sizing: border-box;
	padding: 0;
	transition: all 1s ease-in-out;
	transform: translateY(50px);
	opacity: 0;
}
.csSdesign button.on {
	transform: translateY(0px);
	opacity: 1;
}
.csSdesign button a {
	text-decoration: none;
	display: inline-block;
	width: 100%;
	height: 100%;
}
.csSdesign button p {
	color: #fff;
	font-size: 30px;
	line-height: 1.4em;
	padding: 32px 0 0 0px;
	background: url("/center-siding-roof/img/sdsign_arrow.svg") no-repeat 55px
		57px;
}
.csSdesign button:last-child p {
	background-position-x: 97px;
}
.csSdesign button p span {
	letter-spacing: -12px;
}
.csSdesign button p {
	width: 100%;
	height: 100%;
	font-weight: 600;
	filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 1));
}
.csSdesign button img {
	position: absolute;
	transition: opacity 0.5s ease-out;
	top: 0;
	left: 0;
}
.csSdesign button:hover {
	background-color: rgba(255, 255, 255, 0.4);
	background-blend-mode: lighten;
}
.csSdesign button p span:nth-of-type(1) {
	letter-spacing: -4px;
}
.csSdesign button:nth-of-type(1) {
	top: 1128px;
	left: 360px;
	background-image: url("/center-siding-roof/img/sdesign_button01.jpg");
	background-repeat: no-repeat;
}
.csSdesign button:nth-of-type(2) {
	top: 1128px;
	right: 360px;
	background-image: url("/center-siding-roof/img/sdesign_button02.jpg");
	background-repeat: no-repeat;
}
/*RENOVATION*/
.csRenovation {
	width: 1200px;
	margin: 0 auto;
}
.csRenovation .wrap {
	text-align: center;
}
.csRenovation .wrap > p {
	font-size: 22px;
	color: #666666;
	text-align: center;
	margin-top: 50px;
	margin-bottom: 40px;
}
.csRenovation div div {
	display: flex;
	margin: auto;
	width: 914px;
	justify-content: space-between;
	margin-bottom: 50px;
}
.csRenovation div div figure:nth-of-type(2) {
	padding-top: 92px;
}
.csRenovation div.wrap > img,
.csRenovation div.wrap > p {
	transition: all 1s ease-in-out;
	transform: translateY(50px);
	opacity: 0;
}
.csRenovation div.wrap > img.on,
.csRenovation div.wrap > p.on {
	transform: translateY(0px);
	opacity: 1;
}
.csRenovation div.wrap > div figure:nth-of-type(1) {
	transition: all 0.5s ease-in-out 0s;
	opacity: 0;
}
.csRenovation div.wrap > div figure:nth-of-type(2) {
	transition: all 0.5s ease-in-out 0.5s;
	opacity: 0;
}
.csRenovation div.wrap > div figure:nth-of-type(3) {
	transition: all 0.5s ease-in-out 1s;
	opacity: 0;
}
.csRenovation div.wrap > div.on figure {
	opacity: 1;
}
.csRenovation button {
	width: 913px;
	height: 139px;
	box-sizing: border-box;
	padding: 0;
	transition: all 1s ease-in-out;
	transform: translateY(0px);
	opacity: 0;
	position: relative;
	margin-top: 50px;
}
.csRenovation button.on {
	transform: translateY(0px);
	opacity: 1;
}
.csRenovation button a {
	text-decoration: none;
	display: inline-block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.csRenovation button a:hover > img {
	opacity: 0.6;
}
.csRenovation button img {
	position: absolute;
	transition: 1s ease;
	top: 0%;
	left: 0;
}
.csRenovation button p {
	position: absolute;
	top: 0%;
	left: 0;
	width: 100%;
	height: 100%;
}
.csRenovation button p img {
	position: absolute;
	top: 30px;
	left: 50%;
	transform: translateX(-50%);
}

/*------------------------------------------------------------------------------
	STYLE別施工例
 -------------------------------------------------------------------------------*/
#csStyle {
	width: 1200px;
	margin: 50px auto 0 auto;
}
.csStyle__title ul li {
	display: inline-block;
	vertical-align: top;
}
.csStyle__title ul li:nth-child(1) {
	font-size: 357%;
	font-weight: 700;
}
.csStyle__title ul li:nth-child(2) {
	font-size: 157%;
	font-weight: 600;
	padding: 28px 0 0 15px;
}
.csStyle__title ul li:nth-child(3) {
	padding: 36px 0 0 48px;
}
.csStyle__title ul li:nth-child(4) {
	font-size: 128%;
	padding: 31px 0 0 3px;
}
.csStyle__title ul li.csStyle__2line {
	padding: 15px 0 0 3px;
}
.csStyle__title hr {
	border: 0 none;
	width: 40px;
	height: 2px;
	color: #a5bddf;
	background-color: #777777;
	margin: 9px 0 0 0;
}
.csStyle__detail {
	margin: 50px 0 0 0;
	clear: both;
}
#csStyle article.csStyle__detail:nth-of-type(1) {
	margin: 15px 0 0 0;
}
.csStyle__photo {
	width: 850px;
	display: inline-block;
}
.csStyle__photo img:nth-child(2) {
	float: left;
	margin-top: 15px;
}
.csStyle__photo img:nth-child(3) {
	float: right;
	margin-top: 15px;
}

.csStyle__product {
	width: 308px;
	float: right;
}
.csStyle__product p:first-child {
	font-size: 129%;
	font-weight: 600;
	margin: 0 0 20px 0;
	white-space: nowrap;
}
.csStyle__product p:nth-child(2) {
	font-size: 93%;
	margin: 0 0 5px 0;
}
.csStyle__product figure img {
	width: 230px;
	pointer-events: auto !important;
}
.csStyle__product figure {
	font-family: "Noto Sans JP", sans-serif, Arial, "メイリオ", "Meiryo",
		"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック体",
		"Yu Gothic", "YuGothic", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic",
		sans-serif;
	margin: 0 0 17px 0;
	display: inline-block;
}
.csStyle__product figcaption {
	font-size: 107%;
	line-height: 1.3em;
	margin-top: 5px;
}
.csStyle__product figcaption span {
	font-family: "Cormorant Garamond", "Noto Serif JP", "Noto Serif", "游明朝体",
		"YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3",
		"Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN",
		"Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro",
		"HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "Sawarabi Mincho", serif;
	font-size: 145%;
	margin: 0 0 0 -4px;
}
.csStyle__product figcaption p {
	color: red;
}
.csStyle__product a {
	color: #333;
	text-decoration: none;
}

/*------------------------------------------------------------------------------
	other
 -------------------------------------------------------------------------------*/
#csOther {
	margin: 100px 0 0 0;
	letter-spacing: -0.4em;
	overflow: hidden;
	width: 1200px;
}
#csOther > p {
	font-size: 229%;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.5em;
}
#csOther a {
	float: left;
	position: relative;
	overflow: hidden;
}
#csOther a > div p {
	letter-spacing: 0px;
	font-size: 143%;
	font-weight: 700;
	position: absolute;
	z-index: 1;
	opacity: 0;
	transition: opacity 1s 0.2s;
}
#csOther a > div div {
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.8);
	position: absolute;
	left: -100%;
	transition: all 1s 0s;
}
#csOther a.mouseOn > div div {
	left: 0%;
}
#csOther a.mouseOn > div p {
	opacity: 1;
}
#csOther a.scrollOn > div p {
	opacity: 1;
	color: #ffffff;
	text-shadow: 2px 2px 8px #000000;
}
#csOther a {
	display: inline-block;
}
#csOther a {
	margin: 0 2px 10px 0;
}
#csOther a:nth-of-type(5),
#csOther a:nth-of-type(6),
#csOther a:nth-of-type(7),
#csOther a:nth-of-type(8) {
	margin-bottom: 0;
}

#csOther a:nth-of-type(4n) {
	margin: 0 0px 0 0;
}
#csOther a img {
	width: 298px;
	height: 176px;
}
#csOther a:nth-of-type(2n) img {
	width: 299px;
}
#csOther_modern p {
	left: 75px;
	top: 73px;
}
#csOther_industrial p {
	left: 58px;
	top: 73px;
}
#csOther_japanese p {
	left: 59px;
	top: 73px;
}
#csOther_simple p {
	left: 84px;
	top: 73px;
}
#csOther_standard p {
	left: 65px;
	top: 73px;
}
#csOther_shop p {
	left: 85px;
	top: 73px;
}
#csOther_commercial p {
	left: 54px;
	top: 73px;
}
#csOther_apartment p {
	left: 54px;
	top: 73px;
}
#csOther_roof p {
	left: 81px;
	top: 73px;
}
#csOther a {
	color: #000000;
}
/*------------------------------------------------------------------------------
	advantage
 -------------------------------------------------------------------------------*/
#csAd {
	width: 1200px;
	height: 7481px;
	margin: 0 auto;
}
#csAd > .wrap {
	position: relative;
}
#csAd > .wrap figure {
	display: inline-block;
	position: absolute;
}

.csAd__L01 {
	top: 197px;
	left: 440px;
	z-index: 10;
}
.csAd__L02 {
	top: 1025px;
	left: 0;
	z-index: 10;
}
.csAd__L03 {
	top: 1320px;
	left: 40px;
}
.csAd__L04 {
	top: 1984px;
	left: 180px;
}
.csAd__L05 {
	top: 2510px;
	left: 742px;
}
.csAd__L06 {
	top: 3375px;
	left: 525px;
}
.csAd__L07 {
	top: 3567px;
	left: 0px;
}
.csAd__L08 {
	top: 4077px;
	left: 0px;
}
.csAd__L09 {
	top: 5691px;
	left: 241px;
}
.csAd__L10 {
	top: 6049px;
	left: 180px;
}
.csAd__L11 {
	top: 6524px;
	left: 180px;
}
.csAd__L12 {
	top: 6945px;
	left: 180px;
}

.csAd__T01 {
	top: 880px;
	right: 0;
	width: 486px;
	font-size: 159% !important;
}
.csAd__T02 {
	top: 1418px;
	left: 37px;
}
.csAd__T03 {
	top: 2087px;
	left: 177px;
}
.csAd__T04 {
	top: 2681px;
	left: 745px;
}
.csAd__T05 {
	top: 3200px;
	left: 253px;
}
.csAd__T06 {
	top: 3200px;
	left: 615px;
}
.csAd__T07 {
	top: 3477px;
	left: 360px;
}
.csAd__T08 {
	top: 4395px;
	left: 0;
}
.csAd__T09 {
	top: 4473px;
	left: 0;
	width: 400px;
}
.csAd__T10 {
	top: 4664px;
	left: 0;
}
.csAd__T11 {
	top: 4737px;
	left: 0;
	width: 400px;
}
.csAd__T12 {
	top: 4977px;
	left: 0;
	line-height: 1.5;
}
.csAd__T13 {
	top: 5097px;
	left: 0;
	line-height: 1.5;
}
.csAd__T14 {
	top: 5208px;
	left: 0;
	width: 400px;
}
.csAd__T15 {
	top: 5362px;
	left: 0;
	width: 400px;
}
.csAd__T15::before {
	content: "■";
	display: inline;
	color: #c4c4c4;
}
.csAd__T15 p {
	display: inline-block;
}
.csAd__T15 table td {
	vertical-align: top;
}
.csAd__T16 {
	top: 5514px;
	left: 252px;
}
.csAd__T17 {
	top: 5514px;
	left: 615px;
}
.csAd__T18 {
	top: 5890px;
	left: 234px;
	text-align: center !important;
}
.csAd__T19 {
	top: 7371px;
	left: 384px;
}

.csAd__P01 {
	top: 132px;
	left: 0;
}
.csAd__P02 {
	top: 0;
	right: 0%;
}
.csAd__P03 {
	top: 468px;
	left: 0px;
	z-index: 1;
}
.csAd__P04 {
	top: 589px;
	left: 231px;
}
.csAd__P05 {
	top: 1216px;
	left: 719px;
}
.csAd__P06 {
	top: 1535px;
	left: 0;
}
.csAd__P07 {
	top: 1535px;
	left: 359px;
}
.csAd__P08 {
	top: 1535px;
	left: 719px;
}
.csAd__P10 {
	top: 2179px;
	left: 0px;
}
.csAd__P11 {
	top: 2179px;
	left: 228px;
}
.csAd__P12 {
	top: 2179px;
	left: 456px;
}
.csAd__P13 {
	top: 2179px;
	left: 684px;
}
.csAd__P14 {
	top: 2559px;
	left: 351px;
}
.csAd__P15 {
	top: 2559px;
	left: 0px;
}
.csAd__P16 {
	top: 2798px;
	left: 351px;
}
.csAd__P17 {
	top: 2798px;
	left: 702px;
}
.csAd__P18 {
	top: 3678px;
	left: 0px;
}
.csAd__P19 {
	top: 3678px;
	left: 300px;
}
.csAd__P20 {
	top: 3678px;
	left: 600px;
}
.csAd__P21 {
	top: 3678px;
	left: 900px;
}
.csAd__P22 {
	top: 4371px;
	left: 458px;
}
.csAd__P23 {
	top: 4977px;
	left: 442px;
}
.csAd__P30 {
	top: 4371px;
	left: 458px;
	transition: all 1s ease-out;
}
.csAd__P31 {
	top: 4977px;
	left: 442px;
	transition: all 1s ease-out;
}

.opacity0 {
	opacity: 0;
}

#csAd > .wrap > a .csAd__Btn.csAd__T06 p {
	padding-top: 26px;
}
.csAd__mask img {
	transition: transform 1s ease-out 0.3s;
	transform: translate3d(-10%, 0, 0);
	visibility: hidden;
}
.csAd__mask {
	transform: translateX(0);
	overflow: hidden;
}
.csAd__mask::after {
	transition: transform 0.4s ease-in 0.2s;
	background-color: #f5f5f5;
	content: "";
	display: block;
	transform: translateX(-100%);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.csAd__actionA.csAd__mask::after {
	transform: translateX(0%);
}
.csAd__actionB.csAd__mask::after {
	transform: translateX(100%);
}

.csAd__actionB.csAd__mask img {
	visibility: visible;
	transform: translate3d(0%, 0, 0);
}

.csAd__fade {
	transform: translateY(100px);
	transition: all 1s ease-out;
	opacity: 0;
}
.csAd__actionA.csAd__fade {
	transform: translateY(0px);
	opacity: 1;
}
#csAd > .wrap > p,
#csAd > .wrap > div.csAd__T15 {
	color: #666666;
	font-family: "Noto Sans JP", sans-serif, Arial, "メイリオ", "Meiryo",
		"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック体",
		"Yu Gothic", "YuGothic", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic",
		sans-serif;
	font-size: 110%;
	position: absolute;
	text-align: justify;
	text-justify: inter-ideograph;
}

#csAd > .wrap > a .csAd__Btn {
	position: absolute;
	font-size: 142%;
	line-height: 1.4em;
	text-align: center;
	width: 332px;
	height: 75px;
	border: 2px solid #000000;
}
#csAd > .wrap > a .csAd__Btn p {
	background: url("/center-siding-roof/img/csADLink.png") no-repeat 94% 22px;
	padding-top: 12px;
}
#csAd > .wrap > a .csAd__Btn.csAd__T16 p,
#csAd > .wrap > a .csAd__Btn.csAd__T17 p {
	background: none;
}

#csAd > .wrap > a .csAd__Btn::after {
	position: absolute;
	content: "";
	width: 0%;
	height: 100%;
	background: #f5f5f5;
	top: 0;
	left: 0;
	z-index: -1;
	transition: width 0.4s ease;
}
#csAd > .wrap > a {
	color: #666666;
}
#csAd > .wrap > a:hover .csAd__Btn::after {
	width: 100%;
}
.csAd__product {
	font-family: "Noto Sans JP", sans-serif, Arial, "メイリオ", "Meiryo",
		"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック体",
		"Yu Gothic", "YuGothic", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic",
		sans-serif;
	position: absolute;
	font-size: 0;
}
.csAd__product a {
	color: #666666;
	text-decoration: none;
	display: inline-block;
	font-size: 24px;
	height: 420px;
	width: 300px;
}
.csAd__product a p {
	padding-left: 16px;
	line-height: 1.2;
	margin: 9px 0 7px 0;
	letter-spacing: 0;
	font-weight: 600;
}
.csAd__product a p span {
	font-size: 82%;
	font-weight: 400;
}
.csAd__product > div {
	display: inline-block;
	letter-spacing: -0.4em;
	width: 300px;
}
.csAd__product__LinkA,
.csAd__product__LinkB,
.csAd__product__LinkC,
.csAd__product__LinkD {
	transition: opacity 1s ease-out;
}
.csAd__product__LinkHover {
	opacity: 0.6;
}
.csAd__BA img {
	vertical-align: top;
}
.csAd__BA img:nth-of-type(2) {
	margin: 0 62px 0 62px;
}
.csAd__BA .csAd__fade {
	transform: translateY(0px);
}
.csAd__BA img:nth-of-type(1).csAd__actionA.csAd__fade {
	transition: all 1s ease-out 1s;
}
.csAd__BA img:nth-of-type(2).csAd__actionA.csAd__fade {
	transition: all 1s ease-out 1.5s;
}
.csAd__BA img:nth-of-type(3).csAd__actionA.csAd__fade {
	transition: all 1s ease-out 2s;
}

#csAd > .wrap > .csAd__fontL {
	font-size: 321%;
}
#csAd > .wrap > .csAd__fontL span {
	display: block;
	border: 1px #666666 solid;
	padding: 4px 0;
	width: 100px;
	font-size: 40%;
	text-align: center;
}

/*------------------------------------------------------------------------------
	金属製サイディングの特長
 -------------------------------------------------------------------------------*/
#csCS {
	max-width: 100%;
	font-family: "Noto Sans JP", sans-serif, Arial, "メイリオ", "Meiryo",
		"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック体",
		"Yu Gothic", "YuGothic", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic",
		sans-serif;
	font-weight: 400;
	color: #666666;
	line-height: 1.65;
}
#csCS figcaption {
	font-size: 15px;
}
#csCS .mainV {
	height: 776px;
}
#csCS .mainV .container {
	background: url("/center-siding-roof/img/csCS_mainV_img.jpg") no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	height: 546px;
}
#csCS .mainV .wrap {
	width: 1200px;
	margin: 0 auto;
}
#csCS .mainV h1 {
	overflow: hidden;
	text-align: center;
	font-size: 33px;
	font-weight: 400;
	color: #fff;
}
#csCS .mainV h1 img {
	display: inline-block;
	margin: 100px 0 50px 0;
}
#csCS .mainV h1 span {
	text-shadow: 0 0 8px #000000;
}
#csCS .mainV p {
	margin-top: 132px;
	font-size: 157%;
}
/*4つのナビボタン*/
#csCS .navi {
	width: 1200px;
	margin: 0 auto;
}
#csCS .navi ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#csCS .navi li {
	width: 591px;
	height: 171px;
	cursor: pointer;
	text-align: center;
	padding-top: 63px;
	box-sizing: border-box;
	margin-bottom: 15px;
	position: relative;
}

#csCS .navi li:after {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #003175;
	mix-blend-mode: multiply;
	opacity: 0;
	transition: opacity 0.5s;
}
#csCS .navi li:hover {
	background-color: rgba(255, 255, 255, 0.4);
	background-blend-mode: lighten;
}
#csCS .navi li.active:hover {
	background-color: rgba(255, 255, 255, 0);
}
#csCS .navi li:nth-of-type(1) {
	background-image: url("/center-siding-roof/img/csCS_navBtn_img01.jpg");
}
#csCS .navi li:nth-of-type(2) {
	background-image: url("/center-siding-roof/img/csCS_navBtn_img02.jpg");
}
#csCS .navi li:nth-of-type(3) {
	background-image: url("/center-siding-roof/img/csCS_navBtn_img03.jpg");
}
#csCS .navi li:nth-of-type(4) {
	background-image: url("/center-siding-roof/img/csCS_navBtn_img04.jpg");
}
#csCS .navi li.active:after {
	opacity: 0.7;
}
#csCS .navi li h2 {
	color: #fff;
	font-size: 31px;
	background: url("/center-siding-roof/img/csCS_navBtn_arrow.svg") no-repeat;
	display: inline-block;
	padding-left: 29px;
	white-space: nowrap;
	background-position: 0px 7px;
	filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.8));
	position: absolute;
	top: 65px;
	left: 50%;
	transform: translateX(-50%);
}
#csCS .navi li.active h2 {
	background: url("/center-siding-roof/img/csCS_navBtn_arrow2.svg") no-repeat;
	background-position: 0px 13px;
	z-index: 1;
}
/*contents*/
#csCS #contents {
	width: 1200px;
	margin: 100px auto 0 auto;
	position: relative;
	opacity: 0;
	transition: opacity 0.2s ease;
}
#csCS #contents.on {
	opacity: 1;
}

/*左側*/
.csCS__left {
	width: 169px;
	height: calc(100% + 85px);
	position: absolute;
	border-right: solid 18px #c1c1c1;
}
.csCS__right {
	width: 1031px;
	margin-left: auto;
}
#csCS h2,
#csCS h3 {
	font-weight: 500;
}
#csCS h3 {
	position: absolute;
	font-size: 25px;
	color: #00316c;
}
#csCS h3 span {
	font-size: 21px;
	margin-left: -12px;
}
#csCS h3:nth-of-type(1) {
	top: -5px;
}
#csCS h3:nth-of-type(2) {
	top: 1170px;
}
#csCS h3:nth-of-type(3) {
	top: 2064px;
}
#csCS h3:nth-of-type(4) {
	top: 3183px;
}
/*Firefox*/
@-moz-document url-prefix() {
	#csCS h3:nth-of-type(1) {
		top: -5px;
	}
	#csCS h3:nth-of-type(2) {
		top: 1180px;
	}
	#csCS h3:nth-of-type(3) {
		top: 2077px;
	}
	#csCS h3:nth-of-type(4) {
		top: 3199px;
	}
}

.csCS__right > .wrap {
	margin: -9px 0 0 40px;
}
#csCS h2 {
	font-size: 304%;
	margin-bottom: 20px;
}
#csCS h4 {
	font-size: 177%;
	margin-bottom: 16px;
	display: inline-block;
}
#csCS h4 span {
	font-family: "Noto Serif JP", "Noto Serif", "游明朝体", "YuMincho", "游明朝",
		"Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3",
		HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN",
		"ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝",
		"MS PMincho", "Sawarabi Mincho", serif !important;
	margin-right: 12px;
}
#csCS h4 span.suuji {
	margin-right: 0;
}
#csCS h4.indenth4 {
	padding-left: 1em;
	text-indent: -1em;
}
.csCS__right > .wrap figure {
	display: inline-block;
}
.csCS__right > .wrap figure figcaption {
	margin-bottom: 10px;
	font-size: 110%;
}
.csCS__right > .wrap p {
	font-size: 108%;
	display: inline-block;
	text-align: justify;
	text-justify: inter-ideograph;
}
.csCS__right > .wrap p span {
	font-size: 74%;
}
.csCS__right > .wrap > div {
	position: relative;
	clear: both;
}

/*csSidingA*/
#csCS .csSidingA {
	height: auto;
	margin-bottom: 132px;
}
#csCS .csSidingA h4 {
	display: block;
}
#csCS .csSidingA p {
	margin-bottom: 45px;
}
#csCS .csSidingA figcaption {
	margin-bottom: 15px;
}
#csCS .csSidingA figure:nth-of-type(1) {
	display: block;
	width: 333px;
}
#csCS .csSidingA figure:nth-of-type(2) {
	position: absolute;
	top: -17px;
	right: 0;
}

/*csSidingB*/
#csCS .csSidingB {
	height: auto;
	margin-bottom: 105px;
}
#csCS .csSidingB h4 {
	display: block;
}
#csCS .csSidingB h4 span:nth-child(n + 2) {
	margin-right: 0;
}
#csCS .csSidingB figure {
	margin-top: 22px;
}
#csCS .csSidingB figure:nth-of-type(2) {
	float: right;
}
#csCS .csSidingB figure:nth-of-type(3) {
	margin-top: 70px;
}
#csCS .csSidingB figcaption span {
	font-size: 75%;
}
#csCS .csSidingB p span:nth-of-type(2) {
	margin-top: 0px;
	display: block;
}

/*csSidingC*/
#csCS .csSidingC {
	height: auto;
	margin-bottom: 39px;
}
#csCS .csSidingC h4 {
	display: block;
}
#csCS .csSidingC p {
	margin-bottom: 34px;
	display: block;
}
#csCS .csSidingC figure:nth-of-type(1) {
	margin-right: 55px;
}
/*csSidingD*/
#csCS .csSidingD {
	height: 498px;
	min-width: 1240px;
	position: absolute;
	width: 100vw;
	left: 50%;
	transform: translateX(-50%);
	overflow: hidden;
}
#csCS .csSidingD.fadeConts {
	top: 2810px;
}
#csCS .csSidingD.fadeConts.on {
	top: 2710px;
}
#csCS .csSidingD .csCS__slide {
	width: 100%;
	height: 390px;
	position: relative;
}
#csCS .csSidingD .csCS__slide > li {
	width: 100%;
	height: 100%;
	position: absolute;
	opacity: 0;
	transition: opacity 0.5s ease;
}
#csCS .csSidingD .csCS__slide > li.is_active {
	opacity: 1;
}
#csCS .csSidingD .csCS__slide01 {
}
#csCS .csSidingD .csCS__slide02 {
}
#csCS .csSidingD .csCS__slide03 {
}
#csCS .csCS__slide .olImg {
	display: flex;
	justify-content: space-between;
	height: 100%;
}
#csCS .csCS__slide .olImg li {
	width: 33.25%;
	height: 100%;
	text-align: right;
	position: relative;
}
.balloon {
	position: absolute;
	background-color: rgba(58, 129, 196, 0.6);
	mix-blend-mode: multiply;
	width: 398px;
	height: 34px;
	display: inline-block;
	color: #fff;
	right: 0%;
	bottom: 0;
}
.balloon:before {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	margin: auto;
	top: 0;
	left: 0;
	transform: translateX(-100%);
	border-style: solid;
	border-color: transparent transparent #3a81c4 transparent;
	opacity: 0.6;
	mix-blend-mode: multiply;
	border-width: 0 0 34px 28px;
}
#csCS .csCS__slide .olImg li p {
	color: #fff;
	font-size: 15px;
	position: absolute;
	text-align: right;
	bottom: 5px;
	right: 0;
	display: inline-block;
	z-index: 1;
}
#csCS .csSidingD .csCS__slide01 .olImg li:nth-of-type(1) p {
	right: 40px;
}
#csCS .csSidingD .csCS__slide01 .olImg li:nth-of-type(2) p {
	right: 16px;
}
#csCS .csSidingD .csCS__slide01 .olImg li:nth-of-type(3) p {
	right: 91px;
}
#csCS .csSidingD .csCS__slide02 .olImg li:nth-of-type(1) p {
	right: 65px;
}
#csCS .csSidingD .csCS__slide02 .olImg li:nth-of-type(2) p {
	right: 4px;
	letter-spacing: -0.5px;
}
#csCS .csSidingD .csCS__slide02 .olImg li:nth-of-type(3) p {
	right: 156px;
	letter-spacing: -0.5px;
}
#csCS .csSidingD .csCS__slide03 .olImg li:nth-of-type(1) p {
	right: 6px;
}
#csCS .csSidingD .csCS__slide03 .olImg li:nth-of-type(2) p {
	right: 60px;
}
#csCS .csSidingD .csCS__slide03 .olImg li:nth-of-type(3) p {
	right: 52px;
}

#csCS .csSidingD .csCS__slide01 li:nth-of-type(1) {
	background-image: url("/center-siding-roof/img/csCS__slide_01_1.jpg");
	background-size: cover;
}
#csCS .csSidingD .csCS__slide01 li:nth-of-type(2) {
	background-image: url("/center-siding-roof/img/csCS__slide_02_1.jpg");
	background-size: cover;
}
#csCS .csSidingD .csCS__slide01 li:nth-of-type(3) {
	background-image: url("/center-siding-roof/img/csCS__slide_03_1.jpg");
	background-size: cover;
}

#csCS .csSidingD .csCS__slide02 li:nth-of-type(1) {
	background-image: url("/center-siding-roof/img/csCS__slide_01_2.jpg");
	background-size: cover;
}
#csCS .csSidingD .csCS__slide02 li:nth-of-type(2) {
	background-image: url("/center-siding-roof/img/csCS__slide_02_2.jpg");
	background-size: cover;
}
#csCS .csSidingD .csCS__slide02 li:nth-of-type(3) {
	background-image: url("/center-siding-roof/img/csCS__slide_03_2.jpg");
	background-size: cover;
}

#csCS .csSidingD .csCS__slide03 li:nth-of-type(1) {
	background-image: url("/center-siding-roof/img/csCS__slide_01_3.jpg");
	background-size: cover;
}
#csCS .csSidingD .csCS__slide03 li:nth-of-type(2) {
	background-image: url("/center-siding-roof/img/csCS__slide_02_3.jpg?ver2");
	background-size: cover;
}
#csCS .csSidingD .csCS__slide03 li:nth-of-type(3) {
	background-image: url("/center-siding-roof/img/csCS__slide_03_3.jpg");
	background-size: cover;
}

#csCS .csSidingD .ulText {
	display: flex;
	justify-content: space-between;
	height: 108px;
}

@media screen and (max-width: 1600px) {
	#csCS .csSidingD {
		height: 527px;
	}
	#csCS .csSidingD .ulText {
		height: 137px;
	}
	.tablet_dn {
		display: none;
	}
}
#csCS .ulText li {
	width: 33.25%;
	height: 100%;
	background-color: #eeeeee;
	color: #666666;
	text-align: center;
	padding: 7px 24px 0 24px;
}
#csCS .ulText li span {
	text-align: center;
	display: block;
	font-size: 25px;
}
#csCS .ulText li p {
	text-align: left;
	font-size: 15px;
}

/*csSidingE*/
#csCS .csSidingE {
	height: 235px;
	margin-top: 630px;
}
#csCS .csSidingE h4 {
	display: block;
}
#csCS .csSidingE h4 span {
	font-size: 11px;
}
#csCS .csSidingE p {
	margin-bottom: 26px;
}

/*csSidingF*/
#csCS .csSidingF {
	height: 797px;
	min-width: 1240px;
	position: absolute;
	width: 100vw;
	left: 50%;
	transform: translateX(-50%);
	overflow: hidden;
}
#csCS .csSidingF.fadeConts {
	top: 3596px;
}
#csCS .csSidingF.fadeConts.on {
	top: 3496px;
}
#csCS .csSidingF .csCS__case {
	width: 100%;
	position: relative;
}
#csCS .csSidingF .csCS__case > li {
	width: 100%;
	height: 100%;
	position: absolute;
	opacity: 1;
	transition: opacity 0.5s ease;
}
#csCS .csSidingF .csCS__case > li:nth-of-type(1) {
	height: 478px;
}
#csCS .csSidingF .csCS__case > li:nth-of-type(2) {
	height: 318px;
}

#csCS .csCS__case .olImg {
	display: flex;
	justify-content: space-between;
	height: 100%;
}
#csCS .csCS__case .olImg li {
	width: 33.25%;
	height: 100%;
	text-align: right;
	position: relative;
	background-position: 50% 50%;
}
#csCS .csCS__case .line {
	position: absolute;
	background-color: rgba(238, 238, 238, 0.8);
	width: 100%;
	height: 34px;
	display: inline-block;
	bottom: 0;
	color: #333333;
	font-size: 15px;
	position: absolute;
	text-align: center;
	z-index: 1;
	padding-top: 5px;
	font-weight: 600;
	left: 0;
}
@media screen and (max-width: 1360px) {
	#csCS .csCS__case .line {
		height: 57px;
	}
	#csCS .csCS__case .olImg li p span {
		display: block;
	}
}
#csCS .csCS__case .olImg li p span {
	font-size: 11px;
}

#csCS .csSidingF .csCS__case01 li:nth-of-type(1) {
	background-image: url("/center-siding-roof/img/csCS__case_01.jpg");
	background-size: cover;
}
#csCS .csSidingF .csCS__case01 li:nth-of-type(2) {
	background-image: url("/center-siding-roof/img/csCS__case_02.jpg");
	background-size: cover;
}
#csCS .csSidingF .csCS__case01 li:nth-of-type(3) {
	background-image: url("/center-siding-roof/img/csCS__case_03.jpg");
	background-size: cover;
}
#csCS .csSidingF .minwidth {
	min-width: 625px;
}
#csCS .csCS__case .csCS__case04 {
	top: 478px;
}
#csCS .csCS__case .csCS__case04 .olImg li {
	width: 100%;
	height: 100%;
	text-align: right;
	position: relative;
}
#csCS .csSidingF .csCS__case04 li {
	background-image: url("/center-siding-roof/img/csCS__case_04.jpg");
	background-size: cover;
	background-position: 50% 50%;
}

/*csSidingG*/
#csCS .csSidingG {
	height: auto;
	margin-top: 884px;
}
#csCS .csSidingG h4 span {
	font-size: 11px;
}
#csCS .csSidingG ul {
	display: flex;
	justify-content: space-between;
	margin-top: 40px;
	margin-bottom: 65px;
}
#csCS .csSidingG ul li img {
	opacity: 0;
	transition: opacity 1s ease;
}
#csCS .csSidingG ul.on li img {
	opacity: 1;
}
#csCS .csSidingG ul li:nth-of-type(1) img {
	transition-delay: 0s;
}
#csCS .csSidingG ul li:nth-of-type(2) img {
	transition-delay: 0.8s;
}
#csCS .csSidingG ul li:nth-of-type(3) img {
	transition-delay: 1.6s;
}

#csCS .csSidingG ul li:nth-of-type(2) {
	margin-top: 222px;
}
#csCS .csSidingG button {
	width: 332px;
	height: 75px;
	border: solid 2px #000;
	margin: 91px auto 0 auto;
	display: block;
}
#csCS .csSidingG button p {
	font-size: 20px;
	color: #666666;
}
#csCS .csSidingG button p {
	background: url("/center-siding-roof/img/csCS_reformPDF.png") no-repeat right
		15px;
	padding: 20px 50px 5px 46px;
}
#csCS .csSidingG button a {
	width: 100%;
	height: 100%;
	display: inline-block;
}
/*csSidingH*/
#csCS .csSidingH {
	height: 1280px;
}
#csCS .csSidingH h4 {
	display: block;
}
#csCS .csSidingH p {
	display: block;
}
#csCS .csSidingH figure:nth-of-type(1) {
	margin: 37px 0 0 174px;
}
#csCS .csSidingH figure:nth-of-type(2) {
	margin: 70px 0 0 0px;
}
#csCS .csSidingH p:nth-of-type(2) {
	display: inline-block;
	vertical-align: top;
	margin: 106px 0 10px 7px;
}
#csCS .csSidingH table {
	margin-top: 15px;
}
#csCS .csSidingH td {
	vertical-align: top;
}
a.csLink {
	display: block;
	position: relative;
	text-align: center;
	float: right;
}
a.csLink figure {
	transition: opacity 0.5s ease-out;
}
a:hover.csLink figure {
	opacity: 0.6;
}
a.csLink p {
	position: absolute;
	top: 88px;
	left: 330px;
	font-size: 212% !important;
	letter-spacing: 1px;
	text-shadow: 0px 0px 7px #ffffff, 0px 0px 7px #ffffff;
	transition: all 0.5s ease-out;
	color: #000000;
	text-align: center !important;
	background: url("/center-siding-roof/img/csLinkMark.png") no-repeat 100% 52px;
}

a.csLink.csLinkRoof p {
	top: 97px;
	left: 377px;
	padding-right: 51px;
}

a.csLink.csTablet p {
	opacity: 1;
	text-shadow: 0px 0px 6px #000000;
	color: #ffffff;
}

/*csSiding_2----------------------------------*/
#csCS .csCS__left.csSiding_2 h3:nth-of-type(1) {
	top: -5px;
}
#csCS .csCS__left.csSiding_2 h3:nth-of-type(2) {
	top: 1212px;
}
#csCS .csCS__left.csSiding_2 h3:nth-of-type(3) {
	top: 1580px;
}
#csCS .csCS__left.csSiding_2 h3:nth-of-type(4) {
	top: 2151px;
}
/*Firefox*/
@-moz-document url-prefix() {
	#csCS .csCS__left.csSiding_2 h3:nth-of-type(1) {
		top: -1px;
	}
	#csCS .csCS__left.csSiding_2 h3:nth-of-type(2) {
		top: 1214px;
	}
	#csCS .csCS__left.csSiding_2 h3:nth-of-type(3) {
		top: 1582px;
	}
	#csCS .csCS__left.csSiding_2 h3:nth-of-type(4) {
		top: 2157px;
	}
}

/*csSidingA_2*/
#csCS .csSidingA_2 {
	height: auto;
	margin-bottom: 90px;
}
#csCS .csSidingA_2 figcaption {
	margin-bottom: 10px;
}
#csCS .csSidingA_2 h4 {
	display: block;
}
#csCS .csSidingA_2 p {
	font-size: 15px;
}
#csCS .csSidingA_2 figure {
	margin-top: 22px;
}
#csCS .csSidingA_2 figure:nth-of-type(1) {
	padding-left: 83px;
}
#csCS .csSidingA_2 figure:nth-of-type(2) {
	float: left;
	margin-top: 70px;
}
#csCS .csSidingA_2 figure:nth-of-type(3) {
	margin-top: 70px;
	margin-left: 55px;
}
#csCS .csSidingA_2 figure:nth-of-type(3) img {
	margin-top: -30px;
}
#csCS .csSidingA_2 figure:nth-of-type(4) {
	margin-top: 70px;
}
#csCS .csSidingA_2 figcaption span {
	font-size: 75%;
}

/*csSidingB_2*/
#csCS .csSidingB_2 {
	height: auto;
	margin-bottom: 75px;
}
#csCS .csSidingB_2 h4 {
	display: block;
}
#csCS .csSidingB_2 p {
	width: 494px;
	font-size: 15px;
	display: inline-block;
	vertical-align: top;
	margin-right: 80px;
}
#csCS .csSidingB_2 figure {
	width: 359px;
	display: inline-block;
}

/*csSidingC_2*/
#csCS .csSidingC_2 {
	height: auto;
	margin-bottom: 74px;
	width: 987px;
}
#csCS .csSidingC_2 h4 {
	display: block;
}
#csCS .csSidingC_2 p {
	font-size: 15px;
	width: 100%;
}
#csCS .csSidingC_2 div {
	display: inline-block;
	width: 304px;
	vertical-align: top;
	margin-top: 36px;
	margin-right: 33px;
}
#csCS .csSidingC_2 div:last-child {
	margin-right: 0;
}
#csCS .csSidingC_2 div p:nth-of-type(1) {
	background-color: #808080;
	color: #fff;
	text-align: center;
}
#csCS .csSidingC_2 div p:nth-of-type(2) {
	text-align: justify;
	margin-top: 3px;
}

/*csSidingD_2*/
#csCS .csSidingD_2 {
	height: auto;
	margin-bottom: 80px;
	width: 987px;
}
#csCS .csSidingD_2 h4 {
	display: block;
	font-size: 30px;
	font-weight: 500;
}
#csCS .csSidingD_2 p {
	font-size: 15px;
}
#csCS .csSidingD_2 img {
	margin: 40px 0 0 80px;
}
#csCS .csSidingD_2 div {
	margin-top: 40px;
	display: inline-block;
	width: 100%;
}
#csCS .csSidingD_2 div p {
	text-indent: -1.1em;
	padding-left: 131px;
	display: block;
}
#csCS .csSidingD_2 div::before {
	content: "　";
	width: 96px;
	height: 95px;
	float: left;
	display: inline-block;
	background-image: url(/center-siding-roof/img/csSiding_caution.svg);
	background-repeat: no-repeat;
	background-position: 2px 42px;
	border-right: 1px solid #666666;
}

/*csSidingE_2*/
#csCS .csSidingE_2 {
	height: auto;
	margin-bottom: 70px;
	width: 987px;
	overflow: hidden;
}
#csCS .csSidingE_2 h4 {
	display: block;
}
#csCS .csSidingE_2 p,
#csCS .csSidingE_2 img {
	width: 515px;
	float: left;
	font-size: 15px;
}
#csCS .csSidingE_2 img:nth-of-type(1) {
	float: right;
	width: 414px;
	margin-top: -45px;
}
#csCS .csSidingE_2 p:nth-of-type(1) {
	margin-bottom: 30px;
}
#csCS .csSidingE_2 p:nth-of-type(2) {
	margin-bottom: 5px;
}
#csCS .csSidingE_2 img:nth-of-type(2) {
	margin-bottom: 38px;
}
#csCS .csSidingE_2 p span {
	text-indent: -1.1em;
	padding-left: 1.1em;
	display: inline-block;
}

/*csSidingF_2*/
#csCS .csSidingF_2 {
	height: auto;
	margin-bottom: 70px;
	width: 987px;
	overflow: hidden;
}
#csCS .csSidingF_2 h4 {
	display: block;
}
#csCS .csSidingF_2 p {
	font-size: 15px;
}
#csCS .csSidingF_2 > p:nth-of-type(2) {
	font-size: 25px;
	margin: 33px 0 17px 0;
}
#csCS .csSidingF_2 p:nth-of-type(2) span {
	font-size: 15px;
	display: inline-block;
	background-image: url(/center-siding-roof/img/csSiding_caution.svg);
	background-repeat: no-repeat;
	background-position: 2px 4px;
	padding-left: 86px;
	display: block;
	margin-left: 301px;
	margin-top: -31px;
}
#csCS .csSidingF_2 div {
	width: 448px;
	display: inline-block;
}
#csCS .csSidingF_2 div:nth-of-type(1) {
	margin-right: 50px;
}
#csCS .csSidingF_2 div p:nth-of-type(1) {
	font-size: 20px;
	margin-bottom: 5px;
	font-weight: 500;
}
#csCS .csSidingF_2 button {
	width: 332px;
	height: 75px;
	border: solid 2px #000;
	margin-top: 25px;
	display: block;
}
#csCS .csSidingF_2 button p {
	font-size: 20px;
	color: #666666;
	background: url("/center-siding-roof/img/csCS_reformPDF.png") no-repeat 251px
		16px;
	padding: 20px 55px 5px 32px;
}
#csCS .csSidingF_2 button a {
	width: 100%;
	height: 100%;
	display: inline-block;
	text-decoration: none;
}

/*csSidingG_2*/
#csCS .csSidingG_2 {
	height: auto;
	margin-bottom: 70px;
	width: 987px;
	overflow: hidden;
}
#csCS .csSidingG_2 h4 {
	display: block;
}
#csCS .csSidingG_2 p {
	font-size: 15px;
}
#csCS .csSidingG_2 img:nth-of-type(1) {
	float: right;
}
#csCS .csSidingG_2 > div {
	width: 597px;
	float: left;
	margin-top: 15px;
}
#csCS .csSidingG_2 > div p span {
	color: #ff0000;
	display: inline-block;
	margin-top: 5px;
	margin-bottom: 40px;
}
#csCS .csSidingG_2 div img {
	margin: 5px 0 10px 0;
}
#csCS .csSidingG_2 > div p:nth-of-type(2) span {
	color: #666666;
	display: inline-block;
	margin-top: 5px;
	text-align: left;
	font-size: 15px;
}
#csCS .csSidingG_2 > div p:nth-of-type(2) rel {
	text-indent: -1.1em;
	padding-left: 1.1em;
	display: inline-block;
}
#csCS .csSidingG_2 > div div p:nth-of-type(1) {
	width: 200px;
	display: inline-block;
	vertical-align: top;
	color: #3a81c4;
}
#csCS .csSidingG_2 > div div p:nth-of-type(2) {
	width: 393px;
	display: inline-block;
	vertical-align: top;
}
#csCS .csSidingG_2 > div > p:nth-of-type(2) {
	margin-top: 21px;
}

/*csSidingH_2*/
#csCS .csSidingH_2 {
	height: auto;
	width: 987px;
	overflow: hidden;
}
#csCS .csSidingH_2 h4 {
	display: block;
}
#csCS .csSidingH_2 p {
	font-size: 15px;
	width: 447px;
	float: left;
}
#csCS .csSidingH_2 p:nth-of-type(2) {
	margin-top: 20px;
}
#csCS .csSidingH_2 table {
	width: 493px;
	float: right;
	margin-top: -48px;
	border-collapse: collapse;
	color: #231815;
	border-top: solid #666666 1px;
	margin-bottom: 93px;
}
#csCS .csSidingH_2 table tr {
	background-color: #ccd8ea;
	border-bottom: solid #fff 1px;
}
#csCS .csSidingH_2 table td {
	text-align: center;
	padding: 4px 4px;
}
#csCS .csSidingH_2 table td.td1 {
	width: 90px;
}
#csCS .csSidingH_2 table td.tdWhite {
	background-color: #fff;
}
#csCS .csSidingH_2 table td.tdGray {
	background-color: #e8ebf2;
}
#csCS .csSidingH_2 table td.tdBr {
	border-right: solid #bcbcbc 1px;
}
#csCS .csSidingH_2 table tr.trBB {
	border-bottom: solid #666666 1px;
}
#csCS .csSidingH_2 table td.tdLH1 {
	line-height: 1;
}
#csCS .csSidingH_2 button {
	width: 390px;
	height: 75px;
	border: solid 2px #000;
	margin: 0 auto 0 auto;
	display: block;
	clear: both;
}
#csCS .csSidingH_2 button p {
	font-size: 20px;
	color: #666666;
	background: url("/center-siding-roof/img/csCS_reformPDF.png") no-repeat 319px
		15px;
	padding: 11px 50px 5px 32px;
	line-height: 1.3;
	width: 100%;
	text-align: center;
}
#csCS .csSidingH_2 button a {
	width: 100%;
	height: 100%;
	display: inline-block;
	text-decoration: none;
}

/*csSiding_4----------------------------------*/
#csCS .csCS__left.csSiding_4 h3:nth-of-type(1) {
	top: -5px;
}
#csCS .csCS__left.csSiding_4 h3:nth-of-type(2) {
	top: 2705px;
}
#csCS .csCS__left.csSiding_4 h3:nth-of-type(3) {
	top: 4302px;
}
/*Firefox*/
@-moz-document url-prefix() {
	#csCS .csCS__left.csSiding_4 h3:nth-of-type(1) {
		top: -5px;
	}
	#csCS .csCS__left.csSiding_4 h3:nth-of-type(2) {
		top: 2716px;
	}
	#csCS .csCS__left.csSiding_4 h3:nth-of-type(3) {
		top: 4321px;
	}
}

/*csSidingA_4*/
#csCS .csSidingA_4 {
	height: auto;
	margin-bottom: 70px;
	width: 987px;
	overflow: hidden;
}
#csCS .csSidingA_4 h4 {
	float: left;
	margin-bottom: 17px;
}
#csCS .csSidingA_4 p:nth-of-type(1) {
	float: left;
	margin-bottom: 5px;
	font-size: 30px;
	margin-top: -13px;
}
#csCS .csSidingA_4 p:nth-of-type(2) {
	width: 449px;
	float: left;
	margin-bottom: 48px;
}
#csCS .csSidingA_4 figure:nth-of-type(1) {
	display: block;
	margin-bottom: 23px;
}
#csCS .csSidingA_4 h4 {
	float: left;
}
#csCS .csSidingA_4 p {
	float: left;
	font-size: 15px;
}
#csCS .csSidingA_4 figure:nth-of-type(2) {
	float: right;
	margin: 21px 44px 0 0;
}
#csCS .csSidingA_4 figure:nth-of-type(3) {
	float: left;
}

/*csSidingB_4*/
#csCS .csSidingB_4 {
	height: auto;
	margin-bottom: 105px;
	width: 987px;
	overflow: hidden;
}
#csCS .csSidingB_4 p {
	font-size: 15px;
}
#csCS .csSidingB_4 p span {
	font-size: 11px;
}
#csCS .csSidingB_4 figure {
	margin: 37px 0 0 203px;
}

/*csSidingC_4*/
#csCS .csSidingC_4 {
	height: auto;
	margin-bottom: 70px;
	width: 987px;
	overflow: hidden;
}
#csCS .csSidingC_4 h4 {
	margin-top: 10px;
}
#csCS .csSidingC_4 p span {
	font-size: 11px;
}
#csCS .csSidingC_4 p:nth-of-type(1) {
	font-size: 30px;
	display: block;
}
#csCS .csSidingC_4 figure:nth-of-type(2) {
	margin: 37px 0 0 203px;
}
#csCS .csSidingC_4 p {
	font-size: 15px;
}

/*csSidingD_4*/
#csCS .csSidingD_4 {
	height: auto;
	margin-bottom: 70px;
	width: 987px;
	overflow: hidden;
}
#csCS .csSidingD_4 h4 {
	margin-top: 10px;
	display: block;
}
#csCS .csSidingD_4 figure {
	margin: 37px 0 0 203px;
}
#csCS .csSidingD_4 p {
	font-size: 15px;
}

/*csSidingE_4*/
#csCS .csSidingE_4 {
	height: auto;
	margin-bottom: 105px;
	width: 987px;
	overflow: hidden;
}
#csCS .csSidingE_4 h4 {
	margin-top: 10px;
	display: block;
}
#csCS .csSidingE_4 p {
	width: 592px;
	margin-right: 40px;
	float: left;
}
#csCS .csSidingE_4 p {
	font-size: 15px;
}

/*csSidingF_4*/
#csCS .csSidingF_4 {
	height: auto;
	margin-bottom: 70px;
	width: 987px;
	overflow: hidden;
}
#csCS .csSidingF_4 h4 {
	margin-top: 17px;
	display: block;
}
#csCS .csSidingF_4 p span {
	font-size: 11px;
}
#csCS .csSidingF_4 figure:nth-of-type(1) {
	display: block;
}
#csCS .csSidingF_4 figure:nth-of-type(2) {
	margin: 10px 0 0 0;
}
#csCS .csSidingF_4 figure:nth-of-type(3) {
	margin: 37px 0 69px 47px;
}
#csCS .csSidingF_4 figure:nth-of-type(4) {
	margin-left: 52px;
}
#csCS .csSidingF_4 p {
	font-size: 15px;
}
#csCS .csSidingF_4 div {
	margin-top: 20px;
	display: inline-block;
	width: 100%;
}
#csCS .csSidingF_4 div {
	width: 879px;
	margin-left: 52px;
}
#csCS .csSidingF_4 div p {
	text-align: justify;
	display: block;
}
#csCS .csSidingF_4 div span {
	font-size: 11px;
}
#csCS .csSidingF_4 div::before {
	content: "　";
	width: 96px;
	height: 95px;
	float: left;
	display: inline-block;
	background-image: url(/center-siding-roof/img/csSiding_caution.svg);
	background-repeat: no-repeat;
	background-position: 2px 42px;
	border-right: 1px solid #666666;
	margin-right: 20px;
}
#csCS .csSidingF_4 ul {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 936px;
}
#csCS .csSidingF_4 ul li img.arrow {
	margin-top: 38px;
}

/*csSidingG_4*/
#csCS .csSidingG_4 {
	height: auto;
	margin-bottom: 70px;
	width: 987px;
	overflow: hidden;
}
#csCS .csSidingG_4 h4 {
	margin-top: 10px;
	display: block;
}
#csCS .csSidingG_4 p {
	width: 475px;
	margin-right: 40px;
	float: left;
}
#csCS .csSidingG_4 p {
	font-size: 15px;
}
#csCS .csSidingG_4 figure {
	margin-top: -49px;
}

/*csSidingH_4*/
#csCS .csSidingH_4 {
	height: auto;
	margin-bottom: 15px;
	width: 987px;
	overflow: hidden;
}
#csCS .csSidingH_4 h4 {
	margin-top: 10px;
	display: block;
}
#csCS .csSidingH_4 h4:nth-of-type(2) {
	margin-top: 90px;
}
#csCS .csSidingH_4 p {
	font-size: 15px;
}

/*csSidingI_4*/
#csCS .csSidingI_4 {
	height: auto;
	min-width: 1240px;
	position: absolute;
	width: 100vw;
	left: 50%;
	transform: translateX(-50%);
	overflow: hidden;
}
#csCS .csSidingI_4 h4 {
	width: 1240px;
	position: absolute;
	padding-left: 233px;
	left: 50%;
	transform: translateX(-50%);
}
#csCS .csSidingI_4.fadeConts {
	top: 2810px;
}
#csCS .csSidingI_4.fadeConts.on {
	top: 2710px;
}
#csCS .csSidingI_4 .csCS__slide {
	width: 100%;
	height: 390px;
	position: relative;
}
#csCS .csSidingI_4 .csCS__slide > li {
	width: 100%;
	height: 100%;
	position: absolute;
}
#csCS .csSidingI_4 .csCS__slide .olImg {
	display: flex;
	justify-content: space-between;
	height: 100%;
}
#csCS .csSidingI_4 .csCS__slide .olImg li {
	height: 100%;
	text-align: right;
	position: relative;
}
.csSidingI_4 .balloon {
	position: absolute;
	background-color: rgba(58, 129, 196, 0.6);
	mix-blend-mode: multiply;
	width: 417px;
	height: 34px;
	display: inline-block;
	color: #fff;
	right: 0%;
	bottom: 0;
}
.csSidingI_4 .balloon:before {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	margin: auto;
	top: 0;
	left: 0;
	transform: translateX(-100%);
	border-style: solid;
	border-color: transparent transparent #3a81c4 transparent;
	opacity: 0.6;
	mix-blend-mode: multiply;
	border-width: 0 0 34px 28px;
}
#csCS .csSidingI_4 .csCS__slide .olImg li p {
	color: #fff;
	font-size: 15px;
	position: absolute;
	text-align: right;
	bottom: 5px;
	right: 0;
	width: 100%;
	z-index: 1;
	letter-spacing: -1px;
	white-space: nowrap;
}
#csCS .csSidingI_4 .csCS__slide01 .olImg li:nth-of-type(1) p {
	right: 210px;
}
#csCS .csSidingI_4 .csCS__slide01 .olImg li:nth-of-type(2) p {
	right: 123px;
}
#csCS .csSidingI_4 .csCS__slide01 .olImg li:nth-of-type(3) p {
	right: 33px;
}
#csCS .csSidingI_4 .csCS__slide01 li:nth-of-type(1) {
	background-image: url("/center-siding-roof/img/csSidingI_4_01.jpg");
	background-size: cover;
}
#csCS .csSidingI_4 .csCS__slide01 li:nth-of-type(2) {
	background-image: url("/center-siding-roof/img/csSidingI_4_02.jpg");
	background-size: cover;
	border-left: 2px solid #fff;
}
#csCS .csSidingI_4 .csCS__slide01 li:nth-of-type(3) {
	background-image: url("/center-siding-roof/img/csSidingI_4_03.jpg");
	background-size: cover;
	border-left: 2px solid #fff;
}
#csCS .csSidingI_4 .ulText {
	display: flex;
	justify-content: space-between;
	height: 224px;
}
#csCS .csSidingI_4 .ulText figure {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}
#csCS .csSidingI_4 .ulText li:nth-of-type(1) figure {
	bottom: 10px;
}
#csCS .csSidingI_4 .ulText li:nth-of-type(2) figure {
	bottom: 15px;
}
#csCS .csSidingI_4 .ulText li:nth-of-type(3) figure {
	bottom: 20px;
}
@media screen and (max-width: 1860px) {
	#csCS .csSidingI_4 {
		height: 700px;
	}
	#csCS .csSidingI_4 .ulText {
		height: 254px;
	}
	.csSidingI_4 .tablet_dn {
		display: none;
	}
	#csCS .csSidingI_4 .ulLogo {
		height: 137px;
	}
}
@media screen and (max-width: 1500px) {
	#csCS .csSidingI_4 .ulText figure {
		width: 95%;
	}
	#csCS .csSidingI_4 .ulText figure img {
		width: 100%;
	}
}
#csCS .csSidingI_4 .ulText li {
	width: 33.25%;
	height: 100%;
	background-color: #eeeeee;
	color: #666666;
	text-align: center;
	padding: 7px 24px 0 24px;
	position: relative;
}
#csCS .csSidingI_4 .ulText li span {
	text-align: center;
	display: block;
	font-size: 25px;
}
#csCS .csSidingI_4 .ulText li p {
	text-align: left;
	font-size: 15px;
	display: inline-block;
	letter-spacing: -1px;
}

#csCS .csSidingI_4 .ulLogo {
	display: flex;
	justify-content: space-between;
	height: 55px;
}

#csCS .csSidingI_4 .ulLogo li {
	width: 33.25%;
	height: 100%;
	background-color: #eeeeee;
	color: #666666;
	text-align: center;
	padding: 7px 24px 0 24px;
}
#csCS .csSidingI_4 .ulLogo li:nth-of-type(1) img {
	margin-top: 6px;
}
#csCS .csSidingI_4 .ulLogo li:nth-of-type(2) img {
	margin-top: 6px;
}
#csCS .csSidingI_4 .ulLogo li:nth-of-type(3) img {
	margin-top: 10px;
}
#csCS .csSidingI_4_height {
	height: 669px;
}
@media screen and (max-width: 1860px) {
	#csCS .csSidingI_4_height {
		height: 694px;
	}
}
.pickup__slide {
	width: 100%;
	height: 100%;
	position: absolute;
}
* {
	min-height: 0;
	min-width: 0;
}
#csCS .csSidingI_4 ul.pickup__slide {
	width: 100%;
	height: 100%;
}
#csCS .csSidingI_4 ul.pickup__slide li {
	width: 100%;
	height: 100%;
	outline: none;
}
#csCS .csSidingI_4 ul.pickup__slide li:nth-of-type(2) {
	border-left: 2px solid #fff;
}
#csCS .csSidingI_4 ul.pickup__slide li:nth-of-type(3) {
	border-left: 2px solid #fff;
}
#csCS .csSidingI_4 ul.pickup__slide li img {
	display: inline;
}
.next-arrow {
	top: 50%;
	right: 2%;
}
.prev-arrow {
	top: 50%;
	left: 2%;
}
.slick-arrow {
	position: absolute;
	cursor: pointer;
	z-index: 1;
}
#csCS .csSidingI_4 .second .csCS__slide01 li:nth-of-type(1) {
	background-image: url("/center-siding-roof/img/csSidingI_4_04.jpg");
	background-size: cover;
}
#csCS .csSidingI_4 .second .csCS__slide01 li:nth-of-type(2) {
	background-image: url("/center-siding-roof/img/csSidingI_4_05.jpg");
	background-size: cover;
	border-left: 2px solid #fff;
}
#csCS .csSidingI_4 ul.pickup__slide li.second .ulLogo li {
	font-size: 25px;
}
#csCS .csSidingI_4 .second .csCS__slide {
	height: 500px;
}

#csCS .csSidingI_4 .second .csCS__slide .olImg li {
	width: 50%;
}
#csCS .csSidingI_4 .second .ulText li {
	width: 50%;
}
#csCS .csSidingI_4 .second .ulText {
	height: 114px;
}
#csCS .csSidingI_4 .second .csCS__slide01 .olImg li:nth-of-type(1) p {
	right: 52px;
}
#csCS .csSidingI_4 .second .csCS__slide01 .olImg li:nth-of-type(1) p {
	right: 55px;
}
@media screen and (max-width: 1860px) {
	#csCS .csSidingI_4 {
		height: 700px;
	}
	#csCS .csSidingI_4 .ulText {
		height: 254px;
	}
	.csSidingI_4 .tablet_dn {
		display: none;
	}
	#csCS .csSidingI_4 .second .csCS__slide {
		height: 531px;
	}
}

/*csSiding_3----------------------------------*/
#csCS .csCS__left.csSiding_3 h3:nth-of-type(1) {
	top: 100px;
}
#csCS .csCS__left.csSiding_3 h3:nth-of-type(2) {
	top: 1422px;
}
#csCS .csCS__left.csSiding_3 h3:nth-of-type(3) {
	top: 1966px;
}
/*Firefox*/
@-moz-document url-prefix() {
	#csCS .csCS__left.csSiding_3 h3:nth-of-type(1) {
		top: 100px;
	}
	#csCS .csCS__left.csSiding_3 h3:nth-of-type(2) {
		top: 1433px;
	}
	#csCS .csCS__left.csSiding_3 h3:nth-of-type(3) {
		top: 1978px;
	}
}

/*csSidingA_3*/
#csCS .csSidingA_3 {
	height: auto;
	margin-top: -15px;
	margin-bottom: 105px;
	width: 987px;
	overflow: hidden;
}
#csCS .csSidingA_3 h4 {
	margin-bottom: 17px;
}
#csCS .csSidingA_3 p:nth-of-type(1) {
	float: left;
	margin-bottom: 5px;
	font-size: 30px;
	margin-top: -13px;
}

#csCS .csSidingA_3 figure:nth-of-type(1) {
	display: block;
	margin-bottom: 23px;
}
#csCS .csSidingA_3 p {
	font-size: 15px;
}
#csCS .csSidingA_3 figure:nth-of-type(2) {
	margin: 21px 44px 0 0;
}
#csCS .csSidingA_3 figure:nth-of-type(3) {
	margin: 30px 0 0 161px;
}
#csCS .csSidingA_3 {
	height: auto;
	margin-bottom: 105px;
}
#csCS .csSidingA_3 h4 {
	display: block;
}
#csCS .csSidingA_3 p {
	display: block;
}
#csCS .csSidingA_3 figure:nth-of-type(2) {
	margin: 20px 0 60px 173px;
}
#csCS .csSidingA_3 figure:nth-of-type(2) figcaption {
	margin-bottom: 20px;
}
#csCS .csSidingA_3 p:nth-of-type(2) {
	display: inline-block;
	vertical-align: top;
	margin: 0px 0 10px 7px;
}
#csCS .csSidingA_3 table {
	margin-top: 20px;
}
#csCS .csSidingA_3 td {
	vertical-align: top;
}

/*csSidingB_3*/
#csCS .csSidingB_3 {
	height: auto;
	margin-bottom: 105px;
	width: 987px;
	overflow: hidden;
}
#csCS .csSidingB_3 h4 {
	display: block;
}
#csCS .csSidingB_3 p {
	margin-bottom: 34px;
	display: block;
	font-size: 15px;
}
#csCS .csSidingB_3 figure:nth-of-type(1) {
	margin-right: 55px;
}
#csCS .csSidingB_3 figure:nth-of-type(1) figcaption {
	margin-bottom: 20px;
}

/*csSidingC_3*/
#csCS .csSidingC_3 {
	height: auto;
	width: 987px;
	overflow: hidden;
}
#csCS .csSidingC_3 h4 {
	display: block;
}
#csCS .csSidingC_3 p {
	display: inline-block;
	width: 490px;
	font-size: 15px;
	float: left;
	margin-right: 72px;
}
#csCS .csSidingC_3 figure {
	margin: -52px 26px 0 0;
	float: right;
}

/*------------------------------------------------------------------------------
	金属製屋根材の特長
 -------------------------------------------------------------------------------*/
.csBack {
	height: 546px;
	position: absolute;
	top: 0;
	background: #cccccc;
	width: 100%;
	z-index: -2;
}
#csCR {
	font-family: "Noto Sans JP", sans-serif, Arial, "メイリオ", "Meiryo",
		"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック体",
		"Yu Gothic", "YuGothic", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic",
		sans-serif;
	font-weight: 400;
	color: #666666;
	line-height: 1.65;
	overflow: hidden;
}
#csCR > .wrap {
	width: 1200px;
	height: 100%;
	margin: 0 auto;
	overflow: hidden;
}
.csCR__left {
	width: 169px;
	height: calc(100% + 75px);
	background: url("/center-siding-roof/img/csRoofLine.png") repeat-y right;
	position: absolute;
}
.csCR__right {
	margin-left: auto;
	width: 1031px;
}
#csCR h2,
#csCR h3 {
	font-weight: 500;
}
#csCR h3 {
	position: absolute;
	font-size: 170%;
}
#csCR h3:nth-of-type(1) {
	top: 1378px;
}
#csCR h3:nth-of-type(2) {
	top: 3677px;
}
#csCR h3:nth-of-type(3) {
	top: 4136px;
}
#csCR h3:nth-of-type(4) {
	top: 5747px;
}
#csCR h3:nth-of-type(5) {
	top: 6291px;
}
#csCR h3:nth-of-type(6) {
	top: 6635px;
}
#csCR h3:nth-of-type(7) {
	top: 6981px;
}
#csCR h3:nth-of-type(8) {
	top: 7324px;
}
#csCR h3:nth-of-type(9) {
	top: 7824px;
}

.csCR__main p {
	margin: 40px 0 0 40px;
	font-size: 157%;
}
.csCR__right > .wrap {
	margin: 95px 0 0 40px;
}
#csCR h2 {
	font-size: 304%;
	margin-bottom: 20px;
}
#csCR h4 {
	font-size: 177%;
	margin-bottom: 16px;
	display: inline-block;
}
#csCR h4 span {
	font-family: "Noto Serif JP", "Noto Serif", "游明朝体", "YuMincho", "游明朝",
		"Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3",
		HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN",
		"ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝",
		"MS PMincho", "Sawarabi Mincho", serif !important;
}
.csCR__right > .wrap figure {
	display: inline-block;
}
.csCR__right > .wrap figure figcaption {
	margin-bottom: 10px;
	font-size: 110%;
}
.csCR__right > .wrap p {
	font-size: 108%;
	display: inline-block;
	text-align: justify;
	text-justify: inter-ideograph;
}
.csCR__right > .wrap p span {
	font-size: 74%;
}
.csCR__right > .wrap > div {
	position: relative;
	clear: both;
}

/*csRoofA*/
#csCR .csRoofA {
	height: 445px;
}
#csCR .csRoofA h4 {
	display: block;
}
#csCR .csRoofA p {
	margin-bottom: 45px;
}
#csCR .csRoofA figure {
	position: absolute;
	top: -57px;
	right: 13px;
}

/*csRoofB*/
#csCR .csRoofB {
	height: 705px;
}
#csCR .csRoofB h4 {
	display: block;
	margin-bottom: 17px;
}
#csCR .csRoofB p {
	margin-bottom: 34px;
}
#csCR .csRoofB figure:nth-of-type(1) {
	display: block;
	margin-bottom: 32px;
}
#csCR .csRoofB p {
	display: block;
}
#csCR .csRoofB figure:nth-of-type(2) {
	margin: 0 0 0 136px;
}
#csCR .csRoofB figcaption {
	margin-bottom: -19px;
}

/*csRoofC*/
#csCR .csRoofC {
	height: 380px;
}
#csCR .csRoofC h4 {
	display: block;
}
#csCR .csRoofC p:nth-of-type(1) {
	width: 468px;
	float: left;
	margin-bottom: 48px;
}
#csCR .csRoofC p:nth-of-type(2) {
	float: right;
	width: 469px;
	position: absolute;
	top: 274px;
	right: 11px;
	font-size: 84%;
}
#csCR .csRoofC figure:nth-of-type(1) {
	float: right;
	margin: 0px 12px 0 0;
}
#csCR .csRoofC figure:nth-of-type(2) {
	float: left;
}

/*csRoofD*/
#csCR .csRoofD {
	height: 523px;
}
#csCR .csRoofD h4 {
}
#csCR .csRoofD p {
}
#csCR .csRoofD figure {
	margin: 37px 0 0 156px;
}

/*csRoofD2*/
#csCR .csRoofD2 {
	height: 690px;
}
#csCR .csRoofD2 h4 {
	display: block;
}
#csCR .csRoofD2 p {
	display: block;
	margin-bottom: 23px;
}
#csCR .csRoofD2 figure:nth-of-type(1) {
	margin-bottom: 35px;
}
#csCR .csRoofD2 figure:nth-of-type(2) {
	display: block;
	margin-left: 100px;
}
#csCR .csRoofD2 figcaption {
	margin-bottom: -20px;
}

/*csRoofE*/
#csCR .csRoofE {
	height: 455px;
}
#csCR .csRoofE figure {
	margin: 37px 0 0 156px;
}
#csCR .csRoofE figcaption {
	margin-bottom: -20px;
}

/*csRoofF*/
#csCR .csRoofF {
	height: 466px;
}
#csCR .csRoofF h4 {
}
#csCR .csRoofF p {
}
#csCR .csRoofF figure {
	margin: 22px 0 0 93px;
}

/*csRoofG*/
#csCR .csRoofG {
	height: 660px;
}
#csCR .csRoofG figure {
	margin: 33px 0 34px 97px;
}

/*csRoofG2*/
#csCR .csRoofG2 {
	height: 484px;
}
#csCR .csRoofG2 figure {
	display: inline-block;
	margin-top: 21px;
}
#csCR .csRoofG2 p:nth-of-type(2) {
	width: 408px;
	display: inline-block;
	vertical-align: top;
	margin: 57px 0 0 30px;
}
#csCR .csRoofG2 table {
	margin-top: 15px;
}
#csCR .csRoofG2 td {
	vertical-align: top;
}

/*csRoofH*/
#csCR .csRoofH {
	height: 546px;
}
#csCR .csRoofH h4 {
}
#csCR .csRoofH figure {
	margin: 30px 0 0 20px;
}
#csCR .csRoofH figcaption {
	margin-left: 12px;
}

/*csRoofI*/
#csCR .csRoofI {
	height: 345px;
}
#csCR .csRoofI h4 {
	display: block;
}
#csCR .csRoofI p {
	margin-bottom: 35px;
}
#csCR .csRoofI figure {
	position: absolute;
	top: 32px;
	right: 20px;
}
#csCR .csRoofI td {
	vertical-align: top;
}

/*csRoofJ*/
#csCR .csRoofJ {
	height: 345px;
}
#csCR .csRoofJ h4 {
	display: block;
}
#csCR .csRoofJ p {
	margin-bottom: 35px;
}
#csCR .csRoofJ figure {
	position: absolute;
	top: 0px;
	right: 38px;
}

/*csRoofK*/
#csCR .csRoofK {
	height: 345px;
}
#csCR .csRoofK h4 {
	display: block;
}
#csCR .csRoofK h4 small {
	font-size: 57%;
}
#csCR .csRoofK p {
	margin-bottom: 35px;
}
#csCR .csRoofK figure {
	position: absolute;
	top: 52px;
	right: 45px;
}

/*csRoofL*/
#csCR .csRoofL {
	height: 502px;
}
#csCR .csRoofL table {
	margin-top: 15px;
}
#csCR .csRoofL table {
	border-collapse: collapse;
	border-spacing: 0;
	font-size: 120%;
	border: 1px solid gray;
	margin: 26px 0 0 132px;
}
#csCR .csRoofL td {
	border: 1px solid gray;
	padding: 0px 8px;
}
#csCR .csRoofL .csTdTtl {
	background: #efefef;
}
#csCR .csRoofL tr:first-child {
	height: 63px;
}
#csCR .csRoofL td:first-child {
	padding: 4px 8px;
}
.csTdLine {
	background-image: linear-gradient(
		13deg,
		transparent 49%,
		black 49%,
		black 49%,
		transparent 50%,
		transparent
	);
	position: relative;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) .csTdLine {
	background-image: linear-gradient(
		to top right,
		transparent,
		transparent 50%,
		#000000 50%,
		#000000 51%,
		transparent 51%,
		transparent
	);
}
.csTdLine span {
	display: inline-block;
	position: absolute;
}
.csTdLine span:nth-of-type(1) {
	top: 7px;
	right: 15px;
}
.csTdLine span:nth-of-type(2) {
	top: 31px;
	left: 7px;
}
.csTdValue {
	text-align: center;
	color: #3eb166;
	font-size: 141%;
}
.csTdValueA {
	text-align: center;
}
#csCR .csRoofL p:nth-of-type(2) {
	margin: 9px 0 0 132px;
	font-size: 81%;
}

/*csRoofM*/
#csCR .csRoofM {
	height: 505px;
}
#csCR .csRoofM h4 {
	display: block;
}
#csCR .csRoofM h4 small {
	font-size: 57%;
}
#csCR .csRoofM p:nth-of-type(1) {
	margin-bottom: 35px;
	width: 439px;
}
#csCR .csRoofM p:nth-of-type(2) {
	display: block;
}
#csCR .csRoofM figure:nth-of-type(1) {
	position: absolute;
	top: 47px;
	right: 0;
}
#csCR .csRoofM figure:nth-of-type(2) {
	width: 470px;
	position: absolute;
	top: 346px;
	right: 0;
	background: #efefef;
	padding: 5px 18px;
	text-align: justify;
	text-justify: inter-ideograph;
	box-sizing: border-box;
}
#csCR .csRoofM figcaption {
	margin-bottom: -13px;
}
#csCR .csRoofM > div {
	border-top: 1px solid #666666;
	border-bottom: 1px solid #666666;
	width: 439px;
	margin-top: 5px;
	padding: 2px 0;
}
#csCR .csRoofM table th {
	width: 25px;
	font-weight: 400;
}

.wsDetails__mark{
    margin: 6px 0 0 0;
}
.wsDetails__mark p{
    width:295px;
    text-align: center;
    margin: 0 5px 5px 0;
    height: 20px;
    box-sizing: border-box;
}
.wsDetails__mark p span{
    display: block;
    margin: -1px 0 0 0;
    color: #fff;
    font-size:60%;
    font-weight: 400;
    font-family: "Noto Sans JP", sans-serif, Arial, "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック体", "Yu Gothic", "YuGothic", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.wsDetails__mark__Twotone{
    border:1px solid #00aabe;
    color:#ffffff;
    overflow: hidden;
}
.wsDetails__mark__Twotone span:first-child{
    width:50%;
    float:left;
    background:#00aabe;
}
.wsDetails__mark__Twotone span:last-child{
    width:50%;
    float:right;
    color:#00aabe;
}

/*------------------------------------------------------------------------------
	footer
 -------------------------------------------------------------------------------*/
footer {
	background: #000000;
	min-width: 1200px;
	color: #ffffff;
	margin: 12px 0 0 0;
	text-align: left;
}
footer > div {
	width: 1200px;
	padding: 37px 0 30px 0;
	margin: 0 auto;
}
.csFooter_title {
	font-size: 136%;
	margin: 0 0 15px 0;
}
.csFooter_title span {
	font-size: 66%;
	margin: 0 0 0 25px;
}
.csFooter_h {
}
footer ul li {
	font-size: 86%;
	line-height: 2.7em;
}
footer ul li a,
footer ul li a:visited,
footer ul li a:link {
	color: #ffffff;
	text-decoration: none;
}
footer ul li a:hover {
	color: #d4d4d4;
}
footer ul.csFooter_sub {
	margin: 0 0 5px 18px;
	overflow: hidden;
}
footer ul.csFooter_sub li {
	display: block;
	width: 120px;
	font-size: 75%;
	height: 20px;
	float: left;
}
/* safari */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
	_::-webkit-full-page-media,
	_:future,
	:root footer ul.csFooter_sub li.safari_dn {
		display: none;
	}
}
.csFooter_box {
	display: inline-block;
	vertical-align: top;
}
.csFooter_out {
	background: url("/center-siding-roof/img/footer_out.png") no-repeat right;
	display: inline-block;
	padding-right: 9px;
}
.csFooter_box:nth-child(1) {
	width: 294px;
}
.csFooter_box:nth-child(2) {
	width: 292px;
}
.csFooter_box:nth-child(3) {
	width: 259px;
}
.csFooter_box:nth-child(4) {
	width: 259px;
}
.csFooter_box:nth-child(5) {
	width: 380px;
}
.csFooter_info li {
	margin-left: 25px;
}
.csFooter_info li:nth-child(1) {
	margin-left: 0px;
}
.csFooter_info li:nth-child(3) {
	line-height: 1.7em;
}
.csFooter_info li:nth-child(4) {
	line-height: 1.7em;
	margin-left: 50px;
	padding: 5px 0 8px 0;
}
.csFooter_info li:nth-child(6) {
	line-height: 1.7em;
	margin-left: 50px;
	padding: 0 0 3px 0;
}
.csFooter_info li:nth-child(7) {
	line-height: 1.7em;
	margin-left: 50px;
}
.csFooter_shop {
	display: inline-block;
	border: 1px solid #d4d4d4;
	background: url("/centersiding/img/footer_shop.png") no-repeat 11px center;
	padding: 0px 14px 0px 20px;
}
.csFooter_info li:nth-child(7) a:hover p {
	background-color: #121212;
}
.csFooter_copyright {
	text-align: center;
	font-size: 80%;
	margin: 40px 0 0 0;
}

.footerAdjustmentA {
	position: absolute;
	top: 6547px;
	left: 0;
	right: 0;
	margin: auto;
}
.footerAdjustmentB {
	position: absolute;
	top: 8765px;
	left: 0;
	right: 0;
	margin: auto;
}
main#footerAdjustment.csFixed,
main#footerAdjustmentB.csFixed {
	margin-top: 196px;
}

/* safari */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
	_::-webkit-full-page-media,
	_:future,
	:root .csFooter_box:nth-child(3) {
		width: 254px;
	}
	_::-webkit-full-page-media,
	_:future,
	:root .csFooter_box:nth-child(4) {
		width: 244px;
	}
	_::-webkit-full-page-media,
	_:future,
	:root .csFooter_box:nth-child(5) {
		width: 390px;
	}
}

/*------------------------------------------------------------------------------
	print
 -------------------------------------------------------------------------------*/
@page {
	margin: 0;
}

@media print {
	/* Edge 1 */
	@supports (-ms-ime-align: auto) {
		body,
		.fontMincho {
			font-family: "游明朝体", "YuMincho", "游明朝", "Yu Mincho",
				"ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3,
				"ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro",
				"Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho",
				"Sawarabi Mincho", serif !important;
		}
		.fontGothic,
		.csStyle__product figure,
		#csAd > .wrap > p,
		#csAd > .wrap > div.csAd__T15,
		#csCS,
		#csCR {
			font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3",
				"Hiragino Kaku Gothic Pro", "游ゴシック体", "Yu Gothic", "YuGothic",
				"Osaka", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
		}
		header nav ul li,
		.csTopContents__title,
		.csTopContents__read {
			text-shadow: none;
			color: #ffffff;
		}
		#csMainVisual__wrap video {
			visibility: hidden;
		}
		#csCR .csRoofG2 {
			margin-top: 400px;
		}
	}

	/* Firefox */
	@-moz-document url-prefix() {
		.csStyle__detail {
			height: 517px;
		}
		.ff__ph {
			height: 769px;
		}
		.ff__ph2 {
			height: 969px;
		}
		body {
			transform: scale(1) translate(0px, 0px);
		}
	}

	/* Chrome & Opera */
	_::content,
	_:future,
	body:not(*:root) {
		transform: scale(0.95);
	}
	_::content,
	_:future,
	#csCS .csSidingA figure:nth-of-type(2):not(*:root) {
		top: -60px;
	}
	_::content,
	_:future,
	#csCR .csRoofM figure:nth-of-type(1):not(*:root) {
		top: -60px;
	}

	/* IE11 */
	_:-ms-lang(x)::-ms-backdrop,
	#csCR .csRoofG2 {
		margin-top: 400px;
	}

	/* safari */
	@media screen and (-webkit-min-device-pixel-ratio: 0) {
		_::-webkit-full-page-media,
		_:future,
		:root body {
			transform: scale(0.95);
		}
	}

	header,
	footer {
		display: none;
	}


	/*
.csStyle__title ul li:nth-child(1){
		font-size: 300%;
		padding-top: 10px;
}

#csStyle{
		width:950px;
		margin: 50px 0 0 0;
}
.csStyle__photo{
		width:700px;
}
.csStyle__photo img{
		width:100%;
}
.csStyle__photo img:nth-of-type(2), .csStyle__photo img:nth-of-type(3){
		width:48%;
}
.csStyle__product {
		width: 230px;
}
#csOther{
		width:950px;
}
#csOther a img {
		width: 236px;
		height: 140px;
}
#csOther a:nth-of-type(2n) img {
		width: 236px;
}
footer{
		transform:scale(0.765) translate(-190px, 0px);
}
#csFooterArrow{
		display:none;
}
header.csFixed{
		position: relative;
		top: 0;
}
main.csFixed{
		margin-top:0;
}
main#csTop.csFixed{
		margin-top:-49px;
}

.csTopContents{
		width:950px;
		margin-left:10px;
}
#csOther_modern img{
		width:586px;
}
#csOther_industrial img,#csOther_simple img{
		width:362px;
}
#csOther_japanese img{
		width:950px;
}
#csOther_standard img,#csOther_shop img{
		width:474px;
}
#csOther_roof img{
		width:586px;
}
#csOther_commercial img,#csOther_apartment img{
		width:362px;
}
.csPrintIndustrial__01{
		width:45%!important;
}
.csPrintIndustrial__02{
		width:52%!important;
}
.csPrintJapanese__01{
		width:57.5%!important;
}
.csPrintJapanese__02{
		width:39.5%!important;
}
.csPrintModern__01{
		width:65%!important;
}
.csPrintModern__02{
		width:32%!important;
}
.csPrintSimple__01{
		width:58%!important;
}
.csPrintSimple__02{
		width:39%!important;
}
*/
}