@charset "UTF-8";
@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&family=Noto+Sans+JP:wght@300;400;700;900&display=swap);

/* =========================================
	 1. Variables & Global Styles
	 ========================================= */
:root {
  --navy-deep: #070d1e;
  --logo-navy: #0f1d3e;
  --accent-cyan: #e2e8f0;
  --accent-purple: #7000ff;
  --accent-silver: #a0aec0;
  --navy-gradient: linear-gradient(135deg, var(--navy-deep) 0%, var(--logo-navy) 100%);
  --bridge-gradient: linear-gradient(90deg, #00e5ff, var(--accent-purple));
  --glass-bg: rgba(15, 29, 62, 0.4);
  --glass-border: rgba(255, 255, 255, 0.1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  background-color: var(--navy-deep);
  color: #ffffff;
  line-height: 1.8;
  overflow-x: hidden;
}

h1,
h2,
h3,
.en {
  font-family: "Montserrat", sans-serif;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5%;
  position: relative;
  z-index: 10;
}

section {
  padding: 16rem 0;
  position: relative;
}

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

#gFooter {
  background-color: #fff;
  position: relative;
}

/* =========================================
	 ダミーヘッダー・フッター
	 ========================================= */
.dummy-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.dummy-header .dummy-logo {
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  letter-spacing: 0.1em;
}
.dummy-header .dummy-nav {
  color: #888;
  font-size: 1.28rem;
  font-weight: 700;
}

.dummy-footer {
  background: #000;
  padding: 60px 5%;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.dummy-footer .dummy-logo {
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 2.4rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  margin-bottom: 15px;
}
.dummy-footer .dummy-nav {
  color: #888;
  font-size: 1.44rem;
}

/* =========================================
	 The Arch of Light
========================================= */
.arch-container {
  bottom: 0;
  aspect-ratio: 2/1;
  position: fixed;
  left: 0;
  width: 100vw;
  z-index: 0;
  pointer-events: none;
}

/* =========================================
	 Hero Section
	 ========================================= */
.hero {
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 5;
  overflow: hidden;
  padding-top: 70px;
  padding-bottom: 100px;
  box-sizing: border-box;
}
.hero.active .hero-bg-img {
  transform: scale(1);
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero-bg-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0.5;
  filter: grayscale(0.4) contrast(1.1);
  transform: scale(1.1);
  transition: transform 10s ease;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(7, 13, 30, 0.5) 0%, rgba(15, 29, 62, 0.2) 100%), radial-gradient(circle at center, rgba(255, 255, 255, 0.15), transparent 60%);
}

.hero-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.hero-logo-wrapper {
  width: 90%;
  max-width: clamp(280px, 50vh, 480px);
  opacity: 0;
  transform: translateY(20px);
  animation: heroFadeInUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 30px rgba(255, 255, 255, 0.2));
  margin-bottom: clamp(2.4rem, 4vh, 4.8rem);
}

.hero-copy {
  text-align: center;
}

.main-copy {
  font-size: clamp(2rem, 3vw, 3.84rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08em;
  margin-bottom: 1.92rem;
  opacity: 0;
  transform: translateY(20px);
  animation: heroFadeInUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
}

.sub-copy {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1.2rem, 1.2vw, 1.6rem);
  font-weight: 400;
  letter-spacing: 0.2em;
  color: var(--accent-silver);
  opacity: 0;
  transform: translateY(20px);
  animation: heroFadeInUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.9s forwards;
  padding-inline: 1em;
}

@keyframes heroFadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.scroll-indicator {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  animation: indicatorFadeIn 1s ease 1.5s forwards;
}
.scroll-indicator span {
  font-family: "Montserrat", sans-serif;
  font-size: 1.12rem;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 10px;
}
.scroll-indicator .line {
  width: 1px;
  height: 60px;
  background: rgba(255, 255, 255, 0.15);
  position: relative;
  overflow: hidden;
}
.scroll-indicator .line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: var(--accent-cyan);
  animation: scrollDrop 2s ease-in-out infinite;
}

@keyframes scrollDrop {
  0% {
    top: -50%;
  }
  100% {
    top: 100%;
  }
}
@keyframes indicatorFadeIn {
  to {
    opacity: 1;
  }
}
/* =========================================
	 Concept Section
========================================= */
.concept {
  background-color: #f1f1f1;
  color: #1a1a1a;
  padding: 160px 0;
  z-index: 20;
}

.concept-inner {
  background: #f8f9fa;
  border-radius: 20px;
  padding: 9.6rem;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.05);
  text-align: center;
}
.concept-inner .sec-label {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto 3.2rem;
  padding: 0.8rem 3.2rem;
  background: linear-gradient(90deg, var(--logo-navy), var(--accent-purple));
  color: #ffffff;
  border-radius: 50px;
  font-weight: 900;
  letter-spacing: 0.2em;
  box-shadow: 0 10px 20px rgba(112, 0, 255, 0.2);
}
.concept-inner h2 {
  font-size: 4.8rem;
  font-weight: 900;
  margin: 0 auto 64px;
  line-height: 1.4;
  background: linear-gradient(135deg, var(--logo-navy) 0%, var(--accent-purple) 70%, #00e5ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  display: block;
  width: -moz-fit-content;
  width: fit-content;
}
.concept-inner h2::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #00e5ff, var(--accent-purple));
  border-radius: 2px;
  box-shadow: 0 4px 10px rgba(112, 0, 255, 0.3);
}
.concept-inner p {
  font-size: 1.92rem;
  color: #4a5568;
  max-width: 800px;
  margin: 0 auto;
  line-height: 2;
}

/* =========================================
	 Service Lineup Section
	 ========================================= */
.service-section {
  background-color: transparent;
  z-index: 10;
  padding-top: 12.8rem;
}

.service-header {
  text-align: center;
  margin-bottom: 12.8rem;
}
.service-header span {
  color: var(--accent-cyan);
  letter-spacing: 0.3em;
  font-weight: 700;
}
.service-header h2 {
  font-size: 6.4rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: #ffffff;
}

.service-list {
  display: flex;
  flex-direction: column;
  gap: 9.6rem;
}

.service-item {
  display: flex;
  align-items: center;
  gap: 8rem;
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 4.8rem;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
  transition: transform 0.4s ease;
}
.service-item:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.2);
}
.service-item:nth-child(even) {
  flex-direction: row-reverse;
}

.service-img {
  flex: 1;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.service-img img {
  aspect-ratio: 800/533;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.8s ease;
}

.service-item:hover .service-img img {
  transform: scale(1.05);
}

.service-info {
  flex: 1;
}
.service-info h3 {
  font-size: 3.52rem;
  line-height: 1.4;
  margin-bottom: 2.4rem;
  padding-bottom: 1.6rem;
  display: inline-block;
  position: relative;
}
.service-info h3::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #ffffff 0%, var(--accent-silver) 70%, transparent 100%);
  border-radius: 2px;
}
.service-info p {
  color: #e2e8f0;
  margin-bottom: 4rem;
  font-size: 1.76rem;
  line-height: 1.8;
}

.service-num {
  font-size: 6.4rem;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.05);
  line-height: 1;
  margin-bottom: -2.4rem;
  display: block;
  font-family: "Montserrat";
}

a.btn-detail,
.btn-detail {
  display: inline-block;
  padding: 1.6rem 4.8rem;
  background: transparent;
  border: 1px solid var(--accent-cyan);
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.1em;
  border-radius: 50px;
  transition: all 0.3s ease;
}
a.btn-detail:hover,
.btn-detail:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #ffffff;
  box-shadow: 0 10px 20px rgba(255, 255, 255, 0.05);
}

/* =========================================
	 Inquiry / Contact Section
	 ========================================= */
.inquiry {
  background-color: #ffffff;
  padding: 16rem 0;
  position: relative;
  z-index: 20;
  text-align: center;
}

.inquiry-card span.en {
  color: var(--logo-navy);
  font-weight: 900;
  letter-spacing: 0.3em;
  display: block;
  margin-bottom: 2.4rem;
}

.inquiry h2 {
  font-size: 4.8rem;
  font-weight: 900;
  margin-bottom: 3.2rem;
  color: var(--logo-navy);
  line-height: 1.4;
}

.inquiry p {
  font-size: 1.92rem;
  color: #4a5568;
  margin-bottom: 4.8rem;
  line-height: 2;
}

a.btn-main,
.btn-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 2.4rem 8rem;
  background: var(--logo-navy);
  color: #ffffff;
  font-weight: 900;
  letter-spacing: 0.1em;
  font-size: 1.76rem;
  border-radius: 50px;
  box-shadow: 0 20px 40px rgba(15, 29, 62, 0.3);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
a.btn-main::before,
.btn-main::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-25deg);
  animation: btnShine 3s infinite;
}
a.btn-main:hover,
.btn-main:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 60px rgba(15, 29, 62, 0.4);
  background: var(--accent-purple);
}
a.btn-main:hover .btn-arrow,
.btn-main:hover .btn-arrow {
  transform: translateX(5px);
}

@keyframes btnShine {
  0% {
    left: -100%;
  }
  20% {
    left: 200%;
  }
  100% {
    left: 200%;
  }
}
.btn-arrow {
  transition: transform 0.3s ease;
}

/* =========================================
	 FAB
	 ========================================= */
a.fab-btn,
.fab-btn {
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 999;
  background: var(--bridge-gradient);
  color: #fff;
  padding: 1.92rem 4rem;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.1em;
  box-shadow: 0 15px 30px rgba(0, 229, 255, 0.4);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
}
a.fab-btn:hover,
.fab-btn:hover {
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 20px 40px rgba(112, 0, 255, 0.5);
}
a.fab-btn:hover .fab-arrow,
.fab-btn:hover .fab-arrow {
  transform: translateX(5px);
}

.fab-arrow {
  transition: transform 0.3s ease;
}

@media (min-width: 1025px){
  .u-hide-pc {
    display: none;
  }
}

@media (max-width: 1024px) and (min-width: 768px){
  .u-hide-tb {
    display: none;
  }
}

@media screen and (max-width: 1024px){
  .concept {
    padding: 16.6666666667vw 0;
  }
  .concept-inner {
    border-radius: 2.0833333333vw;
    padding: 10vw;
    box-shadow: 0 3.125vw 6.25vw rgba(0, 0, 0, 0.05);
  }
  .concept-inner .sec-label {
    margin: 0 auto 3.3333333333vw;
    padding: 0.8333333333vw 3.3333333333vw;
    border-radius: 5.2083333333vw;
    box-shadow: 0 1.0416666667vw 2.0833333333vw rgba(112, 0, 255, 0.2);
  }
  .concept-inner h2 {
    font-size: 4.1666666667vw;
    margin: 0 auto 6.6666666667vw;
  }
  .concept-inner h2::after {
    bottom: -1.5625vw;
    width: 8.3333333333vw;
    height: 0.4166666667vw;
    border-radius: 0.2083333333vw;
    box-shadow: 0 0.4166666667vw 1.0416666667vw rgba(112, 0, 255, 0.3);
  }
  .concept-inner p {
    font-size: 2vw;
    max-width: 83.3333333333vw;
  }
  .service-section {
    padding-top: 13.3333333333vw;
  }
  .service-header {
    margin-bottom: 6.6666666667vw;
  }
  .service-header h2 {
    font-size: 5.8333333333vw;
  }
  .service-list {
    gap: 8.3333333333vw;
    padding-inline: 8.3333333333vw;
  }
  .service-item {
    gap: 2.5vw;
  }
  .service-item {
    flex-direction: column;
    gap: 4.8rem;
    padding: 3.2rem;
  }
  .service-item:nth-child(even) {
    flex-direction: column;
  }
  .inquiry p {
    font-size: 1.875vw;
    margin-bottom: 5vw;
  }
}

@media (max-width: 767px){
  .u-hide-sp {
    display: none;
  }
}

@media screen and (max-width: 767px){
  .hero-logo-wrapper {
    max-width: 62.5vw;
  }
  .concept {
    padding: 25vw 0;
  }
  .concept-inner {
    border-radius: 3.125vw;
    padding: 10vw 6.25vw;
    box-shadow: 0 4.6875vw 9.375vw rgba(0, 0, 0, 0.05);
  }
  .concept-inner .sec-label {
    margin: 0 auto 5vw;
    padding: 1.25vw 5vw;
    border-radius: 7.8125vw;
    box-shadow: 0 1.5625vw 3.125vw rgba(112, 0, 255, 0.2);
  }
  .concept-inner h2 {
    font-size: 5.3125vw;
    margin: 0 auto 10vw;
  }
  .concept-inner h2::after {
    bottom: -2.34375vw;
    width: 12.5vw;
    height: 0.625vw;
    border-radius: 0.3125vw;
    box-shadow: 0 0.625vw 1.5625vw rgba(112, 0, 255, 0.3);
  }
  .concept-inner p {
    font-size: 3.75vw;
    max-width: none;
  }
  .service-section {
    padding-top: 20vw;
  }
  .service-header {
    margin-bottom: 10vw;
  }
  .service-header h2 {
    font-size: 6.25vw;
  }
  .service-list {
    gap: 6.25vw;
    padding-inline: 0;
  }
  .service-item {
    gap: 3.75vw;
  }
  .service-info h3 {
    font-size: 5.625vw;
  }
  .inquiry h2 {
    font-size: 7.5vw;
  }
  .inquiry p {
    font-size: 3.75vw;
    margin-bottom: 7.5vw;
  }
  a.btn-main,
  .btn-main {
    padding: 1.92rem 4.8rem;
    width: 100%;
  }
  a.fab-btn,
  .fab-btn {
    bottom: 20px;
    right: 20px;
    padding: 1.6rem 2.4rem;
    font-size: 1.44rem;
  }
}

@media screen and (max-height: 750px){
  .hero {
    padding-bottom: 80px;
  }
  .main-copy {
    font-size: clamp(1.92rem, 3vw, 2.88rem);
    margin-bottom: 1.6rem;
  }
  .scroll-indicator {
    bottom: 20px;
  }
  .scroll-indicator .line {
    height: 40px;
  }
  a.fab-btn,
  .fab-btn {
    bottom: 20px;
    right: 20px;
    padding: 1.6rem 2.4rem;
    font-size: 1.44rem;
  }
}
/*# sourceMappingURL=innovation-bridge.css.map */