/*色一括指定　ここから*/

/*--基本文字色、h2にも反映*/
:root{
	--font-color: #333;
}

/*--h3文字色に反映*/
:root{
	--main-color: #004d82;
}

/*--ボタン色*/
:root{
	--point-color: #fbb03b;
}

/*--ボタン反転色*/
:root{
	--switch-color: #fff;
}

/*--表組みth背景色*/
:root{
	--th-color: #0082af;
}

/*--表組みtd背景色*/
:root{
	--td-color: #dff0f2;
}

/*色一括指定　ここまで*/



/*ページ全体の基本設定　ここから*/

body{
	letter-spacing:0.1em;
	position:relative;
	font-size: 16px;
}

.pc{
	display: block;
}

.sp{
	display: none;
}

@media(max-width:992px) {

	.pc{
		display: none;
	}

	.sp{
		display: block;
	}
}

.text-center{
	text-align: center;
}

/*要素同士の間隔を取るためのwrapper*/
.wrapper{
	padding-top: 100px;
	padding-bottom: 100px;
}

.wrapper2{
	padding-top: 150px;
	padding-bottom: 100px;
}

@media screen and (max-width:992px) {
	
.wrapper{
	padding-top: 75px;
	padding-bottom: 75px;
}
	
.wrapper2{
	padding-top: 100px;
	padding-bottom: 75px;
}
	
}

/*見出し文字共通設定*/
h1{
	width: min(270px, 50%);
}

h2 {
	font-size: 45px;
	color: #005191;
	font-weight: 600;
	margin-bottom: 70px;
}

h2.h2-non {

}

h2:before {
	content: '';/*何も入れない*/
	display: inline-block;
	width: 61px;/*画像の幅*/
	height: 34px;/*画像の高さ*/
	background-image: url(../../../img/icon_i.svg);
	background-size: contain;
	background-repeat:no-repeat;
	vertical-align: middle;
	padding-left: 71px;
}

h2.h2-non:before {
	display: none;
}

@media(max-width:1400px) {
	
h2 {
	font-size: 30px;
	margin-bottom: 50px;
}

h2:before {
	width: 45px;/*画像の幅*/
	height: 25px;/*画像の高さ*/
	padding-left: 55px;
}
	
}

@media screen and (max-width:992px) {
	
h2 {
	font-size: 21px;
	margin-bottom: 30px;
}

h2:before {
	width: 30px;/*画像の幅*/
	height: 20px;/*画像の高さ*/
	padding-left: 40px;
}

}

h3{
	font-size: 30px;
	color: #5a5a5a;
	font-weight: 600;
}

@media(max-width:1400px) {
	
h3 {
	font-size: 25px;
}
	
}

@media(max-width:992px) {
	
h3 {
	font-size: 18px;
}
	
}

h4{
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 1em;
}

@media(max-width:992px) {
	h4{
		font-size: 16px;
	}
}

p {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

.blue01 {
	color: #005191;
}

.blue02 {
	color: #669ca2;
}   

.cen {
	text-align: center;
}

.sp-cen {

}

.sp-lef {

}

.sp-non {

}

@media(max-width:992px) {
	
.sp-cen {
	text-align: center;
}
	
.sp-lef {
	text-align: left;
}
	
.sp-non {
	display: none;
}
	
}

img + h3,
img + p,
p + img,
h3 + p{
	margin-top: 20px;
}

p + h3{
	margin-top: 70px;
}

.img-km1 {
	border-radius: 20px 0px 20px 0px;
}

@media screen and (max-width:992px) {

.img-km1 {
	border-radius: 10px 0px 10px 0px;
}
	
}

/*矢印付きボタン*/
.arrow-button{
	font-size: 23px;
	font-weight: 700;
	color: #fff;
	border: 3px solid #feb313;
	background-color: #feb313;
	text-decoration: none;
	padding: 15px 80px 15px 30px;
	position: relative;
	transition: .3s;
	display: inline-block;
}

@media(max-width:992px) {
	
	.arrow-button{
	font-size: 20px;
		margin: 0 auto;
	}
	
}

@media(max-width:767px) {
	
	.arrow-button{
	font-size: 18px;
	}
	
}

.arrow-button::after{
	content: '';
	display: inline-block;
	position: absolute;
	top: 50%;
	right: 20px;
	width: 10px;
    height: 10px;
    margin: 0 10px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: rotate(45deg) translateY(-50%);
	transition: .3s;
}

.arrow-button:hover{
	cursor: pointer;
	background-color: #fff;
	color: var(--font-color);
	transition: .3s;
}

.arrow-button:hover::after{
    border-top: 3px solid var(--point-color);
    border-right: 3px solid var(--point-color);
}

/*ページ全体の基本設定　ここまで*/


/*ヘッダー　ここから*/
header{
	width: 100%;
	position:absolute;
    z-index: 1000;
	top: 0px;
	left: 0px;
}

header h1{
	position:absolute;
	top: 30px;
	left: 30px;
	width: 150px;
	height: auto;
}

header .menu-box{
	position:absolute;
	top: 0px;
	right: 0px;
	text-align: center;
}

@media(max-width:1400px) {
	
header h1{
	width: 120px;
}
	
}

@media(max-width:992px) {
		
header h1{
	top: 13px;
	left: 10px;
	width: 90px;
}
	
}

/*ファーストビュー右上ボタン*/
.request{
	font-size: 23px;
	font-weight: 700;
	color: #fff;
	background-color: var(--point-color);
	text-decoration: none;
	padding: 15px 30px;
	display: inline-block;
	line-height: 1;
	border: 3px solid var(--point-color);
}

.request:hover{
	background-color: var(--switch-color);
	color: var(--font-color);
	transition: .3s;
}

@media(max-width:1400px) {
	
.request{
	font-size: 20px;
}	
	
}

@media(max-width:1200px) {
	
.request{
	font-size: 16px;
}	
	
}

@media(max-width:992px) {
	
.request{
	font-size: 13px;
	line-height: 1.3;
	width: 70px;
	height: 70px;
	display: block;
	padding-top: 15px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
}
	
}
/*ヘッダー　ここまで*/


/*ファーストビュー　ここから*/
#firstview{
	height: 100vh;
	min-height: 850px;
	position: relative;
	margin-top: 0px;
    z-index: 1;
}

@media(max-width:1400px) {
	
#firstview{
	min-height: 750px;
}
	
}

@media(max-width:1200px) {
	
#firstview{
	min-height: 720px;
}
	
}

@media(max-width:992px) {
	
#firstview{
	height: auto;
	min-height: inherit;
	padding-bottom: 0;
}
	
}

@media(max-width:768px) {
	
#firstview{
	margin-top: 70px;
}
	
}

.firstview-img{
	width: 100%;
	height: 100vh;
	min-height: 850px;
	position: absolute;
	top: 0;
	left: 0;
}

.firstview-img img{
	width: 100%;
	height: 100vh;
	min-height: 850px;
	object-position: center;
	object-fit: cover;
}

@media(max-width:1400px) {
	
.firstview-img{
	min-height: 750px;
}

.firstview-img img{
	min-height: 750px;
}
	
}

@media(max-width:1200px) {
	
.firstview-img{
	min-height: 720px;
}

.firstview-img img{
	min-height: 720px;
}
	
}

@media(max-width:992px) {

.firstview-img{
	position: inherit;
	height: auto;
	min-height: auto;
}
	
.firstview-img img{
	height: auto;
	min-height: auto;
	object-position: left;
}
	
}

.firstview-img + div{
	background-image:
    linear-gradient(rgba(0, 81, 145, 0.8), rgba(12, 162, 253, 0.8)), 
    url('../images/firstview-bg_bl.jpg');
	background-size: cover;
	background-position: center;

	width: 500px;
	height: 100vh;
	min-height: 850px;
	position: absolute;
	top: 0;
	left: 0;
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 200px;
	color: #fff;
}

@media(max-width:1400px) {
	
	.firstview-img + div{
	width: 400px;
	min-height: 750px;
	padding-top: 150px;
	}
	
}

@media(max-width:1200px) {

	.firstview-img + div{
	width: 320px;
	min-height: 720px;
	}
	
}

@media(max-width:992px) {
	
	.firstview-img + div{
		position: inherit;
		width: 100%;
		height: auto;
		min-height: auto;
		right: inherit;
		padding-top: 30px;
		padding-bottom: 50px;
	}

}

#firstview h2{
	width: 100%;
	height: auto;
	margin-bottom: 1em;
}

#firstview p{
	margin-bottom: 50px;
}

@media(max-width:1200px) {
	
#firstview p{
	margin-bottom: 25px;
}
	
}

@media(max-width:992px) {
	
#firstview p{
	margin-bottom: 30px;
}
	
}

#firstview .arrow-button{
	background-color: rgba(254,179,19,100);
	color: #fff;
	width: 60%;
	font-size: 20px;
	display: block;
	margin-right: auto;
	margin-left: auto;
	padding: 10px 30px
}

#firstview .arrow-button + .arrow-button{
	margin-top: 10px;
}

#firstview .arrow-button::after{
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
}

#firstview .arrow-button:hover{
	cursor: pointer;
	background-color: #fff;
	color: var(--font-color);
	transition: .3s;
}

#firstview .arrow-button:hover::after{
    border-top: 3px solid var(--point-color);
    border-right: 3px solid var(--point-color);
}

@media(max-width:1400px) {

#firstview .arrow-button{
	width: 80%;
	font-size: 20px;
	padding: 10px 30px
}
	
}

@media(max-width:1200px) {

#firstview .arrow-button{
	width: 100%;
	font-size: 16px;
	padding: 10px 20px
}
	
}


/*ファーストビュー　ここまで*/


#goodat{
	background-color: #ebf7fe;
	padding-top: 100px;
}

#goodat h2{

}

#goodat ul{
	width: 100%;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
	align-items: stretch;
	gap: 2%; 
}

@media(max-width:992px) {
	#goodat ul{
		flex-wrap: wrap;
		gap: 1%;
	}
}

#goodat ul li{
	display: flex;
	width: 23%;
	/* width: min(255px, 23%); */
	margin-bottom: 20px;
	background-color: #fff;
	border-radius: 20px 0px 20px 0px;
	padding: 30px 10px;
	align-items: center; /* 上下中央揃え */
	justify-content: center;
}

@media(max-width:992px) {
	#goodat ul li{
		width: 48%;
	}
}

@media(max-width:768px) {
	#goodat ul li{
		width: 100%;
	padding: 15px;
	}
}

.goodat-cards{
	font-weight: 700;
	font-size: 20px;
	color: #669ca2;
	line-height: 1.5;
	text-align: center;
}

@media(max-width:1400px) {
	
.goodat-cards{
	font-size: 18px;
}
	
}

@media(max-width:1200px) {
	
.goodat-cards{
	font-size: 16px;
}
	
}

@media(max-width:992px) {
	.goodat-cards{
		font-size: 14px;
		margin-bottom: 0;
	}
}

.goodat-cards span{
	font-size: 60%;
	display: block;
	color: #666;
	margin-top: 10px;
}

@media(max-width:992px) {
	.goodat-cards span{
		font-size: 80%;
	}
}


#goodat ul li p{
	padding: 1em 0.1em;
}

#features h2{

}

@media(max-width:992px) {
	#features h2{
		margin-bottom: 50px;
	}
}

#features h2 span{
	font-size: 70%;
	display: inline-block;
	border-bottom: 2px solid var(--main-color);
	margin-bottom: 0.5em;
}

@media(max-width:992px) {
	#features h2 span{
		font-size: 60%;
	}
}

.features-box{
	display: flex;
	justify-content: space-between;
	margin-top: 30px;
	margin-bottom: 30px;
}

@media(max-width:992px) {
	.features-box{
		flex-direction: column-reverse;
		margin-bottom: 60px
	}
	
	.features-box:last-of-type{
		margin-bottom: 0;
	}
}

.features-title{
	display: inline-block;
	width: min(280px, 100%);
    transform: translateY(10px);
	margin-right: 0.5em;
}

.features-txt{
	width: 55%;
}

@media(max-width:992px) {
	.features-txt{
		width: 100%;
	}
}

.features-txt h3{
	margin-top: 1em;
}

.features-img{
	width: min(435px, 40%);
}

@media(max-width:992px) {
	.features-img{
		width: 100%;
		margin-bottom: 20px;
	}
}


#examples{
  background-image: 
    linear-gradient(rgba(0, 81, 145, 0.6), rgba(12, 162, 253, 0.6)), 
    url('../images/examples-bg2.jpg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.examples-box{
	background-color: rgba(255,255,255,0.9);
	border-radius: 10px;
	border: 4px solid var(--main-color);
	padding: 30px 60px;
	margin: 30px 0;
}

@media(max-width:992px) {
	.examples-box{
		padding: 20px 10px 30px;
	}
}

.examples-box ul{
	margin-left: 30px;
	margin-bottom: 20px;
}

.examples-box ul li{
	margin-bottom: 5px;
	font-size: 16px;
	font-weight: bold;
}

.examples-storybox{
	display: flex;
	justify-content: space-between;
	margin-bottom: 30px;
}

.examples-storybox h3{
	border-bottom: 1px solid #666666;
	padding-bottom: 1em;
	margin-top: 20px;
}

@media(max-width:992px) {
	.examples-storybox h3{
		text-align: center;
	}
}

.examples-storybox p{
	margin-top: 1em;
	line-height: 1.5;
}

.examples-storytxt{
	width: 100%;
}

.examples-img{
	width: min(100px, 100%);
}

@media(max-width:992px) {
	.examples-img{
		width: min(60px, 100%);
	}
}

.examples-box h4{
	background-color: #ffe000;
	display: inline-block;
	border-radius: 50px;
	padding: 1em 2em;
	position: relative;
}

@media(max-width:992px) {
	.examples-box h4{
		left: 50%;
		transform: translateX(-50%);
	}
}

.examples-box h4 + p{
	line-height: 1.7;
}

.examples-box h4 + p span{
	background:linear-gradient(transparent 60%, #ffe000 60%);
}

#factory{
	background-color: #ebf7fe;
}

#points{

}

.points-box{
	display: flex;
	justify-content: space-between;
}

@media(max-width:768px) {
	.points-box{
		flex-direction: column;
	}
}

.points-box > div{
	width: 30%;
}

@media(max-width:1200px) {
	
.points-box > div{
	width: 32%;
}
	
}

@media(max-width:768px) {
	
.points-box > div{
	width: 80%;
	margin-right: auto;
	margin-left: auto;
}
	
.points-box > div + div{
	margin-top: 50px;
}
	
}

@media(max-width:568px) {
	
.points-box > div{
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}
	
}

.points-box h3{
	margin: 5px 0 5px;
}

.check-img{
	margin-bottom: 20px;
}

@media(max-width:768px) {
	.check-img{
		width: 100%;
	}
}

#entry{
	background-color: #ebf7fe;
}

.goPageTop {
    color: #FFF;
    background: #444444;
    font-size: 1.5em;
    line-height: 0.5;
    padding: 10px;
    border-radius: 50%;
    position: fixed;
    right: 5px;
    bottom: 5px;
    z-index: 100000;
	text-decoration: none;
}

@media(max-width:992px) {
	.goPageTop {
		font-size: 1.5em;
		padding: 10px;
		border-radius: 50%;
		right: 5px;
		bottom: 70px;
	}
}

.mt50 {
	margin-top: 50px;
}

.mt70 {
	margin-top: 70px;
}

@media screen and (max-width:1400px) {

.mt50 {
	margin-top: 35px;
}
	
.mt70 {
	margin-top: 50px;
}
	
}

@media screen and (max-width:992px) {

.mt50 {
	margin-top: 25px;
}
	
.mt70 {
	margin-top: 35px;
}
	
}

/*表組み*/

.table01 {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}

h2 + .table01{
	margin-top: 40px;
}

.table01 table {
	width: 100%;
	margin-bottom: 0px;
	border-collapse: collapse; /* 枠線(ボーダー)を重ねて表示 */
}

.table01 table th{
	width: 20%;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.7;
	padding-top: 25px;
	padding-right: 40px;
	padding-bottom: 25px;
	padding-left: 40px;
	text-align: left;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #5a5a5a;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #5a5a5a;
	background-color: #c1f1f3;
}

.table01 table th.th-toi2{
	width: 25%;
	padding-right: 20px;
	padding-left: 20px;
	background-color: #fff;
}

.table01 table td{
	width: 80%;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.7;
	text-align: left;
	padding-top: 25px;
	padding-right: 40px;
	padding-bottom: 25px;
	padding-left: 40px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #5a5a5a;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #5a5a5a;
}

.table01 table td span{
	font-size: 75%;
}

@media(max-width:1200px) {
	
.table01 table th{
	width: 25%;
	font-size: 16px;
	padding-top: 20px;
	padding-right: 30px;
	padding-bottom: 20px;
	padding-left: 30px;

}

.table01 table th.th-toi2{
	width: 25%;
	padding-right: 20px;
	padding-left: 20px;
}

.table01 table td{
	width: 75%;
	font-size: 16px;
	padding-top: 20px;
	padding-right: 30px;
	padding-bottom: 20px;
	padding-left: 30px;
}
	
}

@media(max-width:992px) {
	
.table01 table th{
	width: 100%;
	display: block;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	border-bottom-width: 0px;
	border-bottom-style: none;
	border-top-width: 0px;
	border-top-style: none;
}

.table01 table th.th-toi2{
	width: 100%;
	display: block;
	padding-right: 10px;
	padding-left: 10px;
	background-color: #c1f1f3;
}

.table01 table td{
	width: 100%;
	display: block;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	border-bottom-width: 0px;
	border-bottom-style: none;
	border-top-width: 0px;
	border-top-style: none;
}

}

.table-toi {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}

.table-toi table {
	width: 100%;
	margin-bottom: 0px;
	border-collapse: collapse; /* 枠線(ボーダー)を重ねて表示 */
}

.table-toi table th{
	width: 25%;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.7;
	padding-top: 25px;
	padding-right: 40px;
	padding-bottom: 25px;
	padding-left: 40px;
	text-align: left;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #5a5a5a;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #5a5a5a;
	background-color: #c1f1f3;
}

.table-toi table th span{
	font-size: 12px;
	margin-left: 10px;
	background-color: #fff;
	padding: 5px 7px;
}

.table-toi table td{
	width: 75%;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.7;
	text-align: left;
	padding-top: 25px;
	padding-right: 40px;
	padding-bottom: 25px;
	padding-left: 40px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #5a5a5a;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #5a5a5a;
}

@media screen and (max-width:1200px) {

.table-toi table th{
	width: 25%;
	font-size: 16px;
	padding-top: 20px;
	padding-right: 30px;
	padding-bottom: 20px;
	padding-left: 30px;
}
	
.table-toi table th span{
	font-size: 12px;
	margin-left: 7px;
	padding: 3px 5px;
}
	
.table-toi table td{
	width: 75%;
	font-size: 16px;
	padding-top: 20px;
	padding-right: 30px;
	padding-bottom: 20px;
	padding-left: 30px;
}
	
}

/* タブレットサイズから下 */
@media screen and (max-width:992px) {

.table-toi table th{
	width: 100%;
	display: block;
	font-size: 16px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	border-bottom-width: 0px;
	border-bottom-style: none;
	border-top-width: 0px;
	border-top-style: none;
}
	
.table-toi table th span{
	font-size: 12px;
	margin-left: 7px;
	padding: 2px 3px 3px;
}
	
.table-toi table td{
	width: 100%;
	display: block;
	font-size: 16px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	border-bottom-width: 0px;
	border-bottom-style: none;
	border-top-width: 0px;
	border-top-style: none;
}

}




.button-wrapper{
	text-align: center;
	margin-top: 20px;
}

.table01 + p{
	margin-top: 20px;
}

p + .button-wrapper,
.table01 + .button-wrapper{
	margin-top: 70px;
}

.button-wrapper a + button{
	margin-left: 20px;
}

@media(max-width:992px) {
	
.button-wrapper a{

}
	
.button-wrapper button{

}
	
.button-wrapper a + button{
	display: block;
	width: auto;
	margin-right: auto;
	margin-left: auto;
	margin-top: 20px;
}
	
}

/*工場見学*/

.phone_number{
	padding: 10px;
	font-size: 30px;
	font-weight: 700;
	background-color: #fff;
	display: inline-block;
	width: min(450px, 100%);
	border-radius: 10px;
	margin: 15px 0;
}

@media(max-width:992px) {
	.phone_number{
		font-size: 25px;
	}
}

.phone_number span{
	font-size: 50%;
}

.copyright{
	color: #fff;
	background-color: #669ca2;
	text-align: center;
	font-size: 12px;
	padding: 2em 0;
}

.copyright p {

}

@media(max-width:992px) {
	
.copyright p {
	font-size: 14px;
}
	
}

.reception_hours{
	text-align: center;
	
}

/*本体サイトからの引用*/

.inner02{
	width: 1300px;
	margin-right: auto;
	margin-left: auto;
}

.inner04{
	width: 1100px;
	margin-right: auto;
	margin-left: auto;
}

@media(max-width:1400px) {

.inner02{
	width: 100%;
	padding: 0 50px;
}

}

@media(max-width:1200px) {
	
.inner04{
	width: 100%;
	padding: 0 50px;
}
	
}

/* タブレットサイズから下 */
@media(max-width:992px) {

.inner02{
	width: 100%;
	padding: 0 20px;
}
	
.inner04{
	width: 100%;
	padding: 0 20px;
}
	
}

/*スクロールアニメ*/

.scroll01 {
	width: 100%;
}

.scroll01 img {
	width: 800px;
}

@media(max-width:1200px) {
	
.scroll01 img {
	width: 700px;
}
	
}

@media(max-width:992px) {
	
.scroll01 img {
	width: 500px;
}
	
}