@charset "UTF-8";

body{
    margin: 0px;
    font-family: 'メイリオ','hiragino Kaku Gothic Pro',sans-serif
}

/*サイト名*/
.site h1 a {color:#191970;
            text-decoration: none}
            
.site h1 {margin: 0;
          font-size:30px} 

.site img {border:none}

/*ヘッダー画像*/
.topimg { width: 100%;
          height: auto;
          vertical-align: bottom}

/*キャッチコピー*/
.catch  {margin: 0;
         padding: 15px;
         background-color: rgba(255,255,255,0.7);
         font-size: 28px}

/*ヘッダー画像にキャッチコピーを重ねる*/
.top {position: relative}

.catch {position: absolute;
        top: 7%;
        left: 3%}

/*施工実績地域の記載*/
.span-catch {
font-size: 22px;
text-align: center;
margin-top: 20px;
}

/*概要*/
.gaiyou a {display: block;
           background-color: #222222;
           color:#ffffff;
           text-align :center;
           text-decoration:none}

.gaiyou a hover {opacity: 0.8}

.gaiyou i {display:block;
           padding-top: 40px;
           padding-bottom: 40px;
           font-size: 38px}

.gaiyou h1 {margin-top:0;
            margin-bottom: 0;
            padding-top: 5px;
            padding-bottom: 5px;
            font-size: 20px;
            font-weight: normal}

.gaiyou p {margin-top: 0;
           margin-bottom: 0;
           padding-top: 15px;
           padding-bottom: 15px;
           background-color: #524e3c; 
           font-size: 15px}

/*お知らせ*/
.news    {padding:20px;
          border: solid 5px #dddddd}

.news ul { margin:0;
           padding:0;
           list-style-type:none}

.news li a  { display: block;
              padding: 5px;
              border-bottom: dotted 2px #dddddd;
              color: #000000;
              font-size: 14px;
              text-decoration: none}

.news li a:hover {background-color: #eeeeee} 

.news time {color:#888888;
            font-weight: bold}

.news a:after {content: "";
               display: block;
               clear: both}

.news time{float: left;
            width: 60px}

.news.text{float: none;
           width: auto;
           margin-left:60px}


/*住所・TEL*/
.company p {margin:0;
        line-height: 1.0;}

/*SNSメニュー
.follow ul {margin:0;
            padding: 0;
            list-style: none}

.follow li a {display: block;
              margin-bottom: 10px;
              padding: 10px;
              border-radius: 4px;
              color:#ffffff;
              font-size: 14px;
              text-decoration: none;}

.follow li a:hover {opacity: 0.8}

.follow-tw {background-color: #63bafb;}
.follow-fb {background-color: #5288f7;}
.follow-gp {background-color: #f65d4a;}

.follow i {margin-right:10px;
           font-size: 24px;
           vertical-align: middle}*/

/*スマホ表示用余白*/
.main { padding: 0 4%;}


/*事例サムネ並べる*/

.menu-container:after {content:"";
                        display: block;
                        clear:both}

.menu-container{ display: flex;
                justify-content: center;
                align-items: center;}        
        
                /*padding-right:30px;
                 padding-left:20px;
                 height: 290px}*/


.text-box{/*width: 500px;*/
        padding-top: 0;
        padding-bottom: 0}


/*ページネーション*/
.pagination-container { text-align: center;
                        margin-top: 15px;}

.pagination li {display: inline-block;
                margin: 0;
                padding: 0;
                list-style: none}

.pagination li a {display: block;
                  margin-left: 5px;
                  margin-right: 5px;
                  padding: 5px 10px;
                  border:solid 1px #aaaaaa;
                  color: #000000;
                  font-size: 14px;
                  text-decoration: none}

.pagination li a.active {background-color: #cccccc}

.pagination li a:hover {background-color: #eeeeee}

.pagination ul:after {content: "";
                      display: block;
                      clear: both}
                

/*コピーライト*/
.copyright p { margin: 0;
              color: #666666;
              font-size:14px;
              text-align: center}

/*BOXをバーの形*/
.footer{ padding-top: 15px;
        padding-bottom: 15px;
        background-color: #dddddd;
        clear: both}

/*ボックスの左右*/
.header, .spotlight, .footer,.topic {
        padding-left: 15px;
        padding-right: 15px}
              
/*ボックスの上下*/
.header { padding-top: 10px;
        padding-bottom: 10px}

.spotlight{ padding-top: 20px;
        padding-bottom: 20px}

.spotlight-1{padding-bottom: 20px}

.topic  {padding-top: 20px}

.topic-1,.topic-2,.topic-3
       {padding-bottom: 10px}

       
/*headerの背景とヘッダー固定*/
.header {background-color: #ffffff}
       
/*BOX4の背景*/
.spotlight {background-color: #ffffff}

/*詳しくはこちら*/
.more   {display: inline-block;
         padding: 5px 15px;
         background-color: #3077be;
         color:#ffffff}

.more i {margin-left: 10px}

/*sekoujirei.htmlページの詳しくはこちら*/
.more2 {display: inline-block;
        padding: 5px 15px;
        background-color: #189274;
        color:#ffffff}

.more2 i {margin-left: 10px}

.menu-container {
        margin-top: 10px;
        border-bottom: 1.5px dashed #222222;
}

.text-box {
        text-align: left;
        font-size: 19px;
        /*padding: 35px;*/
        float: left;
        padding-left: 60px}

.button {
        position: relative;
        text-align: center;
        background: #3077be;
        width: 260px;
        height: 50px;
        margin: 0 0 0 auto;
        margin-top:30px;
}

.button a {
        position: absolute;
        left:25px;
        justify-content: space-around;
        align-items: center;
        margin: 0 auto;
        padding: 10px 25px;
        color: #ffffff;
        transition: 0.3s ease-in-out;
        font-weight: 500;
        text-decoration: none;
        text-align: center;
}

.button a:before {
        position: absolute;
        text-align: center;
        top: 0;
        right: 0;
        content: '';
        width: 0;
}

  
/*company_profileの設定*/
.profile { 
        padding: 0px 15px;}

dl, dt, dd {
        margin: 0;
        padding: 0;
      }
      
      .company-overview {
        border-top: 1px solid #ddd;
        padding-left: 20px;
      }
            
      .company-overview .item {
        padding: 24px 15px;
        border-bottom: 1px solid #ddd;
      }   

.menu h1 { margin: top 0;
           margin-bottom: 20px;
           padding-left: 20px;
           border-left: solid 20px #008000;
           background-color: #f5f5f5
        }

                 
/*google mapノレスポンシブ対応*/
iframe{
        position: absolute;
        top:0;
        left:0;
        width: 100%;
        height: 100%;
}

.iframeWrapper{
        position: relative;
        padding-top: 56.25%;
        margin-bottom: 50px ;
}

/*contactページ img*/
.picture {
        width: auto;
        text-align: center;
}

/*contactページ　問い合わせBOX*/
.contact {
        height: auto;
        padding: 15px;
        margin: 20px  auto;
        border: double 5px #189128;
}

.contact p {
        text-align: center;
        margin: 0px;
}

/*ページTOP戻るスクロールボタン*/
.pagetop {
        height: 50px;
        width: 50px;
        position: fixed;
        right: 30px;
        bottom: 30px;
        background: #9f9c9c;
        border: solid 2px #9f9c9c;
        border-radius: 50%;
        display: none;
        justify-content: center;
        z-index: 2;
        cursor: pointer;
        }

.pagetop p{
        color:#fff;
        font-size: 25px;
        text-align: center;
        height: 10px;
        margin-top: 3px;
        }

 /*パンくずリスト*/
.Breadcrumb {
        padding-top: 10px;
        padding-left: 4%;
        padding-bottom: 10px;
        }
        .Breadcrumb-ListGroup {
        display: flex;
        }
        .Breadcrumb-ListGroup-Item-Link[href]:hover {
        opacity: 0.5;
        }
        .Breadcrumb-ListGroup > * + * {
        margin-left: 0.5em;
        }
        .Breadcrumb-ListGroup > * + *::before {
        content: ">";
        margin-left: 0.75em;
        margin-right: 0.75em;
        }
        
        .Breadcrumb li a {color: #000000;
                          text-decoration: none;
        }

        .Breadcrumb ol {margin-left:auto;
                        padding: 0;
                        list-style: none}


/*############ 599px以下 ###############*/
@media (max-width:599px) {
/*ナビゲーション*/
.menu li a {padding: 10px 7px;
            font-size: 11px}

/*キャッチコピー*/
.catch {padding: 5px 10px;
        font-size: 12px}

/*会社概要ページ*/
.company-overview .item {
        display: grid;
        /*項目名：名称の横幅比率*/
        grid-template-columns: 1fr 5fr;
        /*項目名：名称の間の余白*/
        column-gap: 32px;
        -webkit-column-gap: 32px;
        -moz-column-gap: 32px;
      }
      
/*sekouirei-gaihekiを縦に並べる設定*/
.menu-container :after { content:"";
                        display: block;
                        clear: both}
       
.photo { float: none}

.text-box { float: none}

.menu-container {padding-left: 2%}

/*rehome-menuを縦中央に並べる設定*/
.main-1 {text-align: center;}

/*パンくずリストサイズ小さく*/
.Breadcrumb ol {font-size:10px;
                text-decoration: none;}

}



/*########### 600px以上　###############*/
@media (min-width: 600px) {
/*トグルボタン*/
#menubtn   {padding: 6px 12px;
        border:solid 1px #aaaaaa;
        border-radius: 5px;
        background-color : #ffffff;
        position: absolute;
        top: 20px;
        right: 15px;
        cursor: pointer;}

#menubtn:hover {background-color: #dddddd}

#menubtn:focus {outline:none}

#menubtn i {color:#888888;
        font-size: 18px;}

#menubtn span {display:  inline-block;
           text-indent: -9999px}

/*ナビゲーションメニュー（縦並び）*/
#menu    {display:none}

.menu ul {margin: 0;
      padding: 0;
      list-style: none}

.menu li a {display: block;
        padding: 5px;
        color: #000000;
        font-size: 14px;
        text-decoration: none}

.menu li a:hover {background-color: #eeeeee}
}
                                     
/*sekouirei-gaihekiを横に並べる設定*/
.menu-container :after { content:"";
                         display: block;
                         clear: both }
                        
.photo { float: left}

.text-box { float: left;
           padding-left: 60px}
 
/*施行事例imgを画面サイズに合わせる設定*/
.img-box img {
        width: 100%;
        height: auto;
        text-align: center;
        }

/*詳しくはこちらの矢印*/
.chevron {text-align: center;}     

/*各ページ見出しleadの下線*/
.lead {border-bottom: 1px solid #333;
        margin-bottom: 15px}

/*施行事例の掲載日　右寄せ*/
.lead span {float: right;}

 

/*########### 767px以下　###############*/
@media (max-width:767px){
/*トグルボタン*/
#menubtn   {padding: 6px 12px;
            border:solid 1px #aaaaaa;
            border-radius: 5px;
            background-color : #ffffff;
            position: absolute;
            top: 20px;
            right: 15px;
            cursor: pointer;}

#menubtn:hover {background-color: #dddddd}

#menubtn:focus {outline:none}

#menubtn i {color:#888888;
            font-size: 18px;}

#menubtn span {display:  inline-block;
               text-indent: -9999px}

/*ナビゲーションメニュー（縦並び）*/
#menu    {display:none}

.menu ul {margin: 0;
          padding: 0;
          list-style: none}

.menu li a {display: block;
            padding: 5px;
            color: #000000;
            font-size: 14px;
            text-decoration: none}

.menu li a:hover {background-color: #eeeeee}


/*施工メニューや施工事例各項目のimgとtextを縦並び*/
.menu-container {flex-direction: column;}

/*main-1中央配置
.main-1 {text-align: center;} */   

/*lead p余白の上下*/
.lead { margin-top: 20px;
        margin-bottom: 10px;
}
}


/*############ 768px以上 ###############*/
@media (min-width:768px){

/*トグルボタン*/
#menubtn {display:none}

/*ナビゲーション*/
#menu    {display: block !important}

.news h1 {margin-top: 0;
        margin-bottom: 5px;
        font-size: 18px;
        color:#666666;}

.menu ul {margin: 0;
        padding: 0;
       list-style: none;}

.menu li a {display:block;
          padding:10px 15px;
          color:#191970;
          font-size:16px;
          text-decoration:none}

.menu li a :hover { background-color:#eeeeee}

.menu ul :after {content:"";
                display: block;
                clear: both}

.menu li {float:left;
        width:auto }


/*logo と menuを横に並べる*/
.header-inner:after {content:" ";
                display:block;
                clear:both}

.logo  {float:left;
        width: auto}

#menu {float:right;}
        
.header-inner  { width: auto} 

/*spotlight-1 とcompany を横に並べる設定*/
.spotlight:after {content:" ";
                display:block;
                clear:both}

.spotlight-1  {float:left;
          width:70%;
          padding-right: 35px;
          -moz-box-sizing: border-box;
          -webkit-box-sizing: border-box;
          box-sizing: border-box}

.company  {float: left;
          width: 30%;
          font-size:20px}


/*topic を横に並べる設定*/
.topic:after {content:"";
             display: block;
             clear:both}

.topic-1     {float:left;
             width: 32%;
             margin-right:2%}

.topic-2     {float:left;
             width:32%;
             margin-right: 2%}

.topic-3     {float:left;
             width:32%}


/*各ページ　見出し*/
.menu h1 {font-size: 30px;
          margin-bottom: 0px}

.menu p {margin-top: 15px;
        font-size: 20px;}

}

 /*############ 949px以下 ###############*/
@media (max-width:949px){

/*rehome_menu.htmlページのimgを横2列に並べる設定*/
.rehome_menu :after {content:"";
                     display:block;
                     clear:both}

.rehome_menu {float:left;
              width:50%;
              padding-left: 5px}

}
/*############ 950px以上 ###############*/
@media (min-width:950px){

/*rehome_menu.htmlページのimgとcomentを横に並べる
.rehome_menu :after {content: "";
                     display: block;
                     clear: both}

.rehome_menu {height: 270px}
                      
img {float: left;
     margin-left: 3.5rem;}
                          
.coment {float: left;
          width: 50%;
         vertical-align: center;
         height: 210px;
         margin: 30px 0;}

a {display: inline-block}

p.coment {font-size: 20px;
          margin: 2rem}

h2 {height: 1rem;
    width: 530px;}

/*.rehome_menu :nth-child(odd){
                padding-right: 15px;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                clear: both}
        
.rehome_menu :nth-child(even){
                padding-left: 15px;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box}*/


/*sekoujirei.htmlページのsekou_menuを横に並べる*/
.sekou_menu :after {content: "";
        display: block;
        clear: both}

.sekou_menu {width: 470px;
            float: left;
             width: 50%}

.sekou_menu :nth-child(odd){
                padding-right: 15px;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                clear: both}

.sekou_menu :nth-child(even){
                padding-left: 15px;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box}
}


/*############ 1190px以上 ###############*/
@media (min-width:1190px) {
        
/*全体の横幅を固定*/
.slogan,.spotlight,.header-inner,.footer-inner,.topic,.main,.company-overview,
.Breadcrumb{
width: 1190px;
margin-left: auto;
margin-right: auto
}

.main-1 {
height: auto;
overflow: hidden}
}

.menu-container {
margin-top: 10px;
padding-left: 10pxx;
border-bottom: 1.5px dashed #222222;
}

/*施行事例imgを画面サイズで中央に合わせる設定*/
.img-box img {
        max-width: 80%;
        height: auto;
        text-align: center;
        }