@charset "UTF-8";
/*
  /asuracore/asset/css/utility/u-common.css
  共通スタイル調整用CSS

  このファイルはトークンとUtilityのSingle Source of Truthです。
  トークンを追加するときは、同名が既に定義されていないか必ず検索してください。
*/

/* 色の変数定義 */
:root {
  /* ブランドカラー */
  --navy: #1d2b56;
  --purple: #6b5b8f;
  --magenta: #bf0b62;
  --yellow: #f6b400;

  /* ニュートラル */
  --black: #323232;
  --white: #fff;
  --gray-dark: #333;
  --gray: #8a8a8a;
  --gray-light: #e6e6e6;
  --bg-base: #f7f8fa;

  /* グレースケール（フォームUI・罫線用） */
  --gray-06: #aaa;
  --gray-08: #d2d2d2;
  --gray-09: #fafafa;

  /* UI・ステータス */
  --ui-primary: #1d2b56;
  --ui-secondary: #6b5b8f;
  --ui-hover: #8ba7d6;
  --ui-error: #e64e7b;
  --ui-success: #2ead7b;
  --ui-caution: #f6b400;

  /* テキスト */
  --text-main: #323232;
  --text-sub: #333;
  --text-assist: #8a8a8a;
  --link: #1558d6;

  /* グラデーション。*-stops は色ストップのみ保持し、角度を変える場合は linear-gradient() に渡す */
  --gradation-main-stops: #1d2b56 0%, #6b5b8f 80%, #bf0b62 100%;
  --gradation-sub-stops: #8ba7d6 0%, #c77bb7 80%, #f6b4c8 100%;
  --gradation-main: linear-gradient(90deg, var(--gradation-main-stops));
  --gradation-sub: linear-gradient(90deg, var(--gradation-sub-stops));

  /* フォーム */
  --form-error-color: #e64e7b;
  --form-error-bg: #fff1f3;
  --form-error-border: #ffdadf;
  --form-error-shadow: #eed4d2;
  --form-input-bg: #fafafa;
  --form-input-border: #d2d2d2;
  --form-placeholder: #aaa;
  --form-select-border: #d2d2d2;
  --form-radio: #1d2b56;
  --form-radio-bg: #fff;
  --form-required-bg: #bf0b62;
}

/* 階層の変数定義 z-index */
:root {
  --z-index-front: 500;
  --z-index-pagetop: 700;
  --z-index-humberger: 800;
  --z-index-overlay: 990;
  --z-index-modal: 1000;
}

/* テキスト変更用 */
.u-text-left {
  text-align: left !important;
}
.u-text-center {
  text-align: center !important;
}
.u-text-right {
  text-align: right !important;
}
.u-text-bold {
  font-weight: 700 !important;
}
.u-text-underline {
  text-decoration: underline !important;
}
.u-text-highlighter {
  background: linear-gradient(transparent 75%, var(--yellow) 75%);
  background-position: 0 1.3em !important;
}
.u-text-annotation {
  font-size: 10px !important;
}
.u-text-nowrap {
  display: inline-block !important;
}
.u-text-link {
  color: var(--link);
  text-decoration: underline;

  &:hover {
    text-decoration: none;
  }
}

/* テキスト色変更用 */
.u-color-white {
  color: var(--white) !important;
}
.u-color-black {
  color: var(--text-main) !important;
}
.u-color-sub {
  color: var(--text-sub) !important;
}
.u-color-assist {
  color: var(--text-assist) !important;
}
.u-color-navy {
  color: var(--navy) !important;
}
.u-color-purple {
  color: var(--purple) !important;
}
.u-color-magenta {
  color: var(--magenta) !important;
}
.u-color-yellow {
  color: var(--yellow) !important;
}

/* 背景色変更用 */
.u-color-bg-white {
  background-color: var(--white) !important;
}
.u-color-bg-base {
  background-color: var(--bg-base) !important;
}
.u-color-bg-gray {
  background-color: var(--gray-light) !important;
}
.u-color-bg-navy {
  background-color: var(--navy) !important;
}
.u-color-bg-purple {
  background-color: var(--purple) !important;
}
.u-color-bg-magenta {
  background-color: var(--magenta) !important;
}

/* グラデーション背景 */
.u-color-bg-gradation {
  background: var(--gradation-main) !important;
}
.u-color-bg-gradation-sub {
  background: var(--gradation-sub) !important;
}

/* レスポンシブ表示切り替え */
@media screen and (max-width: 600px) {
  .u-600-up-display {
    display: none !important;
  }
}
@media screen and (min-width: 601px) {
  .u-600-down-display {
    display: none !important;
  }
}
@media screen and (max-width: 840px) {
  .u-840-up-display {
    display: none !important;
  }
}
@media screen and (min-width: 841px) {
  .u-840-down-display {
    display: none !important;
  }
}
@media screen and (max-width: 1024px) {
  .u-1024-up-display {
    display: none !important;
  }
}
@media screen and (min-width: 1025px) {
  .u-1024-down-display {
    display: none !important;
  }
}
@media screen and (max-width: 1280px) {
  .u-1280-up-display {
    display: none !important;
  }
}
@media screen and (min-width: 1281px) {
  .u-1280-down-display {
    display: none !important;
  }
}

/* その他 */
.u-overflow-hidden {
  overflow: hidden !important;
}
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* 送信処理用iframeなど、画面にも支援技術にも出さない要素 */
/* display:none だとiframe内のナビゲーションが実行されないため、画面外へ逃がして隠す */
.u-hidden-frame {
  position: absolute;
  top: -9999px;
  left: -9999px;
  width: 1px;
  height: 1px;
  border: 0;
  opacity: 0;
  pointer-events: none;
}