/* 通常の文書フローで4枚の写真を続ける。動きはsite.jsのスクロール量だけで制御。 */
#concerns{margin:0;padding:64px 0 0}
#concerns .concerns-heading{margin:0 auto 32px}
#concerns h2{margin:0;opacity:1;transform:none;translate:none;animation:none;clip-path:none}
#concerns .concerns-panels{width:min(1100px,calc(100% - 64px));margin-inline:auto}
#concerns .concerns-panel{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:16/9;background:#30291f}
#concerns .concerns-panel + .concerns-panel{margin-top:-1px}
#concerns .concerns-scene{position:absolute;display:block;left:0;top:-9%;width:100%;height:118%;max-width:none;object-fit:cover;object-position:57% 50%;transform-origin:center;animation:none;transition:none}
#concerns .concerns-bubble{position:absolute;z-index:1;right:7%;top:13%;margin:0;padding:26px 46px 28px;background:url(bubble-cloud.svg) center/100% 100% no-repeat;color:#3b2f24;font:600 16px/1.6 'Klee One',var(--sans);letter-spacing:.02em;white-space:nowrap;rotate:2deg;filter:drop-shadow(0 6px 12px rgba(40,22,6,.38));pointer-events:none}
#concerns .concerns-bubble::before,#concerns .concerns-bubble::after{content:'';position:absolute;border-radius:50%;background:#f8eedb;box-shadow:inset 0 0 0 1px rgba(122,94,62,.45),0 3px 8px rgba(40,22,6,.3);left:20%}
#concerns .concerns-bubble::before{width:11px;height:11px;bottom:-14px}
#concerns .concerns-bubble::after{width:6px;height:6px;bottom:-24px;left:calc(20% - 9px)}
#concerns [data-concern="02"] .concerns-bubble{left:44%;right:auto;top:13%;rotate:-2deg}
#concerns [data-concern="03"] .concerns-bubble{right:5%;top:20%;rotate:1.4deg}
#concerns [data-concern="04"] .concerns-bubble{left:17%;right:auto;top:21%;rotate:-1.6deg}
#concerns [data-concern="04"] .concerns-bubble::before{left:auto;right:20%}
#concerns [data-concern="04"] .concerns-bubble::after{left:auto;right:calc(20% - 9px)}
#concerns .concerns-card{position:absolute;z-index:2;right:24px;bottom:24px;width:440px;max-width:calc(100% - 48px);box-sizing:border-box;padding:20px 24px;border-radius:12px;background:rgba(255,253,247,.97);box-shadow:0 6px 24px #25352f12}
#concerns .concerns-card p{margin:0;line-break:strict;text-wrap:pretty}
#concerns .concerns-card .concerns-card-tag{margin:0 0 4px;font-size:12px;letter-spacing:.06em;color:#b5452f;line-height:1.85}
#concerns .concerns-card-tag i{font:italic 600 17px/1 Georgia,serif;margin-left:2px}
#concerns .concern-worry{font-size:14px;line-height:1.7;color:#4a544e}
#concerns .concern-answer{position:relative;padding-left:19px;margin-top:8px!important;font-size:18px;line-height:1.8;font-weight:700;color:var(--green)}
#concerns .concern-answer::before{content:'→';position:absolute;left:0;font-weight:400}
/* 読み上げ用原本。display:noneは使わない。 */
#concerns .concern-list{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}
#concerns .concern-list li{opacity:1;transform:none;animation:none}
@media(max-width:1100px) and (min-width:761px){
  #concerns .concerns-panel{aspect-ratio:auto;min-height:560px}
  #concerns .concerns-card .concern-answer{font-size:16px}
}
@media(max-width:760px){
  #concerns{padding-top:48px}
  #concerns .concerns-heading{margin-bottom:24px}
  #concerns h2{font-size:23px;line-height:1.5}
  #concerns .concerns-panels{width:100%}
  #concerns .concerns-panel{aspect-ratio:auto;height:72vh;height:72svh;min-height:510px}
  #concerns .concerns-bubble{right:6%;top:10%;font-size:15px;padding:22px 38px 24px}
  #concerns [data-concern="02"] .concerns-bubble{left:auto;right:5%;top:12%}
  #concerns [data-concern="03"] .concerns-bubble{right:5%;top:24%}
  #concerns [data-concern="04"] .concerns-bubble{left:6%;right:auto;top:19%}
  #concerns .concerns-card{left:16px;right:16px;bottom:24px;width:auto;max-width:none;padding:15px 16px 16px}
  #concerns .concerns-card .concern-worry{font-size:13px;line-height:1.7}
  #concerns .concerns-card .concern-answer{font-size:15px;line-height:1.8}
}
@media(max-width:374px){
  #concerns .concerns-bubble{font-size:13px;line-height:1.5;padding:18px 30px 20px}
}
@media(prefers-reduced-motion:reduce){
  #concerns .concerns-scene,#concerns .concerns-bubble,#concerns .concerns-card{transform:none!important;opacity:1!important}
  #concerns .concerns-bubble{filter:drop-shadow(0 6px 12px rgba(40,22,6,.38))!important}
}
/* 写真のつなぎ目：すき間を作らず、上下の端をうっすら暗くして隣の写真となじませる */
#concerns .concerns-panel::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(rgba(20,14,8,.38),transparent 9%,transparent 91%,rgba(20,14,8,.38))}
#concerns .concerns-panel:first-child::after{background:linear-gradient(transparent 91%,rgba(20,14,8,.38))}
#concerns .concerns-panel:last-child::after{background:linear-gradient(rgba(20,14,8,.38),transparent 9%)}
#concerns .concerns-panel .concerns-bubble,#concerns .concerns-panel .concerns-card{z-index:3}
