html {font-size: 62.5%; font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif; background: #F5F5F5}
.main_visual{position: relative; height: 650px; overflow: hidden; z-index: -1}
.main_visual header{ border-radius: 0 0 5px 5px; position: absolute; top: 0; left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); width: 1200px;  height: 95px; opacity: 0.9; background-color: #fff; margin: 0 auto; z-index: 10;}
header{display: flex; align-items: center; padding: 0 30px;}
header .logo{margin-right: 40px;}
header p{color: #333; font-size:1.6rem;}
.slick {height: 650px;}
.slick button{display: none !important;}
.slick-slide{height: auto !important;}
.slick-slide img{width: 100%;}

.news{max-width: 1200px; border-radius: 5px; color: #fff; margin: -70px auto 0 auto; padding: 20px; z-index: 5; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.5); background-color: rgba(0,0,0,0.8);}
.news h2{ font-size: 2rem; font-family: arial , sans-serif; font-weight: bold; }
.news ul li{ display: flex; font-size: 1.6rem; align-items: center; margin-top: 15px;}
.news ul li .brand{ width: 180px; border-radius: 3px; background-color: #454545; text-align: center; margin: 0 20px; line-height: 1; padding: 5px 10px;}

.message{ font-size: 2rem; text-align: center; margin: 75px auto; line-height: 1.5;}

.brand_list,
.company{background: #fff;}

.media_list h2,
.brand_list h2,
.company h2,
.contact h2{ font-size:3rem; font-weight: bold; text-align: center; margin-bottom: 40px; display: flex; align-items: center; justify-content: center; }
.media_list h2 em,
.brand_list h2 em,
.company h2 em,
.contact h2 em{ font-style: normal; display: inline-block; position: relative }
.media_list h2 em:before,
.brand_list h2 em:before,
.company h2 em:before,
.contact h2 em:before{ position: absolute; width: 0; height: 0;top: -10px; left: -40px; content: ''; border-style: solid; border-width: 20px 20px 0 0; border-color: #f00 transparent transparent transparent;}
.media_list h2 span,
.brand_list h2 span,
.company h2 span,
.contact h2 span{ font-size: 1.4rem; display: inline-block; margin-left: 40px; position: relative}
.media_list h2 span:before,
.brand_list h2 span:before,
.company h2 span:before,
.contact h2 span:before{ position: absolute; width: 0; height: 30px;top: -7px; left: -20px; content: ''; -webkit-transform: rotate(30deg); transform: rotate(30deg); border-width: 0 0 0 2px; border-style: solid; border-color: #f00;}
.media_list h2 span:after,
.brand_list h2 span:after,
.company h2 span:after,
.contact h2 span:after{ position: absolute; width: 0; height: 0; bottom: -15px; right: -30px; content: ''; border-style: solid; border-width: 0 0 20px 20px; border-color: transparent transparent #ff0000 transparent;}

.brand_list {border-top: solid 5px #e50012; padding: 50px 0 40px 0;}
.brand_list ul{display: flex; justify-content: space-between; max-width: 1200px; flex-wrap: wrap; margin: 0 auto;}
.brand_list ul li{width: 18%; height: 160px; margin-bottom: 30px;}
.brand_list ul li.blank{ height: 1px;}
.brand_list ul li a{border: solid 1px #111; border-radius: 5px; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.3); background: #fff; display: flex; justify-content: center; align-items: center; height: 100%; text-align: center;}

.media_list { padding: 40px 0;}
.media_list ul{ max-width: 1200px; margin: 0 auto; /* display: flex; justify-content: space-between; flex-wrap: nowrap;  */}
.media_list ul li{margin: 0 20px; width: 160px !important;}
.media_list ul li a{ display: block; position: relative; transition:0.5s all; text-align: center;}
.media_list ul li a:hover img{transform: scale(1.1); transition:0.5s all;}
.media_list ul .slick-arrow{ display: none !important; }
/* .slick-list{ padding: 40px 0 !important; }  */

.img_bg{ width: 100%; min-height: 300px; background-position: center top; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; text-align: center; padding: 60px; background-image: url('../img/bg_visual.jpg'); margin-bottom: 10px;}

.company {padding-top: 50px;}
.company .adress{text-align: center; font-size:1.6rem; padding-bottom: 40px; line-height: 1.5}

.contact{padding-top: 50px;}
.contact ul{ width: 500px; margin: 0 auto; }
.contact ul li{margin-bottom: 20px; text-align: center}
.contact ul li input,
.contact ul li textarea{padding: 15px; font-size: 1.6rem; width: 500px !important; border-radius: 5px; background: #fff; text-align: left;}
.contact ul li input.submit{ width: 250px !important; text-align: center; border: solid 1px #b5b5b5; padding: 20px;}

.footer{  font-size: 1.2rem; background: #000; color: #fff; text-align: center; padding: 20px; width: 100%; margin-top: 60px; }


@media screen and (max-width: 1200px) {
	header,
	.news{ max-width: 90% !important; }
	.main_visual,
	.slick {height: 400px;}
	.brand_list ul,
	.media_list ul,
	.message{width: 90%;}
	.brand_list ul li a img,
	.media_list ul li a img{ max-width: 80%; }
	.slick img{width: 100%;}
}

@media screen and (max-width: 700px) {
	header{padding: 10px 20px; height: auto !important;}
	header .logo {width: 100px; margin-right: 20px}
	header .logo img{width: 100%;}
	header p{font-size: 1.3rem;}
	.main_visual,
	.slick {height: 200px;}
	.message{ margin: 20px auto; font-size: 1.4rem; }
	.contact ul,
	.contact ul li input,
	.contact ul li textarea{ width: 90% !important; }
	.brand_list ul li{ width: 48%; margin-bottom: 20px; }
	.news{ margin-top: -20px; padding: 10px 20px;}
	.news ul li{flex-wrap:wrap; font-size:1.4rem; margin-top: 10px; }
	.news ul li .brand,
	.news ul li .date{font-size: 1.2rem;}
	.news ul li .brand {margin: 0 0 0 20px; white-space: nowrap}
	.news ul li .brand + div{margin-top: 5px;}
	.img_bg{    background-attachment: inherit; height: 100px;}
	.company .adress{font-size: 1.4rem;}
	.media_list h2 em, .brand_list h2 em, .company h2 em, .contact h2 em{font-size: 2rem !important}
	.media_list ul li a{width: 100%;}
	.media_list ul li a img{ max-width: 100%; }
	iframe{height: 200px;}
}