/* ===============================================
# グリーンギフト寄贈MAP
# ※このセクションはSCSSではなく直接CSSで記述しています
*/
html {
  /* 常に縦スクロールバー分の幅を確保し、モーダル開閉時にスクロールバーの
     表示・非表示が切り替わってガタつくのを防ぐ */
  overflow-y: scroll;
}

body.is-modal-open {
  position: fixed;
  width: 100%;
}

.only_sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.greengift {
  padding: 150px 0;
  background-color: #FAFAFA;
}
@media screen and (max-width: 820px) {
  .greengift {
    padding: 60px 0;
  }
}

.greengift_wrap {
  max-width:  1270px;
  width: 100%;
  margin: auto;
  padding: 0 15px;
}

.greengift_frame {
  /* padding: 80px 30px 0; */
  border-radius: 30px;
  background-color: #FAFAFA;
}
@media screen and (max-width: 820px) {
  .greengift_frame {
    /* padding: 0px 20px; */
  }
}

.greengift_ttl {
  text-align: center;
}
@media screen and (max-width: 820px) {
.greengift_ttl {
  text-align: left;
}
}

.greengift_ttl_en {
  display: inline-flex;
  align-items: center;
  font-family: "proxima-nova", sans-serif;
  font-size: 54px;
  font-weight: 700;
  line-height: 1.1296296296;
}
@media screen and (max-width: 820px) {
  .greengift_ttl_en {
    /* flexのままだと「グリーンギフト寄贈」だけ複数行に折り返し、
       「MAP🌱」が別の1つのflexアイテムとして横に取り残されて崩れるため、
       SPでは通常のインライン(折り返しはブラウザの自然な文字送りに任せる)に切り替える */
    display: inline;
    font-size: 42px;
  }
}

.greengift_ttl_main {
  font-size: 48px;
  margin-right:2px;
  height: stretch;
}
@media screen and (max-width: 820px) {
  .greengift_ttl_main {
    display: inline;
    font-size: 38px;
    margin-right: 0;
  }
}

.greengift_ttl_icon {
  display: block;
  width: 65px;
  object-fit: contain;
}
@media screen and (max-width: 820px) {
  .greengift_ttl_icon {
    display: inline-block;
  }
}

.greengift_ttl_ja {
  margin-top: 50px;
  font-size: 30px;
  font-weight: 700;
  color: #0F8B43;
  line-height: 1.5;
}
@media screen and (max-width: 820px) {
.greengift_ttl_ja {
  margin-top: 10px;
  font-size: 20px;
}
}

.greengift_desc_txt {
  line-height: 1.625;
  text-align: center;
  margin: 35px 0 57px;
}
@media screen and (max-width: 820px) {
  .greengift_desc_txt {
    margin: 10px 0 20px;
    text-align: left;
    line-height: 1.9;
    letter-spacing: 0;
  }
}

.greengift_map {
  position: relative;
  margin-top: 40px;
  padding: 100px 60px 0;
  background-color: #fff;
  border-radius:30px 30px 0 0 ;
}
@media screen and (max-width: 820px) {
  .greengift_map {
    margin-top: 20px;
    margin-left: -15px;
    margin-right: -15px;
    padding: 0;
    border-radius: 0;
  }
}

.greengift_map_inner {
  position: relative;
  width: 100%;
  max-width: 1240px;
  aspect-ratio: 892 / 936;
  margin: auto;
  border-radius: 20px;
}
@media screen and (max-width: 820px) {
.greengift_map_inner {
  border-radius: 0;
  /* sp_japan_map.png(750x818)自体の縦横比に合わせる。
     PCの箱(892/936)のままだとobject-fit:containでレターボックス(余白)が
     発生し、座標がさらにズレる原因になるため。 */
  aspect-ratio: 750 / 818;
}
}

.greengift_map_bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 20px;
}
@media screen and (max-width: 820px) {
.greengift_map_bg {
  border-radius: 0;
}
}

.greengift_map_bg_placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #8AA893;
  border-radius: 20px;
}
@media screen and (max-width: 820px) {
.greengift_map_bg_placeholder {
  border-radius: 0;
}
}

/* 位置決め(translate)は常に固定にする。hoverで一緒にscaleさせると、
   ヒットエリア(判定枠)が非対称に動いてしまい、カーソルが境界ぎりぎりの時に
   拡大→枠から外れてhover解除→縮小→枠に戻ってhover再発生…のループ(ビカビカ)
   が起きるため、拡大は別要素(.greengift_map_pin_scale)側で行う。 */
.greengift_map_pin {
  position: absolute;
  left: var(--pin-x);
  top: var(--pin-y);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transform: translate(-50%, -100%);
}
/* SPはPCと地図画像のトリミング/縦横比が異なるため、位置決めは別のCSS変数
   (--pin-x-sp / --pin-y-sp)を使う。値はga_green_gift_prefecture_positions_sp()
   (assets-green-alliance/inc/data/greengift-prefecture-positions.php)で管理している。 */
@media screen and (max-width: 820px) {
  .greengift_map_pin {
    left: var(--pin-x-sp);
    top: var(--pin-y-sp);
    width: 30px;
    height: 30px;
  }
}

.greengift_map_pin_scale {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  transition: transform .2s ease;
}
@media screen and (max-width: 820px) {
  .greengift_map_pin_scale {
    width: 30px;
    height: 30px;
  }
}

.greengift_map_pin:hover .greengift_map_pin_scale,
.greengift_map_pin.is-active .greengift_map_pin_scale {
  transform: scale(1.4);
}

.greengift_map_pin_sprout {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
  background-color: #F6FBB6;
  border-radius: 50%;
  transition: background-color .2s ease;
}
@media screen and (max-width: 820px) {
  .greengift_map_pin_sprout {
    width: 26px;
    height: 26px;
  }
}

.greengift_map_pin:hover .greengift_map_pin_sprout,
.greengift_map_pin.is-active .greengift_map_pin_sprout {
  background-color: #FEEEE7;
}

/* 同一都道府県に複数拠点がある場合の、まとめピン+拠点選択ポップアップ */
.greengift_map_pin_group {
  position: absolute;
  left: var(--pin-x);
  top: var(--pin-y);
  z-index: 3;
  transform: translate(-50%, -100%);
}
@media screen and (max-width: 820px) {
  .greengift_map_pin_group {
    left: var(--pin-x-sp);
    top: var(--pin-y-sp);
  }
}

.greengift_map_pin_group .greengift_map_pin {
  position: static;
  transform: none;
}

.greengift_map_pin_popover {
  position: absolute;
  left: calc(100% + 40px);
  top: 50%;
  transform: translateY(-18%) translateX(-8px) scale(.96);
  transform-origin: left center;
  width: 226px;
  padding:16px 10px;
  border-radius: 15px;
  background-color: #fff;
  box-shadow: 0px 3px 6px #A9AEAB4D;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  z-index: 10;
}

/* 表示/非表示はCSSの:hoverではなくJS側の.is-openで制御する。
   ピンとポップアップの間には隙間(40px)があり、:hoverだと隙間を通過する間に
   一瞬hoverが外れてポップアップが消えてしまうため、JS側で閉じるのを少し遅らせている。 */
.greengift_map_pin_group.is-open .greengift_map_pin_popover {
  opacity: 1;
  transform: translateY(-18%) translateX(0) scale(1);
  pointer-events: auto;
}

/* SPでは横(右)に出すと画面外にはみ出して横スクロールが発生してしまうため、
   ピンの真上・中央寄せに切り替える。幅も画面幅に収まるよう可変にする。 */
@media screen and (max-width: 820px) {
  .greengift_map_pin_popover {
    left: 50%;
    top: auto;
    bottom: calc(100% + 14px);
    transform: translateX(-120%) translateY(8px) scale(.96);
    transform-origin: center bottom;
    width: 200px;
    max-width: calc(100vw - 40px);
  }

  .greengift_map_pin_group.is-open .greengift_map_pin_popover {
    transform: translateX(-120%) translateY(0) scale(1);
  }
}

.greengift_map_pin_popover_ttl {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 400;
  color: #0F8B43;
  text-align: left;
}

.greengift_map_pin_popover_list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.greengift_map_pin_popover_item {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-radius: 15px;
  background-color: #0F8B43;
  cursor: pointer;
  text-align: left;
  transition: background-color .2s ease;
}

.greengift_map_pin_popover_item:hover {
  background-color: #0F8B4380;
}

.greengift_map_pin_popover_item_ttl {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
}

.greengift_map_pin_popover_item_year {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  color: #fff;
}

/* JSがIntersectionObserverの監視をセットできた時だけ非表示にする。
   JSが動かない/失敗した場合は常に表示のまま(芽が消えっぱなしにならないようにするため)。*/
.greengift_map_pin.is-pop-ready .greengift_map_pin_sprout {
  opacity: 0;
  transform: scale(0);
}

.greengift_map_pin.is-popping .greengift_map_pin_sprout {
  animation: greengift-pin-pop 1s linear forwards;
}

/* アニメーション終了後はこちらの静的な値に切り替わる(JS側でanimationend時に
   is-popping→is-poppedへ差し替える)。animationを付けっぱなしにしないことで、
   hoverなどによる再計算時にちらつく可能性を避けている。 */
.greengift_map_pin.is-popped .greengift_map_pin_sprout {
  opacity: 1;
  transform: scale(1);
}

/* 通常48px⇔バウンド時61pxの間を、減衰振動(バネが弾んで止まる物理式)から
   数値計算したキーフレームで再現している。区間を細かく刻んで直線補間する
   ことで、カクつき(点滅して見える)を防ぎ滑らかなバウンドにしている。
   頂点(バウンド)は61px→約52px→約49pxの3回。 */
@keyframes greengift-pin-pop {
  0%    { transform: scale(0);     opacity: 0; }
  4%    { transform: scale(.62);   opacity: 1; }
  8%    { transform: scale(.996); }
  12%   { transform: scale(1.19); }
  16%   { transform: scale(1.261); }
  20%   { transform: scale(1.271); } /* 1回目の頂点: 61px */
  27.5% { transform: scale(1.061); }
  35%   { transform: scale(.851); }  /* 沈み込み: 約40.8px */
  42.5% { transform: scale(.967); }
  50%   { transform: scale(1.082); } /* 2回目の頂点: 約51.9px */
  57.5% { transform: scale(1.019); }
  65%   { transform: scale(.955); }  /* 沈み込み: 約45.8px */
  72.5% { transform: scale(.99); }
  80%   { transform: scale(1.025); } /* 3回目の頂点(小さく減衰): 約49.2px */
  85%   { transform: scale(1.006); }
  90%   { transform: scale(.986); }  /* ごく小さい最終の沈み込み */
  95%   { transform: scale(.993); }
  100%  { transform: scale(1); opacity: 1; } /* 通常サイズ48pxで静止 */
}

.greengift_partners {
  background-color: #fff;
  padding: 0 60px 100px;
  border-radius:0 0 30px 30px;
}
@media screen and (max-width: 820px) {
  .greengift_partners {
    padding: 40px 15px 40px;
    border-radius: 0;
    margin-left: -15px;
    margin-right: -15px;
  }
}

.greengift_partners_ttl {
  font-size: 18px;
  margin-bottom: 28px;
  font-weight: 700;
  color: #999999;
}
/* @media screen and (max-width: 820px) {
.greengift_partners_ttl {
  margin-bottom: 0;
}
} */

.greengift_partners_wrap--swiper .swiper-wrapper {
  align-items: center;
}

.greengift_partners_wrap--swiper .swiper-slide {
  width: 168px;
}
@media screen and (max-width: 820px) {
  .greengift_partners_wrap--swiper .swiper-slide {
    width: 160px;
  }
}

.greengift_partners_item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.greengift_partners_item img,
.greengift_partners_item_no_img {
  pointer-events: none;
}

.greengift_partners_item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.greengift_partners_item_no_img {
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  color: #666;
}

/* ここから下は front-page の MAGAZINE/LEARN と同じ Swiper ナビゲーション(矢印+件数)のデザイン */
.greengift_partners_wrap--swiper .my_swiper_nav {
  display: flex;
  justify-content: flex-start;
  margin-top: 24px;
}
@media screen and (max-width: 820px) {
  .greengift_partners_wrap--swiper .my_swiper_nav {
    justify-content: center;
  }
}

.greengift_partners_wrap--swiper .my_swiper_nav_arrows {
  display: flex;
  align-items: center;
  column-gap: 15px;
}

.greengift_partners_wrap--swiper .my_swiper_nav_arrows .swiper-button-prev,
.greengift_partners_wrap--swiper .my_swiper_nav_arrows .swiper-button-next {
  all: initial;
  position: relative;
  display: block;
  width: 52px;
  aspect-ratio: 1;
  border: solid 1px #000;
  border-radius: 50%;
  transition: opacity .2s;
  cursor: pointer;
}

.greengift_partners_wrap--swiper .my_swiper_nav_arrows .swiper-button-prev::after,
.greengift_partners_wrap--swiper .my_swiper_nav_arrows .swiper-button-next::after {
  content: "";
  display: none;
}

.greengift_partners_wrap--swiper .my_swiper_nav_arrows .swiper-button-prev::before,
.greengift_partners_wrap--swiper .my_swiper_nav_arrows .swiper-button-next::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-top: solid 1px #000;
  border-left: solid 1px #000;
  top: 50%;
  left: 47%;
  transform: translate(-50%, -50%) rotate(135deg);
}

.greengift_partners_wrap--swiper .my_swiper_nav_arrows .swiper-button-prev:hover,
.greengift_partners_wrap--swiper .my_swiper_nav_arrows .swiper-button-next:hover {
  opacity: .6;
  transition: opacity .2s;
}

.greengift_partners_wrap--swiper .my_swiper_nav_arrows .swiper-button-prev::before {
  transform: translateY(-50%) rotate(-45deg);
}

.greengift_partners_wrap--swiper .my_swiper_nav_arrows .swiper-button-disabled {
  cursor: default;
  border-color: #bcbcbc;
}

.greengift_partners_wrap--swiper .my_swiper_nav_arrows .swiper-button-disabled:hover {
  opacity: 1;
}

.greengift_partners_wrap--swiper .my_swiper_nav_arrows .swiper-button-disabled::before {
  border-color: #bcbcbc;
}

.greengift_partners_wrap--swiper .my_swiper_nav_arrows .text {
  font-family: "proxima-nova", sans-serif;
  letter-spacing: 0;
}

.greengift_partners_wrap--swiper .my_swiper_nav_arrows .border {
  vertical-align: middle;
  display: inline-block;
  width: 9px;
  height: 1px;
  margin: 0 6px;
  background-color: #000;
}

/* ===============================================
# モーダル
*/
.greengift_modal {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity .25s ease, visibility .25s ease;
}

.greengift_modal.is-active {
  visibility: visible;
  opacity: 1;
}

.greengift_modal_overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, .5);
}

.greengift_modal_dialog {
  position: relative;
  z-index: 1;
  width: 90%;
  max-width: 650px;
  max-height: 85vh;
  /* スクロールはこの要素ではなく内側の.greengift_modal_bodyに持たせる。
     overflow:hiddenにすることで、スクロールバーの見た目に関わらず
     角丸(border-radius)が常にきれいにクリップされるようにしている。 */
  overflow: hidden;
  border-radius: 25px;
  background-color: #fff;
  transform: translateY(20px);
  transition: transform .25s ease;
}

.greengift_modal.is-active .greengift_modal_dialog {
  transform: translateY(0);
}

.greengift_modal_body {
  max-height: calc(85vh - 20px);
  overflow-y: auto;
  /* スクロールバーは要素自身の端に必ず張り付くため、疑似要素の見た目を
     いじるだけでは角丸から離せないことがある。そこで要素自体に
     margin(上下左右)を持たせて四辺を内側に引っ込め、親(.greengift_modal_dialog)
     の白い背景がスクロールバーの上下左右に見えるようにしている。
     max-heightは引っ込めた上下10pxずつ分を差し引いている。 */
  margin: 10px 10px 10px 0;
  padding: 20px 20px 40px 30px;
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
}

.greengift_modal_body::-webkit-scrollbar {
  width: 6px;
}

.greengift_modal_body::-webkit-scrollbar-track {
  background: transparent;
}

.greengift_modal_body::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 3px;
}

.greengift_modal_close {
  position: absolute;
  top: 21px;
  right: 28px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background-color: #F6FDF4;
  cursor: pointer;
}

.greengift_modal_close::before,
.greengift_modal_close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  background-color: #049C41;
}

.greengift_modal_close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.greengift_modal_close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.greengift_modal_badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-right: 40px;
}

.greengift_modal_badge {
  display: inline-block;
  padding: 6px 14px 7px;
  border-radius: 14px;
  background-color: #F6FDF4;
  border: 2px solid #0F8B43;
  color: #0F8B43;
  font-size: 14px;
  font-weight: 700;
}

.greengift_modal_title {
  margin-top: 16px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  color: #0F8B43;
  padding: initial;
}

.greengift_modal_meta {
  margin-top: 12px;
  font-size: 14px;
  color: #666666;
}

.greengift_modal_photo {
  position: relative;
  margin-top: 20px;
  width: 100%;
  aspect-ratio: 1280 / 729;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(45deg, #EFF7EC, #EFF7EC 10px, #E3F1DE 10px, #E3F1DE 20px);
}

.greengift_modal_photo_img {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.greengift_modal_photo_placeholder {
  font-size: 12px;
  color: #8AA893;
}

.greengift_modal_photo.has-photo .greengift_modal_photo_img {
  display: block;
}

.greengift_modal_photo.has-photo .greengift_modal_photo_placeholder {
  display: none;
}

.greengift_modal_note {
  margin-top: 30px;
  padding: 10px 16px;
  border: 2px solid #0F8B43;
  border-radius: 12px;
  background-color: #fff;
  color: #0F8B43;
  font-size: 13px;
  font-weight: 700;
}

.greengift_modal_note:empty {
  display: none;
}

.greengift_modal_partner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 10px 14px;
  border-radius: 12px;
  background-color: #F6FDF4;
}

.greengift_modal_partner_label {
  flex: none;
  font-size: 14px;
  font-weight: 400;
  color: #888;
}

.greengift_modal_partner_value {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #0F8B43;
  font-size: 12px;
  font-weight: 700;
}

.greengift_modal_partner_logo {
  display: none;
  max-width: 80px;
  height: 30px;
  object-fit: contain;
}

.greengift_modal_partner_value.has-logo .greengift_modal_partner_logo {
  display: block;
}

.greengift_modal_partner_value.has-logo .greengift_modal_partner_name {
  display: none;
}

.greengift_modal_link {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  padding: 21px 0;
  border-radius: 26px;
  background-color: #0F8B43;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

@media screen and (max-width: 820px) {
  .greengift_modal {
    align-items: flex-end;
  }
  .greengift_modal_dialog {
    width: 100%;
    max-width: none;
    max-height: 85vh;
    border-radius: 28px 28px 0 0;
    transform: translateY(100%);
  }
  .greengift_modal.is-active .greengift_modal_dialog {
    transform: translateY(0);
  }
  .greengift_modal_body {
    max-height: calc(85vh - 20px);
    padding: 20px 20px 28px;
  }
}