.detaArea .columnlist {
  display: flex;
  flex-wrap: wrap;
  gap: 2%; }
  .detaArea .columnlist figure {
    border: 1px solid #000;
    width: 23%;
    transition: 0.4s; }
    .detaArea .columnlist figure:hover {
      transform: scale(1.05); }
    .detaArea .columnlist figure a {
      display: block;
      width: 100%;
      height: 100%; }
    .detaArea .columnlist figure img {
      width: 100%; }
    .detaArea .columnlist figure h2 {
      font-size: 18px; }
.detaArea .main-sentence {
  text-align: left; }
  .detaArea .main-sentence p {
    margin-bottom: 1.2em;
    font-size: 16px; }
    .detaArea .main-sentence p img {
      max-width: 60%; }
    .detaArea .main-sentence p strong {
      background: linear-gradient(transparent 60%, #ecff66 60%); }
    .detaArea .main-sentence p a {
      text-decoration: underline;
      color: #ee00ff; }
  .detaArea .main-sentence h1 {
    padding: 1rem 2rem;
    border-left: 6px double #000;
    background: #f4f4f4;
    margin-bottom: 0.5em; }
  .detaArea .main-sentence h2 {
    font-size: 18px;
    margin-bottom: 0.4em;
    position: relative;
    padding: 1rem .1rem; }
  .detaArea .main-sentence h2:after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6px;
    content: '';
    border-radius: 3px;
    background-image: -webkit-gradient(linear, right top, left top, from(#2af598), to(#009efd));
    background-image: -webkit-linear-gradient(right, #2af598 0%, #009efd 100%);
    background-image: linear-gradient(to left, #2af598 0%, #009efd 100%); }

@media screen and (max-width: 768px) {
  .detaArea .columnlist {
    flex-direction: column; }
    .detaArea .columnlist figure {
      width: 100%;
      text-align: left; }
      .detaArea .columnlist figure figcaption {
        padding: 0.5em; }
      .detaArea .columnlist figure h2 {
        font-size: 16px; }
  .detaArea .main-sentence p img {
    max-width: 100%; }
  .detaArea .main-sentence p br {
    display: none; }
  .detaArea .main-sentence p video {
    width: 100%; }
  .detaArea .main-sentence p:has(> iframe) {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden; }
  .detaArea .main-sentence p iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
  .detaArea .main-sentence h1 {
    font-size: 18px; }
  .detaArea .main-sentence h2 {
    font-size: 18px; } }

/* =============================================================
   Minamitori Brand Decoration (追加分)
   ============================================================= */

/* 1. 見出し2 (h2) をみなみとりレッドの縦棒デザインに書き換え */
.detaArea .main-sentence h2 {
    font-size: 22px !important;
    font-weight: bold !important;
    margin: 2.5em 0 1.2em !important;
    padding: 0.6em 1em !important;
    background: #f9f9f9 !important;
    border-left: 6px solid #d32f2f !important; /* みなみとりレッド */
    border-bottom: 1px solid #eee !important;
    color: #333 !important;
    line-height: 1.4 !important;
}

/* 既存のグラデーション下線を消去 */
.detaArea .main-sentence h2:after {
    display: none !important;
}

/* 2. !!強調!! 文字のデザイン */
.m-red-bold {
    color: #d32f2f !important;
    font-weight: bold !important;
    padding: 0 2px;
    font-size: 1.05em;
}

/* 3. [spec] スペックBOXのデザイン */
.m-spec-box {
    background-color: #fcfcfc !important;
    border: 1px solid #e0e0e0 !important;
    padding: 25px !important;
    margin: 2em 0 !important;
    border-radius: 2px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.02);
    display: block;
}
.m-spec-box p {
    margin-bottom: 8px !important;
    border-bottom: 1px dashed #ddd !important;
    padding-bottom: 8px !important;
    font-size: 16px !important;
    font-weight: normal !important;
    color: #444 !important;
    line-height: 1.6 !important;
}
.m-spec-box p:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
}

/* 4. 引用（blockquote）を「心の声」に */
.detaArea .main-sentence blockquote {
    position: relative;
    padding: 40px 30px;
    margin: 2.5em auto;
    background: #fffafa;
    border: 1px solid #ffebee;
    font-style: italic;
    color: #666;
    text-align: center;
    max-width: 90%;
}
.detaArea .main-sentence blockquote::before {
    content: "“";
    font-family: serif;
    font-size: 60px;
    color: #ffcdd2;
    position: absolute;
    top: -10px;
    left: 20px;
    line-height: 1;
}

/* 5. リンク付きボタン（量産用） */
.article-link-btn {
    display: block;
    width: 80%;
    max-width: 400px;
    margin: 20px auto;
    background: #333;
    color: #fff !important;
    text-align: center;
    padding: 15px;
    border-radius: 30px;
    text-decoration: none;
    transition: 0.3s;
}

/* 6. マーカー線（赤・青・黄） */
.m-line-red {
    background: linear-gradient(transparent 60%, #ffcccc 60%);
    font-weight: bold;
}
.m-line-blue {
    background: linear-gradient(transparent 60%, #cce5ff 60%);
    font-weight: bold;
}
.m-line-yellow {
    background: linear-gradient(transparent 60%, #fff3b3 60%);
    font-weight: bold;
}

/* スマホ用調整 */
@media screen and (max-width: 768px) {
    .detaArea .main-sentence h2 {
        font-size: 18px !important;
        padding: 0.5em 0.8em !important;
    }
    .m-spec-box {
        padding: 15px !important;
    }
}