/* ==================================================================================================== */
 /* 共通 */
 /* ==================================================================================================== */
 h2 {
     font-family: "Montserrat", "Noto Sans JP", sans-serif;
     font-weight: 600;
     letter-spacing: .05em;
     font-feature-settings: "palt";
 }

 /* ヘッダー高さ（あなたのサイトに合わせて調整） */
 :root {
     --header-h: 90px;
 }

 /* 80〜110pxくらいで合わせてOK */

 /* ヒーローをヘッダー分だけ下げる */
 .top-page .top-contents {
     padding-top: calc(var(--header-h) + clamp(12px, 2vw, 24px));
 }

 .top-page {
     position: relative;
     overflow: hidden;
 }

 /* ====== タイトル ========== */
 .title {
     font-family: "Poppins", sans-serif;
     font-weight: 300;
     /* ← 細くなる核心 */
     letter-spacing: 0.12em;
     /* ← スタイリッシュ感の正体 */
     color: #0b2545;
     line-height: 1.05;
     font-size: clamp(30px, 7vw, 46px);
 }

 .sub-title {
     font-family: "Noto Sans JP", sans-serif;
     font-weight: 300;
     /* 細めに */
     letter-spacing: 0.18em;
     color: #7a8796;
     margin-top: 10px;
     font-size: clamp(14px, 1.2vw, 18px);
     opacity: .75;
 }

 @media (max-width: 430px) {
     .sub-title {
         margin: 0;
     }
 }


 /* ==================================================================================================== */
 /* トップ画面 */
 /* ==================================================================================================== */
 .top-contents {
     position: relative;
     /* レイアウト */
     width: 100vw;
     max-width: none;
     margin-left: calc(50% - 50vw);
     margin-right: calc(50% - 50vw);
     padding-bottom: clamp(40px, 6vw, 90px);
     margin-bottom: 0;
     /* marginよりpaddingの方が安定 */
     min-height: calc(100svh - var(--header-h, 90px));
     /* 画面高さ - ヘッダー */
     align-items: center;
     /* これで中身が縦中央 */
 }

 @supports not (overflow: clip) {
     .top-contents {
         overflow-x: hidden;
     }
 }

 .top-contents .hero-catch {
     display: flex;
     flex-direction: column;
     justify-content: center;
     /* 縦中央 */
     height: 100%;
 }

 .top-contents .hero-catch h1 {
     position: relative;
     font-family: "Zen Kaku Gothic New", sans-serif;
     font-weight: 500;
     letter-spacing: .06em;
     margin: 0 0 clamp(10px, 2vw, 18px);
     font-weight: 800;
     font-size: clamp(32px, 4.2vw, 72px);
     /* 文字サイズを画面幅に応じて縮める */
     line-height: 1.15;
     /* 行間も一緒に自然調整 */
     z-index: 5;
     top: 260px;
     left: 180px;
 }

 .top-contents .hero-catch h1 br {
     /* PCでは改行を活かす */
     display: inline;
 }

 .top-contents .hero-catch .cta {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     text-decoration: none;

     /* ボタンも縮む */
     font-size: clamp(14px, 1.2vw, 16px);
     padding: clamp(10px, 1.2vw, 14px) clamp(14px, 2vw, 20px);
     border-radius: 999px;

     /* 押せるサイズ維持 */
     min-height: 44px;
     white-space: nowrap;
 }

 .top-contents .img img {
     display: block;
     width: min(520px, 42vw);
     max-width: 100%;
     height: auto;
     margin-left: auto;
 }

 @media (max-width: 1024px) {
     .top-contents {
         grid-template-columns: 1.1fr 0.9fr;
         gap: clamp(14px, 3vw, 28px);
     }

     .top-contents .img img {
         width: min(460px, 44vw);
     }
 }

 @media (max-width: 912px) {
     .top-contents {
         grid-template-columns: 1fr;
         text-align: center;
     }

     .top-contents .img img {
         margin: 0 auto;
         width: min(520px, 80vw);
     }

     .top-contents .hero-catch h1 {
         line-height: 1.2;
         font-size: clamp(22px, 5.4vw, 40px);
     }
 }

 @media (max-width: 430px) {
     .top-contents {
         padding: 22px 0;
         margin: 0
     }

     .top-contents .hero-catch h1 {
         font-size: clamp(20px, 6.6vw, 30px);
         letter-spacing: 0.01em;
     }

     .top-contents .hero-catch .cta {
         width: 100%;
         max-width: 320px;
     }
 }

 /* circle */
 .circle-01,
 .circle-02,
 .circle-03,
 .circle-04,
 .circle-05,
 .arrow-1,
 .arrow-2,
 .arrow-3,
 .arrow-4,
 .arrow-5 {
     position: absolute;
     pointer-events: none;
 }

 .circle-01 {
     width: clamp(320px, 46vw, 640px);
     height: clamp(320px, 46vw, 640px);
     border-radius: 50%;
     background: #00abef;
     left: clamp(-220px, -14vw, -80px);
     top: clamp(-320px, -26vw, -140px);
     opacity: .98;
     z-index: 1;
     overflow: hidden;
 }

 .circle-04 {
     width: clamp(180px, 22vw, 320px);
     height: clamp(180px, 22vw, 320px);
     border-radius: 50%;
     border: 1px solid rgba(131, 215, 248, 0.75);
     left: 52%;
     top: clamp(-120px, -10vw, -60px);
     z-index: 1;
     opacity: .9;
     overflow: hidden;
 }

 .circle-05 {
     width: clamp(220px, 32vw, 420px);
     height: clamp(220px, 32vw, 420px);
     border-radius: 50%;
     background: #0f5299;
     right: clamp(-220px, -14vw, -80px);
     top: clamp(120px, 18vw, 220px);
     z-index: 1;
     opacity: .95;
     overflow: hidden;
 }

 /* 小さい丸2つ */
 .circle-02 {
     width: 30px;
     height: 30px;
     border-radius: 50%;
     border: 1px solid rgba(3, 94, 130, 0.95);
     left: 38%;
     top: 26%;
     z-index: 2;
     opacity: .9;
     overflow: hidden;
 }

 .circle-03 {
     width: 24px;
     height: 24px;
     border-radius: 50%;
     border: 1px solid rgba(4, 30, 58, .85);
     left: 44%;
     top: 14%;
     z-index: 2;
     opacity: .9;
     overflow: hidden;
 }

 .arrow-1,
 .arrow-2,
 .arrow-3,
 .arrow-4,
 .arrow-5 {
     left: 50%;
     transform: translateX(-50%) rotate(-45deg);
     width: 28px;
     height: 28px;
     border: 5px solid;
     z-index: 2;
     opacity: .9;
 }

 .arrow-1 {
     bottom: 180px;
     border-color: transparent transparent #00abef #041e3a;
 }

 .arrow-2 {
     bottom: 160px;
     border-color: transparent transparent #041e3a #00abef;
 }

 .arrow-3 {
     bottom: 140px;
     border-color: transparent transparent #00abef #041e3a;
 }

 .arrow-4 {
     bottom: 120px;
     border-color: transparent transparent #041e3a #00abef;
 }

 .arrow-5 {
     bottom: 100px;
     border-color: transparent transparent #00abef #041e3a;
 }

 @media (max-width: 900px) {
     .top-contents {
         grid-template-columns: 1fr;
         text-align: center;
         padding: 22px clamp(16px, 5vw, 36px) 54px;
     }

     .top-contents .msg {
         max-width: 60ch;
         margin-inline: auto;
     }



     .top-contents .plan-btn {
         text-align: center;
     }

     .top-contents .img img {
         width: min(360px, 68vw);
     }

     .circle-04 {
         left: 58%;
     }

     .circle-02 {
         left: 48%;
         top: 30%;
     }

     .circle-03 {
         left: 56%;
         top: 18%;
     }
 }

 @media (max-width: 820px) {
     .top-contents {
         background-image: url('https://www.rowtech.jp/wp-content/uploads/first-img.webp');
         background-size: contain;
         background-repeat: no-repeat;
         background-position: center;
         background-color: rgba(255, 255, 255, 0.82);
         background-blend-mode: lighten;
     }

     /* 画像は非表示（現状と同じ） */
     .top-contents .img {
         display: none;
     }

     /* 円のバランスをスマホ向けに */
     .circle-01 {
         left: clamp(-240px, -30vw, -120px);
         top: clamp(20px, 40vw, 80px);
     }

     .circle-04 {
         top: clamp(20px, 40vw, 80px);
     }

     .circle-05 {
         top: auto;
         bottom: clamp(-220px, -30vw, -120px);
         right: clamp(-50px, -22vw, -800px);
     }

     .arrow-1,
     .arrow-2,
     .arrow-3,
     .arrow-4,
     .arrow-5 {
         width: 24px;
         height: 24px;
         border-width: 4px;
     }
 }

 /* さらに小さい端末：矢印は3つだけでスッキリ */
 @media (max-width: 430px) {

     .arrow-1,
     .arrow-2 {
         display: none;
     }

     .top-contents {
         min-height: 560px;
     }

     .circle-01 {
         width: clamp(320px, 46vw, 200px);
         height: clamp(320px, 46vw, 200px);
         left: clamp(-220px, -14vw, -80px);
         top: clamp(-320px, -26vw, -140px);
         opacity: .98;
         z-index: 1;
         overflow: hidden;
     }

     .circle-04 {
         width: clamp(180px, 22vw, 320px);
         height: clamp(180px, 22vw, 320px);
         left: 52%;
         top: clamp(-120px, -10vw, -60px);
     }

     .circle-05 {
         width: clamp(220px, 32vw, 420px);
         height: clamp(220px, 32vw, 420px);
         right: clamp(-220px, -14vw, -80px);
         top: clamp(120px, 18vw, 220px);
     }

     /* 小さい丸2つ */
     .circle-02 {
         width: 30px;
         height: 30px;
         left: 38%;
         top: 26%;
     }

     .circle-03 {
         width: 24px;
         height: 24px;
         left: 44%;
         top: 14%;
     }
 }

 /* 横向きスマホ対策 */
 @media (max-height: 430px) and (orientation: landscape) {
     .top-contents {
         min-height: 460px;
         padding-bottom: 40px;
     }

     .arrow-1,
     .arrow-2,
     .arrow-3,
     .arrow-4,
     .arrow-5 {
         display: none;
     }
 }


 /* ==================================================================================================================== */
 /* section01 スライドショー */
 /* ==================================================================================================================== */
 .top-page .slider {
     width: 94%;
     margin: 0 auto;
 }

 .top-page .slider img {
     display: block;
     margin: 0 auto;
     width: 70vw;
     height: auto;
 }


 .top-page .slider .slick-slide {
     transform: scale(0.8);
     transition: all .5s;
     opacity: 0.5;
 }

 .top-page .slider .slick-slide.slick-center {
     transform: scale(1);
     opacity: 1;
 }

 .top-page .slick-prev,
 .top-page .slick-next {
     position: absolute;
     top: 42%;
     cursor: pointer;
     outline: none;
     border-top: 5px solid #666;
     border-right: 5px solid #666;
     height: 45px;
     width: 45px;
 }

 .top-page .slick-prev {
     left: 1.5%;
     transform: rotate(-135deg);
     z-index: 10;
 }

 .top-page .slick-next {
     right: 1.5%;
     transform: rotate(45deg);
 }

 .top-page .slick-dots {
     text-align: center;
     margin: 20px 0 0 0;
 }

 .top-page .slick-dots li {
     display: inline-block;
     margin: 0 5px;
 }

 .top-page .slick-dots button {
     color: transparent;
     outline: none;
     width: 8px;
     height: 14px;
     display: block;
     border: none;
     border-radius: 50%;
     background: #eee;
     cursor: pointer;
 }

 .top-page .slick-dots .slick-active button {
     background: #333;
 }

 .top-page .pc-slider-img {
     display: block;
 }

 .top-page .sp-slider-img {
     display: none;
 }

 @media (max-width: 1280px) {
     .top-page .slider img {
         width: 60vw;
     }
 }

 @media (max-width: 1024px) {
     .top-page .slider img {
         width: 100vw;
     }
 }

 @media (max-width: 912px) {
     .top-page .top-img {
         margin-top: 90px;
     }

     .top-page .slider {
         width: 100%;
     }

     .top-page .slider img {
         width: 100vw;
     }

     .top-page .slick-prev,
     .top-page .slick-next {
         top: 42%;
         height: 15px;
         width: 15px;
         border-top: 5px solid #fff;
         border-right: 5px solid #fff;
         z-index: 2;
     }

     .top-page .slick-dots {
         margin: 20px;
     }

     .top-page .slick-dots button {
         width: 14px;
         height: 5px;
         border-radius: 0%;
     }
 }

 @media (max-width: 768px) {
     .top-contents .hero-catch h1 {
         top: 300px;
         left: 20px;
     }
 }

 @media (max-width: 540px) {
    .top-contents .hero-catch h1 {
        top: 180px;
        left: 10px;
    }

     .top-page .top-img {
         margin-top: 0px;
     }

     .top-page .slider img {
         margin-top: 40px;
     }


     .top-page .pc-slider-img {
         display: none;
     }

     .top-page .sp-slider-img {
         display: block;
     }
 }

 @media (max-width: 430px) {

     .top-page .slick-prev,
     .top-page .slick-next {
         top: 48%;
     }

     .top-page .slider img {
         margin: 34px auto 0;
         height: auto;
         width: 95vw
     }

     .top-page .slick-dots {
         margin: 10px 0 0 0;
     }
 }

 /* ============================================================================================================ */
 /* ========== info ========= */
 /* ============================================================================================================ */

 .top-page section.info {
     padding: 0 0 50px 0;
 }

 .top-page ul.info-lists {
     width: 60%;
     margin: 0 auto;
 }

 .top-page .info-content {
     padding: 10px 20px;
     border-radius: 5px;
     border-bottom: 1px dotted #ccc;
 }

 .top-page .info-content:hover {
     background: #fff;
 }



 .top-page span.info-time {
     margin-right: 5px;
 }

 .top-page .section02-list a {
     display: flex;
 }

 .top-page .section02-list a span {
     display: inline-block;
 }

 .top-page .info-category {
     display: inline-block;
     padding: 3px 7px;
     margin-right: 10px;
     width: 120px;
     border-radius: 5px;
     text-align: center;
     font-size: 0.8rem;
 }

 .top-page .info-category01 {
     background: #0d5ca3;
     color: rgb(250, 217, 30);
 }

 .top-page .info-category02 {
     background: #ffc107;
     color: #fff;
 }

 .top-page .info-category03 {
     background: #36a8f1;
     color: #fff;
 }

 .top-page .info-btn {
     margin-top: 20px;
 }

 /* top-page */
 @media (max-width: 1024px) {}

 @media (max-width: 912px) {
     .top-page section.info {
         padding: 0 0 40px 0;
     }
 }

 @media (max-width: 820px) {
     .top-page ul.info-lists {
         width: 80%;
     }
 }

 @media (max-width: 540px) {
     .top-page .info {
         padding: 0 0 20px 0;
         width: 90%;
         margin: 0 auto;
     }

     .top-page .info-content {
         padding: 5px 20px 0 0;
         border-radius: 5px;
         border-bottom: 1px dotted #ccc;
     }

     .top-page ul.info-lists {
         width: 90%;
         margin: 0 auto;
     }

     .top-page .info-category {
         padding: 2px 5px;
         width: 90px;
         font-size: 0.7rem;
     }

     .top-page .info-msg {
         display: block;
     }

     .top-page .info-btn {
         font-size: 1rem !important;
     }

     .top-page .info-btn a {
         width: 60%;
     }
 }

 @media (max-width: 412px) {
     .top-page .info {
         width: 100%;
     }
 }

 /* ==================================================================================================== */
 /* production */
 /* ==================================================================================================== */
 /* =====================================
   production section : All Device Responsive
   ===================================== */

 /* ---- セクション基本 ---- */
 .production {
     padding-block: clamp(60px, 9vw, 120px);
     position: relative;
     overflow: hidden;
 }

 /* 背景の柔らかいグラデーション */
 .production::before {
     content: "";
     position: absolute;
     width: 900px;
     height: 900px;
     background: radial-gradient(circle,
             rgba(0, 171, 239, .16) 0%,
             rgba(124, 58, 237, .10) 40%,
             rgba(255, 255, 255, 0) 70%);
     top: -420px;
     left: -240px;
     z-index: 0;
     pointer-events: none;
 }

 /* 中央幅制御（重要） */
 .production-content {
     width: min(1100px, 92vw);
     margin-inline: auto;
     position: relative;
     z-index: 1;
 }

 /* ---- メッセージカード ---- */
 .production-msg {
     background: #fff;
     border-radius: 22px;
     border: 1px solid rgba(4, 30, 58, .12);
     box-shadow: 0 28px 70px rgba(4, 30, 58, .10);
     padding: clamp(20px, 4vw, 36px);
     max-width: 880px;
     margin-inline: auto;
 }

 /* 本文 */
 .production-msg span {
     display: block;
     font-size: clamp(14px, 1.8vw, 23px);
     line-height: 1.95;
     color: #334155;
 }

 /* 段落間隔 */
 .production-msg span+span {
     margin-top: clamp(10px, 1.5vw, 16px);
 }

 /* ---- ボタン ---- */
 .production .plan-btn {
     margin-top: clamp(22px, 3vw, 32px);
 }

 /* --------------------------------
   Tablet (iPad)
   -------------------------------- */
 @media (max-width:1024px) {

     .production::before {
         width: 720px;
         height: 720px;
         top: -380px;
         left: -260px;
     }

     .production-msg {
         padding: 26px 22px;
     }
 }

 /* --------------------------------
   Smartphone
   -------------------------------- */
 @media (max-width:600px) {

     .production {
         padding-block: 56px;
     }

     .production::before {
         width: 520px;
         height: 520px;
         top: -300px;
         left: -260px;
         opacity: .8;
     }

     .production h2 {
         letter-spacing: .08em;
     }

     .production-msg {
         border-radius: 18px;
         padding: 20px 16px;
     }

     .production-msg span {
         line-height: 1.85;
     }
 }

 /* --------------------------------
   Small Phone (iPhone SE等)
   -------------------------------- */
 @media (max-width:380px) {

     .production-msg span {
         font-size: 13.5px;
     }

     .production h2 {
         font-size: 26px;
     }
 }

 /* --------------------------------
   Ultra Wide / 4K
   -------------------------------- */
 @media (min-width:1600px) {
     .production-content {
         width: 1200px;
     }
 }

 /* ======================================================================================================== */
 /* strength */
 /* ======================================================================================================== */

 :root {
     --cp-bg: #f5fdff;
     --cp-ink: #0f172a;
     --cp-muted: rgba(15, 23, 42, .72);
     --cp-navy: #041e3a;
     --cp-cyan: #00abef;
     --cp-purple: #7c3aed;
     --cp-line: rgba(4, 30, 58, .12);
     --cp-shadow: 0 18px 55px rgba(4, 30, 58, .10);
 }

 /* セクション背景（productionほど派手にしない） */
 .strength {
     position: relative;
     overflow: hidden;
     padding: clamp(60px, 7vw, 110px) 0;
     background:
         radial-gradient(900px 420px at 12% 10%, rgba(0, 171, 239, .06), transparent 60%),
         radial-gradient(900px 420px at 90% 85%, rgba(124, 58, 237, .05), transparent 60%),
         linear-gradient(180deg, #ffffff, var(--cp-bg));
     color: var(--cp-ink);
 }

 .strength .container {
     width: min(1120px, calc(100% - 32px));
     margin-inline: auto;
     position: relative;
 }

 /* ---------- セクション見出し（事業内容 / Business） ---------- */
 .strength .p-lg-5.p-3.text-center.container {
     padding: clamp(22px, 3vw, 44px) !important;
     margin-bottom: clamp(22px, 3.6vw, 44px);

     background: rgba(255, 255, 255, .96);
     border: 1px solid rgba(0, 0, 0, .08);
     border-radius: 18px;
     box-shadow: var(--cp-shadow);
     position: relative;
     overflow: hidden;
 }

 /* 上のグラデライン（productionと共通の記号） */
 .strength .p-lg-5.p-3.text-center.container::before {
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     height: 6px;
     background: linear-gradient(90deg, var(--cp-navy), var(--cp-cyan), var(--cp-purple));
 }

 /* ---------- 各カテゴリ見出し（ホームページ制作など） ---------- */
 .strength>.container>h2 {
     margin: clamp(14px, 2.1vw, 22px) 0 10px;
     padding: 16px 16px 16px 22px;

     background: rgba(255, 255, 255, .96);
     border: 1px solid var(--cp-line);
     border-radius: 16px;
     box-shadow: 0 14px 40px rgba(4, 30, 58, .08);

     font-size: clamp(18px, 1.2vw + 13px, 22px);
     font-weight: 900;
     letter-spacing: .03em;
     color: var(--cp-ink);

     position: relative;
     overflow: hidden;
 }

 /* 左グラデバー（production-msgと同じ文法） */
 .strength>.container>h2::before {
     content: "";
     position: absolute;
     left: 0;
     top: 0;
     bottom: 0;
     width: 6px;
     background: linear-gradient(180deg, var(--cp-cyan), var(--cp-purple));
     border-radius: 16px 0 0 16px;
 }

 /* ---------- リスト（カード＋行） ---------- */
 .strength>.container>ul {
     margin: 0 0 14px;
     padding: 0;
     list-style: none;

     background: rgba(255, 255, 255, .94);
     border: 1px solid var(--cp-line);
     border-radius: 16px;
     box-shadow: 0 14px 40px rgba(4, 30, 58, .06);
     overflow: hidden;
 }

 .strength>.container>ul>li {
     display: flex;
     gap: 12px;
     align-items: flex-start;

     padding: clamp(14px, .9vw + 12px, 18px) clamp(14px, 1.2vw + 10px, 20px);
     border-top: 1px solid rgba(4, 30, 58, .08);

     color: var(--cp-muted);
     line-height: 1.95;
     font-size: clamp(16px, .45vw + 14px, 18px);
 }

 .strength>.container>ul>li:first-child {
     border-top: 0;
 }

 /* 控えめでクールなチェック（丸） */
 .strength>.container>ul>li::before {
     content: "";
     width: 9px;
     height: 9px;
     margin-top: 10px;
     border-radius: 50%;
     background: var(--cp-cyan);
     box-shadow: 0 0 0 4px rgba(0, 171, 239, .10);
     flex: 0 0 auto;
 }

 /* PC hover：少しだけ浮かせる（やり過ぎない） */
 @media (hover:hover) {

     .strength>.container>h2,
     .strength>.container>ul {
         transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
     }

     .strength>.container>h2:hover {
         transform: translateY(-2px);
         box-shadow: 0 20px 54px rgba(4, 30, 58, .10);
         border-color: rgba(0, 171, 239, .22);
     }

     .strength>.container>ul>li {
         transition: background .18s ease, color .18s ease;
     }

     .strength>.container>ul>li:hover {
         background: rgba(0, 171, 239, .04);
         color: rgba(15, 23, 42, .88);
     }
 }

 /* -------------------------------------------
   Responsive（全デバイス対応）
   ------------------------------------------- */
 @media (max-width: 900px) {
     .strength .container {
         width: calc(100% - 28px);
     }
 }

 @media (max-width: 540px) {
     .strength {
         padding: 20px 0;
     }

     .strength .container {
         width: calc(100% - 22px);
     }

     .strength>.container>h2,
     .strength>.container>ul {
         border-radius: 14px;
     }

     .strength>.container>h2::before {
         border-radius: 14px 0 0 14px;
     }
 }

 @media (max-width: 430px) {

     /* ---------- セクション見出し（事業内容 / Business） ---------- */
     .strength .p-lg-5.p-3.text-center.container {
         padding: clamp(10px, 3vw, 44px) !important;
     }
 }

 @media (max-height: 430px) and (orientation: landscape) {
     .strength {
         padding: 40px 0;
     }
 }

 @media (prefers-reduced-motion: reduce) {
     .strength * {
         transition: none !important;
     }
 }

 /* =============================================================================================================================
   WORK FLOW（全デバイス対応）
   - 3カラム(PC) → 1カラム(スマホ) はBootstrapに任せる
   - カード高さ/余白/文字サイズを統一して見栄えUP
   ========================= */

 :root {
     --wf-bg: #f5fdff;
     /* 既存トーンに寄せる */
     --wf-ink: #0f172a;
     --wf-muted: rgba(15, 23, 42, .72);
     --wf-line: rgba(4, 30, 58, .12);
     --wf-shadow: 0 18px 55px rgba(4, 30, 58, .10);
     --wf-cyan: #00abef;
     --wf-purple: #7c3aed;
     --wf-navy: #041e3a;
 }

 /* =========================
   共通タイトルカード（MISSION/SSL/WORK FLOW 統一）
   ========================= */

 .work-flow .p-lg-5.p-3.text-center {
     padding: clamp(24px, 3vw, 44px) !important;
     margin: clamp(20px, 3vw, 40px) auto 30px;
     width: min(980px, calc(100% - 32px));

     background: #fff;
     border: 1px solid rgba(4, 30, 58, .12);
     border-radius: 20px;
     box-shadow: 0 18px 55px rgba(4, 30, 58, .10);
     position: relative;
     overflow: hidden;
 }

 /* 上のグラデーションライン */
 .work-flow .p-lg-5.p-3.text-center::before {
     content: "";
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 6px;
     background: linear-gradient(90deg, #041e3a, #00abef, #7c3aed);
 }

 /* スマホ最適化 */
 @media (max-width: 540px) {
     .work-flow .p-lg-5.p-3.text-center {
         width: calc(100% - 20px);
         border-radius: 16px;
     }

     .work-flow h2 {
         letter-spacing: .05em;
     }

     .work-flow h4 {
         letter-spacing: .14em;
     }
 }

 .work-flow {
     background: linear-gradient(180deg, #ffffff, var(--wf-bg));
     padding: clamp(56px, 6vw, 96px) 0;
 }

 /* タイトル */
 .work-flow>.p-lg-5.p-3.text-center {
     padding: clamp(18px, 3vw, 40px) !important;
     margin-bottom: clamp(10px, 2vw, 18px);
 }

 /* Bootstrap containerを活かしつつ、横幅を安定 */
 .work-flow .container {
     width: min(1120px, calc(100% - 32px));
     margin-inline: auto;
 }

 /* 余白を揃える（rowのガターを少し広げる） */
 .work-flow .row {
     --bs-gutter-x: clamp(16px, 2.6vw, 28px);
     --bs-gutter-y: clamp(18px, 3vw, 28px);
 }

 /* 1つのSTEPカード（.list） */
 .flow-img .list {
     display: flex;
     flex-direction: column;
     gap: 12px;
     height: 100%;
 }

 /* STEP表記 */
 .flow-img .list>h2:first-child {
     text-align: center;
     font-size: clamp(18px, 1.1vw + 12px, 22px);
     font-weight: 900;
     color: var(--wf-ink);
     margin: 0;
 }

 /* 画像 */
 .flow-img img {
     display: block;
     width: min(260px, 70%);
     height: auto;
     margin: 0 auto;
     filter: drop-shadow(0 16px 30px rgba(4, 30, 58, .12));
 }

 /* 見出し（担当者と打ち合わせ etc） */
 .flow-img .list-ttl {
     text-align: center;
     margin: 0;
     padding: 0;
     font-weight: 900;
     letter-spacing: .03em;
     color: var(--wf-ink);
     font-size: clamp(18px, 1.2vw + 12px, 22px);
 }

 /* 説明カード（comment） */
 .flow-img .comment {
     background: rgba(255, 255, 255, .96);
     border: 1px solid var(--wf-line);
     border-radius: 16px;
     box-shadow: 0 14px 40px rgba(4, 30, 58, .06);
     padding: clamp(14px, 1vw + 12px, 18px);
     line-height: 1.9;
     color: var(--wf-muted);

     /* 高さのバラつきを吸収して揃える */
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: 6px;
 }

 /* pやspanが混在しても整う */
 .flow-img .comment p {
     margin: 0;
 }

 .flow-img .comment span {
     display: block;
     font-size: clamp(15px, .4vw + 13px, 17px);
 }

 /* ボタンエリア */
 .top-page .work-flow .production-btn,
 .work-flow .production-btn {
     margin-top: clamp(20px, 3vw, 44px);
     text-align: center;
 }

 /* 既存のボタンを“このセクション用”に安定 */
 .work-flow .navy-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-width: min(340px, 100%);
     padding: 14px 20px;
     border-radius: 999px;
     color: #fff;
     text-decoration: none;
     font-weight: 900;
     letter-spacing: .03em;

     background: linear-gradient(135deg, var(--wf-navy), #0a2f63);
     border: 1px solid rgba(255, 255, 255, .25);
     box-shadow: 0 20px 60px rgba(4, 30, 58, .20);
     position: relative;
     overflow: hidden;
 }

 /* ほんのりポップな光 */
 .work-flow .navy-btn::before {
     content: "";
     position: absolute;
     top: -50%;
     left: -35%;
     width: 60%;
     height: 220%;
     background: linear-gradient(90deg, transparent, rgba(0, 171, 239, .35), transparent);
     transform: rotate(18deg);
     opacity: .85;
 }

 @media (hover:hover) {
     .work-flow .navy-btn {
         transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
     }

     .work-flow .navy-btn:hover {
         transform: translateY(-2px);
         filter: brightness(1.03);
         box-shadow: 0 28px 75px rgba(0, 171, 239, .18);
     }

     .work-flow .navy-btn:hover::before {
         animation: wfShine .9s ease;
     }
 }

 @keyframes wfShine {
     from {
         transform: translateX(-30%) rotate(18deg);
     }

     to {
         transform: translateX(260%) rotate(18deg);
     }
 }

 /* =========================
   Responsive（微調整）
   ========================= */

 /* タブレット以下：画像少し大きくして見やすく */
 @media (max-width: 768px) {
     .flow-img img {
         width: min(280px, 78%);
     }
 }

 /* スマホ：余白最適化 & 画像センター */
 @media (max-width: 540px) {
     .work-flow {
         padding: 20PX;
     }

     .work-flow .container {
         width: calc(100% - 22px);
     }

     .flow-img img {
         width: min(260px, 80%);
     }

     .work-flow .navy-btn {
         min-width: 100%;
     }
 }

 /* 横向きスマホ：余白を詰める */
 @media (max-height: 430px) and (orientation: landscape) {
     .work-flow {
         padding: 38px 0;
     }
 }

 /* 動きを減らす設定 */
 @media (prefers-reduced-motion: reduce) {
     .work-flow * {
         transition: none !important;
         animation: none !important;
     }

     .work-flow .navy-btn::before {
         display: none;
     }
 }

 /* ===================================================================== */
 /* =========================
   PRICE TABLE / section05
   色味はそのまま・全デバイスでバランス良く
   ========================= */

 .top-page .section05 {
     padding: clamp(48px, 6vw, 90px) 0;
 }

 /* 制作費用・特徴（.ttl）を大きくする */
 .top-page .section05 table .ttl {
     font-size: clamp(18px, 1.2vw + 14px, 24px);
     letter-spacing: .06em;
     line-height: 1.3;
     vertical-align: middle;
     padding: clamp(14px, 1.2vw + 12px, 20px);
 }

 /* =========================
   PRICE タイトルカード化
   ========================= */

 .section05 .title {
     padding: clamp(24px, 3vw, 44px);
     margin: clamp(20px, 3vw, 40px) auto 34px;
     width: min(980px, calc(100% - 32px));

     background: #ffffff;
     border: 1px solid rgba(4, 30, 58, .12);
     border-radius: 20px;
     box-shadow: 0 18px 55px rgba(4, 30, 58, .10);
     text-align: center;
     position: relative;
     overflow: hidden;
 }

 /* 上のグラデーションライン */
 .section05 .title::before {
     content: "";
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 6px;
     background: linear-gradient(90deg, #041e3a, #00abef, #7c3aed);
 }

 /* スマホ調整 */
 @media (max-width:540px) {
     .section05 .title {
         width: calc(100% - 20px);
         border-radius: 16px;
     }
 }

 .top-page .section05 .title {
     padding: clamp(16px, 2.8vw, 28px);
     text-align: center;
 }

 /* 制作費用の金額を中央に */
 .top-page .section05 table tr:first-child td:last-child {
     text-align: center;
 }

 .top-page .section05 table tr:first-child td:last-child {
     white-space: nowrap;
 }

 .top-page .section05 table tr:first-child td:last-child .text-gra {
     margin-right: .25em;
     display: inline-block;
 }

 /* テーブル全体 */
 .top-page .section05 table {
     width: min(960px, calc(100% - 32px)) !important;
     /* 80%固定をやめる */
     margin: 0 auto clamp(28px, 4vw, 44px);
     border: 3px solid #0d5ca3;
     border-radius: 18px;
     overflow: hidden;
     /* 角丸を綺麗に */
     border-collapse: separate;
     border-spacing: 0;
     background: #fff;
     box-shadow: 0 20px 60px rgba(13, 92, 163, .12);
 }

 /* セル共通 */
 .top-page .section05 table td {
     border: 1px solid #0d5ca3;
     padding: clamp(12px, 1.1vw + 10px, 16px);
     vertical-align: middle;
     font-size: clamp(15px, .35vw + 14px, 17px);
     line-height: 1.85;
     color: #1f2937;
 }

 /* 左の見出しセル */
 .top-page .section05 table .ttl {
     background: #5fafff;
     color: #fff;
     text-align: center;
     font-weight: 900;
     width: clamp(92px, 16vw, 160px);
     vertical-align: middle;
 }

 /* 中段の小見出しセル */
 .top-page .section05 table td.op-ttl {
     width: clamp(92px, 16vw, 160px);
     font-weight: 900;
     text-align: center;
     color: #041e3a;
     vertical-align: middle;
     background: rgba(95, 175, 255, .10);
     /* 色味は維持しつつ薄く */
 }

 /* op-ttlの中のspanを縦並びにしない（スマホでも安定） */
 .top-page .section05 table td.op-ttl span {
     display: inline-block;
 }

 /* 料金のグラデ文字（色味維持） */
 .top-page .section05 table .text-gra {
     font-size: clamp(28px, 2.2vw + 14px, 44px);
     font-weight: 900;
     display: inline-block;
     background: linear-gradient(90deg, #4158D0, #32cfe8 30%, #FFCC70);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 /* 既存の td span {display:flex;} が表を壊しやすいので上書き */
 .top-page .section05 table td span {
     display: inline;
 }

 /* リスト */
 .top-page .section05 table ul {
     margin: 0;
     padding-left: 1.2em;
 }

 .top-page .section05 table li {
     margin: .25em 0;
 }

 /* note（・や※と文章）を綺麗に揃える */
 .top-page .section05 table .note {
     display: grid;
     grid-template-columns: 1.2em 1fr;
     gap: .35em;
     align-items: start;
 }

 /* 毎月の費用の金額を完全中央に */
 .top-page .section05 table tr:nth-child(2) td:last-child {
     text-align: center;
 }

 /* 数字＋円(税込)を中央基準の塊にする */
 .top-page .section05 table tr:nth-child(2) td:last-child {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: .25em;
 }

 .top-page .section05 table .text-gra {
     display: inline-block;
 }

 .top-page .section05 table .note>span:first-child {
     font-weight: 900;
     color: #0d5ca3;
 }

 .top-page .section05 table .text-red {
     color: #d11a2a;
     /* 既存の赤がある前提。色味は変えないならこのまま */
 }

 /* 最下段の注意文 */
 .top-page .section05 table tr:last-child td {
     text-align: center;
     background: rgba(95, 175, 255, .08);
     font-weight: 700;
     color: rgba(4, 30, 58, .78);
 }

 /* セクション内のボタン余白（既存の指定を整理） */
 .top-page .template-bg .template-plan .plan-btn,
 .top-page .template-bg .simple-plan .plan-btn,
 .top-page .section05 .btn {
     margin-top: clamp(14px, 2vw, 22px);
 }

 /* =========================
   Responsive：スマホで表を読みやすく
   ========================= */

 /* タブレット以下：セル余白を少し詰める */
 @media (max-width: 768px) {
     .top-page .section05 table td {
         padding: 12px;
     }
 }

 /* スマホ：長文が詰まるので行間・文字サイズ最適化 */
 @media (max-width: 540px) {
     .top-page .section05 table {
         width: calc(100% - 22px) !important;
         border-radius: 16px;
     }

     .top-page .section05 table td {
         font-size: 15px;
         line-height: 1.9;
     }

     .top-page .section05 table .ttl,
     .top-page .section05 table td.op-ttl {
         width: 120px;
         /* 変に細くならないよう固定寄り */
     }
 }

 /* 超小型：金額だけ小さくしすぎない */
 @media (max-width: 430px) {
     .top-page .section05 table .text-gra {
         font-size: 30px;
         /* clampより読みやすさ優先 */
         font-weight: 900;
     }
 }


 /* =============================================== */
 /* =========================
   SSL Section (cool & pop)
   - 白ベース + 上部グラデライン
   - 読みやすい本文カード
   - 画像2列→スマホで縦積み
   ========================= */

 :root {
     --ssl-bg: #ffffff;
     --ssl-subbg: #f5fdff;
     --ssl-ink: #0f172a;
     --ssl-muted: rgba(15, 23, 42, .72);
     --ssl-navy: #041e3a;
     --ssl-cyan: #00abef;
     --ssl-purple: #7c3aed;
     --ssl-line: rgba(4, 30, 58, .12);
     --ssl-shadow: 0 18px 55px rgba(4, 30, 58, .10);
     --ssl-radius: 18px;
 }

 /* タイトルカード（既存のクラス構造に対応） */
 .p-lg-5.p-3.text-center.container {
     padding: clamp(10px, 3vw, 44px) !important;
     margin: clamp(18px, 3vw, 34px) auto;
     width: min(980px, calc(100% - 32px));

     background: #fff;
     border: 1px solid var(--ssl-line);
     border-radius: var(--ssl-radius);
     box-shadow: var(--ssl-shadow);
     position: relative;
     overflow: hidden;
 }

 /* 上部グラデライン */
 .p-lg-5.p-3.text-center.container::before {
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     height: 6px;
     background: linear-gradient(90deg, var(--ssl-navy), var(--ssl-cyan), var(--ssl-purple));
 }

 /* 本文ブロック：カード化 */
 .msg {
     width: min(980px, calc(100% - 32px));
     margin: 14px auto;
     background: rgba(255, 255, 255, .96);
     border: 1px solid var(--ssl-line);
     border-radius: var(--ssl-radius);
     box-shadow: 0 14px 40px rgba(4, 30, 58, .06);
     padding: clamp(16px, 1.2vw + 12px, 22px);
     color: var(--ssl-ink);
 }

 .msg p {
     margin: 0 0 12px;
     line-height: 2.0;
 }

 .msg p:last-child {
     margin-bottom: 0;
 }

 .msg span {
     font-size: clamp(16px, .45vw + 14px, 18px);
     color: var(--ssl-muted);
 }

 /* 画像2カラムエリア */
 .list-title {
     width: min(980px, calc(100% - 32px));
     margin: clamp(18px, 3vw, 30px) auto;
     --bs-gutter-x: clamp(16px, 2.6vw, 28px);
     --bs-gutter-y: clamp(16px, 2.6vw, 28px);
 }

 /* 各カラム内をカードに */
 .list-title .col-md-6 {
     background: rgba(255, 255, 255, .96);
     border: 1px solid var(--ssl-line);
     border-radius: var(--ssl-radius);
     box-shadow: 0 14px 40px rgba(4, 30, 58, .06);
     padding: clamp(14px, 1.2vw + 10px, 18px);
 }

 /* カラム内を中央揃えに */
 .list-title .col-md-6 {
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 /* 画像を中央表示 */
 .list-title img {
     width: auto;
     max-width: 100%;
     margin: 0 auto;
     display: block;
 }

 /* 小見出し */
 .list-title h5 {
     margin: 0 0 12px;
     font-size: clamp(16px, .4vw + 14px, 18px);
     font-weight: 900;
     letter-spacing: .03em;
     color: var(--ssl-ink);
 }

 /* ラベル色（保護/未保護） */
 .list-title h5.protection {
     position: relative;
     padding-left: 14px;
 }

 .list-title h5.protection::before {
     content: "";
     position: absolute;
     left: 0;
     top: 50%;
     transform: translateY(-50%);
     width: 6px;
     height: 18px;
     border-radius: 999px;
     background: linear-gradient(180deg, #22c55e, var(--ssl-cyan));
 }

 .list-title h5.no-protection {
     position: relative;
     padding-left: 14px;
 }

 .list-title h5.no-protection::before {
     content: "";
     position: absolute;
     left: 0;
     top: 50%;
     transform: translateY(-50%);
     width: 6px;
     height: 18px;
     border-radius: 999px;
     background: linear-gradient(180deg, #ef4444, #f59e0b);
 }

 /* 画像 */
 .list-title img {
     display: block;
     width: 100%;
     height: auto;
     border-radius: 14px;
     border: 1px solid rgba(0, 0, 0, .08);
     box-shadow: 0 18px 40px rgba(4, 30, 58, .10);
 }

 /* 2カラムを中央配置 */
 .list-title.row {
     justify-content: center;
 }

 /* 中央にまとまって配置 */
 .list-title {
     display: flex;
     justify-content: center;
     gap: 24px;
 }

 /* Bootstrapの幅を解除してバランス調整 */
 .list-title .col-md-6 {
     flex: 0 1 480px;
     max-width: 480px;
 }

 /* 箇条書き（1. / 2.）の見やすさ */
 .msg .notes {
     display: grid;
     grid-template-columns: 1.6em 1fr;
     gap: .5em;
     align-items: start;
     margin: 10px 0;
 }

 /* 番号のバッジ */
 .msg .notes .notes1-1,
 .msg .notes .notes2-1 {
     display: grid;
     place-items: center;
     width: 1.6em;
     height: 1.6em;
     border-radius: 10px;
     font-weight: 900;
     color: #fff;
     background: linear-gradient(135deg, var(--ssl-cyan), var(--ssl-purple));
     line-height: 1;
 }

 /* 強調（黄色線） */
 .yellow-border {
     background: linear-gradient(transparent 62%, rgba(255, 204, 112, .65) 62%);
     padding: 0 .1em;
     border-radius: 6px;
     color: rgba(15, 23, 42, .88);
     font-weight: 800;
 }

 @media (min-width: 1200px) {

     /* カード自体を中央に */
     .list-title {
         align-items: center;
     }

     /* カード幅を固定して左右余白を均等に */
     .list-title .col-md-6 {
         max-width: 820px;
         width: 100%;
     }
 }

 /* ===== 大画面では1列表示にする ===== */
 @media (min-width: 1200px) {

     .list-title {
         flex-direction: column;
         align-items: center;
         gap: 40px;
     }

     .list-title .col-md-6 {
         flex: none;
         max-width: 780px;
         width: 100%;
     }

     .list-title img {
         width: 100%;
     }
 }

 /* =========================
   Responsive
   ========================= */
 @media (max-width: 540px) {

     .p-lg-5.p-3.text-center.container,
     .msg,
     .list-title {
         width: calc(100% - 0px);
     }

     .p-lg-5.p-3.text-center.container h4 {
         letter-spacing: .16em;
     }
 }

 /* 横向きスマホ */
 @media (max-height: 430px) and (orientation: landscape) {
     .p-lg-5.p-3.text-center.container {
         margin: 14px auto;
     }
 }

 /* 動きを減らす設定 */
 @media (prefers-reduced-motion: reduce) {
     * {
         transition: none !important;
         animation: none !important;
     }
 }

 @media (max-width: 768px) {
     .list-title {
         flex-direction: column;
         align-items: center;
     }

     .list-title .col-md-6 {
         width: 100%;
         max-width: 520px;
     }
 }

 /* ======================================================================================================
   QR ORDER section (cool & pop)
   ========================= */
 :root {
     --cp-navy: #041e3a;
     --cp-cyan: #00abef;
     --cp-purple: #7c3aed;
     --cp-ink: #0f172a;
     --cp-muted: rgba(15, 23, 42, .72);
     --cp-line: rgba(4, 30, 58, .12);
     --cp-shadow: 0 18px 55px rgba(4, 30, 58, .10);
 }

 .qr-order {
     position: relative;
     overflow: hidden;
     padding: clamp(20px, 7vw, 110px) 0;
     background:
         radial-gradient(900px 420px at 12% 10%, rgba(0, 171, 239, .10), transparent 60%),
         radial-gradient(900px 420px at 90% 85%, rgba(124, 58, 237, .08), transparent 60%),
         linear-gradient(180deg, #ffffff, #f5fdff);
 }

 .qr-order__inner {
     width: min(1120px, calc(100% - 32px));
     margin-inline: auto;
 }

 .qr-order__title {
     background: rgba(255, 255, 255, .96);
     border: 1px solid var(--cp-line);
     border-radius: 20px;
     box-shadow: var(--cp-shadow);
     padding: clamp(10px, 3vw, 44px);
     text-align: center;
     position: relative;
     overflow: hidden;
     margin-bottom: clamp(18px, 3vw, 32px);
 }

 .qr-order__title::before {
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     height: 6px;
     background: linear-gradient(90deg, var(--cp-navy), var(--cp-cyan), var(--cp-purple));
 }

 .qr-order__lead {
     margin: 14px auto 0;
     margin-inline: auto;
     max-width: 38ch;
     color: var(--cp-muted);
     font-size: clamp(15px, .45vw + 14px, 18px);
     line-height: 1.9;
     text-wrap: balance;
     line-break: strict;
     word-break: keep-all;
 }

 /* PC・タブレットでは改行、スマホでは自然改行に戻す */
 .lead-br {
     display: inline;
 }

 @media (max-width: 540px) {
     .lead-br {
         display: none;
     }
 }

 .qr-order__grid {
     display: grid;
     grid-template-columns: 1.15fr .85fr;
     gap: clamp(16px, 2.8vw, 28px);
     align-items: start;
 }

 .qr-order__hero {
     background: rgba(255, 255, 255, .96);
     border: 1px solid var(--cp-line);
     border-radius: 20px;
     box-shadow: var(--cp-shadow);
     padding: clamp(18px, 2.2vw, 28px);
     position: relative;
     overflow: hidden;
 }

 .qr-order__hero::before {
     content: "";
     position: absolute;
     inset: -60px;
     background:
         radial-gradient(circle at 15% 25%, rgba(0, 171, 239, .12), transparent 55%),
         radial-gradient(circle at 80% 70%, rgba(124, 58, 237, .10), transparent 55%);
     pointer-events: none;
 }

 /* ===== QR画像の余白を消す ===== */

 .qr-order__visual {
     margin: 18px -28px 22px;
     /* ←左右に広げてカードいっぱいに */
     height: clamp(260px, 28vw, 420px);
     overflow: hidden;
     border-radius: 16px;
     position: relative;
 }

 /* 画像をボックスいっぱいに敷き詰める */
 .qr-order__visual img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }

 /* 画像の上に軽いグラデーション（文字を読みやすく） */
 .qr-order__visual::after {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(to top, rgba(4, 30, 58, .35), rgba(4, 30, 58, 0) 60%);
     pointer-events: none;
 }

 .qr-order__badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 8px 12px;
     border-radius: 999px;
     font-weight: 900;
     letter-spacing: .03em;
     color: #fff;
     background: linear-gradient(135deg, var(--cp-cyan), var(--cp-purple));
     position: relative;
     z-index: 1;
 }

 .qr-order__hero h3 {
     margin: 14px 0 12px;
     font-size: clamp(22px, 1.4vw + 14px, 30px);
     line-height: 1.35;
     letter-spacing: .03em;
     color: var(--cp-ink);
     font-weight: 900;
     position: relative;
     z-index: 1;
 }

 .qr-order__points {
     margin: 0;
     padding: 0;
     list-style: none;
     position: relative;
     z-index: 1;
 }

 .qr-order__points li {
     display: grid;
     grid-template-columns: 1.1em 1fr;
     gap: .5em;
     align-items: start;
     padding: 10px 0;
     border-top: 1px solid rgba(4, 30, 58, .10);
     color: var(--cp-muted);
     font-size: clamp(15px, .45vw + 14px, 18px);
     line-height: 1.8;
 }

 .qr-order__points li:first-child {
     border-top: 0;
 }

 .qr-order__points li::before {
     content: "✓";
     font-weight: 900;
     color: var(--cp-cyan);
     line-height: 1.2;
     margin-top: 2px;
 }

 .qr-order__cta {
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
     margin-top: 16px;
     position: relative;
     z-index: 1;
 }

 .qr-order__btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     padding: 12px 18px;
     border-radius: 999px;
     text-decoration: none;
     font-weight: 900;
     letter-spacing: .02em;
     min-width: 220px;
 }

 .qr-order__btn--primary {
     color: #fff;
     background: linear-gradient(135deg, var(--cp-navy), #0a2f63);
     box-shadow: 0 18px 50px rgba(4, 30, 58, .22);
     border: 1px solid rgba(255, 255, 255, .18);
 }

 .qr-order__btn--ghost {
     color: var(--cp-navy);
     background: rgba(255, 255, 255, .92);
     border: 1px solid rgba(4, 30, 58, .18);
 }

 @media (hover:hover) {
     .qr-order__btn {
         transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
     }

     .qr-order__btn:hover {
         transform: translateY(-2px);
     }

     .qr-order__btn--primary:hover {
         box-shadow: 0 26px 70px rgba(0, 171, 239, .18);
         filter: brightness(1.03);
     }
 }

 .qr-order__note {
     margin: 14px 0 0;
     color: rgba(15, 23, 42, .60);
     font-size: 14px;
     line-height: 1.7;
     position: relative;
     z-index: 1;
 }

 .qr-order__cards {
     display: grid;
     grid-template-columns: 1fr;
     gap: 12px;
 }

 .qr-order__card {
     background: rgba(255, 255, 255, .96);
     border: 1px solid var(--cp-line);
     border-radius: 18px;
     box-shadow: 0 14px 40px rgba(4, 30, 58, .06);
     padding: 16px 16px 14px;
 }

 .qr-order__cardIcon {
     font-size: 20px;
     margin-bottom: 8px;
 }

 .qr-order__card h4 {
     margin: 0 0 6px;
     color: var(--cp-ink);
     font-weight: 900;
     letter-spacing: .02em;
     font-size: 16px;
 }

 .qr-order__card p {
     margin: 0;
     color: var(--cp-muted);
     line-height: 1.75;
     font-size: 14.5px;
 }

 .qr-order__flow {
     margin-top: clamp(18px, 3vw, 32px);
     background: rgba(255, 255, 255, .96);
     border: 1px solid var(--cp-line);
     border-radius: 18px;
     box-shadow: 0 14px 40px rgba(4, 30, 58, .06);
     padding: 16px 16px 12px;
 }

 .qr-order__flowTitle {
     font-weight: 900;
     color: var(--cp-navy);
     letter-spacing: .03em;
     margin-bottom: 10px;
 }

 .qr-order__flowList {
     margin: 0;
     padding: 0;
     list-style: none;
     display: grid;
     gap: 8px;
 }

 .qr-order__flowList li {
     display: grid;
     grid-template-columns: 2.2em 1fr;
     gap: .6em;
     align-items: center;
     color: var(--cp-muted);
     line-height: 1.7;
 }

 .qr-order__flowList li span {
     display: grid;
     place-items: center;
     width: 2.0em;
     height: 2.0em;
     border-radius: 12px;
     color: #fff;
     font-weight: 900;
     background: linear-gradient(135deg, var(--cp-cyan), var(--cp-purple));
 }

 /* Responsive */
 .sp-only {
     display: none;
 }

 @media (max-width: 900px) {
     .qr-order__grid {
         grid-template-columns: 1fr;
     }

     .qr-order__btn {
         min-width: 100%;
     }

     .sp-only {
         display: block;
     }
 }

 @media (max-width: 540px) {
     .qr-order__inner {
         width: calc(100% - 22px);
     }
 }

 /* =============================================================================================== */
 /* ===== 料金表 ===== */
 /* =============================================================================================== */

 /* =========================================================
   QR ORDER 料金カード：完成版（全デバイス対応）
   - 金額の横見切れ解消（wrap + clamp）
   - 上下の角丸/影が切れない（transform撤廃 + overflow対策）
   - スマホ/タブレット/PC/4Kまで崩れない
   ========================================================= */

 /* 親で切られがちなので保険（必要に応じて増やしてOK） */
 .qr-order,
 .qr-order__price,
 .qr-order__priceBox {
     max-width: 100%;
 }

 /* ===== 料金カード外側 ===== */
 .qr-order__price {
     margin-top: clamp(24px, 4vw, 50px);
     display: flex;
     justify-content: center;

     /* 影・角丸が上下で切れないように余白を確保 */
     padding: 24px 0 30px;
     overflow: visible;
 }

 /* ===== 料金カード本体 ===== */
 .qr-order__priceBox {
     width: min(520px, 92vw);
     /* 端末幅に追従 */
     background: #fff;
     border-radius: 22px;
     padding: clamp(18px, 4.5vw, 28px) clamp(16px, 4vw, 26px);
     text-align: center;
     border: 1px solid rgba(4, 30, 58, .12);
     box-shadow: 0 25px 70px rgba(4, 30, 58, .12);
     position: relative;

     /* 中のライン用：ここは残す */
     overflow: hidden;

     /* これが上下見切れ原因になりやすいので撤廃 */
     transform: none !important;
     margin: 0 auto;
 }

 /* 上のグラデライン */
 .qr-order__priceBox::before {
     content: "";
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 6px;
     background: linear-gradient(90deg, #041e3a, #00abef, #7c3aed);
 }

 /* タイトル */
 .qr-order__priceTitle {
     font-weight: 700;
     letter-spacing: .08em;
     color: #041e3a;
     margin: 4px 0 10px;
     font-size: clamp(14px, 2.2vw, 16px);
 }

 /* ===== 金額行（見切れ対策） ===== */
 .qr-order__priceMain {
     margin: 10px 0 14px;
     font-weight: 900;
     line-height: 1.05;

     display: flex;
     align-items: baseline;
     justify-content: center;
     flex-wrap: wrap;
     /* ← 横見切れを根絶 */
     gap: 6px 8px;
 }

 .qr-order__priceMain .yen {
     font-size: clamp(18px, 4.5vw, 26px);
     vertical-align: top;
 }

 .qr-order__priceMain .amount {
     font-size: clamp(34px, 10vw, 56px);
     /* ← 端末幅に応じて縮む */
     background: linear-gradient(90deg, #4158D0, #32cfe8 40%, #FFCC70);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .qr-order__priceMain .tax {
     font-size: clamp(12px, 3.5vw, 16px);
     color: #475569;
     margin-left: 0;
     white-space: normal;
 }

 /* スマホでは「/月(税込)」を2段目に落とすと綺麗 */
 @media (max-width: 480px) {
     .qr-order__priceMain .tax {
         width: 100%;
         text-align: center;
         margin-top: 2px;
         color: #64748b;
     }

     /* --------- 料金 --------- */
     .qr-order__priceMain .amount {
         font-size: clamp(34px, 7vw, 56px);
     }

     .qr-order__priceMain .amount {
         height: 40px;
         padding-top: 10px;
     }
 }

 /* ===== リスト（読みやすさ） ===== */
 .qr-order__priceList {
     list-style: none;
     padding: 0;
     margin: 0;
     text-align: left;
     display: grid;
     gap: 10px;
 }

 /* チェック付き（プロっぽく） */
 .qr-order__priceList li {
     position: relative;
     padding-left: 26px;
     color: #334155;
     line-height: 1.7;
     font-size: clamp(13px, 1.9vw, 15px);
     word-break: keep-all;
     /* 不自然な改行を減らす */
 }

 .qr-order__priceList li::before {
     content: "✓";
     position: absolute;
     left: 0;
     top: 0.1em;
     color: #00abef;
     font-weight: 800;
 }

 /* ===== オプション／注記（ある場合） ===== */
 .qr-order__option {
     background: #f5fdff;
     padding: 12px;
     border-radius: 14px;
     font-size: clamp(13px, 1.9vw, 15px);
     margin: 14px 0 10px;
 }

 .qr-order__option strong {
     color: #041e3a;
 }

 .qr-order__priceNote {
     font-size: 13px;
     color: #475569;
     background: #f8fafc;
     padding: 10px 12px;
     border-radius: 10px;
     margin-top: 12px;
     line-height: 1.6;
 }

 /* ===== 角丸/影の「上下見切れ」対策（親がoverflow hiddenの時） =====
   もしまだ切れるなら、料金セクションの外側クラスをここに追加してください。 */
 .section05,
 .template-bg,
 .production,
 .section,
 .container-fluid {
     overflow: visible;
 }