@charset "utf-8";

/* ==============================================================
*  reset
* ============================================================ */
*,::before,::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:where(html) {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
}
:where(p, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word;
}
:where(a) {
  text-decoration: none;
}
:where(svg, video, canvas, audio, iframe, embed, object) {
	display: block;
}
:where(img, svg, video) {
  block-size: auto;
  max-inline-size: 100%;
  vertical-align: bottom;
}
:where(svg) {
  fill: currentColor;
  stroke: none;
}
:where(ul, ol) {
  list-style: none;
}
:where(table) {
  border-collapse: collapse;
}
:where(hr) {
  block-size: 0;
  border: none;
  border-block-start: 1px solid;
  color: inherit;
  overflow: visible;
}
:where(input) {
  border-radius: 0;
}
:where(input[type="text"], textarea) {
  padding: 0 2px;
}
:where(button, label, select, summary) {
  cursor: pointer;
}
:where(button, input, textarea, select) {
  border: 1px solid;
  font: inherit;
}
:where(textarea) {
  overflow: auto;
  resize: vertical;
  user-select: auto;
}
:where([disabled]) {
  cursor: default;
}
:where([hidden]) {
  display: none;
}

/* ==============================================================
*  base
* ============================================================ */
:root {
  --color-main:#000;
  --color-sub:#fff;
  --color-txt-main:#000;
  --color-txt-sub:#fff;
  --color-link: #000;
  --color-link-hover: #888;
  --header-height: 100px;
  --header-height-sp: 60px;
  --pc-side-padding: 3.2vw;
  --sp-side-padding: 6.11vw;
  --font-light: "TsukuGoPr5-R-HelveticaNowTextLight", "游ゴシック", YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --font-light-weight: 300;
  --font-regular-en: "HelveticaNowDisplay-Regular", "游ゴシック", YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --font-regular-en-weight: 400;
  --font-middium: "TsukuGoPro-B-HelveticaNowTextMedium", "游ゴシック", YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --font-middium-weight: 500;
}

html {
  box-sizing: border-box;
  line-height: 1.8;
}

body {
  color: var(--color-txt-main);
  font-family: var(--font-light);
  font-weight: var(--font-light-weight);
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  font-kerning: normal;
  font-feature-settings: "palt";
  font-size: 3.56vw; /* 14px */
}

@media screen and (width > 768px) {
  body {
    font-size: 16px;
  }
}

a {
  color: var(--color-link);
  transition: color 0.3s;
  &:hover {
    color: var(--color-link-hover);
  }
}


/* ==============================================================
*  common
* ============================================================ */
/* ---------- header ---------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: var(--header-height-sp);
  padding-bottom: 10px;
  --color-nav: #fff;
  background-color: transparent;
  &.is-back-dark {
    --color-nav: #fff;
    background-color: transparent;
  }
  &.is-back-light {
    --color-nav: #000;
    background-color: #ffffffdd;
  }
  &.is-open {
    --color-nav: #000;
  }
}
@media screen and (width > 768px) {
  .header {
    height: var(--header-height);
  }
}

.header-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 100%;
  padding: 0 var(--sp-side-padding);
}
@media screen and (width > 768px) {
  .header-inner {
    padding: 0 var(--pc-side-padding);
  }
}

.header-logo {
  z-index: 101;
}

.logoInner {
  width: 118px;
  aspect-ratio: 187 / 42;
  mask-image: url(../img/common/img_logo.svg);
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
  background-color: var(--color-nav);
  transition: background .3s ease;
}
@media screen and (width > 768px) {
  .logoInner {
    width: 187px;
  }
}

.header-title {
  line-height: 0;
  height: 0;
  overflow: hidden;
}

.header-nav {
  position: absolute;
  top: 0;
  left: 100vw;
  width: 100vw;
  height: 100dvh;
  overflow-y: scroll;
  background-color: var(--color-sub);
  font-family: var(--font-light);
  font-weight: var(--font-light-weight);
  transition: left .3s;
  .is-open & {
    left: 0;
  }
}
@media screen and (width > 768px) {
  .header-nav {
    position: inherit;
    top: unset;
    left: unset;
    width: auto;
    height: auto;
    overflow-y: initial;
    background-color: unset;
    margin-left: 6.2vw;
  }
}

.globalNav {
  padding: 122px var(--sp-side-padding);
  font-size: 7.12vw;
}
@media screen and (width > 768px) {
  .globalNav {
    display: flex;
    align-items: flex-end;
    gap: 0 6.2vw;
    padding: 0;
    font-size: min(18px, 1.82vw);
    line-height: 1;
  }
}

.globalNav-list {
  & li {
    border-bottom: 1px solid #b3b3b3;
  }
  & a {
    display: block;
    padding: 26px 2.04vw;
    color: var(--color-nav);
  }
}
@media screen and (width > 768px) {
  .globalNav-list {
    display: flex;
    align-items: flex-end;
    gap: 0 3.3vw;
    height: 100%;
    & li {
      padding: 0;
      border: none;
    }
    & a {
      padding: 0;
    }
  }
}

.globalNav-lang {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 0 .2em;
  margin-top: 24px;
  font-size: 4.58vw;
  color: var(--color-nav);
  & span {
    font-weight: 600;
  }
  & a {
    color: var(--color-nav);
    font-weight: 300;
  }
}
@media screen and (width > 768px) {
  .globalNav-lang {
    justify-content: unset;
    margin-top: 0;
    font-size: unset;
    & span {
      font-weight: unset;
    }
  }
}

.header-spBtn {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 40px;
  height: auto;
  aspect-ratio: 40/27;
  cursor: pointer;
  & span {
    position: absolute;
    left: 0;
    transform-origin: right center;
    width: 40px;
    height: 1px;
    background-color: var(--color-nav);
    transition: rotate 0.3s, width 0.3s, background .3s;
    &:nth-child(1) {
      top: 0;
      .is-open & {
        rotate: -16deg;
      }
    }
    &:nth-child(2) {
      top: 11px;
      .is-open & {
        rotate: 16deg;
      }
    }
  }
}
@media screen and (width > 768px) {
  .header-spBtn {
    display: none;
  }
}


/* ---------- footer ---------- */
.footer {
  position: relative;
  background-color: var(--color-main);
  color: var(--color-txt-sub);
}

.footer-top {
  padding-top: 46px;
}
@media screen and (width > 768px) {
  .footer-top {
    padding-top: 50px;
  }
}

.footer-inner {
  padding: 0 var(--sp-side-padding);
}
@media screen and (width > 768px) {
  .footer-inner {
    padding: 0 var(--pc-side-padding);
  }
}

.footerTitle {
  font-family: var(--font-light);
  font-weight: var(--font-light-weight);
  font-size: 6.11vw;
}
@media screen and (width > 768px) {
  .footerTitle {
    font-size: 45px;
  }
}

.footerNav {
  font-family: var(--font-regular-en);
  font-weight: var(--font-regular-en-weight);
  font-size: 3.56vw;
  & a {
    color: var(--color-txt-sub);
  }
}
@media screen and (width > 768px) {
  .footerNav {
    font-size: 20px;
  }
}

.footerNav-list {
  display: block;
  margin-top: 40px;
  line-height: 2.4;
}
@media screen and (width > 768px) {
  .footerNav-list {
    display: flex;
    gap: 0 3.60vw;
    margin-top: 13px;
    line-height: 1.8;
  }
}

.footerNav-lang {
  display: flex;
  margin-top: 30px;
  line-height: 2.4;
  & li:first-of-type::after {
    content: "/";
    padding: 0 .5em;
  }
  & li span:first-of-type {
    display: none;
  }
  & li span:last-of-type {
    display: inline;
  }
}
@media screen and (width > 768px) {
  .footerNav-lang {
    gap: 0 3.60vw;
    margin-top: 20px;
    line-height: 1.8;
    & li:first-of-type::after {
      content: unset;
    }
    & li span:first-of-type {
      display: inline;
    }
    & li span:last-of-type {
      display: none;
    }
  }
}

.footer-bottom {
  padding: 55px 0 45px;
}
@media screen and (width > 768px) {
  .footer-bottom {
    padding: 160px 0 60px;
    & .footer-inner {
      display: flex;
      flex-flow: row-reverse;
      justify-content: space-between;
      align-items: flex-end;
    }
  }
}

.footerLogo {
  width: 40.71vw;
  margin-left: auto;
}
@media screen and (width > 768px) {
  .footerLogo {
    width: min(626px, 31.3vw);
    margin-left: initial;
  }
}

.footerBottomNav {
  display: block;
}
@media screen and (width > 768px) {
  .footerBottomNav {
    font-size: 20px;
    font-family: var(--font-regular-en);
    font-weight: var(--font-regular-en-weight);
    & a {
      color: var(--color-txt-sub);
    }
  }
}

.footerBottomLink {
  display: none;
}
@media screen and (width > 768px) {
  .footerBottomLink {
    display: flex;
    gap: 0 3.60vw;
    margin-bottom: 20px;
    line-height: 1.8;
  }
}

.footerCopy {
  margin-top: 50px;
  font-size: 2.80vw;
}
@media screen and (width > 768px) {
  .footerCopy {
    margin-top: 0;
    font-size: 20px;
  }
}

.pageTop {
  position: absolute;
  top: -70px;
  right: var(--pc-side-padding);
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out;
  & button {
    position: relative;
    width: 60px;
    height: auto;
    aspect-ratio: 1;
    border: none;
    border-radius: 50%;
    background: url(../img/common/icn_pagetop.svg) no-repeat center center var(--color-txt-main);
    -webkit-appearance: none;
    appearance: none;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    transition: all 0.3s ease-out;
    &:hover {
      background-color: #333c;
    }
  }
  &.is-fixed {
    position: fixed;
    top: initial;
    bottom: 10px;
  }
  &.is-show {
    opacity: 1;
    pointer-events: auto;
  }
}


/* ==============================================================
*  top
* ============================================================ */
/* 
font-size: clamp(48px, -0.623px + 6.331vw, 126px);

font-size: clamp(36px, 13.558px + 2.922vw, 72px);
font-size: clamp(32px, 12.052px + 2.597vw, 64px);
font-size: clamp(26px, 12.286px + 1.786vw, 48px);

font-size: clamp(20px, 11.273px + 1.136vw, 34px);
font-size: clamp(19px, 10.896px + 1.055vw, 32px);
font-size: clamp(16px, 7.273px + 1.136vw, 30px);

font-size: clamp(16px, 8.519px + 0.974vw, 28px);
font-size: clamp(15px, 8.143px + 0.893vw, 26px);
font-size: clamp(14px, 7.766px + 0.812vw, 24px);
font-size: clamp(13px, 7.390px + 0.731vw, 22px);

font-size: clamp(11px, 6.636px + 0.568vw, 18px);
font-size: clamp(10px, 8.753px + 0.162vw, 12px);
*/

html:has(dialog[open]) {
  overflow: hidden;
}

.main._top {
  overflow: hidden;
}

.topHeroMovie {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100lvh;
  z-index: -1;
  & > video {
    width: 100%;
    height: 100lvh;
    object-fit: cover;
    overflow-clip-margin: unset;
  }
}

.topHeroSec {
  position: relative;
  height: 300lvh;
}

.topHeroMsg {
  position: sticky;
  top: 0;
  height: 300lvh;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.topHeroMsgEn {
  position: relative;
  width: 100vw;
  height: 100lvh;
}

.topHeroMsgEnTxt {
  position: fixed;
  bottom: 80px;
  left: var(--sp-side-padding);
  font-family: var(--font-regular-en);
  font-weight: var(--font-regular-en);
  font-size: 9.41vw;
  line-height: 1.33;
  color: var(--color-txt-sub);
  & > p {
    overflow: hidden;
  }
}
@media screen and (width > 768px) {
  .topHeroMsgEnTxt {
    top: 50%;
    left: var(--pc-side-padding);
    bottom: unset;
    transform: translateY(-50%);
    /* font-size: 7vh; */
    font-size: 9vh;
  }
}

.enWord {
  opacity: 0;
  display: inline-block;
  transform: translateY(1em);
  .topHeroMsgEn.is-show & {
    animation: fadeUp 0.7s ease-in-out forwards;
    &._01 { animation-delay: 0.0s;}
    &._02 { animation-delay: 0.2s;}
    &._03 { animation-delay: 0.4s;}
    &._04 { animation-delay: 0.6s;}
    &._05 { animation-delay: 0.8s;}
    &._06 { animation-delay: 1.0s;}
    &._07 { animation-delay: 1.2s;}
    &._08 { animation-delay: 1.4s;}
  }
  .topHeroMsgEn.is-hidden & {
    animation: fadeOut .4s ease-in-out forwards;
    &._01 { animation-delay: unset;}
    &._02 { animation-delay: unset;}
    &._03 { animation-delay: unset;}
    &._04 { animation-delay: unset;}
    &._05 { animation-delay: unset;}
    &._06 { animation-delay: unset;}
    &._07 { animation-delay: unset;}
    &._08 { animation-delay: unset;}
  }
}
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(1em);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(0);
  }
}

.topHeroMsgJp {
  position: relative;
  width: 100vw;
  height: 100lvh;
}

.topHeroMsgJpTxt {
  position: fixed;
  /* top: 50%; */
  top:calc(50% + (var(--header-height-sp) / 2));
  left: var(--sp-side-padding);
  width: calc(100vw - var(--sp-side-padding) * 2);
  font-family: var(--font-light);
  font-weight: var(--font-light-weight);
  font-size: 3.56vw;
  line-height: 2.4;
  letter-spacing: 0.05em;
  color: var(--color-txt-sub);
  transform: translateY(-50%);
  & > p {
    opacity: 0;
    transform: translateY(20px);
    transition: all .7s ease-in-out;
    .is-show & {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.3s;
      /* &:nth-child(1) { transition-delay: 0.3s;}
      &:nth-child(2) { transition-delay: 0.5s;} */
    }
    &:nth-child(2) {
      margin-top: max(40px, 10.18vw);
    }
  }
  & .topHeroMsgCopy {
    font-family: var(--font-middium);
    font-weight: var(--font-middium-weight);
  }
}
.main._en .topHeroMsgJpTxt {
  line-height: 1.8;
  & .topHeroMsgCopy {
    display: none;
  }
  & > p {
    &:nth-child(2) {
      margin-top: 0;
    }
  }
}
@media screen and (width > 768px) {
  .topHeroMsgJpTxt {
    top:calc(50% + (var(--header-height) / 2));
    left: var(--pc-side-padding);
    /* font-size: 2vh; */
    font-size: 1.7vh;
    & > p {
      &:nth-child(2) {
        margin-top: 4.28vh;
      }
    }
  }
  .main._en .topHeroMsgJpTxt {
    line-height: 2.4;
  }
}

.topHeroMsgCopy {
  font-size: 5.60vw;
  font-weight: 400;
  line-height: 1.4;
}
@media screen and (width > 768px) {
  .topHeroMsgCopy {
    /* font-size: min(48px, 2.4vw); */
    font-size: 3.43vh;
  }
}

@keyframes wordFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- About us ---------- */
.topAbout {
  position: relative;
  z-index: 1;
  background: var(--color-sub);
  color: var(--color-txt-main);
  padding: 25.45vw var(--sp-side-padding) 11.45vw;
  & > h2 {
    font-family: var(--font-regular-en);
    font-weight: var(--font-regular-en-weight);
    font-size: 11.70vw;
    line-height: 1.1;
  }
}
@media screen and (width > 768px) {
  .topAbout {
    padding: 160px var(--pc-side-padding) 215px;
    & > h2 {
      font-size: clamp(48px, -0.623px + 6.331vw, 126px);
      font-weight: 400;
    }
  }
}

.topAbout h2 {
  overflow: hidden;
  & .word {
    opacity: 0;
    display: inline-block;
    transform: translateY(.8em);
    transition: all .7s ease-in-out;
  }
  &.is-view .word {
    opacity: 1;
    transform: translateY(0);
    &._01 { transition-delay: 0.0s;}
    &._02 { transition-delay: 0.2s;}
  }
}

.topAboutMcgi {
  margin-top: 5.09vw;
  & > p {
    letter-spacing: 0.03em;
    opacity: 0;
    transform: translateY(1em);
    transition: all .7s ease-in-out .2s;
    &.is-view {
      opacity: 1;
      transform: translateY(0);
    }
  }
}
@media screen and (width > 768px) {
  .topAboutMcgi {
    margin-top: 60px;
    & > p {
      font-size: clamp(14px, 7.766px + 0.812vw, 24px);
    }
    & > p:first-of-type {
      width: calc(((100% - 3vw) / 3) * 2 + 1.5vw);
    }
  }
}

.topAboutMcgi-list {
  margin: 12.72vw 0;
  display: flex;
  flex-flow: column;
  row-gap: 12.72vw;
}
@media screen and (width > 768px) {
  .topAboutMcgi-list {
    margin: 90px 0 160px;
    flex-flow: unset;
    column-gap: 1.5vw;
  }
}

.topAboutMcgi-item {
  width: 100%;
  opacity: 0;
  transform: translateY(2em);
  transition: all .7s ease-in-out .3s;
  &.is-view {
    opacity: 1;
    transform: translateY(0);
  }
}
@media screen and (width > 768px) {
  .topAboutMcgi-item {
    width: calc((100% - 3vw) / 3);
  }
}

.topAboutMcgi-img {
  width: 100%;
  aspect-ratio: 1;
  & > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow-clip-margin: unset;
  }
}

.topAboutMcgi-title {
  margin-top: .6em;
  font-family: var(--font-middium);
  font-weight: 700;
  font-size: 5.60vw;
  line-height: 1.6;
  & > span {
    display: block;
    font-weight: 400;
    font-size: 3.56vw;
  }
}
@media screen and (width > 768px) {
  .topAboutMcgi-title {
    font-size: clamp(20px, 11.273px + 1.136vw, 34px);
    & > span {
      font-size: clamp(14px, 7.766px + 0.812vw, 24px);
    }
  }
}

.topAboutMcgi-txt {
  margin-top: .3em;
  width: 90%;
  line-height: 1.6;
  letter-spacing: 0.05em;
}
@media screen and (width > 768px) {
  .topAboutMcgi-txt {
    font-size: clamp(13px, 7.390px + 0.731vw, 22px);
  }
}

.topAboutMC {
  padding: 25.45vw 0;
  & > h3 {
    overflow: hidden;
    font-family: var(--font-regular-en);
    font-weight: 700;
    font-size: 11.70vw;
    line-height: 1;
    letter-spacing: -0.01em;
    & > span:not(.word) {
      display: block;
      font-weight: 400;
      font-size: 4.07vw;
      line-height: 1.6;
      letter-spacing: 0.03em
    };
    & > p.topAboutMC-line {
      overflow: hidden;
      display: block;
    }
    & .word {
      opacity: 0;
      display: inline-block;
      transform: translateY(.8em);
      transition: all .7s ease-in-out;
    }
    &.is-view .word {
      opacity: 1;
      transform: translateY(0);
      &._01 { transition-delay: 0.0s;}
      &._02 { transition-delay: 0.2s;}
      &._03 { transition-delay: 0.4s;}
      &._04 { transition-delay: 0.6s;}
    }
  }
  & > p {
    letter-spacing: 0.08em;
    margin: 1.8em 2em 0 0;
    opacity: 0;
    transform: translateY(1em);
    transition: all .7s ease-in-out;
    &.is-view {
      opacity: 1;
      transform: translateY(0);
    }
  }
}
.main._en .topAboutMC > p {
  letter-spacing: 0;
}
@media screen and (width > 768px) {
  .topAboutMC {
    padding: 160px 0;
    & > h3 {
      font-size: clamp(48px, -0.623px + 6.331vw, 126px);
      font-weight: 400;
      & > span:not(.word) {
        font-size: clamp(19px, 10.896px + 1.055vw, 32px);
        margin-bottom: 1.4em;
      }
      & > p.topAboutMC-line {
        &:nth-of-type(1) {
          display: inline-block;
        }
        &:nth-of-type(2) {
          display: inline-block;
        }
      }
    }
    & > p {
      width: 70%;
      margin: 2em auto 0 0;
      font-size: clamp(14px, 7.766px + 0.812vw, 24px);
    }
  }
}

.topAboutMC-list {
  margin: 12.72vw 0 9.17vw;
  display: flex;
  gap: 6.11vw 4.07vw;
  flex-wrap: wrap;
}
@media screen and (width > 768px) {
  .topAboutMC-list {
    margin: 60px 0 50px;
    gap: 2.7vw 1.6vw;
  }
}

.topAboutMC-item {
  opacity: 0;
  transform: translateX(-3em);
  transition: transform .7s ease-in-out, opacity 1s ease-in-out;
  width: calc((100% - 4.07vw) / 2);
  &.is-view {
    opacity: 1;
    transform: translateX(0);
  }
}
@media screen and (width > 768px) {
  .topAboutMC-item {
    width: calc((100% - (1.6vw * 3)) / 4);
  }
}

.topAboutMC-img {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  & > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow-clip-margin: unset;
    transition: all .5s;
    a:hover & {
      transform: scale(1.05);
    }
  }
}

.topAboutMC-title {
  position: relative;
  margin-top: .8em;
  padding-right: 1em;
  font-family: var(--font-regular-en);
  font-weight: var(--font-regular-en-weight);
  line-height: 1.3;
  /* letter-spacing: -0.02em; */
  letter-spacing: 0.01em;
  &::after {
    content: '';
    position: absolute;
    top: .4em;
    right: .5em;
    margin: auto;
    width: 1.78vw;
    height: 1.78vw;
    border: 0;
    border-top: solid 1px var(--color-txt-main);
    border-right: solid 1px var(--color-txt-main);
    transform: rotate(45deg);
    transition: all .5s;
  }
  a:hover &::after {
    right: .2em;
  }

}
@media screen and (width > 768px) {
  .topAboutMC-title {
    font-size: clamp(16px, 7.273px + 1.136vw, 30px);
    &::after {
      width: clamp(10px, 8.130px + 0.244vw, 13px);
      height: clamp(10px, 8.130px + 0.244vw, 13px);
    }
  }
}

.topAboutOVP-mv {
  margin: 0 calc(var(--sp-side-padding) * -1);
}
@media screen and (width > 768px) {
  .topAboutOVP-mv {
    position: relative;
    margin: 0 calc(var(--pc-side-padding) * -1);
  }
}

.topAboutOVP-movie {
  width: 100%;
  aspect-ratio: 393 / 480;
  z-index: -1;
  & > video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow-clip-margin: unset;
  }
}
@media screen and (width > 768px) {
  .topAboutOVP-movie {
    position: relative;
    aspect-ratio: 2000 / 1560;
  }
}

.topAboutOVP-mvtxt {
  & > h3 {
    overflow: hidden;
    padding: 0 var(--sp-side-padding);
    margin-top: 25.45vw;
    font-size: 6.62vw;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.05em;
    & > span:not(.word) {
      display: block;
      margin-bottom: 2.54vw;
      font-family: var(--font-regular-en);
      font-weight: var(--font-regular-en-weight);
      font-size: 4.07vw;
      line-height: 1.6;
      letter-spacing: 0.03em;
    }
    & .word {
      opacity: 0;
      display: inline-block;
      transform: translateY(1em);
      transition: all .7s ease-in-out;
    }
    &.is-view .word {
      opacity: 1;
      transform: translateY(0);
      &._01 { transition-delay: 0.0s;}
      &._02 { transition-delay: 0.2s;}
    }
  }
  & > p {
    letter-spacing: 0.03em;
    padding: 0 var(--sp-side-padding);
    margin-top: 7.12vw;
    opacity: 0;
    transform: translateY(1em);
    transition: all .7s ease-in-out .4s;
    &.is-view {
      opacity: 1;
      transform: translateY(0);
    }

  }
}
.main._en .topAboutOVP-mvtxt {
  & > h3 {
    & .word {
      font-family: var(--font-middium);
      font-weight: var(--font-middium-weight);
    }
  }
  & > p {
    letter-spacing: 0;
  }
}
@media screen and (width > 768px) {
  .topAboutOVP-mvtxt {
    position: absolute;
    bottom: 10vw;
    color: var(--color-txt-sub);
    & > h3 {
      padding: 0 var(--pc-side-padding);
      margin-top: unset;
      font-size: clamp(36px, 13.558px + 2.922vw, 72px);
      font-weight: 400;
      & > span:not(.word) {
        margin-bottom: 0.8em;
        font-size: clamp(19px, 10.896px + 1.055vw, 32px);
      }
    }
    & > p {
      padding: 0 var(--pc-side-padding);
      margin-top: 1.2em;
      font-size: clamp(14px, 7.766px + 0.812vw, 24px);
    }
  }
}

.topAboutOVP-list {
  margin: 17.81vw 0 0;
  display: flex;
  flex-flow: column;
  row-gap:  17.81vw;
}
@media screen and (width > 768px) {
  .topAboutOVP-list {
    margin-top: 200px;
    flex-flow: unset;
    flex-wrap: wrap;
    gap: 7vw 3.2vw;
  }
}

.topAboutOVP-item {
  width: 100%;
  opacity: 0;
  transform: translateX(-3em);
  transition: transform .7s ease-in-out, opacity 1s ease-in-out;
  &.is-view {
    opacity: 1;
    transform: translateX(0);
  }

}
@media screen and (width > 768px) {
  .topAboutOVP-item {
    width: calc((100% - 3.2vw) / 2);
  }
}

.topAboutOVP-title {
  font-family: var(--font-regular-en);
  font-weight: var(--font-regular-en-weight);
  font-size: 9.16vw;
  line-height: 1.2;
  & > span {
    display: block;
    margin-bottom: 1em;
    font-size: 6.11vw;
    line-height: 1.1;
  }
}
@media screen and (width > 768px) {
  .topAboutOVP-title {
    /* font-size: clamp(32px, 22.026px + 1.299vw, 48px); */
    font-size: clamp(26px, 12.286px + 1.786vw, 48px);
    & > span {
      font-size: clamp(19px, 10.896px + 1.055vw, 32px);
    }
  }
}

.topAboutOVP-subtitle {
  margin-top: 0.2em;
  font-size: 5.09vw;
  line-height: 1.4;
  letter-spacing: 0.05em;
}
@media screen and (width > 768px) {
  .topAboutOVP-subtitle {
    font-size: clamp(13px, 7.390px + 0.731vw, 22px);
  }
}

.topAboutOVP-img {
  width: 100%;
  aspect-ratio: 345 / 206;
  margin-top: 6.11vw;
  & > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow-clip-margin: unset;
  }
}
@media screen and (width > 768px) {
  .topAboutOVP-img {
    aspect-ratio: 900 / 540;
    margin-top: 1em;
  }
}

.topAboutOVP-text {
  margin-top: 6.11vw;
  letter-spacing: 0.08em;
}
.main._en .topAboutOVP-text {
  letter-spacing: 0;
}
@media screen and (width > 768px) {
  .topAboutOVP-text {
    margin-top: 2.2em;
    font-size: clamp(11px, 6.636px + 0.568vw, 18px);
  }
}


/* ---------- Portfolio ---------- */
.topPortfolio {
  position: relative;
  z-index: 1;
  background: var(--color-sub);
  padding: 25.45vw var(--sp-side-padding) 11.45vw;
  margin-top: -1px;
  color: var(--color-txt-main);
  & > h2 {
    font-family: var(--font-regular-en);
    font-weight: var(--font-regular-en-weight);
    font-size: 11.70vw;
    line-height: 1.1;
    overflow: hidden;
    & .word {
      opacity: 0;
      display: inline-block;
      transform: translateY(1em);
      transition: all .7s ease-in-out;
    }
    &.is-view .word {
      opacity: 1;
      transform: translateY(0);
      &._01 { transition-delay: 0.1s;}
    }
  }
}
@media screen and (width > 768px) {
  .topPortfolio {
    padding: 160px var(--pc-side-padding);
    & > h2 {
      font-size: clamp(48px, -0.623px + 6.331vw, 126px);
      font-weight: 400;
    }
  }
}

.topPortfolio-list {
  margin-top: 7.12vw;
  display: flex;
  flex-flow: column;
  row-gap: 5.09vw;
}
@media screen and (width > 768px) {
  .topPortfolio-list {
    margin-top: 85px;
    flex-flow: unset;
    flex-wrap: wrap;
    gap: 8.5vw 3.2vw;
  }
}

.topPortfolio-item {
  font-family: var(--font-regular-en);
  font-weight: var(--font-regular-en-weight);
  opacity: 0;
  transform: translateX(-3em);
  transition: transform .7s ease-in-out, opacity 1s ease-in-out;
  &.is-view {
    opacity: 1;
    transform: translateX(0);
  }
}
@media screen and (width > 768px) {
  .topPortfolio-item {
    width: calc((100% - 3.2vw) / 2);
  }
}

.topPortfolio-img {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  & > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow-clip-margin: unset;
    transition: all .5s;
    a:hover & {
      transform: scale(1.05);
    }
  }
}

.topPortfolio-title {
  margin-top: 3.82vw;
  font-size: 6.62vw;
  line-height: 1.2;
  color: var(--color-txt-main);
  text-align: center;
}
@media screen and (width > 768px) {
  .topPortfolio-title {
    margin-top: .4em;
    font-size: clamp(32px, 12.052px + 2.597vw, 64px);
  }
}

.topPortfolio-text {
  font-size: 3.56vw;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--color-txt-main);
  text-align: center;
}
@media screen and (width > 768px) {
  .topPortfolio-text {
    font-size: clamp(14px, 7.766px + 0.812vw, 24px);
  }
}


/* ---------- Member ---------- */
.topMember {
  position: relative;
  z-index: 1;
  background: var(--color-sub);
  padding: 25.45vw var(--sp-side-padding) 11.45vw;
  margin-top: -1px;
  color: var(--color-txt-main);
  & > h2 {
    font-family: var(--font-regular-en);
    font-weight: var(--font-regular-en-weight);
    font-size: 11.70vw;
    line-height: 1.1;
    overflow: hidden;
    & .word {
      opacity: 0;
      display: inline-block;
      transform: translateY(1em);
      transition: all .7s ease-in-out;
    }
    &.is-view .word {
      opacity: 1;
      transform: translateY(0);
      &._01 { transition-delay: 0.1s;}
    }
  }
  & > h3 {
    margin-top: 14.24vw;
    font-family: var(--font-regular-en);
    font-size: 4.07vw;
    font-weight: var(--font-regular-en-weight);
    letter-spacing: 0.1em;
    overflow: hidden;
    & .word {
      opacity: 0;
      display: inline-block;
      transform: translateY(1em);
      transition: all .7s ease-in-out;
    }
    &.is-view .word {
      opacity: 1;
      transform: translateY(0);
      &._01 { transition-delay: 0.1s;}
    }
  }
}
@media screen and (width > 768px) {
  .topMember {
    padding: 160px var(--pc-side-padding);
    & > h2 {
      font-size: clamp(48px, -0.623px + 6.331vw, 126px);
      font-weight: 400;
    }
    & > h3 {
      margin-top: 100px;
      font-size: clamp(19px, 10.896px + 1.055vw, 32px);
    }
  }
}

.topAboutMember-list {
  margin-top: 7.12vw;
  display: flex;
  flex-wrap: wrap;
  gap: 7.63vw 6.11vw;
}
@media screen and (width > 768px) {
  .topAboutMember-list {
    margin-top: 50px;
    gap: 8.5vw 3.2vw;
  }
}

.topAboutMember-item {
  width: calc((100% - 6.11vw) / 2);
  font-family: var(--font-regular-en);
  font-weight: var(--font-regular-en-weight);
  line-height: 1.6;
  cursor: pointer;
  opacity: 0;
  transform: translateY(2em);
  transition: all .7s ease-in-out;
  &.is-view {
    opacity: 1;
    transform: translateX(0);
  }
  &:hover {
    color: var(--color-link-hover);
  }
}
@media screen and (width > 768px) {
  .topAboutMember-item {
    width: calc((100% - (3.2vw * 3)) / 4);
  }
}

.topAboutMember-img {
  width: 100%;
  aspect-ratio: 1;
    overflow: hidden;
  & > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow-clip-margin: unset;
    transition: all .5s;
    li:hover & {
      transform: scale(1.05);
    }
  }
}

.topAboutMember-post {
  margin-top: 0.8em;
  font-size: 2.80vw;
  letter-spacing: 0.03em;
}
.topAboutMember-name {
  letter-spacing: 0.03em;
}
@media screen and (width > 768px) {
  .topAboutMember-post {
    font-size: clamp(11px, 6.636px + 0.568vw, 18px);
  }
  .topAboutMember-name {
    font-size: clamp(15px, 8.143px + 0.893vw, 26px);
  }
}

.topDialog {
  position: fixed;
  top: 0;
  left: 0;
  border: none;
  outline: none;
  width: 100%;
  max-width: unset;
  height: 100%;
  max-height: unset;
  background-color: var(--color-sub);
}
@media screen and (width > 768px) {
  .topDialog {
    width: 90%;
    max-width: 1200px;
    aspect-ratio: 15 / 9;
    height: unset;
    margin: auto;
    &::backdrop {
      background: rgba(0,0,0,0.5);
    }
  }
}

.topDialog-close {
  cursor: pointer;
  &._top {
    position: absolute;
    top: var(--sp-side-padding);
    right: var(--sp-side-padding);
    width: 9.16vw;
    aspect-ratio: 1;
    border: solid 1px var(--color-txt-sub);
    border-radius: 50%;
    background-color: rgba(0,0,0,0.2);
    font-size: 4.58vw;
    text-align: center;
    color: var(--color-txt-sub);
  }
  &._bottom {
    position: relative;
    left: 50%;
    display: inline-block;
    margin: 0 auto 7.63vw;
    padding: 0 2em;
    font-size: 2.80vw;
    line-height: 2;
    border: solid 1px var(--color-txt-main);
    border-radius: 999px;
    transform: translateX(-50%);
  }
}
@media screen and (width > 768px) {
  .topDialog-close {
    &._top {
      top: 1.5vw;
      right: 1.5vw;
      width: 1.5vw;
      border: none;
      background: none;
      font-size: 1.5vw;
      line-height: 1;
      color: var(--color-txt-main);
    }
    &._bottom {
      display: none;
    }
  }
}

@media screen and (width > 768px) {
  .topDialog-inner {
    display: flex;
    height: 100%;
  }
}

.topDialog-img {
  width: 100%;
  aspect-ratio: 393 / 320;
  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow-clip-margin: unset;
    object-position: top;
  }
}
@media screen and (width > 768px) {
  .topDialog-img {
    width: 44%;
    aspect-ratio: 650 / 930;
  }
}

.topDialog-cont {
  margin: 7.63vw 0;
  padding: 0 var(--sp-side-padding);
}
@media screen and (width > 768px) {
  .topDialog-cont {
    width: 56%;
    height: 100%;
    padding: 5vw 0 5vw;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
}

.topDialog-continner {
  outline: none;
  max-height: 100%;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}
@media screen and (width > 768px) {
  .topDialog-continner {
    padding: 0 clamp(40px, -20.444px + 7.87vw, 74px);
  }
}

.topDialog-name {
  font-size: 5.60vw;
  & > span {
    display: block;
    font-size: 4.58vw;
    line-height: 1.6;
  }
}
@media screen and (width > 768px) {
  .topDialog-name {
    font-size: clamp(19px, 10.896px + 1.055vw, 32px);
    & > span {
      font-size: clamp(13px, 7.390px + 0.731vw, 22px);
    }
  }
}

.topDialog-post {
  margin-top: 0.8em;
}
@media screen and (width > 768px) {
  .topDialog-post {
    margin-top: 0.2em;
    width: 100%;
    font-size: clamp(11px, 6.636px + 0.568vw, 18px);
  }
}

.topDialog-text {
  margin-top: 1.4em;
  line-height: 2;
  letter-spacing: 0.1em;
}
.main._en .topDialog-text {
  line-height: 1.9;
  letter-spacing: 0;
}
@media screen and (width > 768px) {
  .topDialog-text {
    width: 100%;
    /* font-size: clamp(11px, 6.636px + 0.568vw, 18px); */
    font-size: clamp(11px, 5.667px + 0.694vw, 14px);
  }
}


/* ---------- News ---------- */
.topNews {
  position: relative;
  z-index: 1;
  background: var(--color-sub);
  padding: 25.45vw var(--sp-side-padding) 11.45vw;
  margin-top: -1px;
  color: var(--color-txt-main);
  & > h2 {
    font-family: var(--font-regular-en);
    font-weight: var(--font-regular-en-weight);
    font-size: 11.70vw;
    line-height: 1.1;
    overflow: hidden;
    & .word {
      opacity: 0;
      display: inline-block;
      transform: translateY(1em);
      transition: all .7s ease-in-out;
    }
    &.is-view .word {
      opacity: 1;
      transform: translateY(0);
      &._01 { transition-delay: 0.1s;}
    }
  }
}
@media screen and (width > 768px) {
  .topNews {
    padding: 160px var(--pc-side-padding);
    & > h2 {
      font-size: clamp(48px, -0.623px + 6.331vw, 126px);
      font-weight: 400;
    }
  }
}

.topNews-list {
  margin-top: 7.12vw;
}
@media screen and (width > 768px) {
  .topNews-list {
    /* width: 90%;
    max-width: 1200px; */
    width: calc((13 / 20) * 100%);
    margin: 42px 0 0 auto;
  }
}

.topNews-item {
  margin-bottom: 8.14vw;
  padding-bottom: 3.05vw;
  /* border-bottom: solid 1px #B3B3B3; */
  position: relative;
  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1px;
    width: 0;
    background-color: #b3b3b3;
    transition: all .7s ease-in-out;
  }
  &.is-view::after {
    width: 100%;
  }
}
@media screen and (width > 768px) {
  .topNews-item {
    margin-bottom: 70px;
    padding-bottom: 6px;
  }
}

.topNews-cat {
  font-family: var(--font-regular-en);
  font-weight: 600;
  & > span {
    padding: .6em 1.5em .5em;
    border: solid 1px #006837;
    border-radius: 999px;
    font-size: 2.29vw;
    line-height: 1.1;
    letter-spacing: 0.1em;
    color: #006837;
  }
}
@media screen and (width > 768px) {
  .topNews-cat {
    & > span {
      font-size: clamp(10px, 8.753px + 0.162vw, 12px);
    }
  }
}

.topNews-text {
  margin-top: 2.8vw;
}
@media screen and (width > 768px) {
  .topNews-text {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2em;
  }
}

.topNews-title {
  font-size: 4.58vw;
  line-height: 1.6;
  letter-spacing: 0.05em;
}
@media screen and (width > 768px) {
  .topNews-title {
    font-size: clamp(16px, 8.519px + 0.974vw, 28px);
  }
}

.topNews-date {
  margin-top: 0.3em;
}
@media screen and (width > 768px) {
  .topNews-date {
    font-size: clamp(11px, 6.636px + 0.568vw, 18px);
  }
}


/* ---------- Company ---------- */
.topCompany {
  position: relative;
  z-index: 1;
  background: var(--color-sub);
  padding: 25.45vw var(--sp-side-padding);
  margin-top: -1px;
  color: var(--color-txt-main);
  & > h2 {
    font-family: var(--font-regular-en);
    font-weight: var(--font-regular-en-weight);
    font-size: 11.70vw;
    line-height: 1.1;
    overflow: hidden;
    & .word {
      opacity: 0;
      display: inline-block;
      transform: translateY(1em);
      transition: all .7s ease-in-out;
    }
    &.is-view .word {
      opacity: 1;
      transform: translateY(0);
      &._01 { transition-delay: 0.1s;}
    }
  }
}
@media screen and (width > 768px) {
  .topCompany {
    padding: 160px var(--pc-side-padding);
    & > h2 {
      font-size: clamp(48px, -0.623px + 6.331vw, 126px);
      font-weight: 400;
    }

  }
}

.topCompany-list {
  margin-top: 7.12vw;
  letter-spacing: 0.05em;
  & > dt {
    padding-top: 3.82vw;
    font-size: 2.80vw;
    position: relative;
    &:first-of-type::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      height: 1px;
      background-color: #b3b3b3;
      transition: all .7s ease-in-out;
    }
    &.is-view:first-of-type::before {
      width: 100%;
    }
  }
  & > dd {
    padding-bottom: 5.85vw;
    line-height: 1.6;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 1px;
      background-color: #b3b3b3;
      transition: all .7s ease-in-out;
    }
    &.is-view::after {
      width: 100%;
    }
  }
}
.main._en .topCompany-list {
  letter-spacing: 0;
}
@media screen and (width > 768px) {
  .topCompany-list {
    display: flex;
    flex-wrap: wrap;
    /* width: 90%;
    max-width: 1200px; */
    width: calc((13 / 20) * 100%);
    margin: 42px 0 0 auto;
    & > dt {
      padding: 1.8em 0.5em;
      width: 8em;
      font-size: clamp(14px, 7.766px + 0.812vw, 24px);
      line-height: 1.8;
      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 1px;
        background-color: #b3b3b3;
        transition: all .3s linear;
      }
      &.is-view::after {
        width: 100%;
      }
      &:first-of-type::before {
        transition: all .3s linear;
      }
    }
    &._en > dt {
      width: 10em;
    }
    & > dd {
      padding: 1.8em 0.5em;
      width: calc(100% - 8em);
      font-size: clamp(14px, 7.766px + 0.812vw, 24px);
      line-height: 1.8;
      position: relative;
      &::after {
        transition: all .5s linear .3s;
      }
      &:first-of-type::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 1px;
        background-color: #b3b3b3;
        transition: all .5s linear .3s;
      }
      &.is-view:first-of-type::before {
        width: 100%;
      }
      &._entxt {
        letter-spacing: 0;
      }
    }
    &._en > dd {
      width: calc(100% - 10em);
    }
  }
}


/* ---------- top common ---------- */
.topLinkBtn {
  text-align: right;
  & > a {
    position: relative;
    padding: 1em 13.23vw 1em 0;
    &::after {
      content: "";
      position: absolute;
      top: 50%;
      right: 0;
      width: 8.65vw;
      aspect-ratio: 1;
      background-image: url(../img/common/arrow_link.svg);
      background-repeat: no-repeat;
      background-size: contain;
      transform: translateY(-50%);
      transition: all .3s;
    }
    &:hover::after {
      right: -.3em;
    }
  }
}
@media screen and (width > 768px) {
  .topLinkBtn {
    font-size: clamp(16px, 14.753px + 0.162vw, 18px);
    & > a {
      padding: 1em 60px 1em 0;
      &::after {
        width: clamp(36px, 31.636px + 0.568vw, 43px);
      }
    }
  }
}


/* ==============================================================
*  Lower
* ============================================================ */
.lower {
  position: relative;
  z-index: 1;
  background: var(--color-sub);
  padding: 38.16vw var(--sp-side-padding) 11.45vw;
  margin-top: -1px;
  color: var(--color-txt-main);
  & .lower-ttl {
    font-family: var(--font-regular-en);
    font-weight: var(--font-regular-en-weight);
    font-size: 11.70vw;
    line-height: 1.1;
    overflow: hidden;
    & .word {
      opacity: 0;
      display: inline-block;
      transform: translateY(1em);
      transition: all .7s ease-in-out;
    }
    &.is-view .word {
      opacity: 1;
      transform: translateY(0);
      &._01 { transition-delay: 0.1s;}
    }
  }
}
@media screen and (width > 768px) {
  .lower {
    padding: 160px var(--pc-side-padding);
    & .lower-ttl {
      font-size: clamp(48px, -0.623px + 6.331vw, 126px);
      font-weight: 400;
    }
  }
}

.singlePage {
  margin-top: 15.26vw;
  padding-bottom: 15.26vw;
}
@media screen and (width > 768px) {
  .singlePage {
    margin-top: 5.5vw;
    padding-bottom: 200px;
  }
}



/* ==============================================================
*  news
* ============================================================ */
.newsPaging-list {
  display: flex;
  align-items: center;
  gap: 0;
  justify-content: flex-end;
  margin-bottom: 8.9vw;
  & li {
    position: relative;
  }
  & a, & span {
    padding: 0 1.52vw;
    color: #0000004D;
    font-size: 3.56vw;
  }
  & .current {
    color: #000000;
  }
  & .prev {
    a {
      display: block;
      padding: 0;
      border-radius: 50%;
      transition: all .3s;
      &::before {
        rotate: 180deg;
        display: block;
        width: 8.65vw;
        height: auto;
        aspect-ratio: 1;
        background-image: url(../img/common/arrow_link.svg);
        background-repeat: no-repeat;
        background-size: contain;
        content: "";
      }
      &:hover {
        translate: -.3em 0;
      }
    }
  }
  & .next {
    a {
      display: block;
      padding: 0;
      border-radius: 50%;
      transition: all .3s;
      &::before {
        display: block;
        width: 8.65vw;
        height: auto;
        aspect-ratio: 1;
        background-image: url(../img/common/arrow_link.svg);
        background-repeat: no-repeat;
        background-size: contain;
        content: "";
      }
      &:hover {
        translate: .3em 0;
      }
    }
  }
}
@media screen and (width > 768px) {
  .newsPaging-list {
    gap: 0 10px;
    margin-bottom: 160px;
    & a, & span {
      padding: 0 6px;
      font-size: clamp(14px, 7.766px + 0.812vw, 24px);
    }
    & .prev {
      & a {
        &::before {
          width: clamp(36px, 31.636px + 0.568vw, 43px);
        }
      }
    }
    & .next {
      & a {
        &::before {
          width: clamp(36px, 31.636px + 0.568vw, 43px);
        }
      }
    }
  }
}

/* ---------- news details ---------- */
.newsPage {
  margin-top: 15.26vw;
  padding-bottom: 15.26vw;
  & h1 {
    font-size: 6.1vw;
    font-weight: 500;
    line-height: 1.4;
  }
}
@media screen and (width > 768px) {
  .newsPage {
    margin-top: 5.5vw;
    padding-bottom: 200px;
    & h1 {
      font-size: clamp(29px, 10.922px + 2.354vw, 58px);
    }
  }
}


.newsPage-cat {
  margin-top: 5.59vw;
  font-family: var(--font-regular-en);
  font-weight: 700;
  & > span {
    padding: .6em 1.5em .5em;
    border: 2px solid;
    border-radius: 999px;
    font-size: 3.05vw;
    line-height: 1.1;
    letter-spacing: 0.1em;
    ._event & {
      border-color: #006837;
      color: #006837;
    }
  }
}
@media screen and (width > 768px) {
  .newsPage-cat {
    margin-top: 1.79vw;
    & > span {
      font-size: clamp(10px, 8.753px + 0.162vw, 12px);
    }
  }
}

.newsPage-data {
  margin-top: 5.59vw;
  font-size: 3.56vw;
}
@media screen and (width > 768px) {
  .newsPage-data {
    margin-top: 1.5vw;
    font-size: clamp(11px, 6.636px + 0.568vw, 18px);
  }
}

.newsPageImg {
  margin-top: 11.45vw;
  text-align: center;
  & p {
    margin-top: 4.07vw;
    color: #00000080;
    font-size: 3.56vw;
    font-weight: var(--font-light-weight);
    text-align: left;
  }
}
@media screen and (width > 768px) {
  .newsPageImg {
    margin-top: 3.2vw;
    & p {
      margin-top: 2em;
      font-size: clamp(11px, 6.636px + 0.568vw, 18px);
    }
  }
}

.newsPageDetails {
  display: grid;
  gap: 9.66vw 0;
  grid-template-areas: 'b' 'a' 'c';
  grid-template-columns: 100%;
  grid-template-rows: auto auto auto;
  margin-top: 11.45vw;
}
@media screen and (width > 768px) {
  .newsPageDetails {
    gap: 3vw 7.24vw;
    grid-template-areas: 'a b' 'a c';
    grid-template-columns: 1fr 62vw;
    grid-template-rows: auto auto;
    margin-top: min(6.8vw,136px);
  }
}

.newsPageDetails-contents {
  grid-area: b;
  & p {
    font-size: 4.07vw;
    font-weight: var(--font-light-weight);
    line-height: 2;
  }
  & p + p {
    margin-top: 2em;
  }
}
@media screen and (width > 768px) {
  .newsPageDetails-contents {
    & p {
      font-size: clamp(12px, 7.013px + 0.649vw, 20px);
    }
  }
}

.newsPageDetailsTags {
  grid-area: a;
}

.newsPageDetailsTags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 3.05vw;
  & li {
    padding: 0.7em 1.8em;
    border: 1px solid #000;
    border-radius: 9999px;
    font-size: 3.05vw;
    font-weight: 400;
  }
}
@media screen and (width > 768px) {
  .newsPageDetailsTags-list {
    gap: 0.85vw 0.6vw;
    & li {
      font-size: clamp(10px, 6.260px + 0.487vw, 16px);
    }
  }
}

.newsPageDetailsSns {
  grid-area: c;
  margin-top: 9.41vw;
  & p {
    text-align: center;
  }
}
@media screen and (width > 768px) {
  .newsPageDetailsSns {
    margin-top: 3vw;
    & p {
      text-align: left;
    }
  }
}

.newsPageDetailsSns-list {
  display: flex;
  align-items: center;
  gap: 0 5.34vw;
  justify-content: center;
  margin-top: 2.54vw;
  & a {
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: opacity 0.3s;
    &.fb {
      width: 7.12vw;
      height: auto;
      aspect-ratio: 1;
      background-image: url("../img/common/icn_sns_fb.svg");
    }
    &.x {
      width: 6.36vw;
      height: auto;
      aspect-ratio: 1;
      background-image: url("../img/common/icn_sns_x.svg");
    }
    &:hover {
      opacity: 0.5;
    }
  }
  & span {
    font-size: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
  }
}
@media screen and (width > 768px) {
  .newsPageDetailsSns-list {
    gap: 0 1.5vw;
    justify-content: flex-start;
    margin-top: 0.6vw;
    & a {
      &.fb {
        width: clamp(20px, 7.532px + 1.623vw, 40px);
      }
      &.x {
        width: clamp(20px, 10.649px + 1.218vw, 35px);
      }
      &.sample {
        width: clamp(25px, 9.416px + 2.029vw, 50px);
      }
    }
  }
}

/* ==============================================================
*  404 (index.php)
* ============================================================ */
.ttl_404 {
  text-align: center;
  & .lower-ttl {
    font-weight: 700;
    letter-spacing: .1em;
  }
}
@media screen and (width > 768px) {
  .ttl_404 {
    & p {
      font-size: clamp(13px, 7.390px + 0.731vw, 22px);
    }
  }
}

.txt_404 {
  margin: 5em 0;
  & h2 {
    font-size: 6vw;
  }
}
@media screen and (width > 768px) {
  .txt_404 {
    margin-bottom:0;
    & h2 {
      font-size: clamp(26px, 12.286px + 1.786vw, 48px);
      text-align: center;
    }
    & p {
      text-align: center;
    }
  }
}

.link_404 {
  margin-top: 2em;
  text-align: center;
}
@media screen and (width > 768px) {
  .link_404 {
    margin-top: 4em;
  }
}


/* ==============================================================
*  utility
* ============================================================ */
@media screen and (width > 768px) {
  .hidden-pc {
    display: none;
  }
}
@media screen and (width <= 768px) {
  .hidden-sp {
    display: none;
  }
}

.txt-center {
  text-align: center !important;
}

.txt-right {
  text-align: right !important;
}

.txt-left {
  text-align: left !important;
}