@charset 'UTF-8';

.guideCp {

  /* カラーバリエーション用の設定 */
  &.pink {
    .guideCp_category_heading,
    .guideCp_categories_nav_heading {
      background-color: #fff0f5 !important;
      color: unset !important;
    }

    .guideCp_button {
      border: 1px solid #db7093 !important;
      &::after {
        border-top: 3px solid var(--global_clr_black);
        border-right: 3px solid var(--global_clr_black);
      }
    }

    .guideCp_jumpLinks_list_item a {
      border: unset !important;
      background-color: #fff0f5 !important;
      color: var(--global_clr_black) !important;
      &::after {
        border-bottom: 3px solid #db7093 !important;
        border-right: 3px solid #db7093 !important;
      }
    }
  }
  &.gray {
    .guideCp_category_heading,
    .guideCp_categories_nav_heading  {
      background-color: var(--global_clr_gray) !important;
      color: unset !important;
    }

    .guideCp_button {
      border: 1px solid var(--global_clr_gray) !important;
      &::after {
        border-top: 3px solid var(--global_clr_black);
        border-right: 3px solid var(--global_clr_black);
      }
    }

    .guideCp_jumpLinks_list_item a {
      /* border: 1px solid var(--global_clr_gray) !important; */
      border: unset !important;
      background-color: var(--global_clr_gray) !important;
      color: var(--global_clr_black) !important;
      &::after {
        border-bottom: 3px solid var(--global_clr_gray) !important;
        border-right: 3px solid var(--global_clr_gray) !important;
      }
    }
  }
  &.beige {
    .guideCp_category_heading,
    .guideCp_categories_nav_heading  {
      background-color: var(--global_clr_sandbeige) !important;
      color: unset !important;
    }

    .guideCp_button {
      border: 1px solid #D0C5B9 !important;
      &::after {
        border-top: 3px solid var(--global_clr_black);
        border-right: 3px solid var(--global_clr_black);
      }
    }

    .guideCp_jumpLinks_list_item a {
      border: unset !important;
      /* background-color: #D0C5B9 !important; */
      background-color: var(--global_clr_sandbeige) !important;
      color: var(--global_clr_black) !important;
      &::after {
        border-bottom: 3px solid #D0C5B9 !important;
        border-right: 3px solid #D0C5B9 !important;
      }
    }
  }

  /* 見出しやボタンの背景色 */
  --main-color: var(--global_clr_red);
  /* 赤 */
  /* --main-color: var(--global_clr_blue); /* 青 */
  /* --main-color: #dd8b8b; /* ピンク */
  /* --main-color: var(--global_clr_darkbeige); /* べージュ */
  /* --main-color: var(--global_clr_darkgray); /* グレー */

  /* 見出しやボタンの文字色 */
  --sub-color: var(--global_clr_white);
  /* 白 */
  /* --sub-color: var(--global_clr_black); /* 黒 */

  /* font-size */
  --font-size-default: 15px;
  --font-size-xxsmall: 10px;
  --font-size-xsmall: 12px;
  --font-size-small: 14px;
  --font-size-medium: 18px;
  --font-size-large: 20px;
  --font-size-xlarge: 24px;
  --font-size-xxlarge: 28px;
  --font-size-xxxlarge: 32px;

  /* shadow */
  --shadow-default: 0 1px 1px 1px rgb(0 0 0 / 15%);

  /* line-height */
  --line-height-default: 1.6;

  /* margin */
  --margin-default: 20px;
  --margin-xsmall: 5px;
  --margin-small: 10px;
  --margin-medium: 30px;
  --margin-large: 40px;

  /* border-radius */
  --border-radius-default: 10px;

  /* 見出し */
  .guideCp_heading {
    font-size: var(--font-size-xlarge);
    font-weight: bold;
    margin-bottom: var(--margin-default);
    border-bottom: 2px solid var(--global_clr_gray);
    padding: 5px 0px;
  }

  /* general */
  b {
    font-weight: bold;
  }

  img {
    max-width: 100%;
  }

  /* メイン */
  .guideCp_main {
    padding: 0 40px;
  }

  /* サイド */
  .guideCp_side {}

  /* ジャンプリンク */
  .guideCp_jumpLink {
    display: flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    font-weight: bold;
    color: var(--global_clr_black) !important;
    margin: var(--margin-default) 0px;
    padding: 10px 20px;
    border: 1px solid var(--global_clr_gray);
    background-color: var(--global_clr_white);
    border-radius: 20px;

    &::after {
      content: '';
      flex-shrink: 0;
      display: block;
      width: 8px;
      height: 8px;
      border-bottom: 3px solid var(--global_clr_gray);
      border-right: 3px solid var(--global_clr_gray);
      transform: translateY(-2px) rotate(45deg);
    }
  }

  .guideCp_jumpLink--right {
    margin-left: auto;
  }

  /* ジャンプリンクリスト */
  .guideCp_jumpLinks {
    margin-top: var(--margin-default);
    box-shadow: var(--shadow-default);
    border-radius: var(--border-radius-default);
    overflow: hidden;

    .guideCp_jumpLinks_heading {
      padding: 10px 20px;
      background-color: var(--global_clr_gray);
      color: var(--global_clr_black);
      font-size: var(--font-size-default);
      font-weight: bold;
    }

    .guideCp_jumpLinks_list {
      display: flex;
      flex-direction: column;
      gap: 5px;
      padding: 20px;

      .guideCp_jumpLinks_list_item {
        a {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 5px;
          font-size: var(--font-size-small);
          font-weight: bold;
          color: var(--global_clr_white) !important;
          padding: 10px 20px;
          border: 1px solid var(--main-color);
          border-radius: var(--border-radius-default);
          background-color: var(--global_clr_red);

          &::after {
            content: '';
            flex-shrink: 0;
            display: block;
            width: 8px;
            height: 8px;
            border-bottom: 3px solid var(--main-color);
            border-right: 3px solid var(--main-color);
            transform: translateY(-2px) rotate(45deg);
          }
        }
      }
    }
  }

  .guideCp_jumpLinks--noHeader {
    box-shadow: none;

    .guideCp_jumpLinks_list {
      padding: 0px;
    }
  }

  /* ボタンエリア */
  .guideCp_buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  /* ボタン */
  .guideCp_button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    font-weight: bold;
    color: var(--global_clr_black) !important;
    padding: 10px 20px;
    /* background-color: var(--main-color); */
    border: 1px solid var(--main-color);
    border-radius: 20px;

    &::after {
      content: '';
      flex-shrink: 0;
      display: block;
      width: 8px;
      height: 8px;
      border-top: 3px solid var(--global_clr_black);
      border-right: 3px solid var(--global_clr_black);
      transform: rotate(45deg);
    }
  }

  .guideCp_button--right {
    margin-left: auto;
  }

  /* 共有ボタン */
  .guideCp_shareButton {
    width: fit-content;
    display: flex;
    align-items: center;
    font-size: var(--font-size-small);
    font-weight: bold;
    color: var(--global_clr_white) !important;
    margin: var(--margin-default) 0px var(--margin-default) auto;
    padding: 6px 20px;
    background-color: var(--global_clr_blue);
    border-radius: 20px;
  }

  /* カテゴリー一覧 */
  .guideCp_categories {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    padding: 10px;
  }

  /* カテゴリー */
  .guideCp_category {
    display: flex;
    flex-direction: column;
    width: calc((100% - 80px) / 3);
    border-radius: var(--border-radius-default);
    overflow: hidden;
    box-shadow: var(--shadow-default);

    .guideCp_category_heading {
      padding: 10px 20px;
      background-color: var(--main-color);
      color: var(--sub-color);
      font-weight: bold;
    }

    .guideCp_category_body {
      display: flex;
      flex-direction: column;
      gap: var(--margin-default);
      height: 100%;
      padding: 10px 20px 20px;

      .guideCp_category_body_txt {
        p {
          line-height: var(--line-height-default);

          &:not(:last-child) {
            margin-bottom: var(--margin-small);
          }
        }
      }

      .guideCp_category_body_links {
        display: flex;
        flex-direction: column;
        gap: 5px;

        .guideCp_category_body_links_item {
          a {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 5px;
            font-size: var(--font-size-small);
            font-weight: bold;
            background-color: var(--global_clr_brightgray);
            color: var(--global_clr_black) !important;
            padding: 8px 14px;
            border-radius: 30px;

            &::after {
              content: '';
              flex-shrink: 0;
              display: block;
              width: 9px;
              height: 9px;
              border-top: 3px solid var(--global_clr_gray);
              border-right: 3px solid var(--global_clr_gray);
              transform: rotate(45deg);
            }
          }
        }
      }
    }
  }

  /* カテゴリーナビ */
  .guideCp_categories_nav {
    margin: var(--margin-default) 0px 0px;
    border-radius: var(--border-radius-default);
    box-shadow: var(--shadow-default);
    overflow: hidden;

    .guideCp_categories_nav_heading {
      padding: 10px 20px;
      font-weight: bold;
      color: var(--sub-color);
      background-color: var(--main-color);
    }

    .guideCp_categories_nav_list {
      display: flex;
      flex-direction: column;
      gap: 5px;
      padding: 10px;

      .guideCp_categories_nav_list_item {
        a {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 5px;
          font-size: var(--font-size-small);
          font-weight: bold;
          color: var(--global_clr_black) !important;
          padding: 10px 14px;
          border-radius: 30px;
          background-color: var(--global_clr_brightgray);

          &::after {
            content: '';
            flex-shrink: 0;
            display: block;
            width: 8px;
            height: 8px;
            border-top: 3px solid var(--global_clr_gray);
            border-right: 3px solid var(--global_clr_gray);
            transform: rotate(45deg);
          }
        }
      }
    }
  }

  /* リンクリスト（参照の多いご質問など） */
  .guideCp_links {
    margin: var(--margin-large) 0px 0px;
    padding: 30px;
    background-color: var(--global_clr_brightgray);
    border-radius: var(--border-radius-default);
    margin-bottom: var(--margin-default) !important;;

    .guideCp_links_heading {
      font-size: var(--font-size-large);
      font-weight: bold;
      margin-bottom: var(--margin-default);
      padding: 0px 0px 10px;
      border-bottom: 2px solid var(--global_clr_gray);
    }

    .guideCp_links_list {
      display: flex;
      flex-wrap: wrap;
      gap: var(--margin-default) var(--margin-large);

      .guideCp_links_list_item {
        width: calc((100% - var(--margin-large)) / 2);

        a {
          display: flex;
          align-items: center;
          gap: 5px;
          font-size: var(--font-size-small);
          font-weight: bold;
          color: var(--global_clr_black) !important;

          &::after {
            content: '';
            flex-shrink: 0;
            display: block;
            width: 8px;
            height: 8px;
            border-top: 3px solid var(--global_clr_gray);
            border-right: 3px solid var(--global_clr_gray);
            transform: rotate(45deg);
          }
        }
      }
    }
  }

  /* 本文 */
  .guideCp_article {
    max-width: 1024px;

    /* 見出し */
    .guideCp_article_heading {
      font-size: var(--font-size-xlarge);
      font-weight: bold;
      margin-bottom: var(--margin-default);
      padding: 0px 0px 10px;
      border-bottom: 2px solid var(--global_clr_gray);
    }

    /* セクション */
    .guideCp_article_section {
      margin: var(--margin-large) 0px;

      .guideCp_article_section_heading {
        font-size: var(--font-size-medium);
        font-weight: bold;
        margin-bottom: var(--margin-default);
        padding: 4px 0px 4px 8px;
        border-left: 4px solid var(--global_clr_black);
        border-bottom: 1px solid var(--global_clr_gray);
      }

      /* サブセクション */
      &>.guideCp_article_section {
        margin: var(--margin-default) 0px 0px 10px;

        .guideCp_article_section_heading {
          font-size: var(--font-size-default);
          font-weight: bold;
          margin-bottom: var(--margin-xsmall);
          padding: 4px 0px;
          border-left: none;
          border-bottom: 1px solid var(--global_clr_gray);
        }
      }
    }

    /* テキスト */
    .guideCp_article_txt {
      line-height: var(--line-height-default);
      margin: var(--margin-default) 0px;
    }

    /* テーブル */
    .guideCp_article_table {
      width: 100%;
      margin: var(--margin-default) 0px;
      font-size: var(--font-size-small);
      border-collapse: collapse;
      border-spacing: 0px;
      border: 1px solid var(--global_clr_gray);

      th,
      td {
        padding: 10px;
        border: 1px solid var(--global_clr_gray);

        a {
          color: var(--global_clr_black) !important;
          text-decoration: underline !important;
        }

        ul,
        ol {
          margin: 0px;

          li {
            font-size: var(--font-size-small);

            &::before {
              top: 6px;
            }
          }
        }
      }

      thead th {
        background-color: var(--global_clr_lightgray);
        font-weight: bold;
      }

      tbody th {
        background-color: var(--global_clr_brightgray);
        font-weight: bold;
      }
    }

    .guideCp_article_table--cardinfo {
      td {
        vertical-align: middle;
        text-align: center;
      }
    }

    /* リスト */
    .guideCp_article_list {
      padding-left: 18px;
      margin: var(--margin-default) 0px;

      li {
        position: relative;
        line-height: var(--line-height-default);

        a {
          color: var(--global_clr_black) !important;
          text-decoration: underline !important;

          &[target="_blank"]::after {
            content: url(../img/icon/icon_window.png);
            margin: 0px 2px;
          }
        }

        &:not(:last-child) {
          margin-bottom: var(--margin-small);
        }

        &::before {
          content: '';
          position: absolute;
          top: 7px;
          left: -18px;
          display: block;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background-color: var(--global_clr_gray);
        }

        &>ul>li {
          &:not(:last-child) {
            margin-bottom: var(--margin-xsmall);
          }

          &::before {
            width: 5px;
            height: 5px;
            top: 8px;
          }

          &>ul {
            margin: var(--margin-small) 0px 0px 0px;

            &>li {
              &:not(:last-child) {
                margin-bottom: var(--margin-xsmall);
              }

              &::before {
                width: 5px;
                height: 2px;
                top: 8px;
                border-radius: 0px;
              }
            }
          }
        }
      }
    }

    .guideCp_article_list--number {
      list-style-type: decimal;

      li {
        &::before {
          display: none;
        }
      }
    } 


    /* ストアリスト */
    .guideCp_article_storeList {
      display: flex;
      flex-direction: column;
      gap: var(--margin-medium);
      margin: var(--margin-default) 0px;

      dt {
        font-weight: bold;
        margin-bottom: var(--margin-small);
        border-bottom: 1px solid var(--global_clr_gray);
      }

      dd {
        a {
          color: var(--global_clr_black) !important;
          text-decoration: underline !important;
        }
      }
    }

    /* 注釈文 */
    .guideCp_article_note {
      position: relative;
      display: block;
      font-size: var(--font-size-xsmall);
      margin: var(--margin-small) 0px;
      padding: 0px 0px 0px 1.4em;

      &::before {
        content: '※';
        position: absolute;
        left: 0px;
      }
    }
  }

  /* レスポンシブ 1024px以下 */
  @media screen and (max-width: 1024px) {
    .guideCp_categories {
      gap: var(--margin-default);
    }

    .guideCp_category {
      width: calc((100% - var(--margin-default)) / 2);
    }
  }

  /* レスポンシブ 768px以下 */
  @media screen and (max-width: 768px) {
    .guideCp_main {
      padding: 0px 20px;
    }

    .guideCp_side {
      padding: 0px 20px;
    }

    .guideCp_article {
      padding: 0px 20px;
    }

    .guideCp_jumpLinks {
      .guideCp_jumpLinks_list {
        padding: 10px;

        .guideCp_jumpLinks_list_item {
          a {
            padding: 8px 14px;
            font-size: var(--font-size-small);
          }
        }
      }
    }

    .guideCp_jumpLinks--noHeader {
      .guideCp_jumpLinks_list {
        padding: 0px;
      }
    }

    .guideCp_heading {
      font-size: var(--font-size-large);
    }

    .guideCp_category {
      width: 100%;
    }
  }

  /* ------------------------------ */
  /* ユーティリティ */
  /* ------------------------------ */
  /* マージン */
  .guideCp_utl_mt-default {
    margin-top: var(--margin-default) !important;
  }

  .guideCp_utl_mt-small {
    margin-top: var(--margin-small) !important;
  }

  .guideCp_utl_mt-medium {
    margin-top: var(--margin-medium) !important;
  }

  .guideCp_utl_mt-large {
    margin-top: var(--margin-large) !important;
  }

  .guideCp_utl_mb-default {
    margin-bottom: var(--margin-default) !important;
  }

  .guideCp_utl_mb-small {
    margin-bottom: var(--margin-small) !important;
  }

  .guideCp_utl_mb-medium {
    margin-bottom: var(--margin-medium) !important;
  }

  .guideCp_utl_mb-large {
    margin-bottom: var(--margin-large) !important;
  }

  /* テキストカラー */
  .guideCp_utl_color-red {
    color: var(--global_clr_red) !important;
  }

  /* ポジション */
  .guideCp_utl_center {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .guideCp_utl_right {
    display: block !important;
    margin-left: auto !important;
  }

  /* テーブルスクロール */
  .guideCp_utl_spScroll_note {
    display: none;
  }

  @media screen and (max-width: 1024px) {
    .guideCp_utl_spScroll_note {
      display: block;
      font-weight: bold;
      font-size: var(--font-size-small);
      margin: var(--margin-default) 0px -10px;
      background-color: var(--global_clr_brightgray);
      padding: 4px;
    }

    .guideCp_utl_spScroll {
      overflow-x: scroll;

      .guideCp_article_table {
        width: 1000px;
      }
    }
  }

}