/* ========================================
 * 悩み別ページ：コンパクト3列/2列レイアウト
 * 画像は縦横比維持・同じ行の画像/見出し/カードの高さを揃える
 * ======================================== */

/* ========================================
 * 悩み別ページ：PCバナーの背景画像とベージュグラデーション
 * ======================================== */

.classy-trouble__container{width:min(1200px,calc(100% - 48px));margin:0 auto;padding:35px 0 80px}
/* 悩み別ページ：バナー下の説明文をコンテンツ左端に揃える */
.classy-trouble__intro{max-width:none;margin:0 0 30px;line-height:1.8}
.classy-trouble__section-head{text-align:left;margin:0 0 24px}
.classy-trouble__section-head h2{font-family:"Noto Serif JP",serif;font-weight:500;font-size:clamp(20px,2.5vw,30px);margin:8px 0 10px;letter-spacing:.06em}
.classy-trouble__section-head p{font-size:13px;color:#746b62}
/* サブグリッド：画像・タイトル・カード底辺を行ごとに揃える */
.classy-trouble__groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row;gap:18px;align-items:stretch}
.classy-trouble__group{display:grid;grid-row:span 3;grid-template-rows:subgrid;min-width:0;background:#fff;border:1px solid #e9dfd3;box-shadow:0 5px 22px rgba(90,70,45,.045);overflow:hidden}
.classy-trouble__group-visual{grid-row:1;display:flex;justify-content:center;align-items:center;padding:12px 12px 4px;min-width:0}
.classy-trouble__group-visual img{display:block;width:min(100%,280px);height:auto;max-width:100%;object-fit:contain}
.classy-trouble__group-title{grid-row:2;font-family:"Noto Serif JP",serif;font-size:18px;font-weight:500;letter-spacing:.025em;line-height:1.55;margin:0 14px;padding:8px 0 12px;border-bottom:1px solid #d7c4ab;overflow-wrap:anywhere}
.classy-trouble__group-content{grid-row:3;min-width:0;padding:12px 12px 16px}
.classy-trouble__treatments{list-style:none!important;padding:0!important;margin:0!important;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-content:start}
.classy-trouble__treatment{list-style:none!important;margin:0!important;background:#fbf8f3;border:1px solid #eee6dc;min-width:0}
.classy-trouble__treatment-copy{padding:10px 9px;overflow-wrap:anywhere}
.classy-trouble__treatment-note{font-size:11px;line-height:1.55;color:#847468;margin:5px 0 0}
.classy-trouble__treatment-link,.classy-trouble__treatment-name{font-size:13px;line-height:1.55;font-weight:600;color:#5b4b3d;text-decoration:none;overflow-wrap:anywhere}
.classy-trouble__treatment-link{display:flex;align-items:flex-start;justify-content:space-between;gap:3px}
.classy-trouble__treatment-link span{color:#ad8d64;font-size:15px;flex:none}
.classy-trouble__treatment-link:hover{color:#a78150}
.classy-trouble__empty{color:#867b71;font-size:13px}
/* ========================================
 * 悩み別ページ：SPのバナーと2列カード
 * PC画像の右2/3を表示、ベージュグラデーションとスラッグを重ねる
 * ======================================== */
@media screen and (max-width: 700px) {
  /* 写真なしでも写真ありと同じ高さの帯を確保する */

	/* ========================================
	 * 悩み別ページ：SPバナー下のタイトル余白
	 * ======================================== */

	/* ========================================
	 * 悩み別ページ：SP画像内のスラッグを上下中央に配置
	 * 画像と同じ縦横比の領域で中央揃え
	 * ======================================== */

  .classy-trouble__container {width:calc(100% - 28px);padding:16px 0 55px}
  .classy-trouble__intro {margin-bottom:22px}
  .classy-trouble__section-head {margin-bottom:20px}
  .classy-trouble__groups {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .classy-trouble__group-visual {padding:9px 7px 2px}
  .classy-trouble__group-visual img {width:min(100%,140px)}
  .classy-trouble__group-title {font-size:14px;margin:0 8px;padding:6px 0 9px}
  .classy-trouble__group-content {padding:8px 6px 11px}
  .classy-trouble__treatments {gap:4px}
  .classy-trouble__treatment-copy {padding:6px 4px}
  .classy-trouble__treatment-note {font-size:10px;line-height:1.45;margin-top:3px;margin-bottom:0}
  .classy-trouble__treatment-link,.classy-trouble__treatment-name {font-size:11px;line-height:1.45}
  .classy-trouble__treatment-link span {font-size:11px}
}

/* ========================================
 * 悩み別ページ：スマホの施術一覧を1列表示
 * ======================================== */
@media screen and (max-width: 600px) {
  .classy-trouble__treatments {grid-template-columns:minmax(0,1fr)}
}


/* ========================================
 * 悩み別ページ：SPタイトルの上余白を調整
 * ======================================== */

/* TOPの「詳しく見る」と同じリンクデザイン（top.cssの既存値を使用） */
.classy-trouble .classy-top-more-link { margin-top:28px; text-align:right; }
.classy-trouble .classy-top-more-link a { display:inline-flex; align-items:center; gap:18px; padding:0 0 8px; border-bottom:1px solid #c9b89b; color:#65584f; font-size:13px; line-height:1.4; text-decoration:none; }
.classy-trouble .classy-top-more-link a span { font-size:16px; line-height:1; }
@media screen and (max-width:767px) {
  .classy-trouble .classy-top-more-link { margin-top:20px; }
  .classy-trouble .classy-top-more-link a { gap:14px; padding-bottom:7px; font-size:12px; }
}