@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique:wght@400;500;700&display=swap');

#wrapper {
  --color-black: #555555;
  --color-green: #039f62;
  --color-green-02: #006835;
  --color-lightgreen: #c6e9bc;
  --color-lightgreen-02: #5da925;
  --color-lightgreen-03: #eaeee8;
  --color-lightgreen-04: #f2f8ec;
  --color-lightgreen-05: #77b094;

  --color-pink: #e5d6e7;
  --color-pink-02: #f6f1f6;
  --color-pink-03: #daabdb;

  --color-blue: #e9f1f5;
  --color-blue-02: #f0f7f9;
  --color-blue-03: #85bad9;

  --color-yellow: #fdf3d3;
  --color-yellow-02: #fdf3d3;
  --color-yellow-03: #edca93;

  --font-zen-antique: "Zen Kaku Gothic Antique", sans-serif;
  --page-font: 16;

  --page-bg-stripe-color: #dce6d2;
  --page-bg-color: #f2f0e8;
  --page-bg-stripe-width: calc(20 / var(--page-font) * 1rem);
  --page-bg-gap-width: calc(30 / var(--page-font) * 1rem);

  /** l-paper-card **/
  --box-bg: #FCF6EB;
  --box-w: calc(948 / var(--page-font) * 1rem);
  --box-top-h: calc(32 / var(--page-font) * 1rem);
  --box-bottom-h: calc(41 / var(--page-font) * 1rem);
  --box-right-w: calc(29 / var(--page-font) * 1rem);
  --box-left-w: calc(19 / var(--page-font) * 1rem);


  /** l-recommend-card **/
  --recommend-bg: #fff;
  --recommend-w: calc(730 / var(--page-font) * 1rem);
  --recommend-top-h: calc(90 / var(--page-font) * 1rem);
  --recommend-bottom-h: calc(58 / var(--page-font) * 1rem);
  --recommend-right-w: calc(22 / var(--page-font) * 1rem);
  --recommend-left-w: calc(28 / var(--page-font) * 1rem);
}

@media all and (min-width: 768px),
print {}

@media all and (max-width: 767px) {
  #wrapper {
    --page-bg-stripe-width: calc(20 / 750 * 100vw);
    --page-bg-gap-width: calc(30 / 750 * 100vw);

    /** l-paper-card **/
    --box-bg: #FCF6EB;
    --box-w: calc(650 / 750 * 100vw);
    --box-top-h: calc(32 / 750 * 100vw);
    --box-bottom-h: calc(41 / 750 * 100vw);
    --box-right-w: calc(29 / 750 * 100vw);
    --box-left-w: calc(19 / 750 * 100vw);

    /** l-recommend-card **/
    --recommend-bg: #fff;
    --recommend-w: calc(560 / 750 * 100vw);
    --recommend-top-h: calc(90 / 750 * 100vw);
    --recommend-bottom-h: calc(58 / 750 * 100vw);
    --recommend-right-w: calc(22 / 750 * 100vw);
    --recommend-left-w: calc(28 / 750 * 100vw);
  }
}

/* --------------------------------------------------------------------------
  非表示
-------------------------------------------------------------------------- */
/* PCで非表示 */
@media all and (min-width: 1025px),
print {
  .u-hide-pc {
    display: none;
  }
}

/* PC、タブレットで非表示 */
@media all and (min-width: 768px),
print {
  .u-hide-tab-pc {
    display: none;
  }
}

/* タブレットのみ非表示 */
@media all and (min-width: 768px) and (max-width: 1024px) {
  .u-hide-tab {
    display: none;
  }
}

/* SPで非表示 */
@media all and (max-width: 767px) {
  .u-hide-sp {
    display: none;
  }
}

@media all and (min-width: 768px),
print {
  .l-shindan-main {
    background: repeating-linear-gradient(90deg,
        var(--page-bg-stripe-color) 0,
        var(--page-bg-stripe-color) var(--page-bg-stripe-width),
        var(--page-bg-color) var(--page-bg-stripe-width),
        var(--page-bg-color) calc(var(--page-bg-stripe-width) + var(--page-bg-gap-width)));

    font-family: var(--font-zen-antique);
  }

  .l-bg-bottom {
    background-color: var(--color-lightgreen);
    padding-top: calc(65 / var(--page-font) * 1rem);
    padding-bottom: calc(150 / var(--page-font) * 1rem);
    margin-top: calc(-176 / var(--page-font) * 1rem);
    margin-bottom: calc(-110 / var(--page-font) * 1rem);
  }


  /**　ページ背景 **/
  .l-paper-card {
    position: relative;
    container-type: inline-size;
    width: min(var(--box-w), 100%);
    min-height: calc(var(--box-top-h) + var(--box-bottom-h) + calc(40 / var(--page-font) * 1rem));
    overflow: hidden;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
  }

  .l-paper-card .l-paper-card__edge-top{
    position: absolute;
    left: 0;
    top:0;
    width: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .l-paper-card .l-paper-card__edge-bottom {
    position: absolute;
    left: 0;
    bottom:0;
    width: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .l-paper-card .l-paper-card__edge-top {
    top: 0;

    /* fallback */
    height: calc(47 / 1366 * 100vw);

    /* container query対応ブラウザ */
    height: 3.4409cqw;

    background-image: url('../img/common/bg_box_top_pc.png');
  }

  .l-paper-card .l-paper-card__edge-bottom {
    bottom: 0;

    /* fallback */
    height: calc(60 / 1366 * 100vw);

    /* container query対応ブラウザ */
    height: 4.4086cqw;

    background-image: url('../img/common/bg_box_bottom_pc.png');
  }

  .l-paper-card .l-paper-card__edge-left,
  .l-paper-card .l-paper-card__edge-right {
    position: absolute;

    /* fallback */
    top: calc(47 / 1366 * 100vw);
    bottom: calc(60 / 1366 * 100vw);

    /* container query対応ブラウザ */
    top: 3.4409cqw;
    bottom: 4.4cqw;

    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .l-paper-card .l-paper-card__edge-right {
    right: 0;

    /* fallback */
    width: calc(43 / 1366 * 100vw);

    /* container query対応ブラウザ */
    width: 3.1183cqw;

    background-image: url('../img/common/bg_box_right_pc.png');
  }

  .l-paper-card .l-paper-card__edge-left {
    left: 0;

    /* fallback */
    width: calc(28 / 1366 * 100vw);

    /* container query対応ブラウザ */
    width: 2.0430cqw;

    background-image: url('../img/common/bg_box_left_pc.png');
  }

  .l-paper-card__content {
    box-sizing: border-box;
    padding:
      calc(26 / var(--page-font) * 1rem) calc(10 / var(--page-font) * 1rem) calc(40 / var(--page-font) * 1rem) calc(12 / var(--page-font) * 1rem);
    overflow: auto;
    line-height: 1.8;
  }

  .l-paper-card__content__inner {
    background: var(--box-bg);
    padding-top: calc(36 / var(--page-font) * 1rem);
    padding-left: calc(40 / var(--page-font) * 1rem);
    padding-right: calc(40 / var(--page-font) * 1rem);
    padding-bottom: calc(36 / var(--page-font) * 1rem);
  }

  [data-result-category="health_occasionally"] .l-paper-card .l-paper-card__edge-top {
    background-image: url('../img/common/bg_box_pink_top_pc.png');
  }
  [data-result-category="health_occasionally"] .l-paper-card .l-paper-card__edge-bottom {
    background-image: url('../img/common/bg_box_pink_bottom_pc.png');
  }
  [data-result-category="health_occasionally"] .l-paper-card .l-paper-card__edge-right {
    background-image: url('../img/common/bg_box_pink_right_pc.png');
  }
  [data-result-category="health_occasionally"] .l-paper-card .l-paper-card__edge-left {
    background-image: url('../img/common/bg_box_pink_left_pc.png');
  }

  [data-result-category="taste_everyday"] .l-paper-card .l-paper-card__edge-top {
    background-image: url('../img/common/bg_box_blue_top_pc.png');
  }
  [data-result-category="taste_everyday"] .l-paper-card .l-paper-card__edge-bottom {
    background-image: url('../img/common/bg_box_blue_bottom_pc.png');
  }
  [data-result-category="taste_everyday"] .l-paper-card .l-paper-card__edge-right {
    background-image: url('../img/common/bg_box_blue_right_pc.png');
  }
  [data-result-category="taste_everyday"] .l-paper-card .l-paper-card__edge-left {
    background-image: url('../img/common/bg_box_blue_left_pc.png');
  }

  [data-result-category="taste_occasionally"] .l-paper-card .l-paper-card__edge-top {
    background-image: url('../img/common/bg_box_yellow_top_pc.png');
  }
  [data-result-category="taste_occasionally"] .l-paper-card .l-paper-card__edge-bottom {
    background-image: url('../img/common/bg_box_yellow_bottom_pc.png');
  }
  [data-result-category="taste_occasionally"] .l-paper-card .l-paper-card__edge-right {
    background-image: url('../img/common/bg_box_yellow_right_pc.png');
  }
  [data-result-category="taste_occasionally"] .l-paper-card .l-paper-card__edge-left {
    background-image: url('../img/common/bg_box_yellow_left_pc.png');
  }

  /** **/
  .l-recommend-card {
    position: relative;
    container-type: inline-size;
    width: min(var(--recommend-w), 100%);
    min-height: calc(var(--recommend-top-h) + var(--recommend-bottom-h) + calc(40 / var(--page-font) * 1rem));
    overflow: hidden;
    box-sizing: border-box;
    margin-top: calc(30 / var(--page-font) * 1rem);
    margin-left: auto;
    margin-right: auto;
  }

  .l-recommend-card .l-recommend-card__edge-top {
    position: absolute;
    left: 0;
    width: 100%;
    background-position: top left calc(-2.15 / var(--page-font) * 1rem);
    background-repeat: no-repeat;
    background-size: calc(100% + calc(2.15 / var(--page-font) * 1rem)) auto;
  }

  .l-recommend-card .l-recommend-card__edge-bottom {
    position: absolute;
    left: 0;
    width: 100%;
    background-position: top left calc(0 / var(--page-font) * 1rem);
    background-repeat: no-repeat;
    background-size: calc(100% + calc(1 / var(--page-font) * 1rem)) auto;
    z-index:10;
  }

  .l-recommend-card .l-recommend-card__edge-top {
    top: 0;

    /* fallback */
    height: calc(90 / 1366 * 100vw);

    /* container query対応ブラウザ */
    height: 8.5886cqw;

    background-image: url('../img/common/bg_recommend_top_pc.png');
  }

  .l-recommend-card .l-recommend-card__edge-bottom {
    bottom: 0;

    /* fallback */
    height: calc(58 / 1366 * 100vw);

    /* container query対応ブラウザ */
    height: 8.246cqw;

    background-image: url('../img/common/bg_recommend_bottom_pc.png');
  }

  .l-recommend-card .l-recommend-card__edge-left,
  .l-recommend-card .l-recommend-card__edge-right {
    position: absolute;

    /* fallback */
    top: calc(90 / 1366 * 100vw);
    bottom: calc(58 / 1366 * 100vw);

    /* container query対応ブラウザ */
    top: 6.5886cqw;
    bottom: 4.2460cqw;

    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .l-recommend-card .l-recommend-card__edge-right {
    right: 0;

    /* fallback */
    width: calc(22 / 1366 * 100vw);

    /* container query対応ブラウザ */
    width: 2.6105cqw;

    background-image: url('../img/common/bg_recommend_right_pc.png');
  }

  .l-recommend-card .l-recommend-card__edge-left {
    left: 0;

    /* fallback */
    width: calc(28 / 1366 * 100vw);

    /* container query対応ブラウザ */
    width: 3.9cqw;

    background-image: url('../img/common/bg_recommend_left_pc.png');
  }

  .l-recommend-card__content {
    box-sizing: border-box;
    padding:
      calc(26 / var(--page-font) * 1rem) calc(10 / var(--page-font) * 1rem) calc(28 / var(--page-font) * 1rem) calc(12 / var(--page-font) * 1rem);
    overflow: auto;
    line-height: 1.8;
  }

  .l-recommend-card__content__inner {
    background: var(--recommend-bg);
    padding-top: calc(36 / var(--page-font) * 1rem);
    padding-right: calc(60 / var(--page-font) * 1rem);
    padding-bottom: calc(36 / var(--page-font) * 1rem);
    padding-left: calc(60 / var(--page-font) * 1rem);
  }

  [data-result-category="health_occasionally"] .l-recommend-card .l-recommend-card__edge-top {
    background-image: url('../img/common/bg_recommend_pink_top_pc.png');
  }
  [data-result-category="health_occasionally"] .l-recommend-card .l-recommend-card__edge-bottom {
    background-image: url('../img/common/bg_recommend_pink_bottom_pc.png');
  }
  [data-result-category="health_occasionally"] .l-recommend-card .l-recommend-card__edge-right {
    background-image: url('../img/common/bg_recommend_pink_right_pc.png');
  }
  [data-result-category="health_occasionally"] .l-recommend-card .l-recommend-card__edge-left {
    background-image: url('../img/common/bg_recommend_pink_left_pc.png');
  }

  [data-result-category="taste_everyday"] .l-recommend-card .l-recommend-card__edge-top {
    background-image: url('../img/common/bg_recommend_blue_top_pc.png');
  }
  [data-result-category="taste_everyday"] .l-recommend-card .l-recommend-card__edge-bottom {
    background-image: url('../img/common/bg_recommend_blue_bottom_pc.png');
  }
  [data-result-category="taste_everyday"] .l-recommend-card .l-recommend-card__edge-right {
    background-image: url('../img/common/bg_recommend_blue_right_pc.png');
  }
  [data-result-category="taste_everyday"] .l-recommend-card .l-recommend-card__edge-left {
    background-image: url('../img/common/bg_recommend_blue_left_pc.png');
  }

  [data-result-category="taste_occasionally"] .l-recommend-card .l-recommend-card__edge-top {
    background-image: url('../img/common/bg_recommend_yellow_top_pc.png');
  }
  [data-result-category="taste_occasionally"] .l-recommend-card .l-recommend-card__edge-bottom {
    background-image: url('../img/common/bg_recommend_yellow_bottom_pc.png');
  }
  [data-result-category="taste_occasionally"] .l-recommend-card .l-recommend-card__edge-right {
    background-image: url('../img/common/bg_recommend_yellow_right_pc.png');
  }
  [data-result-category="taste_occasionally"] .l-recommend-card .l-recommend-card__edge-left {
    background-image: url('../img/common/bg_recommend_yellow_left_pc.png');
  }
}


@media all and (max-width: 767px) {
  .mc-breadcrumb__content {
    display: flex;
    flex-direction: column;
  }

  .l-shindan-main {
    background: repeating-linear-gradient(90deg,
        var(--page-bg-stripe-color) 0,
        var(--page-bg-stripe-color) var(--page-bg-stripe-width),
        var(--page-bg-color) var(--page-bg-stripe-width),
        var(--page-bg-color) calc(var(--page-bg-stripe-width) + var(--page-bg-gap-width)));

    font-family: var(--font-zen-antique);
  }

  .l-bg-bottom {
    background-color: var(--color-lightgreen);
    padding-top: calc(226 / 750 * 100vw);
    padding-bottom: calc(135 / 750 * 100vw);
    margin-top: calc(-210 / 750 * 100vw);
    margin-bottom: calc(-110 / 750 * 100vw);
  }


  /**　ページ背景 **/
  .l-paper-card {
    position: relative;
    container-type: inline-size;
    width: min(var(--box-w), 100%);
    min-height: calc(var(--box-top-h) + var(--box-bottom-h) + calc(40 / var(--page-font) * 1rem));
    overflow: hidden;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
  }

  .l-paper-card .l-paper-card__edge-top{
    position: absolute;
    left: 0;
    top:0;
    width: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .l-paper-card .l-paper-card__edge-bottom {
    position: absolute;
    left: 0;
    bottom:0;
    width: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .l-paper-card .l-paper-card__edge-top {
    top: 0;
    height: 3.4409cqw;
    background-image: url('../img/common/bg_box_top_pc.png');
  }

  .l-paper-card .l-paper-card__edge-bottom {
    bottom: 0;
    height: 4.4086cqw;
    background-image: url('../img/common/bg_box_bottom_pc.png');
  }

  .l-paper-card .l-paper-card__edge-left,
  .l-paper-card .l-paper-card__edge-right {
    position: absolute;
    top: 3.4409cqw;
    bottom: 4.4086cqw;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .l-paper-card .l-paper-card__edge-right {
    right: 0;
    width: 3.1183cqw;
    background-image: url('../img/common/bg_box_right_pc.png');
  }

  .l-paper-card .l-paper-card__edge-left {
    left: 0;
    width: 2.0430cqw;
    background-image: url('../img/common/bg_box_left_pc.png');
  }

  .l-paper-card__content {
    box-sizing: border-box;
    padding: calc(20 / 750 * 100vw) calc(10 / 750 * 100vw) calc(26 / 750 * 100vw) calc(12 / 750 * 100vw);
    overflow: auto;
    line-height: 1.8;
  }

  .l-paper-card__content__inner {
    background: var(--box-bg);
    padding-top: calc(36 / 750 * 100vw);
    padding-left: calc(15 / 750 * 100vw);
    padding-right: calc(15 / 750 * 100vw);
    padding-bottom: calc(36 / 750 * 100vw);
  }

  [data-result-category="health_occasionally"] .l-paper-card .l-paper-card__edge-top {
    background-image: url('../img/common/bg_box_pink_top_pc.png');
  }
  [data-result-category="health_occasionally"] .l-paper-card .l-paper-card__edge-bottom {
    background-image: url('../img/common/bg_box_pink_bottom_pc.png');
  }
  [data-result-category="health_occasionally"] .l-paper-card .l-paper-card__edge-right {
    background-image: url('../img/common/bg_box_pink_right_pc.png');
  }
  [data-result-category="health_occasionally"] .l-paper-card .l-paper-card__edge-left {
    background-image: url('../img/common/bg_box_pink_left_pc.png');
  }

  [data-result-category="taste_everyday"] .l-paper-card .l-paper-card__edge-top {
    background-image: url('../img/common/bg_box_blue_top_pc.png');
  }
  [data-result-category="taste_everyday"] .l-paper-card .l-paper-card__edge-bottom {
    background-image: url('../img/common/bg_box_blue_bottom_pc.png');
  }
  [data-result-category="taste_everyday"] .l-paper-card .l-paper-card__edge-right {
    background-image: url('../img/common/bg_box_blue_right_pc.png');
  }
  [data-result-category="taste_everyday"] .l-paper-card .l-paper-card__edge-left {
    background-image: url('../img/common/bg_box_blue_left_pc.png');
  }

  [data-result-category="taste_occasionally"] .l-paper-card .l-paper-card__edge-top {
    background-image: url('../img/common/bg_box_yellow_top_pc.png');
  }
  [data-result-category="taste_occasionally"] .l-paper-card .l-paper-card__edge-bottom {
    background-image: url('../img/common/bg_box_yellow_bottom_pc.png');
  }
  [data-result-category="taste_occasionally"] .l-paper-card .l-paper-card__edge-right {
    background-image: url('../img/common/bg_box_yellow_right_pc.png');
  }
  [data-result-category="taste_occasionally"] .l-paper-card .l-paper-card__edge-left {
    background-image: url('../img/common/bg_box_yellow_left_pc.png');
  }


  /** **/
  .l-recommend-card {
    position: relative;
    container-type: inline-size;
    width: min(var(--recommend-w), 100%);
    min-height: calc(var(--recommend-top-h) + var(--recommend-bottom-h) + calc(40 / var(--page-font) * 1rem));
    overflow: hidden;
    box-sizing: border-box;
    margin-top: calc(30 / 750 * 100vw);
    margin-left: auto;
    margin-right: auto;
  }

  .l-recommend-card .l-recommend-card__edge-top{
    position: absolute;
    left: 0;
    width: 100%;
    background-position: top left calc(-3.7 / 750 * 100vw);
    background-repeat: no-repeat;
    background-size: calc(100% + calc(3.7 / 750 * 100vw)) auto;
  }
  .l-recommend-card .l-recommend-card__edge-bottom {
    position: absolute;
    left: 0;
    width: 100%;
    background-position: top left calc(0 / 750 * 100vw);
    background-repeat: no-repeat;
    background-size: calc(100% + calc(0.5 / 750 * 100vw)) auto;
    z-index:10;
  }

  .l-recommend-card .l-recommend-card__edge-top {
    top: 0;
    height: 5.4409cqw;
    background-image: url('../img/common/bg_recommend_top_pc.png');
  }

  .l-recommend-card .l-recommend-card__edge-bottom {
    bottom: 0;
    height: 8.4086cqw;
    background-image: url('../img/common/bg_recommend_bottom_pc.png');
  }

  .l-recommend-card .l-recommend-card__edge-left,
  .l-recommend-card .l-recommend-card__edge-right {
    position: absolute;
    top: 3.4409cqw;
    bottom: 4.4086cqw;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .l-recommend-card .l-recommend-card__edge-right {
    right: 0;
    width: 3.1183cqw;
    background-image: url('../img/common/bg_recommend_right_pc.png');
  }

  .l-recommend-card .l-recommend-card__edge-left {
    left: 0;
    width: 4cqw;
    background-image: url('../img/common/bg_recommend_left_pc.png');
  }

  .l-recommend-card__content {
    box-sizing: border-box;
    padding: calc(20 / 750 * 100vw) calc(10 / 750 * 100vw) calc(20 / 750 * 100vw) calc(12 / 750 * 100vw);
    overflow: auto;
    line-height: 1.8;
  }

  .l-recommend-card__content__inner {
    background: var(--recommend-bg);
    padding-top: calc(15 / 750 * 100vw);
    padding-left: calc(47 / 750 * 100vw);
    padding-right: calc(47 / 750 * 100vw);
    padding-bottom: calc(36 / 750 * 100vw);
  }

  [data-result-category="health_occasionally"] .l-recommend-card .l-recommend-card__edge-top {
    background-image: url('../img/common/bg_recommend_pink_top_pc.png');
  }
  [data-result-category="health_occasionally"] .l-recommend-card .l-recommend-card__edge-bottom {
    background-image: url('../img/common/bg_recommend_pink_bottom_pc.png');
  }
  [data-result-category="health_occasionally"] .l-recommend-card .l-recommend-card__edge-right {
    background-image: url('../img/common/bg_recommend_pink_right_pc.png');
  }
  [data-result-category="health_occasionally"] .l-recommend-card .l-recommend-card__edge-left {
    background-image: url('../img/common/bg_recommend_pink_left_pc.png');
  }

  [data-result-category="taste_everyday"] .l-recommend-card .l-recommend-card__edge-top {
    background-image: url('../img/common/bg_recommend_blue_top_pc.png');
  }
  [data-result-category="taste_everyday"] .l-recommend-card .l-recommend-card__edge-bottom {
    background-image: url('../img/common/bg_recommend_blue_bottom_pc.png');
  }
  [data-result-category="taste_everyday"] .l-recommend-card .l-recommend-card__edge-right {
    background-image: url('../img/common/bg_recommend_blue_right_pc.png');
  }
  [data-result-category="taste_everyday"] .l-recommend-card .l-recommend-card__edge-left {
    background-image: url('../img/common/bg_recommend_blue_left_pc.png');
  }

  [data-result-category="taste_occasionally"] .l-recommend-card .l-recommend-card__edge-top {
    background-image: url('../img/common/bg_recommend_yellow_top_pc.png');
  }
  [data-result-category="taste_occasionally"] .l-recommend-card .l-recommend-card__edge-bottom {
    background-image: url('../img/common/bg_recommend_yellow_bottom_pc.png');
  }
  [data-result-category="taste_occasionally"] .l-recommend-card .l-recommend-card__edge-right {
    background-image: url('../img/common/bg_recommend_yellow_right_pc.png');
  }
  [data-result-category="taste_occasionally"] .l-recommend-card .l-recommend-card__edge-left {
    background-image: url('../img/common/bg_recommend_yellow_left_pc.png');
  }
}


/* --------------------------------------------------------------------------
バナーリスト
-------------------------------------------------------------------------- */

@media all and (min-width: 768px), print {
  .c-banner {
    position: relative;
    z-index: 1;
    background: var(--c-white);
    padding-block-start: calc(15 / var(--page-font) * 1rem);
    padding-block-end: calc(100 / var(--page-font) * 1rem);
  }

  .c-banner::before {
    content: "";
    display: block;
    width: 100%;
    padding-top: calc(192 / var(--page-font) * 1rem);
    -webkit-mask: url("/assets_v2/img/top/deco_bg.svg") no-repeat center / calc(2560 / var(--page-font) * 1rem);
    mask: url("/assets_v2/img/top/deco_bg.svg") no-repeat center / calc(2560 / var(--page-font) * 1rem);
    background: var(--c-white);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-top: calc(-114 / var(--page-font) * 1rem);
    z-index: -1;
  }

  .c-banner__catch {
    display: grid;
    grid-template-columns: calc(23 / var(--page-font) * 1rem) auto calc(23 / var(--page-font) * 1rem);
    justify-content: center;
    align-items: center;
    gap: calc(7 / var(--page-font) * 1rem);
  }

  .c-banner__catch-text {
    letter-spacing: 0.04em;
    font-family: var(--font-zen-kaku-antique);
    font-weight: 700;
    font-size: calc(24 / var(--page-font) * 1rem);
    color: #dd522a;
  }

  .c-banner__catch-icon {
    background-image: url("data:image/svg+xml;base64,PHN2ZyAKIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIgogd2lkdGg9IjIyLjVweCIgaGVpZ2h0PSIyNy41cHgiPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiICBzdHJva2U9InJnYigyMjIsIDgyLCA0MikiIHN0cm9rZS13aWR0aD0iM3B4IiBzdHJva2UtZGFzaGFycmF5PSIxLjUsIDYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIgZmlsbD0icmdiKDEsIDEwMSwgNjIpIgogZD0iTTMuNTAwLDMuNTAwIEwxOC42MjcsMjQuNDk1ICIvPgo8L3N2Zz4=");
    background-size: contain;
    width: 100%;
    height: auto;
    aspect-ratio: 18/23;
  }

  .c-banner__catch-icon._left_ {
    margin-block-start: calc(1 / var(--page-font) * 1rem);
  }

  .c-banner__catch-icon._right_ {
    margin-block-start: calc(1 / var(--page-font) * 1rem);
    margin-inline-start: calc(-20 / var(--page-font) * 1rem);
    transform: scaleX(-1);
  }

  .c-banner__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: calc(10 / var(--page-font) * 1rem);
    margin-block-start: calc(29 / var(--page-font) * 1rem);
  }

  .c-banner__item {
    max-width: calc(342 / var(--page-font) * 1rem);
  }

  .c-banner__link{
    transition:0.3s ease;
  }
  .c-banner__link:hover{
    opacity:0.7;
  }
}

@media all and (max-width: 767px) {
  /* --------------------------------------------------------------------------
  バナーリスト
  -------------------------------------------------------------------------- */
  .c-banner {
    position: relative;
    z-index: 1;
    background: var(--c-white);
    padding-block-start: calc(60 / 750 * 100vw);
    padding-block-end: calc(50 / 750 * 100vw);
  }

  .c-banner::before {
    content: "";
    display: block;
    width: 100%;
    padding-top: calc(48.5 / 375 * 100vw);
    -webkit-mask: url("/assets_v2/img/top/deco_bg_sp.svg") no-repeat center bottom / 100vw;
    mask: url("/assets_v2/img/top/deco_bg_sp.svg") no-repeat center bottom / 100vw;
    background: var(--c-white);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-top: calc(-20 / 375 * 100vw);
    z-index: -1;
  }

  .c-banner__catch {
    display: grid;
    grid-template-columns: calc(30 / 750 * 100vw) auto calc(30 / 750 * 100vw);
    justify-content: center;
    align-items: center;
    gap: calc(10 / 750 * 100vw);
  }

  .c-banner__catch-text {
    letter-spacing: 0.04em;
    font-family: var(--font-zen-kaku-antique);
    font-weight: 700;
    font-size: calc(32 / 750 * 100vw);
    color: #dd522a;
  }

  .c-banner__catch-icon {
    background-image: url("data:image/svg+xml;base64,PHN2ZyAKIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIgogd2lkdGg9IjIyLjVweCIgaGVpZ2h0PSIyNy41cHgiPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiICBzdHJva2U9InJnYigyMjIsIDgyLCA0MikiIHN0cm9rZS13aWR0aD0iM3B4IiBzdHJva2UtZGFzaGFycmF5PSIxLjUsIDYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIgZmlsbD0icmdiKDEsIDEwMSwgNjIpIgogZD0iTTMuNTAwLDMuNTAwIEwxOC42MjcsMjQuNDk1ICIvPgo8L3N2Zz4=");
    background-size: contain;
    width: 100%;
    height: auto;
    aspect-ratio: 18/23;
  }

  .c-banner__catch-icon._left_ {
    margin-block-start: calc(2 / 750 * 100vw);
  }

  .c-banner__catch-icon._right_ {
    margin-block-start: calc(2 / 750 * 100vw);
    margin-inline-start: calc(-26 / 750 * 100vw);
    transform: scaleX(-1);
  }

  .c-banner__list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: calc(10 / 750 * 100vw);
    margin-block-start: calc(60 / 750 * 100vw);
  }

  .c-banner__item {
    max-width: calc(420 / 750 * 100vw);
  }
}