/* overeating-article-styles.css */
/* ----------------------------------------------------------------
  Styles for "Overeating" Article - Revised for Clarity & Visuals
-----------------------------------------------------------------*/

/* --- Base --- */
.overeating-article {
  font-family: "Zen Kaku Gothic New", sans-serif;
  line-height: 1.85; /* 行間を少し広めに */
  color: #333; /* 標準的なテキストカラー */
  background-color: #fdfdfd; /* Almost white */
  padding: 2em 1.5em;
  margin: 2.5em auto;
  max-width: 820px; /* Slightly wider */
  border-radius: 12px; /* More rounded */
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.07); /* Softer, slightly larger shadow */
}

/* --- Headings --- */
.overeating-article h1 {
  font-size: 2.3em;
  color: #2c3e50;
  text-align: center;
  margin-bottom: 1.8em;
}

.overeating-article h2 {
  font-size: 2em;
  border-bottom: 3px solid #5cb85c; /* Softer green accent */
  padding-bottom: 0.6em;
  margin-top: 3em;
  margin-bottom: 1.5em;
  color: #282828;
}

.overeating-article h3 {
  font-size: 1.65em;
  color: #1c6496; /* Adjusted H3 color */
  margin-top: 2.8em;
  margin-bottom: 1.2em;
  display: flex;
  align-items: center;
}

.overeating-article h3 .fa-icon {
  margin-right: 0.6em; /* Increased space */
  color: #5cb85c; /* Softer green accent */
  font-size: 0.9em;
  flex-shrink: 0; /* Prevent icon from shrinking */
}

.overeating-article h4 {
  font-size: 1.25em;
  color: #4a5c6a;
  font-weight: 600;
  margin-top: 2.2em;
  margin-bottom: 1em;
}

/* --- Paragraphs & Links --- */
.overeating-article p {
  margin-bottom: 1.4em;
  font-size: 1.08em;
  line-height: 1.95;
}

.overeating-article a {
  color: #c95200;
  text-decoration: none;
  border-bottom: 1px dashed #c95200;
  transition: color 0.2s ease, border-bottom-color 0.2s ease;
  word-break: break-all;
}

.overeating-article a:hover,
.overeating-article a:focus {
  color: #e06000;
  border-bottom-style: solid; /* Solid on hover for clarity */
}

/* --- Lists (Font Awesome Icons - Selective Use) --- */
.overeating-article ul.icon-list {
  list-style-type: none;
  padding-left: 0.5em;
  margin-bottom: 1.8em;
}

.overeating-article ul.icon-list li {
  margin-bottom: 1em; /* Increased space between items */
  line-height: 1.85;
  position: relative;
  padding-left: 2.5em; /* More space for icon + gap */
}

.overeating-article ul.icon-list li .fa-li-icon {
  position: absolute;
  left: 0.2em; /* Adjusted left position */
  top: 0.1em; /* Fine-tuned vertical alignment */
  width: 1.8em; /* Icon container width */
  text-align: center;
  color: #5cb85c;
  font-size: 1em; /* Icon size relative to li, can be overridden */
}

/* Standard list without icons */
.overeating-article ul:not(.icon-list) {
    list-style-type: disc;
    padding-left: 2em; /* Standard padding for non-icon lists */
    margin-bottom: 1.5em;
}
.overeating-article ul:not(.icon-list) li {
    margin-bottom: 0.7em;
}


.overeating-article ol {
  margin-bottom: 1.5em;
  padding-left: 2em;
}

.overeating-article ol li {
  margin-bottom: 0.7em;
  line-height: 1.8;
}

/* --- Emphasis & Strong --- */
.overeating-article strong, .overeating-article b {
  font-weight: 700;
  color: #b33626; /* Slightly less harsh red */
}

.overeating-article em, .overeating-article i:not([class*="fa-"]) {
  font-style: italic;
  color: #444;
}

/* --- Superscript for references --- */
.overeating-article sup {
  font-size: 0.65em;
  vertical-align: super;
  margin-left: 1px;
  line-height: 0;
}
.overeating-article sup a {
  border-bottom: none;
  padding: 0.1em 0.2em;
}

/* --- Horizontal Rule --- */
.overeating-article .references-separator {
  border: 0;
  height: 2px; /* Slightly thicker */
  background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(92,184,92,0.4), rgba(0,0,0,0));
  margin: 4em 0;
}

/* --- References List --- */
.overeating-article .references-list {
  padding-left: 1em;
  font-size: 0.88em;
  color: #555;
  line-height: 1.75;
}

.overeating-article .references-list li {
  margin-bottom: 1em;
  word-break: break-all;
  overflow-wrap: break-word;
  padding-left: 0; /* Remove padding if not using icons here */
}

.overeating-article .references-list li a {
  font-weight: normal;
  color: #128a71;
  border-bottom: 1px dotted #128a71;
  word-break: break-all;
  overflow-wrap: break-word;
  display: inline-block;
  max-width: 100%; /* Ensure link does not exceed its container's width */
}

.overeating-article .references-list li a:hover,
.overeating-article .references-list li a:focus {
  color: #0e6f5a;
  border-bottom-color: #0e6f5a;
}

/* --- References Link Wrapping Fallback --- */
.overeating-article .references-list li,
.overeating-article .references-list li a {
  white-space: normal;          /* Allow normal wrapping */
  overflow-wrap: anywhere;      /* Break long words or URLs anywhere */
  word-break: break-word;       /* Fallback for older browsers */
}

/* --- Custom Content Blocks (Improved) --- */
.overeating-article .info-box,
.overeating-article .warning-box,
.overeating-article .tips-box {
  padding: 1.8em;
  margin: 2.5em 0;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  border-left-width: 6px;
  border-left-style: solid;
}

.overeating-article .info-box {
  background-color: #eaf2f8; /* Softer blue */
  border-left-color: #5dade2; /* Adjusted blue */
}

.overeating-article .warning-box {
  background-color: #fdecea; /* Softer red */
  border-left-color: #e74c3c;
}

.overeating-article .tips-box {
  background-color: #e8f8f0; /* Softer green */
  border-left-color: #58d68d;
}

.overeating-article .info-box h4,
.overeating-article .warning-box h4,
.overeating-article .tips-box h4 {
  margin-top: 0;
  margin-bottom: 0.8em;
  font-size: 1.3em;
  display: flex;
  align-items: center;
}

.overeating-article .info-box h4 .fa-icon,
.overeating-article .warning-box h4 .fa-icon,
.overeating-article .tips-box h4 .fa-icon {
  margin-right: 0.6em; /* Increased space */
  font-size: 1em;
  flex-shrink: 0;
}

.overeating-article .info-box h4 { color: #347cb4; }
.overeating-article .warning-box h4 { color: #c0392b; }
.overeating-article .tips-box h4 { color: #229954; }

/* --- Visual Step/Card Layout --- */
.overeating-article .visual-steps-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive columns */
  gap: 1.8em;
  margin: 2.5em 0;
}

.overeating-article .visual-step-card {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 1.8em;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.overeating-article .visual-step-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.08);
}

.overeating-article .visual-step-card h4 {
  margin-top: 0;
  margin-bottom: 0.8em;
  font-size: 1.3em;
  color: #333;
  display: flex;
  align-items: center;
}

.overeating-article .visual-step-card h4 .fa-icon {
  margin-right: 0.6em;
  color: #5cb85c; /* Or specific color per card type */
  font-size: 1.1em;
}

.overeating-article .visual-step-card p {
  font-size: 1em;
  line-height: 1.75;
  color: #555;
}
.overeating-article .visual-step-card ul {
  font-size: 0.95em;
  padding-left: 1.5em;
}


/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
  .overeating-article {
    padding: 1.8em 1em;
    margin: 2em auto;
  }
  .overeating-article h2 {
    font-size: 1.8em;
  }
  .overeating-article h3 {
    font-size: 1.5em;
  }
  .overeating-article p {
    font-size: 1.02em;
    line-height: 1.85;
  }
  .overeating-article .visual-steps-container {
    grid-template-columns: 1fr; /* Stack cards on smaller screens */
  }
}

@media (max-width: 480px) {
  .overeating-article {
    padding: 1.2em 0.8em;
    font-size: 1em; /* Maintain readability */
  }
  .overeating-article h2 {
    font-size: 1.6em;
  }
  .overeating-article h3 {
    font-size: 1.4em;
  }
   .overeating-article ul.icon-list li {
    padding-left: 2.2em; /* Adjust for smaller screens */
  }
  .overeating-article ul.icon-list li .fa-li-icon {
    top: 0.15em;
    font-size: 0.9em;
  }
}