#star{ 
  position:absolute;
  z-index:-2;
  width: 100%;
  height: 312px;
  background: linear-gradient(to bottom, #f0b586, #f0c5a3, #fff);
  top: 0;
  left: 0;
}
h3{
  display: inline;
  animation-name:fadeUp1;
  animation-delay: 0.3s;
  animation-duration:0.6s;
  animation-fill-mode:forwards;
  opacity: 0;
}
.title img{
  position: relative;
  width: 130px;
  height: auto;
  animation-name:fadeUp2;
  animation-delay: 0.5s;
  animation-duration:0.6s;
  animation-fill-mode:forwards;
  opacity: 0;
  margin-left: -150px;
  margin-right: 20px;
  z-index: 10;
}
.wrap_title{
  margin-top: -80px;
}
@keyframes fadeUp1{
  from {
    opacity: 0;
  transform: translateY(20px);
  }
  to {
    opacity: 1;
  transform: translateY(0px);
  }
}
@keyframes fadeUp2{
  from {
    opacity: 0;
  transform: translateY(36px);
  }
  to {
    opacity: 1;
  transform: translateY(16px);
  }
}
.title p {
  margin-top: -120px;
  margin-bottom: 3rem;
  text-align: center;
  font-weight: bold;
}
.sub_menu{
  display: flex;
  justify-content: center;
}
.sub_menu a{
  width: 150px;
  height: 150px;
  background: #fff;
  background-image: url(../images/office/kaisyaicon.png);
  background-size: 84px;
  background-position: center 12%;
  background-repeat: no-repeat;
  border-radius: 75px;
  padding: 62px 0;
  margin: 0px 25px 50px;
}
.sub_menu a:nth-child(2){
  background-image: url(../images/office/map_icon.svg);
  background-size: 58px;    background-position: 50% 7%;
}
.sub_menu a:last-child{
  background-image: url(../images/man1.png);
  background-size: 57px;
  background-position: 54% 15%;
}
.sub_btn p{
  margin-top: 22px;
  background: #f0b586;
  color: #FFF7E2;
  font-size: 14px;
  padding: 25px;
  text-align: center;
  border-radius: 0 0 68px 68px;
}
.wrap_message,.wrap_gaiyo,.wrap_access,.wrap_staff{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex: 0 0 30%;
}
.wrap_message .shiba,.access .shiba{
  margin-top: 15px;
  transform: rotate(-18deg);
}

.message_comp ,.gaiyo,.access,.staff{
  display: flex;
}
.message_comp p{
  flex: 0 0 70%;
  margin-top: 18px;
  padding-right: 5rem;
}
.block{
  display: block;
  flex: 0 0 24px;
}
/*office写真*/
.comp_gallery img{
  width: 230px;
  opacity: 0.8;
}
.comp_gallery{
  display: flex;
  overflow: hidden;
  margin: 2.5rem 0;
}
.comp_slide{
  display: flex;
  animation-name: loop-slide;/* アニメーション名 */
  animation-duration: 22s;/* 開始から終了までの所要時間 */
  animation-iteration-count: infinite;/* アニメーションのループ回数 */
  animation-timing-function: linear;/* 動きの加減速 */
  animation-delay: 0.5s;/* アニメーションが開始するまでの遅延時間 */
  animation-fill-mode: both;
}
@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
/*会社概要*/
.gaiyo dl div{
  width: 100%;
  max-width: 600px;
  display: flex;
  margin: 0.3rem auto;
  border-bottom: 2px dotted #f0b586;
}
.gaiyo dt{
  flex: 0 0 130px;
  margin: 3px;
}
 .prof span{
  display: inline-block;
  background: #fff;
  border: solid 1px #999;
  border-radius: 15px;
  padding: 2px 8px;
  }
.gaiyo,.staff{
  flex-direction: row-reverse;
}
.gaiyo dl{
  flex: 0 0 70%;
  margin-bottom: 2rem;
}
.wrap_gaiyo{
  align-items: center;
  flex: 0 0 22%;
}
.wrap_gaiyo .shiba,.staff .shiba{
  margin-top: 35px;
  transform: rotate(20deg);
}
.gaiyo{
  background-image: url(../images/contents_bg3.svg),url(../images/contents_bg7.svg);
  background-position: 98% bottom, 79% bottom;
  background-size: 128px,100px;
  background-repeat: no-repeat;
}
/*スタッフ*/
.staff p{
  width: 155px;
  height: 93px;
  background-image: url(../images/office/prof_title.svg);
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
  padding-top: 28px;
  padding-left: 40px;
  font-size: 18px;
  font-weight: bold;
}
.staff dl{
  margin-top: 1rem;
}

.prof img{
 flex: 0 0 200px;
}
.prof{
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
  flex: 0 0 86%;
  padding: 50px 0;
}
.prof_text{
  flex: 0 0 33%;
  margin-left: 18px;
  width: 120px;
  font-size: 14px;
}
.staff{
  background-image: url(../images/office/prof_bg.svg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  margin-bottom: 3rem;
}
.wrap_staff{
  flex: 0 0 20%;
}
@media(max-width:609px){
  .title img{
    width: 113px;
    margin-left: -120px;
    margin-right: 0;
  }
  .wrap_title{
    margin-top: -66px;
  }
  .sub_menu a{
    width: 105px;
    height: 105px;
    background-size: 63px;
    padding: 8px 0;
    margin: 0px 16px 22px;
  }
  .sub_menu a:nth-child(2){
    background-size: 46px;
  }
  .sub_menu a:last-child{
    background-size: 43px;
  }
  .sub_btn p{
    margin-top: 53px;
    font-size: 14px;
    padding: 13px 0;
  }
  .wrap_message{
    margin-top: 2rem;
  }
  .message_comp ,.gaiyo,.access,.staff{
    flex-direction: column;
  }
  .message_comp p{
    padding-right: 0;
  }
  .wrap_gaiyo .shiba,.staff .shiba{
    margin-top: 5px;
    margin-bottom: 10px;
  }
  /*スタッフ*/
  .staff p{
    width: 97px;
    height: 82px;
    background-position: center;
    padding-top: 24px;
    padding-left: 29px;
    font-size: 16px;
  }
  .staff dl{
    margin-top: 0.1rem;
  }
  .prof img{
   flex: 0 0 120px;
   width: 120px;
   margin-top: 55px;
  }
  .prof{
    justify-content: center;
    padding: 0 0 150px 0;
  }
  .prof_text{
    flex: 0 0 40%;
  }
}
@media(max-width:480px){
  .wrap_title {
    margin-top: -81px;
}
.title p {
  margin-top: -58px;
}
.sub_menu a{
margin: 0px 7px 22px;
}
.gaiyo{
  background-position: 98% bottom, 50% bottom;
}
.prof_text {
  font-size: 12px;
}
.prof{
  padding: 0;
}
.staff{
  background-position: bottom;
}
}