@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(button) {
  padding: 0;
  border: none;
  outline: none;
  background-color: transparent;
  appearance: none;
}
:where(textarea) {
  overflow: auto;
  resize: vertical;
  user-select: auto;
}
:where([disabled]) {
  cursor: default;
}
:where([hidden]) {
  display: none !important;
}

/* ==============================================================
*  base
* ============================================================ */
:root {
  --color-black: #222;
  --color-white: #FFF;
  --color-red: #D1121B;
  --txt-color-main: #222;
  --txt-color-sub: #FFF;
  --link-color-hover: #D1121B;
  --header-height-pc: min(9.77vw,100px);
  /*--header-height-sp: 18vw;*/
  --header-height-sp: max(18.67vw,70px);
}

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

body {
  color: var(--txt-color-main);
  font-family: "Noto Sans JP", "游ゴシック", YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: clamp(14px, 8.000px + 0.781vw, 16px);
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  font-kerning: normal;
}

@media screen and (width < 1024px) {
  body {
    
  }
}
@media screen and (width < 769px) {
  body {
    font-size: 4.27vw;
  }
}


/* ==============================================================
*  common
* ============================================================ */
/* ---------- header ---------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: var(--header-height-pc);
  background-color: #FFF;
}
@media screen and (width < 769px) {
  .header {
    height: var(--header-height-sp);
  }
}

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 min(2.34vw,24px) 0 min(5.66vw,58px);
}

.header-logo {
  width: min(27.54vw,282px);
  height: auto;
  aspect-ratio: 304/54;
  & img {
    width: 100%;
  }
}
@media screen and (width < 769px) {
  .header-logo {
    width: 42.67vw;
  }
}

.header-nav {
  margin-left: auto;
}
@media screen and (width < 1024px) {
  .header-nav {
    position: absolute;
    top: 100%;
    right: 0;
    translate: 100% 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100svh - var(--header-height-pc));
    padding-bottom: 100px;
    background-color: #153057;
    opacity: 0;
    overflow: hidden auto;
    overscroll-behavior: none;
    transition: translate .3s, opacity .3s;
    .is-open & {
      translate: 0 0;
      opacity: 1;
    }
  }
}
@media screen and (width < 769px) {
  .header-nav {
    top: var(--header-height-sp);
    height: calc(100svh - var(--header-height-sp));
  }
}

.nav {
  & ul {
    display: flex;
    align-items: center;
    gap: 0 min(1.74vw,25px);
  }
  & a {
    color: #153057;
    font-weight: 500;
    line-height: 1.2;
    transition: color .3s ease-out;
    &[data-nav="contact"] {
      display: flex;
      align-items: center;
      justify-content: center;
      width: min(14.45vw,148px);
      height: auto;
      aspect-ratio: 148/48;
      border-radius: min(.39vw,4px) min(.39vw,4px) min(.98vw,10px) min(.39vw,4px);
      background-color: #C4A64F;
      color: #FFF;
      font-weight: 700;
      transition: background .3s ease-out;
    }
  }
}
@media screen and (width < 1024px) {
  .nav {
    display: block;
    margin: 50px 25px 0;
    & ul {
      display: block;
      text-align: right;
    }
    & li:not(:first-child) {
      margin-top: 20px;
    }
    & li:last-child {
      margin-top: 50px;
    }
    & a {
      color: #FFF;
      font-size: 16px;
      &[data-nav="contact"] {
        width: 148px;
        margin: 0 0 0 auto;
        border-radius: 4px;
      }
    }
  }
}
@media screen and (width < 769px) {
  .nav {
    margin-top: max(13.33vw,50px);
    & ul {
      text-align: center;
    }
    & li:not(:first-child) {
      margin-top: max(5.33vw,20px);
    }
    & li:last-child {
      margin-top: max(13.33vw,50px);
    }
    & a {
      font-size: max(4.26vw,16px);
      &[data-nav="contact"] {
        width: 70%;
        margin: 0 auto;
        aspect-ratio: 148/20;
        border-radius: 1.07vw;
      }
    }
  }
}
@media (hover: hover) {
  .nav a:hover {
    color: #C4A64F;
    &[data-nav="contact"] {
      background-color: #153057;
      color: #FFF;
      text-decoration: none;
      .is-open & {
        background-color: #FFF;
        color: #153057;
      }
    }
  }
}

.header-spBtn {
  position: absolute;
  top: 50%;
  right: 20px;
  translate: 0 -50%;
  display: none;
  width: 60px;
  height: auto;
  aspect-ratio: 1;
  margin-left: auto;
}
@media screen and (width < 1024px) {
  .header-spBtn {
    display: flex;
  }
}
@media screen and (width < 769px) {
  .header-spBtn {
    width: 10.67vw;
  }
}

.spBtn {
  position: relative;
  width: 100%;
  height: 100%;
  border: none;
  background-color: transparent;
  font-size: initial;
  appearance: none;
  &::before,&::after,& > span {
    position: absolute;
    left: 50%;
    transform-origin: center;
    translate: -50% 0;
    transform-origin: left center;
    width: 40px;
    height: 2px;
    background-color: #2A2A2A;
    border-radius: 1px;
    transition: rotate .2s, left .2s, width .2s;
    content: "";
  }
  &::before {
    top: 15px;
  }
  &::after {
    top: 45px;
  }
  & > span {
    top: 30px;
    opacity: 1;
    transition: opacity .2s;
  }
}
@media screen and (width < 769px) {
  .spBtn {
    &::before,&::after,& > span {
      width: 8vw;
    }
    &::before {
      top: 2.67vw;
    }
    &::after {
      top: 7.47vw;
    }
    & > span {
      top: 5.07vw;
    }
  }
}

.is-open .spBtn {
  &::before,&::after {
    left: 37px;
    width: 43px;
  }
  &::before {
    rotate: 45deg;
  }
  &::after {
    rotate: -45deg;
  }
  & > span {
    opacity: 0;
  }
}
@media screen and (width < 769px) {
  .is-open .spBtn {
    &::before,&::after {
      left: 6.4vw;
      width: 6.93vw;
    }
  }
}


.contents {
  padding-top: var(--header-height-pc);
  &[data-bg="gray"] {
    background-color: #F0F0F0;
  }
  &[data-cate="page"] {
    padding-bottom: min(13.89vw,200px);
  }
}
@media screen and (width < 769px) {
  .contents {
    padding-top: var(--header-height-sp);
  }
}


/* ---------- hero ---------- */
.hero {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--header-height-pc));
  &::before {
    position: absolute;
    right: 30px;
    bottom: 30px;
    z-index: 10;
    display: block;
    width: min(1.11vw,16px);
    height: auto;
    aspect-ratio: 16/150;
    background-color: #FFF;
    mask: url(/assets/image/img_hero_scroll.svg) no-repeat center/cover;
    content: "";
  }
}
@media screen and (width < 769px) {
  .hero {
    height: calc(100svh - var(--header-height-sp));
    min-height: calc(max(152vw,570px) - var(--header-height-sp));
  }
}

.hero-inner {
  position: absolute;
  place-self: center;
  inset: 0;
  z-index: 10;
  & p {
    margin-top: 54px;
    color: #FFF;
    font-family: "Noto Serif", serif;
    font-optical-sizing: auto;
    font-size: 20px;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    font-weight: 500;
    line-height: 1.8;
    text-align: center;
  }
  & .hero-catch {
    margin-top: 0;
    font-size: 50px;
    font-weight: 700;
    line-height: 1.5;
    & span {
      font-size: 60px;
      &.color {
        color: #C4A64F;
      }
    }
  }
}
@media screen and (width < 769px) {
  .hero-inner {
    & p {
      font-size: 4.27vw;
    }
    & .hero-catch {
      font-size: 8vw;
      & span {
        font-size: 9.6vw;
      }
    }
  }
}

.hero .splide__track {
  height: 100%;
}

.hero .splide__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.hero .splide__pagination {
  position: absolute;
  bottom: min(4.16vw,60px);
  left: 50%;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 0 12px;
  justify-content: center;
  & button {
    display: block;
    width: 10px;
    height: auto;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: #FFF;
    &.is-active {
      background-color: #153057;
    }
  }
}
@media screen and (width < 769px) {
  .hero .splide__pagination {
    bottom: 5.33vw;
  }
}

.section {
  padding: min(13.89vw,200px) 0 min(17.26vw,250px);
  &[data-section="news"] {
    border-radius: 0 0 0 min(6.25vw,90px);
    background-color: #F0F0F0;
  }
  &[data-section="management"] {
    border-radius: 0 0 min(6.25vw,90px) 0;
    background-color: #153057;
  }
  &[data-section="company"] {
    border-radius: 0 0 0 min(6.25vw,90px);
    background-color: #153057;
  }
}

.section-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px;
}

.section-ttl {
  text-align: center;
  [data-section="aboutUs"] & {
    text-align: left;
  }
  & h2 {
    color: #153057;
    font-family: "Noto Serif", serif;
    font-optical-sizing: auto;
    font-size: min(3.47vw,50px);
    font-style: normal;
    font-variation-settings: "wdth" 100;
    font-weight: 700;
    [data-section="management"] & {
      color: #FFF;
    }
    [data-section="company"] & {
      color: #FFF;
    }
  }
  & p {
    color: #C4A64F;
    font-size: 20px;
  }
}
@media screen and (width < 769px) {
  .section-ttl {
    & h2 {
      font-size: 8vw;
    }
    & p {
      font-size: 5.33vw;
    }
  }
}

.newsItems {
  display: flex;
  flex-direction: column;
  gap: min(1.39vw,20px) 0;
  margin-top: min(4.17vw,60px);
}
@media screen and (width < 769px) {
  .newsItems {
    gap: 3.2vw 0;
    margin-top: 9.6vw;
  }
}

.newsItem {
  position: relative;
  display: flex;
  gap: 0 min(2.08vw,30px);
  padding: min(1.94vw,28px) min(4.17vw,60px) min(1.94vw,28px) min(2.08vw,30px);
  background-color: #FFF;
  border-radius: min(.56vw,8px);
  color: #333;
  &[href] {
    transition: background .3s ease-out, color .3s ease-out;
    &::after {
      position: absolute;
      top: 50%;
      right: min(2.08vw,30px);
      translate: 0 -50%;
      display: block;
      width: min(1.39vw,20px);
      height: auto;
      aspect-ratio: 1;
      background-color: #888;
      mask: url(/assets/image/icon_news_arrow.svg) no-repeat center/cover;
      transition: background .3s ease-out;
      content: "";
    }
  }
}
@media screen and (width < 769px) {
  .newsItem {
    flex-wrap: wrap;
    gap: 2.13vw 5.33vw;
    padding: 3.73vw 10.66vw 3.73vw 5.33vw;
    border-radius: 2.13vw;
    &[href]::after {
      right: 3.2vw;
      width: 4.27vw;
    }
  }
}
@media (hover:hover) {
  .newsItem[href]:hover {
    background-color: #153057;
    color: #FFF;
    &::after {
      background-color: #FFF;
    }
  }
}

.newsItem-cate {
  display: flex;
  align-items: center;
  align-self: start;
  flex-shrink: 0;
  justify-content: center;
  width: min(17.17vw,150px);
  height: auto;
  aspect-ratio: 150/24;
  border-radius: 9999px;
  background-color: #FFEDB9;
  color: #333;
  font-size: clamp(12px, 6.000px + 0.781vw, 14px);
  text-align: center;
}
@media screen and (width < 769px) {
  .newsItem-cate {
    width: 40vw;
    font-size: 3.73vw;
  }
}

@media screen and (width < 769px) {
  .newsItem-name {
    width: 100%;
  }
}


.aboutUsBox {
  display: grid;
  gap: 0 min(4.31vw,62px);
  grid-template-columns: min(48.61vw,700px) 1fr;
  margin-top: min(4.17vw,60px);
  & p:nth-child(n+2) {
    margin-top: 1em;
  }
}
@media screen and (width < 769px) {
  .aboutUsBox {
    gap: 9.6vw 0;
    grid-template-columns: 100%;
    margin-top: 9.6vw;
  }
}

.aboutUsItems {
  display: grid;
  gap: min(3.47vw,50px);
  grid-template-columns: repeat(4,1fr);
  margin-top: min(6.94vw,100px);
  & li {
    display: contents;
  }
}
@media screen and (width < 1024px) {
  .aboutUsItems {
    grid-template-columns: repeat(2,1fr);
  }
}
@media screen and (width < 769px) {
  .aboutUsItems {
    gap: 9.6vw;
    grid-template-columns: 100%;
    margin-top: 16vw;
  }
}

.aboutUsItem {
  display: grid;
  gap: min(2.08vw,30px) 0;
  grid-template-rows: subgrid;
  grid-row: span 3;
  padding: min(2.08vw,30px);
  border-radius: min(.69vw,10px);
  background-color: #153057;
  color: #FFF;
  & h3 {
    font-family: "Noto Serif", serif;
    font-optical-sizing: auto;
    font-size: min(1.76vw,24px);
    font-style: normal;
    font-variation-settings: "wdth" 100;
    line-height: 1.5;
    text-align: center;
  }
  & p {
    font-size: clamp(16px, 10.000px + 0.781vw, 18px);
    line-height: 1.88;
  }
  & div {
    text-align: center;
  }
}
@media screen and (width < 1024px) {
  .aboutUsItem {
    padding: 8vw;
    & h3 {
      font-size: 20px;
    }
  }
}
@media screen and (width < 769px) {
  .aboutUsItem {
    gap: 4.8vw;
    padding: 8vw;
    border-radius: 2.66vw;
    & h3 {
      font-size: 6.4vw;
    }
    & p {
      font-size: 4.8vw;
    }
  }
}

.management-ttl {
  margin-top: min(9.38vw,135px);
  color: #FFF;
  font-family: "Noto Serif", serif;
  font-optical-sizing: auto;
  font-size: min(2.5vw,36px);
  font-style: normal;
  font-variation-settings: "wdth" 100;
  text-align: center;
}
@media screen and (width < 769px) {
  .management-ttl {
    margin-top: 16vw;
    font-size: 5.87vw;
  }
}

.managementBox {
  position: relative;
  width: min(83.33vw,1200px);
  margin: min(4.17vw,60px) auto 0;
  padding-bottom: min(21.81vw,314px);
  &::before {
    position: absolute;
    bottom: 0;
    left: 50%;
    translate: -50% 0;
    display: block;
    width: min(69.44vw,1000px);
    height: auto;
    aspect-ratio: 1000/180;
    background: url(/assets/image/bg_management.png) no-repeat center/cover;
    content: "";
  }
  & p {
    color: #FFF;
    font-size: clamp(16px, 10.000px + 0.781vw, 18px);
    &:nth-child(n+2) {
      margin-top: 1em;
    }
    &.sign {
      margin-top: 2em;
      text-align: right;
    }
  }
}
@media screen and (width < 769px) {
  .managementBox {
    margin-top: 9.6vw;
    padding-bottom: 32vw;
    & p {
      font-size: 4.8vw;
    }
  }
}


.members {
  display: grid;
  gap: min(2.78vw,40px);
  grid-template-columns: repeat(2,1fr);
  margin-top: min(4.17vw,60px);
  & li {
    display: contents;
  }
}
@media screen and (width < 769px) {
  .members {
    margin-top: 9.6vw;
    grid-template-columns: 100%;
  }
}

.member {
  display: grid;
  gap: min(1.67vw,24px) 0;
  grid-template-rows: subgrid;
  grid-row: span 2;
  padding: min(2.08vw,30px) min(2.08vw,30px) min(2.43vw,35px);
  border-radius: 10px;
  background-color: #FFF;
}
@media screen and (width < 769px) {
  .member {
    gap: 4vw 0;
    padding: 5.33vw;
  }
}

.member-top {
  display: grid;
  align-items: center;
  gap: 0 min(1.74vw,25px);
  grid-template-columns: min(5.56vw,80px) 1fr;
}
@media screen and (width < 769px) {
  .member-top {
    gap: 0 5.33vw;
    grid-template-columns: 13.33vw 1fr;
  }
}

.member-name {
  font-size: min(1.66vw,24px);
  font-weight: 500;
  & span {
    display: inline-block;
    margin-left: min(1.94vw,15px);
  }
}
@media screen and (width < 769px) {
  .member-name {
    font-size: 4.8vw;
    line-height: 1.3;
    & span {
      margin-left: 0;
      font-size: 4.27vw;
    }
  }
}

.member-post {
  margin-top: min(.27vw,4px);
  color: #777;
}
@media screen and (width < 769px) {
  .member-post {
    margin-top: 1.07vw;
  }
}

.member-bottom {
  padding: 0 min(1.94vw,15px) min(1.67vw,24px);
  & p {
    color: #444;
    line-height: 1.75;
  }
}

.portfolioTxt {
  margin-top: min(5.56vw,80px);
  text-align: center;
}
@media screen and (width < 769px) {
  .portfolioTxt {
    margin-top: 12.8vw;
  }
}

.companyProfile {
  max-width: 1200px;
  margin: min(5.97vw,86px) auto 0;
  padding: min(6.94vw,100px);
  border-radius: min(2.08vw,30px);
  background-color: #FFF;
  & div {
    padding: min(1.74vw,25px) 0;
    border-bottom: 1px solid #B5B5B5;
    &:first-child {
      padding-top: 0;
    }
    &:last-child {
      padding-bottom: 0;
      border-bottom: none;
    }
  }
  & dt {
    color: #777;
    font-size: 14px;
    line-height: 1.71;
  }
  & dd {
    margin-top: min(1.04vw,15px);
    font-size: clamp(16px, 10.000px + 0.781vw, 18px);
    line-height: 1.6;
  }
}
@media screen and (width < 769px) {
  .companyProfile {
    margin-top: 12.8vw;
    padding: 5.33vw;
    border-radius: 4.8vw;
    & div {
      padding: 4vw 0;
    }
    & dt {
      font-size: 3.73vw;
    }
    & dd {
      font-size: 4.8vw;
    }
  }
}

.companyMap {
  margin-top: min(10.42vw,150px);
  & iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 1400/670;
  }
}
@media screen and (width < 769px) {
  .companyMap {
    margin-top: 24vw;
    & iframe {
      aspect-ratio: 320/450;
    }
  }
}

.contactTxt {
  margin-top: min(5.97vw,86px);
  color: #777;
  text-align: center;
}
@media screen and (width < 769px) {
  .contactTxt {
    margin-top: 13.33vw;
  }
}

.contactBtn {
  margin-top: min(5.56vw,80px);
  text-align: center;
  & button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(25vw,360px);
    height: auto;
    aspect-ratio: 360/80;
    margin: 0 auto;
    border-radius: min(.69vw,10px);
    background-color: #153057;
    color: #FFF;
    font-size: min(1.39vw,20px);
    transition: background .3s ease-out;
  }
  & span {
    position: relative;
    padding-left: min(4.17vw,60px);
    &::before {
      position: absolute;
      top: 50%;
      left: 0;
      translate: 0 -50%;
      display: block;
      width: min(2.78vw,42px);
      height: auto;
      aspect-ratio: 40/32;
      background: #C4A64F;
      mask: url(/assets/image/icon_mail.svg) no-repeat center/cover;
      transition: background .3s ease-out;
      content: "";
    }
  }
}
@media screen and (width < 769px) {
  .contactBtn {
    margin-top: 13.33vw;
    & button {
      width: 58.66vw;
      border-radius: 1.6vw;
      font-size: 4.8vw;
    }
    & span {
      padding-left: 9.6vw;
      &::before {
        width: 6.93vw;
      }
    }
  }
}
@media (hover:hover) {
  .contactBtn button:hover {
    background-color: #C4A64F;
    & span::before {
      background-color: #FFF;
    }
  }
}

.copyBtn {
  margin-top: min(1.58vw,22px);
  text-align: center;
  & button {
    position: relative;
    display: inline-block;
    padding-right: min(2.64vw,38px);
    color: #777;
    transition: color .3s ease-out;
    &::after {
      position: absolute;
      top: 50%;
      right: 0;
      translate: 0 -50%;
      display: block;
      width: min(1.39vw,20px);
      height: auto;
      aspect-ratio: 1;
      background: #4B4B4B;
      mask: url(/assets/image/icon_blank.svg) no-repeat center/cover;
      transition: right .3s ease-out;
      content: "";
    }
  }
}
@media screen and (width < 769px) {
  .copyBtn {
    margin-top: 3.2vw;
    & button {
      padding-right: 5.87vw;
      &::after {
        width: 3.2vw;
      }
    }
  }
}
@media (hover:hover) {
  .copyBtn button:hover {
    color: #153057;
    &::after {
      right: -5px;
    }
  }
}

/* ---------- footer ---------- */
.footer {
  position: relative;
  padding: min(4.17vw,60px) 0 min(.97vw,14px);
  background-color: #153057;
}
@media screen and (width < 769px) {
  .footer {
    padding: 16vw 0 5.33vw;
  }
}

.footer-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

.footerLogo {
  width: 304px;
  margin: 0 auto;
  aspect-ratio: 304/54;
  & img {
    width: 100%;
  }
}
@media screen and (width < 769px) {
  .footerLogo {
    width: 64vw;
  }
}

.footerNav {
  margin-top: min(3.13vw,45px);
  & a {
    color: #FFF;
    transition: color .3s ease-out;
  }
}
@media screen and (width < 769px) {
  .footerNav {
    margin-top: 7.47vw;
  }
}
@media (hover:hover) {
  .footerNav a:hover {
    color: #C4A64F;
  }
}

.footerCopy {
  max-width: 1440px;
  margin: min(5.56vw,80px) auto 0;
  padding: 0 20px;
  text-align: center;
  & small {
    color: #FFF;
  }
}
@media screen and (width < 769px) {
  .footerCopy {
    margin-top: 13.33vw;
    & small {
      font-size: 3.2vw;
    }
  }
}

.pageTopWrap {
  position: fixed;
  right: max(calc(50% - 44vw), calc(50% - 600px));
  bottom: 100px;
  translate: 50% 0;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
@media screen and (width < 1024px) {
  .pageTopWrap {
    right: 40px;
    bottom: 16px;
  }
}

.pageTopWrap.is-show {
  opacity: 1;
  visibility: visible;
}

.pageTop {
  position: relative;
  display: block;
  width: 50px;
  height: auto;
  aspect-ratio: 1;
  border: 1px solid #153057;
  border-radius: 50%;
  background: #FFF;
  transition: border .3s ease-out;
}
@media (hover:hover) {
  .pageTop:hover {
    border-color: #C4A64F;
  }
}

.pageTop::after {
  position: absolute;
  top: calc(50% + 3px);
  left: 50%;
  transform: translate(-50%,-50%) rotate(-45deg);
  width: 13px;
  border-top: 3px solid #153057;
  border-right: 3px solid #153057;
  aspect-ratio: 1;
  transition: border .3s ease-out;
  content: "";
}
@media (hover:hover) {
  .pageTop:hover::after {
    border-color: #C4A64F;
  }
}


/* ---------- animation ---------- */
[data-js="animated"] {
  translate: 0 50px;
  opacity: 0;
  transition: translate 1s cubic-bezier(0.22, 0.61, 0.36, 1),opacity 1s ease-out;
}

.is-animated[data-js="animated"] {
  translate: 0 0;
  opacity: 1;
}


/* ==============================================================
*  sitepolicy
* ============================================================ */
.page-ttl {
  margin-top: min(9.77vw,100px);
  text-align: center;
  & h1 {
    color: #153057;
    font-family: "Noto Serif", serif;
    font-optical-sizing: auto;
    font-size: min(3.47vw,50px);
    font-style: normal;
    font-variation-settings: "wdth" 100;
    font-weight: 700;
  }
  & p {
    color: #C4A64F;
    font-size: 20px;
  }
}
@media screen and (width < 769px) {
  .page-ttl {
    margin-top: 18vw;
    & h1 {
      font-size: 8vw;
    }
    & p {
      font-size: 5.33vw;
    }
  }
}

.policyBox {
  max-width: 1440px;
  margin: min(6.94vw,100px) auto 0;
  padding: 0 20px;
}
@media screen and (width < 769px) {
  .policyBox {
    margin-top: 18vw;
  }
}

.policyTab {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  margin-bottom: -1px;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  & button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: min(5.55vw,80px);
    background-color: #FFF;
    color: #153057;
    font-size: min(2.08vw,30px);
    font-weight: 500;
    opacity: .5;
    appearance: none;
    transition: opacity .3s ease-out;
    &[aria-selected="true"] {
      opacity: 1;
    }
    &:focus-visible {
      outline: 2px solid #333;
      outline-offset: -2px;
    }
  }
}
@media screen and (width < 769px) {
  .policyTab {
    & button {
      height: 12.8vw;
      font-size: 5.33vw;
    }
  }
}

.policyPanel {
  background-color: #FFF;
  border-radius: 0 0 8px 8px;
  & > div {
    padding: min(6.94vw,100px);
  }
  & h3 {
    margin-top: min(3.47vw,50px);
    color: #153057;
    font-size: min(1.67vw,24px);
    font-weight: 400;
  }
  & h4 {
    margin-top: min(1.39vw,20px);
    color: #153057;
    font-weight: 600;
    & + p {
      margin-top: min(.28vw,4px);
    }
  }
  & ul {
    & li {
      line-height: 2;
    }
    &.policyPanel-list {
      margin-top: min(1.39vw,20px);
      & li {
        position: relative;
        padding-left: 1.2em;
        &::before {
          position: absolute;
          top: .9em;
          left: .4em;
          display: block;
          width: 4px;
          height: auto;
          aspect-ratio: 1;
          border-radius: 50%;
          background-color: #333;
          content: "";
        }
      }
    }
  }
  & dl {
    & div {
      margin-top: min(3.47vw,50px);
    }
    & dt {
      color: #153057;
      line-height: 2;
    }
    & dd {
      & p:first-child {
        margin-top: min(.28vw,4px);
      }
    }
  }
  & p {
    margin-top: min(1.39vw,20px);
    line-height: 2;
    &.companyName {
      margin-top: min(2.08vw,30px);
      text-align: right;
    }
  }
  & a, button {
    color: #153057;
    text-decoration: underline;
    transition: color .3s;
  }
  & .domain::before {
    content: "@";
  }
}
@media screen and (width < 769px) {
  .policyPanel {
    & > div {
      padding: 6.67vw;
    }
    & h3 {
      margin-top: 8vw;
      font-size: 6.4vw;
    }
    & h4 {
      margin-top:  4.8vw;
      font-size: 5.33vw;
      & + p {
        margin-top: 1.07vw;
      }
    }
    & ul {
      & li {
        line-height: 1.8;
      }
      &.policyPanel-list {
        margin-top: .69vw;
        & li::before {
          top: .85em;
          width: 1.07vw;
        }
      }
    }
    & dl {
      & div {
        margin-top: 8vw;
      }
      & dt {
        line-height: 1.8;
      }
      & dd {
        & p:first-child {
          margin-top: 1.07vw;
        }
      }
    }
    & p {
      line-height: 1.8;
    }
  }
}
@media (hover:hover) {
  .policyPanel a:hover,.policyPanel button:hover {
    color: #C4A64F;
    text-decoration: none;
  }
}


/* ==============================================================
*  utility
* ============================================================ */
.visuallyHidden {
  position: absolute!important;
  width: 1px!important;
  height: 1px!important;
  margin: -1px!important;
  padding: 0!important;
  border: 0!important;
  clip: rect(0,0,0,0)!important;
  overflow: hidden!important;
  white-space: nowrap!important;
}

@media screen and (min-width: 769px) {
  .hiddenPc { display: none !important; }
}

@media screen and (max-width: 1023px) {
  .hiddenSp { display: none !important; }
}

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

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

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