@charset "UTF-8";
@import url("sp_style.css");
@media screen and (max-width: 768px) { body { width: 100%; -webkit-overflow-scrolling: touch; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"; }
  ul { list-style: none; }
  a { text-decoration: none; transition: 0.5s; }
  h1 img { width: 30vh; margin: 29% auto 0; }
  h2, #index .D h2, #index .G h2, #index .H h2, #index .K h2, #company h2, #message h2, #facility h2, #products h2, #yosha h2, #sessaku h2, #advantage h2, #contact h2 { font-family: "source-han-sans-japanese"; color: #FFF; font-size: 7vw; text-align: center; }
  h2 .smo, #index .D h2 .smo, #index .G h2 .smo, #index .H h2 .smo, #index .K h2 .smo, #company h2 .smo, #message h2 .smo, #facility h2 .smo, #products h2 .smo, #yosha h2 .smo, #sessaku h2 .smo, #advantage h2 .smo, #contact h2 .smo { font-size: 6vw; line-height: 1.4; }
  #contents .line { width: 50%; height: 1px; background: #b60201; margin: 0 auto 10%; }
  .hover { transition: 0.5s; }
  .redti { font-family: "source-han-sans-japanese"; font-weight: 900; color: #850100; font-size: 6vw; line-height: 1.4; margin: 0 auto 5%; text-align: left; vertical-align: middle; }
  .redti span { font-size: 7vw; }
  .redti .ex { display: block; }
  .dotto { background: url(../images/common/dotto.png) !important; background-repeat: repeat; height: 100%; }
  .dotto2 { background: url(../images/common/dotto2.png) !important; background-repeat: repeat; height: 100%; }
  .dotto3 { background: url(../images/common/dotto3.png) !important; background-repeat: repeat; height: 100%; }
  .ggmap { position: relative; padding-bottom: 75%; height: 0; overflow: hidden; }
  .ggmap iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }
  #header .line { height: 5px; background: #00385f; }
  #header .A { margin: 0 0 0 5%; background: url(../images/common/sp_logo.png); height: 71px; background-size: cover; background-repeat: no-repeat; background-position: left; -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%); background-size: auto; }
  #header .A ul, #header .A div { display: none; }
  #header .pure-drawer { overflow: scroll; -webkit-overflow-scrolling: touch; }
  #header .pure-drawer li { margin: 7vw 5vw 0; }
  #header .pure-drawer li span { display: block; line-height: 1.5; }
  #header .pure-drawer li .Eng { font-family: "futura-pt"; font-size: 2vw; color: #78a3c0; }
  #header .pure-drawer li a { width: 100%; display: block; font-size: 5vw; font-weight: 500; font-family: "source-han-sans-japanese"; color: #FFF; text-decoration: none; letter-spacing: 0.2vw; }
  #header .pure-drawer li:nth-child(1), #header .pure-drawer li:nth-child(2), #header .pure-drawer li:nth-child(3) { display: inline-block; }
  #header .pure-drawer li:nth-child(1) span, #header .pure-drawer li:nth-child(2) span, #header .pure-drawer li:nth-child(3) span { line-height: 1.8; }
  #header .pure-drawer li:nth-child(1) a, #header .pure-drawer li:nth-child(2) a, #header .pure-drawer li:nth-child(3) a { text-align: center; }
  #header .pure-drawer li:nth-child(1) i { font-size: 2.3em; vertical-align: bottom; }
  #header .pure-drawer li:nth-child(2) i { font-size: 1.8em; }
  #header .pure-drawer li:nth-child(3) i { font-size: 1.8em; }
  #header .pure-drawer li:last-child { padding: 0 0 7vw 0; }
  #header #nav { display: none; }
  #pagetop { background: #d1d1d1; }
  #pagetop .box { padding: 10px 0; }
  #pagetop .box a { display: block; width: 9%; margin: 0 auto; }
  #pagetop .box a img { transition: 0.5s; transform: rotateZ(0deg); }
  #pagetop .box a img:hover { transform: rotateZ(360deg); }
  #pagetop img { -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%); }
  #footer { background: #002b48; }
  #footer .A .lbox { padding: 5% 5% 0; margin: 0 auto; }
  #footer .A .lbox img { width: 60%; }
  #footer .A .lbox p { display: none; }
  #footer .A nav tr { height: 9vw; }
  #footer .A nav tr td { width: 30vw; vertical-align: middle; }
  #footer .A nav a { height: 20px; display: block; font-size: 3vw; font-weight: 500; font-family: "source-han-sans-japanese"; color: #FFF; text-decoration: none; letter-spacing: 0.2vw; }
  #footer .A nav a::before { padding: 0 2vw 0 0; font-family: "FontAwesome"; content: "\f105"; }
  #footer .A nav a:hover, #footer .A nav a .hover { color: #84a2aa; }
  #footer .A ul { display: none; }
  #footer .B { text-align: center; font-size: 2vw; text-align: center; line-height: 1.4em; color: #597284; padding: 5% 0; }
  #index .line { display: none; }
  #index .A { margin: -20% 0 0 0; height: 100vh; background-size: cover; background-repeat: no-repeat; background-position: center; background-image: url(../images/index/mainimg_base.jpg); position:relative;}
  #index .A img { display: block; width: 80vw; margin: 0 auto; padding: 37vh 0 0; }
  #index .B { padding: 10% 5% 10% 4%; }
  #index .B .tx { font-size: 4vw; text-align: left; line-height: 1.4em; color: #333333; }
  #index .B ul { margin: 5% 0; }
  #index .B li { width: 100%; margin: 0 auto; text-align: center; }
  #index .B li a { display: block; padding: 5% 9%; background: #00385f; border-radius: 5px; text-align: center; }
  #index .B li a span { font-size: 5vw; font-weight: 500; font-family: "source-han-sans-japanese"; color: #FFF; text-decoration: none; letter-spacing: 0.2vw; }
  #index .B li a:hover { background: #014e84; }
  #index .B li:last-child { padding: 2% 0 0 0; }
  #index .C { display: none; }
  #index .D, #index .G { height: 80vw; background-size: cover; background-repeat: no-repeat; background-position: center; overflow: hidden; position: relative; }
  #index .D h2, #index .G h2 { background-image: url(../images/common/dotto.png); background-repeat: repeat; padding: 10% 5% 0 5%; height: 73vw; }
  #index .D .tx, #index .G .tx { padding: 9% 5%; margin: 6% 5% 3%; background: rgba(255, 255, 255, 0.8); font-size: 4vw; text-align: left; line-height: 1.4em; color: #333333; position: absolute; top: 40%; }
  #index .D { background-image: url(../images/index/img01.jpg); }
  #index .D h2 { text-align: left; padding: 7% 5% 0 5%; font-size: 6vw; }
  #index .D h2 span { display: block; font-size: 7vw; }
  #index .E { padding: 10% 5%; }
  #index .E ul { margin: 5% 0; }
  #index .E li { width: 100%; margin: 0 auto; text-align: center; }
  #index .E li a { display: block; padding: 5% 9%; background: #00385f; border-radius: 5px; text-align: center; }
  #index .E li a span { font-size: 5vw; font-weight: 500; font-family: "source-han-sans-japanese"; color: #FFF; text-decoration: none; letter-spacing: 0.2vw; }
  #index .E li a:hover { background: #014e84; }
  #index .E li:last-child { padding: 2% 0 0 0; }
  #index .E li a { border: 1px solid #00385f; }
  #index .E li a:hover { opacity: 0.5; }
  #index .E li figure img { display: none; }
  #index .E li figure figcaption { height: 100%; padding: 5%; font-size: 5vw; font-weight: 500; font-family: "source-han-sans-japanese"; color: #00385f; text-decoration: none; letter-spacing: 0.2vw; background: rgba(255, 255, 255, 0.8); border-radius: 5px; }
  #index .E li:nth-child(1) a, #index .E li:nth-child(2) a { background-position: left; background-size: cover; }
  #index .E li:nth-child(1) a i, #index .E li:nth-child(2) a i { font-size: 1.3em; }
  #index .E li:nth-child(1) a { background-image: url(../images/index/img02.png); }
  #index .E li:nth-child(2) a { background-image: url(../images/index/img03.png); }
  #index .G { height: 100vw; overflow: visible; background-image: url(../images/index/img04.jpg); }
  #index .G .tx { margin: -8% 5% 3%; }
  #index .G a { display: block; padding: 5% 9%; background: #00385f; border-radius: 5px; text-align: center; margin: -7% 5%; background: #FFF; }
  #index .G a span { font-size: 5vw; font-weight: 500; font-family: "source-han-sans-japanese"; color: #FFF; text-decoration: none; letter-spacing: 0.2vw; }
  #index .G a:hover { background: #014e84; }
  #index .G a span { color: #00385f; }
  #index .G a:hover { background: #b7d6eb; }
  #index .H { padding: 10% 5%; background: #00385f; }
  #index .H .tx { padding: 10% 0; font-size: 4vw; text-align: left; line-height: 1.4em; color: #FFF; }
  #index .H .rbox { display: none; }
  #index .H a { display: block; padding: 5% 9%; background: #00385f; border-radius: 5px; text-align: center; background: #FFF; }
  #index .H a span { font-size: 5vw; font-weight: 500; font-family: "source-han-sans-japanese"; color: #FFF; text-decoration: none; letter-spacing: 0.2vw; }
  #index .H a:hover { background: #014e84; }
  #index .H a span { color: #00385f; }
  #index .H a:hover { background: #b7d6eb; }
  #index .I { padding: 10% 5%; }
  #index .I .lbox { display: none; }
  #index .I .redti { width: 100%; text-align: center; }
  #index .I .tx { padding: 5% 0 10%; font-size: 4vw; text-align: left; line-height: 1.4em; color: #333333; }
  #index .I a { display: block; padding: 5% 9%; background: #00385f; border-radius: 5px; text-align: center; background: #a00100; }
  #index .I a span { font-size: 5vw; font-weight: 500; font-family: "source-han-sans-japanese"; color: #FFF; text-decoration: none; letter-spacing: 0.2vw; }
  #index .I a:hover { background: #014e84; }
  #index .I a:hover { background: #850100; }
  #index .J { background-image: url(../images/index/img06.jpg); height: 25vw; background-size: cover; background-repeat: no-repeat; background-position: center; }
  #index .K { padding: 10% 5%; }
  #index .K h2 { color: #000; font-size: 6vw; }
  #index .K .box { width: 100%; margin: 5% auto; background: #f1f1f1; }
  #index .K .box table { padding: 5%; }
  #index .K .box tr { padding: 5%; }
  #index .K .box tr td { font-size: 3.8vw; text-align: left; line-height: 1.4em; color: #333333; padding: 5% 5% 0 5%; }
  #index .K .box tr td a { color: #00385f; }
  #index .K .box tr td a:hover, #index .K .box tr td a .hover { color: #b7d6eb; border-bottom: 1px solid #b7d6eb; }
  #index .K .box tr th { font-size: 3.8vw; text-align: left; line-height: 1.4em; color: #00385f; padding: 5% 0 5% 5%; }
  #index .K .box tr:last-child th { padding: 0 5% 5% 5%; }
  #index .K .box tr:last-child td { padding: 0 5% 5% 5%; }


  .index-mv_recruit{ 
    background: #850100;
    display: inline-block;
    position: absolute;
    bottom: 4%;
    left: 50%;
    transform: translateX(-50%);
    padding: 7% 10%;
    border-radius: 5px;
    width: 65%;
  }

    .index-mv_recruit p{
      font-weight: bold;
      text-align: center;
      color: white;
    }

    .index-mv_recruit p span{
      display: inline-block;
      font-size: 7vw;
      margin-bottom: 12px;
    }

  #company #index .D h2, #index .D #company h2, #company #index .G h2, #index .G #company h2, #company #index .H h2, #index .H #company h2, #company #index .K h2, #index .K #company h2, #company h2 { margin: 10% auto 5%; color: #000; }
  #company .A { background-image: url(../images/company/mainimg_base.jpg); margin: -22vh 0 0 0; height: 45vh; background-size: cover; background-repeat: no-repeat; background-position: center; }
  #company .A h1 { padding: 5%; width: 50vh; }
  #company .A h1 img { width: 30vh; margin: 20vh 0 0 -5vw; padding: 2% 2% 2% 10%; background: rgba(1, 76, 129, 0.5); }
  #company .A img { width: 28vh; }
  #company .B table { width: 100%; }
  #company .B tr { width: 90%; }
  #company .B tr th { display: block; width: 35%; background: #00385f; border-radius: 0 5px 5px 0; padding: 2% 0 2% 10%; font-size: 4vw; text-align: left; line-height: 1.4em; color: #FFF; }
  #company .B tr td { display: block; padding: 5% 5% 5% 10%; word-break: break-word; font-size: 4vw; text-align: left; line-height: 1.4em; color: #333333; }
  #company .C { margin: 5% 0 0 0; padding: 2% 0 10%; background: #dff0fc; }
  #company .C ul { padding: 5%; }
  #company .C li { display: inline-block; width: 100%; font-size: 4vw; text-align: center; line-height: 1.4em; color: #333333; }
  #company .C li:first-child { padding: 0 0 5% 0; }
  #message #index .D h2, #index .D #message h2, #message #index .G h2, #index .G #message h2, #message #index .H h2, #index .H #message h2, #message #index .K h2, #index .K #message h2, #message h2 { margin: 10% auto 5%; color: #000; }
  #message .A { background-image: url(../images/message/mainimg_base.jpg); margin: -22vh 0 0 0; height: 45vh; background-size: cover; background-repeat: no-repeat; background-position: center; }
  #message .A h1 { padding: 5%; width: 50vh; }
  #message .A h1 img { width: 30vh; margin: 20vh 0 0 -5vw; padding: 2% 2% 2% 10%; background: rgba(1, 76, 129, 0.5); }
  #message .A h1 img { width: 22vh; }
  #message .B { padding: 5%; }
  #message .B p { font-size: 4vw; text-align: center; line-height: 1.4em; color: #333333; padding: 5% 0; line-height: 1.8em; }
  #message .B .rbox { width: 100%; margin: 5% auto 10%; }
  #message .B .rbox img { padding: 0 0 0 5%; }
  #facility { margin: auto auto 10%; }
  #facility #index .D h2, #index .D #facility h2, #facility #index .G h2, #index .G #facility h2, #facility #index .H h2, #index .H #facility h2, #facility #index .K h2, #index .K #facility h2, #facility h2 { margin: 10% auto 5%; color: #000; }
  #facility .A { background-image: url(../images/facility/mainimg_base.jpg); margin: -22vh 0 0 0; height: 45vh; background-size: cover; background-repeat: no-repeat; background-position: center; }
  #facility .A h1 { padding: 5%; width: 50vh; }
  #facility .A h1 img { width: 30vh; margin: 20vh 0 0 -5vw; padding: 2% 2% 2% 10%; background: rgba(1, 76, 129, 0.5); }
  #facility .B { padding: 5% 0; }
  #facility .B ul { width: 100%; }
  #facility .B li { width: 90%; margin: 5% auto; }
  #facility .B li a { display: block; }
  #facility .B li img { width: 100%; height: 30vw; margin: 0 0 5%; border-radius: 5px; object-fit: cover; }
  #facility .B li span { line-height: 1.8; }
  #facility .B li .ti { font-size: 5vw; font-weight: 500; font-family: "source-han-sans-japanese"; color: #00385f; text-decoration: none; letter-spacing: 0.2vw; }
  #facility .B li .tx { font-size: 4vw; text-align: center; line-height: 1.4em; color: #333333; word-break: break-word; }
  #products #index .D h2, #index .D #products h2, #products #index .G h2, #index .G #products h2, #products #index .H h2, #index .H #products h2, #products #index .K h2, #index .K #products h2, #products h2 { margin: 10% auto 5%; color: #000; }
  #products .A { background-image: url(../images/products/mainimg_base.jpg); margin: -22vh 0 0 0; height: 45vh; background-size: cover; background-repeat: no-repeat; background-position: center; }
  #products .A h1 { padding: 5%; width: 50vh; }
  #products .A h1 img { width: 30vh; margin: 20vh 0 0 -5vw; padding: 2% 2% 2% 10%; background: rgba(1, 76, 129, 0.5); }
  #products .A h1 img { width: 22vh; }
  #products .C { width: 100%; }
  #products .C .bg { padding: 0 0 15%; }
  #products .C .bg:nth-child(odd) { background: #f1f1f1; }
  #products .C .bg:nth-child(even) { background: #FFF; }
  #products .C .rbox, #products .C .lbox { width: 90%; margin: 0 auto; }
  #products .C .lbox .ti { background: #014c81; padding: 2% 0 2% 10%; border-radius: 0 5px 5px 0; margin: 0 auto 0 -10%; word-break: break-word; width: 80%; }
  #products .C .lbox .tiA, #products .C .lbox .tiB { font-size: 5vw; text-align: left; line-height: 1.4em; color: #FFF; font-weight: 900; }
  #products .C .lbox .tiB { padding: 0 0 0 5%; }
  #products .C .lbox table { margin: 5% 0 5% 0; }
  #products .C .lbox th { font-size: 4vw; text-align: left; line-height: 1.4em; color: #00385f; padding: 5% 0 0; width: 15%; }
  #products .C .lbox td { font-size: 4vw; text-align: left; line-height: 1.4em; color: #333333; padding: 0 0 0 10%; word-break: break-word; width: 60%; }
  #products .C .rbox a { display: block; }
  #products .C .rbox img { width: 100%; height: 20%; border-radius: 5px; object-fit: cover; }
  #yosha #index .D h2, #index .D #yosha h2, #yosha #index .G h2, #index .G #yosha h2, #yosha #index .H h2, #index .H #yosha h2, #yosha #index .K h2, #index .K #yosha h2, #yosha h2 { margin: 10% auto 5%; color: #000; }
  #yosha .A { background-image: url(../images/yosha/mainimg_base.jpg); margin: -22vh 0 0 0; height: 45vh; background-size: cover; background-repeat: no-repeat; background-position: center; }
  #yosha .A h1 { padding: 5%; width: 50vh; }
  #yosha .A h1 img { width: 30vh; margin: 20vh 0 0 -5vw; padding: 2% 2% 2% 10%; background: rgba(1, 76, 129, 0.5); }
  #yosha .A h1 img { width: 41vh; }
  #yosha .B { padding: 5% 5% 10%; }
  #yosha .B p { font-size: 4vw; text-align: center; line-height: 1.4em; color: #333333; }
  #yosha .B .red { padding: 5% 0 0 0; font-size: 5vw; text-align: center; line-height: 1.4em; color: #850100; font-weight: 700; }
  #yosha .B ul { width: 100%; }
  #yosha .B li { width: 90%; padding: 2% 4% 5%; background: #f1f1f1; border: 3px solid #d1d1d1; border-radius: 5px; margin: 5% 0; }
  #yosha .B li .ti { font-size: 5vw; text-align: left; line-height: 1.4em; color: #00385f; font-weight: 700; line-height: 2.5; }
  #yosha .B li p { text-align: left; }
  #yosha .B li:first-child { margin: 10% 0 5% 0; }
  #yosha .C { background-image: url(../images/yosha/img01.jpg); height: 20vh; background-size: cover; background-repeat: no-repeat; background-position: center; }
  #yosha .D { padding: 0 0 10%; }
  #yosha .D .box { padding: 0 5%; }
  #yosha .D .ti { font-size: 5vw; text-align: center; line-height: 1.4em; color: #00385f; line-height: 2.5; font-weight: 700; }
  #yosha .D p { font-size: 4vw; text-align: left; line-height: 1.4em; color: #333333; }
  #yosha .D .ico { padding: 2% 0; text-align: center; color: #dddddd; }
  #sessaku #index .D h2, #index .D #sessaku h2, #sessaku #index .G h2, #index .G #sessaku h2, #sessaku #index .H h2, #index .H #sessaku h2, #sessaku #index .K h2, #index .K #sessaku h2, #sessaku h2 { margin: 10% auto 5%; color: #000; }
  #sessaku .A { background-image: url(../images/sessaku/mainimg_base.jpg); margin: -22vh 0 0 0; height: 45vh; background-size: cover; background-repeat: no-repeat; background-position: center; }
  #sessaku .A h1 { padding: 5%; width: 50vh; }
  #sessaku .A h1 img { width: 30vh; margin: 20vh 0 0 -5vw; padding: 2% 2% 2% 10%; background: rgba(1, 76, 129, 0.5); }
  #sessaku .A h1 img { width: 45vh; }
  #sessaku .B { padding: 0 0 10%; }
  #sessaku .B p { font-size: 4vw; text-align: center; line-height: 1.4em; color: #333333; padding: 0 5% 10%; }
  #sessaku .B dt { width: 35%; border-radius: 0 5px 5px 0; border: 1px solid #00385f; border-left: none; background: #dff0fc; padding: 2% 0 2% 10%; font-size: 4vw; text-align: left; line-height: 1.4em; color: #00385f; }
  #sessaku .B dd { padding: 5% 5% 5% 10%; word-break: break-word; }
  #sessaku .B dd ul { line-height: 1.6; font-size: 4vw; text-align: left; line-height: 1.4em; color: #333333; }
  #sessaku .B dd li::before { content: '・'; color: #000; }
  #sessaku .B a { display: block; padding: 5% 9%; background: #00385f; border-radius: 5px; text-align: center; margin: 5% 5% 0; }
  #sessaku .B a span { font-size: 5vw; font-weight: 500; font-family: "source-han-sans-japanese"; color: #FFF; text-decoration: none; letter-spacing: 0.2vw; }
  #sessaku .B a:hover { background: #014e84; }
  #sessaku .B a:hover { background: #014e84; }
  #sessaku .C { background-image: url(../images/sessaku/img01.jpg); height: 20vh; background-size: cover; background-repeat: no-repeat; background-position: center; }
  #sessaku .D { padding: 0 0 10%; }
  #sessaku .D .box { padding: 0 5%; }
  #sessaku .D .ti { font-size: 5vw; text-align: center; line-height: 1.4em; color: #00385f; line-height: 2.5; font-weight: 700; }
  #sessaku .D p { font-size: 4vw; text-align: left; line-height: 1.4em; color: #333333; }
  #sessaku .D .ico { padding: 2% 0; text-align: center; color: #dddddd; }
  #advantage #index .D h2, #index .D #advantage h2, #advantage #index .G h2, #index .G #advantage h2, #advantage #index .H h2, #index .H #advantage h2, #advantage #index .K h2, #index .K #advantage h2, #advantage h2 { margin: 10% auto 5%; color: #000; }
  #advantage .A { background-image: url(../images/products/mainimg_base.jpg); margin: -22vh 0 0 0; height: 45vh; background-size: cover; background-repeat: no-repeat; background-position: center; }
  #advantage .A h1 { padding: 5%; width: 50vh; }
  #advantage .A h1 img { width: 30vh; margin: 20vh 0 0 -5vw; padding: 2% 2% 2% 10%; background: rgba(1, 76, 129, 0.5); }
  #advantage .A h1 img { width: 35vh; }
  #advantage .B { padding: 0 0 5% 0; }
  #advantage .B p { font-size: 4vw; text-align: center; line-height: 1.4em; color: #333333; padding: 0 5% 5%; }
  #advantage .B p span { display: block; }
  #advantage .B dl { padding: 5% 0 0 0; font-size: 5vw; text-align: left; line-height: 1.4em; color: #850100; font-weight: 700; }
  #advantage .B dl dd { padding: 3% 5%; display: block; background: rgba(255, 255, 255, 0.8); }
  #advantage .B dl dd span { display: block; }
  #advantage .B dl .num { font-size: 15vw; padding: 7% 5% 3%; }
  #advantage .B .box { background-size: cover; background-repeat: no-repeat; background-position: center; margin: 0 0 5% 0; }
  #advantage .B .box p { font-size: 4vw; text-align: left; line-height: 1.4em; color: #333333; padding: 5% 5% 5%; }
  #advantage .B .no1 { background-image: url(../images/advantage/img01.jpg); }
  #advantage .B .no2 { background-image: url(../images/advantage/img02.jpg); }
  #advantage .B .no3 { background-image: url(../images/advantage/img03.jpg); }
  #contact #index .D h2, #index .D #contact h2, #contact #index .G h2, #index .G #contact h2, #contact #index .H h2, #index .H #contact h2, #contact #index .K h2, #index .K #contact h2, #contact h2 { margin: 10% auto 5%; color: #000; }
  #contact .A { background-image: url(../images/contact/mainimg_base.jpg); margin: -22vh 0 0 0; height: 45vh; background-size: cover; background-repeat: no-repeat; background-position: center; }
  #contact .A h1 { padding: 5%; width: 50vh; }
  #contact .A h1 img { width: 30vh; margin: 20vh 0 0 -5vw; padding: 2% 2% 2% 10%; background: rgba(1, 76, 129, 0.5); }
  #contact .A h1 img { width: 42vh; }
  #contact .B { padding: 0 5%; }
  #contact .B p { font-size: 4vw; text-align: left; line-height: 1.4em; color: #333333; padding: 5% 0; line-height: 1.8em; }
  #contact .B table { width: 100%; }
  #contact .B tr { line-height: 2; }
  #contact .B tr td { margin: 0 0 5% 0; }
  #contact .B tr:nth-child(4), #contact .B tr:nth-child(5) { line-height: 1.4; }
  #contact .B tr:nth-child(3) td, #contact .B tr:nth-child(4) td { margin: 0; }
  #contact .B .con { padding: 0 0 0 5%; font-size: 4vw; text-align: left; line-height: 1.4em; color: #000; }
  #contact .B .ico, #contact .B .con { display: inline-block; }
  #contact .B .ico1, #contact .B .ico2, #contact .B .com { margin: 7% 0 0 0; }
  #contact .B .ico1 { font-size: 4vw; text-align: left; line-height: 1.4em; color: #b60201; }
  #contact .B .ico2 { font-size: 4vw; text-align: left; line-height: 1.4em; color: #dddddd; }
  #contact .B th, #contact .B td { display: block; }
  #contact .B .form, #contact .B .form2, #contact .B .form3 { width: 97%; height: 10vw; padding: 0 0 0 2%; font-size: 4vw; background: #FFF; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"; }
  #contact .B .form3 { height: 30vw; }
  #contact .B placeholder { padding: 0 0 0 2%; }
  #contact .B ul { padding: 5% 0 10% 0; }
  #contact .B input[type="submit"], #contact .B input[type="button"] { display: inline-block; width: 100%; background-color: transparent; border: none; cursor: pointer; outline: none; padding: 0; appearance: none; font-size: 5vw; font-weight: 500; font-family: "source-han-sans-japanese"; color: #FFF; text-decoration: none; letter-spacing: 0.2vw; display: block; padding: 5% 9%; background: #00385f; border-radius: 5px; text-align: center; font-family: "FontAwesome"; }
  #contact .B input[type="submit"] span, #contact .B input[type="button"] span { font-size: 5vw; font-weight: 500; font-family: "source-han-sans-japanese"; color: #FFF; text-decoration: none; letter-spacing: 0.2vw; }
  #contact .B input[type="submit"]:hover, #contact .B input[type="button"]:hover { background: #014e84; }
  #contact .B input[type="submit"]:hover, #contact .B input[type="button"]:hover { background: #014e84; }
  #contact .B input[type="button"] { display: inline-block; }
  #contact .B input[type="text"]:-webkit-autofill, #contact .B input[type="email"]:-webkit-autofill, #contact .B textarea:-webkit-autofill, #contact .B select:-webkit-autofill { box-shadow: 0 0 0 1000px #dff0fc inset; }
  #contact .B li { margin: 5% 0 0 0; }
  #contact .red { font-size: 4vw; text-align: left; line-height: 1.4em; color: #a20100; }
  #contact .red::before { content: '\f06a'; font-family: "FontAwesome"; } }