/* 便利屋まごころサービス：TOPだけの見た目（v2「人間味」2026-10-29）。共通の色・字・ボタン・ヘッダー・フッター・動きは theme.css */
/* TOP は v1 の site.css の上に読むので、TOPの中は余白を0から組み直す
   :where() で強さを0にする（部品の「margin: 0 auto」で真ん中に置く指定を消さないため。2026-10-29 清宮の指摘：大きな画面で流れ・紹介文が左に寄っていた） */
:where(.is-top main) :where(h1, h2, h3) { margin: 0; text-wrap: initial; }
:where(.is-top main) p { margin: 0; }
:where(.is-top main) :where(ul, ol) { margin: 0; padding: 0; }
/* ---------- ヒーロー ---------- */
.t-hero { position: relative; min-height: calc(100svh - var(--hd)); display: flex; align-items: center; padding: 24px 24px 72px; overflow: hidden; }
.t-hero::before { /* 右上のやわらかい陽だまり */
  content: ''; position: absolute; right: -12vw; top: -18vw; width: 62vw; height: 62vw; border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 116, 15, .16), rgba(232, 116, 15, 0) 65%); pointer-events: none;
}
.t-hero-in { position: relative; max-width: 1240px; width: 100%; margin: 0 auto; display: grid; grid-template-columns: 1.08fr .92fr; gap: 48px; align-items: center; }
.hero-hello { display: inline-flex; align-items: flex-start; gap: 4px; color: var(--or-2); font-size: 19px; margin-bottom: 14px; animation: sdIn 1.2s .3s var(--ease) both; }
.hand-arrow { width: 44px; height: 36px; margin-top: 10px; fill: none; stroke: var(--or); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transform: rotate(8deg); }
.hero-h1 .ln { display: block; white-space: nowrap; }
.hero-h1 { font-weight: 900; font-size: clamp(30px, 3.9vw, 58px); line-height: 1.38; letter-spacing: .04em; animation: sdIn 1.2s .5s var(--ease) both; }
.circled { position: relative; display: inline-block; color: var(--or); padding: 0 .12em; }
.hand-circle { position: absolute; left: -10%; top: -22%; width: 120%; height: 150%; overflow: visible; pointer-events: none; }
.hand-circle path { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.4s 1.5s var(--ease) forwards; }
.t-lead { max-width: 33em; margin-top: 22px; color: var(--ink-2); font-size: 16.5px; animation: sdIn 1.2s .8s var(--ease) both; }
.stamps { list-style: none; display: flex; gap: 14px; padding: 0; margin: 26px 0 0; animation: sdIn 1.2s 1s var(--ease) both; }
.stamps li { width: 96px; height: 96px; border-radius: 50%; display: grid; place-content: center; text-align: center; line-height: 1.25; color: var(--or-2); border: 2px solid var(--or); box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5px rgba(232, 116, 15, .5); transform: rotate(-6deg); }
.stamps li:nth-child(2) { transform: rotate(4deg); }
.stamps li:nth-child(3) { transform: rotate(-2deg); }
.stamps b { font-family: var(--maru); font-weight: 900; font-size: 14px; }
.stamps small { font-size: 11.5px; font-weight: 700; }

.hero-photos { position: relative; height: min(560px, 62svh); animation: sdInScale 1.6s .7s var(--ease) both; }
.polaroid { margin: 0; background: var(--card); padding: 12px 12px 14px; box-shadow: 0 2px 2px rgba(16, 44, 87, .06), 0 18px 40px -12px rgba(16, 44, 87, .28); transform: rotate(var(--r, 0deg)); position: relative; }
.polaroid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(.92) sepia(.06); }
.polaroid figcaption { padding-top: 10px; }
.tape { position: absolute; top: -14px; left: 50%; width: 110px; height: 28px; transform: translateX(-50%) rotate(-3deg); background: rgba(232, 116, 15, .28); backdrop-filter: blur(1px); z-index: 2; clip-path: polygon(3% 0, 97% 6%, 100% 50%, 96% 100%, 2% 94%, 0 50%); }
.p-front { position: absolute; right: 4%; top: 6%; width: 78%; --r: 2.2deg; }
.p-front figcaption { font-size: 20px; color: var(--ink); text-align: center; }
.p-back { position: absolute; left: 0; bottom: 2%; width: 52%; --r: -6deg; z-index: 0; }
.p-back img { aspect-ratio: 1; }
.hero-photos .photo-note { position: absolute; right: 4%; bottom: -4px; }
.scroll { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); font-family: var(--maru); font-size: 11px; letter-spacing: .2em; color: var(--ink-3); text-decoration: none; display: grid; justify-items: center; gap: 6px; animation: sdInFade 1s 2.2s both; }
.scroll::after { content: ''; width: 1px; height: 38px; background: linear-gradient(var(--ink-3) 50%, transparent 0) 0 0 / 1px 200% ; animation: drip 2.2s 2.6s infinite; }

/* ---------- 区画の共通 ---------- */
.t-sec { position: relative; padding: 110px 24px; max-width: 1200px; margin: 0 auto; }
.sec-head { text-align: center; margin-bottom: 54px; }
.sec-head .en { font-family: var(--hand); font-size: 17px; color: var(--or); letter-spacing: .08em; margin-bottom: 6px; }
.sec-head h2 { font-size: clamp(26px, 3.2vw, 38px); font-weight: 900; }
.sec-head .sub { margin-top: 12px; color: var(--ink-2); }
.sec-head .hand.big { position: relative; display: inline-block; font-size: clamp(21px, 2.4vw, 27px); color: var(--or-2); padding: 0 6px 6px; }
.hand-line { position: absolute; left: 0; bottom: -4px; width: 100%; height: 12px; overflow: visible; }
.hand-line path { fill: none; stroke: var(--or); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.in .hand-line path, .sec-head.in .hand-line path { animation: draw 1.1s .6s var(--ease) forwards; }
.aside { margin-top: 44px; color: var(--ink-2); }
.aside a { font-weight: 700; }

/* ---------- お困りごと：付箋 ---------- */
.notes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 26px; }
.note { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 168px; padding: 26px 20px 16px; text-decoration: none; transform: rotate(var(--r)); box-shadow: 0 1px 1px rgba(0, 0, 0, .04), 0 14px 22px -14px rgba(16, 44, 87, .4); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.note::after { content: ''; position: absolute; right: 0; bottom: 0; border-style: solid; border-width: 0 0 22px 22px; border-color: transparent transparent rgba(0, 0, 0, .06) transparent; }
.note:hover { transform: rotate(0) translateY(-6px); box-shadow: 0 1px 1px rgba(0, 0, 0, .04), 0 22px 30px -14px rgba(16, 44, 87, .45); }
.n-y { background: #fff1a8; } .n-p { background: #fddcd0; } .n-g { background: #d9eedb; } .n-b { background: #dbe8f7; }
.pin { position: absolute; top: -8px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffb06a, var(--or) 55%, var(--or-2)); box-shadow: 0 3px 4px rgba(0, 0, 0, .25); }
.note .q { font-size: 19px; line-height: 1.6; color: var(--ink); }
.note .to { margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--ink-2); }

/* ---------- サービス ---------- */
.services-sec { max-width: none; background: var(--paper-2); border-radius: 48px 48px 0 0; }
.services-sec > * { max-width: 1200px; margin-left: auto; margin-right: auto; }
.t-group + .t-group { margin-top: 56px; }
.t-group h3 { display: flex; align-items: baseline; gap: 16px; font-size: 21px; padding-bottom: 12px; margin-bottom: 18px; border-bottom: 2px dashed var(--line); }
.t-group h3 em { font-style: normal; font-size: 15px; color: var(--or-2); }
.svc { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.svc a { height: 100%; display: grid; grid-template-columns: 60px 1fr; grid-template-rows: auto auto 1fr; column-gap: 14px; padding: 16px 16px 14px; border-radius: 18px; text-decoration: none; background: rgba(255, 250, 240, .7); border: 1px solid var(--line); transition: background .3s, transform .4s var(--ease), border-color .3s; }
.svc a:hover { background: var(--card); border-color: var(--or); transform: translateY(-3px); }
.svc .ic { grid-row: 1 / 4; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); border: 1.5px dashed rgba(16, 44, 87, .25); transition: transform .5s var(--ease); }
.svc a:hover .ic { transform: rotate(-8deg) scale(1.06); }
.svc .ic svg { width: 40px; height: 40px; }
.svc .nm { font-family: var(--maru); font-weight: 700; font-size: 15.5px; line-height: 1.45; }
.svc .sh { font-size: 12.5px; color: var(--ink-3); line-height: 1.6; margin-top: 2px; }
.svc .pr { align-self: end; margin-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--or-2); }

/* ---------- 料金：レシート ---------- */
.price-sec { max-width: none; background: var(--paper-2); }
.price-wrap { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.receipt { position: relative; background: var(--card); padding: 36px 34px 40px; box-shadow: 0 20px 40px -18px rgba(16, 44, 87, .3); transform: rotate(-1.2deg);
  -webkit-mask: radial-gradient(circle 7px at 50% 100%, #0000 98%, #000) 50% 100% / 18px 100%; mask: radial-gradient(circle 7px at 50% 100%, #0000 98%, #000) 50% 100% / 18px 100%; }
.r-title { text-align: center; font-family: var(--maru); font-weight: 900; font-size: 17px; letter-spacing: .2em; padding-bottom: 16px; border-bottom: 2px dashed var(--line); }
.receipt dl { margin: 0; }
.receipt dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 18px 0; border-bottom: 1px dashed var(--line); }
.receipt dt { font-family: var(--maru); font-weight: 700; font-size: 17px; }
.receipt dt small { display: block; font-family: var(--base); font-weight: 400; font-size: 12px; color: var(--ink-3); }
.receipt dd { margin: 0; white-space: nowrap; font-size: 14px; }
.receipt dd b { font-family: var(--maru); font-size: 30px; font-weight: 900; color: var(--ink); }
.receipt dd small { font-size: 12px; color: var(--ink-3); }
.r-foot { padding-top: 16px; text-align: right; font-size: 12px; color: var(--ink-3); }
.sticky { display: inline-block; background: #fff1a8; padding: 20px 24px; font-size: 21px; line-height: 1.6; transform: rotate(2deg); box-shadow: 0 14px 22px -14px rgba(16, 44, 87, .4); }
.sticky span { display: block; margin-top: 6px; font-size: 15px; color: var(--ink-2); }
.dots { list-style: none; padding: 0; margin: 26px 0; font-size: 14px; color: var(--ink-2); }
.dots li { position: relative; padding-left: 18px; margin-bottom: 8px; }
.dots li::before { content: ''; position: absolute; left: 2px; top: .8em; width: 7px; height: 7px; border-radius: 50%; background: var(--or); }

/* ---------- 大事にしていること ---------- */
.t-promises { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.t-promises li { position: relative; padding-top: 22px; }
.t-promises .num { display: grid; place-items: center; width: 74px; height: 74px; margin-bottom: 18px; font-size: 40px; color: var(--or); border: 2.5px solid var(--or); border-radius: 46% 54% 50% 50% / 55% 45% 55% 45%; transform: rotate(-8deg); }
.t-promises h3 { font-size: 20px; margin-bottom: 12px; }
.t-promises p { color: var(--ink-2); font-size: 15px; }

/* ---------- 作業の前と後 ---------- */
.t-cases { list-style: none; padding: 0; margin: 0 auto; max-width: 940px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.t-cases img { aspect-ratio: auto; object-fit: contain; filter: none; }
.t-cases figcaption b { display: block; font-family: var(--maru); font-size: 16px; }
.t-cases figcaption span { font-size: 13.5px; color: var(--ink-2); }

/* ---------- 流れ ---------- */
.flow-sec { max-width: none; background: var(--ink); color: #f7f1e5; border-radius: 48px; margin: 0 16px; }
.flow-sec .sec-head .sub { color: rgba(247, 241, 229, .75); }
.flow { list-style: none; padding: 0; margin: 0 auto 40px; max-width: 1100px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; position: relative; }
.flow::before { content: ''; position: absolute; left: 6%; right: 6%; top: 32px; border-top: 2px dashed rgba(247, 241, 229, .35); }
.flow li { position: relative; text-align: center; }
.flow .step { position: relative; display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; background: var(--or); color: #fff; font-family: var(--hand); font-size: 30px; box-shadow: 0 0 0 8px var(--ink); }
.flow h3 { font-size: 18px; margin-bottom: 8px; }
.flow p { font-size: 14px; text-align: left; color: rgba(247, 241, 229, .82); }
.flow-sec .text-link { color: #f7f1e5; }

/* ---------- ごあいさつ：便箋 ---------- */
.letter-wrap { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: start; }
.greet-photo img { aspect-ratio: 1; }
.greet-photo figcaption { text-align: center; font-size: 18px; }
.letter { position: relative; padding: 44px 48px 40px; background-color: var(--card);
  box-shadow: 0 20px 40px -20px rgba(16, 44, 87, .3); line-height: 38px; }
.letter .en { font-family: var(--hand); color: var(--or); }
.letter h2 { font-size: 28px; font-weight: 900; margin-bottom: 8px; line-height: 38px; }
.letter > p:not(.en):not(.sign) { font-size: 16px; background: repeating-linear-gradient(transparent 0 37px, rgba(16, 44, 87, .14) 37px 38px); }
.sign { margin: 18px 0 16px; text-align: right; font-size: 14px; }
.sign .hand { display: inline-block; margin-left: 12px; font-size: 30px; transform: rotate(-3deg); }

/* ---------- よくある質問：会話 ---------- */
.chat { max-width: 820px; margin: 0 auto; display: grid; gap: 30px; }
.t-qa { display: grid; gap: 10px; }
.bub { position: relative; max-width: 84%; padding: 16px 22px; border-radius: 22px; font-size: 15px; line-height: 1.8; }
.bub .who { display: block; font-family: var(--hand); font-size: 13px; margin-bottom: 2px; }
.bub.q { justify-self: start; background: var(--card); border: 1.5px solid var(--line); border-bottom-left-radius: 6px; font-family: var(--maru); font-weight: 700; }
.bub.q .who { color: var(--ink-3); font-weight: 600; }
.bub.a { justify-self: end; background: var(--or-soft); border-bottom-right-radius: 6px; color: var(--ink); }
.bub.a .who { color: var(--or-2); }

/* ---------- エリア ---------- */
.area-sec { max-width: 900px; }
.areas { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.areas a { display: block; padding: 9px 20px; border-radius: 999px; border: 1.5px solid var(--ink); text-decoration: none; font-family: var(--maru); font-weight: 700; font-size: 15px; transition: background .3s, color .3s; }
.areas li:first-child a { background: var(--ink); color: var(--paper); }
.areas a:hover { background: var(--or); border-color: var(--or); color: #fff; }

/* ---------- 最後の呼びかけ ---------- */
.cta-sec { padding: 40px 16px 120px; }
.cta-in { max-width: 1100px; margin: 0 auto; text-align: center; padding: 70px 24px 64px; border-radius: 48px; background: var(--or-soft); position: relative; overflow: hidden; }
.cta-in::before { content: ''; position: absolute; inset: 14px; border: 2px dashed rgba(232, 116, 15, .45); border-radius: 36px; pointer-events: none; }
.cta-hello { font-size: 19px; color: var(--or-2); }
.cta-in h2 { font-size: clamp(26px, 3.4vw, 42px); font-weight: 900; margin: 10px 0 16px; }
.cta-in > p:not(.hand) { color: var(--ink-2); }

/* ---------- 画面の幅ごと ---------- */
@media (max-width: 1100px) {
  .svc { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
  .t-hero { min-height: auto; padding: 14px 18px 64px; align-items: flex-start; }
  .t-hero-in { grid-template-columns: 1fr; gap: 18px; }
  .hero-photos { order: -1; height: 34svh; max-height: 300px; }
  .p-front { width: 70%; right: 2%; top: 4%; }
  .p-front figcaption { font-size: 15px; }
  .p-back { width: 44%; }
  .hero-hello { font-size: 16px; margin-bottom: 6px; }
  .hand-arrow { width: 32px; height: 26px; }
  .hero-h1 { font-size: clamp(26px, 7.8vw, 38px); }
  .t-lead { font-size: 14.5px; margin-top: 14px; }
  .stamps { gap: 10px; margin-top: 18px; }
  .stamps li { width: 82px; height: 82px; }
  .stamps b { font-size: 12.5px; }
  .t-hero .btns { display: none; } /* スマホは下のボタンがずっと出ている */
  .scroll { bottom: 82px; }
  .t-sec { padding: 76px 18px; }
  .sec-head { margin-bottom: 38px; }
  .notes { grid-template-columns: 1fr 1fr; gap: 22px 14px; }
  .note { min-height: 140px; padding: 22px 14px 12px; }
  .note .q { font-size: 16px; }
  .services-sec { border-radius: 28px 28px 0 0; }
  .svc { grid-template-columns: 1fr; gap: 10px; }
  .t-group h3 { flex-direction: column; gap: 0; font-size: 19px; }
  .price-wrap { grid-template-columns: 1fr; gap: 40px; }
  .receipt { padding: 28px 22px 34px; }
  .receipt dd b { font-size: 25px; }
  .t-promises { grid-template-columns: 1fr; gap: 26px; }
  .t-promises li { display: grid; grid-template-columns: 64px 1fr; column-gap: 16px; padding-top: 0; }
  .t-promises .num { grid-row: 1 / 3; width: 58px; height: 58px; font-size: 30px; margin: 0; }
  .t-cases { grid-template-columns: 1fr; gap: 36px; }
  .flow-sec { border-radius: 28px; margin: 0 10px; }
  .flow { grid-template-columns: 1fr; gap: 26px; }
  .flow::before { left: 31px; right: auto; top: 10px; bottom: 10px; border-top: 0; border-left: 2px dashed rgba(247, 241, 229, .35); }
  .flow li { display: grid; grid-template-columns: 64px 1fr; column-gap: 16px; text-align: left; }
  .flow .step { grid-row: 1 / 3; margin: 0; }
  .letter-wrap { grid-template-columns: 1fr; gap: 34px; }
  .greet-photo { width: 64%; margin: 0 auto; }
  .letter { padding: 34px 22px 30px; }
  .bub { max-width: 92%; padding: 14px 18px; font-size: 14.5px; }
  .cta-in { border-radius: 28px; padding: 54px 18px 48px; }
  .cta-in::before { border-radius: 20px; inset: 10px; }
  .cta-sec .btns { flex-direction: column; align-items: center; }
}
/* 確認の画面写真用（?static）：動きを止めて全部出す */
html.static *, html.static *::before, html.static *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition: none !important; }
html.static .t-hero { min-height: 880px; }
@media (max-width: 820px) { html.static .t-hero { min-height: 780px; } }
@media (max-width: 820px) { .scroll { display: none; } }
/* スマホのサービスは2列（アイコンを上に。説明は省いて縦に短く） */
@media (max-width: 820px) {
  .svc { grid-template-columns: 1fr 1fr; gap: 10px; }
  .svc a { grid-template-columns: 1fr; grid-template-rows: auto; justify-items: center; text-align: center; padding: 14px 8px 12px; row-gap: 2px; }
  .svc .ic { grid-row: auto; width: 54px; height: 54px; margin-bottom: 6px; }
  .svc .ic svg { width: 36px; height: 36px; }
  .svc .nm { font-size: 14px; }
  .svc .sh { display: none; }
  .svc .pr { font-size: 12px; margin-top: 2px; }
}

/* ---------- SEOの直し（2026-10-29）で足した部品 ---------- */
/* h1 の下の地域名・サービス名（キャッチの邪魔をしない小さな字） */
.hero-h1 .h1sub { display: block; margin-top: 14px; font-family: var(--base); font-weight: 700; font-size: clamp(13px, 1.1vw, 15px); letter-spacing: .08em; color: var(--ink-2); white-space: normal; }
.hero-h1 .h1sub::before { content: ''; display: inline-block; width: 22px; height: 2px; margin: 0 10px 4px 0; background: var(--or); vertical-align: middle; }
/* サービスの紹介文 */
.intro { max-width: 46em; margin: -24px auto 44px; text-align: center; color: var(--ink-2); font-size: 15px; }
.more { margin-top: 40px; }
/* 対応エリア：市町ごとのカード（市町のページ＋サービス×市町のページへのリンク） */
.towns { list-style: none; padding: 0; margin: 0 auto; max-width: 1100px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.towns li { padding: 16px 18px 14px; border-radius: 18px; background: rgba(255, 250, 240, .7); border: 1px solid var(--line); }
.town { display: block; font-family: var(--maru); font-weight: 900; font-size: 18px; text-decoration: none; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 2px dashed var(--line); }
.town span { font-size: 13px; font-weight: 700; color: var(--ink-3); margin-left: 2px; }
.town:hover { color: var(--or-2); }
.towns li:first-child { background: var(--ink); border-color: var(--ink); }
.towns li:first-child .town, .towns li:first-child a { color: var(--paper); }
.towns li:first-child .town span { color: rgba(247, 241, 229, .7); }
.towns p { display: grid; gap: 2px; font-size: 12.5px; line-height: 1.7; }
.towns p a { text-decoration: none; color: var(--ink-2); }
.towns p a::before { content: '› '; color: var(--or); }
.towns p a:hover { text-decoration: underline; }
@media (max-width: 1100px) { .towns { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) {
  .intro { margin: -16px auto 32px; text-align: left; font-size: 14px; }
  .towns { grid-template-columns: 1fr 1fr; gap: 10px; }
  .towns li { padding: 12px 12px 10px; }
  .town { font-size: 16px; }
  .town span { display: block; margin: 0; font-size: 11px; }
  .towns p { font-size: 11.5px; }
}
.services-sec > .intro { max-width: 46em; }

/* ---------- 見た目のテストで直した所（2026-10-29 清宮「他にもずれとかまだあると思う。見た目のテストしてきて」） ---------- */
/* 最後の呼びかけ：ボタンを真ん中に（作り直しのときに .btns.center を落としていた） */
.cta-in .btns { justify-content: center; }
/* 付箋：8枚なので 4列→（タブレットの縦・スマホ）2列。3列にすると 3・3・2 で右下が空く */
@media (max-width: 1100px) and (min-width: 821px) { .notes { grid-template-columns: repeat(4, 1fr); gap: 28px 18px; } .note .q { font-size: 17px; } }
/* タブレットの縦（600〜820px）：写真が横いっぱいに広がって、見出しの上に重なっていた → 幅を決めて真ん中に */
@media (max-width: 820px) and (min-width: 600px) { .hero-photos { width: 100%; max-width: 460px; height: 300px; margin: 0 auto; } }