*,::after,::before{box-sizing:border-box;margin:0;padding:0}body{font-family:'Noto Sans JP',sans-serif;background:#fff;color:#333;font-size:14px;line-height:1.6}a{text-decoration:none;color:inherit}.haru-line-connect .haru-line-connect__page{max-width:900px;margin:0 auto}.haru-line-connect .page-header{text-align:center;margin-bottom:28px}.haru-line-connect .line-label-tag{display:inline-block;background:#3c3c3c;color:#fff;font-size:12px;font-weight:700;letter-spacing:.08em;border-radius:20px;padding:4px 18px;margin-bottom:12px}.haru-line-connect .page-title{font-size:clamp(18px,3vw,22px);font-weight:400;letter-spacing:.1em;color:#333}.haru-line-connect .hero-outer{border:1.5px solid #888;border-radius:6px;overflow:hidden;margin-bottom:40px}.haru-line-connect .hero-top-bar{background:#3c3c3c;color:#fff;text-align:center;padding:10px 16px;font-size:clamp(14px,1.8vw,16px);letter-spacing:.04em;line-height:1.5}.haru-line-connect .hero-top-bar strong{font-weight:700}.haru-line-connect .hero-beige{background:#f5f0e8;padding:28px 20px 32px;text-align:center}.haru-line-connect .hero-dots{font-size:20px;letter-spacing:4px;color:#999;margin-bottom:6px}.haru-line-connect .hero-tagline{font-size:clamp(20px,4vw,28px);font-weight:400;letter-spacing:.12em;color:#333;margin-bottom:20px}.haru-line-connect .hero-tagline .dot{position:relative;display:inline-block}.haru-line-connect .hero-tagline .dot::before{content:"・・";position:absolute;top:-.6em;left:50%;transform:translateX(-50%);font-size:.8em}.haru-line-connect .hero-boxes{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:0}.haru-line-connect .hero-box{background:#fff;border:1.5px solid #ccc;border-radius:6px;padding:14px 32px;font-size:clamp(14px,2vw,16px);font-weight:500;color:#c0392b;text-align:center;line-height:1.5;min-width:160px}.haru-line-connect .hero-box.green-text{color:#2e7d32}.haru-line-connect .hero-white{background:#fff;padding:28px 24px 32px}.haru-line-connect .reasons-heading{text-align:center;font-size:clamp(15px,2.5vw,18px);font-weight:400;letter-spacing:.06em;margin-bottom:20px;color:#333}.haru-line-connect .reasons-heading .num-accent{position:relative;font-size:clamp(20px,3.5vw,26px);font-weight:700;color:#e07b39}.haru-line-connect .reasons-heading .num-accent:after{content:"";position:absolute;top:0;right:-.5em;font-size:.8em;background:url(https://d2w53g1q050m78.cloudfront.net/wwwharushopjp/uploads/assets/images/pages/guide/line/reason_emph.png) no-repeat;width:12px;height:1em}.haru-line-connect .reasons-heading .underline-text{border-bottom:2px solid #e07b39;padding-bottom:1px}.haru-line-connect .reasons-list{display:flex;flex-direction:column;gap:10px;margin:0 auto 28px}.haru-line-connect .reasons-row{display:flex;justify-content:center;gap:10px;flex-wrap:nowrap;flex-direction:row}.haru-line-connect .reason-item{display:flex;align-items:center;gap:10px;font-size:clamp(14px,2vw,16px);font-weight:500;color:#333;min-width:200px}.haru-line-connect .reason-num{width:26px;height:26px;background:#fff;border:1.5px solid #999;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#555;flex-shrink:0}.haru-line-connect .reason-icon-img{width:32px;height:32px;object-fit:contain;flex-shrink:0}.haru-line-connect .icon-bottle{width:28px;height:36px;flex-shrink:0}.haru-line-connect .icon-person{width:30px;height:30px;background:#9e9e9e;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}.haru-line-connect .icon-haru{font-size:12px;font-style:italic;color:#555;letter-spacing:-.02em;flex-shrink:0}.haru-line-connect .cta-wrap{text-align:center}.haru-line-connect .btn-cta{display:inline-block;background:#3c3c3c;color:#fff;font-size:clamp(14px,2vw,16px);font-weight:500;letter-spacing:.06em;border-radius:50px;padding:14px 48px;border:none;cursor:pointer;transition:opacity .2s}.haru-line-connect .btn-cta:hover{opacity:.8}.haru-line-connect .steps-outer-label{text-align:center;margin-bottom:12px}.haru-line-connect .steps-outer-label .sub{font-size:12px;color:#666;letter-spacing:.08em;display:block;margin-bottom:4px}.haru-line-connect .steps-outer-label .main{font-size:clamp(16px,3vw,20px);font-weight:400;letter-spacing:.1em;color:#333}.haru-line-connect .steps-box{border:1.5px solid #bbb;border-radius:6px;overflow:hidden;margin-bottom:40px}.haru-line-connect .notice-section{background:#f7f7f7;padding:22px 28px;border-bottom:1px solid #ddd}.haru-line-connect .notice-title{display:flex;align-items:center;justify-content:center;gap:8px;font-size:clamp(14px,2vw,16px);font-weight:700;color:#333;margin-bottom:14px}.haru-line-connect .notice-badge{background:#e07b39;color:#fff;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}.haru-line-connect .notice-body{text-align:center;font-size:clamp(14px,1.8vw,16px);color:#444;line-height:2;margin-bottom:16px}.haru-line-connect .icon-chain{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:18px}.haru-line-connect .haru-logo-sm{display:flex;flex-direction:column;align-items:center;gap:2px}.haru-line-connect .haru-logo-sm .brand-name{font-size:12px;color:#888;letter-spacing:.05em}.haru-line-connect .haru-shop-icon{width:36px;height:28px;border:2px solid #bbb;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#888;background:#fff}.haru-line-connect .chain-icon{color:#aaa;font-size:18px;font-weight:300}.haru-line-connect .line-circle{width:36px;height:36px;background:#06c755;border-radius:8px;display:flex;align-items:center;justify-content:center}.haru-line-connect .line-circle svg{width:22px;height:22px;fill:#fff}.haru-line-connect .notice-links{display:flex;flex-direction:column;gap:8px;max-width:360px;margin:0 auto}.haru-line-connect .notice-link-btn{width:100%;display:flex;align-items:center;justify-content:space-between;background:#e8e8e8;border:none;border-radius:4px;padding:10px 16px;font-family:inherit;font-size:14px;color:#333;text-align:left;cursor:pointer;appearance:none}.haru-line-connect .notice-link-btn:hover{opacity:.85}.haru-line-connect .notice-link-btn .arrow{color:#06c755;font-size:16px;font-weight:700}.haru-line-connect .connect-line-img-wrap{text-align:center;margin-bottom:18px}.haru-line-connect .connect-line-img{display:block;max-width:224px;height:auto;vertical-align:bottom;margin:0 auto}.haru-line-connect .step-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0;border-bottom:1px solid #ddd}@media (max-width:600px){.haru-line-connect .step-grid-2{grid-template-columns:1fr}}.haru-line-connect .step-col{padding:24px 20px 28px;background:#eaf3e6}.haru-line-connect .step-col:first-child{border-right:1px solid #ddd}@media (max-width:600px){.haru-line-connect .step-col:first-child{border-right:none;border-bottom:1px solid #ddd}}.haru-line-connect .step-label-tag{display:inline-block;background:#fff;border:1.5px solid #bbb;border-radius:4px;padding:4px 20px;font-size:14px;font-weight:700;letter-spacing:.08em;color:#333;margin-bottom:14px}.haru-line-connect .step-description{font-size:clamp(14px,1.8vw,16px);color:#333;line-height:1.9;margin-bottom:14px}.haru-line-connect .step-description .highlight{color:#1a6b2a;font-weight:700}.haru-line-connect .mockup-frame{background:#fff;border:1px solid #ccc;border-radius:6px;overflow:hidden;font-size:12px;color:#333}.haru-line-connect .login-mockup{padding:14px 12px}.haru-line-connect .login-mockup .m-title{text-align:center;font-size:14px;font-weight:700;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid #eee}.haru-line-connect .login-mockup .m-label{font-size:12px;color:#666;margin-bottom:3px}.haru-line-connect .login-mockup .m-input{background:#f5f5f5;border:1px solid #ddd;border-radius:3px;height:22px;margin-bottom:8px}.haru-line-connect .login-mockup .m-btn-main{background:#4a4a4a;color:#fff;text-align:center;padding:6px;border-radius:3px;font-size:12px;font-weight:700;margin-bottom:8px}.haru-line-connect .login-mockup .m-link{text-align:center;font-size:12px;color:#888;margin-bottom:10px}.haru-line-connect .login-mockup .m-divider{text-align:center;font-size:12px;color:#aaa;border-top:1px solid #eee;padding-top:8px;margin-bottom:8px}.haru-line-connect .login-mockup .m-member{text-align:center;font-size:12px;color:#555;margin-bottom:10px;line-height:1.7}.haru-line-connect .login-mockup .m-register-btn{background:#e8e8e8;color:#444;text-align:center;padding:5px;border-radius:3px;font-size:12px;margin-bottom:8px}.haru-line-connect .login-mockup .m-social-label{text-align:center;font-size:12px;color:#aaa;margin-bottom:6px}.haru-line-connect .login-mockup .m-line-btn{background:#06c755;color:#fff;display:flex;align-items:center;justify-content:center;gap:6px;padding:6px;border-radius:3px;font-size:12px;font-weight:700}.haru-line-connect .login-mockup .m-line-btn svg{width:14px;height:14px;fill:#fff}.haru-line-connect .auth-mockup{padding:2em 0}.haru-line-connect .auth-mockup .auth-header{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid #eee;background:#f8f8f8}.haru-line-connect .auth-mockup .auth-header .auth-title{font-size:12px;font-weight:700}.haru-line-connect .auth-mockup .auth-header .cancel-btn{font-size:12px;color:#06c755}.haru-line-connect .auth-mockup .auth-body{padding:12px}.haru-line-connect .auth-mockup .auth-profile{display:flex;align-items:center;gap:8px;margin-bottom:10px}.haru-line-connect .auth-mockup .auth-avatar{width:32px;height:32px;background:#e0e0e0;border-radius:50%;flex-shrink:0}.haru-line-connect .auth-mockup .auth-name{font-size:12px;font-weight:700}.haru-line-connect .auth-mockup .auth-sub{font-size:12px;color:#888}.haru-line-connect .auth-mockup .auth-loc{font-size:12px;color:#aaa;margin-bottom:10px}.haru-line-connect .auth-mockup .auth-perms-title{font-size:12px;font-weight:700;margin-bottom:6px}.haru-line-connect .auth-mockup .perm-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;padding:4px 0;border-bottom:1px solid #f0f0f0}.haru-line-connect .toggle-on{width:28px;height:15px;background:#06c755;border-radius:10px;flex-shrink:0}.haru-line-connect .auth-mockup .auth-note{font-size:12px;color:#aaa;line-height:1.6;margin:10px 0}.haru-line-connect .auth-mockup .allow-btn{background:#06c755;color:#fff;text-align:center;padding:8px;border-radius:4px;font-size:12px;font-weight:700;margin-bottom:6px}.haru-line-connect .auth-mockup .cancel-text{text-align:center;font-size:12px;color:#888}.haru-line-connect .step3-faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;background:#eaf3e6}@media (max-width:600px){.haru-line-connect .step3-faq-grid{grid-template-columns:1fr}}.haru-line-connect .step3-col{padding:24px 20px 28px;background:#eaf3e6;border-right:1px solid #ddd}@media (max-width:600px){.haru-line-connect .step3-col{border-right:none;border-bottom:1px solid #ddd}}.haru-line-connect .step3-complete-text{font-size:clamp(14px,1.8vw,16px);color:#333;line-height:1.25;margin-bottom:14px}.haru-line-connect .step3-complete-text .highlight-orange{color:#e98236;font-weight:700}.haru-line-connect .mypage-mockup{padding:1em 0;background:#fff;border:1px solid #ccc;border-radius:6px;overflow:hidden;font-size:12px;color:#333}.haru-line-connect .mypage-mockup .mp-header{background:#555;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:7px 10px;font-size:12px}.haru-line-connect .mypage-mockup .mp-header .menu-lines{display:flex;flex-direction:column;gap:2px}.haru-line-connect .mypage-mockup .mp-header .menu-lines span{display:block;width:14px;height:1.5px;background:#fff}.haru-line-connect .mypage-mockup .mp-notice{background:#fce4e4;color:#c0392b;font-size:12px;text-align:center;padding:4px;border-bottom:1px solid #f5c6c6}.haru-line-connect .mypage-mockup .mp-menu-title{padding:8px 10px 4px;font-size:12px;font-weight:700;color:#555;border-bottom:1px solid #eee}.haru-line-connect .mypage-mockup .mp-menu-item{display:flex;align-items:center;gap:6px;padding:6px 10px;font-size:12px;color:#555;border-bottom:1px solid #f5f5f5}.haru-line-connect .mypage-mockup .mp-menu-item::before{content:'›';color:#aaa;font-size:12px}.haru-line-connect .mypage-mockup .mp-logout{display:flex;align-items:center;gap:4px;padding:8px 10px;font-size:12px;color:#888}.haru-line-connect .faq-col{margin:10% 5%;padding:24px 20px 10px;background:#fff}.haru-line-connect .faq-col-title{font-size:clamp(14px,2vw,16px);font-weight:700;color:#e98236;margin-bottom:6px;letter-spacing:.03em;text-align:center}.haru-line-connect .faq-btn-tag{display:block;border:1.5px solid #bbb;border-radius:50px;padding:5px 20px;font-size:12px;color:#555;margin:0 auto 10px;max-width:200px;text-align:center}.haru-line-connect .faq-intro-text{font-size:12px;color:#888;margin-bottom:14px}.haru-line-connect .faq-list{display:flex;flex-direction:column;gap:0}.haru-line-connect .faq-item{border-bottom:1px solid #e8e8e8;padding:15px 0}.haru-line-connect .faq-item:last-child{border-bottom:none}.haru-line-connect .faq-q{display:flex;gap:8px;font-size:14px;font-weight:500;color:#333;margin-bottom:5px}.haru-line-connect .faq-q .q-mark{color:#888;font-weight:700;flex-shrink:0}.haru-line-connect .faq-a{display:flex;gap:8px;font-size:14px;color:#555;line-height:1.8}.haru-line-connect .faq-a .a-mark{color:#888;font-weight:700;flex-shrink:0}.haru-line-connect .steps-footer{background:#f7f7f7;border-top:1px solid #ddd;padding:16px 24px;text-align:center;font-size:12px;color:#555}.haru-line-connect .steps-footer .link,.haru-line-connect .steps-footer a{color:#2e7d32;text-decoration:underline;cursor:pointer}.haru-line-connect .bottom-cta{text-align:center;padding:20px 0 0}.haru-line-connect .bottom-cta .msg{font-size:clamp(14px,2vw,16px);color:#444;margin-bottom:20px;line-height:1.8}@media (max-width:600px){.haru-line-connect .hero-boxes{flex-direction:column;align-items:center}.haru-line-connect .hero-box{width:100%;max-width:260px}.haru-line-connect .reasons-row{flex-direction:column;align-items:center}.haru-line-connect .reason-item{width:100%;max-width:100%}.haru-line-connect .reason-picture,.haru-line-connect .reason-picture img{display:block;width:100%;height:auto}.haru-line-connect .notice-links{max-width:100%}}.haru-line-connect .modal{display:none;position:fixed;inset:0;z-index:999}.haru-line-connect .modal.is-open{display:block}.haru-line-connect .modal-overlay{position:absolute;inset:0;background:rgba(0,0,0,.55)}.haru-line-connect .modal-content{position:absolute;width:min(92vw,725px);max-height:calc(100vh - 54px);margin:27px auto;background:#fff;padding:50px 50px 42px;overflow:auto;top:50%;left:50%;transform:translate(-50%,-50%)}.haru-line-connect .modal-close{position:absolute;top:24px;right:26px;width:24px;height:24px;border:none;background:0 0;color:#333;font-size:28px;line-height:1;cursor:pointer}.haru-line-connect .modal-title{color:#3f4a54;font-size:clamp(20px,3vw,25px);font-weight:700;letter-spacing:.04em;line-height:1.45;text-align:center;margin-bottom:18px}.haru-line-connect .modal-slider{overflow:hidden}.haru-line-connect .slides{display:flex;transition:transform .3s ease}.haru-line-connect .slide{width:100%;flex:0 0 100%}.haru-line-connect .modal-step-card{display:grid;grid-template-columns:minmax(0,1fr) 250px;align-items:start;gap:28px;min-height:455px;background:#f1f8fb;border-radius:8px;padding:34px 26px}.haru-line-connect .modal-step-num{color:#008eb5;font-size:clamp(28px,4vw,34px);font-weight:400;line-height:1.2;margin-bottom:18px}.haru-line-connect .modal-step-desc{color:#3f4a54;font-size:clamp(15px,2vw,18px);font-weight:700;letter-spacing:.04em;line-height:1.8}.haru-line-connect .dummy-phone{width:225px;min-height:405px;margin:0 auto;background:#fff;border:1px solid #e4e7eb;box-shadow:0 8px 18px rgba(0,0,0,.12);padding:10px}.haru-line-connect .dummy-phone-header{display:flex;align-items:center;justify-content:space-between;gap:6px;border-bottom:1px solid #e6ebef;padding-bottom:8px;margin-bottom:10px;color:#77808a;font-size:12px}.haru-line-connect .dummy-logo{color:#0094bc;font-size:18px;font-weight:700;letter-spacing:-.05em}.haru-line-connect .dummy-icon-row{display:flex;gap:9px;align-items:center}.haru-line-connect .dummy-icon{width:12px;height:12px;border:1px solid #aeb6be;border-radius:50%}.haru-line-connect .dummy-label{display:inline-block;background:#11b45c;color:#fff;font-size:12px;padding:2px 7px;margin:6px 0 14px}.haru-line-connect .dummy-section-title{color:#4a5560;font-size:14px;font-weight:700;margin-bottom:12px}.haru-line-connect .dummy-card-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px}.haru-line-connect .dummy-card{min-height:56px;background:#f3f7fa;color:#59636e;font-size:12px;text-align:center;padding:10px 4px}.haru-line-connect .dummy-list-item{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #edf0f2;padding:11px 0;color:#4a5560;font-size:12px;font-weight:700}.haru-line-connect .dummy-list-item::after{content:"›";color:#9aa2aa;font-size:18px}.haru-line-connect .dummy-mail-box{margin-top:20px;border:1px solid #e3e7eb;padding:14px 12px;color:#4a5560;font-size:12px}.haru-line-connect .dummy-mail-address{margin-top:8px;background:#f3f7fa;padding:9px;color:#008eb5;font-weight:700;word-break:break-all}.haru-line-connect .dummy-line-screen{width:225px;min-height:405px;margin:0 auto;background:#f7f7f7;border:1px solid #e0e0e0;box-shadow:0 8px 18px rgba(0,0,0,.12);padding:16px}.haru-line-connect .dummy-line-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;font-size:18px;font-weight:700}.haru-line-connect .dummy-gear{width:32px;height:32px;border:2px solid #39434d;border-radius:50%;display:grid;place-items:center;font-size:18px}.haru-line-connect .dummy-line-menu{background:#fff;border-radius:10px;overflow:hidden}.haru-line-connect .dummy-line-item{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #eee;padding:15px 12px;font-size:14px;color:#333}.haru-line-connect .dummy-line-item:last-child{border-bottom:none}.haru-line-connect .dummy-highlight{outline:3px solid #06c755;outline-offset:-3px;background:#effbf4;font-weight:700}.haru-line-connect .dummy-line-email{margin-top:18px;background:#fff;border-radius:10px;padding:15px 12px;color:#333;font-size:14px}.haru-line-connect .dummy-line-email strong{display:block;color:#06a847;margin-top:8px;word-break:break-all}.haru-line-connect .modal-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:30px}.haru-line-connect .slide-next,.haru-line-connect .slide-prev{width:58px;height:58px;border:1.5px solid #3f4a54;border-radius:50%;background:#fff;color:#3f4a54;font-size:0;cursor:pointer;position:relative}.haru-line-connect .slide-next::before,.haru-line-connect .slide-prev::before{content:"";position:absolute;top:50%;left:50%;width:18px;height:18px;border-top:1.5px solid #3f4a54;border-right:1.5px solid #3f4a54}.haru-line-connect .slide-prev::before{transform:translate(-35%,-50%) rotate(-135deg)}.haru-line-connect .slide-next::before{transform:translate(-65%,-50%) rotate(45deg)}.haru-line-connect .slide-next:disabled,.haru-line-connect .slide-prev:disabled{opacity:.35;cursor:default}.haru-line-connect .slide-dots{display:flex;align-items:center;justify-content:center;gap:10px}.haru-line-connect .slide-dot{width:13px;height:13px;border:none;border-radius:50%;background:#b8bdcf;font-size:0;cursor:pointer}.haru-line-connect .slide-dot.is-active{background:#3f4a54}@media (max-width:600px){.haru-line-connect .modal-content{width:90%;max-height:calc(100vh - 66px);margin:0 auto;padding:50px 27px 28px;border-radius:0}.haru-line-connect .modal-close{top:-46px;right:8px;width:38px;height:38px;border-radius:50%;background:#fff;font-size:32px}.haru-line-connect .modal-title{margin-bottom:26px}.haru-line-connect .modal-step-card{display:block;min-height:0;padding:30px 20px 24px;text-align:center}.haru-line-connect .modal-step-num{margin-bottom:12px}.haru-line-connect .modal-step-desc{margin-bottom:24px}.haru-line-connect .modal-controls{margin-top:23px;gap:14px}.haru-line-connect .slide-next,.haru-line-connect .slide-prev{width:40px;height:40px}.haru-line-connect .slide-next::before,.haru-line-connect .slide-prev::before{width:14px;height:14px}.haru-line-connect .slide-dot{width:12px;height:12px}}