@charset "UTF-8";
/* -----------------------------------------------------------------------------------
ブレイクポイント
----------------------------------------------------------------------------------- */
*,
::before,
::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

:root {
  scroll-padding-top: 104px;
  scroll-behavior: smooth;
}

body {
  font-family: "Hind", sans-serif;
  font-weight: 400;
  font-size: clamp(15px, 2.0833333333vw, 16px);
  color: #222;
  background: #242424;
  -webkit-text-size-adjust: 100%; /*スマホ横画面で文字の拡大・収縮防止用*/
  -webkit-font-smoothing: antialiased; /* 文字の太さを整える。Safari環境用 */
}
html[lang=ja] body {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
}

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

a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.2em;
  word-break: break-all;
}
@media (768px <= width) {
  a[href*=tel] {
    pointer-events: none; /* pcでリンクさせない */
  }
}

ul,
ol {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.03em;
}

h2 {
  font-size: 36px;
}

h3 {
  font-size: 25px;
}

h4 {
  font-size: clamp(17px, 2.34375vw, 18px);
}

nav {
  line-height: 1.5;
  letter-spacing: 0.05em;
}

header,
footer {
  line-height: 1.25;
}

main {
  font-size: clamp(15px, 2.0833333333vw, 16px);
  line-height: 1.625;
}
@media (768px <= width) {
  main {
    font-size: 15px;
  }
}

/*-----------------------------------------------------------------------------------
微調整
-----------------------------------------------------------------------------------*/
/*--------------------------------------
改行
----------------------------------------*/
.br {
  display: inline-block;
}

.br-pc {
  display: inline;
}
@media (768px <= width) {
  .br-pc {
    display: inline-block;
  }
}

/*-----------------------------------------------------------------------------------
表示・非表示
（他のclassと一緒に設置しない）
-----------------------------------------------------------------------------------*/
@media (width < 1040px) {
  .pc-only {
    display: none;
  }
}

@media (1040px <= width) or (width < 768px) {
  .tab-only {
    display: none;
  }
}

@media (768px <= width) {
  .sp-only {
    display: none;
  }
}

.br-tab {
  display: none;
}
@media (width < 768px) {
  .br-tab {
    display: block;
  }
}
@media (width < 520px) {
  .br-tab {
    display: none;
  }
}

.br-sp {
  display: none;
}
@media (width < 520px) {
  .br-sp {
    display: block;
  }
}

/*-----------------------------------------------------------------------------------
横幅設定
-----------------------------------------------------------------------------------*/
/*--------------------------------------
body直下
----------------------------------------*/
.body-wrap[class] {
  display: block;
  width: 100%;
  min-width: 320px;
  overflow: hidden; /* 余白対策 */
}

/*--------------------------------------
コンテンツ幅

// ヘッダーとフッターは不使用
// 併用しているclassは、".XXXX__container"と命名
// 併用していない場合は、"直下に.container"とメモ
----------------------------------------*/
.container {
  width: min(100% - clamp(20px, 10.4166666667vw, 80px), 1240px);
  margin: 0 auto;
}

/*-----------------------------------------------------------------------------------
header
-----------------------------------------------------------------------------------*/
/*--------------------------------------
<header>
----------------------------------------*/
.header {
  display: block;
  width: calc(100% - 60px);
  height: 72px;
  margin: auto;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  position: fixed;
  top: 24px;
  left: 0;
  right: 0;
  z-index: 999;
  container-type: size;
  container-name: my-container;
}
@media (width < 768px) {
  .header {
    width: 100%;
    height: 64px;
    border-radius: 0;
    background: #fff;
    top: 0;
  }
}
.header__container {
  display: grid;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0 clamp(24px, 3.125vw, 40px);
  width: 100%;
  height: 100%;
  padding: 0 clamp(20px, 2.34375vw, 30px);
}
@container my-container (72px < height) {
  .header__container {
    grid-template: auto/clamp(100px, 10.2739726027%, 150px) 1fr;
  }
}
@container my-container (height <= 72px) {
  .header__container {
    grid-template: auto/100px 1fr;
  }
}
.header__logo {
  font-size: 0;
}

/*--------------------------------------
メニュー（グローバルナビ）

// PCの場合 = 横並びメニュー
// SPの場合 = ハンバーガーメニュー

// ハンバーガーアイコン押下時の設定は、以下のキーワードで検索
// .header-menu:has(.header-menu-check:checked)
----------------------------------------*/
.header-menu {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0 clamp(16px, 2.5vw, 32px);
}

@media (width < 768px) {
  .header-menu:has(.header-menu-check:checked) {
    display: grid;
    grid-template: auto/clamp(64px, 32.5%, 140px) 1fr;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 0;
    width: max(80vw, 320px);
    height: 100vh;
    min-height: 100vh;
    padding: 20px 10px 20px 10px;
    background: #196877;
    overflow: hidden;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
    -webkit-transform: translateX(200%);
            transform: translateX(200%);
    -webkit-animation: anima-h-menu 0.3s ease-out forwards;
            animation: anima-h-menu 0.3s ease-out forwards;
  }
}

@-webkit-keyframes anima-h-menu {
  0% {
    -webkit-transform: translateX(200%);
            transform: translateX(200%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}

@keyframes anima-h-menu {
  0% {
    -webkit-transform: translateX(200%);
            transform: translateX(200%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
/* ----------------
// ハンバーガーメニュー

// トリガー（非表示）
---------------- */
.header-menu-check {
  display: none;
}

/* ----------------
// ハンバーガーメニュー

// アイコン（SPのみ表示）
---------------- */
.header-menu-label {
  display: none;
}
@media (width < 768px) {
  .header-menu-label {
    display: block;
    width: 40px;
    height: 40px;
  }
  .header-menu-label > span {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
  }
  .header-menu-label > span::before, .header-menu-label > span::after {
    content: "";
    display: block;
    width: 35px;
    height: 2px;
    margin: auto;
    background: #014865;
    position: absolute;
    top: 40%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    -webkit-transition: -webkit-transform 0.2s ease-in-out;
    transition: -webkit-transform 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
  }
  .header-menu-label > span::after {
    top: auto;
    bottom: 40%;
  }
  .header-menu:has(.header-menu-check:checked) .header-menu-label > span::before, .header-menu:has(.header-menu-check:checked) .header-menu-label > span::after {
    top: 50%;
    left: 50%;
    background: #fff;
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
            transform: translate(-50%, -50%) rotate(45deg);
    -webkit-transition: -webkit-transform 0.2s 0.3s ease-in-out;
    transition: -webkit-transform 0.2s 0.3s ease-in-out;
    transition: transform 0.2s 0.3s ease-in-out;
    transition: transform 0.2s 0.3s ease-in-out, -webkit-transform 0.2s 0.3s ease-in-out;
  }
  .header-menu:has(.header-menu-check:checked) .header-menu-label > span::after {
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
            transform: translate(-50%, -50%) rotate(-45deg);
  }
  .header-menu-label:not(:has(> span)) {
    /* .header-menu-list 子として設置 */
    display: block;
    width: 100%;
    height: 100%;
    background: transparent;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
}

/* ----------------
// メニューリスト

// PCの場合 = 横並び、サブカテゴリーはポップアップ表示
// SPの場合 = 縦並び、サブカテゴリーはポップアップ解除
---------------- */
.header-menu-list a {
  font-family: unset;
  font-weight: unset;
  font-size: unset;
  color: unset;
}
@media (768px <= width) {
  .header-menu-list > ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    gap: clamp(24px, 3.125vw, 40px);
    line-height: 1;
  }
  .header-menu-list > ul > li {
    font-family: "Noto Sans", sans-serif;
    font-weight: 700;
    font-size: clamp(14px, 1.25vw, 16px);
    letter-spacing: 0.01em;
    white-space: nowrap;
    color: #196877;
  }
  .header-menu-list > ul > li > a {
    -webkit-transition: color 0.3s ease;
    transition: color 0.3s ease;
  }
  .header-menu-list > ul > li > a:hover {
    color: #2fafb3;
  }
  .header-menu-list > ul > li > span {
    display: block;
    width: 16px;
    height: 16px;
    background: #196877;
    border-radius: 50%;
    position: relative;
    -webkit-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
  }
  .header-menu-list > ul > li > span::before, .header-menu-list > ul > li > span::after {
    content: "";
    display: block;
    width: 8px;
    height: 2px;
    margin: auto;
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .header-menu-list > ul > li > span::after {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
    -webkit-transition: rotate 0.5s ease;
    transition: rotate 0.5s ease;
  }
  .header-menu-list > ul li:has(> ul) {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 0 0.25em;
    position: relative;
    z-index: 1;
  }
  .header-menu-list > ul li:has(> ul)::before {
    /* 親要素の高さを増やし、ホバー効果を維持 */
    content: "";
    display: block;
    width: 100%;
    height: 2.5em;
    background: transparent;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  .header-menu-list > ul li:has(> ul) > ul {
    display: none;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 1.1em;
    min-width: 240px;
    padding: 30px 40px;
    background: #fff;
    border-radius: 4px;
    -webkit-box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.08);
            box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.08);
    position: absolute;
    top: 1.5em;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(10px);
            transform: translateX(-50%) translateY(10px);
    opacity: 0;
    z-index: 2;
  }
  .header-menu-list > ul li:has(> ul) > ul > li {
    font-weight: 600;
  }
  .header-menu-list > ul li:has(> ul) > ul > li > a {
    opacity: 0.5;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
  }
  .header-menu-list > ul li:has(> ul) > ul > li > a:hover {
    opacity: 1;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
  }
  .header-menu-list > ul li:has(> ul):hover > a {
    color: #2fafb3;
  }
  .header-menu-list > ul li:has(> ul):hover > span {
    background: #2fafb3;
  }
  .header-menu-list > ul li:has(> ul):hover > span::after {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  .header-menu-list > ul li:has(> ul):hover > ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-animation: anima-popup 0.3s ease-out forwards;
            animation: anima-popup 0.3s ease-out forwards;
  }
}
@media (width < 768px) {
  .header-menu-list {
    display: none;
  }
  .header-menu:has(.header-menu-check:checked) .header-menu-list {
    display: block;
    width: 100%;
    height: 100vh;
    padding: clamp(80px, 9.375vh, 120px) 0;
    overflow-y: scroll;
  }
  .header-menu:has(.header-menu-check:checked) .header-menu-list > ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: clamp(32px, 3.75vw, 48px);
    width: 100%;
    padding: 0 0 104px;
    line-height: 1;
  }
  .header-menu:has(.header-menu-check:checked) .header-menu-list > ul > li {
    font-weight: 500;
    font-size: clamp(24px, 3.90625vw, 30px);
    line-height: 1.5;
    letter-spacing: 0.03em;
    text-align: left;
    color: #a5c3c9;
  }
  .header-menu:has(.header-menu-check:checked) .header-menu-list > ul > li a {
    -webkit-transition: color 0.3s ease;
    transition: color 0.3s ease;
  }
  .header-menu:has(.header-menu-check:checked) .header-menu-list > ul > li a:hover {
    color: #fff;
  }
  .header-menu:has(.header-menu-check:checked) .header-menu-list > ul > li:has(> ul) > span {
    display: none;
  }
  .header-menu:has(.header-menu-check:checked) .header-menu-list > ul > li:has(> ul) > ul > li {
    margin: 1.5em 0 0;
    font-weight: 400;
    font-size: 0.6em;
    letter-spacing: 0;
  }
}

@-webkit-keyframes anima-popup {
  0% {
    -webkit-transform: translateX(-50%) translateY(5px);
            transform: translateX(-50%) translateY(5px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(-50%) translateY(0);
            transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

@keyframes anima-popup {
  0% {
    -webkit-transform: translateX(-50%) translateY(5px);
            transform: translateX(-50%) translateY(5px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(-50%) translateY(0);
            transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}
/*--------------------------------------
言語切り替え
----------------------------------------*/
.header-language {
  width: 108px;
}
@media (width < 768px) {
  .header-language {
    display: none;
  }
}
.header-language > ul {
  display: grid;
  grid-template: 18px/18px 1fr 1fr;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
}
.header-language > ul::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url(../img/icon_language_head.svg) left center no-repeat;
  background-size: 72.2222222222%;
}
.header-language > ul > li > a {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 50px;
  height: 20px;
  font-family: "Noto Sans JP", "Noto Sans", sans-serif;
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.02em;
  line-height: 1;
  color: #196877;
  position: relative;
}
.header-language > ul > li > a::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-radius: 8px;
  background: #196877;
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  z-index: -1;
  -webkit-transition: 0.3s cubic-bezier(0.02, 0.01, 0.86, 0.3);
  transition: 0.3s cubic-bezier(0.02, 0.01, 0.86, 0.3);
  -webkit-transition-property: width, height, border-radius;
  transition-property: width, height, border-radius;
}
.header-language > ul > li > a[href^="#"] {
  pointer-events: none;
}
.header-language > ul > li:hover > a, .header-language > ul > li:has([href^="#"]) > a {
  color: #fff;
}
.header-language > ul > li:hover > a::before, .header-language > ul > li:has([href^="#"]) > a::before {
  width: 100%;
  height: 100%;
}
.header-language > ul:has(a:hover):not(:has(a[href="#"]:hover)) > li:has([href^="#"]) > a {
  color: #196877;
}
.header-language > ul:has(a:hover):not(:has(a[href="#"]:hover)) > li:has([href^="#"]) > a::before {
  width: 0;
  height: 0;
}
.header-language > ul.not-language > li:has([href="#this"]) > a {
  color: #196877;
}
.header-language > ul.not-language > li:has([href="#this"]) > a::before {
  width: 0;
  height: 0;
}

/*-----------------------------------------------------------------------------------
footer
-----------------------------------------------------------------------------------*/
/*--------------------------------------
<footer>
----------------------------------------*/
.footer {
  display: block;
  width: 100%;
  position: relative;
  z-index: 2;
}
.footer__head {
  display: block;
  min-height: 400px;
  padding: 72px 0 48px;
  background: -webkit-gradient(linear, left top, right top, from(#000), color-stop(100%, #353a3e), to(#242424));
  background: -webkit-linear-gradient(left, #000 0%, #353a3e 100%, #242424 100%);
  background: linear-gradient(90deg, #000 0%, #353a3e 100%, #242424 100%);
  color: #a5c3c9;
}
@media (width < 768px) {
  .footer__head {
    min-height: auto;
    padding: 80px 0 64px;
  }
}
.footer__foot {
  display: block;
  padding: 10px 0;
  background: #196877;
  color: #fff;
}
.footer__container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: min(100% - 60px, 1240px);
  margin: 0 auto;
}
.footer__item-1 {
  margin: 40px 0 0;
}
@media (width < 768px) {
  .footer__item-1 {
    margin: 56px 0 0;
  }
}
.footer__item-2 {
  margin: 32px 0 0;
}
@media (width < 768px) {
  .footer__item-2 {
    margin: 48px 0 0;
  }
}
.footer__item-3 {
  margin: 48px 0 0;
}
@media (width < 768px) {
  .footer__item-3 {
    margin: 48px 0 0;
  }
}

/*--------------------------------------
.footer__head
----------------------------------------*/
/* ----------------
// ロゴ
---------------- */
.footer-logo {
  display: block;
  width: 160px;
}
@media (width < 768px) {
  .footer-logo {
    width: min(100%, 200px);
  }
}
.footer-logo__inner {
  display: block;
  width: 100%;
  padding: 39.4444444444% 0 0;
  background: url(../img/logo_w.svg) center no-repeat;
  background-size: contain;
}

/* ----------------
// メニュー（グローバルナビ）

// .footer__item-1
---------------- */
.footer-menu {
  display: block;
  width: 100%;
}
.footer-menu > ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px 64px;
}
@media (width < 768px) {
  .footer-menu > ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.footer-menu > ul > li > a {
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.03em;
  line-height: 1.5;
  text-align: left;
  color: #a5c3c9;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.footer-menu > ul > li > a:hover {
  color: #fff;
}
@media (width < 768px) {
  .footer-menu > ul > li > a {
    font-size: clamp(18px, 2.8645833333vw, 22px);
    text-align: center;
  }
}

/* ----------------
// 言語切り替え

// .footer__item-2
---------------- */
.footer-language {
  display: block;
  width: min(100%, 180px);
  height: 28px;
  border: 1px solid;
}
@media (width < 768px) {
  .footer-language {
    width: min(100%, 320px);
    height: 40px;
  }
}
.footer-language > ul {
  display: grid;
  grid-template: 1fr/19.4444444444% 1fr 1fr;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
  padding: 5px 0;
}
.footer-language > ul::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url(../img/icon_language.svg) center no-repeat;
  background-size: min(37.1428571429%, 25px);
}
.footer-language > ul > li {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
}
.footer-language > ul > li:not(:first-of-type) {
  border-left: 1px solid;
}
.footer-language > ul > li > a {
  display: block;
  width: 100%;
  margin: 0 0 2px;
  font-family: "Noto Sans JP", "Noto Sans", sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.02em;
  text-align: center;
  color: #a5c3c9;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.footer-language > ul > li > a:hover {
  color: #fff;
}
@media (width < 768px) {
  .footer-language > ul > li > a {
    font-size: clamp(15px, 2.34375vw, 18px);
  }
}
.footer-language > ul > li > a[href="#"] {
  pointer-events: none;
}

/* ----------------
// SNS アイコン

// .footer__item-3
---------------- */
.footer-sns {
  display: block;
  width: 100%;
}
.footer-sns > ul {
  display: grid;
  grid-template: auto/repeat(auto-fit, 20px);
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 22px;
}
@media (width < 768px) {
  .footer-sns > ul {
    grid-template-columns: repeat(auto-fit, 32px);
    gap: 22px 40px;
  }
}
.footer-sns > ul > li a {
  display: block;
}

/*--------------------------------------
.footer__foot
----------------------------------------*/
/* ----------------
// コピーライト
---------------- */
.copy-right {
  font-family: Helvetica;
  font-weight: normal;
  font-size: 10px;
  line-height: 1;
  text-align: left;
  color: #fff;
}

/*-----------------------------------------------------------------------------------
main
-----------------------------------------------------------------------------------*/
/*--------------------------------------
<main>
----------------------------------------*/
.main {
  display: block;
  width: 100%;
  min-height: 100vh;
  color: #fff;
  background: #242424;
  position: relative;
  z-index: 1;
}
.main::before {
  content: "";
  display: none;
  width: 100%;
  height: 100%;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100%;
  position: fixed;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  z-index: -1;
}
@media (width < 768px) {
  .main::before {
    top: 64px; /* ヘッダーの高さ */
  }
}
.main:has(.services)::before {
  display: block;
  background-image: url(../img/bg_pagetop_1.png);
}
.main:has(.about)::before {
  display: block;
  background-image: url(../img/bg_pagetop_2.png);
}
.main:has(.contact):has(.form-inputfield)::before {
  display: block;
  background-image: url(../img/bg_pagetop_3.png);
}
.main:has(.policy)::before {
  display: block;
  background-image: url(../img/bg_pagetop_4.png);
}

/*--------------------------------------
タイトルエリア
----------------------------------------*/
.head {
  display: block;
  width: 100%;
}
.head__container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  min-height: clamp(360px, 51.5625vw, 660px);
  padding: clamp(80px, 7.03125vw, 90px) 0;
}
.main:has(.contact):not(:has(.form-inputfield)) .head__container {
  min-height: auto;
  padding: 174px 0 48px;
}

html[lang=ja] .main:has(.contact):not(:has(.form-inputfield)) .head__container {
  padding: 174px 0 32px;
}

.head__ttl {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: clamp(56px, 12.5vw, 96px);
  letter-spacing: 0.01em;
  text-align: left;
  text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
  line-height: 1.1;
}
.main:has(.contact):not(:has(.form-inputfield)) .head__ttl {
  font-size: clamp(48px, 7.8125vw, 60px);
  opacity: 1;
  -webkit-transform: none;
          transform: none;
  -webkit-animation: none;
          animation: none;
}

.head__ttl:has(.head__ttl-ja) {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
.head__ttl-ja {
  margin: 0.25em 0 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 0.2291666667em;
  letter-spacing: 0.05em;
  line-height: 1.5;
}

/*--------------------------------------
コンテンツエリア
----------------------------------------*/
.contents {
  display: block;
  width: 100%;
  padding: 0 0 360px;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(36, 36, 36, 0)), to(#242424));
  background: -webkit-linear-gradient(rgba(36, 36, 36, 0) 0%, #242424 100%);
  background: linear-gradient(rgba(36, 36, 36, 0) 0%, #242424 100%); /* .mainの背景をぼかす */
}
.contents__container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 60px 0;
}
.contents__lead {
  display: block;
  margin: 0 0 8px;
  font-weight: 400;
  font-size: clamp(18px, 2.6041666667vw, 20px);
  letter-spacing: 0.01em;
  line-height: 1.6;
  text-align: left;
  text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
  opacity: 0;
  -webkit-animation: mv-heading 1.5s 0.2s forwards ease-in-out;
          animation: mv-heading 1.5s 0.2s forwards ease-in-out;
}

/*--------------------------------------
共通ボタン
----------------------------------------*/
.common-btn {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: min(100%, 280px);
  min-height: 72px;
  padding: 0.4em 1em;
  margin: 0;
  background: -webkit-gradient(linear, right top, left top, from(#1d808d), to(#0f4050));
  background: -webkit-linear-gradient(right, #1d808d 0%, #0f4050 100%);
  background: linear-gradient(-90deg, #1d808d 0%, #0f4050 100%);
  border: 0;
  border-radius: 20px;
  -webkit-box-shadow: 0px -1px 3px rgba(0, 0, 0, 0.1);
          box-shadow: 0px -1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.05em;
  line-height: 1;
  text-align: left;
  color: #fff;
  position: relative;
  z-index: 1;
}
@media (width < 768px) {
  .common-btn {
    width: min(100%, 505px);
    font-size: clamp(16px, 2.34375vw, 18px);
  }
}
.contact .common-btn {
  font-size: 24px;
  -webkit-box-shadow: none;
          box-shadow: none;
}

html[lang=ja] .contact .common-btn {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 22px;
}

.common-btn::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: #fff;
  opacity: 0;
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: -1;
  -webkit-transition: 0.3s cubic-bezier(0.02, 0.01, 0.86, 0.3);
  transition: 0.3s cubic-bezier(0.02, 0.01, 0.86, 0.3);
  -webkit-transition-property: width, height, border-radius;
  transition-property: width, height, border-radius;
}
.common-btn::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-top: 2px solid #0d2536;
  border-right: 2px solid #0d2536;
  position: absolute;
  top: 50%;
  right: 3.5714285714%;
  -webkit-transform: translate(0, -50%) rotate(45deg);
          transform: translate(0, -50%) rotate(45deg);
}
.common-btn:hover {
  color: #0f4050;
}
.common-btn:hover::before {
  width: 110%;
  height: 150%;
  border-radius: 100% 100% 0 0;
  opacity: 1;
}

/*--------------------------------------
ABOUT US
----------------------------------------*/
.about {
  width: min(100%, 1040px);
  margin: 0 0 0 auto;
}
.about > p {
  margin: 1em 0 0;
  font-weight: 400;
  font-size: clamp(18px, 2.8645833333vw, 22px);
  letter-spacing: 0.01em;
  line-height: 1.8;
  text-align: left;
  text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
}
.about > p:nth-child(1) {
  margin: 0;
}
html[lang=ja] .about > p {
  font-size: clamp(17px, 2.6041666667vw, 20px);
}

.about > h2 {
  margin: 0 0 0.5em;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: clamp(32px, 7.2916666667vw, 56px);
  line-height: 1.25;
  text-align: left;
  text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
}
html[lang=ja] .about > h2 > span {
  display: block;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: unset;
  font-size: 0.3214285714em;
}

/*--------------------------------------
SERVICES
----------------------------------------*/
.services {
  display: block;
  width: 100%;
  padding: 56px 0 0;
}
.services__accordion {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(32px, 3.75vw, 48px) 0;
  width: min(100% - clamp(32px, 7.8125vw, 60px), 1460px);
  margin: 0 auto;
}

/* ----------------
// .services__accordion
---------------- */
.services-accordion {
  display: block;
  width: 100%;
  border-radius: 20px;
  background: transparent; /* 差分あり。検索キーワード: .services-accordion:has(#service- */
  overflow: hidden;
  position: relative;
}
.services-accordion::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, left bottom, from(#242424), to(#2b2f30));
  background: -webkit-linear-gradient(#242424 0%, #2b2f30 100%);
  background: linear-gradient(#242424 0%, #2b2f30 100%);
  opacity: 0.95;
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.services-accordion:hover::before {
  opacity: 1;
}
.services-accordion > input[type*=checkbox] {
  display: block;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}
.services-accordion:has(> input:checked) {
  display: grid;
  grid-template: "ttl img" -webkit-min-content "cont img" auto/calc(56.8493150685% - 20px) 34.2465753425%;
  grid-template: "ttl img" min-content "cont img" auto/calc(56.8493150685% - 20px) 34.2465753425%;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 50px 50px;
  width: 100%;
  min-height: 760px;
}
@media (width < 768px) {
  .services-accordion:has(> input:checked) {
    grid-template: "ttl" -webkit-min-content "img" auto "cont" min-content/1fr;
    grid-template: "ttl" min-content "img" auto "cont" min-content/1fr;
    height: auto;
    padding: 0 0 132px;
  }
}

/* アコーディオン > 見出し */
.services-accordion-head {
  display: grid;
  grid-template: auto/1fr clamp(32px, 7.8125vw, 60px);
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0 0.1em;
  width: min(100% - clamp(32px, 7.8125vw, 60px), 1240px);
  height: 100%;
  min-height: 96px;
  padding: 16px 0;
  margin: 0 auto;
  font-weight: 600;
  font-size: clamp(24px, 2.1875vw, 28px);
  letter-spacing: 0.01em;
  line-height: 1.25;
  text-align: left;
  color: #d8ebef;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
  cursor: pointer;
}
.services-accordion-head:hover {
  color: #fff;
}
@media (width < 768px) {
  .services-accordion-head {
    min-height: 80px;
  }
}
html[lang=ja] .services-accordion-head {
  font-size: clamp(22px, 2.03125vw, 26px);
}
@media (width < 520px) {
  html[lang=ja] .services-accordion-head {
    font-size: clamp(17px, 2.8645833333vw, 22px);
  }
}

.services-accordion:has(> input:checked) .services-accordion-head {
  grid-area: ttl;
  display: block;
  width: 100%;
  min-height: auto;
  padding: 64px 0 0;
  margin: auto;
  color: #fff;
}
@media (width < 768px) {
  .services-accordion:has(> input:checked) .services-accordion-head {
    width: calc(100% - clamp(32px, 7.8125vw, 60px));
    min-height: auto;
  }
}
@media (width < 520px) {
  html[lang=ja] .services-accordion:has(> input:checked) .services-accordion-head {
    font-size: clamp(19px, 3.125vw, 24px);
  }
}

.services-accordion-head::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border: 0px solid rgba(255, 255, 255, 0.6);
  border-radius: 22px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 2; /* アコーディオンのクリック領域を広げる。 重ね順:2 */
  -webkit-transition: 0.1s ease-in;
  transition: 0.1s ease-in;
  -webkit-transition-property: border-width;
  transition-property: border-width;
}
.services-accordion-head:hover::before {
  border-width: 1px;
}

.services-accordion-head__icon {
  display: block;
  width: clamp(24px, 4.1666666667vw, 32px);
  height: clamp(24px, 4.1666666667vw, 32px);
  background: transparent;
  border: 1px solid #fff;
  border-radius: 50%;
  overflow: hidden;
  position: absolute;
  top: 50%;
  right: clamp(16px, 4.1666666667vw, 32px);
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  z-index: 3; /* アコーディオンのクリック領域を広げる。 重ね順:3 */
}
.services-accordion:has(> input:checked) .services-accordion-head__icon {
  top: auto;
  right: clamp(16px, 4.1666666667vw, 32px);
  bottom: clamp(16px, 4.1666666667vw, 32px);
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.services-accordion-head__icon::before, .services-accordion-head__icon::after {
  content: "";
  display: block;
  position: absolute;
  -webkit-transition: 0.3s cubic-bezier(0.02, 0.01, 0.86, 0.3);
  transition: 0.3s cubic-bezier(0.02, 0.01, 0.86, 0.3);
}
.services-accordion-head__icon::before {
  width: 0;
  height: 0;
  border-radius: 50%;
  background: #fff;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 1;
  -webkit-transition-property: width height;
  transition-property: width height;
}
.services-accordion-head:hover .services-accordion-head__icon::before,
.services-accordion:has(> input:checked) .services-accordion-head__icon::before {
  width: 100%;
  height: 100%;
}

.services-accordion-head__icon::after {
  width: 10px;
  height: 10px;
  border: solid #fff;
  border-width: 2px 2px 0 0;
  top: calc(50% - 2px);
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(135deg);
          transform: translate(-50%, -50%) rotate(135deg);
  z-index: 2;
  -webkit-transition-property: border-color;
  transition-property: border-color;
}
.services-accordion-head:hover .services-accordion-head__icon::after,
.services-accordion:has(> input:checked) .services-accordion-head__icon::after {
  border-color: #196877;
}

/* アコーディオン > コンテンツ */
.services-accordion-contents {
  display: block;
  width: 0;
  height: 0;
  opacity: 0.5;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  -webkit-transition-property: opacity;
  transition-property: opacity;
}
.services-accordion:has(> input:checked) .services-accordion-contents {
  grid-area: cont;
  display: grid;
  grid-template: minmax(200px, 1fr) min-content/1fr;
  width: 100%;
  height: auto;
  padding: 0 0 64px;
  opacity: 1;
  position: relative; /* アコーディオンのクリック領域を広げる。 重ね順:1 */
  z-index: 1;
}
@media (width < 768px) {
  .services-accordion:has(> input:checked) .services-accordion-contents {
    grid-template-rows: auto auto;
    width: calc(100% - clamp(32px, 7.8125vw, 60px));
    margin: 0 auto;
  }
}
.services-accordion:has(> input:checked) .services-accordion-contents > p {
  margin: 0 0 40px;
  font-weight: 400;
  font-size: 17px;
  letter-spacing: 0.01em;
  line-height: 1.4736842105;
  line-height: 1.5;
  text-align: left;
  color: #fff;
  overflow-wrap: keep-all;
  word-break: keep-all;
}
html[lang=ja] .services-accordion:has(> input:checked) .services-accordion-contents > p {
  font-size: 16px;
  line-height: 1.8;
  overflow-wrap: break-word;
  word-break: break-word;
}
@media (1040px <= width) {
  html[lang=ja] .services-accordion:has(> input:checked) .services-accordion-contents > p {
    overflow-wrap: keep-all;
    word-break: keep-all;
  }
}

.services-accordion:has(> input:checked) .services-accordion-contents > ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.4em 0;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.01em;
  line-height: 2.3333333333;
  text-align: left;
  color: #fff;
}
html[lang=ja] .services-accordion:has(> input:checked) .services-accordion-contents > ul {
  font-size: 17px;
}

.services-accordion:has(> input:checked) .services-accordion-contents > ul > li {
  padding: 0 0 0 calc(16px + 0.5em);
  list-style-type: none;
  line-height: 1.5;
  position: relative;
}
.services-accordion:has(> input:checked) .services-accordion-contents > ul > li::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: #fff;
  position: absolute;
  top: 0.75em; /* 縦位置を一行目に合わせる */
  left: 0;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
}

/* アコーディオン > イメージ画像 */
.services-accordion-img {
  display: block;
  width: 0;
  height: 0;
  opacity: 0.5;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  -webkit-transition-property: opacity;
  transition-property: opacity;
}
.services-accordion:has(> input:checked) .services-accordion-img {
  grid-area: img;
  width: 100%;
  height: 100%;
  background: transparent center no-repeat; /* 差分あり。検索キーワード: .services-accordion:has(#service- */
  background-size: cover;
  opacity: 1;
}
@media (width < 768px) {
  .services-accordion:has(> input:checked) .services-accordion-img {
    height: auto;
    padding: 42.4028268551% 0 0;
  }
}

.services-accordion:has(#service-1) .services-accordion-img {
  background-image: url(../img/img_service_1.jpg);
}
@media (width < 768px) {
  .services-accordion:has(#service-1) .services-accordion-img {
    background-image: url(../img/img_service_sp_1.jpg);
  }
}

.services-accordion:has(#service-2) .services-accordion-img {
  background-image: url(../img/img_service_2.jpg);
}
@media (width < 768px) {
  .services-accordion:has(#service-2) .services-accordion-img {
    background-image: url(../img/img_service_sp_2.jpg);
  }
}

.services-accordion:has(#service-3) .services-accordion-img {
  background-image: url(../img/img_service_3.jpg);
}
@media (width < 768px) {
  .services-accordion:has(#service-3) .services-accordion-img {
    background-image: url(../img/img_service_sp_3.jpg);
  }
}

.services-accordion:has(#service-4) .services-accordion-img {
  background-image: url(../img/img_service_4.jpg);
}
@media (width < 768px) {
  .services-accordion:has(#service-4) .services-accordion-img {
    background-image: url(../img/img_service_sp_4.jpg);
  }
}

.services-accordion:has(#service-5) .services-accordion-img {
  background-image: url(../img/img_service_5.jpg);
}
@media (width < 768px) {
  .services-accordion:has(#service-5) .services-accordion-img {
    background-image: url(../img/img_service_sp_5.jpg);
  }
}

.services-accordion:has(#service-6) .services-accordion-img {
  background-image: url(../img/img_service_6.jpg);
}
@media (width < 768px) {
  .services-accordion:has(#service-6) .services-accordion-img {
    background-image: url(../img/img_service_sp_6.jpg);
  }
}

.services-accordion:has(#service-7) .services-accordion-img {
  background-image: url(../img/img_service_7.jpg);
}
@media (width < 768px) {
  .services-accordion:has(#service-7) .services-accordion-img {
    background-image: url(../img/img_service_sp_7.jpg);
  }
}

.services-accordion:has(#service-8) .services-accordion-img {
  background-image: url(../img/img_service_8.jpg);
}
@media (width < 768px) {
  .services-accordion:has(#service-8) .services-accordion-img {
    background-image: url(../img/img_service_sp_8.jpg);
  }
}

/*--------------------------------------
CONTACT

入力画面 = contact.html
確認画面・送信完了画面 = mail.php
----------------------------------------*/
.contact {
  display: block;
  width: min(100% - clamp(30px, 7.8125vw, 60px), 1460px);
  margin: 0 auto;
  padding: 88px 0 113px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.9);
  color: #196877;
  /* 直下に.container */
}
html[lang=ja] .contact {
  padding: 104px 0 268px;
}

.contact:has(.form-inputfield) {
  padding: 114px 0 268px;
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
  opacity: 0;
  -webkit-animation: mv-heading 1.5s 0.2s forwards ease-in-out;
          animation: mv-heading 1.5s 0.2s forwards ease-in-out;
}

/* ----------------
// タイトルエリア
---------------- */
.contact-lead {
  display: block;
  margin: 0 0 64px;
  font-size: clamp(18px, 2.8645833333vw, 22px);
  letter-spacing: 0.03em;
  line-height: 1.25;
  text-align: left;
}
html[lang=ja] .contact-lead {
  font-size: clamp(18px, 2.6041666667vw, 20px);
}

.contact-lead > h2 {
  display: block;
  margin: 0 0 2.9090909091em;
  font-weight: 500;
  font-size: 1.0909090909em;
}
.contact-lead > p {
  margin: 0 0 0.5em;
  font-weight: 400;
  line-height: 1.8;
}

/* ----------------
// コンテンツエリア
---------------- */
.contact-form {
  display: block;
  font-weight: 400;
  font-size: clamp(17px, 2.6041666667vw, 20px);
  letter-spacing: 0.03em;
  line-height: 1.25;
  text-align: left;
}

/* ----------------
// 入力画面　テーブル
---------------- */
.form-inputfield:has(> ul) > ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 16px;
  width: min(100%, 775px);
}
.form-inputfield:has(> ul) > ul > li {
  width: 100%;
}
.form-inputfield:has(> ul) > ul > li input,
.form-inputfield:has(> ul) > ul > li select,
.form-inputfield:has(> ul) > ul > li textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 0.4em 1em;
  background: #fff;
  border: 1px solid #d3d3d3;
  font-family: unset;
  font-size: 0.95em;
}
.form-inputfield:has(> ul) > ul > li input::-webkit-input-placeholder, .form-inputfield:has(> ul) > ul > li select::-webkit-input-placeholder, .form-inputfield:has(> ul) > ul > li textarea::-webkit-input-placeholder {
  font-weight: 400;
  color: #b9b9b9;
}
.form-inputfield:has(> ul) > ul > li input::-moz-placeholder, .form-inputfield:has(> ul) > ul > li select::-moz-placeholder, .form-inputfield:has(> ul) > ul > li textarea::-moz-placeholder {
  font-weight: 400;
  color: #b9b9b9;
}
.form-inputfield:has(> ul) > ul > li input:-ms-input-placeholder, .form-inputfield:has(> ul) > ul > li select:-ms-input-placeholder, .form-inputfield:has(> ul) > ul > li textarea:-ms-input-placeholder {
  font-weight: 400;
  color: #b9b9b9;
}
.form-inputfield:has(> ul) > ul > li input::-ms-input-placeholder, .form-inputfield:has(> ul) > ul > li select::-ms-input-placeholder, .form-inputfield:has(> ul) > ul > li textarea::-ms-input-placeholder {
  font-weight: 400;
  color: #b9b9b9;
}
.form-inputfield:has(> ul) > ul > li input::placeholder,
.form-inputfield:has(> ul) > ul > li select::placeholder,
.form-inputfield:has(> ul) > ul > li textarea::placeholder {
  font-weight: 400;
  color: #b9b9b9;
}
.form-inputfield:has(> ul) > ul > li textarea {
  min-height: 150px;
  resize: vertical;
}
.form-inputfield:has(> ul) > ul > li:has(select) {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
}
.form-inputfield:has(> ul) > ul > li:has(select)::after {
  position: absolute;
  right: 15px;
  width: 10px;
  height: 7px;
  background-color: #005274;
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
          clip-path: polygon(0 0, 100% 0, 50% 100%);
  content: "";
  pointer-events: none;
}
.form-inputfield:has(> ul) > ul > li:has(select) > select {
  padding: 0.4em calc(0.8em + 30px) 0.4em 0.8em;
}
.form-inputfield:has(> ul) > ul > li:has(select) > select:invalid {
  color: #b9b9b9;
}

/* ----------------
// 入力画面　プライバシーポリシーに同意する。
---------------- */
.form-policy-check {
  display: grid;
  grid-template: auto/24px 1fr;
  -webkit-box-align: first baseline;
  -webkit-align-items: first baseline;
      -ms-flex-align: first baseline;
          align-items: first baseline;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0 1em;
  margin: 36px 0 0;
  line-height: 1.5;
}
.form-policy-check label {
  display: block;
  width: 24px;
  height: 24px;
  border: 1px solid #3483a3;
  background: #fff;
  position: relative;
  top: 0.75em; /* 縦位置を一行目に合わせる */
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  cursor: pointer;
}
.form-policy-check label:has(> input:checked)::after {
  content: "";
  display: block;
  width: 10px;
  height: 15px;
  border: solid #2fafb3;
  border-width: 0 3px 3px 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -70%) rotate(45deg);
          transform: translate(-50%, -70%) rotate(45deg);
}
.form-policy-check label > input {
  opacity: 0;
}
.form-policy-check a {
  color: #2fafb3;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ----------------
// ボタン　wrapper
---------------- */
.form-btn-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 20px;
  margin: 118px 0 0;
}

/* ----------------
// 入力画面　お問い合わせ先
---------------- */
.form-info {
  display: block;
  width: min(100%, 620px);
  margin: 135px 0 0;
}
.form-info > dl {
  display: block;
  font-family: unset;
  letter-spacing: 0.03em;
  text-align: left;
  color: #196877;
}
.form-info > dl > dt {
  display: block;
  margin: 0 0 0.5em;
  font-weight: 600;
  font-size: clamp(26px, 4.1666666667vw, 32px);
  line-height: 1.25;
}
.form-info > dl > dd {
  display: block;
  margin: 1em 0 0;
  padding: 0 0 0 calc(22px + 0.5em);
  font-weight: 400;
  font-size: clamp(18px, 2.6041666667vw, 20px);
  line-height: 1.5;
  position: relative;
}
.form-info > dl > dd::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: url(../img/icon_info_1.svg) left center no-repeat;
  background-size: 68.1818181818%;
  position: absolute;
  top: 0.75em; /* 縦位置を一行目に合わせる */
  left: 0;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
}
.form-info > dl > dd:nth-of-type(2)::before {
  background-image: url(../img/icon_info_2.svg);
}

/* ----------------
// 確認画面　テーブル
---------------- */
.form-confirmation table {
  width: 100%;
  border-width: 1px 0 1px;
}
.form-confirmation table > tbody {
  width: 100%;
}
.form-confirmation table > tbody > tr {
  width: 100%;
  border-bottom: 1px solid #a5c3c9;
}
.form-confirmation table > tbody > tr:first-of-type {
  border-top: 1px solid #a5c3c9;
}
.form-confirmation table > tbody > tr > th,
.form-confirmation table > tbody > tr > td {
  padding: 1.0454545455em 1em;
  font-size: clamp(18px, 1.71875vw, 22px);
}
html[lang=ja] .form-confirmation table > tbody > tr > th, .form-confirmation table > tbody > tr > td {
  font-size: clamp(17px, 1.5625vw, 20px);
}

.form-confirmation table > tbody > tr > th {
  width: 20%;
  min-width: 230px;
  padding-left: 0;
  font-weight: 500;
  line-height: 1.25;
}
.form-confirmation table > tbody > tr > td {
  font-weight: 300;
  line-height: 1.5;
}
html[lang=ja] .form-confirmation table > tbody > tr > td {
  font-weight: 400;
}

.form-confirmation table > tbody > tr > td input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  font-family: unset;
  font-weight: unset;
  font-size: 1em;
  letter-spacing: unset;
  line-height: unset;
  color: unset;
}
.form-confirmation table > tbody > tr > td:has(input[value=""]) {
  height: calc(0.8959090909em * 2 + 1em); /* 無入力の場合、高さを維持する */
}
@media (width < 520px) {
  .form-confirmation table > tbody > tr > th,
  .form-confirmation table > tbody > tr > td {
    display: block;
    width: 100%;
    padding: 1.0454545455em 0.5em;
    text-align: left;
  }
  .form-confirmation table > tbody > tr > th {
    padding-left: 0;
  }
}

/* mail.php　エラーメッセージ */
.contact .error_messe {
  color: #ff0000;
}

/*--------------------------------------
プライバシーポリシー
----------------------------------------*/
.policy > ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 88px 0;
}
.policy > ul > li > h2 {
  margin: 0 0 1em;
  font-weight: 600;
  font-size: clamp(24px, 4.4270833333vw, 34px);
  line-height: 1.25;
  text-align: left;
  text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
}
.policy > ul > li > p {
  margin: 1em 0 0;
  font-weight: 400;
  font-size: 20px;
  font-size: clamp(18px, 2.6041666667vw, 20px);
  letter-spacing: 0.01em;
  line-height: 1.8;
  text-align: left;
  text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
}

/* -----------------------------------------------------------------------------------
HOME画面
----------------------------------------------------------------------------------- */
/*--------------------------------------
メインビジュアル
----------------------------------------*/
.main-visual {
  display: block;
  width: 100%;
  height: 100vh;
  background: url(../img/img_mv.jpg) top 30% left no-repeat;
  background-size: cover;
  position: relative;
}
@media (width < 768px) {
  .main-visual {
    background-position: center left;
  }
}
.main-visual__img {
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 0;
  left: 0;
}
.main-visual__mask {
  display: block;
  width: 100%;
  height: 100%;
  background: url(../img/img_mv_2.jpg) top 30% left no-repeat;
  background-size: cover;
  -webkit-clip-path: polygon(0 0, 10% 0, 10% 100%, 0 100%);
          clip-path: polygon(0 0, 10% 0, 10% 100%, 0 100%);
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: mv-mask 15s 0s infinite linear;
          animation: mv-mask 15s 0s infinite linear;
}
@media (width < 768px) {
  .main-visual__mask {
    background-position: center left;
  }
}
.main-visual:has(+ .is-scroll) .main-visual__mask {
  display: none;
  -webkit-animation: none;
          animation: none;
}

.main-visual-layer {
  display: block;
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
}
.main-visual-layer__container {
  display: block;
  margin: auto;
  position: absolute;
  bottom: 13.8461538462vh;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}
@media (width < 520px) {
  .main-visual-layer__container {
    bottom: 17.9910044978vh;
  }
}
.main-visual-layer__heading {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: clamp(22px, 3.125vw, 40px);
  letter-spacing: -0.01em;
  line-height: 1.6842105263;
  text-align: left;
  color: #fff;
  text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
}
@media (width < 768px) {
  .main-visual-layer__heading {
    font-size: clamp(22px, 4.1666666667vw, 32px);
    letter-spacing: 0.01em;
  }
}
.main-visual-layer__heading .first,
.main-visual-layer__heading .second {
  display: block;
  opacity: 0;
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
  -webkit-animation: mv-heading 1.5s 0.1s forwards ease-in-out;
          animation: mv-heading 1.5s 0.1s forwards ease-in-out;
}
.main-visual-layer__heading .second {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

@-webkit-keyframes mv-mask {
  0% {
    -webkit-clip-path: polygon(0 0, 20% 0, 20% 100%, 0 100%);
            clip-path: polygon(0 0, 20% 0, 20% 100%, 0 100%);
  }
  50% {
    -webkit-clip-path: polygon(98% 0, 100% 0, 100% 100%, 98% 100%);
            clip-path: polygon(98% 0, 100% 0, 100% 100%, 98% 100%);
  }
  100% {
    -webkit-clip-path: polygon(0 0, 20% 0, 20% 100%, 0 100%);
            clip-path: polygon(0 0, 20% 0, 20% 100%, 0 100%);
  }
}

@keyframes mv-mask {
  0% {
    -webkit-clip-path: polygon(0 0, 20% 0, 20% 100%, 0 100%);
            clip-path: polygon(0 0, 20% 0, 20% 100%, 0 100%);
  }
  50% {
    -webkit-clip-path: polygon(98% 0, 100% 0, 100% 100%, 98% 100%);
            clip-path: polygon(98% 0, 100% 0, 100% 100%, 98% 100%);
  }
  100% {
    -webkit-clip-path: polygon(0 0, 20% 0, 20% 100%, 0 100%);
            clip-path: polygon(0 0, 20% 0, 20% 100%, 0 100%);
  }
}
@-webkit-keyframes mv-heading {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes mv-heading {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
/*--------------------------------------
MV背景を、画面に固定する
----------------------------------------*/
/* MV用（.main-visual） */
.fixed-block[class] {
  margin: auto;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

/* MVの兄弟ブロック用（.main-visual-layer, .top-section） */
.relative-block[class] {
  position: relative;
  z-index: 2;
}

/*--------------------------------------
セクション
----------------------------------------*/
/* 必ず<section>に設定する */
.top-section {
  display: block;
  width: 100%;
  padding: 80px 0 150px;
}
.top-section:first-of-type {
  padding: 30px 0 150px;
}
.top-section:last-of-type {
  padding: 80px 0 310px;
}

/*--------------------------------------
セクションの見出し
----------------------------------------*/
.top-heading {
  display: grid;
  grid-template-columns: 1fr min(60%, 737px);
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 22px;
  width: 100%;
  padding: calc(1.1166666667em + 0.6em) 0 0; /* 装飾のはみ出し防止 */
  font-size: clamp(48px, 4.6875vw, 60px);
  text-align: left;
}
@media (768px <= width) {
  html[lang=ja] .top-advantages .top-heading {
    grid-template-columns: 1fr min(60%, 640px);
  }
}

@media (768px <= width) {
  .top-advantages .top-heading {
    grid-template-columns: 1fr min(60%, 542px);
  }
}

@media (width < 768px) {
  .top-heading {
    grid-template-columns: 1fr;
  }
}
.top-heading__left {
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 1em;
  line-height: 1;
  letter-spacing: 0;
  position: relative;
}
.top-heading__left::before {
  content: "";
  display: block;
  width: 1.1166666667em;
  height: 3.5px;
  background: #fff;
  border-radius: 75% 25% 75% 25%/0% 100% 0% 100%;
  position: absolute;
  top: -0.6em;
  left: -0.1666666667em;
  -webkit-transform: rotate(-54deg);
          transform: rotate(-54deg);
}
.top-advantages .top-heading__left::before {
  background: -webkit-gradient(linear, right top, left top, from(#29999b), to(#154d4e));
  background: -webkit-linear-gradient(right, #29999b 0%, #154d4e 100%);
  background: linear-gradient(-90deg, #29999b 0%, #154d4e 100%);
}

.top-heading__right {
  font-weight: 400;
  font-size: clamp(18px, 0.3666666667em, 22px);
  letter-spacing: 0.01em;
  line-height: 1.4545454545;
}
.top-heading:not(:has(.top-heading__right)) {
  display: block;
}

html[lang=ja] .top-heading__right {
  font-size: clamp(18px, 0.3333333333em, 20px);
}

.top-heading-wrap {
  display: block;
  width: 100%;
  margin: 0 0 140px;
}

/*--------------------------------------
セクションのボタン　wrapper
----------------------------------------*/
.top-btn-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin: 64px 0 0;
}
@media (width < 768px) {
  .top-btn-wrap {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

/*--------------------------------------
セクション > Our Advantages
----------------------------------------*/
.top-advantages {
  display: block;
  width: min(100% - clamp(30px, 4.6875vw, 60px), 1460px);
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  color: #196877;
}
.top-advantages__container {
  padding: 80px 0 156px;
}
.top-advantages-list {
  display: block;
  width: calc(100% - clamp(20px, 5.2083333333vw, 40px));
  margin: 0 auto;
}
.top-advantages-list > ul {
  display: grid;
  grid-template: auto/repeat(3, 1fr);
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(64px, 6.25vw, 80px) 8px;
  width: 100%;
}
@media (width < 768px) {
  .top-advantages-list > ul {
    grid-template-columns: repeat(1, min(100%, 328px));
  }
}
.top-advantages-list > ul > li {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.3em;
  font-weight: 600;
  font-size: clamp(18px, 1.71875vw, 22px);
  letter-spacing: 0.01em;
  line-height: 1.3571428571;
  text-align: center;
  color: #196877;
}
@media (width < 768px) {
  .top-advantages-list > ul > li {
    font-size: clamp(17px, 2.8645833333vw, 22px);
  }
}
.top-advantages-list > ul > li::before {
  content: "";
  display: block;
  width: 42.2857142857%;
  padding: 42.2857142857% 0 0;
  background: url(../img/img_top_icon_1.svg) center no-repeat;
  background-size: contain;
}
.top-advantages-list > ul > li:nth-of-type(2)::before {
  background-image: url(../img/img_top_icon_2.svg);
}
.top-advantages-list > ul > li:nth-of-type(3)::before {
  background-image: url(../img/img_top_icon_3.svg);
}
.top-advantages-list > ul > li:nth-of-type(4)::before {
  background-image: url(../img/img_top_icon_4.svg);
}
.top-advantages-list > ul > li:nth-of-type(5)::before {
  background-image: url(../img/img_top_icon_5.svg);
}
.top-advantages-list > ul > li:nth-of-type(6)::before {
  background-image: url(../img/img_top_icon_6.svg);
}

/*--------------------------------------
セクション > Services
----------------------------------------*/
.top-services {
  background: #242424; /* 直下に.container */
}
.top-services-cards > ul {
  display: grid;
  grid-template: auto/repeat(2, 1fr);
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 30px 40px;
  width: 100%;
}
@media (width < 768px) {
  .top-services-cards > ul {
    grid-template-columns: repeat(1, 1fr);
  }
}
.top-services-cards > ul > li {
  width: 100%;
  padding: 66.6666666667% 0 0;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
@media (width < 768px) {
  .top-services-cards > ul > li {
    padding: 0;
  }
}
.top-services-cards > ul > li::before, .top-services-cards > ul > li::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.top-services-cards > ul > li::before {
  background: -webkit-gradient(linear, left top, left bottom, from(#242424), to(#2b2f30));
  background: -webkit-linear-gradient(#242424 0%, #2b2f30 100%);
  background: linear-gradient(#242424 0%, #2b2f30 100%);
  opacity: 0.85;
  z-index: -2;
}
@media (width < 768px) {
  .top-services-cards > ul > li::before {
    background: -webkit-gradient(linear, left top, right top, from(#484848), to(#242424));
    background: -webkit-linear-gradient(left, #484848 0%, #242424 100%);
    background: linear-gradient(90deg, #484848 0%, #242424 100%);
  }
}
.top-services-cards > ul > li::after {
  border: 0px solid rgba(255, 255, 255, 0.6);
  border-radius: 22px;
  z-index: -1;
  -webkit-transition: 0.1s ease-in;
  transition: 0.1s ease-in;
  -webkit-transition-property: border-width;
  transition-property: border-width;
}
.top-services-cards > ul > li:has(.top-services-card:hover)::after {
  border-width: 1px;
}
.top-services-card {
  /* .top-services-cards > ul > li の子ブロック */
  display: grid;
  grid-template: "ttl ttl" -webkit-min-content "img -" auto "img btn" min-content/73.5849056604% 1fr;
  grid-template: "ttl ttl" min-content "img -" auto "img btn" min-content/73.5849056604% 1fr;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 0.5em;
  width: 100%;
  height: 100%;
  padding: 6.6666666667% 5% 6.6666666667% 6.6666666667%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}
@media (width < 768px) {
  .top-services-card {
    grid-template: "ttl" -webkit-min-content "img" auto "btn" min-content/1fr;
    grid-template: "ttl" min-content "img" auto "btn" min-content/1fr;
    position: relative;
  }
}
.top-services-card > h3 {
  grid-area: ttl;
  height: 2.5em;
  font-family: "Hind", sans-serif;
  font-weight: 400;
  font-weight: 500;
  font-size: clamp(18px, 1.71875vw, 22px);
  line-height: 1.25;
  text-align: left;
  color: #d8ebef;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
@media (width < 768px) {
  .top-services-card > h3 {
    height: auto;
    margin: 0 0 clamp(8px, 2.0833333333vw, 16px);
    font-size: clamp(16px, 2.8645833333vw, 22px);
  }
}
html[lang=ja] .top-services-card > h3 {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: clamp(18px, 1.5625vw, 20px);
}

.top-services-card__img {
  grid-area: img;
  display: block;
  width: 100%;
  padding: 61.5384615385% 0 0;
  background: url(../img/img_top_service1.jpg) center no-repeat;
  background-size: cover;
  border-radius: 15px;
  overflow: hidden;
}
.top-services-cards li:has([href*="#service-2"]) .top-services-card__img {
  background-image: url(../img/img_top_service2.jpg);
}

.top-services-cards li:has([href*="#service-3"]) .top-services-card__img {
  background-image: url(../img/img_top_service3.jpg);
}

.top-services-cards li:has([href*="#service-4"]) .top-services-card__img {
  background-image: url(../img/img_top_service4.jpg);
}

.top-services-cards li:has([href*="#service-5"]) .top-services-card__img {
  background-image: url(../img/img_top_service5.jpg);
}

.top-services-cards li:has([href*="#service-6"]) .top-services-card__img {
  background-image: url(../img/img_top_service6.jpg);
}

.top-services-cards li:has([href*="#service-7"]) .top-services-card__img {
  background-image: url(../img/img_top_service7.jpg);
}

.top-services-cards li:has([href*="#service-8"]) .top-services-card__img {
  background-image: url(../img/img_top_service8.jpg);
}

@media (width < 768px) {
  .top-services-card__img {
    padding: 45.5445544554% 0 0;
  }
}
.top-services-card__btn {
  grid-area: btn;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  padding: 0.6666666667em;
  border-radius: 16px;
  background: transparent;
  border: 0.5px solid #fff;
  overflow: hidden;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: clamp(10px, 0.9375vw, 12px);
  line-height: 1;
  text-align: left;
  color: #d8ebef;
  position: relative;
  z-index: 1;
  -webkit-transition: color 0.3s cubic-bezier(0.02, 0.01, 0.86, 0.3);
  transition: color 0.3s cubic-bezier(0.02, 0.01, 0.86, 0.3);
}
@media (width < 768px) {
  .top-services-card__btn {
    width: min(100%, 104px);
    height: auto;
    padding: 8px;
    margin: 0 0 0 auto;
    border: 0;
    font-size: clamp(15px, 1.40625vw, 18px);
  }
}
.top-services-card__btn::before {
  content: "";
  display: block;
  width: 0;
  height: 100%;
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: width 0.3s cubic-bezier(0.02, 0.01, 0.86, 0.3);
  transition: width 0.3s cubic-bezier(0.02, 0.01, 0.86, 0.3);
  z-index: -1;
}
.top-services-card__btn::after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transition: border-color 0.3s cubic-bezier(0.02, 0.01, 0.86, 0.3);
  transition: border-color 0.3s cubic-bezier(0.02, 0.01, 0.86, 0.3);
}
@media (width < 768px) {
  .top-services-card__btn::after {
    width: 10px;
    height: 10px;
  }
}
.top-services-card:hover h3 {
  color: #fff;
}
.top-services-card:hover .top-services-card__btn {
  color: #196877;
}
.top-services-card:hover .top-services-card__btn::before {
  width: 100%;
}
.top-services-card:hover .top-services-card__btn::after {
  border-color: #196877;
}

/*--------------------------------------
要素を、フワッと表示させる
----------------------------------------*/
/* ----------------
// CSSアニメーション
---------------- */
/* 画面読み込み時に表示 */
.head-fade-in {
  opacity: 0;
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
  -webkit-animation: mv-heading 1.5s 0.1s forwards ease-in-out;
          animation: mv-heading 1.5s 0.1s forwards ease-in-out;
}

.contents-fade-in {
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
  opacity: 0;
  -webkit-animation: mv-heading 1.5s 0.2s forwards ease-in-out;
          animation: mv-heading 1.5s 0.2s forwards ease-in-out;
}

/* ----------------
// fade-in.js
---------------- */
/* スクロールすると表示 */
.fade-in {
  opacity: 0;
  -webkit-transition-duration: 1s;
          transition-duration: 1s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  -webkit-transition-timing-function: ease;
          transition-timing-function: ease;
}
@media (width < 520px) {
  .fade-in {
    -webkit-transition-duration: 0.5s;
            transition-duration: 0.5s;
  }
}

.fade-in-up {
  -webkit-transform: translate(0, 20px);
          transform: translate(0, 20px);
}

.fade-in-down {
  -webkit-transform: translate(0, -20px);
          transform: translate(0, -20px);
}

.fade-in-left {
  -webkit-transform: translate(-20px, 0);
          transform: translate(-20px, 0);
}

.fade-in-right {
  -webkit-transform: translate(20px, 0);
          transform: translate(20px, 0);
}

.fade-in-list > li {
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.fade-in-list > li:nth-child(2) {
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}
.fade-in-list > li:nth-child(3) {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.fade-in-list > li:nth-child(4) {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
.fade-in-list > li:nth-child(5) {
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}
.fade-in-list > li:nth-child(6) {
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.fade-in-list > li:nth-child(7) {
  -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
}
.fade-in-list > li:nth-child(8) {
  -webkit-transition-delay: 0.7s;
          transition-delay: 0.7s;
}

.scroll-in[class] {
  opacity: 1;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}