@charset "UTF-8";

/* =========================================================
   ■ 共通設定（レスポンシブ）
========================================================= */
@media screen and (max-width:1260px) {
   :root{
      --headerHeight: 110px;
      --header_offset: 0px;
   }
   body{font-size: 14px;}
}
@media screen and (max-width:768px) {
   :root{
      --headerHeight: 90px;
   }
   /* レイアウト調整 */
   .inner{padding: 0 5%;}
   /* リンク制御 */
   a[href*=tel]{pointer-events: auto;}
}


/* =========================================================
   ■ デバイス切り替え（PC / SP）
========================================================= */
@media screen and (max-width:768px) {
   .pc_cont{display: none !important;}
   .sp_cont{display: block !important;}
}
/* =========================================================
   ■ テンプレート共通（SP）
========================================================= */
@media screen and (max-width:768px) {
   .border_gold{
      font-size: 15px;
      padding: .05em .3em;
   }
}
/* =========================================================
   ■ マウスストーカー
========================================================= */
@media screen and (max-width:768px) {
   .cursorGlow{display: none !important;}
}
/* =========================================================
   ■ テンプレート共通
========================================================= */
@media screen and (max-width:768px) {
   main{padding: 140px 0 75px;}

   /* 目盛り */
   body::before{display: none;}

   /* 背景宇宙 */
   .bg_space{height: 120%;}

}
/* =========================================================
   ■ ヘッダー（SP）
========================================================= */
@media screen and (max-width:768px) {
   header .h_left .logo{width: 130px;}

   header.h_hide nav{transform: translateY(0);}
   header.h_hide .h_left .logo a{transform: scale(1) translateY(0);}

   header nav ul li a{
      font-size: 15px;
      padding: 10px 8px;
      width: fit-content;
   }
   header nav ul li a .sub{font-size: 13px;}
}

/* =========================================================
   ■ ハンバーガーメニュー（SP）
========================================================= */
@media screen and (max-width:1260px) {
   header{
      padding: 0 0 0 3%;
      column-gap: 2%;
   }
   header nav ul{column-gap: 1%;}
}

@media screen and (max-width:1060px) {
   .ham {display: block;}
   header nav{
      position: fixed;
      z-index: 3;
      inset: 0 0 auto;
      margin: auto;
      width: 100%;
      max-width: 100%;
      height: 100%;
      filter: blur(10px);
      opacity: 0;
      visibility: hidden;
      transition: .5s;
      backdrop-filter: blur(0);
      transition-property: filter, opacity, visibility, backdrop-filter;
   }
   header:has(.ham.open) nav{
      opacity: 1;
      visibility: visible;
      filter: blur(0);
      backdrop-filter: blur(3px);
   }

   header nav ul{
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      background: rgba(0, 0, 0, .8) !important;
      padding: 50px 5%;
      height: 100%;
      overflow-y: scroll;
   }
   header nav ul li{width: fit-content;}
}
@media screen and (max-width:768px) {
   .ham {
      --corner: 12px;
      width: 60px;
      height: 60px;
   }

   /* ライン */
   .ham span,
   .ham::before,
   .ham::after {
      width: 30px;
      height: 2px;
   }

   /* 擬似要素 */
   .ham::before{top: calc(50% - 8px);}
   .ham::after{top: calc(50% + 8px);}
}


/* =========================================================
   ■ フッター
========================================================= */
@media screen and (max-width:768px) {
   /* ページトップ */
   .pagetop{
      inset: auto 5% 30px auto;
      width: 50px;
      height: 50px;
   }

   /* footer */
   footer .f_top{padding: 40px 0 35px;}
   footer .f_top .logo{max-width: 180px;}
   footer .f_top ul{
      margin: 40px auto 0;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      row-gap: .5em;
   }

   /* 共通パーツ */
   footer .f_wrapper{padding: 0 5%;}
   footer .area-01 {padding: 3em 0 3.4em;}
   footer .area-01 .logo {
      position: static;
      max-width: 295px;
      margin: 0 auto;
   }
   footer .area-01 > p {
      font-size: 13px;
      text-align: center;
      margin-bottom: 0;
   }
   footer .area-01 .list-01 {margin-bottom: 3em;}
   footer .area-02 .copy {line-height: 1.3;}
   footer .area-02 .copy small{font-size: 12px;}
}

/* =========================================================
   ■ 共通パーツ
========================================================= */
@media screen and (max-width:768px) {
   /* ボタン 共通 -------------------------- */
   .btn a,
   .btn span{font-size: 14px;}

   /* ボタン オレンジ */
   .btn.btn_orange a,
   .btn.btn_orange span{font-size: 15px;}
   .btn.btn_orange a:hover,
   .btn.btn_orange span:hover{
      color: var(--btn_orange);
      background: #fff;
   }

   /* ボタン 青 */
   .btn.btn_blue::after,
   .home .cont .btn::after{
      width: 9px;
      height: 9px;
   }

   .btn.btn_blue a,
   .home .cont .btn a{
      min-height: 65px;
      font-size: 16px;
   }

   /* kv_sub  -------------------------- */
   .kv_sub{padding: calc(var(--headerHeight) + 80px) 0 60px;}

   /* ttl_cont  -------------------------- */
   .ttl_cont .sub{
      font-size: 14px;
      margin: 0 0 18px;
   }

   .ttl_cont .ja{font-size: 30px;}
   .ttl_cont .en{font-size: 14px;}
   .ttl_cont .en.main{
      font-size: 48px;
      line-height: 1.1;
   }
   .home .ttl_cont:not(:has(.en.main)) .sub .border_gold > span:nth-of-type(2){inset: 1px 0 0 0;}

   /* lead_common  -------------------------- */
   /* 船あり */
   .lead_common{margin: 0 0 40px;}
   .lead_common .inner{
      position: relative;
      z-index: 0;
   }
   .lead_common .ship{
      position: relative;
      z-index: 0;
      /* width: 240px; */
      width: 140px;

   }

   .lead_common p{
      font-size: 16px;
      padding: 25px 2% 0;
      margin: 0 auto;
      letter-spacing: 0.05em;
   }

   /* カーソル風 */
   .lead_common p .cursor {width: .75em;}

   /* SPのみ上下入れ替え */
   .lead_common.sp_reverse .inner{
      display: flex;
      flex-direction: column-reverse;
      row-gap: 40px;
   }

   /* SPのみ中央揃え */
   .ttl_cont.sp_center{text-align: center;}
   .ttl_cont.sp_center .anim > span:nth-of-type(2){
      inset: 0;
      margin: auto;
   }
   
   .lead_common.sp_center p{text-align: center;}
}


/* =========================================================
    ■ トップページ
========================================================= */

@media screen and (max-width:1600px) and (min-width:769px) and (max-height:760px) {
   .main_ttl{top: 58%;}
}

@media screen and (max-width:950px) and (min-width:769px) {
   .home .flex{--cont_w: 46%;}
}

@media screen and (max-width:768px) {
   /* ローディングアニメ ---------------- */

   
   .home{padding-top: var(--headerHeight);}
   /* 宇宙船 --------------------------- */
   .fixed_ship{width: max(180px, 45vw);}
   .fixed_ship::before{
      inset: -50% auto auto -18%;
      width: max(80px, 20vw);
   }
   body:has(.kv_home .lead_cont.active) .fixed_ship::before{
      opacity: 1;
      transform: translateY(0) scale(1);
      transition-delay: 1.6s, 1.6s;
   }
   body:has(.kv_home .lead_cont.active) .fixed_ship.is_scrolled::before{
      opacity: 0;
      transform: translateY(8px) scale(0.85);

      /* 消えるときは別イージング */
      transition:
         opacity 0.15s ease-in,
         transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      transition-delay: 0s;
   }

   /* KV --------------------------- */
   .home .kv_home{padding-bottom: 300px;}

   /* 地球 */
   .home .kv_home > figure{inset: max(50svh, 330px) auto auto -30px;}
   .home .kv_home::before{
      inset: max(52svh, 370px) 0 auto;
      height: 40vh;
   }

   /* main title */
   .main_ttl{
      position: static;
      flex-direction: column-reverse;
      justify-content: center;
      align-items: center;
      margin: 0 auto 20px;
      transform: translateY(0);
      width: 85%;
      min-height: max(75svh, 500px);
   }
   .is_scrolled .main_ttl{
      opacity: 1;
      visibility: visible;
      filter: blur(0);
   }
   .home .kv_home .main_ttl h1{
      position: relative;
      z-index: 0;
      left: 10.5%;
      width: 95%;
      transition-delay: .8s;
   }
   .home .kv_home .main_ttl p{
      width: 65%;
      transition-delay: 0s;
      margin: 0 auto 12%;
   }

   /* lead cont */
   .home .kv_home .lead_cont{margin: 0 auto;}
   .home .kv_home .lead_cont .txt{
      font-size: 14px;
      text-align: center;
      margin: 0 0 25px;
      transition-delay: 0s;
   }
   .home .kv_home .lead_cont .lead{
      font-size: 19px;
      text-align: center;
      transition-delay: 1.2s;
   }

   /* 共通 --------------------------- */

   /* section */
   .home .contents_wrapper > section:not(:last-of-type){margin-bottom: 100px;}
   
   /* flex */
   .home .flex{flex-direction: column;}
   .home .flex > .cont,
   .home .flex > *:not(.cont){width: 100%;}
   .home section .flex > .cont .btn{
      width: 100%;
      margin: 0 auto;
   }

   /* ttl_cont */
   .home .ttl_cont {margin-bottom: 28px;}
   .home .ttl_cont .sub{
      font-size: 13px;
      letter-spacing: 0.1em;
   }
   .home .ttl_cont .sub .border_gold{
      font-size: 24px;
      min-width: 210px;
   }
   .home .ttl_cont:has(.en.main) .sub .border_gold{
      font-size: 24px;
      min-width: 126px;
   }

   .home .ttl_cont .en{font-size: 16px;}
   .home .ttl_cont .en.main{
      font-size: 40px;
      letter-spacing: .08em;
   }

   .home .ttl_cont + p:not(.btn){
      font-size: 14px;
      letter-spacing: 0.1em;
   }

   /* SPACE TOPICS --------------------------- */
   .home .ttl_cont + p:not(.btn){margin-bottom: 0;}
   .home .sec_topics .flex > .cont{
      display: contents;
      margin-top: 0;
   }
   .home .sec_topics .flex > .cont .btn{order: 1;}
   .home .sec_topics .topics_list,
   .home .sec_topics .topics_list li,
   .home .sec_topics .topics_list li a{display: block;}
   .home .sec_topics .topics_list{
      padding-bottom: 0;
      margin: 0 0 60px;
   }
   .home .sec_topics .topics_list li{width: 100%;}
   .home .sec_topics .topics_list li figure{margin: 0 0 15px;}
   .home .sec_topics .topics_list li .ttl{
      font-size: 16px;
      margin: 0 0 18px;
   }
   .home .sec_topics .topics_list li .btn span{font-size: 15px;}

   .home .topics_archive .topics_list li a:hover .btn span{
      color: var(--btn_orange);
      background: transparent;
   }

   /* slick */
   .home .sec_topics .topics_list .slick-track{padding: 15px 0 0;}
   .home .sec_topics .topics_list .slick-list{margin: 0 -15px;}
   .home .sec_topics .topics_list .slick-slide{margin: 0 15px;}
   /* slick arrow */
   .home .sec_topics .topics_list .slick-arrow{
      z-index: 5;
      top: 37%;
      width: 32px;
      height: 32px;
      background: #fff;
      border-radius: 50%;
   }
   .home .sec_topics .topics_list .slick-arrow::before{
      position: absolute;
      z-index: 0;
      margin: auto;
      opacity: 1;
      display: block;
      content: '';
      width: 7px;
      height: 13px;
      background: url(../img/page/home/ico/slick_arrow.svg) no-repeat center / contain;
   }
   .home .sec_topics .topics_list .slick-prev{left: 3.5%;}
   .home .sec_topics .topics_list .slick-next{right: 3.5%;}
   .home .sec_topics .topics_list .slick-prev::before{inset: 0 3px 0 0;}
   .home .sec_topics .topics_list .slick-next::before{
      inset: 0 0 0 2px;
      transform: rotate(180deg);
   }

   /* SPACE IN LIFE --------------------------- */
   /* flex */
   .home .sec_life .flex{flex-direction: column-reverse;}
   .home .sec_life .flex > .cont{
      display: contents;
      margin-top: 0;
   }
   .home .sec_life .flex > .cont .ttl_cont{order: 3;}
   .home .sec_life .flex > .cont .ttl_cont + p{order: 2;}
   .home .sec_life .flex > .modal_cont{order: 1;}
   .home .sec_life .flex > .cont .btn{order: 0;}

   /* modal */
   .home .sec_life .modal_cont{
      height: max(400px, 106vw);
      margin: 30px auto 40px;
   }
   .home .sec_life .modal_cont ul li:nth-of-type(1){
      inset: 10% 0 auto auto;
      width: max(238px, 73%);
   }
   .home .sec_life .modal_cont ul li:nth-of-type(2){
      inset: 37% 36% auto auto;
      width: max(265px, 81.8%);
   }
   .home .sec_life .modal_cont ul li:nth-of-type(3){
      inset: 59% 5% auto auto;
      width: min(141px, 43.5%);
   }

   .home .sec_life .modal_cont ul li:nth-of-type(1) > figure{padding-top: 25%;}
   .home .sec_life .modal_cont ul li:nth-of-type(2) > figure{padding-top: 8%;}
   .home .sec_life .modal_cont ul li:nth-of-type(3) > figure{padding-top: 33%;}

   .home .sec_life .modal_cont ul li > figure figcaption{width: max(34px, 9.3vw);}

   .home .sec_life .modal_cont ul li > .modal{
      --corner: 16px;
      padding: 35px 10% 30px;
      max-width: 85vw;
   }
   .home .sec_life .modal_cont ul li:nth-of-type(1) > .modal{inset: 50% auto auto -35%;}
   .home .sec_life .modal_cont ul li:nth-of-type(2) > .modal{inset: 1% -41.5% auto auto;}
   .home .sec_life .modal_cont ul li:nth-of-type(3) > .modal{inset: -53% auto auto -117%;}

   .home .sec_life .modal_cont ul li > .modal > button{
      inset: 13px 13px auto auto;
      width: 16px;
      height: 16px;
   }
   .home .sec_life .modal_cont ul li > .modal > button::before,
   .home .sec_life .modal_cont ul li > .modal > button::after{width: 22px;}

   .home .sec_life .modal_cont ul li > .modal > dl dt{
      font-size: 22px;
      margin: 0 0 8px;
   }
   .home .sec_life .modal_cont ul li > .modal > dl dd{
      font-size: 14px;
      line-height: 1.8;
      letter-spacing: 0;
   }
   .home .sec_life .modal_cont ul li > .modal > dl dd:not(:last-of-type){margin: 0 0 18px;}
   .home .sec_life .modal_cont ul li > .modal > dl .more a{font-size: 15px;}

   .home .sec_life .modal_cont > picture{
      inset: 0 auto auto 4%;
      width: 45vw;
   }

   /* 宇宙年表 --------------------------- */
   .home .sec_story .flex{flex-direction: column-reverse;}

   /* 背景 宇宙 */
   .home .sec_story .story_bg{
      height: 100%;
      background-size: cover;
      clip-path: circle(0% at 50% 50%);
   }

   /* 背景 流れ星 */
   .sec_story .story_stars{
      transform: scale(.7);
      transform-origin: 50% 50%;
      transition: opacity .4s 3.2s ease,
        transform .4s 3.2s ease-in-out;
   }
   .sec_story .story_stars .star_box {inset: 36% auto auto 50%;}

   @keyframes storyStarFlow {
      0% {
         transform: translateX(110px) scale(0.8);
         opacity: 0;
      }
      10% {
         opacity: 1;
      }
      100% {
         transform: translateX(120vw) scale(1.3);
         opacity: 0;
      }
   }

   /* 背景 上下枠 */
   .home .sec_story .story_wrap::before,
   .home .sec_story .story_wrap::after{
      aspect-ratio: 368 / 50;
      transition: clip-path 0.8s 1.2s cubic-bezier(0.6, 0, 0.2, 1);
   }
   .home .sec_story .story_wrap::before{background-image: url(../img/page/home/story_top_sp.svg);}
   .home .sec_story .story_wrap::after{background-image: url(../img/page/home/story_bottom_sp.svg);}

   /* スロット風 */
   .home .sec_story .slot_outer{
      /* -webkit-mask-image: linear-gradient(
         to bottom,
         rgba(0, 0, 0, .26) 0%,
         rgba(0, 0, 0, .8) 40%,
         rgba(0, 0, 0, 1) 50%,
         rgba(0, 0, 0, 1) 70%,
         rgba(0, 0, 0, 0) 90%
      );
      mask-image: linear-gradient(
         to bottom,
         rgba(0, 0, 0, .26) 0%,
         rgba(0, 0, 0, .8) 40%,
         rgba(0, 0, 0, 1) 50%,
         rgba(0, 0, 0, 1) 70%,
         rgba(0, 0, 0, 0) 90%
      ); */
      padding: min(220px, 31vh) 0 0;
      margin-bottom: -60px;
   }
   .home .sec_story .slot ul{
      transform: translateY(30%);
      transition: 1.2s 2.5s cubic-bezier(.52,0,.49,1);
   }
   .home .sec_story .slot li{height: 45px;}
   .home .sec_story .slot li:not(:last-of-type){margin: 0 0 40px;}

   .home .sec_story .slot .text{font-size: 9px;}

   /* main */
   .home .sec_story .slot li.main{height: 75px;}
   .home .sec_story .slot li.main .text{font-size: 20px;}

   .home .sec_story .slot li.main figure figcaption{font-size: 11px;}
   .home .sec_story .slot li.main .figure01{
      inset: 96% 55.2% auto auto;
      width: max(108px, 28vw);
   }
   .home .sec_story .slot li.main .figure02{
      inset: 10% -0.2% auto auto;
      width: max(65px, 17.33vw);
   }

   /* cont */
   .home .sec_story .cont{
      /* .slotのmargin-bottomをマイナス値にしているので、重ね順を上に */
      position: relative;
      z-index: 1;
      padding-bottom: 90px;
   }
   .home .sec_story .cont .ttl_cont .sub .border_gold,
   .home .sec_tech_business .cont .ttl_cont .sub .border_gold{min-width: 160px;}
   .home .sec_story .cont .ttl_cont + p:not(.btn),
   .home .sec_tech_business .cont .ttl_cont + p:not(.btn){margin-bottom: 2.5em;}

   /* 技術を知る --------------------------- */
   .home .sec_tech_business{
      padding: 200px 0 100px;
      background-size: 150% auto;
      background-position: 60% -20%;
      margin-bottom: 0 !important;
   }

   /* ファンドバナー --------------------------- */
   .home .banner_area{margin-top: 0;}
   .home .banner_area h2{
      font-size: 22px;
      margin: 0 auto 20px;
   }
   .home .banner_area .txt{
      font-size: 16px;
      margin: 0 auto 32px;
   }
   .home .banner_area .banner_cont{
      max-width: 320px;
      margin: 0 auto;
   }
}


/* =========================================================
   ■ topics - 一覧
========================================================= */
@media screen and (max-width:768px) {

   .topics_archive .topics_list{
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 60px var(--gap);
      padding: 20px 0;
   }
   .topics_archive .topics_list li{width: 100%;}

   .topics_archive .topics_list li figure{
      filter: drop-shadow(0 0 10px #fff);
      margin: 0 0 18px;
   }

   .topics_archive .topics_list li .ttl{
      margin: 0 0 15px;
      font-size: 15px;
   }

   .topics_archive .more_btn {margin: 50px auto 0;}

   .topics_archive .more{
      font-size: 36px;
      margin: 70px auto 0;
   }
}

/* =========================================================
   ■ topics - 記事
========================================================= */
@media screen and (max-width:768px) {
   .topics_post .inner:has(.bg_white),
   .topics_post .inner{padding: 0 5%;}
   .topics_post .bg_white{
      --corner: 25px;
      padding: 50px 7%;
   }
   .topics_post .bg_white::before{display: none;}

   /* topic_info */
   .topics_post .topic_info{margin: 0 0 40px;}
   .topics_post .topic_info h1{
      font-size: 22px;
      padding: .6em 0 .7em;
      margin: 0 0 20px;
   }

   /* topics_content */
   .topics_post .topics_content h2{
      font-size: 18px;
      padding: .2em 0 .3em 1em;
      margin: 50px 0 30px;
   }
   .topics_post .topics_content h2::before{width: 5px;}

   .topics_post .topics_content h3{
      font-size: 16px;
      padding: 0.5em 1em;
      margin: 40px 0 30px;
   }
   .topics_post .topics_content h4{
      font-size: 16px;
      padding: 0.325em .75em;
      margin: 30px 0 20px;
   }
   .topics_post .topics_content h5{
      font-size: 15px;
      margin: 30px 0 20px;
   }

   /* カラム */
   .topics_post .topics_content .column{
      flex-direction: column;
      gap: 20px var(--gap);
   }

   /* ブロック */
   .topics_post .topics_content .btn a{font-size: 15px;}

   /* btn */
   .topics_post .btn_orange{margin: 60px auto 0;}
}


/* =========================================================
   ■ 暮らしの中の宇宙
========================================================= */
@media screen and (max-width:768px) {
   .page_life{
      --offset: 500px;
      /* margin-bottom: -200px; */
      /* margin-bottom: 0; */
   }
   /* desc --------------------------- */
   .page_life .desc{
      flex-direction: column;
      row-gap: 0.2em;
      text-align: center;
      font-size: 15px;
      letter-spacing: 0.18em;
   }
   .page_life .desc::before{
      width: 44px;
      margin: 0 auto;
   }

   /* mao_cont --------------------------- */
   .page_life .scroll_wrapper{
      --offset: 100px; 
      position: relative;
      z-index: 0;
      clip-path: inset(0 0 var(--offset));
      margin-bottom: calc(var(--offset) * -1);
   }
   .page_life .map_cont{min-width: 580px;}
   .page_life .map_cont figure::before{
      inset: 9% 90% auto auto;
      width: 18vw;
   }

   .page_life .map_cont ul li{width: 7%;}
   .page_life .map_cont ul li:nth-of-type(1){inset: 15.5% 75.5% auto auto}
   .page_life .map_cont ul li:nth-of-type(2){inset: 22.9% 33% auto auto;}
   .page_life .map_cont ul li:nth-of-type(3){inset: 30.5% 54.5% auto auto;}
   .page_life .map_cont ul li:nth-of-type(4){inset: 18.1% 22.4% auto auto;}
   .page_life .map_cont ul li:nth-of-type(5){inset: 19.4% 57.4% auto auto;}
   .page_life .map_cont ul li:nth-of-type(6){inset: 41.9% 59.3% auto auto;}
   .page_life .map_cont ul li:nth-of-type(7){inset: 37.8% 36.5% auto auto;}

   /* scroll --------------------------- */
   .page_life .simplebar-content-wrapper{
      overscroll-behavior-x: none;
   }
   .page_life .simplebar-horizontal{
      inset: auto 0 150px;
      margin: auto;
      max-width: 64%;
      height: 7px;
      overflow: visible;
      background: transparent;
      border-radius: 20px;
   }
   /* 白背景 */
   .page_life .simplebar-horizontal::before{
      position: absolute;
      z-index: -2;
      inset: -100%;
      margin: auto;
      content: '';
      width: calc(100% + 16%);
      height: 32px;
      background: #fff;
      transform: translateZ(0);
      filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, .2));
      border-radius: 20px;
   }
   .page_life .simplebar-horizontal::after{
      position: absolute;
      z-index: -1;
      inset: -100%;
      margin: auto;
      content: '';
      width: 100%;
      height: 100%;
      background: #ddd;
      border-radius: 20px;
   }
   /* スクロールバー */
   .page_life .simplebar-horizontal .simplebar-scrollbar{
      top: -30px;
      bottom: -30px;
      margin: auto;
      height: 15px !important;
      opacity: 1;
   }
   .page_life .simplebar-horizontal .simplebar-scrollbar::before{
      inset: -100%;
      margin: auto;
      width: 100%;
      height: 100%;
      background: #333333;
      opacity: 1;
   }
   /* scroll notice */
   .page_life .scroll_wrapper .scroll_notice{
      position: absolute;
      z-index: 1;
      inset: 0 0 20% 0;
      margin: auto;
      background: url(../img/page/life/scroll_notice_bg.png) no-repeat center / contain;
      width: 177px;
      aspect-ratio: 1;
      transition: .5s;
      pointer-events: none;
   }
   .page_life .scroll_wrapper.simplebar-scrollable-x .scroll_notice{
      display: block;
   }
   .page_life .scroll_wrapper .scroll_notice.is_hidden{
      opacity: 0;
      visibility: hidden;
   }
   .page_life .scroll_wrapper .scroll_notice img{
      animation: scroll_notice 1.4s cubic-bezier(.3, 0, .15, 1) infinite;
   }
   @keyframes scroll_notice {
      0%   {transform: translateX(18%);}
      100% {transform: translateX(-18%);}
   }
   
   /* modal --------------------------- */
   /* body:has(.page_life) .modal .modal_bg{
      background: #e0d2ee;
      opacity: 1;
   } */
   body:has(.page_life) .modal .modal_cont{
      --corner: 16px;
      --escape-width: 40%;
      --escape-height: 120px;
      width: 95%;
      max-height: 80vh;
      padding: 40px 8% 80px;
   }
   body:has(.page_life) .modal .modal_cont div > figure{
      position: static;
      margin: 0 auto 12px;
      width: 85px;
      transform: translateY(0);
   }
   body:has(.page_life) .modal .modal_cont div dt{
      font-size: 25px;
      min-height: 1px;
      margin: 0 auto 20px;
   }
   body:has(.page_life) .modal .modal_cont div dd{
      flex-direction: column-reverse;
      row-gap: .7em;
   }
   body:has(.page_life) .modal .modal_cont div dd p,
   body:has(.page_life) .modal .modal_cont div dd figure{width: 100%;}

   /* close */
   body:has(.page_life) .modal .cont{
      position: relative;
      z-index: 0;
   }
   body:has(.page_life) .modal button{
      position: absolute;
      z-index: 1;
      inset: auto 0 -50px;
      margin: auto;
      width: fit-content;
      height: auto;
      font-size: 14px;
      color: var(--txt_black);
      padding: 0 0 0 1.85em;
   }
   body:has(.page_life) .modal button::before,
   body:has(.page_life) .modal button::after{
      inset: -100% auto -100% 0;
      width: 22px;
      height: 2px;
   }


   /* bg_purple */
   .page_life .bg_purple{
      padding: 30px 0 var(--offset);
      margin-top: 0;
      background: #E0D3EE;
   }
   .page_life .bg_purple .disclaimer{
      padding-bottom: 50px;
   }
}

/* =========================================================
   ■ 宇宙年表
========================================================= */
@media screen and (max-width:1000px) and (min-width:769px) {
   .page_story .contents_wrapper > .sections > section{--h2_padding: 50px;}
   .page_story .contents_wrapper > .sections > section > .ttl h2{font-size: 90px;}
   .page_story .contents_wrapper > .sections > section > .desc dl > div > div{
      flex-direction: column;
      row-gap: 3px;
   }
}
@media screen and (max-height: 1090px) {
   body:has(.page_story) .left_nav{
      padding: 30px 5px;
      min-height: 380px;
   }

   body:has(.page_story) .left_nav ul li{
      --gap: 25px;
      margin: 0 auto;
   }
   body:has(.page_story) .left_nav ul li:nth-of-type(1){--gap: 60px;}
   body:has(.page_story) .left_nav ul li:nth-of-type(2){--gap: 40px;}
}
@media screen and (max-width:768px) {
   /* left_nav --------------------------- */
   body:has(.page_story) .left_nav{
      z-index: 19;
      inset: auto 0 min(12vh, 80px);
      max-width: 90vw;
      overflow-x: auto;
      overflow-y: hidden;
      padding: 10px 20px;
      min-height: 1px;
   }
   body:has(.page_story) .left_nav ul{
      display: flex;
      justify-content: center;
      min-width: max-content;
      width: 100%;
   }
   body:has(.page_story) .left_nav ul li{
      --gap: 20px;
      margin: auto 0;
   }
   body:has(.page_story) .left_nav ul li:not(:last-of-type)::before{
      inset: 0 0 0 auto;
      transform: rotate(90deg) translateY(50%);
   }
   body:has(.page_story) .left_nav ul li:not(:last-of-type){padding: 0 calc(var(--gap) + 6px) 0 0;}
   
   body:has(.page_story) .left_nav ul li:nth-of-type(1){--gap: 60px;}
   body:has(.page_story) .left_nav ul li:nth-of-type(2){--gap: 35px;}
   body:has(.page_story) .left_nav ul li a{font-size: 16px;}
   /* center_ship --------------------------- */
   body:has(.page_story) .center_ship{
      display: none;
      /* inset: 13% 0 auto; */
   }

   /* section - 共通 --------------------------- */
   /* sections */
   .page_story .contents_wrapper > .sections{
      padding: 100px 0 0;
      margin: 0;
   }
   .page_story .contents_wrapper > .sections::before{
      z-index: -1;
      inset: -50px 0 auto;
      height: calc(100% + 50px);
      background: linear-gradient(to bottom, transparent 0, #fff 100px, #fff calc(100% - 100px), transparent 100%);
   }
   
   /* section */
   .page_story .contents_wrapper > .sections > section{
      --h2_padding: 0;
      --inner_padding: 5%;
      flex-direction: column !important;
   }
   .page_story .contents_wrapper > .sections > section:not(:last-of-type){
      padding: 0;
      margin: 0;
   }
   
   .page_story .contents_wrapper > .sections > section > .ttl,
   .page_story .contents_wrapper > .sections > section > .desc{width: 100%;}
   
   /* title */
   .page_story .contents_wrapper > .sections > section > .ttl{
      padding: 0 0 110px;
      min-height: 1px;
   }
   .page_story .contents_wrapper > .sections > section > .ttl::before{inset: auto 0 -150px;}
   .page_story .contents_wrapper > .sections > .sec_2030 > .ttl::before{bottom: -90px;}
   .page_story .contents_wrapper > .sections > .sec_2020 > .ttl::before{bottom: -250px;}

   .page_story .contents_wrapper > .sections > section > .ttl h2{
      font-size: 100px;
      text-align: center;
   }
   
   /* description */
   .page_story .contents_wrapper > .sections > section > .desc{
      --center_offset: 5%;
      margin: 50px 0 0;
      padding: 0 0 90px;
   }
   .page_story .contents_wrapper > .sections > section > .desc dl{max-width: 100%;}
   .page_story .contents_wrapper > .sections > section > .desc dl:not(:last-of-type){margin: 0 0 15px;}
   .page_story .contents_wrapper > .sections > section > .desc dl::before,
   .page_story .contents_wrapper > .sections > section > .desc dl::after{display: none;}
   .page_story .contents_wrapper > .sections > section > .desc dl > div{padding: 32px 6%;}
   .page_story .contents_wrapper > .sections > section > .desc dl div:not(:last-of-type){margin: 0 0 10px;}
   
   .page_story .contents_wrapper > .sections > section > .desc dl:not(:has(div>div)) dt{font-size: 16px;}
   .page_story .contents_wrapper > .sections > section > .desc dl:not(:has(dt:empty)):not(:has(div>div)) dd{font-size: 14px;}

   .page_story .contents_wrapper > .sections > section > .desc dl:has(div>div) dd,
   .page_story .contents_wrapper > .sections > section > .desc dl:has(div>div) dt{font-size: 16px;}
   .page_story .contents_wrapper > .sections > section > .desc dl:has(div>div) dt{width: 2.2em;}
.page_story .contents_wrapper > .sections > section > .desc dl:has(div>div) dd{width: calc(100% - 2.2em - 18px);}
   
   /* section - 奇数 --------------------------- */
   .page_story .contents_wrapper > .sections > section:nth-of-type(odd) > .ttl{padding-inline: var(--inner_padding);}
   .page_story .contents_wrapper > .sections > section:nth-of-type(odd) > .ttl h2{margin-inline: auto;}
   
   /* section - 偶数 --------------------------- */
   .page_story .contents_wrapper > .sections > section:nth-of-type(even) > .ttl{padding-inline: var(--inner_padding);}
   .page_story .contents_wrapper > .sections > section:nth-of-type(even) > .ttl h2{margin-inline: auto;}
   .page_story .contents_wrapper > .sections > section:nth-of-type(even) > .desc dl{margin-inline: auto;}
   
   /* sec_2030 ~ 2050の背景 --------------------------- */
   .page_story .contents_wrapper > .sections > .sec_2030::before,
   .page_story .contents_wrapper > .sections > .sec_2040::before,
   .page_story .contents_wrapper > .sections > .sec_2050::before{inset: -120% -100% -100%;}
   
   .page_story .contents_wrapper > .sections > .sec_2030::before{opacity: 0.1;}
   .page_story .contents_wrapper > .sections > .sec_2040::before{opacity: 0.2;}
   .page_story .contents_wrapper > .sections > .sec_2050::before{opacity: 0.3;}
   
   /* sec_2050 --------------------------- */
   .page_story .contents_wrapper > .sections > .sec_2050{padding-bottom: 90px;}
   .page_story .contents_wrapper > .sections > .sec_2050 > .ttl::before{
      display: block;
      background: url(../img/page/story/bg_sec_2050.png) no-repeat center / cover;
   }
   .page_story .contents_wrapper > .sections > .sec_2050::after{display: none;}
}

/* =========================================================
   ■ 宇宙技術とビジネス
========================================================= */
@media screen and (max-width:768px) {
   /* KV --------------------------- */
   .tech_business .kv_sub{padding-bottom: 150px;}

   /* section --------------------------- */
   .tech_business .contents_wrapper > section:not(:last-of-type){margin: 0 0 80px;}
   .tech_business .contents_wrapper > section .inner{
      padding-block: 20px;
      background: rgba(0, 0, 0, .7);
   }

   /* h2_cont */
   .tech_business .contents_wrapper > section .h2_cont{
      position: relative;
      z-index: 0;
      left: -10%;
      aspect-ratio: 375 / 253;
      width: 110%;
      padding: 20px 5% 20px 13%;
      margin: 0 0 30px;
   }
   .tech_business .contents_wrapper > section.sec_debris .h2_cont{background-image: url(../img/page/tech_business/bg_deburis_sp.png?v260826);}
   .tech_business .contents_wrapper > section.sec_smallsat .h2_cont{background-image: url(../img/page/tech_business/bg_smallsat_sp.png);}
   .tech_business .contents_wrapper > section.sec_3rd .h2_cont{background-image: url(../img/page/tech_business/bg_3rd_sp.png?v260826);}
   .tech_business .contents_wrapper > section.sec_4th .h2_cont{background-image: url(../img/page/tech_business/bg_4th_sp.png);}

   .tech_business .contents_wrapper > section .h2_cont p{margin: 0 0 1em;}
   .tech_business .contents_wrapper > section .h2_cont h2{font-size: 21px;}

   .tech_business .contents_wrapper > section p{margin: 0 0 1em;}

   /* flex */
   .tech_business .contents_wrapper > section .flex{
      flex-direction: column;
      justify-content: flex-start;
      row-gap: 30px;
   }
   .tech_business .contents_wrapper > section .flex > *:nth-child(1),
   .tech_business .contents_wrapper > section .flex > *:nth-child(2){width: 100%;}

   /* h3 */
   .tech_business .contents_wrapper > section h3{margin: 50px 0 15px;}

   /* dl */
   .tech_business .contents_wrapper > section .company_link{
      --corner: 15px;
      flex-direction: column;
      row-gap: 1em;
      justify-content: flex-start;
      align-items: initial;
      padding: 30px 5%;
   }

   .tech_business .contents_wrapper > section .company_link > dl,
   .tech_business .contents_wrapper > section .company_link > p{width: 100%;}
   .tech_business .contents_wrapper > section .company_link > p{text-align: right;}

   .tech_business .contents_wrapper > section dl dt{
      font-size: 19px;
      margin: 0 0 0.5em;
   }
   .tech_business .contents_wrapper > section dl dt span{line-height: 1.5;}


   /* banner_area --------------------------- */
   .banner_area .banner_cont a{
      max-width: 400px;
      margin-inline: auto;
   }
   .banner_area section{margin: 2.5em auto 0;}
   .banner_area section h3{
      font-size: 16px;
      margin: 0 auto 1.25em;
   }
   .banner_area section ul{
      flex-direction: column;
      align-items: center;
      row-gap: 15px;
   }
   .banner_area section ul li{width: 100%;}
   .tech_business .banner_area{margin: 100px auto 0;}

   /* ディスクレーマー 全ページ共通 --------------------------- */
   .disclaimer.common{margin: 50px auto 0;}
}