@charset "UTF-8";

/* =========================================================
   Base
========================================================= */
:root {
  --blue: #079fd6;
  --blue-deep: #0075c9;
  --navy: #163245;
  --pale: #edf9ff;
  --white: #fff;
  --border: #dcebf3;
  --text: #25313a;
  --shadow: 0 12px 32px rgba(0, 91, 148, .12);
}
* {box-sizing: border-box;}
html {scroll-behavior: smooth;}
body {margin: 0; color: var(--text); background: #fff; font-family: "Noto Sans JP", sans-serif; line-height: 1.8;}
img {display: block; max-width: 100%;}
a {color: inherit; text-decoration: none;}
button {font: inherit;}

/* =========================================================
   Header
========================================================= */
.site-header {position: fixed; inset: 0 0 auto; z-index: 1000; color: #fff; background: rgba(7, 159, 214, .96); border-bottom: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(10px);}
.site-header__inner {width: min(1460px, calc(100% - 40px)); height: 72px; margin: auto; display: flex; align-items: center; gap: 28px;}
.site-logo {width: 94px; margin-right: auto; filter: brightness(0) invert(1);}
.global-nav {display: flex; align-items: center; gap: 30px; font-size: 14px; font-weight: 600;}
.global-nav a {transition: opacity .25s;}
.global-nav a:hover {opacity: .7;}
.header-guide {padding: 10px 24px; color: var(--blue-deep); background: #fff; border-radius: 999px; font-size: 14px; font-weight: 700;}
.menu-button, .sp-menu {display: none;}
@media (max-width: 980px) {
  .global-nav, .header-guide {display: none;}
  .menu-button {width: 44px; height: 44px; padding: 9px; display: grid; gap: 5px; border: 0; background: transparent; cursor: pointer;}
  .menu-button span {display: block; height: 2px; background: #fff;}
  .sp-menu {padding: 14px 24px 24px; display: none; color: var(--text); background: #fff; border-top: 1px solid var(--border);}
  .sp-menu.is-open {display: grid;}
  .sp-menu a {padding: 13px 4px; border-bottom: 1px solid var(--border); font-weight: 600;}
  .sp-menu__guide {margin-top: 12px; color: #fff; background: var(--blue-deep); border-radius: 8px; text-align: center;}
}

@media (max-width: 680px) {
  .site-header__inner {width: calc(100% - 28px); height: 64px;}
  .site-logo {width: 78px;}
}

/* =========================================================
   Common
========================================================= */
.section {padding: 100px 0;}
.section--pale {background: var(--pale);}
.section--blue {position: relative; overflow: hidden; color: #fff; background: var(--blue);}
.section__inner {width: min(1120px, calc(100% - 40px)); margin: auto;}
.section__inner--narrow {width: min(820px, calc(100% - 40px));}
.section__en {margin: 0 0 4px; color: var(--blue-deep); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-align: center;}
.section__en--white {color: #fff; opacity: .8;}
.section__title {margin: 0; color: var(--navy); font-size: clamp(30px, 4vw, 44px); line-height: 1.35; text-align: center;}
.section__title::after {content: ""; display: block; width: 42px; height: 2px; margin: 22px auto 0; background: var(--blue-deep);}
.section__title--white {color: #fff;}
.section__title--white::after {background: #fff;}
.section__lead {margin: 18px 0 48px; text-align: center;}
.section__lead--white {color: rgba(255, 255, 255, .88);}
.button {min-width: 170px; min-height: 54px; padding: 14px 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-weight: 700; transition: transform .25s, box-shadow .25s;}
.button:hover {transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0, 80, 130, .18);}
.button--primary {color: #fff; background: var(--blue-deep);}
.button--outline {color: var(--blue-deep); background: rgba(255, 255, 255, .88); border: 1px solid var(--blue-deep);}
.button--white {color: var(--blue-deep); background: #fff;}
.button--ghost {color: #fff; background: transparent; border: 2px solid rgba(255, 255, 255, .72);}
.visually-hidden {position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}
.reveal {opacity: 0; transform: translateY(24px); transition: opacity .75s ease, transform .75s ease;}
.reveal.is-visible {opacity: 1; transform: none;}
@media (max-width: 680px) {
  .section {padding: 72px 0;}
  .section__inner {width: min(100% - 28px, 1120px);}
}

/* =========================================================
   Hero
========================================================= */
.hero {position: relative; min-height: 650px; margin-bottom: 0; padding: 118px 0 82px; overflow: hidden; color: #fff; background: #079fd6;}
.hero__inner {position: relative; z-index: 2; width: min(1080px, calc(100% - 40px)); margin: auto; display: grid; grid-template-columns: 1fr .92fr; align-items: center; gap: 72px;}
.hero__copy {padding-left: 24px; transform: translateY(8px);}
.hero__eyebrow {margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .08em;}
.hero__title {margin: 0; color: #fff; font-family: "Noto Sans JP", sans-serif; font-size: clamp(50px, 4.8vw, 68px); font-weight: 900; line-height: 1.24; letter-spacing: -.035em;}
.hero__name {margin: 24px 0 14px; color: #fff; font-size: 20px; font-weight: 700; letter-spacing: .02em;}
.hero__lead {width: 100%; max-width: 374px; margin: 0 0 36px; color: rgba(255, 255, 255, .88); font-size: 15px; font-weight: 500; line-height: 1.75;}
.hero__buttons {margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 20px;}
.hero__buttons .button {min-width: 180px; min-height: 50px; padding: 12px 24px;}
.hero__visual {position: relative; min-height: 470px; padding-top: 48px; display: flex; align-self: stretch; align-items: flex-start; justify-content: center; overflow: visible;}
.hero__package-wrap {position: relative; width: min(292px, 72%); transform: translateY(56px);}
.hero__package-wrap::before {display: none;}
.hero__package {position: relative; z-index: 2; width: 100%; filter: drop-shadow(0 22px 24px rgba(0,74,125,.22)); transform: scale(.95);}
.hero__foam {position: absolute; right: -50px; bottom: -54px; z-index: 4; width: 124px; max-width: none; filter: drop-shadow(0 8px 8px rgba(0, 85, 135, .12));}
.hero__wave {position: absolute; right: -5%; bottom: -1px; left: -5%; z-index: 3; width: 110%; height: 78px; background: #e8f2f9; border-radius: 50% 50% 0 0 / 38% 38% 0 0;}
.hero__bubble {position: absolute; z-index: 1; border: 2px solid rgba(255, 255, 255, .22); border-radius: 50%;}
.hero__bubble--01 {width: 90px; height: 90px; top: 140px; left: 4%;}
.hero__bubble--02 {width: 34px; height: 34px; top: 330px; left: 2%;}
.hero__bubble--03 {width: 54px; height: 54px; bottom: 92px; left: 7%;}
.hero__bubble--04 {width: 74px; height: 74px; top: 390px; left: 50%;}
.hero__bubble--05 {width: 120px; height: 120px; top: 95px; right: 10%;}
.hero__bubble--06 {width: 64px; height: 64px; top: 170px; right: 4%;}
.hero__bubble--07 {width: 76px; height: 76px; right: 6%; bottom: 116px;}
@media (min-width: 901px) {
  .hero {min-height: 690px; padding-bottom: 122px;}
}

@media (max-width: 980px) {
  .hero__inner {grid-template-columns: minmax(360px, .9fr) minmax(420px, 1.1fr); gap: 28px;}
  .hero__copy {padding-left: 0; transform: translateY(6px);}
  .hero__title {font-size: clamp(44px, 6.4vw, 58px); line-height: 1.22;}
}

@media (max-width: 900px) {
  .hero {min-height: auto; padding: 112px 0 94px;}
  .hero__inner {grid-template-columns: 1fr 1fr; gap: 28px;}
  .hero__visual {min-height: 390px; padding-top: 40px;}
  .hero__package-wrap {width: min(264px, 84%);}
  .hero__foam {right: -36px; bottom: -46px; width: 106px;}
}

@media (max-width: 700px) {
  .hero {padding: 102px 0 100px;}
  .hero__inner {display: flex; flex-direction: column;}
  .hero__copy {width: 100%; transform: none;}
  .hero__visual {width: 100%; min-height: 380px; padding-top: 34px;}
  .hero__package-wrap {width: min(255px, 68vw);}
  .hero__wave {height: 54px;}
}

@media (max-width: 680px) {
  .hero__inner {gap: 20px;}
  .hero__copy {text-align: center;}
  .hero__eyebrow {font-size: 11px;}
  .hero__title {font-size: clamp(42px, 12.8vw, 52px); line-height: 1.22;}
  .hero__name {margin-top: 28px; margin-bottom: 12px;}
  .hero__lead {max-width: 360px; margin-right: auto; margin-bottom: 32px; margin-left: auto; line-height: 1.75;}
  .hero__lead br {display: none;}
  .hero__buttons {margin-bottom: 12px; justify-content: center;}
  .hero__buttons .button {min-width: 155px; font-size: 14px;}
  .hero__visual {margin-right: -20px; margin-left: -20px;}
  .hero__bubble--04, .hero__bubble--06, .hero__bubble--07 {display: none;}
}

/* =========================================================
   About
========================================================= */
.about {position: relative; min-height: 385px; margin-top: 0; overflow: hidden; background-color: #e8f2f9; background-image: url("assets/bg_hand_awa.png"); background-repeat: no-repeat; background-position: center top; background-size: 95% auto; border-top: 0;}
.about__inner {position: relative; z-index: 2; width: min(1180px, calc(100% - 40px)); min-height: 385px; margin: auto; display: grid; grid-template-columns: 40% 1fr; align-items: center;}
.about__visual {position: relative; z-index: 1; height: 300px; align-self: end; overflow: visible;}
.about__visual img {position: absolute; top: auto; bottom: -1px; left: calc((100vw - min(1180px, calc(100vw - 40px))) / -2); width: auto; height: calc(100% + 18px); max-width: none; object-fit: contain; object-position: left bottom; transform: none; -webkit-mask-image: linear-gradient(to right, #000 0, #000 82%, transparent 100%); mask-image: linear-gradient(to right, #000 0, #000 82%, transparent 100%);}
.about__content {position: relative; z-index: 2; padding: 45px 38px 48px 44px;}
.about__title {margin: 0 0 27px; color: var(--blue-deep); font-size: clamp(28px, 2.7vw, 38px); font-weight: 500; letter-spacing: .04em; line-height: 1.4; text-align: center;}
.about__title::after {content: ""; display: block; width: 48px; height: 2px; margin: 18px auto 0; background: var(--blue-deep);}
.about__content p {margin: 0 0 7px; color: #1f2930; font-size: 14px; font-weight: 500; line-height: 1.85;}
.about__bubble {display: none;}
@media (min-width:1200px){
  .about {background-position: center -30px;}
  .about__content{padding-top:24px;}
}
@media (max-width: 980px) {
  .about__inner {grid-template-columns: 44% 1fr;}
  .about__content {padding-right: 32px; padding-left: 32px;}
}

@media (max-width: 900px) {
  .about__inner {grid-template-columns: 42% 1fr;}
  .about__visual img {left: -100px; height: calc(100% + 16px);}
  .about__content {padding-right: 10px; padding-left: 28px;}
}

@media (max-width: 700px) {
  .about {min-height: auto; background-position: center top; background-size: auto 100%;}
  .about__inner {width: 100%; min-height: auto; display: flex; flex-direction: column;}
  .about__visual {width: 100%; height: 230px; order: 2;}
  .about__visual img {left: -52px; bottom: -1px; width: auto; height: calc(100% + 12px);}
  .about__content {width: min(100% - 40px, 520px); margin: 0 auto; padding: 34px 0 16px; order: 1;}
  .about__title {margin-bottom: 24px; font-size: 28px;}
}

@media (max-width: 680px) {
  .about__content p {font-size: 14px;}
}
/* =========================================================
   About（Ultra Wide Monitor）
========================================================= */

@media (min-width:1600px){
  .about__content p {padding-left: 3em;}
}
/* =========================================================
   Features
========================================================= */
.features {background: #fff;}
.feature-grid {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;}
.feature-card {min-height: 248px; padding: 30px 22px 26px; display: flex; flex-direction: column; align-items: center; border: 1px solid var(--border); border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(0, 80, 130, .06); text-align: center; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;}
.feature-card:hover {transform: translateY(-4px); border-color: rgba(0, 117, 201, .28); box-shadow: 0 14px 30px rgba(0, 80, 130, .11);}
.feature-card__icon {width: 60px; height: 60px; margin: 0 auto 18px; display: grid; flex: 0 0 auto; place-items: center; color: var(--blue-deep); background: #eaf8ff; border-radius: 50%; font-size: 26px; font-weight: 700; line-height: 1;}
.feature-card h3 {min-height: 50px; margin: 0 0 12px; display: flex; align-items: center; justify-content: center; color: var(--blue-deep); font-size: 17px; font-weight: 700; line-height: 1.5;}
.feature-card p {margin: auto 0 0; color: #4d5b64; font-size: 13px; line-height: 1.8;}
@media (max-width: 980px) {
  .feature-grid {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;}
  .feature-card {min-height: 230px;}
}

@media (max-width: 680px) {
  .feature-grid {grid-template-columns: 1fr; gap: 14px;}
  .feature-card {min-height: auto; padding: 26px 22px 24px;}
  .feature-card__icon {width: 56px; height: 56px; margin-bottom: 16px; font-size: 24px;}
  .feature-card h3 {min-height: auto; margin-bottom: 10px; font-size: 16px;}
}

/* =========================================================
   How to use
========================================================= */
.howto-grid {margin-top: 50px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px;}
.howto-card {position: relative; min-height: 376px; padding: 34px 22px 26px; display: flex; flex-direction: column; align-items: center; border: 1px solid rgba(255, 255, 255, .48); border-radius: 16px; background: rgba(255, 255, 255, .09); box-shadow: 0 10px 24px rgba(0, 56, 105, .10); text-align: center; transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease;}
.howto-card:hover {transform: translateY(-4px); background: rgba(255, 255, 255, .13); box-shadow: 0 16px 30px rgba(0, 56, 105, .16);}
.howto-card__num {position: absolute; top: -19px; left: 20px; width: 42px; height: 42px; display: grid; place-items: center; color: var(--blue-deep); background: #fff; border-radius: 50%; box-shadow: 0 5px 12px rgba(0, 70, 120, .14); font-size: 17px; font-weight: 800; line-height: 1;}
.howto-card img {width: 100%; max-width: 230px; aspect-ratio: 259 / 184; margin: 0 auto 16px; display: block; object-fit: contain;}
.howto-card h3 {height: 54px; margin: 0 0 8px; display: flex; align-items: flex-start; justify-content: center; font-size: 17px; font-weight: 700; line-height: 1.55;}
.howto-card p {margin: 0; color: rgba(255, 255, 255, .88); font-size: 13px; line-height: 1.8;}
.howto-card .howto-card__point {width: 100%; margin-top: 12px; padding: 9px 11px 10px; color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .32); border-radius: 8px; font-size: 12px; line-height: 1.6; text-align: left;}
.howto-card__point span {margin-right: 7px; color: #fff8a8; font-size: 11px; font-weight: 800; letter-spacing: .05em;}
.howto__note {margin: 30px 0 0; color: rgba(255, 255, 255, .78); font-size: 12px; line-height: 1.75; text-align: center;}
@media (max-width: 980px) {
  .howto-grid {grid-template-columns: repeat(2, minmax(0, 1fr));}
  .howto-card {min-height: 354px;}
}

@media (max-width: 680px) {
  .howto-grid {margin-top: 42px; grid-template-columns: 1fr; gap: 34px 14px;}
  .howto-card {min-height: auto; padding: 32px 20px 24px;}
  .howto-card__num {top: -18px; left: 18px; width: 40px; height: 40px; font-size: 16px;}
  .howto-card img {max-width: 250px; margin-bottom: 18px;}
  .howto-card h3 {height: auto; margin-bottom: 10px; font-size: 16px;}
  .howto__note {margin-top: 26px; text-align: left;}
}

/* =========================================================
   Use scenes
========================================================= */
.scene-grid {margin-top: 48px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;}
.scene-card {overflow: hidden; display: flex; flex-direction: column; background: #fff; border: 1px solid #d9e8ef; border-radius: 18px; box-shadow: 0 7px 18px rgba(24, 74, 105, .09); transition: transform .3s ease, box-shadow .3s ease;}
.scene-card:hover {transform: translateY(-4px); box-shadow: 0 12px 24px rgba(24, 74, 105, .14);}
.scene-card__image {position: relative; overflow: hidden; background: #eef9fd;}
.scene-card__image img {width: 100%; height: auto; display: block;}
.scene-card__image span {position: absolute; top: 14px; left: 14px; padding: 6px 14px 7px; color: #fff; background: rgba(55, 172, 210, .92); border-radius: 999px; box-shadow: 0 3px 10px rgba(15, 121, 164, .14); font-size: 12px; font-weight: 800; line-height: 1; letter-spacing: .04em;}
.scene-card__body {min-height: 150px; padding: 22px 22px 24px; display: flex; flex-direction: column;}
.scene-card h3 {margin: 0 0 10px; color: #079bd0; font-size: 19px; line-height: 1.45;}
.scene-card p {margin: 0; color: #315b73; font-size: 13px; line-height: 1.8;}
.scene__note {margin-top: 28px; color: #6f7d86; font-size: 12px; line-height: 1.7; text-align: center;}
@media (max-width: 980px) {
  .scene-grid {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px;}
  .scene-card__body {min-height: 148px; padding: 24px 26px 26px;}
}

@media (max-width: 680px) {
  .scene-grid {margin-top: 38px; grid-template-columns: 1fr; gap: 22px;}
  .scene-card {border-radius: 16px;}
  .scene-card:hover {transform: none;}
  .scene-card__image span {top: 14px; left: 14px; padding: 6px 14px 7px; font-size: 12px;}
  .scene-card__body {min-height: auto; padding: 22px 22px 24px;}
  .scene-card h3 {margin-bottom: 8px; font-size: 19px;}
  .scene-card p {font-size: 14px; line-height: 1.75;}
}

/* =========================================================
   Specifications
========================================================= */
.spec-list {margin-top: 44px; overflow: hidden; background: #fff; border: 1px solid #e6eef4; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 80, 130, .04);}
.spec-list div {display: grid; grid-template-columns: 160px 1fr; border-bottom: 1px solid var(--border);}
.spec-list div:last-child {border-bottom: 0;}
.spec-list dt, .spec-list dd {margin: 0; padding: 18px 22px;}
.spec-list dt {color: var(--blue-deep); background: #f3f9fd; font-weight: 700;}
@media (max-width: 680px) {
  .spec-list div {grid-template-columns: 1fr;}
  .spec-list dt {padding-bottom: 5px;}
  .spec-list dd {padding-top: 5px;}
}

/* =========================================================
   FAQ
========================================================= */
.faq details {margin-top: 14px; background: #fff; border: 1px solid var(--border); border-radius: 14px;}
.faq summary {padding: 22px 24px; color: var(--navy); cursor: pointer; font-weight: 700;}
.faq details p {margin: 0; padding: 4px 24px 22px;}

/* =========================================================
   Purchase
========================================================= */
.purchase {isolation: isolate; background: radial-gradient(circle at 12% 18%, rgba(255, 255, 255, .15) 0 62px, transparent 63px), radial-gradient(circle at 88% 72%, rgba(255, 255, 255, .11) 0 94px, transparent 95px), linear-gradient(135deg, #079fd6 0%, #058dca 100%);}
.purchase::before, .purchase::after {content: ""; position: absolute; z-index: -1; border: 1px solid rgba(255, 255, 255, .24); border-radius: 50%;}
.purchase::before {width: 150px; height: 150px; top: -52px; right: 10%;}
.purchase::after {width: 74px; height: 74px; bottom: 34px; left: 8%;}
.purchase__inner {position: relative; width: min(880px, calc(100% - 40px)); padding: 62px 70px 60px; text-align: center; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .24); border-radius: 24px; box-shadow: 0 22px 50px rgba(0, 79, 132, .18); backdrop-filter: blur(4px);}
.purchase .section__en {margin-bottom: 8px; letter-spacing: .2em;}
.purchase h2 {margin: 0 0 26px; font-size: clamp(34px, 5vw, 52px); line-height: 1.35; letter-spacing: .04em;}
.purchase h2::after {content: ""; display: block; width: 44px; height: 2px; margin: 20px auto 0; background: rgba(255, 255, 255, .82);}
.purchase p {margin: 8px 0; color: rgba(255, 255, 255, .92); font-size: 15px; line-height: 1.9;}
.purchase .button {min-width: 250px; min-height: 58px; margin-top: 28px; padding-inline: 34px; border: 1px solid rgba(255, 255, 255, .7); box-shadow: 0 12px 28px rgba(0, 76, 128, .18);}
.purchase .button:hover {box-shadow: 0 16px 32px rgba(0, 76, 128, .24);}
@media (max-width: 680px) {
  .purchase__inner {width: min(100% - 28px, 680px); padding: 48px 24px 52px; border-radius: 18px;}
  .purchase p {font-size: 14px; text-align: left;}
  .purchase .button {width: 100%; min-width: 0; margin-top: 28px;}
}

/* =========================================================
   Footer / Page top
========================================================= */
.site-footer {padding: 42px 20px; color: #fff; background: #163245; text-align: center;}
.site-footer img {width: 92px; margin: 0 auto 12px; filter: brightness(0) invert(1);}
.site-footer p {margin: 0;}
.site-footer small {opacity: .65;}
.page-top {position: fixed; right: 24px; bottom: 24px; z-index: 500; width: 48px; height: 48px; display: grid; place-items: center; color: #fff; background: var(--blue-deep); border-radius: 50%; box-shadow: var(--shadow); font-size: 22px;}
@media (max-width: 680px) {
  .page-top {right: 14px; bottom: 14px;}
}