@charset "UTF-8";
/* CSS Document */

/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
body{line-height:1;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
nav ul{list-style:none;}
a{margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent;}
table,td{border-collapse:collapse; border-spacing:0;}
/* change border colour to suit your needs */
hr {display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0;}
input, select {vertical-align:middle;}
*,
*::before,
*::after{box-sizing: border-box;}

html{-webkit-overflow-scrolling: touch; overflow: auto; height: 100%;}
body{
    font-size:1rem; line-height: 1.5;
    font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;
    overflow-x: hidden; -webkit-text-size-adjust: 100%; color:#333; padding: 66px 0 0 0;
}

@media print{.print{display:none!important;}}

.clearfix:after {content: "."; display: block; clear: both; height: 0; visibility: hidden;}
.clearfix {display: inline-block;}
/* WinIE6 below, Exclude MacIE5 \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}

.hover{opacity:1.0; filter:alpha(opacity=100); /* For IE8 and earlier */}
.hover:hover{opacity:0.6; filter:alpha(opacity=60); /* For IE8 and earlier */}

/*float*/
.fL{float:left;}.fR{float:right;}

/*margin・padding*/
.mt10{margin-top:10px !important;}.mt15{margin-top:15px !important;}.mt20{margin-top:20px !important;}.mt30{margin-top:30px !important;}.mt40{margin-top:40px !important;}.mt50{margin-top:50px !important;}
.mr10{margin-right:10px !important;}.mr15{margin-right:15px !important;}.mr20{margin-right:20px !important;}.mr30{margin-right:30px !important;}.mr40{margin-right:40px !important;}.mr50{margin-right:50px !important;}
.mb10{margin-bottom:10px !important;}.mb15{margin-bottom:15px !important;}.mb20{margin-bottom:20px !important;}.mb30{margin-bottom:30px !important;}.mb40{margin-bottom:40px !important;}.mb50{margin-bottom:50px !important;}.mb70{margin-bottom:70px !important;}
.ml10{margin-left:10px !important;}.ml15{margin-left:15px !important;}.ml20{margin-left:20px !important;}.ml30{margin-left:30px !important;}.ml40{margin-left:40px !important;}.ml50{margin-left:50px !important;}
.m_auto{margin:0 auto;}
.pt10{padding-top:10px !important;}.pt15{padding-top:15px !important;}.pt20{padding-top:20px !important;}.pt30{padding-top:30px !important;}.pt40{padding-top:40px !important;}.pt50{padding-top:50px !important;}
.pr10{padding-right:10px !important;}.pr15{padding-right:15px !important;}.pr20{padding-right:20px !important;}.pr30{padding-right:30px !important;}.pr40{padding-right:40px !important;}.pr50{padding-right:50px !important;}
.pb10{padding-bottom:10px !important;}.pb15{padding-bottom:15px !important;}.pb20{padding-bottom:20px !important;}.pb30{padding-bottom:30px !important;}.pb40{padding-bottom:40px !important;}.pb50{padding-bottom:50px !important;}
.pl10{padding-left:10px !important;}.pl15{padding-left:15px !important;}.pl20{padding-left:20px !important;}.pl30{padding-left:30px !important;}.pl40{padding-left:40px !important;}.pl50{padding-left:50px !important;}

/*font*/
.font_ss{font-size:0.75rem;}.font_s{font-size:0.875rem;}.font_l{font-size:1.25rem;}.font_xl{font-size:1.5rem;}.lh150{line-height:150%;}.bold{font-weight:bold;}.font_n{font-size: 1rem;}
.textL{text-align:left !important;}.textC{text-align:center !important;}.textR{text-align:right !important;}
.s-1{padding-left:1em; text-indent:-1em;}.s-2{padding-left:2em; text-indent:-2em;}
.blue{color:#0B4DA2;}.red{color:#ff0000;}.white{color:#FFF;}.ore{color:#FF8400;}.green{color:#00A13E;}.yellow{color:#FFFF00;}

/*link*/
a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;
}

.container{
	max-width: 1200px;
	min-width: 900px;
	margin: 50px auto;
	padding: 0 1em;
}

.w100{
	display: block;
	width: 100%;
}

#pageTOP{
	position:fixed;
	bottom:20px;
	right:20px;
	z-index:99999;
}


/*header*/
header{
	position: fixed;
	width: 100%;
	min-width: 900px;
	height: 66px;
	background: #134372;
	padding: 10px 20px;
	margin: 0;
	left: 0;
	top: 0;
	z-index: 9999;
}

header img{
	display: inline-block;
	float: left;
	height: 100%;
	max-height: 60px;
}
	
nav{
	float: right;
	color: #fff;
	font-size: clamp(0.75rem, calc(0.75rem + ((1vw - 0.48rem) * 0.9259)), 1.125rem);
	margin: 20px 0 0 0;
}

nav ul{
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-end;
}

nav li{
	margin: 0 1.5em 0 0;
}

nav li:last-child{
	margin: 0;
}

nav li a{
	text-decoration: none;
	color: #fff;
}

nav li a:hover,#com a.com,#mold a.mold,#design a.design,#custom a.custom,#access a.access{
	color: #00c8ff;
	border-bottom: 1px solid #00c8ff;
   	padding: 0 0 0.3em 0;
}

/*h*/
h2{
	width: 300px;
	text-align: center;
	color: #134372;
	font-size: 2.25rem;
	margin: 0 auto 50px;
}

h2 > span{
	display: block;
	font-size: 0.875rem;
	font-weight: normal;
	border-top: 1px solid #134372;
	padding: 0.2em 0 0 0;
}


/*slider*/
.bxslider_box{
  	width: 100%;
	min-width: 900px;
}

.slick01 li{
  	display: block!important;
}

.slick01 img{
	width: 100%;
  	object-fit: cover;
}

.slick-dots{
	width: 100% !important;
	text-align: center !important;
}

.slick-dots li{
	display: inline-block !important;
}

/*top*/
.navBOX{
	position: relative;
	width: 100%;
	min-width: 900px;
	height: 276px
}

.navBOX .link01,.navBOX .link02,.navBOX .link03,.navBOX .link04{
	position: absolute;
	background-size: cover;
}

.navBOX .link01{
	background: url("../img/top_link01.jpg") no-repeat;
	left: -100px;
	top: 0;
	opacity: 0;
}

.navBOX .link02{
	background: url("../img/top_link02.jpg") no-repeat;
	right: 0;
	top: -100px;
	opacity: 0;
}

.navBOX .link03{
	background: url("../img/top_link03.jpg") no-repeat;
	left: 0;
	bottom: -100px;
	opacity: 0;
}

.navBOX .link04{
	background: url("../img/top_link04.jpg") no-repeat;
	right: -100px;
	top: 0;
	opacity: 0;
}

/*
.link05{
	width: 100%;
	min-width: 900px;
	background: url("../img/top_link05.jpg") no-repeat;
	background-size: cover;
}
*/

.toplink{
	width: 49.5%;
	text-align: center;
	color: #fff;
}

.toplink > p{
	font-size: 2.125rem;
	margin: 1em 0 0.6em 0;
}

.toplink > span{
	display: inline-block;
	font-size: 1.25rem;
	margin: 0 0 2em 0;
}

.toplink > a:link,.toplink > a:visited{
	display: block;
	width: 240px;
	height: 64px;
	line-height: 64px;
	font-size: 1.125rem;
	text-decoration: none;
	color: #fff;
	margin: 0 auto 2em;
	border: 1px solid #fff;
	border-radius: 32px;
	overflow: hidden;
  	position: relative;
  	z-index: 1;
}

.toplink > a:link::after {
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    transform: scale(0, 1);
    transform-origin: left top;
    transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
    z-index: -1;
}

.toplink > a:hover{
	color: #134372;
}

.toplink > a:hover::after {
  transform: scale(1, 1);
}

/*animation*/
.link01.slideIn-L{
	opacity: 1.0;
	left: 0;
	transition: 1.5s;
}

.link02.slideIn-T{
	opacity: 1.0;
	top: 0;
	transition: 1.5s;
}

.link03.slideIn-B{
	opacity: 1.0;
	bottom: 0;
	transition: 1.5s;
}

.link04.slideIn-R{
	opacity: 1.0;
	right: 0;
	transition: 1.5s;
}


/*
.link05 > a:link,.link05 > a:visited{
	display: flex;
	flex-direction: column;
    align-items: center;
	text-decoration: none;
	color: #fff;
	padding: 1.5em;
}

.link05 > a:hover{
	background: rgba(255,255,255,0.3);
}

.link05 > a > span{
	font-size: 2.5rem;
}

.link05 > a > p{
	font-size: 2.125rem;
}
*/

/*company*/
.font_l > .name{
	font-size: 1.75rem;
}

table.history,table.hyo01{
	width: 100%;
	min-width: 900px;
	border: 1px solid #134372;
}

table.history th,table.hyo01 th{
	width: 20%;
	text-align: center;
	font-weight: normal;
}

table.history th,table.history td,table.hyo01 th,table.hyo01 td{
	border: 1px solid #134372;
	padding: 0.8em;
}

table.history tr:nth-child(even){
	background: #f0f0f0;
}

table.hyo01 .flex{
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	border: none;
}

table.hyo01 .flex > p{
	width: 20%;
}

table.hyo01 .flex > div{
	width: 80%;
}

/*mold*/
.flex_mold{
	display: flex;
	justify-content: space-between;
}

.flex_mold > img{
	display: block;
	width: 49%;
}

table.hyo02{
	width: 100%;
	min-width: 900px;
	text-align: center;
	border: 1px solid #134372;
}

table.hyo02 th{
	font-weight: normal;
	background: #d0d9e3;
}

table.hyo02 th,table.hyo02 td{
	border: 1px solid #134372;
	padding: 0.8em;
}

/*design*/
.flex_design{
	display: flex;
	justify-content: space-between;
}

.flex_design > div > img{
	display: block;
	margin: 0 auto 20px;
}

.flex_design > div{
	width: 47%;
}

.flex_design > div img + p{
	font-size: 1.5rem;
	font-weight: bold;
	margin: 0 0 10px 0;
}

.design_junbi{
	display: flex;
	justify-content: center;
    align-items: center;
	width: 100%;
	height: 350px;
	border: 1px solid #CCC;
}

.design_junbi > p{
	font-size: 1.5rem;
	color: #CCC;
}

/*custom*/
.flex_custom{
	display: flex;
	justify-content: center;
	align-items: center;
}

.flex_custom > img{
	display: block;
	margin: 0 40px 0 0;
}

.flex_custom > p{
	width: 860px;
	font-size: 1.375rem;
}

/*access*/
iframe.map {
	display: inline-block;
  	width: 100%;
  	aspect-ratio: 16/9;
	margin: 0 0 20px 0;
}


/*footer*/
footer{
	width: 100%;
	min-width: 900px;
	color: #fff;
	background: #134372;
	padding: 1em 0;
	margin: 50px 0 0 0;
}

footer > div{
	height: 70px;
	margin: 0 auto 2em;
	padding: 0 20px;
}

footer > div > img{
	width: auto;
	height: 100%;
	margin: 0 1em 0 0;
	float: left;
}

footer > div > p{
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	border-left: 1px solid #fff;
	padding: 0 1em;
	float: left;
}

footer > div > p.right{
	width: 40%;
	font-size: 0.875rem;
	border: none;
	padding: 0;
	float: right;
}

footer > p{
	text-align: center;
	font-size: 0.75rem;
}