@charset "UTF-8";

/* メインビジュアルのスタイルを変えず、下層を写真中心の誌面構成にします。 */
.editorial{--editorial-ink:#263a3c;--editorial-line:#ccd5d1;background:#fff;color:var(--editorial-ink);font-family:var(--serif);font-weight:400}
.editorial h2,.editorial h3{font-weight:400;letter-spacing:.08em}
.editorial button{font-family:inherit}
.editorial button:focus-visible{outline-offset:5px}
.editorial section{scroll-margin-top:35px}
.editorial p{font-size:14px;line-height:2.6;letter-spacing:.065em}
.editorial img{object-fit:cover}
.outline-heading{position:relative}
.outline-heading>span{font-family:Georgia,"Times New Roman",serif;line-height:1;letter-spacing:.015em;font-size:clamp(95px,10.8vw,160px);font-weight:400;color:transparent;-webkit-text-stroke:.6px #d7d7d7;position:absolute;top:-77px;left:-40px;pointer-events:none;white-space:nowrap}
.outline-heading>h2{position:relative;font-size:28px;line-height:1.65;z-index:1}
.editorial-prose p+p{margin-top:30px}
.editorial-text-link{background:transparent;border-bottom:1px solid #b9b9b9;display:inline-flex;align-items:center;gap:40px;text-align:left;padding:10px 0;font-size:13px;letter-spacing:.05em;line-height:1.8}
.editorial-text-link>span{font-family:Georgia,serif;font-size:28px;line-height:1}
.editorial-text-link:hover{border-color:#222}
.editorial .editorial-note{font-size:10px;color:#626b66;line-height:1.9;letter-spacing:.025em}

/* Concept：文章と大きな風景、手元の写真を重ねます。 */
.concept-block{background:#f8f7f3;position:relative;display:grid;grid-template-columns:1fr 1fr;gap:7%;padding:130px 0 100px 8.5%;min-height:900px;max-width:1800px;margin:auto}
.concept-copy{padding-top:98px;max-width:420px;position:relative;z-index:1}
.concept-copy .outline-heading{margin-bottom:43px}
.concept-copy .outline-heading:after{content:"";position:absolute;left:calc(100% + 25px);top:4px;width:145px;border-top:1px solid #e0e0e0;z-index:3}
.concept-copy .editorial-prose{font-size:14px}
.concept-collage{position:relative;padding-bottom:200px;min-width:0}
.concept-street{width:100%;height:530px;object-position:55% 50%}
.concept-detail{position:absolute;width:64%;aspect-ratio:1.06;height:auto;bottom:0;left:-21%;filter:grayscale(1);object-position:50% 60%}

/* 人物の物語は、素直な矩形写真と段差のある誌面構成。 */
.story-block{background:#f8f7f3;padding:100px 0 85px}
.story-intro{display:grid;grid-template-columns:51% 49%;max-width:1800px;margin:auto;align-items:start}
.story-office-photo{padding-right:15px}
.story-office-photo img{height:560px;width:100%;object-position:50% 55%}
.story-intro-copy{padding:65px 13% 10px 16%;position:relative}
.story-heading{margin-bottom:32px}.story-heading h2{font-size:35px;line-height:1.75;margin-top:23px}.story-intro-copy>h3{font-size:19px;margin-bottom:22px;line-height:1.9}
.story-intro-copy .editorial-prose p{font-size:14px;line-height:2.55}
.story-intro-copy .editorial-prose p+p{margin-top:20px}
.story-intro-copy .editorial-text-link{margin-top:22px;font-size:12px;gap:24px}
.story-cards{max-width:1120px;width:calc(100% - 160px);margin:105px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:90px}
.story-card{min-width:0}.story-card:nth-child(2){padding-top:75px}
.story-open{width:100%;border:0;background:none;text-align:left;padding:0;color:#222;display:block}
.story-volume{display:block;text-align:left;font:14px Georgia,serif;color:#647773;letter-spacing:.03em;margin-bottom:14px}
.story-volume b{font-size:24px;font-weight:400;margin-left:4px}
.story-frame{display:block;position:relative;margin-bottom:2px}
.story-frame img{height:355px;width:100%;border-radius:0}
.story-frame-office img{object-position:87% 50%}
.story-open h3{font-size:24px;line-height:1.8;margin-top:22px;margin-bottom:29px}
.story-person{display:flex;align-items:start;gap:22px;font-size:19px;line-height:1.6}
.story-person>span:first-child{font-family:Georgia,serif;font-size:18px}
.story-person>i{width:40px;border-top:1px dotted #747474;margin-top:14px}
.story-person small{display:block;font:10px Georgia,serif;letter-spacing:.05em;margin-top:5px}
.story-open>p{font-size:14px;line-height:2.25;margin-top:29px}
.story-read{display:flex;justify-content:space-between;align-items:center;font:12px Georgia,serif;margin-top:24px;border-bottom:1px solid #d0d0d0;padding-bottom:10px}
.story-read>span{font-size:24px}.story-open:hover .story-read{border-color:#444}
.story-block>.editorial-note{width:calc(100% - 160px);max-width:1120px;margin:35px auto 0}

/* Journal：余白を残した横組み見出しと、手動で送れる写真一覧。 */
.intermission-block{padding:110px 0 100px;position:relative;display:grid;grid-template-columns:23% 77%;overflow:hidden;min-height:650px}
.vertical-heading{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:14px;padding:3px 0 0 27%;z-index:1}.vertical-heading:before{content:"";width:25px;height:3px;background:#7b947f;margin-bottom:15px}
.vertical-heading>h2{font:42px/1.2 Georgia,serif;letter-spacing:.02em}
.vertical-heading>p{font-size:12px;letter-spacing:.2em;line-height:1.6;padding-top:4px}
.intermission-main{min-width:0;z-index:1}
.intermission-toolbar{display:flex;align-items:center;justify-content:space-between;padding-right:8%;gap:20px;margin-bottom:42px}
.intermission-toolbar>p{border-bottom:1px dotted #444;line-height:2;padding-bottom:6px;font-size:14px}
.carousel-controls{display:flex;gap:12px}
.carousel-controls button{background:white;border:1px solid #333;width:49px;height:49px;border-radius:50%;font-family:Georgia,serif;font-size:15px;display:grid;place-items:center;transition:background-color .2s}
.carousel-controls button:hover:not(:disabled){background:#f1f1f1}.carousel-controls button:disabled{opacity:.3}
.intermission-track{display:flex;gap:48px;overflow-x:auto;padding:2px 8% 18px 2px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#d2d2d2 transparent}
.small-story{flex:0 0 350px;min-width:0;scroll-snap-align:start}
.small-story button,.thought-item button{background:transparent;border:0;padding:0;width:100%;text-align:left;display:block;color:inherit}
.small-story img{width:100%;height:255px;object-fit:cover}
.article-meta{display:flex;align-items:center;justify-content:space-between;font-size:12px;line-height:1;margin:28px 0 19px;font-family:Georgia,var(--serif)}
.article-meta>span{border:1px solid currentColor;padding:2px 8px;font-size:10px;font-family:var(--serif);line-height:1.2}.article-meta>time{letter-spacing:.06em}
.small-story h3,.thought-item h3{font-size:22px;line-height:1.8;margin-bottom:14px;letter-spacing:.05em}
.small-story p,.thought-item p{font-size:14px;line-height:2.25;letter-spacing:.04em}
.small-story button:hover h3,.thought-item button:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px}
.intermission-end{display:flex;align-items:center;justify-content:space-between;padding-right:8%;margin-top:40px;gap:20px}
.outline-button{border:1px solid currentColor;border-radius:40px;display:inline-flex;align-items:center;justify-content:space-between;gap:28px;padding:9px 24px;background:transparent;color:inherit;font-size:14px;line-height:1.7;letter-spacing:.05em}
.outline-button>span{font:22px/1 Georgia,serif}.outline-button:hover{background:#f2f2f2}
.carousel-status{font:11px Georgia,serif;letter-spacing:.1em;color:#777}
.intermission-track.expanded{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;scroll-snap-type:none;row-gap:50px;padding-right:8%}
.intermission-track.expanded .small-story{min-width:0}

/* 凪のノートは深い紺緑に切り替え、淡い水面の写真を背景に使います。 */
.thoughts-block{background:#193239;color:#f4f4ed;position:relative;padding:88px 0 115px;isolation:isolate;overflow:hidden}
.thoughts-block:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,#193239f5,#193239e8),url('/services/web-production/demo/nagi-law/assets/essay-water.jpg') center/cover}
.thoughts-inner{width:calc(100% - 160px);max-width:1160px;margin:auto}
.thoughts-heading{display:flex;align-items:start;justify-content:space-between;gap:40px;padding-top:14px;margin-bottom:70px}
.thoughts-heading h2{font-size:32px;margin-top:20px}.thoughts-title .nagi-label{color:#d3dfd6}.thoughts-title .nagi-label:before{background:#bdc997}
.thoughts-heading>p{border-bottom:1px dotted #a2a5a5;font-size:14px;line-height:2;position:relative;padding-bottom:4px;white-space:nowrap}
.thoughts-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.thought-item img{height:245px;width:100%;object-fit:cover}.thought-item .monochrome{filter:grayscale(1)}
.thought-item .article-meta{margin-top:33px}.thought-item p{color:#e1e1e1}.thought-item h3{font-size:23px;margin-bottom:18px}

/* 写真帯と、四辺の線を少し離した事務所案内リンク。 */
.photo-ribbon{display:grid;grid-template-columns:1fr 1fr 1fr;overflow:hidden;height:380px}
.photo-ribbon img{height:100%;width:100%;object-fit:cover}.photo-ribbon img:first-child{object-position:78% 50%}.photo-ribbon img:nth-child(2){object-position:65% 38%}
.office-gateway{background:#f2f4ef;padding-bottom:1px}.gateway-links{display:grid;grid-template-columns:1fr 1fr;gap:68px;max-width:1140px;width:calc(100% - 160px);margin:115px auto 90px}
.gateway-link{position:relative;background:none;display:flex;align-items:center;justify-content:space-between;padding:65px 70px;color:#191919;text-align:left;border-left:1px solid #bfbfbf;border-right:1px solid #bfbfbf;min-width:0}
.gateway-link:before,.gateway-link:after{content:"";position:absolute;left:14px;right:14px;height:1px;background:#bfbfbf;transition:background-color .2s}.gateway-link:before{top:-15px}.gateway-link:after{bottom:-15px}
.gateway-link>span{font:40px/1.3 Georgia,serif}.gateway-link small{display:block;font:12px/1.8 var(--serif);margin-top:12px;letter-spacing:.05em}.gateway-link>i{font:36px Georgia,serif;margin-left:20px}.gateway-link:hover{background:#fafafa}.gateway-link:hover:before,.gateway-link:hover:after{background:#555}
.editorial-contact{max-width:1140px;width:calc(100% - 160px);margin:0 auto;padding:30px 0 65px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:15px 45px}
.editorial-contact>div>p{font:18px Georgia,serif;margin-bottom:14px;letter-spacing:.02em}.editorial-contact h2{font-size:22px;letter-spacing:.05em;line-height:1.8}.editorial-contact>small{grid-column:2;font-size:10px;color:#777}.editorial-contact .outline-button{font-family:var(--serif);padding:13px 26px;min-height:52px}
.footer{background:#fff;max-width:none;width:100%;padding:45px max(6%,calc((100vw - 1140px)/2)) 28px;border-top:1px solid #ededed;color:#333}.footer .identity{font-size:21px}.footer .footer-bottom{color:#747474}.footer .footer-bottom>p{max-width:700px}

/* 事務所の詳細はダイアログに集約し、既存の相談操作を維持します。 */
#firm-dialog{width:min(1000px,calc(100% - 36px));background:#fff;font-family:var(--serif)}
.firm-description{font-size:14px;line-height:2.2;max-width:700px;margin-bottom:15px}
.firm-practice{background:white;padding:45px 0 0}.firm-practice .section-shell{width:100%}.firm-practice .section-heading{margin:20px 0 35px;gap:25px}.firm-practice h2{font-size:28px}.firm-practice .practice-columns{gap:45px}.firm-practice h3{font-size:21px}.firm-practice summary{font-size:16px}.firm-practice .section-heading>p{font-size:12px}.firm-practice .area-content{font-size:13px}.firm-practice .eyebrow{margin-bottom:10px}


/* 番号・細い罫線・小さな色のアクセントで、相談への姿勢を伝えます。 */
.nagi-label{display:flex;align-items:center;gap:15px;color:#4c6461}
.editorial .nagi-label{font:11px/1.7 var(--sans);letter-spacing:.16em}
.nagi-label:before{content:"";display:block;width:23px;height:3px;background:#7e976b;flex-shrink:0}
.approach-block{background:#e6eeeb;padding:95px 0 65px;position:relative;overflow:hidden}
.approach-block:before{content:"";position:absolute;width:470px;height:470px;border:1px solid #93aaa426;border-radius:50%;top:-235px;right:-100px;pointer-events:none}
.approach-inner{width:calc(100% - 160px);max-width:1120px;margin:auto;position:relative}
.approach-heading{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:end;margin-bottom:65px}
.approach-heading h2{font-size:35px;line-height:1.8;margin-top:24px}
.approach-heading>p{font-size:14px;line-height:2.6;color:#50655f;padding-bottom:5px}
.approach-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #acbfba}
.approach-list li{min-width:0;padding:28px 32px 12px 0;position:relative}
.approach-list li+li{border-left:1px solid #bdcdc7;padding-left:32px}
.approach-list li:last-child{padding-right:0}
.approach-number{display:block;font:38px/1 Georgia,serif;letter-spacing:-.04em;color:#647f75;margin-bottom:29px}
.editorial .approach-english{font:italic 15px/1.5 Georgia,serif;color:#516e64;letter-spacing:.02em;margin-bottom:12px}
.approach-list h3{font-size:23px;line-height:1.8;margin-bottom:20px}
.approach-list h3+p{font-size:13px;line-height:2.3;letter-spacing:.035em;color:#455e55}
.approach-bottom{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #bdcdc7;margin-top:40px;padding-top:25px;gap:20px}
.approach-bottom>span{font:italic 15px/1.8 Georgia,serif;letter-spacing:.02em;color:#587267}
.approach-bottom .editorial-text-link{border-color:#98aea5;color:#304e45}
.approach-bottom .editorial-text-link:hover{border-color:#304e45}
@media(max-width:1100px){.approach-inner{width:calc(100% - 120px)}.approach-heading{gap:40px}.approach-heading h2{font-size:30px}.approach-list li{padding-right:23px}.approach-list li+li{padding-left:23px}.approach-list h3{font-size:21px}.approach-break{display:none}}
@media(max-width:700px){.approach-block{padding:58px 0 40px}.approach-inner{width:calc(100% - 58px)}.approach-heading{grid-template-columns:1fr;gap:24px;margin-bottom:31px}.approach-heading h2{font-size:28px;margin-top:20px}.approach-heading>p{font-size:13px;line-height:2.3}.approach-heading>p br{display:none}.approach-list{grid-template-columns:1fr}.approach-list li,.approach-list li+li{padding:29px 0 29px 53px;border-left:0;border-bottom:1px solid #bdcdc7}.approach-number{position:absolute;left:0;top:29px;font-size:28px;margin:0}.editorial .approach-english{font-size:13px;margin-bottom:7px}.approach-list h3{font-size:22px;margin-bottom:12px}.approach-list h3+p{font-size:13px}.approach-bottom{margin-top:0;border-top:0;padding-top:26px;align-items:flex-start;flex-direction:column;gap:14px}.approach-bottom>span{font-size:13px}.approach-bottom .editorial-text-link{font-size:12px;gap:45px}.nagi-label{gap:12px}}

@media(min-width:1600px){.concept-block{min-height:1000px}.concept-copy{max-width:490px}.concept-street{height:610px}.concept-detail{max-width:420px}.story-intro-copy{padding-top:105px}.story-office-photo img{height:650px}}
@media(max-width:1100px){.concept-block{padding-left:7%;gap:7%;padding-top:95px;min-height:790px}.concept-copy{padding-top:75px}.concept-copy .editorial-prose p{font-size:13px}.concept-copy .outline-heading:after{width:90px;left:calc(100% + 12px)}.concept-street{height:450px}.concept-detail{width:75%;left:-16%;bottom:20px}.concept-collage{padding-bottom:165px}.outline-heading>span{left:-25px;top:-65px}.story-intro-copy{padding:35px 10% 10px 12%}.story-intro-copy>h3{font-size:21px}.story-intro-copy .editorial-prose p{font-size:13px}.story-office-photo img{height:510px}.story-cards{width:calc(100% - 120px);gap:65px;margin-top:80px}.story-frame img{height:300px}.story-open h3{font-size:21px}.story-person{gap:15px;font-size:17px}.story-open>p{font-size:13px}.intermission-block{grid-template-columns:21% 79%}.vertical-heading>h2{font-size:clamp(28px,3.6vw,38px)}.small-story{flex-basis:310px}.intermission-track{gap:35px}.small-story img{height:230px}.thoughts-inner{width:calc(100% - 100px)}.thoughts-grid{gap:32px}.thought-item img{height:210px}.thought-item p{font-size:13px}.photo-ribbon{height:300px}.gateway-links{width:calc(100% - 120px);gap:42px}.gateway-link{padding:52px 38px}.gateway-link>span{font-size:33px}.editorial-contact{width:calc(100% - 120px)}}
@media(max-width:700px){
  .editorial section{scroll-margin-top:24px}.editorial p{font-size:14px;line-height:2.25;letter-spacing:.03em}
  .outline-heading>span{font-size:88px;top:-50px;left:-10px;letter-spacing:0}.outline-heading>h2{font-size:25px;line-height:1.7;letter-spacing:.07em}
  .concept-block{display:flex;flex-direction:column;padding:108px 0 65px;min-height:0;gap:38px}.concept-copy{max-width:none;padding:0;margin:0 29px}.concept-copy .outline-heading{margin-bottom:30px}.concept-copy .outline-heading:after{display:none}.concept-copy .editorial-prose p{font-size:14px}.editorial-prose p+p{margin-top:23px}.concept-collage{margin-left:60px;min-height:0;padding-bottom:100px}.concept-street{height:325px;object-position:48% 50%}.concept-detail{width:64%;height:auto;left:-34px;bottom:0;aspect-ratio:1.1;max-width:270px}
  .story-block{padding:55px 0;background:#f8f7f3}.story-intro{display:flex;flex-direction:column}.story-office-photo{width:88%;padding:0}.story-office-photo img{height:310px}.story-intro-copy{padding:40px 29px 20px;width:100%}.story-heading h2{font-size:29px;margin-top:19px}.story-heading{margin-bottom:25px}.story-card:nth-child(2){padding-top:0}.story-intro-copy>h3{font-size:22px;letter-spacing:.04em;margin-bottom:20px}.story-intro-copy .editorial-prose p{font-size:14px;line-height:2.3}.story-intro-copy .editorial-text-link{font-size:12px;gap:30px;margin-top:20px}
  .story-cards{grid-template-columns:1fr;width:calc(100% - 58px);margin:35px auto 0;gap:48px}.story-volume{font-size:16px;margin-bottom:12px}.story-volume b{font-size:22px}.story-frame img{height:270px}.story-open h3{font-size:21px;margin-top:10px;margin-bottom:24px;letter-spacing:.03em}.story-person{font-size:18px;gap:18px}.story-person>span:first-child{font-size:17px}.story-person>i{width:28px}.story-person small{font-size:10px}.story-open>p{font-size:14px;line-height:2.25;margin-top:23px}.story-read{margin-top:20px}.story-block>.editorial-note{width:calc(100% - 58px);font-size:10px;margin-top:30px}
  .intermission-block{display:block;padding:55px 0 60px;min-height:0}.vertical-heading{padding:0 29px;flex-direction:row;justify-content:flex-start;gap:13px;margin-bottom:26px;align-items:center}.vertical-heading:before{width:16px;margin:0}.vertical-heading>h2{writing-mode:horizontal-tb;font-size:35px}.vertical-heading>p{writing-mode:horizontal-tb;font-size:10px;letter-spacing:.1em;padding:4px 0 0}.intermission-main{position:relative;padding-left:29px}.intermission-toolbar{padding-right:25px;gap:10px;margin-bottom:28px}.intermission-toolbar>p{font-size:11px;letter-spacing:0;line-height:2}.carousel-controls{gap:7px}.carousel-controls button{width:35px;height:35px;font-size:12px}.intermission-track{gap:24px;padding-right:29px;scroll-padding-left:2px}.small-story{flex-basis:calc(100vw - 85px)}.small-story img{height:220px}.article-meta{margin:21px 0 15px;font-size:11px}.small-story h3,.thought-item h3{font-size:21px}.small-story p,.thought-item p{font-size:14px;line-height:2.25}.intermission-end{padding-right:29px;margin-top:22px}.outline-button{font-size:13px;padding:8px 20px;gap:23px;min-height:42px}.intermission-track.expanded{grid-template-columns:1fr;padding-right:29px;row-gap:34px}.intermission-track.expanded .small-story img{height:235px}
  .thoughts-block{padding:80px 0 65px}.thoughts-inner{width:calc(100% - 58px)}.thoughts-heading{display:block;margin-bottom:35px;padding-top:0}.thoughts-heading h2{font-size:26px}.thoughts-heading>p{display:inline-block;font-size:11px;margin-top:23px;white-space:normal}.thoughts-grid{grid-template-columns:1fr;gap:38px}.thought-item img{height:235px}.thought-item .article-meta{margin-top:22px}.thought-item h3{margin-bottom:12px}.thought-item p{font-size:14px}
  .photo-ribbon{height:240px;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.photo-ribbon img{width:70vw;flex:0 0 70vw;scroll-snap-align:start}.gateway-links{width:calc(100% - 72px);grid-template-columns:1fr;gap:50px;margin:65px auto 60px}.gateway-link{padding:36px 30px;min-height:140px}.gateway-link>span{font-size:32px}.gateway-link small{font-size:11px;margin-top:10px}.gateway-link>i{font-size:31px}.gateway-link:before,.gateway-link:after{left:10px;right:10px}.gateway-link:before{top:-10px}.gateway-link:after{bottom:-10px}
  .editorial-contact{width:calc(100% - 58px);grid-template-columns:1fr;gap:21px;padding:10px 0 45px}.editorial-contact>div>p{font-size:18px;margin-bottom:10px}.editorial-contact h2{font-size:20px;letter-spacing:.04em}.editorial-contact .outline-button{justify-self:start;font-size:13px;gap:30px;min-height:48px;padding:11px 22px}.editorial-contact>small{grid-column:1;margin-top:-10px;font-size:10px;line-height:1.8}
  .footer{padding:30px 24px 22px}.footer .identity{font-size:17px}.footer .footer-bottom>p{font-size:10px}.firm-practice{padding-top:30px}.firm-practice .section-heading{display:block}.firm-practice h2{font-size:25px}.firm-practice .practice-columns{gap:30px}.firm-practice summary{font-size:16px}
}
@media(max-width:360px){.approach-heading h2{font-size:26px}.outline-heading>span{font-size:77px}.concept-copy,.story-intro-copy{margin-left:0;margin-right:0}.concept-copy{padding:0 24px}.concept-street{height:290px}.story-intro-copy{padding-left:24px;padding-right:24px}.story-open h3{font-size:19px}.story-person{font-size:16px;gap:14px}.story-frame img{height:235px}.intermission-toolbar{align-items:start}.intermission-toolbar>p{max-width:155px}.vertical-heading{gap:10px}.vertical-heading>h2{font-size:30px}.small-story img{height:200px}.editorial-contact h2{font-size:18px}}
@media(prefers-reduced-motion:reduce){.intermission-track,.photo-ribbon{scroll-behavior:auto}}