/* ARiUYUNA コラム用コンポーネント
   配色・書体は既存HPに準拠。新しい色を持ち込まない。 */

@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes charUp { 0% { transform: translateY(112%); } 100% { transform: translateY(0); } }

.col-article { max-width: 720px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px);
  font-family: 'Shippori Mincho', serif; color: #55524A; }
.col-article p { font-size: 15px; line-height: 2.15; letter-spacing: .04em; margin: 0 0 1.4em; }
.col-article h2 { font-size: clamp(19px, 2.2vw, 23px); font-weight: 500; letter-spacing: .1em;
  line-height: 1.75; color: #33312C; margin: 3em 0 1em; padding-left: 14px;
  border-left: 2px solid #3C4B3C; }
.col-article h3 { font-size: 16.5px; font-weight: 500; letter-spacing: .08em; color: #33312C;
  margin: 2.2em 0 .8em; }
.col-article a { color: #3C4B3C; text-underline-offset: 3px; }

/* 直答ボックス：各H2直下に必須 */
.ans { position: relative; background: #FFFDF8; border: 1px solid #DCD5C4; border-radius: 3px;
  padding: 22px 22px 18px; margin: 0 0 1.8em; }
.ans::before { content: "結論"; position: absolute; top: -11px; left: 16px; background: #3C4B3C;
  color: #F6F3EB; font-size: 10.5px; letter-spacing: .2em; padding: 3px 12px; border-radius: 2px; }
.ans p { margin: 0; font-size: 15px; line-height: 2.05; }
.ans p + p { margin-top: .9em; }

/* 強調：ゴールドの淡いマーカー（黄色は使わない） */
.mk { background: linear-gradient(transparent 62%, rgba(197, 168, 106, .38) 62%); }

/* 専門用語の初出注釈 */
.term { border-bottom: 1px dotted #C5A86A; }

/* 補足ボックス */
.memo { background: #EFE9DB; border-radius: 3px; padding: 20px 22px; margin: 2em 0;
  font-size: 14px; line-height: 2.05; }
.memo .mlbl { display: block; font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 12px; letter-spacing: .24em; color: #8C8577; margin-bottom: 8px; }

/* 表：横罫のみ */
.tw { overflow-x: auto; margin: 2em 0; }
.tw table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tw th, .tw td { text-align: left; padding: 14px 12px; border-bottom: 1px solid #DCD5C4;
  letter-spacing: .04em; line-height: 1.9; }
.tw th { font-weight: 500; color: #33312C; border-bottom-color: #B9B2A0; white-space: nowrap; }

/* 手順（図解はこれ1種のみ） */
.s3 { margin: 2em 0; }
.s3 .it { display: flex; gap: 18px; padding: 18px 0; border-top: 1px solid #DCD5C4; }
.s3 .it:last-child { border-bottom: 1px solid #DCD5C4; }
.s3 .dot { flex: none; width: 34px; font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 15px; color: #7A8B7A; }
.s3 h5 { margin: 0 0 6px; font-size: 15px; font-weight: 500; letter-spacing: .08em; color: #33312C; }
.s3 p { margin: 0; font-size: 13.5px; line-height: 1.95; }
.illus .cap, .art-img figcaption { font-size: 11.5px; color: #8C8577; letter-spacing: .06em;
  line-height: 1.8; margin-top: 10px; }

/* 本文写真 */
.art-img { margin: 2.2em 0; }
.art-img img { width: 100%; max-width: 100%; height: auto; display: block; border-radius: 3px; }

/* まとめ */
.sum { border: 1px solid #3C4B3C; border-radius: 3px; padding: 24px; margin: 3em 0 2em; }
.sum p:last-child { margin-bottom: 0; }

/* FAQ */
.faq-item { border-top: 1px solid #DCD5C4; padding: 18px 0; }
.faq-item:last-of-type { border-bottom: 1px solid #DCD5C4; }
.faq-q { margin: 0 0 8px; font-size: 15px; color: #33312C; letter-spacing: .06em; }
.faq-a { margin: 0; font-size: 14px; line-height: 2.05; }

/* 目次 */
.col-toc { background: #EFE9DB; border-radius: 3px; padding: 22px 24px; margin: 2.2em 0; }
.col-toc .t { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 12px;
  letter-spacing: .24em; color: #8C8577; margin-bottom: 12px; }
.col-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.col-toc li { counter-increment: toc; font-size: 13.5px; line-height: 2.1; }
.col-toc li::before { content: counter(toc, decimal-leading-zero) " ";
  font-family: 'Cormorant Garamond', serif; font-style: italic; color: #8C8577; margin-right: 8px; }
.col-toc a { text-decoration: none; color: #55524A; }

/* CTA */
.col-cta { background: #3C4B3C; color: #F6F3EB; border-radius: 3px; padding: 34px 24px;
  text-align: center; margin: 3em 0; }
.col-cta p { margin: 0 0 18px; font-size: 15px; letter-spacing: .1em; line-height: 1.9; color: #F6F3EB; }
.col-cta a { display: inline-block; text-decoration: none; color: #F6F3EB;
  border: 1px solid rgba(246, 243, 235, .6); border-radius: 2px; padding: 13px 34px;
  font-size: 12.5px; letter-spacing: .22em; }

/* この記事について */
.col-about { border-top: 1px solid #DCD5C4; margin-top: 3em; padding-top: 20px;
  font-size: 12.5px; line-height: 2; color: #8C8577; }

/* 関連記事 */
.col-rel { margin: 2.6em 0 4em; }
.col-rel .rt { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 12px;
  letter-spacing: .24em; color: #8C8577; margin-bottom: 14px; }
.col-rel a { display: flex; gap: 16px; padding: 14px 0; border-top: 1px solid #DCD5C4;
  text-decoration: none; color: #55524A; }
.col-rel a:last-child { border-bottom: 1px solid #DCD5C4; }
.col-rel img { width: 104px; height: 66px; object-fit: cover; border-radius: 2px; flex: none; }
.col-rel .tt { font-size: 13.5px; line-height: 1.8; letter-spacing: .04em; }

/* 一覧 */
.col-list { max-width: 760px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); }
.col-card { display: flex; gap: 20px; padding: 26px 0; border-top: 1px solid #DCD5C4;
  text-decoration: none; color: #55524A; }
.col-list .col-card:last-of-type { border-bottom: 1px solid #DCD5C4; }
.col-card img { width: 168px; height: 106px; object-fit: cover; border-radius: 3px; flex: none; }
.col-card .cat { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 11px;
  letter-spacing: .2em; color: #7A8B7A; margin: 0; }
.col-card .ttl { font-size: 16px; line-height: 1.75; letter-spacing: .05em; color: #33312C;
  margin: 6px 0 8px; }
.col-card .ex { font-size: 13px; line-height: 1.95; margin: 0; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.col-card .dt { font-size: 11.5px; letter-spacing: .1em; color: #8C8577; margin: 8px 0 0; }

@media (max-width: 700px) {
  .col-card { flex-direction: column; gap: 12px; }
  .col-card img { width: 100%; height: 190px; }
  .col-rel a { gap: 12px; }
  .col-rel img { width: 84px; height: 56px; }
  .ans { padding: 20px 16px 16px; }
}