/* ==========================================================================
Base
========================================================================== */
/* iPhone 320px */
@media only screen and (min-width:320px){html{font-size: 72%;}}
/* Android 360px 1.125 */
@media only screen and (min-width:360px){html{font-size: 74%;}}
/* iPhone6 375px 117.1875 */
@media only screen and (min-width:375px){html{font-size: 85%;}}
/* iPhone6 plus 414px 1.29375 */
/*@media only screen and (min-width:412px){html{font-size: 73%;}}*/
/* sm */
@media(min-width: 576px){
  html{font-size: 72%;}
  .container {max-width: 100%;}
  .position-sm-absolute {position: absolute;}
  .bg-sm-none {background: none!important;}
  .bottomRight-md {bottom: 0; right: 0; left: auto!important;}
}
/* md */
@media(min-width: 768px){
  html{font-size: 78%;}
  #menu-logo a {position: relative!important; top: auto!important; left: auto!important; transform:initial!important;}
  #logo.fixed {width: 13rem!important;}
  .position-md-absolute {position: absolute;}
  .bg-md-none {background: none!important;}
  .img-align-md-center{position:relative;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%)}
  .mah-md-64rem{max-height: 64rem;}
}
/* lg */
@media(min-width: 992px){
  html{font-size: 76%;}
  .position-lg-absolute {position: absolute;}
  .bg-lg-none {background: none!important;}
}
/*xl*/
@media(min-width:1200px){
  html{font-size: 78%;}
  #logo.fixed {width: 15rem!important;}
}
/*xl*/
@media(min-width:1366px){
  html{font-size: 80%;}
  .container {max-width: 1300px;}
  .ob-left img {object-position: 0%!important;}
  .ob-right img {object-position: 0%!important;}
}
/*xxl*/
@media(min-width:1440px){
  html{font-size: 85%;}
  .container {max-width: 1400px;}
}
@media(max-width: 575px){
  .brsp-sm-none br {display: none;}
  #staffmv img {object-position: 10% 0%!important;}
}
@media(max-width: 768px){
  .brsp-md-none br {display: none;}
}
@media(max-width: 991px){
  .brsp-lg-none br {display: none;}
}

@media screen and (min-width:577px) and ( max-width:991px) {
  .css-md-last-none > div:last-child {display:none!important;}
}

@media screen and (min-width:577px) and ( max-width:1199px) {
  .css-lg-last-none > div:last-child {display:none!important;}
}

html {
  scroll-behavior: smooth;
}

.lilwr-lat>li{margin-left:1.3rem;list-style-type:lower-latin;margin-bottom:.15rem}
.lilwr-decimal>li{margin-left:1.3rem;list-style-type:decimal;margin-bottom:.15rem}

/*xxl*/
/*@media(min-width:1600px){html{font-size: 104%;}}*/
html,html a{text-shadow: 1px 1px 1px rgba(0,0,0,0.004); }
html,body{overflow-x: hidden;height: 100%;}
body{position: relative;background-color: #fff;
  min-height: 100%;
  height: auto;
  color: #383847;
  font-family:-apple-system, BlinkMacSystemFont,"Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  letter-spacing: .005rem;
  background: none;
  font-weight: 500;}

p{line-height: 1.6;font-family:-apple-system, BlinkMacSystemFont,"Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
font-weight: 400;}
p,li {letter-spacing: 0;}
h1,h2,h3,h4,h5,h6{line-height: 1.6;}

.mt--6, .my--6 {margin-top: -3.5rem!important;}
.my--6 {margin-bottom: -3.5rem!important;}
.bw-2px {border-width: 2px!important;}
.w-202rem {width: 2.2rem;}

.text-shadow-blk {
    text-shadow: 1px 1px 2px rgb(0 0 0 / 60%), 0px 0px 13px rgb(0 0 0 / 60%), 0px 0px 6px rgb(0 0 0 / 60%);
}

/* font */
.font-TsukuGo-D{font-family: TsukuGoPr5-D;}
.font-TsukuGo-B{font-family: TsukuGoPro-B;}
.font-TsukuGo-E{font-family: TsukuGoPro-E;}
.font-TsukuGo-H{font-family: TsukuGoPro-H;}
.font-Din{font-family: DINNextLTPro-Regular;}
.font-Din-b{font-family: DINNextLTPro-Bold;}
.font-Din-c{font-family: DINNextLTPro-MediumCond;}
.font-telop{font-family: TelopMinProN-E;}
.font-NotoSans{font-family: 'Noto Sans JP', sans-serif;}

.clr-red{color: #e70000}
.clr-yellow{color: #F6AB00}
.clr-yellow02{color: #FFF100}
.clr-blue{color: #003585!important}
.clr-blue-light{color: #00A1EC}
.clr-green{color: #3CA584!important}


.ls-0105{letter-spacing: 0.15rem;}
.ls-0305{letter-spacing: 0.35rem;}


.z-0{z-index: 0;}
.z-100{z-index: 100;}

.h-0 {height:0;}
.h-05rem{height: .5rem;}
.h-13vh{height: 13vh;}
.h-23vh{height: 23vh;}
.h-45vh{height: 45vh;}
.h-77vh{height: 77vh;}
.mh-5rem{min-height: 5rem;}
.mh-6rem{min-height: 6rem;}
.mh-20rem{min-height: 20rem;}
.mah-20rem{max-height: 20rem;}
.mah-21rem{max-height: 21rem;}
.mah-22rem{max-height: 22rem;}
.mah-23rem{max-height: 23rem;}
.mah-24rem{max-height: 24rem;}
.mah-26rem{max-height: 26rem;}
.mah-28rem{max-height: 28rem;}
.mah-35rem{max-height: 35rem;}
.mah-60rem{max-height: 60rem;}
.mah-64rem{max-height: 64rem;}
.mah-80vh{max-height: 80vh;}
.mw-100{max-width:100%!important;}

.pb-100 {padding-bottom: 100%;}
.word-break{word-break: break-word;}

.txt-ellipsis{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.mix-blend-screen {mix-blend-mode: screen;}

.bg-top {background: url(../img/top/mv.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;}
.bg-about {background: url(../img/about/mvabout.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;}
.bg-case {background: url(../img/case/mvcase.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;}
.bg-service {background: url(../img/service/mvservice.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;}
.bg-service01 {background: url(../img/service/service01_bg.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;}
.bg-service02 {background: url(../img/service/service02_bg.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;}
.bg-service03 {background: url(../img/service/service03_bg.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;}
.bg-service04 {background: url(../img/service/service04_bg.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;}
.bg-service05 {background: url(../img/service/service05_bg.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;}
.bg-service06 {background: url(../img/service/service06_bg.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;}
.bg-service07 {background: url(../img/service/service07_bg.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;}
.bg-service-2 {background: url(../img/service/mvservice2.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;}
.bg-report {background: url(../img/report/bnr_01.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;}

a,.page-link{color: #000;}
a:hover,.hvr-clr-pink:hover{color: #5A5A7C !important;text-decoration: none;}
a:active,a:focus {color: inherit; text-decoration: none;}
.hvr-red:hover{color: #ae0e16 !important;text-decoration: none;}

a:hover span.bbsd.d-inline-block.text-left{border-bottom-color: #5A5A7C !important;}
.img-align-bottom {position: relative;z-index: 1;top: 100%;left: 50%;transform: translate(-50%,-100%);}
.outline-none {outline:none;}
.c-p{cursor: pointer;}

.bg-stripe {background: linear-gradient(-45deg,#e6e6e6 50%, #F8F8F8 50%,#F8F8F8);}
.bg-stripe-grn {background: linear-gradient(-45deg,#009133 50%, #00A73B 50%,#00A73B);}
.bg-stripe-grn-2 {background: linear-gradient(45deg,#00A73B 40%, #009133 40%,#009133);}
.bg-stripe-beige {background: linear-gradient(-45deg,#f3f0df 50%, #dfdcca 50%,#dfdcca);}
.bg-stripe-beige-2 {background: linear-gradient(45deg,#dfdcca 40%, #f3f0df 40%,#009133);}
.bg-beige {background: #f3f0df;}
.bg-blk {background: #000;}
.bg-dark{background-color: #313639}
.bg-green{background-color: #00A73B;}
.bg-green-light{background-color: #C3D600;}
.bg-green-lime{background-color: #00C893;}
.bg-gray-light{background-color: #F7F8F8;}
.bg-gray-light02{background-color: #E5E8EA;}
.bg-gray-u-light{background-color: #fcfcfc;}
.bg-gray-mid{background-color: #e6e6e6;}
.bg-yellow{background-color: #F6AB00}
.bg-yellow-light{background-color: #FFFF33}
.bg-blue{background-color: #ebf2fc}
.bg-blue-dark{background-color: #00002E}
.bg-gray-dark{background-color: #3f3f3f}
.bg-wht{background-color: #fff}
.bg-navy{background-color: #333355}
.bg-grg {background-color: #FF7A5A;}
.bg-d-gray{background-color: #E6E6E5;}

.txt-under{text-decoration: underline;}
.bg-blue-light{background-color: #D3E1E9;}
.bg-blue-light02{background-color: #e2ecfb;}

.bg-under-shadow:before {content:""; width: 100%; height: 8rem; position: absolute; bottom: 0;left: 0; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#80000000',GradientType=0 ); }


.bc-blk{border-color: #000!important}
.bc-dark{border-color: #313639!important}
.bc-green{border-color: #00A73B !important;}
.bc-green-light{border-color: #a2dbc7 !important;}
.bc-red{border-color: #e61919 !important;}
.bc-gray{border-color: #ccc !important}
.bc-gray-dark{border-color: #333 !important}
.bc-yellow{border-color: #F6AB00 !important}
.bc-blue{border-color: #003585 !important}
.bc-blue-light{border-color: #003585 !important}
.bc-navy{border-color: #303253 !important}
.bc-orange{border-color: #303253 !important}

.bg-blue2{background-color: #1e90ff !important}
.bg-blue3{background-color: #C2DAFF !important}
.bg-pink{background-color: #ff1493 !important}
.bg-purple{background-color: #9932cc !important}
.bg-red{background-color: #e61919 !important}

.hvr-bg-green:hover{background-color: #7ec400 !important;}
.hvr-bg-gray-light:hover{background-color: #f8f8f8 !important;}
.hvr-bg-red:hover{background-color: #e61919 !important;}
.hvr-tdu:hover{text-decoration: underline;}
.hvr-clr-blk:hover{color: #333 !important;}
.hvr-clr-yellow:hover{color: #F7B101 !important;}
.hvr-clr-wht:hover{color: #fff !important;}
.hvr-clr-gray:hover{color: #f8f8f8 !important;}
.hvr-clr-Lightnavy:hover{color: #5C5C7F !important;}

.featherlight-sample {
  display: none;
}


.txt-line-wht {background: linear-gradient(transparent 13%, #fff 0%);}
.txt-line-blk {background: linear-gradient(transparent 13%, #000 0%);}
/*.txt-line-wht:after,.txt-line-blk:after {white-space: pre-wrap; content:" ";}*/

.liComment{padding-left: 1rem;}
  .liComment>li{position: relative;padding-left: .25rem;}
    .liComment>li::before{position: absolute;content: "*";top:0;left:-1.15rem;color: #191919;vertical-align: middle;font-size: 1em;}

/* loading
------------------------------------------*/
#loading {position: fixed; z-index: 1000; top: 0; left: 0; width: 100%; height: 100%;-moz-transition-property: color; -o-transition-property: color; -webkit-transition-property: color; transition-property: color; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s;background: rgba(255, 255, 255,1)}
  #load-wrap {position: relative;left: -.35rem;width: 30rem; height: 6rem;-moz-transition: -moz-transform 0.2s; -webkit-transition: -webkit-transform 0.2s; -o-transition: -o-transform 0.2s; -ms-transition: -ms-transform 0.2s; transition: transform 0.2s;}
  #loading.active {opacity: 0; z-index: -100;visibility: hidden;-webkit-transform: scale(1.05);-moz-transform: scale(1.05);-o-transform: scale(1.05);-ms-transform: scale(1.05);transform: scale(1.05);}

.spinner {position: relative;width: 3rem;height: 1.2rem;text-align: center;}
  .spinner > div {background-color: #999;height: 100%;margin-right: .15rem;width: 2px;display: inline-block;-webkit-animation: sk-stretchdelay 1.3s infinite ease-in-out;animation: sk-stretchdelay 1.3s infinite ease-in-out;}
  .spinner .rect2 {-webkit-animation-delay: -1.1s;animation-delay: -1.1s;}
  .spinner .rect3 {-webkit-animation-delay: -1.0s;animation-delay: -1.0s;}
  .spinner .rect4 {-webkit-animation-delay: -0.9s;animation-delay: -0.9s;}
  .spinner .rect5 {-webkit-animation-delay: -0.8s;animation-delay: -0.8s;}
  @-webkit-keyframes sk-stretchdelay {0%, 40%, 100% { -webkit-transform: scaleY(0.55) } 20% { -webkit-transform: scaleY(1.0) }}
  @keyframes sk-stretchdelay {0%, 40%, 100% { transform: scaleY(0.55);  -webkit-transform: scaleY(0.55);}  20% { transform: scaleY(1.0);  -webkit-transform: scaleY(1.0);}}




 /*pagetop*/
 #pagetop{position:fixed;right:0; bottom:0;z-index:500;display: none;}
   #pagetop:hover{opacity:1;cursor: pointer;}

/* header
------------------------------------------*/
#mainlogo {transition: .9s cubic-bezier(.165,.84,.44,1);}
#mainlogo{background-image: url(../img/global/main_logo.svg);}

  .obfit img {width: 100%;height:100%;object-fit: cover; font-family: 'object-fit: cover; object-position: center;'}

  .ob-left img {object-position: 0 100%}
  .ob-right img {object-position: 100% 0}

  .loadshow {opacity: 0; transition: 1s;}
    .loadshow.open {opacity: 1;}
    #nav-header.open {transition-delay: .3s;}
    #copy.open {transition-delay: .4s;}
    #top-contact.open {transition-delay: .8s;}

  #menu {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -10; opacity: 0; visibility: hidden;}
    #menu.open {opacity: 1; z-index: 80; visibility: visible;}
    #menu #menu-logo {opacity:0; transition: .5s cubic-bezier(.165,.84,.44,1);}
    #menu-logo a {position: fixed; top: 50%; left:16.5%; transform:translate(-50%,-50%)}
    #menu ul:before {content:""; position: absolute; top: 0; left: 0; width: 1px; height: 0; background: #FFF; transition: .9s cubic-bezier(.165,.84,.44,1);}
    #menu li {position: relative;}
    #menu .fade {margin-left: -.5rem; opacity: 0; transition: .5s cubic-bezier(.165,.84,.44,1);}
      #menu li:before {content:""; width: 0rem; height: 1px; background: #fff; position: absolute; left: 0; top: 40%; transition: 2s cubic-bezier(.165,.84,.44,1);}

    #menu.open ul:before {height:100%; transition-delay: .3s;}
    #menu.open #menu-logo {opacity: 1; transition-delay: .2s;}
    #menu.open #menu-1:before {transition-delay: .2s;}
    #menu.open #menu-2:before {transition-delay: .3s;}
    #menu.open #menu-3:before {transition-delay: .4s;}
      #menu.open #menu-1 li:before {width: 7rem; transition-delay: .5s;}
      #menu.open #menu-2 li:before {width: 7rem; transition-delay: .6s;}
      #menu.open #menu-3 li:before {width: 7rem; transition-delay: .7s;}
    @media(min-width:1200px){
      #menu.open #menu-1 li:before {width: 10rem;}
      #menu.open #menu-2 li:before {width: 10rem;}
      #menu.open #menu-3 li:before {width: 10rem;}
    }
    #menu.open #menu-1 .fade {opacity: 1; margin-left: 0; transition-delay: .5s;}
    #menu.open #menu-2 .fade {opacity: 1; margin-left: 0; transition-delay: .6s;}
    #menu.open #menu-3 .fade {opacity: 1; margin-left: 0; transition-delay: .7s;}

  #hd-menu li {position: relative;}
    #hd-menu li:before {content:""; width: 0; height: 1px; background: #000; position: absolute; left: 0; top: 50%; transition: 1s cubic-bezier(.165,.84,.44,1);}
    #hd-menu a {display: block; background: #FFF; position: relative; z-index: 1; }
    #hd-menu a div {opacity: 0; margin-left: -.5rem; transition: 1s;}

    #mv a,#mv img {opacity: 1!important;}
    #mv.open #hd-menu-1:before {width: 5rem; transition-delay: .5s;}
    #mv.open #hd-menu-2:before {width: 5rem; transition-delay: .6s;}
    #mv.open #hd-menu-3:before {width: 5rem; transition-delay: .7s;}
    #mv.open #hd-menu-4:before {width: 5rem; transition-delay: .8s;}
    #mv.open a div {opacity: 1; margin: 0;}
    #mv.open #hd-menu-1 a div {transition-delay: .6s;}
    #mv.open #hd-menu-2 a div {transition-delay: .7s;}
    #mv.open #hd-menu-3 a div {transition-delay: .8s;}
    #mv.open #hd-menu-4 a div {transition-delay: .9s;}

  /* mv */
    #mv-sub {opacity: 0; margin-left: -.5rem; transition: 1s;}
    #mv-sub.open  {opacity: 1; margin-left:0;}

  /* menu-toggle */
    #menu-toggle {width: 4rem; height: 4rem; position: relative; cursor: pointer; border-radius:100%; background:#fff; z-index: 100; transition: .5s cubic-bezier(.165,.84,.44,1);}
    #menu-toggle.open {background: none;}
    #menu-toggle span {transition: .15s cubic-bezier(.165,.84,.44,1);box-sizing: border-box; display: block;background: #000;border-radius: 1px;}
    #menu-toggle #hamburger {position: absolute;height: 100%;width: 100%;}
    #menu-toggle #hamburger span {height: 3px;position: relative; top: .7rem; right: .7rem; margin: .5rem 0 .5rem auto;}
    #menu-toggle #hamburger span:nth-child(1) {width: 2.5rem; transition-delay: .5s;}
    #menu-toggle #hamburger span:nth-child(2) {width: 1.7rem; transition-delay: .625s;}
    #menu-toggle #hamburger span:nth-child(3) {width: 1rem; transition-delay: .75s;}
    #menu-toggle #cross {position: absolute;height: 100%;width: 100%;transform: rotate(45deg);}
    #menu-toggle #cross span:nth-child(1) {background: #fff; height: 0%;width: 3px;position: absolute;top: 25%;left: 2rem;transition-delay: 0s;}
    #menu-toggle #cross span:nth-child(2) {background: #fff; width: 0%;height: 3px;position: absolute;left: 25%;top: 2rem;transition-delay: .25s;}
    #menu-toggle.open #hamburger span {width: 0%;}
    #menu-toggle.open #hamburger span:nth-child(1) {transition-delay: 0s;}
    #menu-toggle.open #hamburger span:nth-child(2) {transition-delay: .125s;}
    #menu-toggle.open #hamburger span:nth-child(3) {transition-delay: .25s;}
    #menu-toggle.open #cross span:nth-child(1) {height: 50%;transition-delay: .625s;}
    #menu-toggle.open #cross span:nth-child(2) {width: 50%;transition-delay: .375s;}

    #contact-btn {width: 4rem; height: 4rem; background: #00A73B; border-radius:100%; font-size: 90%; opacity: 0;}
      #contact-btn.fixed {opacity: 1;}
      #contact-btn:hover {color: #00A73B; background: #fff;}

    @media(min-width: 576px){
      #contact-btn,#menu-toggle {width: 5rem; height: 5rem;}
      #menu-toggle #hamburger span {top: .8rem; right: .9rem; margin: .7rem 0 .7rem auto;}
      #menu-toggle #hamburger span:nth-child(1) {width: 3.2rem;}
      #menu-toggle #hamburger span:nth-child(2) {width: 2.2rem;}
      #menu-toggle #hamburger span:nth-child(3) {width: 1.2rem;}
      #menu-toggle #cross span:nth-child(1) {left: 2.4rem;}
      #menu-toggle #cross span:nth-child(2) {top: 2.4rem;}
    }

    @media(min-width: 992px){
      #contact-btn,#menu-toggle {width: 6rem; height: 6rem;}
      #contact-btn {font-size: 100%;}
      #menu-toggle #hamburger span {top: 1.2rem; right: 1.3rem; margin: .8rem 0 .8rem auto;}
      #menu-toggle #hamburger span:nth-child(1) {width: 3.5rem;}
      #menu-toggle #hamburger span:nth-child(2) {width: 2.5rem;}
      #menu-toggle #hamburger span:nth-child(3) {width: 1.5rem;}
      #menu-toggle #cross span:nth-child(1) {left: 2.9rem;}
      #menu-toggle #cross span:nth-child(2) {top: 2.9rem;}
    }


  /* label */
  .p-gram {position: relative; z-index: 1;}
  .p-gram:before {position: absolute; top: 0; left: 0; z-index: -1; content:""; width: 100%; height: 100%; background: #000; -webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); -o-transform: skew(-20deg);}
  .label-slash:after {content: ''; position: absolute; display: inline-block; width: 4rem; height: 1px; margin-left: -1rem; background-color: #949494; -webkit-transform: rotate(-40deg); transform: rotate(-40deg); }
  .col-stripe,.col-stripe:before {position: absolute; top: 0;  width: 100%; height: 100%;}
  .col-stripe {background: rgb(255,255,255); background: linear-gradient(-45deg, rgba(0,0,0,.2) 50%, rgba(0,79,84,0) 50%, rgba(0,0,0,0) 100%); z-index: 2; left:0;}
  .col-stripe.red {background: rgb(255,255,255); background: linear-gradient(-45deg, rgba(181,0,0,1) 50%, rgba(0,79,84,0) 50%, rgba(0,0,0,0) 100%); z-index: 2; left:0;}
  .col-stripe:before {content:""; background: linear-gradient(-45deg, rgba(255,255,255,1) 50%, rgba(0,79,84,0) 50%, rgba(0,0,0,0) 100%); z-index: 1; left:1px;}

  .balloon {position: relative;}
  .balloon:before {content: "";position: absolute;top: 100%;left: 50%;margin-left: -15px;border: 15px solid transparent;border-top: 15px solid #000;}


  .triangle{
    border-top: 1rem solid transparent;
    border-bottom: 1rem solid transparent;
    border-left: 1rem solid #003585;
}
  .triangle-sp{
    border-top: 1rem solid #003585;
    border-left: 1rem solid transparent;
    border-right: 1rem solid transparent;
}

  /* link */
  [class*="i-link"] {position: relative;}
  [class*="i-link"] * {position: relative; z-index: 1;}
  [class*="i-link"]:hover {-webkit-transition:none!important; -moz-transition:none!important; -o-transition:none!important; transition:none!important;}
  [class*="i-link"]:after {height: 100%; content: ""; position: absolute;right: 0;top: 0;}
  [class*="i-link"]:hover:after {right:auto; left: 0;}
  .i-link {border: 2px solid #000; color: #000; background-color: #FFF;}
    .i-link:hover {color: #FFF!important;}
    .i-link:after {background: #000;animation: anim-out .2s ease forwards;}
    .i-link:hover::after {animation: anim .2s ease forwards;}
    @keyframes anim {0% { width:0;} 100% {width: 100%;}}
    @keyframes anim-out {0% {width:100%;} 100% {width: 0;}}

  .i-link-blk {color: #fff; background-color: #000;}
    .i-link-blk:hover {color: #000!important;}
    .i-link-blk:after {background: #fff;animation: anim-out .2s ease forwards;}
    .i-link-blk:hover::after {animation: anim .2s ease forwards;}
    @keyframes anim {0% { width:0;} 100% {width: 100%;}}
    @keyframes anim-out {0% {width:100%;} 100% {width: 0;}}

  .i-link-grn {border: 2px solid #00A73B; color: #fff; background-color: #00A73B;}
    .i-link-grn:hover {color: #00A73B!important;}
    .i-link-grn:after {background: #fff;animation: anim-out .2s ease forwards;}
    .i-link-grn:hover::after {animation: anim .2s ease forwards;}
    @keyframes anim {0% { width:0;} 100% {width: 100%;}}
    @keyframes anim-out {0% {width:100%;} 100% {width: 0;}}

  .img-link a {display: block;}
    .img-link img {-webkit-transform: scale(1);transform: scale(1); transition: .8s cubic-bezier(.165,.84,.44,1); opacity: 1!important;}
    .img-link:hover img,.img-link.hover img {-webkit-transform: scale(1.06); transform: scale(1.06);}
    .img-link2 img {-webkit-transform: scale(1);transform: scale(1); transition: 4s cubic-bezier(.165,.84,.44,1); }
    .img-link2:hover img,.img-link2.hover img {-webkit-transform: scale(1.06); transform: scale(1.06);}

  .btn-share-twitter:hover{color:#55ACEE!important;}
  .btn-share-line:hover{color:#00C300!important;}
  .btn-share-facebook:hover{color:#3B5999!important;}

/* interview
------------------------------------------*/
  #interview p {font-size: 1.1rem;line-height: 1.8;margin-top: 1.5rem;}
  #interview .img-fluid {width: 100%;}
  @media(min-width: 576px){
    #interview p {font-size: 1.2rem;}
  }


  @media only screen and (min-width:375px){html{font-size: 85%;}}

/* ==========================================================================
wp plugin
========================================================================== */
  .wp-pagenavi,.wp-pagenavi * {display: inline-block;}
  .wp-pagenavi {font-family: DINNextLTPro-MediumCond; border-right:2px solid #000; font-size: 1.5rem;}
  .wp-pagenavi .current,.wp-pagenavi a, .wp-pagenavi .extend {padding:.2rem 1rem .1rem!important; margin: 0rem!important; border:2px solid #000!important; background: #FFF!important; border-right: none!important;}
  .wp-pagenavi .current {font-weight: 500!important; color: #aaaaaa!important;}
  .wp-pagenavi .pages {display: none; border: none; font-size: 1.5rem; margin-right:.5rem;}
  .wp-pagenavi a { -webkit-transition: .3s;transition: .3s;}
  .wp-pagenavi a:hover {color: #FFF!important; background: #000!important;}

  #pager a {display: block; width: 100%; padding:.5rem 0 ;}
/* ==========================================================================
plugin
========================================================================== */

/*! slick */
.slick-slide {outline: none!important;}
.slick-dots {position: relative !important; top:.2rem; line-height: 1;}
.loop-dots .slick-dots {top:0rem;}
  .slick-dots li{margin: 0 !important;}
.slider-nav button{background: none;}
.slider-nav .slick-current button{color: #19b7bd;}
.slick-dotted.slick-slider {margin-top: 0!important; margin-bottom: 0!important;}
.slick-dots li.slick-active button:before {opacity: 1!important;}

.mv-arrows {position: absolute; bottom: 1.5rem; width: 100%; z-index: 90;}
  .mv-arrows .slide-prev,.mv-arrows .slide-next {background: none; position: absolute;}
  .mv-arrows .slide-prev {left:5rem;}
  .mv-arrows .slide-next {right:5rem;}

.arrows {position: absolute; bottom: 1.5rem; width: 100%;}
  .arrows .slide-prev,.arrows .slide-next {background: none; position: absolute;}
  .arrows .slide-prev {left:-.5rem;}
  .arrows .slide-next {right:-.5rem;}

  @media(min-width: 576px){
    .arrows {bottom: auto; top: 50%;}
    .arrows .slide-prev {left:-1.6rem;}
    .arrows .slide-next {right:-1.6rem;}
  }

#slide .slick-slide {opacity: 0.2; transition: .8s cubic-bezier(.165,.84,.44,1);}
#slide .slick-current {opacity: 1;}
#slide .slick-list {overflow:visible;}


.motion-txt {display: inline-block;position: relative;overflow: hidden;}
.motion-txt:after {content: '';position: absolute;opacity: 1;left: 0;top: 0;bottom: 0;width: 100%;background-color: #fff;transform: translate3d(-101%, 0, 0);}
.motion-txt.mtaBfBlk:after {background-color: #000!important;}
.js-scroll.show .motion-txt:after {transition-property: transform, opacity;transition-duration: 0.5s;transition-delay: 0s;transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);transform: translate3d(0, 0, 0);}
.js-scroll.done .motion-txt:after {transition-property: transform;transition-duration: 0.5s;transition-delay: 0s;transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);transform: translate3d(103%, 0, 0);}
.js-scroll-mv.show .motion-txt:after {transition-property: transform, opacity;transition-duration: 0.5s;transition-delay: 0s;transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);transform: translate3d(0, 0, 0);}
.js-scroll-mv.done .motion-txt:after {transition-property: transform;transition-duration: 0.5s;transition-delay: 0s;transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);transform: translate3d(103%, 0, 0);}
.motion-txt .motion-inner {display: inline-block;opacity: 0;}
[class*="js-scroll"].done .motion-txt .motion-inner {opacity: 1;}


.timeline {
    list-style-type: none;
    position: relative;
}
.timeline:before {
    content: ' ';
    background: #F7B100;
    display: inline-block;
    position: absolute;
    left: 2rem;
    width: 1px;
    height: 100%;
    z-index: -100;
}
@media(max-width: 576px){
  .timeline:before {
      content: ' ';
      background: #F7B100;
      display: inline-block;
      position: absolute;
      left: 50%;
      width: 1px;
      height: 120%;
      z-index: -100;
  }
}
.timeline > .timeline_icon:before {
    content: ' ';
    background: white;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 2px solid #F7B100;
    top: 20%;
    left: 20px;
    width: 15px;
    height: 15px;
    z-index: 400;
}
@media(max-width: 576px){
  .timeline > .timeline_icon:before {
    display: none;
  }
}
@media(max-width: 576px){
  .wrap:after {
    display: none;
  }
}

.fa-icon {
  width: 2.3rem;
  height: auto;
}

.drawer {

}

/* チェックボックスは非表示に */
.drawer-hidden {
  display: none;
}
/* ハンバーガーアイコンの設置スペース */
.drawer-open {
  height: 23px;
  width: 35px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 100;
  cursor: pointer;
}
/* ハンバーガーメニューのアイコン */
.drawer-open span,
.drawer-open span:before,
.drawer-open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 35px;
  border-radius: 3px;
  background: #333;
  transition: 0.5s;
  position: absolute;
}
/* 三本線のうち一番上の棒の位置調整 */
.drawer-open span:before {
  bottom: -10px;
}
/* 三本線のうち一番下の棒の位置調整 */
.drawer-open span:after {
  top: 20px;
}
/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer-check:checked ~ .drawer-open span {
  background: rgba(255, 255, 255, 0);
}
/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer-check:checked ~ .drawer-open span::before {
  bottom: -10px;
  transform: rotate(45deg);
}
#drawer-check:checked ~ .drawer-open span::after {
  top: 10px;
  transform: rotate(-45deg);
}
/* メニューのデザイン*/
.drawer-content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 100%;/* メニューを画面の外に飛ばす */
  z-index: 99;
  background: #fff;
  transition: .5s;
}
/* アイコンがクリックされたらメニューを表示 */
#drawer-check:checked ~ .drawer-content {
  left: 0;/* メニューを画面に入れる */
}
.box-entry p {
  margin-top: 2.2rem;
  font-size: 1.02rem;
  line-height: 2.3;
}
.widgettitle {
  font-weight: bold;
  border-bottom: 1px solid #ccc;
  padding-bottom: 0.5rem;
  margin-bottom: 0.8rem;
}
.widget_categories {
  margin-top: 1.5rem;
}
.box-entry a {
  padding-bottom: .2em;
}
.news_cont h1 {
  font-size: 1.7rem!important;
  font-weight: bold!important;
  margin-top: 2rem;
}
.news_cont h2 {
  font-size: 1.4rem!important;
  font-weight: bold!important;
}
.news_cont h3 {
  font-size: 0.9rem!important;
  font-weight: bold!important;
  margin-top: 2rem;
}
.news_cont p {
  font-size: 1.15rem;
  margin-top: 2rem;
}
.wp-caption-text {
  font-size: 0.8rem!important;
  margin-top: 0.5rem!important;
}
.news_cont img {
  width: 100%;
  height: auto;
}
.main_shadow {
  text-shadow: 1.9rem 9rem 9rem rgba(0,0,0,0.50), 0.2rem -0.2rem 1rem rgba(0,0,0,0.50);
}
.news_cate a {
  color: #fff;
}
.widgettitle {
  font-size: 1rem!important;
}
.widget li {
  font-size: 1rem!important;
  margin-bottom: 0.5rem;
}
.news_cont ul {
  margin-top: 0.8rem;
}
.news_cont li {
  list-style: disc;
  font-size: 1.1rem!important;
  margin-left: 1.5rem;
  margin-bottom: 0.5rem;
}
.wp-caption {
  width: 100%!important;
  height: auto;
}
.wp-caption img {
  width: 100%!important;
  height: auto;
}
  /* link */
  [class*="i-link"] {position: relative;}
  [class*="i-link"] * {position: relative; z-index: 1;}
  [class*="i-link"]:hover {-webkit-transition:none!important; -moz-transition:none!important; -o-transition:none!important; transition:none!important;}
  [class*="i-link"]:after {height: 100%; content: ""; position: absolute;right: 0;top: 0;}
  [class*="i-link"]:hover:after {right:auto; left: 0;}
  .i-link {border: 2px solid #000; color: #000; background-color: #FFF;}
    .i-link:hover {color: #FFF!important;}
    .i-link:after {background: #000;animation: anim-out .2s ease forwards;}
    .i-link:hover::after {animation: anim .2s ease forwards;}
    @keyframes anim {0% { width:0;} 100% {width: 100%;}}
    @keyframes anim-out {0% {width:100%;} 100% {width: 0;}}

  .i-link-blk {color: #fff; background-color: #000;}
    .i-link-blk:hover {color: #000!important;}
    .i-link-blk:after {background: #fff;animation: anim-out .2s ease forwards;}
    .i-link-blk:hover::after {animation: anim .2s ease forwards;}
    @keyframes anim {0% { width:0;} 100% {width: 100%;}}
    @keyframes anim-out {0% {width:100%;} 100% {width: 0;}}

  .i-link-grn {border: 2px solid #00A73B; color: #fff; background-color: #00A73B;}
    .i-link-grn:hover {color: #00A73B!important;}
    .i-link-grn:after {background: #fff;animation: anim-out .2s ease forwards;}
    .i-link-grn:hover::after {animation: anim .2s ease forwards;}
    @keyframes anim {0% { width:0;} 100% {width: 100%;}}
    @keyframes anim-out {0% {width:100%;} 100% {width: 0;}}

  .img-link a {display: block;}
    .img-link img {-webkit-transform: scale(1);transform: scale(1); transition: .8s cubic-bezier(.165,.84,.44,1); opacity: 1!important;}
    .img-link:hover img,.img-link.hover img {-webkit-transform: scale(1.06); transform: scale(1.06);}
    .img-link2 img {-webkit-transform: scale(1);transform: scale(1); transition: 4s cubic-bezier(.165,.84,.44,1); }
    .img-link2:hover img,.img-link2.hover img {-webkit-transform: scale(1.06); transform: scale(1.06);}

  .btn-share-twitter:hover{color:#55ACEE!important;}
  .btn-share-line:hover{color:#00C300!important;}
  .btn-share-facebook:hover{color:#3B5999!important;}

.padSection {
  margin: 6rem 0;
  padding: 3rem;
  border: 2px solid #ccc;
}
.padSection h4 {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: bold;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #ccc;
}
.padSection #authorName {
  display: block;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: bold;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}
.padSection .avatar {
  width: 25%;
  height: auto;
  display: inline-block;
  margin-right: 7%;
  vertical-align: top;
}
.padSection .avatar img {
  width: 100%;
  height: auto;
}
.padSection #profileTxtSet {
  width: 63%;
  height: auto;
  display: inline-block;
  text-align: justify;
  text-justify: inter-ideograph;
}
.padSection #latestEntries {
  margin-top: 4rem;
  clear: both;
}
.padSection #latestEntries h5 {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: bold;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #ccc;
}
.padSection #latestEntries ul {
  margin: 0!important;
}
.thumbnailBox {
  list-style: none!important;
  padding: 0!important;
  margin: 0!important;
  width: 100%;
  height: auto;
  display: inline-block;
  margin-bottom: 5%!important;
  vertical-align: top!important;
  position: relative;
  overflow: hidden;
}
.thumbnailBox :nth-child(3n) {
  margin-right: 0%;
}
.thumbnailBox img {
  vertical-align: middle;
  object-fit: cover;
}
.postImage {
  margin-bottom: 1rem;
  display: block;
  height: 7rem;
  overflow: hidden;
  width: 30%;
  float: left;
  margin-right: 5%;
}
.padCate {
  padding: 0 0.5rem;
  background: #303253!important;
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: bold;
  font-size: 0.5rem;
  display: block;
  margin-bottom: 0.2rem;
  position: absolute;
  display: block;
  top: 0;
}
.padDate {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: bold;
  font-size: 0.8rem;
  display: block;
  margin-bottom: 0.2rem;
}
.padTitle {
  font-size: 1rem;
}
.post-author {
  clear: both;
}
.overflow-x02 {
  width: auto;
  height: auto;
  overflow-x: auto;
}
.overflow-x-in02 {
  width: 1202px;
}
.w-150 {
  width: 150px;
}
.overflow-x03 {
  width: auto;
  height: auto;
  overflow-x: auto;
}
.overflow-x-in03 {
  width: 1202px;
}
.overflow-x-in04 {
  width: 3002px;
}
.overflow-x-in05 {
  width: 1402px;
}
.overflow-x-in06 {
  width: 1002px;
}
.overflow-x-in07 {
  width: 1602px;
}
.overflow-x-in08 {
  width: 1502px;
}
.overflow-x-in09 {
  width: 602px;
}
.overflow-x-in10 {
  width: 1002px;
}
.overflow-x-in11 {
  width: 1752px;
}
.overflow-x-in12 {
  width: 802px;
}
.overflow-x-in13 {
  width: 902px;
}
.overflow-x-in14 {
  width: 1102px;
}
.w-150 {
  width: 150px;
}
.w-200 {
  width: 200px;
}
.w-250 {
  width: 250px;
}
.w-300 {
  width: 300px;
}
.w-400 {
  width: 400px;
}

@media(max-width: 576px){
  .overflow-x {
    width: auto;
    height: auto;
    overflow-x: auto;
  }
  .overflow-x-in {
    width: 750px;
  }
  .padSection {
    margin: 6rem 0;
    padding: 2rem 1rem;
    border: 2px solid #ccc;
  }
  .padSection h4 {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: bold;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #ccc;
  }
  .padSection #authorName {
    display: block;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    text-align: center;
  }
  .padSection .avatar {
    width: 40%;
    height: auto;
    display: block;
    margin: 0 auto;
    vertical-align: top;
    margin-bottom: 1rem;
  }
  .padSection .avatar img {
    width: 100%;
    height: auto;
  }
  .padSection #profileTxtSet {
    width: 100%;
    height: auto;
    display: inline-block;
    text-align: justify;
    text-justify: inter-ideograph;
  }
  .padSection #latestEntries {
    margin-top: 2rem;
    clear: both;
  }
  .padSection #latestEntries h5 {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: bold;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #ccc;
  }
  .padSection #latestEntries ul {
    margin: 0!important;
  }
  .thumbnailBox {
    list-style: none!important;
    padding: 0!important;
    margin: 0!important;
    width: 100%;
    height: auto;
    display: block;
    margin-right: 0;
    margin-bottom: 5%!important;
  }
  .thumbnailBox :nth-child(3n) {
    margin-right: 0%;
  }
  .thumbnailBox img {
    object-fit: cover;
  }
  .postImage {
    width: 40%;
    height: 5rem;
    float: left;
    margin-bottom: 0;
    margin-right: 4%;
    overflow: hidden;
  }
  .postImage img {
    width: 120%;
    height: auto;
  }
  .padCate {
    padding: 0 0.5rem;
    background: #303253!important;
    color: #fff;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: bold;
    font-size: 0.5rem;
    display: block;
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
  }
  .padDate {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: bold;
    font-size: 0.8rem;
    display: block;
    margin-bottom: 0.2rem;
  }
  .padTitle {
    font-size: 0.6rem;
    float: left;
    width: 50%;
  }
  .padTitle a {
    text-decoration: none;
  }
  .post-author {
    clear: both;
  }
}

.sns_icons {
  display: none;
}

.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.scroll-container {
  scroll-behavior: smooth;
}

.dropdown__lists {
    visibility: hidden;/*デフォルトでは非表示の状態にしておく*/
    opacity: 0;/*不透明度0*/
    transition: all .3s;/*表示の変化を0.3秒に指定*/
    position: absolute;
    top: 50px;
    left: -30px;
    right: 0;
}
.gnavi__list:hover .dropdown__lists {
    visibility: visible;/*Gナビメニューにホバーしたら表示*/
    opacity: 1;/*不透明度1*/
}
.dropdown__list {
    transition: all .3s;
}
.dropdown__list:not(:first-child)::before{
    content: "";
    width: 100%;
    height: 1px;
    background-color: #3492d1;
    position: absolute;
    top: 0;
    left: 0;
}
.dropdown__list:hover {
    background-color: #003558;
}


.toggle {
display: none;
}
.title,
.content {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
transition: all 0.3s;
}
.title {
display: block;
}
.title::after,
.title::before {
content: "";
position: absolute;
right: 1.25em;
top: 36%;
width: 2px;
height: 0.75em;
background-color: #999;
transition: all 0.3s;
}
.title::after {
transform: rotate(90deg);
}
.content {
max-height: 0;
overflow: hidden;
}
.toggle:checked + .title + .content {
max-height: 500px;
transition: all 1.5s;
}
.toggle:checked + .title::before {
transform: rotate(90deg) !important;
}
.c-p {
  cursor: pointer;
}

.palt{
  font-feature-settings: "palt";
}
.timeline {
  data-height = ‘500’;
}

.swiper-container [class^="swiper-button-"]::after{
    font-size: 30px!important;
}

.blackback {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.blackback::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.1);
  background-image: radial-gradient(#111 30%, transparent 31%), radial-gradient(#111 30%, transparent 31%);
  background-size: 4px 4px;
  background-position: 0 0, 10px 10px;
}

.ap-button {
  appearance: button!important;
}

pre {
white-space: pre-wrap!important;
}

.font-oblique {
  font-style: oblique;
}

.details {
  transition: .3s;
  overflow: hidden;
  margin-top: -10px;
  padding-bottom: 20px;
  &:last-of-type {
    margin-bottom: 0;
  }
}
.details[open] {
  margin-top: 0;
  padding-bottom: 10px;
}
.details-summary {
  display: block;
  transition: .3s;
  transform: translateY(10px);
  &:hover {
    cursor: pointer;
  }
}
.details-summary::-webkit-details-marker {
  display: none;
}
.details[open] .details-summary {
  transform: translateY(0);
}
.mission_back {
  background-image: linear-gradient(146deg, #a9cbff 1%, #f8faff 22%);
}

/* 初期状態 */
.reveal-text {
  display: inline-block; /* 親がtransformの影響を受けやすくなるのを避ける */
}

/* 文字span */
.reveal-text .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity .6s ease,
    transform .6s cubic-bezier(.2,.8,.2,1);
  transition-delay: calc(var(--i) * 28ms); /* ここでテンポ調整 */
  will-change: opacity, transform;
}

/* 画面内に入ったら表示 */
.reveal-text.is-inview .char {
  opacity: 1;
  transform: translateY(0);
}

/* 空白は見た目を維持 */
.reveal-text .char.space {
  width: .35em; /* お好みで */
}

/* 動きを減らす設定 */
@media (prefers-reduced-motion: reduce){
  .reveal-text .char {
    transition: none;
    opacity: 1;
    transform: none;
  }
}
/* 初期状態 */
[data-reveal]{
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .7s ease,
    transform .7s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}

/* 画面内に入ったら表示 */
[data-reveal].is-inview{
  opacity: 1;
  transform: translateY(0);
}

/* 動きを減らす設定 */
@media (prefers-reduced-motion: reduce){
  [data-reveal]{
    transition: none;
    opacity: 1;
    transform: none;
  }
}


.global-header {
  z-index: 1000;
}

/* nav-item は position: static でOK */
.global-nav .nav-item {
  position: static;
}

/* メガメニュー：画面に対して固定、横幅100％ */
.global-header .mega-menu {
  position: fixed;
  left: 0;
  top: 80px;               /* ← ヘッダーの高さに合わせて調整（例：80px） */
  width: 100%;
  box-sizing: border-box;

  background: #333355;
  padding: 24px 0;         /* 上下だけ。左右は中の .container に任せる */

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 9999;

  max-height: calc(100vh - 80px);  /* 画面下までの高さ制限 */
  overflow-y: auto;

  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}

/* hover で表示 */
.global-nav .nav-item.has-mega:hover > .mega-menu,
.global-nav .nav-item.has-mega:focus-within > .mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* 念のため：切られないように */
.global-nav {
  overflow: visible;
}

/* まずは共通のスタイル：下線用の透明ボーダーを仕込む */
.global-nav .nav-link {
  display: block;
  border-bottom: 3px solid transparent; /* 高さがズレないように最初から確保 */
}

/* メガメニューを開いている間（= li に hover 中）は下線の色を出す */
.global-nav .nav-item.has-mega:hover > .nav-link,
.global-nav .nav-item.has-mega:focus-within > .nav-link {
  border-bottom-color: #333355; /* お好みのカラーに */
}