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

/*  799px以下　*/
  #view div:nth-of-type(1) img{
   width: 100%;
   height: auto;
  }
  #view .content{
/*   grid-row-gap: 3rem;*/
  }  
  #working{
/*  background-position: center 5rem,center 3.5rem,center top;*/
   padding-top: 10rem;
  }
  #works .work {
   padding: 0;
   margin-bottom:0;
  }
  #works .frame{
   margin-top:0;
  }
  #works .work > div {
   padding-left:2.4rem;
   padding-right: 2.4rem;
  }

  .work div div{
   display: grid;
   grid-column-gap: 2rem;
   grid-template-columns:11rem 1fr;
  }
  .work div div span{
   display: block;
   grid-column: 1;
   grid-row: 1 / 3;
   background-image: url("../images/mbworklist01.png");
   background-position: center center;
   background-size:cover;
   }
  .work div.center div span{
    background-image: url("../images/mbworklist02.png");
   }
  .work div.right div span{
    background-image: url("../images/mbworklist03.png");
   }
   .work div div span img{
   opacity: 1;
   height: auto;
   width: 100%;
   }
   .work div div h4{
   display: block;
   grid-column: 2;
   grid-row: 1;
   margin: 0;
   padding-top:2rem;
   text-align: left;

   }
   .work div div p{
   display: block;
   grid-column: 2;
   grid-row: 2;
   margin: 0;
   padding-bottom:2rem;
   }
  .work h3,
  .frame h4,
  #news h3,
  #company h2{
   text-align: center;
   background: url("../images/headeline.svg");
   background-position: center bottom;
   background-repeat: no-repeat;
   padding-bottom:1.5rem;
  }
  /*#news*/
  #news article{
  grid-row-gap: 2.6rem;
  }
  #news article section a{
  grid-column-gap: 2rem;
  grid-template-columns: 7.6rem 1fr;
  background-color: #fff;
  align-items: center
  }
  #news article .photoimage{
  grid-row:1/3;
  grid-column: 1;
  }
  #news article .photoimage img{
  max-width:100%;
  height: auto;
  }
  #news article h4{
  grid-column: 2;
  grid-row:2;
  margin: 0;
  font-weight: normal;
  font-size: 1.4rem;
  font-size:clamp(1.4rem,1.6vw,1.8rem);
   align-self: start;
  }
  #news article .datetime{
  grid-row:1;
  grid-column: 2;
  color:#3F4A41;
  }
  #news article .text{
  display: none;
  }
  
  /*  #company*/
  #company>h2 span{
  font-size: 1.6rem;
  font-weight: normal;
  padding-bottom: 0.4rem;
  display: block;
  }
  .panel .table dl{
  }
  .panel .table dt,
  .panel .table dd{
  padding-left:2rem;
  padding-right:2rem;

  }
  .panel .table dt,.panel .table.moreli h4{
  line-height: 3;
  background-color:rgba(221,215,205,0.87);
  } 
  .panel .table dd{
  border-bottom:1px dotted rgba(221,215,205,0.87);
  line-height: 3;
  }
  .panel .table{
  margin-bottom: 2rem;
  }
  .panel .table:nth-of-type(2)>p{
  font-weight: bold;
  }
  #company .table.moreli h4{
  /*   margin:0;*/
  padding-top:0;
  padding-bottom:0;
  }
  .panel-group {
   padding-bottom: 3rem;
  }
  
  /*#inquery*/
  #inquery p{
  margin-bottom: 2rem;
  }
  
  /*footer*/
  footer nav.content{
  flex-direction: column;
  }
/*  footer nav.content dl:first-child dd,*/
  footer nav.content dl:nth-of-type(3) dd,
  footer nav.content dl:nth-of-type(4) dd,
  footer nav.content dl:nth-of-type(5) dd{
   display: none;
  }
  footer nav.content dl dd{
   text-indent: 1em;
   font-size: 1.4rem;
  }
  footer nav.content a{
   padding-left:1em;
  }

#slider{
}
#slider .slick-list {
 margin:3rem auto 0;
 height: auto;
width:28rem;
}
#thumbnail-list{
 background: #306339;
 margin: 0 auto;width:28rem;
}

#thumbnail-list dt{
 display: none;
}
dd.thumbnail-item{
 display: none;
}
dd.thumbnail-item.thumbnail-current{
 line-height: 2;width:28rem;
 padding-bottom: 1rem;
 text-indent:4rem;
 display: block;

}



#showcase img{
 max-width:100%;
/* width:100%;*/
 height: auto;
}
#showcase li{
 width: auto;
 min-width:1rem;
}




/* お問い合わせ#inquery */
#contact table{
 width:100%;
/* margin:auto;*/
}
#contact table input,
#contact table textarea{
 background-color:#fff;
 border:1px solid #D2D0BE;
 border-radius: .5rem;
 padding:1rem;
 
}
#contact table textarea,#contact table input[type=text],#MailMessageUsername{
/* width: 100%;*/
 width:clamp(20rem,65vw,40rem);
}
#contact table textarea{height:30rem;}
#contact tr{
 display: block;
}
#contact td,
#contact th,
div.submit{
 padding: 0.8rem 2rem;
}

span.mail-attention small{
 display: block;
}
#contact th{
 min-width: 20rem;
 margin-right:auto;
display: block;
 white-space:wrap;
}
#contact td{}
#contact th labele{
 padding-left:0;
 padding-right:0;
 display: block;
}

#contact span.required,
#contact span.normal{
 display:inline-block;
 margin:0 0 0 1rem;
 padding:0;
 text-align: left;
 background-color:transparent;
  font-size: 1.4rem;
 font-size:clamp(1.4rem,1.6vw,1.6rem);
}

#MailMessageIndexForm span.required{color:#731F17;}
#MailMessageIndexForm span.normal{color:#306339;}

main #contact div.submit{
 display: flex;
 flex-direction: column;
 justify-content: center;
 width:100%;
 margin: auto;
}
input[type="submit"]#BtnMessageConfirm,
.submit input[type="reset"],
.submit #BtnMessageBack[type=submit],
.submit #BtnMessageSubmit[type=submit]{
  display: block;
 min-width: 25rem;
 margin: 2rem auto;
 background-color: #306339;
 border-radius: 4rem;
 border-color: #306339;
 line-height: 3.5;
 color:#FBFBFB;
/* font-size: 1.4rem;*/
 text-align: center;
}
.submit input[type="reset"],
.submit #BtnMessageBack[type=submit]{
  background-color: transparent;
 border:2px solid #306339;border-radius: 4rem;
 color:#306339;
}
#FieldMessageEmail2{
 display:inline-block;
 margin-top:1rem;

}
.normal h1.contents-head,
.normal h2.contents-head{
 font-size:1.8rem; /* 26px */
  font-size:clamp(1.8rem,2.6vw,2.6rem);
 display:inline-block;
margin:0;}

.normal h1.contents-head{margin-top:2rem}
.normal h1.contents-head::after{
 content: "：";
}
#cantact .mail-description p{
 margin:0rem auto 1rem;
}

#contact #flashMessage {
    padding: 10px 20px;
    color: #731F17;
    font-weight: bold;
    border: 5px solid #D2D0BE;
    margin: 3rem auto 4rem !important;
}
#contact .error-message::before{
 content: "! ";
}
#contact .error-message {
 padding-top:.5rem;
    color: #731F17;
    padding-left: 2rem;
 background: none;
    font-weight: bold;
    font-size: small;
}
#topics{
 
}

#topics article{
 display:flex;
margin-bottom: 6rem;
 align-items: start;
 padding-top:6rem;
 flex-direction: column;
}
#topics article#single{
/* flex-direction: column;*/
}
#topics article
div:first-child,
#topics article#single
div:first-child{
 width: 100%;
 margin-bottom: 2rem;
}



#detail main .content{
 margin-bottom: 1rem;
 padding-bottom: 1rem;
}
#detail p.btn-typeA{
 margin-bottom:5rem;
}
#detail main .normal section{
 border-bottom: 1px solid #fff;
margin-bottom: 2rem;
padding-bottom: 2rem;
 clear:both;
 overflow: hidden;
}

#detail main .normal section img{
 float:none;
 display: block;
 padding-left:0;
 padding-bottom:2rem;
 margin: auto;
}


/*似顔絵処理*/
   #company section.panel .table .portraitimg{
    padding:2rem 1rem;
    float: none;
    top:0;
    margin-top: 2rem;
   }
@media screen and (orientation: landscape) {
/*@media screen and (orientation: landscape){*/
/*
   header{
   position:relative;
   }
  #key{
   height: clamp(45rem, 80vh, 66rem);
  }
*/
}