@charset "UTF-8";
/* =========================================================
   TRUST HORIZON  base / header / navigation
   ========================================================= */
:root {
  --navy: #0a2a5c;
  --navy-deep: #071d40;
  --accent: #0e7480;      /* hover wipe / slider arrows */
  --gold: #b8913e;        /* active bullets / small accents */
  --gray: #ebe9e3;
  --line: #cccccc;
  --text: #111111;
  --en: "Marcellus", "Times New Roman", serif;
  --jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --ease-wipe: .3s ease-out;
  --header-h: 80px;
}
@media (max-width: 767px) { :root { --header-h: 70px; } }

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 62.5%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font-family: var(--jp);
  font-size: 1.6rem;
  line-height: 1.6875;
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 767px) { body { font-size: 1.4rem; line-height: 1.715; } }
body.is-locked { position: fixed; left: 0; width: 100%; overflow: hidden; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; vertical-align: top; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.u-sp { display: none !important; }
@media (max-width: 767px) { .u-sp { display: revert !important; } .u-pc { display: none !important; } }
.u-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- icons (mask so they follow currentColor) ---------- */
.ico { display: inline-block; flex: 0 0 auto; background-color: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.ico--arrow   { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7.25' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M6.6 4.8 9.8 8l-3.2 3.2' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E"); }
.ico--diag    { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 12 12 4M5.5 4H12v6.5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E"); }
.ico--chev    { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cpath d='M1 1l10 10L21 1' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E"); }
.ico--down    { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7.25' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M4.8 6.6 8 9.8l3.2-3.2' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E"); }
.ico--long-l  { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath d='M42 22H3M14 11 3 22l11 11' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E"); }
.ico--long-r  { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath d='M2 22h39M30 11l11 11-11 11' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E"); }
.ico--mail    { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Crect x='.8' y='.8' width='18.4' height='14.4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='m1 1.5 9 7 9-7' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E"); }
.ico--pin     { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 19s6-6.2 6-11A6 6 0 0 0 4 8c0 4.8 6 11 6 11Z' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Ccircle cx='10' cy='8' r='2.2' fill='%23000'/%3E%3C/svg%3E"); }
.ico--play    { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 11'%3E%3Cpath d='M0 0l9 5.5L0 11Z'/%3E%3C/svg%3E"); }
.ico--pause   { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath d='M0 0h3v10H0zM5 0h3v10H5z'/%3E%3C/svg%3E"); }

/* shared "wipe" hover: a panel sweeps in from the left, leaves to the right */
.wipe { position: relative; }
.wipe::before {
  content: ""; position: absolute; top: -1px; left: -1px; width: calc(100% + 2px); height: calc(100% + 2px);
  background: var(--wipe, var(--accent)); transform: scaleX(0); transform-origin: right top;
  transition: transform var(--ease-wipe);
}
.wipe > * { position: relative; }
@media (hover: hover) and (min-width: 768px) {
  .wipe:hover::before, .wipe:focus-visible::before { transform: scaleX(1); transform-origin: left top; }
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 999; }
.site-header__in {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h); background: #fff; border-bottom: 0 solid #fff; transition: .3s ease-in-out;
}
.site-header.is-sticky .site-header__in { border-bottom: 1px solid var(--line); }
.site-header__logo { flex: 0 0 auto; padding: 0 10px 1px 16px; }
@media (max-width: 767px) { .site-header__logo { padding: 0 12px; } }
.site-header__logo a { display: block; transition: opacity .3s ease-out; }
@media (hover: hover) { .site-header__logo a:hover { opacity: .6; } }

.logo { display: flex; align-items: center; gap: 10px; color: var(--navy); }
.logo__mark { display: block; width: 68px; height: 68px; object-fit: contain; flex: 0 0 auto; }
.logo__text { display: flex; flex-direction: column; line-height: 1; }
.logo__en { font-family: var(--en); font-size: 2.3rem; letter-spacing: .06em; white-space: nowrap; }
.logo__jp { margin-top: 5px; font-size: 1.1rem; letter-spacing: .3em; color: #555; }
@media (max-width: 767px) {
  .site-header__logo { flex: 0 1 auto; min-width: 0; padding: 0 8px 0 12px; }
  .logo { gap: 8px; } .logo__mark { width: 54px; height: 54px; }
  .logo__en { font-size: 1.65rem; letter-spacing: .03em; } .logo__jp { font-size: 1rem; margin-top: 4px; }
  .site-header__right { flex: 0 0 auto; }
  .site-header__nav { display: none; }
  .site-header__utility { padding-left: 0; }
}
@media (max-width: 340px) { .logo__en { font-size: 1.25rem; } .logo__mark { width: 44px; height: 44px; } }

.site-header__right { display: flex; justify-content: flex-end; flex: 1 1 0; height: 100%; }
.site-header__nav { display: flex; align-items: center; justify-content: flex-end; flex: 1 1 0; }
.site-header__utility { display: flex; flex: 0 0 auto; padding-left: 25px; }
@media (max-width: 767px) { .site-header__utility { padding-left: 0; } }
.site-header__corporate {
  display: flex; align-items: center; padding: 4px 20px 0 0; text-align: center;
  font-family: var(--en); font-size: 1.4rem; line-height: 1.036;
}
.site-header__corporate a { color: var(--navy); transition: color .3s ease-in-out; }
@media (hover: hover) { .site-header__corporate a:hover { color: var(--accent); } }
@media (max-width: 1179px) { .site-header__corporate { display: none; } }

.util-btn {
  position: relative; display: block; width: 80px; height: 80px; padding-top: 44px;
  text-align: center; font-size: 1.1rem; line-height: 1.667; cursor: pointer;
}
.util-btn .ico { position: absolute; top: 22px; left: 50%; width: 20px; height: 20px; margin-left: -10px; }
.util-btn--gray { background: var(--gray); color: #555; }
.util-btn--black { background: #000; color: #fff; }
.util-btn--gray.wipe { --wipe: #d9d6cd; }
@media (max-width: 767px) {
  .util-btn { width: 70px; height: 70px; padding-top: 38px; font-size: 1rem; line-height: 1.6; }
  .util-btn .ico { top: 20px; width: 18px; height: 18px; margin-left: -9px; }
  .util-btn--black { display: none; }
}
.menu-btn { position: relative; width: 80px; height: 80px; background: var(--navy); cursor: pointer; }
.menu-btn__bars { position: absolute; top: 50%; left: 50%; width: 30px; height: 22px; transform: translate(-50%, -50%); }
.menu-btn__bars span { position: absolute; left: 0; width: 100%; height: 2px; background: #fff; }
.menu-btn__bars span:nth-child(1) { top: 0; }
.menu-btn__bars span:nth-child(2) { top: 10px; }
.menu-btn__bars span:nth-child(3) { bottom: 0; }
@media (max-width: 767px) { .menu-btn { width: 70px; height: 70px; } .menu-btn__bars { width: 26px; height: 20px; } .menu-btn__bars span:nth-child(2) { top: 9px; } }

/* ---------- global nav ---------- */
.gnav { display: flex; flex-wrap: wrap; justify-content: flex-end; margin: 0 -8px -6px; }
@media (max-width: 1099px) { .gnav { display: none; } }
.gnav__item { margin-bottom: 6px; padding: 0 8px; font-size: 0; }
.gnav__link {
  position: relative; display: inline-block; font-size: 1.4rem; line-height: 1.429;
  transition: .3s; cursor: pointer;
}
.gnav__link::before { content: ""; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--navy); transition: .3s; }
.gnav__link:hover, .gnav__link.is-active, .gnav__link.is-current { color: var(--navy); }
.gnav__link:hover::before, .gnav__link.is-active::before, .gnav__link.is-current::before { width: 100%; }
.gnav__link.is-disabled { color: rgba(0, 0, 0, .3); }
.gnav__link.is-disabled::before { width: 0; }

/* dropdown panel */
.gpanel {
  display: none; overflow: hidden; position: fixed; top: 80px; left: 0; width: 100%;
  background: var(--navy); z-index: 900; font-size: 1.6rem;
}
.gpanel__body { position: relative; padding: 36px 0 44px; }
.gpanel__en {
  position: absolute; top: -.16em; left: 0; color: rgba(255, 255, 255, .15);
  font-family: var(--en); font-size: 9rem; line-height: 1; letter-spacing: -.04em; white-space: nowrap; pointer-events: none;
}
@media (max-width: 1024px) { .gpanel__en { font-size: 7rem; } }
.gpanel__title { position: relative; margin-bottom: 27px; padding-left: 50px; font-size: 4rem; line-height: 1.2; }
.gpanel__title a { --wipe: #fff; position: relative; display: inline-block; color: #fff; transition: color var(--ease-wipe); }
.gpanel__title a::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #fff; }
.gpanel__title a span { display: inline-flex; align-items: center; }
.gpanel__title .ico { width: 32px; height: 32px; margin-left: 10px; }
.gpanel__title a:hover { color: var(--navy); }
.gpanel__in { max-width: 1182px; margin: 0 auto; padding: 0 50px; }
.gpanel__row { display: flex; flex-wrap: wrap; margin: 0 -10px; }
.gpanel__col { width: 33.33%; padding: 0 10px; }
.gpanel__item { line-height: 1.75; }
.gpanel__item:not(:last-child) { margin-bottom: 8px; }

/* list links shared by dropdown + megamenu */
.nlink {
  --wipe: #fff; position: relative; display: inline-block; padding: 0 5px 0 24px;
  color: #fff; font-size: 1.6rem; transition: color var(--ease-wipe);
}
.nlink > .ico { position: absolute; top: 6px; left: 0; width: 15px; height: 15px; }
.nlink:hover { color: var(--navy); }
.nlink--sub { padding-left: 15px; font-size: 1.4rem; }
.nlink--sub::after { content: ""; position: absolute; top: 9px; left: 0; width: 10px; height: 1px; background: currentColor; }
.nlist__sub { margin-top: 6px; padding: 0 0 5px 39px; }
.nlist__sub li { line-height: 1.286; }
.nlist__sub li:not(:last-child) { margin-bottom: 6px; }
@media (max-width: 767px) {
  .nlink { display: block; }
  .nlist__sub { margin-top: 11px; }
  .nlist__sub li:not(:last-child) { margin-bottom: 11px; }
}

/* =========================================================
   MEGAMENU (full screen)
   ========================================================= */
.mega {
  position: fixed; inset: 0; z-index: 1000; overflow-y: auto; visibility: hidden; opacity: 0;
  background: var(--navy); transition: .4s cubic-bezier(.23, 1, .58, 1);
}
.mega.is-open { visibility: visible; opacity: 1; }
.mega__close {
  position: absolute; top: 0; right: 0; width: 80px; height: 80px; background: #fff; transition: opacity .3s ease-out;
}
.mega__close::before, .mega__close::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 30px; height: 2px; background: var(--navy);
}
.mega__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.mega__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
@media (hover: hover) { .mega__close:hover { opacity: .6; } }
@media (max-width: 767px) { .mega__close { width: 70px; height: 70px; } .mega__close::before, .mega__close::after { width: 26px; } }
.mega__in { display: flex; flex-direction: column; max-width: 1182px; margin: 0 auto; padding: 73px 50px 81px; }
@media (max-width: 767px) { .mega__in { max-width: 100%; padding: 80px 40px 102px; } }
.mega__utility { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 31px; margin-bottom: 47px; }
@media (max-width: 767px) { .mega__utility { order: 3; margin: 33px 0 0; } }
.mega__inquiry { display: inline-flex; align-items: center; gap: 11px; color: #fff; font-size: 1.6rem; line-height: 1.5; transition: opacity .3s ease-out; }
.mega__inquiry .ico { width: 20px; height: 16px; }
@media (hover: hover) { .mega__inquiry:hover { opacity: .6; } }
.mega__grid { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.mega__col { width: 25%; padding: 0 15px; }
.mega__box:not(:last-child) { margin-bottom: 41px; }
.mega__head {
  --wipe: #fff; position: relative; display: block; margin-top: -8px; padding: 8px 30px 8px 10px;
  border-bottom: 1px solid #fff; color: #fff; font-size: 2rem; line-height: 1.2; transition: color var(--ease-wipe);
}
.mega__head > .ico { position: absolute; right: 10px; bottom: 10px; width: 15px; height: 15px; }
/* Match the white wipe's breakpoint so touch hover never hides navy text on navy. */
@media (hover: hover) and (min-width: 768px) {
  .mega__head:hover { color: var(--navy); }
}
.mega__detail { padding-top: 19px; }
.mega__list li { position: relative; line-height: 1.813; }
.mega__list > li:not(:last-child) { margin-bottom: 7px; }
.mega__list .is-sp-only { display: none; }
@media (max-width: 767px) {
  .mega__grid { order: 1; display: block; margin: 0; }
  .mega__col { width: auto; padding: 0; }
  .mega__box:not(:last-child) { margin-bottom: 0; }
  .mega__head { margin-top: 0; padding: 18px 25px 18px 0; border-bottom-color: rgba(255, 255, 255, .5); font-size: 1.8rem; }
  .mega__head > .ico { top: 50%; bottom: auto; right: 0; width: 18px; height: 18px; transform: translateY(-50%); transition: transform .3s; }
  .mega__box.js-accordion .mega__head > .ico { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cpath d='M1 1l10 10L21 1' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E"); width: 21px; height: 11px; }
  .mega__box.is-open .mega__head > .ico { transform: translateY(-50%) rotate(180deg); }
  .mega__detail { display: none; overflow: hidden; padding: 14px 0 13px; }
  .mega__list .is-sp-only { display: list-item; }
}

/* =========================================================
   BREADCRUMB (slides out from under the header once scrolled)
   ========================================================= */
.crumb {
  position: fixed; top: 81px; left: 0; width: 100%; padding: 14px 20px; z-index: 800;
  background: rgba(255, 255, 255, .9); transform: translateY(calc(-100% - 81px)); transition: transform .3s ease-in-out;
}
.crumb.is-show { transform: translateY(0); }
@media (max-width: 767px) { .crumb { top: 70px; padding: 10px 20px 9px; transform: translateY(calc(-100% - 70px)); } }
.crumb__list { display: flex; flex-wrap: wrap; }
.crumb__item { position: relative; font-size: 1.2rem; line-height: 1.334; }
.crumb__item:not(:last-child) { margin-right: 9px; padding-right: 16px; }
.crumb__item:not(:last-child)::before {
  content: ""; position: absolute; top: 50%; right: 0; width: 6px; height: 6px;
  border-top: 1px solid #333; border-right: 1px solid #333; transform: translateY(-50%) rotate(45deg);
}
.crumb__item a { text-decoration: underline; }
@media (hover: hover) { .crumb__item a:hover { text-decoration: none; } }

.l-contents { width: 100%; padding-top: 80px; }
@media (max-width: 767px) { .l-contents { padding-top: 70px; } }
