@charset "UTF-8";

/*-----------------------------------------------------*/
/*------------------メインビジュアル--------------------*/
/*-----------------------------------------------------*/
.main-visial {
  margin-top: var(--hamburger-size);
}
@media screen and (max-width: 768px) {
  .main-visial {
    margin-top: var(--hamburger-size-sp);
  }
}

/* グラデ背景アニメ */
.main-visial {
  width: 100%;
  height: 100svh;
  overflow: hidden;
}
.main-visial-inner {
  width: calc(100% - var(--hamburger-size));
  height: calc(100svh - var(--hamburger-size));
position: relative;
background: linear-gradient(45deg, #0057A6, #1588B2, #6ED1CE, #EFE7E6) 0 / 300% 300%;
animation: GradCircle 5s infinite linear;
  position: relative;
overflow:hidden;
}
@media screen and (max-width: 768px) {
  .main-visial .main-visial-inner {
    width: calc(100% - var(--hamburger-size-sp));
    height: calc(100svh - var(--hamburger-size-sp));
  }
}
@keyframes GradCircle {
  0%   { background-position: 50% 0%; }
  25%  { background-position: 20% 30%; } /* 白の範囲を少しだけ動かす */
  50%  { background-position: 50% 100%; }
  75%  { background-position: 0% 30%; }
  100% { background-position: 50% 0%; }
}

/* 波紋レイヤー */
.ripple-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1; /* 画像より前へ */
}

/* 波紋アニメ */
.ripple {
  position: absolute;
  width: 150px;
  height: 150px;
  pointer-events: none;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.1);

  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.03)
  );

  animation: rippleAnime 1.2s ease-out forwards;
}

@keyframes rippleAnime {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(3);
  }
}


/*50thアニメPC */
.top-main-50th{
position: absolute;
left: 0;
right: 0;
z-index: 1;
height: calc(100% - var(--hamburger-size));
top:var(--hamburger-size);
width:calc(100% - var(--hamburger-size));
background-color:#1588B2;
  display: grid;
  place-items: center;
}
.top-main-50th a{
display: block;
}
.top-main-50th a img{
}
.top-main-50th-sp{display: none;}

/*高さ750px以下（ノートパソコン対策）*/
@media screen and (max-height: 800px) {
.top-main-50th a{
width: 80%;
}
}



/*50thアニメSP */
@media screen and (max-width: 768px) {
.top-main-50th-sp{
display: block;
position: absolute;
left: 0;
z-index: 1;
top:var(--hamburger-size-sp);
width: calc(100% - var(--hamburger-size-sp));
height: calc(100% - var(--hamburger-size-sp));
  display: grid;
  place-items: center;
}
.top-main-50th{display: none;}

.top-main-50th-sp .top50th-sp{
width: 100%;
height:auto;
}
}




/* --------------------- */
/* -----スクロール------- */
/* --------------------- */
/* スクロールダウンの位置 */
.main-scroll {
  position: absolute;
  z-index: 2;
  right: 25px;
  bottom: 8%;
  writing-mode: vertical-rl;
  color: var(--color-blue-dark);
  font-size: var(--s12);
}
@media screen and (max-width: 768px) {
  .main-scroll {
    right: 10px;
  }
}

/* 線のアニメーション部分 */
.main-scroll::before {
  animation: scroll 2s infinite;
  background-color: var(--color-blue-dark);
  bottom: -50px;
  content: "";
  height: 80px;
  left: 0;
  margin: 0 20px auto auto;
  position: absolute;
  right: 0;
  width: 1px;
}

/* 線のアニメーション */
@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  51% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}




/* --------------------- */
/* -----op------- */
/* --------------------- */
.top-op {
  padding: 50px 0 150px 0;
  position: relative;
}
@media screen and (max-width: 768px) {
  .top-op {
    padding: 0px 0 100px 0;
  }
}

/* 背景の大きな英字 */
.top-op-back_txt-box{
overflow: hidden;
width: 100%;
position: relative;
margin-bottom: -50px;
z-index: -1;
}
.top-op-back_txt {
font-weight: 500;
white-space:nowrap;
padding-left: 100%;
  color: var(--color-gray-light);
  font-size: 10vw;
  z-index: -1;
animation: marquee-animation 30s linear infinite;
}
@keyframes marquee-animation {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-300%);
  }
}
@media screen and (max-width: 768px) {
  .top-op-back_txt {
    font-size: 11.5vw;
  }
}





/*全体囲み*/
.top-op .content {
  display: grid;
  grid-template-columns: 45% 55%;
}
@media screen and (max-width: 1300px) {
  .top-op .content {
    grid-template-columns: 55% 45%;
  }
}
@media screen and (max-width: 1050px) {
  .top-op .content {
    grid-template-columns: 60% 40%;
  }
}
@media screen and (max-width: 950px) {
  .top-op .content {
    display: block;
  }
}

/*テキスト囲み */
@media screen and (max-width: 950px) {
  .top-op-info p br {
    display: none;
  }
}
.top-op-info .bt01 {
  margin-top: 20px;
}

/*画像かこみ*/
.top-op-img {
  width: 100%;
  height: 0%;
  padding-top: 64.41%;
  background-image: url(../img/top_op_ph.webp);
  background-size: cover;
}
@media screen and (max-width: 950px) {
  .top-op-img {
    padding-top: 60.22%;
    margin-top: 7%;
    background-image: url(../img/top_op_ph-sp.webp);
  }
}





/* --------------------- */
/* -----service------- */
/* --------------------- */
.top-service {
  margin-bottom: 150px;
}
@media screen and (max-width: 768px) {
.top-service {
  margin-bottom: 100px;
}
}

.top-service .title02 {
  position: relative;
}
.top-service .title02 .txt-hand-anime {
  position: absolute;
  bottom: -80px;
  left: 10%;
  z-index: 1;
  font-size: var(--s60);
}
@media screen and (max-width: 768px) {
  .top-service .title02 .txt-hand-anime {
    position: inherit;
    bottom: auto;
    left: auto;
    font-size: var(--s30);
  }
}

/* 各ボタン共通 */
.top-service-bt .service-bt-group :is(.drone,.live,.editing,.production,.filming){
  background-size: cover;
  background-position: center;
  position: relative;
  transition: 0.3s;
}
.top-service-bt .service-bt-group :is(.drone,.live,.editing,.production,.filming)::after {
  transition: 0.3s;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-blue-murky);
  mix-blend-mode: multiply;
  opacity: 0.3;
}
.top-service-bt .service-bt-group :is(.drone,.live,.editing,.production,.filming):hover::after {
  opacity: 0.8;
}
.top-service-bt .service-bt-group :is(.drone,.live,.editing,.production,.filming):hover {
  transform: scale(1.03);
}

/* ボタン グループ */
.top-service-bt .service-bt-group {
  overflow: hidden;
  margin-top: -5vw;
  display: grid;
  gap: 15px 15px;
  grid-template-areas: "s01 s01 s01 s01 E E" "F F P P E E" "F F P P D D" "s02 L L L D D";
}
@media screen and (max-width: 768px) {
  .top-service-bt .service-bt-group {
    gap: 10px 10px;
    grid-template-rows: 3vw 20vw 20vw 25vw 3vw;
    grid-template-areas: "s01 s01" "F P" "E D" "L L" "s02 s02";
  }
}
.top-service-bt .service-bt-group .item {
  position: relative;
}
.top-service-bt .service-bt-group .item a {
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
}
.top-service-bt .service-bt-group .space01 {
  grid-area: s01;
  height: 5vw;
}
@media screen and (max-width: 768px) {
  .top-service-bt .service-bt-group .space01 {
    height: auto;
  }
}
.top-service-bt .service-bt-group .filming {
  grid-area: F;
  background-image: url(../img/top_service_filming.webp);
}
.top-service-bt .service-bt-group .production {
  grid-area: P;
  background-image: url(../img/top_service_production.webp);
}
.top-service-bt .service-bt-group .editing {
  grid-area: E;
  background-image: url(../img/top_service_editing.webp);
  height: 20vw;
}
@media screen and (max-width: 768px) {
  .top-service-bt .service-bt-group .editing {
    height: auto;
  }
}
.top-service-bt .service-bt-group .space02 {
  grid-area: s02;
  height: 15vw;
}
@media screen and (max-width: 768px) {
  .top-service-bt .service-bt-group .space02 {
    height: auto;
  }
}
.top-service-bt .service-bt-group .live {
  grid-area: L;
  background-image: url(../img/top_service_live.webp);
  height: 17vw;
}
@media screen and (max-width: 768px) {
  .top-service-bt .service-bt-group .live {
    height: auto;
  }
}
.top-service-bt .service-bt-group .drone {
  grid-area: D;
  background-image: url(../img/top_service_drone.webp);
}
.top-service-bt .service-bt-group .txt-en {
  display: block;
  color: var(--color-white);
  font-size: var(--s30);
  padding: 7px;
}
@media screen and (max-width: 768px) {
  .top-service-bt .service-bt-group .txt-en {
    font-size: var(--s20);
  }
}
.top-service-bt .service-bt-group .txt-ja {
  display: inline-block;
  color: var(--color-black);
  background-color: var(--color-yellow);
  font-size: var(--s14);
  padding: 3px 7px;
  position: absolute;
  top: 35px;
}
@media screen and (max-width: 768px) {
  .top-service-bt .service-bt-group .txt-ja {
    top: 25px;
    padding: 2px 5px;
  }
}





/* モデルケースとアナウンサー*/
.top-service .top-service-bt02 {
  margin-top: 100px;
  display: grid;
  column-gap: 20px;
  grid-template-columns: 1fr 1fr;
}
@media screen and (max-width: 768px) {
  .top-service .top-service-bt02 {
    display: block;
    margin-top: 50px;
  }
}
.top-service .top-service-bt02 .item {
  container-type: inline-size;
  position: relative;
  background-color: var(--color-gray);
height: min(8vw, 120px);
  transition: 0.3s;
}
.top-service .top-service-bt02 .item:hover {
  background-color: #3A3A3A;
}
@media screen and (max-width: 768px) {
  .top-service .top-service-bt02 .item {
    margin-bottom: 7vw;
    height: 15vw;
  }
}
.top-service .top-service-bt02 .item a {
  position: absolute;
  bottom: 0;
  color: var(--color-white);
  display: block;
  display: grid;
  place-content: center;
  place-items: center;
  grid-template-columns: 30% 40%;
}
.top-service .top-service-bt02 .item .txt-ja {
  display: inline-block;
  font-size: var(--s16);
  margin-top: 2vw;
}
@media screen and (max-width: 768px) {
.top-service .top-service-bt02 .item .txt-ja {
  margin-top: 4.5vw;
}
}

.top-service .top-service-bt02 .item .txt-en {
  color: var(--color-white);
  display: block;
  width: 100%;
  text-align:right;
  opacity: 0.1;
  font-size: 8cqw;
  margin-top: 2vw;
padding-right: 2vw;
}
@media screen and (max-width: 768px) {
.top-service .top-service-bt02 .item .txt-en {
  margin-top: 3vw;
padding-right: 3vw;
}
}






/* --------------------- */
/* -----works------- */
/* --------------------- */
.top-works {
  background-color: var(--color-blue);
  padding: 50px 0;
}
.top-works .title02 .txt-ja {
  color: var(--color-yellow);
}
.top-works .title02 .txt-ja::after {
  background: var(--color-yellow);
}
.top-works .title02 .txt-ja.on {
  color: var(--color-yellow);
}

.top-works .title02 .txt-en {
  color: var(--color-white);
}
.top-works .top-works-info {
  display: flex;
}
@media screen and (max-width: 768px) {
  .top-works .top-works-info {
    display: block;
  }
}
.top-works p {
  color: var(--color-white);
  margin: 20px 0 0 30px;
}
@media screen and (max-width: 768px) {
  .top-works p {
    margin: -20px 0 30px 0;
  }
}

/* logoスライド */
.top-works .swiper {
  width: 95%;
}
.top-works .swiper-slide {
  width: 10vw;
}
@media screen and (max-width: 768px) {
  .top-works .swiper-slide {
    width: 5vw;
  }
}

.top-works .top-works-bt {
  text-align: center;
  margin-top: 50px;
}




/* --------------------- */
/* -----ABOUT------- */
/* --------------------- */
.about {
  width: min(90%, 1400px);
  margin: 100px 0;
}
@media screen and (max-width: 768px) {
  .about {
    width: 85%;
    margin-left: auto;
    margin-right: auto;
  }
}
.about .about-inner {
  display: grid;
  column-gap: 3vw;
  grid-template-columns: min(45vw, 900px) 1fr;
  align-items: end;
}
@media screen and (max-width: 768px) {
  .about .about-inner {
    display: block;
  }
}
.about .about-inner .about_img {
  width: 100%;
}
@media screen and (max-width: 768px) {
  .about .about-inner .about_img {
    margin-bottom: 30px;
  }
}

/* ボタンリスト */
.about .about_bt_group .item {
  border-top: 1px solid var(--color-blue-murky);
}
.about .about_bt_group .item:last-child {
  border-bottom: 1px solid var(--color-blue-murky);
}
.about .about_bt_group .item a {
  color: var(--color-black);
  padding: 10px 0;
  display: block;
}
.about .about_bt_group .item .title {
  font-size: var(--s18);
  font-weight: 600;
}
.about .about_bt_group .item .note {
  font-size: var(--s14);
  color: var(--color-gray);
  padding-right: 30px;
}





/* --------------------- */
/* -----TOPICS------- */
/* --------------------- */
.top-topics {
position: relative;
margin-bottom: 35vw;/*擬似で記事の高さ*/
}
@media screen and (max-width: 1050px) {
  .top-topics {
margin-bottom: 70vw;
  }
}
@media screen and (max-width: 768px) {
  .top-topics {
margin-bottom: 0;
  }
}

/* タイトルかこみ */
.top-topics .top-topics-title {
}

/* 変数 */
:root {
--topics-ma:32%;
}

/* 記事リストBOX */
.top-topics .top-topics-list {
width: calc(100% - var(--topics-ma));
top:0;
margin-left: var(--topics-ma);
position:absolute;
  background-color: var(--color-blue-thin);
  padding: 3%;
}
@media screen and (max-width: 768px) {
  .top-topics .top-topics-list {
position:initial;
margin-left: 0;
width:100%;
    padding: 8%;
  }
}




/* --------------------- */
/* -----RECRUIT------- */
/* --------------------- */
.recruit {
  background-color: var(--color-blue);
  margin-top: 100px;
  height: 50vw;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
.recruit {
  background-color: var(--color-blue);
  height: 75vw;
  overflow: hidden;
}
}

.recruit .recruit-inner {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}
@media screen and (max-width: 768px) {
.recruit .recruit-inner {
  grid-template-columns: 20% 1fr 20%;
}
}



/* 左、右 */
.recruit .recruit-left,
.recruit .recruit-right {
  width: 100%;
  height: 50vw;
overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 10px;
}
@media screen and (max-width: 768px) {
.recruit .recruit-left,
.recruit .recruit-right {
  display:block;
  height: 75vw;
}
}


/* 中心 */
.recruit .recruit-center {
  padding: 80px 30px;
  text-align: center;
display: flex;
align-self: center;
flex-direction:column;
}

.recruit .recruit-center .txt-hand{
text-align: left;
position: relative;
}
.recruit .recruit-center .txt-hand .txt-hand-anime{
position: absolute;
left: -20%;
top:-80px;
z-index: 1;
font-size: var(--s60);
}
@media screen and (max-width: 768px) {
.recruit .recruit-center .txt-hand .txt-hand-anime{
font-size: 7vw;
top:-50px;
left:-10vw;
}
}


.recruit .recruit-center .title02 .txt-ja {
  color: var(--color-yellow);
}
.recruit .recruit-center .title02 .txt-ja::after {
  background: var(--color-yellow);
}
.recruit .recruit-center .title02 .txt-ja.on {
  color: var(--color-yellow);
}

.recruit .recruit-center .title02 .txt-en {
  color: var(--color-white);
}
.recruit .recruit-center p {
  font-size: var(--s30);
  line-height: 2.7rem;
  margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
.recruit .recruit-center {
  padding: 40px 20px;
}
.recruit .recruit-center .title02{
margin-bottom: 5px;
}
.recruit .recruit-center .title02 .txt-en{
font-size: var(--s30);
}
.recruit .recruit-center p {
  font-size: var(--s18);
  line-height: 1.5rem;
  margin-bottom: 20px;
}
.recruit .recruit-center .bt03{
font-size: var(--s14);
}
}

/* 画像調整 */
.recruit .swiper{
height: 50vw;
}
@media screen and (max-width: 768px) {
.recruit .swiper{
height: 75vw;
}
}

.recruit .swiper-wrapper{
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
  /*一定のスピードにする */
  transition-timing-function: linear !important;
}
.recruit .swiper-wrapper .swiper-slide{
width: 100%;
height: auto;
}
.recruit .swiper-wrapper .swiper-slide img{
width: 100%;
height: auto;
display: block;
}



/* --------------------- */
/* -----banner------- */
/* --------------------- */
.banner {
  margin: 100px 0;
}
.banner a {
  display: block;
  margin: 40px 0;
}
.banner a:hover {
opacity: 0.5;
}

/* scoop */
.banner .scoop{
background-image:url(../img/top_scoop_bn.webp);
background-size: cover;
height: 0;
padding-top: 28.775%;
}
/* apro50 */
.banner .apro50{
background-image:url(../img/top_apro50_bn.webp);
background-size: cover;
height: 0;
padding-top: 25.419%;
}

@media screen and (max-width: 768px) {
/* scoop */
.banner .scoop{
background-image:url(../img/top_scoop_bn_sp.webp);
background-size: cover;
height: 0;
padding-top: 57.173%;
}
/* apro50 */
.banner .apro50{
background-image:url(../img/top_apro50_bn-sp.webp);
background-size: cover;
height: 0;
padding-top: 80.014%;
}
}



/* --------------------- */
/* -----ローディング------- */
/* --------------------- */
#loading {
  position: fixed;
  inset: 0;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity .8s, visibility .8s;
  z-index: 9999;
}
#loading.hide {
  opacity: 0;
  visibility: hidden;
}
#content {
  transition: opacity 1s;
}

/* ローディング終わったらメインpngアニメ再生*/
.png-anim {
  opacity:0;
  transition: opacity .6s;
}
.png-anim.start {
  opacity:1;
}