:root{
  --navy:#0b1a30;
  --navy2:#123058;
  --gold:#f7c14f;
  --orange:#f28c1e;
  --ink:#1b2430;
  --sub:#5f6d7d;
  --line:#e2e7ec;
  --gym:#12386e;
  --este:#e0407c;
  --resv:#0f6b5c;
  --web:#b8873f;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  color:var(--ink);
  background:#fff;
  font-family:"Helvetica Neue",Arial,
    "Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  line-height:1.75;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%;display:block}
a{text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* header */
.site-head{
  position:absolute;top:0;left:0;right:0;z-index:5;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:18px 24px;
}
.logo{color:#fff;line-height:1.2}
.logo b{font-size:24px;letter-spacing:.06em;font-weight:800}
.logo span{
  display:block;font-size:11px;letter-spacing:.28em;
  color:#c3d2e2;
}
.gnav{display:flex;align-items:center;gap:22px}
.gnav a{font-size:13px;color:#e6edf5;font-weight:600}
.btn-head{
  background:var(--orange);color:#fff;border-radius:999px;
  padding:10px 20px;font-size:13px;font-weight:700;
}

/* hero */
.hero{
  position:relative;color:#fff;overflow:hidden;
  background:var(--navy) url("../img/hero.png")
    right center/auto 100% no-repeat;
  min-height:520px;display:flex;align-items:center;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,
    #09182e 0%,#09182e 38%,
    rgba(9,24,46,.85) 52%,rgba(9,24,46,0) 74%);
}
.hero .wrap{position:relative;padding-top:96px;
  padding-bottom:48px}
.hero-lead{
  color:var(--gold);font-size:16px;font-weight:700;
  letter-spacing:.04em;
}
.hero h1{
  font-size:46px;font-weight:800;line-height:1.28;
  margin:10px 0 26px;
}
.hero h1 em{color:var(--gold);font-style:normal}
.feats{
  display:flex;gap:0;margin-bottom:24px;max-width:520px;
}
.feat{
  flex:1;text-align:center;padding:0 8px;
  border-right:1px solid rgba(255,255,255,.25);
}
.feat:last-child{border-right:none}
.feat svg{width:34px;height:34px;stroke:#fff;fill:none;
  stroke-width:1.7;margin:0 auto 8px}
.feat small{display:block;font-size:11px;color:#c3d2e2}
.feat strong{display:block;font-size:15px}
.hero p.desc{font-size:14px;color:#cfdae7}
.btn-cta{
  display:inline-flex;align-items:center;gap:14px;
  background:var(--orange);color:#fff;
  border-radius:999px;padding:16px 34px;
  font-size:17px;font-weight:700;margin-top:24px;
}

/* biz sections */
.biz{position:relative;overflow:hidden}
.biz .inner{
  position:relative;z-index:2;max-width:1080px;
  margin:0 auto;padding:44px 20px;
}
.biz .photo{
  position:absolute;top:0;right:0;bottom:0;width:52%;
  background-size:cover;background-position:center;
}
.biz .photo::before{
  content:"";position:absolute;inset:0;
}
.tag{
  display:inline-block;color:#fff;font-size:12px;
  font-weight:700;border-radius:4px;padding:5px 14px;
}
.biz h2{font-size:28px;margin:14px 0 10px;font-weight:800}
.biz p{font-size:14px;color:var(--sub);max-width:420px}
.icons{display:flex;gap:26px;margin:20px 0 22px}
.icons div{text-align:center;font-size:11px;
  color:var(--sub);width:64px}
.icons svg{display:block;width:28px;height:28px;
  fill:none;stroke-width:1.7;margin:0 auto 4px}
.btn-more{
  display:inline-flex;align-items:center;gap:12px;
  color:#fff;border-radius:999px;padding:12px 30px;
  font-size:14px;font-weight:700;
}
.b-gym{background:#eef3f9}
.b-gym .photo{background-image:url("../img/photo_gym.png")}
.b-gym .photo::before{background:linear-gradient(90deg,
  #eef3f9 0%,rgba(238,243,249,0) 26%)}
.b-gym .tag,.b-gym .btn-more{background:var(--gym)}
.b-gym h2{color:var(--gym)}
.b-gym .icons svg{stroke:var(--gym)}
.b-este{background:#fdeef4}
.b-este .photo{background-image:url("../img/photo_este.png")}
.b-este .photo::before{background:linear-gradient(90deg,
  #fdeef4 0%,rgba(253,238,244,0) 26%)}
.b-este .tag,.b-este .btn-more{background:var(--este)}
.b-este h2{color:var(--este)}
.b-este .icons svg{stroke:var(--este)}
.b-resv{background:#eaf4f1}
.b-resv .photo{background-image:url("../img/photo_salon.png")}
.b-resv .photo::before{background:linear-gradient(90deg,
  #eaf4f1 0%,rgba(234,244,241,0) 26%)}
.b-resv .tag,.b-resv .btn-more{background:var(--resv)}
.b-resv h2{color:var(--resv)}
.b-resv .icons svg{stroke:var(--resv)}
.b-web{background:#fbf3e8}
.b-web .photo{background-image:url("../img/web.jpg")}
.b-web .photo::before{background:linear-gradient(90deg,
  #fbf3e8 0%,rgba(251,243,232,0) 26%)}
.b-web .tag,.b-web .btn-more{background:var(--web)}
.b-web h2{color:var(--web)}
.b-web .icons svg{stroke:var(--web)}

/* trust */
.trust{background:#f4f6f8;padding:44px 0}
.trust .grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  text-align:center;
}
.trust svg{width:40px;height:40px;fill:none;
  stroke:var(--navy2);stroke-width:1.6;margin:0 auto 10px}
.trust h3{font-size:16px;margin-bottom:4px}
.trust p{font-size:12px;color:var(--sub)}

/* contact */
.contact{padding:56px 0;text-align:center}
.contact h2{font-size:24px;margin-bottom:10px}
.contact p{font-size:14px;color:var(--sub)}
.contact .btn-cta{margin-top:22px}

.site-foot{
  background:var(--navy);color:#a9bacd;
  padding:28px 20px;text-align:center;font-size:12px;
}
.site-foot a{color:#d6e2ee;margin:0 10px}

@media(max-width:820px){
  .site-head{padding:14px 16px}
  .gnav{display:none}
  .hero{
    background-position:center center;min-height:0;
  }
  .hero::before{background:linear-gradient(180deg,
    rgba(9,24,46,.72) 0%,rgba(9,24,46,.55) 55%,
    rgba(9,24,46,.35) 100%)}
  .hero .wrap{padding-top:88px;padding-bottom:40px}
  .hero h1{font-size:30px}
  .feats{max-width:none}
  .feat{padding:0 2px}
  .feat small{font-size:10px;white-space:nowrap;letter-spacing:-.03em}
  .feat strong{font-size:13px;white-space:nowrap;letter-spacing:-.03em}
  .btn-cta{width:100%;justify-content:center;font-size:15px}
 
  .biz .photo{
    position:relative;width:100%;height:190px;
  }
 
  .biz .photo::before{background:linear-gradient(180deg,
    rgba(255,255,255,0) 60%,rgba(255,255,255,.15) 100%)}
  .biz .inner{padding:28px 20px}
  .biz h2{font-size:22px}

  .icons{gap:8px;flex-wrap:nowrap}
  .icons div{width:auto;flex:1;font-size:10px;
    line-height:1.4}
  .icons svg{width:26px;height:26px}

  .btn-more{width:100%;justify-content:center}
  .trust .grid{grid-template-columns:repeat(2,1fr)}
}

/* sub pages */
.site-head.solid{position:static;background:var(--navy)}
.page{max-width:820px;margin:0 auto;padding:48px 20px 64px}
.page h1{font-size:26px;border-bottom:2px solid var(--orange);
  padding-bottom:12px}
.page .lead{color:var(--sub);font-size:14px;margin:14px 0 28px}
.page h2{font-size:17px;margin:32px 0 8px}
.page p,.page li{font-size:15px}
.page ul{margin-left:20px}
.page table{width:100%;border-collapse:collapse;font-size:15px}
.page th,.page td{text-align:left;vertical-align:top;
  padding:16px 8px;border-bottom:1px solid var(--line)}
.page th{width:32%;color:var(--sub);font-weight:600;
  white-space:nowrap}
.page a{color:var(--resv)}
.ctbox{background:#f4f6f8;border-radius:8px;padding:22px;
  margin-bottom:16px}
.ctbox h3{font-size:16px;margin-bottom:6px}
.ctbox .val{font-size:20px;font-weight:700;margin:6px 0}
.ctbox .val a{color:var(--ink)}
.ctbox p{font-size:14px;color:var(--sub)}
.btn-line{
  display:inline-block;background:#06c755;color:#fff;
  border-radius:999px;padding:12px 28px;
  font-size:15px;font-weight:700;margin-top:6px;
}
@media(max-width:820px){
  .page th,.page td{display:block;width:100%;border:none;
    padding:4px 0}
  .page th{padding-top:16px}
  .page td{border-bottom:1px solid var(--line);
    padding-bottom:16px}
  .btn-line{display:block;text-align:center}
}

.video{position:relative;padding-top:56.25%;margin:20px 0 8px}
.video iframe{position:absolute;top:0;left:0;
  width:100%;height:100%;border:0;border-radius:8px}