@charset "utf-8";

/* ============================================================
   style.css
   トップページ固有のスタイルを管理する
   common.css に書いたヘッダー・フッターなどの共通スタイルは
   このファイルには書かない
============================================================ */


/* ============================================================
   ヒーローセクション
   - PC版・SP版で別々の画像を使用
   - テキストは画像に含まれている
   - 画面幅に合わせて自動でリサイズ
============================================================ */

/* picture タグをブロック要素にして余白をなくす */
.hero picture {
  display: block;
}

/* ヒーロー画像
   - width: 100% で画面幅いっぱいに広げる
   - height: auto で元画像の縦横比を維持したままリサイズ
   - display: block で画像下の余白（inline要素由来）をなくす
*/
.hero img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   aboutセクション
   構造：about > about__inner > ttl-area + desc-area + list + btn
============================================================ */

/* ------------------------------------------------------------
   about：セクション全体
------------------------------------------------------------ */
.about {
  width: 100%;
  background: var(--color-background-base);
}

/* ------------------------------------------------------------
   about__inner：コンテンツ幅制御
   PC版：padding 80px・gap 56px・中央揃え
------------------------------------------------------------ */
.about__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}

/* ------------------------------------------------------------
   desc-area：説明文エリア
   SP版：padding 32px 0 16px
------------------------------------------------------------ */
.about__desc-area {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: stretch;
}

/* desc：説明文（テキストは左揃え） */
.about__desc {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 500;
  line-height: 200%;
  color: var(--color-text-body);
  text-align: left;
  max-width: 800px;
}

/* ------------------------------------------------------------
   list：カードリスト
------------------------------------------------------------ */
.about__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  list-style: none;
  justify-content: flex-start;
}

/* ------------------------------------------------------------
   card-message：カード1枚
   PC版：横並び（テキスト左・イラスト右）
   SP版：縦並び（イラスト上・テキスト下）
------------------------------------------------------------ */
/* PC版：txt-areaがflex:1で残り幅を埋め、img-frameとの間はgapで空ける */
.card-message {
  display: flex;
  width: 100%;
  max-width: 1176px; /* txt-area(850) + gap(0) + img-frame(326) */
  margin: 0 auto;
  align-items: center;
  position: relative;
  gap: 0;
}

/* bg：オレンジ丸背景（装飾） */
.card-message__bg {
  position: absolute;
  left: -68px;
  top: 50%;
  width: 150px;
  height: 100px;
  background: url('/assets/images/home/bg.png') 50% / cover no-repeat;
  z-index: -1;
  flex-shrink: 0;
  pointer-events: none;
  transform: translateY(-50%);
}

/* txt-area：テキストエリア（flex:1で残り幅を埋める・下に破線ボーダー） */
.card-message__txt-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  flex: 1;
  padding: 40px 0 40px 40px;
  border-bottom: 2px dashed var(--color-primary);
  align-self: stretch;
  position: relative;
  z-index: 1;
  max-width: 850px;
}

/* 最後のカードだけ：border-bottomなし */
.card-message__txt-area--last {
  border-bottom: none;
}

/* カード見出し：text/pc/heading-s（24px / 700 / 160%） */
.card-message__ttl {
  font-family: var(--font-serif);
  font-size:   var(--text-pc-heading-s-size);
  font-weight: var(--text-pc-heading-s-weight);
  line-height: var(--text-pc-heading-s-lh);
  color: var(--color-text-heading);
  position: relative;
}

/* カード本文：text/pc/body（18px / 400 / 175%） */
.card-message__body {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 175%;
  color: var(--color-text-body);
  max-width: 800px;
}

/* img-frame：イラスト画像枠 */
.card-message__img-frame {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 326px;
  height: 238px;
  flex-shrink: 0;

}

/* ============================================================
   aboutセクション SP版（874px以下）
============================================================ */
@media (max-width: 874px) {

  /* about__inner SP版：padding 40px 16px・左揃え */
  .about__inner {
    padding: 40px 16px;
    align-items: flex-start;
    gap: 0;
  }

  /* desc-area SP版：padding 32px 0 16px */
  .about__desc-area {
    padding: 32px 0 16px;
    align-self: stretch;
  }

  /* desc SP版 */
  .about__desc {
    font-size: 20px;
    font-weight: 500;
    line-height: 200%;
    text-align: left;
  }

  /* card-message SP版：縦並び・gap 16px */
  .card-message {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    position: static;
  }

  /* img-frame SP版：幅100%・高さ160px */
  .card-message__img-frame {
    width: 100%;
    height: 160px;
    margin-left: 0;
    order: -1; /* イラストを上に */
  }

  /* bg SP版：txt-areaの左上に配置 */
  .card-message__bg {
    position: absolute;
    left: -30px;
    bottom: auto;
    right: auto;
    margin-bottom: -128px;
  }

  /* txt-area SP版：幅auto・padding 0 0 24px・gap 16px・position relativeを追加（bgの基準） */
  .card-message__txt-area {
    width: 100%;
    padding: 0 0 24px;
    gap: 16px;
    position: relative;
    z-index: 1;
    border-bottom: none;
  }

  /* カード見出し SP版：text/sp/heading-m（20px） */
  .card-message__ttl {
    font-size: 20px;
  }

  /* カード本文 SP版：text/sp/body（16px） */
  .card-message__body {
    font-size: 16px;
  }

  /* btn SP版：中央揃え・margin-top 40px */
  .about__inner .btn--default {
    align-self: center;
    margin-top: 40px;
  }

} /* @media (max-width: 874px) index.html section/about SP版 */

/* イラスト画像サイズ制御 */
.card-message__img-frame img {
  object-fit: contain;
  display: block;
}

.card-message__img--01 {
  width: 70%;
  height: 70%;
}

.card-message__img--02 {
  width: 90%;
  height: 90%;
}

.card-message__img--03 {
  width: 90%;
  height: 90%;
}

/* ============================================================
   SP版ヒーロー直後CTAエリア（.hero-cta-sp）
   - トップページ専用
   - 599px以下のみ表示
============================================================ */

/* PC版では非表示 */
.hero-cta-sp {
  display: none;
}

@media (max-width: 599px) {
  .hero-cta-sp {
    display: flex;
    width: 100%;
    padding: 16px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    background: var(--color-white);
  }
} /* @media (max-width: 599px) index.html hero-cta-sp 表示切り替え（599px以下） */

/* ============================================
  audienceセクション（あなたに合った情報を探す）
============================================ */

/* セクション */
.audience {
  width: 100%;
  background: var(--color-background-sub);
}

/* インナー */
.audience__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 80px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}

/* ----------------------------------------
  PC版：cards-row--pc・card-audience
---------------------------------------- */

/* PC版カード一覧（SP版では非表示） */
.cards-row--pc {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;

  /* 300px×4枚+gap20px×3=1260pxちょうどだと丸め誤差で崩れることが
     あるため、4pxのバッファを持たせている */
  max-width: 1264px;
  margin: 0 auto;

  list-style: none;
}

/* カード1枚 */
.card-audience {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;

  /* 固定幅だとサブピクセル誤差で「3枚+1枚」に折り返すことがあるため、
     コンテナ幅から逆算して4等分する。min-widthは縮みすぎ防止 */

  flex: 0 0 calc((100% - 60px) / 4);
  min-width: 280px;

  padding: 24px;
  border-radius: 16px;
  border: 1px solid var(--color-primary);
  background: var(--color-white);
}

/* カードタイトル */
.card-audience__ttl {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 700;
  line-height: 160%;
  color: var(--color-text-heading);
  text-align: center;
  align-self: stretch;
  min-height: 2lh;
}

/* カード画像 */
.card-audience__img {
  width: 195px;
  height: 130px;
  object-fit: contain;
}

/* カード説明文 */
.card-audience__desc {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 175%;
  color: var(--color-text-body);
  width: 209px;
}

/* ----------------------------------------
  SP版：cards-row--sp・card-audience-sp
---------------------------------------- */

/* SP版カード一覧（PC版では非表示） */
.cards-row--sp {
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  width: 100%;
  list-style: none;
}

/* カード1枚 */
.card-audience-sp {
  display: flex;
  align-items: center;

  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--color-primary);
  background: var(--color-white);
}

/* テキストエリア（左） */
.card-audience-sp__txt-area {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 0 0;
  align-self: stretch;
}

/* カードタイトル */
.card-audience-sp__ttl {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  line-height: 160%;
  color: var(--color-text-heading);
  align-self: stretch;
}

/* カード説明文 */
.card-audience-sp__desc {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 175%;
  color: var(--color-text-body);
  align-self: stretch;
}

/* 画像エリア（右） */
.card-audience-sp__img-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: stretch;
}

/* カード画像 */
.card-audience-sp__img {
  width: 110px;
  height: 111px;
  object-fit: contain;
}

/* ----------------------------------------
  レスポンシブ
---------------------------------------- */

@media (max-width: 1419px) {

  /* PC版カードを2枚×2行に */
  .cards-row--pc {
    max-width: 620px;
    margin: 0 auto;
  }

} /* @media (max-width: 1419px) index.html section/audience カード2列化（1419px以下） */

@media (max-width: 874px) {

  /* インナー */
  .audience__inner {
    padding: 40px 16px;
    gap: 32px;
  }

  /* PC版を非表示 */
  .cards-row--pc {
    display: none;
  }

  /* SP版を表示 */
  .cards-row--sp {
    display: flex;
  }

} /* @media (max-width: 874px) index.html section/audience SP版 */

/* ============================================================
  section: leaflet（リーフレットのダウンロード）
============================================================ */

/* PC版・SP版 共通 */
.section-leaflet {
  width: 100%;
  background: var(--color-background-sub);
}

/* PC版表示制御 */
.section-leaflet--pc {
  display: block;
}
.section-leaflet--sp {
  display: none;
}

/* ----------------------------------------
  section: leaflet（PC版）
---------------------------------------- */
.section-leaflet--pc .section-leaflet__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}

/* カード（左右2カラム） */
.leaflet-card {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 56px;
}

/* 左：テキストエリア */
.leaflet-card__txt-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  max-width: 500px;
}

/* 説明文 */
.leaflet-card__desc {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 500;
  line-height: 200%;
  color: var(--color-text-body);
  align-self: stretch;
}

/* ボタングループ */
.leaflet-card__btn-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
}

/* PDFアイコン＋テキスト */
.leaflet-card__img-group {
  display: flex;
  align-items: center;
  gap: 10px;
  align-self: stretch;
}

.leaflet-card__pdf-icon {
  width: 16px;
  height: 20px;
}

.leaflet-card__pdf-lbl {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 175%;
  color: var(--color-text-caption);
}

/* 右：サムネイル */
.leaflet-card__thumbnails-area {
  display: flex;
  align-items: center;
  gap: 32px;
}

.leaflet-card__img {
  display: block;
}

/* ----------------------------------------
  section: leaflet（SP版）
---------------------------------------- */
@media (max-width: 874px) {
  .section-leaflet--pc {
    display: none;
  }
  .section-leaflet--sp {
    display: block;
  }

  .section-leaflet--sp .section-leaflet__inner {
    padding: 40px 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }

  /* コンテンツエリア */
  .leaflet-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
  }

  /* サムネイルグループ */
  .leaflet-content__thumbnails-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
    width: 100%;
  }

  .leaflet-content__img {
    display: block;
  }

  /* 説明文 */
  .leaflet-content__desc {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 175%;
    color: var(--color-text-body);

  }

  /* ボタングループ */
  .leaflet-content__btn-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: min(343px, 100%);
  }

  /* SPボタン全幅 */
  .leaflet-content__btn-group .btn {
    width: 100%;
  }

  /* PDFアイコン＋テキスト */
  .leaflet-content__img-group {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .leaflet-content__pdf-icon {
    width: 16px;
    height: 20px;
  }

  .leaflet-content__pdf-lbl {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 400;
    line-height: 175%;
    color: var(--color-text-caption);
  }
} /* @media (max-width: 874px) index.html section/leaflet SP版 */