/* 参考デザインをポータルの導線に合わせたTOPファーストビュー */
.portal-hero {
  position: relative;
  isolation: isolate;
  min-height: 530px;
  max-width: 1360px;
  margin: 22px auto 0;
  overflow: hidden;
  border-radius: 0 0 28px 28px;
  background: #eaf4ef;
}

.portal-hero::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .76) 38%, rgba(255, 255, 255, .05) 70%);
}

.portal-hero__image {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.portal-hero__copy {
  width: min(53%, 650px);
  padding: 92px 0 72px clamp(36px, 6vw, 104px);
}

.portal-hero__copy > p {
  display: inline-flex;
  margin: 0 0 16px;
  padding: 4px 11px;
  border-left: 3px solid var(--orange);
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}

.portal-hero__copy > .portal-hero__brand {
  align-items: center;
  border-left: 0;
  gap: 10px;
  padding-left: 0;
  padding-block: 5px;
}

.portal-hero__brand img {
  display: block;
  width: min(132px, 28vw);
  height: auto;
}

.portal-hero__brand span {
  border-left: 1px solid rgba(37, 48, 71, .28);
  padding-left: 10px;
  color: #253047;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  line-height: 1.25;
}

.portal-hero__copy h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans) !important;
  font-size: clamp(45px, 5vw, 70px);
  font-style: normal;
  font-weight: 900;
  letter-spacing: -.07em;
  line-height: 1.18;
}

.portal-hero__copy h1 em {
  color: var(--orange);
  font-family: inherit !important;
  font-size: inherit;
  font-style: normal;
  font-weight: inherit;
}

.portal-hero__copy > span {
  display: block;
  margin-top: 20px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.portal-hero__guide {
  position: absolute;
  top: 38px;
  right: clamp(22px, 4.8vw, 72px);
  width: min(33vw, 360px);
  padding: 25px 25px 21px;
  border: 2px solid var(--orange);
  border-radius: 17px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 5px 6px 0 rgba(37, 48, 71, .18);
}

.portal-hero__guide-kicker {
  margin: 0 0 9px;
  color: var(--orange);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
}

.portal-hero__guide h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(20px, 2.1vw, 27px);
  font-weight: 900;
  letter-spacing: -.05em;
  line-height: 1.42;
}

.portal-hero__guide h2 em {
  color: var(--orange);
  font-family: inherit;
  font-size: inherit;
  font-style: normal;
  font-weight: inherit;
}

.portal-hero__guide ol {
  display: grid;
  gap: 6px;
  margin: 17px 0 18px;
  padding: 12px 0;
  border-top: 1px solid #e7e5df;
  border-bottom: 1px solid #e7e5df;
  list-style: none;
}

.portal-hero__guide li {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #4d5563;
  font-size: 10px;
  font-weight: 700;
}

.portal-hero__guide li b {
  color: var(--orange);
  font-size: 10px;
}

.portal-hero__main-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 17px;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  transition: transform .2s ease, background .2s ease;
}

.portal-hero__main-button:hover {
  transform: translateY(-2px);
  background: #de5914;
}

.portal-hero__main-button span { font-size: 20px; line-height: 1; }

.portal-hero__sub-link {
  display: block;
  margin-top: 12px;
  color: var(--ink);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* KV内の厳選特集スライド */
.portal-hero__special-slider {
  position: absolute;
  top: 34px;
  right: clamp(22px, 4.8vw, 72px);
  width: min(33vw, 365px);
  min-height: 412px;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 20px;
  background: rgba(255, 253, 249, .97);
  box-shadow: 6px 7px 0 rgba(37, 48, 71, .2);
}

.portal-hero__special-track { position: relative; min-height: 352px; }

.portal-hero__special {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 24px 25px 19px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(16px);
  transition: opacity .35s ease, transform .35s ease;
}

.portal-hero__special.is-active { opacity: 1; pointer-events: auto; transform: translateX(0); }
.portal-hero__special:nth-child(2) { background: linear-gradient(138deg, #fffdf9 0 65%, #c8ede6 65%); }
.portal-hero__special:nth-child(3) { background: linear-gradient(138deg, #fffdf9 0 64%, #ffe0cd 64%); }
.portal-hero__special > p { margin: 0 0 9px; color: var(--orange); font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.portal-hero__special > p b { float: right; color: var(--ink); font-size: 12px; }
.portal-hero__special > span { align-self: flex-start; padding: 4px 9px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 9px; font-weight: 900; letter-spacing: .09em; }
.portal-hero__special h2 { margin: 18px 0 12px; color: var(--ink); font-size: clamp(25px, 2.45vw, 33px); font-weight: 900; letter-spacing: -.06em; line-height: 1.27; }
.portal-hero__special h2 em { color: var(--orange); }
.portal-hero__special > div { max-width:280px; color: #58616f; font-size: 12px; font-weight: 700; line-height: 1.85; }
.portal-hero__special > a { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding: 13px 15px; border-radius: 999px; background: var(--orange); color: #fff; font-size: 12px; font-weight: 900; }
.portal-hero__special > a b { font-size: 18px; }
.portal-hero__special-controls { display: flex; align-items: center; justify-content: space-between; min-height: 58px; padding: 0 16px; border-top: 1px solid rgba(37, 48, 71, .18); background: #fffdf9; }
.portal-hero__special-controls > button { width:28px; height:28px; border:1px solid var(--ink); border-radius:50%; background:transparent; color:var(--ink); font-size:15px; cursor:pointer; }
.portal-hero__special-controls > button:hover { background:var(--orange); color:#fff; }
.portal-hero__special-controls > div { display:flex; gap:16px; }
.portal-hero__special-controls [data-special-dot] { position:relative; width:8px; height:8px; padding:0; border:0; border-radius:50%; background:#c9ccd1; cursor:pointer; }
.portal-hero__special-controls [data-special-dot].is-current { width:24px; border-radius:99px; background:var(--orange); }
/* The dot stays 8px visually, but the tappable area is expanded to 24x44 so it
   can actually be hit on a phone. These controls drive the 平屋 feature slider,
   which is the brand's main entry point, and at 8x8 they were far below the
   24x24 minimum. The 16px gap above is paired with the 8px horizontal inset so
   neighbouring targets meet without overlapping and stealing each other's taps. */
.portal-hero__special-controls [data-special-dot]::after { content:''; position:absolute; inset:-18px -8px; }

/* TOP: アイコンをフォント字形に頼らず中央配置にし、端末ごとの差をなくす */
.portal-hero__special-controls > button {
  display: grid;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  min-width: 46px;
  min-height: 46px;
  padding: 0;
  place-items: center;
  border: 2px solid var(--ink);
  box-sizing: border-box;
  line-height: 0;
}

.portal-hero__special-controls > button svg {
  display: block;
  width: 22px;
  height: 22px;
  overflow: visible;
}

.portal-hero__special-controls > button path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}
.portal-hero__special-controls > div { align-items: center; }
.portal-hero__special-controls [data-special-dot] { flex: 0 0 auto; display: block; }

/* TOP: いいねはSVGを使い、円とハートの重心を常に一致させる */
#builders .like {
  display: grid;
  width: 46px;
  height: 46px;
  min-width: 46px;
  min-height: 46px;
  padding: 0;
  place-items: center;
  border-radius: 50%;
  box-sizing: border-box;
  font-size: 0;
  line-height: 0;
}

#builders .like svg { display: block; width: 23px; height: 23px; overflow: visible; }
#builders .like path { fill: transparent; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
#builders .like.active path { fill: currentColor; }

@media (max-width: 800px) {
  /* スマホでは相談セクションの装飾写真を省き、本文に集中できるようにする */
  .reason-section { gap: 0; }
  .reason-section .reason-art { display: none; }

  /* 住宅会社を比較しやすい横スライドにし、全カードを表示する */
  #builders .builder-grid {
    display: flex;
    gap: 16px;
    margin-right: -20px;
    padding: 4px 20px 16px 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--orange) transparent;
    -webkit-overflow-scrolling: touch;
  }

  #builders .builder-card,
  #builders .builder-card:nth-child(n + 3) {
    display: block;
    flex: 0 0 min(84vw, 348px);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  #builders .builder-grid::-webkit-scrollbar { height: 5px; }
  #builders .builder-grid::-webkit-scrollbar-thumb { border-radius: 99px; background: var(--orange); }
}

.search-panel {
  margin-top: 44px;
}

/* TOP動画は、サムネイルを隠さないYouTube風の再生ボタンにする */
.video-main .play {
  display: grid;
  width: 66px;
  height: 46px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 12px;
  background: #ff0033;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
  color: transparent;
  position: absolute;
}

.video-main .play::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  margin: 0;
  content: "";
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 14px solid #fff;
  transform: translate(-35%, -50%);
}

.video-main:hover .play { background: #d9002b; }

@media (max-width: 900px) {
  .portal-hero { min-height: 610px; }
  .portal-hero::after { background: linear-gradient(90deg, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .7) 62%, rgba(255, 255, 255, .15) 100%); }
  .portal-hero__copy { width: 58%; padding-left: 42px; }
  .portal-hero__special-slider { right: 24px; width: 36%; }
  .portal-hero__special { padding: 21px 19px 17px; }
  .portal-hero__special h2 { font-size: 24px; }
}

@media (max-width: 680px) {
  .portal-hero { min-height: 0; margin-top: 0; border-radius: 0; display: block; background: #fffdf9; }
  .portal-hero__image { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-position: 72% center; transform: scale(1.34); transform-origin: 72% 100%; }
  .portal-hero::after { display: block; z-index: -1; background: linear-gradient(90deg, rgba(255, 253, 249, .74) 0%, rgba(255, 253, 249, .46) 58%, rgba(255, 253, 249, .08) 100%); }
  .portal-hero__copy { width: 100%; padding: 46px 24px 62px; background: transparent; }
  .portal-hero__copy h1 { font-size: clamp(40px, 11vw, 57px); }
  .portal-hero__copy > span { font-size: 12px; }
  .portal-hero__brand img { width: 118px; }
  .portal-hero__brand span { font-size: 8px; }
  .portal-hero__special-slider { position: relative; z-index: 1; top: auto; right: auto; width: auto; min-height: 365px; margin: -25px 17px 28px; }
  .portal-hero__special-track { min-height: 307px; }
  .portal-hero__special { padding: 21px 20px 17px; }
  .portal-hero__special h2 { margin-top:14px; font-size:27px; }
  .portal-hero__special > div { font-size:11px; }
}