@charset "UTF-8";

/* -------------------------------------------------------------
 * LAYOUT
 * ------------------------------------------------------------- */

:root {
  --width-max: 1920px;
  --width-xl: 1280px;
  --width-l: 900px;
  --width-m: 768px;
  --width-ms: 640px;
  --width-s: 480px;
  --width-ss: 320px;
  --responsive: clamp(8px, 4.25vw, 12px);
}

/* -------------------
 * ALL
 * ---------------- */

.l-text span {
  display: inline-block;
}

.l-container {
  min-height: 70vh;
}

.l-sec {
  padding: var(--size-l) 0;
}

.l-contents-inner.goods-page {
  max-width: var(--width-l);
}

.l-contents-inner_flexpage {
  max-width: var(--width-xl);
  margin-left: auto;
  margin-right: auto;
  padding: 12px;
}

.l-center {
  margin-left: auto;
  margin-right: auto;
}

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

.l-left {
  text-align: left;
}

.l-none {
  display: none;
}

.l-side-left {
  margin-right: auto;
  padding: 12px;
}

.l-side-right {
  max-width: var(--width-l);
  margin-left: auto;
  padding: 12px;
}

/* width */
.l-width-xl {
  max-width: var(--width-xl);
}

.l-width-l {
  max-width: var(--width-l);
}

.l-width-m {
  max-width: var(--width-m);
}

.l-width-s {
  max-width: var(--width-s);
}

.l-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.l-pc-only {
  display: block;
}

.l-sp-only {
  display: none;
}

@media screen and (max-width: 900px) {
  .l-sp-only {
    display: block;
  }

  .l-pc-only {
    display: none;
  }
}

/* ----------------------------------------
* サイドありページ
* ----------------------------------------- */

.l-page-flex {
  width: 100%;
  display: flex;
  min-height: 70vh;
  max-width: var(--width-l);
  margin-left: auto;
  margin-right: auto;
}

.l-page-flex_side {
  width: 30%;
  min-width: 300px;
}

.l-page-flex_main {
  width: 70%;
  padding-left: var(--responsive);
}

@media screen and (max-width: 900px) {
  .l-page-flex {
    display: block;
  }

  .l-page-flex_side {
    width: 100%;
    min-width: 0;
    padding: 0;
  }

  .l-page-flex_main {
    width: 100%;
    padding: 0;
  }
}

/* ----------------------------------------
* グッズ
* ----------------------------------------- */

.l-goods-summary {
  display: flex;
  align-items: flex-start;
}

.l-goods-summary_left {
  width: 30%;
}

.l-goods-summary_right {
  width: 70%;
  padding-left: 20px;
}

.l-goods-container {
  padding:0 8px;
}

@media screen and (max-width: 900px) {
  .l-goods-summary {
    display: block;
    width: 100%;
  }

  .l-goods-summary_left {
    width: 100%;
    margin: 0;
  }
  
  .l-goods-summary_right {
    width: 100%;
    padding-left: 0;
  }
}

/* ----------------------------------------
* コンポーネントコンテナ
* ----------------------------------------- */

/* ボタン */
.l-btn-container {
  padding: 12px 0;
}

.l-btn-container.page-bottom {
  margin-top: var(--size-l);
  padding-bottom: var(--size-xl);
}

.l-form-btn {
  margin: 24px 0;
}

/* テキスト */
.l-text-container {
  padding: 12px 0;
}

/* メッセージ */
.l-msg-container {
  padding: 12px;
}

/* ページャー */
.l-pager-container {
  padding: var(--size-l) 0;
}

/* パンくず */
.l-breadcrumb-container {
  padding: 12px;
}

/* テーブル  はみ出したらスクロールする  */
.l-table-container {
  width: 100%;
  /* max-width: var(--width-l); */
  margin-left: auto;
  margin-right: auto;
  overflow-x: auto;
  margin-top: 12px;
  margin-bottom: 12px;
  overflow-x: auto;
}

/* お知らせ */
.l-news {
  padding: var(--size-xxl) var(--size-s);
}

/* ----------------------------------------
* Grid バナーなど
* ----------------------------------------- */

.l-column {
  display: grid;
  justify-content: center;
  align-items: center;
  gap: 12px;
  text-align: center;
}

/* バナー */
.l-column.is-bnr {
  grid-template-columns: repeat(3, 1fr);
}

/* メイン口座 */
.l-column.is-account-main {
  align-items: flex-start;
  grid-template-columns: repeat(auto-fill, minmax(calc(50% - 1em), 2fr));
}

@media screen and (max-width: 768px) {
  .l-column.is-bnr {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 500px) {
  .l-column.is-bnr {
    grid-template-columns: repeat(1, 1fr);
  }

  .l-column.is-account-main {
    grid-template-columns: repeat(auto-fill, minmax(calc(100% - 1em), 1fr));
  }
}

/* ----------------------
 * PADDING
 * ---------------------- */
 /* padding 上 */
.l-pt-4 {
  padding-top: 4px;
}

.l-pt-8 {
  padding-top: 8px;
}

.l-pt-12 {
  padding-top: 12px;
}

.l-pt-20 {
  padding-top: 20px;
}

.l-pt-32 {
  padding-top: 32px;
}

.l-pt-40 {
  padding-top: 40px;
}

/* padding 下 */
.l-pb-4 {
  padding-bottom: 4px;
}

.l-pb-8 {
  padding-bottom: 8px;
}

.l-pb-12 {
  padding-bottom: 12px;
}

.l-pb-20 {
  padding-bottom: 20px;
}

.l-pb-32 {
  padding-bottom: 32px;
}

.l-pb-40 {
  padding-bottom: 40px;
}

/* all */
.l-pd-4 {
  padding: 4px;
}

.l-pd-12 {
  padding: 12px;
}

.l-pd-20 {
  padding: 20px;
}

/* ----------------------
 * MARGIN
 * ---------------------- */
 /* margin 上 */
 .l-mt-4 {
  margin-top: 4px;
}

.l-mt-8 {
  margin-top: 8px;
}

.l-mt-12 {
  margin-top: 12px;
}

.l-mt-20 {
  margin-top: 20px;
}

.l-mt-32 {
  margin-top: 32px;
}

.l-mt-40 {
  margin-top: 40px;
}

.l-mt-52 {
  margin-top: 52px;
}

.l-mt-80 {
  margin-top: 80px;
}

/* margin 下 */
.l-mb-4 {
  margin-bottom: 4px;
}

.l-mb-8 {
  margin-bottom: 8px;
}

.l-mb-12 {
  margin-bottom: 12px;
}

.l-mb-20 {
  margin-bottom: 20px;
}

.l-mb-32 {
  margin-bottom: 32px;
}

.l-mb-40 {
  margin-bottom: 40px;
}

.l-mb-52 {
  margin-bottom: 52px;
}