/** * JRS v2 public design system. * Shared layouts are intentionally theme-owned so Elementor document CSS cannot * change the responsive header, hero, contact drawer or carousel geometry. */ :root{--jrs-ink:#302a29;--jrs-rose:#d97988;--jrs-rose-soft:#fff2f1;--jrs-green:#629a55;--jrs-beige:#d8a681;--jrs-ivory:#fffdfb;--jrs-line:#f0dcd8;--jrs-shadow:0 14px 36px rgba(82,52,45,.12);--jrs-radius:28px;--jrs-serif:"Noto Serif JP",serif;--jrs-sans:"Noto Sans JP",sans-serif;--jrs-script:"Hurricane","Playfair Display",cursive} *{box-sizing:border-box}.jrs2-header,.jrs2-header *,.jrs2-contact,.jrs2-contact *,.jrs2-section,.jrs2-section *,.jrs2-page-hero,.jrs2-page-hero *,.jrs2-page-content,.jrs2-page-content *,.jrs2-footer,.jrs2-footer *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--jrs-ink);background:var(--jrs-ivory);font-family:var(--jrs-sans);overflow-x:hidden}body:has(.jrs2-contact:not([hidden])){overflow:hidden}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}.jrs2-header{position:sticky;top:0;z-index:80;height:78px;padding:10px clamp(18px,4vw,64px);display:grid;grid-template-columns:minmax(170px,1.15fr) auto auto auto;gap:clamp(12px,2vw,28px);align-items:center;background:rgba(255,253,251,.94);backdrop-filter:blur(10px);border-bottom:1px solid rgba(240,220,216,.65);transition:transform .3s ease,box-shadow .3s ease}.jrs2-header.is-hidden{transform:translateY(-105%)}.jrs2-header__brand{white-space:nowrap;line-height:1.1}.jrs2-header__brand small{display:block;font-size:10px;letter-spacing:.08em;color:#887d79}.jrs2-header__brand strong{display:block;font-family:"DM Serif Display",var(--jrs-serif);font-size:27px;font-weight:400;letter-spacing:.01em}.jrs2-header nav{display:flex;gap:clamp(10px,1.6vw,26px);align-items:center;white-space:nowrap}.jrs2-header nav a{font-size:12px;font-weight:600}.jrs2-header nav a:hover{color:var(--jrs-rose)}.jrs2-header__contact{border:0;border-radius:999px;background:var(--jrs-rose);color:#fff;font-size:12px;font-weight:700;padding:13px 19px;letter-spacing:.08em}.jrs2-header__menu{display:none;width:44px;height:44px;padding:11px;border:1px solid var(--jrs-line);background:#fff;border-radius:50%}.jrs2-header__menu span{display:block;height:1px;background:var(--jrs-ink);margin:5px 0}.jrs2-contact[hidden]{display:none}.jrs2-contact{position:fixed;inset:0;z-index:200;background:rgba(49,35,31,.36);padding:20px;display:grid;place-items:center}.jrs2-contact__inner{position:relative;width:min(520px,100%);padding:42px;border-radius:32px;background:#fff;box-shadow:var(--jrs-shadow);text-align:center}.jrs2-contact__close{position:absolute;top:12px;right:16px;border:0;background:transparent;color:var(--jrs-ink);font-size:31px;line-height:1}.jrs2-contact__inner p{margin:0 0 8px;font-size:14px}.jrs2-contact__inner strong{font-family:var(--jrs-serif);font-size:30px;font-weight:500}.jrs2-contact__actions{display:grid;gap:10px;margin-top:25px}.jrs2-contact__actions a{border-radius:12px;padding:14px 18px;color:#fff;font-weight:700}.is-phone{background:var(--jrs-rose)}.is-line{background:var(--jrs-green)}.is-mail{background:var(--jrs-beige)}.jrs2-script{margin:0 0 4px;color:var(--jrs-rose);font:400 29px/1 var(--jrs-script);letter-spacing:.02em}.jrs2-trust{display:flex;gap:12px;margin-top:25px}.jrs2-trust span{width:138px;min-height:82px;display:grid;place-items:center;padding:12px;border:1px solid rgba(226,192,187,.76);border-radius:24px;background:rgba(255,255,255,.88);text-align:center;font-size:12px;font-weight:600}.jrs2-cta button{width:100%;margin-top:14px;border:0;border-radius:10px;padding:13px;background:var(--jrs-rose);color:#fff;font-weight:700}.jrs2-section{position:relative;width:min(1200px,calc(100% - 40px));margin:0 auto;padding:70px 0}.jrs2-section--soft{width:100%;padding-inline:max(20px,calc((100% - 1200px)/2));background:linear-gradient(115deg,#fff9f4,#fff1f3);overflow:hidden}.jrs2-parallax-shape{position:absolute;width:480px;height:480px;right:-190px;top:-230px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.85),rgba(232,174,180,.25) 70%,transparent 71%);pointer-events:none}.jrs2-section-title{position:relative;text-align:center;margin-bottom:34px}.jrs2-section-title span{display:block;color:var(--jrs-rose);font:400 28px/1 var(--jrs-script)}.jrs2-section-title h2{margin:5px 0 8px;font:500 clamp(25px,2.4vw,34px)/1.4 var(--jrs-serif)}.jrs2-section-title p{margin:0;font-size:13px;color:#675d59}.jrs2-carousel{position:relative;padding:0 38px}.jrs2-carousel__track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px 2px 17px}.jrs2-carousel__track::-webkit-scrollbar{display:none}.jrs2-carousel__prev,.jrs2-carousel__next{position:absolute;top:48%;z-index:2;width:34px;height:34px;border:1px solid var(--jrs-line);border-radius:50%;background:#fff;color:var(--jrs-rose);font-size:28px;line-height:.8}.jrs2-carousel__prev{left:0}.jrs2-carousel__next{right:0}.jrs2-center{text-align:center}.jrs2-outline{display:inline-block;border:1px solid var(--jrs-rose);border-radius:999px;padding:13px 36px;color:var(--jrs-ink);font-size:14px}.jrs2-outline:hover{background:var(--jrs-rose);color:#fff}.jrs2-reasons{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.jrs2-reasons article{min-height:185px;padding:28px 22px;border:1px solid rgba(231,198,193,.7);border-radius:22px;background:rgba(255,255,255,.76);text-align:center}.jrs2-reasons article:before{content:"✦";display:block;margin-bottom:10px;color:var(--jrs-rose);font-size:28px}.jrs2-reasons b{font-family:var(--jrs-serif);font-size:17px}.jrs2-reasons p{font-size:12px;line-height:1.8}.jrs2-flow{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;list-style:none;padding:0;counter-reset:flow}.jrs2-flow li{position:relative;min-height:120px;padding:48px 14px 14px;border:1px solid var(--jrs-line);border-radius:22px;background:#fff;text-align:center;font-size:13px;font-weight:700}.jrs2-flow li:before{counter-increment:flow;content:"0" counter(flow);position:absolute;top:13px;left:50%;transform:translateX(-50%);width:27px;height:27px;padding-top:4px;border-radius:50%;background:var(--jrs-rose);color:#fff;font-size:11px}.jrs2-lawyer{display:grid;grid-template-columns:minmax(280px,.82fr) 1.18fr;gap:0;width:min(1100px,calc(100% - 40px));margin:15px auto 75px;border:1px solid var(--jrs-line);border-radius:var(--jrs-radius);overflow:hidden;background:#fff}.jrs2-lawyer img{width:100%;height:310px;object-fit:cover}.jrs2-lawyer>div{padding:48px}.jrs2-lawyer h2{margin:6px 0 15px;font:500 29px var(--jrs-serif)}.jrs2-lawyer>div>p:not(.jrs2-script){line-height:2;font-size:14px}.jrs2-cta{position:relative;margin-top:15px;padding:58px 20px;background:linear-gradient(105deg,#fff0f0,#fffaf3);text-align:center;overflow:hidden}.jrs2-cta:before,.jrs2-cta:after{content:"";position:absolute;width:230px;height:230px;border:1px solid rgba(217,121,136,.22);border-radius:50%;top:20px}.jrs2-cta:before{left:-125px}.jrs2-cta:after{right:-125px}.jrs2-cta>div{position:relative;width:min(510px,100%);margin:auto}.jrs2-cta p{margin:0;font:400 22px var(--jrs-serif)}.jrs2-cta h2{margin:8px 0;font-size:14px;font-weight:500}.jrs2-cta button{max-width:330px}.jrs2-page-hero{position:relative;min-height:365px;overflow:hidden;background:#fff4f1}.jrs2-page-hero picture,.jrs2-page-hero picture:after{position:absolute;inset:0}.jrs2-page-hero picture:after{content:"";background:linear-gradient(90deg,rgba(255,250,247,.95),rgba(255,250,247,.72) 42%,rgba(255,250,247,.05))}.jrs2-page-hero img{width:100%;height:100%;object-fit:cover;object-position:center}.jrs2-page-hero>div{position:relative;z-index:2;width:min(1120px,calc(100% - 40px));margin:auto;padding-top:105px}.jrs2-page-hero h1{margin:6px 0;font:500 clamp(30px,3.2vw,45px)/1.35 var(--jrs-serif)}.jrs2-page-hero>div>p:last-child{max-width:440px;font-size:14px;line-height:1.8}.jrs2-page-content{width:min(1100px,calc(100% - 40px));margin:0 auto;padding:70px 0}.jrs2-page-content .jrs2-section-title{margin-bottom:30px}.jrs2-page-content .jrs-post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.jrs2-page-content .jrs-post-card{border:1px solid var(--jrs-line);border-radius:20px;background:#fff;overflow:hidden}.jrs2-page-content .jrs-post-card__media{display:block;position:relative;width:100%;aspect-ratio:4/3;overflow:hidden}.jrs2-page-content .jrs-post-card__media img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}.jrs2-page-content .jrs-post-card__body{padding:18px}.jrs2-page-content .jrs-post-card__meta{color:var(--jrs-rose);font-size:12px;font-weight:700}.jrs2-page-content .jrs-post-card h3{font:500 19px/1.55 var(--jrs-serif)}.jrs2-page-content .jrs-post-card p{font-size:13px;line-height:1.8}.jrs2-page-content .jrs-post-card small{color:#786d68}.jrs-faq-list h2{margin-top:45px;border-left:4px solid var(--jrs-rose);padding-left:13px;font:500 22px var(--jrs-serif)}.jrs-faq-list details{margin:8px 0;border:1px solid var(--jrs-line);border-radius:12px;background:#fff}.jrs-faq-list summary{display:flex;gap:13px;padding:17px;cursor:pointer;font-weight:600;font-size:14px;list-style:none}.jrs-faq-list summary::-webkit-details-marker{display:none}.jrs-faq-list summary:after{content:"＋";margin-left:auto;color:var(--jrs-rose);font-size:18px}.jrs-faq-list details>div{padding:0 18px 18px;line-height:1.9;font-size:14px}.jrs-faq-list span{color:var(--jrs-rose);font-weight:700}.jrs2-contact-methods{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px}.jrs2-contact-methods article,.jrs2-copy-card{padding:30px;border:1px solid var(--jrs-line);border-radius:22px;background:linear-gradient(135deg,#fff,#fff7f4)}.jrs2-contact-methods h2,.jrs2-copy-card h2{margin:0 0 12px;font:500 25px var(--jrs-serif)}.jrs2-contact-methods p,.jrs2-copy-card p{line-height:1.9;font-size:14px}.jrs2-contact-methods button{border:0;border-radius:10px;padding:12px 18px;background:var(--jrs-rose);color:#fff;font-weight:700}.jrs-contact-form{max-width:730px;margin:28px auto 0;padding:32px;border:1px solid var(--jrs-line);border-radius:22px;background:#fff}.jrs-contact-form h2{font:500 27px var(--jrs-serif)}.jrs-contact-form label{display:block;font-size:13px;font-weight:700}.jrs-contact-form label span{margin-left:6px;border-radius:4px;padding:2px 5px;background:var(--jrs-rose);color:#fff;font-size:10px}.jrs-contact-form input,.jrs-contact-form select,.jrs-contact-form textarea{display:block;width:100%;margin-top:7px;border:1px solid var(--jrs-line);border-radius:7px;padding:11px;font:inherit}.jrs-contact-form button{border:0;border-radius:8px;padding:14px 28px;background:var(--jrs-rose);color:#fff;font-weight:700}.jrs2-note{text-align:center;color:#746864;font-size:12px}.jrs2-area{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--jrs-line);border-radius:25px;overflow:hidden;background:#fff}.jrs2-area img{width:100%;height:100%;min-height:350px;object-fit:cover}.jrs2-area div{padding:40px}.jrs2-area h2{margin:0 0 15px;font:500 29px var(--jrs-serif);color:var(--jrs-rose)}.jrs2-area li{margin:10px 0;font-weight:600}.jrs2-area p{font-size:13px;line-height:1.9}.jrs2-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--jrs-line);border-radius:16px;overflow:hidden;background:#fff}.jrs2-table th,.jrs2-table td{padding:17px;border-bottom:1px solid var(--jrs-line);text-align:left;font-size:14px;line-height:1.7}.jrs2-table tr:last-child>*{border-bottom:0}.jrs2-table th{width:28%;background:#fff5f3;color:var(--jrs-rose)}.jrs2-footer{padding:42px max(20px,calc((100% - 1200px)/2));background:#fff;border-top:1px solid var(--jrs-line)}.jrs2-footer__main{display:flex;justify-content:space-between;gap:30px;align-items:flex-start}.jrs2-footer strong{display:block;font:400 26px "DM Serif Display",var(--jrs-serif)}.jrs2-footer p{font-size:12px;line-height:1.8;color:#726965}.jrs2-footer nav{display:flex;flex-wrap:wrap;gap:10px 20px;max-width:500px}.jrs2-footer nav a{font-size:12px}.jrs2-footer small{display:block;margin-top:30px;text-align:center;color:#897d77;font-size:10px} @media (max-width:900px){.jrs2-header{height:68px;grid-template-columns:1fr auto auto}.jrs2-header nav{position:fixed;top:68px;right:15px;left:15px;display:none;flex-direction:column;align-items:stretch;gap:0;padding:15px;border:1px solid var(--jrs-line);border-radius:20px;background:#fff;box-shadow:var(--jrs-shadow)}.jrs2-header nav.is-open{display:flex}.jrs2-header nav a{padding:13px;border-bottom:1px solid #f8edeb;text-align:center}.jrs2-header nav a:last-child{border-bottom:0}.jrs2-header__menu{display:block}.jrs2-reasons{grid-template-columns:repeat(2,1fr)}.jrs2-flow{grid-template-columns:repeat(3,1fr)}.jrs2-page-content .jrs-post-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:767px){.jrs2-header{height:66px;padding:8px 18px;gap:10px}.jrs2-header__brand small{display:none}.jrs2-header__brand strong{font-size:23px}.jrs2-header__contact{padding:11px 13px;font-size:10px}.jrs2-header nav{top:66px}.jrs2-script{font-size:25px}.jrs2-trust{gap:8px;margin-top:18px}.jrs2-trust span{width:calc(33.333% - 5px);min-height:74px;padding:9px 6px;border-radius:20px;font-size:10px;line-height:1.5}.jrs2-section{width:calc(100% - 32px);padding:52px 0}.jrs2-section--soft{width:100%;padding-inline:16px}.jrs2-section-title{margin-bottom:24px;text-align:left}.jrs2-section-title h2{font-size:27px}.jrs2-section-title p{font-size:12px}.jrs2-carousel{margin-right:-16px;padding:0}.jrs2-carousel__track{gap:14px;padding:5px 2px 19px}.jrs2-carousel__prev,.jrs2-carousel__next{display:none}.jrs2-reasons{gap:0;grid-template-columns:repeat(2,1fr);border:1px solid var(--jrs-line);border-radius:22px;overflow:hidden}.jrs2-reasons article{min-height:180px;padding:20px 12px;border:0;border-right:1px solid var(--jrs-line);border-bottom:1px solid var(--jrs-line);border-radius:0}.jrs2-reasons article:nth-child(even){border-right:0}.jrs2-reasons article:nth-last-child(-n/**/+2){border-bottom:0}.jrs2-reasons b{font-size:15px}.jrs2-reasons p{font-size:11px}.jrs2-flow{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-right:-16px;padding:4px 16px 16px 0}.jrs2-flow li{flex:0 0 155px;min-height:115px;scroll-snap-align:start}.jrs2-lawyer{grid-template-columns:1fr;width:calc(100% - 32px);margin:0 auto 48px}.jrs2-lawyer img{height:185px}.jrs2-lawyer>div{padding:26px}.jrs2-lawyer h2{font-size:24px}.jrs2-cta{padding:42px 20px}.jrs2-cta p{font-size:19px}.jrs2-page-hero{display:flex;flex-direction:column;min-height:0;padding:0 16px 28px}.jrs2-page-hero picture{position:relative;inset:auto;order:0;width:calc(100% + 16px);height:220px;margin-left:auto;border-radius:130px 0 0 130px;overflow:hidden}.jrs2-page-hero picture:after{background:linear-gradient(90deg,rgba(255,250,247,.12),rgba(255,250,247,.08))}.jrs2-page-hero>div{width:100%;margin:0;padding:25px 0 0}.jrs2-page-hero h1{font-size:31px}.jrs2-page-hero>div>p:last-child{font-size:12px}.jrs2-page-content{width:calc(100% - 32px);padding:50px 0}.jrs2-page-content .jrs-post-grid{grid-template-columns:1fr;gap:14px}.jrs2-contact-methods{grid-template-columns:1fr;gap:12px}.jrs2-contact-methods article,.jrs2-copy-card,.jrs-contact-form{padding:21px}.jrs2-area{grid-template-columns:1fr}.jrs2-area img{min-height:220px}.jrs2-area div{padding:24px}.jrs2-table th,.jrs2-table td{padding:12px;font-size:12px}.jrs2-table th{width:35%}.jrs2-footer{padding:35px 20px}.jrs2-footer__main{display:block}.jrs2-footer nav{margin-top:22px}.jrs2-footer small{margin-top:23px}.jrs2-parallax-shape{display:none}} @media (prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}} .jrs-single{width:min(860px,calc(100% - 40px));margin:0 auto;padding:70px 0}.jrs-single h1,.jrs-single h2{font-family:var(--jrs-serif)}.jrs-single article{margin:24px 0;padding:26px;border:1px solid var(--jrs-line);border-radius:20px;background:#fff}.jrs-single article>img{max-width:100%;height:auto;border-radius:12px}.jrs-single p,.jrs-single li{line-height:1.9} .jrs2-parallax-art{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}.jrs2-parallax-art__layer{position:absolute;display:block;overflow:hidden;opacity:.34;filter:saturate(.78) sepia(.06);will-change:transform}.jrs2-parallax-art__layer img{display:block;width:100%;height:100%;object-fit:cover}.jrs2-parallax-art__layer--1{width:190px;height:260px;right:4%;top:13%}.jrs2-parallax-art__layer--2{width:130px;height:130px;right:23%;bottom:-17px}.jrs2-parallax-art__layer--3{width:155px;height:155px;left:-34px;bottom:11%}.jrs2-parallax-art__layer--4{width:105px;height:120px;left:38%;top:-35px}.jrs2-parallax-art--arch .jrs2-parallax-art__layer{border-radius:120px 120px 20px 20px}.jrs2-parallax-art--wave .jrs2-parallax-art__layer{border-radius:52% 48% 36% 64%/42% 54% 46% 58%}.jrs2-parallax-art--blob .jrs2-parallax-art__layer{border-radius:55% 45% 67% 33%/43% 58% 42% 57%}.jrs2-parallax-art--circle .jrs2-parallax-art__layer{border-radius:50%}.jrs2-page-hero>.jrs2-parallax-art{z-index:1}.jrs2-page-hero>.jrs2-parallax-art+.jrs2-page-hero>div{z-index:2}@media(max-width:767px){.jrs2-parallax-art__layer{opacity:.22}.jrs2-parallax-art__layer--1{width:100px;height:135px;right:-18px;top:10%}.jrs2-parallax-art__layer--2{width:70px;height:70px;right:16%;bottom:5%}.jrs2-parallax-art__layer--3{width:82px;height:82px;left:-27px;bottom:18%}.jrs2-parallax-art__layer--4{display:none}} .jrs-post-card__meta{display:inline-block;border-radius:999px;padding:5px 9px;background:var(--jrs-rose-soft);color:var(--jrs-rose)!important}.jrs-post-card--category-infidelity .jrs-post-card__meta{background:#fff0f1;color:#cf6978!important}.jrs-post-card--category-price .jrs-post-card__meta{background:#fff3e8;color:#b97445!important}.jrs-post-card--category-basic .jrs-post-card__meta{background:#eef6ed;color:#588a4d!important}.jrs-post-card--category-evidence .jrs-post-card__meta{background:#f4effb;color:#866eae!important}.jrs-post-card--category-advice .jrs-post-card__meta{background:#edf5fa;color:#5c89a6!important} /* Editorial scene transitions inspired by the approved motion reference. */ .jrs2-scene{isolation:isolate}.jrs2-scene--paper{position:relative;background:linear-gradient(130deg,#fffdfb 0%,#fff8f5 55%,#fffdfb 100%)}.jrs2-scene--paper:before{content:"";position:absolute;z-index:-1;inset:0;opacity:.52;background-image:radial-gradient(circle at 18% 24%,rgba(221,180,162,.12),transparent 26%),radial-gradient(circle at 84% 70%,rgba(213,121,136,.1),transparent 28%)}.jrs2-scene--texture{background:linear-gradient(145deg,#f9efec,#fffdfb 53%,#f3e8e2)}.jrs2-scene--texture:after{content:"";position:absolute;z-index:-1;inset:0;opacity:.48;background:repeating-linear-gradient(116deg,rgba(137,109,92,.025) 0 1px,transparent 1px 7px)}.jrs2-scene--wave{position:relative;padding-top:112px}.jrs2-scene--wave:before{content:"";position:absolute;z-index:-1;top:0;left:-5%;width:110%;height:82px;border-radius:0 0 50% 50%/0 0 100% 100%;background:var(--jrs-ivory)}.jrs2-scene--hero:after{height:94px}.jrs2-scene[data-scroll-scene] .jrs2-section-title,.jrs2-scene[data-scroll-scene] .jrs2-reasons,.jrs2-scene[data-scroll-scene] .jrs2-carousel,.jrs2-scene[data-scroll-scene] .jrs2-flow,.jrs2-scene[data-scroll-scene] .jrs2-lawyer>*,.jrs2-scene[data-scroll-scene].jrs2-page-content>*{transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}.jrs2-scene[data-scroll-scene]:not(.is-in-view) .jrs2-section-title{opacity:0;transform:translateY(30px)}.jrs2-scene[data-scroll-scene]:not(.is-in-view) .jrs2-carousel{opacity:0;transform:translateY(42px)}.jrs2-scene[data-scroll-scene]:not(.is-in-view) .jrs2-reasons{opacity:0;transform:translateY(38px)}.jrs2-scene[data-scroll-scene]:not(.is-in-view) .jrs2-flow{opacity:0;transform:translateX(28px)}.jrs2-scene[data-scroll-scene]:not(.is-in-view).jrs2-page-content>*{opacity:0;transform:translateY(34px)}.jrs2-scene[data-scroll-scene].is-in-view .jrs2-carousel{transition-delay:.12s}.jrs2-scene[data-scroll-scene].is-in-view .jrs2-reasons{transition-delay:.18s}.jrs2-scene[data-scroll-scene].is-in-view .jrs2-flow{transition-delay:.14s}.jrs2-scene--hero .jrs2-page-hero>div{transition:transform .25s linear,opacity .25s linear}.jrs2-page-hero>div{z-index:4}.jrs2-page-hero .jrs2-parallax-art{z-index:2}.jrs2-section--services .jrs2-section-title:after{content:"01";position:absolute;z-index:-1;left:50%;top:50%;transform:translate(-50%,-50%);color:rgba(217,121,136,.07);font:500 156px/1 "Bodoni Moda",serif;letter-spacing:-.08em}.jrs2-page-content>.jrs2-section-title:after{content:"02"}.jrs2-page--faq .jrs2-page-content>.jrs2-section-title:after{content:"Q&A";font-size:118px;letter-spacing:.02em}.jrs2-page--areas .jrs2-page-content>.jrs2-section-title:after{content:"AREA";font-size:105px;letter-spacing:.03em}.jrs2-page--pricing .jrs2-page-content>.jrs2-section-title:after{content:"PLAN";font-size:105px;letter-spacing:.03em}@media(max-width:767px){.jrs2-scene--wave{padding-top:78px}.jrs2-scene--wave:before{height:53px}.jrs2-scene--hero:after{height:48px}.jrs2-page-hero{min-height:0}.jrs2-section--services .jrs2-section-title:after{font-size:108px}.jrs2-page-content>.jrs2-section-title:after{font-size:78px!important}.jrs2-scene[data-scroll-scene]:not(.is-in-view) .jrs2-section-title,.jrs2-scene[data-scroll-scene]:not(.is-in-view) .jrs2-carousel,.jrs2-scene[data-scroll-scene]:not(.is-in-view) .jrs2-reasons,.jrs2-scene[data-scroll-scene]:not(.is-in-view) .jrs2-flow,.jrs2-scene[data-scroll-scene]:not(.is-in-view).jrs2-page-content>*{opacity:1;transform:none}} /* Contact panel: full visual destination rather than a small utility modal. */ .jrs2-contact{padding:clamp(18px,4vw,48px);background:rgba(46,38,35,.62)}.jrs2-contact__inner{width:min(720px,100%);min-height:min(760px,calc(100vh - 40px));padding:0;border-radius:42px;overflow:hidden;background:#c7b7aa;isolation:isolate;text-align:left}.jrs2-contact__backdrop{position:absolute;z-index:-2;inset:0}.jrs2-contact__backdrop:after{content:"";position:absolute;inset:0;background:linear-gradient(140deg,rgba(63,52,49,.7),rgba(255,250,246,.32)),repeating-linear-gradient(116deg,rgba(255,255,255,.045) 0 1px,transparent 1px 6px)}.jrs2-contact__backdrop img{width:100%;height:100%;object-fit:cover;object-position:center;filter:grayscale(.2) sepia(.15)}.jrs2-contact__inner:after{content:"";position:absolute;z-index:-1;right:-60px;top:90px;color:rgba(255,255,255,.12);font:500 250px/1 "Bodoni Moda",serif;content:"02"}.jrs2-contact__close{z-index:2;top:18px;right:19px;width:40px;height:40px;border:1px solid rgba(255,255,255,.72);border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:28px}.jrs2-contact__content{width:min(510px,100%);padding:clamp(52px,8vw,78px) clamp(26px,7vw,70px) 42px;color:#fff;text-align:center}.jrs2-contact__eyebrow{margin:0;font:500 clamp(34px,5vw,58px)/1.05 "Bodoni Moda",serif;letter-spacing:.04em}.jrs2-contact__content h2{margin:0 0 14px;font:500 clamp(36px,6vw,64px)/1 "Bodoni Moda",serif;letter-spacing:.03em}.jrs2-contact__lead{margin:0 auto 27px;max-width:360px;font-size:13px;line-height:1.85}.jrs2-contact__actions{display:grid;gap:12px;margin:0}.jrs2-contact__button{display:flex;align-items:center;justify-content:center;gap:15px;min-height:58px;padding:15px 20px;border-radius:31px 8px 31px 8px;color:#fff;font-weight:700;letter-spacing:.04em;box-shadow:0 10px 22px rgba(47,32,28,.16)}.jrs2-contact__button span{font-size:22px;font-weight:400}.jrs2-contact__button--line{background:linear-gradient(100deg,#608a58,#9cba7d)}.jrs2-contact__button--form{background:linear-gradient(100deg,#d7ae86,#edcfad)}.jrs2-contact__button--phone{background:rgba(255,255,255,.17);border:1px solid rgba(255,255,255,.65);box-shadow:none}.jrs2-contact__phone-label{margin:26px 0 8px;font:500 15px var(--jrs-serif)}.jrs2-contact__phone{display:block;border:1px solid rgba(255,255,255,.72);border-radius:999px;padding:14px 20px;color:#fff;font:500 clamp(24px,4vw,33px) var(--jrs-serif);letter-spacing:.05em}.jrs2-contact__hours{margin:11px 0 0;font-size:12px}@media(max-width:767px){.jrs2-contact{padding:0;place-items:stretch}.jrs2-contact__inner{width:100%;min-height:100dvh;border-radius:0}.jrs2-contact__content{width:100%;padding:78px 32px 45px}.jrs2-contact__eyebrow{font-size:42px}.jrs2-contact__content h2{font-size:47px}.jrs2-contact__button{min-height:56px}.jrs2-contact__close{top:17px;right:17px}} /* Pinned hero stage: copy changes in three editorial beats as it is scrolled. */ /* Final home refinements: numbered editorial sections, true circles and compact case/voice preview. */ .jrs2-section-title[data-section-index]:after{content:attr(data-section-index);position:absolute;z-index:-1;left:50%;top:50%;transform:translate(-50%,-50%);color:rgba(217,121,136,.07);font:500 156px/1 "Bodoni Moda",serif;letter-spacing:-.08em}.jrs2-section--services .jrs2-section-title:after{content:attr(data-section-index)}.jrs2-flow li:before{display:grid;place-items:center;width:30px;height:30px;min-width:30px;min-height:30px;aspect-ratio:1/1;padding:0;line-height:1;border-radius:50%}.jrs2-showcase{padding-top:78px;padding-bottom:78px}.jrs2-showcase__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:22px}.jrs2-showcase__case,.jrs2-showcase__voice{border:1px solid var(--jrs-line);border-radius:26px;background:#fff;overflow:hidden}.jrs2-showcase__case{display:grid;grid-template-columns:.9fr 1.1fr}.jrs2-showcase__case img{width:100%;height:100%;min-height:260px;object-fit:cover}.jrs2-showcase__case>div,.jrs2-showcase__voice{padding:28px}.jrs2-showcase__case span,.jrs2-showcase__label{display:inline-block;border-radius:99px;padding:5px 9px;background:var(--jrs-rose-soft);color:var(--jrs-rose);font-size:11px;font-weight:700}.jrs2-showcase h3{margin:14px 0 10px;font:500 23px/1.45 var(--jrs-serif)}.jrs2-showcase p{font-size:13px;line-height:1.8}.jrs2-showcase a{display:inline-block;margin-top:8px;color:var(--jrs-rose);font-size:13px;font-weight:700}.jrs2-showcase__stars{margin:17px 0 8px;color:#e7a942;letter-spacing:.12em}.jrs2-showcase__voice small{display:block;margin-top:20px;color:#857a75;font-size:12px}.jrs2-showcase__voice a{display:block;margin-top:18px} @media(max-width:767px){.jrs2-showcase{padding-top:52px;padding-bottom:52px}.jrs2-showcase__grid{grid-template-columns:1fr;gap:14px}.jrs2-showcase__case{grid-template-columns:1fr}.jrs2-showcase__case img{height:190px;min-height:0}.jrs2-showcase__case>div,.jrs2-showcase__voice{padding:22px}.jrs2-showcase h3{font-size:21px}.jrs2-section-title[data-section-index]:after{font-size:100px}} /* Mobile hero copy is intentionally overlaid, so it cannot be pushed below the image. */ .jrs2-showcase__grid--single{grid-template-columns:1fr} /* Background image fallbacks are intentionally visible while individual ACF layers remain editable. */ .jrs2-scene--paper{background-color:#fffdfb;background-image:linear-gradient(90deg,rgba(255,253,251,.92),rgba(255,253,251,.66)),url("../images/background-paper-botanical.png");background-position:center,right bottom;background-size:cover,cover;background-repeat:no-repeat}.jrs2-scene--texture{background-color:#fff7f4;background-image:linear-gradient(120deg,rgba(255,249,247,.88),rgba(255,249,247,.6)),url("../images/background-consultation.png");background-position:center,center;background-size:cover,cover;background-repeat:no-repeat}.jrs2-section--soft{background-image:linear-gradient(115deg,rgba(255,250,246,.92),rgba(255,244,245,.78)),url("../images/background-paper-botanical.png");background-size:cover,cover;background-position:center,right bottom}.jrs2-lawyer{background-image:linear-gradient(115deg,rgba(255,255,255,.93),rgba(255,249,247,.72)),url("../images/background-notebook.png");background-size:cover,cover;background-position:center,center}.jrs2-cta{background-image:linear-gradient(105deg,rgba(255,240,240,.91),rgba(255,250,243,.82)),url("../images/background-garden.png");background-size:cover,cover;background-position:center,center} /* The hero is one pinned visual scene: background stays fixed while three copy layers trade places. */ .jrs2-section-title[data-section-index]:after{content:attr(data-section-index)!important} /* v2.3: two-beat pinned hero and the responsive service-area composition. */ @media(min-width:768px){.jrs2-scene--paper,.jrs2-scene--texture{background-attachment:fixed}} .jrs2-area-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:24px;align-items:stretch}.jrs2-area-map{position:sticky;top:98px;align-self:start;margin:0;border:1px solid var(--jrs-line);border-radius:24px;overflow:hidden;background:#fff}.jrs2-area-map img{display:block;width:100%;min-height:620px;height:100%;object-fit:cover;object-position:center}.jrs2-area-list{display:grid;gap:10px}.jrs2-area-card{display:grid;grid-template-columns:minmax(0,1fr) 180px;min-height:128px;border:1px solid var(--jrs-line);border-radius:17px;background:rgba(255,255,255,.83);overflow:hidden}.jrs2-area-card>div{padding:20px 20px 16px}.jrs2-area-card h2{margin:0 0 8px;color:var(--jrs-rose);font:500 23px/1.2 var(--jrs-serif)}.jrs2-area-card p{margin:0;font-size:12px;line-height:1.8}.jrs2-area-card img{width:100%;height:100%;object-fit:cover}.jrs2-page--areas .jrs2-page-content{max-width:1420px}.jrs2-page--areas .jrs2-page-content>.jrs2-section-title{max-width:1100px;margin-right:auto;margin-left:auto} @media(max-width:767px){.jrs2-area-layout{grid-template-columns:1fr;gap:18px}.jrs2-area-map{position:relative;top:auto;border-radius:20px}.jrs2-area-map img{min-height:0;aspect-ratio:1.35;object-fit:cover}.jrs2-area-list{gap:12px}.jrs2-area-card{grid-template-columns:minmax(0,1fr) 118px;min-height:126px;border-radius:15px}.jrs2-area-card>div{padding:16px 14px}.jrs2-area-card h2{font-size:20px}.jrs2-area-card p{font-size:11px;line-height:1.7}.jrs2-area-card img{min-height:126px}.jrs2-scene--paper,.jrs2-scene--texture{background-attachment:scroll}} /* v2.4: editorial hero cue, auto-changing arches, top-page story rails and lower-page flow rail. */ @keyframes jrs-scroll-cue{0%,100%{transform:scaleY(.55);transform-origin:top;opacity:.35}45%{transform:scaleY(1);transform-origin:top;opacity:1}}.jrs2-tagline{position:relative;min-height:650px;padding:90px 20px 102px;overflow:hidden;text-align:center}.jrs2-tagline__visual{width:min(990px,100%);margin:0 auto;overflow:hidden}.jrs2-tagline__track{display:flex;gap:22px;width:max-content;transform:translateX(-10%);transition:transform .9s cubic-bezier(.2,.78,.27,1)}.jrs2-tagline__copy{margin-top:60px}.jrs2-tagline__copy p{margin:0;color:var(--jrs-ink);font:500 clamp(22px,2.6vw,34px)/1.5 var(--jrs-serif)}.jrs2-tagline__copy small{display:block;margin-top:6px;color:var(--jrs-rose);font:500 16px "Bodoni Moda",serif;letter-spacing:.12em}.jrs2-section--services,.jrs2-section--soft,.jrs2-showcase,.jrs2-home-faq{min-height:590px;padding-top:115px;padding-bottom:115px}.jrs2-section--soft{min-height:600px}.jrs2-story-carousel{overflow:hidden}.jrs2-story-carousel__track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 2px 20px}.jrs2-story-carousel__track::-webkit-scrollbar{display:none}.jrs2-story-carousel .jrs2-showcase__case,.jrs2-story-carousel .jrs2-showcase__voice{flex:0 0 calc(33.333% - 14px);min-width:0;scroll-snap-align:start}.jrs2-story-carousel .jrs2-showcase__case{display:block}.jrs2-story-carousel .jrs2-showcase__case img{height:190px;min-height:0}.jrs2-story-carousel .jrs2-showcase__case>div{padding:22px}.jrs2-story-carousel .jrs2-showcase__voice{min-height:290px}.jrs2-home-faq{min-height:0}.jrs2-home-faq__list{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:26px}.jrs2-home-faq details{border:1px solid var(--jrs-line);border-radius:13px;background:rgba(255,255,255,.87)}.jrs2-home-faq summary{display:flex;gap:10px;padding:17px;cursor:pointer;list-style:none;font-size:14px;font-weight:700}.jrs2-home-faq summary:before{content:"Q";color:var(--jrs-rose);font-family:"Bodoni Moda",serif;font-size:19px;line-height:.8}.jrs2-home-faq summary:after{content:"＋";margin-left:auto;color:var(--jrs-rose);font-size:18px}.jrs2-home-faq details p{padding:0 18px 18px;margin:0;font-size:13px;line-height:1.8}.jrs2-lawyer img{height:403px}.jrs2-lower-flow{position:relative;margin-top:16px;padding:76px 20px;background-image:linear-gradient(115deg,rgba(255,247,244,.9),rgba(255,253,251,.83)),url("../images/background-paper-botanical.png");background-size:cover;background-position:center;overflow:hidden}.jrs2-lower-flow__inner{width:min(1160px,100%);margin:0 auto;text-align:center}.jrs2-lower-flow__inner>.jrs2-script{margin-bottom:5px}.jrs2-lower-flow h2{margin:0 0 28px;font:500 30px var(--jrs-serif)}.jrs2-lower-flow__rail{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.jrs2-lower-flow__rail article{position:relative;min-height:196px;padding:38px 14px 18px;border:1px solid var(--jrs-line);border-radius:22px;background:rgba(255,255,255,.89)}.jrs2-lower-flow__number{position:absolute;top:13px;left:14px;color:var(--jrs-rose);font:500 18px "Bodoni Moda",serif}.jrs2-lower-flow__icon{display:grid;place-items:center;width:48px;height:48px;margin:0 auto 12px;border-radius:50%;background:var(--jrs-rose-soft);color:var(--jrs-rose);font-size:28px;font-weight:400}.jrs2-lower-flow__rail h3{margin:0 0 7px;font:500 16px var(--jrs-serif)}.jrs2-lower-flow__rail p{margin:0;font-size:11px;line-height:1.7}.jrs2-section[data-scroll-scene].is-in-view .jrs2-section-title{animation:jrs-editorial-in .9s cubic-bezier(.18,.7,.24,1) both}.jrs2-section[data-scroll-scene].is-in-view .jrs2-carousel,.jrs2-section[data-scroll-scene].is-in-view .jrs2-story-carousel,.jrs2-section[data-scroll-scene].is-in-view .jrs2-home-faq__list{animation:jrs-editorial-in .95s .14s cubic-bezier(.18,.7,.24,1) both}@keyframes jrs-editorial-in{from{opacity:0;transform:translateY(46px) scale(.985)}to{opacity:1;transform:none}} @media(max-width:767px){.jrs2-tagline{min-height:540px;padding:58px 0 82px}.jrs2-tagline__visual{width:100%;padding-left:20px}.jrs2-tagline__track{gap:14px;transform:translateX(-13%)}.jrs2-tagline__copy{margin-top:46px;padding:0 20px}.jrs2-tagline__copy p{font-size:23px}.jrs2-tagline__copy small{font-size:13px}.jrs2-section--services,.jrs2-section--soft,.jrs2-showcase,.jrs2-home-faq{min-height:0;padding-top:74px;padding-bottom:74px}.jrs2-story-carousel{margin-right:-16px}.jrs2-story-carousel__track{gap:14px}.jrs2-story-carousel .jrs2-showcase__case,.jrs2-story-carousel .jrs2-showcase__voice{flex-basis:min(79vw,310px)}.jrs2-story-carousel .jrs2-showcase__case img{height:186px}.jrs2-story-carousel .jrs2-showcase__voice{min-height:270px}.jrs2-home-faq__list{grid-template-columns:1fr}.jrs2-home-faq summary{font-size:13px}.jrs2-lawyer img{height:240px}.jrs2-lower-flow{padding:60px 0}.jrs2-lower-flow__inner{text-align:left;padding-left:16px}.jrs2-lower-flow h2{font-size:27px}.jrs2-lower-flow__rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-right:16px;scrollbar-width:none}.jrs2-lower-flow__rail::-webkit-scrollbar{display:none}.jrs2-lower-flow__rail article{flex:0 0 178px;min-height:184px;scroll-snap-align:start}.jrs2-lower-flow__inner>.jrs2-script{font-size:24px}} /* v2.5 final composition: full-bleed scenes, a stable two-beat hero and centred arch rotator. */ .jrs2-tagline{width:100%;max-width:none;min-height:690px;margin:0;padding:96px 20px 110px;overflow:hidden;background-color:#fffdfb;background-image:linear-gradient(115deg,rgba(255,253,251,.92),rgba(255,247,243,.6)),url("../images/background-paper-botanical.png");background-size:cover;background-position:center}.jrs2-tagline:before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,rgba(255,253,251,.04),rgba(255,253,251,.22))}.jrs2-tagline__copy{position:relative;z-index:2;margin:0 auto 42px;padding:0;text-align:center}.jrs2-tagline__copy p{font-size:clamp(23px,2.6vw,35px)}.jrs2-tagline__visual{position:relative;width:min(420px,88vw);height:400px;margin:0 auto;padding:0;overflow:visible}.jrs2-tagline__lead{position:relative;z-index:2;max-width:32em;margin:34px auto 0;text-align:center;font-size:14px;line-height:1.9}.jrs2-section.jrs2-scene,.jrs2-showcase,.jrs2-home-faq{width:100%;max-width:none;margin:0;padding-right:max(20px,calc((100vw - 1200px)/2));padding-left:max(20px,calc((100vw - 1200px)/2))}.jrs2-section--soft{padding-right:max(20px,calc((100vw - 1200px)/2));padding-left:max(20px,calc((100vw - 1200px)/2))}.jrs2-section-title,.jrs2-section>.jrs2-carousel,.jrs2-section>.jrs2-story-carousel,.jrs2-home-faq__list,.jrs2-reasons,.jrs2-flow{max-width:1200px;margin-right:auto;margin-left:auto}.jrs2-scene--paper,.jrs2-scene--texture,.jrs2-section--soft{background-attachment:fixed}.jrs2-network{position:relative;width:100%;padding:118px max(20px,calc((100vw - 1200px)/2));overflow:hidden}.jrs2-network:before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(120deg,rgba(255,252,250,.9),rgba(253,240,239,.68))}.jrs2-network__layout{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);gap:42px;max-width:1100px;margin:0 auto;align-items:center}.jrs2-network__groups{display:grid;gap:12px}.jrs2-network__group{border:1px solid var(--jrs-line);border-radius:18px;background:rgba(255,255,255,.84);overflow:hidden}.jrs2-network__group summary{display:flex;align-items:center;gap:12px;padding:19px;cursor:pointer;list-style:none;font:500 23px/1.2 var(--jrs-serif)}.jrs2-network__group summary::-webkit-details-marker{display:none}.jrs2-network__group summary small{margin-left:auto;color:var(--jrs-rose);font:500 11px var(--jrs-sans);letter-spacing:.08em}.jrs2-network__pin{width:12px;height:12px;border-radius:50%;background:var(--jrs-rose);box-shadow:0 0 0 7px rgba(217,121,136,.13)}.jrs2-network__group>div{display:grid;gap:7px;padding:0 15px 15px}.jrs2-network__group a{display:flex;justify-content:space-between;gap:15px;padding:11px 12px;border-radius:11px;background:#fff7f5;font-size:13px;font-weight:600}.jrs2-network__group a:hover{background:var(--jrs-rose);color:#fff}.jrs2-network__admin-note{max-width:1100px;margin:18px auto 0;color:#796e6a;text-align:center;font-size:11px}.jrs2-lawyer img{height:525px}.jrs2-flow li:before{width:32px;height:32px;min-width:32px;min-height:32px;border-radius:50%!important;aspect-ratio:1/1}.jrs2-section-title[data-section-index]::after{content:attr(data-section-index)!important} @media(max-width:767px){.jrs2-tagline{min-height:650px;padding:70px 20px 88px}.jrs2-tagline__copy{margin-bottom:32px}.jrs2-tagline__visual{width:min(74vw,308px);height:min(109vw,445px)}.jrs2-tagline__lead{max-width:23em;margin-top:25px;font-size:12px;line-height:1.9}.jrs2-section.jrs2-scene,.jrs2-showcase,.jrs2-home-faq{width:100%;padding-right:20px;padding-left:20px}.jrs2-scene--paper,.jrs2-scene--texture,.jrs2-section--soft{background-attachment:scroll}.jrs2-network{padding:76px 20px}.jrs2-network__layout{grid-template-columns:1fr;gap:24px}.jrs2-network__group summary{font-size:21px}.jrs2-network__admin-note{font-size:10px}.jrs2-lawyer img{height:312px}} .jrs2-lower-flow__icon img{display:block;width:27px;height:27px} /* v2.6: full-bleed lower-page artwork, genuine arch masks, and Japan network pins. */ .jrs2-parallax-art--arch .jrs2-parallax-art__layer{border-radius:0!important;clip-path:inset(0 round 50% 50% 4% 4% / 28% 28% 4% 4%)} .jrs2-page-hero{width:100%;max-width:none;min-height:540px;margin:0;padding:0;isolation:isolate;background:#f2e9e4} .jrs2-page-hero__media{position:absolute!important;inset:0!important;display:block;width:100%!important;height:100%!important;margin:0!important;overflow:hidden;border-radius:0!important} .jrs2-page-hero__media:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,252,249,.97) 0%,rgba(255,252,249,.84) 37%,rgba(255,252,249,.25) 67%,rgba(255,252,249,.08) 100%)} .jrs2-page-hero__media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.03)} .jrs2-page-hero>div{position:relative;z-index:4;width:min(1160px,calc(100% - 48px));padding-top:clamp(130px,13vw,180px)} .jrs2-page-hero__wave{position:absolute;left:0;right:0;bottom:-1px;z-index:3;height:160px;line-height:0;overflow:hidden;pointer-events:none} .jrs2-page-hero__wave svg{position:absolute;left:0;bottom:0;display:block;width:100%} .jrs2-page-hero__wave .jrs2-page-hero__wave-front{height:160px} .jrs2-page-hero__wave path{fill:#fffdfb} .jrs2-page-content{position:relative;width:100%;max-width:none;margin:0;padding:98px max(24px,calc((100vw - 1100px)/2));overflow:hidden;background:#fffdfb} .jrs2-page-content>*{width:min(1100px,100%);margin-right:auto;margin-left:auto} .jrs2-page--areas .jrs2-page-content{max-width:none;padding-right:max(24px,calc((100vw - 1420px)/2));padding-left:max(24px,calc((100vw - 1420px)/2))} .jrs2-page--areas .jrs2-page-content>*{width:min(1420px,100%)} .jrs2-network__group{transition:border-color .3s ease,box-shadow .3s ease}.jrs2-network__group.is-active{border-color:rgba(217,121,136,.7);box-shadow:0 12px 28px rgba(99,58,48,.1)} .jrs2-network__group summary{transition:background .25s ease}.jrs2-network__group.is-active summary{background:rgba(255,242,241,.8)} @media(max-width:767px){ .jrs2-parallax-art--arch .jrs2-parallax-art__layer{clip-path:inset(0 round 50% 50% 4% 4% / 30% 30% 4% 4%)} .jrs2-page-hero{display:block;min-height:0;height:min(56vh,400px);padding:0;background:#f2e9e4} .jrs2-page-hero__media{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important} .jrs2-page-hero__media:after{background:linear-gradient(180deg,rgba(255,252,249,.92) 0%,rgba(255,252,249,.35) 38%,rgba(255,252,249,.1) 100%)} .jrs2-page-hero>div{width:calc(100% - 40px);padding-top:28px;height:100%;display:flex;flex-direction:column;justify-content:flex-start;padding-bottom:0} .jrs2-page-hero h1{max-width:9em;font-size:30px} .jrs2-page-hero__wave{height:90px} .jrs2-page-hero__wave .jrs2-page-hero__wave-front{height:90px} .jrs2-page-content{width:100%;padding:64px 20px} .jrs2-page-content>*{width:100%} .jrs2-page--areas .jrs2-page-content{padding-right:20px;padding-left:20px} } /* v3.1: use real alpha-masked arch assets. Do not apply a CSS arch on top. */ /* The map and its SVG targets use the exact same 100 × 100 coordinate plane. */ @media (max-width: 767px) { } /* v2.7: stable editorial scroll copy and guarded mobile horizontal rails. */ html, body { width: 100%; max-width: 100%; overflow-x: clip; } main, .jrs2-scene, .jrs2-section, .jrs2-showcase, .jrs2-home-faq, .jrs2-tagline, .jrs2-network, .jrs2-page, .jrs2-page-content { max-width: 100%; } .jrs2-story-carousel, .jrs2-carousel, .jrs2-lower-flow__rail { max-width: 100%; overscroll-behavior-x: contain; } .jrs2-story-carousel__track, .jrs2-carousel__track, .jrs2-lower-flow__rail { overscroll-behavior-x: contain; touch-action: pan-x pan-y; } @media (max-width: 767px) { .jrs2-carousel, .jrs2-story-carousel, .jrs2-lower-flow__inner { width: 100%; max-width: calc(100vw - 40px); } .jrs2-story-carousel { margin-right: 0; } .jrs2-story-carousel__track, .jrs2-carousel__track, .jrs2-lower-flow__rail { padding-right: 16px; } } /* v2.9 — SVG alpha mask is consistent in iOS Safari, unlike an elliptical clip-path. */ .jrs2-parallax-art--arch .jrs2-parallax-art__layer{ border-radius: 0 !important; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 150'%3E%3Cpath fill='%23000' d='M0 150V32C0 14 22 0 50 0s50 14 50 32v118H0z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 150'%3E%3Cpath fill='%23000' d='M0 150V32C0 14 22 0 50 0s50 14 50 32v118H0z'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-position: center; mask-position: center; } @media (max-width: 767px) { } /* v3.0 — files are pre-masked PNGs, removing browser-specific mask rendering entirely. */ @media (max-width: 767px) { } /* v2.8 — robust editorial arch mask and a map that reads as one connected network. */ .jrs2-parallax-art--arch .jrs2-parallax-art__layer{ -webkit-clip-path: none !important; clip-path: none !important; overflow: hidden !important; isolation: isolate; } .jrs2-parallax-art--arch .jrs2-parallax-art__layer { border-radius: 50% 50% 3% 3% / 19% 19% 3% 3% !important; } .jrs2-network__lines { position: absolute; z-index: 2; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .jrs2-network__lines line { stroke: rgba(82, 62, 57, .58); stroke-width: .32; vector-effect: non-scaling-stroke; } .jrs2-network__lines circle { fill: var(--jrs-rose); stroke: #fffdfb; stroke-width: .55; vector-effect: non-scaling-stroke; } @media (max-width: 767px) { /* The visible hero is one full viewport; extra scroll length reveals the second copy. */ .jrs2-tagline__visual { width: min(82vw, 340px); height: min(122vw, 490px); } } /* v3.1 final overrides — pre-masked image files must retain their transparent corners. */ /* Make the image and SVG point layer share one full-size coordinate space. */ @media (max-width: 767px) { } /* v3.2 final composition layer. * This layer intentionally wins over the experimental v2/v3 declarations above. * It keeps the photo texture continuous through every curved section boundary. */ .jrs2-header { background: rgba(255, 253, 251, .50) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: transform .32s ease, background .32s ease, backdrop-filter .32s ease !important; } .jrs2-header.is-hero-top { background: rgba(255, 253, 251, .20) !important; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } .jrs2-header.is-idle { background: rgba(255, 253, 251, .50) !important; } .jrs2-header.is-hidden { transform: translate3d(0, -110%, 0) !important; } /* Clean ivory arc into the next section -- same technique as the hero's * bottom mask (.jrs2-hero__stage:after). The previous version tried to * carry the paper texture itself into a large clip-path "tail" past the * section's own box, which read as an odd, off-shape patch of texture * rather than a deliberate curve; this is simpler and matches every * other section transition on the site. */ .jrs2-scene--arched-boundary, .jrs2-page-content { position: relative; isolation: isolate; } .jrs2-scene--arched-boundary { padding-bottom: 110px; background-color: #fffaf7; background-image: linear-gradient(112deg, rgba(255, 253, 251, .84), rgba(255, 241, 239, .45)), url("../images/background-paper-botanical.png"); background-position: center, center bottom; background-size: cover, cover; } .jrs2-scene--arched-boundary > *, .jrs2-page-content > * { position: relative; z-index: 2; } /* The supplied composite map owns every visual coordinate (map, dots, lines and labels). */ .jrs2-network__lines { display: none !important; } @media (max-width: 767px) { .jrs2-header.is-hero-top { background: rgba(255, 253, 251, .20) !important; } } /* v3.3: a real continuation of the preceding scene, rather than a pale oval * laid over the next section. The tail carries the exact same paper texture * as the scene above it, so the curve reads as a single masked background. */ html, body { overflow-x: clip; } /* The editorial tagline has the same full-width, image-backed arch treatment. */ .jrs2-tagline > * { position: relative; z-index: 1; } /* Tall, true arch masks for the auto-rotating image and service cards. */ /* Supplied 2400 x 1800 map artwork has the authoritative pin locations. */ /* Keep the image scene inside the first mobile viewport; the curved end is * intentionally below it and appears only once the visitor starts scrolling. */ @media (max-width: 767px) { } /* v3.3.2: supplied JRS artwork is a 4:3 coordinate canvas. * Do not crop it: the client prepared both the dots-only and the connector-line * version at this ratio. Interactive photo markers intentionally live outside * the map silhouette and align to the supplied line endpoints. */ /* The coordinates below are the centres of the six external photo markers in * jrs-map02.png. The line image remains visible underneath each button. */ /* The curved continuation must use the exact texture of the scene above. * It is a background continuation, never a separate pale oval between sections. */ @media (max-width: 767px) { /* A steeper editorial arch; no shallow oval or white gap on small screens. */ } /* Consolidated: spacing after the "reasons" arched-boundary section and after page-content, replacing 4 layered !important duplicates. */ .jrs2-scene--arched-boundary + .jrs2-section, .jrs2-page-content + .jrs2-lower-flow, .jrs2-page-content + .jrs2-cta { position: relative; z-index: 1; padding-top: 96px; } /* Give the lawyer-greeting photo overscan so section-parallax.js can move it vertically without exposing empty space at the top/bottom edge. */ .jrs2-lawyer img { transform: scale(1.15); will-change: transform; } /* Site-icon logo uploaded via Customizer > Site Identity. */ .jrs2-header__brand--logo { display: flex; align-items: center; } .jrs2-header__brand--logo .custom-logo-link { display: block; } .jrs2-header__brand--logo img { display: block; height: 52px; width: auto; max-width: 220px; object-fit: contain; } @media (max-width: 767px) { .jrs2-header__brand--logo img { height: 40px; max-width: 160px; } } /* Site-icon logo in the footer, same Customizer > Site Identity source as the header. */ .jrs2-footer__brand--logo { display: block; margin-bottom: 6px; } .jrs2-footer__brand--logo .custom-logo-link { display: block; } .jrs2-footer__brand--logo img { display: block; height: 53px; width: auto; max-width: 264px; object-fit: contain; } @media (max-width: 767px) { .jrs2-footer__brand--logo { text-align: center; } .jrs2-footer__brand--logo img { height: 48px; max-width: 200px; margin: 0 auto; } } /* Icon added to the top-page "Flow" cards (jrs_v2_flow_section), reusing the same flow-0N.svg icons as the lower-page flow rail. The numbered red badge (li:before) stays; the icon sits between it and the label. */ .jrs2-flow li { padding-top: 92px; } .jrs2-flow__icon { display: block; width: 56px; height: 56px; margin: 0 auto 12px; padding: 12px; border-radius: 50%; background: var(--jrs-rose-soft); object-fit: contain; } /* "Reasons" card section: drop the photographic paper-texture background (its diagonal shadow line read as an unwanted arch-shaped parallax streak) and keep only the flat rose/cream gradient + the decorative pink blob (.jrs2-parallax-shape). */ .jrs2-section--soft { background-image: none; background-attachment: scroll; } /* Tagline and services sections: same fix as the reasons section above. Their base background-color already equals the hero/arch ivory tone (--jrs-ivory, #fffdfb), so the arc masks blend seamlessly once the photo-texture layer on top of that color is removed. */ .jrs2-tagline { background-image: none; } /* Services needed a real background image -- next to the now-flat tagline section above it, a bare color made the section boundary unreadable. */ .jrs2-section--services { background-color: #fffdfb; background-image: linear-gradient(115deg, rgba(255, 253, 251, .82), rgba(255, 253, 251, .6)), url("../images/services-bg.jpg"); background-size: cover; background-position: center; } /* Home tagline on desktop: 3-column layout (copy / arch photo / lead text), reference esprit-de-nature.jp. Mobile keeps the original stacked layout from the @media(max-width:767px) rules above, which still win there. */ @media (min-width: 768px) { .jrs2-tagline { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(260px, 400px) minmax(180px, 1fr); align-items: center; gap: clamp(24px, 4vw, 56px); } .jrs2-tagline__copy, .jrs2-tagline__visual, .jrs2-tagline__lead { margin: 0; } .jrs2-tagline__copy p { font-size: clamp(22px, 1.9vw, 29px); } .jrs2-tagline__lead { max-width: none; } } /* Lower-page block-editable content (faq-list / company-info / area-list / content-copy) */ .jrs2-page-intro { margin: 0 0 24px; font-size: 14px; line-height: 1.9; } .jrs-faq-list h2 { scroll-margin-top: 110px; } .jrs-faq-nav { margin-bottom: 40px; } .jrs-faq-nav__eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; color: var(--jrs-rose); font-weight: 700; font-size: 15px; } .jrs-faq-nav__lead { margin: 0 0 22px; font-size: 13px; color: #675d59; } .jrs-faq-nav__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } .jrs-faq-nav__item { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 14px; border: 1px solid var(--jrs-line); border-radius: 18px; background: #fff; text-align: center; transition: border-color .2s ease, transform .2s ease; } .jrs-faq-nav__item:hover { border-color: var(--jrs-rose); transform: translateY(-2px); } .jrs-faq-nav__icon { width: 26px; height: 26px; padding: 12px; box-sizing: content-box; border-radius: 50%; background: #fff2ef; color: var(--jrs-rose); } .jrs-faq-nav__item b { font-size: 13px; font-weight: 700; } .jrs-faq-nav__item span { font-size: 11px; line-height: 1.6; color: #8a7d78; } @media (max-width: 900px) { .jrs-faq-nav__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 767px) { .jrs-faq-nav__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .jrs-faq-nav__item { padding: 18px 10px; } } .jrs2-map { margin-top: 24px; } .jrs2-map iframe { display: block; width: 100%; height: 380px; border: 0; border-radius: 16px; } @media (max-width: 767px) { .jrs2-map iframe { height: 260px; } } /* Static (non-interactive) JRS拠点 map used on lower pages -- see jrs_v2_network_static(). The interactive .jrs2-network__map/__point styles live in blocks/network.css, which only loads on the front page. */ .jrs2-network__static-map { position: relative; width: 100%; aspect-ratio: 4 / 3; margin: 0; padding: 0; border: 1px solid var(--jrs-line); border-radius: 28px; overflow: hidden; background: radial-gradient(circle at 50% 37%, #fff 0, #fff8f6 56%, #f7e5e4 100%); box-shadow: 0 18px 45px rgba(94, 57, 51, .08); } .jrs2-network__static-map img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 24px; box-sizing: border-box; } .jrs2-network__static-map-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 24px; box-sizing: border-box; text-align: center; color: #a99a94; font-size: 13px; } .jrs2-prose { font-size: 14px; line-height: 1.9; } .jrs2-prose h2 { margin: 34px 0 12px; font: 500 22px var(--jrs-serif); } .jrs2-prose h2:first-child { margin-top: 0; } .jrs2-prose p { margin: 0 0 14px; } .jrs2-prose ul, .jrs2-prose ol { margin: 0 0 14px; padding-left: 22px; } .jrs2-prose li { margin: 4px 0; } .jrs-sitemap { display: grid; gap: 30px; } .jrs-sitemap__group h2 { margin: 0 0 12px; border-left: 4px solid var(--jrs-rose); padding-left: 13px; font: 500 20px var(--jrs-serif); } .jrs-sitemap__group ul { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; list-style: none; } .jrs-sitemap__group ul ul { flex-basis: 100%; margin-top: 8px; padding-left: 20px; } .jrs-sitemap__group li { font-size: 13px; } .jrs-sitemap__group a { font-size: 13px; } .jrs-sitemap__group a:hover { color: var(--jrs-rose); } /* Single "お客様の声" testimonial page (single-jrs_voice.php). */ .jrs2-voice-single { max-width: 820px; margin: 0 auto; } .jrs2-voice-single__head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .jrs2-voice-single__title { margin: 0 0 22px; font: 500 clamp(24px, 2.6vw, 32px)/1.5 var(--jrs-serif); } .jrs2-voice-single__body { font-size: 15px; line-height: 2; color: var(--jrs-ink); } .jrs2-voice-single__body p { margin: 0 0 16px; } .jrs2-voice-single__profile { margin: 26px 0 32px; padding-top: 18px; border-top: 1px solid var(--jrs-line); color: #746864; font-size: 13px; font-weight: 600; } /* Shared archive layout (お客様の声 / コラム一覧): filter sidebar (always open on desktop, collapsible accordion on mobile -- see [data-archive] in jrs-starter.js) + card grid. Star rating row is voice-only but lives here since it's a .jrs-post-card modifier like the rest. */ .jrs-post-card__stars { margin: 10px 0 2px; color: #e7a942; letter-spacing: .12em; font-size: 13px; } .jrs-post-card__more { display: inline-block; margin-top: 10px; color: var(--jrs-rose); font-size: 12px; font-weight: 700; } .jrs-archive { display: grid; grid-template-columns: 260px 1fr; gap: 28px; align-items: start; } .jrs-archive-filter { border: 1px solid var(--jrs-line); border-radius: 20px; background: #fff; overflow: hidden; } .jrs-archive-filter__toggle { display: none; } .jrs-archive-filter__panel { display: block; padding: 22px; } .jrs-archive-filter__group { margin-bottom: 22px; } .jrs-archive-filter__group h3 { margin: 0 0 12px; font: 700 13px var(--jrs-sans); color: var(--jrs-rose); } .jrs-archive-filter__option { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 13px; cursor: pointer; } .jrs-archive-filter__option input { width: 16px; height: 16px; accent-color: var(--jrs-rose); } .jrs-archive-filter__option span { flex: 1; } .jrs-archive-filter__option b { color: #948884; font-weight: 500; font-size: 12px; } .jrs-archive-filter__actions { display: grid; gap: 10px; padding-top: 4px; } .jrs-archive-filter__reset, .jrs-archive-filter__apply { border: 0; border-radius: 10px; padding: 13px; font-size: 13px; font-weight: 700; cursor: pointer; } .jrs-archive-filter__reset { background: #f6f0ee; color: var(--jrs-ink); } .jrs-archive-filter__apply { background: var(--jrs-rose); color: #fff; } .jrs-archive-results__count { margin: 0 0 16px; font-size: 13px; color: #746864; } .jrs-post-grid[hidden] { display: none; } .jrs-archive-empty { padding: 40px 20px; text-align: center; color: #948884; font-size: 13px; } .jrs-archive-empty[hidden] { display: none; } .jrs-archive-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 34px; } .jrs-archive-pagination[hidden] { display: none; } .jrs-archive-pagination__page { min-width: 36px; height: 36px; padding: 0 6px; border: 1px solid var(--jrs-line); border-radius: 50%; background: #fff; color: var(--jrs-ink); font-size: 13px; font-weight: 600; cursor: pointer; } .jrs-archive-pagination__page.is-current { border-color: var(--jrs-rose); background: var(--jrs-rose); color: #fff; } .jrs-archive-pagination__page:disabled { opacity: .35; cursor: default; } /* Related articles below a column post (single.php), not scoped to .jrs2-page-content (this template doesn't use that wrapper), so the card look is redefined here at a smaller size instead of reusing those rules. */ .jrs-related { margin: 56px 0 0; padding-top: 40px; border-top: 1px solid var(--jrs-line); } .jrs-related h2 { margin: 0 0 20px; font: 500 22px var(--jrs-serif); } .jrs-related .jrs-post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .jrs-related .jrs-post-card { margin: 0; padding: 0; border: 1px solid var(--jrs-line); border-radius: 16px; background: #fff; overflow: hidden; } .jrs-related .jrs-post-card__media { display: block; position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; } .jrs-related .jrs-post-card__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; } .jrs-related .jrs-post-card__body { padding: 14px; } .jrs-related .jrs-post-card__meta { display: inline-block; border-radius: 999px; padding: 4px 9px; font-size: 11px; font-weight: 700; } .jrs-related .jrs-post-card h3 { margin: 8px 0 0; font: 500 15px/1.5 var(--jrs-serif); } @media (max-width: 767px) { .jrs-related .jrs-post-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .jrs-related .jrs-post-card:nth-child(3) { display: none; } } @media (max-width: 900px) { .jrs-archive { grid-template-columns: 1fr; gap: 16px; } .jrs-archive-filter__toggle { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: #fff7f5; padding: 17px 20px; color: var(--jrs-rose); font-size: 14px; font-weight: 700; cursor: pointer; } .jrs-archive-filter__toggle-icon { width: 18px; height: 18px; color: var(--jrs-rose); } .jrs-archive-filter__chevron { width: 18px; height: 18px; margin-left: auto; color: var(--jrs-rose); transition: transform .2s ease; } .jrs-archive-filter__toggle.is-open .jrs-archive-filter__chevron { transform: rotate(180deg); } .jrs-archive-filter__panel { display: none; border-top: 1px solid var(--jrs-line); } .jrs-archive-filter__panel.is-open { display: block; } } /* 料金ページ (blocks/pricing-plans): plan cards, base rate, ¥0 banner, what's-included grid, plan comparison table, competitor comparison table, mini FAQ. Widened beyond the usual 1100px lower-page column (same technique as .jrs2-page--areas) since 3-column plan cards need more room to breathe. */ .jrs2-page--pricing .jrs2-page-content { max-width: none; padding-right: max(24px, calc((100vw - 1320px) / 2)); padding-left: max(24px, calc((100vw - 1320px) / 2)); } .jrs2-page--pricing .jrs2-page-content > * { width: min(1320px, 100%); } .jrs2-plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .jrs2-plan-card { padding: 26px; border: 1px solid var(--jrs-line); border-radius: 22px; background: #fff; } .jrs2-plan-card h3 { margin: 0 0 8px; text-align: center; font: 500 19px var(--jrs-serif); color: var(--jrs-rose); } .jrs2-plan-card__text { margin: 0 0 16px; text-align: center; font-size: 12px; line-height: 1.8; color: #6b615d; min-height: 2.6em; } .jrs2-plan-card__text p { margin: 0 0 6px; } .jrs2-plan-card__text p:last-child { margin-bottom: 0; } .jrs2-plan-card__media { margin: 0 0 16px; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 10; } .jrs2-plan-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .jrs2-plan-card__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; } .jrs2-plan-card__stats div { padding: 10px 8px; border-radius: 10px; background: #fff5f3; text-align: center; } .jrs2-plan-card__stats span { display: block; margin-bottom: 4px; font-size: 10px; color: #8a7d78; } .jrs2-plan-card__stats b { font-size: 15px; font-weight: 700; color: var(--jrs-rose); } .jrs2-plan-card__stats b small { display: block; margin-top: 2px; font-size: 10px; font-weight: 500; color: #a4938d; } .jrs2-plan-card__bullets-label { display: inline-block; margin: 0 0 8px; padding: 3px 10px; border-radius: 999px; background: var(--jrs-rose-soft); color: var(--jrs-rose); font-size: 11px; font-weight: 700; } .jrs2-plan-card__bullets { margin: 0 0 14px; padding: 0; list-style: none; font-size: 12px; line-height: 2; } .jrs2-plan-card__bullets li { position: relative; padding-left: 20px; color: #5c534f; } .jrs2-plan-card__bullets li:before { content: "✓"; position: absolute; left: 0; color: var(--jrs-rose); font-weight: 700; } .jrs2-plan-card__button { display: inline-block; color: var(--jrs-rose); font-size: 13px; font-weight: 700; } .jrs2-pricing-baserate { margin: 44px auto 50px; padding: 36px; max-width: 620px; border: 2px solid var(--jrs-rose); border-radius: 26px; text-align: center; background: #fffaf9; } .jrs2-pricing-baserate h3 { margin: 0 0 14px; font: 500 24px var(--jrs-serif); } .jrs2-pricing-baserate__note { margin: 0 0 6px; font-size: 13px; color: #6b615d; } .jrs2-pricing-baserate__price { margin: 0 0 14px; font: 700 clamp(24px, 4vw, 34px) var(--jrs-serif); color: var(--jrs-rose); } .jrs2-pricing-baserate__text { margin: 0; font-size: 13px; line-height: 1.8; color: #6b615d; } .jrs2-pricing-baserate__text p { margin: 0 0 8px; } .jrs2-pricing-baserate__text p:last-child { margin-bottom: 0; } .jrs2-pricing-banner { display: flex; align-items: center; gap: 22px; margin: 0 0 50px; padding: 30px; border-radius: 24px; background: linear-gradient(115deg, #fff3f0, #fff8f0); } .jrs2-pricing-banner__icon { flex: 0 0 auto; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; color: var(--jrs-rose); font: 700 18px var(--jrs-serif); box-shadow: 0 8px 20px rgba(217, 121, 136, .15); } .jrs2-pricing-banner h3 { margin: 0 0 8px; font: 500 19px var(--jrs-serif); } .jrs2-pricing-banner p { margin: 0 0 8px; font-size: 13px; line-height: 1.9; color: #6b615d; } .jrs2-pricing-banner p:last-child { margin-bottom: 0; } .jrs2-pricing-includes { margin: 0 0 50px; } .jrs2-pricing-includes h3 { margin: 0 0 20px; text-align: center; font: 500 20px var(--jrs-serif); } .jrs2-pricing-includes__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; } .jrs2-pricing-includes__item { padding: 20px 14px; border: 1px solid var(--jrs-line); border-radius: 18px; text-align: center; } .jrs2-pricing-includes__icon { display: inline-block; width: 26px; height: 26px; margin-bottom: 10px; object-fit: contain; color: var(--jrs-rose); } .jrs2-pricing-includes__item b { display: block; margin-bottom: 6px; font-size: 13px; } .jrs2-pricing-includes__item p { margin: 0; font-size: 11px; line-height: 1.7; color: #8a7d78; } .jrs2-pricing-table-block, .jrs2-pricing-compare { margin: 0 0 50px; } .jrs2-pricing-table-block h3, .jrs2-pricing-compare h3 { margin: 0 0 8px; text-align: center; font: 500 20px var(--jrs-serif); } .jrs2-pricing-table-block .jrs2-note, .jrs2-pricing-compare .jrs2-note { margin: 0 0 18px; } .jrs2-pricing-table-wrap { overflow-x: auto; } .jrs2-pricing-table, .jrs2-pricing-compare-table { min-width: 640px; } .jrs2-pricing-table th, .jrs2-pricing-compare-table th { width: auto; text-align: center; white-space: nowrap; } .jrs2-pricing-table td, .jrs2-pricing-compare-table td { text-align: center; } .jrs2-pricing-compare-table thead th.is-own, .jrs2-pricing-compare-table td.is-own { background: #fff5f3; color: var(--jrs-rose); font-weight: 700; } .jrs2-pricing-compare-table tr.is-total th, .jrs2-pricing-compare-table tr.is-total td { border-top: 2px solid var(--jrs-rose); font-weight: 700; } .jrs2-pricing-faq h3 { margin: 0 0 16px; text-align: center; font: 500 20px var(--jrs-serif); } @media (max-width: 1000px) { .jrs2-page--pricing .jrs2-page-content { padding-right: max(24px, calc((100vw - 1100px) / 2)); padding-left: max(24px, calc((100vw - 1100px) / 2)); } .jrs2-page--pricing .jrs2-page-content > * { width: min(1100px, 100%); } } @media (max-width: 900px) { .jrs2-plan-grid { grid-template-columns: repeat(2, 1fr); } .jrs2-pricing-includes__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 767px) { /* Single-card swipe carousel (same scroll-snap technique as .jrs2-flow on mobile) rather than a cramped 2-column grid. */ .jrs2-plan-grid { display: flex; grid-template-columns: none; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: -16px; padding: 4px 16px 8px 0; } .jrs2-plan-grid::-webkit-scrollbar { display: none; } .jrs2-plan-card { flex: 0 0 94%; scroll-snap-align: start; } .jrs2-pricing-baserate { margin: 32px 0 40px; padding: 26px 20px; } .jrs2-pricing-banner { flex-direction: column; text-align: center; gap: 14px; padding: 24px 20px; } .jrs2-pricing-includes__grid { grid-template-columns: repeat(2, 1fr); } } /* Full-width parallax background strips on lower pages (see jrs_v2_page_parallax_band()). Breaks out of .jrs2-page-content's 1100px column to the full viewport width regardless of nesting depth -- same "100vw + negative margin" technique used nowhere else in this file, kept local to this component. The image is oversized (136% height) and offset so GSAP can translate it within the strip without exposing an edge. */ .jrs2-parallax-band { position: relative; width: 100vw; margin-left: calc(50% - 50vw); height: clamp(220px, 32vw, 420px); overflow: hidden; background: #f2e9e4; } .jrs2-parallax-band__img { position: absolute; top: -18%; left: 0; width: 100%; height: 136%; object-fit: cover; will-change: transform; } @media (max-width: 767px) { .jrs2-parallax-band { height: clamp(180px, 46vw, 280px); } } @media (prefers-reduced-motion: reduce) { .jrs2-parallax-band__img { position: static; height: 100%; } } /* "初めての方へ" page blocks: intro banner, numbered flow-with-icons, icon reason cards, photo + checklist. */ .jrs2-intro-banner { display: grid; grid-template-columns: 1.3fr 1fr; align-items: stretch; gap: 0; margin: 0 0 50px; border: 1px solid var(--jrs-line); border-radius: 26px; overflow: hidden; background: linear-gradient(135deg, #fff, #fff7f4); } .jrs2-intro-banner__text { padding: 40px; } .jrs2-intro-banner__text h2 { margin: 0 0 16px; font: 500 24px/1.5 var(--jrs-serif); } .jrs2-intro-banner__text p { margin: 0 0 10px; font-size: 14px; line-height: 1.9; color: #6b615d; } .jrs2-intro-banner__text p:last-child { margin-bottom: 0; } .jrs2-intro-banner__media img { display: block; width: 100%; height: 100%; min-height: 260px; object-fit: cover; } /* No overflow:hidden on the section itself -- .jrs2-flow-detailed is a normal narrow, centered .jrs2-section, and clipping there would cut off the 100vw-wide background breakout below before it ever reaches the viewport edges. Only the breakout element itself clips its own image. */ .jrs2-flow-detailed { position: relative; } .jrs2-flow-detailed__bg { position: absolute; top: 0; left: 50%; z-index: 0; width: 100vw; height: 100%; overflow: hidden; transform: translateX(-50%); } .jrs2-flow-detailed__bg:after { content: ""; position: absolute; inset: 0; background: rgba(255, 253, 251, .74); } .jrs2-flow-detailed__bg-img { position: absolute; top: -18%; left: 0; width: 100%; height: 136%; object-fit: cover; will-change: transform; } .jrs2-flow-detailed .jrs2-section-title, .jrs2-flow-detailed__list { position: relative; z-index: 1; } .jrs2-flow-detailed__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; list-style: none; margin: 0; padding: 0; } .jrs2-flow-detailed__list li { position: relative; padding: 74px 22px 32px; border: 1px solid var(--jrs-line); border-radius: 999px 999px 20px 20px; background: #fff; text-align: center; box-shadow: 0 14px 30px rgba(72, 48, 43, .06); } .jrs2-flow-detailed__number { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--jrs-rose); color: #fff; font-size: 11px; font-weight: 700; } /* Desktop icon is deliberately ~150% of the mobile size (see media query below): a taller icon pushes the card taller too, which is what actually fixes the "squashed" arch -- the arch's roundness is a function of the card's own height, not something tunable via border-radius alone. */ .jrs2-flow-detailed__icon { width: 46px; height: 46px; margin: 10px 0 18px; color: var(--jrs-rose); } .jrs2-flow-detailed__list h3 { margin: 0 0 8px; font: 500 16px var(--jrs-serif); } .jrs2-flow-detailed__list p { margin: 0; font-size: 12px; line-height: 1.8; color: #6b615d; } .jrs2-reason-cards__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; } .jrs2-reason-cards__item { padding: 26px 16px; border: 1px solid var(--jrs-line); border-radius: 20px; background: rgba(255, 255, 255, .8); text-align: center; } .jrs2-reason-cards__icon { width: 28px; height: 28px; margin-bottom: 12px; color: var(--jrs-rose); } .jrs2-reason-cards__item b { display: block; margin-bottom: 8px; font-family: var(--jrs-serif); font-size: 15px; } .jrs2-reason-cards__item p { margin: 0; font-size: 12px; line-height: 1.8; color: #6b615d; } .jrs2-advice-checklist__layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 36px; align-items: center; } .jrs2-advice-checklist__media img { display: block; width: 100%; border-radius: 22px; object-fit: cover; aspect-ratio: 4 / 5; } .jrs2-advice-checklist__list { display: grid; gap: 18px; list-style: none; margin: 0; padding: 0; } .jrs2-advice-checklist__list li { display: flex; gap: 14px; align-items: flex-start; } .jrs2-advice-checklist__check { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 2px; color: var(--jrs-rose); } .jrs2-advice-checklist__list b { display: block; margin-bottom: 4px; font-family: var(--jrs-serif); font-size: 15px; } .jrs2-advice-checklist__list p { margin: 0; font-size: 13px; line-height: 1.8; color: #6b615d; } @media (max-width: 900px) { .jrs2-flow-detailed__list { grid-template-columns: repeat(2, 1fr); } .jrs2-reason-cards__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 767px) { .jrs2-intro-banner { grid-template-columns: 1fr; } .jrs2-intro-banner__text { padding: 26px 20px; } .jrs2-intro-banner__media img { min-height: 180px; } .jrs2-flow-detailed__list { grid-template-columns: repeat(2, 1fr); gap: 12px; } .jrs2-flow-detailed__list li { padding: 44px 14px 18px; } .jrs2-flow-detailed__icon { width: 30px; height: 30px; margin: 6px 0 14px; } .jrs2-reason-cards__grid { grid-template-columns: repeat(2, 1fr); } .jrs2-advice-checklist__layout { grid-template-columns: 1fr; gap: 20px; } .jrs2-advice-checklist__media img { aspect-ratio: 16 / 9; } } /* "調査内容" page card grid: PC 3 columns, mobile 2 columns (per the site owner -- not the usual single-column mobile stack). */ .jrs2-service-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; } .jrs2-service-nav__item { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--jrs-line); border-radius: 999px; background: #fff; color: var(--jrs-ink); font-size: 12px; font-weight: 600; white-space: nowrap; } .jrs2-service-nav__item:hover { border-color: var(--jrs-rose); color: var(--jrs-rose); } .jrs2-service-nav__icon { width: 14px; height: 14px; color: var(--jrs-rose); } .jrs2-service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .jrs2-service-grid__card { display: flex; flex-direction: column; padding: 22px; border: 1px solid var(--jrs-line); border-radius: 20px; background: #fff; scroll-margin-top: 100px; } .jrs2-service-grid__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .jrs2-service-grid__number { display: grid; place-items: center; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--jrs-rose); color: #fff; font-size: 11px; font-weight: 700; } .jrs2-service-grid__head h2 { flex: 1; margin: 0; font: 500 17px var(--jrs-serif); } .jrs2-service-grid__icon { flex: 0 0 auto; width: 22px; height: 22px; color: var(--jrs-rose); } .jrs2-service-grid__media { margin-bottom: 14px; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 10; } .jrs2-service-grid__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .jrs2-service-grid__text { margin-bottom: 14px; font-size: 12px; line-height: 1.9; color: #6b615d; } .jrs2-service-grid__text p { margin: 0 0 8px; } .jrs2-service-grid__text p:last-child { margin-bottom: 0; } .jrs2-service-grid__label { margin: 0 0 8px; font-size: 11px; font-weight: 700; color: var(--jrs-rose); } .jrs2-service-grid__recommend { margin: 0 0 16px; padding: 0; list-style: none; font-size: 12px; line-height: 1.9; } .jrs2-service-grid__recommend li { position: relative; padding-left: 16px; color: #5c534f; } .jrs2-service-grid__recommend li:before { content: "・"; position: absolute; left: 0; color: var(--jrs-rose); } .jrs2-service-grid__content { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin: 0 0 16px; padding: 0; list-style: none; font-size: 11px; } .jrs2-service-grid__content li { position: relative; padding-left: 16px; color: #5c534f; } .jrs2-service-grid__content li:before { content: "✓"; position: absolute; left: 0; color: var(--jrs-rose); font-weight: 700; } .jrs2-service-grid__button { display: block; margin-top: auto; padding: 11px; border: 1px solid var(--jrs-rose); border-radius: 999px; text-align: center; color: var(--jrs-rose); font-size: 12px; font-weight: 700; } .jrs2-service-grid__button:hover { background: var(--jrs-rose); color: #fff; } @media (max-width: 900px) { .jrs2-service-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { /* Single column rather than 2 -- with a full 9-card page, one wide readable card beats two cramped ones. The nav above becomes a horizontal swipe strip so jumping to card 7-9 doesn't need scrolling past everything in between. */ .jrs2-service-nav { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 20px; padding: 0 16px 6px; scrollbar-width: none; } .jrs2-service-nav::-webkit-scrollbar { display: none; } .jrs2-service-nav__item { flex: 0 0 auto; } .jrs2-service-grid { grid-template-columns: 1fr; gap: 16px; } .jrs2-service-grid__card { padding: 20px; } .jrs2-service-grid__head h2 { font-size: 16px; } .jrs2-service-grid__media { aspect-ratio: 16 / 9; } .jrs2-service-grid__text { font-size: 13px; } .jrs2-service-grid__content { grid-template-columns: 1fr 1fr; } } /* "お問い合わせ" page: 3 contact-method cards, form + phone panel (including Contact Form 7's own markup, styled to match the theme since CF7 ships unstyled), simple 2-col FAQ. */ .jrs2-contact-methods-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .jrs2-contact-methods-grid__card { display: flex; flex-direction: column; align-items: center; padding: 32px 24px; border: 1px solid var(--jrs-line); border-radius: 22px; background: #fff; text-align: center; } .jrs2-contact-methods-grid__icon { box-sizing: content-box; width: 30px; height: 30px; margin-bottom: 16px; padding: 14px; border-radius: 50%; background: var(--jrs-rose-soft); color: var(--jrs-rose); } .jrs2-contact-methods-grid__card h3 { margin: 0 0 10px; font: 500 18px var(--jrs-serif); } .jrs2-contact-methods-grid__text { margin-bottom: 20px; font-size: 13px; line-height: 1.9; color: #6b615d; } .jrs2-contact-methods-grid__text p { margin: 0 0 8px; } .jrs2-contact-methods-grid__text p:last-child { margin-bottom: 0; } .jrs2-contact-methods-grid__button { display: block; width: 100%; margin-top: auto; padding: 13px; border: 0; border-radius: 10px; background: var(--jrs-rose); color: #fff; font-size: 13px; font-weight: 700; } .jrs2-contact-methods-grid__button.is-line { background: var(--jrs-green); } .jrs2-contact-methods-grid__note { margin: 10px 0 0; font-size: 11px; color: var(--jrs-rose); } .jrs2-contact-panel { display: grid; grid-template-columns: 1.15fr .85fr; gap: 30px; align-items: start; scroll-margin-top: 90px; } .jrs2-contact-panel h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font: 500 20px var(--jrs-serif); } .jrs2-contact-panel__icon { flex: 0 0 auto; width: 22px; height: 22px; color: var(--jrs-rose); } .jrs2-contact-panel__form, .jrs2-contact-panel__phone { padding: 32px; border: 1px solid var(--jrs-line); border-radius: 22px; background: #fff; } .jrs2-contact-panel__intro { margin-bottom: 18px; font-size: 13px; line-height: 1.9; color: #6b615d; } .jrs2-contact-panel__intro p { margin: 0 0 6px; } .jrs2-contact-panel__number { display: block; margin-bottom: 6px; color: var(--jrs-rose); font: 700 30px var(--jrs-serif); } .jrs2-contact-panel__phone-note { margin: 0 0 16px; color: var(--jrs-rose); font-size: 12px; font-weight: 700; } .jrs2-contact-panel__phone-text { margin-bottom: 18px; font-size: 13px; line-height: 1.8; color: #6b615d; } .jrs2-contact-panel__table { display: grid; gap: 10px; margin: 0 0 20px; padding: 18px; border-radius: 14px; background: #fff7f5; } .jrs2-contact-panel__table div { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; } .jrs2-contact-panel__table dt { margin: 0; color: #8a7d78; } .jrs2-contact-panel__table dd { margin: 0; font-weight: 600; text-align: right; } .jrs2-contact-panel__checklist p { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--jrs-rose); } .jrs2-contact-panel__checklist ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .jrs2-contact-panel__checklist li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #5c534f; } .jrs2-contact-panel__check { flex: 0 0 auto; width: 16px; height: 16px; color: var(--jrs-rose); } /* Contact Form 7 ships with no styling of its own. */ .jrs2-contact-panel__form .wpcf7-form p { margin: 0 0 16px; font-size: 13px; font-weight: 700; } .jrs2-contact-panel__form .wpcf7-form input[type="text"], .jrs2-contact-panel__form .wpcf7-form input[type="email"], .jrs2-contact-panel__form .wpcf7-form input[type="tel"], .jrs2-contact-panel__form .wpcf7-form select, .jrs2-contact-panel__form .wpcf7-form textarea { box-sizing: border-box; display: block; width: 100%; margin-top: 8px; border: 1px solid var(--jrs-line); border-radius: 8px; padding: 12px; font: inherit; font-weight: 400; } .jrs2-contact-panel__form .wpcf7-form textarea { min-height: 120px; resize: vertical; } .jrs2-contact-panel__form .wpcf7-form input[type="submit"] { width: 100%; border: 0; border-radius: 10px; padding: 15px 28px; background: var(--jrs-rose); color: #fff; font-weight: 700; cursor: pointer; } .jrs2-contact-panel__form .wpcf7-form input[type="submit"]:hover { opacity: .9; } .jrs2-contact-panel__form .wpcf7-spinner { display: none; } .jrs2-contact-panel__form .wpcf7-not-valid-tip { display: block; margin-top: 6px; color: #c0454f; font-size: 11px; font-weight: 400; } .jrs2-contact-panel__form .wpcf7-response-output { margin-top: 16px; padding: 12px 16px; border-radius: 10px; border: 1px solid var(--jrs-line); font-size: 12px; } .jrs2-contact-faq__list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; } .jrs2-contact-faq__list details { margin: 0; } @media (max-width: 900px) { .jrs2-contact-methods-grid { grid-template-columns: 1fr; } .jrs2-contact-panel { grid-template-columns: 1fr; } } @media (max-width: 767px) { .jrs2-contact-panel__form, .jrs2-contact-panel__phone { padding: 22px; } .jrs2-contact-panel__number { font-size: 24px; } .jrs2-contact-faq__list { grid-template-columns: 1fr; } } /* "調査の流れ" page: vertical alternating timeline, deeper (photo + a couple of paragraphs + duration estimate per step) than the summary card grid jrs_v2_flow_detailed() already gives the "初めての方へ" page. */ .jrs2-timeline { position: relative; display: grid; gap: 56px; } .jrs2-timeline:before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--jrs-line); transform: translateX(-50%); } .jrs2-timeline__item { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; } .jrs2-timeline__item:nth-child(even) .jrs2-timeline__media { order: 2; } .jrs2-timeline__marker { position: absolute; top: 50%; left: 50%; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 64px; height: 64px; border-radius: 50%; background: #fff; border: 2px solid var(--jrs-rose); color: var(--jrs-rose); transform: translate(-50%, -50%); } .jrs2-timeline__marker-icon { width: 20px; height: 20px; } .jrs2-timeline__marker span { font-size: 11px; font-weight: 700; } .jrs2-timeline__media { border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 3; } .jrs2-timeline__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .jrs2-timeline__duration { display: inline-block; margin: 0 0 10px; padding: 4px 12px; border-radius: 999px; background: var(--jrs-rose-soft); color: var(--jrs-rose); font-size: 11px; font-weight: 700; } .jrs2-timeline__content h3 { margin: 0 0 12px; font: 500 22px var(--jrs-serif); } .jrs2-timeline__text { font-size: 14px; line-height: 1.9; color: #6b615d; } .jrs2-timeline__text p { margin: 0 0 10px; } .jrs2-timeline__text p:last-child { margin-bottom: 0; } @media (max-width: 900px) { .jrs2-timeline:before { left: 26px; } .jrs2-timeline__item { grid-template-columns: 1fr; padding-left: 58px; gap: 16px; } .jrs2-timeline__item:nth-child(even) .jrs2-timeline__media { order: 0; } .jrs2-timeline__marker { top: 0; left: 26px; width: 52px; height: 52px; } .jrs2-timeline__marker-icon { width: 18px; height: 18px; } .jrs2-timeline__media { margin-top: 54px; aspect-ratio: 16 / 9; } .jrs2-timeline__content h3 { font-size: 18px; } .jrs2-timeline__text { font-size: 13px; } } /* service-detail-* blocks (調査項目の詳細ページ) */ .jrs2-sd-intro__layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; } .jrs2-sd-intro .jrs2-script, .jrs2-sd-timeline .jrs2-section-title span, .jrs2-sd-cases .jrs2-section-title span, .jrs2-sd-pricing .jrs2-script, .jrs2-advice-checklist--worry .jrs2-section-title span { font-size: 40px; } .jrs2-sd-intro__text p { margin: 0 0 10px; font-size: 14px; line-height: 1.9; color: #6b615d; } .jrs2-sd-intro__text p:last-of-type { margin-bottom: 22px; } .jrs2-sd-intro__badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .jrs2-sd-intro__badge { position: relative; padding: 56px 14px 20px; border: 1px solid var(--jrs-line); border-radius: 999px 999px 16px 16px; background: #fff; text-align: center; box-shadow: 0 12px 26px rgba(72, 48, 43, .06); } .jrs2-sd-intro__badge-icon { display: block; width: 34px; height: 34px; margin: 0 auto 12px; color: var(--jrs-rose); } .jrs2-sd-intro__badge b { display: block; margin-bottom: 4px; font-family: var(--jrs-serif); font-size: 13px; } .jrs2-sd-intro__badge p { margin: 0; font-size: 11px; line-height: 1.6; color: #75695f; } .jrs2-sd-intro__media img { display: block; width: 100%; height: 100%; min-height: 320px; border-radius: 22px; object-fit: cover; } .jrs2-sd-content .jrs2-section-title span { font-size: 40px; } .jrs2-sd-content__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .jrs2-sd-content__card { padding: 24px; border: 1px solid var(--jrs-line); border-radius: 20px; background: #fff; } .jrs2-sd-content__media { position: relative; margin-bottom: 16px; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 10; } .jrs2-sd-content__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .jrs2-sd-content__number { position: absolute; top: 12px; left: 12px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--jrs-rose); color: #fff; font-size: 12px; font-weight: 700; box-shadow: 0 6px 14px rgba(72, 48, 43, .22); } .jrs2-sd-content__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .jrs2-sd-content__icon { flex: 0 0 auto; width: 22px; height: 22px; color: var(--jrs-rose); } .jrs2-sd-content__card h3 { margin: 0; font: 500 17px var(--jrs-serif); } .jrs2-sd-content__card p { margin: 0; font-size: 13px; line-height: 1.8; color: #6b615d; } .jrs2-sd-timeline__layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: 36px; align-items: center; } .jrs2-sd-timeline__list { display: grid; gap: 0; } .jrs2-sd-timeline__row { display: grid; grid-template-columns: 90px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--jrs-line); } .jrs2-sd-timeline__row:first-child { padding-top: 0; } .jrs2-sd-timeline__row:last-child { border-bottom: 0; padding-bottom: 0; } .jrs2-sd-timeline__time { font-family: var(--jrs-serif); font-size: 15px; color: var(--jrs-rose); } .jrs2-sd-timeline__row b { display: block; font-size: 14px; } .jrs2-sd-timeline__row p { margin: 4px 0 0; font-size: 12px; line-height: 1.7; color: #6b615d; } .jrs2-sd-timeline__media img { display: block; width: 100%; border-radius: 20px; object-fit: cover; aspect-ratio: 4 / 5; } .jrs2-sd-cases__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .jrs2-sd-cases__card { padding: 22px; border: 1px solid var(--jrs-line); border-radius: 20px; background: #fff; } .jrs2-sd-cases__card figure { margin: 0 0 16px; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 10; } .jrs2-sd-cases__card img { display: block; width: 100%; height: 100%; object-fit: cover; } .jrs2-sd-cases__label { display: inline-block; margin-bottom: 8px; color: var(--jrs-rose); font-size: 11px; font-weight: 700; letter-spacing: .06em; } .jrs2-sd-cases__card h3 { margin: 0 0 10px; font: 500 16px/1.5 var(--jrs-serif); } .jrs2-sd-cases__card p { margin: 0 0 8px; font-size: 12px; line-height: 1.9; color: #6b615d; } .jrs2-sd-cases__card p:last-child { margin-bottom: 0; } .jrs2-sd-pricing__panel { padding: 40px; border: 1px solid var(--jrs-line); border-radius: 24px; background: linear-gradient(135deg, #fff, #fff7f4); text-align: center; } .jrs2-sd-pricing__panel h2 { margin: 4px 0 12px; font: 500 24px var(--jrs-serif); } .jrs2-sd-pricing__panel p { max-width: 560px; margin: 0 auto 20px; font-size: 14px; line-height: 1.9; color: #6b615d; } @media (max-width: 900px) { .jrs2-sd-intro__layout { grid-template-columns: 1fr; } .jrs2-sd-intro__badges { grid-template-columns: repeat(2, 1fr); } .jrs2-sd-intro__media img { min-height: 200px; } .jrs2-sd-content__grid { grid-template-columns: 1fr; } .jrs2-sd-timeline__layout { grid-template-columns: 1fr; } .jrs2-sd-cases__grid { grid-template-columns: 1fr; } .jrs2-sd-pricing__panel { padding: 28px 22px; } } @media (max-width: 480px) { .jrs2-sd-intro__badge { padding: 46px 10px 16px; } .jrs2-sd-intro__badge-icon { width: 26px; height: 26px; margin-bottom: 8px; } .jrs2-sd-intro__badge b { font-size: 11.5px; } .jrs2-sd-intro__badge p { font-size: 10px; } } /* area-detail-* blocks (対応エリアの詳細ページ) */ .jrs2-ad-intro__layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; } .jrs2-ad-intro__text p { margin: 0 0 10px; font-size: 14px; line-height: 1.9; color: #6b615d; } .jrs2-ad-intro__text p:last-of-type { margin-bottom: 20px; } .jrs2-ad-intro__features { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 0 0 18px; padding: 0; list-style: none; } .jrs2-ad-intro__features li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.7; color: #5c534f; } .jrs2-ad-intro__feature-icon { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px; color: var(--jrs-rose); } .jrs2-ad-intro__comment { margin: 0; padding: 14px 18px; border-left: 3px solid var(--jrs-rose); background: var(--jrs-rose-soft); font-size: 12.5px; line-height: 1.8; color: #6b5b58; } .jrs2-ad-intro__media img { display: block; width: 100%; height: 100%; min-height: 320px; border-radius: 22px; object-fit: cover; } .jrs2-ad-tags__list { display: flex; flex-wrap: wrap; gap: 10px; } .jrs2-ad-tags__tag { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border: 1px solid var(--jrs-line); border-radius: 999px; background: #fff; color: var(--jrs-ink); font-size: 12px; font-weight: 600; } .jrs2-ad-tags__tag.is-link:hover { border-color: var(--jrs-rose); background: var(--jrs-rose); color: #fff; } .jrs2-ad-tags__tag.is-link:hover .jrs2-ad-tags__icon { color: #fff; } .jrs2-ad-tags__icon { width: 12px; height: 12px; color: var(--jrs-rose); } .jrs2-ad-topics__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .jrs2-ad-topics__card { display: block; padding: 24px; border: 1px solid var(--jrs-line); border-radius: 18px; background: #fff; } .jrs2-ad-topics__card:hover { border-color: var(--jrs-rose); } .jrs2-ad-topics__media { margin-bottom: 14px; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 10; } .jrs2-ad-topics__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .jrs2-ad-topics__card h3 { margin: 0 0 10px; font: 500 16px/1.5 var(--jrs-serif); } .jrs2-ad-topics__card p { margin: 0 0 14px; font-size: 12.5px; line-height: 1.8; color: #6b615d; } .jrs2-ad-topics__card span { font-size: 12px; font-weight: 700; color: var(--jrs-rose); } .jrs2-ad-tags__layout { display: flex; gap: 30px; align-items: center; } .jrs2-ad-tags__layout .jrs2-ad-tags__list { flex: 1; } .jrs2-ad-tags__tag.is-current { border-color: var(--jrs-rose); background: var(--jrs-rose); color: #fff; font-weight: 700; } .jrs2-ad-tags__tag.is-current .jrs2-ad-tags__icon { color: #fff; } .jrs2-ad-tags__badge { flex: 0 0 auto; display: grid; place-items: center; width: 128px; height: 128px; border-radius: 50%; background: linear-gradient(135deg, var(--jrs-rose), #eb98a2); color: #fff; text-align: center; line-height: 1.3; } .jrs2-ad-tags__badge span { font-size: 11px; } .jrs2-ad-tags__badge b { font-family: var(--jrs-serif); font-size: 16px; } .jrs2-ad-tags__badge--image { background: none; object-fit: contain; } .jrs2-ad-voice__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .jrs2-ad-voice__card { padding: 24px; border: 1px solid var(--jrs-line); border-radius: 18px; background: #fff; } .jrs2-ad-voice__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .jrs2-ad-voice__avatar { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--jrs-rose-soft); color: var(--jrs-rose); } .jrs2-ad-voice__head span { font-size: 12px; font-weight: 700; color: #6b615d; } .jrs2-ad-voice__card p { margin: 0; font-size: 13px; line-height: 1.9; color: #4a423f; } @media (max-width: 900px) { .jrs2-ad-intro__layout { grid-template-columns: 1fr; } .jrs2-ad-intro__features { grid-template-columns: 1fr; } .jrs2-ad-intro__media img { min-height: 200px; } .jrs2-ad-topics__grid { grid-template-columns: 1fr; } .jrs2-ad-tags__layout { flex-direction: column; } .jrs2-ad-tags__badge { width: 108px; height: 108px; } .jrs2-ad-voice__grid { grid-template-columns: 1fr; } } /* area-detail dedicated LP hero (jrs_v2_area_detail_hero) -- full-width background photo, editable via the area card's "hero_image" field */ .jrs2-ad-hero { position: relative; width: 100%; min-height: 620px; isolation: isolate; overflow: hidden; background: #f2e9e4; } .jrs2-ad-hero__media { position: absolute; inset: 0; z-index: 0; } .jrs2-ad-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .jrs2-ad-hero__media:after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 249, 246, .96) 0%, rgba(255, 249, 246, .82) 40%, rgba(255, 249, 246, .18) 72%, rgba(255, 249, 246, .05) 100%); } .jrs2-ad-hero__inner { position: relative; z-index: 2; width: min(1160px, calc(100% - 48px)); margin: 0 auto; padding: 100px 0 70px; } .jrs2-ad-hero__breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; font-size: 11px; color: #8a7d78; } .jrs2-ad-hero__breadcrumb a { color: #8a7d78; } .jrs2-ad-hero__breadcrumb a:hover { color: var(--jrs-rose); } .jrs2-ad-hero__badge { display: inline-block; margin-bottom: 16px; padding: 8px 18px; border-radius: 999px; background: var(--jrs-rose-soft); color: var(--jrs-rose); font-size: 12px; font-weight: 700; } .jrs2-ad-hero h1 { max-width: 640px; margin: 0 0 16px; font: 500 clamp(28px, 3.4vw, 42px)/1.5 var(--jrs-serif); } .jrs2-ad-hero h1 strong { color: var(--jrs-rose); } .jrs2-ad-hero__lead { max-width: 480px; margin: 0 0 24px; font-size: 14px; line-height: 1.9; color: #6b615d; } .jrs2-ad-hero__badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; } .jrs2-ad-hero__badges span { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border: 1px solid var(--jrs-line); border-radius: 14px; background: rgba(255, 255, 255, .92); font-size: 12px; font-weight: 600; } .jrs2-ad-hero__badge-icon { flex: 0 0 auto; width: 16px; height: 16px; color: var(--jrs-rose); } .jrs2-ad-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; } .jrs2-ad-hero__action { display: flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: 999px; color: #fff; font-weight: 700; box-shadow: 0 10px 22px rgba(47, 32, 28, .16); } .jrs2-ad-hero__action.is-phone { background: var(--jrs-rose); } .jrs2-ad-hero__action.is-line { background: var(--jrs-green); } .jrs2-ad-hero__action.is-mail { background: var(--jrs-beige); } .jrs2-ad-hero__action-icon { width: 18px; height: 18px; object-fit: contain; } .jrs2-ad-hero__action span { display: block; font-size: 14px; line-height: 1.3; } .jrs2-ad-hero__action small { display: block; font-weight: 400; font-size: 10px; opacity: .85; } .jrs2-ad-hero__free { position: absolute; z-index: 2; right: clamp(20px, 4vw, 64px); bottom: 40px; display: grid; place-items: center; width: 116px; height: 116px; border-radius: 50%; background: linear-gradient(135deg, var(--jrs-rose), #eb98a2); color: #fff; text-align: center; line-height: 1.3; box-shadow: 0 10px 24px rgba(217, 121, 136, .35); } .jrs2-ad-hero__free b { font-size: 10px; font-weight: 600; } .jrs2-ad-hero__free strong { font-family: var(--jrs-serif); font-size: 24px; font-weight: 500; } .jrs2-ad-hero__free em { font-style: normal; font-size: 9px; } .jrs2-ad-hero__free--image { width: 116px; height: 116px; border-radius: 50%; object-fit: contain; background: none; box-shadow: none; } @media (max-width: 900px) { .jrs2-ad-hero { min-height: 0; } .jrs2-ad-hero__media:after { background: linear-gradient(180deg, rgba(255, 249, 246, .3) 0%, rgba(255, 249, 246, .88) 55%, rgba(255, 249, 246, .98) 100%); } .jrs2-ad-hero__inner { width: calc(100% - 32px); padding: 220px 0 40px; } .jrs2-ad-hero h1 { max-width: none; } .jrs2-ad-hero__free { width: 90px; height: 90px; bottom: 20px; right: 16px; } .jrs2-ad-hero__free--image { width: 90px; height: 90px; } .jrs2-ad-hero__free strong { font-size: 19px; } } /* Global nav + mega menu (jrs_v2_primary_nav_items / jrs_v2_mega_menu) */ .jrs2-nav { display: flex; gap: clamp(6px, 1.2vw, 18px); align-items: center; white-space: nowrap; } .jrs2-nav-item { position: static; } .jrs2-nav-item > a { display: flex; align-items: center; gap: 3px; padding: 8px 2px; font-size: 12px; font-weight: 600; } .jrs2-nav-item > a:hover { color: var(--jrs-rose); } .jrs2-nav-item__caret { font-size: 8px; transition: transform .2s ease, color .2s ease; } .jrs2-nav-item.has-mega:hover .jrs2-nav-item__caret, .jrs2-nav-item.has-mega:focus-within .jrs2-nav-item__caret { transform: rotate(180deg); color: var(--jrs-rose); } .jrs2-mega-wrap { position: fixed; top: 78px; left: 0; right: 0; z-index: 70; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease, visibility .2s; } .jrs2-nav-item.has-mega:hover .jrs2-mega-wrap, .jrs2-nav-item.has-mega:focus-within .jrs2-mega-wrap { opacity: 1; visibility: visible; transform: translateY(0); } .jrs2-mega { background: #fff; border-bottom: 1px solid var(--jrs-line); box-shadow: 0 24px 40px rgba(72, 48, 43, .12); } .jrs2-mega__inner { display: grid; grid-template-columns: .82fr 2.4fr; gap: 40px; width: min(1200px, calc(100% - 64px)); margin: 0 auto; padding: 34px 0; } .jrs2-mega__list-title { display: flex; align-items: center; justify-content: space-between; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--jrs-rose); font: 500 15px var(--jrs-serif); color: var(--jrs-ink); } .jrs2-mega__list-title span { color: var(--jrs-rose); font-size: 11px; } .jrs2-mega__list ul { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; } .jrs2-mega__list a { display: flex; align-items: center; gap: 6px; padding: 8px 6px; border-radius: 8px; font-size: 12.5px; color: #5c534f; } .jrs2-mega__list a:hover { background: var(--jrs-rose-soft); color: var(--jrs-rose); } .jrs2-mega__list a span { font-size: 10px; color: var(--jrs-rose); } .jrs2-mega__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .jrs2-mega__card { display: block; border: 1px solid var(--jrs-line); border-radius: 16px; overflow: hidden; background: #fff; } .jrs2-mega__card:hover { border-color: var(--jrs-rose); } .jrs2-mega__card-media { aspect-ratio: 4 / 3; overflow: hidden; } .jrs2-mega__card-media img { display: block; width: 100%; height: 100%; object-fit: cover; } .jrs2-mega__card h3 { margin: 12px 12px 4px; font: 500 14px var(--jrs-serif); } .jrs2-mega__card p { margin: 0 12px 10px; font-size: 11px; line-height: 1.6; color: #6b615d; } .jrs2-mega__card > span { display: block; margin: 0 12px 14px; font-size: 11px; font-weight: 700; color: var(--jrs-rose); } /* SNS icon row -- shared by the footer, mobile drawer, and CONTACT modal (jrs_v2_sns_icons()) */ .jrs2-sns { display: flex; gap: 10px; } .jrs2-sns a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--jrs-ink); color: #fff; } .jrs2-sns a:hover { background: var(--jrs-rose); } .jrs2-sns a.is-custom { background: none; } .jrs2-sns a.is-custom:hover { background: none; } .jrs2-sns__icon { width: 17px; height: 17px; } /* Custom-uploaded icon: shown at its own natural colors (see jrs_v2_sns_icon_markup() for why this can't be recolored via CSS), just constrained to a consistent size so mismatched source files don't throw the row out of alignment */ .jrs2-sns__icon--custom-img { width: 32px; height: 32px; object-fit: contain; } .jrs2-contact__sns { justify-content: center; margin: 22px 0 0; } .jrs2-contact__sns a { background: rgba(255, 255, 255, .18); backdrop-filter: blur(4px); } .jrs2-contact__sns a.is-custom { background: none; backdrop-filter: none; } .jrs2-contact__sns a:hover { background: var(--jrs-rose); } /* Mobile drawer (replaces the old plain dropdown nav) */ .jrs2-mobile-drawer[hidden] { display: none; } .jrs2-mobile-drawer { position: fixed; inset: 0; z-index: 190; } .jrs2-mobile-drawer__backdrop { position: absolute; inset: 0; background: rgba(48, 42, 41, .45); opacity: 0; transition: opacity .25s ease; } .jrs2-mobile-drawer.is-visible .jrs2-mobile-drawer__backdrop { opacity: 1; } .jrs2-mobile-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(320px, 86vw); background: rgba(255, 253, 251, .7); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: -10px 0 30px rgba(48, 42, 41, .18); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .3s ease; overflow-y: auto; } .jrs2-mobile-drawer.is-visible .jrs2-mobile-drawer__panel { transform: translateX(0); } .jrs2-mobile-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--jrs-line); } .jrs2-mobile-drawer__head strong { font: 400 20px "DM Serif Display", var(--jrs-serif); } .jrs2-mobile-drawer__logo { max-width: 190px; } .jrs2-mobile-drawer__logo img { display: block; max-height: 34px; width: auto; } .jrs2-mobile-drawer__close { border: 0; background: transparent; font-size: 26px; line-height: 1; color: var(--jrs-ink); } .jrs2-mobile-drawer__nav { padding: 8px 10px; } .jrs2-mobile-drawer__row { display: flex; align-items: center; } .jrs2-mobile-drawer__row > a { flex: 1; display: flex; align-items: center; gap: 12px; padding: 13px 10px; border-radius: 10px; font-size: 13px; font-weight: 600; } .jrs2-mobile-drawer__row > a:hover { background: var(--jrs-rose-soft); } .jrs2-mobile-drawer__icon { flex: 0 0 auto; width: 18px; height: 18px; color: var(--jrs-rose); } .jrs2-mobile-drawer__expand { width: 40px; height: 40px; border: 0; background: transparent; color: var(--jrs-rose); font-size: 12px; transition: transform .2s ease; } .jrs2-mobile-drawer__expand[aria-expanded="true"] { transform: rotate(180deg); } .jrs2-mobile-drawer__sub { max-height: 0; overflow: hidden; margin: 0; padding: 0 10px 0 42px; list-style: none; transition: max-height .3s ease; } .jrs2-mobile-drawer__item.is-open .jrs2-mobile-drawer__sub { max-height: 600px; padding-bottom: 8px; } .jrs2-mobile-drawer__sub li a { display: block; padding: 9px 6px; font-size: 12px; color: #5c534f; } .jrs2-mobile-drawer__actions { display: grid; gap: 10px; padding: 16px 20px; } .jrs2-mobile-drawer__button { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; border-radius: 10px; color: #fff; font-size: 13px; font-weight: 700; } .jrs2-mobile-drawer__button svg, .jrs2-mobile-drawer__button-icon { width: 16px; height: 16px; object-fit: contain; flex: 0 0 auto; } .jrs2-mobile-drawer__button.is-line { background: var(--jrs-green); } .jrs2-mobile-drawer__button.is-mail { background: var(--jrs-beige); } .jrs2-mobile-drawer__sns { justify-content: center; padding: 4px 20px 26px; } @media (max-width: 900px) { .jrs2-mega-wrap { display: none; } } /* Footer: multi-column layout + top wave + blurred glow texture (KKI-style reference, in the JRS rose/beige palette) */ .jrs2-footer { position: relative; overflow: hidden; padding: 0 max(20px, calc((100% - 1200px) / 2)); background: linear-gradient(160deg, #fff6f2, #fdeee9); border-top: 0; } .jrs2-footer__wave { position: absolute; top: 0; left: 50%; z-index: 0; width: 100vw; transform: translateX(-50%); line-height: 0; } .jrs2-footer__wave svg { display: block; width: 100%; height: 64px; } .jrs2-footer__glow { position: absolute; z-index: 0; border-radius: 50%; filter: blur(60px); pointer-events: none; opacity: .5; } .jrs2-footer__glow--1 { width: 340px; height: 340px; left: -110px; bottom: -130px; background: radial-gradient(circle, var(--jrs-rose) 0%, transparent 70%); } .jrs2-footer__glow--2 { width: 300px; height: 300px; right: -90px; bottom: -150px; background: radial-gradient(circle, var(--jrs-beige) 0%, transparent 70%); } .jrs2-footer__main { position: relative; z-index: 1; display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 40px; padding: 78px 0 40px; } .jrs2-footer__brand-col strong { display: block; margin-bottom: 10px; font: 400 26px "DM Serif Display", var(--jrs-serif); } .jrs2-footer__brand-col p { max-width: 260px; margin: 0 0 18px; font-size: 12px; line-height: 1.8; color: #726965; } .jrs2-footer__col h3 { margin: 0 0 16px; font-size: 13px; font-weight: 700; color: var(--jrs-ink); } .jrs2-footer__col nav ul { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; } .jrs2-footer__col nav a { font-size: 12.5px; color: #726965; } .jrs2-footer__col nav a:hover { color: var(--jrs-rose); } .jrs2-footer small { position: relative; z-index: 1; display: block; padding: 18px 0; border-top: 1px solid rgba(217, 121, 136, .14); text-align: center; color: #897d77; font-size: 10px; } @media (max-width: 900px) { .jrs2-footer__main { grid-template-columns: 1fr 1fr; gap: 28px 20px; } .jrs2-footer__brand-col { grid-column: 1 / -1; text-align: center; } .jrs2-footer__brand-col .jrs2-sns { justify-content: center; } } @media (max-width: 600px) { .jrs2-footer { padding: 0 20px; } .jrs2-footer__main { gap: 26px 16px; padding: 36px 0 30px; } } /* Extra breathing room between the closing CTA band and the footer wave below it */ .jrs2-cta { margin-bottom: 170px; } /* Remove the decorative giant "02" watermark from the CONTACT modal -- it sat right over the model's face */ .jrs2-contact__inner:after { content: none; } .jrs2-contact__button-icon { width: 20px; height: 20px; object-fit: contain; } /* SNS circle color (for the theme's own fallback glyphs only -- custom-uploaded icons show at their own colors, see jrs2-sns__icon--custom-img above) varies by context: footer sits on a light background (gray reads as an editorial, understated row), the mobile drawer wants more pop (rose) against its blurred panel. Contact-modal icons keep the translucent-on-photo treatment set earlier. */ .jrs2-footer__sns a { background: #8a7d78; } .jrs2-footer__sns a:hover { background: var(--jrs-rose); } .jrs2-mobile-drawer__sns a { background: var(--jrs-rose); } .jrs2-mobile-drawer__sns a:hover { background: var(--jrs-ink); } /* Custom-uploaded SNS/LINE icon images stay the same fixed size as the built-in SVGs, regardless of the source file's native dimensions */ .jrs2-sns__icon { object-fit: contain; }