@charset "UTF-8";
/* -----------------------------------------------
common
----------------------------------------------- */
main {
  padding-bottom: 100px;
}

main strong {
  display: block;
  font-weight: bold;
  padding-left: 1.5em;
  text-indent: -1.5em;
}

main strong::before {
  content: '◆';
  color: #0099CC;
  margin-right: 0.5em;
}

main p {
  margin: 0;
}

main p + p {
  margin-top: 1em;
}

@media screen and (max-width: 767px) {
  main strong {
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 0.3em;
  }

  main .head_wrap h2 span {
    font-size: 1.4rem;
  }
}

@media screen and (min-width: 768px) {
  main strong {
    font-size: 22px;
    line-height: 1.2;
    margin-bottom: 0.5em;
  }

  main .head_wrap h2 span {
    font-size: 16px;
  }
}

/* -----------------------------------------------
about
----------------------------------------------- */
.about .movie_wrap {
  position: relative;
  overflow: hidden;
}

.about .movie_wrap video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.about .to_contact a {
  background-color: #009CD0;
  color: #fff;
  height: 50px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
}

.about .to_contact a span {
  font-weight: bold;
  display: block;
}

@media screen and (max-width: 767px) {
  .about .text_flex {
    margin-top: 20px;
  }

  .about .flex_item {
    margin-top: 15px;
  }

  .about .movie_wrap {
    width: 100%;
    padding-top: 74.8%;
    margin: 30px auto 0; 
  }

  .about .to_contact {
    margin-top: 30px;
  }

  .about .to_contact a {
    width: 100%;
    border-radius: 6px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
  }

  .about .to_contact a span {
    font-size: 1.4rem;
  }

  .about .to_contact a span::after {
    content: '';
    display: inline-block;
    background-image: url(../img/common/icon_arrow_white.svg);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    width: 16px;
    height: 16px;
    left: 15px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
}

@media screen and (min-width: 768px) {
  .about .text_flex {
    margin-top: 30px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
  }
  
  .about .flex_item {
    width: 48%;
  }

  .about .flex_item:nth-child(n + 3) {
    margin-top: 20px;
  }

  .about .movie_wrap {
    width: 45.31%;
    padding-top: 33.89%;
    margin: 50px auto 0; 
  }

  .about .to_contact {
    margin-top: 50px;
  }

  .about .to_contact a {
    width: 270px;
    border-radius: 8px;
    margin: 0 auto;
  }

  .about .to_contact a span {
    font-size: 16px;
    padding-left: 24px;
    position: relative;
  }

  .about .to_contact a span::after {
    content: '';
    display: inline-block;
    background-image: url(../img/common/icon_arrow_white.svg);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    width: 16px;
    height: 16px;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
}

/* -----------------------------------------------
case
----------------------------------------------- */
.case .head_wrap h2 span {
  display: block;
}

.case .con_fx .text p span {
  display: block;
  font-weight: bold;
}

@media screen and (max-width: 767px) {
  .case {
    margin-top: 50px;
  }

  .case .con_fx {
    margin-top: 20px;
  }

  .case .con_fx .text {
    margin-top: 20px;
  }
}

@media screen and (min-width: 768px) {
  .case {
    margin-top: 30px;
  }

  .case .con_fx {
    margin-top: 20px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
  
  .case .con_fx .img {
    width: 32%;
  }
  
  .case .con_fx .img img {
    width: 100%;
  }
  
  .case .con_fx .text {
    width: 64%;
  }
}

/* -----------------------------------------------
att
----------------------------------------------- */
@media screen and (max-width: 767px) {
  .att {
    margin-top: 50px;
  }
}

@media screen and (min-width: 768px) {
  .att {
    margin-top: 80px;
  }
}