/* link-info-single.css
   モバイルファースト＋比率(calc(.. / var(--base-width-*) * 100vw))方式
   - コンテナは中央寄せ
   - レイアウトはSP: 1カラム → 横長(=PC相当): 横並び
*/

:root {
  --base-width-sp: 375;   /* SP基準幅 */
  --base-width-pc: 1440;  /* PC基準幅（横長時） */
}

/* ベース */
.links-information-single {
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.7;
  color: #333;
  background-color: #fff;
  padding-top: calc(60 / var(--base-width-pc) * 100vw);
}

/* コンテナ：SPは 355px 相当、横長は 65% 相当（= 936px@1440） */
.links-information-single .container {
  width: calc(355 / var(--base-width-sp) * 100vw);
  max-width: none;         /* 比率スケール優先 */
  margin: 0 auto;
}

/* タイトル・概要（SP基準） */
.links-information-single .info-title {
  font-size: calc(28 / var(--base-width-sp) * 100vw);
  font-weight: 700;
  margin: 0 0 calc(16 / var(--base-width-sp) * 100vw);
  text-align: center;
}

.links-information-single .info-about {
  font-size: calc(16 / var(--base-width-sp) * 100vw);
  text-align: center;
  margin: 0 0 calc(40 / var(--base-width-sp) * 100vw);
}

/* 横並びセクション（SPは縦積み） */
.links-information-single .row-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(20 / var(--base-width-sp) * 100vw);
  margin-bottom: calc(40 / var(--base-width-sp) * 100vw);
}

/* 画像ブロック（SP） */
.links-information-single .image-block {
  width: 100%;
  flex-shrink: 0;
}

.links-information-single .image-block img {
  width: 100%;
  height: auto;
  border-radius: calc(8 / var(--base-width-sp) * 100vw);
  display: block;
}

/* テキストブロック */
.links-information-single .text-block { width: 100%; }

.links-information-single .explanation-heading {
  font-size: calc(22 / var(--base-width-sp) * 100vw);
  font-weight: 700;
  text-align: center;
}

/* 詳細本文 */
.links-information-single .detail-text {
  font-size: calc(16 / var(--base-width-sp) * 100vw);
  padding: calc(16 / var(--base-width-sp) * 100vw);
  background-color: #f9f9f9;
  border-radius: calc(8 / var(--base-width-sp) * 100vw);
  white-space: normal; /* HTMLをそのまま流すので normal に */
}

/* 一部サイトで概要を左寄せにしたい場合の補助 */
.info-about { text-align: left !important; }

/* ==============================
   横長（PC相当）切替
   ※ 参考CSSに合わせて aspect-ratio で分岐
================================*/
@media screen and (min-aspect-ratio: 1/1) {

.links-information-single {
  padding-top: calc(30 / var(--base-width-sp) * 100vw);
}

  .links-information-single .container {
    width: calc(936 / var(--base-width-pc) * 100vw); /* 1440の65% */
  }

  .links-information-single .info-title {
    font-size: calc(36 / var(--base-width-pc) * 100vw);
    margin-bottom: calc(20 / var(--base-width-pc) * 100vw);
  }

  .links-information-single .info-about {
    font-size: calc(20 / var(--base-width-pc) * 100vw);
    margin-bottom: calc(60 / var(--base-width-pc) * 100vw);
    text-align: center;
  }

  .links-information-single .row-layout {
    flex-direction: row;
    align-items: center;
    gap: calc(40 / var(--base-width-pc) * 100vw);
    margin-bottom: calc(60 / var(--base-width-pc) * 100vw);
    flex-wrap: nowrap;
  }

  .links-information-single .image-block {
    width: calc(600 / var(--base-width-pc) * 100vw);
  }

  .links-information-single .image-block img {
    border-radius: calc(8 / var(--base-width-pc) * 100vw);
  }

  .links-information-single .text-block { flex: 1; }

  .links-information-single .explanation-heading {
    font-size: calc(28 / var(--base-width-pc) * 100vw);
    text-align: left;
  }

  .links-information-single .detail-text {
    font-size: calc(18 / var(--base-width-pc) * 100vw);
    padding: calc(20 / var(--base-width-pc) * 100vw);
    border-radius: calc(8 / var(--base-width-pc) * 100vw);
  }
}

/* 低モーション環境 */
@media (prefers-reduced-motion: reduce) {
  .links-information-single * { transition: none !important; }
}



/* 行間（1行の高さ） */
.links-information-single .detail-text {
  line-height: 1.85;
}

/* 段落の余白（HTMLで<p>が来たとき） */
.links-information-single .detail-text p {
  margin: 0 0 1.1em;
}
.links-information-single .detail-text p:last-child {
  margin-bottom: 0;
}

/* プレーン→nl2br で <br> だけになるケースの見た目調整（任意） */
.links-information-single .detail-text br {
  display: block;
  margin: .5em 0;  /* 行間を少し広げる */
}