/* =========================================================
   さつまいも商會 TOP V8.10
   - 日本語の意味単位で改行を固定
   - ともだち部を目的カードに追加
   - 声價隊 / ウェルカムのブランド画像を表示
   - 広報カードを いも爺・イモコ写真へ変更
   ========================================================= */

/* ---------- ヘッダー：ともだち部を直接アクセス可能に ---------- */
.site-v2-nav-link--tomodachi {
  font-weight: 700;
}

.site-v2-mobile-nav__tomodachi {
  font-weight: 700 !important;
}

/* ---------- ヒーロー：指定された2行を絶対に崩さない ---------- */
.site-home-fixed-lines {
  display: flex;
  flex-direction: column;
  align-items: inherit;
}

.site-home-fixed-lines > span {
  display: block;
  white-space: nowrap;
  max-width: 100%;
}

.site-home-hero__eyebrow.site-home-fixed-lines {
  font-size: clamp(1rem, 2.2vw, 1.45rem);
}

.site-home-hero__description.site-home-fixed-lines {
  font-size: clamp(.94rem, 1.8vw, 1.1rem);
}

/* ---------- 日本語の意味単位 ---------- */
.site-home-phrase {
  display: inline-block;
  white-space: nowrap;
}

.site-home-feature-title-nowrap {
  display: inline-block;
  white-space: nowrap;
}

.site-home-media-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: .15em;
}

.site-home-media-title > span {
  display: inline-block;
  white-space: nowrap;
}

/* ---------- あなたの目的から選ぶ：4項目 ---------- */
.site-home-purpose-grid--four {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.site-home-card__icon--brand {
  overflow: hidden;
  padding: .3rem;
  background: #fff;
}

.site-home-card__icon--brand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.site-home-card__icon--welcome img {
  border-radius: 999px;
}

.site-home-card__icon--tomodachi {
  padding: 0;
}

.site-home-card__icon--tomodachi img {
  object-fit: cover;
}

.site-home-purpose-card--tomodachi {
  --site-home-card-accent: #d85d42;
}

/* ---------- 特設：いも爺・イモコ写真 ---------- */
.site-home-feature-card__visual--photo {
  overflow: hidden;
  margin: 0;
  border-radius: 24px;
  min-height: 220px;
  align-self: stretch;
}

.site-home-feature-card__visual--photo img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ---------- SP ---------- */
@media (max-width: 760px) {
  .site-home-hero__content {
    min-width: 0;
  }

  .site-home-hero__eyebrow.site-home-fixed-lines {
    /* 「見えない苦労を、」「ひとりにしない。」を2行固定 */
    font-size: clamp(1.05rem, 5.6vw, 1.38rem);
    line-height: 1.55;
  }

  .site-home-hero__description.site-home-fixed-lines {
    /* 長い1行目も320px級で入る範囲まで自動縮小 */
    font-size: clamp(.84rem, 3.65vw, 1rem);
    line-height: 1.85;
  }

  .site-home-hero__content h1 {
    white-space: nowrap;
    font-size: clamp(1.95rem, 9.5vw, 3rem);
  }

  .site-home-purpose-grid--four {
    grid-template-columns: 1fr;
  }

  .site-home-purpose-card h3,
  .site-home-feature-card h3 {
    word-break: keep-all;
    overflow-wrap: normal;
  }

  /* 「みんなの見えない苦労」を途中で割らない */
  .site-home-feature-title-nowrap {
    font-size: clamp(1.12rem, 5.6vw, 1.55rem);
  }

  /* SPでは意味のある2行：広報紙『聲』＆ / さつまいもTV */
  .site-home-media-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: .04em;
  }

  .site-home-media-title > span {
    white-space: nowrap;
  }

  .site-home-feature-card__visual--photo {
    min-height: 190px;
  }

  .site-home-feature-card__visual--photo img {
    min-height: 190px;
  }
}

/* 320px級の極小画面でも指定行を維持 */
@media (max-width: 360px) {
  .site-home-hero__eyebrow.site-home-fixed-lines {
    font-size: .99rem;
  }

  .site-home-hero__description.site-home-fixed-lines {
    font-size: .78rem;
    letter-spacing: -.025em;
  }

  .site-home-feature-title-nowrap {
    font-size: 1.08rem;
  }

  .site-home-media-title {
    font-size: 1.08rem;
  }
}

/* 添付ブランドアイコンは余白込み画像なので、カード内で最大限見せる */
.site-home-card__icon--brand img[src$="seikatai_icon.png"],
.site-home-card__icon--brand img[src$="welcome_icon.png"] {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

/* =========================================================
   V8.12 HERO
   PC/SP共通：左右の芋＋「さつまいも／商會」を同じタイトル行に固定
   ========================================================= */

/* 既存の3カラムHero指定を解除し、タイトル行を内部で管理する */
.site-home-hero {
  display: block !important;
}

.site-home-hero__content {
  width: 100%;
  max-width: none !important;
  min-width: 0;
}

/* 芋と見出しを同じ高さのグリッドに入れるため、
   「商會」だけ下へはみ出す状態を物理的に起こさない */
.site-home-hero__title-stage {
  width: min(100%, 1120px);
  margin: clamp(.8rem, 1.8vw, 1.4rem) auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(.7rem, 2.2vw, 2rem);
  overflow: visible;
}

.site-home-brand-title {
  grid-column: 2;
  margin: 0 !important;
  padding: 0;
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  justify-content: center;
  gap: .02em;
  line-height: 1.05;
  text-align: center;
  white-space: normal !important;
  font-size: clamp(2.15rem, 5vw, 4.35rem);
}

.site-home-brand-title > span {
  display: block;
  white-space: nowrap;
}

.site-home-hero__title-stage .site-home-hero__image {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  margin: 0;
  width: min(100%, 300px);
  max-width: 300px;
  align-self: center;
}

.site-home-hero__title-stage .site-home-hero__image picture,
.site-home-hero__title-stage .site-home-hero__image img {
  display: block;
  width: 100%;
  height: auto;
}

/* 左芋のみ「気持ち右」。タイトルとの安全距離はgapで必ず残す */
.site-home-hero__title-stage .site-home-hero__image--left {
  justify-self: end;
  translate: clamp(6px, .8vw, 12px) 0;
}

/* 右芋は対称性を保ちながら外側に固定 */
.site-home-hero__title-stage .site-home-hero__image--right {
  justify-self: start;
}

/* PCでも見出しは必ず2行 */
@media (min-width: 761px) {
  .site-home-brand-title {
    min-width: 5.8em;
  }
}

/* SP：左右の芋と2行文字を同一高さに収める */
@media (max-width: 760px) {
  .site-home-hero__title-stage {
    width: calc(150% + 1rem);
    margin-left: -5.5rem;
    margin-right: -5.5rem;
    grid-template-columns: minmax(72px, 1fr) auto minmax(72px, 1fr);
    column-gap: clamp(.25rem, .7vw, .55rem);
    min-height: clamp(112px, 31vw, 150px);
  }

  .site-home-brand-title {
    font-size: clamp(2rem, 9.9vw, 2.35rem) !important;
    line-height: 1.03;
    min-width: 4.4em;
  }

  .site-home-hero__title-stage .site-home-hero__image {
    width: min(100%, 132px);
    max-height: clamp(105px, 29vw, 142px);
    display: flex;
    align-items: center;
  }

  .site-home-hero__title-stage .site-home-hero__image img {
    max-height: clamp(105px, 29vw, 142px);
    object-fit: contain;
  }

  .site-home-hero__title-stage .site-home-hero__image--left {
    translate: clamp(4px, 1.5vw, 8px) 0;
  }
}

/* 320px級でも3者を1段に保持 */
@media (max-width: 360px) {
  .site-home-hero__title-stage {
    grid-template-columns: minmax(62px, 1fr) auto minmax(62px, 1fr);
    column-gap: .2rem;
    min-height: 104px;
  }

  .site-home-brand-title {
    font-size: 1.48rem !important;
  }

  .site-home-hero__title-stage .site-home-hero__image {
    max-height: 98px;
  }

  .site-home-hero__title-stage .site-home-hero__image img {
    max-height: 98px;
  }
}

/* =========================================================
   V8.13 SP見出し改行固定
   PC: 1行
   SP: 意味単位の2行
   ========================================================= */

.site-home-section__heading--responsive-lines {
  display: block;
}

.site-home-section__heading--responsive-lines > span {
  display: inline;
  white-space: nowrap;
}

/* PCでは2spanを連続表示して従来どおり1行 */
.site-home-section__heading--responsive-lines > span + span::before {
  content: "";
}

@media (max-width: 760px) {
  .site-home-section__heading--responsive-lines {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.35;
    width: 100%;
  }

  .site-home-section__heading--responsive-lines > span {
    display: block;
    white-space: nowrap;
  }

  /* ヒーローの既存V8.12配置をSPでも保持 */
  .site-home-hero__title-stage {
    align-items: center;
  }

  .site-home-brand-title {
    justify-self: center;
    align-self: center;
  }

  .site-home-hero__title-stage .site-home-hero__image--left,
  .site-home-hero__title-stage .site-home-hero__image--right {
    align-self: center;
  }
}

/* =========================================================
   V8.14 ユーザー調整値を確定
   ========================================================= */

@media (max-width: 800px) {
  .site-home-hero__eyebrow,
  .site-home-hero__eyebrow.site-home-fixed-lines {
    min-height: 115px;
    margin-bottom: 8px;
    padding-inline: 20%;
    font-size: clamp(22px, 5vw, 31px);
    letter-spacing: 0.12em;
  }
}

@media (max-width: 640px) {
  .site-home-hero__eyebrow,
  .site-home-hero__eyebrow.site-home-fixed-lines {
    min-height: 83px;
    padding-inline: 23%;
    line-height: 1.55;
  }
}


/* =========================================================
   V8.14 SP 2行見出しの「＼ ／」位置
   2行分の高さをまたぎ、文の両端中央に固定
   ========================================================= */
@media (max-width: 760px) {
  .site-home-section__heading--responsive-lines {
    display: grid;
    grid-template-columns: auto max-content auto;
    grid-template-rows: auto auto;
    align-items: center;
    justify-content: center;
    column-gap: clamp(.9rem, 4.8vw, 1.5rem);
    width: min(100%, 390px);
    min-height: calc(2em * 1.35);
    margin-inline: auto;
    text-align: center;
  }

  .site-home-section__heading--responsive-lines > span:first-of-type {
    grid-column: 2;
    grid-row: 1;
  }

  .site-home-section__heading--responsive-lines > span:last-of-type {
    grid-column: 2;
    grid-row: 2;
  }

  .site-home-section__heading--responsive-lines::before,
  .site-home-section__heading--responsive-lines::after {
    position: static !important;
    inset: auto !important;
    margin: 0 !important;
    align-self: center;
    justify-self: center;
    line-height: 1;
    transform: none !important;
  }

  .site-home-section__heading--responsive-lines::before {
    grid-column: 1;
    grid-row: 1 / 3;
    content: "＼" !important;
  }

  .site-home-section__heading--responsive-lines::after {
    grid-column: 3;
    grid-row: 1 / 3;
    content: "／" !important;
  }
}

/* =========================================================
   V8.15 SP見出し飾り
   旧1行見出し用の横線を完全に消し、斜め線だけ残す
   ========================================================= */
@media (max-width: 760px) {
  .site-home-section__heading--responsive-lines::before,
  .site-home-section__heading--responsive-lines::after {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
  }

  .site-home-section__heading--responsive-lines::before {
    content: "＼" !important;
  }

  .site-home-section__heading--responsive-lines::after {
    content: "／" !important;
  }
}



/* =========================================================
   V8.16 最終見た目調整
   下部CTA見出し：PC 1行 / SP 2行固定
   ========================================================= */

.site-home-cta__heading-responsive > span {
  display: inline;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .site-home-cta__heading-responsive {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.45;
    width: 100%;
  }

  .site-home-cta__heading-responsive > span {
    display: block;
    white-space: nowrap;
  }
}