:root {
  --color-primary: #C5838D;
  --color-text: #5A4A48;
  --color-bg: #FDFBF9;
  --color-bg-light: #F7F3EF;
  --color-white: #FFFFFF;
  --font-serif: 'Noto Serif JP', serif;
  --font-sans: 'Noto Sans JP', sans-serif;
  --font-en: 'Playfair Display', serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background:
    radial-gradient(circle at 18% 14%, rgba(242, 159, 103, 0.42) 0 12%, rgba(242, 159, 103, 0) 34%),
    radial-gradient(circle at 82% 24%, rgba(246, 186, 128, 0.4) 0 13%, rgba(246, 186, 128, 0) 36%),
    radial-gradient(circle at 28% 74%, rgba(235, 134, 95, 0.3) 0 15%, rgba(235, 134, 95, 0) 38%),
    radial-gradient(circle at 78% 86%, rgba(248, 205, 157, 0.38) 0 14%, rgba(248, 205, 157, 0) 37%),
    linear-gradient(135deg, #fff8f0 0%, #fde4cd 46%, #fffaf4 100%);
  display: flex;
  justify-content: center;
}

.lp-container {
  width: 100%;
  max-width: 500px;
  background-color: var(--color-bg);
  min-height: 100vh;
  box-shadow:
    0 22px 50px rgba(90, 74, 72, 0.16),
    0 8px 18px rgba(90, 74, 72, 0.08);
  position: relative;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  color: inherit;
}

/* --- Utilities --- */
.bg-light { 
  background-color: var(--color-bg-light);
}
.bg-gray { background-color: #E2DFDF; }

/* --- Buttons --- */
.btn {
  display: inline-block;
  padding: 12px 30px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  transition: opacity 0.3s;
  width: 100%;
  max-width: 280px;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  /* background-color: #ff874a; */
  background-color: #d56e4b;
  color: var(--color-white);
}
.btn:hover {
  /* background-color: #ff874a; */
  background-color: #d56e4b;
  border-color: #e56f35;
  color: var(--color-white);
}
.btn-primary {
  /* background-color: #ff874a; */
  background-color: #d56e4b;
  color: var(--color-white);
  padding: 14px 40px;
  font-size: 14px;
}
.btn-primary:hover {
  /* background-color: #ff874a; */
  background-color: #d56e4b;
  border-color: #e56f35;
  color: var(--color-white);
}
.btn-secondary {
  /* background-color: #ff874a; */
  background-color: #d56e4b;
  color: var(--color-white);
}
.btn-outline {
  background-color: var(--color-white);
  border: 1px solid #E0E0E0;
  color: var(--color-text);
  text-align: center;
  padding: 12px 20px;
  font-size: 12px;
}
.btn-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* --- Header --- */
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 20px;
  background-color: transparent;
  position: absolute;
  width: 100%;
  z-index: 10;
}
.logo { 
  max-width: 50%;

}

/* --- Hero Section  --- */
.hero.new-hero {
  position: relative;
  padding: 0;
  display: block;
  height: auto;
  background-color: transparent;
}

.hero-bg-img {
  width: 100%;
  display: block;
}


.hero-circle-nav {
  position: absolute;
  top: 10%;
  left: 3%;
  display: flex;
  flex-direction: column;
  gap: 2vw;
  z-index: 5;
}

.circle-btn {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 30vw; 
  height: 30vw;
  max-width: 150px; 
  max-height: 150px;

  border-radius: 50%;
  background: linear-gradient(135deg, rgba(226, 147, 165, 0.9) 0%, rgba(248, 235, 223, 0.9) 100%);
  color: var(--color-white);
  text-align: center;
  font-size: clamp(14px, 3vw, 20px); 
  font-weight: bold;
  line-height: 1.3;
  transition: transform 0.2s;
  padding: 0;  
  font-family: "游明朝体", "Yu Mincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

.circle-btn:hover {
  transform: scale(1.05);
}

.hero-text-content {
  position: absolute;
  bottom: 8%;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 5;
  font-family: "游明朝体", "Yu Mincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  padding: 0 10px;
}

.hero-slogan {
  color: var(--color-white);
  font-size: clamp(14px, 4.5vw, 25px); 
  text-shadow: 0 1px 4px rgba(0,0,0,0.4); 
  margin-bottom: 2px;
}

.hero-title-area {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1vw; 
}

.hero-main-title {
  font-size: clamp(40px, 15vw, 80px); 
  color: #DB8D9E; 
  line-height: 1;
  letter-spacing: 2px;
  text-shadow: 0px 0px 10px rgba(255, 255, 255, 1);
}

.hero-sub-title {
  color: var(--color-white);
  font-size: clamp(20px, 7vw, 40px); 
  font-weight: bold;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4); 
  line-height: 1.2;
  
  writing-mode: vertical-rl; 
  text-orientation: upright; 
  letter-spacing: 0.1em;
}
.nav-item {
  font-size: 11px;
  text-align: center;
  width: 70px;
  flex-shrink: 0;
}
.icon-placeholder { width: 45px; height: 45px; background: rgba(255,255,255,0.9); border-radius: 50%; margin: 0 auto 6px; border: 1px solid #E5C3C6;}
.scroll-down { text-align: center; font-size: 10px; color: #888; margin-top: 15px; letter-spacing: 1px;}

/* --- Section Global Settings --- */
.section {
  padding: 0px 20px;
  margin: 50px 0px;
  text-align: center;
}

.section_01 {
  padding: 50px 20px;
}

.section-header { margin-bottom: 30px; }
.sec-meta { display: flex; justify-content: center; align-items: center; gap: 8px; margin-bottom: 5px; }
.sec-num {  font-size: 20px; color: var(--color-primary); font-family: Times New Roman; }
.sec-en {  font-size: 14px; color: #E5C3C6; font-family: Times New Roman; }
.sec-title { font-family: var(--font-serif); font-size: 20px; font-weight: normal; line-height: 1.4; }
.sec-title span { color: var(--color-primary); }

/* --- Section 01: Maternity Guide Intro --- */
.maternity-guide-intro {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  margin: 0;
  padding: 70px 24px;
  background: #fae9e2;
}

.maternity-guide-inner {
  color: #6B5550;
  font-family: var(--font-serif);
  text-align: center;
  letter-spacing: 0.08em;
}

.maternity-guide-inner h2 {
  margin-bottom: 28px;
  font-size: 25px;
  font-weight: 600;
  line-height: 1.6;
}

.maternity-guide-inner p {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.8;
}

/* --- Section 01: Purpose (2列グリッド) --- */
.grid-icons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 30px;
}
.icon-card {
  background: var(--color-white);
  border-radius: 8px;
  font-size: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.02);
  align-items: center;
  border: 1px solid #F2EFEF;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 15px;
  box-sizing: border-box;
}

.icon-bg {
  width: 100%; 
  max-width: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin-bottom: 8px;
}


.icon-img {
  width: 100%; 
  height: auto; 
  aspect-ratio: 1 / 1;
  object-fit: contain;
  transform: translateX(-9999px);
  filter: drop-shadow(9999px 0 0 #C5838D);
}

/* --- Section 02: Worries Support --- */
.worries-support {
  position: relative;
  background: #fde4cd;
  /* background: #fde4cd; */
  margin: 0;
  padding: 82px clamp(24px, 8vw, 42px) 55px;
}

.worries-support:not(.category-search)::before {
  content: "";
  position: absolute;
  top: -58px;
  left: 0;
  width: 100%;
  height: 60px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 70' preserveAspectRatio='none'%3E%3Cpath d='M0 38 C82 10 135 7 218 31 C307 58 382 64 500 20 L500 70 L0 70 Z' fill='%23fde4cd'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
  pointer-events: none;
}

.worries-header {
  margin-bottom: 36px;
  text-align: center;
  color: #6b5550;
}

.worries-lead {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
  font-family: var(--font-sans);
  font-size: 18px;
  letter-spacing: 0.16em;
}

.worries-lead::before,
.worries-lead::after {
  content: "";
  width: 34px;
  height: 1px;
  background: rgba(107, 85, 80, 0.35);
}

.worries-header h2 {
  position: relative;
  display: inline-block;
  padding-bottom: 13px;
font-family: "amandine", sans-serif;
font-weight: 500;
font-style: normal;
  font-size: 27px;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1;
}

.worries-header h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 170px;
  height: 1px;
  background: rgba(107, 85, 80, 0.35);
  transform: translateX(-50%);
}

.worries-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(14px, 5vw, 22px);
  row-gap: 26px;
}

.worries-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #6b5550;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  line-height: 1.4;
}

.worries-icon {
  width: clamp(64px, 18vw, 73px);
  height: clamp(64px, 18vw, 73px);
  margin-bottom: 10px;
  border-radius: 50%;
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.worries-icon img {
  width: 68%;
  height: 68%;
  object-fit: contain;
  transform: translateX(-9999px);
  filter: drop-shadow(9999px 0 0 #7f7774);
}

.worries-text {
  min-height: 2.8em;
}

/* --- Category Search --- */
.category-search {
  border-top: 0;
}

.category-search::before {
  content: "";
  position: absolute;
  top: -58px;
  left: 0;
  width: 100%;
  height: 60px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 70' preserveAspectRatio='none'%3E%3Cpath d='M0 38 C82 10 135 7 218 31 C307 58 382 64 500 20 L500 70 L0 70 Z' fill='%23fde4cd'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
  inter-events: none;
}

.category-grid {
  row-gap: 28px;
}

.category-search .worries-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
  filter: none;
}

.category-all-icon {
  color: #7f7774;
  font-size: 24px;
}

@media (max-width: 430px) {
  .category-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Section 02: Column & Comics --- */
.column-comics {
  position: relative;
  margin: -58px 0 0;
  padding: 120px 0 56px;
  overflow: hidden;
}

.column-comics::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 70' preserveAspectRatio='none'%3E%3Cpath d='M0 32 C90 63 158 62 244 36 C332 10 404 8 500 42 L500 70 L0 70 Z' fill='%23ffffff'/%3E%3C/svg%3E") center top / 100% 70px no-repeat,
    linear-gradient(var(--color-white), var(--color-white)) center 69px / 100% calc(100% - 69px) no-repeat;
  pointer-events: none;
}

.column-comics > * {
  position: relative;
  z-index: 1;
}

.column-comics-header {
  margin-bottom: 52px;
  color: #2f2f2f;
  text-align: center;
}

.column-comics-bubble {
  position: relative;
  display: inline-block;
  min-width: 205px;
  margin-bottom: 26px;
  padding: 10px 26px;
  border: 2px solid #2f2f2f;
  border-radius: 999px;
  background: var(--color-white);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.column-comics-bubble::before {
  content: "";
  position: absolute;
  left: 47px;
  bottom: -17px;
  width: 24px;
  height: 17px;
  border-left: 2px solid #2f2f2f;
  border-bottom: 2px solid #2f2f2f;
  border-bottom-left-radius: 18px;
  background: var(--color-white);
}

.column-comics-header h2 {
  display: inline-block;
  padding-bottom: 14px;
  border-bottom: 1px solid #2f2f2f;
  font-family: var(--font-sans);
  font-size: clamp(25px, 7vw, 36px);
  font-weight: 400;
  letter-spacing: 0.22em;
  line-height: 1.1;
}

.column-comics-list {
  display: flex;
  gap: 28px;
  margin-bottom: 42px;
  padding: 0 0 10px 46px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-padding-left: 46px;
  scroll-snap-type: x mandatory;
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.column-comics-list.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
}

.column-comics-list::-webkit-scrollbar {
  display: none;
}

.column-comics-card {
  flex: 0 0 210px;
  color: #2f2f2f;
  scroll-snap-align: start;
  text-align: left;
  -webkit-user-drag: none;
}

.column-comics-img {
  display: block;
  aspect-ratio: 1 / 0.92;
  margin-bottom: 17px;
  border-bottom: 1px solid #d8d8d8;
  overflow: hidden;
  background: #f2f2f2;
}

.column-comics-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}

.column-comics-title {
  display: block;
  padding-bottom: 22px;
  border-bottom: 1px solid #d8d8d8;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}

.maternity-stage-list {
  gap: 26px;
  padding-right: 46px;
}

.maternity-stage-card {
  position: relative;
  flex: 0 0 275px;
  min-height: 210px;
  padding: 18px 14px 16px;
  border-radius: 64% 36% 58% 42% / 45% 34% 66% 55%;
  color: #5f5552;
  text-align: center;
  scroll-snap-align: start;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(90, 74, 72, 0.05);
}

.maternity-stage-card:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -27px;
  width: 26px;
  border-top: 2px dotted #cfc7c3;
  transform: translateY(-50%);
  pointer-events: none;
}

.maternity-stage-card-01 {
  background: #fccda2;
}

.maternity-stage-card-02 {
  border-radius: 38% 62% 43% 57% / 36% 48% 52% 64%;
  background: #fccda2;
}

.maternity-stage-card-03 {
  border-radius: 60% 40% 62% 38% / 42% 32% 68% 58%;
  background: #fccda2;
}

.maternity-stage-card-04 {
  border-radius: 42% 58% 46% 54% / 34% 44% 56% 66%;
  background: #fccda2;
}

.maternity-stage-illust {
  display: block;
  width: 68px;
  height: auto;
  margin: 0 auto 8px;
  overflow: hidden;
}

.maternity-stage-illust img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
  pointer-events: none;
  -webkit-user-drag: none;
}

.maternity-stage-label {
  display: block;
  margin-bottom: 2px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

.maternity-stage-period {
  display: block;
  margin-bottom: 11px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

.maternity-stage-dot {
  display: block;
  width: 22px;
  height: 22px;
  margin: 0 auto 11px;
  border-radius: 50%;
  background: #e39b72;
}

.maternity-stage-card-02 .maternity-stage-dot {
  background: #d47d68;
}

.maternity-stage-card-03 .maternity-stage-dot {
  background: #d0896a;
}

.maternity-stage-card-04 .maternity-stage-dot {
  background: #c49a78;
}

.maternity-stage-title {
  display: block;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.column-comics-more {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
  width: calc(100% - 92px);
  margin: 0 auto;
  padding: 22px 32px;
  border: 0;
  border-radius: 10px;
  background: #e7f4ec;
  color: #2f2f2f;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.column-comics-more:hover {
  background: #d9edde;
  transform: translateY(-2px);
}

.column-comics-arrow {
  font-size: 26px;
  line-height: 1;
}

@media (max-width: 430px) {
  .column-comics-list {
    gap: 22px;
    padding-left: 32px;
    scroll-padding-left: 32px;
  }

  .column-comics-card {
    flex-basis: 180px;
  }

  .column-comics-more {
    width: calc(100% - 64px);
    padding: 20px 28px;
  }
}

/* --- Section 02: Type (2列グリッド) --- */
.grid-types {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 30px;
}
.type-card {
  background: var(--color-white);
  border-radius: 8px;
  overflow: hidden;
  padding-bottom: 15px;
  border: 1px solid #F2EFEF;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.type-img { 
  height: 120px; 
  background: #EAEAEA; 
  margin-bottom: 12px; 
  overflow: hidden;
}

.type-img img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
}

.type-img img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
}
.type-card h3 { font-size: 13px; margin-bottom: 6px; font-weight: bold; }
.type-card p { font-size: 11px; color: #777; padding: 0 10px; line-height: 1.4; }

/* --- Section 03: Concern (スマホ用1列リスト) --- */
.list-concerns {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.concern-item {
  background: var(--color-white);
  padding: 16px 20px;
  border-radius: 8px;
  text-align: left;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.02);
  border-left: 3px solid #ff874a;
}
.arrow { color: #ff874a; font-weight: bold; }

.qa-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.qa-item-accordion {
  overflow: hidden;
  border: 1px solid #f5ddd0;
  border-radius: 10px;
  background: var(--color-white);
  box-shadow: 0 2px 8px rgba(90, 74, 72, 0.04);
}

.qa-question {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 16px 18px;
  border: 0;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
}

.qa-label {
  flex: 0 0 24px;
  height: 24px;
  border-radius: 50%;
  /*background: #ff874a;*/
  background: #d56e4b;
  color: var(--color-white);
  font-family: var(--font-en);
  font-size: 15px;
  line-height: 24px;
  text-align: center;
}

.qa-toggle {
  margin-left: auto;
  /*color: #ff874a;*/
  color: #d56e4b;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}

.qa-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 18px;
  color: #6f6260;
  font-size: 12px;
  line-height: 1.8;
  text-align: left;
  transition: max-height 0.25s ease, padding 0.25s ease;
}

.qa-answer p {
  margin-bottom: 10px;
}

.qa-answer p span {
  margin-right: 6px;
  color: #ff874a;
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 700;
}

.qa-answer a {
  display: inline-block;
  margin-bottom: 16px;
  color: #ff874a;
  font-weight: 700;
  text-decoration: underline;
}
.qa-answer a:hover {
  color: #e56f35;
}

.qa-item-accordion.is-open .qa-answer {
  max-height: 180px;
  padding: 0 18px 16px;
}

.qa-item-accordion.is-open .qa-toggle {
  transform: rotate(45deg);
}

/* --- Section 04: Brand (3列グリッド) --- */
.grid-brands {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 30px;
}
.brand-item {
  background: var(--color-white);
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-en);
  font-size: 11px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.02);
  border: 1px solid #F2EFEF;
}

.split-content {
  padding: 40px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.split-content p { font-size: 12px; margin-top: 10px; margin-bottom: 20px; line-height: 1.6; }
.split-image { width: 100%; height: 220px; background-size: cover; background-position: center; }

/* Section 07 Q&A List */
.split-list {
  padding: 10px 20px 30px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qa-item {
  background: var(--color-white);
  padding: 15px;
  border-radius: 8px;
  font-size: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.02);
  display: flex;
  align-items: center;
  text-align: left;
}
.qa-item span { 
  color: var(--color-primary); 
  margin-right: 10px; 
  font-weight: bold; 
  border: 1px solid var(--color-primary); 
  border-radius: 50%; 
  width: 18px; 
  height: 18px; 
  display: inline-flex; 
  justify-content: center; 
  align-items: center; 
  font-size: 11px;
  flex-shrink: 0;
}

/* --- Footer Banner --- */
.footer-banner {
  padding: 0px 20px 30px; 
  text-align: center;
}
.footer-banner h2 { font-family: var(--font-sans); font-size: 22px; font-weight: normal; margin-bottom: 8px; }
.footer-banner p { font-size: 12px; margin-bottom: 20px; }

.footer-section {
    /* background-color: #fff; */
    padding: 40px 20px;
    text-align: center;
}
.contact { margin-bottom: 32px; }
.contact strong { font-size: 1.4rem; display: inline-block; margin-left: 8px; }
.contact .hours { font-size: 0.8rem; margin-bottom: 16px; color: #6b7280; }
.footer-nav {
  margin-bottom: 24px;
  list-style: none;
  }
.footer-nav li { margin-bottom: 8px; font-size: 0.85rem; }
.copyright { font-size: 0.75rem; color: #9ca3af; }





/* --- Footer Features & Bottom --- */

.feature-item {
  background: var(--color-white);
  padding: 15px;
  border-radius: 8px;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  width: 100%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}
.feature-item span { display: block; font-size: 13px; margin-top: 3px; color: var(--color-primary); }

.footer-bottom {
  text-align: center;
  padding: 20px;
  background-color: var(--color-white);
  font-size: 10px;
  color: #888;
  border-top: 1px solid #F2EFEF;
}


.search-detail {
  background-color: var(--color-bg);
}

.search-box {
  background: var(--color-white);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.02);
  border: 1px solid #F2EFEF;
  text-align: left;
}

.search-box-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 15px;
  color: var(--color-text);
  display: flex;
  align-items: center;
}

.search-box-title span {
  color: var(--color-primary);
  margin-right: 8px;
  font-size: 12px;
}

/* サイズグリッド */
.size-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 15px;
}

.size-item {
  border: 1px solid #E0E0E0;
  border-radius: 4px;
  padding: 10px 0;
  text-align: center;
  font-size: 12px;
  color: var(--color-text);
  transition: all 0.2s;
}

.size-item:hover {
  background: #FDE8EA;
  border-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: bold;
}

.underbust-link {
  text-align: right;
  font-size: 11px;
}

.underbust-link a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* デザインタグ */
.design-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.design-tag {
  background: var(--color-bg-light);
  border: 1px solid #EAEAEA;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 11px;
  color: var(--color-text);
  transition: all 0.2s;
}

.design-tag:hover {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.hover-move {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-move:hover {
  transform: translateY(-5px);
}


/* リスト全体のコンテナ */
.article-list {
  max-width: 800px;
  margin: 0 auto;
  /* font-family: sans-serif; */
}

/* 各記事のレイアウト（フレックスボックスで横並び） */
.article-item {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 32px 0 32px 0;
  padding: 0 3px 32px 3px;
  border-bottom: 1px solid #f0f0f0;
  text-decoration: none;
  color: #333;
}

/* 最後の要素の下線を消す場合 */
/* .article-item:last-child {
  border-bottom: none;
} */

/* 画像のラッパー（バッジの絶対配置の基準） */
.article-image-wrapper {
  position: relative;
  width: 280px; /* 画像の幅に合わせて調整してください */
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
}

.article-image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* 左上のピンク色のバッジ */
.badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background-color: rgba(235, 109, 165, 0.9); /* ★RGBと不透明度(0.9)を指定★ */
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  padding: 4px 12px;
  border-radius: 12px;
  letter-spacing: 1px;
　font-family: var(--font-sans);
}

/* テキスト部分のレイアウト */
.article-content {
  display: flex;
  flex-direction: column;
  justify-content: left;
  text-align: left;
  gap: 15px; /* タイトルと日付の間の余白 */
  font-family: var(--font-sans);
}

/* タイトル */
.title {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 500;
  font-family: var(--font-sans);
  color: var(--color-text);
}

/* 日付 */
.date {
  font-size: 13px;
  font-family: var(--font-sans);
  letter-spacing: 1.1px;
  color: #999;
}

/* スマートフォン向けのレスポンシブ対応（縦並びに変更） */
@media (max-width: 600px) {
  .article-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .article-image-wrapper {
    width: 100%;
  }
}

/* Trend topicsセクションのみ、Adobe Fontsを適用する */
#trend-topics {
  /* 英語フォントを先に、日本語フォントを後に記述します */
  font-family: 'cabin', 'noto-sans-jp';
}

/* Trend topicsセクションの記事全体にホバー効果をつける */
#trend-topics .article-item {
  transition: opacity 0.3s ease; /* ふわっと変化させるアニメーション */
}

#trend-topics .article-item:hover {
  opacity: 0.8; /* 1が100%。0.7にすることで背景が透けて薄く白く見えます */
}