@charset "utf-8";

/* =====================
key visual
===================== */
#top-keyvisual{ position: relative; max-height: 300px; background:url(../img/key-visual.jpg) no-repeat 50% 70%; background-size:100% auto; background-color: #036; text-align: center; }
#top-keyvisual:before {
  content:"";
  display: block;
  padding-top:43%;/* 画像横÷縦の％ */
}

#top-keyvisual .ttl-box { position: absolute; margin: 0 auto; width: 100%; top: 20%; color: #fff; text-shadow: #030 2px 2px 5px; font-weight: bold; }
#top-keyvisual .ttl-vmiddle-box { position: absolute; margin: 0 auto; width: 100%; height: 100%; top: 0%; color: #fff; text-shadow: #026 2px 2px 5px; font-weight: bold; }
#top-keyvisual .ttl-vmiddle-box span { letter-spacing: -4px; }
#top-keyvisual .ttl-service { color: #fff; text-shadow: #002 2px 2px 5px; font-weight: bold; font-size: 36pt!important; }
#top-keyvisual .copy-box { position: absolute; margin: 0 auto; padding: 16px 0px; width: 100%; bottom: 0; color: #fff; background-color: rgba(0, 20, 80, 0.7); }
#top-keyvisual .copy-box p.h3 { font-weight: normal!important; }

@media (min-width: 1331px) {
	#top-keyvisual{ min-height: 360px; }
	#top-keyvisual .ttl-box { top: 25%; }
}
@media (max-width: 767px) {
	#top-keyvisual{ min-height: 300px; background-position: 50% 50%; background-size: 110% auto; }
	#top-keyvisual .ttl-box { top: 25%; }
	#top-keyvisual .ttl-service { font-size: 30pt!important; }
	#top-keyvisual .copy-box { padding: 0px; text-align: left; }
}
@media (max-width: 640px) {
	#top-keyvisual{ background-position: 70% 50%;  background-size: auto 100%; }
	#top-keyvisual .ttl-box { top: 15%; }
	#top-keyvisual .ttl-service { font-size: 28pt!important; }
}

/* contact key visual */
#top-keyvisual .ttl-contact { position: absolute; margin: 0 auto; width:100%; top: 15%; }
#top-keyvisual .btn-contact-box { position: absolute; margin: 0 auto; *bottom: 15%; bottom: 8%; width: 100%; }

form .form-btn.btn-white input { padding: 1.0em 40px 1.0em 70px; font-size: 20px; }
@media (max-width: 420px) { 
	form .form-btn.btn-white input { padding: 1.0em 30px 1.0em 40px; font-size: 18px; }
}
@media (max-width: 375px) { 
	form .form-btn.btn-white input { padding: 1.0em 30px 1.0em 40px; font-size: 16px; }
}

/* =====================
  tech map / image
===================== */
.main-list.tech-map + h4 { margin-top: 30px; }
.main-list.tech-map li { display: block; position: relative; padding-left: 0; margin-left: 0; margin-bottom: 0px; }

.img-box, .photo-box { display: inline-block; width: 100%; text-align: center; padding: 16px; background-color: #fff; }
.img-box > img { width: 85%; }
.img-table { width: 90%; }
@media (max-width: 767px) {
	.img-box > img { width: 100%; }
	.photo-box { padding: 0 8px; }
	.photo-box .padl10,.photo-box .padr10  { padding: 0px; }
}
@media (max-width: 540px) {
	.pc-view { display: none; }
	.sp-view { display: block; margin: 0 auto; }
	.img-table { width: 100%; }
}
@media (max-width: 480px) {
	.sp-view { width: 100%; }
}

.example { margin-bottom: 16px; text-align: center; }
.example  img { width: 100%; }
.ttl-example { padding: 8px; background-color: #666; color: #fff; font-size: 14px; }
small a { line-height: 1.2; }