/*

Theme Name: クレールハウスビルド

Description: 更新必須HP

Author: kawasaki

*/



*{

  font-family: "ヒラギノ明朝",serif;

  font-size: 20px;

  text-decoration: none;/*リンクのアンダーバー消す*/

  color: rgb(80, 80, 80);

  font-weight: bold;

}



a{

  transition: .6s;

  border-radius: 6px;

}



a:hover{

  color: white;

}



  /*ヘッダー---------------------------------*/

header{

  position: fixed;/*ヘッダー固定*/

  z-index: 9997;/*奥行　Z軸　ポジションとセットで使用*/

  width: 100%;

  background-color: #ff4500;

}



  .header-left{

    max-height: 60px;

    height: 60px;

  }



  .header-box{

    display: flex;

    align-items: center;

    justify-content: space-between;

    height: 75px;

    padding-top: 5px;

  }



  .header-left img{

    padding-left: 40px;

    max-height: 60px;

    height: 60px;

  }



  .header-right p{

    font-size: 0.7em;

    padding-top: 8px;

    letter-spacing: 0px;

  }

  @media screen and (max-width:940px){

    .header-right{

      display: none;

    }

  }

  /*プルダウン------------------------------------------*/

  #menu{

    list-style-type: none;

    width: 650px;/*フッタープルダウン自体の幅*/

    height: 40px;

    margin: 0 auto;

    padding: 0;

  }

  #menu li{

    position: relative;

    width: 16%;/*フッタープルダウンの幅間*/

    float: left;

    margin: 0;

    padding: 0;

    text-align: center;

    background: #ff4500;

  }

  #menu li a{

    display: block;

    margin: 0;

    padding: 14px 0;

    font-size: 14px;

    line-height: 1;

    text-decoration: none;

    color: white;

  }

  #menu li ul{

    width: 100%;

    list-style: none;

    position: absolute;

    top: 100%;

    left: 0;

    margin: 0;

    padding: 0;

  }

  #menu li:last-child ul{

    width: 100%;

  }

  #menu li ul li{

    overflow: hidden;

    width: 100%;

    height: 0;

    -moz-transition: .2s;

    -webkit-transition: .2s;

    -o-transition: .2s;

    -ms-transition: .2s;

    transition: .2s;

  }

  #menu li ul li a{

    padding: 13px 15px;

    text-align: left;

    font-size: 12px;

    font-weight: normal;

  }

  #menu li:hover > a{

    background: white;

    color: rgb(80, 80, 80);

  }

  #menu li:hover ul li{

    overflow: visible;

    height: 38px;

  }

  #menu li:hover ul li:first-child{

    border-top: 0;

  }

  #menu li:hover ul li:last-child{

    border-bottom: 0;

  }

  /*ここまでプルダウン---------------------------*/





  /*ハンバーガーメニュー--------------------------*/

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

  nav

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

nav {

  display: block;

  position: fixed;

  top: 0;

  left: -300px;

  bottom: 0;

  width: 300px;

  background: #ffffff;

  overflow-x: hidden;

  overflow-y: auto;

  -webkit-overflow-scrolling: touch;

  transition: all .5s;

  z-index: 3;

  opacity: 0;

}

  .open nav {

    left: 0;

    opacity: 1;

  }

nav .inner {

  padding: 25px;

}

nav .inner ul {

  list-style: none;

  margin: 0;

  padding: 0;

}

nav .inner ul li {

  position: relative;

  margin: 0;

  border-bottom: 1px solid #333;

}

nav .inner ul li a {

  display: block;

  color: #333;

  font-size: 14px;

  padding: 1em;

  text-decoration: none;

  transition-duration: 0.2s;

}

nav .inner ul li a:hover {

  background: #e4e4e4;

}

@media screen and (max-width: 767px) {

  nav {

    left: -220px;

    width: 220px;

  }

}

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

  .toggle_btn

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

  .toggle_btn {

    display: block;

    position: fixed;

    top: 30px;

    right: 30px;

    width: 30px;

    height: 30px;

    transition: all .5s;

    cursor: pointer;

    z-index: 3;

  }



  .toggle_btn span {

    display: block;

    position: absolute;

    left: 0;

    width: 30px;

    height: 2px;

    background-color: white;

    border-radius: 4px;

    transition: all .5s;

  }



  .toggle_btn span:nth-child(1) {

    top: 4px;

  }

  .toggle_btn span:nth-child(2) {

    top: 14px;

  }

  .toggle_btn span:nth-child(3) {

    bottom: 4px;

  }

  .open .toggle_btn span {

    background-color: #fff;

  }

  .open .toggle_btn span:nth-child(1) {

    -webkit-transform: translateY(10px) rotate(-315deg);

    transform: translateY(10px) rotate(-315deg);

  }

  .open .toggle_btn span:nth-child(2) {

    opacity: 0;

  }

  .open .toggle_btn span:nth-child(3) {

    -webkit-transform: translateY(-10px) rotate(315deg);

    transform: translateY(-10px) rotate(315deg);

  }

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

  #mask

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

  #mask {

    display: none;

    transition: all .5s;

  }

  .open #mask {

    display: block;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: #000;

    opacity: .8;

    z-index: 2;

    cursor: pointer;

  }

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

  main

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

main {

  padding: 50px;

}

main h1 {

  font-family: 'Open Sans', sans-serif;

  font-weight: 400;

  text-align: center;

}

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

  body

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

body {

  font-family: 'Open Sans', sans-serif;

  font-weight: 400;

}



  @media screen and (min-width:941px) {

    .inner{

      display:none;

    }

  .toggle_btn{

    display: none;

  }

  #navArea{

    display: none;

  }

  #mask{

    display: none;

  }

}

  /*ここまでハンバーガーメニュー----------------------------------*/



  /*ここからメインメニュー--------------------------------*/

  .main{

    padding-top: 80px;

  }



  .topimg img{

    width: 100%;

    height: 90vh;

    object-fit: cover;

  }

  @media screen and (max-width:610px){

    .topimg img{

      display: none;

    }

  }



  .top-spimg img{

    width: 100%;

    height: 90vh;

    object-fit: cover;

  }

  @media screen and (min-width: 610px) {

    .top-spimg img{

      display: none;

    }

  }



  .clair-logo{

    position: absolute;

    top: 15%;

    right: 2%;

  }



  .clair-logo img{

    width: 100px;

  }

  @media screen and (max-width:610px){

    .clair-logo img{

      background-color: #ff4500;

    }

  }



  .main-text p{

    color: white;

    font-size: 40px;

  }

  @media screen and (max-width:610px){

    .main-text p{

      color: rgba(80, 80, 80, 1);

      font-size: 32px;

    }

  }

  @media screen and (max-width:495px){

    .main-text p{

      font-size: 24px;

    }

  }



  .main-text{

    position: absolute;

    top: 48%;

    right: 13%;

    line-height: 1.2;

  }





  .sub-text p{

    color: white;

    line-height: 1.8;

    font-size: 16px;

  }

  @media screen and (max-width:610px){

    .sub-text p{

      color: rgba(80, 80, 80, 1);

      font-size: 12px;

    }

  }

  @media screen and (max-width:495px){

    .sub-text p{

      color: rgba(80, 80, 80, 1);

      font-size: 8px;

    }

  }



  .sub-text{

    position: absolute;

    top: 83%;

    right: 0%;

    background-color: rgba(255, 255, 255, 0.2);

    padding: 20px 40px 20px 40px;

  }

  @media screen and (max-width:610px){

    .sub-text{

      background-color: rgba(242, 242, 242, 0.5);

    }

  }





  /*-----------ここからサービス-------------------------------*/

  .service{

    padding-top: 80px;

    padding-bottom: 80px;

    font-size: 42px;

    background-color: rgb(242, 242, 242);

  }



  .service-mainbox{

    padding-top: 80px;

    display: flex;

  }

  @media screen and (max-width:700px){

    .service-mainbox{

      display: block;

      text-align: center;

    }

  }



  .service-title{

    text-align: center;

  }



  .subimg1 img{

    width: 50%;

    padding-left: 60px;

    position: relative;

    z-index: 9000;

  }

  @media screen and (max-width:1200px){

    .subimg1 img{

      z-index: 8999;

    }

  }

  @media screen and (max-width:1000px){

    .subimg1 img{

      object-fit: cover;

      height: 50vh;

      width: 80%;

    }

  }

  @media screen and (max-width:700px){

    .subimg1 img{

      height: 90%;

      width: 90%;

      padding-left: 0;

    }

  }



  .service-text1{

    border: solid 1px black;

    padding: 40px 120px 40px 120px;

    position: absolute;

    max-width: 60%;

    height: 50%;

    right: 3%;

    background-color: rgba(242, 242, 242, 0.8);

    z-index: 8999;

  }

  @media screen and (max-width:1300px){

    .service-text1{

      padding: 20px 80px 20px 80px;

    }

  }

  @media screen and (max-width:1200px){

    .service-text1{

      z-index: 9000;

      padding: 10px 28px 10px 28px;

    }

  }

  @media screen and (max-width:700px){

    .service-text1{

      border: none;

      background-color: rgba(242, 242, 242, 0);

      max-width: 100%;

      position: static;

      text-align: center;

      margin: auto;

    }

  }



  .service-text1 p{

    font-size: 30px;

    padding-bottom: 16px;

  }

  @media screen and (max-width:1500px){

    .service-text1 p{

      font-size: 24px;

    }

  }

  @media screen and (max-width:700px){

    .service-text1 p{

      font-size: 18px;

    }

  }



  .service-detail{

    font-size: 20px;

    text-align: center;

    padding-top: 28px;

  }



  .service-subboxs{

    display: flex;

    justify-content: space-around;

    width: 100%;

    text-align: center;

  }

  @media screen and (max-width:700px){

    .service-subboxs{

      display: block;

    }

  }



  .service-subbox{

    width: 100%;

  }



  .subimg2 img{

    width: 90%;

    height: 30vw;

    padding-top: 80px;

    padding-bottom: 40px;

  }

  @media screen and (max-width:700px){

    .subimg2 img{

      height: 90%;

      padding-top: 0;

      padding-bottom: 0;

    }

  }



  .service-text2 p{

    font-size: 28px;

  }

  @media screen and (max-width:970px){

    .service-text2 p{

      font-size: 20px;

    }

  }



  .onepoint img{

    position: absolute;

    right: 1%;

    top: 135%;

    z-index: 9990;

    width: 80px;

  }

  @media screen and (max-width:920px){

    .onepoint img{

      display: none;

    }

    .onepoint2 img{

      display: none;

    }

    .onepoint3 img{

      display: none;

    }

  }



  .onepoint2 img{

    position: absolute;

    top: 228%;

    right: 51%;

    z-index: 9990;

    width: 80px;

  }



  .onepoint3 img{

    position: absolute;

    top: 228%;

    right: 1%;

    z-index: 9990;

    width: 80px;

  }



  /*-----------ここまでサービス-------------------------------*/



  /*----浮かび上がる文字-------*/

  .animation {

    margin: 50px 0;

    font-size: 40px;

    font-weight: bold;

    color: rgb(110, 110, 110);

  }

  @media screen and (max-width:550px){

    .animation{

      font-size: 24px;

    }

  }



  .animation2 {

    margin: 50px 0;

    font-size: 20px;

    font-weight: bold;

    color: rgb(80, 80, 80);

  }



  .fadeInDown {

    -webkit-animation-fill-mode:both;

    -ms-animation-fill-mode:both;

    animation-fill-mode:both;

    -webkit-animation-duration:1s;

    -ms-animation-duration:1s;

    animation-duration:2s;/*〇秒かけて変化させる*/

    -webkit-animation-name: fadeInDown;

    animation-name: fadeInDown;

    visibility: visible !important;

  }

  /*この下のpxの数値がどのくらい動くか　-の数値で上からになる*/

  @-webkit-keyframes fadeInDown {

    0% { opacity: 0; -webkit-transform: translateY(60px); }

    100% { opacity: 1; -webkit-transform: translateY(0); }

  }

  @keyframes fadeInDown {

    0% { opacity: 0; -webkit-transform: translateY(60px); -ms-transform: translateY(60px); transform: translateY(60px); }

    100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }

  }



  /*トップページ・デザインギャラリー---------------------------------------*/

  .top-achievement{

    background-color: rgb(242, 242, 242);

    padding-bottom: 4px;

  }



  .service-title2{

    padding-top: 80px;

    text-align: center;

  }



  .top-designbox{

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

  }



  .top-design img{

    width: 400px;

    height: 250px;

    padding: 5px;

  }

  @media screen and (max-width:550px){

    .top-design img{

      width: 300px;

      height: 200px;

    }

  }



  /*トップページ・施工実績--------------------------------------------*/

  .top-achievement-detail{

    font-size: 20px;

    text-align: center;

  }



    /* スライドする要素 */

    .wrap img{

      width: 300px;

      height: 200px;

      max-width: none;

    }

    /* スライドレールの枠 */

    .wrap {

      overflow: hidden;

      display: flex;

      align-items: center;

      height: 340px;

      margin-bottom: 40px;

    }



    /* content4つをまとめたスライドブロック */

    .slideshow {

      display: flex;

      -webkit-animation: loop-slide 20s infinite linear 1s both;

      animation: loop-slide 20s infinite linear 1s both;

      list-style: none;

      box-sizing: border-box;

      padding: 0;

      margin: 0;

    }

    @-webkit-keyframes loop-slide {

      from {

        transform: translateX(0);

      }

      to {

        transform: translateX(-100%);

      }

    }

    @keyframes loop-slide {

      from {

        transform: translateX(0);

      }

      to {

        transform: translateX(-100%);

      }

    }





  /*その他---------------------------------------------*/

  h1 {

    position: relative;

    display: inline-block;

    margin-bottom: 1em;

    text-align: center;

  }

  h1:before {

    content: '';

    position: absolute;

    bottom: -35px;/*高さ調整*/

    display: inline-block;

    width: 60px;/*長さ調整*/

    height: 2px;/*太さ調整*/

    left: 50%;

    -webkit-transform: translateX(-50%);

    transform: translateX(-50%);

    background-color: rgb(110, 110, 110);/*色合い*/

  }



  h2 {

    position: relative;

    display: inline-block;

    margin-bottom: 1em;

    text-align: center;

  }

  h2:before {

    content: '';

    position: absolute;

    bottom: -10px;/*高さ調整*/

    display: inline-block;

    width: 20px;/*長さ調整*/

    height: 1px;/*太さ調整*/

    left: 50%;

    -webkit-transform: translateX(-50%);

    transform: translateX(-50%);

    background-color: rgb(80, 80, 80);/*色合い*/

  }



  h3 {

    position: relative;

    display: inline-block;

    margin-bottom: 1em;

    text-align: center;

  }

  h3:before {

    content: '';

    position: absolute;

    bottom: -35px;/*高さ調整*/

    display: inline-block;

    left: 50%;

    -webkit-transform: translateX(-50%);

    transform: translateX(-50%);

    background-color: rgb(110, 110, 110);/*色合い*/

  }





  /*トップに戻るボタン---------------------------------*/

  .pagetop {

    display: none; /* 最初消す*/

    width: 50px;

    height: 50px;

    position: fixed;

    bottom: 50px;

    right: 15px;

    background-color: #333;

    border-radius: 50%;

    z-index: 9999;

  }

  .pagetop a {

    position: relative;

    display: block;

    width: 50px;

    height: 50px;

    transition: 0.3s;

    border-radius: 50%;

  }

  .pagetop a:hover {

    opacity: 0.5;

    border-radius: 50%;

  }

  .pagetop a::before {

    font-weight: 600;

    content: "◮";

    font-size: 25px;

    color: #fff;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

  }



  /*新着情報・トピックス---------------------------------------------*/

  .news{

    padding: 5% 0;

    text-align: center;

    padding-bottom: 100px;

  }



  .news-main{

    padding-top: 180px;

    padding-bottom: 80px;

  }



  .news-title{

    font-size: 24px;

    margin-bottom: 3%;

  }

  @media screen and (max-width:660px){

    .news-title{

      font-size: 18px;

    }

  }



  .news-list{

    border-bottom: solid 1px rgba(210, 210, 210, 0.5);

    width: 45%;

    margin: auto;

    display: flex;

    padding: 20px;

  }



  .day{

    padding: 0 20px;

  }

  @media screen and (max-width:1160px){

    .news-list{

      width: 60%;

    }

  }

  @media screen and (max-width:870px){

    .news-list{

      width: 80%;

    }

  }

  @media screen and (max-width:660px){

    .news-list{

      width: 80%;

      flex-direction: column;/*上から指定　要素指定*/

      text-align: left;

    }

  }

  @media screen and (max-width:520px){

    .news-list{

      font-size: 12px;

    }

  }



  .look{

    font-size: 12px;

    width: 45%;

    text-align: right;

    margin: auto;

    padding-top: 10px;

  }



  .look a{

    text-decoration: none;

    color: black;

  }



  .look a:hover{

    color: #ff4500;

    text-decoration: underline;

  }



  /*トップページ最下部(フッター埋め込み)----------------------------------------*/

    .top-lower span{

      color: #ff4500;

    }



    .top-lower{

      display: flex;

      justify-content: center;

      padding-bottom: 40px;

      font-size: 12px;

    }

    @media screen and (max-width:440px){

      .top-lower{

        display: block;

      }

    }



    @media screen and (max-width:440px){

      .top-lower a{

        font-size: 16px;

      }

    }



    .top-lower p{

      padding: 0 20px 0 20px;

    }

    @media screen and (max-width:715px){

      .top-lower p{

        padding: 0;

      }

    }



    .top-lower a:hover{

      color: #ff4500;

    }



  /*フッター---------------------------------------------*/

  footer a{

    font-family: 'Quicksand', sans-serif;

    font-weight: normal;

    font-size: 12px;

    line-height: 2;

  }

  @media screen and (max-width:715px){

    footer a{

      font-size: 8px;

    }

  }



  .footer-icon{

    display: flex;

    justify-content: space-between;

    padding: 20px;

  }



  .footer-icon a{

    margin: 40px;

  }

  @media screen and (max-width:855px){

    .footer-icon a{

      margin: 0px;

    }

  }



  .footer-icon p{

    color: #fff;

    margin-left: 80px;

  }

  @media screen and (max-width:700px){

    .footer-icon p{

      margin-left: 0;

    }

  }

  @media screen and (max-width:620px){

    .footer-icon p{

      font-size: 12px;

    }

  }



  .footer-box{

    background-color: #ff4500;

  }

  @media screen and (max-width:540px){

    .footer-box{

      display: none;

    }

  }



  /*---フッターボタン---------------------------*/

  a.btn-animation-border{

    position: relative;

    color:#fff;

    background-color: #ff4500;

    border: solid 1px #fff;

    padding:10px 20px 10px 20px;

  }

  a.btn-animation-border::before,

  a.btn-animation-border::after {

    position:absolute;

    width: 0;

    height: 2.5px;

    content:"";

    -webkit-transition: all .3s ease-in-out;

    transition: all .3s ease-in-out;

    background-color: #ff4500;

  }

  a.btn-animation-border::before {

    top:0;

    left:0;

  }

  a.btn-animation-border::after {

    right:0;

    bottom:0;

  }

  a.btn-animation-border:hover::before,

  a.btn-animation-border:hover::after {

    width:100%;

  }

  a.btn-animation-border:hover{

    color:#ff4500;

    background-color: #fff;

  }



  /*ここまでフッターボタン-------------------------------------*/





  /*---プライバシーポリシー-------------------*/

  .main-privacy{

    padding-top: 100px;

    background: rgb(242, 242, 242);

    max-width: 800px;

    width: 100%;

    margin: auto;

  }



  .privacy-title{

    text-align: center;

    font-size: 24px;

  }



  .privacy-title2{

    padding-top: 20px;

  }



  .privacy-text{

    padding-bottom: 20px;

  }



  /*---会社概要------------------*/



  .company-main{

    padding-top: 180px;

  }



  .company-title{

    text-align: center;

  }



  .companytop{

    display: flex;

    justify-content: space-around;

    padding-bottom: 80px;

  }



  .companytop img{

    max-width: 35%;

    justify-content: center;

  }



  .company-subtitle{

    text-align: center;

    padding-top: 80px;

  }



  .kaisha {

    width: 60%;

    margin: 0 auto;

  }

  .kaisha th,

  .kaisha td {padding: 20px;}



  .kaisha th {

    font-weight: bold;

    background-color: #dedede;

    width: 132px;

  }

  /*--概要レスポンシブ----------------------------*/

  @media screen and (max-width: 910px) {

    .kaisha{

      width: 100%;

    }

  }

  @media screen and (max-width: 740px) {

    .kaisha,

    .kaisha tr,

    .kaisha td,

    .kaisha th {display:block;}

    .kaisha th {width: 490px;}

    .kaisha{

      text-align: center;

    }

  }

  @media screen and (max-width: 560px) {

    .kaisha,

    .kaisha tr,

    .kaisha td,

    .kaisha th {display:block;}

    .kaisha th {width: 90vw;}

    .kaisha th {object-fit: cover;}

    .kaisha{

      text-align: center;

    }

  }

  /*--概要レスポンシブここまで----------------------------*/



  .company-logo img{

    max-height: 60px;

    height: 60px;

  }



  .company-logo img:hover{

    opacity: 0.5;

  }

  @media screen and (max-width: 700px) {

    .company-logo img{

      padding: 0 15px;

    }

  }

  @media screen and (max-width: 540px) {

    .company-logo img{

      max-height: 40px;

      height: 40px;

      max-width: 100%;

    }

  }



  .logo-box{

    display: flex;

    align-items: center;

    justify-content: space-around;

    padding-bottom: 80px;

  }



  /*---マップアイコン-----------------------*/

  .pin-solid.icon {

    position: absolute;

    margin-left: 4px;/*---アイコンの位置----*/

    margin-top: -2px;/*---アイコンの位置----*/

    width: 12px;

    height: 12px;

    border: solid 1px currentColor;

    border-radius: 7px 7px 7px 0;

    background-color: currentColor;

    -webkit-transform: rotate(-45deg);

    transform: rotate(-45deg);

  }



  .pin-solid.icon:before {

    content: '';

    position: absolute;

    left: 3px;

    top: 3px;

    width: 4px;

    height: 4px;

    color: white;

    border: solid 1px currentColor;

    border-radius: 3px;

    background-color: currentColor;

  }



  /* マップアイコンのホバー時動き */

  @-webkit-keyframes hvr-pulse {

    25% {

      -webkit-transform: scale(1.1);

      transform: scale(1.1);

    }

    75% {

      -webkit-transform: scale(0.9);

      transform: scale(0.9);

    }

  }

  @keyframes hvr-pulse {

    25% {

      -webkit-transform: scale(1.1);

      transform: scale(1.1);

    }

    75% {

      -webkit-transform: scale(0.9);

      transform: scale(0.9);

    }

  }

  .pin-solid.icon:hover, .btn_design:focus, .btn_design:active {

    -webkit-animation-name: hvr-pulse;

    animation-name: hvr-pulse;

    -webkit-animation-duration: 0.4s;

    animation-duration: 0.4s;

    -webkit-animation-timing-function: linear;

    animation-timing-function: linear;

    -webkit-animation-iteration-count: infinite;

    animation-iteration-count: infinite;

    cursor: pointer;

  }

  /*  ホバー時動きここまで------------------------*/



  /*--マウスカーソル------------------------------*/

html,body,a{

  cursor: none;

}

  #cursor{

    pointer-events: none;

    position: fixed;

    top: -4px;

    left: -4px;

    width: 8px;

    height: 8px;

    background: rgba(0, 0, 0, 1.0);

    transform: translate(-100px,-100px);

    border-radius: 50%;

    z-index: 9999;

  }

  #stalker {

    pointer-events: none;

    position: fixed;

    top: -16px;

    left: -16px;

    width: 32px;

    height: 32px;

    background: rgba(253, 254, 0, 0.8);

    border-radius: 50%;

    transform: translate(-100px,-100px);

    transition: transform 0.2s;

    transition-timing-function: ease-out;

    z-index: 9998;

    opacity: 0.3;

  }



  #stalker.hov_{

    top: -40px;

    left: -40px;

    width: 80px;

    height: 80px;

    transition: .15s;

    background: rgba(253, 254, 0, 0.5);

  }



  /*----サイトマップ----------------------------------------------*/



  /*--タイトル*/

  @import url(../other/fonts.googleapis.com_b5f7df);

  .hidden {

    opacity:0;

  }

  .console-container {

    text-align: center;

    padding-bottom: 40px;

    font-size: 28px;

  }

  .console-underscore {

    display:inline-block;

    position:relative;

    top:-0.14em;

    left:10px;

  }

  /*--タイトルここまで*/

  .sitemap-main{

    display: flex;

    justify-content: space-around;

    font-size: 20px;

  }



  .sitemap-box p{

    padding: 20px;

  }



  .sitemap-box a:hover{

    color: #ff4500;

  }



  /*---安心・保証----------------------------------------*/

  .support-main{

    text-align: center;

    padding-top: 180px;

    padding-bottom: 80px;

  }



  .support-title{

    font-size: 20px;

    padding-top: 20px;

  }



  .supportimg1 img{

    padding-top: 40px;

    width: 80%;

  }

  @media screen and (max-width:610px){

    .supportimg1 img{

      display: none;

    }

  }



  .supportimg1-sp img{

    padding-top: 40px;

    width: 70%;

  }

  @media screen and (min-width:610px){

    .supportimg1-sp img{

      display: none;

    }

  }



  .Support-text{

    font-size: 24px;

    line-height: 3;

    padding: 20px;

  }

  @media screen and (max-width:950px){

    .Support-text{

      font-size: 16px;

    }

  }

  @media screen and (max-width:650px){

    .Support-text{

      font-size: 12px;

    }

  }

  @media screen and (max-width:490px){

    .Support-text{

      width: 90vw;

      font-size: 6px;

    }

  }

  @media screen and (max-width:410px){

    .Support-text{

      display: none;

    }

  }



  .support-catch{

    margin-top: 160px;

    padding: 40px;

    font-size: 32px;

    display: inline-block;

    border: solid 4px #505050;

  }

  @media screen and (max-width:610px){

    .support-catch{

      font-size: 20px;

      margin-top: 80px;

      padding: 20px;

    }

  }



  /*--問い合わせ--------------------------------------*/

  .Form {

    margin-top: 80px;

    margin-left: auto;

    margin-right: auto;

    max-width: 720px;

  }

  @media screen and (max-width: 480px) {

    .Form {

      margin-top: 40px;

    }

  }



  .Form-Item {

    border-top: 1px solid #ddd;

    padding-top: 24px;

    padding-bottom: 24px;

    width: 100%;

    display: flex;

    align-items: center;

  }

  @media screen and (max-width: 480px) {

    .Form-Item {

      padding-left: 14px;

      padding-right: 14px;

      padding-top: 16px;

      padding-bottom: 16px;

      flex-wrap: wrap;

    }

  }



  .Form-Item:nth-child(5) {

    border-bottom: 1px solid #ddd;

  }

  .Form-Item-Label {

    width: 100%;

    max-width: 248px;

    letter-spacing: 0.05em;

    font-weight: bold;

    font-size: 18px;

  }

  @media screen and (max-width: 480px) {

    .Form-Item-Label {

      max-width: inherit;

      display: flex;

      align-items: center;

      font-size: 15px;

    }

  }



  .Form-Item-Label.isMsg {

    margin-top: 8px;

    margin-bottom: auto;

  }

  @media screen and (max-width: 480px) {

    .Form-Item-Label.isMsg {

      margin-top: 0;

    }

  }



  .Form-Item-Label-Required {

    border-radius: 6px;

    margin-right: 8px;

    padding-top: 8px;

    padding-bottom: 8px;

    width: 48px;

    display: inline-block;

    text-align: center;

    background: #5bc8ac;

    color: #fff;

    font-size: 14px;

  }

  @media screen and (max-width: 480px) {

    .Form-Item-Label-Required {

      border-radius: 4px;

      padding-top: 4px;

      padding-bottom: 4px;

      width: 32px;

      font-size: 10px;

    }

  }



  .Form-Item-Input {

    border: 1px solid #ddd;

    border-radius: 6px;

    margin-left: 40px;

    padding-left: 1em;

    padding-right: 1em;

    height: 48px;

    flex: 1;

    width: 100%;

    max-width: 410px;

    background: #eaedf2;

    font-size: 18px;

  }

  @media screen and (max-width: 480px) {

    .Form-Item-Input {

      margin-left: 0;

      margin-top: 18px;

      height: 40px;

      flex: inherit;

      font-size: 15px;

    }

  }

  .Form-Item-Textarea {

    border: 1px solid #ddd;

    border-radius: 6px;

    margin-left: 40px;

    padding-left: 1em;

    padding-right: 1em;

    height: 216px;

    flex: 1;

    width: 100%;

    max-width: 410px;

    background: #eaedf2;

    font-size: 18px;

  }

  @media screen and (max-width: 480px) {

    .Form-Item-Textarea {

      margin-top: 18px;

      margin-left: 0;

      height: 200px;

      flex: inherit;

      font-size: 15px;

    }

  }

  .Form-Btn {

    border-radius: 6px;

    margin-top: 32px;

    margin-left: auto;

    margin-right: auto;

    padding-top: 20px;

    padding-bottom: 20px;

    width: 280px;

    display: block;

    letter-spacing: 0.05em;

    background: #5bc8ac;

    color: #fff;

    font-weight: bold;

    font-size: 20px;

  }

  @media screen and (max-width: 480px) {

    .Form-Btn {

      margin-top: 24px;

      padding-top: 8px;

      padding-bottom: 8px;

      width: 160px;

      font-size: 16px;

    }

  }



  .contact-main{

    padding-top: 160px;

    padding-bottom: 80px;

  }



  .contact-title {

    position: absolute;

    left: 50%;

    transform: translate(-50%, -50%);

  }



  .contact-heading {

    color: #777;

    text-transform: uppercase;

  }



  .contact-heading-primary {

    display: block;

    font-size: 40px;

    letter-spacing: 15px;

    animation: moveInLeft 1s ease-out;

  }



  .contact-heading-secondary {

    font-family: sans-serif;

    display: block;

    font-size: 20px;

    font-weight: bold;

    text-align: center;

    letter-spacing: 15px;

    animation: moveInRight 1s ease-out;

  }

  @keyframes moveInLeft {

    0% {

      opacity: 0;

      transform: translateX(-100px);

    }

    80% {

      transform: translateX(10px);

    }

    100% {

      opacity: 1;

      transform: translate(0);

    }

  }

  @keyframes moveInRight {

    0% {

      opacity: 0;

      transform: translateX(100px);

    }

  }

    80% {

      transform: translateX(-10px);

    }

    100% {

      opacity: 1;

      transform: translate(0);

    }

  }



  /*--構造・工法------------------------------------------*/

  .main{

    width: 100%;

  }



  .construction-main{

    text-align: center;

    padding-top: 180px;

    padding-bottom: 80px;

  }



  .construction-title{

    font-size: 20px;

    padding-top: 20px;

  }



  .construction-catch{

    padding: 30px;

    font-size: 32px;

    width: 900px;

    border: solid 4px #505050;

    margin: auto;

  }

  @media screen and (max-width:1000px){

    .construction-catch{

      font-size: 20px;

      width: 560px;

    }

  }

  @media screen and (max-width:670px){

    .construction-catch{

      font-size: 12px;

      width: 340px;

      padding: 12px;

    }

  }



  .construction-text{

    font-size: 24px;

    line-height: 3;

    padding: 20px;

    text-align: center;

  }

  @media screen and (max-width:980px){

    .construction-text{

      font-size: 16px;

    }

  }

  @media screen and (max-width:670px){

    .construction-text{

      font-size: 12px;

    }

  }



  .constructionimg img{

    width: 100%;

    height: 80vh;

    object-fit: cover;

    padding-bottom: 160px;

  }



  .construction-boxs{

    display: flex;

    justify-content: space-around;

    width: 100%;

    text-align: center;

  }

  @media screen and (max-width:820px){

    .construction-boxs{

      display: block;

    }

  }



  .construction-box{

    width: 100%;

  }



  .constructionimg2 img{

    height: 50vh;

    width: 500px;

    padding-bottom: 120px;

  }

  @media screen and (max-width:1230px){

    .constructionimg2 img{

      max-width: 500px;

    }

  }

  @media screen and (max-width:1025px){

    .constructionimg2 img{

      max-width: 350px;

      height: 30vh;

    }

  }



  .constructionimg3 img{

    height: 50vh;

    width: 500px;

    padding-bottom: 120px;

  }

  @media screen and (max-width:1230px){

    .constructionimg3 img{

      max-width: 500px;

    }

  }

  @media screen and (max-width:1025px){

    .constructionimg3 img{

      max-width: 350px;

      height: 30vh;

    }

  }



  .construction-text2{

    font-size: 16px;

    line-height: 3;

    padding: 20px;

  }

  @media screen and (max-width:1065px){

    .construction-text2{

      font-size: 12px;

    }

  }

  @media screen and (max-width:430px){

    .construction-text2{

      font-size: 10px;

    }

  }



  .construction-catch2{

    padding: 20px;

    font-size: 20px;

    width: 400px;

    border: solid 4px #505050;

    margin: auto;

  }

  @media screen and (max-width:920px){

    .construction-catch2{

      padding: 10px;

      font-size: 16px;

      width: 290px;

    }

  }



  .constructionimg4 img{

    padding-top: 40px;

    width: 90%;

  }

  @media screen and (max-width:820px){

    .constructionimg4 img{

      display: none;

    }

  }



  .constructionimg4-sp img{

    padding-top: 40px;

    width: 80%;

  }

  @media screen and (min-width:821px){

    .constructionimg4-sp img{

      display: none;

    }

  }



  /*--注文住宅------------------------------------------------------*/

  .order-main{

    text-align: center;

    align-items: center;

    padding-top: 180px;

    padding-bottom: 80px;

  }



  .order-title{

    font-size: 20px;

    padding-top: 20px;

  }



  .order-catch{

    padding: 30px;

    font-size: 32px;

    width: 480px;

    border: solid 4px #505050;

    margin: auto;

  }

  @media screen and (max-width:600px){

    .order-catch{

      font-size: 20px;

      width: 300px;

    }

  }

  @media screen and (max-width:430px){

    .order-catch{

      font-size: 16px;

      width: 240px;

      padding: 15px;

    }

  }



  .order-text{

    font-size: 24px;

    line-height: 3;

    padding: 20px;

  }

  @media screen and (max-width:800px){

    .order-text{

      font-size: 16px;

    }

  }

  @media screen and (max-width:565px){

    .order-text{

      font-size: 12px;

    }

  }

  @media screen and (max-width:430px){

    .order-text{

      font-size: 10px;

    }

  }



  .order-box img{

    padding: 20px;

    max-width: 360px;

    max-height: 280px;

  }

  @media screen and (max-width:1250px){

    .order-box img{

      max-width: 200px;

    }

  }

  @media screen and (max-width:800px){

    .order-box img{

      max-width: 600px;

    }

  }

  @media screen and (max-width:670px){

    .order-box img{

      max-width: 400px;

    }

  }

  @media screen and (max-width:470px){

    .order-box img{

      max-width: 200px;

    }

  }



  .order-boxs{

    display: flex;

    justify-content: space-around;

  }

  @media screen and (max-width:800px){

    .order-boxs{

      display: block;

    }

  }



  .order-box{

    padding: 10px;

    line-height: 1.7;

    max-width: 400px;

  }

  @media screen and (max-width:1250px){

    .order-box{

      max-width: 250px;

    }

  }

  @media screen and (max-width:800px){

    .order-box{

      max-width: 650px;

      margin: auto;

    }

  }

  @media screen and (max-width:670px){

    .order-box{

      max-width: 450px;

    }

  }

  @media screen and (max-width:470px){

    .order-box{

      max-width: 250px;

      font-size: 12px;

    }

  }



  .order-box p{

    padding: 5px;

    text-align: left;

  }



  /*--施工実績------------------------------------------------------------*/

  .achievement-main{

    padding-top: 180px;

    padding-bottom: 80px;

    text-align: center;

  }



  .achievement-box img{

    width: 300px;

    height: 200px;

    padding: 20px;

  }



  .achievement-box{

    padding: 10px;

    text-align: center;

  }



  .achievement-boxs{

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

  }



  /*--デザイン------------------------------------------------*/

  .design-top{

    padding-top: 180px;

    text-align: center;

  }



  .design-main{

    padding-bottom: 80px;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;



    align-items: center;

    justify-content: center;

    margin: auto;

    text-align: center;



  }



  .design-main img{

    width: 450px;

    height: 300px;

    padding: 5px;

  }

  @media screen and (max-width:500px){

    .design-main img{

      width: 300px;

      height: 200px;

    }

  }



  .designimg1{

    padding: 20px;

    text-align: center;

  }