@charset "UTF-8";
/* ///////////////
共通Parts ※decoより下で装飾の指定をする
/////////////// */
/* ///////////////
キャプション系
/////////////// */
.common-caption {
  /* deco */
  font-weight: inherit;
  line-height: 1.2;
  color: #fff;
  background-color: var(--color-key);
  font-weight: 600;
}
.common-caption.framed {
  background: var(--color-key-pale);
  border-top: 2px dotted var(--color-key);
  border-bottom: 2px dotted var(--color-key);
  color: var(--color-key);
}
.common-caption.underline {
  /* deco */
  border-bottom: 2px solid;
}
/* ///////////////
ボタン系
/////////////// */
.common-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  border-radius: 100vmax;
}
.common-btn:hover,
.common-btn:active {
  transform: translateY(3px);
}
/* カラー */
.common-btn.key {
  background: var(--color-key);
  border: 2px solid var(--color-key);
  color: #fff;
  box-shadow: 0 5px 0 0 var(--color-key-dark);
}
.common-btn.accent {
  background: var(--color-accent);
  border: 2px solid var(--color-accent);
  color: #fff;
  box-shadow: 0 5px 0 var(--color-accent-dark);
}
.common-btn.accent:hover,
.common-btn.accent:active {
  box-shadow: 0 2px 0 0 var(--color-accent-dark);
}
.common-btn.sub-accent {
  background: var(--color-sub-accent);
  border: 2px solid var(--color-sub-accent);
  color: #fff;
  box-shadow: 0 5px 0 var(--color-sub-accent-dark);
}
.common-btn.sub-accent:hover,
.common-btn.sub-accent:active {
  box-shadow: 0 2px 0 0 var(--color-accent-dark);
}
.common-btn.plain {
  background: linear-gradient(135deg, #fff, #f2f2f2);
  border: 2px solid var(--color-key);
  color: var(--color-key);
  box-shadow: 0 5px 0 var(--color-key);
}
.common-btn.plain:hover,
.common-btn.plain:active {
  box-shadow: 0 2px 0 0 var(--color-key);
}
/* ///////////////
ボタンエリア
/////////////// */
.btn-area {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
.btn-area a {
  display: block;
  text-align: center;
}
/* ///////////////
枠順カラー
/////////////// */
.gate-1 {
  background-color: #fff;
}
.gate-2 {
  background-color: #000;
  color: #fff;
}
.gate-3 {
  background-color: #f00;
  color: #fff;
}
.gate-4 {
  background-color: #06f;
  color: #fff;
}
.gate-5 {
  background-color: #fc0;
}
.gate-6 {
  background-color: #390;
  color: #fff;
}
.gate-7 {
  background-color: #f90;
  color: #fff;
}
.gate-8 {
  background-color: #f0c;
  color: #fff;
}
/* ///////////////
タブ
/////////////// */
ul.tab {
  display: flex;
}
ul.tab li {
  flex: 1;
  border: 2px solid var(--color-border);
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  color: var(--color-key);
}
ul.tab li a {
  display: block;
}
ul.tab .visit,
ul.tab li:hover {
  background-color: var(--color-sub-pale);
}
/* ///////////////
セレクトボタン
/////////////// */
.select-btn {
  display: flex;
}
.select-btn li {
  flex: 1 1 0;
  border: 2px solid var(--color-border);
  border-radius: 100vmax;
}
.select-btn li a {
  display: flex;
  justify-content: center;
  align-items: center;
}
.select-btn .visit {
  background-color: var(--color-key);
  border-color: var(--color-key);
  color: #fff;
}
/* ///////////////
ページネーション
/////////////// */
.pagenation {
  display: flex;
  justify-content: center;
}
.pagenation a,
.pagenation span {
  aspect-ratio: 1 / 1;
  align-content: center;
  border: 2px solid var(--color-border);
  background-color: #fff;
  color: #666;
}
.pagenation a:hover,
.pagenation span {
  border: none;
  /* deco */
  background-color: var(--color-key);
  color: #fff;
}
/* ///////////////
ナンバーアイコン
/////////////// */
span.num {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1 / 1;
  border-radius: 5px;
  font-weight: 900;
  background-color: #000;
  color: #fff;
}
/* ///////////////
配当金表示
/////////////// */
.amount {
  color: #f00;
  font-weight: 900;
  line-height: 1;
}
.amount span {
  font-size: 80%;
}
/* ///////////////
グレードラベル
/////////////// */
.g1::after,
.g2::after,
.g3::after {
  line-height: 1;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  display: inline-block;
}
.g1::after {
  content: "GI";
  background-color: #b92626;
}
.g2::after {
  content: "GII";
  background-color: #265ab9;
}
.g3::after {
  content: "GIII";
  background-color: #2b7847;
}
/* ///////////////
その他
/////////////// */
p.text {
  font-weight: 600;
}
p.text strong {
  /* deco */
  color: var(--color-accent);
}
.text-link a {
  display: inline-block;
  color: var(--color-key);
  text-decoration: underline;
}
.errormsg {
  /* deco */
  color: var(--color-accent);
}
/* ////////////////////////////////////////////////////////////
※ここから下はデバイス毎の値。サンプルのサイズ感で良ければ触らなくてOK
//////////////////////////////////////////////////////////// */
/* ///// PC Parts ///// */
@media screen and (min-width: 751px) {
  /* ///////////////
    キャプション系
    /////////////// */
  .common-caption {
    margin-bottom: var(--inner-gap-wide);
    padding: var(--inner-smgap-wide) 0;
    font-size: var(--fs-lg-wide);
  }
  /* ///////////////
    ボタン系
    /////////////// */
  /* ボタンサイズ */
  .common-btn.lg {
    padding: 8px 15px;
    font-size: var(--fs-lg-wide);
  }
  .common-btn.lg:hover,
  .common-btn.lg:active {
    box-shadow: 0 2px 0 0 var(--color-key-dark);
  }
  .common-btn.md {
    padding: 8px 15px;
    font-size: var(--fs-md-wide);
  }
  .common-btn.sm {
    padding: 8px 15px;
    font-size: var(--fs-sm-wide);
  }
  /* シャドウカラー */
  .common-btn.key {
    box-shadow: 0 5px 0 0 var(--color-key-dark);
  }
  .common-btn.key:hover,
  .common-btn.key:active {
    box-shadow: 0 2px 0 0 var(--color-key-dark);
  }
  .common-btn.accent {
    box-shadow: 0 5px 0 var(--color-accent-dark);
  }
  .common-btn.accent:hover,
  .common-btn.accent:active {
    box-shadow: 0 2px 0 0 var(--color-accent-dark);
  }
  .common-btn.sub-accent {
    box-shadow: 0 5px 0 var(--color-sub-accent-dark);
  }
  .common-btn.sub-accent:hover,
  .common-btn.sub-accent:active {
    box-shadow: 0 2px 0 0 var(--color-accent-dark);
  }
  .common-btn.plain {
    box-shadow: 0 5px 0 var(--color-key);
  }
  .common-btn.plain:hover,
  .common-btn.plain:active {
    box-shadow: 0 2px 0 0 var(--color-key);
  }
  /* ///////////////
    ボタンエリア
    /////////////// */
  .btn-area {
    gap: var(--inner-gap-wide);
  }
  /* ///////////////
    タブ
    /////////////// */
  ul.tab {
    gap: 5px;
  }
  ul.tab li a {
    padding: var(--inner-smgap-wide) 0;
  }
  ul.tab li a .narrow {
    display: none;
  }
  /* ///////////////
    セレクトボタン
    /////////////// */
  .select-btn {
    gap: var(--inner-smgap-wide);
  }
  .select-btn li:hover {
    background-color: var(--color-key);
    border-color: var(--color-key);
    color: #fff;
  }
  /* ///////////////
    ページネーション
    /////////////// */
  .pagenation {
    gap: var(--inner-smgap-wide);
  }
  .pagenation a,
  .pagenation span {
    width: 40px;
    border-radius: 5px;
    font-size: var(--fs-sm-wide);
  }
  /* ///////////////
    グレードラベル
    /////////////// */
  .g1::after,
  .g2::after,
  .g3::after {
    font-size: 0.7em;
    padding: 2px 6px;
    border-radius: 3px;
    width: 3em;
  }
  /* ///////////////
    その他
    /////////////// */
  p.text {
    font-size: var(--fs-md-wide);
  }
  .errormsg {
    font-size: var(--fs-md-wide);
  }
  .unclick {
    pointer-events: none;
  }
  br.narrow {
    display: none;
  }
}
/* ///// SP Parts ///// */
@media screen and (max-width: 750px) {
  /* ///////////////
    キャプション系
    /////////////// */
  .common-caption {
    margin-bottom: var(--inner-gap-narrow);
    padding: var(--inner-smgap-narrow) 0;
    font-size: var(--fs-md-narrow);
  }
  /* ///////////////
    ボタン系
    /////////////// */
  .common-btn {
    padding: 1vw 4vw;
  }
  /* ボタンサイズ */
  .common-btn.lg {
    font-size: var(--fs-md-narrow);
  }
  .common-btn.md {
    font-size: var(--fs-sm-narrow);
  }
  .common-btn.sm {
    font-size: var(--fs-xsm-narrow);
  }
  /* シャドウカラー */
  .common-btn.key {
    box-shadow: 0 1vw 0 0 var(--color-key-dark);
  }
  .common-btn.accent {
    box-shadow: 0 1vw 0 var(--color-accent-dark);
  }
  .common-btn.sub-accent {
    box-shadow: 0 1vw 0 var(--color-sub-accent-dark);
  }
  .common-btn.plain {
    box-shadow: 0 1vw 0 var(--color-key);
  }
  /* ///////////////
    ボタンエリア
    /////////////// */
  .btn-area {
    gap: var(--inner-gap-narrow);
  }
  .btn-area.ew-btn * {
    margin: 0 0.5vw;
  }
  /* ///////////////
    タブ
    /////////////// */
  ul.tab {
    gap: var(--inner-smgap-narrow);
  }
  ul.tab li a {
    padding: var(--inner-smgap-narrow) 0;
    font-size: var(--fs-sm-narrow);
  }
  ul.tab li a .wide {
    display: none;
  }
  /* ///////////////
    セレクトボタン
    /////////////// */
  .select-btn {
    gap: var(--inner-smgap-narrow);
  }
  .select-btn li {
    font-size: var(--fs-sm-narrow);
  }
  /* ///////////////
    ページネーション
    /////////////// */
  .pagenation {
    gap: var(--inner-gap-narrow);
  }
  .pagenation a,
  .pagenation span {
    width: 8vw;
    border-radius: 2vw;
    font-size: var(--fs-sm-narrow);
  }
  /* ///////////////
    グレードラベル
    /////////////// */
  .g1::after,
  .g2::after,
  .g3::after {
    font-size: 2.2vw;
    padding: 1vw 0;
    border-radius: 1vw;
    width: 8vw;
  }
  /* ///////////////
    その他
    /////////////// */
  p.text {
    font-size: var(--fs-sm-narrow);
  }
  .errormsg {
    font-size: var(--fs-sm-narrow);
  }
  .unclick {
    pointer-events: auto;
  }
  br.wide {
    display: none;
  }
}