@chareset "UTF-8";

:root{
    --color-second : #007A95;
    --color-second-hover : #1d98b3;
    
}

html {font-size: 62.5%;}
body{}
a[href^="tel:"]{text-decoration: none;}
table{width: 100%;}
ul li{list-style: none;}
ul li a{text-decoration: none;}

/*最小値:1.1rem → 可変（0.9rem + 0.625vw（画面幅320px:2px, 800px:5px, 1200px:7.5px））→ 最大値:1.6rem*/
.font-size-S {
    font-size: clamp(1.1rem, calc(0.9rem + 0.625vw), 1.6rem);
}

/*最小値:1.2rem → 可変（1rem + 0.625vw（画面幅320px:2px, 800px:5px, 1200px:7.5px））→ 最大値:1.7rem*/
.font-size-M {
    font-size: clamp(1.2rem, calc(1rem + 0.625vw), 1.7rem);
}

/*最小値:1.6rem → 可変（2.2rem + 0.625vw（画面幅320px:2px, 800px:5px, 1200px:7.5px））→ 最大値:2.9rem*/
.font-size-L {
    font-size: clamp(2.4rem, calc(2.2rem + 0.625vw), 2.9rem);
}

.sp_only{display: block;}

header.head {display: flex;height: 60px;align-items: center;}
header.head .logo{width: 76px;margin-left:4px;}
header.head .logo img.logo{width: 100%;height: auto;}
header.head h1{}
header.head .readtext{font-size: clamp(0.7rem, calc(0.9rem + 0.625vw), 1.6rem);flex-grow: 1;color: #666;font-weight: normal;text-wrap: no-wrap;line-height: 1.3; letter-spacing: .1rem;margin-left:10px;}
header.head .h_menu{width: 60px; height: 60px;position: relative;}

.c-button {position: relative;display: inline-block;
  text-decoration: none;
  -webkit-appearance: none;
  -moz-appearance: none;appearance: none;border: none;background-color: transparent;cursor: pointer;}


.p-hamburger {
  position: absolute;
  background-color: var(--color-second);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 60px;
  height: 60px;
  margin: auto;
  outline: none;
  -webkit-transition: all .3s ease-in-out;
          transition: all .3s ease-in-out;
}
.p-hamburger:hover ,
.p-hamburger:focus { background-color: var(--color-second-hover);}

.p-hamburger__line {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 30px;
  height: 1px;
  background-color: #fff;
  -webkit-transition: inherit;
          transition: inherit;
}
.p-hamburger__line::before,
.p-hamburger__line::after {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background-color: inherit;
  content: '';
  -webkit-transition: inherit;
          transition: inherit;
}
.p-hamburger__line::before {
  top: -10px;
}
.p-hamburger__line::after {
  top: 10px;
}

.p-hamburger[aria-expanded="true"] .p-hamburger__line {
  background-color: transparent;
}

.p-hamburger[aria-expanded="true"] .p-hamburger__line::before,
.p-hamburger[aria-expanded="true"] .p-hamburger__line::after {
  top: 0;
  background-color: #f9d8ae;
}

.p-hamburger[aria-expanded="true"] .p-hamburger__line::before {
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

.p-hamburger[aria-expanded="true"] .p-hamburger__line::after {
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.u-visuallyHidden {
  position: absolute;
  white-space: nowrap;
  width: 1px;
  height: 1px;
  overflow: hidden;
  border: 0;
  padding: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%); 
  margin: -1px;
}

.navi_wrap{position: fixed;z-index: 900; width: 100%; height: 100vh;top: 0; right: -120%;background: rgba(255,255,255,.9);transition:all 0.6s;}
.navi_wrap .snavi{margin-top: 70px; margin-bottom: 30px;}
.navi_wrap .snavi ul{display: grid; text-align: center;}
.navi_wrap .snavi ul li{list-style: none;line-height: 3;}
.navi_wrap .snavi ul li a{color: #222; text-decoration: none; font-weight: bold;}

.navi_wrap .snavi + .tell{text-align: center;}

body.opend .navi_wrap{right: 0;}
nav.gnavi{display: none;}

.menu-btn{position:fixed;top:10px;right:10px;display:flex;height:60px;width:60px;justify-content: center;align-items: center;z-index:999;background: #fff;}
.menu-btn span,
.menu-btn span::before,
.menu-btn span::after{content: ''; display: block;height: 3px; width: 25px; border-radius: 3px;background-color: var(--color-second);position: absolute;}

.menu-btn span::before{bottom:8px;}.menu-btn span::after{top:8px;}
#menu-btn-check{display: none;}
body.opend .menu-btn span{background-color: rgba(255,255,255,0);}
body.opend .menu-btn span::before{bottom: 0; transform: rotate(45deg);}
body.opend .menu-btn span::after{top: 0; transform: rotate(-45deg);}


.wrap{width: 90%; margin: 0 auto;}
.section {margin: 20px auto 0;}
.main{background: url("../images/roof.png") no-repeat right bottom;background-size: 600px; padding-bottom: 60px;}
h2.title,h3.title{text-align: center;font-size: 1.5rem; margin-top: 20px;}
h2 span.lang{display: block;}
h2 span.en{color: var(--color-second);font-family: "Overpass", sans-serif;margin-top: 4px;}


.btn{margin: 60px auto 0; min-width: 220px;}
.btn a{display: block; width: 220px; border: 1px solid #ccc; margin:  0 auto; line-height: 2rem;padding:10px; border-radius: 28px; text-decoration: none; color: #4D4D4D;}
.btn-center{text-align: center;}

.toUp{position: fixed; right: 5%; bottom: 5%; opacity: .8;}


.contact{background: #EFEFEF; padding: 20px 0; text-align: center;}
.number{position: relative; display: inline-block;padding-left: 30px; font-size: 2.5rem;}
.number::before{display: block; content: "";position: absolute;
top:50%;left: 0; width: 40px; height: 40px;background: url("../images/tell.svg") 0 0 no-repeat;
background-size: 20px 20px;}

table.companyTable{margin-top: 40px; font-size: 1.5rem;}
table.companyTable tr:nth-child(odd){background: #eee;}
table.companyTable tr:nth-child(even){background: #f8f8f8;}
table.companyTable th,table.companyTable td{padding: 10px; letter-spacing: .09rem;}
table.companyTable th{text-align: left; font-weight: normal;}

table.companyTable td{text-align: left;}


.fadeIn {
    transition: 1s;
    opacity: 0;
  }
   
  .fadeIn.animated {
    opacity: 1;
  }

  footer{
    padding: 40px 0;
    text-align: center;
  }


  address{font-style: normal;}

@media screen and (min-width: 680px) {  .sp_only{display: none;}
}
@media screen and (min-width: 1025px) {

  a[href^="tel:"]{pointer-events: none;}
  .no-spread{max-width: 1000px;}

   nav.gnavi{display: block;}
   .menu-btn{display: none;}

   header.page_head h1{position:static;}
   header.page_head{display: grid; grid-template-columns: 300px 1fr;padding:20px 40px;}
   nav.gnavi ul{display: flex; justify-content:space-around; font-size: 1.5rem;}

}


/* 
TOPPAGE */
.section{margin-top: 80px;}
.news-area .box{display: grid;
  grid-template-areas: 
  "ga1 ga2"
  "ga3 ga3";
  grid-template-columns: 60px 1fr; 
  row-gap: 10px;border-bottom: dashed #ccc 1px;padding: 10px 0;}
  .news-area .box .cat span{border:1px solid #B5A20C;padding: 3px; color: #B5A20C;}
  .news-area .box h3{grid-area: ga3;}

.works-area .list-box{overflow-x: auto;white-space: nowrap; -webkit-overflow-scrolling: touch; display: flex;margin-top: 40px;}
.works-area .list-box .list{ margin-left: 40px;}
.works-area .list-box .list picture{width: 220px; margin-bottom: 10px;}
.works-area .list-box .list picture img{width: 100%;}

.scroll{position: relative; margin-top: 15px;}
.scroll span{text-transform: uppercase;letter-spacing:.3rem;display: block; position: absolute; right: 10px; top: 10px;}
.scroll::after{content: ""; position: absolute; width: 130px; height: 1px; background: #444;animation: pathmove 1.4s ease-in-out infinite; opacity:0;}





/* ANIMATION */


@keyframes pathmove{
    0%{
        width:0;
        right:0;
        opacity: 0;
      }
      50%{
        width:130px;
        opacity: 1;
      }
      100%{
        width:130px;
        right:130px;
        opacity: 0;
      }
}