@charset "UTF-8";
/*
TITLE   : スリーエイ工業株式会社
CREATED : 2018/04/08
AUTHOR  : © スリーエイ工業株式会社 http://3a-boiler.com */
html { height: 100%; font-size: 62.5%; }

body, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, input, button, table, caption, tbody, tfoot, thead, article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video { margin: 0; padding: 0; background: transparent; border: 0; outline: 0; font-weight: normal; line-height: 1; vertical-align: baseline; }

* { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; }
*::before, **::after { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; }

article, aside, embed, figure, figcaption, details, footer, header, hgroup, nav, section, summary { display: block; }

h1, h2, h3, h4, h5, h6 { font-size: 100%; }

main { display: block; }

address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; }

img, a img { border: 0 none; vertical-align: bottom; -ms-interpolation-mode: bicubic; -moz-outline-style: none; outline: none; }

*:active, *:focus { border: 0 none; text-decoration: none; outline: none; }

a { text-decoration: none; -webkit-tap-highlight-color: transparent; -moz-tap-highlight-color: transparent; tap-highlight-color: transparent; }
a:visited { text-decoration: none; }
a:active, a:focus { border: none; text-decoration: none; -moz-outline-style: none; outline: none; }
a:hover { text-decoration: underline; }

fieldset { border: 0 none; }

input, textarea, button, select { border: 0 none; -webkit-box-shadow: none; box-shadow: none; }

/* ----- Reset input[type="search"] ----- */
input[type="search"] { /* プロパティが効くようにする */ -webkit-appearance: textfield; -webkit-box-sizing: content-box; }

input[type="search"]:focus { outline-style: none; /* フォーカス時に四角いアウトラインでるので消す */ }

input[type="search"]::-webkit-search-decoration { display: none; /* paddingで消せない余白を消す */ }

ul, ol, li { list-style: none; }

table { width: 100%; border: 0 none; border-collapse: collapse; border-spacing: 0; }

table, tr, td { font-size: 100%; }

body { height: 100%; margin: 0 auto; background: #fff; -webkit-font-smoothing: antialiased; }

@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 100; }
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 200; }
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 300; }
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 400; }
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Bold"); font-weight: bold; }
@font-face { font-family: "Helvetica Neue"; src: local("Helvetica Neue Regular"); font-weight: 100; }
@font-face { font-family: "Helvetica Neue"; src: local("Helvetica Neue Regular"); font-weight: 200; }
body { color: #444; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Original Yu Gothic", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, Verdana, "メイリオ", Meiryo, "M+ 1p", sans-serif; font-size: 10px; font-size: 1.0rem; line-height: 1; }

@media all and (-ms-high-contrast: none) { body { font-family: Verdana, Meiryo, sans-serif; } }
@media all and (-ms-high-contrast: active) { body { font-family: Verdana, Meiryo, sans-serif; } }
a { color: #0033ee; }
a:visited { color: #965096; }
a:active, a:hover, a:focus { text-decoration: underline; }

@media print { * { text-shadow: none !important; color: #000 !important; background: transparent !important; -webkit-box-shadow: none !important; box-shadow: none !important; } }
.cf { *zoom: 1; }
.cf::after { display: block; clear: both; content: ' '; }

@media screen and (max-width: 768px) { img { max-width: 100%; height: auto; width: auto; } }
.container, #header, #main_contents section { width: 830px; margin: 0 auto; padding: 0; }
@media screen and (max-width: 768px) { .container, #header, #main_contents section { width: 95%; } }

.pc_nowrap { display: block; }
@media screen and (max-width: 640px) { .pc_nowrap { display: inline; } }

.sp_nowrap { display: inline; }
@media screen and (max-width: 375px) { .sp_nowrap { display: block; } }

@media screen and (max-width: 375px) { .pc_txt { display: none; } }

.sp_txt { display: none; }
@media screen and (max-width: 375px) { .sp_txt { display: inline-block; } }

.number { font-family: Arial, Verdana, 'Helvetica Neue', Helvetica, sans-serif; }

.attention { color: #999; font-size: 12px; font-size: 1.2rem; line-height: 1; line-height: 1.5; }

.bt_effect { display: inline-block; outline: none; }
.bt_effect::before, .bt_effect::after { display: block; position: absolute; z-index: -1; content: ''; }

.bt_effect, .bt_effect::before, .bt_effect::after { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }

#main_contents nav .container h2 a, #main_contents nav.contact li a { display: inline-block; text-decoration: none; }
#main_contents nav .container h2 a:active, #main_contents nav.contact li a:active, #main_contents nav .container h2 a:focus, #main_contents nav.contact li a:focus, #main_contents nav .container h2 a:hover, #main_contents nav.contact li a:hover, #main_contents nav .container h2 a.hover, #main_contents nav.contact li a.hover { text-decoration: none; }

#header { display: -webkit-box; display: -webkit-flexbox; display: -moz-flexbox; display: -ms-flexbox; display: -moz-flex; -js-display: flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; height: 80px; }
#header p { font-size: 12px; font-size: 1.2rem; line-height: 1.5; text-align: right; }
@media screen and (max-width: 768px) { #header { width: 98%; }
  #header p { padding-left: 20px; font-size: 11px; font-size: 1.1rem; line-height: 1.5; }
  #header p .pc_nowrap { display: inline; } }
@media screen and (max-width: 640px) { #header { -ms-flex-direction: column; -moz-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; width: 100%; height: auto; margin: auto; text-align: center; }
  #header h1 { display: block; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; width: 96%; height: auto; margin: 8px auto; }
  #header p { display: block; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; width: 100%; padding: 2px 0; background: #666; color: #FFF; font-size: 10px; font-size: 1.0rem; line-height: 1; text-align: center; } }
@media screen and (max-width: 480px) { #header p { display: none; } }

#top_img { position: relative; height: 250px; background: #000; }
#top_img::before { position: absolute; top: 0; width: 50%; height: 100%; background: url(../img/top_img_bg.png) repeat right 0; content: ""; }
#top_img img { position: absolute; left: 50%; margin-left: -400px; }
@media screen and (max-width: 768px) { #top_img { height: auto; background: none; }
  #top_img::before { position: relative; width: 100%; background: none; }
  #top_img img { position: relative; left: 0; margin-left: 0; } }

#main_contents { margin-top: 20px; }
#main_contents nav#tab_navi { background: url(../img/navi_bg.png) repeat-x left bottom; }
#main_contents nav .container { display: -webkit-box; display: -webkit-flexbox; display: -moz-flexbox; display: -ms-flexbox; display: -moz-flex; -js-display: flex; display: flex; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; }
#main_contents nav .container h2 { text-align: center; }
#main_contents nav .container h2 a { position: relative; z-index: 2; background: #000000; border: 3px solid #000000; color: #fff; line-height: 50px; width: 350px; height: 45px; border-radius: 5px 5px 0 0; color: #fff; font-size: 20px; font-size: 2.0rem; line-height: 2.2; }
#main_contents nav .container h2 a:hover { background: #ee0000; border-color: #ee0000; font-weight: bold; letter-spacing: 3px; }
#main_contents nav .container h2 a::before, #main_contents nav .container h2 a::after { top: 0; width: 50%; height: 100%; background: #000000; }
#main_contents nav .container h2 a::before { right: 0; }
#main_contents nav .container h2 a::after { left: 0; }
#main_contents nav .container h2 a:hover::before, #main_contents nav .container h2 a:hover::after { width: 0; border-color: #ee0000; }
#main_contents nav .container h2 a:hover, #main_contents nav .container h2 a.hover { color: #fff; }
@media screen and (max-width: 768px) { #main_contents nav .container { width: 100%; }
  #main_contents nav .container h2 { width: 45%; }
  #main_contents nav .container h2 a { width: 100%; } }
@media screen and (max-width: 640px) { #main_contents nav .container h2 a { font-size: 16px; font-size: 1.6rem; line-height: 2.5; }
  #main_contents nav .container h2 a:hover { letter-spacing: 1px; } }
#main_contents section { margin-bottom: 60px; }
#main_contents section h3 { position: relative; margin: 40px 0 20px; padding-bottom: 20px; border-bottom: 3px solid #ccc; font-size: 24px; font-size: 2.4rem; font-weight: 600; }
#main_contents section h3::after { content: ""; position: absolute; bottom: -3px; left: 0; width: 30px; height: 3px; background: #ee0000; }
#main_contents section h3 span { font-size: 18px; font-size: 1.8rem; line-height: 1; }
#main_contents section h4 { margin: 10px 0 20px; color: #ee0000; font-size: 20px; font-size: 2.0rem; line-height: 1; font-weight: 600; }
#main_contents section p { margin: 20px 0; font-size: 14px; font-size: 1.4rem; line-height: 1.4; }
#main_contents section ul li { margin: 0 0 10px 20px; list-style: square; font-size: 14px; font-size: 1.4rem; line-height: 1.4; }
@media screen and (max-width: 480px) { #main_contents section h3 { margin-top: 30px; font-size: 20px; font-size: 2.0rem; line-height: 1; }
  #main_contents section h3 span { font-size: 14px; font-size: 1.4rem; line-height: 1; }
  #main_contents section ul { margin-left: 10px; } }
#main_contents table { width: 100%; margin-top: 20px; }
#main_contents tr { border-top: 1px solid #999; border-bottom: 1px solid #999; }
#main_contents th, #main_contents td { padding: 20px 15px; font-size: 14px; font-size: 1.4rem; line-height: 1.4; vertical-align: middle; }
#main_contents th { width: 180px; background: #ddd; font-weight: 600; }
@media screen and (max-width: 768px) { #main_contents th { width: 120px; } }
@media screen and (max-width: 640px) { #main_contents table { margin-top: 20px; }
  #main_contents th, #main_contents td { padding: 10px; }
  #main_contents th { width: 100px; padding: 10px 5px; font-size: 12px; font-size: 1.2rem; line-height: 1.4; } }
@media screen and (max-width: 320px) { #main_contents th { width: 60px; }
  #main_contents td { padding: 5px 5px; } }
#main_contents .photo_list { display: -webkit-box; display: -webkit-flexbox; display: -moz-flexbox; display: -ms-flexbox; display: -moz-flex; -js-display: flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin: 40px 0; }
#main_contents .photo_list figure { margin-right: 15px; }
#main_contents .photo_list figure:last-child { margin-right: 0; }
#main_contents .photo_list figcaption { margin-top: 10px; font-size: 14px; font-size: 1.4rem; line-height: 1.4; }
@media screen and (max-width: 640px) { #main_contents .photo_list { margin: 20px 0; }
  #main_contents .photo_list figcaption { margin-top: 5px; font-size: 12px; font-size: 1.2rem; line-height: 1.4; } }
@media screen and (max-width: 480px) { #main_contents .photo_list { display: block; }
  #main_contents .photo_list figure { margin: 0 0 20px 0; }
  #main_contents .photo_list figcaption { font-size: 14px; font-size: 1.4rem; line-height: 1.4; } }
#main_contents nav.contact { margin: 30px 0 60px; }
#main_contents nav.contact ul { display: -webkit-box; display: -webkit-flexbox; display: -moz-flexbox; display: -ms-flexbox; display: -moz-flex; -js-display: flex; display: flex; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; }
#main_contents nav.contact li { margin: 0; list-style: none; }
#main_contents nav.contact li a { position: relative; z-index: 2; background: #000000; border: 3px solid #000000; color: #fff; line-height: 50px; width: 280px; height: 50px; border-radius: 5px; color: #fff; font-size: 18px; font-size: 1.8rem; line-height: 2.4; text-align: center; }
#main_contents nav.contact li a:hover { background: #ee0000; border-color: #ee0000; font-weight: bold; letter-spacing: 3px; }
#main_contents nav.contact li a::before, #main_contents nav.contact li a::after { top: 0; width: 50%; height: 100%; background: #000000; }
#main_contents nav.contact li a::before { right: 0; }
#main_contents nav.contact li a::after { left: 0; }
#main_contents nav.contact li a:hover::before, #main_contents nav.contact li a:hover::after { width: 0; border-color: #ee0000; }
#main_contents nav.contact li a:hover, #main_contents nav.contact li a.hover, #main_contents nav.contact li a::before, #main_contents nav.contact li a::after { border-radius: 5px; font-weight: bold; }
@media screen and (max-width: 768px) { #main_contents nav.contact li { width: 40%; }
  #main_contents nav.contact li a { width: 100%; } }
@media screen and (max-width: 640px) { #main_contents nav.contact ul { -ms-flex-pack: distribute; justify-content: space-around; }
  #main_contents nav.contact li a { font-size: 16px; font-size: 1.6rem; line-height: 2.7; }
  #main_contents nav.contact li a:hover { letter-spacing: 1px; } }
@media screen and (max-width: 480px) { #main_contents nav.contact { margin-bottom: 10px; } }

#home #tab_navi h2:nth-child(1) a, #recruit #tab_navi h2:nth-child(2) a { height: 48px; background: #fff; border-color: #000000 #000000 #fff #000000; color: #000000; font-weight: bold; -webkit-transition: none; -o-transition: none; transition: none; }
#home #tab_navi h2:nth-child(1) a:hover, #home #tab_navi h2:nth-child(1) a.hover, #home #tab_navi h2:nth-child(1) a::before, #home #tab_navi h2:nth-child(1) a::after, #recruit #tab_navi h2:nth-child(2) a:hover, #recruit #tab_navi h2:nth-child(2) a.hover, #recruit #tab_navi h2:nth-child(2) a::before, #recruit #tab_navi h2:nth-child(2) a::after { background: #fff; letter-spacing: 0; }

#home #main_contents section div.client_list { display: -webkit-box; display: -webkit-flexbox; display: -moz-flexbox; display: -ms-flexbox; display: -moz-flex; -js-display: flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
@media screen and (max-width: 480px) { #home #main_contents section div.client_list { display: block; } }

#home #main_contents section#client2 .client_list ul:first-child { margin-right: 15px; }
@media screen and (max-width: 640px) { #home #main_contents section#client2 .client_list div { display: block; }
  #home #main_contents section#client2 .client_list ul:first-child { margin-right: 0; } }
@media screen and (max-width: 480px) { #home #main_contents section#client2 h3 { margin-top: 40px; }
  #home #main_contents section#client2 .client_list div h4 { margin-top: 30px; }
  #home #main_contents section#client2 .client_list ul:first-child { display: block; } }

#recruit #main_contents section p { margin: 40px 0; padding: 20px 0; border-top: 1px solid #ee0000; border-bottom: 1px solid #ee0000; color: #ee0000; font-size: 24px; font-size: 2.4rem; font-weight: 600; text-align: center; }
@media screen and (max-width: 640px) { #recruit #main_contents section p { margin: 20px 0 0; font-size: 20px; font-size: 2.0rem; line-height: 1; } }
@media screen and (max-width: 480px) { #recruit #main_contents section h3 { margin-top: 0; } }

/* ---------------------------------------------------------------------
Footer style
--------------------------------------------------------------------- */
#footer { display: table; width: 100%; height: 70px; margin-top: 50px; background: #ee0000; text-align: center; }
#footer nav li { display: inline-block; }

#footer small { display: table-cell; text-align: center; vertical-align: middle; color: #fff; font-size: 12px; font-size: 1.2rem; line-height: 1; letter-spacing: 0.05em; }

#footer small a { color: #fff !important; }

/* Scroll to Top
----------------------------------------------- */
#back_top { position: fixed; bottom: 30px; right: 20px; z-index: 11; }
@media screen and (max-width: 768px) { #back_top { bottom: 0; right: 0; } }

#back_top a { display: block; width: 50px; height: 50px; background: #ee0000; color: #fff; text-align: center; }

#back_top a i.fa-angle-up { padding: 0; color: #fff; font-size: 32px; font-size: 3.2rem; }

#back_top a:hover { background: #000000; }