@charset "utf-8";
body {overflow-x: hidden; /* 横スクロールを禁止 */}

/*#g-nav.panelactive ul .a_top { color:#ad2900; }

.fmenu li a.current { color:#AD2900; }
.fmenu li a.f_top { color:#AD2900; }*/
@media screen and (min-width:798px) {
    .fmenu li a.f_top {border-right:1px solid #fff; color:#fff; }
}

.top { width:100%; height:100vh; padding-top:0; margin-top:0; position:fixed; top:0; left:0; z-index:-1; overflow: hidden; padding-top:0; }
.top .background-video {width:100%; height:100%; object-fit: cover; }
.scroll-content {position: relative;z-index: 1; color: #fff;font-size: 24px;text-align: center;}
.scroll-content div:nth-child(1) { width:90%; /*height:100vh; */margin:0 5%;  }
.top_message.inline_sp { width:80%; margin:10% auto 0 auto; display:block; }
.top_message.inline_pc { display:none; }
@media screen and (min-width: 840px) {
  .scroll-content div:nth-child(1) { height:100vh; }
  .top_message.inline_pc { width:80%; margin:8% auto 0 auto; display:block; }
  .top_message.inline_sp { display:none; }
  
}
.scroll-content .top_text { width:100%; height:100vh; display:block; }

/*WEBフォントのチラつき防止*/
html {visibility: hidden;}
html.wf-active {visibility: visible;}

/*******縦書き*******/

/* 縦書きスタイル */
.vertical-text {
  writing-mode: vertical-rl; /* 縦書き方向 */
  text-orientation: upright; /* 文字を正立させる */
  font-size: 1.5rem;
  line-height: 2; /* 行間を調整 */
  overflow: hidden; /* アニメーション中にテキストが飛び出ないようにする */
}

.vertical-text span {
  display: block; /* 各行を独立させる */
  opacity: 0; /* 最初は非表示 */
  transform: translateY(1rem); /* 少し下に移動しておく */
  animation: fadeIn 1s ease forwards; /* フェードインアニメーション */
}

/* 各行の表示タイミングを調整 */
.vertical-text span:nth-child(1) { animation-delay: 0s; }
.vertical-text span:nth-child(2) { animation-delay: 0.5s; }
.vertical-text span:nth-child(3) { animation-delay: 1s; }
.vertical-text span:nth-child(4) { animation-delay: 1.5s; }

/* アニメーション定義 */
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(1rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


/*******ヘッダー*******/
.top_wrap { background:none; }
.top_wrap .companyname {color:#fff; }
.openbtn span { background-color:#fff; }
@media screen and (min-width: 840px) {
  .top_wrap { width:100%; height:70px; align-items:center; display:flex; background:none; height:auto; color:#000; margin:0; justify-content: space-between;  padding:0; }
  .openbtn span{background-color: #ffffff;}
  .top_wrap .companyname { margin-top:20px; margin-bottom:20px; padding-bottom:0;  }
  .top { padding-top:0; }
}
.top { width:100%; height:100vh; text-align:center; position:relative; display:flex; justify-content:center; align-items:center; margin:0; }

.header_wrap { position:fixed; top:0; left:0; }
.scroll-content div.header_wrap { width:100%; height:initial; }

.header_wrap {
  position: fixed;
  top:0; /* 初期位置は画面外 */
  left: 0;
  width: 100%;
  height: 60px; /* ヘッダーの高さ */
  color: rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  /*background:rgba(11, 37, 74, 0.5);*/
  transition: top 0.3s ease; /* スムーズな表示 */
  z-index: 1000;
}


@media screen and (min-width:798px) {
.header_wrap {
  position: fixed;
  top: -100px; /* 初期位置は画面外 */
  left: 0;
  width: 100%;
  height: 60px; /* ヘッダーの高さ */
  color: rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  background:rgba(11, 37, 74, 0.5);
  transition: top 0.3s ease; /* スムーズな表示 */
  z-index: 1000;
}

  .scroll-content div.header_wrap { margin-left:0; }
}

.header_wrap.active {
  top: 0; /* 画面のトップに固定 */
}
.header_wrap .openbtn { position:absolute; right:5%; top:0; }
@media screen and (min-width: 840px) {
  .header_wrap .openbtn { right:0; }
}


/*スクロールボタン*/


@media screen and (min-width: 840px) {
  .scroll-content div:nth-child(1) .scroll { position:absolute; bottom:0; position: relative; text-align:center; z-index:1; margin:100px auto 0 auto; display:block; } 
.scroll-content div:nth-child(1) .scroll::before { animation: scroll 3.5s infinite; display: inline-block; content: ""; position: absolute; width: 1px; height: 40px; top:15px; right: 0; left: 0; margin: auto; background:rgba(255, 255, 255, 0.4); z-index:100; } 
@keyframes scroll 
{ 
  0% { transform:translateY(0px); opacity: 0; } 
  40% { opacity: 1; } 
  80% { transform:translateY(30px); opacity: 0; } 
  100% { opacity: 0; } 
}

  .scroll-content div:nth-child(1) .scroll { margin-top:-50px; }
}
@media screen and (min-width:1200px) {
  .scroll-content div:nth-child(1) .scroll { margin-top:-100px; }
}

.scroll-content div:nth-child(1) .scroll .text { font-size:14px; font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; color:rgba(255, 255, 255, 0.4);}

.maintext.sp { width:90%; margin:0 auto; opacity:0; } 
.maintext.pc { opacity:0; }
@media screen and (min-width: 840px) {
  .top { height:auto; }

  .top_text { max-width:1200px; margin:0 auto; }
  .maintext { max-width:1190px; width:90%; margin:0 auto; display:block;  }


}



.top_wrap .top { width:100%; position:absolute; top:0; left:0; }

.top_wrap {
  position: relative; 
  width: 100%; 
  z-index: 10; 
  display:flex; 
  justify-content: space-between;
  padding-bottom:0; 
}

.top_wrap.fixed {
  position: fixed; /* 固定状態 */
  top: 0;
  left: 0;
  width: 100%;
  background-color: #0B254A;
}

.toptext_sp { width:90%; margin:0 auto; display:block; }
@media screen and (min-width: 840px) {
  .toptext_sp { display:none; }
}



.top { width:100%; /*height:100vh; */padding-top:0; margin-top:0; position:fixed; top:0; left:0; z-index:-1; overflow: hidden;}
@media screen and (min-width: 840px) {
  .top { height:100vh; }
}

/*ceo*/
.ceo_wrap { width:90%; margin:0 5%; display:flex; position:relative; flex-wrap:wrap; }
.ceo { width:100%; /*height:100vh; */display:flex; flex-wrap:wrap; /*flex-direction: column-reverse; */}
.ceo .inline_sp { margin:0 0 20px 0; text-align:left; }
.ceo li:nth-child(1) { width:100%; /*height:60vh;*/} 
.ceo li:nth-child(2) { width:100%; height:40vh;  }
.ceo_wrap .button_read { margin:30px auto 50px auto;}
@media screen and (min-width: 840px) {
  .ceo { width:100%; /*height:100vh; */margin-bottom:20px; }
  .ceo li:nth-child(1) { width:100%; height:60vh;} 
  .ceo li:nth-child(2) { width:100%; height:40vh; display:flex; padding-top:0; }
  .ceo li:nth-child(2) { padding-top:50px;}
  .ceo_wrap .button_read { margin:0; }
}




@media screen and (min-width: 840px) {
  .ceo li:nth-child(1) .noise-effect {
    position: relative;
    background: url('../img/ceo.jpg') no-repeat center center;
    background-size: cover;
    width:90%;
    height:40vh;
    margin:0 5%; 
    margin:0 auto; 
    filter: grayscale(100%) contrast(100%) blur(1px);
    animation: removeNoise 4s forwards 4s; /* 3秒の遅延 */
    position:relative; 
  }


@keyframes removeNoise {
  0% {
    filter: grayscale(100%) contrast(100%) blur(1px);
  }
  100% {
    filter: grayscale(0%) contrast(100%) blur(0);
  }
}
}


@media screen and (min-width: 840px) {
  .scroll-content div.ceo_wrap { width:100%; height:70vh; margin:15vh 0; position:relative; }
  .scroll-content div.ceo_wrap .button_read { bottom:38px; }
  .ceo { height:auto; flex-direction: initial; margin-bottom:0; position:relative; }
  .ceo li:nth-child(1) { width:60%; height:auto; } 

  /* ノイズ */
  .ceo li:nth-child(1) .noise-effect { width: 100%; height:100%; position: relative;background: url('../img/ceo_new.jpg') no-repeat center center;background-size: cover;filter: grayscale(100%) contrast(100%) blur(1px); animation: removeNoise 3s forwards 3s; /* 3秒の遅延 */}

  .ceo li:nth-child(2) { width:30%; height:auto; padding-top:initial; flex-wrap:wrap; margin-top:50px; }
}


.ceo_wrap .button_read.inline_pc { display:none; }
.ceo_wrap .button_read.inline_sp { display:inline-flex; font-size:16px; padding:0 20%; }



@media screen and (min-width: 840px) {
  .ceo_wrap .line { width:100%; display:block; z-index:5; }
  .ceo_wrap .button_read.inline_pc { display:flex; }
  .ceo_wrap .button_read.inline_sp { display:none; }
}
.ceo li:nth-child(2) .message { width:11px; }
.ceo li:nth-child(2) strong { width:90%; font-size:19px; margin:0 auto 20px auto; float:none;  text-align:left; line-height:2em; display:inline-block; }
@media screen and (min-width: 840px) {
  .ceo li:nth-child(2) strong { font-size:26px; margin-bottom:50px; float:right; }
  .ceo li:nth-child(2) strong { width:auto; font-size:19px; margin:0 auto 0px auto; float:none; writing-mode: vertical-rl; /* 縦書き (右から左) */ text-orientation: upright; /* テキストを縦向きに表示 */text-align:left; line-height:2em; }

}

.ceo_name.inline_sp span { text-align:left;  }
.ceo_name.inline_sp em { text-align:left; font-size:24px; }
.ceo_name em {  width:90%; display:inline-block; font-size:17px; writing-mode:initial; text-orientation:initial; font-style:normal; text-align:left; }
.ceo_name span { width:90%; display:inline-block; font-size:14px; text-align:left; margin-left:0%; }
.ceo_name .katagaki { width:90%; display:inline-block; font-size:16px; text-align:left; margin-bottom:5px; margin-left:0%;} 
.button_read .icon_arrow { margin-left:5px; }
@media screen and (min-width: 840px) {
  .ceo_name.inline_pc { width:100%; float:right; margin-bottom:50px; }
  .ceo_name span { width:100%; font-size:16px; text-align:right;}
  .ceo_name .katagaki { width:100%; font-size:18px; text-align:right;}
  .ceo_name em { width:100%; font-size:26px; text-align:right; }
}

.img_message.inline_sp {  width:30%; margin-bottom:20px; }
@media screen and (min-width: 840px) {
  .img_message.rotate-image {  width:20px; transform: initial; }
}






.staff_wrap { width:100%; position:relative; margin-top:200px; }
@media screen and (min-width: 840px) {
  .staff_wrap { margin-top:0; }
  .message_midashi { font-size:22px; }
}

@media screen and (min-width:1500px) {
  .staff_wrap { width:1366px; margin:0 auto; }
}

.staff_wrap .members { width:50px; position:absolute; right:0; top:0; }
@media screen and (min-width: 840px) {
  .staff_wrap .members { width:90px; top:50px; }
}

.staff div strong { color:#fff; }
.staff div span { color:#fff; }
  



/*メッセージ*/
.message { width:90%; margin:0 0 50px 5%; font-family: "dnp-shuei-nshogomincho-std", sans-serif;font-style: normal; }
.message strong { width:100%; display:inline-block; font-size:35px; line-height:1.1em; margin-bottom:30px; display:inline-block; letter-spacing:-0.1em; color:#63839e; font-family: "dnp-shuei-nshogomincho-std", sans-serif;font-style: normal;}
.message span { width:100%; display:inline-block; color:#fff; font-size:18px; }
@media screen and (min-width: 840px) {
  .message strong { font-size:45px; font-size:90px; margin-top:100px; margin-bottom:20px; }
}
@media screen and (min-width:1500px) {
  .message { width:1366px; margin:0 auto 125px 50px; }
}



/*バナー*/
.banner { width:90%; display:flex; flex-wrap:wrap; margin:0 auto; justify-content:space-between; }
.banner li { width:100%; height:auto; display:inline-block; margin-bottom:80px; }
.banner li a { width:100%; height:100%; position:relative; display:block; }
.banner li a .color { width:100%; height:100%; position:absolute; mix-blend-mode: multiply; background-color: rgba(0, 0, 0, 0.4); transition: background-color 0.3s ease; }
.banner li a .color:hover {background-color: rgba(10, 36, 74, 0.7); }
.banner li a .banner_photo { width:100%; height:100%; }
.banner li a .icon_arrow { width:30px; position:absolute; right:40px; bottom:40px; display:none; }
.banner li a h2 { position:absolute; top:20px; left:20px; z-index:1; color:#fff; font-family: "dnp-shuei-nshogomincho-std", sans-serif;font-style: normal; color:#fff; font-size:16px; }
.banner li a h2 em { width:100%; font-size:30px; letter-spacing:0.2em;display:inline-block; font-style:normal; }
.banner li a .banner_maru { width:30px; height:30px; border-radius:50%; border:1px solid #fff; color:#fff;  position:absolute; right:40px; bottom:40px;text-align:center;  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; /* 滑らかな変化を追加 */}
.banner li a:hover .banner_maru {  background:rgba(255, 255, 255, 0.8);color:#0B254A; }
@media screen and (min-width: 840px) {
  .banner { margin:180px auto 150px auto; }
  .banner li { width:48%; margin-bottom:0; }
  .banner li a h2 { font-size:18px; top:50px; left:50px; }
  .banner li a h2 em { font-size:60px; }
  .banner li a img.icon_arrow { display:inline-block; }
}

@media screen and (min-width:1200px) {
  .banner { width:1085px; }
}






/*フッター*/
.fleft strong { color:#fff; }
.fleft a { color:#fff; }
.fmenu li a { color:#fff; }
.fcopyright { color:#fff; }
.contents.recruit { padding-top:80px; padding-bottom:80px; }
.fbox { padding-top:0px; }
@media screen and (min-width:1200px) {
  .fbox { padding-top:50px; }
  .fmenu .current {border-right:1px solid #fff; }
  .contents.recruit { padding-top:80px; }
}


.Gradation_1 {
  display: flex; /* Required for align-items and justify-content */
  align-items: center;
  justify-content: center;
  height: 100%; /* Ensure the background fills the entire viewport */

  /* Create a smoother, multi-layered background */
  background: linear-gradient(
    to bottom right,rgba(5, 10, 30, 1) 0%,
    rgba(10, 20, 40, 0.9) 15%,
    rgba(15, 30, 50, 0.8) 30%,
    rgba(20, 40, 60, 0.7) 50%,
    rgba(25, 50, 70, 0.6) 70%,
    rgba(20, 40, 60, 0.7) 85%,
    rgba(15, 30, 50, 0.8) 95%,
    rgba(10, 20, 40, 0.9) 100%
  ); /* Soft diagonal gradient */
  background-size: 400% 400%; /* Enlarged for smoother animation */
  animation: Grad 12s ease-in-out infinite; /* Continuous diagonal movement */
  background-attachment: fixed; /* Keep the top part fixed while the rest animates */
}

@keyframes Grad {
  0% {
    background-position: 0% 0%; /* Start at the top-left */
  }
  50% {
    background-position: 100% 100%; /* Move to the bottom-right */
  }
  100% {
    background-position: 0% 0%; /* Return to the start */
  }
}


/*動き*/
@media screen and (min-width: 840px) {
  .title_move { font-size:65px; }
  .title_move span { line-height:70px; }
}

.title_move span {
  display: inline-block;
  transform: translateY(100%);
  opacity: 0;
  animation: slideIn 0.5s ease-out forwards;
}

.title_move span:nth-child(1) {
  animation-delay: 0s;
}
.title_move span:nth-child(2) {
  animation-delay: 0.1s;
}
.title_move span:nth-child(3) {
  animation-delay: 0.2s;
}
.title_move span:nth-child(4) {
  animation-delay: 0.3s;
}
.title_move span:nth-child(5) {
  animation-delay: 0.4s;
}
.title_move span:nth-child(6) {
  animation-delay: 0.5s;
}
.title_move span:nth-child(7) {
  animation-delay: 0.6s;
}

@keyframes slideIn {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@media screen and (min-width: 840px) {
  .fleft a.insta:link { color:#fff; }
  .fleft a.insta:visited { color:#fff; }
}

/*フッター*/
.icon_insta.toppage { display:inline-block; }
.icon_insta.kasopage { display:none; }
.icon_other.toppage { display:inline-block; }
.icon_other.kasopage { display:none; }

@media screen and (max-width: 840px) {
.contents_wrap { margin-bottom:0; }
}