@charset "UTF-8";
.index .main-img .ttl-wrap, .index .section .item, .subpage .main-img .item, .subpage .subpage-item .subpage-item-wrap, .lp .lp-main h1 img {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%); }

header .logo h1, header .nav ul, .subpage .form dt p, .lp .trouble .icon1, .lp .trouble .icon2, .lp .trouble .icon3, .lp .trouble .icon4, .hanaguard .main .main-btn-wrap .main-btn span, .hanaguard .main-btn-wrap_sp .main-btn span, .hanaguard .visible-xs-block.main-btn span, .hanaguard .section .reference-price .reference-price_btn span {
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%); }

.js-section .arrow, .lp .lp-main-img .gutter-destroyed, .lp .lp-main-img .roof-destroyed, .lp .lp-main-img .outer-wall-destroyed, .lp .flow img, .hanaguard .main .main-btn-wrap {
  position: absolute;
  left: 50%;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%); }

/* ==============================

テーブルレイアウト

============================== */
@media (max-width: 575.98px) {
  .subpage .infomation-area {
    margin: 40px 0 40px 0 !important; } }

.subpage .infomation-area .img {
  width: 100%; }

.subpage .infomation-area .table .cap {
  margin: 0 0 10px 0;
  font-size: 24px;
  font-size: 1.5rem;
  font-weight: bold; }
  @media (max-width: 575.98px) {
    .subpage .infomation-area .table .cap {
      font-size: 18px;
      font-size: 1.125rem; } }

.subpage .infomation-area .table dl {
  font-size: 16px;
  font-size: 1rem;
  border-bottom: 1px solid #333; }
  .subpage .infomation-area .table dl dt,
  .subpage .infomation-area .table dl dd {
    border-top: 1px solid #333;
    padding: 15px 0 15px 0;
    font-weight: normal;
    font-size: 16px;
    font-size: 1rem; }
  .subpage .infomation-area .table dl dt {
    background-color: #dcdddd;
    letter-spacing: 0.1em;
    text-align: center; }
    @media (max-width: 575.98px) {
      .subpage .infomation-area .table dl dt {
        padding: 10px 20px 10px 20px;
        text-align: left; } }
  
  .subpage .infomation-area .table dl dd {
    padding: 15px 0 15px 40px; }
    @media (max-width: 575.98px) {
      
      .subpage .infomation-area .table dl dd {
        text-align: left;
        padding: 10px 20px 10px 20px; } }

/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/
html, body, div, span, 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,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

body {
  line-height: 1;
  font-size: 62.5%;
  font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';
  -webkit-font-smoothing: antialiased; }

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

ul {
  list-style: none; }

ol {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  color: inherit;
  text-decoration: none; }
  a:hover {
    color: inherit;
    cursor: pointer;
    text-decoration: none; }

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none; }

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold; }

del {
  text-decoration: line-through; }

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help; }

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

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0; }

input, select {
  vertical-align: middle; }

button {
  border-color: transparent; }

/* ========================================

common

======================================== */
.fit {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  font-family: "object-fit: cover;"; }

.oswald {
  font-family: "Oswald", sans-serif; }

.tel:before {
  content: " ";
  background: url(../image/tel.svg) no-repeat center left; }

body.fixed {
  position: fixed;
  width: 100%; }

.text-left {
  text-align: left !important; }

.anton {
  font-family: "Anton", sans-serif;
  font-size: 14px;
  font-size: 0.875rem; }
  @media (max-width: 575.98px) {
    .anton {
      font-size: 12px;
      font-size: 0.75rem; } }

@media (max-width: 575.98px) {
  .sp-block {
    display: block !important; } }

.p0 {
  padding: 0 !important; }

.m0 {
  margin: 0 !important; }

.text-center-pc_tb {
  text-align: center; }
  @media (max-width: 575.98px) {
    .text-center-pc_tb {
      text-align: left; } }

/* ==========================================
    下矢印
============================================= */
.js-section {
  position: relative; }
  .js-section .arrow {
    left: 48.4%;
    height: 34px;
    opacity: 0;
    color: #fff;
    bottom: 50px;
    width: 70px;
    -webkit-animation: float_3031 2s linear infinite;
    animation: float_3031 2s linear infinite;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    z-index: 10;
    -webkit-filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.2));
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.2)); }
    @media (max-width: 1199.98px) {
      .js-section .arrow {
        bottom: 100px;
        width: 70px;
        height: 35px; } }
    @media (max-width: 991.98px) {
      .js-section .arrow {
        left: 45.3%; } }
    @media (max-width: 575.98px) {
      .js-section .arrow {
        left: 42.4%;
        bottom: 15%;
        width: 55px;
        height: 25px; } }

@-webkit-keyframes float_3031 {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  50% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px); }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes float_3031 {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  50% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px); }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

/* ==========================================
    下線
============================================= */
.horizon {
  width: 0;
  height: 5px; }

.horizon1 {
  background: #e74c3c; }

.horizon2 {
  background: #00a0e9; }

.horizon3 {
  background: #fabe00; }

.horizon4 {
  background: #ec6d81; }

.recruit .horizon5 {
  background: #8fc31f; }

.infomation .horizon5 {
  background: #9fa0a0; }

.horizon6 {
  background: #9fa0a0; }

.horizon7 {
  background: #8fc31f; }

.horizon8 {
  background: #000; }

/* ==========================================
ボタン
============================================= */
.button {
  margin: 30px auto 60px;
  display: block;
  width: 260px;
  text-align: center;
  text-decoration: none;
  line-height: 54px;
  outline: none;
  font-size: 16px;
  font-size: 1rem; }
  .button input {
    width: 100%;
    background: none;
    border: 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 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s; }

.button {
  position: relative;
  z-index: 2;
  background-color: #333;
  border: 2px solid #333;
  color: #fff;
  line-height: 50px; }

.button:hover {
  background-color: #fff;
  border-color: #333;
  color: #333; }

.button::before,
.button::after {
  left: 0;
  width: 100%;
  height: 50%;
  background-color: #333; }

.button::before {
  top: 0; }

.button::after {
  bottom: 0; }

.button:hover::before,
.button:hover::after {
  height: 0;
  background-color: #333; }

/* ==========================================
    日本全国対応 設計・施工 職人出張サービス
============================================= */
.three-point {
  margin: -30px auto 20px;
  width: 415px; }
  @media (max-width: 575.98px) {
    .three-point {
      width: auto; } }
  .three-point li {
    margin: 0 5px 0 0;
    padding: 7px 15px;
    float: left;
    color: #fff;
    font-size: 16px;
    font-size: 1rem;
    font-weight: bold;
    text-align: center; }
    @media (max-width: 575.98px) {
      .three-point li {
        margin: 5px auto 0;
        float: none; } }
  .three-point li:nth-child(1) {
    background-color: #3d62ad; }
  .three-point li:nth-child(2) {
    background-color: #41b25d; }
  .three-point li:nth-child(3) {
    background-color: #f08300; }

/* IE対応 */
@media all and (-ms-high-contrast: none) {
  body {
    font-family: "メイリオ", Meiryo, sans-serif; } }

/* ==============================

header

===============================*/
header {
  width: 100%;
  height: 80px;
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  z-index: 100;
  /* ==============================
  ドロワーメニュー
  ===============================*/ }
  @media (max-width: 575.98px) {
    header {
      background-color: black; } }
  @media (max-width: 575.98px) {
    header {
      height: 55px; } }
  header .logo {
    width: 20%;
    padding: 0 20px;
    background-color: #000;
    height: 80px;
    position: relative;
    float: left; }
    @media (max-width: 1199.98px) {
      header .logo {
        padding: 0 15px;
        width: 14%; } }
    @media (max-width: 991.98px) {
      header .logo {
        width: 27%; } }
    @media (max-width: 575.98px) {
      header .logo {
        width: 60%;
        height: 55px;
        background-color: transparent; } }
    header .logo h1 {
      width: 85%; }
      @media (max-width: 1199.98px) {
        header .logo h1 {
          height: 18px;
          width: 75%; } }
      header .logo h1 img {
        width: 100%; }
  header .nav {
    width: 80%;
    float: left;
    color: #fff;
    position: relative;
    height: 80px; }
    @media (max-width: 1199.98px) {
      header .nav {
        width: 86%; } }
    @media (max-width: 991.98px) {
      header .nav {
        width: 70%; } }
    header .nav ul {
      margin: 0;
      width: 100%; }
      @media (max-width: 1199.98px) {
        header .nav ul {
          margin: 0; } }
      header .nav ul li {
        margin: 0 0 0 3%;
        font-size: 16px;
        font-size: 1rem;
        float: left; }
        @media (max-width: 1199.98px) {
          header .nav ul li {
            margin: 0 0 0 1.5%; } }
        @media (max-width: 991.98px) {
          header .nav ul li {
            margin: 0 0 0 2.5%;
            font-size: 14px;
            font-size: 0.875rem; } }
        header .nav ul li a {
          text-align: center; }
          header .nav ul li a .anton {
            margin: 5px 0 0 0;
            display: inline-block; }
        header .nav ul li:nth-child(1) a {
          position: relative;
          display: inline-block;
          text-decoration: none; }
          header .nav ul li:nth-child(1) a::after {
            position: absolute;
            left: 0;
            content: '';
            width: 100%;
            height: 2px;
            background: #e74c3c;
            bottom: -4px;
            -webkit-transform: scale(0, 1);
            -ms-transform: scale(0, 1);
            transform: scale(0, 1);
            -webkit-transition: -webkit-transform .3s;
            transition: -webkit-transform .3s;
            -o-transition: transform .3s;
            transition: transform .3s;
            transition: transform .3s, -webkit-transform .3s;
            -webkit-transform-origin: right top;
            -ms-transform-origin: right top;
            transform-origin: right top; }
          header .nav ul li:nth-child(1) a:hover::after {
            -webkit-transform-origin: left top;
            -ms-transform-origin: left top;
            transform-origin: left top;
            -webkit-transform: scale(1, 1);
            -ms-transform: scale(1, 1);
            transform: scale(1, 1); }
        header .nav ul li:nth-child(2) a {
          position: relative;
          display: inline-block;
          text-decoration: none; }
          header .nav ul li:nth-child(2) a::after {
            position: absolute;
            left: 0;
            content: '';
            width: 100%;
            height: 2px;
            background: #00a0e9;
            bottom: -4px;
            -webkit-transform: scale(0, 1);
            -ms-transform: scale(0, 1);
            transform: scale(0, 1);
            -webkit-transition: -webkit-transform .3s;
            transition: -webkit-transform .3s;
            -o-transition: transform .3s;
            transition: transform .3s;
            transition: transform .3s, -webkit-transform .3s;
            -webkit-transform-origin: right top;
            -ms-transform-origin: right top;
            transform-origin: right top; }
          header .nav ul li:nth-child(2) a:hover::after {
            -webkit-transform-origin: left top;
            -ms-transform-origin: left top;
            transform-origin: left top;
            -webkit-transform: scale(1, 1);
            -ms-transform: scale(1, 1);
            transform: scale(1, 1); }
        header .nav ul li:nth-child(3) a {
          position: relative;
          display: inline-block;
          text-decoration: none; }
          header .nav ul li:nth-child(3) a::after {
            position: absolute;
            left: 0;
            content: '';
            width: 100%;
            height: 2px;
            background: #0c3388;
            bottom: -4px;
            -webkit-transform: scale(0, 1);
            -ms-transform: scale(0, 1);
            transform: scale(0, 1);
            -webkit-transition: -webkit-transform .3s;
            transition: -webkit-transform .3s;
            -o-transition: transform .3s;
            transition: transform .3s;
            transition: transform .3s, -webkit-transform .3s;
            -webkit-transform-origin: right top;
            -ms-transform-origin: right top;
            transform-origin: right top; }
          header .nav ul li:nth-child(3) a:hover::after {
            -webkit-transform-origin: left top;
            -ms-transform-origin: left top;
            transform-origin: left top;
            -webkit-transform: scale(1, 1);
            -ms-transform: scale(1, 1);
            transform: scale(1, 1); }
        header .nav ul li:nth-child(4) a {
          position: relative;
          display: inline-block;
          text-decoration: none; }
          header .nav ul li:nth-child(4) a::after {
            position: absolute;
            left: 0;
            content: '';
            width: 100%;
            height: 2px;
            background: #fabe00;
            bottom: -4px;
            -webkit-transform: scale(0, 1);
            -ms-transform: scale(0, 1);
            transform: scale(0, 1);
            -webkit-transition: -webkit-transform .3s;
            transition: -webkit-transform .3s;
            -o-transition: transform .3s;
            transition: transform .3s;
            transition: transform .3s, -webkit-transform .3s;
            -webkit-transform-origin: right top;
            -ms-transform-origin: right top;
            transform-origin: right top; }
          header .nav ul li:nth-child(4) a:hover::after {
            -webkit-transform-origin: left top;
            -ms-transform-origin: left top;
            transform-origin: left top;
            -webkit-transform: scale(1, 1);
            -ms-transform: scale(1, 1);
            transform: scale(1, 1); }
        header .nav ul li:nth-child(5) a {
          position: relative;
          display: inline-block;
          text-decoration: none; }
          header .nav ul li:nth-child(5) a::after {
            position: absolute;
            left: 0;
            content: '';
            width: 100%;
            height: 2px;
            background: #ec6d81;
            bottom: -4px;
            -webkit-transform: scale(0, 1);
            -ms-transform: scale(0, 1);
            transform: scale(0, 1);
            -webkit-transition: -webkit-transform .3s;
            transition: -webkit-transform .3s;
            -o-transition: transform .3s;
            transition: transform .3s;
            transition: transform .3s, -webkit-transform .3s;
            -webkit-transform-origin: right top;
            -ms-transform-origin: right top;
            transform-origin: right top; }
          header .nav ul li:nth-child(5) a:hover::after {
            -webkit-transform-origin: left top;
            -ms-transform-origin: left top;
            transform-origin: left top;
            -webkit-transform: scale(1, 1);
            -ms-transform: scale(1, 1);
            transform: scale(1, 1); }
        header .nav ul li:nth-child(6) a {
          position: relative;
          display: inline-block;
          text-decoration: none; }
          header .nav ul li:nth-child(6) a::after {
            position: absolute;
            left: 0;
            content: '';
            width: 100%;
            height: 2px;
            background: #8fc31f;
            bottom: -4px;
            -webkit-transform: scale(0, 1);
            -ms-transform: scale(0, 1);
            transform: scale(0, 1);
            -webkit-transition: -webkit-transform .3s;
            transition: -webkit-transform .3s;
            -o-transition: transform .3s;
            transition: transform .3s;
            transition: transform .3s, -webkit-transform .3s;
            -webkit-transform-origin: right top;
            -ms-transform-origin: right top;
            transform-origin: right top; }
          header .nav ul li:nth-child(6) a:hover::after {
            -webkit-transform-origin: left top;
            -ms-transform-origin: left top;
            transform-origin: left top;
            -webkit-transform: scale(1, 1);
            -ms-transform: scale(1, 1);
            transform: scale(1, 1); }
        header .nav ul li:nth-child(7) a {
          position: relative;
          display: inline-block;
          text-decoration: none; }
          header .nav ul li:nth-child(7) a::after {
            position: absolute;
            left: 0;
            content: '';
            width: 100%;
            height: 2px;
            background: #9fa0a0;
            bottom: -4px;
            -webkit-transform: scale(0, 1);
            -ms-transform: scale(0, 1);
            transform: scale(0, 1);
            -webkit-transition: -webkit-transform .3s;
            transition: -webkit-transform .3s;
            -o-transition: transform .3s;
            transition: transform .3s;
            transition: transform .3s, -webkit-transform .3s;
            -webkit-transform-origin: right top;
            -ms-transform-origin: right top;
            transform-origin: right top; }
          header .nav ul li:nth-child(7) a:hover::after {
            -webkit-transform-origin: left top;
            -ms-transform-origin: left top;
            transform-origin: left top;
            -webkit-transform: scale(1, 1);
            -ms-transform: scale(1, 1);
            transform: scale(1, 1); }
        header .nav ul li:nth-child(8) a {
          position: relative;
          display: inline-block;
          text-decoration: none; }
          header .nav ul li:nth-child(8) a::after {
            position: absolute;
            left: 0;
            content: '';
            width: 100%;
            height: 2px;
            background: #000;
            bottom: -4px;
            -webkit-transform: scale(0, 1);
            -ms-transform: scale(0, 1);
            transform: scale(0, 1);
            -webkit-transition: -webkit-transform .3s;
            transition: -webkit-transform .3s;
            -o-transition: transform .3s;
            transition: transform .3s;
            transition: transform .3s, -webkit-transform .3s;
            -webkit-transform-origin: right top;
            -ms-transform-origin: right top;
            transform-origin: right top; }
          header .nav ul li:nth-child(8) a:hover::after {
            -webkit-transform-origin: left top;
            -ms-transform-origin: left top;
            transform-origin: left top;
            -webkit-transform: scale(1, 1);
            -ms-transform: scale(1, 1);
            transform: scale(1, 1); }
      header .nav ul .current a::after {
        -webkit-transform: scale(1, 1) !important;
        -ms-transform: scale(1, 1) !important;
        transform: scale(1, 1) !important;
        -webkit-transform-origin: left top !important;
        -ms-transform-origin: left top !important;
        transform-origin: left top !important; }
  header .menu-trigger-wrap {
    margin: 14px;
    float: right; }
    @media (max-width: 991.98px) {
      header .menu-trigger-wrap {
        margin: 27px; } }
    @media (max-width: 575.98px) {
      header .menu-trigger-wrap {
        margin: 15px; } }
  header .menu-trigger,
  header .menu-trigger span {
    display: inline-block;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
  header .menu-trigger {
    position: relative;
    width: 30px;
    height: 24px; }
  header .menu-trigger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #fff;
    border-radius: 4px; }
  header .menu-trigger span:nth-of-type(1) {
    top: 0; }
  header .menu-trigger span:nth-of-type(2) {
    top: 10px; }
  header .menu-trigger span:nth-of-type(3) {
    bottom: 0; }
  header .menu-trigger.active span:nth-of-type(1) {
    width: 45%;
    -webkit-transform: translate3d(2px, 10px, 0) rotate(405deg);
    transform: translate3d(1px, 4px, 0) rotate(405deg); }
  header .menu-trigger.active span:nth-of-type(2) {
    -webkit-transform: translate3d(-1px, 0, 0) rotate(-45deg);
    transform: translate3d(-1px, 0, 0) rotate(-45deg); }
  header .menu-trigger.active span:nth-of-type(3) {
    width: 45%;
    -webkit-transform: translate3d(23px, -9px, 0) rotate(405deg);
    transform: translate3d(13px, -5px, 0) rotate(405deg); }
  header .drawer-menu {
    padding: 50px 20px 100px;
    position: fixed;
    top: 55px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 16px;
    font-size: 1rem;
    display: none;
    overflow: scroll;
    -webkit-overflow-scrolling: touch; }
    header .drawer-menu a {
      padding: 20px 0;
      border-top: 1px solid #fff;
      display: block; }
      header .drawer-menu a .fas {
        float: right; }
    header .drawer-menu li:last-child a {
      border-bottom: 1px solid #fff; }

/*=========================================

top

======================================== */
/* ========================================
メインイメージ
======================================== */
.index {
  overflow-x: hidden;
  /* ==========================================
    コンテンツ
    ============================================= */
  /* ==========================================
    ナビゲーション
    ============================================= */
  /* ==========================================
    背景マウス
    ============================================= */ }
  .index .main-img {
    width: 100%;
    height: 100vh !important;
    z-index: 1;
    position: static !important;
    background-position: center center; }
    .index .main-img .ttl-wrap {
      width: 100%; }
      @media (max-width: 575.98px) {
        .index .main-img .ttl-wrap {
          top: 43%; } }
      .index .main-img .ttl-wrap .logo {
        position: relative;
        text-align: center;
        top: 40px;
        opacity: 0; }
        .index .main-img .ttl-wrap .logo img {
          width: 200px;
          height: 150px;
          display: inline-block; }
          @media (max-width: 575.98px) {
            .index .main-img .ttl-wrap .logo img {
              width: 150px;
              height: 115px; } }
      .index .main-img .ttl-wrap .lead-en {
        margin: 20px 0;
        font-size: 84px;
        font-size: 5.25rem;
        font-weight: 900;
        color: #fff;
        visibility: hidden !important;
        text-align: center; }
        @media (max-width: 1199.98px) {
          .index .main-img .ttl-wrap .lead-en {
            font-size: 56px;
            font-size: 3.5rem; } }
        @media (max-width: 575.98px) {
          .index .main-img .ttl-wrap .lead-en {
            font-size: 52px;
            font-size: 3.25rem; } }
      .index .main-img .ttl-wrap .lead-ja {
        font-size: 34px;
        font-size: 2.125rem;
        color: #fff;
        text-align: center;
        visibility: hidden !important; }
        @media (max-width: 1199.98px) {
          .index .main-img .ttl-wrap .lead-ja {
            font-size: 28px;
            font-size: 1.75rem; } }
        @media (max-width: 575.98px) {
          .index .main-img .ttl-wrap .lead-ja {
            font-size: 18px;
            font-size: 1.125rem; } }
  .index .section {
    width: 100%;
    height: 100vh;
    position: relative;
    display: block;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden; }
    .index .section .item {
      padding: 40px 3% 40px;
      text-align: center;
      background-color: rgba(255, 255, 255, 0.8);
      opacity: 0;
      width: 490px;
      z-index: 10; }
      @media (max-width: 575.98px) {
        .index .section .item {
          padding: 30px 3% 25px;
          width: 80%; } }
      .index .section .item a {
        display: block; }
      .index .section .item .en {
        padding: 0 12px 30px;
        font-size: 34px;
        font-size: 2.125rem;
        visibility: hidden; }
        @media (max-width: 575.98px) {
          .index .section .item .en {
            padding: 0 0 25px;
            font-size: 28px;
            font-size: 1.75rem; } }
      .index .section .item .ja {
        padding: 30px 0 0;
        font-size: 38px;
        font-size: 2.375rem;
        visibility: hidden;
        font-weight: 700; }
        @media (max-width: 575.98px) {
          .index .section .item .ja {
            padding: 25px 0 0;
            font-size: 24px;
            font-size: 1.5rem; } }
      .index .section .item .hanaguard-ja {
        padding: 30px 0 0;
        font-size: 32px;
        font-size: 2rem;
        font-weight: 700;
        line-height: 50px;
        opacity: 0; }
        @media (max-width: 575.98px) {
          .index .section .item .hanaguard-ja {
            padding: 25px 0 0;
            font-size: 24px;
            font-size: 1.5rem;
            line-height: 38px; } }
      .index .section .item .more {
        margin: 25px 0 0;
        font-size: 20px;
        font-size: 1.25rem; }
        @media (max-width: 575.98px) {
          .index .section .item .more {
            margin: 18px 0 0; } }
        .index .section .item .more i {
          margin: 0 5px 0 0; }
  .index .recruit-wrap,
  .index .infomation-wrap {
    width: 50%;
    height: 60vh;
    float: left; }
    @media (max-width: 991.98px) {
      .index .recruit-wrap,
      .index .infomation-wrap {
        width: 100%;
        float: none; } }
  .index .trust {
    background-image: url("../image/content-bk1.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh; }
  .index .duct {
    background-image: url("../image/content-bk2.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh; }
  .index .hanaguard {
    background-image: url("../image/content-bk7.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh; }
  .index .room {
    background-image: url("../image/content-bk3.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh; }
  .index .reform {
    background-image: url("../image/content-bk4.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh; }
  .index .recruit-wrap {
    background-image: url("../image/content-bk5.jpg");
    background-position: center top;
    background-repeat: no-repeat; }
  .index .infomation-wrap {
    background-image: url("../image/content-bk6.jpg");
    background-position: center top;
    background-repeat: no-repeat; }
  @media (min-width: 768px) {
    .index {
      /*----- button 1 -----*/ }
      .index .trust .item::before,
      .index .trust .item::after {
        background: #e74c3c; }
      .index .trust .item-wrap::before,
      .index .trust .item-wrap::after {
        background: #e74c3c; }
      .index .duct .item::before,
      .index .duct .item::after {
        background: #00a0e9; }
      .index .duct .item-wrap::before,
      .index .duct .item-wrap::after {
        background: #00a0e9; }
      .index .hanaguard .item::before,
      .index .hanaguard .item::after {
        background: #0c3388; }
      .index .hanaguard .item-wrap::before,
      .index .hanaguard .item-wrap::after {
        background: #0c3388; }
      .index .room .item::before,
      .index .room .item::after {
        background: #fabe00; }
      .index .room .item-wrap::before,
      .index .room .item-wrap::after {
        background: #fabe00; }
      .index .reform .item::before,
      .index .reform .item::after {
        background: #ec6d81; }
      .index .reform .item-wrap::before,
      .index .reform .item-wrap::after {
        background: #ec6d81; }
      .index .recruit-wrap .item::before,
      .index .recruit-wrap .item::after {
        background: #8fc31f; }
      .index .recruit-wrap .item-wrap::before,
      .index .recruit-wrap .item-wrap::after {
        background: #8fc31f; }
      .index .infomation-wrap .item::before,
      .index .infomation-wrap .item::after {
        background: #9fa0a0; }
      .index .infomation-wrap .item-wrap::before,
      .index .infomation-wrap .item-wrap::after {
        background: #9fa0a0; }
      .index .item::before,
      .index .item::after {
        content: "";
        width: 0;
        height: 3px;
        position: absolute;
        -webkit-transition: all 0.2s linear;
        -o-transition: all 0.2s linear;
        transition: all 0.2s linear; }
      .index .item .item-wrap::before,
      .index .item .item-wrap::after {
        content: "";
        width: 3px;
        height: 0;
        position: absolute;
        -webkit-transition: all 0.2s linear;
        -o-transition: all 0.2s linear;
        transition: all 0.2s linear; }
      .index .item:hover::before,
      .index .item:hover::after {
        width: 100%; }
      .index .item:hover .item-wrap::before,
      .index .item:hover .item-wrap::after {
        height: 100%; }
      .index .item::before,
      .index .btn-1::after {
        -webkit-transition-delay: 0.2s;
        -o-transition-delay: 0.2s;
        transition-delay: 0.2s; }
      .index .item .item-wrap::before,
      .index .btn-1 .item-wrap::after {
        -webkit-transition-delay: 0s;
        -o-transition-delay: 0s;
        transition-delay: 0s; }
      .index .item::before {
        right: 0;
        top: 0; }
      .index .item::after {
        left: 0;
        bottom: 0; }
      .index .item .item-wrap::before {
        left: 0;
        top: 0; }
      .index .item .item-wrap::after {
        right: 0;
        bottom: 0; }
      .index .item:hover::before,
      .index .item:hover::after {
        -webkit-transition-delay: 0s;
        -o-transition-delay: 0s;
        transition-delay: 0s; }
      .index .item:hover .item-wrap::before,
      .index .item:hover .item-wrap::after {
        -webkit-transition-delay: 0.2s;
        -o-transition-delay: 0.2s;
        transition-delay: 0.2s; } }
  .index .nav-fix {
    color: black;
    margin-top: -63.5px;
    right: 17px;
    position: fixed;
    z-index: 100;
    margin-top: -32px;
    top: 50%;
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px; }
    @media (max-width: 991.98px) {
      .index .nav-fix {
        right: 0; } }
    .index .nav-fix li {
      display: block;
      width: 19px;
      height: 19px;
      margin: 7px;
      position: relative; }
    .index .nav-fix li:hover .fp-tooltip {
      -webkit-transition: opacity 0.2s ease-in;
      -o-transition: opacity 0.2s ease-in;
      transition: opacity 0.2s ease-in;
      width: auto;
      opacity: 1; }
    .index .nav-fix a {
      display: block;
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
      cursor: pointer;
      text-decoration: none; }
    .index .nav-fix a.active span {
      background: #fff; }
    .index .nav-fix span {
      top: 2px;
      left: 2px;
      width: 15px;
      height: 15px;
      border: 1px solid #fff;
      background: rgba(0, 0, 0, 0);
      border-radius: 50%;
      position: absolute;
      z-index: 1; }
    .index .nav-fix ul li .fp-tooltip {
      position: absolute;
      top: -9px;
      color: #fff;
      font-size: 14px;
      font-family: arial, helvetica, sans-serif;
      white-space: nowrap;
      max-width: 220px;
      overflow: hidden;
      display: block;
      opacity: 0;
      width: 0;
      right: 33px;
      background-color: rgba(0, 0, 0, 0.7);
      padding: 10px;
      border-radius: 20px;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px; }
  .index .mask-dot {
    opacity: .4;
    background: url("../image/overlays/01.png") center center;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
    border: none;
    padding: 0;
    margin: 0;
    z-index: 5; }

/* ========================================

subpage

======================================== */
.subpage {
  padding: 80px 0 0 0;
  /* ==============================
    メインイメージ
    ============================== */
  /* ==============================
    キャプション
    ============================== */
  /* ==============================
    施工実績
    ============================== */
  /* ==============================
    リード文
    ============================== */
  /* ==============================
    コンテンツ
    ============================== */
  /* ==============================
    ハナテックの信頼
    ============================== */
  /* ==============================
    企業情報
    ============================== */
  /* ==============================
    採用情報
    ============================== */
  /* ==============================
    お問い合わせ
    ============================== */ }
  @media (max-width: 575.98px) {
    .subpage {
      padding: 55px 0 0 0; } }
  .subpage .main-img-wrap {
    background-color: #000;
    overflow: hidden; }
  .subpage .main-img {
    background-repeat: no-repeat;
    background-size: cover;
    height: 280px;
    background-position: center center;
    width: 66%;
    overflow-x: hidden; }
    @media (max-width: 991.98px) {
      .subpage .main-img {
        width: 100%; } }
    @media (max-width: 575.98px) {
      .subpage .main-img {
        height: 240px; } }
    .subpage .main-img .item {
      background-color: rgba(255, 255, 255, 0.6); }
  .subpage .main-img.dust {
    background-image: url("../image/duct/main-img.jpg"); }
  .subpage .main-img.room-construction {
    background-image: url("../image/room-construction/main-img.jpg"); }
  .subpage .main-img.reform {
    background-image: url("../image/reform/main-img.jpg"); }
  .subpage .main-img.trust {
    background-image: url("../image/trust/main-img.jpg"); }
  .subpage .main-img.infomation {
    background-image: url("../image/infomation/main-img.jpg"); }
  .subpage .main-img.recruit {
    background-image: url("../image/recruit/main-img.jpg"); }
  .subpage .subpage-item {
    height: 100%;
    background-color: #000;
    width: 0%;
    position: absolute;
    right: 0; }
    @media (max-width: 991.98px) {
      .subpage .subpage-item {
        height: 180px;
        bottom: 35px;
        left: 50%;
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        border-bottom: none; } }
    @media (max-width: 575.98px) {
      .subpage .subpage-item {
        height: 140px;
        bottom: 20px;
        background-color: rgba(0, 0, 0, 0.6);
        top: 50%;
        left: 50%;
        -ms-transform: translateY(-50%) translateX(-50%);
        transform: translateY(-50%) translateX(-50%);
        -webkit-transform: translateY(-50%) translateX(-50%); } }
    .subpage .subpage-item .subpage-item-wrap {
      width: 70%;
      top: 50%; }
      @media (max-width: 991.98px) {
        .subpage .subpage-item .subpage-item-wrap {
          top: 50%; } }
      @media (max-width: 575.98px) {
        .subpage .subpage-item .subpage-item-wrap {
          width: 80%; } }
    .subpage .subpage-item .en {
      padding: 0 0 25px;
      font-size: 34px;
      font-size: 2.125rem;
      visibility: hidden;
      text-align: center;
      color: #fff; }
      @media (max-width: 1280.98px) {
        .subpage .subpage-item .en {
          font-size: 30px;
          font-size: 1.875rem; } }
      @media (max-width: 575.98px) {
        .subpage .subpage-item .en {
          padding: 0 0 15px;
          font-size: 22px;
          font-size: 1.375rem;
          color: #fff; } }
    .subpage .subpage-item .ja {
      padding: 25px 0 0;
      font-size: 34px;
      font-size: 2.125rem;
      visibility: hidden;
      text-align: center;
      color: #fff; }
      @media (max-width: 1280.98px) {
        .subpage .subpage-item .ja {
          font-size: 30px;
          font-size: 1.875rem; } }
      @media (max-width: 575.98px) {
        .subpage .subpage-item .ja {
          padding: 15px 0 0;
          font-size: 22px;
          font-size: 1.375rem;
          color: #fff; } }
  .subpage .item {
    padding: 40px 3% 40px;
    text-align: center;
    opacity: 0;
    width: 490px; }
    @media (max-width: 575.98px) {
      .subpage .item {
        padding: 40px 3%;
        width: 310px; } }
    .subpage .item a {
      display: block; }
    .subpage .item .en {
      padding: 0 12px 20px;
      font-size: 34px;
      font-size: 2.125rem;
      visibility: hidden; }
      @media (max-width: 575.98px) {
        .subpage .item .en {
          padding: 0 0 20px;
          font-size: 28px;
          font-size: 1.75rem; } }
    .subpage .item .ja {
      padding: 30px 0 0;
      font-size: 34px;
      font-size: 2.125rem;
      visibility: hidden; }
      @media (max-width: 575.98px) {
        .subpage .item .ja {
          padding: 23px 0 0;
          font-size: 22px;
          font-size: 1.375rem; } }
  .subpage .achievements-list {
    margin: 0 0 60px 0;
    text-align: center;
    font-size: 18px;
    font-size: 1.125rem; }
    @media (max-width: 575.98px) {
      .subpage .achievements-list {
        margin: 40px 0 0;
        font-size: 16px;
        font-size: 1rem;
        line-height: 26px;
        line-height: 1.625rem; } }
    .subpage .achievements-list li {
      padding: 17px 0;
      border-top: 1px solid #aaa; }
    .subpage .achievements-list li:last-child {
      border-top: 1px solid #aaa;
      border-bottom: 1px solid #aaa; }
  .subpage .lead-wrap {
    margin: 60px auto 40px; }
    @media (max-width: 575.98px) {
      .subpage .lead-wrap {
        margin: 60px 0 0; } }
    .subpage .lead-wrap h2 {
      margin: 0 0 40px;
      font-weight: 700; }
      .subpage .lead-wrap h2 p {
        font-size: 38px;
        font-size: 2.375rem;
        line-height: 54px;
        line-height: 3.375rem;
        visibility: hidden;
        text-align: center; }
        @media (max-width: 991.98px) {
          .subpage .lead-wrap h2 p {
            font-size: 28px;
            font-size: 1.75rem; } }
        @media (max-width: 575.98px) {
          .subpage .lead-wrap h2 p {
            font-size: 19px;
            font-size: 1.1875rem;
            line-height: 30px;
            line-height: 1.875rem;
            text-align: left; } }
    .subpage .lead-wrap .text {
      margin: 0 0 40px 0;
      text-align: center;
      font-size: 18px;
      font-size: 1.125rem;
      line-height: 38px;
      line-height: 2.375rem; }
      @media (max-width: 575.98px) {
        .subpage .lead-wrap .text {
          margin: 0 0 40px 0;
          font-size: 16px;
          font-size: 1rem;
          line-height: 36px;
          line-height: 2.25rem;
          text-align: left; } }
    .subpage .lead-wrap .duct-const_img_wrap {
      max-width: 800px;
      margin: 60px auto 40px; }
    .subpage .lead-wrap .duct-const_img {
      margin: 0 20px 0;
      max-width: 780px; }
  .subpage .subpage-const_wrap .item {
    margin: 0 auto; }
    @media (max-width: 575.98px) {
      .subpage .subpage-const_wrap .item {
        padding: 40px 3% 20px;
        width: 310px; } }
  .subpage .subpage-const_wrap .president {
    border: 1px solid #eee; }
  @media (max-width: 575.98px) {
    .subpage .subpage-const_wrap .text-wrap {
      text-align: left; } }
  .subpage .subpage-const_wrap p {
    text-align: center;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 38px;
    line-height: 2.375rem; }
    @media (max-width: 575.98px) {
      .subpage .subpage-const_wrap p {
        font-size: 16px;
        font-size: 1rem;
        line-height: 36px;
        line-height: 2.25rem; } }
  .subpage .subpage-const_wrap .subpage-img_list {
    margin: 30px -15px 100px;
    text-align: right; }
    .subpage .subpage-const_wrap .subpage-img_list p {
      margin: 10px 0 30px 0;
      text-align: left !important;
      -webkit-font-feature-settings: "palt";
      font-feature-settings: "palt";
      list-style-type: disc !important;
      line-height: 26px;
      line-height: 1.625rem; }
    .subpage .subpage-const_wrap .subpage-img_list .left {
      float: left; }
    .subpage .subpage-const_wrap .subpage-img_list .right {
      float: right;
      text-align: right; }
    @media (max-width: 575.98px) {
      .subpage .subpage-const_wrap .subpage-img_list {
        margin: 40px 0 40px; } }
    @media (max-width: 575.98px) {
      .subpage .subpage-const_wrap .subpage-img_list li {
        margin: 0 0 15px 0; } }
  .subpage .trust-content {
    overflow: hidden; }
    .subpage .trust-content .secrion {
      margin: 0 -15px 80px; }
    .subpage .trust-content .heading-wrap {
      margin: 40px 0 0; }
      @media (max-width: 575.98px) {
        .subpage .trust-content .heading-wrap {
          margin: 20px 0 0; } }
    .subpage .trust-content .icon {
      width: 50px;
      height: 80px;
      float: left; }
    .subpage .trust-content h2 {
      margin: 10px 0 0 20px;
      font-size: 38px;
      font-size: 2.375rem;
      float: left; }
      @media (max-width: 575.98px) {
        .subpage .trust-content h2 {
          margin: 13px 0 0 10px;
          font-size: 26px;
          font-size: 1.625rem; } }
    .subpage .trust-content .desc-wrap {
      margin: 70px 0 0; }
      @media (max-width: 575.98px) {
        .subpage .trust-content .desc-wrap {
          margin: 20px 0 0; } }
      .subpage .trust-content .desc-wrap h3 {
        font-size: 36px;
        font-size: 2.25rem; }
        @media (max-width: 575.98px) {
          .subpage .trust-content .desc-wrap h3 {
            font-size: 23px;
            font-size: 1.4375rem; } }
      .subpage .trust-content .desc-wrap .desc-horizon {
        margin: 15px 0;
        width: 100%;
        height: 5px;
        background-color: #e74c3c; }
      .subpage .trust-content .desc-wrap p {
        text-align: left;
        font-size: 16px;
        font-size: 1rem;
        line-height: 26px;
        line-height: 1.625rem; }
        @media (max-width: 575.98px) {
          .subpage .trust-content .desc-wrap p {
            text-align: left; } }
    .subpage .trust-content .trust4 .icon {
      width: 70px; }
      @media (max-width: 575.98px) {
        .subpage .trust-content .trust4 .icon {
          width: 60px; } }
    .subpage .trust-content .trust4 h2 {
      margin: 0 0 0 20px; }
    @media (max-width: 575.98px) {
      .subpage .trust-content .step-bar {
        margin: 40px 0 0 0; } }
  @media (max-width: 575.98px) {
    .subpage .lead-wrap.infomation {
      margin: 20px 0; } }
  .subpage .lead-wrap.infomation h2 {
    margin: 25px 0; }
  .subpage .subpage-const_wrap .president-voice {
    margin: 0 0 80px; }
    @media (max-width: 575.98px) {
      .subpage .subpage-const_wrap .president-voice {
        margin: 40px 0 0; } }
    .subpage .subpage-const_wrap .president-voice p {
      margin: 0 0 25px;
      text-align: left; }
  .subpage .step-bar {
    margin: 0 auto;
    max-width: 960px; }
  .subpage .company-img-wrap {
    margin: 0 0 100px; }
    @media (max-width: 575.98px) {
      .subpage .company-img-wrap {
        margin: 0; } }
    .subpage .company-img-wrap p {
      margin: 2px 0 0;
      font-size: 14px;
      font-size: 0.875rem; }
      @media (max-width: 575.98px) {
        .subpage .company-img-wrap p {
          margin: 5px 0 0;
          text-align: center;
          font-size: 16px;
          font-size: 1rem; } }
    .subpage .company-img-wrap .img-wrap {
      margin: 0 0 10px; }
      @media (max-width: 575.98px) {
        .subpage .company-img-wrap .img-wrap {
          margin: 0 0 15px; } }
    .subpage .company-img-wrap .left-pc {
      margin: 0 2% 0 0;
      width: 65%;
      float: left; }
      @media (max-width: 1199.98px) {
        .subpage .company-img-wrap .left-pc {
          width: 65.4%; } }
      @media (max-width: 991.98px) {
        .subpage .company-img-wrap .left-pc {
          width: 66%; } }
      @media (max-width: 575.98px) {
        .subpage .company-img-wrap .left-pc {
          margin: 0 0 15px;
          width: 100%; } }
      .subpage .company-img-wrap .left-pc img {
        width: 100%; }
    .subpage .company-img-wrap .right-pc {
      width: 32.5%;
      float: right; }
      @media (max-width: 1199.98px) {
        .subpage .company-img-wrap .right-pc {
          width: 32.4%; } }
      @media (max-width: 991.98px) {
        .subpage .company-img-wrap .right-pc {
          width: 32%; } }
      @media (max-width: 575.98px) {
        .subpage .company-img-wrap .right-pc {
          width: 100%; } }
      .subpage .company-img-wrap .right-pc img {
        width: 100%; }
  .subpage .infomation-area {
    margin: 0 auto 60px; }
    .subpage .infomation-area .title {
      padding: 80px 0;
      width: 20%;
      border: 1px solid #000;
      text-align: center;
      font-size: 18px;
      font-size: 1.125rem;
      float: left; }
      @media (max-width: 575.98px) {
        .subpage .infomation-area .title {
          padding: 20px 0;
          width: 100%; } }
    .subpage .infomation-area .table,
    .subpage .infomation-area ul,
    .subpage .infomation-area .address {
      width: 75%;
      float: right; }
      @media (max-width: 575.98px) {
        .subpage .infomation-area .table,
        .subpage .infomation-area ul,
        .subpage .infomation-area .address {
          margin: 20px 0;
          width: 100%;
          float: right; } }
    .subpage .infomation-area ul {
      margin: 42px 0 0; }
      @media (max-width: 575.98px) {
        .subpage .infomation-area ul {
          margin: 22px 0 0; } }
    .subpage .infomation-area li {
      margin: 0 0 20px;
      font-size: 18px;
      font-size: 1.125rem; }
    .subpage .infomation-area .address {
      margin: 47px 0 0; }
      @media (max-width: 575.98px) {
        .subpage .infomation-area .address {
          margin: 22px 0 0; } }
      .subpage .infomation-area .address p {
        margin: 0 0 10px 0;
        font-size: 20px;
        font-size: 1.25rem;
        font-weight: 700; }
      .subpage .infomation-area .address address {
        font-size: 16px;
        font-size: 1rem; }
  .subpage iframe {
    margin: 0 0 60px 0;
    width: 100%;
    height: 600px; }
    @media (max-width: 575.98px) {
      .subpage iframe {
        height: 330px; } }
  .subpage.entry .item1 {
    padding: 150px 3% 80px; }
    @media (max-width: 575.98px) {
      .subpage.entry .item1 {
        padding: 90px 3% 20px; } }
  .subpage .entry-form-disc {
    margin: 40px auto 40px;
    font-size: 16px;
    font-size: 1rem; }
    .subpage .entry-form-disc .text {
      margin: 0 auto 10px; }
    .subpage .entry-form-disc .text-bold {
      font-size: 28px;
      font-size: 1.75rem;
      -webkit-font-feature-settings: "palt";
      font-feature-settings: "palt"; }
    .subpage .entry-form-disc .text-min {
      font-size: 24px;
      font-size: 1.5rem; }
    .subpage .entry-form-disc dl {
      border-bottom: 1px solid #000; }
      @media (max-width: 575.98px) {
        .subpage .entry-form-disc dl {
          border-bottom: none; } }
      .subpage .entry-form-disc dl:first-of-type {
        border-top: 1px solid #000; }
        @media (max-width: 575.98px) {
          .subpage .entry-form-disc dl:first-of-type {
            border-top: none; } }
    .subpage .entry-form-disc dt {
      padding: 18px 30px;
      background-color: #8fc31f;
      color: #fff; }
      @media (max-width: 575.98px) {
        .subpage .entry-form-disc dt {
          padding: 18px 10px; } }
    .subpage .entry-form-disc dd {
      padding: 18px 30px; }
      @media (max-width: 575.98px) {
        .subpage .entry-form-disc dd {
          padding: 18px 10px; } }
    .subpage .entry-form-disc .entry-link-btn a {
      margin: 40px auto 40px;
      width: 40%;
      text-align: center;
      display: block;
      border: 1px solid #ccc;
      -webkit-transition: 0.6s;
      -o-transition: 0.6s;
      transition: 0.6s;
      background-color: #8fc31f;
      color: #fff;
      font-size: 20px;
      font-size: 1.25rem; }
      @media (max-width: 575.98px) {
        .subpage .entry-form-disc .entry-link-btn a {
          width: 100%; } }
      .subpage .entry-form-disc .entry-link-btn a:hover {
        opacity: 0.6; }
      .subpage .entry-form-disc .entry-link-btn a p {
        margin: 20px 0 20px; }
      .subpage .entry-form-disc .entry-link-btn a .fas {
        margin: 0 15px 0 0;
        float: right; }
    .subpage .entry-form-disc .horizon-buttom {
      margin: 0 auto 20px;
      background: #fff;
      width: 100%;
      height: 5px; }
    .subpage .entry-form-disc.disc2 {
      margin: 0 auto 100px; }
      @media (max-width: 575.98px) {
        .subpage .entry-form-disc.disc2 {
          margin: 0 auto; } }
  .subpage .form {
    /*css radio02*/ }
    .subpage .form .text {
      padding: 15px;
      width: 43%;
      border: none;
      background: #efefef; }
      @media (max-width: 1199.98px) {
        .subpage .form .text {
          width: 42.1%; } }
      @media (max-width: 991.98px) {
        .subpage .form .text {
          width: 39%; } }
      @media (max-width: 575.98px) {
        .subpage .form .text {
          width: 100%; } }
    .subpage .form .radio {
      padding: 0 0 0 80px; }
      @media (max-width: 991.98px) {
        .subpage .form .radio {
          padding: 0 0 0 57px; } }
      @media (max-width: 575.98px) {
        .subpage .form .radio {
          margin: 0;
          padding: 0 0 0 15px; } }
      .subpage .form .radio p {
        margin: 0 40px 0 0;
        display: inline-block; }
        @media (max-width: 991.98px) {
          .subpage .form .radio p {
            margin: 0; } }
        @media (max-width: 575.98px) {
          .subpage .form .radio p {
            margin: 0 0 10px 0;
            display: block; } }
      .subpage .form .radio label {
        display: inline-block; }
    .subpage .form dl {
      margin: 0 -10px 40px;
      position: relative; }
      @media (max-width: 575.98px) {
        .subpage .form dl {
          margin: 0 -15px 20px; } }
    .subpage .form dt {
      font-size: 16px;
      font-size: 1rem; }
      .subpage .form dt.center {
        height: 50px; }
        @media (max-width: 575.98px) {
          .subpage .form dt.center {
            margin: 20px 0 10px;
            height: auto; } }
      .subpage .form dt p {
        font-size: 14px;
        font-size: 0.875rem;
        left: 10px; }
        @media (max-width: 575.98px) {
          .subpage .form dt p {
            display: inline;
            position: static; } }
        .subpage .form dt p span:first-child {
          font-size: 12px;
          font-size: 0.75rem;
          color: red; }
    .subpage .form dd {
      font-size: 16px;
      font-size: 1rem; }
      .subpage .form dd p {
        display: inline; }
      .subpage .form dd span {
        margin: 0 10px 0 0; }
    .subpage .form .name p:first-child {
      margin: 0 15px 0 0; }
      @media (max-width: 575.98px) {
        .subpage .form .name p:first-child {
          margin: 0 0 20px;
          display: block; } }
    .subpage .form .name span {
      text-align: right;
      width: 40px;
      display: inline-block; }
      @media (max-width: 575.98px) {
        .subpage .form .name span {
          text-align: left; } }
    .subpage .form .one {
      margin: 0 0 0 42px; }
      @media (max-width: 575.98px) {
        .subpage .form .one {
          margin: 0; } }
      .subpage .form .one input {
        width: 92%; }
        @media (max-width: 575.98px) {
          .subpage .form .one input {
            width: 100%; } }
    .subpage .form .radio02-input {
      display: none; }
    .subpage .form .radio02-input + label {
      padding-left: 20px;
      position: relative;
      margin-right: 20px; }
    .subpage .form .radio02-input + label::before {
      content: "";
      display: block;
      position: absolute;
      top: 3px;
      left: 0;
      width: 15px;
      height: 15px;
      border: 1px solid #999;
      border-radius: 50%; }
    .subpage .form .radio02-input:checked + label {
      color: #009a9a; }
    .subpage .form .radio02-input:checked + label::after {
      content: "";
      display: block;
      position: absolute;
      top: 5px;
      left: 2px;
      width: 11px;
      height: 11px;
      background: #009a9a;
      border-radius: 50%; }
  .subpage textarea {
    width: 92%;
    border: none;
    background: #efefef;
    margin: 0 0 0 44px; }
    @media (max-width: 575.98px) {
      .subpage textarea {
        margin: 0;
        width: 100%; } }
  .subpage.contact .lead-wrap {
    margin: 200px auto 40px; }
    @media (max-width: 575.98px) {
      .subpage.contact .lead-wrap {
        margin: 110px auto 0; } }
    .subpage.contact .lead-wrap h2 {
      margin: 0; }
      @media (max-width: 575.98px) {
        .subpage.contact .lead-wrap h2 p {
          text-align: center; } }
    @media (max-width: 575.98px) {
      .subpage.contact .lead-wrap p {
        text-align: left; } }
    .subpage.contact .lead-wrap .text {
      margin: 0 0 20px 0; }
  .subpage.contact .tel-contact {
    font-size: 18px;
    font-size: 1.125rem; }
    .subpage.contact .tel-contact h3 {
      margin: 0 0 40px;
      font-size: 24px;
      font-size: 1.5rem;
      font-weight: bold; }
      @media (max-width: 575.98px) {
        .subpage.contact .tel-contact h3 {
          margin: 40px 0 20px;
          font-size: 18px;
          font-size: 1.125rem;
          text-align: center; } }
    .subpage.contact .tel-contact dl {
      margin: 20px -15px 20px;
      padding: 20px 0 0;
      border-top: 1px solid #000; }
      .subpage.contact .tel-contact dl:last-child {
        margin: 20px -15px 100px;
        padding: 20px 0 20px;
        border-bottom: 1px solid #000; }
        @media (max-width: 575.98px) {
          .subpage.contact .tel-contact dl:last-child {
            margin: 20px 0 20px; } }
      @media (max-width: 575.98px) {
        .subpage.contact .tel-contact dl {
          margin: 20px 0 20px; } }
      .subpage.contact .tel-contact dl dt {
        font-weight: normal; }
  .subpage.contact .form h3 {
    margin: 0 0 40px;
    font-size: 24px;
    font-size: 1.5rem;
    font-weight: bold; }
    @media (max-width: 575.98px) {
      .subpage.contact .form h3 {
        margin: 40px 0 10px;
        font-size: 18px;
        font-size: 1.125rem;
        text-align: center; } }
  .subpage.contact .form .mwform-zip-field {
    width: 45%;
    display: inline-block; }
    @media (max-width: 575.98px) {
      .subpage.contact .form .mwform-zip-field {
        width: 80%; } }
    .subpage.contact .form .mwform-zip-field .text {
      width: 43%; }
      @media (max-width: 991.98px) {
        .subpage.contact .form .mwform-zip-field .text {
          width: 40%; } }
  .subpage.contact .form .address1 {
    margin: 16px 0 40px 72px;
    width: 170px;
    height: 40px;
    background: #efefef;
    border: none;
    display: block; }
    @media (max-width: 575.98px) {
      .subpage.contact .form .address1 {
        margin: 16px 0 40px 0; } }
  .subpage.contact .form .address-btn {
    margin: 0 10px 0;
    padding: 3px 10px;
    color: white;
    display: inline-block;
    background-color: #0f3768;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-transition: 0.6s;
    -o-transition: 0.6s;
    transition: 0.6s; }
    @media (max-width: 575.98px) {
      .subpage.contact .form .address-btn {
        margin: 20px 10px 0 0; } }
    .subpage.contact .form .address-btn:hover {
      cursor: pointer; }

/* ========================================

lp

======================================== */
.lp .lp-main-img .gutter-destroyed, .lp .lp-main-img .roof-destroyed, .lp .lp-main-img .outer-wall-destroyed {
  width: 55%;
  top: 20%;
  max-width: 390px; }
  @media (max-width: 575.98px) {
    .lp .lp-main-img .gutter-destroyed, .lp .lp-main-img .roof-destroyed, .lp .lp-main-img .outer-wall-destroyed {
      width: 45%;
      top: 21px; } }

.lp .trouble .icon1, .lp .trouble .icon2, .lp .trouble .icon3, .lp .trouble .icon4 {
  left: 0;
  display: inline-block; }

.lp {
  padding: 0;
  /* ========================================
    common
    ======================================== */
  /* ========================================
    メインイメージ
    ======================================== */
  /* ========================================
    コンタクト
    ======================================== */
  /* ========================================
    ハナテックならどんなトラブルも解決します
    ======================================== */
  /* ========================================
    どんな種類・構造の建物でも対応いたします
    ======================================== */
  /* ========================================
    台風や雪害などによる屋根の破損には火災保険が適用される場合があります
    ======================================== */
  /* ========================================
    現地お見積もりまで、全て無料で対応します
    ======================================== */
  /* ========================================
    屋根、板金、ダクト工事のプロ
    ======================================== */
  /* ========================================
    お問い合わせフォーム
    ======================================== */ }
  .lp .subpage-const_wrap p {
    line-height: 32px;
    line-height: 2rem;
    text-align: left; }
  .lp .item {
    width: 100% !important;
    padding: 40px 0 40px !important; }
    .lp .item .en {
      font-size: 46px;
      font-size: 2.875rem;
      font-weight: bold; }
      @media (max-width: 1199.98px) {
        .lp .item .en {
          font-size: 44px;
          font-size: 2.75rem; } }
      @media (max-width: 991.98px) {
        .lp .item .en {
          font-size: 34px;
          font-size: 2.125rem; } }
  .lp .horizon-lp {
    margin: 0 auto;
    background: #00aae8; }
  .lp .subpage-const_wrap {
    margin: 100px 0 0 0; }
    @media (max-width: 991.98px) {
      .lp .subpage-const_wrap {
        margin: 60px 0 0 0; } }
    @media (max-width: 575.98px) {
      .lp .subpage-const_wrap {
        margin: 40px 0 0; } }
  .lp a:focus {
    text-decoration: none;
    color: #000; }
  @media (max-width: 575.98px) {
    .lp .lp-main {
      margin: 55px 0 0 0; } }
  .lp .lp-main-img {
    position: relative;
    width: 33.3333333333333333%;
    float: left; }
    @media (max-width: 575.98px) {
      .lp .lp-main-img {
        width: 100%; } }
    .lp .lp-main-img p {
      height: 75vh; }
      @media (max-width: 991.98px) {
        .lp .lp-main-img p {
          height: 60vh; } }
      @media (max-width: 575.98px) {
        .lp .lp-main-img p {
          height: 24vh; } }
    .lp .lp-main-img .gutter-destroyed {
      height: 214px; }
      @media (max-width: 575.98px) {
        .lp .lp-main-img .gutter-destroyed {
          left: 10%;
          height: 86px;
          width: 31%;
          -ms-transform: translateX(0%);
          transform: translateX(0%);
          -webkit-transform: translateX(0%);
          top: 50%;
          -ms-transform: translateY(-50%);
          transform: translateY(-50%);
          -webkit-transform: translateY(-50%); } }
    .lp .lp-main-img .roof-destroyed {
      height: 214px; }
      @media (max-width: 575.98px) {
        .lp .lp-main-img .roof-destroyed {
          left: 60%;
          height: 86px;
          width: 31%;
          -ms-transform: translateX(0%);
          transform: translateX(0%);
          -webkit-transform: translateX(0%);
          top: 50%;
          -ms-transform: translateY(-50%);
          transform: translateY(-50%);
          -webkit-transform: translateY(-50%); } }
    .lp .lp-main-img .outer-wall-destroyed {
      height: 214px; }
      @media (max-width: 575.98px) {
        .lp .lp-main-img .outer-wall-destroyed {
          left: 10%;
          height: 86px;
          width: 31%;
          -ms-transform: translateX(0%);
          transform: translateX(0%);
          -webkit-transform: translateX(0%);
          top: 50%;
          -ms-transform: translateY(-50%);
          transform: translateY(-50%);
          -webkit-transform: translateY(-50%); } }
  .lp .lp-main h1 {
    width: 100%;
    background-color: #cf111b;
    position: relative;
    height: 150px;
    clear: both; }
    @media (max-width: 575.98px) {
      .lp .lp-main h1 {
        height: 90px; } }
    .lp .lp-main h1 img {
      max-width: 650px;
      width: 80%; }
  .lp .contact {
    margin: 60px auto;
    padding: 30px 60px;
    max-width: 1170px;
    border: 1px solid #000;
    text-align: center; }
    @media (max-width: 991.98px) {
      .lp .contact {
        padding: 30px 30px; } }
    @media (max-width: 575.98px) {
      .lp .contact {
        padding: 10px 14px;
        margin: 0;
        border: none;
        background: #000; } }
    .lp .contact dl:first-child {
      padding: 0 50px 0 0;
      border-right: 1px solid #000;
      float: left; }
      @media (max-width: 575.98px) {
        .lp .contact dl:first-child {
          padding: 0 13px 0 0;
          border-right: 1px solid #fff; } }
    .lp .contact dl:last-child {
      float: right; }
    .lp .contact dt {
      font-size: 24px;
      font-size: 1.5rem;
      position: relative; }
      @media (max-width: 991.98px) {
        .lp .contact dt {
          font-size: 18px;
          font-size: 1.125rem; } }
      @media (max-width: 575.98px) {
        .lp .contact dt {
          font-weight: normal;
          font-size: 14px;
          font-size: 0.875rem;
          color: #fff; }
          .lp .contact dt a {
            color: #fff; } }
    .lp .contact dl dt + dd {
      font-size: 55px;
      font-size: 3.4375rem; }
      @media (max-width: 1199.98px) {
        .lp .contact dl dt + dd {
          font-size: 44px;
          font-size: 2.75rem; } }
      @media (max-width: 991.98px) {
        .lp .contact dl dt + dd {
          font-size: 36px;
          font-size: 2.25rem; } }
      @media (max-width: 575.98px) {
        .lp .contact dl dt + dd {
          font-size: 18px;
          font-size: 1.125rem;
          font-weight: bold;
          color: #ffe100; }
          .lp .contact dl dt + dd a {
            color: #ffe100; } }
    .lp .contact dl dd:last-child {
      font-size: 24px;
      font-size: 1.5rem; }
      @media (max-width: 991.98px) {
        .lp .contact dl dd:last-child {
          font-size: 18px;
          font-size: 1.125rem; } }
      @media (max-width: 575.98px) {
        .lp .contact dl dd:last-child {
          font-size: 13px;
          font-size: 0.8125rem;
          color: #fff; }
          .lp .contact dl dd:last-child a {
            color: #fff; } }
    .lp .contact .pc-tel {
      display: inline; }
    .lp .contact .mail {
      width: 35px;
      height: 25px;
      position: absolute;
      top: 2px;
      right: 14%; }
      @media (max-width: 1199.98px) {
        .lp .contact .mail {
          right: 5%; } }
  .lp .trouble li {
    margin: 0 0 40px 0; }
  .lp .trouble dt {
    margin: 0 0 10px 0;
    padding: 0 0 0 50px;
    position: relative;
    font-size: 26px;
    font-size: 1.625rem; }
  .lp .trouble .icon1 {
    width: 40px;
    height: 36px; }
  .lp .trouble .icon2 {
    width: 40px;
    height: 40px; }
  .lp .trouble .icon3 {
    width: 40px;
    height: 40px; }
  .lp .trouble .icon4 {
    width: 30px;
    height: 40px; }
  .lp .trouble .img img {
    width: 100%; }
  .lp .trouble p {
    text-align: left;
    line-height: 28px;
    line-height: 1.75rem; }
  .lp .correspondence {
    margin: 30px 0 0 0; }
    .lp .correspondence h2 {
      margin: 0 0 40px 0;
      text-align: center;
      font-size: 34px;
      font-size: 2.125rem;
      font-weight: bold; }
    .lp .correspondence img {
      max-width: 1140px;
      max-height: 260px; }
  .lp .disaster h2 {
    margin: 0 0 10px;
    line-height: 40px;
    font-weight: bold; }
    .lp .disaster h2 .en {
      padding: 0; }
    .lp .disaster h2 .row2 {
      padding: 0 12px 20px; }
  .lp .disaster img {
    width: 100%; }
  @media (max-width: 991.98px) {
    .lp .disaster .text-center {
      text-align: left; } }
  .lp .disaster .comment {
    font-size: 14px;
    font-size: 0.875rem; }
    @media (max-width: 991.98px) {
      .lp .disaster .comment {
        text-align: left; } }
  .lp .disaster ul {
    margin: 50px -15px 0; }
    .lp .disaster ul li dt {
      font-size: 34px;
      font-size: 2.125rem;
      text-align: center;
      line-height: 40px;
      line-height: 2.5rem; }
    @media (max-width: 575.98px) {
      .lp .disaster ul li:last-child {
        margin: 40px 0 0 0; } }
    .lp .disaster ul dd p {
      margin: 13px 0;
      line-height: 30px;
      line-height: 1.875rem; }
  .lp .flow .flow-wrap {
    position: relative; }
  .lp .flow .right-arrow {
    position: absolute;
    width: 20px;
    top: 61%;
    right: 19%; }
    @media (max-width: 1199.98px) {
      .lp .flow .right-arrow {
        right: 17.9%; } }
    @media (max-width: 991.98px) {
      .lp .flow .right-arrow {
        right: 17.5%;
        width: 16px; } }
  .lp .flow .bottom-arrow {
    position: absolute;
    bottom: 25%;
    width: 50px;
    left: 43%;
    right: 57%; }
  .lp .flow image {
    width: 100%; }
  .lp .flow li {
    width: 20%;
    height: 327px;
    float: left;
    position: relative; }
    @media (max-width: 991.98px) {
      .lp .flow li {
        height: 218px; } }
    @media (max-width: 575.98px) {
      .lp .flow li {
        margin: 0 0 20px 0;
        width: 50%;
        height: 243px; }
        .lp .flow li:last-child {
          margin: 0 0 0 32%;
          height: 213px; } }
  .lp .flow img {
    width: 84%;
    bottom: 0; }
    @media (max-width: 575.98px) {
      .lp .flow img {
        width: 100%; } }
  .lp .flow .flow1 {
    height: 317px; }
    @media (max-width: 991.98px) {
      .lp .flow .flow1 {
        height: 205px; } }
    @media (max-width: 575.98px) {
      .lp .flow .flow1 {
        height: 240px; } }
  .lp .flow .flow2 {
    height: 317px; }
    @media (max-width: 991.98px) {
      .lp .flow .flow2 {
        height: 205px; } }
    @media (max-width: 575.98px) {
      .lp .flow .flow2 {
        height: 240px; } }
  .lp .flow .flow3 {
    height: 324px; }
    @media (max-width: 991.98px) {
      .lp .flow .flow3 {
        height: 210px; } }
    @media (max-width: 575.98px) {
      .lp .flow .flow3 {
        height: 247px; } }
  .lp .flow .flow4 {
    height: 315px; }
    @media (max-width: 991.98px) {
      .lp .flow .flow4 {
        height: 205px; } }
    @media (max-width: 575.98px) {
      .lp .flow .flow4 {
        height: 240px; } }
  .lp .flow .flow5 {
    height: 231px; }
    @media (max-width: 1199.98px) {
      .lp .flow .flow5 {
        height: 245px; } }
    @media (max-width: 991.98px) {
      .lp .flow .flow5 {
        height: 150px; } }
    @media (max-width: 575.98px) {
      .lp .flow .flow5 {
        height: 220px; } }
  .lp .flow p {
    margin: 30px 0 0 0;
    text-align: left; }
  .lp .pro .img-nns {
    margin: 40px 0 0;
    height: 470px; }
    @media (max-width: 991.98px) {
      .lp .pro .img-nns {
        height: 330px; } }
  .lp .pro .visible-xs-block {
    margin: 0 0 20px 0; }
  .lp .pro p {
    text-align: left; }
  .lp .pro li {
    margin: 0 0 30px; }
    .lp .pro li:nth-child(n+2) p:first-child {
      height: 385px; }
      @media (max-width: 991.98px) {
        .lp .pro li:nth-child(n+2) p:first-child {
          height: 235px; } }
  .lp .form .button {
    line-height: 54px;
    font-size: 16px;
    font-size: 1rem; }

.hanaguard {
  padding: 0;
  overflow-x: hidden;
  /* ========================================
    common
    ======================================== */
  /* ========================================
    メイン
    ======================================== */
  /* ========================================
    スマホ用 メイン画像 ボタン
    ======================================== */
  /* ========================================
    コンタクト
    ======================================== */
  /* ========================================

    ・全熱交換型換気システム
    ・病院・クリニック 施工事例
    ・HANAGUARD  全体換気システム
    ・HANAGUARD エアシールド

    ======================================== */
  /* ========================================

    気流
    換気
    HANAGUARD 全熱交換型換気システム（全館タイプ） 

    ======================================== */
  /* ========================================
    
    換気

    ======================================== */
  /* ========================================
    
    HANAGUARD 全熱交換型換気システム（全館タイプ）

    ======================================== */
  /* ========================================
    
    HANAGUARD 全熱交換型換気システム（全館タイプ）

    ======================================== */
  /* ========================================
    
    実際に導入したオフィスで、空気の流れを体感してみてください。

    ======================================== */
  /* ========================================

    お問い合わせフォーム

    ======================================== */ }
  .hanaguard img {
    width: 100%; }
  .hanaguard .top-btn a {
    padding: 7px 13px;
    background-color: #0c3388;
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: block;
    z-index: 5; }
    .hanaguard .top-btn a .fa-angle-up {
      color: #fff;
      font-size: 34px;
      font-size: 2.125rem; }
  .hanaguard dl dd .annotation {
    margin: 40px 0 0;
    font-size: 14px;
    font-size: 0.875rem;
    border-bottom: 1px solid #0081cc;
    display: inline-block; }
    @media (max-width: 575.98px) {
      .hanaguard dl dd .annotation {
        margin: 20px 0 0;
        padding: 10px 5px;
        width: 100%;
        letter-spacing: -1.2px;
        text-align: center;
        border: 1px solid #0081cc;
        line-height: 24px;
        line-height: 1.5rem; } }
    .hanaguard dl dd .annotation a {
      -webkit-transition: 0.6;
      -o-transition: 0.6;
      transition: 0.6; }
    .hanaguard dl dd .annotation a:hover {
      color: #1a0dab; }
  .hanaguard .under-bar {
    border-bottom: 1px solid #0670b0; }
  .hanaguard .main {
    height: 730px;
    position: relative; }
    @media (min-width: 1500.98px) {
      .hanaguard .main {
        height: 668px; } }
    @media (max-width: 991.98px) {
      .hanaguard .main {
        height: 500px; } }
    @media (max-width: 767.98px) {
      .hanaguard .main {
        height: 760px; } }
    @media (max-width: 575.98px) {
      .hanaguard .main {
        height: 440px; } }
    .hanaguard .main .main-btn-wrap {
      max-width: 980px;
      width: 100%;
      bottom: 160px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between; }
      @media (max-width: 1024.98px) {
        .hanaguard .main .main-btn-wrap {
          padding: 0 20px; } }
      @media (max-width: 991.98px) {
        .hanaguard .main .main-btn-wrap {
          bottom: 30px; } }
      .hanaguard .main .main-btn-wrap a {
        -webkit-transition: 0.6s;
        -o-transition: 0.6s;
        transition: 0.6s; }
        .hanaguard .main .main-btn-wrap a:hover {
          opacity: 0.6; }
      .hanaguard .main .main-btn-wrap .main-btn {
        padding: 15px 30px 15px 30px;
        font-weight: 700;
        background-color: #0c3388;
        color: #fff;
        display: block;
        font-size: 20px;
        font-size: 1.25rem;
        line-height: 32px;
        line-height: 2rem; }
        @media (max-width: 1024.98px) {
          .hanaguard .main .main-btn-wrap .main-btn {
            width: 32%; } }
        .hanaguard .main .main-btn-wrap .main-btn .main-btn_text {
          padding: 0 60px 0 0;
          position: relative; }
        .hanaguard .main .main-btn-wrap .main-btn span {
          display: inline-block;
          width: 32px;
          right: 0;
          height: 24px; }
  .hanaguard .main-btn-wrap_sp {
    margin: -30px 0 0;
    padding: 0 20px;
    width: 100%;
    position: relative;
    z-index: 2; }
    .hanaguard .main-btn-wrap_sp .main-btn {
      margin: 0 0 25px;
      padding: 20px 15px 15px 15px;
      font-weight: 700;
      background-color: #0c3388;
      color: #fff;
      display: block;
      font-size: 20px;
      font-size: 1.25rem;
      line-height: 34px;
      line-height: 2.125rem; }
      .hanaguard .main-btn-wrap_sp .main-btn .main-btn_text {
        padding: 0 60px 0 0;
        position: relative; }
      .hanaguard .main-btn-wrap_sp .main-btn span {
        display: inline-block;
        width: 32px;
        right: 0; }
    .hanaguard .main-btn-wrap_sp .main-btn_att {
      margin: 0 0 20px;
      font-size: 14px;
      font-size: 0.875rem;
      line-height: 24px;
      line-height: 1.5rem; }
  .hanaguard .visible-xs-block.main-btn {
    padding: 20px 0 20px 30px;
    width: 100%;
    display: block;
    color: #fff;
    background-color: #0c3388;
    font-weight: 700;
    font-size: 22px;
    font-size: 1.375rem; }
    .hanaguard .visible-xs-block.main-btn p {
      position: relative; }
    .hanaguard .visible-xs-block.main-btn span {
      display: inline-block;
      width: 38px;
      right: 10px; }
  .hanaguard .hanaguard-logo {
    padding: 30px 0;
    background-color: #0c3388; }
    .hanaguard .hanaguard-logo h2 {
      margin: 0 auto;
      width: 420px; }
      @media (max-width: 575.98px) {
        .hanaguard .hanaguard-logo h2 {
          margin: 0 auto;
          width: 80%; } }
    .hanaguard .hanaguard-logo .hanaguard_catch {
      margin: 40px 0 20px;
      text-align: center;
      color: #fff;
      font-weight: 700;
      font-size: 32px;
      font-size: 2rem;
      line-height: 68px;
      line-height: 4.25rem; }
      @media (max-width: 575.98px) {
        .hanaguard .hanaguard-logo .hanaguard_catch {
          font-size: 22px;
          font-size: 1.375rem;
          line-height: 36px;
          line-height: 2.25rem; } }
  .hanaguard .main-text {
    padding: 60px 0;
    text-align: center;
    font-size: 32px;
    font-size: 2rem;
    line-height: 56px;
    line-height: 3.5rem;
    color: #fff;
    background-color: #a0d2f2;
    font-weight: 700; }
    @media (max-width: 575.98px) {
      .hanaguard .main-text {
        font-size: 20px;
        font-size: 1.25rem;
        line-height: 32px;
        line-height: 2rem; } }
  .hanaguard .contact {
    margin: 0 auto 60px;
    padding: 30px 60px;
    max-width: 1140px;
    text-align: center;
    background-color: #a0d2f2;
    color: #fff; }
    @media (max-width: 991.98px) {
      .hanaguard .contact {
        padding: 30px 30px; } }
    @media (max-width: 575.98px) {
      .hanaguard .contact {
        padding: 10px 14px;
        margin: 0;
        border: none; } }
    .hanaguard .contact dl:first-child {
      padding: 0 50px 0 0;
      border-right: 1px solid #fff;
      float: left; }
      @media (max-width: 575.98px) {
        .hanaguard .contact dl:first-child {
          padding: 0 13px 0 0;
          border-right: 1px solid #fff; } }
    .hanaguard .contact dl:last-child {
      float: right; }
    .hanaguard .contact dt {
      font-size: 24px;
      font-size: 1.5rem;
      position: relative; }
      @media (max-width: 991.98px) {
        .hanaguard .contact dt {
          font-size: 18px;
          font-size: 1.125rem; } }
      @media (max-width: 575.98px) {
        .hanaguard .contact dt {
          font-weight: normal;
          font-size: 14px;
          font-size: 0.875rem;
          color: #fff; }
          .hanaguard .contact dt a {
            color: #fff; } }
    .hanaguard .contact dl dt + dd {
      font-size: 55px;
      font-size: 3.4375rem; }
      @media (max-width: 1199.98px) {
        .hanaguard .contact dl dt + dd {
          font-size: 44px;
          font-size: 2.75rem; } }
      @media (max-width: 991.98px) {
        .hanaguard .contact dl dt + dd {
          font-size: 36px;
          font-size: 2.25rem; } }
      @media (max-width: 575.98px) {
        .hanaguard .contact dl dt + dd {
          font-size: 18px;
          font-size: 1.125rem;
          font-weight: bold;
          color: #ffe100; }
          .hanaguard .contact dl dt + dd a {
            color: #ffe100; } }
    .hanaguard .contact dl dd:last-child {
      font-size: 24px;
      font-size: 1.5rem; }
      @media (max-width: 991.98px) {
        .hanaguard .contact dl dd:last-child {
          font-size: 18px;
          font-size: 1.125rem; } }
      @media (max-width: 575.98px) {
        .hanaguard .contact dl dd:last-child {
          font-size: 13px;
          font-size: 0.8125rem;
          color: #fff; }
          .hanaguard .contact dl dd:last-child a {
            color: #fff; } }
    .hanaguard .contact .pc-tel {
      display: inline; }
    .hanaguard .contact .mail {
      width: 35px;
      height: 25px;
      position: absolute;
      top: 2px;
      right: 14%; }
      @media (max-width: 1199.98px) {
        .hanaguard .contact .mail {
          right: 5%; } }
  .hanaguard .section .case-wrap {
    text-align: center;
    position: relative; }
    .hanaguard .section .case-wrap .doctor {
      width: 90px;
      position: absolute;
      top: 540px;
      left: 170px; }
      @media (max-width: 991.98px) {
        .hanaguard .section .case-wrap .doctor {
          width: 80px;
          left: 10px; } }
      @media (max-width: 575.98px) {
        .hanaguard .section .case-wrap .doctor {
          width: 60px;
          top: 695px;
          left: 25px; } }
      @media (max-width: 575.98px) {
        .hanaguard .section .case-wrap .doctor.doctor2 {
          width: 60px;
          top: 754px;
          left: 9px; } }
    .hanaguard .section .case-wrap .address-name {
      margin: 0 0 20px;
      font-weight: 700; }
      @media (max-width: 575.98px) {
        .hanaguard .section .case-wrap .address-name {
          text-align: center; } }
    .hanaguard .section .case-wrap dt {
      margin: 40px 0;
      text-align: center;
      font-size: 38px;
      font-size: 2.375rem;
      font-weight: 700; }
      @media (max-width: 575.98px) {
        .hanaguard .section .case-wrap dt {
          font-size: 27px;
          font-size: 1.6875rem; } }
    .hanaguard .section .case-wrap dd {
      font-size: 18px;
      font-size: 1.125rem;
      line-height: 32px;
      line-height: 2rem; }
      @media (max-width: 575.98px) {
        .hanaguard .section .case-wrap dd {
          text-align: left; } }
    .hanaguard .section .case-wrap .case-img {
      margin: 120px auto 30px;
      padding: 0 20px;
      max-width: 960px; }
      @media (max-width: 575.98px) {
        .hanaguard .section .case-wrap .case-img {
          margin: 40px auto 30px;
          padding: 0 10px; } }
  .hanaguard .section {
    padding: 60px 0;
    /* youtube */
    /* voice */ }
    @media (max-width: 575.98px) {
      .hanaguard .section {
        padding: 30px 0 10px; } }
    .hanaguard .section .section-h2 {
      text-align: center;
      font-size: 68px;
      font-size: 4.25rem; }
      @media (max-width: 575.98px) {
        .hanaguard .section .section-h2 {
          font-size: 48px;
          font-size: 3rem; } }
      .hanaguard .section .section-h2 span {
        margin: 0 15px 0 0;
        padding: 10px 10px 5px;
        display: inline-block;
        background-color: #35aacd;
        color: #fff;
        font-weight: 700; }
    .hanaguard .section .section_h3 {
      margin: 60px 0 0;
      text-align: center;
      font-size: 40px;
      font-size: 2.5rem;
      line-height: 52px;
      line-height: 3.25rem;
      font-weight: 700; }
      @media (max-width: 575.98px) {
        .hanaguard .section .section_h3 {
          margin: 30px 0 0;
          font-size: 24px;
          font-size: 1.5rem;
          line-height: 36px;
          line-height: 2.25rem; } }
    .hanaguard .section .section-title {
      margin: 20px 0;
      text-align: center;
      color: #0f1177;
      font-weight: 700;
      font-size: 62px;
      font-size: 3.875rem;
      line-height: 78px;
      line-height: 4.875rem; }
      @media (max-width: 575.98px) {
        .hanaguard .section .section-title {
          font-size: 42px;
          font-size: 2.625rem;
          line-height: 56px;
          line-height: 3.5rem; } }
    .hanaguard .section .product-name {
      background-color: #0670b0;
      padding: 20px 0;
      font-weight: 700;
      text-align: center; }
      .hanaguard .section .product-name .product-name-position {
        text-align: center;
        color: #fff;
        position: relative;
        display: inline-block; }
        .hanaguard .section .product-name .product-name-position p:nth-child(1) {
          margin: 0 0 20px;
          font-size: 46px;
          font-size: 2.875rem;
          line-height: 56px;
          line-height: 3.5rem; }
          @media (max-width: 575.98px) {
            .hanaguard .section .product-name .product-name-position p:nth-child(1) {
              font-size: 34px;
              font-size: 2.125rem;
              line-height: 44px;
              line-height: 2.75rem; } }
        .hanaguard .section .product-name .product-name-position p:nth-child(2) {
          position: relative;
          display: inline-block;
          font-size: 24px;
          font-size: 1.5rem; }
          .hanaguard .section .product-name .product-name-position p:nth-child(2):before, .hanaguard .section .product-name .product-name-position p:nth-child(2):after {
            content: "";
            position: absolute;
            top: 50%;
            display: inline-block;
            height: 2px;
            background-color: #fff; }
          .hanaguard .section .product-name .product-name-position p:nth-child(2):before {
            left: -236px;
            width: 177%; }
            @media (max-width: 991.98px) {
              .hanaguard .section .product-name .product-name-position p:nth-child(2):before {
                width: 177%; } }
            @media (max-width: 575.98px) {
              .hanaguard .section .product-name .product-name-position p:nth-child(2):before {
                left: -126px;
                width: 90%; } }
          .hanaguard .section .product-name .product-name-position p:nth-child(2):after {
            right: -133px;
            width: 94%; }
            @media (max-width: 991.98px) {
              .hanaguard .section .product-name .product-name-position p:nth-child(2):after {
                right: -234px;
                width: 177%; } }
            @media (max-width: 575.98px) {
              .hanaguard .section .product-name .product-name-position p:nth-child(2):after {
                right: -124px;
                width: 90%; } }
        .hanaguard .section .product-name .product-name-position p:nth-child(3) {
          font-size: 18px;
          font-size: 1.125rem;
          position: absolute;
          right: 4px;
          top: 82px; }
          @media (max-width: 991.98px) {
            .hanaguard .section .product-name .product-name-position p:nth-child(3) {
              margin: 10px 0 0;
              position: static;
              color: #ffe501; } }
    .hanaguard .section .section-text {
      margin: 40px 0;
      font-size: 16px;
      font-size: 1rem;
      line-height: 32px;
      line-height: 2rem; }
      @media (max-width: 575.98px) {
        .hanaguard .section .section-text {
          margin: 20px 0; } }
    .hanaguard .section .corresponding-part {
      color: #0f1177;
      font-weight: 700;
      text-align: center; }
      .hanaguard .section .corresponding-part p:first-child {
        margin: 0 auto;
        padding: 0 0 10px;
        border-bottom: 2px solid #34b3d1;
        font-size: 24px;
        font-size: 1.5rem;
        max-width: 460px; }
        @media (max-width: 575.98px) {
          .hanaguard .section .corresponding-part p:first-child {
            margin: 20px auto 0;
            font-size: 19px;
            font-size: 1.1875rem;
            -webkit-font-feature-settings: "palt";
            font-feature-settings: "palt"; } }
      .hanaguard .section .corresponding-part .corresponding-part__list {
        display: inline-block;
        text-align: left; }
      .hanaguard .section .corresponding-part ul {
        margin: 40px auto 0;
        max-width: 1039px;
        text-align: center;
        font-size: 28px;
        font-size: 1.75rem; }
        @media (max-width: 575.98px) {
          .hanaguard .section .corresponding-part ul {
            margin: 20px 0 0;
            text-align: left;
            font-size: 20px;
            font-size: 1.25rem;
            -webkit-font-feature-settings: "palt";
            font-feature-settings: "palt"; } }
        .hanaguard .section .corresponding-part ul li {
          margin: 20px 0 0; }
      .hanaguard .section .corresponding-part .corresponding-part-icon {
        margin: 40px auto 0;
        max-width: 600px; }
    .hanaguard .section .cough-simulation {
      margin: 80px 0 0; }
      .hanaguard .section .cough-simulation dl dt {
        margin: 0 0 10px;
        font-size: 24px;
        font-size: 1.5rem;
        text-align: center; }
      .hanaguard .section .cough-simulation dl dd {
        font-size: 16px;
        font-size: 1rem;
        text-align: center; }
        @media (max-width: 575.98px) {
          .hanaguard .section .cough-simulation dl dd {
            text-align: left; } }
        .hanaguard .section .cough-simulation dl dd p:first-child {
          margin: 0 0 20px; }
    .hanaguard .section .reference-price {
      margin: 40px 0 0; }
      .hanaguard .section .reference-price dt {
        margin: 0 auto 10px;
        padding: 10px 0;
        max-width: 400px;
        background-color: #ff8001;
        text-align: center;
        color: #fff;
        font-size: 28px;
        font-size: 1.75rem; }
        @media (max-width: 575.98px) {
          .hanaguard .section .reference-price dt {
            max-width: 300px;
            padding: 5px 0; } }
      .hanaguard .section .reference-price dd > p:nth-child(1) {
        text-align: center;
        font-weight: 700;
        font-size: 52px;
        font-size: 3.25rem;
        line-height: 62px;
        line-height: 3.875rem; }
        @media (max-width: 575.98px) {
          .hanaguard .section .reference-price dd > p:nth-child(1) {
            font-size: 34px;
            font-size: 2.125rem;
            line-height: 46px;
            line-height: 2.875rem; } }
      .hanaguard .section .reference-price dd > p:nth-child(2) {
        text-align: center;
        font-size: 38px;
        font-size: 2.375rem; }
        @media (max-width: 575.98px) {
          .hanaguard .section .reference-price dd > p:nth-child(2) {
            font-size: 28px;
            font-size: 1.75rem;
            line-height: 38px;
            line-height: 2.375rem; } }
      .hanaguard .section .reference-price dd > p:nth-child(3) {
        margin: 15px auto;
        max-width: 460px; }
        @media (max-width: 575.98px) {
          .hanaguard .section .reference-price dd > p:nth-child(3) {
            max-width: 300px; } }
      .hanaguard .section .reference-price dd .reference-price_att {
        text-align: center; }
        .hanaguard .section .reference-price dd .reference-price_att p {
          display: inline-block;
          text-align: left;
          font-size: 18px;
          font-size: 1.125rem; }
          @media (max-width: 575.98px) {
            .hanaguard .section .reference-price dd .reference-price_att p {
              padding-left: 1em;
              text-indent: -1em;
              margin: 3px auto 0;
              width: 300px;
              display: block;
              font-size: 12px;
              font-size: 0.75rem;
              line-height: 18px;
              line-height: 1.125rem; } }
      .hanaguard .section .reference-price .reference-price_btn {
        margin: 40px auto;
        padding: 20px 0;
        text-align: center;
        max-width: 600px;
        font-weight: 700;
        background-color: #0c3388;
        color: #fff;
        font-size: 32px;
        font-size: 2rem;
        display: block;
        -webkit-transition: 0.6s;
        -o-transition: 0.6s;
        transition: 0.6s;
        position: relative; }
        @media (max-width: 575.98px) {
          .hanaguard .section .reference-price .reference-price_btn {
            padding: 20px 0 20px 20px;
            text-align: left;
            font-size: 28px;
            font-size: 1.75rem; } }
        .hanaguard .section .reference-price .reference-price_btn:hover {
          opacity: 0.6; }
        .hanaguard .section .reference-price .reference-price_btn span {
          display: inline-block;
          width: 60px;
          right: 40px;
          height: 44px; }
          @media (max-width: 575.98px) {
            .hanaguard .section .reference-price .reference-price_btn span {
              width: 40px;
              height: 29px;
              right: 40px; } }
    .hanaguard .section .youtube-content h4 {
      margin: 50px 0 20px;
      padding: 20px 0;
      text-align: center;
      background-color: #a0d2f2;
      color: #fff;
      font-size: 24px;
      font-size: 1.5rem; }
      @media (max-width: 575.98px) {
        .hanaguard .section .youtube-content h4 {
          margin: 20px 0 20px;
          padding: 15px 0;
          font-size: 16px;
          font-size: 1rem;
          letter-spacing: -1px; } }
    @media (max-width: 575.98px) {
      .hanaguard .section .youtube-content ul li {
        margin: 0 0 20px; } }
    .hanaguard .section .youtube-content ul .youtube-iframe {
      padding: 30px 32px;
      background-color: #a0d2f2; }
      @media (max-width: 991.98px) {
        .hanaguard .section .youtube-content ul .youtube-iframe {
          padding: 15px 20px; } }
      @media (max-width: 575.98px) {
        .hanaguard .section .youtube-content ul .youtube-iframe {
          padding: 15px; } }
      .hanaguard .section .youtube-content ul .youtube-iframe p {
        margin: 5px 0 0;
        font-size: 16px;
        font-size: 1rem;
        color: #0c3388;
        text-align: left;
        font-weight: 700; }
    .hanaguard .section .youtube-content ul iframe {
      margin: 0;
      width: 100%;
      height: 276px; }
      @media (max-width: 1024.98px) {
        .hanaguard .section .youtube-content ul iframe {
          height: 216px; } }
      @media (max-width: 991.98px) {
        .hanaguard .section .youtube-content ul iframe {
          height: 172px; } }
      @media (max-width: 575.98px) {
        .hanaguard .section .youtube-content ul iframe {
          height: 177px; } }
    .hanaguard .section .voice-wrap {
      margin: 0 0 120px;
      text-align: center;
      position: relative; }
      @media (max-width: 575.98px) {
        .hanaguard .section .voice-wrap {
          margin: 0 0 40px;
          text-align: left; } }
      .hanaguard .section .voice-wrap .voice {
        margin: 60px 0 20px;
        font-size: 38px;
        font-size: 2.375rem;
        color: #0081cc;
        font-weight: 700; }
        @media (max-width: 575.98px) {
          .hanaguard .section .voice-wrap .voice {
            text-align: center; } }
      .hanaguard .section .voice-wrap .address-name {
        margin: 0 0 20px;
        font-weight: 700;
        font-size: 20px;
        font-size: 1.25rem; }
        @media (max-width: 575.98px) {
          .hanaguard .section .voice-wrap .address-name {
            text-align: center; } }
      .hanaguard .section .voice-wrap .voice-text {
        font-size: 18px;
        font-size: 1.125rem;
        line-height: 32px;
        line-height: 2rem; }
      .hanaguard .section .voice-wrap .doctor {
        width: 90px;
        position: absolute;
        top: 0;
        left: 9%; }
        @media (max-width: 991.98px) {
          .hanaguard .section .voice-wrap .doctor {
            width: 70px;
            left: 0; } }
  .hanaguard #ventilation .product-name-position p:nth-child(2):before {
    left: -346px;
    width: 267%; }
    @media (max-width: 991.98px) {
      .hanaguard #ventilation .product-name-position p:nth-child(2):before {
        left: -236px;
        width: 177%; } }
    @media (max-width: 575.98px) {
      .hanaguard #ventilation .product-name-position p:nth-child(2):before {
        left: -126px;
        width: 87%; } }
  .hanaguard #ventilation .product-name-position p:nth-child(2):after {
    right: -233px;
    width: 176%; }
    @media (max-width: 575.98px) {
      .hanaguard #ventilation .product-name-position p:nth-child(2):after {
        right: -119px;
        width: 84%; } }
  .hanaguard #ventilation .ventilation-image {
    margin: 40px auto;
    max-width: 900px; }
  .hanaguard #ventilation .case-img {
    margin: 0 0 40px; }
  .hanaguard #zenkan h2 {
    padding: 20px 0;
    background-color: #0670b0;
    color: #fff;
    text-align: center;
    font-weight: 700;
    font-size: 36px;
    font-size: 2.25rem;
    line-height: 46px;
    line-height: 2.875rem; }
    @media (max-width: 575.98px) {
      .hanaguard #zenkan h2 {
        font-size: 30px;
        font-size: 1.875rem;
        line-height: 42px;
        line-height: 2.625rem; } }
  .hanaguard #zenkan .corresponding-part ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }
    @media (max-width: 575.98px) {
      .hanaguard #zenkan .corresponding-part ul {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start; } }
    .hanaguard #zenkan .corresponding-part ul li {
      margin: 20px 20px 0 0; }
      @media (max-width: 575.98px) {
        .hanaguard #zenkan .corresponding-part ul li {
          margin: 20px 40px 0 0; } }
  .hanaguard #zenkan .zenkan-image {
    margin: 60px 0 0; }
  .hanaguard #local-ventilation .product-name-position p:nth-child(2):before {
    left: -296px;
    width: 227%; }
    @media (max-width: 575.98px) {
      .hanaguard #local-ventilation .product-name-position p:nth-child(2):before {
        left: -122px;
        width: 87%; } }
  .hanaguard #local-ventilation .product-name-position p:nth-child(2):after {
    right: -203px;
    width: 148%; }
    @media (max-width: 575.98px) {
      .hanaguard #local-ventilation .product-name-position p:nth-child(2):after {
        right: -119px;
        width: 86%; } }
  .hanaguard #local-ventilation .product-name-position p:nth-child(3) {
    right: -23px;
    top: 82px; }
  .hanaguard .office-map-wrap {
    padding: 40px 0 20px;
    background-color: #0f1177;
    color: #fff;
    font-weight: 700; }
    .hanaguard .office-map-wrap .product-name {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between; }
      @media (max-width: 575.98px) {
        .hanaguard .office-map-wrap .product-name {
          display: block; } }
      .hanaguard .office-map-wrap .product-name p {
        padding: 10px 0;
        width: 49%;
        background-color: #99cee3;
        font-size: 26px;
        font-size: 1.625rem;
        line-height: 38px;
        line-height: 2.375rem;
        text-align: center; }
        @media (max-width: 575.98px) {
          .hanaguard .office-map-wrap .product-name p {
            margin: 0 0 20px;
            font-size: 18px;
            font-size: 1.125rem;
            line-height: 28px;
            line-height: 1.75rem;
            width: 100%; } }
    .hanaguard .office-map-wrap .office-map_catch {
      padding: 40px 0;
      text-align: center;
      font-size: 58px;
      font-size: 3.625rem;
      line-height: 72px;
      line-height: 4.5rem; }
      @media (max-width: 1199.98px) {
        .hanaguard .office-map-wrap .office-map_catch {
          font-size: 48px;
          font-size: 3rem;
          line-height: 62px;
          line-height: 3.875rem; } }
      @media (max-width: 991.98px) {
        .hanaguard .office-map-wrap .office-map_catch {
          font-size: 42px;
          font-size: 2.625rem;
          line-height: 58px;
          line-height: 3.625rem; } }
      .hanaguard .office-map-wrap .office-map_catch span {
        color: #99cee3; }
    .hanaguard .office-map-wrap .information-map_wrap {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center; }
      @media (max-width: 575.98px) {
        .hanaguard .office-map-wrap .information-map_wrap {
          display: block; } }
      .hanaguard .office-map-wrap .information-map_wrap .office-map_information {
        margin: 0 10px 0 0;
        width: 30%;
        min-width: 380px; }
        @media (max-width: 991.98px) {
          .hanaguard .office-map-wrap .information-map_wrap .office-map_information {
            width: 50%;
            min-width: auto; } }
        @media (max-width: 575.98px) {
          .hanaguard .office-map-wrap .information-map_wrap .office-map_information {
            margin: 0 auto;
            max-width: 290px;
            width: 100%; } }
        .hanaguard .office-map-wrap .information-map_wrap .office-map_information p {
          margin: 0 0 20px;
          padding: 10px 0;
          text-align: center;
          border: 1px solid #fff;
          font-size: 24px;
          font-size: 1.5rem; }
        .hanaguard .office-map-wrap .information-map_wrap .office-map_information ul {
          font-size: 18px;
          font-size: 1.125rem;
          line-height: 26px;
          line-height: 1.625rem; }
          .hanaguard .office-map-wrap .information-map_wrap .office-map_information ul li {
            margin: 0 0 20px; }
      .hanaguard .office-map-wrap .information-map_wrap .map {
        margin: 0 0 0 10px;
        width: 30%; }
        @media (max-width: 991.98px) {
          .hanaguard .office-map-wrap .information-map_wrap .map {
            width: 50%; } }
        @media (max-width: 575.98px) {
          .hanaguard .office-map-wrap .information-map_wrap .map {
            margin: 0 0 20px;
            width: 100%;
            height: 340px; } }
        .hanaguard .office-map-wrap .information-map_wrap .map p {
          padding: 0 20px;
          height: 40px;
          background-color: #000;
          font-size: 16px;
          font-size: 1rem; }
          .hanaguard .office-map-wrap .information-map_wrap .map p a {
            width: 100%;
            display: block;
            -webkit-transition: 0.6s;
            -o-transition: 0.6s;
            transition: 0.6s;
            line-height: 40px; }
            .hanaguard .office-map-wrap .information-map_wrap .map p a:hover {
              opacity: 0.6; }
          .hanaguard .office-map-wrap .information-map_wrap .map p span {
            width: 22px;
            display: block;
            float: right; }
        .hanaguard .office-map-wrap .information-map_wrap .map iframe {
          height: 200px; }
          @media (max-width: 575.98px) {
            .hanaguard .office-map-wrap .information-map_wrap .map iframe {
              height: 300px; } }
    .hanaguard .office-map-wrap .attention {
      text-align: center;
      font-size: 16px;
      font-size: 1rem;
      line-height: 24px;
      line-height: 1.5rem; }
    .hanaguard .office-map-wrap .triangle {
      margin: 20px auto 0;
      width: 30px;
      border-top: 30px solid #ffe501;
      border-right: 30px solid transparent;
      border-bottom: 30px solid transparent;
      border-left: 30px solid transparent; }
      @media (max-width: 575.98px) {
        .hanaguard .office-map-wrap .triangle {
          width: 20px;
          border-top: 20px solid #ffe501;
          border-right: 20px solid transparent;
          border-bottom: 20px solid transparent;
          border-left: 20px solid transparent; } }
  .hanaguard .form .button {
    font-size: 16px;
    font-size: 1rem;
    line-height: 54px;
    line-height: 3.375rem; }
  .hanaguard .form .horizon-lp {
    margin: 0 auto;
    background: #00aae8; }
  .hanaguard .form .item {
    width: 100% !important;
    padding: 40px 0 40px !important; }
  .hanaguard .form .item .en {
    font-size: 46px;
    font-size: 2.875rem;
    font-weight: bold; }
    @media (max-width: 575.98px) {
      .hanaguard .form .item .en {
        font-size: 30px;
        font-size: 1.875rem; } }
  @media (max-width: 991.98px) {
    .hanaguard .form .zip-link {
      margin: 5px 0 0 71px;
      display: inline-block; } }
  @media (max-width: 575.98px) {
    .hanaguard .form .zip-link {
      margin: 5px 0 0; } }
  .hanaguard .form .annotation {
    margin: 0 0 60px;
    line-height: 32px;
    line-height: 2rem;
    text-align: center; }
  @media (max-width: 575.98px) {
    .hanaguard .form .table span {
      text-align: left; } }

/*==============================

footer

==============================*/
/* ==========================================
    コンタクト
============================================= */
.contect-wrap {
  padding: 60px 0;
  width: 100%;
  height: 40vh;
  text-align: center; }
  .contect-wrap .footer-banner1 {
    width: 80%;
    max-width: 1038px;
    margin: 0 auto 30px; }
    @media (max-width: 575.98px) {
      .contect-wrap .footer-banner1 {
        width: 100%;
        padding: 0 20px; } }
    .contect-wrap .footer-banner1 img {
      width: 100%; }
    .contect-wrap .footer-banner1 a {
      -webkit-transition: .6s;
      -o-transition: .6s;
      transition: .6s; }
    .contect-wrap .footer-banner1 a:hover {
      opacity: .8; }
  .contect-wrap p {
    font-size: 24px;
    font-size: 1.5rem; }
  .contect-wrap .contect {
    margin: 20px auto;
    max-width: 560px; }
    .contect-wrap .contect .contact-block {
      margin: 0 20px;
      padding: 20px 40px;
      border: 1px solid #000; }
    .contect-wrap .contect .sm-contact-block {
      margin: 0 20px;
      height: 59px;
      background-color: #231815; }
    .contect-wrap .contect p:first-child {
      padding: 0 23px 0 0;
      border-right: 1px solid #000;
      float: left; }
      @media (max-width: 575.98px) {
        .contect-wrap .contect p:first-child {
          padding: 10px 0 10px 20px;
          width: 171px;
          height: 58px;
          border-right: none; } }
    .contect-wrap .contect p:last-child {
      float: right; }
      @media (max-width: 575.98px) {
        .contect-wrap .contect p:last-child {
          padding: 10px;
          width: 126px;
          height: 59px; }
          .contect-wrap .contect p:last-child img {
            margin: 2px 0 0; } }
      .contect-wrap .contect p:last-child .fas {
        margin: 0 0 0 10px; }

footer .logo {
  margin: 40px auto 10px;
  max-width: 500px; }
  footer .logo p {
    margin: 0 20px; }
  footer .logo img {
    height: 60px;
    width: 100%; }

footer address {
  margin: 0 auto 60px;
  font-size: 18px;
  font-size: 1.125rem;
  text-align: center; }

footer small {
  margin: 0 auto 30px;
  font-size: 12px;
  font-size: 0.75rem;
  display: block;
  text-align: center; }