@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Akshar:wght@300..700&family=Cabin:ital,wght@0,400..700;1,400..700&family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&family=Zen+Maru+Gothic:wght@300;400;500;700;900&family=Zen+Old+Mincho:wght@400;500;600;700;900&display=swap");
/* =====================================================
   1. リセット・基本設定（全体に影響）
   ※ 原則ここは触らない
===================================================== */
.coodinate, .coodinate *, .coodinate *::before, .coodinate *::after {
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
/* 大枠 */
html, body {
  height: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
  -webkit-overflow-scrolling: touch !important;
  -moz-osx-font-smoothing: grayscale;
}
.st-Breadcrumbs{
    margin: 0 3.6vw 10px 0;
}
.coodinate {
  font-size: 14px;
  font-size: clamp(14px, 3.9vw, 16px);
  line-height: 1.9;
  color: #000;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
}
@media screen and (min-width: 769px) {
  .coodinate {
    font-size: 16px;
  }
}
@media print {
  html, html body {
    overflow: visible !important;
  }
}
.coodinate h2, .coodinate h3 {
  color: #000;
}
/* アクセシビリティ */
/* =====================================================
   2. 画像・リンク（共通）
===================================================== */
.coodinate img {
  image-rendering: -webkit-optimize-contrast;
  max-width: 100%;
  /*  height: auto;*/
  vertical-align: bottom;
  -webkit-box-shadow: #000 0 0 0;
  box-shadow: #000 0 0 0;
  /* ロールオーバー対応 */
}
.coodinate img, x:-moz-any-link, x:default {
  box-shadow: #000 0 0 0;
  /* IE7対応 */
}
/* リンク */
.coodinate a {
  display: inline-block;
}
.coodinate a:link, a:visited, a:active {
  color: inherit;
  text-decoration: none;
}
@media screen and (min-width: 769px) {
  a:hover {
    color: inherit;
    opacity: 0.7;
    text-decoration: none !important;
  }
}
/* =====================================================
   3. レイアウト共通（.inner 等）
===================================================== */
.inner {
  width: 100%;
  max-width: 1024px;
  padding: 0 15px;
  margin: 0 auto;
  position: relative;
}
/* =====================================================
   4. PC / SP 出し分け（.pc / .sp）
===================================================== */
.pc {
  display: none;
}
@media screen and (min-width: 769px) {
  .pc {
    display: block;
  }
}
.sp {
  display: block;
}
@media screen and (min-width: 769px) {
  .sp {
    display: none;
  }
}
/* ▼▼▼ コンテンツ
====================================================== */
/* =====================================================
   5. メインビジュアル（MV）
===================================================== */
h1.main_img {
  max-width: 100%;
  border: none;
}
/* =====================================================
   6. リード文（#lead）
===================================================== */
#lead {
  position: relative;
  margin-bottom: 30px;
}
@media screen and (min-width: 769px) {
  #lead {
    margin-bottom: 40px;
  }
  #lead .inner {
    z-index: 1;
  }
}
#lead::after {
  position: absolute;
  content: "";
  background: url(/lp/coordinate/25ss/images/shape01.webp) no-repeat center/contain;
  width: 115px;
  height: 93px;
  top: 20px;
  right: 0;
  z-index: -1;
}
@media screen and (min-width: 769px) {
  #lead::after {
    width: 181px;
    height: 156px;
    top: -60px;
    right: 25%;
    z-index: 0;
  }
}
#lead .txt_center {
  text-align: center;
  letter-spacing: 0.08em;
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  font-style: normal;
}
/* =====================================================
   7. アンカー（Style01〜への導線）
===================================================== */
.anchor {
  position: relative;
  padding-top: 40px;
}
.anchor::before {
  position: absolute;
  content: "";
  background: url(/lp/coordinate/25aw/images/tops_style.png) no-repeat center/contain;
  aspect-ratio: 336/49;
  width: 80%;
  top: 0;
  left: 50%;
  translate: -50%;
  z-index: 0;
}
@media screen and (min-width: 769px) {
  .anchor::before {
    width: 440px;
    top: -20px;
  }
}
.anchor.anc_btm {
  padding-bottom: 100px;
  margin-top: 20px;
}
@media screen and (min-width: 769px) {
  .anchor.anc_btm {
    margin-top: 100px;
  }
}
@media screen and (min-width: 769px) {
  .anchor .inner {
    position: relative;
  }
  .anchor .inner::after {
    position: absolute;
    content: "";
    background: url(/lp/coordinate/25ss/images/shape_anchor.webp) no-repeat center/contain;
    width: 217px;
    height: 140px;
    bottom: 0;
    left: -50px;
    z-index: 0;
  }
}
.anchor .anchor_list {
  position: relative;
  top: -15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 35px 30px;
}
@media screen and (min-width: 769px) {
  .anchor .anchor_list {
    gap: 20px 38px;
    max-width: 660px;
    margin: 0 auto;
  }
}
.anchor .anchor_list li {
  width: calc(50% - 15px);
}
@media screen and (min-width: 769px) {
  .anchor .anchor_list li {
    width: calc(33.3333333333% - 26px);
  }
}
.anchor .anchor_list li a {
  position: relative;
}
@media screen and (min-width: 769px) {
  .anchor .anchor_list li a {
    -webkit-transition: -webkit-transform 0.2s ease-in-out;
    transition: -webkit-transform 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
  }
  .anchor .anchor_list li a:hover {
    opacity: 1;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }
}
.anchor .anchor_list li a .txt_img {
  position: absolute;
  top: 23%;
  right: 4.5%;
  width: 21px;
  z-index: 10;
}
@media screen and (min-width: 769px) {
  .anchor .anchor_list li a .txt_img {
    width: 26px;
  }
}
.anchor .anchor_list li .anc_txt {
  text-align: center;
  font-size: 14px;
  font-size: clamp(14px, 3.4vw, 16px);
  font-weight: 500;
  line-height: 2.8;
  position: relative;
}
@media screen and (min-width: 769px) {
  .anchor .anchor_list li .anc_txt {
    font-size: 14px;
  }
}
.anchor .anchor_list li .anc_txt::before, .anchor .anchor_list li .anc_txt::after {
  position: absolute;
  content: "";
  background: url(/lp/coordinate/25ss/images/bracket.svg) no-repeat center/contain;
  width: 3px;
  height: 19px;
  top: 50%;
  left: 10px;
  translate: 0 -50%;
}
@media screen and (min-width: 769px) {
  .anchor .anchor_list li .anc_txt::before, .anchor .anchor_list li .anc_txt::after {
    height: 22px;
    left: 20px;
  }
}
.anchor .anchor_list li .anc_txt::after {
  left: auto;
  right: 10px;
  rotate: 180deg;
}
@media screen and (min-width: 769px) {
  .anchor .anchor_list li .anc_txt::after {
    right: 20px;
  }
}
.anchor .anchor_list li .anc_txt span {
  letter-spacing: 0;
  position: relative;
  padding-right: 6px;
}
.anchor .anchor_list li .anc_txt span::after {
  position: absolute;
  content: "";
  background: url(/lp/coordinate/25ss/images/arrow.svg) no-repeat center/contain;
  width: 15px;
  height: 15px;
  top: 50%;
  right: -20px;
  translate: 0 -50%;
}
@media screen and (min-width: 769px) {
  .anchor .anchor_list li .anc_txt span::after {
    width: 18px;
    height: 18px;
  }
}
.anchor.anc_btm .anchor_list li .anc_txt span::after {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
/* =====================================================
   8. Style セクション共通（#styles 配下）
===================================================== */
#styles .style_main .style_content .inner .style_main_visual {
  width: 100%;
  margin: 0 auto;
}
@media screen and (min-width: 769px) {
  #styles .style_main .style_content .inner .style_main_visual {
    width: 55%;
  }
}
#styles .style_main {
  position: relative;
  padding: 142px 0 40px;
  z-index: 0;
}
#styles #style01 .style_main {
  background-image: linear-gradient(135deg, #9ebac5, #d4dee2 35%, #f3f3f3);
}
#styles #style02 .style_main {
  background-image: linear-gradient(135deg, #e2c8cd, #ede5e6 30%, #f1f1f1);
}
#styles #style03 .style_main {
  background-image: linear-gradient(135deg, #dfbb9d, #ebe1da 30%, #f1f1f1);
}
#styles #style04 .style_main {
  background-image: linear-gradient(135deg, #c1cead, #e2e4db 30%, #f1f1f1);
}
#styles #style05 .style_main {
  background-image: linear-gradient(135deg, #ddd08b, #eae6d4 30%, #f1f1f1);
}
#styles #style06 .style_main {
  background-image: linear-gradient(135deg, #c0a2c7, #e3dae4 30%, #f1f1f1);
}
#styles .style_main::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 142px;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 100% 0%, 0 100%);
  z-index: 1;
}
#styles .style_main::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: calc(63% - 142px);
  background: #fff;
  z-index: -1;
}
@media screen and (min-width: 769px) {
  #styles .style_main {
    padding: 210px 0 60px;
  }
  #styles .style_main::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 210px;
    background: #fff;
    clip-path: polygon(0 0, 100% 0, 100% 0%, 0 100%);
    z-index: 1;
  }
  #styles .style_main::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: calc(42% - 60px);
    background: #fff;
    z-index: -1;
  }
}
#styles .style_wrap {
  position: relative;
  padding-top: 40px;
}
@media screen and (min-width: 769px) {
  #styles .style_wrap {
    padding-top: 60px;
  }
}
#styles .style_content {
  position: relative;
}
#styles .style_content::before {
  content: "";
  position: absolute;
  aspect-ratio: 374/312;
  top: -140px;
  right: 0;
  height: auto;
  width: 150px;
}
@media screen and (min-width: 769px) {
  #styles .style_content::before {
    width: 350px;
    top: -211px;
    right: 0;
  }
}
#styles .style_content .style_ttl {
  border-bottom: 1px solid #000;
  margin-bottom: 20px;
}
@media screen and (min-width: 769px) {
  #styles .style_content .style_ttl {
    border: none;
    text-align: center;
  }
}
@media screen and (min-width: 769px) {
  #styles .style_content .style_ttl .ttl_bdr {
    padding-bottom: 5px;
    border-bottom: 1px solid #000;
  }
}
#styles .style_content .style_ttl p {
  text-align: center;
}
@media screen and (min-width: 769px) {
  #styles .style_content .style_ttl p {
    display: inline-block;
  }
}
#styles .style_content .style_ttl .style_num {
  width: 100%;
}
@media screen and (min-width: 769px) {
  #styles .style_content .style_ttl .style_num {
    max-width: 107px;
  }
}
#styles .style_content .style_ttl .style_num img {
  padding-bottom: 5px;
  max-width: 65px;
}
@media screen and (min-width: 769px) {
  #styles .style_content .style_ttl .style_num img {
    max-width: 100%;
  }
}
#styles .style_content .style_ttl .style_catch {
  font-size: 18px;
    font-size: clamp(18px, 4.6vw, 20px);
  margin: 0;
  letter-spacing: 0.08em;
  padding-bottom: 4px;
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  font-style: normal;
}
@media screen and (min-width: 769px) {
  #styles .style_content .style_ttl .style_catch {
    font-size: 23px;
    padding-left: 30px;
    display: inline-block;
  }
}
#styles .style_content .slide_wrap {
  display: block;
}
@media screen and (min-width: 769px) {
  #styles .style_content .slide_wrap {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
  }
}
#styles .style_content .main_slide_wrap {
  width: 68%;
  position: relative;
  margin: 0 auto;
}
@media screen and (min-width: 769px) {
  #styles .style_content .main_slide_wrap {
    width: 40%;
  }
}
#styles .style_content .main_slide_wrap .swiper-button-prev, #styles .style_content .main_slide_wrap .swiper-button-next {
  border: none;
  outline: none;
  color: inherit;
  position: absolute;
  top: 50%;
  z-index: 10;
  width: 28px;
  height: 28px;
}
@media screen and (min-width: 769px) {
  #styles .style_content .main_slide_wrap .swiper-button-prev, #styles .style_content .main_slide_wrap .swiper-button-next {
    width: 38px;
    height: 38px;
  }
}
#styles .style_content .main_slide_wrap .swiper-button-prev {
  left: -12px;
}
@media screen and (min-width: 769px) {
  #styles .style_content .main_slide_wrap .swiper-button-prev {
    left: -18px;
  }
}
#styles .style_content .main_slide_wrap .swiper-button-next {
  right: -12px;
}
@media screen and (min-width: 769px) {
  #styles .style_content .main_slide_wrap .swiper-button-next {
    right: -18px;
  }
}
#styles .style_content .main_slide_wrap .swiper-button-next:after, #styles .style_content .main_slide_wrap .swiper-button-prev:after {
  content: "";
  display: inline-block;
  background: url(/lp/coordinate/25ss/images/arrow_slide.svg) center/contain no-repeat;
  width: 28px;
  height: 28px;
}
@media screen and (min-width: 769px) {
  #styles .style_content .main_slide_wrap .swiper-button-next:after, #styles .style_content .main_slide_wrap .swiper-button-prev:after {
    width: 38px;
    height: 38px;
  }
}
#styles .style_content .main_slide_wrap .swiper-button-next:after {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
#styles .style_content .main_slide {
  width: 100%;
  margin: 0;
  border: 1px solid #000;
  border-radius: 8px;
}
#styles .style_content .main_slide .swiper-slide img {
  width: 100%;
}
#styles .style_content .right_content {
  width: 100%;
  margin: 0 auto;
  position: relative;
  margin-top: 40px;
}
@media screen and (min-width: 769px) {
  #styles .style_content .right_content {
    width: calc(60% - 30px);
    margin-top: 0px;
  }
}
#styles .detail_wrap {
  position: relative;
  top: -20px;
}
@media screen and (min-width: 769px) {
  #styles .detail_wrap {
    padding-top: 35px;
    top: 0;
  }
}
#styles .style_content .inner .detail_ttl {
  font-size: 20px;
    font-size: clamp(20px, 5.0vw, 22px);
  margin-bottom: 10px;
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  font-style: normal;
  text-align: center;
}
@media screen and (min-width: 769px) {
  #styles .style_content .inner .detail_ttl {
    font-size: 24px;
  }
}
@media screen and (min-width: 769px) {
  #styles .detail_wrap .detail_ttl {
    font-size: 24px;
    font-family: "Zen Old Mincho", serif;
    font-weight: 500;
    font-style: normal;
    margin-bottom: 30px;
    text-align: center;
  }
}
#styles .detail_wrap .detail_box {
  position: relative;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  opacity: 0;
  -webkit-transition: opacity 0.1s ease-in-out;
  transition: opacity 0.1s ease-in-out;
  display: none;
}
@media screen and (min-width: 769px) {
  #styles .detail_wrap .detail_box {
    max-width: 100%;
    padding-left: 5%;
  }
}
#styles .detail_wrap .detail_box .img {
  max-width: 194px;
}
@media screen and (min-width: 769px) {
  #styles .detail_wrap .detail_box .img {
    max-width: 310px;
  }
}
#styles .detail_wrap .detail_txt {
  position: absolute;
  width: max-content;
  max-width: 240px;
}
#styles .detail_wrap .detail_txt .name {
  font-size: 14px; 
  font-size: clamp(14px, calc(8.18px + 1.82vw), 16px);
  font-weight: 400;
  line-height: 1.2;
}
@media screen and (min-width: 769px) {
  #styles .detail_wrap .detail_txt .name {
    font-size: 16px;
  }
}
#styles .detail_wrap .detail_txt .page-Campaign_Price {
  font-size: 18px;
  font-weight: 900;
  line-height: 1.6;
  margin-bottom: 8px;
}
@media screen and (min-width: 769px) {
  #styles .detail_wrap .detail_txt .page-Campaign_Price {
    margin-bottom: 0px;
    font-size: 20px;
  }
}
#styles .recommend-item_btn {
  font-size: 13px;
    font-size: clamp(13px, calc(10.09px + 0.91vw), 14px);
  text-align: center;
  font-weight: 900;
  color: #fff;
  background-color: #000;
  border: 1px solid #000;
  border-radius: 100vmax;
  padding: 5px 0px;
  position: relative;
  z-index: 10;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  width: 100%;
  width: 130px;
}
@media screen and (min-width: 769px) {
  #styles .recommend-item_btn {
    width: 134px;
    margin-top: 10px;
      font-size: 14px;
      
  }
}
#styles .recommend-item_btn::after {
  content: "";
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 1px #fff;
  border-right: solid 1px #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right: 15px;
  bottom: 0;
  margin: auto;
}
#styles .recommend-item_btn:hover {
  opacity: 1;
  color: #000;
  background-color: #fff;
}
#styles .recommend-item_btn:hover::after {
  border-top: solid 1px #000;
  border-right: solid 1px #000;
}
#styles .color_point {
  width: 100%;
}
@media screen and (min-width: 769px) {
  #styles .color_point {
    position: relative;
    margin-bottom: 40px;
  }
  #styles .color_point::before, #styles .color_point::after {
    position: absolute;
    content: "";
    z-index: 0;
  }
}
#styles .color_point .color_point_list {
  position: relative;
  overflow-x: hidden;
}
@media screen and (min-width: 769px) {
  #styles .color_point .color_point_list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    align-items: center;
    max-width: 1180px;
    margin: 0 auto;
    overflow: hidden;
  }
}
#styles .color_point .color_point_list li {
  position: relative;
}
@media screen and (min-width: 769px) {
  #styles .color_point .color_point_list .img {
    max-width: 490px;
  }
}
#styles .color_point .color_point_list .img.detail01 {
  padding-left: 55px;
}
@media screen and (min-width: 769px) {
  #styles .color_point .color_point_list .img.detail01 {
    padding-left: 0;
  }
}
#styles .color_point .color_point_list .img.detail02, #styles .color_point .color_point_list .img.detail04 {
  padding-right: 10px;
  margin-top: -80px;
}
@media screen and (min-width: 769px) {
  #styles .color_point .color_point_list .img.detail02, #styles .color_point .color_point_list .img.detail04 {
    padding-right: 0;
    margin-top: 0;
  }
}
#styles .color_point .color_point_list .img.detail03 {
  padding-left: 55px;
  margin-top: -50px;
}
@media screen and (min-width: 769px) {
  #styles .color_point .color_point_list .img.detail03 {
    padding-left: 0;
    margin-top: 0;
  }
}
#styles .color_point .color_point_list .color_point_txt {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  position: absolute;
}
#styles .color_point .color_point_list .color_point_txt p {
  letter-spacing: 0.08em;
  line-height: 2.2;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  font-style: normal;
}
@media screen and (min-width: 769px) {
  #styles .color_point .color_point_list .color_point_txt p {
    font-size: 14px;
  }
}
#styles .point {
  padding-top: 10px;
}
@media screen and (min-width: 769px) {
  #styles .point {
    padding-top: 30px;
  }
}
@media screen and (min-width: 769px) {
  #styles .point .inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 45px;
  }
}
#styles .point .point_wrap {
  border: 1px solid #000;
  border-radius: 15px;
  padding: 40px 15px 20px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 0 auto;
}
@media screen and (min-width: 769px) {
  #styles .point .point_wrap {
    width: 58%;
    padding: 40px 56px 15px;
    gap: 10px;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    margin: 0 auto;
  }
}
#styles .point .point_wrap .point_ttl {
  position: absolute;
  top: -15px;
  left: 50%;
  translate: -50%;
}
@media screen and (min-width: 769px) {
  #styles .point .point_wrap .point_ttl {
    top: -17px;
  }
}
#styles .point .point_wrap .point_ttl img {
  height: 30px;
  width: 100%;
}
@media screen and (min-width: 769px) {
  #styles .point .point_wrap .point_ttl img {
    height: 34px;
  }
}
#styles .point .point_wrap .img_link {
  width: calc(50% - 8px);
}
#styles .point .point_wrap .img_link .img {
  margin-bottom: 5px;
  border-radius: 10px;
  overflow: hidden;
}
#styles .point .point_wrap .txt_wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  padding-bottom: 20px;
}
#styles .point .point_wrap .txt_wrap .color_lineup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 5px;
  margin-bottom: 10px;
}
@media screen and (min-width: 769px) {
  #styles .point .point_wrap .txt_wrap .color_lineup {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: start;
    margin-bottom: 20px;
  }
}
#styles .point .point_wrap .txt_wrap .color_lineup li {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid #000;
}
@media screen and (min-width: 769px) {
  #styles .point .point_wrap .txt_wrap .color_lineup li {
    width: 18px;
    height: 18px;
  }
}
#styles .point .point_wrap .txt_wrap .color_lineup li.white {
  background-color: #fffbf0;
}
#styles .point .point_wrap .txt_wrap .color_lineup li.ivory {
  background-color: #faefd9;
}
#styles .point .point_wrap .txt_wrap .color_lineup li.beige {
  background-color: #b6aa91;
}
#styles .point .point_wrap .txt_wrap .color_lineup li.mokubeige {
  background-color: #e3d9cc;
}
#styles .point .point_wrap .txt_wrap .color_lineup li.gray {
  background-color: #7e7d7b;
}
#styles .point .point_wrap .txt_wrap .color_lineup li.black {
  background-color: #202022;
}
#styles .point .point_wrap .txt_wrap .name {
  font-size: 15px;
    font-size: clamp(15px, calc(9.18px + 1.82vw), 17px);
  font-weight: 400;
  line-height: 1.2;
}
@media screen and (min-width: 769px) {
  #styles .point .point_wrap .txt_wrap .name {
    font-size: 16px;
    text-align: center;
    font-weight: 400;
  }
}
#styles .point .point_wrap .txt_wrap .page-Campaign_Price {
  font-size: 20px;
  font-weight: 900;
  line-height: 1.6;
  margin-bottom: 8px;
}
@media screen and (min-width: 769px) {
  #styles .point .point_wrap .txt_wrap .page-Campaign_Price {
    text-align: center;
    font-size: 22px;
      margin-bottom: 3px;
  }
}
@media screen and (min-width: 769px) {
  #styles .point .point_wrap .txt_wrap .recommend-item_btn {
    width: 158px;
  }
}
#styles #style01 .is-main::before {
  background: url(/lp/coordinate/25aw/images/num_01.svg) no-repeat center/contain;
}
#styles .detail_wrap .color01 .detail_txt.detail01 {
  top: 12%;
  left: 58%;
}
@media screen and (min-width: 769px) {
  #styles .detail_wrap .color01 .detail_txt.detail01 {
    top: 22%;
    left: 63%;
  }
}
#styles .detail_wrap .color01 .detail_txt.detail02 {
  top: 54%;
  left: 58%;
}
@media screen and (min-width: 769px) {
  #styles .detail_wrap .color01 .detail_txt.detail02 {
    top: 64%;
    left: 63%;
  }
}
#styles .detail_wrap .color02 .detail_txt.detail01 {
  top: 12%;
  left: 58%;
}
@media screen and (min-width: 769px) {
  #styles .detail_wrap .color02 .detail_txt.detail01 {
    top: 22%;
    left: 63%;
  }
}
#styles .detail_wrap .color02 .detail_txt.detail02 {
  top: 54%;
  left: 58%;
}
@media screen and (min-width: 769px) {
  #styles .detail_wrap .color02 .detail_txt.detail02 {
    top: 64%;
    left: 63%;
  }
}
#styles .detail_wrap .color03 .detail_txt.detail01 {
  top: 12%;
  left: 58%;
}
@media screen and (min-width: 769px) {
  #styles .detail_wrap .color03 .detail_txt.detail01 {
    top: 22%;
    left: 63%;
  }
}
#styles .detail_wrap .color03 .detail_txt.detail02 {
  top: 54%;
  left: 58%;
}
#styles #style01 .detail_wrap .color02 .detail_txt.detail02 {
  top: 60%;
}
#styles #style01 .detail_wrap .color03 .detail_txt.detail02 {
  top: 60%;
}
#styles #style04 .detail_wrap .color01 .detail_txt.detail02 {
  top: 60%;
}
#styles #style04 .detail_wrap .color02 .detail_txt.detail02 {
  top: 60%;
}
#styles #style05 .detail_wrap .color01 .detail_txt.detail02 {
  top: 60%;
}
#styles #style06 .detail_wrap .color02 .detail_txt.detail02 {
  top: 60%;
}
#styles #style06 .detail_wrap .color01 .detail_txt.detail02 {
  top: 60%;
}
@media screen and (min-width: 769px) {
  #styles #style01 .detail_wrap .color02 .detail_txt.detail02 {
    top: 64%;
  }
  #styles #style01 .detail_wrap .color03 .detail_txt.detail02 {
    top: 64%;
  }
  #styles #style04 .detail_wrap .color01 .detail_txt.detail02 {
    top: 64%;
  }
  #styles #style04 .detail_wrap .color02 .detail_txt.detail02 {
    top: 64%;
  }
  #styles #style05 .detail_wrap .color01 .detail_txt.detail02 {
    top: 64%;
  }
  #styles #style06 .detail_wrap .color02 .detail_txt.detail02 {
    top: 64%;
  }
  #styles #style06 .detail_wrap .color01 .detail_txt.detail02 {
    top: 64%;
  }
}
@media screen and (min-width: 769px) {
  #styles .detail_wrap .color03 .detail_txt.detail02 {
    top: 68%;
    left: 63%;
  }
}
#styles .color_point .color_point_list .img.detail02 {
  padding-right: 55px;
}
@media screen and (min-width: 769px) {
  #styles .color_point .color_point_list .img.detail02 {
    padding-right: 0px;
  }
}
#styles .color_point .color_point_list .color_point_txt.detail01 {
  top: 18%;
  right: 3%;
}
@media screen and (min-width: 769px) {
  #styles .color_point .color_point_list .color_point_txt.detail01 {
    top: 26%;
    right: 11%;
  }
}
#styles .color_point .color_point_list .color_point_txt.detail02 {
  top: 18%;
  left: 3%;
}
@media screen and (min-width: 769px) {
  #styles .color_point .color_point_list .color_point_txt.detail02 {
    top: 26%;
    left: auto;
    right: 11%;
  }
}
#styles .color_point .color_point_list .color_point_txt.detail03 {
  top: 18%;
  right: 3%;
}
@media screen and (min-width: 769px) {
  #styles .color_point .color_point_list .color_point_txt.detail03 {
    top: 26%;
    left: auto;
    right: 11%;
  }
}
#styles #style02 .is-main::before {
  background: url(/lp/coordinate/25aw/images/num_02.svg) no-repeat center/contain;
}
#styles #style03 .is-main::before {
  background: url(/lp/coordinate/25aw/images/num_03.svg) no-repeat center/contain;
}
#styles #style04 .is-main::before {
  background: url(/lp/coordinate/25aw/images/num_04.svg) no-repeat center/contain;
}
#styles #style05 .is-main::before {
  background: url(/lp/coordinate/25aw/images/num_05.svg) no-repeat center/contain;
}
#styles #style06 .is-main::before {
  background: url(/lp/coordinate/25aw/images/num_06.svg) no-repeat center/contain;
}
@media screen and (max-width: 768px) {
  #styles .color_point .color_point_list li .img img {
    width: 100%;
    height: auto;
    display: block;
  }
}
/* ▼▼▼ セール価格デザイン
====================================================== */
.page-Campaign_PriceNormal span[id^="goods_discount_rate_"]::before, .page-Campaign_Price span[id^="goods_discount_rate_"]::before {
  display: none !important;
}
.page-Campaign_PriceNormal {
  position: relative;
}
.page-Campaign_PriceNormal span[id^="goods_discount_rate_"] {
  top: 4px;
  left: 63px;
  font-size: 12px;
  white-space: nowrap;
  position: absolute;
  margin: 0;
}
@media screen and (min-width: 769px) {
  .page-Campaign_PriceNormal span[id^="goods_discount_rate_"] {
    font-size: 14px;
    margin: 8px 0;
    position: static;
  }
  .page-Campaign_PriceNormal {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: row-reverse;
    gap: 10px;
  }
}