@charset "euc-jp";
/* CSS Document */
/* LP */

/* common
---------------------------------------------------------------------- */
body { font-size: 16px; line-height: 1.8; -webkit-text-size-adjust: 100%; font-family: "Noto Sans JP", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 游ゴシック体, "Yu Gothic", YuGothic, メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
body { background-color: #101c39; color: #fff; }
a:hover { text-decoration: none; }
a:hover img { opacity: 0.8; }

/* header
---------------------------------------------------------------------- */
header { max-width: 1000px; margin: 0 auto; padding: 0 0.5rem; }
header h1 { font-size: 0.5rem; margin: 0.3rem 0; font-weight: normal; text-align: right; }header .pan { font-size: 0.5rem; margin: 0.5rem 0; }

/* main
---------------------------------------------------------------------- */
main { width: 100%; text-align: center; }
main img { width: 100%; display: block; }

#guidus_title h3, #guidus_pe9 h2, #guidus_pe9 #item_feature h3, #guidus_pe9 #item_spec h3 {
	font-family: urw-din, sans-serif;
	font-weight: 700;
	font-style: normal;
	color: #fff;
	letter-spacing: 0.1rem;
}

/* title */
#guidus_title {
	background-image: url(../images/top_main.png);
	background-repeat: no-repeat;
	background-size: 210%;
	background-position: center top;
}
#guidus_title h2 { width: 50%; margin: 0 auto; padding: 10% 0 50%; }
#guidus_title h3 { padding: 0 2%; font-size: 180%; }
#guidus_title h4 { padding: 0 2% 6%; font-size: 100%; }
#guidus_title div { width: 55%; margin: 0 auto; padding-bottom: 6%; }
#guidus_title p { padding: 0 2% 4%; font-size: 70%; }
#guidus_title p:last-of-type { padding-bottom: 10%; }

/* technology */
#guidus_tech { background-color: #000; }
#guidus_tech h2, #guidus_pe9 h2 { position: relative; padding: 15% 0 10%; font-family: 'Noto Sans JP', sans-serif; font-size: 240%; line-height: 2.5rem; }
#guidus_tech h2:before, #guidus_pe9 h2:before {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	display: inline-block;
	width: 60px;
	height: 2px;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	background-color: #fff;
}
#guidus_tech span, #guidus_pe9 h2 span { display: block; font-size: 30%; }
#guidus_tech span.guifont { display: inline; font-size: 100%; font-family: urw-din, sans-serif; font-weight: 700; font-style: normal; }
#guidus_tech img { width: 70%; margin: 0 auto 5%; }

#guidus_tech #tech_csd, #guidus_tech #tech_advanced { width: 96%; margin: 0 auto; text-align: left; }
#guidus_tech #tech_csd { margin-bottom: 15%; border-top: solid 1px #fff; padding-top: 10%; }
#guidus_tech #tech_advanced { padding-bottom: 15%; }
#guidus_tech #tech_advanced .tech_intro { text-align: center; }
#guidus_tech #tech_advanced h3 { margin-bottom: 3%; padding: 2% 0; font-size: 150%; text-align: center; line-height: 1.5rem; }
#guidus_tech #tech_advanced span { font-size: 60%; }
#guidus_tech #tech_advanced .tech_title01 { background-color: #e61f19; }
#guidus_tech #tech_advanced .tech_title02 { background-color: #54c2f0; }
#guidus_tech #tech_advanced p { margin-bottom: 5%; }

/* guidus pe9 */
#guidus_pe9 { width: 96%; margin: 0 auto; }

#guidus_pe9 #item_feature { margin-bottom: 15%; text-align: left; }
#guidus_pe9 #item_feature h3, #guidus_pe9 #item_spec h3 { margin-bottom: 10%; border-bottom: 1px solid #fff; font-size: 180%; text-align: left; }
#guidus_pe9 #item_feature h3 span, #guidus_pe9 #item_spec h3 span { margin-left: 3%; font-size: 50%; font-family: 'Noto Sans JP', sans-serif; }
#guidus_pe9 #item_feature h4 { margin-bottom: 8%; font-size: 150%; font-weight: bold; line-height: 2rem; }
#guidus_pe9 #item_feature h5 { margin-bottom: 2%; border-left: solid 10px #e61f19; padding-left: 12px; font-size: 110%; font-weight: bold; }
#guidus_pe9 #item_feature section { margin-bottom: 8%; }

#guidus_pe9 #item_spec .item_photo { margin: 0 auto 10%; }
#guidus_pe9 #item_spec>section { margin-bottom: 15%; }
#guidus_pe9 #item_spec h4 { font-size: 110%; text-align: left; padding-left: 7%; }
#guidus_pe9 #item_spec h4 { background: url(../images/color_icon01.png) no-repeat left center; background-size: 20px; }
#guidus_pe9 #item_spec h4.lg { background-image: url(../images/color_icon02.png); }
#guidus_pe9 #item_spec h4.pr { background-image: url(../images/color_icon03.png); }
#guidus_pe9 #item_spec section p { text-align: right; font-size: 80%; }
#guidus_pe9 #item_spec table { width: 100%; border-collapse: collapse; text-align: center; font-size: 70%; }
#guidus_pe9 #item_spec th, #guidus_pe9 #item_spec td { border: 1px solid #ccc; padding: 10px 10px; box-sizing: border-box; }
#guidus_pe9 #item_spec th { background-color: #333; color: #fff; }

/* effects */
a.guidus_tra { transition: all 0.3s ease; }
a.guidus_tra:hover { border-color: #ccc !important; background-color: #ccc; color: #000 !important; }

.guidus_scroll { transition: all 2s ease; opacity: 0; transform: translateY(30px); }
.guidus_scroll.animated { opacity: 1; transform: translateY(0); }

#guidus_title, #guidus_title h2, #guidus_title h3, #guidus_title h4, #guidus_title p {
	animation-name: fade-in1;
	animation-duration: 2s;
	animation-timing-function: ease;
	animation-delay: 1s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: backwards;
}
#guidus_title {
	animation-duration: 2s;
	animation-delay: 0.5s;
}
@keyframes fade-in1 {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* clearfix */
.clearfix:after { content: " "; display: block; clear: both; }

/* footer
---------------------------------------------------------------------- */
footer { padding: 30px 0; background-color: #003559; text-align: center; }
footer img { margin: 0 auto; }
footer ul { display: table; margin: 1rem auto 0; }
footer li { display: table-cell; vertical-align: top; padding-right: 10px; }
footer li:last-of-type { padding-right: 0; }
footer li img { width: 40px; }

@media screen and (min-width: 400px) {
	#guidus_title p { font-size: 80%; }
}
@media screen and (min-width: 480px) {
	#guidus_title h3 { font-size: 240%; }
	#guidus_title h4 { font-size: 140%; }
	#guidus_title p { font-size: 100%; }
}
@media screen and (min-width: 768px) {
	#guidus_pe9 #item_spec table { font-size: 100%; }
}
@media screen and (min-width: 880px) {
	#guidus_title { background-size: auto; }
	#guidus_title h2 { width: 320px; margin: 0 auto; padding: 80px 0 430px; }
	#guidus_title h3, #guidus_title h4, #guidus_title div { width: 700px; margin: 0 auto; }
	#guidus_title h3 { padding-bottom: 0px; }
	#guidus_title h4 { padding-bottom: 40px; }
	#guidus_title div { padding-bottom: 40px; }
	#guidus_title p { padding-bottom: 10px; }
	#guidus_title p:last-of-type { padding-bottom: 80px; }
	#guidus_tech h2, #guidus_pe9 h2 { padding: 80px 0 40px; font-size: 300%; }
	#guidus_tech #tech_csd, #guidus_tech #tech_advanced, #guidus_pe9 { width: 1000px; }

#guidus_tech img { width: 100%; margin: 0; }

#guidus_tech #tech_csd { margin-bottom: 100px; padding-top: 50px; }
#guidus_tech #tech_advanced { padding-bottom: 50px; }
#guidus_tech #tech_advanced h3 { margin-bottom: 20px; padding: 10px 0; }
#guidus_tech #tech_advanced p { margin-bottom: 50px; }

#guidus_tech #tech_csd div:first-of-type { float: right; width: 320px; }
#guidus_tech #tech_csd div:last-of-type { float: left; width: 630px; }
#guidus_tech #tech_advanced div:first-of-type { float: left; width: 460px; }
#guidus_tech #tech_advanced div:last-of-type { float: right; width: 510px; }


	#guidus_pe9 #item_feature { margin-bottom: 60px; }
	#guidus_pe9 #item_feature h3, #guidus_pe9 #item_spec h3 { margin-bottom: 30px; font-size: 240%; }
	#guidus_pe9 #item_feature h3 span, #guidus_pe9 #item_spec h3 span { margin-left: 20px; }
	#guidus_pe9 #item_feature h4 { margin-bottom: 40px; font-size: 180%; line-height: 2.5rem; }
	#guidus_pe9 #item_feature h5 { margin-bottom: 10px; font-size: 120%; }
	#guidus_pe9 #item_feature section { margin-bottom: 30px; }
	#guidus_pe9 #item_spec .item_photo {  margin: 0 auto 30px; }
	#guidus_pe9 #item_spec .item_photo img { width: 100%; height: 480px; object-fit: cover; }
	#guidus_pe9 #item_spec>section { margin-bottom: 30px; }
	#guidus_pe9 #item_spec h4 { float: left; width: 260px; padding-left: 25px; }
	#guidus_pe9 #item_spec div { float: right; width: 715px; }
	#guidus_pe9 #item_spec section p { font-size: 100%; }
}
@media screen and (min-width: 1020px) {
}