:root{
  --base-bgcolor:#052103;
  --con1-bgcolor:#033800;

  --grad1-s-bgcolor:#9f9f9f;
  --grad1-e-bgcolor:#ece8e8;
  --grad2-s-bgcolor:#a50202;
  --grad2-e-bgcolor:#f90404;

  --red:#ff0000;
  --white:#fff;

  --val1:1920px;
  --val2:1079px;
  /*フォントサイズ　デフォルト16px*/

}
body{
  padding:0;
}
#basis{
  width:100%;
  max-width: var(--val1);
  margin:0 auto;
  padding:10px;
  background-color: var(--base-bgcolor);
  color:var(--white);
}
img{
  width: calc(100vw - 20px);
  border:1px solid yellowgreen;
  height: auto;
  max-width:800px;
}
p{
  line-height:1.6rem;
}
/* ***************************** header **********************************/
header{
  font-size:1.6rem;
  letter-spacing: 0.2rem;
}
#anshin{
  color:yellowgreen;
  font-size: 0.8rem;
  margin-top:5px;
  letter-spacing: normal;
}
#tel{
  text-align: right;
}
#telimg{
  display:inline;
  width:2.4rem;
  border:none;
}
#headerimg{
  position: relative;
  width: 100%;
/* height:auto; 高さ0になってしまうからボツ*/
  height: calc(100vw - 20px);
  max-height: 416px;
  overflow: hidden;
  margin: 10px 0;
  border:1px solid yellowgreen;

}
.slide{
  position: absolute;
  width:100%;
  height:100%;
  transition: opacity 1s ease-in-out;
}
.hi1{
  background: url(../imgs/frontcover2.jpg);
  background-position: center center;
  background-size: cover;
}
.hi2{
  background: url(../imgs/frontcover3.jpg);
  background-position: center center;
  background-size: cover;
  opacity: 0;
}
@keyframes slide{
  0%{opacity: 0;}
  20%{opacity: 1;}
  60% {opacity: 1;}
  80%{opacity: 0;}
  100%{opacity: 0;}
}
.slide:nth-child(1){
  animation:  slide 9s infinite;
}
.slide:nth-child(2) {
  animation: slide 9s 3s infinite;
}
.redarea {
  background: linear-gradient(#a50202, #f90404);
  padding: 20px;
}

.grayarea {
  border: 1px solid orangered;
  background: linear-gradient(#fff, #ddd);
  padding: 20px;
  color: var(--red);
}
@media screen and (min-width:768px) {
  #headerimg{
    height:calc(56vw);
    max-height:var(--val2);
  }
}
@media screen and (min-width:1300px){
  header{
    font-size:2rem;
  }
  #anshin{
    font-size:1.2rem;
  }
}
/* ***************************** main ****************************************** */
#main{
  margin:0 auto;
  width:100%;
  max-width:1400px;
}
#greeting p {
  font-size: 1.1rem;
}
#greeting p #br1{
  display:none;
}
#greeting p:first-child {
  margin-bottom: 10px;
  font-weight: bold;
}
@media screen and (min-width:768px) {
  #greeting p{
    text-align:center;
  }
}
@media screen and (min-width:1300px) {
#greeting p{
  line-height:2rem;
  font-size:1.3rem;
}
#greeting p #br1{
  display: inline;
}
}
/* ***************************** Introduction **********************************/
#Introduction{

}
#fw1,#fw2,#fw3,#fw4{
  margin:10px 0;
}
#fw1{
  margin-left:auto;
}
#fw3 {
  margin-right: auto;
}
#fw5{
  max-width: 840px;
  margin:0 auto;
  border:none;
}

.h2{
  background-color: yellow;
  position:relative;
  border-top:1px solid #fff;
  margin:50px 0;
}
.h2text{
  font-size:1.3rem;
  background-color: var(--base-bgcolor);
  position: absolute;
  top: -12px;
  padding:0 15px;
}
#h2intro{
  left: calc((100% - 121.7px - 40px) / 2);
    /*fontsize1.3remのIntroductionの幅は121.7px　#basisのpadding分10px＋.h2textのpadding分15px　左右で50px*/
}
#h2facility {
  left: calc((100% - 69px - 30px) / 2);
}
#h2works{
  left: calc((100% - 60px - 40px) / 2);
}
#h2about {
  left: calc((100% - 83px - 40px) / 2);
}
#h2company {
  left: calc((100% - 93px - 40px) / 2);
}
#h2access {
  left: calc((100% - 83px - 40px) / 2);
}
#fw4 h3{
  color:#000;
}
#fw6{
  border:none;
}
#detail{
  width:100%;
}
.paragraph1{
  font-size: 1.1rem;
}
.detail_h{
  color:var(--red);
  margin:0.7rem 0 0.7rem 2.2rem;
}
.detail_h p{
 /* line-height:1.6rem; */
}
.detail_h p a{
  text-decoration: underline;
}
.detail_h:last-child img{
  width:250px;
}
@media screen and (min-width:660px) {
  #detail{
    width:350px;
    margin:0 auto;
  }
}
@media screen and (min-width:1300px){
  #detail{
    width:100%;
    margin:0 auto;
  }
  #side {
    display: flex;
    flex-direction: row;

  }
  #fw4{
    width:40%;
  }
  #fw5{
    width:60%;
    height:auto;
    margin:10px;
  }
  .h2{
    margin:80px 0;
  }
  .h2text{
    font-size:2rem;
    top: -20px;
    letter-spacing: 0.2rem;
  }
  #h2intro {
    left: calc((100% - 215.6px - 40px) / 2);
  }

  #h2facility {
    left: calc((100% - 131.7px - 30px) / 2);
  }

  #h2works {
    left: calc((100% - 98.5px - 40px) / 2);
  }

  #h2about {
    left: calc((100% - 140.3px - 40px) / 2);
  }

  #h2company {
    left: calc((100% - 155px - 40px) / 2);
  }

  #h2access {
    left: calc((100% - 107px - 40px) / 2);
  }
}
@media screen and (min-width:1300px){
  #detail{
    margin:30px 0 0 30px;

  }

}

/* ***************************** Facility **********************************/
#facility img{
  border:10px solid #fff;
  width: calc(100vw - 40px);
  margin:50px auto;
}
#facility h3{
  text-align: center;
  font-size:1.1rem;
  margin:50px auto;
  background-color: yellowgreen;
  padding:5px 0;
  width:calc(100vw - 40px);
  max-width:1000px;
}
@media screen and (min-width:1300px) {
  #facility img,#facility h3 {
    margin: 60px auto;
  }
    #facility h3{
      padding:10px 0;
      font-size:1.3rem;
    }


}/* ***************************** Works **********************************/

.worksgroup {
  margin:20px auto;
  padding: 20px 0;
  max-width:800px;
  background-color: #ddd;
}
.worksgroup p{
  text-align: center;
  color:green;
  margin:10px 0;
  font-size:1.3rem;
}
.worksgroup img{
  width: calc(100vw - 40px);
  margin:0 auto;
  max-width:640px;
}
.worksgroup .yajirushi{
  width:50px;
  margin:10px auto;
  border:none;
}
.worksgroup #w1{
  margin-bottom:10px;
}
@media screen and (min-width:1300px){
  .worksgroup p{
    margin:20px 0;
    font-size:1.7rem;
  }
}

/* ***************************** aboutus **********************************/
#au1,#au0{
  margin-top:20px;
}
#au2{
  width:70%;
  max-width:400px;
  margin:30px auto;
}
@media screen and (min-width:1300px) {
  #au1{
    order: 2;
    margin-left:30px;
    width:60%;
  }
  #au2{
    order:1;
    margin-left:60px;
    width:30%;
  }
  #side2{
    display: flex;
    flex-direction: row;
  }

}

/* ***************************** Company **********************************/

#company table td:first-child{
  width:30%;
  text-align-last: justify;
  padding:0 30px 0 0;
}
#company table tr{
  line-height: 1.5rem;
}
@media screen and (min-width:1300px) {
  #company table{
    width:40%;
    margin:0 auto;
  }
}
/* ***************************** Access **********************************/
#ac1{
  text-align: center;
}
iframe{
  width:90%;
  height:calc(100vw / 2);
  margin:20px 5%;
}
/* ***************************** Footer **********************************/

footer{
  margin-top:50px;
}
footer p{
  text-align: center;
}


/* **************************** Inview ********************************** */
.fadeIn_up {
  opacity: 0;
  transform: translate(0, 50%);
  transition: 2s;
}

.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

/* **************************** 共通メディアクエリ **************************** */
@media screen and (min-width:1300px) {
  .paragraph1,
  #au0 p,
  #au1 p ,
  #company table tr,
  #ac1 p {
    font-size: 1.3rem;
    line-height: 2rem;
  }

}