@charset "utf-8";



/* -- Layout
-------------------------------------------------------------------------------- */
main {
	background: url(../img/bg_mesh.png) repeat;
}



/* -- Main title
-------------------------------------------------------------------------------- */
#title {
	height: 220px;
}
#title::before {
	background: url(../img/title_bg.png), -webkit-gradient(linear, left top, right bottom, color-stop(1.00, #d70c19), color-stop(0.5001, #d70c19), color-stop(0.50, #fff), color-stop(0.00, #fff));
	background: url(../img/title_bg.png), -webkit-linear-gradient(left, #fff 0%, #fff 50%, #d70c19 50.01%, #d70c19 100%);
	background: url(../img/title_bg.png), -moz-linear-gradient(left, #fff 0%, #fff 50%, #d70c19 50.01%, #d70c19 100%);
	background: url(../img/title_bg.png), -o-linear-gradient(left, #fff 0%, #fff 50%, #d70c19 50.01%, #d70c19 100%);
	background: url(../img/title_bg.png), -ms-linear-gradient(left, #fff 0%, #fff 50%, #d70c19 50.01%, #d70c19 100%);
	background: url(../img/title_bg.png), linear-gradient(left, #fff 0%, #fff 50%, #d70c19 50.01%, #d70c19 100%);
	background-repeat: no-repeat;
	background-position: center 0;
	border-bottom: solid 9px #d70c19;
}
#title h1 {
	color: #fff;
	padding: 62px 0 0 405px;
}
#title img {
	position: absolute;
	left: 0;
	top: 58px;
}
#title i {
	font: italic 900 7.2rem/1 'Roboto', sans-serif;
	display: block;
}
#title span {
	font-size: 1.8rem;
	font-style: italic;
	font-weight: 600;
}



/* -- Option
-------------------------------------------------------------------------------- */
#supplies {
	padding-bottom: 160px;
}
#supplies::before {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #9a0102), color-stop(0.50, #b50102), color-stop(0.00, #b51122));
	background: -webkit-linear-gradient(top, #b51122 0%, #b50102 50%, #9a0102 100%);
	background: -moz-linear-gradient(top, #b51122 0%, #b50102 50%, #9a0102 100%);
	background: -o-linear-gradient(top, #b51122 0%, #b50102 50%, #9a0102 100%);
	background: -ms-linear-gradient(top, #b51122 0%, #b50102 50%, #9a0102 100%);
	background: linear-gradient(top, #b51122 0%, #b50102 50%, #9a0102 100%);
	height: 260px;
}
#supplies::after {
	content: "";
	background: url(../img/option_title_bg.png) no-repeat;
	display: block;
	width: 661px;
	height: 260px;
	position: absolute;
	left: calc(50% + 16px);
	top: 0;
	z-index: 0;
}
#supplies h2 {
	color: #fff;
	font-size: 5.8rem;
	line-height: 1.1;
	font-weight: 600;
	font-style: italic;
	letter-spacing: 0.04em;
	text-indent: -4.5em;
	margin-left: 4.5em;
	display: block;
	padding-top: 68px;
	margin-bottom: 70px;
	height: 192px;
	position: relative;
	z-index: 1;
}
#supplies section {
	margin-top: 85px;
}
#supplies section h3 {
	font-size: 4.6rem;
	font-style: italic;
	line-height: 1;
	font-weight: 600;
	color: #fff;
	background: -webkit-gradient(linear, left top, right top, color-stop(0.50, rgba(0,0,0,0)), color-stop(0.50, #000));
	background: -webkit-linear-gradient(left, #000 50%, rgba(0,0,0,0) 50%);
	background: -moz-linear-gradient(left, #000 50%, rgba(0,0,0,0) 50%);
	background: -o-linear-gradient(left, #000 50%, rgba(0,0,0,0) 50%);
	background: -ms-linear-gradient(left, #000 50%, rgba(0,0,0,0) 50%);
	background: linear-gradient(left, #000 50%, rgba(0,0,0,0) 50%);
	padding: 18px 0 8px 30px;
	border-bottom: 12px solid #000;
	position: relative;
}
#supplies section h3::after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-right: solid 60px transparent;
	border-bottom: solid 72px #000;
	position: absolute;
	left: 480px;
	bottom: 0;
}
#supplies section h4 {
	font-size: 3rem;
	font-weight: 600;
	line-height: 43px;
	padding-left: 20px;
	margin-bottom: 40px;
	border-left: solid 10px #d70c19;
}
#supplies section div {
	margin: 60px 0 20px;
}
#supplies section p,
#supplies section dl,
#supplies section ul.dot {
	font-size: 1.4rem;
	line-height: 1.86;
	margin-top: 30px;
}
#supplies section ul.dot li {
	padding-left: 20px;
	position: relative;
}
#supplies section ul.dot li::before {
	content: "";
	background: #c70e1a;
	display: block;
	width: 7px;
	height: 7px;
	border-radius: 3px;
	position: absolute;
	left: 1px;
	top: 9px;
}
#supplies section .note {
	font-size: 1.1rem;
	line-height: 1.64;
	color: #8e8e8e;
	margin-top: 30px;
}
#supplies section ul.note li + li {
	margin-top: 15px;
}
#option {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}
#option h3 {
	width: 100%;
}
#option div {
	width: 450px;
	margin: 0 80px -20px;
}
#option figure {
	width: 210px;
	float: right;
}
#option h5 {
	font-size: 1.8rem;
	font-weight: 600;
	margin-bottom: -5px;
}
#option dt {
	float: left;
	clear: left;
}
#option dt::after {
	content: "：";
}



/* -- Expendables
-------------------------------------------------------------------------------- */
.expendables figure img {
	height: auto;
	width: 210px;
	position: absolute;
	right: 0;
	top: 0;
}
.expendables figure img.imgChange { width: auto; }
.expendables figure img.wide { width: 440px; }
.expendables figcaption {
	font-size: 1.8rem;
	font-weight: 600;
	height: 105px;
}
.expendables figcaption span {
	display: block;
	margin-bottom: 15px;
}
.expendables table {
	width: 100%;
}
.expendables th,
.expendables td {
	text-align: center;
	vertical-align: middle;
	padding: 13px 0;
	border-bottom: solid 1px #0d090a;
	border-left: solid 1px #0d090a;
}
.expendables th:first-child,
.expendables td:first-child {
	border-left: none;
}

.gripcubebox {
	margin-top:30px;
}
.expendables .gripcubebox td {
	border-top: solid 1px #0d090a;
}
.expendables th {
	font-size: 1.6rem;
}
.expendables td:not([class]) {
	width: 33.333%;
	text-align: left;
	padding-left: 30px;
}
#common .col1 { width: 160px; }
#common .col2 { width: 132px; }
#common .col3 { width: 185px; }
#common .col4 { text-align: left; padding-left: 30px; }
#common .col5 { text-align: right; padding-right: 30px; border-left: none; }
#common .col6 { width: 115px; }
#common > div:last-child {
	margin-top: 100px!important;
	padding-top: 45px;
	border-top: solid 1px #bcbcbc;
}
#common h5 {
	font-size: 1.8rem;
	font-weight: 600;
	color: #c70e1a;
	margin-bottom: -15px;
}
#common p strong {
	font-size: 1.8rem;
}
#commercial h3 span {
	font-size: 1.1rem;
	font-weight: 500;
	font-style: normal;
	color: #000;
	white-space: nowrap;
	position: absolute;
	right: 0;
	bottom: -45px;
}
#commercial h3 + p {
	font-size: 1.8rem;
	line-height: 2;
	font-weight: 600;
	margin-top: 55px;
}
#commercial td li + li {
	margin-top: 10px;
}


/* -- sample
-------------------------------------------------------------------------------- */

#sample-present{
	padding-top: 40px;
}

.present_list {
	display: flex;
	justify-content: center;
	padding-bottom: 35px;
}

.present_list li {
	display: flex;
	flex-direction: column-reverse;
	text-align: center;
	width: 30%;
	margin-right: 3%;
}

#sample-present h3 + p,
#sample-present div p {
    font-size: 1.8rem;
    line-height: 2;
    font-weight: 600;
    margin-top: 55px;
}

#sample-present li div {
	margin: 0;
	height: 130px;
	line-height: 1.5;
}

#sample-present div p {
	margin-top: 10px;
	line-height: 1.5;
}

#sample-present div span {
	display: block;
	margin-top: 24px;
}

#supplies section .sample_application p {
	display: block;
	text-align: center;
	font-size: 3rem;
    font-weight: 600;
    line-height: 43px;
    padding-left: 20px;
    margin-bottom: 40px;
}

#supplies section .sample_application .btn-pdf {
	width: 100%;
	display: flex;
    justify-content: center;
	margin-bottom: 0;
}

#supplies section .sample_application .btn-pdf li {
	display: block;
	width: 400px;
}

#supplies section .sample_application .btn-pdf li:first-child {
	padding-right: 20px;
}

#supplies section .sample_application .btn-pdf li a {
	width: 100%;
}


/* -- add
-------------------------------------------------------------------------------- */
.expendables .btn-pdf {
	margin-bottom: 55px;
}
.expendables .btn-pdf li {
	display: table-cell;
}
.expendables .btn-pdf a.btn {
	padding-right: 36px;
}
.expendables .btn-pdf li a.btn span { margin-left: 24px; }

.expendables .btn {
	font-size: 2rem;
	line-height: 68px;
	font-weight: 600;
	text-align: center;
	display: block;
	height: 76px;
	margin: auto;
	box-sizing: border-box;
}
.expendables a.btn {
	width: 560px;
    color: #fff;
    background: #d70c19;
    border: solid 4px #d70c19;
}
.expendables a.btn:hover {
    color: #d70c19;
    background: #fff;
    border: solid 4px #d70c19;
}
a.btn,
#spec li:first-child a.btn:hover,
#spec li:last-child a.btn{
	color: #d70c19;
	background: #fff;
}

.btn-pdf a.btn span {
	vertical-align: middle;
	display: inline-block;
	height: 34px;
}
.btn-pdf li a.btn span { background: url(../../img/index/icon_pdf_white.png) no-repeat; }

.btn-pdf a.btn:hover span img {
	opacity: 0;
}

.expendables a.btn:hover::before,
.expendables a.btn:hover::after { border-color: #d70c19; }