@charset "UTF-8";
/* クローンへの手入れ。元サイトのCSSは触らず、ここで上書きする */

/* ---- 1. ヘッダー ----
   元サイトはPCでもハンバーガーだけで、しかもヒーローのイラストに重ねていた。
   イラストの一部のように見えてヘッダーだと分からないので、独立した帯にして本文を下へ押し出す。
   スマホも同じ6項目を並べる（ハンバーガーは使わない）。
   ただし1段に6項目（英字32文字）を押し込むと375px幅で10px以下になり、タップ領域も隣と接する。
   上段にロゴ・下段にメニューの2段にして、文字を12pxで保つ */
/* 高さは全幅で64pxに固定する。中身なり（71px）にすると
   本文を押し下げる padding-top の数字とズレて、先頭が帯の下に潜る */
.bon-hd{
  display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 3px;
  height: 64px; padding: 0 14px;
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  background: #fffdf7; border-bottom: 2px solid #17171a;
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  /* 英語ページにはAstraのリセットが無く、指定しないと下線ぶん高さがずれる */
  box-sizing: border-box;
}
.bon-hd__logo{
  font-size: 20px; font-weight: 900; letter-spacing: .02em; line-height: 1.15;
  color: #17171a; text-decoration: none;
}
.bon-hd__nav ul{
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: nowrap;                     /* 折り返させない。1行に収める */
  gap: 0 5px; margin: 0; padding: 0; list-style: none;
}
.bon-hd__nav a{
  font-size: 12px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  color: #17171a; text-decoration: none; text-transform: lowercase;
  padding: 3px 1px; display: inline-block;
  border-bottom: 2px solid transparent; transition: border-color .2s ease;
}
.bon-hd__nav a:hover, .bon-hd__nav a:focus-visible{ border-bottom-color: #17171a; }

/* 帯の高さぶん本文を下げる。body は Astra が overflow-x:hidden にしているので
   position:sticky は使えない。fixed にして中身側にpaddingを入れる */
#page{ padding-top: 64px; }
/* 固定ヘッダーの下に見出しが潜らないようにする */
#profile, #works, #gallery, #shop, #contact, #plan, #faq, #price{ scroll-margin-top: 72px; }

/* 自前の帯と二重になるので、元テーマのヘッダー（スマホのハンバーガーを含む）は全幅で隠す */
#masthead .ast-button-wrap .menu-toggle,
#masthead .ast-mobile-menu-trigger-minimal,
#masthead .ast-mobile-header-wrap,
#masthead .ast-mobile-header-wrap .ast-button-wrap{ display: none !important; }

@media (min-width: 922px){
  /* ヘッダーの中に入れるとページによって潰れる（worksページは #masthead の高さが0）ので、
     body直下に置いて画面に固定する。スクロールしても目次が残る */
  .bon-hd{ flex-direction: row; align-items: center; gap: 34px; padding: 0 40px; }
  .bon-hd__logo{ font-size: 26px; }
  .bon-hd__nav{ margin-left: auto; }
  .bon-hd__nav ul{ justify-content: flex-end; gap: 34px; }
  .bon-hd__nav a{ font-size: 15px; letter-spacing: .06em; padding: 4px 2px; }
}

/* ---- 24. 作品一覧への「more」ボタン ----
   もとは画像1枚（btn.png）だった。ONLINESTOREのボタンと同じ形にそろえる。
   Elementorのボタンのクラスを借りると、色や枠は要素idごとのCSSに入っていて付いてこないので、
   実測値（枠1px #97fce9・余白20/35px・14px・字間1px・太さ900）をそのまま書く */
.elementor-widget.btn .elementor-widget-container{ text-align: center; }
.bon-more{
  display: inline-block; padding: 20px 35px; border: 1px solid #97fce9; background: none;
  color: #fff; font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px; font-weight: 900; letter-spacing: 1px; text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.bon-more:hover, .bon-more:focus-visible{ background: #97fce9; color: #17171a; }

/* ---- 26. WORKS の大イラストと吹き出しを左右入れ替える（指示による） ----
   カラムを並べ替えるのではなく表示順だけ返す。HTMLの順は変えないので、
   スマホ（1列に積む幅）では今まで通りイラスト→吹き出しの順で読める */
@media (min-width: 768px){
  .elementor-4745 .elementor-element.elementor-element-c949093 > .elementor-container{
    flex-direction: row-reverse;
  }
}

/* ---- 29. WORKSの吹き出し（手描きの絵に差し替え） ---- */
.box_re{
  container-type: inline-size;          /* 中の文字を枠幅に対する比率で決めるため */
  border: 0; border-radius: 0; padding: 8.2% 13% 11.8%;
  background: url("../img/bon/bubble.webp?v=78390526") center / 100% 100% no-repeat;
  aspect-ratio: 1300 / 590;              /* 基本は絵のままの形 */
  box-sizing: border-box; display: grid; align-content: center;
}
/* CSSで描いていたしっぽ（三角）は絵の中にあるので消す */
.box_re:before, .box_re:after{ content: none; }
/* 枠の幅に対する比率で決める（cqw が指すのは余白を除いた内側の幅）。
   PCで約18px、スマホは下限の11px。入りきらないぶんは縦に伸びて絵も一緒に伸びる。
   margin を0にするのが要点。テーマが p に下マージン（PCで28.7px）を付けていて、
   文字は4行で収まっているのにそのぶんだけ枠が伸び、雲が縦に太っていた */
.box_re p{ font-size: clamp(11px, 3.85cqw, 20px); line-height: 1.5; margin: 0; }
/* 1行目は23文字。枠が広いうちは1行に収まるので改行しない。
   タブレット以下は1行21文字ぶんしか無く「ありがとうございま／す！」と割れるため、
   ここでだけ「、」のあとで折る */
.box_re .bon-sp-br{ display: none; }
@media screen and (max-width: 1023px){
  .box_re .bon-sp-br{ display: inline; }
}
/* 320px幅だと2行目が1行に収まらない。任せると「嬉しい／です。」と割れるので、
   この語だけ塊で扱わせて、折るなら手前で折らせる */
.box_re .bon-nb{ display: inline-block; }


/* ---- 30. Official SNS の背景（スマホ） ----
   絵は 1706×960 の横長。スマホのセクション（375×617）は縦長なので、
   全面に敷くと横の34%しか映らない寄りになる。それでも上まで絵で埋めたい（指示）。
   元の指定は左端に寄っていて耳のあたりしか映らなかったので位置を振る。
   高さは絵の縦がちょうど収まるので縦位置は効かない（横だけで決まる）。
   50%＝顔のアップ / 70%＝顔の左半分とスマホ / 85%＝スマホと手（黒が多い） */
@media screen and (max-width: 767px){
  .elementor-4745 .elementor-element.elementor-element-8630f43:not(.elementor-motion-effects-element-type-background){
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
  }
}

/* ---- 28. 右下の「トップへ戻る」ボタン ----
   元サイトは193pxの絵を95pxの枠に敷いていて、背景の指定は auto / repeat / 左上のまま。
   いま入れている絵は400pxで書き出しているので、左上の透明な部分だけが枠に出て
   「何も無い」ように見えていた。枠に収める指定に変える */
#ast-scroll-top{
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
/* 押したときに絵のまわりに出る点線の正体は outline ではなく border。
   Astraがページ内の<style>で
     #ast-scroll-top:focus{ border-style:dotted; border-width:thin; outline-color:transparent }
   と書いていて、わざと outline を透明にして border で枠を描いている。
   outline をいくら消しても残っていたのはこのため。border 側を止める。
   同じ重みだと勝ち負けが読み込み順まかせになるので、クラスを1つ足して確実に上書きする */
#ast-scroll-top.ast-scroll-top-icon:focus{ border-style: none; }
/* ここから下は枠（outline）の扱い。マウスで押したときは出さず、
   キーボードのTab移動のときだけ出す。全部消すと、キーボードだけで
   操作している人が今どこにいるか分からなくなる */
#ast-scroll-top{ -webkit-tap-highlight-color: transparent; }
#ast-scroll-top:focus:not(:focus-visible){ outline: none; }
#ast-scroll-top:focus-visible{ outline: 2px solid #17171a; outline-offset: 3px; border-radius: 6px; }
/* iOSのSafariは、指でタップしただけでも :focus-visible が当たる（このボタンは
   tabindex を付けたdivで、リンクやボタンとして扱われないため）。
   スマホにはTabキーが無いので、タッチ端末では枠を出さない */
@media (hover: none) and (pointer: coarse){
  #ast-scroll-top:focus,
  #ast-scroll-top:focus-visible{ outline: none; }
}

/* アニメーションの行き過ぎを画面外で切る。overflow:hidden と違い clip は
   スクロール自体を作らないので、プログラムからも横に動かせなくなる */
html{ overflow-x: clip; }

/* ---- 19. ホバーの動き ----
   4px浮くだけだと反応が地味だったので、跳ねる・傾く動きにする。
   transition ではなくキーフレームにしているのは、行って戻る動き（オーバーシュート）を
   1回のホバーで見せたいため */
@keyframes bon-pop{
  0%  { transform: translateY(0)     rotate(0)      scale(1);    }
  45% { transform: translateY(-14px) rotate(-3deg)  scale(1.07); }
  75% { transform: translateY(-4px)  rotate(2deg)   scale(1.04); }
  100%{ transform: translateY(-7px)  rotate(0)      scale(1.05); }
}
@keyframes bon-wiggle{
  0%  { transform: rotate(0)     scale(1);    }
  25% { transform: rotate(-7deg) scale(1.12); }
  55% { transform: rotate(5deg)  scale(1.12); }
  80% { transform: rotate(-3deg) scale(1.09); }
  100%{ transform: rotate(0)     scale(1.08); }
}
/* 動きを減らす設定にしている人には出さない（OSのアクセシビリティ設定）。
   見出しの飾りは触らなくても動き続けるので、ここで止めるのは特に大事 */
@media (prefers-reduced-motion: reduce){
  .bon-shop__card:hover, .bon-band img{ animation: none !important; }
}

/* ---- 15. オンラインストアの商品スライド ----
   ONLINESTOREの文章とボタンの下（右カラムの中）に入れる。
   ここは元々ぽっかり空いていた場所で、カラム幅いっぱいに置くと右の余白まで埋まる。
   背景は敷かない（セクションの青紫がそのまま透ける） */
.bon-shop{
  margin: 28px 0 0;
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  /* Elementorのカラム内はflex。min-width:auto のままだと中身（全カード分の幅）まで
     広がってしまい、はみ出して横スクロールが出る */
  width: 100%; min-width: 0;
}
/* Swiper側のCSSに頼らず自分で切る（読み込み順で一瞬はみ出すのを防ぐ） */
.bon-shop__slider{ overflow: hidden; width: 100%; min-width: 0; }
.bon-shop__ja{
  margin: 0 0 12px; font-size: 12px; font-weight: 700;
  letter-spacing: .16em; color: #fff; opacity: .9;
}
/* Swiperは幅をCSSから取る（slidesPerView:'auto'）ので、ここが1枚の大きさになる。
   固定px にすると端で必ず1枚が途中で切れるため、枠幅の割り算にして
   ちょうど割り切れる枚数だけ並ぶようにする（引く値は隙間14px×(枚数-1)） */
.bon-shop__slide{ width: calc((100% - 42px) / 4); height: auto; }
.bon-shop__card{
  display: flex; flex-direction: column; height: 100%;
  background: #fffdf7; color: #17171a; text-decoration: none;
  border: 2px solid #17171a; border-radius: 12px; overflow: hidden;
  transition: transform .2s ease;
}
.bon-shop__card:hover, .bon-shop__card:focus-visible{ animation: bon-pop .55s cubic-bezier(.34,1.56,.64,1) both; }
.bon-shop__pic{ display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #fff; }
.bon-shop__pic img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.bon-shop__name{
  display: block; padding: 9px 11px 0; font-size: 11px; font-weight: 700;
  line-height: 1.4; color: #17171a; flex: 1 1 auto;
}
.bon-shop__price{ display: block; padding: 4px 11px 10px; font-size: 13px; font-weight: 900; color: #17171a; }
@media (max-width: 921px){
  .bon-shop{ margin-top: 24px; }
  .bon-shop__slide{ width: calc((100% - 14px) / 2); }
}

/* 16. 空いている場所に流していた作品の帯（.bon-strip）は 2026-09-09 に外した */

/* ---- 18. 見出し帯（PROFILE / WORKS / GALLERY / SHOP / CONTACT）の左右に作品を貼る ----
   この帯はタイトルが中央にあるだけで、空いているのは上下ではなく左右。
   ステッカーを貼るように置いて、中央のタイトルは避ける（左上と右下） */
#profile, #works, #gallery, #shop, #contact{ position: relative; }
/* 2026-09-09にリンクを外して、押せないただの飾りにした（指示）。
   入れ物ごと pointer-events:none なので、指やマウスは素通りして下の要素に届く */
.bon-band{ position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.bon-band span{ position: absolute; display: block; }
.bon-band img{
  display: block; width: 100%; height: 100%;
  object-fit: contain; box-sizing: border-box; padding: 6px;   /* 切り抜かない。理由は bon-strip と同じ */
  border: 2px solid #17171a; border-radius: 12px; background: #fff;
  box-shadow: 0 6px 0 rgba(23,23,26,.16);
  transition: transform .2s ease;
}
/* 見出しの左右のワンポイントは、触らなくても動き続ける（指示・2026-09-09）。
   以前はホバー中だけ揺れる作りだったが、スマホにはホバーが無く、置物のままだった。
   枠<a>の傾きは残したいので、動かすのは中の<img>だけにする。
   左右で秒数と開始位置をずらして、二つが同時に同じ動きをしないようにする */
/* --bon-amp は上下に動く幅。スマホは飾り自体が小さいので、同じpxだと動きすぎる */
@keyframes bon-band-float{
  0%   { transform: translateY(0)                             rotate(0)     scale(1);    }
  20%  { transform: translateY(calc(var(--bon-amp) * -1))      rotate(8deg)  scale(1.07); }
  45%  { transform: translateY(calc(var(--bon-amp) * 0.2))     rotate(-5deg) scale(1);    }
  70%  { transform: translateY(calc(var(--bon-amp) * -0.65))   rotate(6deg)  scale(1.05); }
  100% { transform: translateY(0)                             rotate(0)     scale(1);    }
}
.bon-band img{ --bon-amp: 15px; animation: bon-band-float 3.4s ease-in-out infinite; }
.bon-band .bon-band__b img{ animation-duration: 4.1s; animation-delay: -1.4s; }
.bon-band__a{ left: 4%;  top: 18%;    width: 150px; height: 150px; transform: rotate(-6deg); }
.bon-band__b{ right: 4%; bottom: 14%; width: 150px; height: 150px; transform: rotate(5deg); }
/* 実物のイラストは背景が透明で、絵自体に黒い輪郭が付いている。
   作品写真と同じ白いカードに入れると額縁が二重になるので、下地の上に直接置く（指定画像もその形） */
/* box-shadow も必ず消す。消し忘れると、見えなくなったカードの影だけが
   絵の下に灰色の帯として残る（実際にそうなった） */
.bon-band .bon-band--ill img{
  border: 0; border-radius: 0; background: none; padding: 0; box-shadow: none;
}
/* --bon-k は絵ごとの大きさの補正。枠は全部同じでも、絵が四角のどこまで描かれて
   いるかは絵によって違うので、そのままだと見た目の大きさが揃わない。
   蝶々は四角のほぼ端まで羽が広がっていて、他より一回り大きく見えていた（指示で調整） */
.bon-band .bon-band--ill{
  width: calc(168px * var(--bon-k, 1)); height: calc(168px * var(--bon-k, 1));
}
@media (max-width: 921px){
  .bon-band__a{ left: 3%;  top: 5%;    width: 76px; height: 76px; }
  .bon-band__b{ right: 3%; bottom: 5%; width: 76px; height: 76px; }
  .bon-band .bon-band--ill{
    width: calc(86px * var(--bon-k, 1)); height: calc(86px * var(--bon-k, 1));
  }
  .bon-band img{ --bon-amp: 9px; }
}

/* ---- 17. 料金表に作例のサムネイルを添える ---- */
.bon-plan .bon-plan__price li{ align-items: center; }   /* baselineだと画像が沈む */
/* セレクタを2つ重ねているのは、テーマ側の img{height:auto} に負けて
   縦横比のまま伸びてしまい、行ごとに高さがバラバラになるため */
/* 作例が実物のモックアップ（缶・Tシャツ・看板など）になったので、
   56pxでは何か分からない。行の高さが許す範囲で大きくする */
.bon-plan .bon-plan__thumb{
  flex: 0 0 92px; width: 92px; height: 92px;
  object-fit: contain; box-sizing: border-box; padding: 3px;   /* 切り抜かない */
  border: 2px solid #17171a; border-radius: 10px; background: #fff;
}
@media screen and (max-width: 480px){
  .bon-plan .bon-plan__thumb{ flex: 0 0 72px; width: 72px; height: 72px; }
}
/* 見本の絵が無い行の空枠。枠線を出すと「絵が抜けている」ように見えるので透明にする */
.bon-plan .bon-plan__thumb--none{ border-color: transparent; background: none; }
.bon-plan__price li > b{ flex: 1 1 auto; }

/* 押したら大きく見られる作例。枠（白いカード）はボタン側が持ち、中の絵は枠いっぱいに置く */
.bon-plan .bon-zoom{
  flex: 0 0 92px; width: 92px; height: 92px; display: block;
  box-sizing: border-box; padding: 3px; cursor: zoom-in;
  border: 2px solid #17171a; border-radius: 10px; background: #fff;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s ease, box-shadow .18s ease;
}
.bon-plan .bon-zoom .bon-plan__thumb{
  width: 100%; height: 100%; flex: none; display: block;
  border: 0; padding: 0; border-radius: 0; background: none;
}
.bon-plan .bon-zoom:hover{ transform: translateY(-2px); box-shadow: 0 4px 0 #17171a; }
.bon-plan .bon-zoom:focus{ outline: none; }
.bon-plan .bon-zoom:focus-visible{ outline: 3px solid #17171a; outline-offset: 3px; }
@media screen and (max-width: 480px){
  .bon-plan .bon-zoom{ flex: 0 0 72px; width: 72px; height: 72px; }
}
/* 指で押す端末では、押したあとに浮いたままになるので動かさない */
@media (hover: none) and (pointer: coarse){
  .bon-plan .bon-zoom:hover{ transform: none; box-shadow: none; }
}

/* ---- 拡大表示（作例を押したときに出る） ---- */
.bon-lb{
  position: fixed; inset: 0; z-index: 99999;
  display: grid; grid-template-rows: 1fr; place-items: center;
  padding: 24px 16px; background: rgba(23,23,26,.88);
}
.bon-lb[hidden]{ display: none; }
.bon-lb__fig{ margin: 0; display: grid; justify-items: center; gap: 14px; max-width: 100%; }
.bon-lb__fig img{
  display: block; max-width: min(94vw, 1100px); max-height: 78vh;
  width: auto; height: auto; object-fit: contain;
  border-radius: 8px; background: #fff;
}
.bon-lb__fig figcaption{
  color: #fff; font-size: 14px; font-weight: 700; text-align: center;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", system-ui, sans-serif;
}
/* セレクタを重ねているのは、テーマが button に色と余白を当てていて
   （実際に幅74pxの水色のボタンになった）、クラス1つでは勝てないため */
.bon-lb button.bon-lb__close{
  position: absolute; top: 12px; right: 12px;
  width: 44px; height: 44px; min-width: 0; padding: 0; line-height: 1;
  display: grid; place-items: center; cursor: pointer;
  color: #17171a; background: #fff; border: 2px solid #17171a; border-radius: 50%;
  box-shadow: none; -webkit-tap-highlight-color: transparent;
}
.bon-lb button.bon-lb__close:hover{ color: #17171a; background: #97fce9; }
.bon-lb button.bon-lb__close:focus{ outline: none; }
.bon-lb button.bon-lb__close:focus-visible{ outline: 3px solid #fff; outline-offset: 3px; }
/* 開いているあいだは後ろのページを動かさない */
html.bon-lb-open, html.bon-lb-open body{ overflow: hidden; }

/* ---- 19. WORKS下部の「もっと見る」ボタン画像を大きくする ----
   元サイトでは 1000×422 の画像が 48×20 でしか表示されておらず、
   押せる要素として小さすぎた（指で押す目安は44px）。alt="btn" で狙う */
img[alt="btn"]{ width: 220px !important; height: auto !important; max-width: 62vw; }
@media (max-width: 600px){ img[alt="btn"]{ width: 170px !important; } }

/* ---- 6. ダミーテキストの入れ物を隠す（本文からも削除済み） ---- */
[data-id="2bae46b"],
[data-id="fd04311"],
[data-id="94318c0"]{ display: none !important; }

/* ---- 9. 空白詰めは取りやめ ----
   77100eb を「中身の無い空セクション」と判定して潰したが、これはヒーローそのものだった。
   イラストが <img> ではなく CSS の背景画像（top.webp）なので中身なしに見えていただけ。
   潰すとヒーローが切れる。背景画像を持つセクションは空扱いにしないこと */

/* ---- 2. 料金・制作の流れ・納期 ---- */
.bon-plan{
  /* 指定された薄い紫。前後は 赤#fe384c → ここ → 水色#4fe1ff → オレンジ#ff7733 */
  background: #f3c4ff; color: #17171a; padding: 88px 20px 96px;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", system-ui, sans-serif;
  line-height: 1.95; letter-spacing: .03em;
}
.bon-plan__inner{ max-width: 940px; margin-inline: auto; }
.bon-plan__ja{ margin: 0; font-size: 12px; letter-spacing: .3em; color: rgba(23,23,26,.62); text-align: center; }
.bon-plan h2, .bon-plan h3, .bon-faq h2{ color: #17171a; }   /* 共通CSSの白見出しを打ち消す */
.bon-plan__en{
  margin: 6px 0 46px; text-align: center; line-height: 1;
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900; font-size: clamp(32px, 6vw, 58px); letter-spacing: -.02em;
}
.bon-plan__h3{
  margin: 46px 0 18px; font-size: 17px; font-weight: 700; color: #17171a;
  padding-bottom: 10px; border-bottom: 2px solid #17171a;
}
.bon-plan__price, .bon-plan__lead{ margin: 0; padding: 0; list-style: none; }
.bon-plan__price li, .bon-plan__lead li{
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 13px 2px; border-bottom: 1px solid rgba(23,23,26,.28); font-size: 15px;
}
.bon-plan__price span, .bon-plan__lead span{
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-weight: 700; white-space: nowrap;
}
.bon-plan__note{ margin: 16px 0 0; font-size: 13px; color: rgba(23,23,26,.72); }
/* 制作の流れは1枚絵。文字が絵の中にあるので、拡大しても読めるよう幅いっぱいまで伸ばす */
.bon-plan__flowimg{ display: block; width: 100%; height: auto; max-width: 940px; margin: 0 auto; }
.bon-plan__flow{ margin: 0; padding: 0; list-style: none; }
.bon-plan__flow li{ display: flex; gap: 18px; padding: 15px 2px; border-bottom: 1px solid rgba(23,23,26,.28); }
.bon-plan__flow b{
  flex: 0 0 42px; font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900; font-size: 15px; color: #ff384c;   /* 番号はサイトの赤 */
}
.bon-plan__flow span{ display: block; font-size: 15px; font-weight: 700; }
.bon-plan__flow em{ display: block; font-style: normal; font-size: 13px; font-weight: 400; color: rgba(23,23,26,.72); }

/* ---- 3. 作品のキャプションと業種フィルタ ---- */
.bon-filter{
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  max-width: 940px; margin: 0 auto 26px; padding: 0 16px;
}
.bon-filter button{
  font-family: "Hiragino Kaku Gothic ProN", system-ui, sans-serif; font-size: 13px;
  background: #fff; color: #17171a; border: 2px solid #17171a; border-radius: 999px;
  padding: 7px 16px; cursor: pointer; line-height: 1;
}
.bon-filter button[aria-pressed="true"]{ background: #17171a; color: #fff; }
.bon-caption{
  display: block; margin-top: 7px; font-size: 12px; line-height: 1.6;
  color: #17171a; text-align: center;
  font-family: "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
}
.bon-caption b{ display: block; font-weight: 700; }
.bon-caption span{ color: #6b6b70; }
.modula-item.bon-hidden{ display: none !important; }

/* ---- 12. 実績の数字 ---- */
/* 背景は指定された黄。前後がピンク(PROFILE)と青(WORKS)なので、明るい黄を挟むと帯が立つ。
   文字は黄の上で読める色に選び直した。指定画像そのままの配色だと
   2つ目の数字が黄地に黄で消え、ラベルも白でほぼ読めなかったため */
.bon-stats{ background:#ffe14f; color:#17171a; padding:44px 20px; }
/* 3つを必ず1行に並べる。gapを固定56pxにしていたらiPhone(375px)で3つ目が折り返した。
   画面幅に応じて隙間と文字を詰めることで、狭い端末でも1行に収める */
.bon-stats ul{ display:flex; flex-wrap:nowrap; justify-content:center; gap:0 clamp(16px,6vw,56px); max-width:900px; margin:0 auto; padding:0; list-style:none; }
.bon-stats li{ text-align:center; min-width:0; }
.bon-stats b{ display:block; font-family:"Montserrat","Helvetica Neue",Arial,sans-serif; font-weight:900; font-size:clamp(34px,6vw,56px); line-height:1; }
/* 数字はサイトで使っている色から1つずつ。黄の上で沈まない濃い色だけを選ぶ。
   黄緑(#37ff7c)と水色(#4fe1ff)は黄地では明るすぎて読めないので外した */
.bon-stats li:nth-child(1) b{ color:#526afe; }   /* 青（WORKSの色） */
.bon-stats li:nth-child(2) b{ color:#ff384c; }   /* 赤（もとのWORKSの色） */
.bon-stats li:nth-child(3) b{ color:#6f59ff; }   /* 青紫（SHOPの色） */
.bon-stats span{ display:block; margin-top:6px; font-size:clamp(10px,2.7vw,12px); letter-spacing:clamp(.04em,1vw,.16em); opacity:.72; white-space:nowrap; }

/* ---- 11. よくある質問 ---- */
.bon-faq{ background:#4fe1ff; color:#17171a; padding:80px 20px 90px;
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans",system-ui,sans-serif; line-height:1.95; letter-spacing:.03em; }
.bon-faq__inner{ max-width:820px; margin-inline:auto; }
.bon-faq__ja{ margin:0; font-size:12px; letter-spacing:.3em; color:rgba(23,23,26,.62); text-align:center; }
.bon-faq__en{ color:#17171a; margin:6px 0 40px; text-align:center; line-height:1;
  font-family:"Montserrat","Helvetica Neue",Arial,sans-serif; font-weight:900; font-size:clamp(32px,6vw,58px); letter-spacing:-.02em; }
.bon-faq__item{ border-bottom:1px solid rgba(23,23,26,.28); }
.bon-faq__item summary{ color:#17171a; cursor:pointer; padding:16px 30px 16px 2px; font-size:15px; font-weight:700; position:relative; list-style:none; }
.bon-faq__item summary::-webkit-details-marker{ display:none; }
.bon-faq__item summary::after{ content:"＋"; position:absolute; right:4px; top:16px; color:#ff384c; font-weight:700; }
.bon-faq__item[open] summary::after{ content:"−"; }
.bon-faq__item p{ margin:0; padding:0 2px 18px; font-size:14px; color:rgba(23,23,26,.78); }
.bon-faq__note{ margin:24px 0 0; font-size:13px; color:rgba(23,23,26,.72); text-align:center; }


/* ---- 23. スマホのヒーロー ----
   元サイトはPC用(2880x1700・横長)とスマホ用(959x1707・縦長)で別の絵を持っていて、
   スマホ用は cover で敷いている。いま渡されているイラストは横長1枚だけなので、
   cover のままだと左右を7割方切り落として人物が画面から外れる。
   contain にして絵を全部見せ、余る上側は絵の地色(#ffeb3b)で埋めて壁が続いて見えるようにする。
   縦長の絵をもらえたら、この上書きごと外して元の cover に戻す */
@media (max-width: 767px){
  .elementor-4745 .elementor-element.elementor-element-8e2a9a8:not(.elementor-motion-effects-element-type-background){
    background-size: contain; background-position: bottom center; background-color: #ffeb3b;
  }
  /* 100vh のままだと絵(幅いっぱいで高さ約230px)に対して地色が広すぎるので詰める */
  .elementor-4745 .elementor-element.elementor-element-8e2a9a8 > .elementor-container{ min-height: 52vh; }
}