@charset "UTF-8";
body {
  background-color: #EAEBEF;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: rgb(0, 0, 0);
  line-height: 1.8;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; /* Safari */
  /* background-color: var.$color-text-base;
    @include var.clearfix;*/
}

*, *:before, *:after {
  box-sizing: border-box;
}

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

p {
  margin: 1em auto;
}

._underLine {
  text-decoration: underline;
}

.Layout__body a {
  text-decoration: underline;
}

a:hover {
  text-decoration: underline;
}

._color-key {
  color: #ED6E0A;
}

._color-key-logo {
  color: #E95613;
}

._color-attention {
  color: #FF0000;
}

.Layout ._horizontal-left {
  text-align: left;
}

.Layout ._text-center,
.Layout ._horizontal-center {
  text-align: center;
}

.Layout ._text-right,
.Layout ._horizontal-right {
  text-align: right;
}

@media screen and (max-width: 768px) {
  .Layout ._pcOnly {
    display: none;
  }
}

@media screen and (min-width: 769px) {
  .Layout ._spOnly {
    display: none;
  }
}

.Layout {
  min-height: 100vh;
}
@media screen and (max-width: 1000px) {
  .Layout {
    min-height: -webkit-fill-available;
  }
}

.Container {
  width: 100%;
  margin: 0 auto;
}

section {
  width: 100%;
}

#sec01,
#sec02,
#sec03,
#sec04,
#sec05 {
  scroll-margin-top: 40px;
}

.contentWrapper {
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .contentWrapper {
    padding: 40px 16px 56px;
  }
}
@media screen and (min-width: 769px) {
  .contentWrapper {
    padding: 80px 24px;
  }
}

.contentWrapper._normal {
  max-width: 1360px;
}

.contentWrapper._middle {
  max-width: 1136px;
}

.Grid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

._interval-normal {
  column-gap: 24px;
}

.Grid._interval-normal .Grid__item._col8 {
  width: calc((100% - 168px) / 8 * 8 + 192px);
}

.Grid._interval-normal .Grid__item._col7 {
  width: calc((100% - 168px) / 8 * 7 + 144px);
}

.Grid._interval-normal .Grid__item._col6 {
  width: calc((100% - 168px) / 8 * 6 + 120px);
}

.Grid._interval-normal .Grid__item._col5 {
  width: calc((100% - 168px) / 8 * 5 + 96px);
}

.Grid._interval-normal .Grid__item._col4 {
  width: calc((100% - 168px) / 8 * 4 + 72px);
}

.Grid._interval-normal .Grid__item._col3 {
  width: calc((100% - 168px) / 8 * 3 + 48px);
}

.Grid._interval-normal .Grid__item._col2 {
  width: calc((100% - 168px) / 8 * 2 + 24px);
}
.Grid._interval-normal .Grid__item._col1 {
  width: calc((100% - 168px) / 8 * 1 + 0px);
}

@media screen and (max-width: 1000px) {
  .Grid._interval-normal .Grid__item._md-col1 {
    width: 100% !important;
  }
}

@media screen and (max-width: 768px) {
  .Grid._interval-normal .Grid__item._sp-col1 {
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .Grid._interval-normal .Grid__item._sp-col4 {
    width: calc((100% - 168px) / 8 * 4 + 72px);
  }
}

.Grid._form ._interval-normal {
  column-gap: 24px;
  row-gap: 8px;
}

.Grid._interval-normal .Grid__item._auto {
  flex: 1;
}

.Grid._center,
.Grid__item._center {
  justify-content: center;
}

.Grid._form._interval-normal {
  row-gap: 8px;
}
@media screen and (max-width: 768px) {
  .Grid._form._interval-normal {
    column-gap: 8px;
  }
}
@media screen and (min-width: 769px) {
  .Grid._form._interval-normal {
    column-gap: 24px;
  }
}

.Grid._form._interval-normal .Grid__item._col1of4 {
  width: calc((100% - 72px) / 4);
}
@media screen and (max-width: 768px) {
  .Grid._form._interval-normal .Grid__item._col1of4 {
    width: calc((100% - 24px) / 2);
  }
}

.Grid._form._interval-normal .Grid__item._col1of3 {
  width: calc((100% - 48px) / 3);
}
@media screen and (max-width: 768px) {
  .Grid._form._interval-normal .Grid__item._col1of3 {
    width: calc((100% - 24px) / 2);
  }
}

.Grid._form._interval-normal .Grid__item._col1of2 {
  width: calc((100% - 24px) / 2);
}

.Grid._form._interval-normal .Grid__item._col1of1 {
  width: 100%;
}

@media screen and (max-width: 768px) {
  .Grid._form._interval-normal .Grid__item._col1of1-sp {
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .MarginBlock._4xl {
    margin-bottom: 60px;
  }
}
@media screen and (min-width: 769px) {
  .MarginBlock._4xl {
    margin-bottom: 80px;
  }
}

@media screen and (max-width: 768px) {
  .MarginBlock._3xl {
    margin-bottom: 24px;
  }
}
@media screen and (min-width: 769px) {
  .MarginBlock._3xl {
    margin-bottom: 40px;
  }
}

@media screen and (max-width: 768px) {
  .MarginBlock._2xl {
    margin-bottom: 20px;
  }
}
@media screen and (min-width: 769px) {
  .MarginBlock._2xl {
    margin-bottom: 32px;
  }
}

@media screen and (max-width: 768px) {
  .MarginBlock._xl {
    margin-bottom: 20px;
  }
}
@media screen and (min-width: 769px) {
  .MarginBlock._xl {
    margin-bottom: 24px;
  }
}

.MarginBlock._base {
  margin-bottom: 16px;
}

.MarginBlock._sm {
  margin-bottom: 8px;
}

.MarginBlock._xs {
  margin-bottom: 4px;
}

@media screen and (max-width: 768px) {
  .MarginBlockTop._4xl {
    margin-top: 60px;
  }
}
@media screen and (min-width: 769px) {
  .MarginBlockTop._4xl {
    margin-top: 80px;
  }
}

@media screen and (max-width: 768px) {
  .MarginBlockTop._3xl {
    margin-top: 24px;
  }
}
@media screen and (min-width: 769px) {
  .MarginBlockTop._3xl {
    margin-top: 40px;
  }
}

@media screen and (max-width: 768px) {
  .MarginBlockTop._2xl {
    margin-top: 20px;
  }
}
@media screen and (min-width: 769px) {
  .MarginBlockTop._2xl {
    margin-top: 32px;
  }
}

@media screen and (max-width: 768px) {
  .MarginBlockTop._xl {
    margin-top: 20px;
  }
}
@media screen and (min-width: 769px) {
  .MarginBlockTop._xl {
    margin-top: 24px;
  }
}

.MarginBlockTop._base {
  margin-top: 16px;
}

.MarginBlockTop._sm {
  margin-top: 8px;
}

.MarginBlockTop._xs {
  margin-top: 4px;
}

/*
===== Band =====
*/
.Band._light-blue {
  background-color: #60D0EA;
}

.Band._key-secondary {
  background-color: #F18B3B;
}

.Band._light-gray {
  background-color: #F7F7F7;
}

.Band._footer-gray2 {
  background-color: #383838;
}

/*
===== SiteHeader =====
*/
.SiteHeader {
  position: relative;
  display: flex;
  width: 100%;
  z-index: 3;
}

.SiteHeader__logo {
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  background-color: #FFF;
  border-radius: 0 0 16px 0;
}
@media screen and (max-width: 768px) {
  .SiteHeader__logo {
    width: 232px;
    height: 56px;
    padding: 12px 13px;
  }
}
@media screen and (min-width: 769px) {
  .SiteHeader__logo {
    width: 428px;
    height: 96px;
    padding: 23px 40px;
  }
}

.SiteHeader__logo a,
.SiteHeader__logo img {
  display: block;
}
@media screen and (max-width: 768px) {
  .SiteHeader__logo a,
  .SiteHeader__logo img {
    width: 208px;
    height: 30px;
  }
}
@media screen and (min-width: 769px) {
  .SiteHeader__logo a,
  .SiteHeader__logo img {
    width: 347px;
    height: 50px;
  }
}

.SiteHeader__button {
  position: fixed;
  column-gap: 0 !important;
  row-gap: 0 !important;
  margin: 0 !important;
}
@media screen and (max-width: 768px) {
  .SiteHeader__button {
    top: 4px;
    right: 54px;
  }
}
@media screen and (min-width: 769px) {
  .SiteHeader__button {
    top: 8px;
    right: 84px;
  }
}

.SiteHeader__button .ButtonContainer__item._medium {
  width: auto;
}

@media screen and (max-width: 768px) {
  .SiteHeader__button .Button {
    width: 64px;
    height: 48px;
    padding: 4px;
    font-size: 10px;
  }
}
@media screen and (min-width: 769px) {
  .SiteHeader__button .Button {
    width: 208px;
  }
}

@media screen and (min-width: 769px) {
  .SiteHeader__button .Button._contained._primary:hover {
    background-color: #E95613;
  }
}

/*
===== SiteHeader__hamburger =====
*/
.SiteHeader__hamburger {
  position: fixed;
  display: block;
  cursor: pointer;
  z-index: 3;
  background-color: #ED6E0A;
}
@media screen and (max-width: 768px) {
  .SiteHeader__hamburger {
    top: 4px;
    right: 4px;
    width: 48px;
    height: 48px;
  }
}
@media screen and (min-width: 769px) {
  .SiteHeader__hamburger {
    top: 8px;
    right: 8px;
    width: 72px;
    height: 72px;
  }
}

@media screen and (min-width: 769px) {
  .SiteHeader__hamburger:hover {
    background-color: #E95613;
  }
}

.SiteHeader__hamburger span {
  position: absolute;
  background-color: #FFF;
}
@media screen and (max-width: 768px) {
  .SiteHeader__hamburger span {
    width: 24px;
    height: 1px;
  }
}
@media screen and (min-width: 769px) {
  .SiteHeader__hamburger span {
    width: 32px;
    height: 2px;
  }
}

.SiteHeader__hamburger span:first-of-type {
  top: 35%;
}
@media screen and (max-width: 768px) {
  .SiteHeader__hamburger span:first-of-type {
    left: 12px;
  }
}
@media screen and (min-width: 769px) {
  .SiteHeader__hamburger span:first-of-type {
    left: 20px;
  }
}

.SiteHeader__hamburger span:nth-of-type(2) {
  top: 50%;
}
@media screen and (max-width: 768px) {
  .SiteHeader__hamburger span:nth-of-type(2) {
    left: 12px;
  }
}
@media screen and (min-width: 769px) {
  .SiteHeader__hamburger span:nth-of-type(2) {
    left: 20px;
  }
}

.SiteHeader__hamburger span:last-of-type {
  top: 65%;
}
@media screen and (max-width: 768px) {
  .SiteHeader__hamburger span:last-of-type {
    left: 12px;
  }
}
@media screen and (min-width: 769px) {
  .SiteHeader__hamburger span:last-of-type {
    left: 20px;
  }
}

.SiteHeader__hamburger.is-active {
  pointer-events: auto;
  z-index: 100000;
}

.SiteHeader__hamburger.is-active span {
  background-color: #FFF;
}

.SiteHeader__hamburger.is-active span:first-of-type {
  transform: rotate(-45deg);
}
@media screen and (max-width: 768px) {
  .SiteHeader__hamburger.is-active span:first-of-type {
    top: 24px;
    left: 12px;
  }
}
@media screen and (min-width: 769px) {
  .SiteHeader__hamburger.is-active span:first-of-type {
    top: 35px;
    left: 21px;
  }
}

.SiteHeader__hamburger.is-active span:nth-of-type(2) {
  opacity: 0;
}

.SiteHeader__hamburger.is-active span:last-of-type {
  transform: rotate(45deg);
}
@media screen and (max-width: 768px) {
  .SiteHeader__hamburger.is-active span:last-of-type {
    top: 24px;
    left: 12px;
  }
}
@media screen and (min-width: 769px) {
  .SiteHeader__hamburger.is-active span:last-of-type {
    top: 35px;
    left: 21px;
  }
}

/*
===== SiteHeader__hamburger.is-active =====
*/
html.is-fixed {
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

/*
===== SiteHeaderSlideMenu =====
*/
.SiteHeader__slideMenu {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #ED6E0A;
  color: #FFF;
  transform: translateX(100%);
  transition: 0.3s ease;
  overflow: auto;
  text-align: center;
  inset: 0;
  z-index: 10000;
}

.SiteHeader__slideMenu.is-active {
  transform: translateX(0);
  pointer-events: auto;
}

.SiteHeader__slideMenu.is-active .SiteHeader__logo {
  background: none;
}

.SiteHeader__slideMenu.is-active .SiteHeader__logo img {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}

/* SiteHeaderSlideMenu__textList */
.SiteHeaderSlideMenu__textList {
  display: flex;
  flex-direction: column;
  row-gap: 32px;
  width: 304px;
  margin: 72px auto 48px;
}

@media screen and (min-width: 769px) {
  .SiteHeaderSlideMenu__textList a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
  }
}

.SiteHeaderSlideMenuTextList__item {
  text-align: left;
}

.SiteHeaderSlideMenuTextList__item ._text {
  display: block;
  letter-spacing: 0.02em;
  line-height: 1.4;
  font-weight: normal;
}

.SiteHeaderSlideMenuTextList__item ._text._en {
  font-family: "Forum", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 32px;
}

.SiteHeaderSlideMenuTextList__item ._text._jp {
  font-size: 14px;
}

.SiteHeaderSlideMenu__button.ButtonContainer {
  width: 100%;
  margin: 0 auto 48px;
  justify-content: center;
}

.SiteHeaderSlideMenu__button .ButtonContainer__item._medium {
  width: 304px;
  height: 48px;
}

.SiteHeaderSlideMenu__button .Button {
  background-color: #E95613;
  color: #FFF;
  border: solid 1px #FFF;
  text-decoration: none;
}

@media screen and (min-width: 769px) {
  .SiteHeaderSlideMenu__button .Button:hover {
    background-color: #FFF;
    color: #E95613;
  }
}

/*
===== SiteFooter =====
*/
.SiteFooter {
  position: relative;
  background-color: #242424;
  color: #FFF;
  line-height: 145%;
}

.SiteFooter > .Container {
  padding-bottom: 0;
}

.SiteFooterContainer {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .SiteFooterContainer {
    padding: 56px 16px 0;
  }
}
@media screen and (min-width: 769px) {
  .SiteFooterContainer {
    padding: 80px 60px 0;
  }
}

.SiteFooter a {
  text-decoration: none;
}

/*
===== SiteFooter__main =====
*/
.SiteFooter__main {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
  .SiteFooter__main {
    padding-bottom: 48px;
  }
}
@media screen and (min-width: 769px) {
  .SiteFooter__main {
    padding-bottom: 80px;
  }
}

/* SiteFooter__company */
@media screen and (max-width: 768px) {
  .SiteFooter__company {
    width: 100%;
  }
}
@media screen and (min-width: 769px) {
  .SiteFooter__company {
    width: 50%;
    padding-right: 16px;
  }
}

@media screen and (max-width: 768px) {
  .SiteFooterCompany__logo {
    width: 50px;
    height: 70px;
  }
}
@media screen and (min-width: 769px) {
  .SiteFooterCompany__logo {
    width: 80px;
    height: 111px;
  }
}

@media screen and (max-width: 768px) {
  .SiteFooterCompany__name {
    margin: 24px 0 0;
    font-size: 14px;
  }
}
@media screen and (min-width: 769px) {
  .SiteFooterCompany__name {
    margin: 48px 0 0;
  }
}

.SiteFooterCompany__address {
  font-size: 14px;
  font-family: "Noto Sans JP", sans-serif;
  color: #FFF;
  opacity: 0.6;
}
@media screen and (max-width: 768px) {
  .SiteFooterCompany__address {
    margin-top: 4px;
  }
}
@media screen and (min-width: 769px) {
  .SiteFooterCompany__address {
    margin-top: 18px;
  }
}

/* SiteFooter__nav */
.SiteFooter__nav {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
  .SiteFooter__nav {
    width: 100%;
    padding-top: 48px;
  }
}
@media screen and (min-width: 769px) {
  .SiteFooter__nav {
    width: 50%;
    padding-left: 16px;
  }
}

@media screen and (max-width: 768px) {
  .SiteFooter__textList {
    width: 100%;
  }
}
@media screen and (min-width: 769px) {
  .SiteFooter__textList {
    width: 50%;
    padding-right: 16px;
  }
}

.SiteFooter__textList a:hover {
  text-decoration: underline;
}

.SiteFooterTextList__item + .SiteFooterTextList__item {
  margin-top: 16px;
}

.SiteFooter__textListSub {
  font-size: 14px;
  opacity: 0.6;
}

.SiteFooterTextListSub__item {
  margin-top: 8px;
}

@media screen and (max-width: 768px) {
  .SiteFooter__buttonList {
    width: 100%;
    padding-top: 48px;
  }
}
@media screen and (min-width: 769px) {
  .SiteFooter__buttonList {
    width: 50%;
    padding-left: 16px;
  }
}

.SiteFooterButtonList__item {
  width: 100%;
  margin-bottom: 8px;
  transition: opacity 0.2s ease;
  opacity: 0.5;
}

.SiteFooterButtonList__item:hover {
  opacity: 1;
}

.SiteFooterButtonList__item > .Button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  padding: 8px;
  font-size: 14px;
}

.SiteFooterButtonList__item ._outlined._white {
  border: solid 1px #FFF;
  color: #FFF;
}

.SiteFooterButtonList__item ._outlined._white .Icon._external {
  padding: 0 24px;
}

.SiteFooterButtonList__item ._outlined._white .Icon._external::after {
  content: "";
  display: inline-block;
  width: 17px;
  height: 12px;
  background: url(../images/icon-external-01-white.svg) right center/12px 12px no-repeat;
}

.SiteFooterSNSList__item {
  display: inline-block;
  width: 60px;
  height: 60px;
  margin: 30px 10px 0 -10px;
}

.SiteFooterSNSList__item a img {
  width: 60px;
  height: 60px;
}

.SiteFooterCompany__iso {
  column-gap: 2px;
  margin-top: 30px;
}

.SiteFooterCompany__isoItem {
  width: 90px;
}

/*
===== SiteFooter__sub  =====
*/
@media screen and (min-width: 769px) {
  .SiteFooter__sub {
    display: flex;
    flex-wrap: wrap;
  }
}

.SiteFooter__sub::before {
  position: absolute;
  left: 0;
  content: "";
  display: block;
  width: 100vw;
  height: 2px;
  margin: 0 calc(50% - 50vw);
  background-color: #FFF;
  opacity: 0.2;
}

.SiteFooter__subNav {
  flex: 1;
}

.SiteFooter__otherTextList {
  display: flex;
}
@media screen and (max-width: 768px) {
  .SiteFooter__otherTextList {
    justify-content: center;
  }
}

.SiteFooter__otherTextList a:hover {
  text-decoration: underline;
}

.SiteFooter__otherTextList__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  height: 60px;
  font-size: 12px;
  opacity: 0.5;
}

.SiteFooter__otherTextList__item + .SiteFooter__otherTextList__item {
  margin-left: 25px;
}

.SiteFooter__copy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 12px;
  opacity: 0.5;
}
@media screen and (max-width: 768px) {
  .SiteFooter__copy {
    justify-content: center;
    margin: 0;
    padding: 0 0 24px;
  }
}
@media screen and (min-width: 769px) {
  .SiteFooter__copy {
    height: 60px;
    margin: 0;
  }
}

/*
===== HeadingLarge =====
*/
.HeadingLarge {
  letter-spacing: 0.02em;
}
@media screen and (max-width: 768px) {
  .HeadingLarge {
    margin: 0 0 24px;
  }
}
@media screen and (min-width: 769px) {
  .HeadingLarge {
    margin: 0 0 40px;
  }
}

.HeadingLarge ._tag {
  display: inline-block;
  padding: 4px 8px 6px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-style: normal;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .HeadingLarge ._tag {
    font-size: 16px;
  }
}
@media screen and (min-width: 769px) {
  .HeadingLarge ._tag {
    font-size: 18px;
  }
}

.HeadingLarge ._en {
  display: block;
  font-family: "Forum", serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1.2;
}
@media screen and (max-width: 768px) {
  .HeadingLarge ._en {
    font-size: 40px;
  }
}
@media (min-width: 769px) and (max-width: 1199px) {
  .HeadingLarge ._en {
    font-size: 80px;
    font-size: 7.0422535211vw;
  }
}
@media screen and (min-width: 1200px) {
  .HeadingLarge ._en {
    font-size: 80px;
  }
}

@media screen and (max-width: 768px) {
  .HeadingLarge ._tag + ._en {
    margin: 16px 0 0;
  }
}
@media screen and (min-width: 769px) {
  .HeadingLarge ._tag + ._en {
    margin: 24px 0 0;
  }
}

.HeadingLarge ._jp {
  display: block;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-style: normal;
  line-height: 1.4;
}
@media screen and (max-width: 768px) {
  .HeadingLarge ._jp {
    font-size: 24px;
  }
}
@media (min-width: 769px) and (max-width: 1199px) {
  .HeadingLarge ._jp {
    font-size: 40px;
    font-size: 3.5211267606vw;
  }
}
@media screen and (min-width: 1200px) {
  .HeadingLarge ._jp {
    font-size: 40px;
  }
}

.HeadingLarge ._en + ._jp {
  margin: 8px 0 0;
}

.HeadingLarge ._jp._serif {
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-style: normal;
}
@media screen and (max-width: 768px) {
  .HeadingLarge ._jp._serif {
    font-size: 24px;
  }
}
@media (min-width: 769px) and (max-width: 1199px) {
  .HeadingLarge ._jp._serif {
    font-size: 48px;
    font-size: 4.2253521127vw;
  }
}
@media screen and (min-width: 1200px) {
  .HeadingLarge ._jp._serif {
    font-size: 48px;
  }
}

/* tag */
.HeadingLarge ._tag._key {
  color: #FFF;
}

.HeadingLarge ._en._key,
.HeadingLarge ._jp._key {
  color: #E95613;
}

.HeadingLarge ._en._white,
.HeadingLarge ._jp._white {
  color: #FFF;
}

/* line */
@media screen and (max-width: 768px) {
  .HeadingLarge._line {
    padding: 0 0 16px;
  }
}
@media screen and (min-width: 769px) {
  .HeadingLarge._line {
    display: flex;
    align-items: center;
  }
}

@media screen and (max-width: 768px) {
  .HeadingLarge._line ._jp {
    font-size: 20px;
  }
}
@media screen and (min-width: 769px) {
  .HeadingLarge._line ._jp {
    font-size: 24px;
  }
}

@media screen and (max-width: 768px) {
  .HeadingLarge._line ._en + ._jp {
    margin: 0;
  }
}
@media screen and (min-width: 769px) {
  .HeadingLarge._line ._en + ._jp {
    margin: 0 0 0 24px;
  }
}

/* text */
@media screen and (max-width: 768px) {
  .text._size-lg {
    font-size: 16px;
  }
}
@media screen and (min-width: 769px) {
  .text._size-lg {
    font-size: 18px;
  }
}

/*
===== ButtonContainer =====
*/
.ButtonContainer {
  display: flex;
  flex-wrap: wrap;
  column-gap: 8px;
  row-gap: 8px;
  margin: 8px 0;
}

.ButtonContainer__item._medium {
  min-height: 40px;
  font-size: 14px;
}
@media screen and (max-width: 768px) {
  .ButtonContainer__item._medium {
    width: 100%;
  }
}
@media screen and (min-width: 769px) {
  .ButtonContainer__item._medium {
    min-width: 160px;
    height: 72px;
  }
}

.Button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 4px 16px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  transition: 0.15s;
}

.Button._contained._primary {
  background-color: #ED6E0A;
  color: #FFF;
  text-decoration: none;
}

/*
===== icon =====
*/
.Icon {
  display: inline-block;
}
.Icon svg {
  width: 100%;
  height: 100%;
  display: block;
  stroke: currentColor;
  fill: none;
}

._size16 {
  width: 16px;
  height: 16px;
}

._size20 {
  width: 20px;
  height: 20px;
}

._size22 {
  width: 22px;
  height: 22px;
}

._size24 {
  width: 24px;
  height: 24px;
}

._size28 {
  width: 28px;
  height: 28px;
}

._size32 {
  width: 32px;
  height: 32px;
}

._size80 {
  width: 80px;
  height: 80px;
}

._color--primary {
  color: rgb(0, 0, 0);
}

._color--secondary {
  color: rgba(0, 0, 0, 0.7);
}

._color--disabled {
  color: rgba(0, 0, 0, 0.6);
}

._color--white {
  color: #FFF;
}

._color--key-primary {
  color: #ED6E0A;
}

._color--key-secondary {
  color: #F18B3B;
}

._color--solidGray-main {
  color: #E0E0E0;
}

/*
===== VerticalList =====
*/
.VerticalList {
  margin-bottom: 40px;
}

.VerticalListItem {
  position: relative;
  padding-left: 1em;
}

.VerticalListItem::before {
  position: absolute;
  top: 0;
  left: 0;
}

.VerticalList._default .VerticalListItem::before {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  margin: 11px 0 0 4px;
  background-color: rgb(0, 0, 0);
  border-radius: 50%;
}

.VerticalList._asterisk .VerticalListItem::before {
  content: "※";
}

.VerticalListItem + .VerticalListItem {
  margin-top: 4px;
}

.VerticalList._default._color-white .VerticalListItem::before {
  background-color: #FFF;
}

/*
===== MainVisual =====
*/
.MainVisual {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
}
@media screen and (max-width: 768px) {
  .MainVisual {
    width: calc(100% - 8px);
    height: 520px;
    margin: 4px;
  }
}
@media screen and (min-width: 769px) {
  .MainVisual {
    width: calc(100% - 16px);
    height: 800px;
    margin: 8px;
  }
}

.MainVisual__slides {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.MainVisual__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.MainVisual__slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.MainVisual__media {
  position: absolute;
  inset: -2%;
}

.MainVisual__media picture,
.MainVisual__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* MainVisual__text */
.MainVisual__text {
  position: relative;
  z-index: 2;
}

@media screen and (max-width: 768px) {
  .MainVisual__text,
  .MainVisual__text img {
    width: 254px;
    height: 64px;
  }
}
@media screen and (min-width: 769px) {
  .MainVisual__text,
  .MainVisual__text img {
    width: 480px;
    height: 120px;
  }
}

/*
===== WorkStyleCard =====
*/
.WorkStyleCard {
  display: flex;
  flex-wrap: wrap;
  row-gap: 16px;
  column-gap: 16px;
}

.WorkStyleCardItem {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  background: #FFF;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.05);
}
@media screen and (max-width: 640px) {
  .WorkStyleCardItem {
    width: 100%;
  }
}
@media (min-width: 641px) and (max-width: 768px) {
  .WorkStyleCardItem {
    width: calc((100% - 32px) / 2);
  }
}
@media screen and (min-width: 769px) {
  .WorkStyleCardItem {
    flex-direction: row-reverse;
  }
}

.WorkStyleCard__figure {
  position: relative;
  overflow: hidden;
  margin: 0;
  line-height: 0;
}
@media screen and (max-width: 768px) {
  .WorkStyleCard__figure {
    width: 100%;
  }
}
@media screen and (min-width: 769px) {
  .WorkStyleCard__figure {
    width: 336px;
  }
}

.WorkStyleCard__figure::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #F18B3B;
  z-index: 2;
  pointer-events: none;
}

.WorkStyleCard__figure img {
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: scale(1.08);
  will-change: opacity, transform;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.WorkStyleCard__content {
  flex: 1;
  line-height: 1.6;
}
@media screen and (max-width: 768px) {
  .WorkStyleCard__content {
    padding: 24px 24px 16px;
  }
}
@media screen and (min-width: 769px) {
  .WorkStyleCard__content {
    padding: 32px 32px 16px;
  }
}

.WorkStyleCard__title {
  margin: 0 0 16px;
  letter-spacing: 0.02em;
}

.WorkStyleCard__title ._tag {
  display: block;
  color: #ED6E0A;
}
@media screen and (max-width: 768px) {
  .WorkStyleCard__title ._tag {
    font-size: 13px;
  }
}
@media screen and (min-width: 769px) {
  .WorkStyleCard__title ._tag {
    font-size: 14px;
  }
}

.WorkStyleCard__title ._jp {
  position: relative;
  display: inline-block;
  margin: 4px 0 4px;
  padding-bottom: 4px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-style: normal;
  color: rgb(0, 0, 0);
}
@media screen and (max-width: 768px) {
  .WorkStyleCard__title ._jp {
    font-size: 20px;
  }
}
@media screen and (min-width: 769px) {
  .WorkStyleCard__title ._jp {
    font-size: 24px;
  }
}

.WorkStyleCatch {
  position: relative;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .WorkStyleCatch {
    margin: 40px 0 0;
  }
}
@media screen and (min-width: 769px) {
  .WorkStyleCatch {
    margin: 80px 0 0;
    padding: 0 14.7887323944vw;
  }
}
@media screen and (min-width: 1136px) {
  .WorkStyleCatch {
    padding: 0 168px;
  }
}

.WorkStyleCatch::before,
.WorkStyleCatch::after {
  position: absolute;
  content: "";
  display: block;
  background-image: url("../images/decoration-01.svg");
  background-position: left center;
  background-repeat: no-repeat;
  z-index: 0;
}
@media screen and (max-width: 768px) {
  .WorkStyleCatch::before,
  .WorkStyleCatch::after {
    top: -16px;
    width: 19.68380281vw;
    height: 18.3949824vw;
    background-size: 19.68380281vw 18.3949824vw;
  }
}
@media screen and (min-width: 769px) {
  .WorkStyleCatch::before,
  .WorkStyleCatch::after {
    top: 0;
    width: 14.7887323944vw;
    height: 13.8204225352vw;
    background-size: 14.7887323944vw 13.8204225352vw;
  }
}
@media screen and (min-width: 1136px) {
  .WorkStyleCatch::before,
  .WorkStyleCatch::after {
    width: 168px;
    height: 157px;
    background-size: 168px 157px;
  }
}

.WorkStyleCatch::before {
  left: 0;
}

.WorkStyleCatch::after {
  right: 0;
}

.WorkStyleCatch__title {
  position: relative;
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-style: normal;
  color: #ED6E0A;
  line-height: 1.2;
  z-index: 2;
}

.WorkStyleCatch__text {
  position: relative;
  margin: 16px 0 0;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-style: normal;
  color: #ED6E0A;
  line-height: 1.4;
  z-index: 2;
}

@media screen and (max-width: 768px) {
  .WorkStyleCatch__title {
    font-size: 40px;
  }
}
@media screen and (min-width: 769px) {
  .WorkStyleCatch__title {
    font-size: 64px;
    font-size: 5.6338028169vw;
  }
}
@media screen and (min-width: 1136px) {
  .WorkStyleCatch__title {
    font-size: 64px;
  }
}

@media screen and (max-width: 768px) {
  .WorkStyleCatch__text {
    font-size: 18px;
  }
}
@media screen and (min-width: 769px) {
  .WorkStyleCatch__text {
    font-size: 24px;
    font-size: 2.1126760563vw;
  }
}
@media screen and (min-width: 1136px) {
  .WorkStyleCatch__text {
    font-size: 24px;
  }
}

/*
===== GrowWithUsCard =====
*/
.GrowWithUsCard {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 640px) {
  .GrowWithUsCard {
    row-gap: 16px;
  }
}
@media screen and (min-width: 641px) {
  .GrowWithUsCard {
    row-gap: 16px;
    column-gap: 16px;
  }
}
@media screen and (min-width: 1000px) {
  .GrowWithUsCard {
    row-gap: 32px;
    column-gap: 32px;
  }
}

.GrowWithUsCardItem {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  width: 100%;
  background: #FFF;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.05);
}
@media screen and (max-width: 640px) {
  .GrowWithUsCardItem {
    width: 100%;
  }
}
@media screen and (min-width: 641px) {
  .GrowWithUsCardItem {
    align-items: flex-start;
    width: calc((100% - 16px) / 2);
  }
}
@media screen and (min-width: 1000px) {
  .GrowWithUsCardItem {
    width: calc((100% - 32px) / 2);
  }
}

.GrowWithUsCard__figure {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 999px) {
  .GrowWithUsCard__figure {
    width: 100%;
    padding: 20px 24px 0;
  }
}
@media screen and (min-width: 1000px) {
  .GrowWithUsCard__figure {
    width: 47.5%;
    height: 100%;
    max-width: 272px;
    padding: 16px 32px 16px 0;
  }
}

.GrowWithUsCard__figure img {
  display: block;
  height: auto;
}
@media screen and (max-width: 999px) {
  .GrowWithUsCard__figure img {
    width: 100%;
    max-width: 180px;
  }
}
@media screen and (min-width: 1000px) {
  .GrowWithUsCard__figure img {
    width: 100%;
  }
}

@media screen and (max-width: 999px) {
  .GrowWithUsCard__figure._protrude img {
    margin-top: -32px;
  }
}
@media screen and (min-width: 1000px) {
  .GrowWithUsCard__figure._protrude img {
    margin-top: -48px;
  }
}

.GrowWithUsCard__content {
  flex: 1;
  line-height: 1.6;
}
@media screen and (max-width: 999px) {
  .GrowWithUsCard__content {
    padding: 16px 24px 32px;
  }
}
@media screen and (min-width: 1000px) {
  .GrowWithUsCard__content {
    padding: 16px 16px 32px 32px;
  }
}

.GrowWithUsCard__title {
  letter-spacing: 0.02em;
}
@media screen and (max-width: 999px) {
  .GrowWithUsCard__title {
    margin: 0 0 16px;
  }
}
@media screen and (min-width: 1000px) {
  .GrowWithUsCard__title {
    margin: 0 0 24px;
  }
}

.GrowWithUsCard__title ._tag {
  display: block;
  color: #ED6E0A;
}
@media screen and (max-width: 999px) {
  .GrowWithUsCard__title ._tag {
    font-size: 13px;
  }
}
@media screen and (min-width: 1000px) {
  .GrowWithUsCard__title ._tag {
    font-size: 14px;
  }
}

.GrowWithUsCard__title ._jp {
  display: block;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-style: normal;
  color: rgb(0, 0, 0);
}
@media screen and (max-width: 999px) {
  .GrowWithUsCard__title ._jp {
    margin: 8px 0 0;
    font-size: 20px;
  }
}
@media screen and (min-width: 1000px) {
  .GrowWithUsCard__title ._jp {
    margin: 16px 0 0;
    font-size: 24px;
  }
}

.GrowWithUsCard .VerticalList {
  margin: 0;
}
@media screen and (max-width: 999px) {
  .GrowWithUsCard .VerticalList {
    font-size: 15px;
  }
}

.GrowWithUsCardItem._line {
  flex-direction: column;
  justify-content: center;
}
@media screen and (max-width: 999px) {
  .GrowWithUsCardItem._line {
    padding: 16px 24px;
  }
}
@media screen and (min-width: 1000px) {
  .GrowWithUsCardItem._line {
    padding: 16px 32px;
  }
}

.GrowWithUsCardItem._line .GrowWithUsCard__text {
  margin: 0;
}
@media screen and (max-width: 999px) {
  .GrowWithUsCardItem._line .GrowWithUsCard__text {
    font-size: 15px;
  }
}

/*
===== VoiceOfHPMCard =====
*/
.VoiceOfHPMCard {
  display: flex;
  flex-wrap: wrap;
  row-gap: 40px;
  column-gap: 32px;
}

.VoiceOfHPMCardItem {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 640px) {
  .VoiceOfHPMCardItem {
    width: 100%;
  }
}
@media screen and (min-width: 641px) {
  .VoiceOfHPMCardItem {
    align-items: flex-start;
    width: calc((100% - 32px) / 2);
  }
}
@media screen and (min-width: 1000px) {
  .VoiceOfHPMCardItem {
    align-items: flex-end;
  }
}

@media screen and (max-width: 640px) {
  .VoiceOfHPMCard__figure {
    display: flex;
    width: 100%;
    justify-content: center;
  }
}
@media (min-width: 641px) and (max-width: 999px) {
  .VoiceOfHPMCard__figure {
    width: 304px;
    margin: 0 auto;
  }
}
@media screen and (min-width: 1000px) {
  .VoiceOfHPMCard__figure {
    width: 47.5%;
    max-width: 304px;
  }
}

.VoiceOfHPMCard__figure img {
  display: block;
  height: auto;
}
@media screen and (max-width: 640px) {
  .VoiceOfHPMCard__figure img {
    width: 100%;
    max-width: 295px;
  }
}
@media screen and (min-width: 641px) {
  .VoiceOfHPMCard__figure img {
    width: 100%;
  }
}

@media screen and (max-width: 640px) {
  .VoiceOfHPMCard__content {
    width: 100%;
    max-width: 343px;
    margin: -76px auto 0;
  }
}
@media (min-width: 641px) and (max-width: 999px) {
  .VoiceOfHPMCard__content {
    width: 100%;
    max-width: 343px;
    margin: -58px auto 0;
  }
}
@media screen and (min-width: 1000px) {
  .VoiceOfHPMCard__content {
    flex: 1;
    margin: 0 0 0 -7.4%;
    padding: 0 0 24px;
  }
}

.VoiceOfHPMCard__title {
  letter-spacing: 0.02em;
}
@media screen and (max-width: 640px) {
  .VoiceOfHPMCard__title {
    margin: 0 0 16px;
  }
}
@media screen and (min-width: 641px) {
  .VoiceOfHPMCard__title {
    margin: 0 0 8px;
  }
}

.VoiceOfHPMCard__title ._jp {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-style: normal;
  color: #FFF;
}
@media screen and (max-width: 640px) {
  .VoiceOfHPMCard__title ._jp {
    font-size: 18px;
  }
}
@media (min-width: 641px) and (max-width: 999px) {
  .VoiceOfHPMCard__title ._jp {
    font-size: 18px;
  }
}
@media (min-width: 1000px) and (max-width: 1199px) {
  .VoiceOfHPMCard__title ._jp {
    font-size: 21px;
    font-size: 1.8485915493vw;
  }
}
@media screen and (min-width: 1200px) {
  .VoiceOfHPMCard__title ._jp {
    font-size: 22px;
  }
}

.VoiceOfHPMCard__text {
  margin: 0;
  font-size: 15px;
}

@media screen and (min-width: 641px) {
  .VoiceOfHPMCard ._spOnlySp {
    display: none;
  }
}

@media screen and (max-width: 640px) {
  .VoiceOfHPMCard ._pcOnlySp {
    display: none;
  }
}

/*
===== Future =====
*/
.FutureWrapper {
  position: relative;
}

.Future__figure {
  position: absolute;
  right: 0;
  aspect-ratio: 475/533;
}
@media screen and (max-width: 768px) {
  .Future__figure {
    top: -72px;
    width: 39.59vw;
  }
}
@media (min-width: 769px) and (max-width: 1199px) {
  .Future__figure {
    top: -36px;
    width: 39.59vw;
  }
}
@media screen and (min-width: 1200px) {
  .Future__figure {
    top: -36px;
    width: 475px;
  }
}

.Future p {
  margin: 2em auto;
  color: #FFF;
}
@media screen and (max-width: 768px) {
  .Future p {
    font-size: 15px;
  }
}

@media screen and (max-width: 768px) {
  .Future p ._big {
    font-size: 18px;
  }
}
@media screen and (min-width: 769px) {
  .Future p ._big {
    font-size: 24px;
  }
}

/* ===== 帯（background-size アニメ） ===== */
.Future ._em._big {
  display: inline;
  line-height: inherit;
  background-image: linear-gradient(transparent 18%, #FFF 18%, #FFF 82%, transparent 82%);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
@media screen and (max-width: 768px) {
  .Future ._em._big {
    margin: 0 2px 0 0;
    padding: 12px 2px;
    letter-spacing: -0.05em;
  }
}
@media screen and (min-width: 769px) {
  .Future ._em._big {
    margin: 0 4px 0 0;
    padding: 14px 6px;
  }
}

/* pが表示されたら帯も走らせる */
.Future p.is-active ._em._big {
  transition-delay: 0.12s;
  background-size: 100% 100%;
}

/* ===== 1文字ずつ色変化（white → key-logo） ===== */
/* 文字ごとの transition を確実に効かせる */
.Future p ._em._big .future-char {
  display: inline-block;
  color: #FFF;
  transition: color 0.35s ease-out;
}

.Future p ._em._big.is-colored .future-char {
  color: #E95613;
}

.Future .FutureName {
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .FutureName img {
    width: 152px;
    height: 30px;
  }
}
@media screen and (min-width: 769px) {
  .FutureName img {
    width: 203px;
    height: 40px;
  }
}

/*
===== MovieIframe =====
*/
.MovieIframeWrapper {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  aspect-ratio: 16/9;
}

.MovieIframeWrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/*
===== MovieWrapper =====
*/
.MovieWrapper {
  position: relative;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  aspect-ratio: 16/9;
}

.MovieWrapper__icon {
  position: absolute;
  top: 50%;
  left: 50%;
}

.MovieWrapper__icon {
  position: absolute;
  top: calc(50% - 40px);
  left: calc(50% - 40px);
}

.MovieWrapper__icon img {
  width: 80px;
  height: 80px;
}

/*
===== MainVisual =====
*/
/* MV text */
.MainVisual__text {
  opacity: 0;
  transform: translateY(10px);
  filter: blur(6px);
  will-change: opacity, transform, filter;
}

.MainVisual.is-ready .MainVisual__text {
  animation: mvTextIn 1400ms cubic-bezier(0.16, 1, 0.3, 1) 300ms forwards;
}

@keyframes mvTextIn {
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .MainVisual__text {
    opacity: 1;
    transform: none;
    filter: none;
  }
  .MainVisual.is-ready .MainVisual__text {
    animation: none;
  }
}
/*
===== Heading marker =====
*/
.HeadingLarge ._tag._key {
  display: inline;
  line-height: 1.8;
  background-image: linear-gradient(transparent 3%, #ED6E0A 3%, #ED6E0A 97%, transparent 97%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: left center;
  padding: 2px 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 0.6s ease-out;
}

/* ===== Heading fade-up (lighter) ===== */
.HeadingLarge ._en,
.HeadingLarge ._jp {
  opacity: 0;
  transform: translateY(6px);
  filter: blur(2px);
  will-change: opacity, transform, filter;
  transition: opacity 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.HeadingLarge ._en.is-active,
.HeadingLarge ._jp.is-active {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ===== Heading underline (base) ===== */
.HeadingLarge._line {
  position: relative;
}

.HeadingLarge._line::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.HeadingLarge._line._white::after {
  background-color: #FFF;
}

.HeadingLarge._line._key::after {
  background-color: #E95613;
}

.HeadingLarge._line.is-line-active::after {
  transform: scaleX(1);
}

/*
===== VoiceOfHPMCard =====
*/
.VoiceOfHPMCard ._marker {
  display: inline;
  line-height: 1.8;
  background-image: linear-gradient(transparent 3%, #ED6E0A 3%, #ED6E0A 97%, transparent 97%);
  background-repeat: no-repeat;
  background-size: 0 100%;
  background-position: left center;
  padding: 2px 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 0.6s ease-out;
}

/* ===== stagger fade-in (noticeable but polite) ===== */
.js-staggerItem {
  opacity: 0;
  will-change: opacity, transform, filter;
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1), filter 1s cubic-bezier(0.16, 1, 0.3, 1);
}
@media screen and (max-width: 768px) {
  .js-staggerItem {
    transform: translateY(16px) scale(0.985);
    filter: none;
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  }
}
@media screen and (min-width: 769px) {
  .js-staggerItem {
    transform: translateY(10px) scale(0.98);
    filter: blur(2px);
  }
}

.js-staggerItem.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* motion低減対応 */
@media (prefers-reduced-motion: reduce) {
  .js-staggerItem {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}
.WorkStyleCard__title ._jp::after {
  content: none;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #ED6E0A;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--stagger-delay, 0s) + 0.25s);
}

/* 表示トリガー（カード表示後） */
.js-staggerItem {
  transition-delay: var(--stagger-delay, 0s);
}

.js-staggerItem.is-active .WorkStyleCard__title ._jp::after {
  transform: scaleX(1);
}

/* motion低減 */
@media (prefers-reduced-motion: reduce) {
  .WorkStyleCard__title ._jp::after {
    transform: scaleX(1);
    transition: none;
  }
}
/* アニメ開始（カードが is-active になったら） */
.js-staggerItem.is-active .WorkStyleCard__figure::before {
  animation: wsBar 1.2s ease forwards;
  animation-delay: var(--stagger-delay, 0s);
}

.js-staggerItem.is-active .WorkStyleCard__figure img {
  animation: wsPhoto 1.2s ease forwards;
  /* 色が敷かれた“後”に出す（少し遅らせる） */
  animation-delay: calc(var(--stagger-delay, 0s) + 0.35s);
}

/* 色バー：0→100%で敷いて、右に抜ける（参考サイトの動き） */
@keyframes wsBar {
  0% {
    left: 0;
    width: 0;
  }
  50% {
    left: 0;
    width: 100%;
  }
  68% {
    left: 0;
    width: 100%;
  }
  100% {
    left: 100%;
    width: 0;
  }
}
/* 画像：前半は出さず、後半でフェード＋ズーム */
@keyframes wsPhoto {
  0% {
    opacity: 0;
    transform: scale(1.08);
  }
  55% {
    opacity: 0;
    transform: scale(1.08);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* motion低減 */
@media (prefers-reduced-motion: reduce) {
  .WorkStyleCard__figure::before {
    display: none;
  }
  .WorkStyleCard__figure img {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
/* ===== Future: paragraph fade-in（JS時のみ隠す） ===== */
html.is-js .Future.is-future-anim p {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

html.is-js .Future.is-future-anim p.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* motion低減 */
@media (prefers-reduced-motion: reduce) {
  html.is-js .Future.is-future-anim p {
    opacity: 1;
    transform: none;
    transition: none;
  }
  /* 帯は最終状態に */
  .Future ._em._big {
    background-size: 100% 100%;
    transition: none;
  }
  .Future p ._em._big .future-char {
    transition: none;
  }
}

/*# sourceMappingURL=style.css.map */