@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300&display=swap');

/* ==========================================================================
   Base & Reset
   ========================================================================== */
*:focus {
  outline: none;
}

body {
  color: #202020;
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
  /* overflow-x: hidden;  ←これをコメントアウト、または削除 */
  overflow-x: clip;      /* ★代わりにこれを使います（stickyを壊さずにハミ出しを隠せます） */
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

a:link,
a:visited,
.lpContents,
.lpContent__article {
    overflow: visible !important; /* 念のためstickyを有効にするために visible に */
}
.lpContents a {
  color: #202020;
}

.lpContents a:hover {
  text-decoration: none;
}

a:hover img {
  opacity: 0.8;
  transition: all 0.3s ease 0s;
}

/* ==========================================================================
   Typography (Headings & Texts)
   ========================================================================== */
h1 {
  font-size: 34px;
  font-weight: 400;
  margin: 5px auto 5px;
  padding: 0;
  border: 0;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.2;
}

h1 span {
  font-size: 20px;
}

h2 {
  font-weight: 400;
  margin: 20px auto 10px;
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
}

h2 span {
  font-size: 12px;
}

h3 {
  font-size: 18px;
  font-weight: 400;
  margin: 2% auto;
 font-family: Arial, Helvetica, sans-serif;
}

h3 p {
  font-size: 13px;
}

h4 {
  font-size: 15px;
  margin: 5% auto;
}

h5 {
  font-weight: 400;
  margin: 10% auto 5%;
}

h6 {
  font-size: 0.8rem;
  font-weight: 400;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Specific Text Styles */
.h1 {
  font-size: 50px;
  line-height: 1;
  font-weight: 300;
  margin: 5px auto 20px;
  font-family: Arial, Helvetica, sans-serif;
}

.main_title2 {
  font-size: 28px;
  line-height: 1;
  font-weight: 300;
  margin: 50px auto 0px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.headLine__title,
.lpContent__title,
.grid1__title {
  font-size: 18px;
  line-height: 0.5px;
  font-weight: 400;
  margin: 10px auto 30px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

@media screen and (min-width:1024px) {
  .headLine__title,
  .lpContent__title,
  .grid1__title {
    font-size: 20px;
    margin: 10px auto 30px;
  }
}

.lpContent__title2 {
  font-size: 24px;
  line-height: 2;
  font-weight: 400;
  margin: 10px auto 10px;
}

@media screen and (min-width:1024px) {
  .lpContent__title2 {
    font-size: 18px;
    margin: 40px auto 30px;
  }
}

/* Decoration Lines for Titles */
.lpContent__title {
  position: relative;
  display: inline-block;
}

@media screen and (min-width:1024px) {
  h2.txt--sline:before,
  h2.txt--sline:after {
    content: "";
    display: block;
    width: 20%;
    height: 4px;
    border-top: 1px solid #111;
    position: absolute;
    top: 50%;
    margin-top: -2px;
  }
  h2.txt--sline:before { left: -30%; }
  h2.txt--sline:after { right: -30%; }
}

.chibi_title {
  font-size: 14px;
  line-height: 2;
  font-weight: 400;
  margin: 80px auto 2px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  color: #333;
}

.contents_title {
  font-size: 40px;
  line-height: 1;
  font-weight: 400;
  margin: 2px auto 0px;
  font-family: 'Times New Roman', Times, serif;
  color: #333;
}

.subcontents_title {
  font-size: 30px;
  line-height: 1;
  font-weight: 400;
  margin: 2px auto 10px;
  font-family: 'Times New Roman', Times, serif;
  color: #333;
}

.chibi_text {
  font-size: 14px;
  line-height: 2;
  font-weight: 400;
  margin: 1px auto 20px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  color: #333;
}


.chibi_text_left {
  font-size: 14px;
  line-height: 2;
  font-weight: 400;
  padding: 5%;
  margin: 1px auto 20px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  color: #333;
  text-align: left;
}

@media screen and (min-width:1024px) {
  .chibi_text_left {
  font-size: 14px;
  line-height: 2;
  font-weight: 400;
  padding: 0px 25% 0px 25%; 
  margin: 1px auto 20px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  color: #333;
  text-align: left;
}
}

.item_title {
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  margin: 1px auto 20px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  color: #333;
}

.under {
  text-decoration: underline;
}

mark {
  background-color: #dddcb9;
}

/* ==========================================================================
   Utilities (Colors, Widths, Helpers)
   ========================================================================== */
/* Position & Alignment */
.right { text-align: right; }
.left { text-align: left; }
.center { text-align: center; }

/* Width Helpers */
.w100 { width: 100%; margin: auto; }
.w80 { width: 80%; margin: auto; }
.w60 { width: 60%; margin: auto; }
.w40 { width: 40%; margin: auto; }
.w20 { width: 20%; margin: auto; }
.w10 { width: 10%; margin: auto; }

/* Background Colors */
.bg--00 { background-color: #EFF0EA; }
.bg--01 { background-color: #F8F8F8; }
.bg--02 { background-color: #fbf6f3; }
.bg--03 { background-color: #F8F4EF; }
.bg--04 { background-color: #F4EEE6; }
.bg--05 { background-color: #EAEAEA; }
.bg--06 { background-color: #f3ebe1; }
.bg--07 { background-color: #f5f6f5; }
.bg--08 { background-color: #e7e9e6; }
.bg--09 { background-color: #fbf8ee; }
.bg--10 { background-color: #f5edd4; }
.bg--11 { background-color: #f1e7e1; }
.bg--12 { background-color: #ddc4b3; }
.bg--13 { background-color: #ebe7e4; }
.bg--14 { background-color: #ccc3ba; }
.bg--15 { background-color: #e3e8e8; }
.bg--16 { background-color: #b8c5c5; }
.bg--17 { background-color: #f0dfdc; }
.bg--18 { background-color: #daaea7; }
.bg--19 { background-color: #dfdddc; }
.bg--20 { background-color: #aea9a8; }

/* Text Colors */
.c--01 { color: #f7eee7; }
.c--02 { color: #ede4dd; }
.c--03 { color: #e8d7c3; }
.c--04 { color: #cfd4cd; }
.c--05 { color: #ebdbaa; }
.c--06 { color: #bb8968; }
.c--07 { color: #9a8776; }
.c--08 { color: #718b8c; }
.c--09 { color: #b65e50; }
.c--10 { color: #363636; }

/* Separators */
.hr2 { border-top: 2px dotted #808080; }
.hr3 {
  border-top: 2px dotted #cecece;
  width: 100%;
  text-align: center;
  margin: 5% auto;
}

/* Background Variations */
.water { background-color: rgb(188, 207, 212); }
.snow { background-color: rgb(234, 238, 240); }
.sand {
  background-color: rgb(220, 221, 214);
  padding: 3px;
}

/* ==========================================================================
   Images & Media
   ========================================================================== */
.liquidimg,
.profimg,
.coodrdinateimg,
.grid__img,
.liquidimg_item {
  width: 100%;
  height: auto;
  display: block;
}

.liquidimg2 {
  width: 80%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.liquidimg2_1 {
  width: 80%;
  height: auto;
  display: block;
  margin: 0 5% 0 auto;
}

.liquidimg3 {
  width: 95%;
  height: auto;
  display: block;
  z-index: 30;
}

.liquidimg4 {
  width: 20%;
  height: auto;
  display: block;
  margin: 5% auto 3%;
  z-index: 30;
}

.code_sp {
  width: 70%;
  height: auto;
  display: block;
  margin: 0 auto 0 5%;
}

.lazy {
  width: 40px;
  height: 40px;
}

video {
  width: 100%;
  cursor: none;
}

.video_harf {
  width: 50%;
  height: auto;
  display: block;
  margin: 0 auto
}

/* PC Image adjustments */
@media screen and (min-width:1024px) {
  .liquidimg2 {
    width: 85%;
  }
}

/* Mobile Image adjustments */
@media screen and (max-width: 640px) {
  .video_harf {
    width: 85%;
  }
  .liquidimg3 {
    width: 100%;
    z-index: 5;
  }
  .liquidimg4 {
    width: 50%;
    margin: 10% auto;
    z-index: 5;
  }
}

/* ==========================================================================
   UI Components (Buttons, Badges, Icons)
   ========================================================================== */
/* SNS Icons */
.snsicons {
  text-align: center;
  width: 800px;
}
.icon_img {
  text-align: center;
  margin-right: 10px;
  margin-bottom: 30px;
}

/* Buttons Base */
.lpContent__btn {
  width: 80%;
  box-sizing: border-box;
  text-align: center;
  margin: 0% auto;
}
.lpContent__btn a {
  display: block;
  border-radius: 2px;
  padding: 0px 0;
  font-size: 1.0rem;
}
.lpContent__btn[class*="btn--"] a:hover {
  opacity: 0.8;
}

/* Button Colors */
.btn--00 a { background-color: #000; }
.btn--06 a { background-color: #bb8968; }
.btn--07 a { background-color: #9a8776; }
.btn--08 a { background-color: #718b8c; }
.btn--09 a { background-color: #b65e50; }
.btn--10 a { background-color: #5e5452; }

/* Button Types */
.lpContent__btn--typeA { border: 1px solid #bbb; }
.lpContent__btn--typeA a { transition: all 300ms linear; display: block; }

.lpContent__btn--typeB { background-color: #000; }
.lpContent__btn--typeB a { color: #fff; transition: all 300ms linear; display: block; }

/* See All Button */
.lpContent__btn--seeall {
  border: none;
  margin: 20px auto;
  font-size: 1rem;
  padding: 0 10px;
}
.lpContent__btn--seeall a {
  color: #fff;
  display: block;
  transition: all 300ms linear;
}
.item__container .lpContent__btn--seeall { width: 60%; }

/* View More Button */
.button-more a {
  font-family: 'Times New Roman', Times, serif;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: #fff;
  background: #333;
  font-weight: 700;
  border: solid 3px #333;
  border-radius: 10px;
  display: block;
  box-sizing: border-box;
  max-width: 300px;
  text-align: center;
  padding: 16px 64px;
  margin: 24px;
  margin-inline: auto;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s;
}
.button-08 a:hover {
  color: #333;
  background: initial;
  transition: all 0.3s;
}

/* Buy Buttons */
.buy_btn {
  background: #111;
  color: #fff;
  padding: 8px 14px;
  font-size: 8px;
  width: 80%;
  margin: 5% auto 20%;
}
.buy_btn2 {
  background: #d1bbb0;
  color: #ffffff;
  padding: 8px 8px;
  font-size: 12px;
  width: 150px;
  margin: 5% auto 10%;
  border-radius: 4px;
}
.buy_btn3 {
  background: #595959;
  color: #fff;
  padding: 8px 8px;
  font-size: 12px;
  width: 150px;
  margin: 5% auto 10%;
  border-radius: 4px;
}
.buy_btn4 {
  background: #202020;
  color: #fff;
  padding: 8px 8px;
  font-size: 12px;
  width: 150px;
  margin: 5% auto 10%;
  border-radius: 2px;
}
.item_buy_btn {
  background: #111;
  color: #fff;
  padding: 10px 16px;
  font-size: 8px;
  width: 80%;
  margin: 5% auto;
}

/* More Buttons */
.more_btn,
.more_btn_1 {
  margin: 10% auto;
  width: 90%;
  padding: 2% 0;
  color: #fff;
}
.more_btn { background-color: #333; }
.more_btn_1 { background-color: #8a8a8a; }
.more_btn a, .more_btn_1 a { color: #fff; }

@media screen and (min-width:1024px) {
  .more_btn, .more_btn_1 {
    width: 48%;
    padding: 1% 0;
  }
  .more_btn { margin: 2% auto 5%; }
  .more_btn_1 { margin: 5% auto 0; }
  .more_btn a, .more_btn_1 a { font-size: 16px; }
  
  .item__container .lpContent__btn--seeall { width: 20%; }
  .lpContent__btn {
    width: 50%;
    margin: 5% auto;
  }
}
@media screen and (min-width:768px) and (max-width:1024px) {
  .item__container .lpContent__btn--seeall { max-width: 40%; }
}

/* Badges */
.lpContent__badge {
  color: #fff;
  padding: 0.2rem 0.5rem;
  margin: 1rem auto;
  width: fit-content;
}
.lpContent__badge--blue { background-color: #C1B1A4; }
.off__badge {
  background-color: #c00000;
  color: #fff;
  position: absolute;
  padding: 2px 5px;
  z-index: 1;
}

/* ==========================================================================
   Layout & Grid System
   ========================================================================== */
.lpContents {
  font-size: 0.8rem;
  text-align: center;
  line-height: 1.8;
  letter-spacing: .03rem;
  margin: 0 auto 0;
  width: 100%;
}

.lpContent__continer {
  max-width: 900px;
  width: 100%;
  margin: 5px auto;
  padding: 10px 0;
}

.item__container {
  max-width: 850px;
  width: 100%;
  margin: 10px auto;
  padding: 0px 10px 0 10px;
}
.item__container_top {
  width: 95%;
  margin: 20px auto 0;
}

/* Grid Base */
[class^="grid"] {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.grid__list,
.grid__list2 {
  justify-content: space-between;
  align-items: stretch;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* Grid Columns Logic */
[class^="grid1"] .grid__list, [class^="grid1"] .grid__list2 { width: 100%; }
[class^="grid2"] .grid__list, [class^="grid2"] .grid__list2 { width: 50%; position: relative; }
[class^="grid3"] .grid__list, [class^="grid3"] .grid__list2 { width: 33.333%; }
[class^="grid4"] .grid__list, [class^="grid4"] .grid__list2 { width: 25%; }

/* Grid Responsive Logic */
@media screen and (min-width:1024px) {
  ul[class$="grid"] .grid__list, ul[class$="-1"] .grid__list,
  ul[class$="grid"] .grid__list2, ul[class$="-1"] .grid__list2 { width: 100%; }
  ul[class$="-2"] .grid__list, ul[class$="-2"] .grid__list2 { width: 50%; }
  ul[class$="-3"] .grid__list, ul[class$="-3"] .grid__list2 { width: 33.333%; }
  ul[class$="-4"] .grid__list, ul[class$="-4"] .grid__list2 { width: 25%; }
  
  .lpContents { width: 100%; }
}
@media screen and (min-width:768px) and (max-width:1024px) {
  .grid1-2, .grid2-1 { width: 100%; } /* Adjusted per original logic */
  .grid1-2 { width: 50%; } /* Conflict in original, keeping last valid */
  .grid1-3 { width: 33.33%; }
  .grid1-4 { width: 25%; }
  .grid2-3 { width: 30%; }
  .grid2-4 { width: 25%; }
  .lpContents { max-width: 800px; }
}

/* Grid Content */
.grid__img {
  min-height: 1%;
  width: 100%;
  height: auto;
  position: relative;
}
.grid__img img {
  width: 100%;
  margin-bottom: 10px;
}
.grid__item_img img {
  width: 100%;
  padding: 0% 15%;
}
.grid__item_list_img img {
  width: 60%;
  height: auto;
  margin: 0 auto;
  display: block;
  margin-bottom: -10%;
}
@media screen and (min-width:1024px) {
  .grid__item_list_img img { width: 90%; }
}

.grid__textContainer {
  justify-content: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  flex-grow: 1;
}

.grid__textArea {
  padding: 0;
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin-top: 15%;
  font-size: 8px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2; 
  overflow: hidden;
}

.grid__title { font-size: 1rem; }
.grid__lead { word-break: break-all; }
.grid__price {
  font-size: 8px;
  letter-spacing: .03rem;
  margin-top: 5px;
}
.grid__price--member { font-size: 0.8rem; text-decoration: none; }
.grid__price--member_off { font-size: 1.0rem; font-weight: 600; text-decoration: none; }
.grid__price span {
  font-size: 0.8rem;
  background: #111;
  color: #fff;
  padding: 4px 20px;
  margin: 0;
}

/* ==========================================================================
   Modules & Sections
   ========================================================================== */

/* --- Visual / Hero --- */
.visual_catch, .visual_catch2 {
  font-size: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.visual_catch2 {
  line-height: normal;
  margin: 80px 50px 10px 50px;
}
.visual_catch:before, .visual_catch:after {
  border-top: 1px solid;
  content: "";
  width: 3em;
}
.visual_catch:before { margin-right: 1em; }
.visual_catch:after { margin-left: 1em; }

@media screen and (max-width: 640px) {
  .visual_catch {
    font-size: 18px;
    text-align: left;
    margin-top: 30px;
  }
}

.headLine__block { width: 100%; margin: 0 auto; padding: 0; }
.headLine__title {
  position: absolute;
  top: 50%; left: 0; right: 0;
  margin: auto;
  font-size: 5em;
  font-family: '小塚ゴシック Pro','Kozuka Gothic Pro',sans-serif,'Lora', serif;
  color: #fff;
  letter-spacing: 2px;
}
.headLine__lead {
  position: absolute;
  font-size: 1.5em;
  color: #fff;
  top: 60%; left: 0; right: 0;
  margin: auto;
  padding: 1.5rem;
  text-align: center;
}

/* --- Breadcrumb --- */
.breadcrumb { margin: 0; }
.breadcrumb__list {
  overflow: hidden;
  text-align: left;
  padding: 5px 12px;
  word-wrap: normal;
  letter-spacing: -0.4em;
}
.breadcrumb__list li {
  display: inline-block;
  letter-spacing: normal;
  font-size: 0.9em;
}
.breadcrumb__list li:after {
  content: ">";
  margin: 0 5px;
  color: #a0a0a0;
  display: inline-block;
}
.breadcrumb__list li:last-child:after { display: none; }
.breadcrumb__list a { color: #000; }

/* --- Advertising / Fixed Elements --- */
.ad__section {
  display: block;
  width: 100%;
  height: auto;
  text-align: center;
  position: fixed;
  top: 0;
  z-index: 2;
}
.ad__txt { padding: 5px 0; }
.ad__txt a {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.4;
}
.cdTimer {
  font-size: 0.5rem;
  padding: 2px 4px;
  font-weight: normal;
}

#anchor__ptop {
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #000;
  opacity: 0.8;
}
#anchor__ptop a { display: block; text-decoration: none; }
#anchor__ptop .svg-inline--fa {
  color: #fff;
  top: 14px;
  position: relative;
}

.pagetop {
  display: none;
  position: fixed;
  bottom: 30px;
  right: 60px;
  z-index: 1000;
}
.pagetop a {
  display: block;
  background-color: #000;
  text-align: center;
  color: #fff;
  font-size: 12px;
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 50%;
}

/* --- Content Sections (Leads, Containers) --- */
.lpContent__section { width: 100%; margin: auto; padding: 20px 0 0; }
.lpContent__lead { line-height: 1.8; margin: 0 0 2rem; }
.lpContent__toplead {
  line-height: 1.5;
  margin-top: 5%;
  padding-bottom: 5%;
  font-size: 14px;
}
.lpContent__toplead > span {
  font-size: 13px;
  margin: auto 10px;
  font-weight: 500;
  color: #111;
}
.lpContent__headlead {
  line-height: 1.5;
  margin-top: 5%;
  padding-bottom: 5%;
  font-size: 18px;
}

.lpContent2__lead {
  font-size: 12px;
  line-height: 1.8;
  margin: 0 2rem 1rem;
  padding-bottom: 10%;
}
.lpContent2__item_lead { line-height: 1.8; margin: 1rem 2rem 1rem; }

.lpContent3__lead {
  line-height: 2.5;
  margin: 0 0rem 1rem;
  font-size: 25px;
  padding: 1rem 2rem;
  border-left: 4px solid #888;
  padding-bottom: 5%;
}
.lpContent3__lead span {
  background: #111;
  color: #fff;
  padding: 5px 15px;
}

.lpContent__proflead { text-align: left; }

.item_detail { margin-top: 5%; font-size: 12px; text-align: left; }

@media screen and (min-width:1024px) {
  .lpContent__toplead {
    text-align: center;
    padding-bottom: 5%;
    margin: 20px 20% 0%;
    font-size: 14px;
    line-height: 1.5;
  }
  .lpContent__headlead { text-align: center; }
  .lpContent__proflead { text-align: left; }
}

@media screen and (min-width: 681px) {
  .lpContent__continer2, .lpContent__continer3 {
    display: flex;
    max-width: 900px;
    margin: 1% auto 10%;
  }
  .lpContent2__lead { width: 420px; }
  .lpContent2__item_lead, .lpContent3__item_lead {
    line-height: 1.8;
    margin: 2rem 2rem 1rem;
  }
}
.lpContent__continer2 { margin: 0% auto 10%; }
.lpContent__continer3 { margin: 0% auto 20%; }

/* --- Coupon Section --- */
.coupon__section {
  max-width: 900px;
  margin: 20px auto;
}
.coupon__container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
.coupon__list {
  width: calc(100% / 3);
  transition: all 0.3s ease 0s;
  padding: 1em 1em 0.5em;
  margin: 0;
}
.coupon__list:hover {
  box-shadow: 3px 3px 4px 0 rgba(0, 0, 0, 0.25);
  transform: translateY(-0.5em);
}
.coupon__list img { width: 100%; height: auto; }
.coupon { font-size: 12px; margin-bottom: 5px; }
.coupon_code { font-size: 15px; text-decoration: underline; letter-spacing: 0.4em; }

@media screen and (min-width:1024px) {
  .coupon__section { margin: 80px auto; }
}

/* --- Anchor/Link List --- */
.anchor__section { margin: 40px 0 20px; }
.anchor__container {
  max-width: 900px;
  display: flex;
  flex-wrap: wrap;
  margin: auto;
}
.anchor__list {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 10px;
}
.anchor__list a { transition: all 300ms linear; }
.anchor__list a:hover { transition: all 300ms linear; background-color: #eee; }
.anchor__list .svg-inline--fa { position: absolute; right: 27px; }

.anchor__list--01 {
  display: flex;
  align-items: center;
  text-decoration: none;
  padding: .8rem .8rem .8rem .2rem;
  border-bottom: solid 1px #bbb;
  width: 100%;
  overflow: hidden;
}
.anchor__txt {
  display: flex;
  flex-direction: column;
  padding: 1px 0 0 8px;
}
.anchor__badge {
  width: 9em;
  text-align: center;
  padding: 1px 0;
  margin-bottom: .3rem;
  font-weight: 600;
}
.anchor__badge--blue { color: #fff; background-color: #43628B; }

@media screen and (min-width:1024px) {
  .anchor__section { margin: 80px 0; }
  .anchor__container { justify-content: space-between; }
  .anchor__list { flex: 0 1 50%; padding: 0 1%; }
  .sp { display: none; }
}
@media screen and (min-width:768px) and (max-width:1024px) {
  .anchor__section { margin: 40px 0; }
  .anchor__container { justify-content: space-between; }
  .anchor__list { flex: 0 1 50%; padding: 0 2%; }
}
@media screen and (max-width:1024px) {
  .pc { display: none; }
}

/* --- Time Sale Tabs --- */
ul.timeSale__tab {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  margin: 0 auto 40px;
  max-width: 900px;
  padding: 0 1rem;
}
li.timeSale__tab {
  border: solid 1px #000;
  box-sizing: border-box;
  margin-left: -1px;
  text-align: center;
  display: block;
  width: 100%;
}
li.timeSale__tab.active { background-color: #000; color: #fff; }
.timeSale__tab [data-href] {
  display: block;
  height: auto;
  padding: 10px 0;
  transition: all 300ms linear;
}
.timeSale__tab [data-href]:hover { background-color: #000; color: #fff; }

.timeSale__contents.js-tab-contents { display: none; animation: fadeOut; }
.timeSale__contents.js-tab-contents.current { display: block; animation: fadeIn; }
.timeSale__contents .grid__price { color: #c00000; }

/* --- Coordinate Boxes / Position Logic --- */
/* Common Box Logic */
.box1, .box07, .box10, .box2, .box3, .box4, .box5 {
  margin: 10% 0 15%;
  padding: 10% 0;
  display: flex;
  justify-content: space-between;
}
.box1 > div, .box07 > div, .box10 > div, .box2 > div, .box3 > div, .box4 > div, .box5 > div {
  width: 100%;
}

/* Individual Transforms */
.box1 > div:nth-of-type(1) { transform: translateY(-30%) translateX(435px); }
.box1 > div:nth-of-type(2) { transform: translateY(27%) translateX(-435px); }

.box07 { margin: 10% 0 10%; }
.box07 > div:nth-of-type(1) { transform: translateY(-30%) translateX(15px); }
.box07 > div:nth-of-type(2) { transform: translateY(27%) translateX(35px); }

.box10 { margin: 10% 0 10%; }
.box10 > div:nth-of-type(1) { transform: translateY(-30%) translateX(365px); width: 300%; }
.box10 > div:nth-of-type(2) { transform: translateY(30%) translateX(-240px); width: 150%; }
.box10 > div:nth-of-type(3) { transform: translateY(80%) translateX(-150px); }
.box10 > div:nth-of-type(4) { transform: translateY(65%) translateX(-150px); }

.box2 { margin: 10% 0 35%; }
.box2 > div:nth-of-type(1) { transform: translateY(-33%) translateX(20px); }
.box2 > div:nth-of-type(2) { transform: translateY(5%) translateX(140px); z-index: 1000; }
.box2 > div:nth-of-type(3) { transform: translateY(85%) translateX(-585px); }

.box3 > div:nth-of-type(1) { transform: translateY(-30%); }
.box3 > div:nth-of-type(2) { transform: translateY(27%) translateX(-200px); }

.box4 { margin: 5% 0; }
.box4 > div:nth-of-type(1) { transform: translateY(-30%); }
.box4 > div:nth-of-type(2) { transform: translateY(27%) translateX(-200px); }

.box5 > div:nth-of-type(1) { transform: translateY(-30%) translateX(20px); }
.box5 > div:nth-of-type(2) { transform: translateY(27%) translateX(-89px); }

/* Box Mobile Overrides */
@media screen and (max-width: 640px) {
  .box1, .box07, .box10, .box3, .box5 { margin: 30% 0 0; }
  .box2 { margin: 40% 0 30%; }
  .box4 { max-width: 640px; }
  
  .box1 > div:nth-of-type(1) { transform: translateY(-65%) translateX(170px); }
  .box1 > div:nth-of-type(2) { transform: translateY(-7%) translateX(-170px); }
  
  .box07 > div:nth-of-type(1) { transform: translateY(-65%) translateX(170px); }
  .box07 > div:nth-of-type(2) { transform: translateY(-7%) translateX(-170px); }
  
  .box10 > div:nth-of-type(1) { transform: translateY(-65%) translateX(170px); }
  .box10 > div:nth-of-type(2) { transform: translateY(-7%) translateX(-170px); }
  .box10 > div:nth-of-type(3), .box10 > div:nth-of-type(4) { transform: translateY(-7%) translateX(-170px); }
  
  .box2 > div:nth-of-type(1) { transform: translateY(-80%) translateX(20px); }
  .box2 > div:nth-of-type(2) { transform: translateY(-25%) translateX(50px); }
  .box2 > div:nth-of-type(3) { transform: translateY(60%) translateX(-235px); }
  
  .box3 > div:nth-of-type(1) { transform: translateY(-65%) translateX(35px); }
  .box3 > div:nth-of-type(2) { transform: translateY(-7%) translateX(-25px); }
  
  .box4 > div:nth-of-type(1) { transform: translateY(-30%) translateX(15px); }
  .box4 > div:nth-of-type(2) { transform: translateY(40%) translateX(-12px); }
  
  .box5 > div:nth-of-type(1) { transform: translateY(-65%) translateX(20px); }
  .box5 > div:nth-of-type(2) { transform: translateY(-7%) translateX(-45px); }
  
  .profimg { padding: 10% 20% 0% 20%; }
  .coodrdinateimg { padding: 0% 0% 0% 0%; }
}

/* --- Product / Item Details --- */
.seasonTitle { font-size: 26px; margin: 65px auto; }
.mainitem_Title { margin: 65px auto; }
.color_title { font-size: 30px; }
.coordinatepoint_title { font-size: 26px; margin: 20px auto; }
.item_list_title { font-size: 1.8rem; margin: 0px auto 5%; }
.item_list { padding: 0 1% }

.white_box { width: 90%; background-color: #fff; border: solid; }
.white_box_second { width: 50%; background-color: #fff; border: solid; }

.item_title { font-size: 30px; margin-bottom: 5%; }
.item_code { font-size: 12px; }
.item_name {
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 20px;
  width: 250px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.item_name2 {
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 20px;
}
.item_name_center {
  font-size: 16px;
  text-align: center;
  margin: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item_price, .item_price2 { text-align: left; }
.item_price { margin: 0% 0 0 5%; }
.item_price2 { margin: 10px 0px 0px 0px; }

.style01_box { position: relative; top: 250px; left: 0px; font-size: 0.9em; z-index: 5; }
.style02_box { position: relative; top: -100px; right: 0px; }

.item_margin { margin: 10% auto 5%; }
.botomup { margin: 5% auto 7%; }
.wakeme { border-top: solid 1px gray; text-align: center; margin: 3% auto; }

.day {
  background: #dad8dd;
  color: #111;
  padding: 10px 16px;
  font-size: 20px;
  width: 80%;
  margin: 5% auto;
  border: 1px solid;
}
.buy_day {
  padding: 2%;
  border: solid 1px #000000;
  width: 80%;
  height: auto;
  display: block;
  margin: 4% auto 10%;
  font-size: 15px;
}

.code_list_pc { padding: 5% 15%; display: none; }
.code_list_sp { padding: 10% 2%; }
.product_text_box {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  flex-wrap: wrap;
  font-size: 16px;
  padding: 0 5px;
  flex-direction: column;
}
.product_text { margin-top: 10px; margin-right: 22px; }

.hit_slider_text, .code_slider_text { margin-top: 2%; font-size: 12px; margin: 5px 20px 5px 20px; }
.hit_slider_text { text-align: center; }
.code_slider_text { text-align: left; }
.code_slider_no {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  margin-top: 2%;
  font-size: 14px;
  text-align: center;
  margin: 20px 20px 5px 20px;
}
.code_title {
  margin-bottom: 5%;
  margin-top: 5%;
  font-weight: 300;
  font-size: 17px;
  text-align: center;
}
.code_lead { 
  font-size: 12px; 
  margin: 4%; 
}

.code_image { 
  width: 75%; padding: 0; 
  margin: 0% auto 30%; 
}

.schedule {
  background-color: #4D371F;
  padding: 0.3% 8%;
  color: #fff;
  font-size: 20px;
  margin: 10% 2% 2% 2%;
}

@media screen and (min-width: 681px) {
  main div.season { margin: 100px 10px; }
}

@media screen and (min-width:1024px) {
  .white_box { width: 50%; }
  .white_box_second { width: 25%; }
  .style01_box { top: 410px; left: 310px; }
  .item_name2 { text-align: center; }
  .item_price2 { text-align: center; }
  .item_titile_lest_under { position: relative; top: 240px; z-index: 100; left: -245px; }
  .profile_titile { margin-top: 30%; }
  .item_margin { margin: 30% auto 15%; }
  .code_image { width: 30%; margin: 5% auto 5%; }
  .code_slider_text { font-size: 14px; text-align: center; margin: 1px 20px 5px 20px; }
  .code_list_pc { padding: 5% 20%; display: block; }
  .code_list_sp { display: none; }
  .product_text_box { flex-direction: column; }
  .product_text { margin-right: 20px; }
  .item_name { width: 160px; }
  .schedule { padding: 0.5% 5%; font-size: 35px; }
  .kousiki_text { margin: 0px auto 20px; }
  .atmg { text-decoration: underline; }
  .h2_name { font-size: 10px; }
}

@media screen and (max-width: 640px) {
  .seasonTitle, .mainitem_Title { font-size: 26px; margin: 60px auto 30px; }
  .lpContent3__lead {
    line-height: 2.5;
    margin-left: 5%;
    font-size: 20px;
    padding-bottom: 5%;
    padding: 1rem 2rem;
    border-left: 4px solid #a69b84;
  }
  .coordinatepoint_title { font-size: 26px; margin: 10px auto 30px; }
  .item_list_title { font-size: 1.6rem; margin: 10px auto 30px; }
  .first_box { margin: -40% auto; }
  .top_box { margin-top: 35%; }
  .item_titile_lest_under { position: relative; top: 160px; z-index: 100; left: -120px; }
  .item_title { font-size: 20px; margin-bottom: 10%; }
  .item_code { font-size: 11px; margin: 5% auto; }
  .block_list { padding: 5%; }
  .codelist { width: 50%; }
  .profile_titile { margin-top: 10%; }
}

/* --- Chat / Question & Answer --- */
.line-bc {
  padding: 20px 10px;
  max-width: 900px;
  margin: 15px auto;
  text-align: right;
  font-size: 14px;
}
.question, .answer {
  width: 100%;
  margin: 10px 0;
  overflow: hidden;
}
.question .faceicon { float: left; margin-right: -50px; width: 150px; }
.answer .faceicon { float: right; margin-right: 20px; width: 150px; }
.question .faceicon img, .answer .faceicon img { width: 100%; height: auto; }

.question .chatting { width: 100%; text-align: left; padding: 3%; }
.answer .answerchatting { width: 100%; text-align: right; }

.says, .answersays {
  position: relative;
  padding: 25px;
  border-radius: 12px;
}
.says { margin: 0px 0 0 175px; background: #EADDCE; }
.answersays { margin: 35px 215px 0 0px; background: #edf1ee; }

.says:after, .answersays p:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 30px;
  border: 8px solid transparent;
}
.says:after {
  left: -19px;
  border-right: 18px solid #EADDCE;
}
.answersays p:after {
  left: 660px;
  border-left: 18px solid #edf1ee;
}
.says p, .answersays p { margin: 0; padding: 0; }
.answersays p { text-align: left; }
.mycomment { margin: 10px 0; }

@media screen and (max-width: 640px) {
  .question .faceicon img, .answer .faceicon img { width: 65%; }
  .answer .faceicon { margin-right: -50px; }
  .says {
    display: inline-block;
    margin: 0px 0 0 15px;
    max-width: 240px;
    padding: 25px 13px 25px;
    font-size: 12px;
  }
  .answersays {
    display: inline-block;
    max-width: 240px;
    margin: 10px 15px 0 0;
    padding: 25px 13px 25px;
    font-size: 13px;
  }
  .answersays p:after { left: 233px; }
}

/* --- Slider / Slick --- */
.slider__container { position: relative; width: 80%; margin: 0 auto; }
.slider__container02 {
    width: 100%;      /* 幅を画面いっぱいにする */
    margin: 2% 0 2%;  /* 左右の余白（autoなど）を0にする */
    padding: 0;       /* 内側の余白もなくす */
    position: relative; /* 文字を配置する基準点になります */
    width: 100%;
    overflow: hidden;
}
.slider__container img:hover { cursor: pointer; }

.slider { display: none; overflow: hidden; }
.slider.slick--initialized { display: block; }
.slick-prev, .slick-next {
  position: absolute;
  top: 50%;
  padding: 0;
  line-height: 1;
  transform: translateY(-50%);
  cursor: pointer;
  font-weight: bold;
  color: #111;
  z-index: 2;
  font-size: 30px;
}
.slick-prev { left: -35px; }
.slick-next { right: -35px; }

.slider3 .slick-prev, .slider3 .slick-next { top: 40%; }
.slider4 .slick-prev, .slider4 .slick-next { top: 35%; }
.slider4 .slick-slide { margin: 10px; }

.slick-slide { text-align: center; width: 100%; }
.slick-slide img {
    width: 100%;    /* 98% から 100% に変更 */
    height: auto;
    padding: 0;     /* 余計な隙間を消す */
}
.slick-list { width: 100%; margin: auto; }

/* スマホ用の高さ調整（必要に応じてCSSに追加） */
@media screen and (max-width: 768px) {
    .slider3 img {
        height: 60vh; /* 画面の高さの60%くらいに収める */
        object-fit: cover; /* 画像をトリミングして枠に収める */
    }
}

.slick-dots { margin: 20px auto 0; }
.slick-dots li {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 30px;
  margin: 0 5px;
  padding: 0;
}
.slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 30px;
  height: 30px;
  padding: 5px;
  cursor: pointer;
  color: #000;
  border: 0;
  outline: none;
  background: transparent;
}
.slick-dots li button:before {
  font-size: 40px;
  line-height: 30px;
  position: absolute;
  top: 0; left: 0;
  width: 30px; height: 30px;
  text-align: center;
  color: #000;
}

.carousel__box img { width: 100%; }
.slider_sp {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-items: flex-end;
}
.slider_sp .carousel__box img { width: 80%; }
.last_box { margin: 0px auto 10%; }
.top_box { margin-top: 10%; margin-bottom: 0%; }
.first_box { margin: -10% auto; }

@media screen and (min-width:1024px) {
    .slider__container02 {
        width: 100%;      /* PCでも幅100% */
        margin: 2% 0 8% 0; /* 以前あった左右の5%余白を0にする */
        position: relative; /* 文字を配置する基準点になります */
    width: 100%;
    overflow: hidden;
    }
}

/* 固定文字の重なりエリア */
.slider-fixed-text-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;          /* スライダーより手前に表示 */
    pointer-events: none; /* ★重要：下のスライダーのクリックを邪魔しない */
}

/* 固定文字の共通スタイル */
.fixed-text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* 常に左右中央に配置 */
    width: 100%;
    text-align: center;
    color: #ffffff;
    font-size: 1.2rem;   /* デザインに合わせて調整 */
    text-shadow: 0 0 10px rgba(0,0,0,0.5); /* 文字を見やすくする影 */
    font-family: Arial, Helvetica, sans-serif;
}

/* 上の文字の位置 */
.fixed-text--top {
    top: 49%; /* 上からの位置に固定 */
}

/* スマホ用の高さ調整（必要に応じてCSSに追加） */
@media screen and (max-width: 768px) {
.fixed-text--top {
    top: 46%; /* 上からの位置 */
}
}

/* 下の文字の位置 */
.fixed-text--bottom {
    bottom: 42%; /* 下からの位置 */
}

/* --- Modal --- */
.overlay {
  display: none;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  position: fixed;
  z-index: 100;
  top: 0;
}
.btn_area {
  width: 70%;
  height: 30%;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  background: #fff;
  text-align: center;
  z-index: 2;
}
.btn_area .ttl { font-weight: bold; }
.btn_area p { padding: 10px; }
.btn_area button {
  display: block;
  margin: 0 auto;
  background: #333;
  color: #fff;
  padding: 15px 40px;
  border: none;
}
.btn_area button:hover { background: #777; }

/* ==========================================================================
   Animations
   ========================================================================== */
.inview {
  position: absolute;
  top: 0; left: 0;
  opacity: 0;
  transition: 0.4s;
}
a:hover .inview { opacity: 1; }

/* Loop Animation */
.loop:before {
  content: "";
  display: block;
  padding-top: 100%;
}
.loop img:first-child { display: block; margin: 0 auto; }
.loop img:nth-child(2) {
  animation-name: loop;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-delay: 2s;
  position: absolute;
}
.loop:hover {
  animation-play-state: paused;
  opacity: 1;
}

@keyframes loop {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* Image Switch Animation */
.container { position: relative; }
.animate_img_swich {
  position: absolute;
  width: 100%;
  opacity: 0;
  animation: change-img-anim 10s infinite;
}
.animate_img_swich:nth-of-type(1) { animation-delay: 0s; }
.animate_img_swich:nth-of-type(2) { animation-delay: 5s; }

@keyframes change-img-anim {
  0% { opacity: 0; }
  30% { opacity: 1; }
  40% { opacity: 1; }
  60% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

/* --- ベースのレイアウト --- */
.lp_itemBox {
  max-width: 800px; /* 全体の最大幅（適宜調整してください） */
  margin: 0 auto 60px;
  padding: 0 20px;
  box-sizing: border-box;
  position: relative;
    z-index: 5;
}

.lp_itemBox img {
  width: 100%;
  height: auto;
  display: block;
}

/* Flexboxの基本設定 */
.flex {
  display: flex;
  flex-wrap: wrap;
}

.flex_Js {
  justify-content: space-between;
}

/* --- 重ねるレイアウト (overlap-layout) --- */
.overlap-layout {
 margin-top: 40px; /* マイナス（-50pxなど）になっていたらプラスに変更 */
 z-index: 2;
  position: relative;
  align-items: center; /* 垂直方向中央揃え */
  margin-top: -50px;   /* 上の要素との重なり具合調整 */
  z-index: 2;          /* 前に出す */
}

/* 1枚目（左・下） */
.overlap-layout .anime:nth-child(1) {
  width: 55%; /* 画像の幅 */
}

/* 2枚目（右・上） 重ねる処理 */
.overlap-layout .anime:nth-child(2) {
  width: 50%; /* 画像の幅 */
  margin-top: 80px; /* 2枚目の画像をさらに下にずらす */
  margin-left: -10%; /* ★ここで左に食い込ませて重ねる */
  margin-top: 15%;   /* 少し下にずらす */
  z-index: -1;       /* 後ろに配置（必要に応じて数値を変更） */
}

/* --- 2カラムレイアウト (col-2) --- */
.col-2 {
  margin-top: 20px;
  align-items: flex-start;
}

.col-2 .anime {
  width: 48%; /* 2枚並べるので少し隙間を空ける */
}

/* --- ふわっと出るアニメーション --- */
.anime {
  opacity: 0;                   /* 最初は透明 */
  transform: translateY(40px);  /* 最初は40px下にいる */
  transition: all 1.2s cubic-bezier(0.165, 0.84, 0.44, 1); /* ゆっくりふわっと動く設定 */
}

.anime, 
.bg-pink-beige, 
.lp_parts5 {
    position: relative;    /* ★重要：これがないとz-indexが効きません */
    z-index: 10 !important; /* 文字（1）より大きい数字にする */
}

/* 表示された時のクラス */
.anime.is-show {
  opacity: 1;               /* 不透明にする */
  transform: translateY(0); /* 元の位置に戻す */
}

/* スマホ対応（重なりを解除する場合） */
@media screen and (max-width: 768px) {
  .overlap-layout {
    display: block; /* 横並び解除 */
    margin-top: 0;
  }
  .overlap-layout .anime:nth-child(1),
  .overlap-layout .anime:nth-child(2) {
    width: 100%;
    margin-left: 0;
    margin-top: 20px;
  }
}

/* 紹介文セクションの下に余白を作る */
.reccomend_contents2 {
    padding-bottom: 100px; /* ★ここの数字を大きくすると隙間が広がります */
}

/* スマホでは少し狭める調整 */
@media screen and (max-width: 768px) {
    .reccomend_contents2 {
        padding-bottom: 60px;
    }
}

/* セクションごとの間隔をガッツリ開ける */
.lp_itemBox {
    margin-bottom: 120px; /* セクション（まとまり）ごとの隙間 */
}

/* 枠の中にある画像同士（animeクラス）の間隔も開ける */
.lp_itemBox .anime {
    margin-bottom: 50px;  /* 上下の画像同士の隙間 */
}

/* 最後の要素だけは下の余白を消す（後のセクションへの影響を防ぐ） */
.lp_itemBox .anime:last-child {
    margin-bottom: 0;
}

/* スマホでは間隔を少しタイトに調整 */
@media screen and (max-width: 768px) {
    .lp_itemBox {
        margin-bottom: 70px;
    }
    .lp_itemBox .anime {
        margin-bottom: 30px;
    }
}


	/* --- スリム固定ヘッダーのスタイル --- */
#utility_header {
    position: fixed;        /* 画面上部に固定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;           /* 高さをスリムに設定 */
    background-color: #fff; /* 背景は白 */
    display: flex;
    align-items: center;    /* 文字を上下中央に */
    z-index: 10000;         /* 他のどの要素よりも上に表示 */
    border-bottom: 1px solid #eee;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* 境目を分かりやすく少し影を出す */
}

.header_content {
    max-width: 1200px;      /* コンテンツの最大幅 */
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    font-size: 10px;        /* 文字を小さくして上品に */
    color: #666;            /* 文字色は薄めのグレー */
    text-align: left;
    white-space: nowrap;    /* 改行させない */
    overflow: hidden;       /* はみ出た分は隠す（スマホ対策） */
    text-overflow: ellipsis; /* はみ出た場合「...」にする */
}

/* ヘッダー内のリンク文字の色をグレーに固定 */
.header_content a {
    color: #666 !important; /* お好みの濃さのグレー。もっと薄くするなら #999 */
    text-decoration: none !important; /* 下線もつかないように念押し */
}

/* マウスを乗せた時（ホバー）の色も指定しておくと親切です */
.header_content a:hover {
    color: #bb8968 !important; /* リエディさんらしい色、または #333 など */
    opacity: 0.7;
}

/* 区切り文字（＞）の色も調整する場合 */
.separator {
    color: #ccc;
    margin: 0 5px;
}

/* --- Denim Selector Section --- */
.denim-selector-section {
    max-width: 1200px;
    margin: 100px auto;
    padding: 0 20px;
}

.selector-header {
    text-align: center;
    margin-bottom: 60px;
}

.selector-main-title {
    font-family: 'Times New Roman', serif;
    font-size: 32px;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
}

.selector-sub-title {
    font-size: 14px;
    color: #888;
}

/* グリッドレイアウト */
.selector-container {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

.selector-item {
    width: 32%; /* PCは3枚並び */
    position: relative;
}

/* メリットタグ */
.benefit-tag {
    position: absolute;
    top: -15px;
    left: 20px;
    background: #202020;
    color: #fff;
    padding: 8px 15px;
    font-size: 11px;
    letter-spacing: 0.05em;
    z-index: 5;
}

.selector-img-wrap {
    overflow: hidden;
    margin-bottom: 20px;
}

.selector-img-wrap img {
    width: 100%;
    height: auto;
    transition: transform 0.6s ease;
}

.selector-link:hover img {
    transform: scale(1.05);
}

/* 商品情報 */
.selector-info {
    text-align: left;
}

.item-code {
    font-size: 10px;
    color: #aaa;
    display: block;
    margin-bottom: 5px;
}

.item-name {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 15px;
    height: 3em; /* 高さを揃える */
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.selector-btn {
    display: inline-block;
    font-size: 11px;
    border-bottom: 1px solid #202020;
    padding-bottom: 3px;
    transition: 0.3s;
}

.selector-btn2 {
    display: inline-block;
    font-size: 11px;
    border-bottom: 1px solid #202020;
    padding-bottom: 3px;
    transition: 0.3s;
    margin: 10px;
}

.selector-link {
    text-decoration: none;
    color: #202020;
}

/* --- Responsive (Mobile) --- */
@media screen and (max-width: 768px) {
    .denim-selector-section {
        margin: 60px auto;
    }
    
    .selector-container {
        flex-direction: column; /* 1列にする */
        gap: 60px; /* スマホでは上下の間隔を広く */
    }
    
    .selector-item {
        width: 100%;
    }
    
    .selector-main-title {
        font-size: 26px;
    }
}

/* --- 2枚並び用の追加設定 --- */
.selector-container.col-2 {
    max-width: 900px; /* 2枚の時は少し幅を絞ると「Meism」っぽく上品になります */
    margin: 0 auto;
}

.selector-container.col-2 .selector-item {
    width: 48%; /* PCは2枚並び */
}

/* タグが長くなる場合を考慮した調整 */
.selector-container.col-2 .benefit-tag {
    max-width: 90% ;
    white-space: normal; /* タグ内で改行を許可 */
    line-height: 1.4;
}

/* スマホ用の調整 */
@media screen and (max-width: 768px) {
    .selector-container.col-2 {
        flex-direction: column;
        gap: 60px;
    }
    
    .selector-container.col-2 .selector-item {
        width: 100%; /* スマホは1枚 */
    }
}

/* Item list内のリンクとテキストの下線を消す */
.lpContent__continer a,
.chibi_text,
.contents_title {
    text-decoration: none !important;
}

/* --- 画像切り替え(Hover Effect) --- */
.image-switch {
    position: relative;
    width: 100%;
    /* ★重要：枠の比率を固定（縦長なら 3/4、正方形なら 1/1） */
    aspect-ratio: 3 / 4; 
    overflow: hidden;
    background-color: #f8f8f8; /* 読み込み中に一瞬白くならないよう背景を敷く */
}
/* 2枚目の画像（モデル画像）を初期状態で透明にして重ねる */
.image-switch .img-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease; /* ふわっと切り替わるスピード */
    object-fit: cover;
}

/* 1枚目と2枚目、両方の設定を統一する */
.image-switch img {
    position: absolute; /* 2枚とも重ねて配置 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;   /* ★重要：枠に合わせて画像を自動トリミング */
    display: block;
}

/* 1枚目（初期状態） */
.image-switch .img-default {
    z-index: 1;
    opacity: 1;
}

/* 2枚目（ホバー・アニメーション用） */
.image-switch .img-hover {
    z-index: 2;
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* ホバー時に2枚目を表示 */
.selector-link:hover .img-hover {
    opacity: 1;
}

/* --- 商品説明のスタイル --- */
.product-summary {
    font-size: 12px;
    line-height: 1.6;
    color: #666;
    margin: 10px 0 15px;
    /* モバイルで見やすいよう、少し余白を調整 */
    padding-right: 10px;
}

/* --- 下線を完全に消す（再徹底） --- */
.selector-link, 
.selector-link:hover, 
.selector-link:visited {
    text-decoration: none !important;
    outline: none;
}

/* スマホでは切り替えを行わず1枚目だけ出す（またはタップで切り替わる）設定 */
@media screen and (max-width: 768px) {
    .product-summary {
        font-size: 13px; /* スマホは少し大きくすると読みやすい */
    }
}

/* スマホ（768px以下）の設定 */
@media screen and (max-width: 768px) {
    /* マウスホバーの代わりにアニメーションを適用 */
    .image-switch .img-hover {
        animation: autoSwitch 6s infinite; /* 6秒ごとに繰り返す */
    }
}

/* 交互にふわっと表示させる動き */
@keyframes autoSwitch {
    0%, 40% { opacity: 0; }  /* 0〜2.4秒：商品画像（デフォルト）を表示 */
    50%, 90% { opacity: 1; } /* 3.0〜5.4秒：モデル画像を表示 */
    100% { opacity: 0; }    /* 最後に戻る */
}

/* 背景装飾テキストの基本設定 */
.section-bg-text {
    width: 100%;
    overflow: hidden; /* ハミ出した文字を隠す */
    font-family: 'Times New Roman', Times, serif;
    font-size: 18vw; /* 画面幅に対して巨大なサイズ */
    font-weight: 900; /* 極太にしてグラフィック感を出す */
    color: #d1ab98;
    line-height: 1;
    letter-spacing: -0.02em; /* 文字間を詰めて密度を上げる */
    user-select: none; /* テキスト選択不可にする */
    pointer-events: none; /* クリックを邪魔しない */
    margin: 60px 0; /* 前後のセクションとの余白 */
    white-space: nowrap; /* 改行させない */
    display: flex;
    justify-content: center;
    position: relative;
}

/* リエディらしい「ズレ」を作るための微調整 */
.section-bg-text:nth-of-type(even) {
    justify-content: flex-start; /* 左寄せ */
    margin-left: -5%; /* 少し左にハミ出させる */
}

.section-bg-text:nth-of-type(odd) {
    justify-content: flex-end; /* 右寄せ */
    margin-right: -5%; /* 少し右にハミ出させる */
}

/* セクション全体の親要素 */
.sticky-wrap {
    position: relative;
    overflow: visible !important; /* 絶対にvisible */
    min-height: 100vh;           /* stickyが動くための十分な高さ */
}


/* 固定される背景文字 */
.sticky-bg-text {
  z-index: 1 !important; /* 1番低い数字 */
    pointer-events: none;  /* 念のためクリックを無効化 */
  font-size: 100px;
    position: -webkit-sticky;
    position: sticky;
    top: 50%;                    /* 画面の真ん中で固定 */
    transform: translateY(-50%); /* 完全に中央へ */
    z-index: 1;                  /* 重なり順位を一番下へ */
    
    /* 色をリエディらしいベージュ系にするなら */
    color: #d1ab98;              
    opacity: 0.2;
}

@media screen and (max-width: 768px) {
    .sticky-bg-text {
        /* 2行になった時の行間をギュッと詰める */
        line-height: 0.85 !important; 
        
        /* もし「DENIM COLLECTION」が2行で画面を埋めすぎるならサイズも微調整 */
        font-size: 18vw; 
        
        /* 2行表示を許可する設定（もし以前nowrapにしていたら必要） */
        white-space: normal; 
        
        /* 文字が詰まりすぎて上下が切れる場合は少しだけパディングを */
        padding: 10px 0;
    }
}

/* 前面のコンテンツを浮かせる（重なりを綺麗に見せるため） */
.selector-header, 
.selector-container {
    position: relative;
    z-index: 10;                 /* 文字より必ず上にくるように */
}


/* --- 背景色切り替えセクション --- */

/* 画面幅いっぱいの背景色エリア */
.bg-pink-beige {
    background-color: #d1bbb0; /* 指定のピンクベージュ */
    width: 100%;
    padding: 80px 0; /* 上下に少し広い余白を入れて上品に見せる */
    margin-bottom: 60px; /* 次のセクションとの間隔 */
}

/* このエリアの中にある lp_itemBox だけ、余白設定を上書き調整 */
.bg-pink-beige .lp_itemBox {
    margin-bottom: 0; /* 親要素で余白を取ったので、ここでの下マージンは不要 */
    /* 背景色がつくので、中のコンテンツが端にくっつきすぎないよう少し内側に余白を足す */
    padding-top: 20px;
    padding-bottom: 20px;
}

/* スマホでの調整 */
@media screen and (max-width: 768px) {
    .bg-pink-beige {
        padding: 50px 0; /* スマホでは上下の余白を少し狭めに */
    }
}

/* ページ全体、パンくず、SNSエリアの背景を一括で統一 */
body, 
#utility_header, 
.reccomend_contents7, 
footer {
    background-color: #EFF0EA !important; /* メインの背景色 */
}

/* パンくずリストの境界線を馴染ませる */
#utility_header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* 真っ白な線ではなく、少しだけ透けた線にする */
    box-shadow: none; /* もし影がついていたら消す */
}

/* SNSエリアの余白を調整して、色が途切れないようにする */
.reccomend_contents7 {
    padding-top: 60px;
    padding-bottom: 60px;
    margin-bottom: 0;
}

/* ホバー時（マウスを乗せた時）の下線を完全に消す設定 */
.selector-link:hover, 
.selector-link:hover .item-name,
.selector-link:hover .selector-btn,
.selector-link:hover span,
.selector-link:hover p {
    text-decoration: none !important;
    border-bottom: none !important; /* もしborderで線が引かれている場合も想定して消す */
}

/* --- 強制下線削除（核） --- */

/* 1. リンク自体のホバー設定を完全リセット */
.selector-link:hover, 
.selector-link:active, 
.selector-link:focus {
    text-decoration: none !important;
    outline: none !important;
}

/* 2. リンクの中にある「すべての文字要素」から線を取り除く */
.selector-link:hover * {
    text-decoration: none !important;
    border-bottom: none !important; /* ボタンの線なども含めて一旦全部消す */
}

/* 3. もし「VIEW DETAIL」の下線だけは残したい、という場合は以下を有効に（不要なら削除） */
/*
.selector-link:hover .selector-btn {
    border-bottom: 1px solid #202020 !important;
}
*/