@charset "UTF-8";

/* 共通設定：本文は Noto Sans、一部の英語・電話番号は Roboto Condensed。 */
:root {
  --navy: #001e55;
  --blue: #2397d0;
  --orange: #e4a31d;
  --green: #76a61a;
  --ink: #10233f;
  --mist: #f3f8fb;
  --white: #ffffff;
  --line: #dce7ed;
  --content: min(1280px, calc(100% - 96px));
  --common-text: #654B39;
  --font-english: "Roboto Condensed", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--common-text);
  background: #fff;
  font-family: "Noto Sans", sans-serif;
  font-size: 17px;
  line-height: 1.8;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.6;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a:focus-visible, button:focus-visible {
  outline: 3px solid #2397d0;
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 8px 16px;
  color: #fff;
  background: var(--navy);
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

.sf-inner {
  width: calc(100% - 48px);
  max-width: 1100px;
  margin: 0 auto;
}

.sf-english {
  font-family: var(--font-english);
}


/* 下層ページタイトル */
.sf-page-title {
  padding: 58px 0 54px;
  border-bottom: 4px solid transparent;
  border-image: linear-gradient(to right, #2397d0 0% 33.333%, #e4a31d 33.333% 66.666%, #76a61a 66.666% 100%) 1;
  background: linear-gradient(110deg, #fff 0%, var(--mist) 70%);
}

.sf-page-title-en {
  margin: 0 0 4px;
  color: var(--blue);
  font-family: var(--font-english);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.6;
}

.sf-page-title h1 {
  margin: 0;
  color: var(--navy);
  font-size: 40px;
  font-weight: 700;
}

.sf-page-title h1 span {
  display:inline-block;
}


/* ヘッダー */
.sf-header {
  border-top: 6px solid var(--navy);
  background: #fff;
}

.sf-header-main {
  display: flex;
  min-height: 104px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 24px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.sf-brand {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
}

.sf-logo {
  width: 240px;
}

.sf-branch {
  font-size: 18px;
  font-weight:600;
}

.sf-branch span, .sf-company span {
  display: inline-block;
  margin-left: 12px;
}

.sf-header-contact {
  display: flex;
  align-items: center;
  gap: 20px;
}

.sf-language {
  display: inline-flex;
  min-width: 108px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 2px 18px;
  color: #fff;
  background: var(--navy);
  font-family: var(--font-english);
  font-size: 17px;
  font-weight:700;
  line-height: 1.8;
  border-radius:3px;
}

/* 未支給のリンク先は HTML の data-pending-link を検索して設定。 */
[data-pending-link] {
  cursor: pointer;
}

/* リンク先未設定の項目を含め、共通リンクにロールオーバーを付ける。 */
.sf-header a, .sf-footer a {
  cursor: pointer;
  transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.sf-header a:not(.sf-phone):hover, .sf-header a:not(.sf-phone):focus-visible,
.sf-footer a:not(.sf-phone):hover, .sf-footer a:not(.sf-phone):focus-visible {
  opacity: 0.7;
}

/* ロゴリンクはロールオーバー時も濃さを維持。 */
.sf-header a.sf-brand:hover,
.sf-header a.sf-brand:focus-visible,
.sf-footer .sf-footer-identity > a:hover,
.sf-footer .sf-footer-identity > a:focus-visible {
  opacity: 1;
}

.sf-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-english);
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}

.sf-header-phone {
  font-size: 30px;
}

.sf-header-phone .sf-tel {
  font-size: 20px;
  font-weight: 600;
}

.sf-nav {
  color: #fff;
  background: var(--navy);
}

.sf-nav-list {
  display: grid;
  min-height: 70px;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}

.sf-nav-list li {
  border-left: 1px solid #7f8fa9;
  text-align: center;
}

.sf-nav-list li:last-child {
  border-right: 1px solid #7f8fa9;
}

.sf-nav-list a {
  position: relative;
  display: block;
  padding: 8px 4px;
  font-size: 17px;
  font-weight:600;
  line-height: 1.6;
}

.sf-nav-list a.sf-english {
  font-size: 20px;
}

.sf-nav-nowrap {
  display: inline-block;
  white-space: nowrap;
}

.sf-nav-list a:hover {
  background: #153569;
}

/* ナビゲーションは文字を薄くせず、背景色のみで反応を示す。 */
.sf-header .sf-nav a:hover,
.sf-header .sf-nav a:focus-visible {
  opacity: 1;
}

.sf-nav-list a:hover,
.sf-nav-list a:focus-visible,
.sf-dropdown > summary:hover,
.sf-dropdown > summary:focus-visible {
  color: #fff;
  background: #153569;
}

.sf-dropdown {
  position: relative;
}

.sf-dropdown > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 4px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.6;
  list-style: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.sf-dropdown > summary::-webkit-details-marker {
  display: none;
}

.sf-nav-list .sf-dropdown > summary > a {
  padding: 0;
  font: inherit;
}

.sf-dropdown > summary:hover {
  background: #153569;
}

.sf-dropdown > summary:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
}

.sf-dropdown-arrow {
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.sf-dropdown[open] .sf-dropdown-arrow {
  transform: translateY(2px) rotate(225deg);
}

.sf-submenu {
  position: absolute;
  z-index: 30;
  top: 100%;
  left: 50%;
  width: max-content;
  min-width: 100%;
  margin: 0;
  padding: 8px 0;
  background: var(--navy);
  box-shadow: 0 8px 16px rgb(0 0 0 / 15%);
  list-style: none;
  transform: translateX(-50%);
}

.sf-nav-list .sf-submenu li {
  border: 0;
  text-align: left;
}

.sf-nav-list .sf-submenu a {
  padding: 12px 20px;
  font-size: 16px;
}

.sf-menu-button {
  display: none;
}

.sf-language-mobile, .sf-nav-contact {
  display: none;
}


/* フッター */
.sf-footer {
  border-top: 3px solid transparent;
  border-image: linear-gradient(to right, #2397d0 0% 33.333%, #e4a31d 33.333% 66.666%, #76a61a 66.666% 100%) 1;
  background: #f2fafc;
  font-weight: 500;
  line-height:1.6;
}

.sf-footer-main {
  display: flex;
  min-height: 164px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px 32px;
  padding-top: 36px;
  padding-bottom: 36px;
}

.sf-footer-identity {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px 40px;
}

.sf-company {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.sf-address {
  font-size: 15px;
  font-style: normal;
  line-height: 2;
}

.sf-address span {
  display: inline-block;
  margin-right: 10px;
}

.sf-footer-contact {
  padding-left: 32px;
  border-left: 1px solid #dce7ed;
}

.sf-footer-phone {
  font-size: 36px;
  letter-spacing: 0.03em;
  line-height:1;
}

.sf-footer-phone .sf-tel {
  font-size: 22px;
  font-weight: 600;
}

.sf-hours {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

.sf-footer-bottom {
  color: #fff;
  background: var(--navy);
}

.sf-footer-bottom-inner {
  display: flex;
  min-height: 70px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.sf-copyright, .sf-privacy {
  font-size: 14px;
  line-height: 2;
}

.sf-copyright {
  font-family: var(--font-english);
}


/* PC：連絡先の幅を確保し、社名が収まらなくなる位置で自然に折り返す。 */
@media (min-width: 801px) {
  .sf-dropdown[open] > .sf-submenu {
    animation: submenu-slide-in 0.28s ease-out both;
  }

  .sf-dropdown-arrow {
    display: none;
  }

  .sf-header-main {
    flex-wrap: nowrap;
  }

  .sf-brand {
    min-width: 0;
    flex: 1;
    flex-wrap: wrap;
    gap: 0 24px;
  }

  .sf-brand .sf-logo {
    flex: 0 0 auto;
    max-width: 100%;
  }

  .sf-branch {
    font-size: 16px;
    flex: 0 0 auto;
    max-width: 100%;
  }

  .sf-header-contact {
    flex: 0 0 auto;
    flex-wrap: nowrap;
  }
}


/* 本文と共通余白は600px以下でスマートフォン表示。 */
@media (max-width: 600px) {
  body {
    font-size: 16px;
  }

  .sf-inner {
    width: calc(100% - 32px);
  }

  .sf-page-title {
    padding: 32px 0 30px;
  }

  .sf-page-title-en {
    font-size: 15px;
  }

  .sf-page-title h1 {
    font-size: 28px;
  }
}


/* ヘッダーのみ800px以下でスマートフォン表示。 */
@media (max-width: 800px) {
  .sf-dropdown > summary {
    justify-content: space-between;
    padding: 14px 12px;
  }

  .sf-submenu {
    position: static;
    width: 100%;
    min-width: 0;
    background: #153569;
    box-shadow: none;
    transform: none;
  }

  .sf-dropdown[open] > .sf-submenu {
    animation: submenu-mobile-slide-in 0.28s ease-out both;
  }

  .sf-header .sf-inner {
    width: calc(100% - 32px);
  }

  .sf-header-main {
    position: relative;
    height: 74px;
    min-height: 74px;
    flex-wrap: nowrap;
    gap: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  .sf-brand {
    display: block;
    width: 100%;
    padding-top: 0;
    transform: translate(-10px, 4px);
  }

  .sf-brand .sf-logo {
    width: 120px;
    max-width: calc(100% - 128px);
  }

  .sf-branch {
    display: block;
    margin-top: 0;
    font-size: 12px;
  }

  .sf-branch span {
    margin-left: 0;
    margin-right: 8px;
  }

  .sf-header-contact {
    display: block;
  }

  .sf-language {
    position: fixed;
    z-index: 52;
    top: 16px;
    right: 76px;
    width: 52px;
    min-width: 0;
    height: 52px;
    padding: 0;
    border: 1px solid #7f8fa9;
  }

  .sf-language-pc {
    display: none;
  }

  .sf-language-mobile {
    display: inline;
  }

  .sf-header-phone {
    display: none;
  }

  .sf-menu-button {
    position: fixed;
    z-index: 52;
    top: 16px;
    right: 16px;
    display: none;
    width: 52px;
    height: 52px;
    padding: 8px;
    border: 1px solid var(--navy);
    border-radius: 3px;
    appearance: none;
    color: var(--navy);
    background: #fff;
    font: 14px/1.6 var(--font-english);
    cursor: pointer;
  }

  .sf-header.is-enhanced .sf-menu-button {
    display: block;
  }

  .sf-menu-icon, .sf-menu-icon::before, .sf-menu-icon::after {
    display: block;
    width: 24px;
    height: 2px;
    background: currentColor;
  }

  .sf-menu-icon {
    position: relative;
    margin: 0 auto;
  }

  .sf-menu-icon::before, .sf-menu-icon::after {
    position: absolute;
    content: "";
  }

  .sf-menu-icon::before {
    top: -6px;
  }

  .sf-menu-icon::after {
    top: 6px;
  }

  .sf-header.is-enhanced .sf-nav {
    position: fixed;
    z-index: 50;
    inset: 0 0 0 auto;
    display: flex;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    flex-direction: column;
    padding: 92px 0 max(24px, env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
  }

  .sf-header.is-enhanced .sf-nav.is-open {
    visibility: visible;
    transform: translateX(0);
    transition-delay: 0s;
  }

  body.sf-menu-open {
    overflow: hidden;
  }

  .sf-menu-button[aria-expanded="true"] .sf-menu-icon {
    background: transparent;
  }

  .sf-menu-button[aria-expanded="true"] .sf-menu-icon::before {
    top: 0;
    transform: rotate(45deg);
  }

  .sf-menu-button[aria-expanded="true"] .sf-menu-icon::after {
    top: 0;
    transform: rotate(-45deg);
  }

  .sf-nav-contact {
    display: block;
    margin-top: auto;
    padding-top: 32px;
  }

  .sf-nav-phone {
    display: flex;
    justify-content: center;
    padding: 12px 8px;
    color: var(--navy);
    background: #fff;
    font-size: 30px;
  }

  .sf-nav-phone .sf-tel {
    font-size: 20px;
    font-weight: 600;
  }

  .sf-nav-list {
    grid-template-columns: 1fr;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .sf-nav-list li, .sf-nav-list li:last-child {
    border: 0;
    border-bottom: 1px solid #40577d;
    text-align: left;
  }

  .sf-nav-list .sf-submenu li:last-child {
    border-bottom: 0;
  }

  .sf-nav-list a {
    padding: 14px 12px;
  }

}


/* フッターは600px以下でスマートフォン表示。 */
@media (max-width: 600px) {
  .sf-footer-main, .sf-footer-identity {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .sf-footer-contact {
    width: 100%;
    padding-top: 20px;
    padding-left: 0;
    border-top: 1px solid #dce7ed;
    border-left: 0;
  }

  .sf-footer-bottom-inner {
    flex-direction: column-reverse;
    align-items: center;
    text-align: center;
  }
  .sf-footer .sf-logo {
    width: 180px;
  }
  .sf-address {
    line-height:1.6;
  }
  .sf-address span {
  display: block;
}

}

/* 電話番号が下段に折り返したときだけ中央揃えにする。 */
.sf-footer-main.is-stacked {
  justify-content: center;
  align-items: center;
  text-align: center;
}

.sf-footer-main.is-stacked .sf-footer-identity {
  justify-content: center;
  align-items: center;
}

.sf-footer-main.is-stacked .sf-footer-contact {
    width: 100%;
    padding-top: 20px;
    padding-left: 0;
    border-top: 1px solid #dce7ed;
    border-left: 0;
}

/* 行末の全角括弧の余白を考慮し、受付時間の見た目の中心を補正。 */
.sf-footer-main.is-stacked .sf-hours {
  position: relative;
  left: 0.25em;
  text-align: center;
}


@media (max-width: 600px) {
  .sf-footer-main, .sf-footer-identity {
    align-items: center;
    text-align: center;
  }

  .sf-address span {
    margin-right: 0;
  }
}


@keyframes submenu-slide-in {
  from {
    opacity: 0;
    transform: translate(-50%, -10px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}


@keyframes submenu-mobile-slide-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


@media (prefers-reduced-motion: reduce) {
  .sf-dropdown[open] > .sf-submenu {
    animation: none;
  }

  .sf-header.is-enhanced .sf-nav {
    transition: none;
  }
}


/*-------------------------------
pagetop
--------------------------------*/
.page-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 10;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 5px;
  background-color: var(--navy);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding-bottom: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  border: 1px solid #7f8fa9;
}

.page-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media screen and (max-width: 600px) {
  .page-top {
    right: 10px;
    bottom: 10px;
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
}