@charset "utf-8";

html, body{
  min-height:100%;
}

body.ns-home{
  position:relative;
  background-color:#0e0e0e;
  padding-top:0;
  background-image:
    linear-gradient(
      90deg,
      rgba(0,0,0,.92) 0%,
      rgba(0,0,0,0) 48%,
      rgba(0,0,0,0) 52%,
      rgba(0,0,0,.92) 100%
    ),
    linear-gradient(180deg, rgba(14,14,14,0.5) 0%, rgba(14,14,14,.78) 100%),
    url("../images/textures/stone_seamless.png");
  background-size:
    100% 100%,
    100% 100%,
    800px 800px;
  background-position:
    0 0,
    0 0,
    center;
  background-repeat:
    no-repeat,
    no-repeat,
    repeat;
  background-attachment:
    scroll,
    scroll,
    scroll;
  --ns-container:1100px;
  --ns-container-pad:0px;
}

/* =========================
   CITY PAGE BACKGROUND
   ========================= */
.ns-city{
  background:
    radial-gradient(900px 440px at 50% 0%, rgba(240,197,111,.10) 0%, rgba(240,197,111,0) 62%),
    linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.08) 22%, rgba(0,0,0,.18) 100%),
    url("../images/backgrounds/bg_city_texture.jpg") repeat center top,
    #0e0e0e;
}

/* =========================
   HERO
   ========================= */
.ns-cityhero{
  position:relative;
  overflow:visible;
  height:820px;
  border-bottom:0;
  background:transparent;

  width:100vw;
  margin-left:calc(50% - 50vw);
}

.ns-cityhero__media{
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(
    180deg,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 45%,
    rgba(0,0,0,.85) 55%,
    rgba(0,0,0,.55) 65%,
    rgba(0,0,0,.25) 75%,
    rgba(0,0,0,.10) 85%,
    rgba(0,0,0,.020) 93%,
    rgba(0,0,0,0) 100%
  );
    mask-image: linear-gradient(
    180deg,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 45%,
    rgba(0,0,0,.85) 55%,
    rgba(0,0,0,.55) 65%,
    rgba(0,0,0,.25) 75%,
    rgba(0,0,0,.10) 85%,
    rgba(0,0,0,.020) 93%,
    rgba(0,0,0,0) 100%
  );
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    height: 570px;
}

.ns-cityhero__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.03) 0%,
      rgba(0,0,0,.04) 28%,
      rgba(0,0,0,.03) 40%,
      rgba(0,0,0,.01) 48%,
      rgba(0,0,0,0) 52%
    );
  pointer-events:none;
}

.ns-cityhero__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}

.ns-cityhero__overlay{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  padding:0 24px 0;
}

.ns-cityhero__panel{
  width:min(760px, 100%);
  margin:0 auto;
  padding:0;
  background:none;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
  transform:translateY(160px);
}

.ns-cityhero__ttl{
  position:relative;
  text-align:center;
  font-family:"Shippori Mincho","Noto Sans JP",serif;
  font-weight:700;
  font-size:48px;
  line-height:1.08;
  letter-spacing:.04em;
  margin-bottom:24px;
  background:linear-gradient(
    180deg,
    #fff4d6 0%,
    #ffe8b0 32%,
    var(--gold) 68%,
    #e2b866 100%
  );
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:
    drop-shadow(0 2px 0 rgba(0,0,0,.65))
    drop-shadow(0 9px 16px rgba(0,0,0,.70));
}

.ns-cityhero__icon{
  display:block;
  width:110px;
  height:110px;
  margin:0 auto 0px;

  background:linear-gradient(
    180deg,
    #fff4d6 0%,
    #ffe8b0 32%,
    var(--gold) 68%,
    #e2b866 100%
  );

  -webkit-mask:no-repeat center/contain;
          mask:no-repeat center/contain;
	
  filter:
    drop-shadow(0 2px 0 rgba(0,0,0,.65))
    drop-shadow(0 9px 16px rgba(0,0,0,.70));
}

.ns-city--san_sebastian .ns-cityhero__icon{
  -webkit-mask:url("../images/icons/icon-crab.svg") no-repeat center/contain;
          mask:url("../images/icons/icon-crab.svg") no-repeat center/contain;
}

.ns-city--hondarribia .ns-cityhero__icon{
  -webkit-mask:url("../images/icons/icon-ferry.svg") no-repeat center/contain;
          mask:url("../images/icons/icon-ferry.svg") no-repeat center/contain;
}

.ns-city--guetaria .ns-cityhero__icon{
  -webkit-mask:url("../images/icons/icon-whale.svg") no-repeat center/contain;
          mask:url("../images/icons/icon-whale.svg") no-repeat center/contain;
}

.ns-city--bilbao .ns-cityhero__icon{
  -webkit-mask:url("../images/icons/icon-wolf.svg") no-repeat center/contain;
          mask:url("../images/icons/icon-wolf.svg") no-repeat center/contain;
}

.ns-city--guernica .ns-cityhero__icon{
  -webkit-mask:url("../images/icons/icon-oak.svg") no-repeat center/contain;
          mask:url("../images/icons/icon-oak.svg") no-repeat center/contain;
}

.ns-city--castro .ns-cityhero__icon{
  -webkit-mask:url("../images/icons/icon-lighthouse.svg") no-repeat center/contain;
          mask:url("../images/icons/icon-lighthouse.svg") no-repeat center/contain;
}

.ns-city--vitoria .ns-cityhero__icon{
  -webkit-mask:url("../images/icons/icon-deer.svg") no-repeat center/contain;
          mask:url("../images/icons/icon-deer.svg") no-repeat center/contain;
}

.ns-city--laguardia .ns-cityhero__icon{
  -webkit-mask:url("../images/icons/icon-grapes.svg") no-repeat center/contain;
          mask:url("../images/icons/icon-grapes.svg") no-repeat center/contain;
}

.ns-city--santiago .ns-cityhero__icon{
  -webkit-mask:url("../images/icons/icon-james.svg") no-repeat center/contain;
          mask:url("../images/icons/icon-james.svg") no-repeat center/contain;
}

.ns-city--cambados .ns-cityhero__icon{
  -webkit-mask:url("../images/icons/icon-castle-wine.svg") no-repeat center/contain;
          mask:url("../images/icons/icon-castle-wine.svg") no-repeat center/contain;
}

.ns-city--combarro .ns-cityhero__icon{
  -webkit-mask:url("../images/icons/icon-granary.svg") no-repeat center/contain;
          mask:url("../images/icons/icon-granary.svg") no-repeat center/contain;
}

.ns-city--coruna .ns-cityhero__icon{
  -webkit-mask:url("../images/icons/icon-hercules.svg") no-repeat center/contain;
          mask:url("../images/icons/icon-hercules.svg") no-repeat center/contain;
}

.ns-city--betanzos .ns-cityhero__icon{
  -webkit-mask:url("../images/icons/icon-bridge.svg") no-repeat center/contain;
          mask:url("../images/icons/icon-bridge.svg") no-repeat center/contain;
}

.ns-city--orense .ns-cityhero__icon{
  -webkit-mask:url("../images/icons/icon-whirl.svg") no-repeat center/contain;
          mask:url("../images/icons/icon-whirl.svg") no-repeat center/contain;
}

.ns-city--lugo .ns-cityhero__icon{
  -webkit-mask:url("../images/icons/icon-tower.svg") no-repeat center/contain;
          mask:url("../images/icons/icon-tower.svg") no-repeat center/contain;
}

.ns-city--allariz .ns-cityhero__icon{
  -webkit-mask:url("../images/icons/icon-bridge.svg") no-repeat center/contain;
          mask:url("../images/icons/icon-bridge.svg") no-repeat center/contain;
}

.ns-cityhero__ttl::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-10px;
  transform:translateX(-50%);
  width:90%;
  height:1px;
  background:linear-gradient(
    90deg,
    rgba(240,197,111,0) 0%,
    rgba(240,197,111,.96) 18%,
    rgba(255,244,214,1) 50%,
    rgba(240,197,111,.96) 82%,
    rgba(240,197,111,0) 100%
  );
}

.ns-cityhero__sub{
  text-align:center;
  font-family:"Shippori Mincho","Noto Sans JP",serif;
  font-weight:700;
  font-size:20px;
  line-height:1.5;
  letter-spacing:.05em;
  margin-bottom:22px;
  background:linear-gradient(
    180deg,
    #f5e7c6 0%,
    #ffe8b0 38%,
    var(--gold) 72%,
    #d9b56c 100%
  );
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:
    drop-shadow(0 2px 0 rgba(0,0,0,.62))
    drop-shadow(0 10px 18px rgba(0,0,0,.68));
}

.ns-cityhero__txt{
  width:min(760px, 100%);
  margin:0 auto;
  text-align:center;
  font-size:16px;
  line-height:2;
  letter-spacing:.02em;
  color:rgba(255,255,255,.92);
  text-shadow:
    0 1px 0 rgba(0,0,0,.34),
    0 8px 18px rgba(0,0,0,.44);
}

/* =========================
   HERO QUICK LINKS
   ========================= */
.ns-cityanchors{
  position:relative;
  padding:34px 0 18px;
  margin-top:20px;
  background:transparent;
}

.ns-cityanchors__inner{
  width:min(760px, 100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  align-items:start;
  justify-items:center;
  column-gap:34px;
  row-gap:18px;
}

.ns-cityanchors__item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  text-align:center;
  opacity:.96;
  transition:
    transform .28s cubic-bezier(.22,.61,.36,1),
    filter .28s cubic-bezier(.22,.61,.36,1),
    opacity .28s cubic-bezier(.22,.61,.36,1);
}

.ns-cityanchors__item:hover{
  transform:translateY(-3px);
  opacity:1;
  filter:
    drop-shadow(0 0 6px rgba(240,197,111,.35))
    drop-shadow(0 10px 18px rgba(0,0,0,.65));
}

.ns-cityanchors__icon{
  display:block;
  width:64px;
  height:64px;

  background:linear-gradient(
    180deg,
    #fff4d6 0%,
    #ffe8b0 32%,
    var(--gold) 68%,
    #e2b866 100%
  );

  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
          mask-repeat:no-repeat;
          mask-position:center;
          mask-size:contain;

  filter:
    drop-shadow(0 2px 0 rgba(0,0,0,.65))
    drop-shadow(0 9px 16px rgba(0,0,0,.70));
}

.ns-cityanchors__icon--walk{
  -webkit-mask-image:url("../images/icons/icon-walk.svg");
          mask-image:url("../images/icons/icon-walk.svg");
}

.ns-cityanchors__icon--taste{
  -webkit-mask-image:url("../images/icons/icon-taste.svg");
          mask-image:url("../images/icons/icon-taste.svg");
}

.ns-cityanchors__icon--feel{
  -webkit-mask-image:url("../images/icons/icon-feel.svg");
          mask-image:url("../images/icons/icon-feel.svg");
}

.ns-cityanchors__txt{
  font-family:"Shippori Mincho","Noto Sans JP",serif;
  font-weight:700;
  font-size:22px;
  line-height:1.2;
  letter-spacing:.08em;
  background:linear-gradient(
    180deg,
    #fff4d6 0%,
    #ffe8b0 32%,
    var(--gold) 68%,
    #e2b866 100%
  );
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:
    drop-shadow(0 2px 0 rgba(0,0,0,.55))
    drop-shadow(0 9px 16px rgba(0,0,0,.62));
}

/* =========================
   SPOTS / SECTIONS
   ========================= */
.ns-cityspots{
  padding:30px 0 34px;
  background:transparent;
}

.ns-cityspots__stack{
  display:flex;
  flex-direction:column;
  gap:42px;
}

.ns-citysection{
  display:flex;
  flex-direction:column;
  gap:18px;
  scroll-margin-top:130px;
}

.ns-citysection__head{
  display:flex;
  align-items:center;
  gap:18px;
}

.ns-citysection__line{
  flex:1 1 auto;
  height:1px;
  background:linear-gradient(
    90deg,
    rgba(240,197,111,0) 0%,
    rgba(240,197,111,.62) 34%,
    rgba(255,244,214,.96) 50%,
    rgba(240,197,111,.62) 66%,
    rgba(240,197,111,0) 100%
  );
}

.ns-citysection__ttl{
  flex:0 0 auto;
  font-family:"Shippori Mincho","Noto Sans JP",serif;
  font-weight:700;
  font-size:32px;
  line-height:1.1;
  letter-spacing:.14em;
  background:linear-gradient(
    180deg,
    #fff4d6 0%,
    #ffe8b0 32%,
    var(--gold) 68%,
    #e2b866 100%
  );
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:
    drop-shadow(0 2px 0 rgba(0,0,0,.65))
    drop-shadow(0 9px 16px rgba(0,0,0,.70));
}

.ns-citysection__sub{
  font-size:16px;
  line-height:1.9;
  letter-spacing:.04em;
  text-align:center;
  color:rgba(255,255,255,.84);
  text-shadow:
    0 1px 0 rgba(0,0,0,.28),
    0 8px 16px rgba(0,0,0,.40);
}

.ns-cityspots__featured{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:20px;
}

.ns-cityspots__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
}

/* =========================
   CITY CARD
   ========================= */
.ns-citycard{
  position:relative;
  min-height:100%;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(680px 240px at 15% 0%, rgba(240,197,111,.06) 0%, rgba(240,197,111,0) 58%),
    url("../images/backgrounds/bg_city_texture.jpg") repeat center center,
    linear-gradient(180deg, rgba(18,13,11,.92) 0%, rgba(10,8,7,.98) 100%);
  border:1px solid rgba(240,197,111,.42);
  box-shadow:
    0 18px 38px rgba(0,0,0,.50),
    inset 0 1px 0 rgba(255,255,255,.04);
  padding:18px 18px 20px;
  overflow:hidden;
  transition:
    transform .28s cubic-bezier(.22,.61,.36,1),
    box-shadow .28s cubic-bezier(.22,.61,.36,1),
    border-color .28s cubic-bezier(.22,.61,.36,1);
}

.ns-citycard::before{
  content:"";
  position:absolute;
  inset:8px;
  pointer-events:none;
  border:1px solid rgba(240,197,111,.28);
  box-shadow:inset 0 0 0 1px rgba(255,244,214,.04);
}

.ns-citycard:hover{
  transform:translateY(-3px);
  border-color:rgba(240,197,111,.60);
  box-shadow:
    0 24px 46px rgba(0,0,0,.60),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.ns-citycard__thumb{
  order:2;
  width:100%;
  aspect-ratio: 3 / 2;
  overflow:hidden;
  margin-top:0;
  border:1px solid rgba(240,197,111,.22);
  box-shadow:
    0 12px 22px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.ns-citycard__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}

.ns-citycard:hover .ns-citycard__thumb img{
  transform:scale(1.035);
}

.ns-citycard__body{
  display:contents;
}

.ns-citycard__ttl{
  order:1;
  position:relative;
  text-align:center;
  font-family:"Shippori Mincho","Noto Sans JP",sans-serif;
  font-weight:700;
  font-size:24px;
  line-height:1.25;
  letter-spacing:.06em;
  margin-top:-6px;
  margin-bottom:16px;
  padding-top:2px;
  background:linear-gradient(
    180deg,
    #fff4d6 0%,
    #ffe8b0 32%,
    var(--gold) 68%,
    #e2b866 100%
  );
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:
    drop-shadow(0 2px 0 rgba(0,0,0,.55))
    drop-shadow(0 9px 16px rgba(0,0,0,.62));
}

.ns-citycard__ttl::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-7px;
  transform:translateX(-50%);
  width:95%;
  height:1px;
  background:linear-gradient(
    90deg,
    rgba(240,197,111,0) 0%,
    rgba(240,197,111,.75) 18%,
    rgba(255,244,214,.98) 50%,
    rgba(240,197,111,.75) 82%,
    rgba(240,197,111,0) 100%
  );
  opacity:.96;
}

.ns-citycard__txt{
  order:3;
  font-size:16px;
  line-height:1.80;
  letter-spacing:.02em;
  color:rgba(255,255,255,.90);
  text-shadow:
    0 1px 0 rgba(0,0,0,.30),
    0 8px 18px rgba(0,0,0,.42);
  padding:16px 2px 0;

  text-align:center;
}

.ns-citycard--featured{
  padding:18px 18px 22px;
}

.ns-citycard--featured .ns-citycard__thumb{
  aspect-ratio:3 / 2;
}

.ns-citycard--featured .ns-citycard__ttl{
  font-size:24px;
}

.ns-citysection[aria-label="美食体験"] .ns-citycard{
  display:flex;
  flex-direction:column;
  padding-top:0;
  overflow:hidden;
}

.ns-citysection[aria-label="美食体験"] .ns-citycard::before{
  display:none;
}

.ns-citysection[aria-label="美食体験"] .ns-citycard__thumb{
  order:1;
  margin-top:0;
  width:calc(100% + 36px);
  margin-left:-18px;
  margin-right:-18px;
  border-left:0;
  border-right:0;
  border-top:0;
}

.ns-citysection[aria-label="美食体験"] .ns-citycard__ttl{
  order:2;
  margin-top:7px;
  margin-bottom:0px;
  padding-top:0;
}

.ns-citysection[aria-label="美食体験"] .ns-citycard__txt{
  order:3;
  padding:16px 2px 0;
}

/* =========================
   TABLET
   ========================= */
@media (min-width:768px) and (max-width:899px){
  .ns-cityhero{
    min-height:620px;
  }

  .ns-cityhero__overlay{
    min-height:500px;
    padding:0 18px 20px;
  }

  .ns-cityhero__panel{
    padding:24px 20px 20px;
  }

  .ns-cityhero__kicker{
    font-size:12px;
    margin-bottom:8px;
  }

  .ns-cityhero__ttl{
    font-size:30px;
    margin-bottom:10px;
  }

  .ns-cityhero__sub{
    font-size:18px;
    line-height:1.5;
    margin-bottom:12px;
  }

  .ns-cityhero__txt{
    font-size:13px;
    line-height:1.9;
  }

  .ns-cityhero__ctas{
    padding-top:14px;
  }

  .ns-cityanchors{
    padding:30px 0 14px;
  }

  .ns-cityanchors__inner{
    width:min(620px, 100%);
    column-gap:22px;
  }

  .ns-cityanchors__icon{
    width:52px;
    height:52px;
  }

  .ns-cityanchors__txt{
    font-size:18px;
  }

  .ns-citysection__head{
    gap:12px;
  }

  .ns-citysection__ttl{
    font-size:28px;
    letter-spacing:.10em;
  }

  .ns-citysection__sub{
    font-size:12.5px;
    line-height:1.85;
  }

  .ns-cityspots__featured,
  .ns-cityspots__grid{
    grid-template-columns:1fr;
  }

  .ns-rcta{
    margin-top:34px;
  }
}

/* =========================
   MOBILE
   ========================= */
@media (max-width:767px){
  .ns-cityhero{
    height:620px;
    min-height:620px;
  }

  .ns-cityhero__overlay{
    min-height:620px;
    padding:0 14px 14px;
  }

  .ns-cityhero__panel{
    padding:18px 14px 16px;
  }

  .ns-cityhero__kicker{
    font-size:11px;
    letter-spacing:.14em;
  }

  .ns-cityhero__ttl{
    font-size:36px;
    line-height:1.04;
  }

  .ns-cityhero__sub{
    font-size:18px;
    line-height:1.55;
  }

  .ns-cityhero__txt{
    font-size:13px;
    line-height:1.85;
  }

  .ns-cityhero__ctas{
    padding-top:12px;
  }

  .ns-cityanchors{
    padding:26px 0 10px;
  }

  .ns-cityanchors__inner{
    width:300px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(3, auto);
    justify-content:center;
    column-gap:70px;
  }

  .ns-cityanchors__item{
    gap:10px;
  }

  .ns-cityanchors__icon{
    width:46px;
    height:46px;
  }

  .ns-cityanchors__txt{
    font-size:17px;
    letter-spacing:.04em;
  }

  .ns-cityspots{
    padding:30px 0 24px;
  }

  .ns-cityspots__stack{
    gap:28px;
  }

  .ns-citysection{
    gap:14px;
  }

  .ns-citysection__head{
    gap:10px;
  }

  .ns-citysection{
    scroll-margin-top:115px;
  }

  .ns-citysection__ttl{
    font-size:26px;
    letter-spacing:.08em;
  }

  .ns-citysection__sub{
    font-size:11.5px;
    line-height:1.8;
  }

  .ns-cityspots__featured,
  .ns-cityspots__grid{
    grid-template-columns:1fr;
  }

  .ns-citycard__thumb,
  .ns-citycard--featured .ns-citycard__thumb{
    aspect-ratio:3 / 2;
  }

  .ns-citycard__txt{
    padding:12px 2px 0;
    font-size:15px;
    line-height:1.8;
  }

  .ns-citycard__eyebrow{
    font-size:10px;
    margin-bottom:6px;
  }

  .ns-citycard__ttl,
  .ns-citycard--featured .ns-citycard__ttl{
    font-size:20px;
    margin-bottom:10px;
  }

  .ns-citysection[aria-label="美食体験"] .ns-citycard__thumb{
    width:calc(100% + 36px);
    margin-left:-18px;
    margin-right:-18px;
  }

  .ns-citysection[aria-label="美食体験"] .ns-citycard__ttl{
    margin-top:14px;
  }

  .ns-rcta__panel{
    width:100%;
    max-width:none;
    margin:0;
    padding:20px 12px 18px;
  }

  .ns-rcta__panel::before{
    inset:6px;
  }

  .ns-rcta__ttl{
    font-size:18px;
    letter-spacing:.10em;
    margin-bottom:8px;
  }

  .ns-rcta__txt{
    font-size:11.5px;
    line-height:1.85;
    margin-bottom:12px;
  }
}