@charset "utf-8";

/* -------------------------------------------------------------------
メインビジュアルの設定
------------------------------------------------------------------- */
.slider-body{
	background:#0B0C11;
  position: relative;
  z-index: 1000; /* ナビゲーションより下 */
}

.slider_main {
	width:100%;
	margin:0px auto 0px;

	
}

.slider_main img {
	width:100%;
	height:auto;
	background:#0B0C11;
	position:relative;
	z-index:-1;

}

.slider_main .slick-slide {
	transform: scale(1);
	opacity: 1;
}

.slider_main .slick-slide.slick-center{
	transform: scale(1);/*中央の画像のサイズだけ等倍に*/
	opacity: 1;/*透過なし*/
}




.slick-prev,
.slick-next,
.slick-dots button {
	display:none;
}
.slick-slider div { transition: none; }
/* -------------------------------------------------------------------
新着情報の設定
------------------------------------------------------------------- */
.news-body{
	padding:4em 0;
}

.news-list{
	border:1px solid #ccc;
	padding:0px 0;
	display:grid;
	grid-template-columns:100px 3fr;
	align-items:center;
	gap:0 10px;
	font-size:clamp(14px, 3vw, 18px);

}
@media screen and (min-width:768px){
.news-list{
	grid-template-columns:.4fr 3fr;
	gap:0 20px;
	max-width:1040px;
	margin: 0 auto;
	}
}

.news-list dt{
	background:#4767A7;
	color:#fff;
	text-align:center;
	padding:18px 15px;
	letter-spacing:5px;
	font-weight:700;
	font-family: "myfont",sans-serif;
}
@media screen and (min-width:768px){
.news-list dt{
	padding:5px 15px;
	}
}
.news-list dd {
	padding:5px 0;
}

.main-body_bg{
	display:grid;
	grid-template-columns:1fr;
	align-items:center;

}
@media screen and (min-width:768px){
.main-body_bg{
	grid-template-columns: 1fr 1fr;
	}
}



.main-body_bg img{
	vertical-align:bottom;
}

.blue_bg{
	color:#fff;
	padding:6em 0;
	text-align:center;
}

@media screen and (min-width:768px){
.blue_bg{
	padding:12em 0;
	}
}

.blue_bg dl dt{
	font-size:clamp(18px, 4vw, 26px);
	letter-spacing:6px;
	font-weight:700;
	border-bottom:2px solid #fff;
	max-width:50%;
	margin: 0 auto;
	font-family: "myfont",sans-serif;
	
}
.blue_bg dl dt span{
	padding:0 0 5px;
}
.blue_bg dl dd{
	font-size:1.1rem;
	margin:15px 0 0;
	letter-spacing:3px;
	font-weight:500;
	font-family:var(--hiragino);
}

.product-bg{background:#4767A7;}
.flare-product{
	background:url(../images/flare-b.png) no-repeat 20% 80%;
}
@media screen and (min-width:768px){
.flare-product{
	background:url(../images/flare-b.png) no-repeat 35% 0%;
	}
}


/* -------------------------------------------------------------------
PRODUCTの設定
------------------------------------------------------------------- */
.product-body{
	padding:4em 0;
}
.product-photo{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:10px ;
}
@media screen and (min-width:768px){
.product-photo{
	display:grid;
	grid-template-columns:repeat(5,1fr);
	gap:20px ;
	max-width:1040px;
	margin: 0 auto;
	}
}

.product-photo img{
	vertical-align:bottom;
}
.product-photo div{
	position:relative;
	letter-spacing:5px;
	width:calc(90% / 3);
}
@media screen and (min-width:768px){
.product-photo div{
	width:100%;
	}
}

.photo-color{
	color:#fff;
	padding:15px 0;
	text-align:center;
	font-size:clamp(16px, 3.2vw, 20px);
	margin:-80px 0 0;
	z-index:1;
	position:absolute;
	bottom:30px;
	width:100%;
}
@media screen and (min-width:768px){
.photo-color{
	bottom:60px;
	}
}

.photo01_text{background:rgba(202,21,29,.6);}
.photo02_text{background:rgba(201,160,99,.6);}
.photo03_text{background:rgba(74,103,167,.6);}
.photo04_text{background:rgba(19,174,103,.6);}
.photo05_text{background:rgba(46,167,224,.6);}

.product_example{
	display:grid;
	grid-template-columns: 1fr;
	align-items:center;
	padding:3em 0;
	gap:10px 20px;
	margin:30px 0 0;
}
@media screen and (min-width:768px){
.product_example{
	grid-template-columns:250px 1fr;
	gap:0 20px;
	max-width:1040px;
	margin: 0 auto;

	}
}

.product_example dl{
	color:#4767A7;
	text-align:center;
	letter-spacing:3px;

}
@media screen and (min-width:768px){
.product_example dl{
	text-align:left;
	}
}

.product_example dl dt span{
	border-bottom:1px solid #9fa0a0;
	padding:0 0 2px;
	font-size:clamp(14px, 3.5vw, 24px);
	font-weight:700;
	font-family: "myfont",sans-serif;
	letter-spacing:7px;

}
.product_example dl dd{
	font-size:clamp(14px, 3.5vw, 24px);
	font-weight:500;
	letter-spacing:6px;

}
.product_example p{
	font-size:clamp(12px, 3vw, 14px);
	letter-spacing:2px;
	text-align:center;
	color:#595857;
}
@media screen and (min-width:768px){
.product_example p{
	text-align:left;
	}
}
.product_icon ul{
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	align-items:center;
	padding:0em 0;
	gap:0 25px;
}
@media screen and (min-width:768px){
.product_icon ul{
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	align-items:center;
	padding:0em 0 100px;
	gap:0 90px;
	max-width:600px;
	margin: 0 auto 0px;
	}
}
/* -------------------------------------------------------------------
TECHNICAL CAPABILITIESの設定
------------------------------------------------------------------- */
.technical-body{
	padding:4em 0;
}
.technical-bg{background:#4e89c1;}

.technical-photo{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	align-items:center;
	gap:15px;
	margin:70px 0 0;
}
@media screen and (min-width:768px){
.technical-photo{
	grid-template-columns:repeat(5,1fr);
	max-width:1040px;
	margin: 70px auto 0;
	}
}

.technical-photo dd{
	color:#fff;
	background:#00a0e9;
	padding:13px 10px;
	font-size:1rem;
	text-align:center;
	letter-spacing:3px;
	font-family: "myfont",sans-serif;
}
@media screen and (min-width:768px){
.technical-photo dd{
	font-size:1.4rem;
	height:60px;
	}
}

.technical-photo span{
	font-size:.75rem;
	line-height:1.1;
	display:block;
}
@media screen and (min-width:768px){
.technical-photo span{
	font-size:.8em;

	}
}

.technical_example{
	display:grid;
	grid-template-columns: 1fr;
	align-items:center;
	padding:5em 0;
	gap:10px 20px;
}
@media screen and (min-width:768px){
.technical_example{
	grid-template-columns:400px 1fr;
	gap:0 10px;
	max-width:1040px;
	margin: 0 auto;
	}
}

.technical_example dl{
	color:#4767A7;
	text-align:center;
	letter-spacing:3px;

}
@media screen and (min-width:768px){
.technical_example dl{
	text-align:left;
	}
}

.technical_example dl dt span{
	border-bottom:1px solid #9fa0a0;
	padding:0 0 1px;
	font-size:clamp(14px, 3.5vw, 24px);
	font-weight:700;
	font-family: "myfont",sans-serif;
	letter-spacing:6px;

}
.technical_example dl dd{
	font-size:clamp(14px, 3.5vw, 24px);
	font-weight:500;
	letter-spacing:6px;

}
.technical_example p{
	font-size:clamp(12px, 3vw, 14px);
	letter-spacing:2px;
	text-align:center;
	color:#595857;
}
@media screen and (min-width:768px){
.technical_example p{
	text-align:left;
	}
}
.technical_management_dl{
	text-align:center;
	margin:0 0 10px;

}

.technical_management_dl dt{
	max-width:20%;
	margin: 0 auto 10px;
}
@media screen and (min-width:768px){
.technical_management_dl dt{
	max-width:10%;
	}
}
.technical_management_dl dd{
	font-size:clamp(14px, 4.5vw, 32px);
	letter-spacing:8px;
	font-weight:400;
	font-family:var(--hiragino);
	color:#231815;
}
.technical_management_dl dd a{
	text-decoration:none;
	color:#231815;
}

.technical_management_list{
	color:#00a0e9;
	display:grid;
	grid-template-columns: 40px 1fr;
	align-items:center;
	gap:10px 20px;
	padding:.6em 0 ;
	font-size:clamp(14px, 3.5vw, 23px);
	border-top:1px solid #ccc;
	letter-spacing:.1em;
}
@media screen and (min-width:768px){
.technical_management_list{
	grid-template-columns: 50px 1fr;
	margin: 0 auto;
	width:min(100%, 800px);
	}
}

.technical_management_list dd{
	font-weight:500;
}
.last-management{
	border-bottom:1px solid #ccc;
	margin: 0 0 40px
}
@media screen and (min-width:768px){
.last-management{
	border-bottom:1px solid #ccc;
	max-width:1040px;
	margin: 0 auto 40px
	}
}

.product-bg{background:#4767A7;}
.flare-technical{
	background:url(../images/flare-t.png) no-repeat 150% 120%;
}
@media screen and (min-width:768px){
.flare-technical{
	background:url(../images/flare-t.png) no-repeat 70% -60%;
	}
}
/* -------------------------------------------------------------------
MANUFACTURINGの設定
------------------------------------------------------------------- */
.manufacturing-bg{background:#e7cc52;}
.manufacturing-body{
	padding:0em 0 6em;
}
.manufacturing-list{
	font-size:clamp(12px, 3.8vw, 24px);
	letter-spacing:3px;
	padding:20px 0;

}
@media screen and (min-width:768px){
.manufacturing-body{
	padding:8em 0;
}
.manufacturing-list{
	max-width:910px;
	margin: 0 auto;
	}
}

.manufacturing-list dd{
	padding:10px 20px;
	text-align:center;
	margin:15px 0;
	border-radius:10px;
}
.manufacturing-list dd a{
	display:block;
	text-decoration:none;
	color:#fff;
	padding:12px 0;
	font-weight:700;
}

.manufacturing-list .yellow{
		background:#e7cc52;
}
.manufacturing-list .orange{
		background:#e3af30;
}

.flare-manufacturing{
	background:url(../images/flare-m.png) no-repeat 100% 100%;
}
@media screen and (min-width:768px){
.flare-manufacturing{
	background:url(../images/flare-m.png) no-repeat 70% -60%;
	}
}

/* -------------------------------------------------------------------
RECRUITの設定
------------------------------------------------------------------- */
.recruit-bg{background:#8ed1e3;}
.recruit-body{
	padding:4em 0 8em;
}
.recruit_btn{
	text-align:center;
}

.btn{
	position: relative;
	overflow: hidden;
	text-decoration: none;
	display: inline-block;
	padding: 10px 40px;
	text-align: center;
	outline: none;
	transition: ease .2s;
	background:#8ed1e3;
	font-size:clamp(12px, 3.2vw, 22px);
	letter-spacing:5px;
}
.btn span {
	position: relative;
	z-index: 3;
	color:#fff;
}
.btn:hover span{
	color:#fff;
}

.bgleft:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	background:#333;
	width: 100%;
	height: 100%;
	transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
	transform: scale(0, 1);
	transform-origin: right top;
}
.bgleft:hover:before{
	transform-origin:left top;
	transform:scale(1, 1);
}
.flare-recruit{
	background:url(../images/flare-r.png) no-repeat 100% 100%;
}
@media screen and (min-width:768px){
.flare-recruit{
	background:url(../images/flare-r.png) no-repeat 70% -60%;
	}
}

/* -------------------------------------------------------------------
GLOW WITH SANKYOの設定
------------------------------------------------------------------- */
.glow-bg{background:#f39800;}
.glow-body{
	padding:4em 0 0em;
}

.flare-glow{
	background:url(../images/flare-g.png) no-repeat 140% 70%;
}
@media screen and (min-width:768px){
.flare-glow{
	background:url(../images/flare-g.png) no-repeat 70% -60%;
	}
}

/* -------------------------------------------------------------------
バナーの設定
------------------------------------------------------------------- */
.banner-list{
	font-size:clamp(12px, 3.8vw, 20px);
	letter-spacing:3px;
	padding:20px 0;
}
@media screen and (min-width:768px){
.banner-list{
	max-width:910px;
	margin: 0 auto;
	}
}

.banner-list dd{
	padding:10px 20px;
	text-align:center;
	margin:0px 0 20px;
	border-radius:10px;
}
@media screen and (min-width:768px){
.banner-list dd{
	padding:10px 20px;
	text-align:center;
	margin:0px 0 30px;
	border-radius:10px;
	}
}

.banner-list dd a{
	display:block;
	text-decoration:none;
	color:#fff;
	padding:12px 0;
}
.banner-list dd ul li:nth-child(2){
	margin:10px 0 0 ;
	font-size:.95rem;
	}
@media screen and (min-width:768px){
.banner-list dd:nth-child(3){
	margin:0px 0 -0px;
	}
}
@media screen and (min-width:768px){
.banner-list dd ul{
	display:grid;
	grid-template-columns:1fr 3fr;
	align-items:center;
	text-align:left;
	gap:0 20px;
	margin:-10px 0 -10px;
	}
.banner-list dd ul span{
	display:block;
	font-size:1rem;
	}
.banner-list dd ul li:nth-child(2){
	margin:0px 0 0 ;
	font-size:20px;
	}

}


.banner-list .green{
		background:#8EC31F;
}
.banner-list .red{
		background:#EA5412;
}
.banner-list .orange{
		background:#F39800;
}