@charset "UTF-8";
/*
====>> 動きや表示の状態を表すデフォルトスタイリング <<====

・このファイルはベースのスタイルになるので、原則オーバーライド(上書き)はしない事
・サイトのパーツ等のスタイルを格納するファイル

*/
/**
 * Adobe XDのAV値（トラッキング値）をletter-spacingプロパティに変換する
 * @param {Number} $av-value - XDのAV値を単位なしで指定
 */
.mb-20 {
  display: block;
  margin-bottom: 15px;
}

.pcnone {
  display: none;
}
@media screen and (max-width: 576px) {
  .pcnone {
    display: block;
  }
}

.spnone {
  display: block;
}
@media screen and (max-width: 576px) {
  .spnone {
    display: none;
  }
}

.flex {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
@media screen and (max-width: 576px) {
  .flex {
    flex-direction: column;
    align-items: center;
    line-height: 0.4;
  }
}

.flex-aligns {
  display: flex;
  align-items: flex-end;
}

@media screen and (max-width: 576px) {
  .is-spfont {
    font-size: 12px !important;
  }
}

/*		線
-----------------------------------------------------*/
.is-border_wrap {
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid currentColor;
}

.is-border {
  box-sizing: border-box;
  border: 1px solid currentColor;
}

/*		リバース
-----------------------------------------------------*/
.is-flipped_row {
  flex-flow: row-reverse wrap;
}

.is-flipped_column {
  flex-flow: column-reverse wrap;
}

/*		リストスタイル
-----------------------------------------------------*/
.c-list.is-dotted {
  padding: 20px;
  list-style-type: disc;
}
.c-list.is-dotted li {
  padding: 20px 20px 20px 0;
}

.c-list.is-number {
  padding: 20px;
  list-style: decimal;
}
.c-list.is-number li {
  padding: 20px 20px 20px 0;
}

/*		角丸
-----------------------------------------------------*/
.is-round {
  border-radius: 16px;
}

.is-edge {
  border-radius: 0;
}

/*		ディスプレイ
-----------------------------------------------------*/
.is-flex {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
}

@media screen and (max-width: 576px) {
  .is-flex {
    flex-direction: column;
  }
}
.is-hide {
  display: none;
}

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

/*		カラー指定
-----------------------------------------------------*/
.is-black {
  color: var(--color-black);
}

.is-gray {
  color: var(--color-gray);
}

/*		テキスト装飾
-----------------------------------------------------*/
.is-strong {
  font-weight: bold;
}

/*		位置
-----------------------------------------------------*/
.is-left {
  text-align: left;
}

.is-center {
  text-align: center;
}

.is-right {
  text-align: right;
}

/*		スクロール制御
-----------------------------------------------------*/
.is-scroll_off {
  overflow: hidden;
}

.is-scroll_on {
  overflow: auto;
}

/*
====================================================
フェードイン＋ブラー解除アニメーション（.js-fadein）
====================================================
*/
.js-fadein {
  opacity: 0;
  filter: blur(12px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), filter 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, filter;
}

.js-fadein.is-inview {
  opacity: 1 !important;
  filter: blur(0) !important;
}

/*
====================================================
FOUC防止：bodyにjs-animate-readyが付くまでアニメーション初期状態を強制
====================================================
*/
body:not(.js-animate-ready) .js-fadein {
  opacity: 0;
  filter: blur(12px);
  transform: none;
}

body:not(.js-animate-ready) .js-fadeup {
  opacity: 0;
  filter: blur(12px);
  transform: translateY(10px);
}

/*
====================================================
下からフェードアップアニメーション（.js-fadeup）
====================================================
*/
.js-fadeup {
  opacity: 0;
  filter: blur(12px);
  transform: translateY(10px);
  transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), filter 1s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, filter, transform;
}

.js-fadeup.is-inview {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

/*
====================================================
data属性ベースのフェードアップアニメーション
data-fadein="up" : 下からフェードアップ（デフォルト）
data-fadein="in" : その場でフェードイン
data-fadein-delay="300" : 遅延時間（ミリ秒）
====================================================
*/
[data-fadein] {
  opacity: 0;
  filter: blur(8px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), filter 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, filter, transform;
}

/* デフォルト：下からフェードアップ */
[data-fadein=up],
[data-fadein]:not([data-fadein=""]) {
  transform: translateY(20px);
}

/* その場でフェードイン */
[data-fadein=in] {
  transform: none;
}

/* 可視範囲に入った時の状態 */
[data-fadein].is-inview {
  opacity: 1 !important;
  filter: blur(0) !important;
  transform: translateY(0) !important;
}

/* FOUC防止：アニメーション準備完了前は非表示を維持 */
body:not(.js-animate-ready) [data-fadein] {
  opacity: 0;
  filter: blur(8px);
}

/*
====================================================
タブコンテンツの表示切り替え（フェードなし）
====================================================
*/
[data-tab-content] {
  display: none;
}

[data-tab-content].is-active {
  display: block;
}