@charset "utf-8";



/* -- Layout・Link
-------------------------------------------------------------------------------- */
main {
	background: #202020;
}
main .btn {
	font-size: 2rem;
	line-height: 68px;
	font-weight: 600;
	text-align: center;
	display: block;
	height: 76px;
	margin: auto;
	box-sizing: border-box;
}
#function a.btn {
	width: 840px;
	border: solid 4px #fff;
}
#spec a.btn,
#option a.btn {
	border: solid 4px #d70c19;
}
#function a.btn:hover,
#spec li:first-child a.btn,
#spec li:last-child a.btn:hover,
#option a.btn {
	color: #fff;
	background: #d70c19;
}
#function a.btn,
#spec li:first-child a.btn:hover,
#spec li:last-child a.btn{
	color: #d70c19;
	background: #fff;
}
#function a.btn::before,
#function a.btn::after,
#spec li:first-child a.btn:hover::before,
#spec li:first-child a.btn:hover::after,
#spec li:last-child a.btn::before,
#spec li:last-child a.btn::after,
#option a.btn:hover::before,
#option a.btn:hover::after { border-color: #d70c19; }
#function a.btn:hover::before,
#function a.btn:hover::after,
#spec li:last-child a.btn:hover::before,
#spec li:last-child a.btn:hover::after { border-color: #fff; }
#spec .btn-pdf a.btn span {
	vertical-align: middle;
	display: inline-block;
	height: 34px;
}
#spec .btn-pdf li:first-child a.btn span { background: url(../img/index/icon_pdf_white.png) no-repeat; }
#spec .btn-pdf li:last-child a.btn span { background: url(../img/index/icon_pdf_red.png) no-repeat; }
#spec .btn-pdf a.btn:hover span img {
	opacity: 0;
}



/* -- Font
-------------------------------------------------------------------------------- */
main section h2 {
	font: italic 900 8.2rem/1 'Roboto', sans-serif;
	color: #d70c19;
	letter-spacing: 0.04em;
}
main section h2 span {
	font: 600 normal 1.8rem/1 Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
	color: #696969;
	display: block;
	padding-top: 5px;
}



/* -- Main Visual
-------------------------------------------------------------------------------- */
#kv {
	height: 750px;
	z-index: 1;
}
#kv::before {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #eaeaea), color-stop(0.00, #fff));
	background: -webkit-linear-gradient(top, #fff 0%, #eaeaea 100%);
	background: -moz-linear-gradient(top, #fff 0%, #eaeaea 100%);
	background: -o-linear-gradient(top, #fff 0%, #eaeaea 100%);
	background: -ms-linear-gradient(top, #fff 0%, #eaeaea 100%);
	background: linear-gradient(top, #fff 0%, #eaeaea 100%);
	border-bottom: 456px solid #c70e1a;
}
#kv h1 {
	padding: 46px 0 0;
	z-index: 1;
}
#kv ul {
	padding: 75px 0 0 30px;
	z-index: 1;
}
#kv ul dt {
	font: italic 900 4rem/1 'Barlow', sans-serif;
	color: #000;
}
#kv ul dd {
	font-size: 1.3rem;
	line-height: 1.54;
	color: #fff;
	padding: 3px 0 7px 25px;
}
#kv ul li.mt-20 {
	padding-top: 20px;
}
#kv figure {
	background: url(../img/index/kv_img_bg.png) no-repeat 0 240px;
	width: 927px;
	position: absolute;
	left: 281px;
	top: 54px;
}
#kv figcaption {
	font: italic 700 1.5rem/1 'Barlow', sans-serif;
	color: #fff;
	position: absolute;
	left: 623px;
	bottom: 48px;
}



/* -- Banner
-------------------------------------------------------------------------------- */
#banner {
	text-align: center;
	padding: 35px 10px;
}
#banner::before {
	background: #fff;
}




/* -- News
-------------------------------------------------------------------------------- */

main > .l-news {
	max-width: 100%;
	background: #000;
}

.l-news_wrapper {
    width: 96rem;
    margin: 0 auto;
    padding: 8rem 0 12rem;
}

.l-news_ttl {
    margin-bottom: 2.8rem;
    color: #c80024;
}

.l-news_topicks_item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    border-bottom: .1rem #efedee solid;
	color: #ffffff;
}

.l-news_topicks_item_ttl {
    width: 14rem;
    padding: 1.5rem 0 1.5rem 2rem;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.8;
}

.l-news_topicks_item_txt {
    padding: 2.2rem 3rem 2.2rem 0;
    font-size: 1.6rem;
	font-weight: 700;
    line-height: 1;
}

.l-news_topicks_item_txt a {
	color: #fff;
    text-decoration: none;
}

.l-news_topicks_item_txt a[target="_blank"]::after {
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    margin-left: .6rem;
    background: url(../img/index/icon_brank.svg) no-repeat;
    background-size: contain;
    content: "";
}



/* -- Point
-------------------------------------------------------------------------------- */
#point {
	color: #fff;
}
#point::before {
	background: url(../img/index/point_bg_pc.jpg) no-repeat fixed center 0 / 100% auto;
	height: 260px;
}
#point .point-ti {
	height: 190px;
	padding-top: 70px;
}
#point .point-ti h2 {
	color: #fff;
	margin-bottom: 30px;
}
#point .point-ti p {
	font-size: 1.8rem;
	font-weight: 600;
}
#point section[class^="point"]::after {
	top: auto;
	bottom: 0;
}
#point .point1::after { height: 160px; background: linear-gradient(to bottom right, #000 50%, #202020 50.5%) no-repeat top left/100% 100%; }
#point .point2::after { height: 125px; background: linear-gradient(to top right, #000 50%, #202020 50.5%) no-repeat bottom left/100% 100%; }
#point .point3::after { height: 125px; background: linear-gradient(to bottom right, #000 50%, #202020 50.5%) no-repeat top left/100% 100%; }
#point .point4::after { height: 135px; background: linear-gradient(to top right, #000 50%, #202020 50.5%) no-repeat bottom left/100% 100%; }
#point section[class^="point"] h3 span {
	font-size: 6rem;
	font-weight: 600;
	line-height: 70px;
	color: #fff;
	background: #d70c19;
	letter-spacing: 0.1em;
	display: inline-block;
	padding: 5px 18px 0;
	margin-left: 28px;
	height: 70px;
	position: relative;
}
#point section[class^="point"] h3 span::after {
	content: "";
	width: 0;
	height: 0;
	border-top: solid 75px #d70c19;
	border-right: solid 20px transparent;
	position: absolute;
	right: -20px;
	bottom: 0;
}
#point section[class^="point"] p {
	font-size: 1.9rem;
	line-height: 1.89;
	font-weight: 600;
	margin-top: 35px;
}
#point section[class^="point"] p strong {
	font-size: 4rem;
	line-height: 1.25;
	font-style: italic;
	display: block;
	padding-top: 8px;
}
#point section[class^="point"] > ul li {
	font-size: 1.6rem;
	line-height: 1.75;
	margin-top: 0.25em;
	padding-left: 20px;
	position: relative;
}
#point section[class^="point"] > ul li::before {
	content: "";
	background: #c70e1a;
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	position: absolute;
	left: 2px;
	top: 10px;
}
#point section[class^="point"] .note {
	font-size: 1.2rem;
	line-height: 2;
	font-weight: 500;
	color: #8e8e8e;
}
.point1 figure,
.point3 figure {
	width: 376px;
	height: 376px;
	padding: 14px;
	border: solid 13px #a10b15;
	position: absolute;
}
.point1 {
	padding: 120px 0 180px;
}
.point1 figure {
	top: 120px;
	right: 0;
}
.point1 ul {
	margin-top: 80px;
}
.point1 .note {
	margin-top: 70px!important;
	padding: 30px 20px 0;
	border-top: solid 1px #3d3d3d;
}
.point3 {
	padding: 30px 0 195px;
	z-index: 1;
}
.point3 figure {
	top: 70px;
	right: 0;
}
.point3 ul {
	margin-top: 40px;
}
.point1::before,
.point3::before {
	background: #000;
}
.point2 {
	padding: 30px 0 170px 500px;
}
.point2 figure {
	width: 440px;
	position: absolute;
	top: 155px;
	left: 0;
}
.point2 figcaption {
	font-size: 1.8rem;
	font-weight: 600;
	margin-bottom: 20px;
}
.point2 .note {
	margin-top: 15px!important;
}
.point4 {
	padding: 120px 0 195px;
	/*margin-top: -125px;*/
	z-index: 0;
}
.point4::before {
	background: url(../img/index/point4_bg.jpg) no-repeat 82% 60px;
	background: url(../img/index/point4_bg.jpg) no-repeat calc(50vw + 130px) 60px;
}
.point4 ul {
	margin-top: 40px;
}
.point4 figure {
	margin-top: 50px;
}
.point4 figure ul {
	display: flex;
	justify-content: space-between;
	padding-bottom: 35px;
}
.point4 figure ul li {
	display: block;
	width: 150px;
	height: 150px;
	padding: 8px;
	border: solid 6px #c70e1a;
	position: relative;
}
.point4 figure ul li figcaption {
	font-size: 1.4rem;
	color: #e0e0e0;
	text-align: center;
	display: block;
	width: 100%;
	position: absolute;
	bottom: -35px;
	left: 0;
}


/* -- Function
-------------------------------------------------------------------------------- */
#function {
	font-size: 2.2rem;
	letter-spacing: 0.04em;
	font-weight: 600;
	color: #fff;
	padding: 60px 10px;
}
#function::before {
	background: #d70c19;
}
#function b {
	font-size: 4.2rem;
	font-style: italic;
	vertical-align: sub;
	display: inline-block;
	padding: 0 0.2em 8px 0;
	border-bottom: solid 3px #fff;
}
#function p:nth-child(1) {
	margin-left: 260px;
}
#function p:nth-child(2) {
	margin: -18px 0 0 510px;
}
#function p:nth-child(2) {
	margin: -18px 0 18px 510px;
}
#function p:nth-child(3)::before {
	content: "";
	background: url(../img/index/function_img.png) no-repeat;
	display: block;
	height: 162px;
	width: 172px;
	position: absolute;
	left: 78px;
	bottom: 18px;
	z-index: 2;
}



/* -- Research
-------------------------------------------------------------------------------- */
#research {
	text-align: center;
	padding: 90px 10px 110px;
}
#research::before {
	background: url(../img/index/research_bg_pc.jpg) no-repeat fixed center 0 / 100% auto;
}
#research h2 {
	font-size: 4.8rem;
	display: block;
	padding-top: 35px;
}
#research p {
	font-size: 2.2rem;
	line-height: 1.95;
	font-weight: 600;
	color: #fff;
	margin-top: 25px;
}
#research p:last-child {
	padding-bottom: 68px;
}
#research h2::before,
#research h2::after,
#research p:last-child::before,
#research p:last-child::after {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	border: solid 7px #c70e1a;
	position: absolute;
}
#research h2::before { top: 0; left: 0; border-bottom: none; border-right: none; }
#research h2::after { top: 0; right: 0; border-bottom: none; border-left: none; }
#research p:last-child::before { bottom: 0; left: 0; border-top: none; border-right: none; }
#research p:last-child::after { bottom: 0; right: 0; border-top: none; border-left: none; }



/* -- Spec
-------------------------------------------------------------------------------- */
#spec {
	padding: 90px 10px 100px;
}
#spec::before {
	background: url(../img/index/bg_mesh.png) repeat;
}
#spec table {
	width: 100%;
	margin-top: 35px;
}
#spec th,
#spec td {
	vertical-align: middle;
	padding: 8px 15px;
	border-bottom: solid 1px #0d090a;
}
#spec th {
	font-size: 1.6rem;
}
#spec td,
#spec th:not([scope="row"]) {
	text-align: center;
	border-left: solid 1px #0d090a;
}
#spec td {
	font-size: 1.4rem;
	line-height: 1.72;
	width: 26.05%;
}
#spec .note {
	font-size: 1.1rem;
	line-height: 1.64;
	color: #8e8e8e;
	margin-top: 20px;
}
#spec .btn-pdf {
	/* display: table; */
	margin-top: 55px;
}
#spec .btn-pdf li {
	display: table-cell;
}
#spec .btn-pdf li:first-child {
	width: 560px;
	padding-right: 20px;
}
#spec .btn-pdf li:last-child {
	display: block;
	width: 380px;
	margin: 0 auto;
}
#spec .btn-pdf a.btn {
	padding-right: 36px;
}
#spec .btn-pdf li:nth-child(1) a.btn span { margin-left: 24px; }
#spec .btn-pdf li:nth-child(2) a.btn span { margin-left: 8px; }



/* -- Option
-------------------------------------------------------------------------------- */
#option {
	padding: 95px 10px 105px 287px;
	width: 683px;
}
#option::before {
	background: #dfdfdf;
}
#option::after {
	content: "";
	background: url(../img/index/option_bg_pc.jpg) no-repeat center center / cover;
	display: block;
	width: calc(50vw - 300px);
	min-width: 190px;
	height: 100%;
	position: absolute;
	top: 0;
	right: calc(50% + 300px);
}
#option p {
	font-size: 1.8rem;
	line-height: 2.2;
	font-weight: 600;
	letter-spacing: 0.04em;
	margin-top: 50px;
}
#option p a.btn {
	width: 560px;
	margin-left: 0;
}
#option a.btn:hover {
	color: #d70c19;
	background: #dfdfdf;
}