@charset "UTF-8";
/* CSS Document */

/*  800px以上*/
 #working span.mbimg{display: none;}
  
  
#message h2{
	-ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
  }
  header nav.max,
  #works figure.chart .max{
 display:block;
 }
  header div.mb,
  header nav.mb,
  #works figure.chart .mb{
   display:none;
  }

  header{
   padding-left:1rem;
   padding-right:1rem;
  }
  header .content{
   max-width: 123.9rem;
  }

  
/*PCナビ*/

   header ul {
   display: flex;
   justify-content: space-between;
   list-style: none;
   align-items: center;
   align-content: center;
   margin-left: 0;
   padding-left: 0;
   }
   header li {
   margin-left: 0;
   padding-left: 0;
/*   margin-right: 2rem;*/
margin-right:2rem;
    margin-right:clamp(1rem,1vw,2rem);
   }
  
/*  下線アニメ*/
     header li a::after{
     border-bottom: solid .2rem #306339;
     bottom: 0;
     content: "";
     display: block;
     transition: all .3s ease;
     -webkit-transition: all .3s ease;
     width: 0;
     }
     #top li a:hover{
     opacity: 1;
     }
     header li a:hover::after{
     width: 100%;
     }
     header li:last-child a::after,
     header li:last-child a:hover::after{
     width: 0;
     border: none;display: none;
     }
  
   header li:last-child {
   display: flex;
   align-items: center;
   align-content: center;
   justify-content: space-around;
   background: #306339;
   height: 4.8rem;
   width: 14.8rem;
   margin-right: 0;
   border-radius: 2.6rem;
   border:none;
   /*  opacity: 1;*/
   transition: all ease 0.2s;
   }
   header li:last-child:hover{
   /* opacity: .7;*/
   border: 2px solid #306339;
   background-color: #FBFBFB;
   }
   header li:last-child a {
   text-align: center;
   color: #FBFBFB;
   display: block;
   width: 100%;
    border:none;
   transition: all ease 0.2s;
   }
   header li:last-child:hover a{
   color:#306339;
   font-weight: bold;
   border:none;
   }

/* scrollの時のサイズ調整 */
   #top.scroolhead,
   #top.scroolhead ul{
/*    margin: 0;*/
/*
    padding-bottom: 0rem;
    padding-top:0rem;
*/
   }
   #top.scroolhead .content>div>p:last-child{
/*    font-size:1.6rem;*/
   }
  
  
/*  key  */
  #key,#keys{
   /*      height: 66rem;*/
   height:82vh;
   position: relative;
   top: 0;
   }
#key{margin-top:9rem;}
   #key div.keyvisual,#keys div.keyvisual{
    height:82vh;
     background-position: center top;
   }
  #scrollicn{
   top:12%;
  }

  .keyvisual h1,.keyvisual h2{
   margin: 0;
   line-height: 1;
     padding: 20rem 0 0 0;
     font-size:4.8rem;/* 32px */
/*     font-size:clamp(3.4rem,3.6vw,4.8rem);*/
   font-size: clamp(3.8rem,3.8vw,4.8rem);
  }
  .keyvisual h1 br{
   display:none;
  }
 #keys .keyvisual h2 + p br{
   display:block;
  }  
  /*/=========伝えたいことBLOCK==========/*/
  .message.content{
    justify-content: space-between;
/*   align-items: start;*/
    grid-template-columns: 4rem auto 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: "left main1 right"
                         "left main2 right"
                         "left main3 right";
   }
   #message h2{
    grid-area: left;
    margin: 0;
    align-self: start;
   /* padding-right:clamp(1rem, 2vw, 3.6rem);*/
   }

   .message p.message,
   .message h3.message,
   .message div:nth-of-type(1){
    width:44.4rem;
    margin-left:3.6rem;
    margin-right:7.6rem;
   }
  
   .message p.message {
    grid-area: main1;
    text-align: left;
    margin-top: 3.5rem;
    margin-bottom: 0;
   }
   .message h3.message {
    grid-area: main2;
    font-size:1.8rem;
    text-align: left;
    margin-top: 3rem;
    margin-bottom: 3rem;
    padding: 0;
   }
   .message div:nth-of-type(1) {
    grid-area: main3;
   }
   .message div:nth-of-type(1) p{
    margin-top: 0;
    padding-top:0;
    margin-bottom:2rem;
    line-height: 2;
   }
   .message div:nth-of-type(2) {
    grid-area: right;
   /* max-width:55.6rem;*/
   }
   .message div:nth-of-type(2) span{
    max-width: 55.6rem;
    background-image: url("../images/home-img01@2x.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    height: 100%;
   }
  
  /* 商品紹介　*/
    #working{
     background-position: center 12rem,center 9rem,center top;
     padding-top:12rem;
    }
    #view .content{
    justify-content:stretch;
/*    grid-row-gap: 6rem;*/
     padding-top:10rem;
    }
    #view .content section{
    text-align: left;
     grid-column-start:1;
     align-self: center;
    }
    #view .content div:nth-of-type(1){
    grid-column-start: 2;
    }
    #view .content div:nth-of-type(2){
    grid-column-start: 3;
    align-self: center;
    }
  
  
    #view .content section p br{
    display:block;
    }
    #view .content ~ div{
     background-color: #59764E;
     padding-bottom: 2rem;
     padding-top: 5rem;
    }
/*
    #view .content ~ div p{
     margin: 0 auto;
     padding-bottom: 7rem;
    }
*/
    #view .content ~ div p a{
    display: block;
    max-width: 45.8rem;
    margin: auto;
    line-height: 3;
     color: #3F4A41;
    background: #EDECE5 0% 0% no-repeat padding-box;
    border: 0.4rem solid #306339;
    border-radius: 2.4rem;
    opacity: 1;
    }
    #scrollproduct.content{
     padding-top:0;
    }
/* works block */
    #works{
    background-size: 14rem auto,14rem auto;
     padding-bottom:11rem;
    }
    #works h3,
    #news h3,
    #company h2,
    #topics h3.single{
    border-left:1rem solid #731F17;
    padding-left: 2.5rem;
    line-height: 2;
    margin-top: 0;
    }

    #works .content>h4{
    border-left:.8rem solid #306339;
    padding-left: 2.7rem;

    line-height: 2;
    font-weight: 400;
    margin-left:0.4rem;
    }
  
  #works .work{
   grid-column-gap:5rem;
   grid-row-gap: 3rem;
   justify-content: stretch;
   align-items: stretch;
   padding-bottom:0;
  }
  
    .work div h4{
     text-align: center;
     background: #fff;
     font-size: 2.2rem;
    }

    .work h3~div div{
/*     margin-top:36rem;*/
     background-color: transparent;
    padding: 2rem 3.4rem 4rem;
    margin-top: 30rem;
/*padding: 1rem 3.3rem 4rem;*/
    background-image: url(../images/circle-topic.svg) ,url(../images/circle-topic.svg);
    background-repeat: no-repeat;
    background-position: center top,center bottom;
    background-size: auto,cover;
  }

    .work h3{
    grid-column: 1 / 4;
    grid-row: 1;
    }
    .work .left{
    grid-column: 1;
    grid-row: 2;
    background-image: url(../images/worklist01.png);
    background-position: center top;
    background-repeat: no-repeat;
    }
    .work .center{
    grid-column: 2;
    grid-row: 2;
     background-image: url(../images/worklist02.png);
    background-position: center top;
    background-repeat: no-repeat;
   }

    .work .right{
    grid-column: 3;
    grid-row: 2;
     background-image: url(../images/worklist03.png);
    background-position: center top;
    background-repeat: no-repeat;
   }
    #works .frame{
    display: grid;
    grid-row-gap: 0;
    grid-column-gap: 5rem;
     justify-content: center;
     align-items: center;
    }
    .frame .left,
    .frame .right{
    background-color: #fff;
    padding:4rem 3rem 6rem;
    }
    .frame .left{
    grid-column: 1;
    }
    .frame .right{
    grid-column: 2;
    }
  
    #works figure{
     padding:5rem 6rem 0;
    }
/*guide*/
 #guide div p:first-child{
 margin-right:5rem;
}
  
   /*  #news*/
   #news h3,
   #company h2{
   font-size: clamp(1.8rem,2.41vw,3rem);
   }
  /*#news*/
  #news h3{
   margin-bottom: 6rem;
  }
  #news article{
   display:flex;
   grid-column-gap: 2rem;
   margin-bottom: 10rem;
  }
  #news article section a{
   display: block;
  }
  #news article section{
   margin-right: 2rem;
/*backgrnd: pink;*/
   width:33.3%;
  }
   #news article section:last-child{
   margin-right: 0;
  }
  #news article .photoimage{
   text-align: center;
   width: 15rem;
   height: 15rem;
   margin-left: auto;
   margin-right: auto;
   background-image: url("../images/no-image.png");
   background-repeat: no-repeat;
   background-position: center center;
  }
  #news article .photoimage img{
/*
  width:100%;
  height: auto;
*/
  border-radius: 50%;
  }
  #news article h4{
   text-align: center;
  font-weight: normal;
  font-size: 1.4rem;
  font-size:clamp(1.4rem,1.6vw,1.8rem);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  }
  #news article .datetime{
  color:#3F4A41;
   text-align: center;
  }
  #news article .text{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
/*    text-overflow: " [..]";*/

  overflow: hidden;
  }

/*  #company*/
#company h2 span::after{
 content:"　";
 display: inline-block;
}
   #company h3{
   padding-top: 8rem;
   padding-bottom: 2.5rem;
   margin-bottom:3rem;
   }
   #company h4{
   margin-bottom:3rem;
   }


   .tab-group {
   display: flex;
   justify-content:flex-start;
   margin: 5rem 5rem 0 5rem;
   padding:0;
   list-style: none;
   border-bottom:4px solid #F0F3F5;
   }

  .panel-group{
   margin-left:3.3rem;
   margin-right:3.3rem;
  }
  
  .panel .table dl{
  overflow: hidden;
  }
  .panel .table dt{
  float:left;
  padding: 2rem;
  width:28%;
  border-bottom: 1px solid #DDD7CD;
  font-weight: bold;
  clear: both;
  overflow: hidden;
 height: 6rem;
 }
  .panel .table dd{
  margin-left:28%;
  padding: 2rem;
  border-bottom: 1px solid #DDD7CD;
 overflow: hidden;
 height: 6rem;
}
  }
/*
  .panel .table dl.moredd dd:nth-last-child(1){
   border: none;
  border-bottom: none;
  }
    .panel .table dl.moredd dt {
     background-color: rgba(221, 215, 205, 0.87);
    }
    .panel .table dl.moredd {
       border-bottom: 2px solid #DDD7CD;
     margin-bottom: 5rem;
    }
*/

  .panel .table:nth-of-type(2) > p {
   font-weight: bold;
   clear: both;
   margin-top: 5rem;
   background-color: rgba(221, 215, 205, 0.87);
   padding: 1rem 2rem;
  }
  
  .table.moreli{
   display:grid;
   grid-template-columns: 28% 1fr;
   grid-column-gap: 3rem;
  }
  .table.moreli h4{
   grid-column: 1;
   padding:2rem;
  }
  .table.moreli ul{
   grid-column: 2;
  }
  #showcase{
   padding: 0 3rem;
  }

   #showcase img{
   max-width:27.4rem;
   }
/*  #inquery*/
  #inquery{
   display: grid;
   grid-template-columns: 65% 33%;
   justify-content: space-between;
   align-items: center;
   padding-left:3.2rem;
   padding-right:3.2rem;
  }
  #inquery h3{
   grid-row:1;
   grid-column: 1;
   margin-bottom: 0;
  }
  #inquery p:nth-of-type(1){
   grid-column: 1;
   grid-row:2;
  }
  #inquery p:nth-of-type(2){
   grid-column: 2;
   grid-row:1/3;
  }
  
   /*  footer*/
  main{
   padding-bottom:9.5rem;
  }
   footer .content address{
   display: inline;
    padding-left:1em;
   }


#keyin{
 margin-top: 10rem;
}

/*inquery*/
/* お問い合わせ#inquery */
#contact th{
 width: 35%;
 margin-right:2rem;
}
#contact th labele{
}

#contact span.required,
#contact span.normal{
 display:inline-block;
 margin:0 0 0 1rem;
 padding:0;
 text-align: left;
  font-size: 1.4rem;
}
span.mail-attention small {
letter-spacing: 0.1rem;
 padding-left:1rem;
}

#contact table input[type=text],
#contact textarea#MailMessageMessage{
 width:30rem;
}
#contact table textarea{
 height:20rem;
}
main #contact div.submit{

 width: 70%;
}

/*#topics*/
#topics article#single{
 padding-bottom:6rem;
 padding-top: 2rem;
}
#topics .single{
 width: 70%;
 margin: auto;
}
#topics .eye-catch.single{padding-top: 2rem;}
#topics h3.single{
 margin-top: 6rem;
}