/* ============================================================
   Rafale Holdings ― BUSINESS 06 / WEB PRODUCTION
   ------------------------------------------------------------
   このファイルは css/style.css の「後ろ」に読み込まれる追加分です。
   色・書体・余白・罫線・ボタン・ヘッダー・フッター・R の描画は
   すべて style.css のものをそのまま使い、ここでは
     ・このページだけのレイアウト（HEROの2カラム、料金、実績 など）
     ・R の「置き場所と大きさ」
   だけを足しています。style.css は書き換えていません。
   ============================================================ */

/* ------------------------------------------------------------
   ページ全体の地
   TOPは js が各セクションの位置を測って区切りを入れているが、
   このページには BRANDS（黒）が無いので、明るいまま静かに沈む
   1枚のグラデーションを固定で持たせる。
   ------------------------------------------------------------ */
.bd-page .page-tone {
  /* セクションが増えたので区切り位置だけを引き直している。
     使っている色は元のまま（暖白 → 淡い青 → 暖白へ戻って静かに沈む）。 */
  /* 下の1枚は、このグラデーションをそのままブラウザに描かせて焼いた画像です。
     スクロール中に毎回グラデーションを計算し直すのがいちばん重かったため
     （iPhone想定の計測で描画時間の約1/3がここでした）、絵に置き換えています。
     作り直すときは、この元データを 72x72 で描いて撮り直してください:
     linear-gradient(180deg, #F5F1EB 0%, #F2F1EE 9%, #EDF1F6 22%, #E9EEF3 36%, #ECEFF3 48%, #EDF0F3 60%, #F1F0EC 74%, #EFF1F3 86%, #ECEFF3 94%, #E7EAEE 100%) */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAQACAIAAABEUx9rAAAAAXNSR0IArs4c6QAAAvZJREFUWIXNWEES3DAIE/n/T3vqoWd60CYGDDbZNG1PGY12skZAjJBfP38AOAAAOJQP4QMAIHwoOSFnkRIJ5BAIOU05IhXIASIQCUQBcggcyAHKI8nnZPwlUu5ORBfXi8/E0I9vxPByfEkM4DkxztmNL8lRP74EfZ+j+dS+znxWbC1dCGKV8CfzWoMRgfHBR8uTCQICzwKeLEbruSRjc4681vYsSR7uaJ08Hmnt48u0bqj7UOtb/bDr6bqW6nqp4zPqXijouYuvVS8joniWXt+6elkhp7XynJKd03MFUiJJkeqhqiISOJDD4MYvPTcQhHlQ1tmC+wpVOSoylqiUdI7XJeNADhXySpADOZQqXZxBSiQ+9oxTchNSItlzJ5p6rP6iDOSViNwZ+45zyNSu12XiTiUi8pXsNbOx+19WurDq1FRyC7WugkcPn5UVF5Awt5rlduJMFZCDZj3muR4CEfbcLSSCAwJVHNAlJ+R0cEJO99wtBCKkCERocWdE5EAOLe6Mfc+xpy0S+XwHt9yJwvcz53x8Ky678SwXb8qa+3P95yrkW+6NtzxB/Q74K53zBgpV9wL3L1C/A97pnN5M62dhg1YOxfsxO3tPU17mRU+EMOtHV1B7BLtjQe40yts3KFE49tZuZr0PqXYQ2zl51qX2R6VTPJWIfszrYrjE4xX7gjybCxe51GWnROiHxZ5hU9crXXZ1XUzinbqO+4JYu5VHb9S102XSrNhrXNzUY5nztrNi3HIs50++U7NtKDnO81og6imsOnNzjVk43Go7j0CPx38ISPgPqpxNpTW3CjmdudJFWkTvJB/vNP495645Mp9bhUgrxEwr8zD5Me/D/T3tZ8WTE3JKbkaseWX/EYFo3mTc9LBu3vUbM8YH8R3uueRrOvnir27mCiXT9ohhzPphWvOOqOWdSge283/+u7vq6c0OwnuLyr0A1hHlXKfmJ+S+DEuu/IY4NPnwavJvPmyPuc2e2d7tdxflJvHBO98453/9zoF+A7mfw+mCKRFxAAAAAElFTkSuQmCC);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* ------------------------------------------------------------
   セクションの光
   TOP と同じ ::before の層に、同じ動き（style.css のキーフレーム）を
   割り当てているだけ。新しい種類の光は足していない。
   ------------------------------------------------------------ */
#services::before {
  /* 下の1枚は、このグラデーションをそのままブラウザに描かせて焼いた画像です。
     スクロール中に毎回グラデーションを計算し直すのがいちばん重かったため
     （iPhone想定の計測で描画時間の約1/3がここでした）、絵に置き換えています。
     作り直すときは、この元データを 72x72 で描いて撮り直してください:
     radial-gradient(52% 40% at 76% 24%, rgba(228, 236, 244, 0.62), rgba(228,236,244,0) 74%), radial-gradient(44% 34% at 18% 70%, rgba(248, 245, 239, 0.58), rgba(248,245,239,0) 76%) */
  background-image: url(data:image/webp;base64,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);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  animation: lightBiz 26s ease-in-out infinite;
}
#works::before {
  /* 下の1枚は、このグラデーションをそのままブラウザに描かせて焼いた画像です。
     スクロール中に毎回グラデーションを計算し直すのがいちばん重かったため
     （iPhone想定の計測で描画時間の約1/3がここでした）、絵に置き換えています。
     作り直すときは、この元データを 72x72 で描いて撮り直してください:
     radial-gradient(58% 44% at 22% 24%, rgba(220, 234, 242, 0.7), rgba(220,234,242,0) 72%), radial-gradient(46% 36% at 82% 76%, rgba(240, 245, 249, 0.8), rgba(240,245,249,0) 74%) */
  background-image: url(data:image/webp;base64,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);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  animation: lightPhil 21s ease-in-out infinite;
}
#plan::before {
  /* 下の1枚は、このグラデーションをそのままブラウザに描かせて焼いた画像です。
     スクロール中に毎回グラデーションを計算し直すのがいちばん重かったため
     （iPhone想定の計測で描画時間の約1/3がここでした）、絵に置き換えています。
     作り直すときは、この元データを 72x72 で描いて撮り直してください:
     radial-gradient(50% 38% at 18% 18%, rgba(250, 246, 240, 0.66), rgba(250,246,240,0) 74%), radial-gradient(46% 36% at 84% 58%, rgba(226, 238, 246, 0.46), rgba(226,238,246,0) 76%) */
  background-image: url(data:image/webp;base64,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);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  animation: lightComp 24s ease-in-out infinite;
}
/* OPTION・制作期間・3 DAYS も、既にあるものと同じ光をそのまま割り当てる。
   新しい種類の光は作らない（セクションが増えても空気は変えない）。 */
#option::before {
  /* 下の1枚は、このグラデーションをそのままブラウザに描かせて焼いた画像です。
     スクロール中に毎回グラデーションを計算し直すのがいちばん重かったため
     （iPhone想定の計測で描画時間の約1/3がここでした）、絵に置き換えています。
     作り直すときは、この元データを 72x72 で描いて撮り直してください:
     radial-gradient(48% 36% at 80% 22%, rgba(240, 245, 249, 0.6), rgba(240,245,249,0) 74%), radial-gradient(42% 34% at 14% 74%, rgba(250, 247, 242, 0.5), rgba(250,247,242,0) 78%) */
  background-image: url(data:image/webp;base64,UklGRnQHAABXRUJQVlA4WAoAAAAwAAAARwAARwAASUNDUMgBAAAAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADZBTFBIqQMAAAVnoKhtG6jlj7ivawMREQk+2bZBSdv/to0DejN9RqAuMAL8ZJ0IdHo3mN4jMGVVyWwxKypdO0DpWYlgDhADTNsa4AUS6lIU6Gf+vkFE/x24jaRIHsaD6VcgWHooY4SkeCbrWjfGwDzIT9kyulIrsBnnWbZcLqaMsSDvcM5PKSWR1sY40NxqxXnG6DwdxZXWgVqR55wzRhazK0o31jrIeilWec4ztsQJUtq0zgO8VQohVpwzmiZovbXWdQDvFsUkZyxNpGpa1wWAohJFGfcwksjdmfUjwOmyqMpSiDzPaCIb430IgJWiOuR4gNMjaWwIob+/j6qqqKqyLMUqO9qYLvQDwCdFVVVVWZWFyNNfz8Mw7AeAKqa4vSjoH/8P/X6/v79PD6bdqnrhv0MPrphOPnw+7Pf9CDK4kItC0F1c6QE+rqYHi0Jkc3Xuh2EEuaisLrweS2vjQ4Bc9Gz8iEnJGK4b24He7u5ktojBRPBmZ1wXBkAsxV6MAE7nWGpjvYfE2zvFGEkx3DJKErk2xnmPAAuizEXOOVsuYtyeWdchQBJCrDjPGEkTqXZN6xzE27ngnDNKcSJrvbUWZJbnsaUkWm9NO4Kk5/gJZ2yZ4kRulDbWIlDipxljJJJaN6aNAO93yo7pnCQJqte6MQYBc0YpWURK6wNoXi4XKUaoVkqbqwicSDpRaz35GkmCrlyBdPDE9ItinKC6VuMvuUQ6JvG3yHrd6Et4YJ7iBF2J/0kD9zBZTAbxv91eQprOpFS6aay9Bh4cYia+0a4xZow+qBNK0vjWTWNa576EDijFWG5Uc2accx4opzRWetJ23XUgRkmClG7a1rsutEAZJVjWjbHOex/8FSA2P0KqsbbzPoQAu5jzjGKpjHVdF0IYbsDk2XEqtXGHXvQDyLt5ztJ7WzdZ7UPfwYgVJ9L4LvRhCP0QQN4RQrCNi7PDEOdB3i5Kkf8a7+37IXZAV71VFEX576F3ocB8LgqR/eaHcJibdEDeEyKnG+vDuHt6CDT9fp5nc9m40PUh5j9BPuAnx0Q29vB2cXL4HeRDntFU7s5s5ycP/DXIK5xRjHQTwy1O3oA5ZSS5pxrTehd8CFdBXmUsxbLWpnUx4sYwASIkQUoZ486d776CeYKRNEG1njTeXwVaEoyl1NoY51yLYJ5cprFS2hhr3TUoQnCC6lpvjbXfI7A0nUmp1NYYe+USppXemnEODh8l6IpSejsWuEWKZ1LWaz1+FtyVGY6DTY0ukRAAVlA4INQBAADwCwCdASpIAEgAPm0wk0akIyGhLhXYkIANiWkO6r23HAATOmuhmUHdb91PQK/pHVg9AD9JSoBDQnVMxDk7TkpKjF5itg21dr9X5HvIl4qxIEu+glZvHoholOrYrZjp38AG4jf38lZewAD+/Fzef/gWsp4fYi4OvX4vy8lpISwVXRyi3BrvczzOfKY/YscrMbMKTVmEDES0WNLT0ckBfGvI4DAnghew9ZOtslNA03nVQdd/oac03/FEMCzkwkn/qXZok8YWBUCInMRnsz2hFnjN9Txxxc/PkrmDeV57J4EoSp0gVThXEwWhmFUTWhGNPZ3/EAVG7sZMlF0Y1DwyuNyZCcX/F3WZaAtX9z/QLNrzE+HgODq0iAPSSjmNwikLpLgcLHyYLPykmmjIYHpTWWczFJ/0aun/96SlEXoAoMGxU2rQSL2hQ4HZFIQZQiBAD0rB6JODDjNdLVqBhykcRG4YgbnJnlm6wS11WDNw+eMBZEK5ZrNyCdCV9/ri2vAAEpYZ//4kx+62vQaJZJ8jeDvF0TAlBAywUzYJNAhMdjDMbJWsms3QeGuDDnOFqCUIHuh7273a6+OMXsZ1g2WZcn9XQQ5/wIr4/bK2MHv6lU/+iOAAAAA=);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  animation: lightBiz 25s ease-in-out infinite;
}
#delivery::before {
  /* 下の1枚は、このグラデーションをそのままブラウザに描かせて焼いた画像です。
     スクロール中に毎回グラデーションを計算し直すのがいちばん重かったため
     （iPhone想定の計測で描画時間の約1/3がここでした）、絵に置き換えています。
     作り直すときは、この元データを 72x72 で描いて撮り直してください:
     radial-gradient(50% 38% at 22% 24%, rgba(230, 240, 247, 0.6), rgba(230,240,247,0) 74%), radial-gradient(44% 34% at 82% 68%, rgba(250, 247, 242, 0.48), rgba(250,247,242,0) 78%) */
  background-image: url(data:image/webp;base64,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);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  animation: lightPhil 22s ease-in-out infinite;
}
#sprint::before {
  /* 下の1枚は、このグラデーションをそのままブラウザに描かせて焼いた画像です。
     スクロール中に毎回グラデーションを計算し直すのがいちばん重かったため
     （iPhone想定の計測で描画時間の約1/3がここでした）、絵に置き換えています。
     作り直すときは、この元データを 72x72 で描いて撮り直してください:
     radial-gradient(48% 40% at 58% 38%, rgba(252, 246, 236, 0.56), rgba(252,246,236,0) 74%) */
  background-image: url(data:image/webp;base64,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);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  animation: lightMsg 20s ease-in-out infinite;
}
#maintenance::before {
  /* 下の1枚は、このグラデーションをそのままブラウザに描かせて焼いた画像です。
     スクロール中に毎回グラデーションを計算し直すのがいちばん重かったため
     （iPhone想定の計測で描画時間の約1/3がここでした）、絵に置き換えています。
     作り直すときは、この元データを 72x72 で描いて撮り直してください:
     radial-gradient(46% 40% at 60% 40%, rgba(252, 246, 236, 0.5), rgba(252,246,236,0) 74%) */
  background-image: url(data:image/webp;base64,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);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  animation: lightMsg 19s ease-in-out infinite;
}
#cta::before {
  /* 下の1枚は、このグラデーションをそのままブラウザに描かせて焼いた画像です。
     スクロール中に毎回グラデーションを計算し直すのがいちばん重かったため
     （iPhone想定の計測で描画時間の約1/3がここでした）、絵に置き換えています。
     作り直すときは、この元データを 72x72 で描いて撮り直してください:
     radial-gradient(46% 36% at 26% 30%, rgba(238, 244, 249, 0.6), rgba(238,244,249,0) 76%) */
  background-image: url(data:image/webp;base64,UklGRqoFAABXRUJQVlA4WAoAAAAwAAAARwAARwAASUNDUMgBAAAAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADZBTFBIZwIAAAV3oKhtG6jlT7i/awMREQl++UGSAIBNpARP0yzJfsAJfsAJnroSTnok2Ltgu3tm1pa1H8l6bmT0AUt4gQk/AH/gI2aDBsvRQ0T/HbhtG0nKMc3RdmY3rwD/mByAnjfi/Lc4iOfQA/k7LibDObzACHkg54XY3h5swQJjCMGIC1HK98M4FRLiY5veKsqyql4O2kHDgPi4F4hSSqWGbAgppRYI8kKUslJKDyCKKA19H0Ew2rKx0no2AEapDT2PF2W5Ulpr4yZm8Tq0jcu8F9fGmKkTxuKYhgRD8K6QVVXXxrRfBjgWRUGAEeBCrmptjGmakYvbLI2jiPjIK4TdY5q2badOl6SMUUrQkstKGdOarm1eu7iVJAljNMCgkKpuTdN0TffVGaRZmrKIYk9U2rRt03Vt17hdlqUJi8jyc9964uJmlllNgk1pbEePHyMnfWGbet3Rl+9dN3ZwI7vb49GH3rk/LZzYmk09Nt2u9Frd7l7WK7Ajmzu/6B5EmqUsOuSV2ljtlVwt9+0pSUT95edK7/5zlt3/xUXa/383PLFjR6C3qXbxIGUJiwOCQVGqn9U5J5cSO5ShjwAvq29a20lpZi4eWqNkAZfvhKy0thPXjN3EEQ0I3uNxsb1SdW1Ms664uMxiSgnBEPBiu6pUbYyZOTnLKA2CBYIgF0JWShltRk7ORXEYEIy9ZV4IKZXS+hVwE9OQEIwg4FxI+9AjN0dpEBB/A0EwKoSQq5WeggFyOgh9H88PgJwLG0owSM4Q30fIAzkvylJWYKAsfH8OIRhxIcr1erDMMUIHrBMCrOU3FtAGfH3R/zcCAABWUDggTAEAAPAIAJ0BKkgASAA+bTCTRqQjIaEuF0kggA2JaQ2wBabfDBXgh6zulPQPIAC90h2/Zl9yHROZycwGZgzwFlGg3fQ6fmmuh1S/zAadMhhr6cSAAP78eddF3B9ERIa5XAgOofTEhV1slvfohVYGMCqog1ZRbof8ljAdWum1F+CGgB2vTun1CCEMkWv5/z2qAkzQQr4fUXm9axHysMA36CYdPzr3RVuTe16//+PO//fh///w6rCy2jCeEdbGOMA7AtOcWe9XNQv3/a2us/7lGABRDRU3rFYmqPv9R7AjYZ2WmlNKSlgPiWU5qAyWl95hfJLHJlpUeeEGqi2s+zHKc7Dg57V9dDJsbzNz//1gxzEpwtIKBx7CwRweQaYWTw5d6/dX7dm0iF6t5jb38VGi0iTRlLGNJL/3260Gxl5K9JP/ZUXcUqQWO//efgAAAAAA);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  animation: lightComp 24s ease-in-out infinite;
}
#process::before {
  /* 下の1枚は、このグラデーションをそのままブラウザに描かせて焼いた画像です。
     スクロール中に毎回グラデーションを計算し直すのがいちばん重かったため
     （iPhone想定の計測で描画時間の約1/3がここでした）、絵に置き換えています。
     作り直すときは、この元データを 72x72 で描いて撮り直してください:
     radial-gradient(52% 38% at 74% 26%, rgba(228, 236, 244, 0.56), rgba(228,236,244,0) 74%), radial-gradient(42% 32% at 16% 72%, rgba(250, 247, 242, 0.54), rgba(250,247,242,0) 76%) */
  background-image: url(data:image/webp;base64,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);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  animation: lightBiz 23s ease-in-out infinite;
}
#faq::before {
  /* 下の1枚は、このグラデーションをそのままブラウザに描かせて焼いた画像です。
     スクロール中に毎回グラデーションを計算し直すのがいちばん重かったため
     （iPhone想定の計測で描画時間の約1/3がここでした）、絵に置き換えています。
     作り直すときは、この元データを 72x72 で描いて撮り直してください:
     radial-gradient(46% 36% at 24% 22%, rgba(238, 244, 249, 0.66), rgba(238,244,249,0) 74%), radial-gradient(40% 32% at 80% 70%, rgba(250, 247, 242, 0.5), rgba(250,247,242,0) 78%) */
  background-image: url(data:image/webp;base64,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);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  animation: lightComp 27s ease-in-out infinite;
}

/* ============================================================
   HERO
   左に言葉、右に TOP と同じ Signature R。
   R そのもの（SVG・線の太さ・色・描き順・光）は style.css の
   .r-ink / .r-glow / .r-sheen をそのまま使っており、
   ここで変えているのは置き場所と大きさだけ。
   ============================================================ */
.hero.bd-hero {
  min-height: auto;
  padding: clamp(140px, 18vh, 200px) 0 clamp(96px, 13vh, 148px);
  align-items: center;
}

.bd-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(230px, 29vw, 390px);
  gap: clamp(28px, 4.5vw, 76px);
  align-items: center;
}
.bd-hero .hero-main { max-width: none; }

/* ---- 06 / BUSINESS ---- */
.bd-eyebrow {
  display: flex; align-items: center; gap: clamp(12px, 1.4vw, 18px);
  font-family: var(--font-en); font-weight: 400;
  font-size: 0.78rem; letter-spacing: 0.3em; color: var(--label);
  opacity: 0;
  animation: fadeUp 0.9s var(--ease-out) 0.55s forwards;
}
.bd-eyebrow-num { color: #8A6A3C; letter-spacing: 0.16em; }
.bd-eyebrow-rule { display: block; width: clamp(22px, 4vw, 44px); height: 1px; background: rgba(170, 138, 86, 0.4); }
.bd-eyebrow-link {
  border-bottom: 1px solid transparent;
  transition: color 0.5s var(--ease), border-color 0.5s var(--ease);
}
.bd-eyebrow-link:hover { color: var(--ink); border-bottom-color: rgba(30, 50, 70, 0.24); }

/* ---- WEB PRODUCTION ----
   TOPの英語コピー（サイン書体）とは役割が違うので、書体はサイト共通の
   Inter を細いウェイトで大きく組む。出方は TOP の3行と同じ lineRise。 */
.bd-hero-title {
  margin-top: clamp(24px, 3.4vh, 40px);
  font-family: var(--font-en); font-weight: 200;
  font-size: clamp(2.7rem, 6.4vw, 5.4rem);
  line-height: 1.06; letter-spacing: 0.015em; color: var(--ink);
}
.bd-title-line { display: block; }
.bd-title-in {
  display: block;
  opacity: 0; filter: blur(10px); transform: translateY(26px);
  animation: lineRise 0.9s var(--ease-out) forwards;
  will-change: opacity, transform, filter;
}
.bd-title-line:nth-child(1) .bd-title-in { animation-delay: 2.00s; }
.bd-title-line:nth-child(2) .bd-title-in { animation-delay: 2.28s; }

.bd-hero-sub {
  margin-top: clamp(18px, 2.6vh, 28px);
  font-family: var(--font-jp-title); font-weight: 500;
  font-feature-settings: "palt" 1;
  font-size: clamp(1.04rem, 2.1vw, 1.4rem);
  line-height: 1.8; letter-spacing: 0.1em; color: var(--ink-2);
  opacity: 0;
  animation: fadeUp 0.9s var(--ease-out) 2.62s forwards;
}

.bd-hero-desc {
  margin-top: clamp(18px, 2.4vh, 28px);
  max-width: 34em;
  font-size: clamp(0.95rem, 1.6vw, 1.02rem);
  line-height: 2.25; color: var(--sub);
  opacity: 0;
  animation: fadeUp 0.9s var(--ease-out) 2.86s forwards;
}

/* CTA は TOP と同じ .hero-cta（枠だけの導線）。幅だけ文字数に合わせる */
.bd-hero-cta { min-width: 210px; }

/* ---- R の置き場所と大きさ ----
   TOP では画面右に絶対配置しているが、このページでは右カラムの中に置く。
   線の太さ・色・描画のタイミングは一切変えていない。 */
.bd-hero .hero-sign {
  position: relative; right: auto; top: auto; left: auto;
  width: 100%; height: auto; aspect-ratio: 540 / 730;
  margin: 0 0 0 auto;
  transform: translate3d(calc(var(--mx) * -4px), calc(var(--my) * -3px), 0);
  animation: wpSignSettle 3s cubic-bezier(0.18, 0.66, 0.3, 1) 1.8s forwards;
}
/* 書き始めは少し左、描き進むにつれて定位置へ（TOP の signSettle と同じ性格） */
@keyframes wpSignSettle {
  from { transform: translate3d(calc(var(--mx) * -4px - 6vw), calc(var(--my) * -3px), 0); }
  to   { transform: translate3d(calc(var(--mx) * -4px), calc(var(--my) * -3px), 0); }
}

/* ============================================================
   SERVICES
   組み方は TOP の BUSINESS と同じ（.biz-list / .biz-row）。
   ここでは何も足していない ― 統一感のため、あえて素のまま使う。
   ============================================================ */

/* ============================================================
   SELECTED WORKS
   文章より実物を見せる場所。PC とスマートフォンの枠だけ用意してあり、
   img/works/ に画像を置くとそのまま画面の中に入る（HTMLの修正は不要）。
   ============================================================ */
.bd-works { display: grid; gap: clamp(64px, 9vh, 124px); }

.bd-work {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: clamp(28px, 4.4vw, 68px);
  align-items: center;
}
/* 2件目は左右を入れ替えて、同じ並びが続かないようにする */
.bd-work:nth-child(even) .bd-work-visual { order: 2; }

.bd-work-visual { padding-bottom: clamp(16px, 2.6vw, 32px); }

/* ---- 画面の枠 ---- */
.bd-mock { position: relative; }

.bd-mock-pc {
  position: relative;
  border: 1px solid rgba(30, 50, 70, 0.12);
  border-radius: 7px; overflow: hidden;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 34px 60px -48px rgba(30, 50, 70, 0.55);
}
/* ブラウザの上端。線と面だけで作り、アイコンは使わない */
.bd-mock-pc::before {
  content: ""; display: block; height: clamp(18px, 2.4vw, 26px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(246, 249, 251, 0.88));
  border-bottom: 1px solid rgba(30, 50, 70, 0.07);
}
.bd-mock-pc::after {
  content: ""; position: absolute; left: 12px;
  top: calc(clamp(18px, 2.4vw, 26px) / 2 - 3px);
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(30, 50, 70, 0.14);
  box-shadow: 11px 0 0 rgba(30, 50, 70, 0.10), 22px 0 0 rgba(30, 50, 70, 0.07);
}
.bd-mock-pc .bd-mock-screen { width: 100%; aspect-ratio: 16 / 10; }

/* スマホの枠は、PC画面の右端から半分ほどはみ出す位置に置く。
   ここを内側に寄せると、RAFALEのR／SAKURAのロゴという
   いちばん見せたい部分が隠れてしまう。 */
.bd-mock-sp {
  position: absolute; right: -6%; bottom: -7%;
  width: 19%; min-width: 62px;
  padding: 5px;
  border: 1px solid rgba(30, 50, 70, 0.13);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 26px 44px -34px rgba(30, 50, 70, 0.6);
}
.bd-mock-sp .bd-mock-screen { width: 100%; aspect-ratio: 9 / 19; border-radius: 9px; }

/* 枠の中身。画像は <img> で入れている（背景画像ではない）。
   こうすると loading="lazy" と decoding="async" が効くので、
   実績まで下りてくるまで読み込まれず、読み込み後の展開も
   スクロールを止めない。画像が入るまでの下地は、光を受けた
   ガラス面のように見せる（見た目は従来と同じ）。 */
.bd-mock-screen {
  display: block; overflow: hidden;
  background: linear-gradient(155deg, #FCFDFE 0%, #F0F4F7 46%, #E3EAF0 100%);
}
.bd-mock-screen > img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
}

/* ---- 実績のテキスト ---- */
.bd-work-num {
  display: block; margin-bottom: clamp(12px, 1.6vh, 16px);
  font-family: var(--font-en); font-weight: 400;
  font-size: clamp(0.94rem, 1.5vw, 1.12rem);
  letter-spacing: 0.1em; color: var(--label); opacity: 0.72;
}
.bd-work-name {
  font-family: var(--font-en); font-weight: 300;
  font-size: clamp(1.24rem, 2.4vw, 1.78rem);
  line-height: 1.45; letter-spacing: 0.1em; color: var(--ink);
}
.bd-work-type {
  margin-top: clamp(8px, 1vh, 11px);
  font-family: var(--font-en); font-weight: 300;
  font-size: 0.8rem; letter-spacing: 0.16em; color: #7B8794;
}
.bd-tags {
  display: flex; flex-wrap: wrap; align-items: center;
  margin-top: clamp(18px, 2.4vh, 26px);
  font-size: 0.76rem; letter-spacing: 0.1em; line-height: 2.1; color: var(--label);
}
/* 区切りは前の語の後ろに付ける。行が折り返しても、
   次の行が「/」から始まらない。 */
.bd-tags li:not(:last-child)::after {
  content: "/"; margin: 0 9px; color: rgba(30, 50, 70, 0.22);
}
.bd-work-desc {
  margin-top: clamp(16px, 2.2vh, 24px); max-width: 34em;
  font-size: clamp(0.94rem, 1.6vw, 1rem); line-height: 2.15; color: var(--sub);
}
.bd-work-link {
  display: inline-flex; align-items: center; gap: 11px;
  margin-top: clamp(24px, 3.2vh, 34px);
  padding: 13px 30px; border-radius: 2px;
  border: 1px solid rgba(30, 50, 70, 0.16);
  background: rgba(255, 255, 255, 0.34);
  color: var(--ink-2);
  font-family: var(--font-en); font-weight: 400;
  font-size: 0.78rem; letter-spacing: 0.16em;
  transition: background 0.7s var(--ease), border-color 0.7s var(--ease),
              color 0.6s var(--ease), gap 0.6s var(--ease);
}
.bd-work-link svg { transition: transform 0.6s var(--ease); }
.bd-work-link:hover {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(170, 138, 86, 0.42);
  color: var(--ink); gap: 15px;
}

/* ============================================================
   PLAN ― STANDARD を中央・主軸に見せる（バッジは付けない）
   ============================================================ */
.bd-plans {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  align-items: stretch;
}
.bd-plan {
  display: flex; flex-direction: column;
  padding: clamp(30px, 3.6vh, 44px) clamp(22px, 2.3vw, 34px);
  border: 1px solid rgba(30, 50, 70, 0.09); border-radius: 3px;
  background: linear-gradient(158deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.38));
}
/* 中央だけ、面をわずかに白く・枠をシャンパンゴールドにし、上下へ少し伸ばす */
.bd-plan--main {
  margin: -14px 0;
  border-color: rgba(170, 138, 86, 0.34);
  background: linear-gradient(158deg, rgba(255, 255, 255, 0.95), rgba(250, 247, 241, 0.6));
  box-shadow: 0 34px 62px -50px rgba(30, 50, 70, 0.5);
}

.bd-plan-name {
  font-family: var(--font-en); font-weight: 300;
  font-size: 0.86rem; letter-spacing: 0.28em; color: var(--label);
}
.bd-plan--main .bd-plan-name { color: #8A6A3C; }

.bd-plan-price {
  display: flex; align-items: baseline; gap: 4px;
  margin-top: clamp(14px, 1.8vh, 20px);
  font-family: var(--font-en); font-weight: 200; color: var(--ink);
}
.bd-plan-price-num { font-size: clamp(1.66rem, 2.9vw, 2.24rem); letter-spacing: 0.01em; }
/* 「〜」は欧文書体だと細い波線になって浮くので、ここだけ和文書体で組む */
.bd-plan-price-unit {
  font-family: var(--font-jp); font-weight: 300;
  font-size: 0.86rem; letter-spacing: 0.08em; color: var(--label);
}

.bd-plan-for {
  margin-top: clamp(10px, 1.4vh, 14px);
  font-size: 0.86rem; line-height: 1.9; letter-spacing: 0.06em; color: var(--sub);
}

.bd-plan-items {
  margin-top: clamp(22px, 2.8vh, 30px);
  padding-top: clamp(18px, 2.4vh, 26px);
  border-top: 1px solid rgba(30, 50, 70, 0.07);
}
.bd-plan-items li {
  position: relative; padding-left: 20px;
  font-size: 0.92rem; line-height: 2.05; color: var(--ink-2);
}
.bd-plan-items li::before {
  content: ""; position: absolute; left: 0; top: 1.02em;
  width: 9px; height: 1px; background: rgba(170, 138, 86, 0.5);
}

.bd-note {
  margin-top: clamp(28px, 4vh, 44px);
  font-size: 0.86rem; line-height: 2; letter-spacing: 0.04em; color: var(--label);
}

/* ============================================================
   MAINTENANCE
   ============================================================ */
.bd-maint {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(22px, 3.4vw, 56px); align-items: center;
  max-width: 900px;
  padding: clamp(30px, 3.8vh, 46px) clamp(24px, 2.8vw, 42px);
  border: 1px solid rgba(30, 50, 70, 0.09); border-radius: 3px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.42));
}
.bd-maint-price {
  display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap;
  font-family: var(--font-en); font-weight: 200; color: var(--ink);
}
.bd-maint-items {
  margin-top: 0; padding-top: 0; border-top: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 24px;
}

/* ============================================================
   PROCESS ― 番号・英語・日本語だけ。説明文は置かない
   ============================================================ */
.bd-steps {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 22px);
}
.bd-step {
  display: flex; flex-direction: column;
  padding-top: clamp(14px, 1.8vh, 18px);
  border-top: 1px solid rgba(30, 50, 70, 0.12);
}
.bd-step-num {
  font-family: var(--font-en); font-weight: 400;
  font-size: 0.8rem; letter-spacing: 0.16em; color: #8A6A3C; opacity: 0.85;
}
.bd-step-en {
  display: block; min-height: 3.2em;
  margin-top: clamp(14px, 2vh, 22px);
  font-family: var(--font-en); font-weight: 300;
  font-size: 0.78rem; line-height: 1.6; letter-spacing: 0.1em; color: var(--ink);
}
.bd-step-jp {
  display: block; margin-top: 8px;
  font-size: 0.88rem; line-height: 1.8; letter-spacing: 0.06em; color: var(--sub);
}

/* ============================================================
   FAQ ― <details> の標準機能で開閉する（JavaScriptは使わない）
   ============================================================ */
.bd-faq { max-width: 68em; border-top: 1px solid rgba(30, 50, 70, 0.08); }
.bd-faq-item { border-bottom: 1px solid rgba(30, 50, 70, 0.08); }

.bd-faq-q {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(10px, 1.4vw, 16px); align-items: start;
  padding: clamp(20px, 2.6vh, 28px) 2px;
  cursor: pointer; list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.bd-faq-q::-webkit-details-marker { display: none; }
.bd-faq-q::marker { content: ""; }

.bd-faq-mark {
  font-family: var(--font-en); font-weight: 400;
  font-size: 0.82rem; line-height: 2.1; letter-spacing: 0.08em; color: #8A6A3C;
}
.bd-faq-q .bd-faq-text {
  font-family: var(--font-jp-title); font-weight: 500;
  font-feature-settings: "palt" 1;
  font-size: clamp(0.98rem, 1.8vw, 1.06rem);
  line-height: 1.95; letter-spacing: 0.05em; color: var(--ink);
  transition: color 0.5s var(--ease);
}
.bd-faq-item:hover .bd-faq-q .bd-faq-text { color: #46525F; }

.bd-faq-icon { position: relative; width: 13px; height: 13px; margin-top: 0.62em; }
.bd-faq-icon::before, .bd-faq-icon::after {
  content: ""; position: absolute; background: rgba(30, 50, 70, 0.4);
  transition: transform 0.5s var(--ease), opacity 0.4s var(--ease);
}
.bd-faq-icon::before { left: 0; top: 6px; width: 13px; height: 1px; }
.bd-faq-icon::after  { left: 6px; top: 0; width: 1px; height: 13px; }
.bd-faq-item[open] .bd-faq-icon::after { transform: rotate(90deg); opacity: 0; }

.bd-faq-a {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(10px, 1.4vw, 16px);
  padding: 0 2px clamp(22px, 3vh, 30px);
}
.bd-faq-a .bd-faq-text {
  font-size: clamp(0.94rem, 1.6vw, 1rem); line-height: 2.2; color: var(--sub);
}
.bd-faq-item[open] .bd-faq-a { animation: fadeUp 0.55s var(--ease-out); }

/* ============================================================
   PLAN の補助 ― プランの性格・内訳の小見出し・制作期間
   カードの枠・余白・文字は .bd-plan のまま。行を足しているだけで、
   PREMIUM だけを派手にする装飾は入れていない。
   ============================================================ */

/* PREMIUM の「ALL-IN-ONE PRODUCTION」。価格の下に一行だけ置く */
.bd-plan-tag {
  margin-top: clamp(10px, 1.4vh, 14px);
  font-family: var(--font-en); font-weight: 300;
  font-size: 0.72rem; letter-spacing: 0.22em; color: #8A6A3C;
}

/* 対応内容が多いプランだけ、内訳を小見出しで区切る。
   区切りなので、他の項目に付くゴールドの短い罫線は付けない。 */
.bd-plan-items li.bd-plan-group {
  margin-top: clamp(14px, 1.8vh, 18px); padding-left: 0;
  font-family: var(--font-en); font-weight: 400;
  font-size: 0.68rem; line-height: 2.4; letter-spacing: 0.2em;
  color: var(--label); opacity: 0.9;
}
.bd-plan-items li.bd-plan-group:first-child { margin-top: 0; }
.bd-plan-items li.bd-plan-group::before { display: none; }

/* 制作期間はカードの一番下で揃える（.bd-plan は縦のflex） */
.bd-plan-term {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-top: clamp(22px, 3vh, 30px);
  padding-top: clamp(14px, 1.8vh, 18px);
  border-top: 1px solid rgba(30, 50, 70, 0.07);
}
.bd-plan-term-label {
  font-family: var(--font-en); font-weight: 400;
  font-size: 0.68rem; letter-spacing: 0.18em; color: var(--label);
}
.bd-plan-term-value {
  font-size: 0.88rem; letter-spacing: 0.04em; color: var(--ink-2);
}
/* 項目の数がプランごとに違うので、期間の行だけを下端で揃える */
.bd-plan-items { flex: 1 0 auto; }

/* 注記が複数行になるところ（PLAN・OPTION・制作期間） */
.bd-notes { margin-top: clamp(28px, 4vh, 44px); max-width: 62em; }
.bd-notes li {
  font-size: 0.86rem; line-height: 2; letter-spacing: 0.04em; color: var(--label);
}

/* ============================================================
   汎用の囲みブロック
   MAINTENANCE で使っていた枠（.bd-maint）を、制作期間・3 DAYS でも
   そのまま使う。新しい枠は作らない。
   ============================================================ */
.bd-maint--wide { max-width: none; }
.bd-maint--stack { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); }
/* 3 DAYS だけ、枠線をシャンパンゴールドにして静かに区別する */
.bd-maint--accent {
  border-color: rgba(170, 138, 86, 0.34);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.95), rgba(250, 247, 241, 0.6));
}

.bd-block-en {
  font-family: var(--font-en); font-weight: 300;
  font-size: 0.86rem; letter-spacing: 0.28em; color: var(--label);
}
.bd-maint--accent .bd-block-en { color: #8A6A3C; }
.bd-block-jp {
  margin-top: clamp(8px, 1.2vh, 12px);
  font-size: 0.92rem; line-height: 1.9; letter-spacing: 0.06em; color: var(--sub);
}
.bd-block-price {
  display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap;
  margin-top: clamp(12px, 1.6vh, 18px);
  font-family: var(--font-en); font-weight: 200; color: var(--ink);
}
.bd-block-lead {
  margin-bottom: clamp(22px, 3vh, 32px); max-width: 46em;
  font-size: clamp(0.94rem, 1.6vw, 1rem); line-height: 2.15; color: var(--sub);
}

/* ============================================================
   OPTION ― 行で組む。カードを増やすと画面が詰まるので、
   TOP の BUSINESS と同じ「罫線で区切った行」の見せ方に寄せる。
   ============================================================ */
.bd-options { display: grid; border-top: 1px solid rgba(30, 50, 70, 0.1); }
.bd-option {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(14px, 2.4vw, 40px); align-items: baseline;
  padding: clamp(20px, 2.8vh, 30px) 2px;
  border-bottom: 1px solid rgba(30, 50, 70, 0.08);
}
.bd-option-en {
  display: block;
  font-family: var(--font-en); font-weight: 300;
  font-size: 0.74rem; letter-spacing: 0.2em; color: var(--label);
}
.bd-option-jp {
  display: block; margin-top: 9px;
  font-size: clamp(0.96rem, 1.7vw, 1.04rem);
  line-height: 1.8; letter-spacing: 0.05em; color: var(--ink);
}
.bd-option-price {
  display: flex; align-items: baseline; gap: 3px; white-space: nowrap;
  font-family: var(--font-en); font-weight: 200;
  font-size: clamp(1.02rem, 1.8vw, 1.24rem); color: var(--ink);
}
.bd-option-unit {
  font-family: var(--font-jp); font-weight: 300;
  font-size: 0.78rem; letter-spacing: 0.06em; color: var(--label);
}

/* ============================================================
   制作期間 ― プランごとの目安を一覧で置く
   ============================================================ */
.bd-terms {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 26px);
  margin-top: clamp(30px, 4vh, 44px);
}
.bd-term {
  display: flex; flex-direction: column;
  padding-top: clamp(14px, 1.8vh, 18px);
  border-top: 1px solid rgba(30, 50, 70, 0.12);
}
.bd-term--accent { border-top-color: rgba(170, 138, 86, 0.5); }
.bd-term-name {
  font-family: var(--font-en); font-weight: 400;
  font-size: 0.74rem; letter-spacing: 0.18em; color: var(--label);
}
.bd-term--accent .bd-term-name { color: #8A6A3C; }
.bd-term-value {
  margin-top: clamp(12px, 1.6vh, 16px);
  font-size: clamp(1rem, 1.8vw, 1.14rem); letter-spacing: 0.04em; color: var(--ink);
}
.bd-term-note {
  margin-top: 8px;
  font-size: 0.8rem; line-height: 1.9; color: var(--sub);
}

/* ============================================================
   公開後のサポート
   カードは料金表と同じ .bd-plan をそのまま使う。ここで足すのは
   「どんなときに使うか」の一行と、対象外の但し書きだけ。
   ============================================================ */
/* 「どんなときに使うか」の一行。区切りは下の項目リストが持っている
   罫線に任せ、ここでは線を引かない（線が二重になって間が空くため）。 */
.bd-plan-use {
  margin-top: 6px;
  font-size: 0.86rem; line-height: 1.9; letter-spacing: 0.04em; color: #8A6A3C;
}
.bd-plan-out {
  margin-top: clamp(18px, 2.4vh, 24px);
  padding-top: clamp(14px, 1.8vh, 18px);
  border-top: 1px solid rgba(30, 50, 70, 0.07);
  font-size: 0.82rem; line-height: 1.95; color: var(--label);
}

/* ============================================================
   CTA ― 価格と保守の話のあとに、静かに相談へ渡す一帯
   ============================================================ */
.bd-cta {
  display: grid; gap: clamp(18px, 2.6vh, 26px); justify-items: start;
  max-width: 900px;
  padding: clamp(34px, 4.6vh, 54px) clamp(26px, 3vw, 46px);
  border: 1px solid rgba(30, 50, 70, 0.09); border-radius: 3px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.42));
}
.bd-cta-title {
  font-family: var(--font-jp-title); font-weight: 500;
  font-feature-settings: "palt" 1;
  font-size: clamp(1.12rem, 2.2vw, 1.44rem);
  line-height: 1.8; letter-spacing: 0.06em; color: var(--ink);
}
.bd-cta-desc {
  max-width: 44em;
  font-size: clamp(0.94rem, 1.6vw, 1rem); line-height: 2.15; color: var(--sub);
}

/* 本文・注記の中から同じページの別セクションへ渡すリンク
   （見た目は store-development の .sd-inline-link と同じ） */
.bd-inline-link {
  color: #7A6136;
  border-bottom: 1px solid rgba(170, 138, 86, 0.32);
  transition: color 0.6s var(--ease), border-color 0.6s var(--ease);
}
.bd-inline-link:hover { color: #6B5430; border-bottom-color: rgba(170, 138, 86, 0.6); }

/* ============================================================
   SELECTED WORKS ― 実績を CLIENT / CATEGORY / SCOPE で整理する
   タグの並びを置き換えたもの。行の高さ・文字サイズは元のタグと同じ。
   ============================================================ */
.bd-work-meta {
  display: grid; gap: 9px;
  margin-top: clamp(18px, 2.4vh, 26px);
  padding-top: clamp(16px, 2.2vh, 22px);
  border-top: 1px solid rgba(30, 50, 70, 0.08);
}
.bd-work-meta > div {
  display: grid; grid-template-columns: 5.6em minmax(0, 1fr); gap: clamp(10px, 1.4vw, 18px);
}
.bd-work-meta dt {
  font-family: var(--font-en); font-weight: 400;
  font-size: 0.68rem; line-height: 2.3; letter-spacing: 0.16em; color: var(--label);
}
.bd-work-meta dd {
  font-size: 0.84rem; line-height: 2.05; letter-spacing: 0.04em; color: var(--ink-2);
}
.bd-work-scope { font-family: var(--font-en); font-weight: 300; letter-spacing: 0.07em; }

/* 目的・制作内容 ― 確認できる事実だけを短く置く */
.bd-work-facts { display: grid; gap: clamp(10px, 1.4vh, 14px); margin-top: clamp(16px, 2.2vh, 24px); }
.bd-work-fact { max-width: 34em; font-size: 0.92rem; line-height: 2.1; color: var(--sub); }
.bd-work-fact b {
  display: block; margin-bottom: 2px;
  font-family: var(--font-jp); font-weight: 500;
  font-size: 0.8rem; letter-spacing: 0.08em; color: var(--ink-2);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .bd-hero-grid { grid-template-columns: minmax(0, 1fr) clamp(200px, 27vw, 300px); }
  .bd-work { grid-template-columns: 1fr; gap: clamp(26px, 4vh, 40px); }
  .bd-work:nth-child(even) .bd-work-visual { order: 0; }
  .bd-work-visual { padding-bottom: clamp(26px, 5vw, 44px); }
  .bd-maint { grid-template-columns: 1fr; gap: clamp(20px, 3vh, 30px); }
  .bd-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 26px) clamp(14px, 2vw, 22px); }
  .bd-terms { gap: clamp(16px, 2.6vw, 26px); }
}

@media (max-width: 768px) {
  /* ---- 縦の余白（スマホのみ）----
     PC の余白（clamp(120px, 17vh, 220px)）のままだと、iPhone では
     セクションの切れ目ごとに1画面近く空いて、間延びして見える。
     文字サイズ・罫線・カードの中身はそのままに、
     セクション間と見出し まわりの「空き」だけを2/3ほどに詰める。
     .bd-page で囲ってあるので、TOPページや他の事業ページには影響しない。 */
  .bd-page .section { padding: clamp(72px, 9vh, 104px) 0; }
  .bd-page .section-head { margin-bottom: clamp(20px, 2.8vh, 28px); }
  .bd-page .section-title { margin-bottom: clamp(16px, 2.2vh, 24px); }
  .bd-page .section-lead { margin-bottom: clamp(26px, 3.6vh, 40px); }

  /* ブロック・カード・注記のあいだ */
  .bd-works { gap: clamp(46px, 6.5vh, 72px); }
  .bd-plans { gap: 14px; }
  .bd-terms { margin-top: clamp(20px, 2.8vh, 28px); }
  .bd-notes { margin-top: clamp(20px, 2.8vh, 28px); }
  .bd-note  { margin-top: clamp(20px, 2.8vh, 28px); }
  .bd-block-lead { margin-bottom: clamp(20px, 2.8vh, 28px); }
  .bd-maint { padding: clamp(24px, 3.2vh, 34px) clamp(20px, 4vw, 28px); }

  /* ---- HERO（スマホ）----
     PC の2カラムを縮めず、
       WEB PRODUCTION → Webサイト制作・運用支援 → 説明 → 相談ボタン → R
     の順に積み直す。R は文章の下に単独で置くので、重なりは起きない。 */
  /* 高さは「Rの大きさ」ではなく「Rのまわりと行間の余白」で詰めている。
     R の実寸（min(56vw, 220px)）と描画のアニメーションは変えていない。 */
  .hero.bd-hero {
    padding-top: 112px;
    padding-bottom: clamp(24px, 3.6vh, 34px);
    min-height: auto;
  }
  .bd-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }

  /* いちばん長い PRODUCTION が、右に余白を残したまま1行で収まる大きさ
     （320px幅でも折り返さない） */
  .bd-hero-title { margin-top: clamp(14px, 1.9vh, 20px); font-size: clamp(2rem, 10.4vw, 3.3rem); }
  .bd-hero-sub   { margin-top: clamp(13px, 1.9vh, 18px); font-size: clamp(1rem, 4.4vw, 1.18rem); }
  .bd-hero-desc  { margin-top: clamp(12px, 1.8vh, 17px); max-width: none; font-size: 0.95rem; line-height: 2.0; }
  .bd-hero .bd-hero-cta { margin-top: clamp(22px, 3.3vh, 30px); min-width: 200px; }

  /* R ― 文章の下へ。位置と大きさだけを変え、線・色・描画はそのまま。
     TOP のスマホ版で掛けている斜めのマスクは、ここでは
     文字と重ならないので外している。 */
  .bd-hero .hero-sign {
    position: relative; right: auto; top: auto; left: auto;
    width: min(56vw, 220px); height: auto; aspect-ratio: 540 / 730;
    margin: clamp(10px, 1.6vh, 14px) auto 0;
    transform: none;
    animation: none;
    -webkit-mask-image: none;
            mask-image: none;
  }

  /* ---- SERVICES（スマホのみ）----
     組み方・文字サイズ・罫線・番号の位置はそのまま。
     行間と項目どうしの余白だけを1割ほど詰めて、縦の長さを抑える。
     .bd-page で囲ってあるので、TOPページの BUSINESS には影響しない。
     4行ごとに余白を揺らすリズムも、小さくした値のまま残している。 */
  .bd-page .biz-list { gap: 3px; }
  .bd-page .biz-row {
    padding-top: clamp(18px, 2.2vh, 28px);
    padding-bottom: clamp(18px, 2.2vh, 28px);
  }
  .bd-page .biz-row:nth-child(4n+1) { padding-top: calc(clamp(18px, 2.2vh, 28px) + 8px); }
  .bd-page .biz-row:nth-child(4n+3) { padding-bottom: calc(clamp(18px, 2.2vh, 28px) + 7px); }
  .bd-page .biz-row:nth-child(4n)   { padding-top: calc(clamp(18px, 2.2vh, 28px) - 4px); }
  .bd-page .biz-en   { margin-top: 6px; }
  .bd-page .biz-desc { margin-top: 8px; line-height: 1.95; }

  /* ---- WORKS ---- */
  .bd-mock-sp { width: 22%; right: -5%; bottom: -8%; }
  .bd-work-visual { padding-bottom: clamp(28px, 8vw, 48px); }

  /* ---- SELECTED WORKS → PLAN のセクション間（スマホのみ）----
     実績の最後（VIEW WEBSITE）から PLAN の見出しまでは、他の境目より
     さらに少しだけ詰める。上の .bd-page .section で全体を詰めたので、
     ここはその値から一段落とすだけにしてある。 */
  #works { padding-bottom: clamp(60px, 7.5vh, 88px); }
  #plan  { padding-top:    clamp(60px, 7.5vh, 88px); }

  /* ---- PLAN ― 縦積み。中央の1枚を伸ばす指定は解除する ---- */
  .bd-plans { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .bd-plan--main { margin: 0; }

  /* ---- MAINTENANCE ---- */
  .bd-maint-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; }

  /* ---- OPTION / 制作期間 / CTA ---- */
  .bd-option { padding: clamp(18px, 2.4vh, 26px) 2px; gap: clamp(12px, 3vw, 20px); }
  .bd-cta { padding: clamp(28px, 4vh, 40px) clamp(22px, 4vw, 32px); }

  /* ---- 影のぼかし半径（スマホのみ）----
     ぼかし半径の大きい影は、スクロールで再描画されるたびに
     広い範囲を塗り直すことになる。いずれも大きなマイナスspreadで
     実際の影はごく狭いので、ぼかしとspreadを同じ比率で詰める。
     落ちる位置・濃さ・広がりはほぼ変わらない。PCは従来のまま。 */
  .bd-mock-pc   { box-shadow: 0 20px 30px -26px rgba(30, 50, 70, 0.55); }
  .bd-mock-sp   { box-shadow: 0 15px 22px -18px rgba(30, 50, 70, 0.6); }
  .bd-plan--main { box-shadow: 0 20px 31px -27px rgba(30, 50, 70, 0.5); }

  /* ---- PROCESS ― 2列×3段。英語が2行になっても読める ---- */
  .bd-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 4vw, 26px) clamp(14px, 3vw, 20px); }
  .bd-step-num { font-size: 0.76rem; }
  /* 英語が1語だけになったので、行の高さを2行ぶんに詰める
     （DEVELOPMENT が折り返しても、6項目の頭は揃ったまま） */
  .bd-step-en { font-size: 0.76rem; margin-top: 12px; min-height: 2.6em; }
  .bd-step-jp { font-size: 0.9rem; }

  /* ---- FAQ ― 指で押しやすい高さを確保する ---- */
  .bd-faq-q { padding: 20px 2px; gap: 10px; }
  .bd-faq-a { gap: 10px; padding-bottom: 22px; }
}

@media (max-width: 480px) {
  .hero.bd-hero { padding-top: 126px; }
  .bd-hero-title { font-size: clamp(2.1rem, 12vw, 2.9rem); }
  .bd-eyebrow { font-size: 0.72rem; letter-spacing: 0.24em; }
  .bd-plan { padding: 28px 22px; }
  .bd-plan-items li { font-size: 0.9rem; }
  .bd-maint { padding: 28px 22px; }
  .bd-maint-items { grid-template-columns: minmax(0, 1fr); }
  .bd-work-link { width: 100%; justify-content: center; }
  .bd-mock-sp { width: 24%; }

  /* 幅が狭いところでは、横に並べていたものを素直に縦へ落とす。
     価格が改行されたり、見出しの列が痩せて文字が切れるのを防ぐ。 */
  /* 制作期間は3件だけなので、縦積みではなく
     「プラン名 ― 期間」の1行ずつにして縦を短くする */
  .bd-terms { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .bd-term {
    flex-direction: row; align-items: baseline; justify-content: space-between;
    gap: 14px; padding: 13px 0 12px;
  }
  .bd-term-value { margin-top: 0; font-size: 1rem; }
  .bd-option { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .bd-option-price { font-size: 1.06rem; }
  .bd-work-meta > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .bd-work-meta dt { line-height: 1.9; }
  .bd-plan-term { flex-direction: column; gap: 6px; }
}

/* ============================================================
   REDUCED MOTION ― 動かさず、最初から見えている状態にする
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .bd-eyebrow, .bd-hero-sub, .bd-hero-desc, .bd-title-in {
    opacity: 1; filter: none; transform: none;
  }
  .bd-hero .hero-sign { transform: none; animation: none; }
  .bd-faq-item[open] .bd-faq-a { animation: none; }
}