@charset "UTF-8";

/* basic settings */
html, body, h1, h2, h3, h4, h5, h6,
a, p, span, em, small, strong, sub, sup,
mark, del, ins, strike, abbr, dfn,
blockquote, q, cite, code, pre,
ol, ul, li, dl, dt, dd,
div, section, article,
header, main, aside, nav, footer,
img, figure, figcaption,
address, time,
audio, video,
canvas, iframe,
details, summary,
fieldset, form, label, legend,
table, caption,tbody, tfoot, thead,tr, th, td { margin: 0; padding: 0; border: 0; }

html { font-size: 62.5%; width: 100%; min-width: 320px; min-height:100%; -webkit-text-size-adjust:100%;}
body { font-size: 16px; line-height: 1.5; width: 100%; min-height:100%; min-width: 320px; overflow-x: hidden; color:#000; background:#FFF; font-family:'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, sans-serif;}
* { box-sizing: border-box; font-family: inherit; font-size: inherit; line-height: inherit; }
*:before, *:after { box-sizing: inherit; }
article, aside, footer, header, nav, section, main { display: block;}
a, a:visited, a img { color: inherit; transition: all .3s;}
table { border-collapse: collapse; border-spacing: 0; }
ol, ul { list-style: none; }
img, video { max-width: 100%; }
img { border-style: none; vertical-align: middle;}
blockquote, q { quotes: none; }
	blockquote:after, blockquote:before, q:after, q:before { content: ""; content: none; }
[hidden] { display: none !important; }
[disabled] { cursor: not-allowed; }
:focus:not(:focus-visible) { outline: none; }

/* local class */
.red { color: #F00;}
.blue { color: #165EA2;}
.green { color:#060;}
.tar { text-align:right;}
.tal { text-align:left;}
.tac { text-align:center;}
.f8 {font-size:8px;}
.f9 {font-size:9px;}
.f10 {font-size:1px;}
.f11 {font-size:11px;}
.f12 {font-size:12px;}
.f13 {font-size:13px;}
.f14 {font-size:14px;}
.f15 {font-size:15px;}
.f16 {font-size:16px;}
.f18 {font-size:18px;}
.f20 {font-size:20px;}
.f22 {font-size:22px;}
.f24 {font-size:24px;}
.f26 {font-size:26px;}
.f28 {font-size:28px;}
.f32 {font-size:32px;}
.f36 {font-size:36px;}
.f42 {font-size:42px;}
.fb { font-weight: bold;}
.fbn { font-weight: normal;}
.fg {font-family: Arial, Helvetica, "sans-serif";}
.hide {display: none;}

/* layout settings */
#wrapper { width:100%; z-index: 0; transition: transform 0.5s ease-in-out; position: relative;}

header { width:100%; text-align: center; position: fixed; top: 0; left: 0; background: rgba(0,0,0,.5); z-index: 1;}
	nav { display:flex; justify-content: space-between; align-items: flex-end; width:100%; padding:2vw 0 1vw 0; margin: 0 auto;}
	header h1 { width:49vw; padding:0 2vw;}
		header h1 img { width:45vw;}
	header ul { display:flex; width: 36vw; padding:0 2vw 0 0; justify-content: space-between; }
			header ul li:nth-of-type(1) a img { width:12vw;}
			header ul li:nth-of-type(2) a img { width:17vw;}


main { display: block; width: 100%; text-align: center; position: relative; z-index: 0;}

.hometop { display: flex; justify-content: space-between; align-items:flex-end; border-bottom:#2E4A6A solid 8px; width: 100%; padding:22vw 0 0 0; background: url("../images/hometop-bg.jpg") center center / cover; }
	.hometop h2 img { width: 35vw; padding: 2vw;}
	.hometop p img { width: 17vw; padding: 2vw;}


.a1 { width: 100%; overflow: hidden; padding: 2vw 0; position: relative; background:#F3EFE9;}
	.a1 h2 { text-align: center; padding: 2vw 0;}
		.a1 h2 img { width: 20vw; }
	.a1 h3 { display: block; text-align: right; overflow: hidden;position: absolute; bottom: 1.5vw; right: 0;}
		.a1 h3 img { width: 76vw;}
	.a1 p { text-align: right; padding: 2vw 0;}
		.a1 p img { width: 85vw;}

.a2 { width: 100%; overflow: hidden; padding:0 0 8.3vw 0; position: relative; background:#FFF;}
	.a2 h2 { display: block; width: 55vw; height: 49vw; margin:0 0 0 auto; background:#E4DCDB; padding: 2vw 4vw; text-align: left;}
		.a2-t1 { width: 36vw; padding: 1.5vw 0;}
		.a2-t2 { width: 38vw; padding: 1.5vw 0;}
	.a2 h3 { display: block; width: 45vw; height: 45vw;  margin:0 0 0 55vw; background:#F2EEEE; padding:17vw 0 2vw 10vw; text-align: left;}
		.a2-t3 { width: 12vw; padding: 1.5vw 0;}
	.a2-p1 { position: absolute; left: 0; top: 0;}
		.a2-p1 img { width: 45vw;}
	.a2-p2 { position: absolute; left: 55vw; top:28vw;}
		.a2-p2 img { width: 31vw;}
	.a2-p3 { position: absolute; left: 14vw; top:63.9vw;}
		.a2-p3 img { width: 41vw;}

.a3 { width: 100%; overflow: hidden; padding:4vw 0 0 0; position: relative; background:#FFF;}
	.a3inner {display: block; width: 100%; height: 43vw; padding: 4vw 0; background:url("../images/a3-bg.jpg") center / cover; }
	.a3 h2 {display: block; width:60vw; height: 34vw; background:#FBF9F9; padding: 2vw 14vw 2vw 4vw; margin-left: 4vw; text-align: center;}
		.a3-t1 { width: 42vw; padding: 1.5vw 0;}
		.a3-t2 { width: 38vw; padding: 1.5vw 0;}
	.a3-p1 { position: absolute; left: 55vw; top:0;}
		.a3-p1 img { width: 35vw;}

.a4 { width: 100%; overflow: hidden; padding:0; position: relative; background:#FFF;}
	.a4inner {display: flex; align-items: center; width: 80vw; height: 45vw; padding:0 0 0 34vw; margin: 0 0 0 auto; background:#D6EDEF; }
	.a4 h2 {display: block; width:36vw; background:#F9F7F7; padding: 3vw; margin-left: 4vw; text-align: center;}
		.a4-t1 { width: 30vw; padding: 1.5vw 0;}
		.a4-t2 { width: 26vw; padding: 1.5vw 0;}
	.a4-p1 { position: absolute; left: 12vw; top:3.5vw;}
		.a4-p1 img { width: 42vw;}

.a5 { width: 100%; height: 53vw; overflow: hidden; padding:0; position: relative; background:#FFF;}
	.a5 h2 {display: block; width:82vw; background:#F9F7F7;text-align: center;}
		.a5-t1 { width: 36vw; padding: 1.5vw 0; top: 4vw; left: 42vw; position: absolute; display: block;}
	.a5 h3 {display: block; width:60vw; background:#F3EFE9; text-align: center; padding: 2vw 0;}
		.a5-t2 { width: 49vw; padding: 1.5vw 0;}
	.a5-p2 { position: absolute; left: 60vw; top:18vw;}
		.a5-p2 img { width: 40vw;}

.a6 { width: 100%; overflow: hidden; padding:0 7vw; position: relative; background:#FFF; text-align: left;}
	.a6-t1 { padding: 0 0 2vw 0; width: 44vw;}


.a7 { width: 100%; overflow: hidden; padding:0 0; position: relative; background:#FFF; text-align: left;}
	.a7 h2 { padding: 0 0 2vw 0; width: 32vw; position: absolute; top: 17.8vw; left: 46vw;}
		.a7 h2 img { width: 100%; height: auto; padding-bottom:1.5vw;}
	.a7 p img { width: 100%; height: auto;}

.a8 { width: 100%; overflow: hidden; height: 130vw; padding:7vw 7vw 0 7vw; position: relative; background:url("../images/a8-bg.jpg") bottom / contain no-repeat; text-align: left;}
	.a8::before { display: block; content:""; width:84vw; height: 22vw; background:#F9F6F2; position: absolute; z-index: -1; right: 0; top: 0;}
	.a8::after { display: block; content:""; width:32vw; height: 35vw; background:url("../images/a8-inner-bg.jpg") center / cover; position: absolute; z-index: -1; right: 15vw; top:44vw;}
	.a8a { display: block; width:100%; height: 45vw; padding: 7vw 0 0 0; overflow: visible; background:#DDE1E0;position: relative;}
		.a8a h2 { display: flex; width: 35vw; justify-content: space-between; align-items: flex-start; position: absolute; top: 7vw; left: 7vw;}
			.a8a-h2p { width:20vw; height: auto;}
			.a8a-h2t { width:7vw; height: auto;}
		.a8a p { display: block; width: 40vw; text-align: left; position: absolute;right: 0; bottom: 0;}
			.a8a-pt { width:32vw; height: auto;}
			.a8a-pp { width: 40vw; height: auto;}
	.a8b { display: block; width:40vw; position: absolute; top:70vw; right: 7vw; }
		.a8b-pt { width:3.5vw; height: auto; position: absolute; right: 1vw; top: 4vw;}
		.a8b-pp { width:40vw; height: auto;}
	.a8c { display: block; width:43vw; position: absolute; bottom:0; left: 7vw; }
		.a8c-pp { width: 43vw; height: auto;}

.a9 { width: 100%; overflow: hidden; padding:0 0 0 7vw; position: relative; background:#FFF; text-align: left;}
	.a9-inner { display:block; width: 93vw; overflow: hidden; background:#ACDADE; position: relative;}
	.a9 h2 { display: block; position: absolute; top: 7vw; left: 5vw;}
		.a9-t1 { width: 44vw; height: auto;}
	.a9 h3 {display: block; position: absolute; top: 24vw; left: 6vw;}
		.a9-t2 { width: 30vw; height: auto;}
	.a9 p {display: block; width:50vw; margin: 0 0 0 auto;}
		.a9 p img { width: 100%; height: auto;}

.a10 { width: 100%; overflow: hidden; padding:0 7vw 7vw 7vw; position: relative; background:#FFF; text-align: left;}
	.a10-inner { display:flex; width: 86vw; overflow: visible; height: 50vw; background:#E8E6E6; position: relative;}
		.a10 h2 { width: 43vw; order: +1; text-align: center; padding: 4vw 0 0 0;}
			.a10-t1 {width: 34vw; height: auto;}
			.a10-p1 {width: 27vw; height: auto; position: absolute; right: 0; bottom: -7vw;}
		.a10 p { width: 43vw;}
			.a10-p2 { width: 43vw; height: auto;}

.a11 { width: 100%; overflow: hidden; padding:4vw 0; position: relative; background:#FFF; text-align: left;}
	.a11 h2 { padding: 0 0 2vw 0; width: 100%;}
		.a11-p1 { width: 100%; height: auto;}
		.a11-t1 { width: 36vw; height: auto; position: absolute; left: 10vw; top: 8vw;}
	.a11 p { padding: 1vw; text-align:center; }
		.a11 p img { width: 68vw; height: auto;}

.a12 { width: 100%; height: 146vw; overflow: hidden; padding:0 0; position: relative; text-align: left;}
	.a12::before { display: block; content:""; width:50vw; height: 50vw; background:#F5F5F3; position: absolute; z-index: -1; left:32vw; top: 43.5vw;}
	.a12::after { display: block; content:""; width:75vw; height: 40vw; background:#F2EEEE; position: absolute; z-index: -1; right:0; bottom: 0;}
	.a12a { position: absolute; left: 7vw; width: 39vw;}
		.a12a h2 { text-align: center; padding: 1.5vw 0;}
			.a12-t1 {width: 32vw; height: auto;}
		.a12a p { text-align: center; padding: 1.5vw 0;}
			.a12-p1 {width: 100%; height: auto;}
	.a12b { position: absolute; left: 46vw; width: 53vw;}
		.a12-p2 {width: 37vw; height: auto;}
		.a12b h2 { padding: 4vw;}
			.a12-t2a {width: 49vw; height: auto; margin-bottom: 2vw;}
			.a12-t2b {width: 35vw; height: auto;}
		.a12b h3 { display: flex;justify-content: flex-end; align-items: flex-end; width: 49vw; }
			.a12-t3 {width: 10vw; height: auto; margin-right: 1vw;}
			.a12-p3 {width: 30vw; height: auto; padding-bottom: 4vw;}
	.a12c {position: absolute; left: 0; top:80vw; width: 95vw; z-index: 0;}
		.a12c h2 { position: absolute; width: 62vw; left:7vw; top:15vw; z-index: 1;}
			.a12-t4 { width: 100%; height: auto;}
		.a12c h3 {position: absolute; width: 26vw; left:64vw; top:47vw; z-index: 1;}
			.a12-t5 { width: 100%; height: auto;}
		.a12c p { position: relative; z-index:0;}
			.a12-p4 {width: 67vw; height: auto; position: absolute; left: 0; top:8vw;}
			.a12-p5 {width: 36vw; height: auto; position: absolute; right: 0; top: 0;}

.a13 { width: 100%; height: 120vw; overflow: hidden; padding:0 0; position: relative; text-align: left;}
	.a13::before { display: block; content:""; width:73vw; height: 69vw; background:#FFF5EC; position: absolute; z-index: -1; right:0; top:7vw;}
	.a13::after { display: block; content:""; width:67vw; height: 37vw; background:#E4DCDB; position: absolute; z-index: -1; left:0; bottom: 0;}
	.a13-p1 { width:42vw; height: auto; position: absolute; left: 0; top:0;}
	.a13-p2 { width:47vw; height: auto; position: absolute; right: 0; top:47vw;}
	.a13-t1 { width:47vw; height: auto; position: absolute; left: 47vw; top:9vw;}
		.a13-t1 img { padding: 1.5vw 0; width: 100%; height: auto;}
	.a13-t2 { width:38vw; height: auto; position: absolute; left: 12vw; top:86vw; text-align: center;}
		.a13-t2a { padding: 1.5vw 0; width: 28vw; height: auto;}
		.a13-t2b { padding: 1.5vw 0; width: 38vw; height: auto;}

.a14 { width: 100%; height:90vw; overflow: hidden; padding:0 0; position: relative; text-align: left;}
	.a14 h2 {width:14vw; position: absolute; left: 70vw; top:3vw;}
		.a14-t1 {width:14vw; height: auto;}
	.a14inner { width:60vw; position: absolute; left: 7vw; top:0;}
		.a14inner h3 { display: block; width:60vw; position: relative; text-align: left;}
			.a14-p1 { width: 100%; height: auto;} 
			.a14-p1t1 { width: 6.3vw; height: auto; position: absolute; right: 2vw; top: 4vw;}
		.a14inner p { padding: 1.5vw 0; text-align: center;}
			.a14-p1t2 { width: 49vw; height: auto;}

.animate__delay-05s { animation-delay: calc(1s * 0.5);}
.animate__delay-15s { animation-delay: calc(1s * 1.5);}

footer { width: 100%; background:#333 url("../images/footer-bg.jpg") top center / cover; padding: 2vw 0 5vw 0; position: relative; z-index: 0; color:#FFF;}
	.fmessage { padding: 2vw 0; height: 40vw; text-align: center;}
		.fmessage img { width: 38vw;}
	.fbox { width: 70vw; margin: 0 auto; display: flex; justify-content: space-between; padding: 1vw 0;}
		.finfo { width:34vw;}
			.flogo { padding: 1vw 0;}
				.flogo img {width: 17.5vw;}
			.finfo ul { columns: 2; padding: 1vw 0;}
				.finfo li  { padding: .2vw 0; font-size: .8vw;}
					.finfo li a { text-decoration: none;}
						.finfo li a:hover { text-decoration: underline;}
			.fvideo { padding: 1vw 0;}
				.fvideo img {width: 24vw;}
		.fnav { width: 35vw;}
			.fcontact { padding: 1vw 0;}
				.fcontact img {width: 18vw;}
			.fnav ul { padding:1vw 2vw; display: flex; flex-wrap: wrap; justify-content: space-between; border: 1px solid #FFF;}
				.fnav li { width: 48%; padding: 1vw 0; font-size: .9vw; font-weight: bold;}
					.fnav li a { display: block; width: 100%; border-left: .5vw solid #15B7DC; padding:.2vw .5vw; text-decoration: none;}
					.fnav li a::before { font-size: .6vw; font-weight: normal; display: block;}
						.fnav1 a::before { content: "HOME";}
						.fnav2 a::before { content: "ABOUT US";}
						.fnav3 a::before { content: "FEATURE";}
						.fnav4 a::before { content: "PRODUCTS";}
						.fnav5 a::before { content: "RECRUIT";}
			.ftel { padding: 1vw 0; text-align: right;}
				.ftel img {width: 18vw;}
	.copyright { width: 100%; text-align: center; position: absolute; bottom: 0; left: 0; background: rgba(0,0,0,.5); z-index: 1; padding: 1vw 0;}
		.copyright img { width: 32vw;}


.pagetop { display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; position: fixed; right:2vw; bottom:2vw; text-decoration: none; text-align: center; font-family: Arial, Helvetica, "sans-serif"; z-index: 1; background:#015594; border-radius: 10px; color:#FFF; font-size: 28px; border: 2px solid #015594;}
	.pagetop::before { content: "▲";}
	.pagetop:hover { background: #FFF; color:#015594;}

.inner { margin: 0 auto;}

/* 320 + settings */
@media all and (min-width:320px){
	.inner { padding-top: 20px; padding-bottom: 20px;}
}

/* 640 + settings */
@media all and (min-width:640px){
	.inner { padding-top:30px; padding-bottom: 30px;}
}

/* 960- settings */
@media all and (max-width:960px){
	.onlypc {display: none;}
}


/* 960px+ settings */
@media all and (min-width:960px) {
	.onlysp {display: none;}
}

/* 1200 + settings */
@media all and (min-width:1200px){
	
}


@media (orientation: landscape) {
}

@media (orientation: portrait) {
}

/* print only settings */
@media print{
	header { position: absolute; }
	.pagetop {display:none; visibility: hidden;}
}