@charset "utf-8";
/*固定ページ共通指定*/
.page{
	padding: 0 0 240px;
	position: relative;
}
.deco{
	display: block;
	position: absolute;
	bottom: 160px;
    left: 50%;
    transform: translateX(-50%);
}
.deco span{
	display: block;
	transform: rotate(90deg);
}
.deco span::before{
	display: block;
	content: "";
	width: 57px;
	border-top: dashed 1px #000;
	position: absolute;
	top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.deco span::after{
	display: block;
	content: "";
	width: 25px;
	height: 4px;
	background: center / contain no-repeat url("../img/deco.svg");
	position: absolute;
	top: 50%;
    left: 75px;
    transform: translateY(-50%);
}
.pagefv{
	padding: 120px 0 60px;
}
.pagefv h2{
	font-size: 65px;
	line-height: 1.2;
	letter-spacing: 0.123em;
	color: var(--main-color);
	margin: 0 0 20px;
}
.pan,.pan a{
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.65px;
	color: #444444;
}
.page h3{
	font-size: 35px;
	line-height: 2;
	letter-spacing: 0.229em;
	margin: 0 0 5px;
}
.page h3 + p{
	font-size: 20px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.3em;
	margin: 0 0 58px;
}
@media screen and (max-width: 820px) {
	.pagefv{
		padding: 120px 0 30px;
	}
	.pagefv h2{
		font-size: 35px;
	}
	.page h3{
		font-size: 26px;
	}
	.page h3 + p{
		font-size: 16px;
	}
}
/*==================================================================================================*/
/*-*/
/**/
#company .wrap01 .inner{
	max-width: 1124px;
}
#company .wrap01 img{
	width: 100%;
	margin: 0 0 58px;
}
#company .wrap01 ul li{
	width: 32%;
	max-width: 346px;
}
#company .wrap01 ul li h4{
	font-size: 20px;
	letter-spacing: 0.4em;
	color: var(--main-color);
	margin: 0 0 5px;
}
#company .wrap01 ul li p{
	font-size: 16px;
	font-weight: 400;
	line-height: 2.2;
}
@media screen and (max-width: 820px) {
	#company .wrap01 .inner{
		max-width: 520px;
	}
	#company .wrap01 ul li{
		width: 100%;
		max-width: 100%;
		margin: 0 0 20px;
	}
}
/*==================================================================================================*/
/*-*/
/**/
#company .wrap02 .inner{
	max-width: 1103px;
}
#company .wrap02 h3{
	margin: 0 0 40px;
}
#company .wrap02 ul li{
	width: 50%;
	position: relative;
}
#company .wrap02 ul li div{
	width: 94%;
	max-width: 505px;
	height: 360px;
	align-content: center;
}
#company .wrap02 ul li:nth-child(1) div{
	padding: 0 0 20px;
}
#company .wrap02 ul li:nth-child(2) div{
	padding: 0 0 20px;
	margin: 0 0 0 auto;
}
#company .wrap02 ul li:nth-child(3) div{
	padding: 20px 0 0 0;
}
#company .wrap02 ul li:nth-child(4) div{
	padding: 20px 0 0 0;
	margin: 0 0 0 auto;
}
#company .wrap02 ul li:nth-child(1)::before,
#company .wrap02 ul li:nth-child(3)::before{
	display: block;
	content: "";
	width: 1px;
	height: 302px;
	background: #1E508B;
	position: absolute;
	right: 0;
}
#company .wrap02 ul li:nth-child(3)::before{
	bottom: 0;
}
#company .wrap02 ul li:nth-child(1)::after,
#company .wrap02 ul li:nth-child(2)::after{
	display: block;
	content: "";
	width: 488px;
	height: 1px;
	background: #1E508B;
	position: absolute;
	bottom: 0;
}
#company .wrap02 ul li:nth-child(2)::after{
	right: 0;
}
#company .wrap02 ul li h4{
	width: fit-content;
	margin: 0 0 50px;
}
#company .wrap02 ul li img{
	width: auto;
	height: 129px;
	position: relative;
	right: 20px;
}
#company .wrap02 ul li p{
	font-size: 15px;
	font-weight: 400;
	line-height: 2;
	letter-spacing: 0.133em;
	color: #717171;
	margin: 15px 0 0;
}
@media screen and (max-width: 820px) {
	#company .wrap02 .inner{
		max-width: 520px;
	}
	#company .wrap02 ul li{
		width: 100%;
		padding: 40px 0;
		border-bottom: solid 1px #000;
	}
	#company .wrap02 ul li div{
		width: 100%;
		max-width: 100%;
		height: auto;
	}
	#company .wrap02 ul li:nth-child(1) div,
	#company .wrap02 ul li:nth-child(2) div,
	#company .wrap02 ul li:nth-child(3) div,
	#company .wrap02 ul li:nth-child(4) div{
		padding: 0;
		margin: 0 auto;
	}
	#company .wrap02 ul li:nth-child(1)::before,
	#company .wrap02 ul li:nth-child(3)::before,
	#company .wrap02 ul li:nth-child(1)::after,
	#company .wrap02 ul li:nth-child(2)::after{
		display: none;
	}
}
/*==================================================================================================*/
/*-*/
#company .wrap03 .inner{
	max-width: 1090px;
}
#company .wrap03 h3{
	width: fit-content;
}
#company .wrap03 h3 + p{
	width: calc( 100% - 270px );
	max-width: 776px;
	font-size: 14px;
	line-height: 24px;
	letter-spacing: 6px;
	margin: 0;
}
#company .wrap03 ul{
	width: 100%;
	position: relative;
	margin: 20px 0 0;
}
#company .wrap03 ul li{
	width: 32%;
	max-width: 339px;
}
#company .wrap03 ul::before{
	display: block;
	content: "※写真＝青島工場";
	font-size: 12px;
	letter-spacing: 2px;
	color: #717171;
	position: absolute;
	bottom: -20px;
	right: 0;
}
@media screen and (max-width: 820px) {
	#company .wrap03 .inner{
		max-width: 520px;
	}
	#company .wrap03 h3 + p{
		width: 100%;
	}
}
@media screen and (max-width: 520px) {
	#company .wrap03 ul li{
		width: 100%;
		max-width: 100%;
		margin: 0 0 20px;
	}
}
/*==================================================================================================*/
/*-*/
#company .wrap04 .inner{
	max-width: 700px;
}
#company .wrap04 h2{
	margin: 0 0 60px;
}
#company .wrap04 h2 img{
	display: block;
	width: 295px;
	margin: 0 auto;
}
#company .wrap04 .box{
	width: 308px;
}
#company .wrap04 dl{
	font-family: var(--sub-font);
	font-size: 16px;
	line-height: 20.4px;
	letter-spacing: 1.14px;
	margin: 0 0 20px;
}
#company .wrap04 dt{
	font-weight: 700;
	margin: 0 0 5px;
}
#company .wrap04 dd span{
	font-size: 11px;
}
#company .wrap04 .box + .flexTop{
	margin: 60px 0 0;
}
iframe{
	width: 90%;
	max-width: 323px;
	height: 142px;
	margin: 15px 0 0;
}
@media screen and (max-width: 820px) {
	#company .wrap04 .inner{
		max-width: 520px;
	}
	#company .wrap04 h2 img{
		width: 180px;
	}
	#company .wrap04 .box{
		width: 100%;
	}
	iframe{
		width: 100%;
		max-width: 100%;
	}
}
/*==================================================================================================*/
/**/
#works .worksList::after{
	display: block;
	content: "";
	width: 23%;
}
#works .worksList li{
	width: 23%;
	margin: 0 0 40px;
}
#works .worksList li .img{
	padding-top: 100%;
}
@media screen and (max-width: 1200px) {
	#works .worksList{
		max-width: 860px;
		margin: 0 auto;
	}
	#works .worksList li{
		width: 32%;
	}
	#works .worksList::after{
		width: 32%;
	}
}
@media screen and (max-width: 820px) {
	#works .worksList li{
		width: 48%;
	}
	#works .worksList::after{
		width: 48%;
	}
}
/*==================================================================================================*/
/**/
#contact .pagefv{
	width: 90%;
	margin: 0 auto 80px;
}
#contact.pagefv h2{
	color: #233AB3;
}
#contact .wrap{
	width: 90%;
	max-width: 1109px;
	border-radius: 5px;
	background: #FFF;
	margin: 0 auto;
}
#contact .wrap .inner{
	max-width: 595px;
	align-content: 0 auto;
}
#contact .wrap01{
	margin: 0 auto 40px;
}
#contact .wrap h2{
	font-size: 26px;
	line-height: 2;
	text-align: center;
}
#contact .wrap h2 + a{
	display: block;
	font-size: 76px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	color: var(--sub-color);
	margin: 0 0 10px;
}
#contact .wrap h2 + a + p{
	font-size: 14px;
	line-height: 1;
	text-align: center;
}
#contact .wrap h2 + p{
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	margin: 0 0 60px;
}
@media screen and (max-width: 820px) {
	#contact .wrap h2 {
    	font-size: 22px;
	}
	#contact .wrap h2 + a {
	    font-size: 48px;
		margin: 0 0 15px;
	}
}
form dl{
    margin: 0 auto 60px;
}
form dl dt{
    font-size: 14px;
    margin: 0 0 10px;
}
form dl dd{
}
form dl dd p{
	display: flex;
	align-items: center;
    width: 100%;
    min-height: 62px;
    font-size: 14px;
    padding: 0 10px;
    border: solid 1px #BDBDBD;
    border-radius: 4px;
}
form dl.textarea dd p{
	padding: 10px;
}
form dl dd p input{
    background: none;
}
button, input, optgroup, select, textarea{
	padding: 0;
}
form dl dt.required::after{
    content: "※必須";
    display: inline-block;
    font-size: 14px;
    color: var(--sub-color);
    margin: 0 0 0 10px;
}
button, html [type="button"], [type="reset"], [type="submit"]{
    color: #FFF !important;
    background: none;
}
form .btn::after{
    display: none;
}
form .btnContact,
.checkform .btnContact{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 90%;
	max-width: 313px;
	height: 57px;
	font-size: 14.46px;
	font-weight: 700;
	letter-spacing: 5.78px;
	color: #FFF;
	border-radius: 30px;
	background: var(--main-color);
	position: relative;
	margin: 60px auto 0;
}
form .btnContact:hover,
.checkform .btnContact:hover,
button:hover, html [type="button"]:hover, [type="reset"]:hover, [type="submit"]:hover{
    cursor: pointer;
}
form .btnContact.red,
.checkform .btnContact.red{
	background: var(--sub-color);
}
.checkform{
    padding: 60px 0;
}
.checkform .btn{
    margin: 60px auto 0;
}
.checkform h2 + P{
    text-align: center;
    margin: 0 0 30px;
}
.error{
    width: 90%;
    max-width: 889px;
    padding: 30px 50px;
    border: solid 1px #000;
    background: #FFF;
    margin: 20px auto 0;
}
@media screen and (max-width: 820px) {
}