@charset "UTF-8";
body{
  padding-top: 100px;
}
main{
  overflow: hidden;
  padding-bottom: 0;
}
.abouts{
  .intro{
    display:flex;
    align-items: center;
    background: #EAEAEC;
    height: 520px;
    position: relative;
    overflow: hidden;
    margin-top: 15px;
  }
  .intro_box{
    max-width: 620px;
    position: relative;
    z-index: 1;
  }
  .intro_img {
    position: absolute;
    left: calc(50% - 20px);
    top: 0;
    height: 100%;
    img {
      object-fit: cover;
      max-width: none;
      width: auto;
      height: auto;
      @media screen and (max-width: 767px) {
        opacity: .33;
      }
    }
  }
  .intro_com {
    margin-top: var(--sp-30);
  }
  .fs_20{
    font-size: var(--fs-20);
    margin-bottom: var(--sp-20);
  }
}

.details{
  .intro:first-child{
    margin-top: 0;
  }
  .intro_caption{
    width: 100%;
    text-align: left;
    margin-top: 10px;
  }
  .doc_feat{
    > p{
      width: 100%;
    }
    .center{
      width: 100%;
      display: flex;
      justify-content: center;
      text-align: center;
    }
  }
  .doc_det{
    width: 100%;
    summary{
      display: flex;
      align-items: center;
      background: #5F5E5E;
      color: #fff;
      height: 60px;
      padding: 0 var(--sp-50);
      gap: var(--sp-30);
      list-style: none;
      cursor: pointer;
      @media screen and (max-width: 767px) {
        font-size: var(--fs-14);
        padding: 0 5%;
        gap: var(--sp-20);
      }
      &::-webkit-details-marker {
        display: none;
      }
      &::before{
        content: '';
        display: block;
        min-width: 13px;
        height: 11px;
        background: url("../../common/img/arrow_bot.png") no-repeat center;
        background-size: contain;
        filter: brightness(0) invert(1);
      }
    }
    .doc_spec{
      margin-top: var(--sp-30);
    }
  }
}

.feat_ex{
  display: flex;
  flex-wrap: wrap;
  background: #F5F5F5;
  padding: var(--sp-40) var(--sp-50);
  @media screen and (max-width: 767px) {
    padding: 5%;
    padding-right: 5%;
  }
  gap: var(--sp-30);
}
.feat_ex_head{
  width: 100%;
  font-size: var(--fs-24);
}
.feat_ex_box{
  width: calc(100% - var(--sp-30) - 635px);
  @media screen and (max-width: 767px) {width: 100%;}
}
/*タブレット（縦）*/
@media screen and (orientation: portrait) and (min-width: 768px) {}
@media screen and (max-width: 767px) {}
@media print {}