/*
Theme name: theme
Description: custom theme
Version:1.0
License: GNU General Public License v2 or later
*/
body {
font-family: 'Kozuka Gothic Pr6N', "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
color: #003460;
margin: 0;
padding: 0;
overflow-x: hidden;
background: linear-gradient(6deg,rgb(197, 224, 235) 0%, rgba(255, 255, 255, 1) 56%);
}
.main-content {
display: block;
width: 95%;
max-width: 78.13vw;
margin: 0 auto;
padding: 6vw 0;
background-color: #fff;
}
a:hover{opacity: 50%;}
/*****  HEADER  *****/
#nn-navbar .sp-wrapper,#nn-navbar .pc-wrapper{
transition: all 0.3s ease-in-out;
background-color: #fff;
color: #005EA1;
box-shadow: 1px -1px 9px #152431;
}
.overlay {
 height: 0;
 width: 100%;
 position: fixed;
 z-index: 99;
 top: 0;
 left: 0;
 overflow-x: hidden;
 transition: 0.5s;
}
.overlay-content {
position: relative;
top: 15vw;
width: 100%;
height: 100%;
text-align: center;
margin-top: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 10vw 0;
background-color: #fff;
}
.overlay a {
text-decoration: none;
font-size: 6vw;
color: #003460;
display: block;
width: 90%;
padding: 0 3vw;
margin: 4vw auto 0 auto;
text-align: left;
border-bottom: 1px solid #003460;
border-left: 5px solid #14BBEC;
}
.overlay .closebtn {
position: absolute;
top: 0;
right: 0;
z-index: 99;
background-color: #fff;
width: 9vw;
height: 16vw;
display: flex;
align-items: center;
justify-content: center;
border: 0 !important;
margin: 1vw 0 0 0;
}
.overlay .closebtn img{
width: 8.84vw;
}
#myNav .overlay-content ul{
list-style: none;
padding: 0 8vw;
}
.pc-wrapper {
display: none;
}
.sp-wrapper {
position: fixed;
z-index: 90;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 18.6vw;
background-color: transparent;
}
.sp-wrapper .logo{
width: 30vw;
margin-left: 4.88vw;
}
.sp-wrapper .opmenu img{
width: 8.84vw;
margin-right: 3.02vw;
}
#nn-navbar .info .btn{
display: inline-flex;
justify-content: center;
width: 28.84vw;
height: 7.98vw;
background-color: #0090D9;
border-radius: 0.7vw;
color: #fff;
font-size: 3vw;
font-weight: 500;
text-decoration: none;
align-items: center;
}
#nn-navbar .info img {
margin-left: 6vw;
}
#nn-navbar .info .btn:hover{
background-color: #fff;
color: #003460;
border: 1px solid #003460;
transform: scale(1.05);
}
#nn-navbar .info .btn:hover img{
filter: invert(1);
}
/************  footer   **************/
#nn-footer{
background-color: #003460;
color: #fff;
padding-top: 20vw;
}
#nn-footer .copy{
font-size: 3.26vw;
text-align: center;
border-top: 1px solid #fff;
padding: 2vw 00;
}
#nn-footer .inner{
width: 95%;
display: flex;
justify-content: center;
flex-direction: column;
margin: 0 auto;
}
#nn-footer .inner .company img{
display: block;
width: 44.65vw;
margin: 0 auto;
}
#nn-footer .inner .company p{
font-size: 4.19vw;
margin: 7.44vw 0 11.63vw 0;
}
#nn-footer .inner .sitemap{
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20vw;
}
#nn-footer .inner .sitemap ul{
list-style: none;
margin: 0;
padding: 0;
}
#nn-footer .inner .sitemap a{
display: block;
text-decoration: none;
color: #fff;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
width: 100%;
text-align: center;
font-size: 3.95vw;
padding: 4vw 0;
}
@media (min-width: 1100px) {
/****** HEADER ******/
.sp-wrapper, #myNav {
display: none;
}
#nn-navbar .pc-wrapper{
position: fixed;
z-index: 88;
display: inline-flex;
align-items: center;
width: 100%;
height: 6.77vw;
}
#nn-navbar .pc-wrapper .decorhrd{
position: absolute;
bottom: 0;
right: 0;
z-index: -1;
}
#nn-navbar .pc-wrapper .inner{
width: 78.13vw;
margin: 0 auto;
display: flex;
align-items: center;
}
#nn-navbar .pc-wrapper .logo{
width: 15.42vw;
}
#nn-navbar .pc-wrapper .menu{
width: 100%;
font-weight: 400;
list-style: none;
padding-left: 2vw;
display: flex;
justify-content: space-evenly;
margin: 0 1vw;
}
#nn-navbar .pc-wrapper .menu ul{
display: flex;
padding: 0;
margin: 0;
list-style: none;
justify-content: space-between;
width: 39vw;
}
#nn-navbar .pc-wrapper .menu a{
font-size: 0.89vw;
font-weight: bold;
color: #005EA1;
text-decoration: none;
transition: all 0.5s ease-in-out !important;
border-bottom: 1px solid #003460;
border-left: 4px solid #0090d9;
padding: 0.5vw 1vw;
}
#nn-navbar .pc-wrapper .menu a:hover{
color: #14BBEC;
}
#nn-navbar .info .btn{
width: 8.02vw;
height: 2.6vw;
font-size: 0.89vw;
border-radius: 0.3vw;
margin-right: 17vw;
}
#nn-navbar .info img {
margin-left: 2vw;
}
#nn-navbar .pc-wrapper .logo:hover{
opacity: 50%;
}
#nn-navbar .pc-wrapper .logo, #nn-navbar .pc-wrapper .info .btn, #nn-navbar .pc-wrapper .menu a{
transition: all 0.3s ease-in-out;
}
/********    footer      *********/
#nn-footer {
padding-top: 4.17vw;
}
#nn-footer .inner {
width: 78.13vw;
display: flex;
justify-content: space-between;
flex-direction: row;
margin: 0 auto 5.21vw auto;
align-items: center;
}
#nn-footer .inner .company img {
width: 19.53vw;
margin: 0;
}
#nn-footer .inner .company p {
font-size: 1.04vw;
margin: 0.83vw 0 0 0;
}
#nn-footer .inner .sitemap a {
font-size: 0.89vw;
padding: 1vw 0;
width: 21vw;
}
#nn-footer .inner .sitemap {
margin-bottom: 0;
}
#nn-footer .copy {
width: 78.13vw;
font-size: 0.73vw;
padding: 1vw 0;
margin: 0 auto;
}
#nn-pagebanner .bnrdecor1 {
width: 8vw !important;
top: 8vw !important;
left: 2vw !important;
}
#nn-pagebanner .bnrdecor2 {
width: 14vw !important;
}
}
/********   contact section    ********/
#nnsec-contact{
padding: 20vw 0;
position: relative;
background-size: cover;
background-position: top center;
background-attachment: fixed;
}
#nnsec-contact .inner{
position: relative;
display: block;
width: 85%;
background: rgba(255, 255, 255, 0.80);
margin: 0 auto;
border-radius: 1vw;
text-align: center;
padding: 12vw 4vw;
color: #00579F;
}
#nnsec-contact .inner h2{
margin: 0;
}
#nnsec-contact .inner h1{
color: #0090D9;
font-size: 10vw;
font-family: senobi-gothic, sans-serif;
}
#nnsec-contact .inner a{
text-decoration: none;
background-color: #003460;
color: #fff;
margin: 8vw auto;
display: flex;
width: 56vw;
height: 12vw;
font-size: 4vw;
align-items: center;
justify-content: center;
border-radius: 1vw;
}
@media (min-width: 1100px) {
#nnsec-contact {
padding: 5.63vw 0;
}
#nnsec-contact .inner {
width: 78.13vw;
}
#nnsec-contact .inner {
width: 78.13vw;
padding: 5.21vw 0vw;
}
#nnsec-contact .inner h2 {
font-size: 1.82vw;
}
#nnsec-contact .inner h1 {
font-size: 4.69vw;
margin: 0 0 2vw 0;
}
#nnsec-contact .inner p{
font-size: 1.3vw;
}
#nnsec-contact .inner a {
margin: 2.6vw auto;
width: 12.19vw;
height: 2.6vw;
font-size: 1vw;
border-radius: 0.3vw;
}
}
@media (max-width: 1100px) {
  #nn-footer .inner .sitemap ul, #nn-footer .inner .sitemap .menu {
    width: 100%;
}  
#nnsec-contact .inner h1 { 
display: none;
}
}
/*************  generic page baner   ***************/
#nn-pagebanner{
position: relative;
width: 100%;
height: 50vw;
background-color: #003460;
}
#nn-pagebanner .inner{
width: 85%;
height: 100%;
display: flex;
align-items: center;
margin: 0 auto;
}
#nn-pagebanner span{
position: absolute;
top: 18vw;
right: 0;
color: #105E9B;
font-weight: bolder;
}
#nn-pagebanner .inner h1{
color: #fff;
margin: 0 0 -15vw 0;
position: relative;
display: flex;
flex-direction: column;
}
#nn-pagebanner .inner h1 .bnrdecor{
width: 41vw;
}
#nn-pagebanner .bnrdecor1{
position: absolute;
width: 13vw;
top: 21vw;
left: 1vw;
}
#nn-pagebanner .bnrdecor2{
position: absolute;
width: 23vw;
bottom: 0;
right: 0;
transform: rotateY(180deg);
}
@media (min-width: 1100px) {
#nn-pagebanner {
height: 23vw;
}
#nn-pagebanner .inner {
width: 78.13vw;
}
#nn-pagebanner span {
top: 6vw;
font-size: 4.17vw;
}
#nn-pagebanner .inner h1 {
margin: 0 0 -3vw 0;
font-size: 4.17vw;
}
#nn-pagebanner .inner h1 .bnrdecor{
width: 30vw;
}
}
/***************************************************/
/***************  MAIN CONTENT   *******************/
/***************  INDEX   **************************/
/***************************************************/
#top--banner .svgdcor svg .draw-path {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  fill-opacity: 0; 
  transition: stroke-dashoffset 2s ease-in-out, fill-opacity 1s ease-in 3s;
}
#top--banner .svgdcor svg.start-animation .draw-path {
  stroke-dashoffset: 0 !important;
  fill-opacity: 1 !important;
}
#top--banner .svgdcor svg .fade-fill {
  opacity: 0; 
  transition: opacity 1s ease-in 2s;
}
#top--banner .svgdcor svg.start-animation .fade-fill {
  opacity: 1 !important;
}
#scramble-container {
  display: flex;
  flex-direction: column;
}
.scramble-line {
  display: block;
  white-space: pre; /* Mantiene los espacios exactos */
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#top--banner .inner{
width: 100%;
display: inline-grid;
grid-template-columns: 1fr 1fr;
padding-top: 6vw;
min-height: 39.79vw;
}
#top--banner .inner .sideA{
display: flex;
position: relative;
justify-content: center;
align-items: center;
background-size: cover;
}
#top--banner .inner .sideA .overlay{
display: block;
background-color: rgba(0, 52, 96, 0.55);
width: 100%;
height: 100%;
position: absolute;
z-index: 0;
}
#top--banner .inner .sideA span{
position: relative;
color: #fff;
font-size: 3.65vw;
}
#top--banner .inner .sideB{
background-color: #003460;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#top--banner .inner .sideB .svgdcor{
position: absolute;
z-index: 0;
width: 100%;
bottom: 0;
}
#top--banner .inner .sideB p{
display: block;
position: relative;
color: #fff;
text-align: center;
font-size: 2.6vw;
line-height: 1.5;
margin-bottom: 0;
animation: fadeInUp 0.8s ease-out forwards;
}
#top--banner .inner .sideB span{
font-size: 4.5vw;
font-weight: 800;
letter-spacing: 0.5vw;
}
#top--banner .inner .sideB img{
display: block;
margin: 0 12vw 0 auto;
animation: fadeInUp 0.8s ease-out forwards;
}
#top--mission {
position: relative;
}
#top--mission .inner{
width: 100%;
display: inline-grid;
grid-template-columns: 1fr 1fr;
}
#top--mission .inner .sideA{
position: relative;
display: flex;
justify-content: center;
flex-direction: column;
background-color: #003460;
color: #fff;
padding: 0 2vw 0 10.42vw;
font-size: 1.35vw;
}
#top--mission .inner .sideA .bigger{
font-size: 1.8vw;
margin: 0;
font-weight: 600;
}
#top--mission .inner .sideA img{
position: absolute;
left: 0;
bottom: 0;
width: 20vw;
}
#top--mission .sec-decor{
position: absolute;
z-index: 1;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
top: 50%;
transform: translateY(-50%);
left: 2vw;
row-gap: 2vw;
}
#top--mission .sec-decor span{
transform: rotate(271deg);
}
#top--product {
position: relative;
background-color: #005EA1;
color: #fff;
padding: 4.69vw 0 10.42vw 0;
}
#top--product .inner{
display: block;
width: 78.13vw;
margin: 0 auto;
}
#top--product .sec-decor{
position: absolute;
z-index: 1;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
top: 50%;
transform: translateY(-50%);
left: 2vw;
row-gap: 2vw;
}
#top--product .sec-decor span{
transform: rotate(271deg);
}
#top--product .dcortop{
width: 34.9vw;
}
#top--product .dcorbot{
display: block;
width: 45.57vw;
margin: 0 0 0 auto;
}
#top--product h1{
font-size: 2.6vw;
}
#top--product p{
font-size: 1.3vw;
}
#top--product .grid{
display: inline-grid;
grid-template-columns: 1fr 1fr 1fr;
column-gap: 2.6vw;
margin-top: 3.13vw;
}
#top--product .grid .card{
display: block;
background-color: #fff;
color: #00335e;
padding: 1.04vw;
border-radius: 0.5vw;
font-size: 1.09vw;
box-shadow: 0px 0px 10px #052540b0;
}
#top--product .grid .card .image{
width: 100%;
height: 14.9vw;
background-color: #ccc;
display: flex;
align-items: flex-end;
border-radius: 0.5vw;
background-size: 100%;
background-position: center;
transition: all 0.3s ease-in-out;
}
#top--product .grid .card:hover .image{
background-size: 110%;
}
#top--product .grid .card h3{
background-color: #fff;
padding: 0 1vw;
}
#top--product .grid .card p{
font-size: 1.09vw;
}
@media only screen and (max-width: 1100px){
#top--mission .sec-decor, #top--product .sec-decor{
  display: none;
}
#top--banner .inner {
    display: flex;
    padding-top: 18vw;
    min-height: auto;
    flex-direction: column-reverse;
}
#top--banner .inner .sideB {
    height: 72vw;
}
#top--banner .inner .sideB img {
    margin: 0 23vw 0 auto;
    width: 32vw;
}
#top--banner .inner .sideB p {
    font-size: 4.9vw;
    margin-bottom: 8vw;
}
#top--banner .inner .sideB span {
    font-size: 9.5vw;
}
#top--banner .inner .sideA {
    background-position: center;
    padding: 3vw 0;
}
#top--banner .inner .sideA span {
    font-size: 8.65vw;
    line-height: 1;
}
#top--mission .inner {
    display: flex;
    flex-direction: column;
}
#top--mission .inner .sideA {
    font-size: 3.6vw;
    padding: 5vw 2vw 5vw 10.42vw;
}
#top--mission .inner .sideA .bigger {
    font-size: 4.8vw;
}
#top--product h1 {
    font-size: 5.6vw;
}
#top--product p {
    font-size: 3.6vw;
}
#top--product .grid {
    display: flex;
    row-gap: 2.6vw;
    margin-top: 6.13vw;
    flex-direction: column;
}
#top--product .grid .card {
    padding: 2.04vw;
    border-radius: 1vw;
    font-size: 3.09vw;
    box-shadow: 0px 0px 5px #052540b0;
}
#top--product .grid .card .image {
    width: 100%;
    height: 45.9vw;
    border-radius: 1vw;
}
#top--product .grid .card p {
    font-size: 3.5vw;
}
}
/***************************************************/
/************  COMPANY OVERVIEW   ******************/
/***************************************************/
/* //////// START SECTION nyx05 ///////// */
#nyx05 {
  padding: 7.8125vw 0; /* 150px */
  background-color: #005EA1;
}
#nyx05 .nyx05--decor1{
display: block;
width: 35vw;
margin: 0 0 8vw 10vw;
}
#nyx05 .nyx05--decor2{
display: block;
width: 45vw;
margin: 8vw 10vw 0 auto;
}
#nyx05 .nyx05-inner {
  max-width: 57.2917vw; /* 1100px */
  margin: 0 auto;
  display: flex;
  align-items: stretch;
}
/* Left container */
#nyx05 .nyx05-left {
  width: 6.25vw; /* 120px */
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Vertical text */
#nyx05 .nyx05-vertical-text {
    font-family: "Zen Kurenaido", sans-serif;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.8854vw; /* 17px */
  letter-spacing: 0.25em;
  color: #fff;
  padding: 1.8333vw 0; /* 16px */
}
/* Base rail */
#nyx05 .nyx05-rail {
  width: 0.1042vw; /* 2px */
  background: #fff;
  position: relative;
}
/* Adjust heights as needed */
#nyx05 .nyx05-rail.top {
  height: 5.7292vw; /* 110px */
}
#nyx05 .nyx05-rail.bottom {
  height: 5.7292vw; /* 110px */
}
/* --- TOP cap: ∪ (open upward) --- */
#nyx05 .nyx05-rail.top::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
  bottom: -0.7292vw; /* -14px */
  width: 1.1458vw; /* 22px */
  height: 0.7292vw; /* 14px */
  border: 0.1042vw solid #fff; /* 2px */
  border-top: none;
  border-radius: 0 0 14px 14px; /* keep px */
}
/* --- BOTTOM cap: ∩ (open downward) --- */
#nyx05 .nyx05-rail.bottom::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%) rotate(0deg);
  top: -0.7292vw; /* -14px */
  width: 1.1458vw; /* 22px */
  height: 0.7292vw; /* 14px */
  border: 0.1042vw solid #fff; /* 2px */
  border-top: none;
  border-radius: 0 0 14px 14px; /* keep px */
}
/* Right content */
#nyx05 .nyx05-content {
  flex: 1;
  padding-left: 3.125vw; /* 60px */
  max-width: 45.5729vw; /* 875px */
}
/* Rows */
#nyx05 .nyx05-row {
  display: flex;
  gap: 6.25vw; /* 120px */
  padding: 2.3833vw 0; /* 40px */
  border-top: 2px solid #fff; /* 2px */
}
#nyx05 .nyx05-row:last-child {
  border-bottom: 2px solid #fff;
}
/* Labels */
#nyx05 .nyx05-label {
  font-family: "Senobi Gothic", sans-serif;
  font-size: 1.6667vw; /* 32px */
  color: #fff;
  font-weight: 600;
  line-height: 2.0833vw; /* 40px */
}
/* Values */
#nyx05 .nyx05-value {
  font-size: 1.6667vw; /* 32px */
  color: #fff;
  line-height: 2.0833vw; /* 40px */
}
@media only screen and (max-width: 1100px){
#nyx05 {
  padding: 18.6047vw 0; /* 80px */
}
#nyx05 .nyx05--decor1 {
width: 75vw;
margin: 0 0 8vw 0;
}
#nyx05 .nyx05--decor2 {
width: 75vw;
margin: 8vw 0 0 auto;
}
#nyx05 .nyx05-inner {
  max-width: 83.2558vw; /* 358px */
  flex-direction: column;
}
#nyx05 .nyx05-rail.top {
  display: none;
}
#nyx05 .nyx05-rail.bottom {
  display: none;
}
#nyx05 .nyx05-vertical-text {
  writing-mode: horizontal-tb;
  transform: rotate(0deg);
  font-size: 3.9535vw; /* 17px */
}
#nyx05 .nyx05-left {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: row;
}
#nyx05 .nyx05-content {
  flex: 1;
  padding-left: 0;
  max-width: 100%;
}
#nyx05 .nyx05-row {
  display: flex;
  gap: 13.9535vw; /* 60px */
  padding: 6.9767vw 0; /* 30px */
}
#nyx05 .nyx05-value {
  font-size: 3.9535vw; /* 17px */
  line-height: 9.3023vw; /* 40px */
}
#nyx05 .nyx05-label {
  font-family: "Senobi Gothic", sans-serif;
  font-size: 3.9535vw; /* 17px */
  word-break: keep-all;
  line-height: 9.3023vw; /* 40px */
}
 }
/* //////// END  SECTION nyx05 ///////// */ 
/* //////// START SECTION nyx04 ///////// */
#nyx04{
  padding: 3.125vw 0; /* 60px */
}
/* Layout container */
#nyx04 .nyx04-inner{
  width: 77.2917vw; /* 1484px */
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3.6458vw; /* 70px */
}
/* Left area */
#nyx04 .nyx04-text{
  flex: 1;
  color: #00579F;
}
/* Title styling */
#nyx04 .nyx04-title{
  margin: 0 0 1.1458vw; /* 22px */
  font-size: 2.6042vw; /* 50px */
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.5625vw; /* 30px */
  display: flex;
  align-items: baseline;
  gap: 0.5208vw; /* 10px */
  flex-wrap: wrap;
}
#nyx04 .nyx04-bracket{
  font-weight: 800;
}
#nyx04 .nyx04-sub{
  font-size: 1.5625vw; /* 30px */
  font-weight: 600;
  margin-left: 0.3125vw; /* 6px */
}
/* Lines block */
#nyx04 .nyx04-lines{
  margin-top: 1.875vw; /* 36px */
  font-size: 1.25vw; /* 24px */
  line-height: 2.0833vw; /* 40px */
  letter-spacing: 0;
}
#nyx04 .nyx04-lines p{
  margin: 0.3125vw 0; /* 6px */
}
/* Right image */
#nyx04 .nyx04-image{
  max-width: 32.5521vw; /* 625px */
  flex: 0 0 32.5521vw; /* 625px */
  overflow: hidden;
  box-shadow: 0px 3px 13px  #003460; /* 0px 3px 13px */
}
#nyx04 .nyx04-image img{
  display: block;
  width: 100%;
  height: auto;
}
@media only screen and (max-width: 1100px){
#nyx04 {
  padding: 11.6279vw 0; /* 50px */
}
#nyx04 .nyx04-inner {
  width: 83.2558vw; /* 358px */
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9.3023vw; /* 40px */
  flex-direction: column;
}
#nyx04 .nyx04-title {
   margin: 0 0 4.3023vw;
    font-size: 8.8372vw;
    line-height: 6.9767vw;
    align-items: baseline;
    text-align: center;
    display: block;
}
#nyx04 .nyx04-sub {
  display: block;
  position: relative;
  bottom: 1.1628vw; /* 5px */
  font-size: 3.9535vw; /* 17px */
  font-weight: 600;
  margin-top: 2.3125vw;
}
#nyx04 .nyx04-lines {
  margin-top: 0;
  font-size: 3.9535vw; /* 17px */
  line-height: 9.3023vw; /* 40px */
  letter-spacing: 0;
}
#nyx04 .nyx04-lines p {
  margin: 1.1628vw 0; /* 5px */
}
#nyx04 .nyx04-image {
  max-width: 83.2558vw; /* 358px */
  flex: 0;
}
}
/* //////// END  SECTION nyx04 ///////// */ 
/* //////// START  SECTION nyx03 ///////// */ 
#nyx03{
  padding: 3.125vw 0; /* 60px */
}
#nyx03 .nyx03-inner{
  width: 77.2917vw; /* 1484px */
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 5.2083vw; /* 100px */
  justify-content: center;
}
/* Left media */
#nyx03 .nyx03-media{
  width: 39.0625vw;  /* 750px */
  height: 39.0625vw; /* 750px */
}
#nyx03 .nyx03-media img{
  display: block;
  width: 100%;
  height: auto;
}
/* Right content */
#nyx03 .nyx03-content{
  color: #00579F;
}
/* Blocks spacing (Vision on top, Mission lower) */
#nyx03 .nyx03-block{
  margin-bottom: 7.2917vw; /* 140px */
}
#nyx03 .nyx03-block--vision{
  position: relative;
  right: 8.8542vw; /* 170px */
}
#nyx03 .nyx03-block--mission{
  margin-bottom: 3.125vw; /* 60px */
  margin-top: 0;
}
/* Title style */
#nyx03 .nyx03-title{
  margin: 0 0 1.1458vw; /* 22px */
  font-size: 2.6042vw; /* 50px */
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.5625vw; /* 30px */
  display: flex;
  align-items: baseline;
  gap: 0.5208vw; /* 10px */
  flex-wrap: wrap;
}
#nyx03 .nyx03-bracket{
  font-weight: 800;
}
#nyx03 .nyx03-sub{
  font-size: 1.5625vw; /* 30px */
  font-weight: 600;
  margin-left: 0.3125vw; /* 6px */
}
/* Description */
#nyx03 .nyx03-desc{
  margin-top: 1.875vw; /* 36px */
  font-size: 1.25vw; /* 24px */
  line-height: 2.0833vw; /* 40px */
  letter-spacing: 0;
}
@media only screen and (max-width: 1100px){
#nyx03 {
  padding: 6.9767vw 0; /* 30px */
}
#nyx03 .nyx03-inner {
  width: 83.2558vw; /* 358px */
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 9.3023vw; /* 40px */
  justify-content: center;
  flex-direction: column-reverse;
}
#nyx03 .nyx03-media {
  width: 81.6279vw;  /* 351px */
  height: 81.6279vw; /* 351px */
}
#nyx03 .nyx03-block--vision {
  right: 0;
}
#nyx03 .nyx03-block {
  margin-bottom: 11.6279vw; /* 50px */
  text-align: center;
}
/* Title style */
#nyx03 .nyx03-title{
    margin: 0 0 4.3023vw;
    font-size: 8.8372vw;
    line-height: 6.9767vw;
    align-items: baseline;
    display: block;
}
#nyx03 .nyx03-sub{
  display: block;
  position: relative;
  bottom: 1.1628vw; /* 5px */
  font-size: 3.9535vw; /* 17px */
  font-weight: 600;
  margin-top: 2.3125vw;
}
/* Description */
#nyx03 .nyx03-desc{
  margin-top: 0;
  font-size: 3.9535vw; /* 17px */
  line-height: 9.3023vw; /* 40px */
  letter-spacing: 0;
}
}
/* //////// END  SECTION nyx03 ///////// */ 
/* //////// START  SECTION nyx02 ///////// */ 
#nyx02{
  padding: 3.125vw 0; /* 60px */
}
/* Outer width similar to mock */
#nyx02 .nyx02-inner{
  max-width: 77.2917vw; /* 1484px */
  margin: 0 auto;
}
/* Background image container */
#nyx02 .nyx02-bg{
  position: relative;
  height: 20.3646vw; /* 391px */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
/* White overlay panel */
#nyx02 .nyx02-panel{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 53.375vw; /* 1140px */
  padding: 1.3542vw 3.2292vw; /* 26px 62px */
  background: #FFFFFF 0% 0% no-repeat padding-box;
  opacity: 0.8;
  text-align: left;
}
/* Title */
#nyx02 .nyx02-title{
  margin: 1.1458vw 0;/* 22px */
  font-size: 2.6042vw; /* 50px */
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.5625vw; /* 30px */
  display: flex;
  justify-content: center;
  gap: 0.8208vw; /* 10px */
  flex-wrap: wrap;
  color: #00579F;
}
#nyx02 .nyx02-bracket{
  font-weight: 800;
}
/* Text */
#nyx02 .nyx02-text{
  margin-top: 1.875vw; /* 36px */
  font-size: 1.25vw; /* 24px */
  line-height: 2.0833vw; /* 40px */
  letter-spacing: 0;
  color: #00579F;
}
@media only screen and (max-width: 1100px) {
#nyx02 {
  padding: 6.9767vw 0; /* 30px */
}
/* Reduce container width */
#nyx02 .nyx02-inner {
  width: 83.2558vw; /* 358px */
  max-width: 100%;
}
/* Background area becomes taller */
#nyx02 .nyx02-bg {
  height: auto;
  min-height: 113.4884vw; /* 488px */
}
/* White panel becomes vertical and centered */
#nyx02 .nyx02-panel {
  width: 65.3488vw;     /* 238px */
  max-width: 72.0930vw; /* 310px */
  max-height: 86.2791vw; /* 371px */
  margin: 0 auto;
  padding: 8.3721vw 6.0465vw; /* 36px 26px */
  opacity: 0.8;
}
/* Title scale down */
#nyx02 .nyx02-title {
  margin: 0 0 5.3023vw; /* 40px */
  font-size: 8.8372vw;  /* 38px */
  line-height: 6.9767vw; /* 30px */
  gap: 2.3256vw; /* 10px */
}
/* Text formatting for narrow width */
#nyx02 .nyx02-text {
  margin-top: 0;
  font-size: 3.9535vw; /* 17px */
  line-height: 7.3023vw; /* 30px */
  letter-spacing: 0;
}
}
/* //////// END  SECTION nyx02 ///////// */ 
/* //////// START SECTION nyx01 ///////// */
#nyx01{
  padding: 6.25vw 0; /* 120px */
   overflow: hidden;
}
#nyx01 .nyx01-inner{
  width: 77.2917vw; /* 1484px */
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* -----------------------
   Left side (text)
   ----------------------- */
#nyx01 .nyx01-left{
  color: #00579F;
  z-index: 2;
}
#nyx01 .nyx01-title{
  margin: 0 0 0.625vw; /* 12px */
  font-size: 4.1667vw; /* 80px */
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.5625vw; /* 30px */
  display: flex;
  align-items: baseline;
  gap: 0.7813vw; /* 15px */
}
#nyx01 .nyx01-bracket{
  font-weight: 900;
}
/* Dashed (dotted-like) underline */
#nyx01 .nyx01-dash{
  width: 15.6771vw; /* 301px */
  border-bottom: 0.1563vw dashed #003460; /* 3px */
  margin: 2.1875vw 0 0; /* 42px */
}
/* Highlight line (white strip) */
#nyx01 .nyx01-highlight{
  background: rgba(255,255,255,0.95);
  padding: 0.9375vw 1.4583vw; /* 18px 28px */
  margin: 2.0833vw 0; /* 40px */
}
#nyx01 .nyx01-highlight-text{
  font-size: 2.6042vw; /* 50px */
  font-weight: 800;
  line-height: 1.5625vw; /* 30px */
  color: #00579F;
  letter-spacing: 0;
}
#nyx01 .nyx01-desc{
  margin: 0;
  font-size: 1.3021vw; /* 25px */
  line-height: 2.0833vw; /* 40px */
  letter-spacing: 0;
}
/* -----------------------
   Right side (deck)
   ----------------------- */
#nyx01 .swiper {
    position: relative;
    right: 5.2083vw;
    width: 33.0833vw;
    height: 20.7083vw;
    margin: 0;
    overflow: visible;
}
/* Rotate the whole deck to look "semi-horizontal" like the mock */
#nyx01 .mySwiper {
  transform: rotate(10deg);
  transform-origin: center;
}
#nyx01 .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.9375vw; /* 18px */
  font-size: 1.1458vw; /* 22px */
  font-weight: bold;
  color: #fff;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media only screen and (max-width: 1100px){
#nyx01{
  padding: 12.3023vw 0; /* 40px */
  overflow: hidden;
}
#nyx01 .nyx01-inner{
  width: 83.2558vw; /* 358px */
  padding: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 13.9535vw; /* 60px */
  position: relative;
}
#nyx01 .nyx01-left{
  width: 100%;
  text-align: center;
}
#nyx01 .nyx01-title{
    font-size: 8.8372vw;
    line-height: 3.2558vw;
    gap: 2.3256vw;
    margin: 0 0 2.3256vw;
    justify-content: center;
}
#nyx01 .nyx01-dash{
    width: 33.7209vw;
    border-bottom: 0.6977vw dashed #003460;
    margin: 5.5814vw auto;
}
#nyx01 .nyx01-highlight{
  padding: 2.3256vw 4.6512vw; /* 10px 20px */
  margin: 5.1163vw 0; /* 22px */
}
#nyx01 .nyx01-highlight-text{
  font-size: 4.4186vw; /* 19px */
  line-height: 3.2558vw; /* 14px */
}
#nyx01 .nyx01-desc{
  font-size: 3.9535vw; /* 17px */
  line-height: 7.2093vw; /* 31px */
}
#nyx01 .swiper{
  position: relative;
  right: -10.3256vw; /* -10px */
  width: 100%;
  max-width: 67.4419vw; /* 290px */
  height: 46.5116vw; /* 200px */
  margin: 0;
  overflow: visible;
}
#nyx01 .mySwiper{
  transform: rotate(10deg);
  transform-origin: center;
}
#nyx01 .swiper-slide{
  border-radius: 3.7209vw; /* 16px */
}
}
/* //////// END  SECTION nyx01 ///////// */ 
/* //////// START SECTION nyx0-navi ///////// */
#nyx-navi{
  padding: 10vw 0 3.125vw 0; /* 60px */
}
#nyx-navi .nyx-navi-inner{
  width: 77.1354vw; /* 1481px */
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
  gap: 3.125vw; /* 60px */
}
/* Links */
#nyx-navi a{
  position: relative;
  font-size: 0.8854vw; /* 17px */
  line-height: 1.3542vw; /* 26px */
  font-weight: 800;
  color: #0090D9;
  text-decoration: none;
  letter-spacing: 0;
  padding-bottom: 0.3125vw; /* 6px */
}
/* Slash styling */
#nyx-navi a span{
  margin-left: 0.2083vw; /* 4px */
}
/* Underline */
#nyx-navi a::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.1042vw; /* 2px */
  background-color: #0090D9;
}
/* Hover */
#nyx-navi a:hover{
  opacity: 0.75;
  color: #14BBEC;
}
@media only screen and (max-width: 1100px){
#nyx-navi{
  padding: 25vw  0 11vw 0; /* 35px */
}
#nyx-navi .nyx-navi-inner{
  width: 83.2558vw; /* 358px */
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 5.1163vw;    /* 22px */
  column-gap: 5.5814vw; /* 24px */
  justify-items: center;
}
#nyx-navi a{
  font-size: 3.9535vw; /* 17px */
  line-height: 6.0465vw; /* 26px */
  padding-bottom: 1.3953vw; /* 6px */
  text-align: center;
}
/* Keep underline proportional */
#nyx-navi a::after{
  height: 0.4651vw; /* 2px */
}
}
/***************************************************/
/************  PRIVACY POLICY   ********************/
/***************************************************/
#nnpolicy{ 
    width: 100vw;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background: transparent linear-gradient(195deg, #FFFFFF 0%, #DDF2FB 100%) 0% 0% no-repeat padding-box;
}
#nnpolicy .policy-content {
    max-width: 78.13vw;
    margin: 0 auto;
    padding: 0 11.35vw 6vw 11.35vw;
    background: transparent linear-gradient(195deg, #FFFFFF 0%, #DDF2FB 100%) 0% 0% no-repeat padding-box;
}
#nnpolicy .policy-intro {
    text-align: justify;
    margin-bottom: 3.65vw;
    margin-top: 9.22vw;
    font-size: 1.82vw;
    color: #0090D9;
    font: normal normal 500 1.82vw/2.60vw 'Senobi Gothic', sans-serif;
}
#nnpolicy .policy-section {
    margin-bottom: 3.65vw;
}
#nnpolicy .policy-title {
    font: normal normal normal 1.82vw/1.56vw 'Hiragino Kaku Gothic Pro', sans-serif;
    text-align: justify;
    margin-bottom: 1.56vw;
    color: #00579F;
    font-weight: 500;
}
#nnpolicy .policy-text {
    text-align: justify;
    font: normal normal normal 1.30vw/2.08vw 'Hiragino Kaku Gothic Pro', sans-serif;
    color: #00579F;
}
#nnpolicy .policy-list {
    font-size: 1.30vw;
    color: #00579F;
}
#nnpolicy .policy-contact-title {
    margin-bottom: 1.56vw;
    font-weight: 500;
    color: #00579F;
    font: normal normal normal 1.82vw/1.56vw 'Hiragino Kaku Gothic Pro', sans-serif;
}
#nnpolicy .policy-contact {
    text-align: justify;
    font-size: 1.30vw;
    color: #00579F;
}
@media screen and (max-width: 1100px) {
    #nnpolicy .policy-intro {
        font-size: 3.5vw;
        line-height: 5vw;
    }
    #nnpolicy .policy-title {
        font-size: 3.5vw;
        line-height: 3vw;
    }
    #nnpolicy .policy-text,
    #nnpolicy .policy-list,
    #nnpolicy .policy-contact {
        font-size: 2.5vw;
        line-height: 4vw;
    }
    #nnpolicy .policy-contact-title {
        font-size: 3.5vw;
        line-height: 3vw;
    }
}
/***************************************************/
/************  CONTACT US   ************************/
/***************************************************/
#nncontact .inner{
display: block;
width: 78.13vw;
margin: 0 auto;
}
#nncontact .contact-text{
    width: 76vw;
}
#nncontact .contact-subtitle{
    font-size: 1.82vw;     /* 35px */
    color: #00579F;
    margin-bottom: 1.04vw; /* 20px */
    margin-top: 9.11vw;    /* 175px */
}
#nncontact .contact-parragraph{
    font-size: 1.30vw;     /* 25px */
    color: #00579F;
    margin-bottom: 5.42vw; /* 104px */
}
#nncontact .contact-form-map-wrapper{
    display: flex;
    flex-direction: row;
    gap: 5.68vw; /* 109px */
}
#nncontact .contact-form {
    width: 39.06vw; /* 750px */
    font-size: 1.35vw; /* 26px */
    color: #00579F;
    display: flex;
    flex-direction: column;
}
#nncontact .contact-label {
    margin-bottom: 1.04vw; /* 20px */
    width: 39.06vw;        /* 750px */
    height: 3.13vw;       /* 60px */
    margin-top: 1.04vw;   /* 20px */
    font-size: 1.5vw;
}
#nncontact .contact-textarea {
    margin-bottom: 2.08vw; /* 40px */
    width: 39.06vw;        /* 750px */
    height: 16.98vw;       /* 326px */
    margin-top: 1.04vw;    /* 20px */
    font-size: 1.5vw;
}
#nncontact .contact-btn {
    width: 12.19vw; /* 234px */
    height: 2.60vw; /* 50px */
    background-color: #003460;
    color: #FFFFFF;
}
#nncontact .contact-map{
    width: 32.55vw;      
    aspect-ratio: 625 / 846;
    position: relative;
}
#nncontact .contact-map iframe{
    width: 100%;
    height: 100%;
    border: 0;
}
#nn-footer-text{
    color: #fff;
    background-color: #005EA1;
    font-size: 1.82vw;      /* 35px / 1920px */
    text-align: center;
    margin-top: 9.11vw;     /* 175px / 1920px */
    padding: 8vw 0;
}
#nn-footer-text .inner{
max-width: 75vw;
margin: 0 auto;
}
#nn-footer-text .nyx05--decor1{
display: block;
width: 35vw;
margin: 0 0 8vw 10vw;
}
#nn-footer-text .nyx05--decor2{
display: block;
width: 45vw;
margin: 8vw 10vw 0 auto;
}
@media screen and (max-width: 1100px) {
  #nncontact .inner{
    width: 95%;
    padding-bottom: 10vw;
  }
  #nncontact .contact-form-map-wrapper{
      flex-direction: column;
      align-items: center;
      gap: 6vw;
  }
  #nncontact .contact-form,
  #nncontact .contact-map{
      width: 78vw;
      height: auto;
  }
  #nncontact .contact-label,
  #nncontact .contact-textarea{
      width: 75vw;
  }
  #nncontact .contact-btn{
      width: 60vw;
      height: 10vw;
      font-size: 5vw;
  }
  #nncontact .contact-subtitle {
      font-size: 3.5vw;
      margin-top: 6vw;
      margin-bottom: 3vw;
  }
  #nncontact .contact-parragraph {
      font-size: 2.8vw;
      margin-bottom: 6vw;
  }
  #nncontact .contact-form {
      font-size: 4vw;
  }
  #nncontact .contact-label,
  #nncontact .contact-textarea {
      font-size: 4vw;
  }
  #nn-footer-text {
    font-size: 3.9vw;
    padding: 15vw 0;
  }
  #nn-footer-text .nyx05--decor1 {
  width: 75vw;
  margin: 0 0 8vw 0;
  }
  #nn-footer-text .nyx05--decor2 {
  width: 75vw;
  margin: 8vw 0 0 auto;
  }
}
/***************************************************/
/************  PRESIDENT´S MESSAGE   ***************/
/***************************************************/
/* ---  BASE (PC 1400px) --- */
#president-message, .nyx-section .nyx04-text { color: #00579F; }

#president-message { padding: 5vw 0; }

#president-message .message-container, .message-footer {
    display: flex; flex-direction: column; align-items: center; text-align: center;
}

#president-message .page-title { font-size: 2.14vw; font-weight: 800; margin-bottom: 2vw; }

#president-message .page-txt, .footer-light { font-size: 1.28vw; line-height: 1.8; }
#president-message .page-txt { max-width: 80%; }

.nyx-section { padding: 4vw 0; }
.nyx-section .nyx04-inner {
    width: 95%; max-width: 1200px; margin: 0 auto;
    display: flex; align-items: center; gap: 5vw;
}

.nyx-section.is-reverse .nyx04-inner { flex-direction: row-reverse; }

.nyx-section .nyx04-text { flex: 1; }
.nyx-section .section-sub-title { font-size: 1.57vw; margin-bottom: 1.5vw; line-height: 1.4; }
.nyx-section .nyx04-lines { font-size: 1.14vw; line-height: 1.7; }

.nyx-section .nyx04-image { flex: 0 0 20vw;}
.nyx-section .nyx04-image img { width: 100%; display: block; }

.message-footer { margin-top: 5vw; padding: 0 5vw; }
.footer-bold { font-weight: 800; font-size: 1.42vw; margin-bottom: 1vw; }

/* --- RESPONSIVE (Breakpoint 1100px / Mobile 430px) --- */
@media (max-width: 1100px) {
      #president-message{
    max-width: 100%;
  }
        #president-message .page-title {     font-size: 4.2vw;
    padding: 0 5vw;
    line-height: 1.5;
    margin-bottom: 5vw; }
    
    #president-message .page-txt, .nyx-section .nyx04-lines, .footer-light { font-size: 3.7vw; }
    #president-message .page-txt { padding: 0 8vw; }

    .nyx-section .nyx04-inner { flex-direction: column !important; width: 90%; gap: 8vw; }
    .nyx-section .section-sub-title { font-size: 4vw; }
    .nyx-section .nyx04-image { flex: 0 0 auto; width: 100%; }

    .footer-bold { font-size: 4.2vw; }
}
/* --- Popup contact --- */
.popup-floating {
    position: fixed;
    /* Ubicación en el centro de la pantalla */
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
    
    z-index: 9999;
    /* Medidas en vw */
    width: 70vw; 
    
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2); /* Sombra alrededor */
    border-radius: 8px;
    overflow: hidden;
    
    /* Animación desde abajo hacia el centro */
    animation: slideUpCenter 0.5s ease-out forwards;
    border-left: 0.8vw solid #ccc; /* Grosor de línea en vw */
}

.popup-floating.success { border-left-color: #27ae60; }
.popup-floating.error { border-left-color: #e74c3c; }

.popup-content {
    display: flex;
    align-items: center;
    padding: 3vw 4vw; /* Espaciado interno en vw */
}

.popup-icon {
    font-size: 5vw; /* Icono proporcional */
    margin-right: 3vw;
    font-weight: bold;
}

.success .popup-icon { color: #27ae60; }
.error .popup-icon { color: #e74c3c; }

.popup-text strong {
    display: block;
    font-size: 1.8vw;
    color: #333;
    margin-bottom: 0.5vw;
}

.popup-text p {
    margin: 0;
    font-size: 1.5vw;
    color: #666;
    line-height: 1.4;
}

.close-popup {
    background: none;
    border: none;
    font-size: 5vw;
    color: #999;
    cursor: pointer;
    margin-left: auto;
    padding-left: 1vw;
    margin-top: -8vw;
}

/* Animación: inicia abajo de la pantalla y termina en el centro */
@keyframes slideUpCenter {
    from { 
        transform: translate(-50%, 100vh); 
        opacity: 0;
    }
    to { 
        transform: translate(-50%, 50%); 
        opacity: 1;
    }
}