@charset "UTF-8";
/*
Drone Service Page Styles
*/
.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.marker {
  background: linear-gradient(transparent 60%, #ff6 60%);
}

.spbr {
  display: none;
}
@media (max-width: 768px) {
  .spbr {
    display: block;
  }
}

.contents {
  font-family: "M PLUS 1", sans-serif;
}
.contents h2:not(.bg_none) {
  background-image: none;
  background-repeat: no-repeat;
  background-position: left top;
  padding: 0;
  margin-bottom: 0;
}
.contents section {
  padding: 0;
  width: 100%;
  padding: 6em 0;
}
@media (max-width: 768px) {
  .contents section {
    padding: 5vw 0;
  }
}
.contents .inner {
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .contents .inner {
    padding: 4vw;
  }
}
.contents #firstview {
  width: 100%;
  text-align: center;
}
.contents #firstview .en {
  color: #666;
  letter-spacing: 0.1em;
}
.contents #firstview h2 {
  font-size: 3.8rem;
  font-weight: 500;
  text-align: center;
  margin-bottom: 0.5em;
}
@media (max-width: 768px) {
  .contents #firstview h2 {
    font-size: 5vw;
  }
}
.contents #firstview p {
  text-align: left;
}
.contents #firstview .video-wrapper-16-9 {
  position: relative;
  width: 80%;
  padding-top: 41.25%; /* 16:9のアスペクト比 (9 ÷ 16 = 0.5625) */
  overflow: hidden; /* はみ出し防止 */
  margin: 2em auto 0;
}
@media (max-width: 768px) {
  .contents #firstview .video-wrapper-16-9 {
    width: 100%;
  }
}
.contents #firstview .video-wrapper-16-9 #video-playlist {
  /* 0.5秒かけて透明度を滑らかに変化させる */
  transition: opacity 0.3s ease-in-out;
}
.contents #firstview video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.contents #problem {
  background-color: #f6f6f6;
  width: 100%;
}
.contents #problem .problem__box {
  width: 100%;
  max-width: 990px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff; /* ボックスの背景色 */
  box-sizing: border-box; /* paddingを含めた幅・高さ */
}
.contents #problem .problem__box .problem__box--inner {
  border: 4px solid transparent;
  border-image-source: linear-gradient(to right, rgb(200, 42, 42) 0%, 21.8106999993%, rgb(175, 22, 25) 43.6213999987%, 71.8106999993%, rgb(149, 0, 6) 100%);
  border-image-slice: 1;
  padding: 80px;
}
@media (max-width: 768px) {
  .contents #problem .problem__box .problem__box--inner {
    padding: 4.5vw;
  }
}
.contents #problem .problem__box .problem__box--inner h2 {
  background-image: linear-gradient(to right, rgb(200, 42, 42) 0%, 21.8106999993%, rgb(175, 22, 25) 43.6213999987%, 71.8106999993%, rgb(149, 0, 6) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-size: 2.4em;
  margin-bottom: 40px;
  text-align: center;
}
@media (max-width: 768px) {
  .contents #problem .problem__box .problem__box--inner h2 {
    font-size: 5vw;
    background-size: auto;
  }
}
.contents #problem .problem__box .problem__box--inner .problem__list {
  text-align: left;
}
.contents #problem .problem__box .problem__box--inner .problem__list li {
  position: relative;
  margin-bottom: 15px;
  font-size: 1.25em;
  line-height: 1;
  margin-bottom: 32px;
  position: relative;
  padding-left: 2em;
}
@media (max-width: 768px) {
  .contents #problem .problem__box .problem__box--inner .problem__list li {
    font-size: 4vw;
    line-height: 1.6;
  }
}
.contents #problem .problem__box .problem__box--inner .problem__list li::before {
  content: "";
  width: 20px;
  height: 20px;
  left: 0;
  top: 0;
  border: 1px solid #666;
  display: inline-block;
  margin-right: 24px;
  position: absolute;
  left: 0;
  top: 0;
}
@media (max-width: 768px) {
  .contents #problem .problem__box .problem__box--inner .problem__list li::before {
    top: 2vw;
    width: 16px;
    height: 16px;
  }
}
.contents #problem .problem__box .problem__box--inner .problem__list li::after {
  content: ""; /* 擬似要素に必須 */
  /* チェックマークの線の太さと色 */
  border-right: 4px solid #CC0000; /* 赤いチェックマーク */
  border-bottom: 4px solid #CC0000; /* 赤いチェックマーク */
  /* L字を45度回転させてV字にする */
  transform: translate(-50%, -50%) rotate(45deg); /* 中央に寄せつつ回転 */
  /* チェックマークのサイズ（調整） */
  width: 10px; /* チェックマークの横幅 */
  height: 20px; /* チェックマークの縦幅 */
  /* オプション: チェックマークの角を丸くする */
  border-radius: 0 0 2px 0;
  position: absolute;
  left: 13px;
  top: 5px;
}
@media (max-width: 768px) {
  .contents #problem .problem__box .problem__box--inner .problem__list li::after {
    top: 2.5vw;
    width: 8px;
    height: 16px;
  }
}
.contents .solution {
  text-align: center;
  font-size: 1.5em;
  margin: 3.5em 0 64px;
  position: relative;
}
@media (max-width: 768px) {
  .contents .solution {
    font-size: 5vw;
    margin-top: 19vw;
    font-weight: 800;
  }
}
.contents .solution::before {
  content: "";
  display: inline-block; /* インライン要素として扱い、幅と高さを設定可能にする */
  width: 38px; /* アイコンの幅（適宜調整） */
  height: 38px; /* アイコンの高さ（適宜調整） */
  position: relative; /* 必要に応じて、アイコンを配置するために設定 */
  /* V字の太さ */
  border-right: 8px solid #AF1619; /* 画像に近い赤色（右の線） */
  border-bottom: 8px solid #AF1619; /* 画像に近い赤色（下の線） */
  /* 45度回転させてV字を作る */
  transform: rotate(45deg);
  position: absolute;
  top: -80px;
  left: calc(50% - 15px);
}
.contents #features .main__title {
  margin-bottom: 80px;
}
@media (max-width: 768px) {
  .contents #features .main__title {
    margin-bottom: 0;
  }
}
.contents #features .main__title span {
  display: flex;
  align-items: center;
  color: #8B0000;
  font-size: 2rem;
  font-weight: bold;
  justify-content: center;
  font-family: "Oswald", sans-serif;
}
.contents #features .main__title span::before, .contents #features .main__title span::after {
  content: "";
  height: 1px;
  background-color: #8B0000;
  width: 10px;
}
.contents #features .main__title span::before {
  margin-right: 1em;
}
.contents #features .main__title span::after {
  margin-left: 1em;
}
.contents #features .main__title h2 {
  font-size: 2.4em;
  color: #8B0000;
  text-align: center;
  line-height: 1.4;
  font-weight: 800;
}
@media (max-width: 768px) {
  .contents #features .main__title h2 {
    padding: 3vw;
    font-size: 6vw;
  }
}
.contents #features .features__box {
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 1px 12px 0px rgba(20, 20, 20, 0.1);
  padding: 64px 56px;
  margin-bottom: 100px;
}
.contents #features .features__box:nth-last-child {
  margin-bottom: 0;
}
@media (max-width: 768px) {
  .contents #features .features__box {
    padding: 4vw;
  }
}
.contents #features .features__box:last-of-type {
  margin-bottom: 0;
}
.contents #features .sub__title {
  position: relative;
  margin-bottom: 40px;
}
@media (max-width: 768px) {
  .contents #features .sub__title {
    margin-bottom: 5vw;
  }
}
.contents #features .sub__title p {
  width: 132px;
  height: 132px;
  font-size: 1em;
  text-align: center;
  padding: 1.5em 2em 0;
  display: inline-block;
  position: absolute;
  left: -16px;
  top: -100px;
  font-family: "Oswald", sans-serif;
  line-height: 1.2;
  background-image: linear-gradient(to right, rgb(200, 42, 42) 0%, 21.8106999993%, rgb(175, 22, 25) 43.6213999987%, 71.8106999993%, rgb(149, 0, 6) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  border: 4px solid transparent;
  border-image-source: linear-gradient(to right, rgb(200, 42, 42) 0%, 21.8106999993%, rgb(175, 22, 25) 43.6213999987%, 71.8106999993%, rgb(149, 0, 6) 100%);
  border-image-slice: 1;
}
@media (max-width: 768px) {
  .contents #features .sub__title p {
    left: calc(50% - 40px);
    top: -40px;
    width: 80px;
    height: 80px;
    font-size: 10px;
  }
}
.contents #features .sub__title p span {
  font-size: 3.4em;
  display: block;
}
.contents #features .sub__title h3 {
  text-align: center;
  font-size: 2em;
  line-height: 1.4;
}
@media (max-width: 768px) {
  .contents #features .sub__title h3 {
    padding-top: 16vw;
    font-size: 5vw;
  }
}
.contents #features .article {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (max-width: 768px) {
  .contents #features .article {
    flex-flow: column;
  }
}
.contents #features .article p {
  width: calc(100% - 470px);
  font-size: 1.127em;
  line-height: 1.8;
}
@media (max-width: 768px) {
  .contents #features .article p {
    width: 100%;
    margin-bottom: 2em;
  }
}
.contents #features .article figure {
  width: 100%;
  max-width: 430px;
}
@media (max-width: 768px) {
  .contents #features .article figure {
    width: 100%;
  }
}
.contents #equipment {
  background-color: #f6f3f3;
  width: 100%;
  margin: 0 auto;
}
.contents #equipment .equipment__title {
  margin-bottom: 80px;
}
@media (max-width: 768px) {
  .contents #equipment .equipment__title {
    margin-bottom: 0;
  }
}
.contents #equipment .equipment__title span {
  display: flex;
  align-items: center;
  color: #8B0000;
  font-size: 2rem;
  font-weight: bold;
  justify-content: center;
  font-family: "Oswald", sans-serif;
}
.contents #equipment .equipment__title span::before, .contents #equipment .equipment__title span::after {
  content: "";
  height: 1px;
  background-color: #8B0000;
  width: 10px;
}
.contents #equipment .equipment__title span::before {
  margin-right: 1em;
}
.contents #equipment .equipment__title span::after {
  margin-left: 1em;
}
.contents #equipment .equipment__title h2 {
  font-size: 2.4em;
  color: #8B0000;
  text-align: center;
  line-height: 1.4;
  font-weight: 800;
}
@media (max-width: 768px) {
  .contents #equipment .equipment__title h2 {
    padding: 3vw;
    font-size: 6vw;
  }
}
.contents #equipment .equipment__bloc {
  background: #FFF;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto 40px;
  padding: 80px;
}
@media (max-width: 768px) {
  .contents #equipment .equipment__bloc {
    padding: 4vw;
  }
}
.contents #equipment .equipment__bloc h3 {
  font-family: "Oswald", sans-serif;
  background-image: linear-gradient(to right, rgb(200, 42, 42) 0%, 21.8106999993%, rgb(175, 22, 25) 43.6213999987%, 71.8106999993%, rgb(149, 0, 6) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-size: 2em;
}
@media (max-width: 768px) {
  .contents #equipment .equipment__bloc p {
    margin-bottom: 1em;
  }
}
.contents #equipment .equipment__bloc .flex {
  flex-direction: row-reverse;
  align-items: center;
}
@media (max-width: 768px) {
  .contents #equipment .equipment__bloc .flex {
    flex-direction: column;
  }
}
.contents #equipment .equipment__bloc .equipment__features {
  width: calc(100% - 480px);
}
@media (max-width: 768px) {
  .contents #equipment .equipment__bloc .equipment__features {
    width: 100%;
  }
}
.contents #equipment .equipment__bloc .equipment__features dt {
  padding: 0.1em 1em;
  background-image: linear-gradient(to right, rgb(200, 42, 42) 0%, 21.8106999993%, rgb(175, 22, 25) 43.6213999987%, 71.8106999993%, rgb(149, 0, 6) 100%);
  color: #FFF;
  display: inline-block;
  margin-bottom: 0.5em;
}
.contents #equipment .equipment__bloc .equipment__features dd {
  line-height: 2.5;
}
.contents #equipment .equipment__bloc .equipment__features dd::before {
  content: "・";
}
@media (max-width: 768px) {
  .contents #equipment .equipment__bloc .equipment__features dd {
    line-height: 1.6;
  }
}
.contents #equipment .equipment__bloc figure {
  width: 100%;
  max-width: 440px;
}
.contents #middle {
  background-color: #fcdcdc;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  color: #FFF;
  background-image: url("/cd/movie/wp-content/themes/ga-movie/assets/img/drone/middle_bg_image_01.png");
  background-repeat: no-repeat;
  background-size: cover;
}
.contents #middle .text__main {
  font-size: 1.5em;
  margin-bottom: 1em;
}
@media (max-width: 768px) {
  .contents #middle .text__main {
    font-size: 3.8vw;
  }
}
.contents #middle .text__sub {
  font-size: 1.125em;
}
@media (max-width: 768px) {
  .contents #middle .text__sub {
    font-size: 3vw;
  }
}
.contents #case {
  background-color: #f6f6f6;
  padding-bottom: 0;
}
.contents #case .case__title {
  margin-bottom: 80px;
}
@media (max-width: 768px) {
  .contents #case .case__title {
    margin-bottom: 0;
  }
}
.contents #case .case__title span {
  display: flex;
  align-items: center;
  color: #8B0000;
  font-size: 2rem;
  font-weight: bold;
  justify-content: center;
  font-family: "Oswald", sans-serif;
}
.contents #case .case__title span::before, .contents #case .case__title span::after {
  content: "";
  height: 1px;
  background-color: #8B0000;
  width: 10px;
}
.contents #case .case__title span::before {
  margin-right: 1em;
}
.contents #case .case__title span::after {
  margin-left: 1em;
}
.contents #case .case__title h2 {
  font-size: 2.4em;
  color: #8B0000;
  text-align: center;
  line-height: 1.4;
  font-weight: 800;
}
@media (max-width: 768px) {
  .contents #case .case__title h2 {
    padding: 3vw;
    font-size: 6vw;
  }
}
.contents #case #under_works h2 {
  display: none;
}
.contents #case #under_works h2:not(.bg_none) {
  background-image: none;
  background-repeat: no-repeat;
  background-position: left top;
  padding: 0;
  margin-bottom: 0;
}
.contents #know {
  background-color: #f6f6f6;
  position: relative;
}
@media (max-width: 768px) {
  .contents #know {
    padding: 4vw;
  }
}
.contents #know::after {
  content: "";
  width: 100%;
  height: 220px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #af1518;
  z-index: 10;
}
.contents #know .inner {
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 1px 12px 0px rgba(20, 20, 20, 0.1);
  max-width: 1100px;
  width: 100%;
  padding: 56px 4em 4em;
  position: relative;
  z-index: 20;
}
@media (max-width: 768px) {
  .contents #know .inner {
    padding: 4vw;
  }
}
.contents #know .inner .know__title {
  background: #af1518;
  color: #FFF;
  text-align: center;
  padding-top: 24px;
  padding-bottom: 24px;
  margin-bottom: 40px;
  line-height: 1;
}
@media (max-width: 768px) {
  .contents #know .inner .know__title {
    padding: 12px 0;
  }
}
@media (max-width: 768px) {
  .contents #know .inner .know__title h2 {
    margin-bottom: 0 !important;
  }
}
.contents #know .inner .know__title span {
  font-family: "Oswald", sans-serif;
  font-size: 2.4em;
}
.contents #know .inner h3 {
  text-align: center;
  font-size: 1.5em;
  margin-bottom: 24px;
}
@media (max-width: 768px) {
  .contents #know .inner h3 {
    font-size: 4vw;
  }
}
.contents #know .inner dl {
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 1px 12px 0px rgba(20, 20, 20, 0.1);
  padding: 32px 40px 32px 110px;
  margin-bottom: 40px;
  background-position: 24px center;
  background-repeat: no-repeat;
}
@media (max-width: 768px) {
  .contents #know .inner dl {
    padding: 4vw 4vw 4vw 15vw;
    background-size: 10vw;
    background-position: 3vw center;
  }
}
.contents #know .inner dl:nth-of-type(1) {
  background-image: url("/cd/movie/wp-content/themes/ga-movie/assets/img/drone/know_icon_01.png");
}
.contents #know .inner dl:nth-of-type(2) {
  background-image: url("/cd/movie/wp-content/themes/ga-movie/assets/img/drone/know_icon_02.png");
}
.contents #know .inner dl:nth-of-type(3) {
  background-image: url("/cd/movie/wp-content/themes/ga-movie/assets/img/drone/know_icon_03.png");
}
.contents #know .inner dl:nth-of-type(4) {
  background-image: url("/cd/movie/wp-content/themes/ga-movie/assets/img/drone/know_icon_04.png");
}
.contents #know .inner dl:last-of-type {
  margin-bottom: 0;
}
.contents #know .inner dl dt {
  font-size: 1.2em;
  background-image: linear-gradient(to right, rgb(200, 42, 42) 0%, 21.8106999993%, rgb(175, 22, 25) 43.6213999987%, 71.8106999993%, rgb(149, 0, 6) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.contents #flow .flow__title {
  margin-bottom: 80px;
}
@media (max-width: 768px) {
  .contents #flow .flow__title {
    margin-bottom: 0;
  }
}
.contents #flow .flow__title span {
  display: flex;
  align-items: center;
  color: #8B0000;
  font-size: 2rem;
  font-weight: bold;
  justify-content: center;
  font-family: "Oswald", sans-serif;
}
.contents #flow .flow__title span::before, .contents #flow .flow__title span::after {
  content: "";
  height: 1px;
  background-color: #8B0000;
  width: 10px;
}
.contents #flow .flow__title span::before {
  margin-right: 1em;
}
.contents #flow .flow__title span::after {
  margin-left: 1em;
}
.contents #flow .flow__title h2 {
  font-size: 2.4em;
  color: #8B0000;
  text-align: center;
  line-height: 1.4;
  font-weight: 800;
}
@media (max-width: 768px) {
  .contents #flow .flow__title h2 {
    padding: 3vw;
    font-size: 6vw;
  }
}
.contents #flow ol {
  list-style: none; /* デフォルトの「1.」を非表示 */
  counter-reset: my-counter; /* "my-counter"という名前のカウンターを0で開始 */
  padding-left: 0; /* ブラウザ標準の余白をリセット */
}
.contents #flow ol li {
  counter-increment: my-counter; /* my-counterの数値を1増やす */
  position: relative;
  margin-bottom: 40px;
  padding: 24px 24px 24px 0;
  border: 1px solid #d0d0d0;
  border-radius: 12px;
  min-height: 140px;
}
.contents #flow ol li::before {
  content: counter(my-counter, decimal-leading-zero);
  font-size: 4em;
  font-family: "Oswald", sans-serif;
  position: absolute;
  left: 44px;
  top: calc(50% - 32px);
  line-height: 1;
  color: #CC0000;
  height: 100%;
}
@media (max-width: 768px) {
  .contents #flow ol li::before {
    font-size: 8vw;
    top: calc(50% - 4vw);
    left: 4vw;
  }
}
.contents #flow ol li::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 52px solid transparent;
  border-right: 52px solid transparent;
  border-top: 28px solid #c82a2a;
  position: absolute;
  bottom: -28px;
  left: calc(50% - 52px);
}
.contents #flow ol li dl {
  margin: 0 0 0 150px;
  border-left: 1px solid #d0d0d0;
  padding-left: 40px;
  min-height: 112px;
}
@media (max-width: 768px) {
  .contents #flow ol li dl {
    margin: 0 0 0 15vw;
    padding: 4vw 4vw 4vw 6vw;
  }
}
.contents #flow ol li dl dt {
  font-size: 1.4em;
}
.contents #flow ol li:last-of-type {
  margin-bottom: 4em;
}
.contents #flow ol li:last-of-type::after {
  display: none;
}
.contents #flow .caution {
  background-color: #f7f7f5;
  padding: 3em 3em 3em 20%;
  background-image: url("/cd/movie/wp-content/themes/ga-movie/assets/img/drone/caution_image_01.png");
  background-repeat: no-repeat;
  background-position: 46px bottom;
  background-size: auto;
}
@media (max-width: 768px) {
  .contents #flow .caution {
    background-image: none;
    padding: 4vw;
  }
}
.contents #flow .caution dt {
  font-weight: 800;
}
.contents #faq {
  width: 100%;
  background-color: #f6f3f3;
  padding: 80px 0;
}
.contents #faq .faq__title {
  margin-bottom: 80px;
}
@media (max-width: 768px) {
  .contents #faq .faq__title {
    margin-bottom: 0;
  }
}
.contents #faq .faq__title span {
  display: flex;
  align-items: center;
  color: #8B0000;
  font-size: 2rem;
  font-weight: bold;
  justify-content: center;
  font-family: "Oswald", sans-serif;
}
.contents #faq .faq__title span::before, .contents #faq .faq__title span::after {
  content: "";
  height: 1px;
  background-color: #8B0000;
  width: 10px;
}
.contents #faq .faq__title span::before {
  margin-right: 1em;
}
.contents #faq .faq__title span::after {
  margin-left: 1em;
}
.contents #faq .faq__title h2 {
  font-size: 2.4em;
  color: #8B0000;
  text-align: center;
  line-height: 1.4;
  font-weight: 800;
}
@media (max-width: 768px) {
  .contents #faq .faq__title h2 {
    padding: 3vw;
    font-size: 6vw;
  }
}
.contents #faq .faq__contents dl {
  background-color: #FFF;
  padding: 3em;
  border-radius: 12px;
  margin-bottom: 40px;
  font-size: 1.4em;
}
@media (max-width: 768px) {
  .contents #faq .faq__contents dl {
    padding: 4vw;
    font-size: 3.5vw;
  }
}
.contents #faq .faq__contents dl dt {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 24px;
}
.contents #faq .faq__contents dl dt::before {
  content: "Q";
  color: #1018b6;
  text-align: left;
  margin-right: 1em;
  position: absolute;
  left: 0;
  top: 0;
}
.contents #faq .faq__contents dl dd {
  position: relative;
  padding-left: 1.5em;
}
.contents #faq .faq__contents dl dd::before {
  content: "A";
  color: #c82a2a;
  text-align: left;
  margin-right: 1em;
  position: absolute;
  left: 0;
  top: 0;
}/*# sourceMappingURL=drone.css.map */