@charset "UTF-8";
/* Foundation
------------------------------------------------------------------------------------------ */
/* 要素の中から文字だけを飛ばす */
/* 擬似要素を作成するときに・・・ */
/* フロートの解除用・・・ */
/* box-sizing: border-box */
/* Foundation
------------------------------------------------------------------------------------------ */
@font-face {
  font-family: "Number";
  src: local("Arial");
  unicode-range: U+0030-0039; /* 0-9 */
}
@font-face {
  font-family: "Alphabet";
  src: local("Tahoma");
  unicode-range: U+0041-005A, U+0061-007A; /* A-Z, a-z */
}
body, div, p, h1, h2, h3, h4, h5, h6, ol, ul, li, dl, dt, dd, form, nav, header, footer, main, article, section, aside, figure, figcaption, button {
  margin: 0;
  padding: 0;
}

body {
  line-height: 1;
  -webkit-text-size-adjust: 100%;
}

main {
  display: block;
}

main, nav, aside, header, article, section, footer, figure, ul, li, dl, dt, dd, div, p, a, span, input, select, button {
  box-sizing: border-box;
}

img {
  border: 0;
}

a {
  color: #000;
  text-decoration: none;
  transition: color 0.2s, background-color 0.2s, opacity 0.2s;
}
a:hover {
  color: #000;
  text-decoration: underline;
}
@media screen and (max-width: 500px) {
  a:hover {
    color: inherit;
  }
}
a[href^="tel:"] {
  text-decoration: none !important;
}
@media screen and (min-width: 768px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}

a > img {
  vertical-align: bottom;
}

@media screen and (max-width: 500px) {
  br.pc {
    display: none;
  }
}

* {
  box-sizing: border-box;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}
table td, table th {
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9 {
  list-style-type: decimal !important;
  list-style-position: outside;
  margin-left: 36px;
  padding-left: 16px;
}

li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9 {
  background-color: #272822 !important;
}

pre.prettyprint {
  padding: 10px !important;
  margin-bottom: 30px !important;
}

b {
  color: #FF5252;
}

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

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

.w70 {
  width: 70px !important;
}

.w90 {
  width: 90px !important;
}

.w100 {
  width: 100px !important;
}

.w120 {
  width: 120px !important;
}

.w330 {
  width: 330px !important;
}

.w100p {
  width: 100% !important;
}

.w90p {
  width: 90% !important;
}

.w80p {
  width: 80% !important;
}

.w70p {
  width: 70% !important;
}

.w60p {
  width: 60% !important;
}

.w50p {
  width: 50% !important;
}

.w40p {
  width: 40% !important;
}

.w30p {
  width: 30% !important;
}

.w20p {
  width: 20% !important;
}

.w10p {
  width: 10% !important;
}

.mb0 {
  margin-bottom: 0 !important;
}

.mb5 {
  margin-bottom: 5px !important;
}

.mb10 {
  margin-bottom: 10px !important;
}

.mb20 {
  margin-bottom: 20px !important;
}

.mb30 {
  margin-bottom: 30px !important;
}

.mb40 {
  margin-bottom: 40px !important;
}

.mb50 {
  margin-bottom: 50px !important;
}

.mb60 {
  margin-bottom: 60px !important;
}

.mb70 {
  margin-bottom: 70px !important;
}

.mb80 {
  margin-bottom: 80px !important;
}

.mb90 {
  margin-bottom: 90px !important;
}

.mb100 {
  margin-bottom: 100px !important;
}

.mb160 {
  margin-bottom: 160px !important;
}

.mb200 {
  margin-bottom: 200px !important;
}

.mt10 {
  margin-top: 10px !important;
}

.mt20 {
  margin-top: 20px !important;
}

.mt30 {
  margin-top: 30px !important;
}

.mt40 {
  margin-top: 40px !important;
}

.mt50 {
  margin-top: 50px !important;
}

.mt60 {
  margin-top: 60px !important;
}

.mt70 {
  margin-top: 70px !important;
}

.mt80 {
  margin-top: 80px !important;
}

.mt90 {
  margin-top: 90px !important;
}

.mt100 {
  margin-top: 100px !important;
}

@media screen and (max-width: 768px) {
  .mb30 {
    margin-bottom: 20px !important;
  }
  .mb40 {
    margin-bottom: 30px !important;
  }
  .mb50 {
    margin-bottom: 30px !important;
  }
  .mb60 {
    margin-bottom: 30px !important;
  }
  .mb70 {
    margin-bottom: 30px !important;
  }
  .mb80 {
    margin-bottom: 50px !important;
  }
  .mb90 {
    margin-bottom: 50px !important;
  }
  .mb100 {
    margin-bottom: 50px !important;
  }
  .mb160 {
    margin-bottom: 80px !important;
  }
  .mb200 {
    margin-bottom: 30px !important;
  }
  .mt30 {
    margin-top: 20px !important;
  }
  .mt40 {
    margin-top: 30px !important;
  }
  .mt50 {
    margin-top: 30px !important;
  }
  .mt60 {
    margin-top: 30px !important;
  }
  .mt70 {
    margin-top: 30px !important;
  }
  .mt80 {
    margin-top: 30px !important;
  }
  .mt90 {
    margin-top: 30px !important;
  }
  .mt100 {
    margin-top: 30px !important;
  }
  .pbs10 {
    padding-bottom: 10px !important;
  }
}
@media screen and (max-width: 500px) {
  .w330 {
    width: 100% !important;
  }
  .w50p {
    width: inherit !important;
  }
}
.w150 {
  width: 150px !important;
}

.w200 {
  width: 200px !important;
}

.w250 {
  width: 250px !important;
}

.mw320 {
  max-width: 320px;
  width: 100%;
}

/* Layout
------------------------------------------------------------------------------------------ */
/* Foundation
------------------------------------------------------------------------------------------ */
html {
  height: 100%;
  scrollbar-gutter: stable;
}

body,
button {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-feature-settings: "palt";
  line-height: 1.5;
}

@media screen and (min-width: 768px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}

em, i {
  font-style: normal;
}

hr {
  border: none;
  border-top: 1px solid #669;
  margin-bottom: 20px;
}

#page {
  min-height: 70vh;
  background: #FFF;
  overflow-x: clip;
  /*
  &:before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100px;
    z-index: -1;
    background-color: white;
  }
    */
}

.contents {
  width: 100%;
  max-width: 1280px;
  padding: 170px 80px 50px;
  margin: 0 auto;
}
@media screen and (max-width: 1280px) {
  .contents {
    padding: 100px 20px 50px;
    max-width: 1160px;
  }
}
@media screen and (max-width: 768px) {
  .contents {
    padding-top: 80px;
  }
}
.contents.top {
  padding-top: 100px;
}
.contents.cmn {
  max-width: 1080px;
}
@media screen and (max-width: 1280px) {
  .contents.cmn {
    max-width: 960px;
    padding: 170px 20px 50px;
  }
}
@media screen and (max-width: 960px) {
  .contents.cmn {
    max-width: 100%;
    padding: 100px 20px 50px;
  }
}
.contents p {
  margin-bottom: 1em;
}
.contents p:last-child {
  margin-bottom: 0;
}

.pb110 {
  padding-bottom: 90px;
}
@media screen and (max-width: 768px) {
  .pb110 {
    padding-bottom: 39px;
  }
}

/* Foundation
------------------------------------------------------------------------------------------ */
#header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 8;
  width: 100%;
  mix-blend-mode: difference;
  color: #FFF;
  padding: 25px 40px;
  pointer-events: none;
}
#header > * {
  pointer-events: auto;
}
@media screen and (max-width: 1280px) {
  #header {
    padding: 25px 20px;
  }
}
@media screen and (max-width: 768px) {
  #header {
    padding: 15px 20px;
  }
}
#header .line_catalog,
#header .contact {
  position: absolute;
  top: 50%;
  right: 190px;
  margin-top: -13px;
  color: #FFF;
  border: 1px solid #FFF;
  font-family: "Helvetica Neue", "Arial", sans-serif;
  font-weight: bold;
  font-size: 10px;
  letter-spacing: 0.04em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 124px;
  height: 26px;
  text-decoration: none;
}
#header .line_catalog:hover,
#header .contact:hover {
  color: #000;
  background-color: #ddd;
}
@media screen and (max-width: 1280px) {
  #header .line_catalog,
  #header .contact {
    right: 180px;
  }
}
@media screen and (max-width: 768px) {
  #header .line_catalog,
  #header .contact {
    right: 170px;
  }
}
@media screen and (max-width: 500px) {
  #header .line_catalog,
  #header .contact {
    display: none;
  }
}
#header .contact {
  right: 90px;
  width: 82px;
  height: 26px;
}
@media screen and (max-width: 1280px) {
  #header .contact {
    right: 80px;
  }
}
@media screen and (max-width: 768px) {
  #header .contact {
    right: 70px;
  }
}
#header .logo {
  margin-left: 7px;
  mix-blend-mode: normal;
  width: 92px;
  height: 50px;
}
@media screen and (max-width: 1280px) {
  #header .logo {
    margin-left: 0;
  }
}
#header .logo a {
  width: 92px;
  height: 50px;
  background: url(../img/logo_right.svg) no-repeat left center;
  background-size: contain;
  text-align: left;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  color: #FFF;
  display: block;
}

.logo_left {
  position: fixed;
  z-index: 1;
  width: 92px;
  height: 50px;
  top: 25px;
  left: 47px;
}
@media screen and (max-width: 1280px) {
  .logo_left {
    left: 20px;
  }
}
@media screen and (max-width: 768px) {
  .logo_left {
    top: 15px;
    left: 20px;
  }
}

/* Foundation
------------------------------------------------------------------------------------------ */
#footer {
  background: #222;
  color: #FFF;
}
#footer_in {
  max-width: 1160px;
  width: 100%;
  margin: 0 auto;
  padding: 60px 40px;
  position: relative;
}
@media screen and (max-width: 768px) {
  #footer_in {
    width: 280px;
    padding: 30px 0;
  }
}
#footer_in .footer_flex {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
  #footer_in .footer_flex {
    display: block;
  }
}
#footer_in .footer_flex .left {
  flex: 1;
}
@media screen and (max-width: 768px) {
  #footer_in .footer_flex .left {
    width: 280px;
    margin: 0 auto;
  }
}
#footer_in .footer_flex .right {
  width: 300px;
  padding-left: 20px;
}
@media screen and (max-width: 768px) {
  #footer_in .footer_flex .right {
    width: 280px;
    padding-left: 0;
    margin: 0 auto;
  }
}
#footer_in .logo {
  width: 235px;
  height: 64px;
  text-align: left;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: url(../img/logo_footer.svg) no-repeat center center;
  background-size: contain;
  position: absolute;
  bottom: 60px;
  left: 40px;
}
@media screen and (max-width: 768px) {
  #footer_in .logo {
    position: static;
    bottom: inherit;
    left: inherit;
    margin-bottom: 20px;
    width: 280px;
    height: 76px;
  }
}
#footer_in .company {
  margin-bottom: 30px;
}
#footer_in .company .tel {
  font-family: "Helvetica Neue", "Arial", sans-serif;
  font-weight: bold;
  font-size: 36px;
  letter-spacing: 0.04em;
  line-height: 46px;
}
#footer_in .company .tel a {
  color: #FFF;
}
#footer_in .company .address,
#footer_in .company .open_close {
  font-size: 10px;
  font-weight: bold;
}
#footer_in .group_link,
#footer_in .privacy_link {
  display: inline-block;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.04em;
  color: #FFF;
}
#footer_in .group_link:hover,
#footer_in .privacy_link:hover {
  text-decoration: underline;
}
@media screen and (max-width: 768px) {
  #footer_in .footer_navi {
    display: none;
  }
}
#footer_in .bottom {
  height: 64px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}
@media screen and (max-width: 768px) {
  #footer_in .bottom {
    display: block;
  }
}
#footer_in .bottom .privacy_link {
  margin-right: 40px;
}
#footer_in .bottom .copyright {
  font-size: 10px;
  font-weight: bold;
  font-family: "Helvetica Neue", "Arial", sans-serif;
  margin-right: 25px;
  letter-spacing: 0.04em;
}
@media screen and (max-width: 768px) {
  #footer_in .bottom .copyright {
    margin-top: 20px;
    text-align: center;
    margin-right: 0;
  }
}

/* Component
------------------------------------------------------------------------------------------ */
/* Foundation
------------------------------------------------------------------------------------------ */
/* --- ローディング画面全体の背景と中央揃え --- */
#loading-screen {
  position: fixed;
  inset: 0; /* top, left, right, bottom を全て0にする */
  background-color: #FFF; /* ご指定の背景色 */
  /* ↓ 追加：0.3秒かけて背景色を変化させるアニメーション */
  animation: bgColorChange 0.3s ease-out forwards;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* 一番手前に表示 */
  transition: transform 0.6s ease-in-out, visibility 0.6s;
}

/* ↓ 追加：背景色を青(#058bc4)に変えるキーフレーム */
@keyframes bgColorChange {
  100% {
    background-color: #058bc4;
  }
}
/* 読み込み完了後にJSで付与するクラス */
#loading-screen.is-loaded {
  transform: translateX(100%);
  visibility: hidden;
}

/* --- ロゴのラッパー --- */
.logo-wrapper {
  position: relative;
  width: 76px; /* ★お手持ちのSVGの横幅 */
  height: 124px; /* ★お手持ちのSVGの高さに合わせて必ず数値を指定してください */
  /* ★追加：2秒待ってから、0.6秒かけて上へフワッと消える */
  animation: floatUpFade 0.4s ease-out 2s forwards;
}

/* --- ロゴの共通設定（マスク機能でSVGの形を切り抜く） --- */
.logo-base,
.logo-white {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* SVGをスタンプの型抜きのように使う設定 */
  -webkit-mask-image: url("../img/loading.svg"); /* ★画像のパス */
  mask-image: url("../img/loading.svg"); /* ★画像のパス */
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* --- (参考)以前の共通設定はそのままlogo-baseに残します --- */
.logo-base {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-image: url("../img/loading.svg"); /* ★画像のパス */
  mask-image: url("../img/loading.svg"); /* ★画像のパス */
  /* ...mask-sizeなどの他の共通設定もここに... */
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: #009FE2; /* 下敷きの色 */
}

/* ========== ここから新しい設定 ========== */
/* --- 外側の箱：左から右へのワイプを担当 --- */
.logo-wipe-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 以前 .logo-white にあった clip-path と animation をここに移動 */
  clip-path: inset(0 100% 0 0);
  animation: fillWhite 2s cubic-bezier(0.82, 0.05, 0.66, 0.25) forwards;
}

/* --- 内側の箱：白い色と高速点滅を担当 --- */
.logo-white-flasher {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  /* ロゴの形に切り抜く設定もこちらへ移動 */
  -webkit-mask-image: url("../img/loading.svg"); /* ★画像のパス */
  mask-image: url("../img/loading.svg"); /* ★画像のパス */
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  /* ★追加：高速点滅アニメーション */
  /* 0.08秒間隔で無限に点滅させる設定 */
}

/* --- 左から右へ白くするアニメーション（変更なし） --- */
@keyframes fillWhite {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}
/* --- ★追加：高速点滅のキーフレーム --- */
@keyframes quickFlash {
  /* visibilityを使うと、opacityよりもパキッとした鋭い点滅になります */
  to {
    visibility: hidden;
  }
}
/* --- ③ ★新規追加：上へ移動しながら消えるキーフレーム --- */
@keyframes floatUpFade {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-30px); /* 上に30px移動（お好みで調整） */
    opacity: 0; /* 透明にする */
  }
}
/* Foundation
------------------------------------------------------------------------------------------ */
/* ===============================
フッター・ドロワーナビ
================================== */
.footer_navi,
.drawer_navi {
  margin-bottom: 40px;
}
.footer_navi ul,
.drawer_navi ul {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 125px;
  width: 80%;
  list-style: none;
}
.footer_navi ul li,
.drawer_navi ul li {
  margin-bottom: 5px;
  width: auto;
  margin-right: 20px;
}
.footer_navi ul li a,
.drawer_navi ul li a {
  line-height: 25px;
  font-size: 18px;
  font-family: "Helvetica Neue", "Arial", sans-serif;
  letter-spacing: 0.04em;
  font-weight: bold;
  color: #FFF;
  text-decoration: none;
  width: auto;
}
.footer_navi ul li a.ext,
.drawer_navi ul li a.ext {
  font-size: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Noto Sans JP", sans-serif;
  padding-right: 20px;
  background: url(../img/icon_ext.svg) no-repeat center right;
}
.footer_navi ul li a:hover,
.drawer_navi ul li a:hover {
  text-decoration: underline;
}

/* ===============================
SNSアイコン
================================== */
.footer_sns,
.drawer_sns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 50px;
}
@media screen and (max-width: 768px) {
  .footer_sns,
  .drawer_sns {
    margin-bottom: 20px;
  }
}
.footer_sns p,
.drawer_sns p {
  font-size: 10px;
  font-weight: bold;
  font-family: "Helvetica Neue", "Arial", sans-serif;
  margin-right: 25px;
  letter-spacing: 0.04em;
}
.footer_sns ul,
.drawer_sns ul {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  list-style: none;
}
.footer_sns ul li a,
.drawer_sns ul li a {
  display: block;
  text-align: left;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  transition: all 0.2s;
}
.footer_sns ul li a.insta,
.drawer_sns ul li a.insta {
  width: 22px;
  height: 22px;
  background: url(../img/icon_insta.svg) no-repeat center center;
}
.footer_sns ul li a.fb,
.drawer_sns ul li a.fb {
  width: 23px;
  height: 23px;
  background: url(../img/icon_fb.svg) no-repeat center center;
}
.footer_sns ul li a.youtube,
.drawer_sns ul li a.youtube {
  width: 28px;
  height: 19px;
  background: url(../img/icon_youtube.svg) no-repeat center center;
}
.footer_sns ul li a.tiktok,
.drawer_sns ul li a.tiktok {
  width: 19px;
  height: 22px;
  background: url(../img/icon_tiktok.svg) no-repeat center center;
}
.footer_sns ul li a:hover,
.drawer_sns ul li a:hover {
  transform: scale(1.2);
}
.footer_sns ul li a,
.drawer_sns ul li a {
  background-size: contain;
}

/* ===============================
もっとみるリンク
================================== */
.more_link,
.cmn_wrap .ext {
  font-size: 13px;
  font-family: "Helvetica Neue", "Arial", sans-serif;
  font-weight: bold;
  background: url(../img/btn_arrow_right.svg) no-repeat right 10px center;
  padding-right: 4px;
  letter-spacing: 0.01em;
}
.more_link:hover,
.cmn_wrap .ext:hover {
  text-decoration: none;
  border-bottom: 1px solid #000;
}
.more_link:before,
.cmn_wrap .ext:before {
  content: "( ";
}
.more_link:after,
.cmn_wrap .ext:after {
  content: "　)";
}

/* ===============================
category
================================== */
.works_category,
.news_category {
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
}
.works_category p,
.news_category p {
  width: 100%;
  font-family: "Helvetica Neue", "Arial", sans-serif;
  font-weight: bold;
  margin-bottom: 10px;
}
.works_category p:before,
.news_category p:before {
  content: "( ";
}
.works_category p:after,
.news_category p:after {
  content: " )";
}
.works_category ul,
.news_category ul {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  max-width: 400px;
}
.works_category ul li,
.news_category ul li {
  margin-right: 20px;
  margin-bottom: 10px;
}
.works_category ul li:last-child,
.news_category ul li:last-child {
  margin-right: 0;
}
.works_category ul li a,
.news_category ul li a {
  font-weight: bold;
}
.works_category ul li a.active,
.news_category ul li a.active {
  text-decoration: underline;
}

/* ===============================
イベント
================================== */
.event_list {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.event_list .event_item {
  display: block;
  width: calc((100% - 100px) / 3);
  margin-right: 50px;
  margin-bottom: 50px;
  will-change: transform;
  backface-visibility: hidden;
}
.event_list .event_item:nth-child(3n) {
  margin-right: 0;
}
.event_list .event_item:nth-last-child(-n+3) {
  margin-bottom: 0;
}
@media screen and (max-width: 1280px) {
  .event_list .event_item {
    width: calc((100% - 9vw) / 3);
    margin-right: 4.5vw;
    margin-bottom: 4.5vw;
  }
}
@media screen and (max-width: 768px) {
  .event_list .event_item {
    width: calc((100% - 5vw) / 2);
    margin-right: 5vw;
    margin-bottom: 5vw;
  }
  .event_list .event_item:nth-child(3n) {
    margin-right: 5vw;
  }
  .event_list .event_item:nth-child(2n) {
    margin-right: 0;
  }
  .event_list .event_item:nth-child(4) {
    margin-bottom: 5vw;
  }
  .event_list .event_item:nth-last-child(-n+4) {
    margin-bottom: 5vw;
  }
  .event_list .event_item:nth-last-child(-n+2) {
    margin-bottom: 0;
  }
}
@media screen and (max-width: 500px) {
  .event_list .event_item {
    width: 100%;
    margin-right: 0 !important;
  }
  .event_list .event_item:nth-child(5) {
    margin-bottom: 30px;
  }
}
.event_list .event_item .img {
  margin-bottom: 20px;
  aspect-ratio: 14/9;
  overflow: hidden;
}
@media screen and (max-width: 500px) {
  .event_list .event_item .img {
    margin-bottom: 10px;
  }
}
.event_list .event_item .img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover; /* 多少のズレを吸収してトリミング */
  display: block;
  transition: transform 0.2s ease;
}
.event_list .event_item .title {
  font-size: 13px;
  margin-bottom: 5px;
  letter-spacing: 0.05em;
}
.event_list .event_item .bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-weight: bold;
}
.event_list .event_item .bottom p {
  margin-bottom: 0;
}
.event_list .event_item .bottom .date {
  display: flex;
  align-items: center;
  flex: 1;
}
.event_list .event_item .bottom .date small {
  font-size: 10px;
}
.event_list .event_item .bottom .date span {
  font-size: 13px;
}
.event_list .event_item .bottom .status {
  display: block;
  width: 80px;
  height: 20px;
  font-size: 10px;
  line-height: 18px;
  border: 1px solid #707070;
  text-align: center;
  color: #222;
}
.event_list .event_item .bottom .status.end {
  color: #fff;
  background: #707070;
}
.event_list .event_item:hover {
  text-decoration: none;
}
.event_list .event_item:hover .img img {
  transform: scale(1.1);
}
.event_list .event_item:hover .title {
  text-decoration: underline;
}

/* ===============================
プロジェクト
================================== */
.project_list {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.project_list .project_item {
  display: block;
  width: calc((100% - 150px) / 4);
  margin-right: 50px;
  margin-bottom: 50px;
}
.project_list .project_item:nth-child(4n) {
  margin-right: 0;
}
.project_list .project_item:nth-last-child(-n+4) {
  margin-bottom: 0;
}
@media screen and (max-width: 1280px) {
  .project_list .project_item {
    width: calc((100% - 12vw) / 4);
    margin-right: 4vw;
    margin-bottom: 4vw;
  }
}
@media screen and (max-width: 900px) {
  .project_list .project_item {
    width: calc((100% - 5vw) / 2);
    margin-right: 5vw;
    margin-bottom: 5vw;
  }
  .project_list .project_item:nth-child(3n) {
    margin-right: 5vw;
  }
  .project_list .project_item:nth-child(2n) {
    margin-right: 0;
  }
  .project_list .project_item:nth-child(-n+4) {
    margin-bottom: 5vw;
  }
  .project_list .project_item:nth-last-child(-n+2) {
    margin-bottom: 0;
  }
}
@media screen and (max-width: 500px) {
  .project_list .project_item {
    width: 100%;
    margin-right: 0 !important;
  }
  .project_list .project_item:nth-last-child(2) {
    margin-bottom: 30px;
  }
}
.project_list .project_item .img {
  margin-bottom: 20px;
  aspect-ratio: 14/9;
  overflow: hidden;
}
@media screen and (max-width: 500px) {
  .project_list .project_item .img {
    margin-bottom: 10px;
  }
}
.project_list .project_item .img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover; /* 多少のズレを吸収してトリミング */
  display: block;
  transition: transform 0.2s ease;
}
.project_list .project_item .title {
  font-size: 13px;
  margin-bottom: 5px;
  letter-spacing: 0.05em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* ここで行数を指定 */
  overflow: hidden;
  /* 文字の折り返し設定（英単語やURLが混ざる場合の対策） */
  word-break: break-word;
}
.project_list .project_item .bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.project_list .project_item .bottom p {
  margin-bottom: 0;
}
.project_list .project_item .bottom .date {
  display: flex;
  align-items: center;
  flex: 1;
}
.project_list .project_item .bottom .date small {
  font-size: 10px;
}
.project_list .project_item .bottom .date span {
  font-size: 13px;
}
.project_list .project_item .bottom .status {
  display: block;
  width: 80px;
  height: 20px;
  font-size: 10px;
  line-height: 18px;
  border: 1px solid #707070;
  text-align: center;
  color: #222;
}
.project_list .project_item .bottom .status.end {
  color: #fff;
  background: #707070;
}
.project_list.sub .project_item {
  display: block;
  width: calc((100% - 100px) / 3);
  margin-right: 50px;
  margin-bottom: 50px;
  will-change: transform;
  backface-visibility: hidden;
}
.project_list.sub .project_item:nth-child(3n) {
  margin-right: 0;
}
.project_list.sub .project_item:nth-last-child(-n+3) {
  margin-bottom: 0;
}
@media screen and (max-width: 1280px) {
  .project_list.sub .project_item {
    width: calc((100% - 9vw) / 3);
    margin-right: 4.5vw;
    margin-bottom: 4.5vw;
  }
}
@media screen and (max-width: 768px) {
  .project_list.sub .project_item {
    width: calc((100% - 5vw) / 2);
    margin-right: 5vw;
    margin-bottom: 5vw;
  }
  .project_list.sub .project_item:nth-child(3n) {
    margin-right: 5vw;
  }
  .project_list.sub .project_item:nth-child(2n) {
    margin-right: 0;
  }
  .project_list.sub .project_item:nth-child(4) {
    margin-bottom: 5vw;
  }
}
@media screen and (max-width: 500px) {
  .project_list.sub .project_item {
    width: 100%;
    margin-right: 0 !important;
  }
  .project_list.sub .project_item:nth-child(5) {
    margin-bottom: 30px;
  }
}
.project_list.sub .project_item .title {
  display: block;
  -webkit-box-orient: inherit;
  -webkit-line-clamp: inherit; /* ここで行数を指定 */
  overflow: inherit;
  /* 文字の折り返し設定（英単語やURLが混ざる場合の対策） */
  word-break: break-word;
}

/* ===============================
NEWS
================================== */
.news_list {
  width: 100%;
  max-width: 560px;
  border-top: 1px solid #707070;
  list-style: none;
}
.news_list li {
  border-bottom: 1px solid #707070;
}
.news_list li a {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  padding: 20px 0;
}
.news_list li a .title {
  order: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; /* ここで行数を指定 */
  overflow: hidden;
  letter-spacing: 0.04em;
  /* 文字の折り返し設定（英単語やURLが混ざる場合の対策） */
  word-break: break-word;
}
@media screen and (max-width: 768px) {
  .news_list li a .title {
    -webkit-line-clamp: 2; /* ここで行数を指定 */
  }
}
.news_list li a .hd {
  order: 0;
  margin-bottom: 5px;
  letter-spacing: 0.04em;
  font-weight: bold;
}
.news_list li a .hd .date:after {
  content: " / ";
  font-weight: bold;
}
.news_list li a:hover {
  text-decoration: none;
}
.news_list li a:hover .title {
  text-decoration: underline;
}

/* ===============================
資料請求
================================== */
.request_information {
  padding: 70px;
  background: #222;
  color: #FFF;
  position: relative;
}
@media screen and (max-width: 768px) {
  .request_information {
    padding: 50px;
  }
}
.request_information .hd {
  font-size: 28px;
  margin-bottom: 100px;
}
@media screen and (max-width: 768px) {
  .request_information .hd {
    margin-bottom: 40px;
  }
}
.request_information p {
  letter-spacing: 0.04em;
  max-width: 50%;
  font-size: 13px;
  line-height: 2;
  font-weight: bold;
}
@media screen and (max-width: 900px) {
  .request_information p {
    max-width: 45%;
  }
}
@media screen and (max-width: 768px) {
  .request_information p {
    max-width: 100%;
    margin-bottom: 30px;
  }
}
.request_information .btn_cmn {
  position: absolute;
  right: 70px;
  bottom: 70px;
}
@media screen and (max-width: 768px) {
  .request_information .btn_cmn {
    position: static;
    right: inherit;
    bottom: inherit;
  }
}

/* ===============================
カルーセルのラッパー（splide）
================================== */
.full {
  position: relative;
  margin-bottom: 60px;
  /* --- ▼ 独自ボタン（下部）のスタイル --- */
}
.full .custom-controls {
  margin-top: 30px; /* スライダーとの距離 */
  display: flex;
  justify-content: center; /* 中央寄せ */
  gap: 40px; /* ボタン間の距離 */
}
.full .custom-btn {
  background: none;
  border: none;
  outline: none;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #333;
  transition: all 0.3s;
  font-weight: bold;
}
.full {
  /* 三角アイコン（CSSで描画） */
}
.full .icon-tri {
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
}
.full {
  /* 左向き */
}
.full .prev-icon {
  border-width: 5px 6px 5px 0;
  border-color: transparent currentColor transparent transparent;
}
.full {
  /* 右向き */
}
.full .next-icon {
  border-width: 5px 0 5px 6px;
  border-color: transparent transparent transparent currentColor;
}

/* Foundation
------------------------------------------------------------------------------------------ */
/* 親コンテナ（グリッドの設定） */
.grid-gallery {
  display: grid;
  /* PCでは4列、各列の幅は均等(1fr) */
  grid-template-columns: repeat(4, 1fr);
  /* 行の高さの基準（お好みで調整してください） */
  /* 画像間の隙間 */
  gap: 50px;
  padding: 10px 0 20px;
  max-width: 1200px;
  margin: 0 auto;
  transition: all 0.3s;
}
@media (max-width: 1160px) {
  .grid-gallery {
    gap: 30px;
  }
}
@media (max-width: 768px) {
  .grid-gallery {
    grid-template-columns: repeat(2, 1fr); /* タブレットは2列 */
    gap: 20px;
  }
}

/* --- 基本アイテム（1x1） --- */
.grid-item {
  width: 100%;
  position: relative;
  overflow: hidden;
  /* 【重要】小さい画像だけ、基準となる比率(14:9)を強制します */
  aspect-ratio: 14/9;
}
.grid-item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover; /* 多少のズレを吸収してトリミング */
  display: block;
  transition: transform 0.2s ease;
}
.grid-item a {
  will-change: transform;
  backface-visibility: hidden;
}
.grid-item a:hover img {
  transform: scale(1.1);
}
.grid-item {
  /* --- 大きいアイテムの設定 --- */
  /* 大きいアイテムには aspect-ratio を指定しません。
    代わりに「height: 100%」を指定して、
    周囲の小さいアイテムが作ったグリッドの高さに合わせて
    自動的に引き伸ばされるようにします。
  */
}
.grid-item.item-wide {
  grid-column: span 2;
  width: 100%;
  height: 100%; /* グリッドエリアいっぱいに広げる */
  /* 万が一、横に小さい画像が1つもない場合の保険として近似値を指定 */
  aspect-ratio: 30/9;
}
.grid-item {
  /* 特大 (縦横2倍) */
}
.grid-item:nth-child(18n+7), .grid-item:nth-child(18n+14) {
  grid-column: span 2;
  grid-row: span 2;
  width: 100%;
  height: 100%;
}

/* Foundation
------------------------------------------------------------------------------------------ */
/* ===============================
汎用ボタン
================================== */
/* ===============================
トップ検索ボタン
================================== */
.cmn_wrap .btn,
.btn_cmn {
  display: block;
  max-width: 280px;
  width: 100%;
  height: 35px;
  color: #000;
  line-height: 33px;
  font-size: 10px;
  font-weight: bold;
  padding: 0 20px;
  border: 1px solid #222;
  background: #FFF url(../img/btn_arrow_right.svg) no-repeat right 20px center;
  background-size: 10px 8px;
  margin-bottom: 10px;
  outline: none;
  transition: all 0.2s;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 0.04em;
  caret-color: transparent;
}
.cmn_wrap .btn:hover,
.btn_cmn:hover {
  text-decoration: none;
  color: #FFF;
  background: #222 url(../img/btn_arrow_right_w.svg) no-repeat right 20px center;
}
.cmn_wrap .btn.white_black,
.btn_cmn.white_black {
  background: #222 url(../img/btn_arrow_right_w.svg) no-repeat right 20px center;
  border: 1px solid #FFF;
  color: #FFF;
}
.cmn_wrap .btn.white_black:hover,
.btn_cmn.white_black:hover {
  text-decoration: none;
  color: #000;
  background: #FFF url(../img/btn_arrow_right.svg) no-repeat right 20px center;
}
.cmn_wrap .btn.white_blue,
.btn_cmn.white_blue {
  background: #009FE2 url(../img/btn_arrow_right_w.svg) no-repeat right 20px center;
  border: 1px solid #FFF;
  color: #FFF;
}
.cmn_wrap .btn.white_blue:hover,
.btn_cmn.white_blue:hover {
  text-decoration: none;
  color: #009FE2;
  background: #FFF url(../img/btn_arrow_right_bl.svg) no-repeat right 20px center;
}
.cmn_wrap .btn.disabled,
.btn_cmn.disabled {
  pointer-events: none;
  background: #707070;
  border: 1px solid #707070;
  color: #FFF;
  text-align: center;
}

.btn_add_parts {
  margin: 0 auto;
  display: block;
  width: 100%;
  max-width: 580px;
  height: 48px;
  color: #333333;
  text-align: center;
  line-height: 46px;
  font-size: 18px;
  font-weight: bold;
  background: #F7F7F7 url(../img/btn_add.svg) no-repeat right 30px center;
  background-size: 24px 24px;
  outline: none;
  border: none;
  transition: all 0.2s;
  border: 1px solid #E4E4E4;
  cursor: pointer;
  border-radius: 3px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  text-decoration: none;
}
.btn_add_parts:hover {
  opacity: 0.7;
  text-decoration: none;
}
@media screen and (max-width: 768px) {
  .btn_add_parts {
    background-position: right 10px center;
  }
}

.btn_excel,
.btn_pdf {
  display: block;
  width: 100%;
  height: 60px;
  background: #F7F7F8;
  border: 1px solid #E8E8E8;
  line-height: 58px;
  text-align: center;
  border-radius: 3px;
  font-weight: bold;
  color: #333;
  text-decoration: none;
}

.btn_excel {
  margin-bottom: 6px;
  background: #F7F7F8 url(../img/icon_excel.svg) no-repeat left 20px center;
  background-size: 24px 24px;
  padding-left: 20px;
}
@media screen and (max-width: 768px) {
  .btn_excel {
    margin-bottom: 15px;
  }
}
.btn_excel:hover {
  border: 1px solid #2E5835;
  background-color: #2E5835;
  background-image: url(../img/icon_excel_w.svg);
  color: #FFF;
}

.btn_pdf {
  margin-bottom: 6px;
  background: #F7F7F8 url(../img/icon_pdf.svg) no-repeat left 24px center;
  background-size: 21px 26px;
  padding-left: 20px;
}
.btn_pdf:hover {
  border: 1px solid #842A2A;
  background-color: #842A2A;
  background-image: url(../img/icon_pdf_w.svg);
  color: #FFF;
  text-decoration: none;
}

.btn_contact {
  width: 240px;
  display: block;
  text-decoration: none;
  text-align: center;
  margin: 0 auto;
  height: 50px;
  line-height: 46px;
  border: 2px solid #F8A129;
  font-size: 18px;
  font-weight: bold;
  color: #FFF;
  background: #F8A129;
}
.btn_contact:hover {
  text-decoration: none;
  background: #FFF;
  color: #F8A129;
}

.btn_search {
  cursor: pointer;
  transition: all 0.2s;
  width: 240px;
  display: block;
  text-decoration: none;
  text-align: center;
  margin: 0 auto;
  height: 50px;
  line-height: 46px;
  border: 2px solid #F8A129;
  font-size: 18px;
  font-weight: bold;
  color: #FFF;
  background: #F8A129;
}
.btn_search:hover {
  text-decoration: none;
  background: #FFF;
  color: #F8A129;
}

.btn_manual {
  cursor: pointer;
  transition: all 0.2s;
  width: 180px;
  display: block;
  text-decoration: none;
  text-align: center;
  margin: 0 0 0 auto;
  height: 32px;
  line-height: 28px;
  border: 2px solid #669;
  font-size: 16px;
  font-weight: bold;
  color: #FFF;
  background: #669;
}
.btn_manual:hover {
  text-decoration: none;
  background: #FFF;
  color: #669;
}

/* Foundation
------------------------------------------------------------------------------------------ */
/* ===============================
共通コンテンツ
================================== */
.hd01 {
  padding-top: 8px;
  position: relative;
  font-family: "Helvetica Neue", "Arial", sans-serif;
  font-weight: bold;
  font-size: 36px;
  margin-bottom: 90px;
}
@media screen and (max-width: 768px) {
  .hd01 {
    margin-bottom: 50px;
  }
}
.hd01:before {
  content: "";
  display: block;
  width: 5000px;
  height: 2px;
  position: absolute;
  top: 0;
  left: 0;
  border-top: 2px solid #707070;
}
.hd01.top, .hd01.small {
  font-size: 28px;
}
.hd01.small {
  margin-bottom: 80px;
}
@media screen and (max-width: 768px) {
  .hd01.small {
    margin-bottom: 30px;
  }
}
.hd01.sub {
  font-size: 28px;
  padding-top: 0;
  margin-bottom: 40px;
}
.hd01.sub:before {
  display: none;
}
@media screen and (max-width: 768px) {
  .hd01.sub {
    margin-bottom: 20px;
  }
}
.hd01 small {
  margin-top: -8px;
  display: block;
  font-size: 16px;
  letter-spacing: 0.05em;
}
.hd01 small.ss {
  font-size: 10px;
}

.hd02 {
  font-size: 26px;
  font-weight: bold;
  margin-bottom: 30px;
  line-height: 1.8;
  position: relative;
}
@media screen and (max-width: 768px) {
  .hd02 {
    font-size: 22px;
  }
}

.hd03 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.lbl {
  position: relative;
  display: inline-block;
  margin-top: -5px;
  height: 24px;
  padding: 0 10px;
  line-height: 24px;
  color: #FFF;
  background: #FF5252;
  margin-left: 10px;
  font-size: 14px;
  text-align: center;
  border-radius: 12px;
  font-weight: bold;
}
.lbl.green {
  background: #060;
}
.lbl.yellow {
  background: #Fc0;
  color: #000;
}

.img img {
  width: 100%;
}

.msg {
  padding: 15px;
  margin-bottom: 30px;
  line-height: 1.5;
  border: 3px solid #009FE2;
  color: #009FE2;
  position: relative;
}
.msg p {
  text-indent: -1.4em;
  padding-left: 1.4em;
}
.msg p:before {
  margin-right: 5px;
  font-family: "Font Awesome 6 Pro";
  content: "\f05a";
}
.msg.err {
  border: 3px solid #c00;
  color: #c00;
}
.msg.err p {
  text-indent: -1.4em;
  padding-left: 1.4em;
}
.msg.err p:before {
  margin-right: 5px;
  font-family: "Font Awesome 6 Pro";
  content: "\f071";
}
.msg.caution {
  border: 3px solid #D96D00;
  color: #D96D00;
}
.msg.caution p {
  text-indent: -1.4em;
  padding-left: 1.4em;
}
.msg.caution p:before {
  margin-right: 5px;
  font-family: "Font Awesome 6 Free";
  content: "\f071";
}
.msg .btn_msg_close {
  display: block;
  width: 24px;
  height: 24px;
  outline: none;
  border: none;
  background: #eee;
  position: absolute;
  right: 15px;
  top: 50%;
  margin-top: -12px;
  color: #999;
  border-radius: 12px;
  cursor: pointer;
}

.hissu {
  position: relative;
  top: -3px;
  display: inline-block;
  margin-top: -5px;
  width: 50px;
  height: 24px;
  line-height: 24px;
  color: #FFF;
  background: #FF5252;
  margin-left: 10px !important;
  font-size: 14px;
  text-align: center;
  border-radius: 12px;
}

.hide {
  display: none;
}

.cmn_wrap h1 {
  font-size: 26px;
  letter-spacing: 0.08em;
  line-height: 1.8;
  font-weight: bold;
}
.cmn_wrap h2 {
  font-size: 18px;
  letter-spacing: 0.04em;
  line-height: 1.8;
  font-weight: bold;
}
.cmn_wrap h2.event {
  margin-bottom: 30px;
}
.cmn_wrap h2.event:before {
  font-family: "Helvetica Neue", "Arial", sans-serif;
  font-size: 10px;
  display: block;
  content: "EVENT:";
}
.cmn_wrap h3 {
  font-weight: bold;
  font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 2.1;
}
.cmn_wrap h3.day {
  margin-bottom: 30px;
}
.cmn_wrap h3.day:before {
  font-family: "Helvetica Neue", "Arial", sans-serif;
  font-size: 10px;
  display: block;
  content: "DAY:";
}
.cmn_wrap h4 {
  font-family: "Helvetica Neue", "Arial", sans-serif;
  font-weight: bold;
  font-size: 10px;
  line-height: 1.6;
}
.cmn_wrap p {
  font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 2.1;
  margin-bottom: 2em;
}
.cmn_wrap p.small {
  font-size: 10px;
  line-height: 1.8;
  margin-bottom: 1em;
  text-align: center;
}
.cmn_wrap p:last-child {
  margin-bottom: 0;
}
.cmn_wrap img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}
.cmn_wrap ul, .cmn_wrap ol {
  padding-left: 1.5em;
  font-size: 13px;
}
.cmn_wrap ul > li, .cmn_wrap ol > li {
  line-height: 1.6;
  margin-bottom: 7px;
}
.cmn_wrap ul.recommend, .cmn_wrap ol.recommend {
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
.cmn_wrap ul.recommend > li, .cmn_wrap ol.recommend > li {
  width: calc((100% - 30px) / 3);
  background: #222222;
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  text-align: center;
  margin: 0 15px 15px 0;
  padding: 10px;
  font-size: 13px;
  font-weight: bold;
  line-height: 2.1;
}
.cmn_wrap ul.recommend > li:nth-child(3n), .cmn_wrap ol.recommend > li:nth-child(3n) {
  margin-right: 0;
}
@media screen and (max-width: 768px) {
  .cmn_wrap ul.recommend > li, .cmn_wrap ol.recommend > li {
    line-height: 1.6;
    width: calc((100% - 15px) / 2);
  }
  .cmn_wrap ul.recommend > li:nth-child(3n), .cmn_wrap ol.recommend > li:nth-child(3n) {
    margin-right: 15px;
  }
  .cmn_wrap ul.recommend > li:nth-child(2n), .cmn_wrap ol.recommend > li:nth-child(2n) {
    margin-right: 0;
  }
}
.cmn_wrap table {
  display: grid;
  /* 列数に合わせて調整（例：3列で均等なら repeat(3, 1fr)） */
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  /* セル間のみに15pxの隙間（上下は0） */
  -moz-column-gap: 15px;
       column-gap: 15px;
  row-gap: 0;
  /* trなどをレイアウト計算から除外 */
}
.cmn_wrap table thead, .cmn_wrap table tbody, .cmn_wrap table tr {
  display: contents;
}
.cmn_wrap table {
  /* 共通セルスタイル */
}
.cmn_wrap table th, .cmn_wrap table td {
  font-size: 13px;
  line-height: 20px;
  padding: 15px 10px;
  border-bottom: 1px solid #707070;
  box-sizing: border-box;
}
.cmn_wrap table {
  /* 最初の行のセルに上線を引く */
  /* tr:first-childが使えないため、最初のn個の要素に適用します */
}
.cmn_wrap table th {
  border-top: 1px solid #707070;
  background: #E2E3E5;
}
.cmn_wrap table tbody tr td {
  text-align: center;
}
.cmn_wrap a.gmaps {
  line-height: 20px;
  padding-left: 14px;
  background: url(../img/icon_link_gmap.svg) no-repeat left center;
  text-decoration: none;
  margin-right: 15px;
}
.cmn_wrap a.gmaps:hover {
  border-bottom: 1px solid #707070;
}
.cmn_wrap a.youtube {
  line-height: 20px;
  padding-left: 20px;
  background: url(../img/icon_link_youtube.svg) no-repeat left center;
  text-decoration: none;
  margin-right: 15px;
}
.cmn_wrap a.youtube:hover {
  border-bottom: 1px solid #707070;
}
.cmn_wrap dl:not([class]) > div {
  font-size: 13px;
  line-height: 1.6;
  border-bottom: 1px solid #707070;
  display: flex;
  flex-wrap: wrap;
  padding: 15px 0;
}
.cmn_wrap dl:not([class]) > div:first-child {
  border-top: 1px solid hsl(0, 0%, 44%);
}
.cmn_wrap dl:not([class]) > div dt {
  width: 80px;
}
.cmn_wrap dl:not([class]) > div dd {
  flex: 1;
}
.cmn_wrap dl:not([class]) > div dd p {
  line-height: 1.6;
  margin-bottom: 5px;
}
.cmn_wrap dl:not([class]) > div dd p:last-child {
  margin-bottom: 0;
}
.cmn_wrap dl.faq > div {
  font-size: 13px;
  line-height: 20px;
  border-bottom: 1px solid #707070;
}
.cmn_wrap dl.faq > div:first-child {
  border-top: 1px solid #707070;
}
.cmn_wrap dl.faq > div {
  display: grid;
  grid-template-rows: auto 0fr;
  transition: grid-template-rows 0.3s ease-out;
}
.cmn_wrap dl.faq > div dt {
  cursor: pointer;
  position: relative;
  padding: 15px 40px 15px 2em;
  grid-row: 1;
}
.cmn_wrap dl.faq > div dt:before {
  position: absolute;
  left: 0;
  top: 15px;
  line-height: 20px;
  content: "Q.";
}
.cmn_wrap dl.faq > div dt:after {
  position: absolute;
  right: 0;
  top: 15px;
  line-height: 20px;
  font-size: 10px;
  content: "( ▼ )";
  transition: transform 0.3s;
}
.cmn_wrap dl.faq > div dd {
  grid-row: 2;
  overflow: hidden;
  position: relative;
  padding: 0 40px 0 2em;
  transition: padding 0.3s;
}
.cmn_wrap dl.faq > div dd:before {
  position: absolute;
  left: 0;
  top: 15px;
  line-height: 20px;
  content: "A.";
  opacity: 0;
  transition: opacity 0.2s;
}
.cmn_wrap dl.faq > div.open {
  grid-template-rows: auto 1fr;
}
.cmn_wrap dl.faq > div.open dt:after {
  transform: rotate(180deg);
}
.cmn_wrap dl.faq > div.open dd {
  padding: 15px 40px 15px 2em;
}
.cmn_wrap dl.faq > div.open dd:before {
  opacity: 1;
}
.cmn_wrap .cols {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.cmn_wrap .cols > .col {
  width: calc((100% - 40px) / 2);
  margin: 0 40px 40px 0;
}
.cmn_wrap .cols > .col:nth-child(2n) {
  margin-right: 0;
}
.cmn_wrap .cols > .col:last-child {
  margin-right: 0;
}
.cmn_wrap .cols > .col:nth-last-child(-n+2) {
  margin-bottom: 0;
}
@media screen and (max-width: 768px) {
  .cmn_wrap .cols > .col {
    width: 100%;
    margin: 0 0 30px 0;
  }
  .cmn_wrap .cols > .col:nth-last-child(-n+2) {
    margin-bottom: 30px;
  }
  .cmn_wrap .cols > .col:last-child {
    margin-bottom: 0;
  }
}
.cmn_wrap .center {
  display: flex;
  justify-content: center;
}

/* Foundation
------------------------------------------------------------------------------------------ */
/* ===============================
フォームパーツ
================================== */
input[type=text], input[type=password], input[type=number], input[type=email], input[type=tel] {
  outline: none;
  border: 1px solid #707070;
  height: 44px;
  padding: 0 10px;
  font-size: 13px;
  width: 100%;
}
input[type=text]::-moz-placeholder, input[type=password]::-moz-placeholder, input[type=number]::-moz-placeholder, input[type=email]::-moz-placeholder, input[type=tel]::-moz-placeholder {
  color: #E2E3E5;
}
input[type=text]::placeholder, input[type=password]::placeholder, input[type=number]::placeholder, input[type=email]::placeholder, input[type=tel]::placeholder {
  color: #E2E3E5;
}
@media screen and (max-width: 768px) {
  input[type=text], input[type=password], input[type=number], input[type=email], input[type=tel] {
    font-size: 16px;
  }
}
input.num {
  text-align: right;
}
input.short {
  max-width: 340px;
}

textarea {
  width: 100%;
  outline: none;
  border: 1px solid #707070;
  font-size: 13px;
  line-height: 20px;
  padding: 9px 10px;
}
textarea::-moz-placeholder {
  color: #E2E3E5;
}
textarea::placeholder {
  color: #E2E3E5;
}
@media screen and (max-width: 768px) {
  textarea {
    font-size: 16px;
  }
}

/* --- 共通設定 --- */
/* ラベル全体：カーソルを指にして、配置を整える */
label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin-right: 15px; /* 隣との隙間 */
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none; /* ダブルクリックでテキスト選択されないように */
}

/* 元のinput（デフォルトのボタン）は非表示にする */
label input {
  display: none;
}

/* --- ラジオボタンの装飾 (label.radio) --- */
/* 外枠の円 */
.radio_area .wpcf7-list-item {
  margin-left: 0 !important;
}
.radio_area label span.wpcf7-list-item-label {
  position: relative;
  padding-left: 25px; /* アイコン分のスペース */
  font-size: 13px;
}
.radio_area label span.wpcf7-list-item-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: 1px solid #707070;
  border-radius: 50%; /* 丸くする */
  background: #fff;
  transition: all 0.2s;
}
.radio_area label span.wpcf7-list-item-label::after {
  content: "";
  position: absolute;
  left: 4px; /* 中央配置の調整 */
  top: 50%;
  transform: translateY(-50%) scale(0); /* 最初はサイズ0で隠す */
  width: 10px;
  height: 10px;
  background: #009FE2; /* 選択時の色 */
  border-radius: 50%;
  transition: all 0.2s;
}
.radio_area {
  /* チェックされた時の挙動 */
}
.radio_area label input:checked + span::before {
  border-color: #009FE2;
}
.radio_area label input:checked + span::after {
  transform: translateY(-50%) scale(1); /* サイズを戻して表示 */
}

.hidden-fields-container {
  display: none;
}

/* --- チェックボックスの装飾 (label.checkbox) --- */
/* 外枠の四角 */
.checkbox_area .wpcf7-list-item {
  margin-left: 0 !important;
}
.checkbox_area label span.wpcf7-list-item-label {
  position: relative;
  padding-left: 25px;
  font-size: 13px;
}
.checkbox_area label span.wpcf7-list-item-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: 1px solid #707070;
  background: #fff;
  transition: all 0.2s;
}
.checkbox_area label span.wpcf7-list-item-label::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-60%) rotate(45deg); /* 回転させてレ点にする */
  width: 4px;
  height: 8px;
  border-bottom: 2px solid #fff; /* 白い線 */
  border-right: 2px solid #fff;
  opacity: 0; /* 最初は透明 */
  transition: all 0.2s;
}
.checkbox_area {
  /* チェックされた時の挙動 */
}
.checkbox_area label input:checked + span::before {
  background: #009FE2; /* 背景を青く */
  border-color: #009FE2;
}
.checkbox_area label input:checked + span::after {
  opacity: 1; /* 表示する */
}

.select {
  position: relative;
}
.select:before {
  position: absolute;
  z-index: 1;
  content: "";
  top: 50%;
  right: 10px;
  background: url(../img/arrow_select.svg) no-repeat center center;
  background-size: contain;
  display: block;
  width: 10px;
  height: 18px;
  margin-top: -9px;
  pointer-events: none;
}
.select select {
  width: 100%;
  cursor: pointer;
  outline: none;
  padding: 0 10px;
  font-size: 13px;
  text-overflow: "";
  vertical-align: middle;
  background: #FFF;
  color: #000;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  height: 44px;
  border: 1px solid #707070;
}
.select select::ms-expand {
  display: none;
}
.select select:-moz-forcusring {
  color: transparent;
  text-shadow: 0 0 0;
}

.attachment label {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Noto Sans JP", sans-serif;
  display: inline-block;
  padding: 5px 10px;
  background: #ddd;
  border-radius: 5px;
  color: #333;
  box-shadow: 0 3px #bbb;
  max-width: 200px;
  line-height: 22px;
  text-align: center;
  transition: none;
  outline: none;
  border: none;
  font-size: 16px;
  position: relative;
  cursor: pointer;
}
.attachment label:hover {
  text-decoration: none;
  box-shadow: 0 1px #bbb;
  transform: translateY(2px);
}
.attachment label i {
  margin-right: 8px;
}
.attachment label input {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 500px) {
  .attachment label {
    margin-bottom: 10px;
  }
}
.attachment .filename {
  margin-left: 10px;
  font-size: 14px;
}
@media screen and (max-width: 500px) {
  .attachment .filename {
    display: block;
    margin-left: 0;
  }
}

.w80 {
  width: 80px !important;
}

.w180 {
  width: 180px !important;
}

.w180-140 {
  width: 180px !important;
}
@media screen and (max-width: 500px) {
  .w180-140 {
    width: 140px !important;
  }
}

form dl dd.err input[type=text], form dl dd.err input[type=password], form dl dd.err input[type=number], form dl dd.err input[type=email], form dl dd.err input[type=tel],
.box dl dd.err input[type=text],
.box dl dd.err input[type=password],
.box dl dd.err input[type=number],
.box dl dd.err input[type=email],
.box dl dd.err input[type=tel],
.box_login dl dd.err input[type=text],
.box_login dl dd.err input[type=password],
.box_login dl dd.err input[type=number],
.box_login dl dd.err input[type=email],
.box_login dl dd.err input[type=tel],
.box_input dl dd.err input[type=text],
.box_input dl dd.err input[type=password],
.box_input dl dd.err input[type=number],
.box_input dl dd.err input[type=email],
.box_input dl dd.err input[type=tel] {
  border: 1px solid #900;
}
form dl dd.err select,
form dl dd.err textarea,
.box dl dd.err select,
.box dl dd.err textarea,
.box_login dl dd.err select,
.box_login dl dd.err textarea,
.box_input dl dd.err select,
.box_input dl dd.err textarea {
  border: 1px solid #900;
}
form dl dd.err label.checkbox:before,
.box dl dd.err label.checkbox:before,
.box_login dl dd.err label.checkbox:before,
.box_input dl dd.err label.checkbox:before {
  border: 2px solid #900;
}
form dl dd.err .err_msg,
.box dl dd.err .err_msg,
.box_login dl dd.err .err_msg,
.box_input dl dd.err .err_msg {
  margin-top: 5px;
  color: #900;
}

.error {
  margin-top: 5px;
  margin-bottom: 0 !important;
  font-size: 14px;
  color: #c00;
  text-indent: -1em;
  padding-left: 1em;
}
.error:before {
  margin-right: 5px;
  font-family: "Font Awesome 6 Pro";
  content: "\f071";
}

/* Foundation
------------------------------------------------------------------------------------------ */
/* ===============================
ハンバーガーメニュー
================================== */
.hamburger {
  position: fixed;
  right: 20px;
  top: 20px;
  outline: none;
  border: none;
  height: 60px;
  width: 60px;
  z-index: 100;
  background: transparent;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  mix-blend-mode: difference;
  caret-color: transparent;
}
@media screen and (max-width: 1280px) {
  .hamburger {
    right: 10px;
  }
}
@media screen and (max-width: 768px) {
  .hamburger {
    right: 5px;
    top: 10px;
  }
}
.hamburger.behind {
  z-index: 10;
}
.hamburger span {
  background: #FFF;
  display: block;
  height: 1px;
  position: absolute;
  transition: transform 0.3s;
  top: 50%;
  left: 50%;
  width: 30px;
  margin-left: -15px;
}
.hamburger span:first-child {
  margin-top: -5px;
}
.hamburger span:last-child {
  margin-top: 5px;
}
.hamburger.active {
  position: fixed;
  mix-blend-mode: normal;
}
.hamburger.active span {
  background: #FFF;
}
.hamburger.active span:first-child {
  margin-top: -2px;
  margin-left: -15px;
  width: 30px;
  transform: rotate(-20deg);
}
.hamburger.active span:last-child {
  margin-top: -2px;
  margin-left: -15px;
  width: 30px;
  transform: rotate(20deg);
}

/* ===============================
ドロワーナビ
================================== */
#drawer {
  display: block;
  background: #009FE2;
  position: fixed;
  overflow-y: auto;
  right: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: 15;
  /* 【重要】ドロワー内のスクロール設定 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* iOSでの慣性スクロール */
  /* 【重要】スクロールが端に来た時、背景（body）にスクロールを伝えない */
  overscroll-behavior: contain;
  /* デフォルトは非表示（画面外など） */
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
}
#drawer.active {
  transform: translateX(0);
}

/* ===============================
PCドロワーナビ
================================== */
#drawer_in {
  width: 100%;
  height: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 20% 40px 20px;
  color: #FFF;
}
@media screen and (max-width: 768px) {
  #drawer_in {
    padding: 10% 0 20px;
    width: 300px;
  }
}
#drawer_in .drawer_flex {
  position: relative;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 10%;
}
@media screen and (max-width: 768px) {
  #drawer_in .drawer_flex {
    display: block;
    padding-bottom: 0;
  }
}
#drawer_in .drawer_flex .left {
  flex: 1;
}
@media screen and (max-width: 768px) {
  #drawer_in .drawer_flex .left {
    width: 300px;
    margin: 0 auto;
  }
}
#drawer_in .drawer_flex .right {
  width: 300px;
  padding-left: 20px;
}
@media screen and (max-width: 768px) {
  #drawer_in .drawer_flex .right {
    width: 300px;
    padding-left: 0;
    margin: 0 auto;
  }
}
#drawer_in .hd {
  font-family: "Helvetica Neue", "Arial", sans-serif;
  letter-spacing: 0.04em;
  font-weight: bold;
  font-size: 40px;
  margin-bottom: 40px;
}
#drawer_in .drawer_sns {
  padding-top: 15px;
}
@media screen and (max-width: 768px) {
  #drawer_in .drawer_sns {
    padding-top: 0;
  }
}
#drawer_in .drawer_navi {
  margin-bottom: 0;
}
#drawer_in .drawer_navi ul {
  height: 165px;
}
@media screen and (max-width: 900px) {
  #drawer_in .drawer_navi ul {
    height: 260px;
  }
}
#drawer_in .drawer_navi ul li {
  line-height: 36px;
}
@media screen and (max-width: 500px) {
  #drawer_in .drawer_navi ul li a {
    font-size: 17px;
  }
}
#drawer_in .ext_navi {
  position: absolute;
  bottom: -40px;
  left: 0;
}
@media screen and (max-width: 768px) {
  #drawer_in .ext_navi {
    position: static;
    bottom: inherit;
    margin-bottom: 30px;
  }
}
#drawer_in .ext_navi ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
#drawer_in .ext_navi ul li {
  margin-right: 20px;
}
#drawer_in .ext_navi ul li a {
  line-height: 40px;
  letter-spacing: 0.04em;
  font-weight: bold;
  color: #FFF;
  text-decoration: none;
  font-size: 10px;
  padding-right: 20px;
  background: url(../img/icon_ext.svg) no-repeat center right;
}
#drawer_in .ext_navi ul li a:hover {
  text-decoration: underline;
}
@media screen and (max-width: 768px) {
  #drawer_in .btn_cmn {
    max-width: 300px;
  }
}
#drawer_in .bottom {
  height: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}
@media screen and (max-width: 768px) {
  #drawer_in .bottom {
    display: block;
  }
}
#drawer_in .bottom .privacy_link {
  display: inline-block;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.04em;
  color: #FFF;
}

/* ======================================= */
/*  オーバーレイ部分
/* ======================================= */
#overlay {
  z-index: -1;
  opacity: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  position: fixed;
  transition: opacity 0.4s;
  background: rgba(26, 26, 26, 0.74);
}
#overlay.active {
  z-index: 10;
  opacity: 0.65;
}

/* Foundation
------------------------------------------------------------------------------------------ */
/* モーダル全体のラッパー */
.modal-line-wrapper {
  display: none; /* 初期状態は非表示 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
}

/* 透過グレーのオーバーレイ */
.modal-line-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(34, 34, 34, 0.7); /* ダークグレー透過 */
  cursor: pointer;
}

/* モーダルコンテンツ（青い箱） */
.modal-line-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 40px);
  max-width: 1000px;
  height: 100%;
  min-height: 400px;
  max-height: 540px;
  background: #009FE2;
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  box-sizing: border-box;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 768px) {
  .modal-line-content {
    min-height: 340px;
    padding: 40px 20px;
  }
}

.modal-line-inner {
  text-align: center;
  width: 100%;
}

.modal-line-sub {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0.15em;
  margin-bottom: 5px;
}

.modal-line-title {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 28px;
  font-weight: bold;
  letter-spacing: 0.05em;
  margin-bottom: 32px;
}

/* QRコードエリア (160x160px) */
.modal-line-qr {
  width: 160px;
  height: 160px;
  background: #FFF;
  margin: 0 auto;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.modal-line-qr img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

/* 閉じるボタン（右上の×） */
.modal-line-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 100;
}
.modal-line-close::before, .modal-line-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 2px;
  background: #FFF;
}
.modal-line-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.modal-line-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* モーダル表示中の背景スクロール固定 */
body.modal-open {
  overflow: hidden !important;
}

/* Foundation
------------------------------------------------------------------------------------------ */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
.breadcrumb li {
  font-size: 10px;
  line-height: 20px;
}
.breadcrumb li:after {
  content: "＞";
  margin: 0 5px;
}
.breadcrumb li:last-child:after {
  display: none;
}
.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 40px;
}
.pagination li {
  margin-right: 10px;
}
.pagination li:last-child {
  margin-right: 0;
}
.pagination li a {
  font-weight: bold;
  display: block;
  width: 32px;
  height: 32px;
  line-height: 30px;
  text-align: center;
  border: 1px solid #555;
  text-decoration: none;
  background: #FFF;
  color: #555;
  border-radius: 3px;
}
.pagination li a:hover {
  background-color: #333;
  color: #FFF;
}
.pagination li a.active {
  background: #555;
  color: #FFF;
  pointer-events: none;
}
.pagination li a.none {
  background: #eee;
  color: #ccc;
  border: 1px solid #ccc;
  pointer-events: none;
}

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

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

/* ベースのスタイル */
.title-animation {
  position: relative;
  display: inline-block; /* 文字幅に合わせる */
  padding: 10px 20px;
  overflow: hidden; /*枠外のアニメーションを隠す*/
  color: #333;
}

/* 上下の枠線（擬似要素） */
.title-animation::before,
.title-animation::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px; /* 線の太さ */
  background-color: #333;
  transform: scaleX(0); /* 最初は幅0 */
  animation: drawBorder 0.8s cubic-bezier(0.2, 1, 0.3, 1) forwards;
}

.title-animation::before {
  top: 0;
}

.title-animation::after {
  bottom: 0;
}

/* 文字のスタイル */
.title-animation .text {
  display: block;
  opacity: 0; /* 最初は透明 */
  animation: showText 0.8s ease-out 0.6s forwards; /* 0.6秒遅れて開始 */
}

/* アニメーション定義 */
@keyframes drawBorder {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}
@keyframes showText {
  0% {
    opacity: 0;
    transform: translateY(10px); /* 少し下から浮き上がる */
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Project
------------------------------------------------------------------------------------------ */
/* Foundation
------------------------------------------------------------------------------------------ */
.main_img {
  margin-bottom: 30px;
}
.main_img img {
  width: 100%;
}

.top_legend {
  margin-bottom: 60px;
}
.top_legend .legend {
  font-family: "Helvetica Neue", "Arial", sans-serif;
  font-weight: bold;
  font-size: clamp(20px, 6.5vw, 44px);
  line-height: 1.5;
  margin-bottom: 15px;
}
.top_legend p {
  font-weight: bold;
  font-size: 18px;
  font-size: clamp(14px, 3.5vw, 18px);
  letter-spacing: 0.1em;
  line-height: 1.6;
}

.top_service {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
  .top_service {
    display: block;
  }
}
.top_service dl {
  width: calc((100% - 50px) / 2);
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid #707070;
}
@media screen and (max-width: 768px) {
  .top_service dl {
    width: 100%;
  }
}
.top_service dl:first-child {
  margin-right: 50px;
}
@media screen and (max-width: 768px) {
  .top_service dl:first-child {
    margin: 0 0 40px;
  }
}
.top_service dl dt {
  max-width: 130px;
  width: 100%;
  padding: 20px 0;
}
@media screen and (max-width: 768px) {
  .top_service dl dt {
    max-width: 90px;
  }
}
.top_service dl dt .hd {
  line-height: 1.4;
}
.top_service dl dt .hd span {
  display: block;
  font-family: "Helvetica Neue", "Arial", sans-serif;
  font-size: 14px;
  letter-spacing: 0.08em;
  margin-bottom: 0;
}
.top_service dl dt .hd em {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 12px;
  letter-spacing: 0.01em;
}
.top_service dl div {
  flex: 1;
}
.top_service dl div dd {
  padding: 20px 0;
  border-bottom: 1px solid #707070;
}
@media screen and (max-width: 768px) {
  .top_service dl div dd:last-child {
    border-bottom: none;
  }
}
.top_service dl div dd .hd {
  line-height: 1.4;
  font-size: 15px;
  margin-bottom: 10px;
  letter-spacing: 0.1em;
}
.top_service dl div dd p {
  font-size: 13px;
  line-height: 2;
  letter-spacing: 0.05em;
}
.top_service dl div dd .btn_ext {
  display: block;
  width: 130px;
  height: 26px;
  line-height: 24px;
  border: 1px solid #707070;
  background: url(../img/icon_ext_b.svg) no-repeat right 10px center;
  text-decoration: none;
  font-size: 12px;
  padding-left: 15px;
  font-weight: bold;
  font-family: "Helvetica Neue", "Arial", sans-serif;
}
.top_service dl div dd .btn_ext:hover {
  background: #222 url(../img/icon_ext.svg) no-repeat right 10px center;
  color: #FFF;
}

.top_blue_club {
  position: relative;
  padding: 150px 0 60px 80px;
}
@media screen and (max-width: 768px) {
  .top_blue_club {
    padding: 40px 0 10px 20px;
  }
}
.top_blue_club:before {
  content: "";
  display: block;
  width: 5000px;
  height: 2px;
  position: absolute;
  top: 0;
  left: 0;
  border-top: 2px solid #707070;
}
.top_blue_club .hd {
  font-family: "Helvetica Neue", "Arial", sans-serif;
  font-size: 32px;
}
.top_blue_club .hd_sub {
  font-size: 13px;
  margin-bottom: 70px;
}
.top_blue_club .desc {
  position: relative;
}
.top_blue_club .desc p {
  letter-spacing: 0.04em;
  line-height: 2;
  font-size: 14px;
  font-weight: bold;
}
.top_blue_club .desc .more_link {
  position: absolute;
  right: 70px;
  bottom: 0;
}
.top_blue_club .desc .more_link:hover {
  bottom: -1px;
}
@media screen and (max-width: 768px) {
  .top_blue_club .desc .more_link {
    position: static;
    right: inherit;
    bottom: inherit;
  }
}

/* Foundation
------------------------------------------------------------------------------------------ */
.about_concept {
  margin-bottom: 140px;
}
@media screen and (max-width: 768px) {
  .about_concept {
    margin-bottom: 50px;
  }
}
.about_concept .hd01 {
  margin-bottom: clamp(30px, 8vw, 160px);
}
.about_concept .title {
  font-weight: bold;
  font-size: clamp(18px, 4.5vw, 32px);
  letter-spacing: 0.08em;
  margin-bottom: clamp(30px, 8vw, 130px);
}
.about_concept .desc {
  width: 100%;
  max-width: 640px;
  margin: 0 0 50px auto;
}
.about_concept .desc p {
  font-size: clamp(12px, 3vw, 18px);
  line-height: 2;
}

.about_method {
  margin-bottom: 100px;
}
.about_method .hd_desc {
  font-size: clamp(20px, 4.5vw, 26px);
  margin-bottom: clamp(30px, 10vw, 120px);
}
.about_method .method_flex {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.about_method .method_flex .left {
  flex: 1;
  margin-right: 20px;
}
@media screen and (max-width: 850px) {
  .about_method .method_flex .left {
    width: 180px;
  }
}
@media screen and (max-width: 768px) {
  .about_method .method_flex .left {
    width: 80px;
  }
}
.about_method .method_flex .left .sticky {
  position: sticky;
  left: 0;
  top: 100px;
  z-index: 2;
  list-style: none;
}
.about_method .method_flex .left .sticky li {
  color: #E0E0E2;
  letter-spacing: 0.04em;
  font-weight: bold;
  font-family: "Helvetica Neue", "Arial", sans-serif;
  font-size: 18px;
  line-height: 30px;
  margin-bottom: 40px;
  transition: all 0.4s;
}
.about_method .method_flex .left .sticky li:last-child {
  margin-bottom: 0;
}
@media screen and (max-width: 768px) {
  .about_method .method_flex .left .sticky li {
    margin-bottom: 30px;
    font-size: 13px;
  }
}
.about_method .method_flex .left .sticky li span {
  cursor: pointer;
  caret-color: transparent;
}
.about_method .method_flex .left .sticky li.active {
  color: #000;
}
.about_method .method_flex .left .sticky li.active span {
  pointer-events: none;
  position: relative;
}
.about_method .method_flex .left .sticky li.active span::before {
  position: absolute;
  content: "";
  display: block;
  bottom: -3px;
  width: 100%;
  left: 0;
  height: 1px;
  background: #707070;
}
.about_method .method_flex .right {
  width: 100%;
  max-width: 600px;
}
@media screen and (max-width: 850px) {
  .about_method .method_flex .right {
    width: calc(100% - 200px);
  }
}
@media screen and (max-width: 768px) {
  .about_method .method_flex .right {
    width: calc(100% - 100px);
  }
}
.about_method .method_flex .right .method_item .hd {
  padding-top: 4px;
  position: relative;
  letter-spacing: 0.04em;
  font-family: "Helvetica Neue", "Arial", sans-serif;
  font-size: 18px;
  margin-bottom: 36px;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .about_method .method_flex .right .method_item .hd {
    margin-bottom: 20px;
    font-size: 13px;
  }
}
.about_method .method_flex .right .method_item .hd:before {
  content: "";
  display: block;
  width: 5000px;
  height: 1px;
  position: absolute;
  top: 0;
  left: 0;
  border-top: 1px solid #707070;
}
.about_method .method_flex .right .method_item .title {
  font-size: 26px;
  font-weight: bold;
  margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
  .about_method .method_flex .right .method_item .title {
    margin-bottom: 20px;
    font-size: 20px;
  }
}
.about_method .method_flex .right .method_item .concept {
  font-size: 20px;
  margin-bottom: 30px;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .about_method .method_flex .right .method_item .concept {
    margin-bottom: 20px;
    font-size: 16px;
  }
}
@media screen and (max-width: 500px) {
  .about_method .method_flex .right .method_item .concept br {
    display: none;
  }
}
.about_method .method_flex .right .method_item .desc {
  margin-bottom: 120px;
  font-size: 14px;
  line-height: 2;
}
@media screen and (max-width: 768px) {
  .about_method .method_flex .right .method_item .desc {
    margin-bottom: 50px;
  }
}

.circle-section {
  background: #222;
  padding: 6vw 20px;
  position: relative;
}
.circle-section:before {
  content: "";
  z-index: 0;
  position: absolute;
  display: block;
  width: 100vw;
  height: 100%;
  background: #222;
  left: calc((-100vw + 100%) / 2);
  top: 0;
}
.circle-section .hd {
  position: absolute;
  left: 0;
  top: 5vw;
  z-index: 1;
  color: #FFF;
  font-size: 18px;
  font-family: "Helvetica Neue", "Arial", sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.8;
}
@media screen and (max-width: 1000px) {
  .circle-section .hd {
    position: relative;
    left: inherit;
    top: inherit;
    margin-bottom: 10px;
  }
}

.circle-wrap {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
}

#circleCanvas {
  width: 100%;
  height: auto;
  display: block;
}

/* Foundation
------------------------------------------------------------------------------------------ */
.works_hd {
  margin-bottom: 80px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .works_hd {
    margin-bottom: 30px;
  }
}
.works_hd .category {
  font-size: 13px;
  letter-spacing: 0.04em;
}
.works_hd .hd {
  font-size: 26px;
  letter-spacing: 0.08em;
  line-height: 1.9;
  margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .works_hd .hd {
    margin-bottom: 20px;
    font-size: 22px;
  }
}
.works_hd .works_detail_flex {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
  .works_hd .works_detail_flex {
    display: block;
  }
}
.works_hd .works_detail_flex .desc01 {
  flex: 1;
  margin-right: 20px;
  font-size: 18px;
  letter-spacing: 0.04em;
  line-height: 1.9;
}
.works_hd .works_detail_flex .desc02 {
  width: 100%;
  max-width: 500px;
  font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 2.1;
}
@media screen and (max-width: 768px) {
  .works_hd .works_detail_flex .desc02 {
    max-width: 100%;
  }
}

.works_img {
  line-height: 0;
  margin-bottom: 50px;
}
@media screen and (max-width: 768px) {
  .works_img {
    margin-bottom: 30px;
  }
}
.works_img:last-child {
  margin-bottom: 0;
}
.works_img img {
  width: 100%;
}

#works_slide {
  /* --- 画像のスタイル --- */
}
#works_slide .splide__slide img {
  width: 100%;
  height: auto; /* 高さを自動調整（固定pxを削除） */
  aspect-ratio: 14/9; /* ★ここでアスペクト比を固定 */
  -o-object-fit: cover;
     object-fit: cover; /* 画像が変形しないようにトリミング */
  display: block;
  transition: all 0.2s;
}
#works_slide .splide__slide a {
  display: block;
  overflow: hidden;
}
#works_slide .splide__slide a:hover img {
  transform: scale(1.05);
}

/* Foundation
------------------------------------------------------------------------------------------ */
.event_hd {
  margin-bottom: 80px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .event_hd {
    margin-bottom: 30px;
  }
}
.event_hd .category {
  font-size: 13px;
  letter-spacing: 0.04em;
}
.event_hd .hd {
  font-size: 26px;
  letter-spacing: 0.08em;
  line-height: 1.9;
  margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .event_hd .hd {
    margin-bottom: 20px;
    font-size: 22px;
  }
}
.event_hd .date {
  font-size: 18px;
  margin-right: 300px;
  max-width: 620px;
}
@media screen and (max-width: 768px) {
  .event_hd .date {
    max-width: 100%;
    margin-right: 0;
    margin-bottom: 30px;
    font-size: 16px;
  }
}
.event_hd .date:before {
  font-family: "Helvetica Neue", "Arial", sans-serif;
  font-size: 10px;
  display: block;
  content: "DAY:";
}
.event_hd .btn_cmn {
  position: absolute;
  right: 0;
  bottom: 0;
  margin-bottom: 0;
}
@media screen and (max-width: 768px) {
  .event_hd .btn_cmn {
    position: static;
    margin: 0 auto;
  }
}

/* Foundation
------------------------------------------------------------------------------------------ */
.news_page {
  margin-bottom: 80px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .news_page {
    margin-bottom: 30px;
  }
}
.news_page .date {
  font-size: 13px;
  letter-spacing: 0.04em;
  margin-bottom: 20px;
}
.news_page .hd {
  font-size: 18px;
  letter-spacing: 0.04em;
  line-height: 1.9;
  margin-bottom: 20px;
}
.news_page .news_wrapper {
  margin-top: 100px;
  position: relative;
  padding-right: 420px;
}
@media screen and (max-width: 900px) {
  .news_page .news_wrapper {
    padding-right: 0;
    margin-top: 0;
  }
}
.news_page .news_wrapper .news_in {
  max-width: 600px;
}
@media screen and (max-width: 900px) {
  .news_page .news_wrapper .news_in {
    max-width: 100%;
  }
}
.news_page .news_wrapper .eyecatch {
  position: absolute;
  right: 0;
  top: 0;
  max-width: 380px;
  margin-bottom: 30px;
}
@media screen and (max-width: 900px) {
  .news_page .news_wrapper .eyecatch {
    position: static;
    max-width: 100%;
  }
}
.news_page .news_wrapper .eyecatch img {
  width: 100%;
}

/* Foundation
------------------------------------------------------------------------------------------ */
.members_hd {
  margin-bottom: 80px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .members_hd {
    margin-bottom: 30px;
  }
}
.members_hd .category {
  font-size: 13px;
  letter-spacing: 0.04em;
}
.members_hd .hd {
  font-size: 26px;
  letter-spacing: 0.08em;
  line-height: 1.9;
  margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .members_hd .hd {
    margin-bottom: 20px;
    font-size: 22px;
  }
}
.members_hd .date {
  font-size: 18px;
  margin-right: 300px;
  max-width: 620px;
}
@media screen and (max-width: 768px) {
  .members_hd .date {
    max-width: 100%;
    margin-right: 0;
    margin-bottom: 30px;
    font-size: 16px;
  }
}
.members_hd .date:before {
  font-family: "Helvetica Neue", "Arial", sans-serif;
  font-size: 10px;
  display: block;
  content: "DAY:";
}
.members_hd .btn_cmn {
  position: absolute;
  right: 0;
  bottom: 0;
  margin-bottom: 0;
}
@media screen and (max-width: 768px) {
  .members_hd .btn_cmn {
    position: static;
    margin: 0 auto;
  }
}

/* ===============================
MEMBERSリスト
================================== */
.member_list {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.member_list .member_item {
  display: block;
  width: calc((100% - 150px) / 4);
  margin-right: 50px;
  margin-bottom: 50px;
  will-change: transform;
  backface-visibility: hidden;
}
.member_list .member_item:nth-child(4n) {
  margin-right: 0;
}
.member_list .member_item:nth-last-child(-n+4) {
  margin-bottom: 0;
}
@media screen and (max-width: 768px) {
  .member_list .member_item {
    width: calc((100% - 5vw) / 2);
    margin-right: 5vw;
    margin-bottom: 5vw;
  }
  .member_list .member_item:nth-child(3n) {
    margin-right: 5vw;
  }
  .member_list .member_item:nth-child(2n) {
    margin-right: 0;
  }
  .member_list .member_item:nth-child(4) {
    margin-bottom: 5vw;
  }
  .member_list .member_item:nth-last-child(-n+4) {
    margin-bottom: 5vw;
  }
  .member_list .member_item:nth-last-child(-n+2) {
    margin-bottom: 0;
  }
}
.member_list .member_item {
  /*
      @media screen and (max-width: $w_sp) {
        width: 100%;
        margin-right: 0!important;
        &:nth-child(5) {
          margin-bottom: 30px;
        }
      }
  */
}
.member_list .member_item .img {
  margin-bottom: 20px;
  aspect-ratio: 119/144;
  overflow: hidden;
}
@media screen and (max-width: 500px) {
  .member_list .member_item .img {
    margin-bottom: 10px;
  }
}
.member_list .member_item .img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover; /* 多少のズレを吸収してトリミング */
  display: block;
  transition: transform 0.2s ease;
}
.member_list .member_item .name {
  font-size: 13px;
  margin-bottom: 5px;
  letter-spacing: 0.05em;
}
.member_list .member_item .pos {
  font-size: 10px;
  letter-spacing: 0.05em;
}
.member_list .member_item:hover {
  text-decoration: none;
}
.member_list .member_item:hover .img img {
  transform: scale(1.1);
}
.member_list .member_item:hover .title {
  text-decoration: underline;
}

.member_detail {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
  margin-bottom: 100px;
}
@media screen and (max-width: 680px) {
  .member_detail {
    display: block;
    margin-bottom: 60px;
  }
}
.member_detail .hd {
  min-width: 240px;
  max-width: 320px;
  margin-right: 50px;
  position: relative;
}
@media screen and (max-width: 680px) {
  .member_detail .hd {
    max-width: 100%;
    margin-right: 0;
    margin-bottom: 50px;
  }
}
.member_detail .hd .sticky {
  display: flex;
  flex-direction: column;
  position: sticky;
  left: 0;
  top: 100px;
}
.member_detail .hd .name {
  order: 1;
  font-size: 18px;
  margin-bottom: 15px;
  letter-spacing: 0.05em;
}
.member_detail .hd .division {
  order: 0;
  font-size: 13px;
  margin-bottom: 25px;
  letter-spacing: 0.05em;
}
.member_detail .hd .position {
  order: 2;
  font-size: 10px;
  letter-spacing: 0.05em;
  margin-bottom: 30px;
}
.member_detail .hd .memo {
  order: 4;
  font-size: 10px;
  letter-spacing: 0.05em;
}
.member_detail .hd .img {
  order: 3;
  max-width: 240px;
  margin-bottom: 40px;
}
@media screen and (max-width: 680px) {
  .member_detail .hd .img {
    margin: 0 auto 30px;
  }
}
.member_detail .profile {
  flex: 1;
  max-width: 600px;
}
.member_detail .profile_in {
  /* ▼▼▼ 追加: 省略表示時のスタイル ▼▼▼ */
  position: relative; /* グラデーション配置の基準 */
  transition: height 0.5s ease;
}
.member_detail .profile_in.is-truncated {
  max-height: 670px; /* ★ここで省略時の高さを指定 */
  overflow: hidden;
  /* 下部の白グラデーション */
}
.member_detail .profile_in.is-truncated::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgb(255, 255, 255));
  pointer-events: none;
}
.member_detail .profile_in {
  /* ▲▲▲ 追加ここまで ▲▲▲ */
}
.member_detail .profile .desc {
  margin-bottom: 50px;
}
.member_detail .profile .desc:last-child {
  margin-bottom: 0;
}
.member_detail .profile .desc .hd {
  line-height: 1.8;
  font-size: 18px;
  letter-spacing: 0.04em;
  margin-bottom: 30px;
}
.member_detail .profile .desc p {
  font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 2.2;
  margin-bottom: 2em;
}
.member_detail .profile .desc p:last-child {
  margin-bottom: 0;
}
.member_detail {
  /* ▼▼▼ 追加: VIEW MOREボタンのスタイル ▼▼▼ */
}
.member_detail .view_more_area {
  width: 100%;
  margin-top: 30px;
}
.member_detail .view_more_area .link_view_more {
  display: inline-block;
  text-decoration: none;
  color: #000; /* 文字色 */
  font-size: 12px;
  letter-spacing: 0.1em;
  font-weight: bold;
  cursor: pointer;
  transition: opacity 0.3s;
}
.member_detail .view_more_area .link_view_more:hover {
  text-decoration: underline;
}

.banner_history a {
  display: block;
  max-width: 531px;
  margin: 0 auto;
  overflow: hidden;
}
.banner_history a img {
  width: 100%;
  transition: all 0.2s;
}
.banner_history a:hover img {
  transform: scale(1.03);
}

#members_slide {
  /* --- 画像のスタイル --- */
}
#members_slide .splide__slide img {
  width: 100%;
  height: auto; /* 高さを自動調整（固定pxを削除） */
  aspect-ratio: 4/3; /* ★ここでアスペクト比を固定 */
  -o-object-fit: cover;
     object-fit: cover; /* 画像が変形しないようにトリミング */
  -o-object-position: center -10px;
     object-position: center -10px;
  display: block;
  transition: all 0.2s;
}
#members_slide .splide__slide a {
  display: block;
  overflow: hidden;
}
#members_slide .splide__slide a:hover img {
  transform: scale(1.1);
}

/* Foundation
------------------------------------------------------------------------------------------ */
.philosophy {
  padding: 50px 0 150px;
}
@media screen and (max-width: 768px) {
  .philosophy {
    padding: 20px 0 80px;
  }
}
.philosophy div {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 50px;
}
@media screen and (max-width: 768px) {
  .philosophy div {
    margin-bottom: 30px;
  }
}
.philosophy div:last-child {
  margin-bottom: 0;
}
.philosophy div dt {
  font-family: "Helvetica Neue", "Arial", sans-serif;
  font-size: clamp(20px, 5vw, 28px);
  width: 200px;
  line-height: 28px;
}
@media screen and (max-width: 500px) {
  .philosophy div dt {
    width: 110px;
    margin-right: 20px;
  }
}
.philosophy div dd {
  flex: 1;
  font-size: clamp(18px, 3.5vw, 26px);
  line-height: 28px;
}

.company_sub .profile {
  background: #222222;
  color: #FFF;
  position: relative;
  margin-bottom: 100px;
}
.company_sub .profile:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 150vw;
  margin-left: -50vw;
  height: 100%;
  background: #222222;
  z-index: 0;
}
.company_sub .profile_in {
  position: relative;
  z-index: 1;
  padding: 100px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .company_sub .profile_in {
    display: block;
    padding: 50px 0;
  }
}
.company_sub .profile_in .left {
  max-width: 320px;
  margin-right: 30px;
}
@media screen and (max-width: 768px) {
  .company_sub .profile_in .left {
    max-width: 100%;
    margin-right: 0;
    margin-bottom: 30px;
  }
}
.company_sub .profile_in .left .hd {
  font-size: 28px;
  letter-spacing: 0.04em;
  font-family: "Helvetica Neue", "Arial", sans-serif;
}
@media screen and (max-width: 768px) {
  .company_sub .profile_in .left .hd {
    font-size: 24px;
  }
}
.company_sub .profile_in .left .hd small {
  margin-top: 5px;
  display: block;
  font-size: 18px;
  letter-spacing: 0.04em;
}
@media screen and (max-width: 768px) {
  .company_sub .profile_in .left .hd small {
    font-size: 16px;
    margin-top: 3px;
  }
}
.company_sub .profile_in .right {
  flex: 1;
  max-width: 580px;
}
@media screen and (max-width: 768px) {
  .company_sub .profile_in .right {
    max-width: 100%;
  }
}
.company_sub .profile_in .right dl div {
  padding: 15px 0;
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #707070;
}
.company_sub .profile_in .right dl div:first-child {
  border-top: 1px solid #707070;
}
.company_sub .profile_in .right dl div dt {
  width: 100px;
  margin-right: 20px;
  font-size: 18px;
  letter-spacing: 0.04em;
}
@media screen and (max-width: 768px) {
  .company_sub .profile_in .right dl div dt {
    font-size: 16px;
  }
}
.company_sub .profile_in .right dl div dd {
  flex: 1;
  font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 2.1;
}
.company_sub .profile_in .right dl div dd a {
  color: #FFF;
}

.group {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 50px;
}
.group li {
  padding: 0 15px;
  margin-bottom: 30px;
}
.group li a img {
  transition: all 0.2s;
}
.group li a:hover img {
  transform: scale(1.1);
}

/* Foundation
------------------------------------------------------------------------------------------ */
.blueclub {
  margin-bottom: 80px;
}
@media screen and (max-width: 768px) {
  .blueclub {
    margin-bottom: 40px;
  }
}
.blueclub .copy {
  font-size: clamp(20px, 6vw, 32px);
  margin-bottom: 100px;
}
@media screen and (max-width: 768px) {
  .blueclub .copy {
    margin-bottom: 40px;
  }
}
.blueclub .message {
  max-width: 700px;
  margin: 0 0 0 auto;
}
.blueclub .message .desc {
  margin-bottom: 100px;
}
@media screen and (max-width: 768px) {
  .blueclub .message .desc {
    margin-bottom: 60px;
  }
}
.blueclub .message .desc p {
  font-size: 18px;
  line-height: 1.8;
  letter-spacing: 0.04em;
  font-weight: bold;
  margin-bottom: 2em;
}
@media screen and (max-width: 768px) {
  .blueclub .message .desc p {
    font-size: 14px;
  }
}
.blueclub .message .desc p:last-child {
  margin-bottom: 0;
}

/* ▼▼▼ 追加: スクロール距離を稼ぐためのトラック ▼▼▼ */
.benefits_track {
  width: 100%;
  height: 400vh; /* 4画面分のスクロール距離を確保（この長さがアニメーション時間になります） */
  position: relative;
}

.benefits {
  /*
  background: url(../img/benefits_bg.jpg) no-repeat center center;
  background-size: cover;
  */
  position: relative;
  color: #FFF;
  height: 100dvh;
  width: 100%;
  text-align: center;
  /* Stickyの設定（ここで画面に張り付きます） */
  position: sticky;
  top: 0;
  overflow: hidden;
}
.benefits .benefits_bg_area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* 一番後ろに配置（黒いオーバーレイ ::before の後ろ） */
}
.benefits .benefits_bg_area .bg_item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0; /* 初期状態は透明 */
  transition: opacity 0.8s ease; /* 0.8秒かけてふわっと切り替わる */
}
.benefits .benefits_bg_area .bg_item.is-active {
  opacity: 1; /* アクティブなものだけ表示 */
}
.benefits:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0; /* 位置指定を追加 */
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 0;
}
.benefits_in {
  position: relative;
  z-index: 1;
  padding: 50px 30px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.benefits_in > .hd {
  font-size: clamp(20px, 6vw, 36px);
  margin-bottom: 70px;
}
.benefits_in .scroll {
  max-width: 460px;
  margin: 0 auto;
  /* ▼▼▼ 変更: 子要素を重ねるための基準位置と、高さの確保 ▼▼▼ */
  position: relative;
  width: 100%;
  height: 300px; /* ★重要: コンテンツが収まる高さを指定してください（PC/SPで調整推奨） */
}
.benefits_in .scroll_item {
  /* ▼▼▼ 変更: 同じ場所に重ねる設定 ▼▼▼ */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* 非表示状態のデザイン */
  opacity: 0;
  transform: translateY(20px) scale(0.95); /* 少し下から、少し小さく */
  transition: all 0.5s ease;
  pointer-events: none; /* 見えていないときはクリック不可にする */
  /* アクティブ状態（表示）のデザイン */
}
.benefits_in .scroll_item.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  z-index: 1;
}
.benefits_in .scroll_item > .hd {
  font-size: clamp(18px, 5vw, 26px);
  margin-bottom: 20px;
}
.benefits_in .scroll_item > .hd small:before {
  content: "( ";
}
.benefits_in .scroll_item > .hd small:after {
  content: " )";
}
.benefits_in .scroll_item > .hd small {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
}
.benefits_in .scroll_item p {
  font-size: 14px;
  letter-spacing: 0.04em;
  line-height: 2.1;
  font-weight: bold;
}
@media screen and (max-width: 500px) {
  .benefits_in .scroll_item p {
    text-align: left;
  }
}
.benefits_in {
  /* ▼▼▼ 追加: インジケーターのスタイル ▼▼▼ */
}
.benefits_in .indicator_area {
  margin-top: 40px; /* テキストとの距離 */
  display: flex;
  justify-content: center;
  gap: 10px; /* 矩形同士の間隔 */
}
.benefits_in .indicator_area .indicator_item {
  display: block;
  cursor: pointer;
  width: 40px; /* 指定サイズ */
  height: 8px; /* 指定サイズ */
  background: rgba(255, 255, 255, 0.3); /* 通常時は薄く */
  transition: background 0.3s ease;
  caret-color: transparent;
  /* アクティブ時（強調表示） */
}
.benefits_in .indicator_area .indicator_item.is-active {
  background: #FFF; /* 真っ白にして強調 */
}

/* Foundation
------------------------------------------------------------------------------------------ */
.line_sub {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 100px;
}
@media screen and (max-width: 768px) {
  .line_sub {
    display: block;
    margin-bottom: 60px;
  }
}
.line_sub .copy {
  width: 45%;
  margin-right: 30px;
  font-size: clamp(20px, 4vw, 26px);
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .line_sub .copy {
    width: 100%;
  }
}
.line_sub .desc {
  flex: 1;
  font-size: 18px;
  letter-spacing: 0.04em;
  line-height: 1.9;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .line_sub .desc {
    font-size: 16px;
  }
}

/* Foundation
------------------------------------------------------------------------------------------ */
.contact_sub {
  margin-bottom: 140px;
}
@media screen and (max-width: 768px) {
  .contact_sub {
    margin-bottom: 60px;
  }
}
.contact_sub .hd {
  font-size: 26px;
  letter-spacing: 0.05em;
  margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
  .contact_sub .hd {
    margin-bottom: 10px;
  }
}
.contact_sub p {
  font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 2.1;
}

.form_wrap {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
  .form_wrap {
    display: block;
  }
}
.form_wrap .hd {
  flex: 1;
  min-width: 220px;
}
@media screen and (max-width: 768px) {
  .form_wrap .hd {
    margin-bottom: 40px;
  }
}
.form_wrap .hd .tel {
  font-size: 26px;
  font-family: "Helvetica Neue", "Arial", sans-serif;
  font-weight: 600;
  margin-bottom: 0;
}
.form_wrap .hd p {
  font-size: 12px;
}
.form_wrap .form_contents {
  width: calc(100% - 220px);
  max-width: 680px;
}
@media screen and (max-width: 768px) {
  .form_wrap .form_contents {
    width: 100%;
  }
}
.form_wrap .form_contents div {
  margin-bottom: 50px;
}
@media screen and (max-width: 768px) {
  .form_wrap .form_contents div {
    margin-bottom: 30px;
  }
}
.form_wrap .form_contents div:last-child {
  margin-bottom: 0;
}
.form_wrap .form_contents div dt {
  font-size: 18px;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.form_wrap .form_contents div dt.require::after {
  content: "*";
  color: #FA0000;
}
.form_wrap .form_contents div dd.checkbox_area {
  display: flex;
  flex-wrap: wrap;
  max-width: 400px;
}
@media screen and (max-width: 500px) {
  .form_wrap .form_contents div dd.checkbox_area {
    width: 100%;
  }
}
.form_wrap .form_contents div dd.checkbox_area .wpcf7-list-item {
  display: inline-block;
  width: 180px;
  margin-right: 10px;
  margin-bottom: 10px;
}
@media screen and (max-width: 500px) {
  .form_wrap .form_contents div dd.checkbox_area .wpcf7-list-item {
    width: calc((100% - 30px) / 2);
  }
}
.form_wrap .form_contents div dd.checkbox_area .wpcf7-list-item:nth-child(2n) {
  margin-right: 0;
}
.form_wrap .form_contents div dd textarea {
  height: 240px;
}
.form_wrap .form_contents div dd .select {
  max-width: 340px;
}
.form_wrap .form_contents button,
.form_wrap .form_contents .wpcf7-submit {
  outline: none;
  border: 1px solid #707070;
  width: 100%;
  height: 80px;
  font-size: 18px;
  letter-spacing: 0.04em;
  font-weight: bold;
  transition: all 0.2s;
  background: #FFF;
  cursor: pointer;
  margin-bottom: 20px;
  color: #000;
}
@media screen and (max-width: 768px) {
  .form_wrap .form_contents button,
  .form_wrap .form_contents .wpcf7-submit {
    margin-bottom: 10px;
  }
}
.form_wrap .form_contents button:hover,
.form_wrap .form_contents .wpcf7-submit:hover {
  background: #222;
  color: #FFF;
}
.form_wrap .form_contents .notice {
  font-size: 12px;
}
.form_wrap .form_contents .notice a {
  color: #009FE2;
}

/* Foundation
------------------------------------------------------------------------------------------ */
.privacy_sub {
  margin-bottom: 100px;
  max-width: 640px;
  font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 2.1;
}
@media screen and (max-width: 768px) {
  .privacy_sub {
    margin-bottom: 60px;
  }
}

.privacy_contents {
  display: flex;
  margin-bottom: 100px;
}
@media screen and (max-width: 768px) {
  .privacy_contents {
    display: block;
    margin-bottom: 60px;
  }
}
.privacy_contents > .hd {
  width: 360px;
  font-size: 18px;
  letter-spacing: 0.04em;
  margin-bottom: 20px;
}
.privacy_contents .desc {
  flex: 1;
}
.privacy_contents .desc > .hd {
  font-size: 18px;
  letter-spacing: 0.04em;
  margin-bottom: 5px;
}
@media screen and (max-width: 768px) {
  .privacy_contents .desc > .hd {
    font-size: 16px;
  }
}
.privacy_contents .desc .hd_s {
  font-size: 13px;
  letter-spacing: 0.04em;
}
.privacy_contents .desc p {
  font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 2.1;
}
.privacy_contents .desc ul, .privacy_contents .desc ol {
  padding-left: 1em;
}
.privacy_contents .desc ul li, .privacy_contents .desc ol li {
  font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 2.1;
}
.privacy_contents .desc ol.alpha {
  list-style-type: upper-alpha; /* 大文字のA, B, C... */
}
.privacy_contents .desc .sub {
  padding-left: 30px;
  margin-bottom: 50px;
}/*# sourceMappingURL=map/style.css.map */