/* -------------------------------------------
custom & original style
-------------------------------------------- */

body { background: none; }

/* font */
html, body, h1, h2, h3, h4, h5, h6, p, li 
{ font-family: "Arial", "Roboto", "Droid Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", "YuGothic", "メイリオ", "Meiryo", sans-serif; margin-top: 0; }
.black { color: #000!important; }
.white { color: #fff!important; }
.gray { color: #666!important; }
.lightgray { color: #999!important; }
.red { color: #ff0000!important; }
.darkred { color: #c64c3c!important; }
.pink { color: #ed1e79!important; }
.green { color: #39b54a!important; }
.blue { color: #0071bc!important; }
.redpurple { color: #a4005b!important; }
.purple { color: #5f52a0!important; }
.yellow { color: #ffff00!important; }
.orange { color: #eb6100!important; }
.brown { color: #6c3207!important; }
.font10 { font-size: 10px!important; line-height: 1.5; }
.font12 { font-size: 12px!important; line-height: 1.5; }
.font14 { font-size: 14px!important; line-height: 1.5; }
.font16 { font-size: 16px!important; line-height: 1.5; }
.font18 { font-size: 18px!important; line-height: 1.5; }


/* link */
a:link, a:visited { color: #08c; }
a:hover { color: #08c; text-decoration: underline; }
a.more:link, a.more:visited { padding-left: 1.0rem; background: url(../img/arrow_08c.png) 0% 50% no-repeat; color: #08c; }
a:hover { color: #08c; text-decoration: underline; }


/* common */
.spsite { display: inherit; }
@media (max-width: 768px) {
.spsite { display: none; }
}
.mgnbtm00 { margin-bottom: 0px!important; }
.mgnbtm05 { margin-bottom: 5px!important; }
.mgnbtm10 { margin-bottom: 10px!important; }
.mgnbtm15 { margin-bottom: 15px!important; }
.mgnbtm20 { margin-bottom: 20px!important; }
.mgnbtm25 { margin-bottom: 25px!important; }
.mgnbtm30 { margin-bottom: 30px!important; }
.mgnbtm35 { margin-bottom: 35px!important; }
.mgnbtm40 { margin-bottom: 40px!important; }
.mgnbtm45 { margin-bottom: 45px!important; }
.mgnbtm50 { margin-bottom: 50px!important; }
.mgnbtm55 { margin-bottom: 55px!important; }
.mgnbtm60 { margin-bottom: 60px!important; }


/* navbar-brand > img */
.navbar-brand > img { width: 220px; height: 60px; position: absolute; top: 10px; }
@media (max-width: 1200px) {
.navbar-brand > img { width: 220px; height: 60px; position: absolute; top: 10px; }
}
@media (max-width: 992px) {
.navbar-brand > img { width: 147px; height: 40px; position: absolute; top: 10px; }
}


/* .navbar */
.navbar { font-weight: normal; font-size: 14px; /*padding-top: 20px; padding-bottom: 20px;*/ background-color: #fff; height: 80px; }
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus 
{ color: #fff; background-color: #acacac; }
.navbar li a { text-align: center; font-size: 14px; line-height: 1.5; color: #08c!important; }
.navbar li a:hover { color: #08c!important; }
.nav > li > a { padding: 15px 15px 0; }
.hidebox { height: 80px; background-color: #000; }


/* .navbar responsive */
@media (max-width: 992px) {
.navbar { height: 60px; }
.hidebox { height: 60px; }
.nav > li > a { padding: 7px 10px 0; }
}
@media (max-width: 768px) {
.navbar-toggle { margin: 0px 15px 0px 0px; }
.navbar-collapse { border: 0; }
.navbar-nav { background-color: #fff; opacity: 0.9; }
.navbar-nav li { border-top: 1px solid #eee; }
.navbar-nav li a { padding: 20px 0; font-size: 16px; line-height: 1.5; }
a.navbar-brand { display: block; width: 120px; height: 24px; }
}



/* footer */
#footer { margin: 0; padding-top: 20px; background-color: #000;}
#footer p { color: #fff; text-align: center; font-weight: normal; font-size: 14px; }
@media (max-width: 768px) {
#footer p { font-size: 12px; }
}


/* keyvisual */
#keyvisual { width: 100%; padding: 100px 0px 60px; background: url(../img/kv-bg.jpg) center top repeat #000; }
#keyvisual h1 { margin: 0 auto; text-align: center; text-indent: -9999px; overflow: hidden; width: 800px; height: 400px; background: url(../img/kv-copy.png) center top no-repeat; background-size: contain; }
@media (max-width: 992px) {
#keyvisual h1 { width: 600px; height: 300px; }
}
@media (max-width: 768px) {
#keyvisual { padding: 80px 0px 40px; }
#keyvisual h1 { width: 480px; height: 240px; }
}
@media (max-width: 520px) {
#keyvisual { padding: 80px 0px 40px; }
#keyvisual h1 { width: 320px; height: 160px; }
}



/* link-menu */
.link-menu { margin: 0 auto; padding: 10px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; background-color: #fff; }
.link-menu .row div { padding: 10px 0; }

/* Link Button */
a.link-btn {
	display: block;
	text-align: center;
	margin: auto;
	width: 80%; 
	background: #369;
	background-image: -webkit-linear-gradient(top, #3cb0fd, #08c);
	background-image: -moz-linear-gradient(top, #3cb0fd, #08c);
	background-image: -ms-linear-gradient(top, #3cb0fd, #08c);
	background-image: -o-linear-gradient(top, #3cb0fd, #08c);
	background-image: linear-gradient(to bottom, #3cb0fd, #08c);
	-webkit-border-radius: 2;
	-moz-border-radius: 2;
	border-radius: 2px;
	color: #fff;
	font-size: 14px;
	padding: 10px 40px;
	text-decoration: none;
}
a.link-btn:hover {
  background: #369;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #369);
  background-image: -moz-linear-gradient(top, #3cb0fd, #369);
  background-image: -ms-linear-gradient(top, #3cb0fd, #369);
  background-image: -o-linear-gradient(top, #3cb0fd, #369);
  background-image: linear-gradient(to bottom, #3cb0fd, #369);
  text-decoration: none;
}



/* about */
.about { margin-bottom: 0px; padding: 40px 0;  background: url(../img/line-bg.gif) 0 0 repeat;  }
.about a:link, .about a:visited { color: #08c; text-decoration: underline; }
.about a:hover { color: #369; text-decoration: underline; }
.about h2 { margin-bottom: 0px; color: #000; font-weight: normal; font-size: 28px; line-height: 1.5; text-align: left; }
.about h2.h2-copy { width: 720px; height: 320px; margin: 0 auto; text-indent: -9999px; text-align: center; background: url(../img/concept.png) center top no-repeat; background-size: contain; }
.about h3 { margin-bottom: 10px; color: #369; font-weight: normal; font-size: 20px; line-height: 1.5; text-align: left; }
.about h3 img { width: 300px; height: 40px; }
.about p { margin-bottom: 40px; color: #000; font-weight: normal; font-size: 16px; line-height: 1.5; }
@media (max-width: 768px) {
.about h2.h2-copy { width: 600px; height: 267px; }
}
@media (max-width: 640px) {
.about h2.h2-copy { width: 480px; height: 213px; }
}
@media (max-width: 520px) {
.about h2.h2-copy { width: 420px; height: 276px; background-image: url(../img/concept2.png); }
.about h3 img { width: 240px; height: auto; }
.about p { margin-bottom: 40px; color: #000; font-weight: normal; font-size: 14px; line-height: 1.5; }
}
@media (max-width: 460px) {
.about h2.h2-copy { width: 320px; height: 210px; }
}

/* float box */
.fl-box { float: right; margin: 2px 0 20px 20px; padding: 20px 20px 15px; border: 1px solid #eee; width: 442px; background-color: #fff; }
.fl-box img { display: block; margin-bottom: 5px; }
.fl-box p.captxt { width: auto; margin-bottom: 0; font-size: 12px; line-height: 1.5; color: #444; }


/* table */
table { margin: 0 auto 0px; border-collapse: collapse; width: 100%; }
table th, table td { padding: 10px; border-collapse: collapse; border: 1px solid #888; text-align: left; font-size: 16px; line-height: 1.5; font-weight: normal; color: #000; }
table th { background-color: #f5f5f5; }
table td { background-color: #fff; color: #555; }
table a { color: #08c; text-decoration: underline; }
table ul { margin-bottom: 0; margin-left: 0; padding-left: 2.0rem; }
table ul li { margin-left: 0; padding-left: 0.5rem; }
table.responsive th { width: 20%; text-align: left; } 
@media only screen and (max-width: 768px){
table.responsive { margin: 0; }
table.responsive th,
table.responsive td { width: 100%; display: block; border-top: none; font-size: 14px; line-height: 1.5; }
table.responsive tr:first-child th { border-top: 1px solid #888; }
}


#photo { overflow: hidden; }
#photo img { margin-bottom: 5px; width: 100%; height: auto; }