/* 自動生成: style.css を役割別に分割 (STEP2). 手動編集は各パーシャルで. */

/* ============================================================
   SUBPAGE — かもめ便 (kamome.html) 青テーマ #2EA7E0
   ============================================================ */

.kamome-page { --kamome: #2ea7e0; color: #292929; }

/* --- About us --- */

.kabout { padding: 120px 0; }

.kabout__inner { max-width: 1040px; margin: 0 auto; padding-inline: var(--pad); display: flex; align-items: center; gap: 120px; }

.kabout__l { position: relative; flex: 1; min-width: 0; }

.kabout__watermark { font-family: var(--font-en); font-weight: 700; font-size: clamp(56px, 8.4vw, 90px); line-height: 1.2; white-space: nowrap; background: linear-gradient(180deg, #c7edff, #fff); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: -30px; }

.kabout__ttl { display: flex; align-items: flex-end; gap: 6px; }

.kabout__ttl b { font-size: 48px; font-weight: 700; }

.kabout__ttl span { font-size: 32px; font-weight: 700; }

.kabout__bars { margin-top: 24px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

.kabout__bar { background: var(--kamome); color: #fff; font-size: clamp(19px, 2.3vw, 30px); font-weight: 700; padding: 8px 12px; line-height: 1.3; white-space: nowrap; }

.kabout__desc { margin-top: 40px; font-size: 14px; line-height: 1.7; }

.kabout__img { flex-shrink: 0; width: 451px; max-width: 45%; aspect-ratio: 451 / 504; }

.kabout__img img { width: 100%; height: 100%; object-fit: cover; border-radius: 40px; display: block; }

@media (max-width: 768px) {
  .kabout { padding: 64px 0; }
  .kabout__inner { flex-direction: column; gap: 32px; }
  .kabout__img { width: 100%; max-width: 340px; }
  .kabout__bar { white-space: normal; }
  .kabout__watermark { white-space: normal; }
}

/* --- かもめ便 中間セクション --- */

/* Problem */

.kproblem { background: var(--kamome); color: #fff; padding: 76px 0 128px; position: relative; }

.kproblem__head { text-align: center; margin-bottom: 44px; }

.kproblem__wm { display: block; font-family: var(--font-en); font-weight: 700; font-size: clamp(48px, 8vw, 84px); line-height: 1; color: rgba(255,255,255,.16); letter-spacing: .02em; }

.kproblem__badge { display: inline-block; margin-top: -12px; position: relative; color: #fff; font-size: 16px; font-weight: 700; letter-spacing: .06em; padding: 6px 16px; border-top: 2px dashed rgba(255,255,255,.9); border-bottom: 2px dashed rgba(255,255,255,.9); }

.kproblem__ttl { font-size: clamp(24px, 3.4vw, 32px); font-weight: 700; margin-top: 16px; }

.kproblem__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.kproblem__card { background: #fff; color: #333; border-radius: 12px; padding: 40px 32px; }

.kproblem__card img { width: 100%; aspect-ratio: 272 / 199; object-fit: cover; border-radius: 4px; display: block; }

.kproblem__card p { margin: 24px 0 0; font-size: 14px; font-weight: 400; line-height: 1.7; }

.kproblem__card p b { font-weight: 700; }

.kproblem__solvewrap { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 3vw, 36px); margin-top: 64px; }

.kproblem__solveleft { display: flex; flex-direction: column; align-items: center; gap: 18px; }

.kproblem__arrows { display: flex; flex-direction: column; align-items: center; gap: 4px; color: rgba(255,255,255,.9); }

.kproblem__arrows svg { width: 30px; height: 16px; }

.kproblem__solve { display: flex; flex-wrap: nowrap; white-space: nowrap; align-items: center; justify-content: center; gap: 10px; font-size: clamp(18px, 2.4vw, 27px); font-weight: 700; color: #fff; }

.kproblem__solve b { background: #fff; color: var(--kamome); padding: 6px 14px; border-radius: 8px; white-space: nowrap; }

.kproblem__people { width: clamp(240px, 28vw, 340px); height: auto; flex-shrink: 0; align-self: flex-start; }

/* Feature */

.kfeat { padding: 128px 0 100px; background: var(--senary); position: relative; }

.kfeat::before { content: ""; position: absolute; left: 0; top: -63px; width: 100%; height: 64px; background: var(--senary); border-top-left-radius: 50% 64px; border-top-right-radius: 50% 64px; z-index: 0; }

.kfeat__head { text-align: center; margin-bottom: 76px; }

.kfeat__en { font-family: var(--font-en); font-weight: 700; color: var(--kamome); font-size: clamp(40px, 6vw, 64px); line-height: 1.1; }

.kfeat__ja { font-weight: 700; font-size: 16px; margin-top: 2px; }

.kpoint { display: flex; align-items: flex-start; }

.kpoint + .kpoint { margin-top: 80px; }

.kpoint__img { flex-shrink: 0; width: 479px; max-width: 46%; border-radius: 20px; overflow: hidden; aspect-ratio: 479 / 302; position: relative; z-index: 2; }

.kpoint__img img { width: 100%; height: 100%; object-fit: cover; }

.kpoint__card { flex: 1; position: relative; z-index: 1; background: #fff; border-radius: 20px; box-shadow: 0 14px 40px rgba(20,60,90,.07); padding: 52px 56px 56px 92px; margin-left: -48px; margin-top: 14.5%; display: flex; flex-direction: column; justify-content: center; }

.kpoint--rev { flex-direction: row-reverse; }

.kpoint--rev .kpoint__card { margin-left: 0; margin-right: -48px; padding: 52px 92px 56px 56px; }

.kpoint__num { display: flex; flex-direction: column; font-family: var(--font-en); color: var(--kamome); font-weight: 700; line-height: 1; }

.kpoint__num small { font-size: 16px; letter-spacing: .08em; }

.kpoint__num b { font-size: 40px; line-height: 1.15; }

.kpoint__ttl { font-size: clamp(20px, 2.4vw, 24px); font-weight: 600; line-height: 1.4; color: var(--kamome); margin: 16px 0; max-width: 468px; }

.kpoint__txt { font-size: 14px; line-height: 1.7; color: #1a1a1a; max-width: 468px; }

.kpoint__ill { position: absolute; width: clamp(150px, 16vw, 196px); height: auto; pointer-events: none; z-index: 3; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }

.kpoint__ill--br { right: 4px; bottom: -44px; }

.kpoint__ill--tl { left: 152px; top: -66px; }

.kpoint__ill--tr { right: 36px; top: -66px; }

.kpoint__card:hover .kpoint__ill--br { transform: translateY(-10px) scale(1.06) rotate(3deg); }

.kpoint__card:hover .kpoint__ill--tl { transform: translateY(-10px) scale(1.06) rotate(-3deg); }

.kpoint__card:hover .kpoint__ill--tr { transform: translateY(-10px) scale(1.06) rotate(3deg); }

/* さらに バッジ */

.kfeat__more { position: relative; width: 72px; height: 72px; margin: 104px auto 0; border: 1.5px solid var(--kamome); border-radius: 50%; display: grid; place-items: center; color: var(--kamome); font-size: 14px; font-weight: 700; background: var(--senary); }

.kfeat__more::before, .kfeat__more::after { content: ""; position: absolute; left: 50%; width: 1.5px; background: var(--kamome); transform: translateX(-50%); }

.kfeat__more::before { top: -64px; height: 64px; }

.kfeat__more::after { bottom: -64px; height: 64px; }

/* 物流費削減 target */

.ktargets { margin-top: 104px; text-align: center; }

.ktargets__ttl { font-size: clamp(24px, 3.4vw, 32px); font-weight: 700; color: #292929; line-height: 1.4; }

.ktargets__ttl b { color: var(--kamome); }

.ktargets__intro { font-size: 14px; margin-top: 10px; }

.ktargets__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 24px; margin-top: 44px; }

.ktarget { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 24px rgba(20,60,90,.07); text-align: center; }

.ktarget img { width: 100%; aspect-ratio: 333 / 165; object-fit: cover; display: block; }

.ktarget__label { font-size: 20px; font-weight: 700; color: #292929; margin: 0; padding: 24px 16px 0; }

.ktarget__cap { font-size: 14px; line-height: 1.7; color: #555; margin: 0; padding: 8px 20px 26px; }

/* Port Network */

.kport { padding: 90px 0 100px; text-align: center; }

.kport__en { font-family: var(--font-en); font-weight: 700; color: var(--kamome); font-size: clamp(34px, 5vw, 52px); line-height: 1.1; }

.kport__ja { font-weight: 700; font-size: 14px; margin-top: 6px; }

/* Port Network — Figma「Group 188」= 1440 × 1182 の座標系をそのまま使う。
   --u は「デザイン1px」の実寸。地図幅に比例するのでラベル等も比率どおり縮む。 */

.kport__map { position: relative; width: min(1180px, 94vw); margin-top: 48px; margin-left: calc((100% - min(1180px, 94vw)) / 2); aspect-ratio: 1440 / 1182; --u: calc(min(1180px, 94vw) / 1440); }

/* 地図（Figma の地図レイヤー単体。線・写真・ピンは焼き込まれていない） */

.kport__base { position: absolute; left: 0; top: calc(15 * var(--u)); width: 100%; height: auto; z-index: 1; }

/* ライン・ピン・ハブ（1枚のSVGに同居させて座標ズレを無くす） */

.kport__gfx { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 2; }

.kport__hub-in { fill: rgba(46, 167, 224, .24); }

.kport__hub-out { fill: none; stroke: var(--kamome); stroke-width: 1; }

.kport__ripple { fill: none; stroke: var(--kamome); stroke-width: 1; opacity: 0; }

.kport__line { stroke: var(--kamome); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }

.kport__spark { stroke: var(--kamome); stroke-width: 2.5; fill: none; stroke-linecap: round; opacity: 0; filter: drop-shadow(0 0 4px rgba(46, 167, 224, .9)); }

/* 港カード（ラベル 89×40 ＋ 写真 306×219 = 306×259） */

.kport__card { position: absolute; width: 21.25%; margin: 0; z-index: 3; }

.kport__inner { display: block; transition: transform .3s cubic-bezier(.34, 1.5, .6, 1), filter .3s ease; }

.kport__label { display: flex; width: max-content; align-items: center; height: calc(40 * var(--u)); padding: 0 calc(20 * var(--u)); background: var(--kamome); color: #fff; font-weight: 700; font-size: calc(16 * var(--u)); line-height: 1; border-radius: calc(8 * var(--u)); }

.kport__card img { display: block; width: 100%; aspect-ratio: 306 / 219; object-fit: cover; border-radius: calc(12 * var(--u)); box-shadow: 0 calc(6 * var(--u)) calc(22 * var(--u)) rgba(0, 25, 45, .18); }

/* 位置と「線の先端」＝カードが湧き出す原点（--ox / --oy） */

.kport__card--kobe { left: 8.819%; top: 16.836%; --ox: 100%; --oy: 54.44%; }

.kport__card--osaka { left: 22.569%; top: 55.499%; --ox: 100%; --oy: 20.46%; }

.kport__card--nagoya { left: 50.486%; top: 66.413%; --ox: 73.2%; --oy: 15.44%; }

.kport__card--yokohama { left: 75.903%; top: 48.139%; --ox: 50%; --oy: 15.44%; }

.kport__card--tokyo { left: 64.097%; top: 0; --ox: 100%; --oy: 72.2%; }

/* ---- スクロールで「線が伸びて、その先から写真が湧き出す」演出 ---- */

@media (min-width: 769px) and (prefers-reduced-motion: no-preference) {
  /* 初期非表示は JS が動いたとき（.is-anim）だけ。JS が落ちても静止画として成立させる。 */
  .kport__map.is-anim .kport__base { opacity: 0; }
  .kport__map.is-anim .kport__hub circle { opacity: 0; transform: scale(.2); transform-box: fill-box; transform-origin: center; }
  .kport__map.is-anim .kport__pin { opacity: 0; }
  .kport__map.is-anim .kport__line { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .kport__map.is-anim .kport__card { opacity: 0; }

  .kport__map.is-on .kport__base { animation: kport-base .9s ease-out .05s both; }
  .kport__map.is-on .kport__hub circle { animation: kport-pop .55s cubic-bezier(.2, .9, .3, 1.4) both; animation-delay: calc(.18s + var(--i) * .3s); }
  .kport__map.is-on .kport__ripple { animation: kport-ripple 3.2s ease-out infinite; animation-delay: calc(1.6s + var(--i) * .3s); }
  .kport__map.is-on .kport__pin { animation: kport-drop .5s cubic-bezier(.2, .9, .3, 1.5) both; animation-delay: calc(.28s + var(--i) * .3s); }
  .kport__map.is-on .kport__line { animation: kport-draw .72s cubic-bezier(.45, 0, .2, 1) both; animation-delay: calc(.44s + var(--i) * .3s); }
  .kport__map.is-on .kport__spark { animation: kport-spark .8s cubic-bezier(.45, 0, .2, 1) both; animation-delay: calc(.44s + var(--i) * .3s); }
  .kport__map.is-on .kport__card { animation: kport-emerge .62s cubic-bezier(.16, .86, .3, 1.06) both; animation-delay: calc(1s + var(--i) * .3s); transform-origin: var(--ox) var(--oy); }

  /* 演出が終わった要素はアニメを外す（hover の transform と衝突させない） */
  .kport__card.is-done { animation: none; opacity: 1; }
}

.kport__card:hover .kport__inner { transform: translateY(calc(-6 * var(--u))) scale(1.035); }

.kport__card:hover { z-index: 6; }

@keyframes kport-base { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }

@keyframes kport-pop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }

@keyframes kport-drop { 0% { opacity: 0; transform: translateY(-18px); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }

@keyframes kport-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

@keyframes kport-spark { 0% { opacity: 0; stroke-dasharray: .14 1; stroke-dashoffset: .14; } 14% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; stroke-dasharray: .14 1; stroke-dashoffset: -1; } }

@keyframes kport-emerge { 0% { opacity: 0; transform: scale(.12); filter: blur(5px); } 55% { opacity: 1; } 100% { opacity: 1; transform: scale(1); filter: blur(0); } }

@keyframes kport-ripple { 0% { opacity: .5; transform: scale(1); transform-box: fill-box; transform-origin: center; } 70%, 100% { opacity: 0; transform: scale(1.8); transform-box: fill-box; transform-origin: center; } }

/* Import / Export */

.kie { padding: 90px 0; }

.kie--gray { background: #fff; }

.kie__label { display: inline-flex; align-items: center; gap: 8px; background: var(--kamome); color: #fff; font-weight: 700; font-size: 18px; padding: 8px 24px; border-radius: 24px; margin-bottom: 32px; }

.kie__top { display: flex; gap: 48px; align-items: flex-start; margin-top: 4px; }

.kie:not(.kie--gray) .kie__top { flex-direction: row-reverse; }

.kie__left { flex: 1; }

.kie__intro { font-size: 14px; line-height: 1.7; }

.kie__img { flex-shrink: 0; width: 420px; max-width: 42%; border-radius: 16px; overflow: hidden; aspect-ratio: 420 / 250; }

.kie__img img { width: 100%; height: 100%; object-fit: cover; }

.kie__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; }

.kie-card { position: relative; background: #fff; border: 1.5px solid var(--kamome); border-radius: 14px; padding: 34px 16px 28px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }

.kie-card__plus { position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border: 2px solid var(--kamome); border-radius: 50%; }

.kie-card__plus::before, .kie-card__plus::after { content: ""; position: absolute; background: var(--kamome); }

.kie-card__plus::before { left: 50%; top: 6px; bottom: 6px; width: 2px; transform: translateX(-50%); }

.kie-card__plus::after { top: 50%; left: 6px; right: 6px; height: 2px; transform: translateY(-50%); }

.kie-card img { width: 132px; height: 98px; object-fit: contain; }

.kie-card__txt { color: var(--kamome); line-height: 1.4; }

.kie-card__lbl { display: block; font-size: 12px; font-weight: 500; }

.kie-card__main { display: block; font-size: 17px; font-weight: 700; margin-top: 2px; }

/* --- 輸入便/輸出便 カード詳細モーダル --- */

.kie-card.is-clickable { cursor: pointer; transition: box-shadow .2s, background-color .2s; }

.kie-card.is-clickable:hover { background-color: #eef8fd; box-shadow: inset 0 0 7px rgba(46,167,224,.38); }

.kie-card__plus, .kie-card__plus::before, .kie-card__plus::after { transition: background-color .2s; }

.kie-card.is-clickable:hover .kie-card__plus { background: var(--kamome); }

.kie-card.is-clickable:hover .kie-card__plus::before,
.kie-card.is-clickable:hover .kie-card__plus::after { background: #fff; }

.kie-modal { position: fixed; inset: 0; z-index: 2000; display: none; background: rgba(10,30,40,.55); overflow-y: auto; -webkit-overflow-scrolling: touch; opacity: 0; transition: opacity .28s ease; }

.kie-modal.is-open { display: block; }

.kie-modal.is-anim { opacity: 1; }

.kie-modal__panel { position: relative; background: #fff; border-radius: 30px; max-width: 900px; width: calc(100% - 48px); margin: 24px auto; padding: clamp(28px, 5vw, 64px); transform: scale(.84); opacity: 0; transform-origin: center 42%; transition: transform .44s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease; }

.kie-modal.is-anim .kie-modal__panel { transform: scale(1); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .kie-modal, .kie-modal__panel { transition: none !important; }
  .kie-modal__panel { transform: none; opacity: 1; }
}

.kie-modal__close { position: absolute; top: 24px; right: 24px; width: 52px; height: 52px; border-radius: 50%; background: var(--kamome); border: none; cursor: pointer; display: grid; place-items: center; color: #fff; transition: opacity .2s; }

.kie-modal__close:hover { opacity: .85; }

.kie-modal__close svg { width: 22px; height: 22px; }

.kie-modal__title { text-align: center; color: var(--kamome); font-size: clamp(24px, 3.4vw, 32px); font-weight: 700; margin: 8px 0 28px; line-height: 1.4; }

.kie-modal__hero { width: 100%; border-radius: 10px; aspect-ratio: 16 / 10; object-fit: cover; margin-bottom: 40px; display: block; }

.kie-modal__sec { margin-top: 32px; }

.kie-modal__sec:first-child { margin-top: 0; }

.kie-modal__h { display: flex; gap: 16px; align-items: stretch; color: var(--kamome); font-weight: 600; font-size: clamp(18px, 2.2vw, 24px); line-height: 1.4; }

.kie-modal__h::before { content: ""; flex-shrink: 0; width: 4px; background: var(--kamome); border-radius: 2px; }

.kie-modal__body { font-size: 14px; line-height: 1.9; color: #333; margin-top: 16px; }

.kie-modal__secimg { width: 100%; max-width: 340px; border-radius: 8px; margin-top: 16px; display: block; }

.kie-modal__row { display: flex; gap: 32px; align-items: flex-start; margin-top: 20px; }

.kie-modal__rowimg { flex-shrink: 0; width: 300px; max-width: 42%; border-radius: 8px; aspect-ratio: 300 / 230; object-fit: cover; display: block; }

.kie-modal__rowtext { flex: 1; min-width: 0; }

.kie-modal__rowtext .kie-modal__body { margin-top: 12px; }

.kie-modal__callout { font-weight: 700; font-size: clamp(15px, 1.9vw, 18px); line-height: 1.9; color: #222; }

.kie-modal__callout span { background: #fff36b; padding: 1px 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

.kie-modal__gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 20px; }

.kie-modal__gallery img { width: 100%; aspect-ratio: 183 / 146; object-fit: cover; border-radius: 6px; display: block; }

/* ポップなホバー */

.kproblem__card, .ktarget { transition: transform .32s cubic-bezier(.34, 1.45, .6, 1), box-shadow .32s ease; }

.kproblem__card:hover, .ktarget:hover { transform: translateY(-7px); box-shadow: 0 18px 38px rgba(0, 25, 45, .15); }

/* ホバーで反転 */

.kproblem__people { transition: transform .5s ease; }

.kproblem__solvewrap:hover .kproblem__people { transform: translateY(-6px) rotate(-1.5deg); }

@media (max-width: 768px) {
  .kie-modal__panel { border-radius: 20px; width: calc(100% - 24px); margin: 12px auto; padding: 28px 18px; }
  .kie-modal__close { width: 44px; height: 44px; top: 14px; right: 14px; }
  .kie-modal__hero { margin-bottom: 28px; }
  .kie-modal__gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .kie-modal__row { flex-direction: column; gap: 16px; }
  .kie-modal__rowimg { width: 100%; max-width: 100%; }
}

@media (max-width: 768px) {
  .kproblem { padding: 56px 0 96px; }
  .kproblem__cards { grid-template-columns: 1fr; }
  .kproblem__solvewrap { flex-direction: column; gap: 24px; }
  .kproblem__solve { white-space: normal; flex-wrap: wrap; }
  .kproblem__people { margin-top: 0; }
  .kfeat { padding: 84px 0 60px; }
  .kpoint, .kpoint--rev { flex-direction: column; gap: 0; }
  .kpoint__img { width: 100%; max-width: 420px; z-index: 2; }
  .kpoint__card, .kpoint--rev .kpoint__card { margin: -32px 0 0; padding: 48px 28px 28px; width: 92%; }
  .kpoint__ill--br { right: 8px; bottom: -24px; width: 150px; }
  .kpoint__ill--tl { left: auto; right: 8px; top: -60px; width: 150px; }
  .kpoint__ill--tr { right: 8px; top: -60px; width: 150px; }
  .ktargets__grid { grid-template-columns: 1fr; }
  /* モバイルは地図を出さずカードだけ2列で並べる */
  .kport__map { aspect-ratio: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; --u: calc((94vw - 16px) / 2 / 306); }
  .kport__base, .kport__gfx { display: none; }
  .kport__card { position: static; width: 100%; opacity: 1; }
  .kie__top { flex-direction: column; align-items: stretch; gap: 20px; }
  .kie__img { width: 100%; max-width: none; }
  .kie__cards { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}