@charset "UTF-8";

/* カードは common.css の .w-column__item（TOPと共通）を使用 */
.w-columnList {
  background: var(--w-green02);
  padding: 100px 20px;
  text-align: center;
}
/* デザインの折り返し位置（1行目が「…訳あり物件売却の」で終わる）に合わせた幅 */
.w-columnList__lead {
  max-width: 820px;
  margin: 0 auto 50px;
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: 0.05em;
  color: var(--w-text);
}
.w-columnList__inner {
  max-width: 1080px;
  margin: 0 auto;
}
/* 一覧は複数行になるので行間は広め */
.w-columnList__inner .w-column__list {
  row-gap: 50px;
}
.w-columnList .w-cvBtn {
  margin-top: 60px;
}

/* single（コラム個別）— Figma: PC 1165:17833 / SP 1165:18020
   PC は 1000px（本文700 + 余白28 + サイド272）、SP は 338px 幅で本文320
***************************************************************/
.w-columnSingle {
  background: var(--w-green02);
  padding: 100px 0;
}
.w-columnSingle__inner {
  width: min(1000px, 100% - 40px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 272px;
  column-gap: 28px;
  align-items: start;
}
.w-columnArticle {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}
/* サイドはPCでは本文の右に、SPでは執筆者プロフィールの下に回る */
.w-columnAside {
  grid-column: 2;
  grid-row: 1 / span 2;
}
.w-columnProfile {
  grid-column: 1;
  grid-row: 2;
  margin-top: 87px;
}
.w-columnSingle .w-cvBtn {
  /* common.css の margin: 30px 0 を打ち消して Figma の余白（下100px）にする */
  margin: 100px 0 0;
}

/* 記事ヘッダ */
.w-columnArticle__ttl {
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
  letter-spacing: 1px;
  color: var(--w-black);
}
.w-columnArticle__date {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 400;
  line-height: 27.2px;
  letter-spacing: 1.6px;
  color: var(--w-black);
}
.w-columnArticle__thumb {
  margin-top: 40px;
  border-radius: 20px;
  overflow: hidden;
}
.w-columnArticle__thumb img {
  display: block;
  width: 100%;
  /* WP が出力する height 属性より aspect-ratio を優先させる */
  height: auto;
  aspect-ratio: 700 / 491;
  object-fit: cover;
}

/* 記事本文 */
.w-columnArticle__body {
  margin-top: 40px;
  font-size: 18px;
  font-weight: 400;
  line-height: 34.2px;
  letter-spacing: 0.9px;
  color: var(--w-black);
  text-align: justify;
}
.w-columnArticle__body > p {
  margin-bottom: 36px;
}
.w-columnArticle__body > h2 {
  margin: 40px 0 36px;
  padding-bottom: 2px;
  border-bottom: 4px solid var(--w-green);
  font-size: 24px;
  font-weight: 700;
  line-height: 38.4px;
  letter-spacing: 0.9px;
  color: var(--w-black);
  text-align: left;
}
.w-columnArticle__body > h3 {
  margin: 36px 0;
  padding-left: 10px;
  border-left: 5px solid var(--w-green);
  font-size: 20px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0.9px;
  color: var(--w-black);
  text-align: left;
}
.w-columnArticle__body > figure {
  margin: 36px 0;
}
.w-columnArticle__body > figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 20px;
}
.w-columnArticle__body > *:last-child {
  margin-bottom: 0;
}
.w-columnArticle__body p a {
  color: #1a73e8;
  text-decoration: underline;
}
/* 黄色いハイライト（下60%だけ塗る）。Figma は太字だが指示により本文と同じ書体 */
.w-columnArticle__body mark {
  background: linear-gradient(to bottom, rgba(255, 255, 0, 0) 60%, #ff0 60%);
  font-weight: inherit;
  color: var(--w-black);
}

/* 目次（h2 から自動生成） */
.w-columnArticle__body .w-columnToc {
  margin: 40px 0;
  padding: 24px;
  background: #fff;
  border: 2px solid var(--w-green);
  border-radius: 20px;
  text-align: left;
}
.w-columnArticle__body .w-columnToc__ttl {
  display: inline-block;
  margin: 0;
  padding: 6px 12px;
  background: var(--w-green);
  border-radius: 4px;
  font-size: 16px;
  font-weight: 700;
  line-height: 27.2px;
  letter-spacing: 0.9px;
  color: #fff;
}
.w-columnArticle__body .w-columnToc__list {
  margin: 16px 0 0;
  padding-left: 20px;
  list-style: disc;
  color: #333;
}
.w-columnArticle__body .w-columnToc__list li {
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 400;
  line-height: 25.5px;
  letter-spacing: 0.9px;
}
.w-columnArticle__body .w-columnToc__list li:last-child {
  margin-bottom: 0;
}
.w-columnArticle__body .w-columnToc a {
  color: var(--w-black);
  text-decoration: underline;
}

/* 執筆者プロフィール */
.w-columnProfile__ttl {
  position: relative;
  z-index: 1;
  display: block;
  width: fit-content;
  margin: 0 auto -18px;
  padding: 4px 25px;
  background: var(--w-green);
  border-radius: 100px;
  font-size: 14px;
  font-weight: 700;
  line-height: 27.2px;
  letter-spacing: 0.9px;
  color: #fff;
}
.w-columnProfile__box {
  display: flex;
  gap: 20px;
  padding: 38px 40px;
  background: #fff;
  border-radius: 20px;
}
.w-columnProfile__img {
  flex: none;
  width: 140px;
}
.w-columnProfile__img img {
  display: block;
  width: 140px;
  height: 153px;
  object-fit: cover;
}
.w-columnProfile__body {
  flex: 1;
  min-width: 0;
}
.w-columnProfile__company {
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0.9px;
  color: #000;
}
.w-columnProfile__name {
  margin-top: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--w-green);
  font-size: 18px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.9px;
  color: #000;
}
.w-columnProfile__text {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0.9px;
  color: #000;
  text-align: justify;
}

/* 執筆者プロフィール：説明（WYSIWYG）・SNSリンク・写真なし */
.w-columnProfile__box--noimg .w-columnProfile__body {
  flex: 1 1 100%;
}
.w-columnProfile__text > * + * {
  margin-top: 0.8em;
}
.w-columnProfile__text ul,
.w-columnProfile__text ol {
  padding-left: 1.4em;
}
.w-columnProfile__text ul {
  list-style: disc;
}
.w-columnProfile__text ol {
  list-style: decimal;
}
.w-columnProfile__text strong,
.w-columnProfile__text b {
  font-weight: 700;
}
.w-columnProfile__text a {
  color: #1a73e8; /* 本文のリンクと同じ色 */
  text-decoration: underline;
}
.w-columnProfile__sns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 16px;
  padding: 0;
  list-style: none;
}
.w-columnProfile__snsLink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.9px;
  color: #000;
  text-decoration: none;
}
.w-columnProfile__snsLink:hover span {
  text-decoration: underline;
}
.w-columnProfile__snsIcon {
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
}

/* 記事タイトル上のカテゴリ */
.w-columnArticle__cat {
  display: inline-block;
  margin-bottom: 16px;
  padding: 4px 16px;
  background: var(--w-green);
  border-radius: 100px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.9px;
}

/* その他の関連記事 */
.w-columnAside__ttl {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  background: var(--w-green);
  font-size: 17px;
  font-weight: 500;
  line-height: 28.9px;
  letter-spacing: 0.85px;
  color: #fff;
}
.w-columnAside__list li {
  border-bottom: 1px dashed #000;
}
.w-columnAside__list a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 12px 16px;
}
.w-columnAside__thumb {
  flex: none;
  width: 80px;
  height: 80px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--w-gray);
}
.w-columnAside__ttl2 {
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-size: 14px;
  font-weight: 400;
  line-height: 23.8px;
  color: #000;
}

@media all and (max-width: 680px) {
  .w-columnList {
    padding: 40px 25px;
  }
  /* Figma SP: カードより左右15px内側（幅310px）・左揃え・1行19文字で5行 */
  .w-columnList__lead {
    max-width: 310px;
    font-size: 15px;
    line-height: 20px;
    margin-bottom: 27px;
    text-align: left;
  }
  .w-columnList__inner .w-column__list {
    row-gap: 24px;
  }

  /* single SP — Figma 1165:18020（本文320px・CVボタンのみ338px幅） */
  .w-columnSingle {
    padding: 43px 26px 100px;
  }
  .w-columnSingle__inner {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .w-columnArticle {
    order: 1;
    padding: 0 9px;
  }
  .w-columnProfile {
    order: 2;
    margin: 64px 9px 0;
  }
  .w-columnAside {
    order: 3;
    width: 272px;
    margin: 60px auto 0;
  }
  .w-columnSingle .w-cvBtn {
    margin: 60px 0 0;
  }
  .w-columnArticle__ttl {
    font-size: 20px;
    line-height: 28px;
  }
  .w-columnArticle__date {
    margin-top: 20px;
    font-size: 14px;
    line-height: 15px;
  }
  .w-columnArticle__thumb {
    margin-top: 30px;
  }
  .w-columnArticle__thumb img {
    aspect-ratio: 10 / 7;
  }
  .w-columnArticle__body {
    margin-top: 30px;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 1px;
  }
  .w-columnArticle__body > p {
    margin-bottom: 30px;
  }
  .w-columnArticle__body > h2 {
    margin: 30px 0;
    padding-bottom: 10px;
    border-bottom-width: 2px;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 1px;
  }
  .w-columnArticle__body > h3 {
    margin: 30px 0 20px;
    padding-left: 15px;
    font-size: 18px;
    line-height: 24px;
  }
  .w-columnArticle__body > figure {
    margin: 30px 0;
  }
  .w-columnArticle__body > figure img {
    aspect-ratio: 10 / 7;
  }
  .w-columnArticle__body .w-columnToc {
    margin: 35px 0 30px;
    padding: 18px;
  }
  .w-columnArticle__body .w-columnToc__ttl {
    border-radius: 8px;
  }
  .w-columnArticle__body .w-columnToc__list {
    margin-top: 22px;
    padding-left: 26px;
  }
  /* SP は写真が上・テキストが下の縦積み（Figma 1165:18058） */
  .w-columnProfile__box {
    display: block;
    padding: 40px 30px 30px;
    text-align: center;
  }
  .w-columnProfile__img {
    width: 140px;
    margin: 0 auto 20px;
  }
  .w-columnProfile__name {
    padding-bottom: 10px;
  }
  .w-columnProfile__text {
    margin-top: 10px;
    text-align: left;
  }
  .w-columnProfile__company {
    line-height: 1.5; /* 肩書きが2行になっても詰まらないように */
  }
  .w-columnProfile__sns {
    justify-content: center;
  }
  .w-columnArticle__cat {
    margin-bottom: 12px;
    font-size: 12px;
    line-height: 20px;
  }
}