@charset "UTF-8";
@keyframes logo { 0% { opacity: 0; }
  100% { opacity: 1; } }
@keyframes arrow { 0% { margin-bottom: 0; }
  100% { margin-bottom: 5px; } }
@keyframes fadeUp { 0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); } }
html, body, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, p, q, fieldset, pre, code, blockquote, figure { margin: 0; padding: 0; }

header, footer, section, nav, artcle, aside, main, menu, details, figure, figcaption { display: block; }

h1, h2, h3, h4, h5, h6, strong, em, th, small { font-size: 100%; font-weight: normal; }

li { list-style: none; }

table { border-collapse: collapse; border-spacing: 0; }

caption, th { text-align: left; }

fieldset, img { border: 0; }

input, textarea, select { color: black; font-weight: normal; font-size: 100%; }

sup { vertical-align: text-top; }

sub { vertical-align: text-bottom; }

i, em, address { font-style: normal; }

body { margin: 0; font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; color: #333; font-size: 14px; }

a { text-decoration: none; color: #2977A0; }

header { box-sizing: border-box; margin: 0 auto 10px; position: fixed; width: 100%; }
header h1 { background: rgba(255, 255, 255, 0.8); border-bottom: 1px solid #b50000; font-size: 32px; height: 50px; }
header h1 a { background: url(../images/4plus_logo.svg) no-repeat 0/32px; color: #b50000; margin-left: 40px; padding-left: 40px; }
header h1 a svg { border: 2px solid #000; border-radius: 50%; text-align: center; }
header h1 a svg .cls-1 { fill: #b50000; stroke: #000; stroke-linejoin: round; stroke-width: 2px; }
header nav { font-size: 1.2em; text-transform: uppercase; }
header nav ul { border-left: 1px solid #b50000; height: 100%; padding: 100px 20px 0; position: fixed; top: 0; left: 20px; }
header nav ul li { font-family: futura-pt, sans-serif; font-weight: 300; font-style: normal; margin-bottom: 20px; }
header nav ul li a { color: #999; display: block; padding: 5px; position: relative; }
header nav ul li a:hover { color: #333; }
header .tel_top { position: fixed; top: 10px; right: 20px; }
header .tel_top a { font-family: futura-pt, sans-serif; font-weight: 400; font-style: normal; background: url("../images/tel.svg") no-repeat 0/24px; color: #333; font-size: 24px; padding-left: 32px; }

main { padding-top: 50px; margin-left: 200px; line-height: 1.5; }
main h2 { background: url("../images/bg_h1_title.png"); color: #b50000; font-size: 40px; font-family: futura-pt, sans-serif; font-weight: 500; font-style: normal; line-height: 1; margin-bottom: 40px; padding: 40px 0 0 20px; text-transform: uppercase; }
main > section { margin: 0 auto 120px; padding-top: 40px; }
main > section .secbox { margin-right: 100px; }
main > section .secbox > p { text-indent: 2em; }
main .headimage img { height: auto; width: 100%; }
main #service ul { display: flex; justify-content: space-between; font-size: 1.2em; font-weight: bold; }
main #service ul li { text-align: center; width: 25%; }
main #service ul li img { display: block; height: 90px; margin: 0 auto 20px; width: 90px; }
main #about .company_info_data { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 20px; }
main #about .company_info_data dl { background: #efefef; display: flex; flex-wrap: wrap; line-height: 2; width: 39%; }
main #about .company_info_data dl dt { border-bottom: 1px solid #fff; box-sizing: border-box; padding-top: 20px; padding-left: 2em; padding-bottom: 8px; width: 40%; }
main #about .company_info_data dl dd { border-bottom: 1px solid #fff; padding-top: 20px; padding-bottom: 8px; width: 60%; }
main #about .company_info_data #google_map { width: 60%; }
main #about .company_info_data #google_map iframe { height: 100%; width: 100%; }
main #contact form { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 20px; }
main #contact form input, main #contact form textarea { border: 1px solid #999; box-sizing: border-box; padding: 18px 10px; margin-bottom: 20px; width: 100%; }
main #contact form .input_area { width: 40%; }
main #contact form .input_area input { -webkit-appearance: none; appearance: none; }
main #contact form .message_area { width: 57%; margin-bottom: 20px; }
main #contact form .message_area p { height: 100%; }
main #contact form .message_area p textarea { height: 100%; }
main #contact form .message_area input { -webkit-appearance: none; appearance: none; }
main #contact form .check { margin: 20px 0; text-align: center; width: 100%; }
main #contact form .check input { width: auto; }
main #contact form .send_btn { cursor: pointer; margin: 0 auto; width: 380px; }
main #contact form .send_btn input { -webkit-appearance: none; appearance: none; background: #fff; }
main #contact form .send_btn input:hover { background: rgba(181, 0, 0, 0.1); }

footer { margin-top: 50px; }
footer .copy { color: #888; font-size: .8em; padding: 10px 40px; text-transform: capitalize; }

.noimg { background-color: #ddd; border: 10px #fff solid; box-shadow: 1px 0px 3px rgba(0, 0, 0, 0.3); box-sizing: border-box; width: 100%; }

/*-------------------------------------------------------------- 

メディアクエリー
-------------------------------------------------------------- */
@media only screen and (max-width: 768px) { header { background-color: #fff; margin-bottom: 0; border-bottom: 2px solid #b50000; height: 52px; position: fixed; top: 0; width: 100%; z-index: 1000; }
  header h1 { box-sizing: border-box; margin-top: 8px; width: auto; }
  header h1 a svg { border-width: 1px; vertical-align: -5px; width: 36px; }
  header h1 a .tradeName { margin-left: 6px; margin-right: 0; width: 2.1em; }
  header nav { background-color: #fff; border-left: 2px solid #b50000; font-size: .875em; line-height: 2; height: 100%; position: fixed; top: 52px; right: -100%; transition: .5s; width: 80%; }
  header nav ul { display: block; }
  header nav ul li { line-height: 4; text-align: left; width: 100%; }
  header nav ul li a { padding-left: 2em; }
  header nav ul li a:hover::after { opacity: 0; }
  header nav ul li a::after { height: 1px; }
  header nav ul li.current a::after { top: 50%; left: 50%; }
  header #spBtn { cursor: pointer; margin: 10px 14px 5px 0; padding-top: 14px; position: relative; }
  header #spBtn::before, header #spBtn::after { content: ''; border-bottom: 1px solid #333; display: block; position: absolute; width: 100%; }
  header #spBtn::before { top: 0; }
  header #spBtn::after { top: 10px; }
  header #spBtn.open + nav { right: 0; }
  main#contents { margin-top: 50px; }
  main#contents h2 { font-size: 1.5em; line-height: 2.75; }
  main#contents h3 { background: #fff; margin-left: 2em; padding: 0 .5em; position: static; }
  main#contents h3::before { margin-top: .7em; top: auto; left: 0; width: 100vw; z-index: -1; }
  main#contents h3::after { content: none; }
  main#contents > section { margin-bottom: 100px; }
  footer .inn { padding-top: 20px; width: 100%; }
  footer .inn #address { width: 100%; }
  footer .inn nav { display: none; }
  footer .inn #copy { text-align: center; }
  .wrap { background: rgba(0, 0, 0, 0.5); position: fixed; bottom: 0; width: 100%; z-index: 999; }
  .wrap.open { height: 100%; }
  #contact section { margin: 0 auto; width: 96%; }
  #contact .tel p { box-sizing: border-box; padding-left: 1em; width: 100%; }
  #contact .tel p a { font-size: 9.5vw; }
  #contact .tel dl { margin-left: 1em; }
  #contact .mail form { width: 100%; }
  #contact .mail form dl { display: block; }
  #contact .mail form dl dt { border-bottom: none; }
  #contact .mail form dl dd { border-bottom: none; width: 100%; }
  #contact .mail form dl dd input { width: 100%; box-sizing: border-box; }
  #contact .mail form dl dd textarea { box-sizing: border-box; }
  #contact .mail form .privacy_check input[type=submit] { -webkit-appearance: none; appearance: none; width: 100%; } }

/*# sourceMappingURL=style.css.map */