@charset "UTF-8";

/* **************************************************
Name: top.css
LastModify: 2025.04.21

Copyright 2022- Hitachi, Ltd.
*************************************************** */
/* add 2025.04.21
------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@font-face {
font-family: 'Hitachi Sans';
font-style:normal;
font-weight:400;
src:url('/font/HitachiSans/HitachiSans-Regular.woff') format('woff'),
      url('/font/HitachiSans/HitachiSans-Regular.woff2') format('woff2');
}
@font-face {
font-family: 'Hitachi Sans';
font-style:normal;
font-weight:700;
src:url('/font/HitachiSans/HitachiSans-Bold.woff') format('woff'),
      url('/font/HitachiSans/HitachiSans-Bold.woff2') format('woff2');
}
@font-face {
font-family: 'Hitachi Sans';
font-style:italic;
font-weight:400;
src:url('/font/HitachiSans/HitachiSans-Italic.woff') format('woff'),
      url('/font/HitachiSans/HitachiSans-Italic.woff2') format('woff2');
}
@font-face {
font-family: 'Hitachi Sans';
font-style:italic;
font-weight:700;
src:url('/font/HitachiSans/HitachiSans-BoldItalic.woff') format('woff'),
      url('/font/HitachiSans/HitachiSans-BoldItalic.woff2') format('woff2');
}

/* 
------------------------------*/
:where(main) {
  --content-max-width: 1275px;
  --content-width: min(calc(100% - 8%), var(--content-max-width));
  --transition-fast: 0.2s;
  --color-accent-lightest: #ffe0e3;
  --color-accent-light: #ff0026;
  --color-accent: #b1000e;
  --color-accent-dark: #7e000a;
  --color-black: #000000;
  --color-foreground: #333333;
  --color-background: #fff;
  --color-background-accent: #f0f0f0;
  --color-border: #d9d9d9;
  --font-family-serif: "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", "YuMincho",
    serif;
  background-color: var(--color-background);
}
:where(main) *,
:where(main) *::before,
:where(main) *::after {
  box-sizing: border-box;
}
:where(main) img {
  max-width: 100%;
  height: auto;
}
:where(main) button {
  padding: 0;
  font-size: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
  background-color: transparent;
  border: none;
  -webkit-appearance: none;
          appearance: none;
}
:where(main) :disabled {
  cursor: default;
}
:where(main) iframe {
  border: none;
}
:where(main) h2, .JS :where(main) h2 {
  padding: 0;
  margin: 0;
  background: none;
}
:where(main) h2 span {
  display: inline;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  background-color: transparent;
}
:where(main) h3 {
  padding: 0;
  margin: 0;
  color: inherit;
}
:where(main) h3 a {
  padding: 0;
}
:where(main) h3 a:is(:link, :visited) {
  color: inherit;
  background: none;
}
:where(main) strong {
  color: inherit;
}
:where(main) .GridSet {
  margin: 0 auto !important;
}
:where(main) :is(a:link, a:visited) {
  color: inherit;
  text-decoration: none;
}

@keyframes splide-loading {
  0% {
    transform: rotateZ(0);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
.splide__track--draggable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
          user-select: none;
}

.splide__track--fade > .splide__list > .splide__slide {
  margin: 0 !important;
  opacity: 0;
  z-index: 0;
}
.splide__track--fade > .splide__list > .splide__slide.is-active {
  opacity: 1;
  z-index: 1;
}

.splide--rtl {
  direction: rtl;
}

.splide__track--ttb > .splide__list {
  display: block;
}

.splide__container {
  box-sizing: border-box;
  position: relative;
}

.splide__list {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  display: flex;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
}
.splide.is-initialized:not(.is-active) .splide__list {
  display: block;
}

.splide__pagination {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  pointer-events: none;
}
.splide__pagination li {
  display: inline-block;
  line-height: 1;
  list-style-type: none;
  margin: 0;
  pointer-events: auto;
}
.splide:not(.is-overflow) .splide__pagination {
  display: none;
}

.splide__progress__bar {
  width: 0;
}

.splide {
  position: relative;
  visibility: hidden;
}
.splide.is-initialized, .splide.is-rendered {
  visibility: visible;
}

.splide__slide {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  box-sizing: border-box;
  flex-shrink: 0;
  list-style-type: none !important;
  margin: 0;
  position: relative;
}
.splide__slide img {
  vertical-align: bottom;
}

.splide__spinner {
  animation: splide-loading 1s infinite linear;
  border: 2px solid #999;
  border-left-color: transparent;
  border-radius: 50%;
  bottom: 0;
  contain: strict;
  display: inline-block;
  height: 20px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
}

.splide__sr {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.splide__toggle__pause {
  display: none;
}
.splide__toggle.is-active .splide__toggle__play {
  display: none;
}
.splide__toggle.is-active .splide__toggle__pause {
  display: inline;
}

.splide__track {
  overflow: hidden;
  position: relative;
  z-index: 0;
}

main {
  --content-width: min(calc(100% - 8%), 1224px);
}
@media screen and (min-width: 768.02px), print {
  main {
    padding-bottom: 140px;
  }
}
@media screen and (max-width: 768px) {
  main {
    padding-bottom: 40px;
  }
}

.ProductsParticle {
  --particle-max-width: 400px;
  --particle-position: max(80%, 100% - var(--particle-max-width));
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  overflow: hidden;
  opacity: 0.7;
}

.ProductsParticle__Right,
.ProductsParticle__Left {
  position: absolute;
}
@media screen and (min-width: 768.02px), print {
  .ProductsParticle__Right,
  .ProductsParticle__Left {
    bottom: 0;
    width: 25%;
    max-width: var(--particle-max-width);
  }
}
@media screen and (max-width: 768px) {
  .ProductsParticle__Right,
  .ProductsParticle__Left {
    height: 32vw;
  }
}
.ProductsParticle__Right > canvas,
.ProductsParticle__Left > canvas {
  width: 100%;
}

@media screen and (min-width: 768.02px), print {
  .ProductsParticle__Right {
    right: 0;
  }
}
@media screen and (min-width: 768.02px) and (prefers-reduced-motion: no-preference), print and (prefers-reduced-motion: no-preference) {
  .ProductsParticle__Right {
    transform: scaleX(-1);
  }
}
@media screen and (min-width: 768.02px) and (prefers-reduced-motion), print and (prefers-reduced-motion) {
  .ProductsParticle__Right {
    height: 100%;
    background-image: url(/image/jp/r5/top_22/bg_products_pc_right.png);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 100%;
  }
}
@media screen and (max-width: 768px) {
  .ProductsParticle__Right {
    top: 8px;
    right: 0;
    left: 0;
    background-image: url(/image/jp/r5/top_22/bg_products_sp_right.png);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: contain;
  }
}

@media screen and (min-width: 768.02px), print {
  .ProductsParticle__Left {
    left: 0;
  }
}
@media screen and (min-width: 768.02px) and (prefers-reduced-motion), print and (prefers-reduced-motion) {
  .ProductsParticle__Left {
    height: 100%;
    background-image: url(/image/jp/r5/top_22/bg_products_pc_left.png);
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 100%;
  }
}
@media screen and (max-width: 768px) {
  .ProductsParticle__Left {
    right: 0;
    bottom: 8px;
    left: 0;
    background-image: url(/image/jp/r5/top_22/bg_products_sp_left.png);
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: contain;
  }
}

.Announcement {
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 0.875rem;
  color: #fff;
  background-color: var(--color-accent);
}

.Announcement__Link {
  display: grid;
  column-gap: 12px;
  align-items: center;
  width: var(--content-width);
  margin-right: auto;
  margin-left: auto;
  transition-duration: var(--transition-fast);
  transition-property: opacity;
}
@media screen and (min-width: 768.02px), print {
  .Announcement__Link {
    grid-auto-flow: column;
    justify-content: center;
  }
}
@media screen and (max-width: 768px) {
  .Announcement__Link {
    grid-template-columns: 1fr auto;
  }
}
.Announcement__Link::after {
  display: inline-block;
  width: 1em;
  height: 1em;
  content: "";
  background-color: currentColor;
  transition-duration: var(--transition-fast);
  transition-property: transform background-color;
  -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 8.1 13.4"><polygon points="1.4,13.4 0,12 5.3,6.7 0,1.4 1.4,0 8.1,6.7 "/></svg>');
          mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 8.1 13.4"><polygon points="1.4,13.4 0,12 5.3,6.7 0,1.4 1.4,0 8.1,6.7 "/></svg>');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.Announcement__Link[target=_blank]::after {
  -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 12 12"><path d="M10,2V0v0H0v0v3v7h2v2h10V2H10z M1,3h8v6H1V3z M11,11H3v-1h7V3v0h1V11z"/></svg>');
          mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 12 12"><path d="M10,2V0v0H0v0v3v7h2v2h10V2H10z M1,3h8v6H1V3z M11,11H3v-1h7V3v0h1V11z"/></svg>');
}
@media (hover: hover) {
  .Announcement__Link:where(:any-link, :enabled, summary):hover:not([target=_blank])::after {
    transform: translateX(2px);
  }
}
.Announcement__Link::after {
  font-size: 0.75rem;
}
@media (hover: hover) {
  .Announcement__Link:where(:any-link, :enabled, summary):hover {
    text-decoration: underline;
  }
}

.BrandingArea {
  --arrow-size: 48px;
}

:where(.BrandingArea) .splide__slider {
  position: relative;
}
:where(.BrandingArea) .splide__arrows {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  width: min(94%, var(--content-max-width));
  margin-right: auto;
  margin-left: auto;
}
@media screen and (max-width: 768px) {
  :where(.BrandingArea) .splide__arrows {
    display: none;
  }
}
:where(.BrandingArea) .splide__arrow {
  position: absolute;
  filter: drop-shadow(0 0 4px #000);
}
:where(.BrandingArea) .splide__arrow.splide__arrow--prev {
  left: 0;
  transform: translateY(-50%) scaleX(-1);
}
:where(.BrandingArea) .splide__arrow.splide__arrow--next {
  right: 0;
  transform: translateY(-50%);
}
:where(.BrandingArea) .splide__arrow::after {
  display: block;
  width: var(--arrow-size);
  height: var(--arrow-size);
  content: "";
  background-color: #fff;
  -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 48"><path d="M0,0H15.931L40,24.063h0L15.931,48H0L24.066,24.066Z"/></svg>');
          mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 48"><path d="M0,0H15.931L40,24.063h0L15.931,48H0L24.066,24.066Z"/></svg>');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
:where(.BrandingArea) .splide__pagination {
  column-gap: 4px;
}
:where(.BrandingArea) .splide__pagination__page {
  display: grid;
  width: 2rem;
  height: 2rem;
}
:where(.BrandingArea) .splide__pagination__page::after {
  display: block;
  width: 1rem;
  height: 1rem;
  margin: auto;
  content: "";
  background-color: var(--color-background-accent);
  border: 1px solid var(--color-border);
  border-radius: 50%;
}
:where(.BrandingArea) .splide__pagination__page.is-active::after {
  width: 1.375rem;
  height: 1.375rem;
  background-color: var(--color-accent-lightest);
  background-image: conic-gradient(var(--color-accent) 0deg calc(360deg * var(--autoplay-rate)), transparent calc(360deg * var(--autoplay-rate)) 360deg);
  background-repeat: no-repeat;
  border: 1px solid var(--color-accent);
}
:where(.BrandingArea) .splide__toggle {
  padding: 0.5em;
}
:where(.BrandingArea) .splide__toggle__play::after,
:where(.BrandingArea) .splide__toggle__pause::after {
  display: block;
  width: 1em;
  height: 1em;
  content: "";
  background-color: var(--color-accent);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
:where(.BrandingArea) .splide__toggle__play::after {
  -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.382 15.382"><path d="M0,15.382V0L15.382,7.691Z"></path></svg>');
          mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.382 15.382"><path d="M0,15.382V0L15.382,7.691Z"></path></svg>');
}
:where(.BrandingArea) .splide__toggle__pause::after {
  -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M15,16H11V0H15ZM5,16H1V0H5Z"></path></svg>');
          mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M15,16H11V0H15ZM5,16H1V0H5Z"></path></svg>');
}

.BrandingArea__Slide {
  position: relative;
  z-index: 0;
  display: grid;
  width: 100%;
  height: 100%;
  min-height: clamp(260px, 260px + (100vw - 400px) * 0.5, 600px);
  overflow: hidden;
}

.BrandingArea__Slide.Bdm{ /* add 241003 */
background : #fff;
border:1px solid #d9d9d9;
}

.BrandingArea__Background {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}
.BrandingArea__Background img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.BrandingAreaSIB__Text { /* change 240305 */
  display: block;
  margin-top: 16px;
  font-family:yu-gothic-pr6n,'游ゴシック','Yu Gothic',YuGothic,'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',Arial,Helvetica,sans-serif;
  font-size: clamp(1rem, 2.6vw, 1.625rem);
  font-weight: 600;
  color: #fff;
  text-align: center;
  letter-spacing:0.1em;
  line-height: 1.5;
  filter: drop-shadow(0 0 10px #0C218E);
}

.BrandingArea__Link:is(a, a:link, a:visited) {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background-color: var(--color-accent);
  transition-duration: var(--transition-fast);
  transition-property: background-color;
}

@media screen and (min-width: 768.02px), print {
  .BrandingArea__Link:is(a, a:link, a:visited) {
    column-gap: 24px;
    min-width: min(320px, 100%);
    padding: 12px 24px;
    margin-top: 32px;
    font-size: 1rem;
  }
}
@media screen and (max-width: 768px) {
.BrandingArea__Background img { /* add 20240307 */
object-position: top;
}

  .BrandingArea__Link:is(a, a:link, a:visited) {
    column-gap: 16px;
    padding: 8px 16px;
    font-size: 0.875rem;
  }
}
@media (hover: hover) {
  .BrandingArea__Link:is(a, a:link, a:visited):where(:any-link, :enabled, summary):hover {
    background-color: var(--color-accent-dark);
  }
}
.BrandingArea__Link:is(a, a:link, a:visited).BrandingArea__Link--white {
  color: #000;
  background-color: #fff;
}
.BrandingArea__Link:is(a, a:link, a:visited).BrandingArea__Link--white::after {
  background-color: var(--color-accent);
}
.BrandingArea__Link:is(a, a:link, a:visited)::before {
  display: inline-block;
  content: "";
}
.BrandingArea__Link:is(a, a:link, a:visited)::after {
  display: inline-block;
  width: 1em;
  height: 1em;
  content: "";
  background-color: currentColor;
  transition-duration: var(--transition-fast);
  transition-property: transform background-color;
  -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 8.1 13.4"><polygon points="1.4,13.4 0,12 5.3,6.7 0,1.4 1.4,0 8.1,6.7 "/></svg>');
          mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 8.1 13.4"><polygon points="1.4,13.4 0,12 5.3,6.7 0,1.4 1.4,0 8.1,6.7 "/></svg>');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.BrandingArea__Link:is(a, a:link, a:visited)[target=_blank]::after {
  -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 12 12"><path d="M10,2V0v0H0v0v3v7h2v2h10V2H10z M1,3h8v6H1V3z M11,11H3v-1h7V3v0h1V11z"/></svg>');
          mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 12 12"><path d="M10,2V0v0H0v0v3v7h2v2h10V2H10z M1,3h8v6H1V3z M11,11H3v-1h7V3v0h1V11z"/></svg>');
}
@media (hover: hover) {
  .BrandingArea__Link:is(a, a:link, a:visited):where(:any-link, :enabled, summary):hover:not([target=_blank])::after {
    transform: translateX(2px);
  }
}

.BrandingArea__Controls {
  display: grid;
  grid-auto-flow: column;
  column-gap: 0.5em;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  margin-right: auto;
  margin-left: auto;
}
@media screen and (min-width: 768.02px), print {
  .BrandingArea__Controls {
    margin-top: 24px;
  }
}
@media screen and (max-width: 768px) {
  .BrandingArea__Controls {
    margin-top: 16px;
  }
}
.BrandingArea__Controls::before {
  width: 2em;
  /* 再生停止ボタンのサイズを確保して、インジケータが左右中央に配置されるようにする */
  content: "";
}

.BrandingAreaSIB { /* change 241003 */
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  justify-content: center;
  width: var(--content-width);
  margin-right: auto;
  margin-left: auto;
}

@media screen and (min-width: 768.02px), print {  /* change 240305 */
  .BrandingAreaSIB {
    height:100%;
    padding-top: 0;
    padding-right: calc(var(--arrow-size) + 24px);
    padding-bottom: 40px;
    padding-left: calc(var(--arrow-size) + 24px);
  }
}

@media screen and (max-width: 768px) {  /* change 231003 */
  .BrandingAreaSIB {
    padding-bottom: 40px;
    margin-top: auto;
  }
}

.BrandingAreaSIB img { /* change 240305 */
width:100%;
max-width:540px;
margin-bottom:auto;
}

.BrandingAreaMedia {
  margin: auto;
}

@media screen and (min-width :995px) and (max-width: 1304px) {  /* add 240305 */
.BrandingAreaSIB img {
max-width: 500px;
}
}

@media screen and (max-width: 994px) {  /* add 240305 */
.BrandingAreaSIB img {
max-width: 400px;
}

}
@media screen and (min-width: 768.02px), print {
  .BrandingAreaMedia {
    width: var(--content-width);
    padding-right: calc(var(--arrow-size) + 16px);
    padding-left: calc(var(--arrow-size) + 16px);
  }
}

@media screen and (max-width: 768px) {
  .BrandingAreaMedia {
    width: 86%;
  }
}

.BrandingAreaMedia__Text {
  max-width: 30em;
  font-size: clamp(1rem, 2vw, 1.3125rem);
  font-weight: bold;
  letter-spacing: 0.04em;
  filter: drop-shadow(0 0 4px #fff);
}

.BrandingAreaMedia__Title {
  display: block;
  height: clamp(4.5rem, 10.5vw, 9rem);
  filter: drop-shadow(0 0 4px #fff);
}
@media screen and (min-width: 768.02px), print {
  .BrandingAreaMedia__Title {
    margin-top: 48px;
    margin-bottom: 64px;
  }
}
@media screen and (max-width: 768px) {
  .BrandingAreaMedia__Title {
    margin-bottom: 48px;
  }
}

.FocusItem {
  --slash-width: 1.5em;
  position: relative;
  z-index: 0;
  overflow: hidden;
}
@media screen and (min-width: 768.02px), print {
  .FocusItem {
    --background-color-stop: 32%;
    padding-top: 64px;
    padding-bottom: 64px;
  }
}
@media screen and (max-width: 768px) {
  .FocusItem {
    --background-color-stop: 54%;
  }
  .FocusItem:first-child {
    padding-top: 48px;
  }
  .FocusItem:not(:first-child) {
    padding-top: 32px;
  }
  .FocusItem:not(:last-child) {
    padding-bottom: 32px;
  }
  .FocusItem:last-child {
    padding-bottom: 16px;
  }
}
.FocusItem:nth-child(odd) {
  --direction: 1;
  --background-image: linear-gradient(
    135deg,
    transparent calc(100% - var(--background-color-stop)),
    var(--color-background-accent) calc(100% - var(--background-color-stop))
  );
}
.FocusItem:nth-child(even) {
  --direction: -1;
  --background-image: linear-gradient(
    135deg,
    var(--color-background-accent) var(--background-color-stop),
    transparent var(--background-color-stop)
  );
}
.FocusItem::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  display: block;
  content: "";
  background-image: var(--background-image);
  opacity: var(--background-progress);
  transform: translateX(calc((1 - var(--background-progress)) * var(--direction) * 200px));
}

.FocusItem__Body {
  width: var(--content-width);
  margin-right: auto;
  margin-left: auto;
}
@media screen and (min-width: 768.02px), print {
  .FocusItem__Body {
    display: grid;
    column-gap: 10%;
  }
  .FocusItem:nth-child(odd) .FocusItem__Body {
    grid-template: "Image ." "Image ." "Image ." "Image ." 1fr/50% 1fr;
  }
  .FocusItem:nth-child(even) .FocusItem__Body {
    grid-template: ". Image" ". Image" ". Image" ". Image" 1fr/1fr 50%;
  }
  .FocusItem__Body > *:not(.FocusItem__Image) {
    opacity: var(--text-progress);
    transform: translateX(calc((1 - var(--text-progress)) * var(--direction) * 40px));
  }
  .FocusItem:nth-child(odd) .FocusItem__Body > *:not(.FocusItem__Image) {
    margin-right: 16%;
  }
  .FocusItem:nth-child(even) .FocusItem__Body > *:not(.FocusItem__Image) {
    margin-left: 20%;
  }
}

.FocusItem__Heading {
  position: relative;
}
@media screen and (min-width: 768.02px), print {
  .FocusItem__Heading {
    margin-top: 32px;
    font-size: 2.5rem;
  }
}
@media screen and (max-width: 768px) {
  .FocusItem__Heading {
    font-size: 1.625rem;
  }
}
.FocusItem__Heading::before {
  top: 0.1em;
  display: inline-block;
  width: var(--slash-width);
  height: 1em;
  content: "";
  background-color: var(--color-accent);
  -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 54.3 40"><path d="M0,40H14.317L54.3,0H40Z"/></svg>');
          mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 54.3 40"><path d="M0,40H14.317L54.3,0H40Z"/></svg>');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
@media screen and (min-width: 768.02px), print {
  .FocusItem__Heading::before {
    position: absolute;
    right: calc(100% + 0.1em);
  }
}
@media screen and (max-width: 768px) {
  .FocusItem__Heading::before {
    position: relative;
    margin-right: 0.2em;
  }
}

.FocusItem__Text {
  margin-top: 24px;
  font-size: 0.875rem;
  font-weight: bold;
  line-height: 1.7;
}

@media screen and (min-width: 768.02px), print {
  .FocusItem__Image {
    grid-area: Image;
  }
}
@media screen and (max-width: 768px) {
  .FocusItem__Image {
    margin-top: 24px;
  }
}
.FocusItem__Image img {
  width: 100%;
}

.FocusItem__Link:is(a, a:link, a:visited) {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  column-gap: 16px;
  align-items: center;
  padding: 12px 20px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background-color: var(--color-accent);
  transition-duration: var(--transition-fast);
  transition-property: background-color;
}
@media screen and (min-width: 768.02px), print {
  .FocusItem__Link:is(a, a:link, a:visited) {
    width: -moz-fit-content;
    width: fit-content;
    min-width: min(315px, 100%);
    font-size: 0.875rem;
  }
}
@media screen and (max-width: 768px) {
  .FocusItem__Link:is(a, a:link, a:visited) {
    width: 100%;
    max-width: 400px;
  }
}
.FocusItem__Link:is(a, a:link, a:visited)::before {
  content: "";
}
.FocusItem__Link:is(a, a:link, a:visited)::after {
  display: inline-block;
  width: 1em;
  height: 1em;
  content: "";
  background-color: currentColor;
  transition-duration: var(--transition-fast);
  transition-property: transform background-color;
  -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 8.1 13.4"><polygon points="1.4,13.4 0,12 5.3,6.7 0,1.4 1.4,0 8.1,6.7 "/></svg>');
          mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 8.1 13.4"><polygon points="1.4,13.4 0,12 5.3,6.7 0,1.4 1.4,0 8.1,6.7 "/></svg>');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.FocusItem__Link:is(a, a:link, a:visited)[target=_blank]::after {
  -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 12 12"><path d="M10,2V0v0H0v0v3v7h2v2h10V2H10z M1,3h8v6H1V3z M11,11H3v-1h7V3v0h1V11z"/></svg>');
          mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 12 12"><path d="M10,2V0v0H0v0v3v7h2v2h10V2H10z M1,3h8v6H1V3z M11,11H3v-1h7V3v0h1V11z"/></svg>');
}
@media (hover: hover) {
  .FocusItem__Link:is(a, a:link, a:visited):where(:any-link, :enabled, summary):hover:not([target=_blank])::after {
    transform: translateX(2px);
  }
}
.FocusItem__Link:is(a, a:link, a:visited)::after {
  display: inline-block;
  justify-self: end;
  color: inherit;
}
@media (hover: hover) {
  .FocusItem__Link:is(a, a:link, a:visited):where(:any-link, :enabled, summary):hover {
    background-color: var(--color-accent-dark);
  }
}
@media screen and (min-width: 768.02px), print {
  .FocusItem__Link {
    margin-top: 36px;
  }
}
@media screen and (max-width: 768px) {
  .FocusItem__Link {
    margin-top: 32px;
    margin-right: auto;
    margin-left: auto;
  }
}



.Highlights {
  background-image: linear-gradient(transparent 0 35%, var(--color-background-accent) 35% 100%);
}
@media screen and (min-width: 768.02px), print {
  .Highlights {
    padding-top: 40px;
    padding-bottom: 64px;
    margin-bottom: 64px;
  }
}
@media screen and (max-width: 768px) {
  .Highlights {
    padding-top: 32px;
    padding-bottom: 32px;
    margin-bottom: 32px;
  }
}

.Highlights__Inner {
  width: var(--content-width);
  margin-right: auto;
  margin-left: auto;
}

.Highlights__Heading {
  font-weight: bold;
}
@media screen and (min-width: 768.02px), print {
  .Highlights__Heading {
    font-size: 1.875rem;
  }
}
@media screen and (max-width: 768px) {
  .Highlights__Heading {
    font-size: 1.5rem;
  }
}

@media screen and (min-width: 768.02px), print {
  .Highlights__Slider {
    margin-top: 32px;
  }
}
@media screen and (max-width: 768px) {
  .Highlights__Slider {
    margin-top: 24px;
  }
}

:where(.Highlights) {
  --slide-count: 4;
}
@media screen and (min-width: 768.02px), print {
  :where(.Highlights) {
    --slide-gap: 2%;
  }
}
@media screen and (max-width: 768px) {
  :where(.Highlights) {
    --slide-gap: 24px;
  }
}
:where(.Highlights) .splide {
  margin-right: auto;
  margin-left: auto;
  overflow: hidden;
}
@media screen and (min-width: 768.02px), print {
  :where(.Highlights) .splide {
    width: var(--content-width);
  }
}
@media screen and (max-width: 768px) {
  :where(.Highlights) .splide {
    padding-right: 4%;
    padding-left: 4%;
  }
}
:where(.Highlights) .splide__track {
  overflow: visible;
}
:where(.Highlights) .splide__slide {
  margin-right: var(--slide-gap);
}
@media screen and (min-width: 768.02px), print {
  :where(.Highlights) .splide__slide {
    width: calc((100% - var(--slide-gap) * (var(--slide-count) - 1)) / var(--slide-count));
  }
}
@media screen and (max-width: 768px) {
  :where(.Highlights) .splide__slide {
    width: 288px;
  }
}
:where(.Highlights) .splide__arrows {
  display: none;
}
:where(.Highlights) .splide__pagination {
  margin-top: 24px;
}
:where(.Highlights) .splide__pagination__page {
  padding: 0.5em;
}
:where(.Highlights) .splide__pagination__page::after {
  display: block;
  width: 1em;
  height: 1em;
  content: "";
  background-color: #fff;
  border: 1px solid var(--color-border);
  border-radius: 50%;
}
:where(.Highlights) .splide__pagination__page.is-active::after {
  background-color: var(--color-accent);
  border-color: transparent;
  transform: scale(1.4);
}

.HighlightsMenu {
  /* 読み込みによるレイアウトシフトを軽減する */
}
.HighlightsMenu:not(:has(*)) {
  display: block;
  min-height: 200px;
  content: "";
}
.HighlightsMenu a {
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
  height: 100%;
  padding-bottom: 1rem;
  background-color: #fff;
  transition-duration: var(--transition-fast);
  transition-property: background-color, color;
}
.HighlightsMenu a::after {
  display: inline-block;
  width: 1em;
  height: 1em;
  content: "";
  background-color: currentColor;
  transition-duration: var(--transition-fast);
  transition-property: transform background-color;
  -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 8.1 13.4"><polygon points="1.4,13.4 0,12 5.3,6.7 0,1.4 1.4,0 8.1,6.7 "/></svg>');
          mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 8.1 13.4"><polygon points="1.4,13.4 0,12 5.3,6.7 0,1.4 1.4,0 8.1,6.7 "/></svg>');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.HighlightsMenu a[target=_blank]::after {
  -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 12 12"><path d="M10,2V0v0H0v0v3v7h2v2h10V2H10z M1,3h8v6H1V3z M11,11H3v-1h7V3v0h1V11z"/></svg>');
          mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 12 12"><path d="M10,2V0v0H0v0v3v7h2v2h10V2H10z M1,3h8v6H1V3z M11,11H3v-1h7V3v0h1V11z"/></svg>');
}
@media (hover: hover) {
  .HighlightsMenu a:where(:any-link, :enabled, summary):hover:not([target=_blank])::after {
    transform: translateX(2px);
  }
}
.HighlightsMenu a::after {
  position: absolute;
  right: 12px;
  bottom: 12px;
  font-size: 0.75rem;
  color: var(--color-accent);
}
@media (hover: hover) {
  .HighlightsMenu a:where(:any-link, :enabled, summary):hover {
    color: #fff;
    background-color: var(--color-accent);
  }
  .HighlightsMenu a:where(:any-link, :enabled, summary):hover::after {
    color: #fff;
  }
}
.HighlightsMenu .HighlightsImg {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 61.804697157%;
}
.HighlightsMenu .HighlightsImg > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: top;
  background-size: cover;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
}
.HighlightsMenu .HighlightsText {
  position: relative;
  padding: 12px 6%;
  font-size: 0.875rem;
  font-weight: bold;
  line-height: 1.5;
}

.Highlights__Link {
  margin-right: auto;
  margin-left: auto;
}
.Highlights__Link:is(a, a:link, a:visited) {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  column-gap: 16px;
  align-items: center;
  padding: 12px 20px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background-color: var(--color-accent);
  transition-duration: var(--transition-fast);
  transition-property: background-color;
}
@media screen and (min-width: 768.02px), print {
  .Highlights__Link:is(a, a:link, a:visited) {
    width: -moz-fit-content;
    width: fit-content;
    min-width: min(315px, 100%);
    font-size: 0.875rem;
  }
}
@media screen and (max-width: 768px) {
  .Highlights__Link:is(a, a:link, a:visited) {
    width: 100%;
    max-width: 400px;
  }
}
.Highlights__Link:is(a, a:link, a:visited)::before {
  content: "";
}
.Highlights__Link:is(a, a:link, a:visited)::after {
  display: inline-block;
  width: 1em;
  height: 1em;
  content: "";
  background-color: currentColor;
  transition-duration: var(--transition-fast);
  transition-property: transform background-color;
  -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 8.1 13.4"><polygon points="1.4,13.4 0,12 5.3,6.7 0,1.4 1.4,0 8.1,6.7 "/></svg>');
          mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 8.1 13.4"><polygon points="1.4,13.4 0,12 5.3,6.7 0,1.4 1.4,0 8.1,6.7 "/></svg>');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.Highlights__Link:is(a, a:link, a:visited)[target=_blank]::after {
  -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 12 12"><path d="M10,2V0v0H0v0v3v7h2v2h10V2H10z M1,3h8v6H1V3z M11,11H3v-1h7V3v0h1V11z"/></svg>');
          mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 12 12"><path d="M10,2V0v0H0v0v3v7h2v2h10V2H10z M1,3h8v6H1V3z M11,11H3v-1h7V3v0h1V11z"/></svg>');
}
@media (hover: hover) {
  .Highlights__Link:is(a, a:link, a:visited):where(:any-link, :enabled, summary):hover:not([target=_blank])::after {
    transform: translateX(2px);
  }
}
.Highlights__Link:is(a, a:link, a:visited)::after {
  display: inline-block;
  justify-self: end;
  color: inherit;
}
@media (hover: hover) {
  .Highlights__Link:is(a, a:link, a:visited):where(:any-link, :enabled, summary):hover {
    background-color: var(--color-accent-dark);
  }
}
@media screen and (min-width: 768.02px), print {
  .Highlights__Link {
    margin-top: 50px;
  }
}
@media screen and (max-width: 768px) {
  .Highlights__Link {
    margin-top: 24px;
  }
}

.News {
  --item-padding-block: 24px;
  background-color: var(--color-background-accent);
}
@media screen and (min-width: 768.02px), print {
  .News {
    --item-padding-inline: 32px;
    padding-top: 70px;
    padding-bottom: 90px;
  }
}
@media screen and (max-width: 768px) {
  .News {
    --item-padding-inline: 24px;
    padding-top: 40px;
    padding-bottom: 60px;
  }
}

.News__Section {
  width: var(--content-width);
  margin-right: auto;
  margin-left: auto;
}
@media screen and (min-width: 768.02px), print {
  .News__Section:not(:first-child) {
    margin-top: 56px;
  }
}
@media screen and (max-width: 768px) {
  .News__Section:not(:first-child) {
    margin-top: 24px;
  }
}

.News__SectionHeading {
  font-weight: bold;
}
@media screen and (min-width: 768.02px), print {
  .News__SectionHeading {
    font-size: 1.875rem;
  }
}
@media screen and (max-width: 768px) {
  .News__SectionHeading {
    font-size: 1.5rem;
  }
}

.News__Icon {
  position: relative;
  top: 0.1em;
  width: auto;
  height: 1em;
  margin-top: 0.1em;
  margin-right: 0.3em;
  vertical-align: baseline;
}

.News__DateList {
  background-color: #fff;
}
.News__DateList:where(:not(:first-child)) {
  margin-top: 16px;
}
.News__DateList li {
  padding: var(--item-padding-block) var(--item-padding-inline);
}
@media screen and (min-width: 768.02px), print {
  .News__DateList li {
    display: grid;
    grid-template-columns: 9.5rem 1fr;
  }
}
.News__DateList li:where(:not(:first-child)) {
  position: relative;
}
.News__DateList li:where(:not(:first-child))::before {
  position: absolute;
  top: 0;
  right: var(--item-padding-inline);
  left: var(--item-padding-inline);
  display: block;
  content: "";
  border-top: 1px solid var(--color-border);
}
.News__DateList li .NewsDate {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: bold;
}
.News__DateList li .NewsText {
  position: relative;
  font-size: 0.875rem;
}
@media screen and (min-width: 768.02px), print {
  .News__DateList li .NewsText {
    padding-left: 32px;
  }
  .News__DateList li .NewsText::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: block;
    content: "";
    border-left: 2px solid var(--color-border);
  }
}
.News__DateList li .NewsLink {
  transition-duration: var(--transition-fast);
  transition-property: color;
}
@media (hover: hover) {
  .News__DateList li .NewsLink:where(:any-link, :enabled, summary):hover {
    color: var(--color-accent);
    text-decoration: underline;
  }
}
.News__DateList li .NewsIcon {
  display: inline-block;
  width: auto;
  height: 1em;
  margin-left: 8px;
  vertical-align: text-top;
}

.News__List {
  margin-top: 16px;
  background-color: #fff;
}
.News__List > li {
  position: relative;
  padding: var(--item-padding-block) var(--item-padding-inline);
}
.News__List > li:where(:not(:first-child))::before {
  position: absolute;
  top: 0;
  right: var(--item-padding-inline);
  left: var(--item-padding-inline);
  display: block;
  content: "";
  border-top: 1px solid var(--color-border);
}
.News__List > li :any-link {
  font-size: 0.875rem;
  transition-duration: var(--transition-fast);
  transition-property: color;
}
.News__List > li :any-link::after {
  display: inline-block;
  width: 1em;
  height: 1em;
  content: "";
  background-color: currentColor;
  transition-duration: var(--transition-fast);
  transition-property: transform background-color;
  -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 8.1 13.4"><polygon points="1.4,13.4 0,12 5.3,6.7 0,1.4 1.4,0 8.1,6.7 "/></svg>');
          mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 8.1 13.4"><polygon points="1.4,13.4 0,12 5.3,6.7 0,1.4 1.4,0 8.1,6.7 "/></svg>');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.News__List > li :any-link[target=_blank]::after {
  -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 12 12"><path d="M10,2V0v0H0v0v3v7h2v2h10V2H10z M1,3h8v6H1V3z M11,11H3v-1h7V3v0h1V11z"/></svg>');
          mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 12 12"><path d="M10,2V0v0H0v0v3v7h2v2h10V2H10z M1,3h8v6H1V3z M11,11H3v-1h7V3v0h1V11z"/></svg>');
}
@media (hover: hover) {
  .News__List > li :any-link:where(:any-link, :enabled, summary):hover:not([target=_blank])::after {
    transform: translateX(2px);
  }
}
.News__List > li :any-link::after {
  margin-left: 0.2em;
  font-size: 0.75rem;
  color: var(--color-accent);
}
@media (hover: hover) {
  .News__List > li :any-link:where(:any-link, :enabled, summary):hover {
    color: var(--color-accent);
    text-decoration: underline;
  }
}

.News__ToList:is(a, a:link, a:visited) {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.5em;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  font-size: 0.875rem;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  transition-duration: var(--transition-fast);
  transition-property: color;
}
@media screen and (min-width: 768.02px), print {
  .News__ToList:is(a, a:link, a:visited) {
    margin-top: 16px;
  }
}
@media screen and (max-width: 768px) {
  .News__ToList:is(a, a:link, a:visited) {
    margin-top: 8px;
  }
}
.News__ToList:is(a, a:link, a:visited)::after {
  display: inline-block;
  width: 1em;
  height: 1em;
  content: "";
  background-color: currentColor;
  transition-duration: var(--transition-fast);
  transition-property: transform background-color;
  -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 8.1 13.4"><polygon points="1.4,13.4 0,12 5.3,6.7 0,1.4 1.4,0 8.1,6.7 "/></svg>');
          mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 8.1 13.4"><polygon points="1.4,13.4 0,12 5.3,6.7 0,1.4 1.4,0 8.1,6.7 "/></svg>');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.News__ToList:is(a, a:link, a:visited)[target=_blank]::after {
  -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 12 12"><path d="M10,2V0v0H0v0v3v7h2v2h10V2H10z M1,3h8v6H1V3z M11,11H3v-1h7V3v0h1V11z"/></svg>');
          mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 12 12"><path d="M10,2V0v0H0v0v3v7h2v2h10V2H10z M1,3h8v6H1V3z M11,11H3v-1h7V3v0h1V11z"/></svg>');
}
@media (hover: hover) {
  .News__ToList:is(a, a:link, a:visited):where(:any-link, :enabled, summary):hover:not([target=_blank])::after {
    transform: translateX(2px);
  }
}
.News__ToList:is(a, a:link, a:visited)::after {
  color: var(--color-accent);
}
@media (hover: hover) {
  .News__ToList:is(a, a:link, a:visited):where(:any-link, :enabled, summary):hover {
    color: var(--color-accent);
    text-decoration: underline;
  }
}

.Products {
  position: relative;
  z-index: 0;
  overflow: hidden;
}
@media screen and (min-width: 768.02px), print {
  .Products {
    padding-top: 110px;
    padding-bottom: 120px;
  }
}
@media screen and (max-width: 768px) {
  .Products {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

.Products__Inner {
  width: var(--content-width);
  margin-right: auto;
  margin-left: auto;
}

.Products__Heading {
  font-weight: bold;
}
@media screen and (min-width: 768.02px), print {
  .Products__Heading {
    font-size: 2.5rem;
    text-align: center;
  }
}
@media screen and (max-width: 768px) {
  .Products__Heading {
    font-size: 1.625rem;
  }
}
.Products__Heading::before {
  position: relative;
  top: 0.1em;
  display: inline-block;
  width: 1.5em;
  height: 1em;
  margin-right: 0.2em;
  content: "";
  background-color: var(--color-accent);
  -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 54.3 40"><path d="M0,40H14.317L54.3,0H40Z"/></svg>');
          mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 54.3 40"><path d="M0,40H14.317L54.3,0H40Z"/></svg>');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.Products__List {
  display: grid;
}
@media screen and (min-width: 768.02px), print {
  .Products__List {
    grid-template-columns: repeat(4, 1fr);
    row-gap: 24px;
    column-gap: 2%;
    justify-content: center;
    margin-top: 50px;
  }
}
@media screen and (min-width: 768.02px) and (max-width: 1305px) {
  .Products__List {
    grid-template-columns: repeat(2, 320px);
  }
}
@media screen and (max-width: 768px) {
  .Products__List {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 24px;
  }
}

.Products__Link {
  margin-right: auto;
  margin-left: auto;
}
.Products__Link:is(a, a:link, a:visited) {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  column-gap: 16px;
  align-items: center;
  padding: 12px 20px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background-color: var(--color-accent);
  transition-duration: var(--transition-fast);
  transition-property: background-color;
}
@media screen and (min-width: 768.02px), print {
  .Products__Link:is(a, a:link, a:visited) {
    width: -moz-fit-content;
    width: fit-content;
    min-width: min(315px, 100%);
    font-size: 0.875rem;
  }
}
@media screen and (max-width: 768px) {
  .Products__Link:is(a, a:link, a:visited) {
    width: 100%;
    max-width: 400px;
  }
}
.Products__Link:is(a, a:link, a:visited)::before {
  content: "";
}
.Products__Link:is(a, a:link, a:visited)::after {
  display: inline-block;
  width: 1em;
  height: 1em;
  content: "";
  background-color: currentColor;
  transition-duration: var(--transition-fast);
  transition-property: transform background-color;
  -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 8.1 13.4"><polygon points="1.4,13.4 0,12 5.3,6.7 0,1.4 1.4,0 8.1,6.7 "/></svg>');
          mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 8.1 13.4"><polygon points="1.4,13.4 0,12 5.3,6.7 0,1.4 1.4,0 8.1,6.7 "/></svg>');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.Products__Link:is(a, a:link, a:visited)[target=_blank]::after {
  -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 12 12"><path d="M10,2V0v0H0v0v3v7h2v2h10V2H10z M1,3h8v6H1V3z M11,11H3v-1h7V3v0h1V11z"/></svg>');
          mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 12 12"><path d="M10,2V0v0H0v0v3v7h2v2h10V2H10z M1,3h8v6H1V3z M11,11H3v-1h7V3v0h1V11z"/></svg>');
}
@media (hover: hover) {
  .Products__Link:is(a, a:link, a:visited):where(:any-link, :enabled, summary):hover:not([target=_blank])::after {
    transform: translateX(2px);
  }
}
.Products__Link:is(a, a:link, a:visited)::after {
  display: inline-block;
  justify-self: end;
  color: inherit;
}
@media (hover: hover) {
  .Products__Link:is(a, a:link, a:visited):where(:any-link, :enabled, summary):hover {
    background-color: var(--color-accent-dark);
  }
}
@media screen and (min-width: 768.02px), print {
  .Products__Link {
    margin-top: 80px;
  }
}
@media screen and (max-width: 768px) {
  .Products__Link {
    margin-top: 36px;
  }
}

.ProductsCard {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
}
@media screen and (min-width: 768.02px), print {
  .ProductsCard {
    min-height: 224px;
  }
}
@media screen and (max-width: 768px) {
  .ProductsCard {
    min-height: 180px;
  }
}

.ProductsCard__Label {
  display: grid;
  grid-auto-flow: column;
  column-gap: 3%;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #fff;
  text-align: center;
  background-color: #000;
}
@media screen and (min-width: 768.02px), print {
  .ProductsCard__Label {
    padding: 12px 8px;
  }
}
@media screen and (max-width: 768px) {
  .ProductsCard__Label {
    padding: 8px 8px;
  }
}
.ProductsCard__Label::after {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-bottom: 0.1em;
  content: "";
  background-color: currentColor;
  transition-duration: var(--transition-fast);
  transition-property: transform;
  -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 8.1 13.4"><polygon points="1.4,13.4 0,12 5.3,6.7 0,1.4 1.4,0 8.1,6.7 "/></svg>');
          mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 8.1 13.4"><polygon points="1.4,13.4 0,12 5.3,6.7 0,1.4 1.4,0 8.1,6.7 "/></svg>');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
@media screen and (min-width: 768.02px), print {
  .ProductsCard__Label::after {
    font-size: 1em;
  }
}
@media screen and (max-width: 768px) {
  .ProductsCard__Label::after {
    font-size: 0.8em;
  }
}
@media (hover: hover) {
  :where(:any-link, :enabled, summary):hover .ProductsCard__Label::after {
    transform: translateX(2px);
  }
}

.ProductsCard__Image {
  position: relative;
  z-index: 0;
  grid-area: 2/1;
  transform: translateZ(0);
}
.ProductsCard__Image > img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}

.ProductsCard__Content {
  display: grid;
  grid-area: 2/1;
  padding: 40px 24px 40px;
  font-size: 0.875rem;
  color: #fff;
  background-color: rgba(0, 18, 14, 0.6);
  opacity: 0;
  transition-duration: var(--transition-fast);
  transition-property: opacity;
  -webkit-backdrop-filter: brightness(114%) blur(15px);
          backdrop-filter: brightness(114%) blur(15px);
}
@media (hover: hover) {
  :where(:any-link, :enabled, summary):hover .ProductsCard__Content {
    opacity: 1;
  }
}
:any-link:focus-visible .ProductsCard__Content {
  opacity: 1;
}
@media screen and (max-width: 768px) {
  .ProductsCard__Content {
    display: none;
  }
}

.Related {
  background-image: linear-gradient(transparent 0 35%, var(--color-background-accent) 35% 100%);
}
@media screen and (min-width: 768.02px), print {
  .Related {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}
@media screen and (max-width: 768px) {
  .Related {
    padding-top: 32px;
    padding-bottom: 40px;
  }
}

.Related__Heading {
  /* 共通スタイルより詳細度を上げる */
}
.Related__Heading:is(h2) {
  width: var(--content-width);
  margin-right: auto;
  margin-left: auto;
  font-weight: bold;
}
@media screen and (min-width: 768.02px), print {
  .Related__Heading:is(h2) {
    font-size: 1.875rem;
  }
}
@media screen and (max-width: 768px) {
  .Related__Heading:is(h2) {
    font-size: 1.5rem;
  }
}

@media screen and (min-width: 768.02px), print {
  .Related__Slider {
    margin-top: 32px;
  }
}
@media screen and (max-width: 768px) {
  .Related__Slider {
    margin-top: 24px;
  }
}

.Related__Card:where(a) {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  padding-bottom: 1rem;
  background-color: #fff;
  transition-duration: var(--transition-fast);
  transition-property: background-color, color;
}
.Related__Card:where(a)::after {
  display: inline-block;
  width: 1em;
  height: 1em;
  content: "";
  background-color: currentColor;
  transition-duration: var(--transition-fast);
  transition-property: transform background-color;
  -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 8.1 13.4"><polygon points="1.4,13.4 0,12 5.3,6.7 0,1.4 1.4,0 8.1,6.7 "/></svg>');
          mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 8.1 13.4"><polygon points="1.4,13.4 0,12 5.3,6.7 0,1.4 1.4,0 8.1,6.7 "/></svg>');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.Related__Card:where(a)[target=_blank]::after {
  -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 12 12"><path d="M10,2V0v0H0v0v3v7h2v2h10V2H10z M1,3h8v6H1V3z M11,11H3v-1h7V3v0h1V11z"/></svg>');
          mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 12 12"><path d="M10,2V0v0H0v0v3v7h2v2h10V2H10z M1,3h8v6H1V3z M11,11H3v-1h7V3v0h1V11z"/></svg>');
}
@media (hover: hover) {
  .Related__Card:where(a):where(:any-link, :enabled, summary):hover:not([target=_blank])::after {
    transform: translateX(2px);
  }
}
.Related__Card:where(a)::after {
  position: absolute;
  right: 12px;
  bottom: 12px;
  font-size: 0.75rem;
  color: var(--color-accent);
}
@media (hover: hover) {
  .Related__Card:where(a):where(:any-link, :enabled, summary):hover {
    color: #fff;
    background-color: var(--color-accent);
  }
  .Related__Card:where(a):where(:any-link, :enabled, summary):hover::after {
    color: #fff;
  }
}

.Related__Card__Image {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 44.4444444444%;
}
.Related__Card__Image > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.Related__Card__Text {
  position: relative;
  padding: 20px 8%;
  font-size: 0.75rem;
  line-height: 1.5;
}

.Related__Card__Title {
  margin-bottom: 10px;
  font-size: 1rem;
  font-weight: bold;
}

:where(.Related) {
  --slide-arrow-position: clamp(0%, 100vw - 1305px, 1%);
  --slide-arrow-size: 16px;
  --slide-count: 4;
}
@media screen and (min-width: 768.02px), print {
  :where(.Related) {
    --slide-gap: 2%;
  }
}
@media screen and (max-width: 768px) {
  :where(.Related) {
    --slide-gap: 24px;
  }
}
:where(.Related) .splide {
  margin-right: auto;
  margin-left: auto;
}
@media screen and (min-width: 768.02px), print {
  :where(.Related) .splide {
    width: var(--content-width);
  }
}
@media screen and (max-width: 768px) {
  :where(.Related) .splide {
    padding-right: 4%;
    padding-left: 4%;
    overflow: hidden;
  }
}
:where(.Related) .splide__slider {
  position: relative;
}
@media screen and (max-width: 768px) {
  :where(.Related) .splide__track {
    overflow: visible;
  }
}
:where(.Related) .splide__slide:not(:last-child) {
  margin-right: var(--slide-gap);
}
@media screen and (min-width: 768.02px), print {
  :where(.Related) .splide__slide {
    width: calc((100% - var(--slide-gap) * (var(--slide-count) - 1)) / var(--slide-count));
  }
}
@media screen and (max-width: 768px) {
  :where(.Related) .splide__slide {
    width: 288px;
  }
}
:where(.Related) .splide__arrows {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  margin-right: auto;
  margin-left: auto;
}
@media screen and (max-width: 768px) {
  :where(.Related) .splide__arrows {
    display: none;
  }
}
:where(.Related) .splide:not(.is-overflow) .splide__arrows {
  display: none;
}
:where(.Related) .splide__arrow {
  position: absolute;
  padding: calc(var(--slide-arrow-size) / 2);
  color: var(--color-accent);
}
:where(.Related) .splide__arrow.splide__arrow--prev {
  right: calc(100% + var(--slide-arrow-position));
  transform: translateY(-50%) scaleX(-1);
}
:where(.Related) .splide__arrow.splide__arrow--next {
  left: calc(100% + var(--slide-arrow-position));
  transform: translateY(-50%);
}
:where(.Related) .splide__arrow:disabled {
  opacity: 0.12;
}
:where(.Related) .splide__arrow::after {
  display: block;
  width: var(--slide-arrow-size);
  height: var(--slide-arrow-size);
  content: "";
  background-color: currentColor;
  -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 48"><path d="M0,0H15.931L40,24.063h0L15.931,48H0L24.066,24.066Z"/></svg>');
          mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 48"><path d="M0,0H15.931L40,24.063h0L15.931,48H0L24.066,24.066Z"/></svg>');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
@media screen and (min-width: 768.02px), print {
  :where(.Related) .splide__pagination {
    margin-top: 40px;
  }
}
@media screen and (max-width: 768px) {
  :where(.Related) .splide__pagination {
    margin-top: 24px;
  }
}
:where(.Related) .splide__pagination__page {
  padding: 0.5em;
}
:where(.Related) .splide__pagination__page::after {
  display: block;
  width: 1em;
  height: 1em;
  content: "";
  background-color: #fff;
  border: 1px solid var(--color-border);
  border-radius: 50%;
}
:where(.Related) .splide__pagination__page.is-active::after {
  background-color: var(--color-accent);
  border-color: transparent;
  transform: scale(1.4);
}

.inline-block {
  display: inline-block !important;
}

@media screen and (min-width: 768.02px), print {
  .pc\:inline-block {
    display: inline-block;
  }
}

@media screen and (min-width: 768.02px), print {
  .pc\:hidden {
    display: none !important;
  }
}

@media screen and (max-width: 768px) {
  .sp\:hidden {
    display: none !important;
  }
}

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

.relative {
  position: relative;
}





/* add 2025.01.22 for people06
------------------------------*/
.people06 .BrandingArea__Background img{
object-position:50% 0;
}

.BrandingAreaPeople06{
display: flex;
flex-direction: column;
align-items: center;
align-self: center;
justify-content: flex-start;
width: var(--content-width);
height:100%;
padding-top:15px;
margin-right: auto;
margin-left: auto;
}
.BrandingAreaPeople06 > img{
width:528px;
}

.BrandingAreaPeople06 > p{
position:absolute;
bottom:30px;
}

.BrandingAreaPeople06 a:hover{
opacity:0.95;
}

@media screen and (max-width: 994px) {
.BrandingAreaPeople06 > img{
width:528px;
max-width:60%;
}

.people06 .BrandingAreaPeople06 > p{
bottom: 30px;
text-align:center;
}

.people06 .BrandingAreaPeople06 > p img{
width:803px;
max-width:80%;
}

}

/* add 2025.04.21 for itn
------------------------------*/
.itn *{
font-family: 'Hitachi Sans', 'Noto Sans JP', 'Yu Gothic UI', serif;
}

.itn .BrandingAreaMedia{
height:100%;
display:flex;
flex-direction:column;
justify-content:center;
box-sizing:border-box;
}

.itn .BrandingAreaMedia__Text{
display:block;
max-width:100%;
margin-top:auto;
padding-top:1.5rem;
color:#fff;
font-size: clamp(1.0625rem, -0.4375rem + 2.5vw, 1.6875rem);
line-height:270%;
filter:none;
}

.itn .BrandingAreaMedia__Text span.HS{
margin-right:0.2em;
}

.itn .BrandingAreaMedia__Title{
height: auto;
margin-top:4.5rem;
margin-bottom:auto;
filter:none;
}

@media screen and (max-width: 768px) {
.itn .BrandingArea__Background img {
object-position:bottom;

}
}