@charset "UTF-8";

/* Sustainability page only */
.sustainability-page { --sustain-pink:#F21163; --sustain-green:#3d9b4b; }
.sustainability-page .sustainability-hero { position:relative; overflow:hidden; isolation:isolate; }
.sustainability-page .sustainability-hero::before { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,rgba(255,255,255,.95),rgba(255,255,255,.78) 55%,rgba(255,255,255,.18)); }
.sustainability-hero-art { position:absolute; z-index:-1; right:4%; bottom:0; width:min(48%,570px); height:92%; overflow:hidden; }
.sustainability-hero-art .art-sun { position:absolute; width:150px; height:150px; right:18%; top:5%; border-radius:50%; background:#ffe8a8; opacity:.9; }
.sustainability-hero-art .art-hill { position:absolute; bottom:-18%; width:110%; height:66%; border-radius:50% 50% 0 0; transform:rotate(-8deg); }
.art-hill-back { right:-17%; background:linear-gradient(135deg,#b5d8bd,#8fc3a3); }
.art-hill-front { left:-20%; bottom:-30%; background:linear-gradient(135deg,#6eae83,#3d8c67); }
.art-leaf { position:absolute; color:#3d9b4b; font-size:70px; text-shadow:0 8px 20px rgba(34,90,53,.12); }
.art-leaf-one { right:10%; top:20%; transform:rotate(20deg); }
.art-leaf-two { right:27%; top:38%; font-size:46px; transform:rotate(-35deg); }
.art-label { position:absolute; right:9%; bottom:22%; color:#fff; font:800 22px/1.1 Inter,sans-serif; letter-spacing:.12em; text-align:center; }

.sustainability-section { padding-top:clamp(42px,6vw,76px); padding-bottom:clamp(42px,6vw,76px); }
.sustainability-definition { display:grid; grid-template-columns:110px 1fr; gap:26px; align-items:center; padding:28px; border:1px solid rgba(61,155,75,.15); border-radius:18px; background:linear-gradient(120deg,#f4fbf3,#fff); }
.definition-symbol { width:88px; height:88px; display:grid; place-items:center; border-radius:50%; background:#e3f4e2; color:#3d9b4b; font-size:54px; }
.sustainability-definition h3 { margin:0 0 10px; font-size:20px; }
.sustainability-definition p { margin:0 0 9px; color:#555e61; line-height:1.9; }
.sustainability-terms { background:rgba(255,245,248,.75); }
.terms-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.term-card { padding:26px; border-radius:16px; background:#fff; border:1px solid #f4dce5; }
.term-en { color:var(--sustain-pink); font:700 11px Inter,sans-serif; letter-spacing:.14em; }
.term-card h3 { margin:8px 0 10px; font-size:22px; }
.term-card p { margin:0; color:#596168; font-size:14px; line-height:1.9; }
.sustainability-callout { margin:18px 0 0; padding:16px 20px; border-left:4px solid var(--sustain-pink); background:#fff; color:#4f555a; font-size:14px; }

.sustainability-pillars { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.sustainability-pillar { padding:26px 23px; border-radius:18px; min-height:230px; }
.pillar-green { background:#eef8ed; }
.pillar-pink { background:#fff0f5; }
.pillar-blue { background:#eef7fc; }
.pillar-symbol { width:56px; height:56px; display:grid; place-items:center; border-radius:50%; background:#3d9b4b; color:white; font-size:30px; }
.pillar-pink .pillar-symbol { background:#e85a83; }
.pillar-blue .pillar-symbol { background:#258fc5; }
.sustainability-pillar h3 { margin:15px 0 7px; font-size:19px; }
.sustainability-pillar p { margin:0; color:#596168; font-size:13px; line-height:1.85; }

.sdgs-explainer { display:grid; grid-template-columns:100px 1fr; gap:22px; align-items:center; margin-bottom:28px; }
.sdgs-wheel { width:88px; aspect-ratio:1; display:grid; place-items:center; border-radius:50%; background:conic-gradient(#e5243b 0 21deg,#dda63a 21deg 42deg,#4c9f38 42deg 63deg,#c5192d 63deg 84deg,#ff3a21 84deg 105deg,#26bde2 105deg 126deg,#fcc30b 126deg 147deg,#a21942 147deg 168deg,#fd6925 168deg 189deg,#dd1367 189deg 210deg,#fd9d24 210deg 231deg,#bf8b2e 231deg 252deg,#3f7e44 252deg 273deg,#0a97d9 273deg 294deg,#56c02b 294deg 315deg,#00689d 315deg 336deg,#19486a 336deg 360deg); }
.sdgs-wheel span { width:55px; aspect-ratio:1; display:grid; place-items:center; border-radius:50%; background:#fff; color:#222; font:800 14px Inter,sans-serif; }
.sdgs-explainer p { margin:0; color:#555e64; font-size:14px; line-height:1.9; }
.subheading { margin:0 0 15px; font-size:19px; }
.sdgs-goals { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:7px; margin:0; padding:0; list-style:none; }
.sdgs-goals li { min-height:95px; padding:10px; display:flex; flex-direction:column; justify-content:space-between; color:#fff; font-size:11px; line-height:1.45; font-weight:700; }
.sdgs-goals b { font:800 25px/1 Inter,sans-serif; }
.goal-1{background:#e5243b}.goal-2{background:#dda63a}.goal-3{background:#4c9f38}.goal-4{background:#c5192d}.goal-5{background:#ff3a21}.goal-6{background:#26bde2}.goal-7{background:#fcc30b;color:#222}.goal-8{background:#a21942}.goal-9{background:#fd6925}.goal-10{background:#dd1367}.goal-11{background:#fd9d24;color:#222}.goal-12{background:#bf8b2e}.goal-13{background:#3f7e44}.goal-14{background:#0a97d9}.goal-15{background:#56c02b;color:#222}.goal-16{background:#00689d}.goal-17{background:#19486a}

.sdgs-action-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.sdgs-action { overflow:hidden; border:1px solid #e9edf0; border-radius:16px; background:#fff; box-shadow:0 8px 24px rgba(30,55,65,.04); }
.sdgs-action-visual { height:132px; display:flex; justify-content:space-between; align-items:center; padding:12px 22px; color:#fff; }
.sdgs-action-visual b { align-self:flex-start; font:800 42px/1 Inter,sans-serif; }
.sdgs-action-visual span { font-size:66px; line-height:1; font-weight:300; }
.action-8{background:linear-gradient(130deg,#a21942,#e45a82)}.action-11{background:linear-gradient(130deg,#fd9d24,#ffcb75);color:#5d3d08}.action-12{background:linear-gradient(130deg,#bf8b2e,#e3c36a)}.action-17{background:linear-gradient(130deg,#19486a,#279bc2)}
.sdgs-action-body { padding:18px 20px 20px; }
.goal-label { margin:0 0 5px; color:#a3134a; font-size:11px; font-weight:700; }
.sdgs-action h3 { margin:0 0 8px; font-size:18px; }
.sdgs-action-body p:last-child { margin:0; color:#596168; font-size:13px; line-height:1.85; }
.sustainability-note { margin:15px 0 0; color:#777e83; font-size:11px; line-height:1.7; }

.sustainability-faq { background:rgba(245,249,247,.8); }
.faq-list { display:grid; gap:10px; }
.faq-list details { border:1px solid #e3e9e5; border-radius:12px; background:#fff; padding:0 20px; }
.faq-list summary { position:relative; cursor:pointer; padding:17px 32px 17px 0; font-weight:700; list-style:none; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:"＋"; position:absolute; right:0; top:14px; color:var(--sustain-pink); font-size:22px; }
.faq-list details[open] summary::after { content:"−"; }
.faq-list details p { margin:0; padding:0 0 18px; color:#596168; font-size:13px; line-height:1.85; }

@media(max-width:800px) {
  .sustainability-hero-art { width:48%; opacity:.7; right:-3%; }
  .sustainability-pillars { grid-template-columns:1fr; }
  .sustainability-pillar { min-height:0; }
  .sdgs-goals { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media(max-width:560px) {
  .sustainability-page .sustainability-hero { min-height:390px; }
  .sustainability-hero-art { width:75%; height:58%; opacity:.55; right:-10%; }
  .sustainability-definition { grid-template-columns:1fr; padding:22px; gap:15px; }
  .definition-symbol { width:64px; height:64px; font-size:38px; }
  .terms-grid,.sdgs-action-grid { grid-template-columns:1fr; }
  .sdgs-explainer { grid-template-columns:65px 1fr; gap:12px; }
  .sdgs-wheel { width:62px; }
  .sdgs-wheel span { width:39px; font-size:11px; }
  .sdgs-goals { grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
  .sdgs-goals li { min-height:78px; padding:8px; font-size:9px; }
  .sdgs-goals b { font-size:20px; }
}


/* SDGs 17目標の提供画像 */
.sdgs-17-figure { margin: 0; padding: clamp(12px,2.5vw,28px); border-radius: 16px; background: #f1f9fc; text-align: center; }
.sdgs-17-figure img { display: block; width: 100%; max-width: 1191px; height: auto; margin: 0 auto; }
.sdgs-17-figure figcaption { margin-top: 10px; color: #657078; font-size: 12px; }


/* KVと最初のコンテンツ見出しの間に余白を確保 */
.sustainability-page main > section#sustainability {
  margin-top: 48px;
  padding-top: 52px;
}

@media (max-width: 560px) {
  .sustainability-page main > section#sustainability {
    margin-top: 28px;
    padding-top: 36px;
  }
}