@charset "utf-8";

/* wrapper
---------------------------------------- */
#wrapper{
	padding-top:0px;
}
@media screen and (max-width:640px) {
	#wrapper{
		padding-top:0px;
	}
}

#wrapper #content h2.title{
	font-size:22px;
	font-weight:400;
}

/* main_visual
---------------------------------------- */
#main_visual {
    width: 100%;
	margin-bottom: 50px;
}
#main_visual ul.slider_wrap{
	position: relative;
}
#main_visual ul.slider_wrap li.slider{
	box-sizing: border-box;
	width: 100%;
	min-height: 150px;
	max-height: 840px;
	text-align: center;
	overflow: hidden;
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
	position: relative;
	/*
	background-attachment: fixed;
	box-shadow:0px -4px 2px 0px rgba(33,33,33,0.2) inset;
	*/
}
#main_visual ul.slider_wrap li.slider:before{
	content: "";
	display: block;
	padding-top:calc(65%);
}
#main_visual #main_visual1{
	background-image: url("../img/mv01_bg.jpg");
	/* animation: fadeIn 2s ease 0s;*/
}
@keyframes fadeIn {
	0% {
		filter:saturate(0%);
		/*filter:brightness(150%)*/
		filter:blur(100%);
	}
	100% {
		filter:saturate(100%);
		/*filter:brightness(100%)*/
		filter:blur(0%);
	}
}
#main_visual #main_visual2{
	background-image: url("../img/mv02_bg.png");
}

#main_visual ul.slider_wrap li.slider .madein{
	position: absolute;
	top:27%;
	top:350px;
	left:5%;
	width:10%;
	width: 126px;
	max-width: 126px;
}
#main_visual ul.slider_wrap li.slider .copy1{
	position: absolute;
	top:48%;
	top:404px;
	left:5%;
	/*height: 40px;*/
	width:28.5%;
	width:370px;
	max-width:370px;
}
#main_visual ul.slider_wrap li.slider .copy2{
	position: absolute;
	top:37%;
	top:450px;
	left:5%;
	/* height: 40px; */
	width:24%;
	width:310px;
	max-width:310px;
}
#main_visual ul.slider_wrap li.slider .copy3{
	position: absolute;
	top:44%;
	top:500px;
	left: 5.2%;
	/* height: 20px; */
	width:20%;
	width:255px;
	max-width:255px;
}
#main_visual ul.slider_wrap li.slider .cta{
	position: absolute;
	display: block;
	top:47%;
	top:550px;
	left: 5%;
	/* height: 32px; */
	width:12.2%;
	width:158px;
	max-width:158px;
}
#main_visual ul.slider_wrap li.slider .cta img{
	width:100%;
}

@media screen and (min-width:1500px) {
	#main_visual ul.slider_wrap li.slider{
		background-size: cover;
	}
}

@media screen and (max-width:1100px) {
	#main_visual ul.slider_wrap li.slider .madein{
		top:250px;
	}
	#main_visual ul.slider_wrap li.slider .copy1{
		top:304px;
	}
	#main_visual ul.slider_wrap li.slider .copy2{
		top:350px;
	}
	#main_visual ul.slider_wrap li.slider .copy3{
		top:400px;
	}
	#main_visual ul.slider_wrap li.slider .cta{
		top:450px;
	}
}

@media screen and (max-width:900px) {
	#main_visual ul.slider_wrap li.slider .madein{
		top:150px;
	}
	#main_visual ul.slider_wrap li.slider .copy1{
		top:204px;
	}
	#main_visual ul.slider_wrap li.slider .copy2{
		top:250px;
	}
	#main_visual ul.slider_wrap li.slider .copy3{
		top:300px;
	}
	#main_visual ul.slider_wrap li.slider .cta{
		top:350px;
	}
}


@media screen and (max-width:650px) {
	#main_visual {
		margin-bottom:25px;
	}
	#main_visual ul.slider_wrap li.slider{
		background-attachment:fixed;
		background-position: top 50px center;
		background-size: 115% auto;
		box-shadow:0px -2px 1px 0px rgba(33,33,33,0.2) inset;
	}
	#main_visual ul.slider_wrap li.slider:before{
		padding-top:calc(80%);
	}
	#main_visual ul.slider_wrap li.slider .madein{
		top:90px;
		left:8%;
		width:calc(126px / 3 * 2);
	}
	#main_visual ul.slider_wrap li.slider .copy1{
		top:120px;
		left:8%;
		width:calc(370px / 3 * 2);
	}
	#main_visual ul.slider_wrap li.slider .copy2{
		top:150px;
		left:8%;
		width:calc(310px / 3 * 2);
	}
	#main_visual ul.slider_wrap li.slider .copy3{
		top:190px;
		left:8.2%;
		width:calc(255px / 3 * 2);
	}
	#main_visual ul.slider_wrap li.slider .cta{
		top:225px;
		left:8%;
		width:130px;
	}
	
}
/* Arrow */
#main_visual .slick-prev,
#main_visual .slick-next {
    border: 0 none;
    background: 0 none;
    padding: 0;
	margin: 0;
    text-shadow: none;
    box-shadow: none;
    position: absolute;
    width:20px;
	height:36px;
	text-indent:-9999px;
	top:58%;
    opacity: 1;
	transition:all 0.3s ease;
	background-size:contain;
	background-repeat: no-repeat;
	cursor: pointer;
	z-index: 1;
}
#main_visual .slick-prev:hover,
#main_visual .slick-next:hover {
    opacity: 0.5;
}
#main_visual .slick-next {
    right: 10px;
	background-image:url(/common/slick/icon_arrow_white_right.png);
}
#main_visual .slick-prev {
    left: 10px;
	background-image:url(/common/slick/icon_arrow_white_left.png);
}
@media screen and (max-width:640px) {
	#main_visual .slick-prev,
	#main_visual .slick-next {
		width:14px;
		height:28px;
		top:55%;
	}
	#main_visual .slick-next {
		right: 5px;
	}
	#main_visual .slick-prev {
		left: 5px;
	}
}

/* Dots */
.slick-dots {
	position: absolute;
	bottom:-20px;
	list-style: none;
	display: block;
	text-align: center;
	padding: 0;
	margin: 0;
	width: 100%;
}
.slick-dots li {
	position: relative;
	display: inline-block;
	height: 20px;
	width: 20px;
	margin: 0 5px;
	padding: 0;
	cursor: pointer;
}
.slick-dots li button {
	border: 0;
	background: transparent;
	display: block;
	height: 20px;
	width: 20px;
	outline: none;
	line-height: 0px;
	font-size: 0px;
	color: transparent;
	padding: 2px;
	cursor: pointer;
}
.slick-dots li button:hover, .slick-dots li button:focus {
	outline: none;
}
.slick-dots li button:hover:before, .slick-dots li button:focus:before {
	opacity: 1;
}
.slick-dots li button:before {
	position: absolute;
	top: 0;
	left: 0;
	content: "•";
	width: 20px;
	height: 20px;
	font-family: "slick";
	font-size: 30px;
	line-height: 20px;
	text-align: center;
	opacity: 0.8;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color:#c7c7c7;
}
.slick-dots li.slick-active button:before {
	opacity:1;
	color:#777777;
}
@media screen and (max-width:640px) {
	.slick-dots {
		bottom:4px;
	}
	.slick-dots li {
		margin: 0 0;
	}
	.slick-dots li button:before {
		font-size:26px;
	}
}

/* .btn_news */
#main_visual{
    position:relative;
}
#main_visual a.btn_news{
	
}

@media screen and (max-width:640px) {
    #main_visual a.btn_news{
        width: 230px;
        margin: 0 auto;
        left: 0;
        right: 0;
        bottom: 28px;
        padding: 1px 0px 4px 0px;
        border-radius: 80px;
        line-height: 135%;
        font-size: 14px;
        font-weight: bolder;
        border:solid 1px rgba(255, 255, 255, 0.7);
        box-shadow:0px 0px 0px 2px rgba(224,118,0,0.9);
		display: none;
    }
    #main_visual a.btn_news span{
        display: none;
    }
    #main_visual a.btn_news i{
        right: 10px;
        top: 15px;
        font-size: 12px;
    }
	#main_visual a.btn_news.center{
        bottom: 26px;
        width:calc(100% - 40px);
        max-width:360px;
        padding: 8px 0px 10px 0px;
        border-radius: 60px;
	}
	#main_visual a.btn_news.center span{
        display: inline;
        font-size: 13px;
	}
	#main_visual a.btn_news.center i{
        right: 10px;
        top: 43%;
	}
	#main_visual a.btn_news.blue{
		border:solid 1px rgba(255, 255, 255, 0.7);
		box-shadow:0px 0px 0px 2px rgba(64,85,115,0.9);
	}
}


/* copy
---------------------------------------- */
#copy{
	width:calc(100% - 40px);
	max-width: 740px;
	margin:0 auto 70px auto;
}
#copy img{
	width:100%;
}
@media screen and (max-width:640px) {
	#copy{
		width:calc(100% - 40px);
		margin:0 auto 30px auto;
	}
}

/* products
---------------------------------------- */
#products{
	width:calc(100% - 40px);
	max-width: 1110px;
	margin:0 auto 60px auto;
}
#products a{
	box-sizing: border-box;
	/*
	display: flex;
    flex-direction: column;
    justify-content: center;
	*/
	float: left;
	margin: 0 0.45% 10px 0.45%;
	text-align: center;
	vertical-align: middle;
	color:#FFF;
	width:32.43%;
	max-width:360px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	font-size:15px;
	font-weight: normal;
	/*
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	text-shadow: 1px 1px 0px rgba(0,0,0,0.8);
	*/
}
#products a:hover{
	text-decoration: none;
}
#products a.menshin{
	width:49%;
	max-width:545px;
}
#products a.system{
	width:49%;
	max-width:545px;
}
#products a img{
	width:100%;
	height: auto;
}

@media screen and (max-width:640px) {
	#products{
		width:calc(100% - 40px);
		margin:0 auto 40px auto;
		text-align: center;
	}
	#products a{
		margin: 0 auto 15px auto;
		text-align: center;
		vertical-align: middle;
		color:#FFF;
		width:calc(50% - 5px);
		font-size:14px;
		font-weight: normal;
		max-width: inherit;
	}
	#products a:nth-child(2n - 1){
		float: right;
	}
	#products a:hover{
		text-decoration: none;
	}
	#products a.menshin{
		width:calc(50% - 5px);
		height: auto;
		float: right;
	}
	#products a.system{
		display: block;
		width:100%;
		height:inherit;
		margin: 0 auto 0 auto;
		float: none;
	}
}


/* pickup
---------------------------------------- */
#pickup{
	width:100%;
	margin-bottom:55px;
	text-align: center;
}
#pickup .kazemidori{
	width:100%;
	padding: 30px 0 40px 0;
	background:rgb(0,47,128);
	background:linear-gradient(130deg, rgba(0,47,128,1) 0%, rgba(0,139,120,1) 100%);
}
#pickup .doncho{
	width:100%;
	padding: 40px 0 40px 0;
	background:rgb(0,47,128);
	background:linear-gradient(130deg, rgba(0,139,120,1) 0%, rgba(0,47,128,1) 100%);
}

#pickup .pancho{
	width:100%;
	padding: 30px 0 40px 0;
	background:rgb(0,47,128);
	background:linear-gradient(130deg, rgba(0,47,128,1) 0%, rgba(0,139,120,1) 100%);
}

#pickup .pickup_inc{
	width:calc(100% - 40px);
	max-width:1050px;
	margin: 0 auto;
}

#pickup .kazemidori img{
	float: left;
	width:43%;
	max-width:430px;
}
#pickup .kazemidori iframe{
	float: right;
	width:45%;
	max-width:450px;
	margin-right: 7%;
}

#pickup .doncho img{
	float: right;
	width:52.2%;
	max-width:522px;
}
#pickup .doncho iframe{
	float: left;
	width:45%;
	max-width:450px;
}

#pickup .pancho img{
	float: left;
	width:41.2%;
	max-width:412px;
}
#pickup .pancho iframe{
	float: right;
	width:45%;
	max-width:450px;
	margin-right: 7%;
}

@media screen and (max-width:640px) {
	#pickup{
		margin-bottom:10px;
	}
	#pickup .kazemidori{
		padding: 22px 0 25px 0;
	}
	#pickup .doncho{
		padding: 25px 0 25px 0;
	}
	#pickup .pickup_inc{
		width:calc(100% - 30px);
		text-align: center;
	}
	#pickup .kazemidori img{
		float: none;
		width:100%;
		max-width:170px;
		margin: 0 auto 20px auto;
	}
	#pickup .kazemidori iframe{
		float: none;
		width:100%;
		max-width:300px;
		height:168px;
		margin: 0 auto;
	}
	#pickup .doncho img{
		float: none;
		width:100%;
		max-width:220px;
		margin: 0 auto 20px auto;
	}
	#pickup .doncho iframe{
		float: none;
		width:100%;
		max-width:300px;
		height:168px;
		margin: 0 auto;
	}
    
	#pickup .pancho img{
		float: none;
		width:100%;
		max-width:200px;
		margin: 0 auto 20px auto;
	}
	#pickup .pancho iframe{
		float: none;
		width:100%;
		max-width:300px;
		height:168px;
		margin: 0 auto;
	}
    #news 
}


/* news
---------------------------------------- */
#news{
	width:100%;
	background: #FFF;
	padding:15px 0 10px 0;
	text-align: center;
	position: relative;
	/*
	box-shadow: 0px -3px 3px 0px rgba(33,33,33,0.2);
	*/
}
#news h2{
	width:calc(100% - 40px);
	max-width: 800px;
	padding-bottom: 25px;
	margin: 0 auto 0px auto;
	border-bottom: 1px solid #CCC;
}
#news dl{
	color:#333;
	width:calc(100% - 40px);
	max-width: 800px;
	margin: 0 auto 0 auto;
	padding:16px 0 14px 0;
	font-size:14px;
	border-bottom: 1px dotted #CCC;
	display: flex;
	justify-content: space-between;
}
#news dl:last-of-type{
	margin: 0 auto 45px auto;
}
#news dt{
	width:20%;
	max-width: 190px;
	text-indent: 34px;
}
#news dd{
	width:80%;
	word-wrap: break-word;
}
#news dl.news_img {
	align-items: center;
	
}
#news dl.news_img dd{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#news dd img {
	width: 50px;
	height: auto;
	display: block;
	margin: 0 10px 0 40px;
	border: 1px solid #ccc;
}

#news dl>a {
	display: block;
	position: relative;
	color:#333;
	padding:16px 0 14px 0;
	cursor: pointer;
}
#news dl>a:hover{
	background: rgba(119,106,221,0.1);
}
#news dl.links{
	padding:0 0 0 0!important;
}
#news a.button span{
	display: block;
	position: absolute;
	right: 15px;
	top: 50%;
	transform:translate(0,-50%);
}
#news a.button i{
	color:#999!important;
	color:#776ADD!important;
	font-size:16px;
}
#news div.content{
	font-size:14px;
	padding:10px 0 20px 20%;
	display: none;
}
#news div.content p{
	margin-bottom: 15px;
}
#news div.content p a{
	transition: all 0.5s ease;
}
#news div.content p a:hover{
	opacity: 0.7;
}
br.sp_inline {
	display: inline;
}
@media screen and (max-width:640px) {
	#news{
		padding:30px 0 0px 0;
	}
	#news h2{
    	width: calc(100% - 20px);
		padding-bottom: 15px;
	}
	#news dl{
    	width: calc(100% - 20px);
		padding:8px 0 7px 0;
		font-size:14px;
	}
	#news dl:last-of-type{
		margin: 0 auto 20px auto;
	}
	#news dt{
		width:90px;
		max-width: 150px;
		text-indent: 0;
		text-align: justify;
	}
	#news dt span.day{
		display: none;
	}
	#news dd{
		width:80%;
		width:calc(100% - 100px);
	}
	#news dl a dd{
		box-sizing: border-box;
		padding-right: 12px;
	}
	#news a {
		padding:8px 0 7px 0;
	}
	#news a:hover{
		background:none;
	}
	#news a.button span{
		display: block;
		position: absolute;
		right: 2px;
	}
	#news div.content{
		font-size:14px;
		padding:10px 20px 10px 20px;
		display: none;
	}
	#news div.content p{
		margin-bottom: 10px;
	}
	#news dl.news_img dd{
		flex-direction: column;
		align-items: flex-start;
	}
	#news dd img{
		margin: 0 auto;
		width: 60px;
	}
	br.sp_inline {
		display: none;
	}
}



/* company
---------------------------------------- */
#company{
	width:100%;
	margin:0 auto 50px auto;
}
#company a{
	/*
	display: flex;
    flex-direction: column;
    justify-content: center;
	*/
	display: block;
	box-sizing: border-box;
	margin: 0 0 10px 0;
	text-align: center;
	vertical-align: middle;
	width:49.62%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	color:#222;
	font-size:22px;
	font-weight: bolder;
	font-weight: 500;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	text-shadow: 1px 1px 0px rgba(255,255,255,0.8);
}
#company a:hover{
	text-decoration: none;
}
#company a.company{
	float: left;
	background-image: url("../img/links_company.jpg");
	height: 400px;
	text-align: left;
    padding-left: 3%;
    padding-top: 30px;
}
#company a.office{
	float: right;
	background-image: url("../img/links_office.png");
	height: 195px;
	text-align: right;
    padding-right: 1.5%;
    padding-top: 162px;
	border:1px solid #CCC;
}
#company a.recruit{
	float: right;
	background-image: url("../img/links_recruit.png");
	height: 195px;
	text-indent: -9999px;
}

@media screen and (max-width:800px) {
	#company{
		margin:0 auto 20px auto;
	}
	#company h2.title{
	}
	#company a{
		font-size:18px;
		margin: 0 0 4px 0;
	}
	#company a.company{
		height: 200px;
    	padding-left: 2.5%;
    	padding-top: 15px;
	}
	#company a.office{
		height: 98px;
    	padding-right: 1%;
		padding-top: 70px;
		background-size: 125% auto;
    	background-position: top 0px left -40px;
	}
	#company a.recruit{
		height: 98px;
		background-image: url("../img/links_recruit_sp.png?v=2");
	}
}

p.text-indent {
	text-indent: -5px;
}