@charset "UTF-8";

/* =====================
  Custom Property
==================== */
:root {
  /* ==== 色 ==== */
  --black: #333333;
  --white: #ffffff;
  --gray: #e9e9e9;
  --lightgray: #f3f3f3;
  --silver: #d3d3d3;
  --smoke: #fbfbfb;
  --red: #fc4871;
  --vividred: #c10200;
  --salmon: #ee7271;
  --orange: #f6814c;
  --seashell: #fdf2f1;
  --brown: #b94d1b;
  --yellow: #fffb00;
  --ivory: #ffeee6;
  --green: #20774b;
  --blue: #1f72cc;
  --vividblue: #1515e2;
  --lightblue: #72acff;
  --aliceblue: #f4f7fc;
  --water: #edf6ff;

  /* ==== フォント ==== */
  --ubuntu: 'Ubuntu Condensed';

  /* 英字 */
  --tavi: 'Taviraj', serif;

  /* Noto Sans */
  --noto: 'Noto Sans JP', sans-serif;
  /* 游ゴシック */
  --yugo: '游ゴシック', 'Yu Gothic', YuGothic, 'Hiragino Kaku Gothic ProN',
    'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ ゴシック', sans-serif;
  /* 游明朝 */
  --yumin: 'Yu Mincho Demibold', 'YuMincho Demibold', sans-serif;

  /* ==== アニメーション easing関数 ==== */
  --easeOutQuart: cubic-bezier(0.25, 1, 0.5, 1);
  --easeOutExpo: cubic-bezier(0.87, 0, 0.13, 1);
  --easeOutBack: cubic-bezier(0.34, 1.56, 0.64, 1);
  --easeOutQuint: cubic-bezier(0.22, 1, 0.36, 1);
  --easeInCirc: cubic-bezier(0.55, 0, 1, 0.45);
  --easeInOutBack: cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

/* ==== テキスト選択時の色 ==== */
::selection {
  background: #005aad99;
  color: white;
}

/* ==== フォームのplaceholder 文字色 ==== */
::placeholder {
  color: #a0a0a0;
}

/* =====================
  アニメーション
===================== */
@media (hover: hover) and (pointer: fine) {
  .hover-op {
    transition: opacity 250ms ease 0s;
  }

  .hover-op:hover {
    opacity: 0.7;
  }
}

/* =====================
  全体の指定
===================== */
html,
body {
  font-family: var(--yugo);
  font-size: 16px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.8;
  color: #131518;
}

/* =====================
  共通設定
===================== */
/* PC */
@media print,
screen and (min-width: 768px) {
  body {
    min-width: 1300px;
  }

  /* class="sp" は pcでは非表示-SPのみ表示 */
  .sp {
    display: none;
  }
}

@media not all and (min-width: 768px) {

  /* class="pc" は spでは非表示-PCのみ表示 */
  .pc {
    display: none;
  }
}

/* =====================
  Modules
===================== */
/* 内包テキストの 前 に文字 <div data-textbefore="￥">1,000</div> => ￥1,000 */
[data-textbefore]::before {
  content: attr(data-textbefore) ' ';
}

/* 内包テキストの 後 に文字 <div data-textafter="円">1,000</div> => 1,000円 */
[data-textafter]::after {
  content: ' ' attr(data-textafter);
}

/* ==== 1行テキストのはみ出てる分を「...」 ==== */
.ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* ==== Font ==== */
.fwb {
  font-weight: bold;
}

.fwn {
  font-weight: normal;
}

/* =====================
  Align
===================== */
.tal {
  text-align: left !important;
}

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

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

.vat {
  vertical-align: top !important;
}

.vam {
  vertical-align: middle !important;
}

.vab {
  vertical-align: bottom !important;
}

/* =====================
  Flex
===================== */
/* ==== justify-content ==== */
.jcs {
  justify-content: flex-start;
}

.jce {
  justify-content: flex-end;
}

.jcc {
  justify-content: center;
}

.jcb {
  justify-content: space-between;
}

.jca {
  justify-content: space-around;
}

/* ==== align-items ==== */
.ais {
  align-items: flex-start;
}

.aie {
  align-items: flex-end;
}

.aic {
  align-items: center;
}

.aib {
  align-items: baseline;
}

/* ==== wrap ==== */
.flxw {
  flex-wrap: wrap;
}

/* ==== grow ==== */
.flxg {
  flex-grow: 1;
}

/* 縦並び */
.flxd-col {
  flex-direction: column;
}

.flxd-row {
  flex-direction: row;
}

/* =====================
  border-radius
===================== */
/* カプセル形 💊 */
.capsule {
  border-radius: calc(infinity * 1px);
}

.circle {
  border-radius: 50%;
}

/* ==== 見た目調整 ==== */
/* 左右反転 */
.flipx {
  transform: scale(-1, 1);
}

/* 上下反転 */
.flipy {
  transform: scale(1, -1);
}

/* =====================
  MarginTop
===================== */
.mt-0_25 {
  margin-top: 0.25em !important;
}

.mt-0_50 {
  margin-top: 0.5em !important;
}

.mt-0_75 {
  margin-top: 0.75em !important;
}

.mt-1_25 {
  margin-top: 1.25em !important;
}

.mt-1_50 {
  margin-top: 1.5em !important;
}

.mt-1_75 {
  margin-top: 1.75em !important;
}

.mt-0 {
  margin-top: 0em !important;
}

.mt-1 {
  margin-top: 1em !important;
}

.mt-2 {
  margin-top: 2em !important;
}

.mt-3 {
  margin-top: 3em !important;
}

.mt-4 {
  margin-top: 4em !important;
}

.mt-5 {
  margin-top: 5em !important;
}

/* =====================
  MarginLeft
===================== */
.ml-0_25 {
  margin-left: 0.25em !important;
}

.ml-0_50 {
  margin-left: 0.5em !important;
}

.ml-0_75 {
  margin-left: 0.75em !important;
}

.ml-1_25 {
  margin-left: 1.25em !important;
}

.ml-1_50 {
  margin-left: 1.5em !important;
}

.ml-1_75 {
  margin-left: 1.75em !important;
}

.ml-0 {
  margin-left: 0em !important;
}

.ml-1 {
  margin-left: 1em !important;
}

.ml-2 {
  margin-left: 2em !important;
}

.ml-3 {
  margin-left: 3em !important;
}

.ml-4 {
  margin-left: 4em !important;
}

.ml-5 {
  margin-left: 5em !important;
}

/* =====================
  Gap
===================== */
.gap-0_25 {
  gap: 0.25em !important;
}

.gap-0_50 {
  gap: 0.5em !important;
}

.gap-0_75 {
  gap: 0.75em !important;
}

.gap-1_25 {
  gap: 1.25em !important;
}

.gap-1_50 {
  gap: 1.5em !important;
}

.gap-1_75 {
  gap: 1.75em !important;
}

.gap-0 {
  gap: 0em !important;
}

.gap-1 {
  gap: 1em !important;
}

.gap-2 {
  gap: 2em !important;
}

.gap-3 {
  gap: 3em !important;
}

.gap-4 {
  gap: 4em !important;
}

.gap-5 {
  gap: 5em !important;
}

/* =====================
  サイズ関係
===================== */
/* ==== 幅 ==== */
.w-auto {
  width: auto;
}

.w-max {
  width: max-content;
}

.w-fit {
  width: fit-content;
}

.w-0 {
  width: 0% !important;
}

.w-5 {
  width: 5% !important;
}

.w-10 {
  width: 10% !important;
}

.w-15 {
  width: 15% !important;
}

.w-20 {
  width: 20% !important;
}

.w-25 {
  width: 25% !important;
}

.w-30 {
  width: 30% !important;
}

.w-35 {
  width: 35% !important;
}

.w-40 {
  width: 40% !important;
}

.w-45 {
  width: 45% !important;
}

.w-50 {
  width: 50% !important;
}

.w-55 {
  width: 55% !important;
}

.w-60 {
  width: 60% !important;
}

.w-65 {
  width: 65% !important;
}

.w-70 {
  width: 70% !important;
}

.w-75 {
  width: 75% !important;
}

.w-80 {
  width: 80% !important;
}

.w-85 {
  width: 85% !important;
}

.w-90 {
  width: 90% !important;
}

.w-95 {
  width: 95% !important;
}

.w-100 {
  width: 100% !important;
}

/* =====================
  MarginBottom
===================== */
.mb-0_25 {
  margin-bottom: 0.25em !important;
}

.mb-0_50 {
  margin-bottom: 0.5em !important;
}

.mb-0_75 {
  margin-bottom: 0.75em !important;
}

.mb-1_25 {
  margin-bottom: 1.25em !important;
}

.mb-1_50 {
  margin-bottom: 1.5em !important;
}

.mb-1_75 {
  margin-bottom: 1.75em !important;
}

.mb-0 {
  margin-bottom: 0em !important;
}

.mb-1 {
  margin-bottom: 1em !important;
}

.mb-2 {
  margin-bottom: 2em !important;
}

.mb-3 {
  margin-bottom: 3em !important;
}

.mb-4 {
  margin-bottom: 4em !important;
}

.mb-5 {
  margin-bottom: 5em !important;
}

/* =====================
  Margin
===================== */
.mlr {
  margin-inline: auto;
}

/* =====================
  Padding
===================== */
.ptb-0_25 {
  padding-block: 0.25em !important;
}

.ptb-0_50 {
  padding-block: 0.5em !important;
}

.ptb-0_75 {
  padding-block: 0.75em !important;
}

.ptb-1_25 {
  padding-block: 1.25em !important;
}

.ptb-1_50 {
  padding-block: 1.5em !important;
}

.ptb-1_75 {
  padding-block: 1.75em !important;
}

.ptb-0 {
  padding-block: 0em !important;
}

.ptb-1 {
  padding-block: 1em !important;
}

.ptb-2 {
  padding-block: 2em !important;
}

.ptb-3 {
  padding-block: 3em !important;
}

.ptb-4 {
  padding-block: 4em !important;
}

.ptb-5 {
  padding-block: 5em !important;
}

.plr-0_25 {
  padding-inline: 0.25em !important;
}

.plr-0_50 {
  padding-inline: 0.5em !important;
}

.plr-0_75 {
  padding-inline: 0.75em !important;
}

.plr-1_25 {
  padding-inline: 1.25em !important;
}

.plr-1_50 {
  padding-inline: 1.5em !important;
}

.plr-1_75 {
  padding-inline: 1.75em !important;
}

.plr-0 {
  padding-inline: 0em !important;
}

.plr-1 {
  padding-inline: 1em !important;
}

.plr-2 {
  padding-inline: 2em !important;
}

.plr-3 {
  padding-inline: 3em !important;
}

.plr-4 {
  padding-inline: 4em !important;
}

.plr-5 {
  padding-inline: 5em !important;
}

.p-0_25 {
  padding: 0.25em !important;
}

.p-0_50 {
  padding: 0.5em !important;
}

.p-0_75 {
  padding: 0.75em !important;
}

.p-1_25 {
  padding: 1.25em !important;
}

.p-1_50 {
  padding: 1.5em !important;
}

.p-1_75 {
  padding: 1.75em !important;
}

.p-0 {
  padding: 0em !important;
}

.p-1 {
  padding: 1em !important;
}

.p-2 {
  padding: 2em !important;
}

.p-3 {
  padding: 3em !important;
}

.p-4 {
  padding: 4em !important;
}

.p-5 {
  padding: 5em !important;
}

/* =====================
  Display
===================== */
.di {
  display: inline;
}

.db {
  display: block;
}

.df {
  display: flex;
}

.dg {
  display: grid;
}

/* =====================
  操作不可能ボタン
===================== */
.disabledBtn {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  opacity: 0.7;
  filter: grayscale(1);
}

.ui-lock {
  opacity: 0.8;
  pointer-events: none;
  position: relative;
}

.ui-lock::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  background: #ffffff05;
  z-index: 100;
}

.ui-lock * {
  pointer-events: none;
}

.form-error:empty {
  display: none;
}

.form-error {
  padding: 0.5em 1em;
  color: #c84949;
  border: 2px solid #c84949;
  border-radius: 5px;
  background: #fce3e3;
  margin-top: 1em;
  display: block;
}