/*
 * 占い師レコメンド（占い師詳細・回遊導線の上 / inc/recommend.php）
 *  - 占い師一覧と同じカード（.teller-card / archive-teller.css）を横スクロールで並べる。
 *  - 横幅は機種に追従（カードは固定幅・はみ出し分はスクロール）。
 */
.reco { background:#FFFFFF; }
.reco__section { padding:20px 0; border-top:1px solid #EBEBEB; }
.reco__section:first-child { border-top:0; }

.reco__title { font-family:'Noto Sans JP', sans-serif; font-size:16px; font-weight:500; line-height:1.5; letter-spacing:0.03em; color:#1A1A1A; margin:0 0 12px; padding:0 16px; }

.reco__row { display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:0 16px 4px; scroll-snap-type:x proximity; scrollbar-width:none; }
.reco__row::-webkit-scrollbar { display:none; }

.reco__item { flex:0 0 156px; width:156px; scroll-snap-align:start; }
/* teller.css の別物 .teller-card{width:300px} を打ち消し、一覧カードと同じくセル幅にフィットさせる */
.reco__item .teller-card { width:100%; height:100%; }

/* 初期は最初の2セクションのみ。「すべてみる」で3番目以降を表示（.reco.is-expanded） */
.reco:not(.is-expanded) .reco__section--extra { display:none; }
.reco.is-expanded .reco__more { display:none; }

.reco__more { display:flex; align-items:center; justify-content:center; gap:4px; width:calc(100% - 32px); margin:20px 16px 0; min-height:48px; padding:10px 16px; border:1px solid #1A73E8; border-radius:8px; background:#FFFFFF; color:#1A73E8; font-family:'Noto Sans JP', sans-serif; font-size:15px; font-weight:500; line-height:1.4; cursor:pointer; }
.reco__more:hover { background:#F0F6FE; }