@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
/*red*/
/* Common Styles ------------------------------------------ */
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-rendering: optimizelegibility; }

body { font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size: 16px; line-height: 1.5; color: #c10000; background: url(../images/bg.jpg) repeat 0 0; -webkit-font-smoothing: antialiased; }

a, a:hover, a:focus { text-decoration: none; border: none; color: #c10000; }

a:hover { text-decoration: underline; }

p { line-height: 1.7em; text-align: left; color: #c10000; }

ul { padding-left: 0px; }

img { /* Responsive images (ensure images don't scale beyond their parents) */ max-width: 100%; /* Part 1: Set a maxium relative to the parent */ width: auto\9; /* IE7-8 need help adjusting responsive images */ height: auto; /* Part 2: Scale the height according to the width, otherwise you get stretching */ vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic; }

.icons { background: url(../images/icons.svg) no-repeat 0 0; display: inline-block; *display: inline; *zoom: 1; width: 100%; height: 100%; }

.i-service1 { width: 40px; height: 40px; background-position: 0 0px; vertical-align: middle; }

.i-service2 { width: 40px; height: 40px; background-position: 0 -40px; vertical-align: middle; }

.i-service3 { width: 40px; height: 40px; background-position: 0 -80px; vertical-align: middle; }

.i-pdf { width: 40px; height: 30px; background-position: 0 -120px; vertical-align: middle; }

.clear { clear: both; }

/*===============================================
共通指定
===============================================*/
.content { width: 1100px; margin: 0 auto; }

header { text-align: center; }

#header-block { height: 190px; margin: 0 auto; position: relative; }
#header-block #logo { position: absolute; top: 42%; left: 50%; -ms-transform: translate(-50%, -42%); -webkit-transform: translate(-50%, -42%); transform: translate(-50%, -42%); margin: 0; padding: 0; }
#header-block #logo h1 { font-size: 14px; color: #c10000; font-weight: bold; }
#header-block .tel { position: absolute; top: 20px; right: 0px; font-weight: bold; font-size: 15px; line-height: 1.3em; text-align: right; }
#header-block .txt { position: absolute; top: 60px; left: 0px; font-weight: bold; font-size: 15px; }
#header-block .contact { position: absolute; top: 65px; right: 10px; font-weight: bold; font-size: 17px; width: 180px; height: 55px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; line-height: 55px; }
#header-block .contact a { display: block; width: 100%; height: 100%; text-decoration: none; color: #c10000; }
#header-block .contact a:hover { color: #fff; }

/*ボタンベースhttp://www.nxworld.net/tips/css-only-button-design-and-hover-effects.html*/
.button { display: inline-block; text-align: center; text-decoration: none; outline: none; }

.button::before, .button::after { position: absolute; z-index: -1; display: block; content: ''; }

.button, .button::before, .button::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all .3s; transition: all .3s; }

/*ボタン個別エフェクト*/
.button { position: relative; z-index: 2; background-color: #fff; border: 2px solid #c10000; color: #333; line-height: 50px; overflow: hidden; }

.button:hover { color: #fff; }

.button::after { top: -100%; width: 100%; height: 100%; }

.button:hover::after { top: 0; background-color: #c10000; }

#service-block { background-color: #c10000; color: #fff; padding: 80px 0; }
#service-block .col { border: 3px solid #fff; padding: 10px 30px 20px 30px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; }
#service-block .kuni { color: #fff; float: left; font-weight: bold; width: 170px; border: 3px solid #fff; padding: 15px 20px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; margin: 0 30px 10px 0; font-size: 16px; }
#service-block h2 { font-size: 46px; margin: 0; float: left; line-height: 1.2em; }
#service-block h3 { font-size: 29px; }
#service-block h3 span { padding-right: 15px; }
#service-block h4 { font-size: 16px; }
#service-block .pdf-btn { font-weight: bold; font-size: 14px; width: 270px; height: 55px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; line-height: 55px; background-color: #fff; margin-bottom: 10px; padding: 0 0 0 10px; }
#service-block .pdf-btn a { display: block; width: 100%; height: 100%; text-decoration: none; color: #c10000; }
#service-block .pdf-btn a:hover { color: #c10000; }

#about-block #about-img { position: relative; text-align: center; }
#about-block .txt-center { position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin: 0; padding: 0; }
#about-block .txt-center h2 { font-size: 50px; font-weight: bold; margin: 0; line-height: 1.3em; }
#about-block .txt-center p { font-weight: bold; font-size: 22px; text-align: center; margin: 0; }
#about-block .content { padding: 50px 0; }

#company-block { txet-align: center; background-color: #c10000; padding: 90px 0; color: #fff; }
#company-block h2 { font-size: 50px; font-weight: bold; margin: 0; line-height: 1.3em; text-align: center; }
#company-block p { font-weight: bold; font-size: 22px; text-align: center; margin: 0; color: #fff; }
#company-block dl { width: 800px; margin: 50px auto 0 auto; border-bottom: 1px solid #fff; }
#company-block dt, #company-block dd { padding: 15px 0 5px 0; border-top: 1px solid #fff; }
#company-block dt { width: 170px; padding: 15px 0 5px 10px; float: left; }
#company-block dd { margin-left: 180px; padding-bottom: 10px; }
#company-block dd:after { content: ''; display: block; clear: both; }

#contact-block { position: relative; }
#contact-block .txt-center { position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin: 0; padding: 0; }
#contact-block .txt-center h2 { font-size: 50px; font-weight: bold; margin: 0; line-height: 1.3em; }
#contact-block .txt-center .contact { font-weight: bold; font-size: 17px; width: 240px; height: 60px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; line-height: 60px; }
#contact-block .txt-center .contact a { display: block; width: 100%; height: 100%; text-decoration: none; color: #c10000; }
#contact-block .txt-center .contact a:hover { color: #fff; }

footer { position: relative; height: 120px; }
footer img { position: absolute; top: 40px; left: 0; }
footer p { position: absolute; top: 40px; left: 150px; font-size: 13px; }
footer div { font-size: 13px; position: absolute; top: 50px; right: 0px; }

#backtop { position: fixed; bottom: 50px; right: 40px; }

#backtop a { width: 45px; height: 45px; display: block; text-indent: -9999px; background: url(../images/gotop.svg) no-repeat 0 0; }

#backtop a:hover { color: #000; }

/*===============================================
600px 以上
===============================================*/
@media (min-width: 600px) { .w600 { display: none; } }
/*===============================================
1024px未満　ワイドタブレット　ＰＣ
===============================================*/
@media (max-width: 1024px) { .content { width: 90%; }
  #service-block { padding: 80px 0; }
  #service-block .span_1_of_3 { width: 27.4%; }
  #service-block .col { padding: 10px 15px 20px 15px; }
  #service-block .kuni { width: 140px; padding: 10px 20px; margin: 0 25px 10px 0; font-size: 14px; }
  #service-block h2 { font-size: 39px; line-height: 1.2em; }
  #service-block h3 { font-size: 25px; }
  #service-block h3 span { padding-right: 12px; }
  #service-block h4 { font-size: 15px; }
  #service-block .pdf-btn { width: 240px; font-size: 12px; } }
/*===============================================
768px未満　
===============================================*/
@media (max-width: 768px) { #service-block { padding: 80px 0; }
  #service-block .span_1_of_3 { width: 27.1%; }
  #service-block .col { padding: 10px 15px 15px 15px; }
  #service-block .kuni { width: 130px; padding: 10px 15px; margin: 0 20px 10px 0; font-size: 13px; line-height: 1.2em; }
  #service-block h2 { font-size: 27px; line-height: 1.2em; }
  #service-block h3 { font-size: 20px; }
  #service-block h3 span { padding-right: 5px; }
  #service-block h4 { font-size: 12px; }
  #service-block .pdf-btn { width: 180px; padding: 0 0 0 10px; }
  #service-block .pdf-btn span { display: none; }
  #company-block dl { width: 90%; }
  #company-block dt { width: 140px; }
  #company-block dd { margin-left: 150px; }
  footer { height: 120px; }
  footer img { top: 40px; left: 0; }
  footer p { top: 35px; left: 150px; font-size: 13px; }
  footer div { top: 50px; right: 80px; } }
/*===============================================
736px未満　
===============================================*/
@media (max-width: 736px) { #service-block { padding: 80px 0; }
  #service-block .span_1_of_3 { width: 26.9%; }
  #service-block .col { padding: 10px 15px 15px 15px; }
  #service-block .kuni { width: 130px; padding: 10px 15px; margin: 0 20px 10px 0; font-size: 13px; line-height: 1.2em; }
  #service-block h2 { font-size: 25px; line-height: 1.2em; }
  #service-block h3 { font-size: 18px; }
  #service-block h3 span { padding-right: 5px; }
  #service-block h4 { font-size: 11px; }
  #service-block .pdf-btn { width: 170px; padding: 0 0 0 10px; }
  #service-block .pdf-btn span { display: none; } }
/*===============================================
667px未満　
===============================================*/
@media (max-width: 667px) { .content { width: 94%; }
  #service-block .span_1_of_3 { width: 28%; }
  #service-block .col { padding: 10px 10px 10px 10px; }
  #service-block .kuni { width: 120px; padding: 10px 15px; margin: 0 20px 10px 0; font-size: 12px; line-height: 1.2em; }
  #service-block h2 { font-size: 25px; line-height: 1.2em; }
  #service-block h3 { font-size: 18px; }
  #service-block h3 span { padding-right: 5px; }
  #service-block h4 { font-size: 11px; }
  #service-block .pdf-btn { width: 165px; padding: 0 0 0 10px; font-size: 11px; }
  #service-block .pdf-btn span { display: none; } }
/*===============================================
600px 以上
===============================================*/
@media (min-width: 600px) { #header-block-m { display: none; }
  .kuni-m { display: none; } }
/*===============================================
599px 未満に対応　モバイル
===============================================*/
@media screen and (max-width: 599px) { .w599 { display: none; }
  header { text-align: left; }
  #header-block-m { height: 70px; margin: 0 auto; position: relative; }
  #header-block-m h1 { font-size: 11px; font-weight: normal; }
  #header-block-m #logo-img { position: absolute; top: 20px; left: 0px; width: 80px; }
  #header-block-m #tel-img { position: absolute; top: 20px; right: 65px; }
  #header-block-m #mail-img { position: absolute; top: 20px; right: 15px; }
  #service-block { padding: 30px 0; }
  #service-block .col { padding: 10px 20px 20px 20px; margin: 1% 0 4% 0%; }
  #service-block .span_1_of_3 { width: 100%; }
  #service-block .kuni-m { color: #fff; font-weight: bold; margin: 0 0 20px 0; font-size: 11px; }
  #service-block h2 { font-size: 18px; margin: 0 0 20px 0; }
  #service-block h3 { font-size: 29px; }
  #service-block h4 { font-size: 16px; }
  #service-block .pdf-btn { font-size: 16px; width: 100%; height: 55px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; line-height: 55px; background-color: #fff; margin-bottom: 10px; padding: 0; text-align: center; }
  #about-block .txt-center h2 { font-size: 22px; line-height: 1.2em; }
  #about-block .txt-center p { font-weight: bold; font-size: 13px; text-align: center; margin: 0; }
  #about-block .content { padding: 15px 0; }
  #about-block .content p { font-size: 12px; }
  #company-block { padding: 30px 0; }
  #company-block h2 { font-size: 22px; line-height: 1.3em; }
  #company-block p { font-size: 13px; }
  #company-block dl { width: 95%; margin: 20px auto 0 auto; }
  #company-block dt { width: 90px; font-size: 14px; }
  #company-block dd { margin-left: 100px; font-size: 14px; }
  #contact-block { position: relative; }
  #contact-block .txt-center { text-align: center; }
  #contact-block .txt-center h2 { font-size: 20px; line-height: 1.2em; }
  #contact-block .txt-center .contact { font-weight: bold; font-size: 17px; width: 250px; }
  footer { position: relative; height: 150px; }
  footer img { position: absolute; top: 30px; left: 0; }
  footer p { position: absolute; top: 70px; left: 0; font-size: 12px; }
  footer div { font-size: 12px; position: absolute; top: 100px; left: 0; } }