@charset "utf-8";



/* -- Layout
-------------------------------------------------------------------------------- */
main {
	background: url(../img/bg_mesh.png) repeat;
}



/* -- Main title
-------------------------------------------------------------------------------- */
#title {
	color: #fff;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(119px, #c70e1a), color-stop(119px, #fff));
	background: -webkit-linear-gradient(top, #fff 119px, #c70e1a 119px);
	background: -moz-linear-gradient(top, #fff 119px, #c70e1a 119px);
	background: -o-linear-gradient(top, #fff 119px, #c70e1a 119px);
	background: -ms-linear-gradient(top, #fff 119px, #c70e1a 119px);
	background: linear-gradient(top, #fff 119px, #c70e1a 119px);
	height: 243px;
	padding-top: 16px;
}
#title h1 img {
	display: block;
	width: 239px;
	margin: 0 auto 50px;
}
#title i {
	font: italic 900 4rem/1 'Roboto', sans-serif;
	display: block;
	margin-bottom: 10px;
}
#title span {
	font-size: 1.5rem;
	font-style: italic;
	font-weight: 600;
}



/* -- Option
-------------------------------------------------------------------------------- */

#sample-present{
	padding-top: 20px;
}

#supplies {
	padding-bottom: 65px;
}
#supplies h2 {
	color: #fff;
	font-size: 2.5rem;
	line-height: 1.2;
	font-weight: 600;
	font-style: italic;
	background: #b50102 url(../img/option_title_bg.png) no-repeat center center / auto 100%;
	letter-spacing: 0.04em;
	display: block;
	height: 115px;
	margin: 0 -20px;
	padding: 25px 20px 0;
}
#supplies section {
	margin-top: 15px;
}
#supplies section h3 {
	font-size: 2.7rem;
	font-style: italic;
	line-height: 1;
	font-weight: 600;
	color: #fff;
	background: -webkit-gradient(linear, left top, right top, color-stop(268px, rgba(0,0,0,0)), color-stop(268px, #000));
	background: -webkit-linear-gradient(left, #000 268px, rgba(0,0,0,0) 268px);
	background: -moz-linear-gradient(left, #000 268px, rgba(0,0,0,0) 268px);
	background: -o-linear-gradient(left, #000 268px, rgba(0,0,0,0) 268px);
	background: -ms-linear-gradient(left, #000 268px, rgba(0,0,0,0) 268px);
	background: linear-gradient(left, #000 268px, rgba(0,0,0,0) 268px);
	padding: 10px 0 3px 15px;
	margin: 0 -15px;
	border-bottom: 10px solid #000;
	position: relative;
}
#supplies section h3::after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-right: solid 32px transparent;
	border-bottom: solid 40px #000;
	position: absolute;
	left: 268px;
	bottom: 0;
}
#supplies section h4 {
	font-size: 2.3rem;
	font-weight: 600;
	line-height: 1.18;
	padding-left: 14px;
	margin-bottom: 30px;
	border-left: solid 7px #d70c19;
}
#supplies section div {
	margin: 30px 0 50px;
	-webkit-overflow-scrolling: touch;
}
#supplies section div#movie {
	margin: 0 0 60px;
	padding: 0;
}
#supplies section p,
#supplies section dl,
#supplies section ul.dot {
	font-size: 1.3rem;
	line-height: 1.59;
	margin-top: 12px;
}
#supplies section ul.dot li {
	padding-left: 10px;
	position: relative;
}
#supplies section ul.dot li::before {
	content: "";
	background: #c70e1a;
	display: block;
	width: 6px;
	height: 6px;
	border-radius: 3px;
	position: absolute;
	left: 0;
	top: 6px;
}
#supplies section figure img {
	display: block;
	margin: auto;
}
#supplies section .note {
	font-size: 1.2rem;
	line-height: 1.64;
	color: #8e8e8e;
	margin-top: 25px;
}
#supplies section ul.note li + li {
	margin-top: 1em;
}
#option {
	margin-top: 30px;
}
#option ul.dot {
	margin-top: 25px!important;
}
#option figure img {
	width: 87.94%;
}
#option h5 {
	font-size: 1.5rem;
	font-weight: 600;
	margin: 25px 0 0;
}
#option dt,
#option dd {
	display: inline-block;
}
#option dt::after {
	content: "：";
}
#option dd:first-of-type {
	margin-right: 1em;
}



/* -- Expendables
-------------------------------------------------------------------------------- */
.expendables figure img {
	height: 28.125vw;
	width: auto;
}
.expendables figure img.imgChange,
.expendables figure img.wide { height: auto; }
.expendables figcaption {
	font-size: 1.5rem;
	font-weight: 600;
	margin: 20px 0;
}
.expendables figcaption span {
	display: block;
	margin-bottom: 10px;
}
.expendables table {
	display: block;
	white-space: nowrap;
	margin: 0 -15px;
	padding-left: 15px;
	overflow-x: auto;
	overflow-y: visible;
	position: relative;
}
.expendables table::after {
	content: "";
	display: inline-block;
	width: 15px;
	height: 1px;
}
.expendables tbody {
	display: table;
	float: left;
}
.expendables th,
.expendables td {
	font-size: 1.2rem;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
	padding: 12px 23px;
	border-bottom: solid 1px #0d090a;
	border-left: solid 1px #0d090a;
}
.expendables th:first-child,
.expendables td:first-child {
	border-left: none;
}

table.gripcubebox {
	margin-top:20px;
}
.expendables .gripcubebox td {
	border-top: solid 1px #0d090a;
}

.expendables th {
	font-size: 1.3rem;
}
.expendables td:not([class]),
#common .col4 { text-align: left; }
#common .col5 { text-align: right; border-left: none; }
#common > div:last-child {
	padding-top: 30px;
	border-top: solid 1px #bcbcbc;
}
#common h5 {
	font-size: 1.5rem;
	font-weight: 600;
	color: #c70e1a;
}
#common p strong {
	font-size: 1.5rem;
}
#commercial h3 span {
	font-size: 1.2rem;
	font-weight: 500;
	font-style: normal;
	color: #000;
	position: absolute;
	right: 15px;
	bottom: -40px;
}
#commercial h3 + p {
	font-size: 1.5rem;
	line-height: 1.58;
	font-weight: 600;
	margin-top: 55px;
}
#commercial td li + li {
	margin-top: 5px;
}
@media screen and (max-width: 340px) {
	#option dt,
	#option dd {
		display: block;
	}
	#option dt {
		float: left;
		clear: left;
	}
}
@media screen and (min-width: 340px) {
	#commercial h4 br.sp {
		display: none;
	}
}


/* -- sample
-------------------------------------------------------------------------------- */

#supplies section .present_list li {
	display: flex;
	flex-direction: column-reverse;
	text-align: center;
}

#supplies section .present_list div {
    margin: 20px 0 50px;
}

#sample-present h3 + p {
    font-size: 1.5rem;
    line-height: 1.58;
    font-weight: 600;
    margin-top: 40px;
}

#sample-present div p {
	margin-top: 0;
	font-size: 2.2rem;
    font-weight: 600;
    line-height: 1.4;
}

#sample-present div span {
	display: block;
	margin-top: 20px;
	line-height: 1.5;
}

#supplies section .sample_application p {
	display: block;
	text-align: center;
	font-size: 2.2rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 20px;
}

#supplies section .sample_application .btn-pdf{
	margin: 0;
}

#supplies section .sample_application .btn-pdf li + li {
	margin-top: 20px;
}

#supplies section .sample_application {
    margin: 50px 0 0;
}



/* -- add
-------------------------------------------------------------------------------- */
.expendables .btn-pdf {
    margin-bottom: 28px;
}

.expendables .btn {
	font-size: 1.3rem;
	line-height: 42px;
	font-weight: 600;
	text-align: center;
	display: block;
	height: 48px;
	margin: auto;
	box-sizing: border-box;
}
.expendables a.btn {
    color: #fff;
    background: #d70c19;
    border: solid 3px #d70c19;
}

.btn-pdf a.btn span {
	vertical-align: middle;
	display: inline-block;
	width: 18px;
    height: 17px;
    margin-left: 5px;
}