@charset "UTF-8";
/* COMMON STYLE */
.dei { color: #49466a; font-size: 14px;}
.dei a { color: #49466a;}
.dei a:hover { opacity: 0.8;}
.dei figure { margin: 0;}
.dei h1,.dei h2, .dei h3 { margin-bottom: 30px; font-size: 18px!important; line-height: 1.5!important;}
.dei h1 { font-size: 26px!important;}
.dei h1 small { display: block; font-size: 14px; font-weight: normal;}
.dei .contents-inr .opening-text { padding: 40px 20px!important}
.dei .text-summary { margin-bottom: 40px!important;}
.dei figure { width: 100%;}
.dei figure img { width: 100%;}
@media screen and (max-width: 767px) {
}
@media screen and (min-width: 768px) {
  .dei h1, .dei h2, .dei h3 { font-size: 30px!important;}
  .dei h1 small { font-size: 18px;}
  .dei h3 { font-size: 30px!important;}
}
.dei h2 { font-weight: bold;}
.dei h2 .inr { position: relative; margin-right: -65px!important;}
.dei h2 .inr::before { content: ""; position: absolute; left: -65px; top: 50%; transform: translateY(-50%); width: 50px; height: 30px; background: url(/solution/wp-content/themes/drop-child/img/dei/icon-tv.svg) no-repeat right center/auto 100%;}
.dei .sec-column h2 .inr::before { background-image: url(/solution/wp-content/themes/drop-child/img/dei/icon-notebook.svg);}
.dei .sec-video h2 .inr::before { background-image: url(/solution/wp-content/themes/drop-child/img/dei/icon-video.svg);}
.dei .sec-case-study h2 .inr::before { background-image: url(/solution/wp-content/themes/drop-child/img/dei/icon-fukidashi.svg);}
.dei .sec-document h2 .inr::before { background-image: url(/solution/wp-content/themes/drop-child/img/dei/icon-document.svg);}
@media screen and (max-width: 767px) {
  .dei .sec-case-study h2 .inr { width: fit-content; margin: 0 auto 30px;}
}
@media screen and (min-width: 768px) {
  .dei h2 .inr { margin-right: -95px!important;}
  .dei h2 .inr::before { left: -95px; width: 80px; height: 50px;}
}
/* OPENING */
.dei .sec-opening { background: url(/solution/wp-content/themes/drop-child/img/dei/img-sec-top-sp.png) no-repeat top 60px center/100% auto;}
.dei .sec-opening .sec-opening-inr  { background: url(/solution/wp-content/themes/drop-child/img/dei/bg-opening-sp.png) no-repeat top 80px center/100% auto;}
.dei .sec-opening .sec-opening-inr .opening-text { max-width: 815px; margin: 0 auto 65px; padding: 178px 20px 0 20px; text-align: center; font-weight: 500; line-height: 5!important; }
.dei .sec-opening .text-catch { margin-bottom: 40px!important; font-size: 16px;}
/* .opening-slide */
.dei .opening-slide .box-slide { margin: 0 20px;}
.dei .opening-slide .box-slide img { width: 100%;}
.dei .opening-slide .box-slide p { margin-top: 10px!important; text-align: center; font-weight: bold;}
@media screen and (max-width: 767px) {
  .dei .sec-opening .inr { overflow: hidden;}
}
@media screen and (min-width: 768px) {
  .dei .sec-opening { background-image: url(/solution/wp-content/themes/drop-child/img/dei/img-sec-top-pc.jpg); background-position: top 70px center;}
  .dei .sec-opening .sec-opening-inr { background: url(/solution/wp-content/themes/drop-child/img/dei/bg-opening-pc.png) no-repeat top 80px center/815px auto;}
  .dei .sec-opening .sec-opening-inr .opening-text  { margin: 0 auto 125px; padding: 248px 0 0;}
  .dei .sec-opening .text-catch {  font-size: 20px;}
  /* .opening-slide */
  .dei .opening-slide .box-slide { margin: 0 40px;}
}
/* .sec-column */
.dei .sec-column { padding-top: 137px; background: url(/solution/wp-content/themes/drop-child/img/dei/img-sec-middle01-sp.png) no-repeat top center/100% auto;}
.dei .sec-column ul, .sec-document ul, .sec-case-study ul, .dei .sec-video ul { display: flex; justify-content: space-between; flex-wrap: wrap;}
.dei .sec-column ul li, .dei .sec-case-study ul li, .dei .sec-video ul li { width: 100%; text-align: center; font-weight: bold;}
.dei .sec-column ul li figure, .dei .sec-case-study ul li figure { margin-bottom: 10px;}
@media screen and (max-width: 767px) {
  .sec-column ul li:nth-child(n + 2), .sec-video ul li:nth-child(n + 2) { margin-top: 40px;}
}
@media screen and (min-width: 768px) {
  .dei .sec-column { padding-top: 254px; background-image: url(/solution/wp-content/themes/drop-child/img/dei/img-sec-middle01-pc.jpg);}
  .dei .sec-column ul li, .dei .sec-case-study ul li, .sec-document ul li, .dei .sec-video ul li { width: 48%;}
  .dei .sec-column ul li:nth-child(n + 3), .dei .sec-video ul li:nth-child(n + 3) { margin-top: 30px;}
}
/* .sec-video */
.dei .sec-video .box-video { aspect-ratio: 16/9; background: #eee;}
.dei .sec-video ul li img { border: 1px solid #ddd;}
.dei .sec-video ul li p { margin-top: 10px!important}
.dei .sec-video .box-video iframe { aspect-ratio: 16 / 9; width: 100%; height: 100%; border: none;}
/* .sec-case-study */
.dei .sec-case-study { padding-top: 137px; background: url(/solution/wp-content/themes/drop-child/img/dei/img-sec-middle02-sp.png) no-repeat top center/100% auto;}
.dei .sec-case-study h2 small { display: block; margin-left: 10px; font-size: 14px;}
@media screen and (max-width: 767px) {
  .sec-case-study ul li:nth-child(n + 2) { margin-top: 40px;}
}
@media screen and (min-width: 768px) {
  .dei .sec-case-study { padding-top: 254px; background-image: url(/solution/wp-content/themes/drop-child/img/dei/img-sec-middle01-pc.jpg);}
  .dei .sec-case-study h2 small { display: inline-block; font-size: 25px;}
  .dei .sec-case-study ul li:nth-child(n + 3) { margin-top: 30px;}
}
/* .sec-document */
.dei .sec-document { padding-top: 137px; background: url(/solution/wp-content/themes/drop-child/img/dei/img-sec-middle01-sp.png) no-repeat top center/100% auto, url(/solution/wp-content/themes/drop-child/img/dei/img-sec-btm-sp.png) no-repeat bottom center/100% auto;}
.dei .sec-document .btn-download { display: flex; justify-content: center; align-items: center; width: 70%; min-width: 246px; height: 50px; margin: 30px auto 0; color: #fff; background: #49466a; border-radius: 3px;}
.dei .sec-document ul li { width: 100%; font-size: 16px;}
.dei .sec-document ul li figure { width: 100%; margin-bottom: 20px;}
@media screen and (max-width: 767px) {
  .dei .sec-document ul { margin-bottom: 91px!important;}
  .dei .sec-document ul li:nth-child(n + 2) { margin-top: 60px;}
}
@media screen and (min-width: 768px) {
  .dei .sec-document { padding-top: 254px; background-image: url(/solution/wp-content/themes/drop-child/img/dei/img-sec-middle01-pc.jpg) , url(/solution/wp-content/themes/drop-child/img/dei/img-sec-btm-pc.jpg);}
  .dei .sec-document .contents-inr { padding-bottom: 178px!important; }
  .dei .sec-document ul li { width: 45%; display: flex; flex-direction: column;}
  .dei .sec-document ul li p { flex-grow: 1;}
  .dei .sec-document ul li:nth-child(n + 3) { margin-top: 60px;}
  .dei .sec-document .btn-download { width: 90%; max-width: 380px;}
}
@keyframes modal-video {
  from { opacity: 0}
  to { opacity: 1}
}
@keyframes modal-video-inner {
  from { transform: translate(0, 100px)}
  to { transform: translate(0, 0)}
}
.modal-video { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); z-index: 1000000; cursor: pointer; opacity: 1; animation-timing-function: ease-out; animation-duration: .3s; animation-name: modal-video; transition: opacity .3s ease-out}
.modal-video-close { opacity: 0}
.modal-video-close .modal-video-movie-wrap { transform: translate(0, 100px)}
.modal-video-body { max-width: 960px; width: 100%; height: 100%; margin: 0 auto; padding: 0 10px; display: flex; justify-content: center; box-sizing: border-box}
.modal-video-inner { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%}
@media (orientation: landscape) { 
  .modal-video-inner {   padding: 10px 60px;   box-sizing: border-box }
}
.modal-video-movie-wrap { width: 100%; height: 0; position: relative; padding-bottom: 56.25%; background-color: #333; animation-timing-function: ease-out; animation-duration: .3s; animation-name: modal-video-inner; transform: translate(0, 0); transition: transform .3s ease-out}
.modal-video-movie-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%}
.modal-video-close-btn { position: absolute; z-index: 2; top: -45px; right: 0; display: inline-block; width: 35px; height: 35px; overflow: hidden; border: none; background: transparent}
@media (orientation: landscape) { 
  .modal-video-close-btn {   top: 0;   right: -45px }
}
.modal-video-close-btn:before { transform: rotate(45deg)}
.modal-video-close-btn:after { transform: rotate(-45deg)}
.modal-video-close-btn:before, .modal-video-close-btn:after { content: ''; position: absolute; height: 2px; width: 100%; top: 50%; left: 0; margin-top: -6px; background: #fff; border-radius: 5px;}
/* slick css */
.slick-dots { display: flex; justify-content: center; margin-top: 0!important;}
.slick-dots li { position: relative; cursor: pointer;}
.slick-dots li button { font-size: 0; line-height: 0; display: block; width: 20px; height: 20px; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent;}
.slick-dots li button:before { content: '•'; font-size: 50px; line-height: 20px; position: absolute; top: 0; left: 0; width: 20px; height: 20px; text-align: center; color: #ddd;}
.slick-dots li.slick-active button:before { color: #000!important;}

.prev-arrow,  .next-arrow { position: absolute; top: 50%; margin: -60px 0 0 0; display: flex; justify-content: center; align-items: center; line-height: 1; transform: translateY(-50%); cursor: pointer; z-index: 5;}
.prev-arrow { left: 4vw;}
.next-arrow { right: 4vw;}
.prev-arrow::after,  .next-arrow::after { content: ""; width: 12px; height: 30px; background: url(/solution/wp-content/themes/drop-child/img/dei/icon_arrow.svg) no-repeat center center/auto 100%;}
.prev-arrow::after { transform: rotate(180deg);}
.slider p { font-size: 2rem; font-weight: bold; line-height: 100px; color: #666; margin: 10px; text-align: center; background-color: #e0e0e0;}
@media screen and (min-width: 768px) {
  .slick-dots { margin-top: 30px!important;}
}
@media screen and (min-width: 1200px) {
  .prev-arrow { left: 23.5vw;}
  .next-arrow { right: 23.5vw;}
  .prev-arrow::after,  .next-arrow::after { width: 41px; height: 100px;}
}