@charset "UTF-8";

:root {
  color-scheme: light;
  --du-ink: #18212f;
  --du-muted: #5f6b7a;
  --du-line: #dfe6ee;
  --du-soft: #f5f8fb;
  --du-paper: #ffffff;
  --du-brand: #146c78;
  --du-brand-deep: #0e4d59;
  --du-accent: #b8772f;
  --du-shadow: 0 18px 45px rgba(24, 33, 47, .09);
}

* {
  box-sizing: border-box;
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--du-ink);
  background: #f7f9fb;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "YuGothic", "Noto Sans JP", Meiryo, sans-serif;
  line-height: 1.85;
  letter-spacing: 0;
  text-align: left;
}

a {
  color: var(--du-brand-deep);
  text-underline-offset: .18em;
}

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

.site-header,
#header_left {
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--du-line);
  position: relative;
  top: auto;
  z-index: 10;
}

.site-header__inner,
.site-header .inner,
#header_left {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

#header_left {
  padding: 14px 24px;
}

.brand,
#header_left a {
  color: var(--du-ink);
  background: none;
  text-indent: 0;
  text-decoration: none;
  font-weight: 800;
  line-height: 1.2;
}

.header-links a,
.header-nav a {
  color: var(--du-muted);
  font-weight: 700;
  text-decoration: none;
}

.hero,
#container > h1 {
  color: #ffffff;
  background:
    linear-gradient(135deg, rgba(20, 108, 120, .94), rgba(35, 61, 88, .91)),
    radial-gradient(circle at 16% 12%, rgba(255, 255, 255, .24), transparent 34%);
}

#container > h1 {
  margin: 0 -24px;
  padding: 54px 24px 48px;
  border: 0;
  font-size: clamp(30px, 5vw, 52px);
  line-height: 1.25;
  letter-spacing: 0;
  text-align: center;
}

.breadcrumb,
.navi {
  color: rgba(255, 255, 255, .86);
  background: var(--du-brand-deep);
  font-size: 13px;
  text-align: left;
}

.breadcrumb a,
.navi a {
  color: #ffffff;
}

.layout,
.inner.page-grid,
.legacy-layout {
  max-width: 1180px;
  margin: 0 auto;
  padding: 38px 24px 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 34px;
  align-items: start;
}

.main-layout {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

.article-panel,
.right,
.inner.page-grid > main {
  min-width: 0;
  background: var(--du-paper);
  border: 1px solid var(--du-line);
  border-radius: 8px;
  box-shadow: var(--du-shadow);
  padding: clamp(22px, 4vw, 42px);
}

.right {
  float: left;
  width: calc(100% - 334px);
}

.left,
.layout > aside,
.inner.page-grid > aside,
.side,
.sidebar,
.legacy-side {
  align-self: start;
  position: static;
  top: auto;
}

.left {
  float: right;
  width: 300px;
  margin: 0 0 32px 34px;
}

.article-panel > *:first-child,
.right > *:first-child,
.legacy-main > *:first-child,
.legacy-side > *:first-child {
  margin-top: 0;
}

.article-panel h2,
.right h2,
.inner.page-grid main h2 {
  margin: 48px 0 18px;
  padding: 0 0 12px;
  border: 0;
  border-bottom: 2px solid var(--du-line);
  background: transparent;
  color: var(--du-brand-deep);
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.35;
  letter-spacing: 0;
  text-align: left;
  text-indent: 0;
  position: relative;
}

.article-panel h2:first-child,
.right h2:first-child,
.inner.page-grid main h2:first-child {
  margin-top: 0;
}

.article-panel h2::after,
.right h2::after,
.inner.page-grid main h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 72px;
  height: 2px;
  background: var(--du-brand);
}

.article-panel h3,
.right h3,
.inner.page-grid main h3 {
  margin: 30px 0 12px;
  padding-left: 14px;
  border: 0;
  border-left: 5px solid var(--du-accent);
  background: transparent;
  color: #243246;
  font-size: 20px;
  line-height: 1.45;
  text-align: left;
  text-indent: 0;
  width: auto;
}

ul,
ol {
  text-align: left;
}

.side-card,
.side-box,
.sidebar,
.left .menu,
.left .menu2,
.legacy-side .menu,
.legacy-side .menu2 {
  background: var(--du-paper);
  border: 1px solid var(--du-line);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(24, 33, 47, .06);
}

.side-card,
.side-box,
.sidebar {
  padding: 20px;
}

.side-card + .side-card,
.side-box + .side-box {
  margin-top: 18px;
}

.side-card h2,
.side-box h2,
.sidebar h2 {
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--du-ink);
  font-size: 18px;
  line-height: 1.45;
}

.side-card h2::after,
.side-box h2::after,
.sidebar h2::after {
  display: none;
}

.side-card ul,
.side-box ul,
.sidebar ul {
  margin: 0;
  padding-left: 1.2em;
}

.side-card li + li,
.side-box li + li,
.sidebar li + li {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--du-line);
}

.index {
  margin: 0;
  padding: 13px 16px;
  color: #ffffff;
  background: var(--du-brand-deep);
  border-radius: 8px 8px 0 0;
  font-weight: 800;
}

.menu,
.menu2 {
  margin: 0 0 18px;
  padding: 8px;
  border: 1px solid var(--du-line);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: var(--du-paper);
  box-shadow: 0 10px 24px rgba(24, 33, 47, .05);
  max-height: none;
  overflow: visible;
}

.menu a,
.menu2 a {
  display: block;
  padding: 9px 10px;
  border-bottom: 1px solid #edf1f5;
  border-radius: 6px;
  color: #243246;
  text-decoration: none;
  line-height: 1.45;
}

.menu a:last-child,
.menu2 a:last-child {
  border-bottom: 0;
}

.menu a.home,
.menu2 a.home {
  font-weight: 800;
  color: var(--du-brand-deep);
  background: #edf6f8;
}

.menu a:hover,
.menu a:focus,
.menu2 a:hover,
.menu2 a:focus {
  color: var(--du-brand-deep);
  background: var(--du-soft);
}

.context-ad {
  border-radius: 8px;
}

.footer,
.site-footer,
#footer {
  clear: both;
  border-top: 1px solid var(--du-line);
  background: #ffffff;
  color: var(--du-muted);
}

@media (max-width: 900px) {
  #base {
    padding-left: 16px;
    padding-right: 16px;
  }

  #container > h1 {
    margin-left: -16px;
    margin-right: -16px;
    padding: 42px 18px 36px;
    text-align: left;
  }

  #header_left,
  .navi {
    margin-left: -16px;
    margin-right: -16px;
  }

  .layout,
  .inner.page-grid,
  .legacy-layout,
  .main-layout {
    display: block;
    padding-left: 16px;
    padding-right: 16px;
  }

  .article-panel,
  .right,
  .inner.page-grid > main,
  .left,
  .layout > aside,
  .inner.page-grid > aside,
  .side,
  .sidebar,
  .legacy-side,
  .legacy-main {
    float: none;
    width: 100%;
    margin: 0 0 24px;
    position: static;
  }

  .article-panel,
  .right,
  .inner.page-grid > main {
    padding: 22px;
  }
}