:root{
  --blue:#1598bf;
  --deep:#0b6f8a;
  --paper:#fbfaf7;
  --soft:#eef5f6;
  --ink:#302e2b;
  --muted:#77716b;
  --line:rgba(48,46,43,.15);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",Arial,sans-serif;
}

img{display:block;width:100%}
a{color:inherit}

h1,h2,h3,p{margin-top:0}

h1,h2{
  margin-bottom:0;
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.04em;
}

h1{font-size:clamp(44px,5.8vw,78px)}
h2{font-size:clamp(38px,5vw,66px)}

p{line-height:1.9}


/* HEADER */

.site-header{
  position:fixed;
  inset:0 0 auto;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 22px;
  color:var(--ink);
  background:rgba(251,250,247,.96);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(21,152,191,.14);
  transition:.25s ease;
}

.site-header.scrolled{
  color:var(--ink);
  background:rgba(251,250,247,.98);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(21,152,191,.18);
  box-shadow:0 8px 24px rgba(8,34,43,.05);
}

.brand{
  display:block;
  width:clamp(210px,25vw,360px);
  text-decoration:none;
}

.brand-logo{
  width:100%;
  height:auto;
  max-height:52px;
  object-fit:contain;
  object-position:left center;
}

.site-header nav{
  display:flex;
  gap:21px;
}

.site-header nav a{
  position:relative;
  font-size:11px;
  font-weight:800;
  text-decoration:none;
}

.site-header nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:-4px;
  height:1px;
  background:var(--blue);
  transition:right .22s ease;
}

.site-header nav a:hover::after{
  right:0;
}


/* HERO */

.hero{
  position:relative;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  color:#fff;
  background:#193d49;
}

.hero-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:68% 23%;
}

.hero-shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      90deg,
      rgba(6,16,20,.70),
      rgba(6,16,20,.38) 38%,
      rgba(6,16,20,.05) 73%
    ),
    linear-gradient(
      0deg,
      rgba(6,16,20,.35),
      transparent 42%
    );
}

.hero-copy{
  position:relative;
  z-index:2;
  width:min(760px,72vw);
  padding:0 7vw 80px;
}

.hero-categories{
  margin:22px 0 8px;
  font-size:clamp(17px,1.7vw,24px);
  font-weight:800;
}

.hero-description{
  max-width:650px;
  margin-bottom:0;
  color:rgba(255,255,255,.88);
  font-size:15px;
}


/* QUICK LINKS */

.quick-links{
  position:relative;
  z-index:5;
  width:min(1080px,calc(100% - 40px));
  margin:-44px auto 0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  background:#fff;
  box-shadow:0 14px 45px rgba(0,0,0,.08);
  border-top:3px solid var(--blue);
}

.quick-links a{
  position:relative;
  min-height:112px;
  padding:23px 50px 22px 26px;
  border-right:1px solid var(--line);
  text-decoration:none;
  transition:background .2s ease;
}

.quick-links a:last-child{border-right:0}

.quick-links a:hover{
  background:#f5fbfc;
}

.quick-links a::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:transparent;
  transition:background .2s ease;
}

.quick-links a:hover::before{
  background:var(--blue);
}

.quick-links span{
  display:block;
  margin-bottom:8px;
  color:var(--blue);
  font-size:11px;
  font-weight:800;
}

.quick-links strong{
  font-size:16px;
  line-height:1.5;
}

.quick-links i{
  position:absolute;
  right:24px;
  top:50%;
  transform:translateY(-50%);
  font-style:normal;
  font-size:20px;
  color:var(--blue);
}


/* COMMON */

.section{
  padding:clamp(95px,10vw,150px) 8vw;
}

.section-heading h2,
.intro-section h2,
.feature-heading h2{
  position:relative;
}

.section-heading h2::after,
.intro-section h2::after,
.feature-heading h2::after{
  content:"";
  display:block;
  width:72px;
  height:3px;
  margin:18px auto 0;
  background:var(--blue);
}

.section-heading{
  max-width:760px;
  margin-bottom:56px;
}

.section-heading>p,
.intro-lead,
.feature-heading>p{
  color:var(--muted);
  font-size:15px;
}


/* INTRO */

.intro-section{
  text-align:center;
}

.intro-section h2{
  font-size:clamp(40px,5.2vw,70px);
}

.intro-lead{
  max-width:680px;
  margin:26px auto 0;
}


/* PHOTO STRIPS */

.photo-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:64px;
}

.photo-strip figure{
  margin:0;
  aspect-ratio:4/3;
  overflow:hidden;
}

.photo-strip img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}

.photo-strip figure:hover img{
  transform:scale(1.025);
}

.photo-strip.wide figure{
  aspect-ratio:1.15/1;
}


/* FEATURE */

.feature-section{
  text-align:center;
}

.feature-heading{
  max-width:820px;
  margin:0 auto;
}

.feature-heading h2{
  font-size:clamp(40px,5.2vw,70px);
}

.feature-heading>p{
  max-width:680px;
  margin:25px auto 0;
}

.soft-bg{
  background:var(--soft);
}


/* CHECK IN STEPS */

.checkin-steps{
  width:min(980px,100%);
  margin:62px auto 0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(21,152,191,.20);
  border-bottom:1px solid rgba(21,152,191,.20);
  background:rgba(255,255,255,.52);
}

.checkin-steps article{
  min-height:200px;
  padding:24px 24px 27px;
  text-align:left;
  border-right:1px solid rgba(21,152,191,.16);
}

.checkin-steps article:last-child{
  border-right:0;
}

.checkin-steps span{
  display:block;
  margin-bottom:18px;
  color:var(--blue);
  font-size:12px;
  font-weight:900;
}

.checkin-steps h3{
  margin-bottom:10px;
  font-size:21px;
}

.checkin-steps p{
  margin-bottom:0;
  color:var(--muted);
  font-size:13px;
}

.step-thumb{
  width:100%;
  margin:0 0 18px;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:4px;
  background:#dbeff4;
}

.step-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}


/* ROOMS */

.rooms-section{
  text-align:center;
}

.rooms-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.room-card{
  text-align:left;
}

.room-card figure{
  margin:0 0 25px;
  aspect-ratio:4/3;
  overflow:hidden;
}

.room-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}

.room-card:hover img{
  transform:scale(1.025);
}

.room-card h3{
  margin-bottom:9px;
  font-size:34px;
  color:var(--blue);
}

.room-card p{
  max-width:500px;
  margin-bottom:0;
  color:var(--muted);
}


/* FACILITY */

.info-section{
  background:#f0ede7;
}

.facility-photos{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:10px;
  margin-bottom:70px;
}

.facility-photos figure{
  margin:0;
  min-height:240px;
  overflow:hidden;
}

.facility-photo-main{
  grid-row:1 / 3;
}

.facility-photos img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.info-list{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(21,152,191,.18);
  border-bottom:1px solid rgba(21,152,191,.18);
}

.info-list article{
  min-height:190px;
  padding:27px 20px;
  border-right:1px solid var(--line);
}

.info-list article:last-child{
  border-right:0;
}

.info-list span{
  display:block;
  margin-bottom:42px;
  color:var(--blue);
  font-size:10px;
  font-weight:900;
}

.info-list h3{
  margin-bottom:9px;
  font-size:19px;
}

.info-list p{
  margin-bottom:0;
  color:var(--muted);
  font-size:12px;
}


/* FINAL */

.final-section{
  min-height:70vh;
  display:flex;
  align-items:center;
  padding:100px 8vw;
  background:var(--deep);
  color:#fff;
}

.final-copy{
  width:min(900px,100%);
}

.final-copy>p{
  margin-top:25px;
  color:rgba(255,255,255,.75);
}

.buttons{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:40px;
}

.buttons a{
  padding:14px 22px;
  border:1px solid rgba(255,255,255,.5);
  border-radius:999px;
  text-decoration:none;
  font-size:13px;
  font-weight:800;
}

.buttons .primary{
  background:#fff;
  color:var(--blue);
  border-color:#fff;
}


/* FOOTER */

footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:26px 8vw;
  background:var(--paper);
  border-top:1px solid rgba(21,152,191,.12);
  font-size:8px;
  font-weight:800;
}

footer img{
  width:min(320px,60vw);
  height:auto;
}


/* REVEAL */

.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s ease,transform .7s ease;
}

.reveal.is-visible{
  opacity:1;
  transform:none;
}


/* TABLET */

@media(max-width:900px){
  .info-list{
    grid-template-columns:1fr 1fr;
  }

  .info-list article:nth-child(2){
    border-right:0;
  }

  .info-list article:nth-child(3),
  .info-list article:nth-child(4){
    border-top:1px solid var(--line);
  }
}


/* MOBILE */

@media(max-width:680px){

  .site-header{
    padding:11px 13px;
  }

  .brand{
    width:170px;
  }

  .site-header nav{
    gap:9px;
  }

  .site-header nav a{
    font-size:9px;
  }

  .hero{
    min-height:88svh;
  }

  .hero-image{
    object-position:69% 23%;
  }

  .hero-copy{
    width:100%;
    padding:0 18px 58px;
  }

  h1{
    font-size:clamp(38px,10.4vw,52px);
  }

  .hero-categories{
    margin-top:17px;
    font-size:17px;
  }

  .hero-description{
    max-width:94%;
    font-size:14px;
  }

  .hero-description br{
    display:none;
  }

  .quick-links{
    width:calc(100% - 28px);
    margin-top:-30px;
    grid-template-columns:1fr;
  }

  .quick-links a{
    min-height:auto;
    padding:16px 46px 16px 18px;
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .quick-links a:last-child{
    border-bottom:0;
  }

  .quick-links span{
    margin-bottom:4px;
    font-size:10px;
  }

  .quick-links strong{
    font-size:14px;
  }

  .section{
    padding:82px 18px;
  }

  .intro-section h2,
  .feature-heading h2{
    font-size:36px;
  }

  .photo-strip{
    grid-template-columns:1fr;
    margin-top:42px;
  }

  .photo-strip figure,
  .photo-strip.wide figure{
    aspect-ratio:4/3;
  }

  .checkin-steps{
    grid-template-columns:1fr;
    margin-top:45px;
  }

  .checkin-steps article{
    min-height:auto;
    padding:22px 0;
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .checkin-steps article:last-child{
    border-bottom:0;
  }

  .checkin-steps span{
    margin-bottom:15px;
  }

  .rooms-grid{
    grid-template-columns:1fr;
    gap:55px;
  }

  .facility-photos{
    grid-template-columns:1fr 1fr;
    grid-template-rows:230px 150px;
    margin-bottom:52px;
  }

  .facility-photo-main{
    grid-column:1 / 3;
    grid-row:1;
  }

  .info-list{
    grid-template-columns:1fr;
  }

  .info-list article,
  .info-list article:nth-child(2),
  .info-list article:nth-child(3),
  .info-list article:nth-child(4){
    min-height:auto;
    padding:22px 0;
    border-right:0;
    border-top:1px solid var(--line);
  }

  .info-list article:first-child{
    border-top:0;
  }

  .info-list span{
    margin-bottom:18px;
  }

  .final-section{
    min-height:auto;
    padding:88px 18px;
  }

  .buttons{
    display:grid;
  }

  .buttons a{
    text-align:center;
  }

  footer{
    flex-direction:column;
    align-items:flex-start;
    gap:15px;
    padding:24px 18px;
  }
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
}


.section-heading,
.feature-heading,
.intro-section{
  position:relative;
}

@media(max-width:680px){
  .section-heading h2::after,
  .intro-section h2::after,
  .feature-heading h2::after{
    width:56px;
    margin-top:14px;
  }

  .checkin-steps article{
    padding:18px 0 22px;
  }

  .step-thumb{
    margin-bottom:14px;
  }
}


/* =========================================================
   V19 — booking / verified facility info
========================================================= */

.recommend-section{
  background:#f7fbfc;
}

.recommend-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(21,152,191,.18);
  border-bottom:1px solid rgba(21,152,191,.18);
}

.recommend-grid article{
  min-height:170px;
  padding:26px 22px;
  border-right:1px solid rgba(21,152,191,.14);
}

.recommend-grid article:last-child{
  border-right:0;
}

.recommend-grid span{
  display:block;
  margin-bottom:38px;
  color:var(--blue);
  font-size:10px;
  font-weight:900;
}

.recommend-grid p{
  margin:0;
  font-size:16px;
  font-weight:800;
  line-height:1.6;
}

/* check-in step images stay compact */
.checkin-steps .step-thumb{
  aspect-ratio:16/10;
}

/* keep facility copy readable with longer factual descriptions */
.info-list p{
  line-height:1.7;
}

/* booking buttons: highlight Airbnb, keep Agoda as secondary */
.buttons a{
  white-space:nowrap;
}

@media(max-width:900px){
  .recommend-grid{
    grid-template-columns:1fr 1fr;
  }

  .recommend-grid article:nth-child(2){
    border-right:0;
  }

  .recommend-grid article:nth-child(3),
  .recommend-grid article:nth-child(4){
    border-top:1px solid rgba(21,152,191,.14);
  }
}

@media(max-width:680px){
  .recommend-grid{
    grid-template-columns:1fr;
  }

  .recommend-grid article,
  .recommend-grid article:nth-child(2),
  .recommend-grid article:nth-child(3),
  .recommend-grid article:nth-child(4){
    min-height:auto;
    padding:20px 0;
    border-right:0;
    border-top:1px solid rgba(21,152,191,.14);
  }

  .recommend-grid article:first-child{
    border-top:0;
  }

  .recommend-grid span{
    margin-bottom:12px;
  }
}


/* =========================================================
   V20 — room links + blue/brown brand background accents
========================================================= */

.logo-bg{
  position:relative;
  overflow:hidden;
}

.logo-bg::before,
.logo-bg::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:0;
}

.logo-bg > *{
  position:relative;
  z-index:1;
}

.logo-bg::before{
  width:380px;
  height:380px;
  right:-120px;
  top:28px;
  border-radius:50%;
  border:32px solid rgba(21,152,191,.07);
}

.logo-bg::after{
  width:420px;
  height:180px;
  left:-120px;
  bottom:20px;
  border-radius:999px;
  border:20px solid rgba(111,88,68,.08);
  border-right-color:transparent;
  border-bottom-color:transparent;
  transform:rotate(-18deg);
}

.logo-bg-light::before{
  border-color:rgba(21,152,191,.06);
}

.logo-bg-light::after{
  border-color:rgba(111,88,68,.07);
  border-right-color:transparent;
  border-bottom-color:transparent;
}

.logo-bg-soft::before{
  border-color:rgba(21,152,191,.08);
}

.logo-bg-brown::after{
  border-color:rgba(111,88,68,.12);
  border-right-color:transparent;
  border-bottom-color:transparent;
}

.logo-bg-deep::before{
  border-color:rgba(255,255,255,.08);
}

.logo-bg-deep::after{
  border-color:rgba(210,180,108,.10);
  border-right-color:transparent;
  border-bottom-color:transparent;
}

.room-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:18px;
  padding:11px 16px;
  border:1px solid rgba(21,152,191,.26);
  border-radius:999px;
  color:var(--blue);
  background:rgba(21,152,191,.05);
  text-decoration:none;
  font-size:13px;
  font-weight:800;
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}

.room-link:hover{
  transform:translateY(-1px);
  background:rgba(21,152,191,.09);
  border-color:rgba(21,152,191,.38);
}

.secondary-room{
  background:rgba(255,255,255,.92);
  color:var(--deep);
}

.facility-photos{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  grid-template-rows:220px 220px 180px;
  gap:10px;
  margin-bottom:70px;
}

.facility-photos figure{
  margin:0;
  overflow:hidden;
  min-height:0;
}

.facility-photo-main{
  grid-column:1;
  grid-row:1 / 3;
}

.facility-photo-wide{
  grid-column:2 / 4;
  grid-row:3;
}

.facility-photos img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.checkin-steps .step-thumb{
  aspect-ratio:16/10;
  border:1px solid rgba(21,152,191,.12);
}

.info-section{
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)),
    #f0ede7;
}

@media(max-width:900px){
  .facility-photos{
    grid-template-columns:1fr 1fr;
    grid-template-rows:240px 180px 180px 180px;
  }

  .facility-photo-main{
    grid-column:1 / 3;
    grid-row:1;
  }

  .facility-photo-wide{
    grid-column:1 / 3;
    grid-row:4;
  }
}

@media(max-width:680px){
  .logo-bg::before{
    width:220px;
    height:220px;
    right:-88px;
    top:18px;
    border-width:18px;
  }

  .logo-bg::after{
    width:230px;
    height:110px;
    left:-78px;
    bottom:12px;
    border-width:12px;
  }

  .room-link{
    margin-top:14px;
    font-size:12px;
    padding:10px 14px;
  }

  .facility-photos{
    grid-template-columns:1fr;
    grid-template-rows:none;
    gap:8px;
    margin-bottom:52px;
  }

  .facility-photo-main,
  .facility-photo-wide{
    grid-column:auto;
    grid-row:auto;
  }

  .facility-photos figure{
    aspect-ratio:4/3;
  }
}


/* =========================================================
   V21 — COLOR BLOCKS
   No decorative circles/curves. Color itself carries the brand.
========================================================= */

:root{
  --blue:#1598bf;
  --deep:#0b6f8a;
  --brown:#604b3d;
  --brown-soft:#eee7df;
  --paper:#fbfaf7;
  --soft-blue:#edf7fa;
  --ink:#302e2b;
  --muted:#706a64;
}

/* Kill the V20 decorative geometry completely */
.logo-bg::before,
.logo-bg::after{
  content:none !important;
  display:none !important;
}

/* Base: warm off-white */
body{
  background:var(--paper);
}

/* INTRO — plain, calm */
.intro-section{
  background:var(--paper);
}

/* LOCATION — light blue field */
#location{
  background:var(--soft-blue);
}

/* CHECK-IN — white / paper, with brown accents */
#checkin{
  background:#fff;
}

#checkin .feature-heading h2::after{
  background:var(--brown);
}

#checkin .checkin-steps{
  border-color:rgba(96,75,61,.22);
  background:#faf7f3;
}

#checkin .checkin-steps article{
  border-color:rgba(96,75,61,.16);
}

#checkin .checkin-steps span{
  color:var(--brown);
}

/* ROOMS — strong brand blue, like the early concept */
#rooms{
  background:var(--blue);
  color:#fff;
}

#rooms .section-heading p{
  color:rgba(255,255,255,.82);
}

#rooms .section-heading h2::after{
  background:rgba(255,255,255,.88);
}

#rooms .rooms-grid{
  gap:20px;
}

#rooms .room-card{
  padding:0 0 26px;
  background:#fff;
  color:var(--ink);
}

#rooms .room-card figure{
  margin-bottom:24px;
}

#rooms .room-card h3,
#rooms .room-card p,
#rooms .room-card .room-link{
  margin-left:24px;
  margin-right:24px;
}

#rooms .room-card h3{
  color:var(--blue);
}

#rooms .room-card p{
  color:var(--muted);
}

/* FACILITIES — warm sign-like brown / beige */
#info{
  background:var(--brown-soft);
}

#info .section-heading h2::after{
  background:var(--brown);
}

#info .info-list{
  border-color:rgba(96,75,61,.24);
}

#info .info-list article{
  border-color:rgba(96,75,61,.18);
}

#info .info-list span,
#info .info-list h3{
  color:var(--brown);
}

/* Recommended travel styles — return to paper */
.recommend-section{
  background:var(--paper);
}

.recommend-grid{
  border-color:rgba(21,152,191,.18);
}

/* Small brown touches where blue alone felt too cold */
.quick-links a:nth-child(2) span,
.quick-links a:nth-child(2) i{
  color:var(--brown);
}

.room-link{
  border-color:rgba(21,152,191,.28);
  background:#f4fbfd;
}

/* Final remains deep blue */
.final-section{
  background:var(--deep);
}

/* Agoda as warm secondary booking route */
.final-section .buttons a:not(.primary){
  border-color:rgba(255,255,255,.52);
}

.final-section .buttons .secondary-room{
  background:#fff;
  color:var(--brown);
  border-color:#fff;
}

/* Responsive */
@media(max-width:680px){
  #rooms .room-card h3,
  #rooms .room-card p,
  #rooms .room-card .room-link{
    margin-left:18px;
    margin-right:18px;
  }
}


/* =========================================================
   V22 — facility cards with photos / stronger color design
========================================================= */

:root{
  --blue:#14a5df;
  --blue-deep:#0b7fa9;
  --blue-soft:#e9f8fe;
  --brown:#5a4a42;
  --brown-soft:#f2ebe3;
  --paper:#fbfaf7;
  --ink:#302e2b;
  --muted:#6f6862;
}

/* Hero + major color behavior */
.hero{
  background:#0c7fa8;
}

.hero-shade{
  background:
    linear-gradient(90deg, rgba(11,80,105,.78), rgba(11,80,105,.44) 38%, rgba(11,80,105,.14) 74%),
    linear-gradient(0deg, rgba(11,80,105,.46), transparent 44%);
}

.quick-links{
  border-top:4px solid var(--blue);
}

.quick-links a{
  background:#fff;
}

.quick-links a:hover{
  background:#f2fbfe;
}

/* Stronger section color changes, matching logo blue / sign brown */
.intro-section{
  background:#fff;
}

#location{
  background:linear-gradient(180deg, #f6fcfe 0%, var(--blue-soft) 100%);
}

#location .photo-strip figure{
  box-shadow:0 10px 30px rgba(20,165,223,.08);
}

#checkin{
  background:linear-gradient(180deg, #faf5ef 0%, var(--brown-soft) 100%);
}

#checkin .feature-heading h2::after{
  background:var(--brown);
}

#checkin .checkin-steps{
  background:rgba(255,255,255,.72);
  border-top:1px solid rgba(90,74,66,.18);
  border-bottom:1px solid rgba(90,74,66,.18);
}

#checkin .checkin-steps article{
  border-right:1px solid rgba(90,74,66,.12);
}

#checkin .checkin-steps span{
  color:var(--brown);
}

#rooms{
  background:linear-gradient(180deg, #0f99cf 0%, #14a5df 100%);
  color:#fff;
}

#rooms .section-heading h2::after{
  background:#fff;
}

#rooms .section-heading p{
  color:rgba(255,255,255,.86);
}

#rooms .room-card{
  background:#fff;
  color:var(--ink);
  padding:0 0 26px;
  text-align:center;
  box-shadow:0 16px 36px rgba(7,64,84,.12);
}

#rooms .room-card h3{
  color:var(--blue-deep);
  text-align:center;
}

#rooms .room-card p,
#rooms .room-card .room-link{
  margin-left:24px;
  margin-right:24px;
}

#rooms .room-card p{
  text-align:center;
}

#info{
  background:linear-gradient(180deg, #fff 0%, #fcfbf8 100%);
}

#info .section-heading h2::after{
  background:var(--blue);
}

#info .section-heading p{
  color:var(--muted);
}

.info-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  border:0;
}

.info-card{
  display:grid;
  grid-template-columns:230px 1fr;
  gap:0;
  min-height:220px;
  background:#fff;
  border:1px solid rgba(20,165,223,.12);
  box-shadow:0 12px 30px rgba(16,77,100,.06);
  overflow:hidden;
}

.info-card-photo{
  margin:0;
  min-height:100%;
}

.info-card-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.info-card-copy{
  padding:26px 24px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:left;
}

.info-card-copy span{
  display:block;
  margin-bottom:18px;
  color:var(--blue);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
}

.info-card-copy h3{
  margin:0 0 10px;
  color:var(--brown);
  font-size:24px;
  line-height:1.3;
}

.info-card-copy p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.8;
}

/* room link tweaks */
.room-link{
  justify-content:center;
}

/* keep later section calm */
.recommend-section{
  background:#fff;
}

.final-section{
  background:linear-gradient(180deg, #0b7fa9 0%, #096f95 100%);
}

/* remove old expanded facility photo grid spacing if any */
.facility-photos{
  display:none !important;
}

@media(max-width:900px){
  .info-list{
    grid-template-columns:1fr;
  }

  .info-card{
    grid-template-columns:220px 1fr;
  }
}

@media(max-width:680px){
  #rooms .room-card p,
  #rooms .room-card .room-link{
    margin-left:18px;
    margin-right:18px;
  }

  .info-card{
    grid-template-columns:1fr;
    min-height:auto;
  }

  .info-card-photo{
    aspect-ratio:4/3;
  }

  .info-card-copy{
    padding:18px;
  }

  .info-card-copy h3{
    font-size:21px;
  }
}


/* =========================================================
   V23 — copy / photos / lighter blue tuning
========================================================= */

:root{
  --blue:#19a7db;
  --blue-deep:#1388b6;
  --blue-soft:#eef8fc;
  --blue-soft-2:#e6f4fa;
  --brown:#5a4a42;
  --brown-soft:#f4eee8;
  --paper:#fbfaf7;
  --ink:#302e2b;
  --muted:#6f6862;
}

/* 青は全体に薄めに調整 */
.hero{
  background:#117fa8;
}

.hero-shade{
  background:
    linear-gradient(90deg, rgba(10,76,100,.72), rgba(10,76,100,.40) 38%, rgba(10,76,100,.10) 74%),
    linear-gradient(0deg, rgba(10,76,100,.36), transparent 44%);
}

.quick-links{
  border-top:3px solid var(--blue);
}

#location{
  background:linear-gradient(180deg, #f7fcfe 0%, var(--blue-soft-2) 100%);
}

#checkin{
  background:linear-gradient(180deg, #fcf8f4 0%, var(--brown-soft) 100%);
}

#rooms{
  background:linear-gradient(180deg, #f2fbfe 0%, #dff3fb 100%);
  color:var(--ink);
}

#rooms .section-heading h2::after{
  background:var(--blue);
}

#rooms .section-heading p{
  color:var(--muted);
}

#rooms .room-card{
  background:#fff;
  box-shadow:0 14px 30px rgba(15,93,119,.08);
}

#rooms .room-card h3{
  color:var(--blue-deep);
  text-align:center;
}

#rooms .room-card p{
  text-align:center;
  color:var(--muted);
}

#rooms .room-link{
  justify-content:center;
}

#info{
  background:linear-gradient(180deg, #fff 0%, #faf9f6 100%);
}

/* 立地写真や施設写真の見え方を少しやわらかく */
.photo-strip.wide figure,
.info-card,
.room-card{
  border-radius:0;
  overflow:hidden;
}

/* 施設カード */
.info-card{
  border:1px solid rgba(20,165,223,.10);
}

.info-card-copy h3{
  color:var(--brown);
}

/* 小さめに散らした雰囲気写真 */
.mood-section{
  background:#ffffff;
}

.mood-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr 1fr 1fr;
  grid-auto-rows:120px;
  gap:12px;
  align-items:start;
}

.mood-item{
  margin:0;
  overflow:hidden;
  box-shadow:0 10px 24px rgba(18,79,103,.08);
}

.mood-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.mood-a{ grid-column:1; grid-row:1 / span 2; }
.mood-b{ grid-column:2; grid-row:1; transform:translateY(14px); }
.mood-c{ grid-column:3; grid-row:1 / span 2; transform:translateY(6px); }
.mood-d{ grid-column:4; grid-row:1; transform:translateY(28px); }
.mood-e{ grid-column:2; grid-row:2 / span 2; }
.mood-f{ grid-column:4; grid-row:2 / span 2; transform:translateY(-10px); }

@media(max-width:900px){
  .mood-grid{
    grid-template-columns:1fr 1fr 1fr;
    grid-auto-rows:110px;
  }

  .mood-a{ grid-column:1; grid-row:1 / span 2; }
  .mood-b{ grid-column:2; grid-row:1; transform:none; }
  .mood-c{ grid-column:3; grid-row:1 / span 2; transform:none; }
  .mood-d{ grid-column:2; grid-row:2; transform:none; }
  .mood-e{ grid-column:1 / span 2; grid-row:3; }
  .mood-f{ grid-column:3; grid-row:3; transform:none; }
}

@media(max-width:680px){
  .mood-grid{
    grid-template-columns:1fr 1fr;
    grid-auto-rows:120px;
    gap:8px;
  }

  .mood-a,
  .mood-b,
  .mood-c,
  .mood-d,
  .mood-e,
  .mood-f{
    grid-column:auto;
    grid-row:auto;
    transform:none;
  }

  .mood-item{
    aspect-ratio:4/3;
  }
}


/* =========================================================
   V24 — unified color system / compact mood collage
========================================================= */

:root{
  --blue:#1598bf;
  --blue-deep:#0b6f8a;
  --blue-soft:#eef7fa;
  --brown:#5c4a3f;
  --paper:#fbfaf7;
  --surface:#ffffff;
  --ink:#302e2b;
  --muted:#706a64;
  --line:#e8e4df;
}

/* ---------------------------------------------------------
   Overall background: keep it calm and consistent
--------------------------------------------------------- */
html,
body{
  background:var(--paper);
  color:var(--ink);
}

.section,
.intro-section,
#location,
#checkin,
#rooms,
#info,
.mood-section,
.recommend-section{
  background:var(--paper) !important;
}

/* Subtle separation only */
#location,
#rooms,
.mood-section{
  background:#f7fafb !important;
}

#checkin,
#info{
  background:#faf8f5 !important;
}

/* ---------------------------------------------------------
   HERO — remove the blue mask completely
--------------------------------------------------------- */
.hero{
  background:#000;
}

.hero-shade{
  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.52) 0%,
      rgba(0,0,0,.28) 34%,
      rgba(0,0,0,.06) 68%,
      rgba(0,0,0,0) 100%
    ) !important;
}

.hero::before,
.hero::after{
  display:none !important;
}

/* ---------------------------------------------------------
   Brand color usage — blue as accent, not section flood
--------------------------------------------------------- */
.section-heading h2::after,
.feature-heading h2::after{
  background:var(--blue) !important;
}

.quick-links{
  border-top:3px solid var(--blue);
  background:#fff;
}

.quick-links a{
  background:#fff;
}

.quick-links a:hover{
  background:#f6fbfd;
}

/* ---------------------------------------------------------
   Check-in
--------------------------------------------------------- */
#checkin .checkin-steps{
  background:#fff !important;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

#checkin .checkin-steps article{
  border-right:1px solid var(--line);
}

#checkin .checkin-steps span{
  color:var(--blue);
}

#checkin .checkin-steps h3{
  color:var(--ink);
}

/* ---------------------------------------------------------
   Rooms — no blue flood, keep cards central and clean
--------------------------------------------------------- */
#rooms{
  color:var(--ink) !important;
}

#rooms .section-heading p{
  color:var(--muted) !important;
}

#rooms .room-card{
  background:#fff;
  color:var(--ink);
  box-shadow:none;
  border:1px solid var(--line);
  text-align:center;
}

#rooms .room-card h3{
  color:var(--ink);
  text-align:center;
}

#rooms .room-card p{
  color:var(--muted);
  text-align:center;
}

.room-link{
  color:var(--blue-deep);
  border-color:rgba(21,152,191,.22);
  background:#f7fbfc;
}

/* ---------------------------------------------------------
   Facility cards
--------------------------------------------------------- */
.info-list{
  gap:16px;
}

.info-card{
  background:#fff;
  border:1px solid var(--line);
  box-shadow:none;
}

.info-card-copy span{
  color:var(--blue);
}

.info-card-copy h3{
  color:var(--ink);
}

.info-card-copy p{
  color:var(--muted);
}

/* ---------------------------------------------------------
   Mood collage — smaller, denser, grouped
--------------------------------------------------------- */
.mood-section{
  padding-top:72px;
  padding-bottom:84px;
}

.mood-section .section-heading{
  max-width:760px;
  margin-bottom:34px;
}

.mood-grid{
  width:min(820px, 100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  grid-template-rows:105px 105px;
  gap:8px;
  align-items:stretch;
}

.mood-item{
  margin:0;
  overflow:hidden;
  box-shadow:none;
  border:1px solid rgba(48,46,43,.06);
  transform:none !important;
}

.mood-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* compact collage composition */
.mood-a{
  grid-column:1 / span 2;
  grid-row:1 / span 2;
}

.mood-b{
  grid-column:3;
  grid-row:1;
}

.mood-c{
  grid-column:4 / span 2;
  grid-row:1;
}

.mood-d{
  grid-column:6;
  grid-row:1 / span 2;
}

.mood-e{
  grid-column:3 / span 2;
  grid-row:2;
}

.mood-f{
  grid-column:5;
  grid-row:2;
}

/* ---------------------------------------------------------
   Recommended + final
--------------------------------------------------------- */
.recommend-grid{
  border-color:var(--line);
}

.recommend-grid article{
  border-color:var(--line);
}

.recommend-grid span{
  color:var(--blue);
}

.final-section{
  background:var(--blue-deep) !important;
}

/* remove old decorative / gradient remnants */
.logo-bg::before,
.logo-bg::after{
  content:none !important;
  display:none !important;
}

@media(max-width:900px){
  .mood-grid{
    width:min(680px, 100%);
    grid-template-columns:repeat(4, 1fr);
    grid-template-rows:100px 100px 100px;
  }

  .mood-a{ grid-column:1 / span 2; grid-row:1 / span 2; }
  .mood-b{ grid-column:3; grid-row:1; }
  .mood-c{ grid-column:4; grid-row:1 / span 2; }
  .mood-d{ grid-column:3; grid-row:2; }
  .mood-e{ grid-column:1 / span 2; grid-row:3; }
  .mood-f{ grid-column:3 / span 2; grid-row:3; }
}

@media(max-width:680px){
  .mood-section{
    padding-top:56px;
    padding-bottom:64px;
  }

  .mood-grid{
    width:100%;
    grid-template-columns:repeat(3, 1fr);
    grid-template-rows:90px 90px 90px;
    gap:6px;
  }

  .mood-a{ grid-column:1 / span 2; grid-row:1 / span 2; }
  .mood-b{ grid-column:3; grid-row:1; }
  .mood-c{ grid-column:3; grid-row:2; }
  .mood-d{ grid-column:1; grid-row:3; }
  .mood-e{ grid-column:2; grid-row:3; }
  .mood-f{ grid-column:3; grid-row:3; }
}


/* =========================================================
   V27 — compact ABOUT block inspired by concise hotel intros
========================================================= */

.about-section{
  background:var(--paper) !important;
  padding-top:82px;
  padding-bottom:86px;
}

.about-wrap{
  width:min(1040px, 100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0, 520px) minmax(300px, 1fr);
  gap:64px;
  align-items:center;
}

/* Balanced 2x2 collage: compact, rectangular as one unit */
.about-collage{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  grid-template-rows:repeat(2, 1fr);
  gap:7px;
  width:100%;
  aspect-ratio:2 / 1;
}

.about-collage figure{
  margin:0;
  min-width:0;
  min-height:0;
  overflow:hidden;
  background:#ece9e4;
}

.about-collage img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.about-copy{
  max-width:430px;
}

.about-label{
  margin:0 0 20px;
  color:var(--blue);
  font-size:11px;
  line-height:1.5;
  font-weight:800;
  letter-spacing:.12em;
}

.about-copy h2{
  margin:0 0 22px;
  font-size:clamp(30px, 3.6vw, 48px);
  line-height:1.25;
  letter-spacing:-.04em;
}

.about-copy h2::after{
  content:"";
  display:block;
  width:42px;
  height:3px;
  margin-top:22px;
  background:var(--blue);
}

.about-lead{
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:2;
}

.about-mini{
  margin-top:30px;
  padding-top:24px;
  border-top:1px solid var(--line);
}

.about-mini h3{
  margin:0 0 10px;
  color:var(--ink);
  font-size:19px;
  line-height:1.5;
}

.about-mini p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.85;
}

/* Old separated intro/location layouts are no longer used */
.intro-section,
#location.feature-section{
  background:var(--paper) !important;
}

@media(max-width:900px){
  .about-wrap{
    grid-template-columns:1fr;
    gap:36px;
  }

  .about-collage{
    width:min(620px, 100%);
  }

  .about-copy{
    max-width:620px;
  }
}

@media(max-width:680px){
  .about-section{
    padding-top:58px;
    padding-bottom:64px;
  }

  .about-wrap{
    gap:28px;
  }

  .about-collage{
    gap:5px;
  }

  .about-label{
    margin-bottom:15px;
    font-size:10px;
  }

  .about-copy h2{
    margin-bottom:18px;
    font-size:30px;
  }

  .about-copy h2::after{
    margin-top:17px;
  }

  .about-mini{
    margin-top:22px;
    padding-top:20px;
  }

  .about-mini h3{
    font-size:17px;
  }
}


/* =========================================================
   V28 — compact rooms / compact facilities / mobile-first
========================================================= */

/* ---------------------------------------------------------
   ROOMS — 2x2 mosaic
--------------------------------------------------------- */
.rooms-section{
  background:#f7fafb !important;
}

.rooms-heading{
  margin-bottom:34px;
}

.room-mosaic{
  width:min(820px, 100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  aspect-ratio:1 / 1;
  border:1px solid var(--line);
  background:#fff;
}

.room-panel{
  margin:0;
  min-width:0;
  min-height:0;
  overflow:hidden;
  border:0;
}

.room-western-photo,
.room-western-copy{
  border-bottom:1px solid var(--line);
}

.room-western-photo,
.room-japanese-copy{
  border-right:1px solid var(--line);
}

.room-photo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.room-copy{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:34px;
  background:#fff;
  text-align:center;
}

.room-copy > div{
  width:min(270px, 100%);
}

.room-copy span{
  display:block;
  margin-bottom:14px;
  color:var(--blue);
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
}

.room-copy h3{
  margin:0 0 12px;
  color:var(--ink) !important;
  font-size:28px;
  text-align:center !important;
}

.room-copy p{
  margin:0;
  color:var(--muted) !important;
  font-size:14px;
  line-height:1.8;
  text-align:center !important;
}

.room-copy .room-link{
  margin:18px auto 0 !important;
  padding:9px 14px;
  font-size:12px;
}

/* ---------------------------------------------------------
   FACILITIES — columns stay aligned as photo + title + copy
--------------------------------------------------------- */
.info-section{
  background:#faf8f5 !important;
}

.compact-info-heading{
  margin-bottom:30px;
}

.facility-grid{
  width:min(980px, 100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
}

.facility-card{
  background:#fff;
  border:1px solid var(--line);
  overflow:hidden;
}

.facility-card figure{
  margin:0;
  aspect-ratio:4 / 3;
  overflow:hidden;
  background:#eee;
}

.facility-card figure img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.facility-copy{
  padding:18px 16px 20px;
}

.facility-copy span{
  display:block;
  margin-bottom:9px;
  color:var(--blue);
  font-size:10px;
  font-weight:900;
  letter-spacing:.1em;
}

.facility-copy h3{
  margin:0 0 8px;
  color:var(--ink);
  font-size:18px;
  line-height:1.4;
}

.facility-copy p{
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.7;
}

/* old facility layout no longer used */
.info-list,
.info-card,
.facility-photos{
  display:none !important;
}

/* ---------------------------------------------------------
   Mood title / spacing
--------------------------------------------------------- */
.mood-section .section-heading{
  margin-bottom:28px;
}

.mood-section .section-heading h2{
  max-width:700px;
}

/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */
@media(max-width:760px){
  .rooms-heading,
  .compact-info-heading{
    margin-bottom:24px;
  }

  .room-mosaic{
    width:100%;
    aspect-ratio:1 / 1;
  }

  .room-copy{
    padding:18px 14px;
  }

  .room-copy span{
    margin-bottom:7px;
    font-size:9px;
  }

  .room-copy h3{
    margin-bottom:7px;
    font-size:20px;
  }

  .room-copy p{
    font-size:11px;
    line-height:1.55;
  }

  .room-copy .room-link{
    margin-top:10px !important;
    padding:7px 9px;
    font-size:10px;
  }

  .facility-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:8px;
  }

  .facility-copy{
    padding:12px 11px 14px;
  }

  .facility-copy span{
    margin-bottom:5px;
    font-size:8px;
  }

  .facility-copy h3{
    margin-bottom:5px;
    font-size:15px;
  }

  .facility-copy p{
    font-size:10px;
    line-height:1.55;
  }
}

@media(max-width:420px){
  .room-copy{
    padding:12px 9px;
  }

  .room-copy h3{
    font-size:18px;
  }

  .room-copy p{
    font-size:10px;
    line-height:1.45;
  }

  .room-copy .room-link{
    padding:6px 7px;
    font-size:9px;
  }

  .facility-card figure{
    aspect-ratio:1 / 1;
  }
}


/* =========================================================
   V29 — centered section titles / ABOUT hierarchy fix
========================================================= */

/* Major section titles centered */
.rooms-heading,
.compact-info-heading,
.mood-section .section-heading{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}

.rooms-heading h2::after,
.compact-info-heading h2::after,
.mood-section .section-heading h2::after{
  margin-left:auto;
  margin-right:auto;
}

.rooms-heading p,
.compact-info-heading p,
.mood-section .section-heading p{
  margin-left:auto;
  margin-right:auto;
}

/* ABOUT: both messages are equal-level headings */
.about-copy{
  max-width:460px;
}

.about-label{
  margin-bottom:22px;
}

.about-topic{
  margin:0;
}

.about-topic + .about-topic{
  margin-top:30px;
  padding-top:28px;
  border-top:1px solid var(--line);
}

.about-topic h2{
  margin:0 0 14px;
  font-size:clamp(25px, 2.5vw, 34px);
  line-height:1.35;
  letter-spacing:-.035em;
}

.about-topic h2::after{
  content:none;
  display:none;
}

.about-topic p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.9;
}

/* First ABOUT image should read as the hotel itself */
.about-collage figure:first-child img{
  object-position:center center;
}

/* Keep facility card columns visually aligned */
.facility-card{
  display:flex;
  flex-direction:column;
}

.facility-card figure{
  flex:0 0 auto;
}

.facility-copy{
  flex:1;
  display:flex;
  flex-direction:column;
}

.facility-copy p{
  margin-top:auto;
}

/* Mobile title alignment remains centered */
@media(max-width:680px){
  .rooms-heading,
  .compact-info-heading,
  .mood-section .section-heading{
    text-align:center;
  }

  .about-topic h2{
    font-size:24px;
  }

  .about-topic + .about-topic{
    margin-top:24px;
    padding-top:22px;
  }
}


/* =========================================================
   V30 — clean header
========================================================= */

.site-header{
  justify-content:flex-start;
}

.site-header > nav{
  display:none !important;
}


/* =========================================================
   V31 — HERO TITLE REFINEMENT
========================================================= */

.hero-copy{
  width:min(820px,76vw);
}

.hero-title{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:6px;
  line-height:1.04;
  letter-spacing:-.045em;
  text-shadow:0 10px 24px rgba(0,0,0,.18);
}

.hero-title span{
  display:block;
  font-size:clamp(24px,2.4vw,34px);
  font-weight:700;
  letter-spacing:.02em;
  color:rgba(255,255,255,.96);
}

.hero-title strong{
  display:block;
  font-size:clamp(52px,6.2vw,92px);
  font-weight:900;
  line-height:.98;
  color:#ffffff;
}

.hero-categories{
  margin:24px 0 10px;
}

@media(max-width:680px){
  .hero-copy{
    width:min(100%, 92vw);
  }

  .hero-title{
    gap:4px;
  }

  .hero-title span{
    font-size:17px;
    letter-spacing:.03em;
  }

  .hero-title strong{
    font-size:40px;
    line-height:1.02;
  }
}


/* =========================================================
   V32 — wider single-line hero copy
========================================================= */

.hero-copy{
  width:min(1080px, 88vw);
  max-width:none;
  padding-left:6vw;
  padding-right:3vw;
}

.hero-title-single{
  display:block;
  margin:0;
  max-width:none;
  white-space:nowrap;
  font-size:clamp(48px, 5.7vw, 86px);
  font-weight:900;
  line-height:1.03;
  letter-spacing:-.055em;
  color:#fff;
  text-shadow:0 10px 24px rgba(0,0,0,.18);
}

@media(max-width:980px){
  .hero-copy{
    width:min(94vw, 920px);
    padding-left:5vw;
    padding-right:2vw;
  }

  .hero-title-single{
    font-size:clamp(42px, 6vw, 68px);
  }
}

@media(max-width:680px){
  .hero-copy{
    width:94vw;
    padding-left:5vw;
    padding-right:3vw;
  }

  .hero-title-single{
    white-space:normal;
    max-width:88vw;
    font-size:38px;
    line-height:1.1;
    letter-spacing:-.045em;
  }
}