/*
Theme Name: Outdoor Atelier
Theme URI: https://example.com/
Author: Outdoor Atelier
Description: Outdoor Atelier CASE STUDY and product-development theme.
Version: 1.1.3
Text Domain: outdoor-atelier
*/
.oa-mandala .mandala-cell{overflow:hidden}.oa-mandala .cell-number{z-index:2}.oa-mandala .oa-case-cell{color:#fff;background:#555}.oa-cell-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1)}.oa-case-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.36),rgba(0,0,0,.08) 35%,rgba(0,0,0,.78));z-index:1}.oa-case-text{position:relative;z-index:2}.oa-case-cell h3{font-family:"Times New Roman","Yu Mincho",serif;font-size:clamp(21px,2vw,34px);font-weight:400;line-height:1.15}.oa-case-cell .cell-ja{font-size:clamp(10px,.9vw,13px);letter-spacing:.04em}.oa-case-cell p{color:#fff;max-width:none}.oa-case-cell:hover{background-color:#333}.oa-case-cell:hover .oa-cell-photo{filter:grayscale(.35)}.oa-case-arrow{z-index:2}.oa-how{background:#f7f6f2}.oa-how h3{font-size:clamp(16px,1.5vw,23px)}.oa-how p{font-size:clamp(10px,.82vw,12px);line-height:1.5}.oa-flow{list-style:none;padding:0;margin:12px 0;font-size:clamp(10px,.9vw,13px);line-height:1.28}.oa-flow li+li:before{content:'↓';display:block;font-size:10px;line-height:1}.oa-empty-cell{background:#f2f1ed;color:#888;justify-content:space-between}.oa-empty-cell>span:last-child{position:static;font-size:10px;letter-spacing:.18em;opacity:1}.oa-center h2{margin:0 0 18px;font-family:"Times New Roman","Yu Mincho",serif;font-size:clamp(24px,2.9vw,43px);font-weight:400}.oa-center p{max-width:none;color:#fff;font-family:Arial,"Helvetica Neue",sans-serif;font-size:clamp(12px,1.2vw,17px);letter-spacing:0;line-height:1.6}.oa-center small{position:static;margin-top:18px;font-size:clamp(8px,.8vw,11px);letter-spacing:.08em}.oa-all-link{width:min(100%,1180px);margin:26px auto 0;text-align:right}.oa-listing,.oa-detail{padding:clamp(70px,9vw,140px) 4.5vw;min-height:70vh}.oa-listing h1,.oa-detail h1{margin:20px 0 50px;font-family:"Times New Roman","Yu Mincho",serif;font-size:clamp(44px,7vw,105px);font-weight:400;line-height:1}.oa-filters{display:flex;flex-wrap:wrap;gap:12px 24px;margin:0 0 48px;padding-bottom:20px;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.08em}.oa-filters .is-current{text-decoration:underline;text-underline-offset:5px}.oa-list-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}.oa-list-photo{aspect-ratio:4/3;background:#e8e7e1;overflow:hidden}.oa-list-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}.oa-list-card h2{font-family:"Times New Roman","Yu Mincho",serif;font-size:clamp(23px,2.4vw,38px);font-weight:400;margin:0 0 10px}.oa-list-card>p:last-child{color:var(--muted);font-size:13px;line-height:1.7}.oa-detail .eyebrow{margin-top:70px}.oa-detail-hero{max-height:650px;overflow:hidden;background:#e8e7e1}.oa-detail-hero img{width:100%;height:auto;display:block;filter:grayscale(1)}.oa-detail-lead{max-width:900px;font-family:"Times New Roman","Yu Mincho",serif;font-size:clamp(22px,2.7vw,39px);line-height:1.5;margin:60px 0}.oa-detail-sections{max-width:1000px;margin:60px auto}.oa-detail-sections section{display:grid;grid-template-columns:minmax(150px,30%) 1fr;gap:28px;padding:30px 0;border-top:1px solid var(--line)}.oa-detail-sections h2{margin:0;font-size:15px;font-weight:500}.oa-detail-sections p{margin:0;color:var(--muted);font-size:15px;line-height:1.9}.oa-detail-extra{max-width:1000px;margin:60px auto}
@media(max-width:900px){.oa-list-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.oa-how p{font-size:10px}}
@media(prefers-reduced-motion:reduce){.oa-cell-photo{transition:none}}

/* Lead directly into the 3×3 method and case grid. */
.hero{min-height:55vh;padding-top:clamp(65px,7vw,110px);padding-bottom:50px}.hero h1{margin:6vh 0;font-size:clamp(44px,6.5vw,96px)}
@media(max-width:720px){.hero{min-height:48svh;padding:50px 20px 30px}.hero h1{margin:7vh 0;font-size:clamp(42px,11vw,64px)}}

/* 外側01の中にある01〜08は商品化工程の番号。 */
.oa-mandala .oa-how{padding:clamp(16px,1.65vw,24px);justify-content:flex-start;gap:clamp(8px,1vw,14px)}
.oa-how .cell-number{font-size:clamp(28px,3.1vw,45px)}
.oa-how-content{min-width:0;width:100%}
.oa-how-content h3{margin:0;font-size:clamp(15px,1.25vw,20px);font-weight:600;letter-spacing:.05em}
.oa-how-content .cell-ja{margin:3px 0 8px;font-size:clamp(10px,.85vw,13px)}
.oa-how .oa-flow{list-style:none;margin:0;padding:0 0 0 7px;border-left:1px solid #aaa;display:grid;gap:0;font-size:clamp(10px,.82vw,13px);line-height:1.25}
.oa-how .oa-flow li{display:grid;grid-template-columns:23px minmax(0,1fr);align-items:center;gap:4px;min-height:clamp(23px,2.1vw,28px);position:relative}
.oa-how .oa-flow li::before{content:'';display:block;position:absolute;left:-10px;top:50%;width:5px;height:5px;border-radius:50%;background:var(--ink);transform:translateY(-50%)}
.oa-how .oa-flow li+li:before{content:'';display:block;position:absolute;left:-10px;top:50%;width:5px;height:5px;line-height:normal}
.oa-step-number{font-family:"Times New Roman",serif;font-size:1.05em;color:#555}
/* 9マスをトップの主役として表示する。 */
.method-section{padding-top:clamp(30px,4vw,56px)}
.method-section .section-heading{margin-bottom:24px}
.oa-mandala{width:min(100%,1080px)}
/* The grid owns its dimensions at every width. Content cannot enlarge a row. */
.oa-mandala{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(3,minmax(0,1fr));
  aspect-ratio:1 / 1;
  border-left:1px solid var(--ink);
}
.oa-mandala .mandala-cell{
  width:100%;height:100%;min-width:0;min-height:0;
  aspect-ratio:auto;overflow:hidden;order:initial;
}
@media(max-width:1100px){
  .oa-mandala .oa-how{padding:clamp(8px,1.5vw,16px);gap:clamp(3px,.8vw,8px)}
  .oa-how .cell-number{font-size:clamp(20px,3vw,33px)}
  .oa-how-content h3{font-size:clamp(11px,1.3vw,16px)}
  .oa-how-content .cell-ja{font-size:clamp(8px,.95vw,11px);margin:2px 0 5px}
  .oa-how .oa-flow{grid-template-columns:repeat(2,minmax(0,1fr));border:0;padding:0;font-size:clamp(8px,.95vw,11px);line-height:1.05}
  .oa-how .oa-flow li{display:block;min-height:0;padding:clamp(3px,.5vw,6px) 0;border-top:1px solid #c8c8c4;white-space:nowrap}
  .oa-how .oa-flow li::before,.oa-how .oa-flow li+li::before{display:none}
  .oa-step-number{display:block;font-weight:700}
}
@media(max-width:720px){
  .method-section{padding:28px 12px 70px}
  .method-section .section-heading{margin-bottom:16px;gap:5px}
  .method-section .section-note{font-size:12px}
  .oa-mandala .mandala-cell{padding:6px;gap:0}
  .oa-mandala .cell-number{font-size:clamp(12px,3.7vw,18px)}
  .oa-mandala .oa-case-cell h3{font-size:clamp(10px,3vw,14px);margin-bottom:2px}
  .oa-mandala .oa-case-cell .cell-ja{font-size:clamp(6px,1.7vw,9px);margin:0}
  .oa-mandala .oa-case-cell p{display:none}
  .oa-mandala .oa-center h2{font-size:clamp(12px,3.7vw,19px);margin:0 0 5px}
  .oa-mandala .oa-center p{font-size:clamp(6px,1.75vw,9px);line-height:1.3}
  .oa-mandala .oa-center small{margin-top:5px;font-size:clamp(5px,1.4vw,7px)}
  .oa-mandala .oa-how{padding:5px;gap:1px}
  .oa-mandala .oa-how .cell-number{font-size:clamp(12px,3.7vw,18px)}
  .oa-how-content h3{font-size:clamp(8px,2vw,11px);margin:0}
  .oa-how-content .cell-ja{display:none}
  .oa-how .oa-flow{gap:1px;margin:2px 0 0;font-size:clamp(5px,1.4vw,7px)}
  .oa-how .oa-flow li{padding:2px 0}
  .oa-step-number{font-size:clamp(6px,1.6vw,8px)}
  .oa-empty-cell>span:last-child{font-size:clamp(6px,1.6vw,8px)}
  .oa-list-grid{grid-template-columns:1fr}
  .oa-detail-sections section{grid-template-columns:1fr;gap:12px}
}

/* 01 is a link to the full workflow page. */
.oa-mandala .oa-how:hover{background:#eeede8;color:var(--ink)}
.oa-mandala .oa-how:hover .oa-step-number{color:#555}
.oa-how-arrow{position:absolute;top:clamp(16px,1.65vw,24px);right:clamp(16px,1.65vw,24px);font-size:15px;opacity:.65}
.oa-mobile-flow-link{display:none}
@media(max-width:720px){
  .oa-how-arrow{display:none}
  .oa-mobile-flow-link{display:flex;justify-content:space-between;width:100%;margin:16px auto 0;padding:13px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:12px;font-weight:700;letter-spacing:.06em}
}
/* WORK FLOW detail uses the same typography, rules, and white space as the grid. */
.oa-workflow-page{max-width:1320px;margin:0 auto;padding:clamp(45px,6vw,85px) 4.5vw clamp(80px,10vw,150px)}
.oa-workflow-page>.back-link{display:inline-block;margin-bottom:clamp(65px,8vw,110px)}
.oa-workflow-intro{max-width:900px;margin-bottom:clamp(55px,7vw,95px)}
.oa-workflow-intro h1{font-family:"Times New Roman",serif;font-size:clamp(56px,10vw,150px);font-weight:400;line-height:.95;letter-spacing:-.05em;margin:18px 0 28px}
.oa-workflow-lead{font-family:"Times New Roman","Yu Mincho",serif;font-size:clamp(25px,3.5vw,48px);margin:0 0 24px}
.oa-workflow-intro>p:last-child{max-width:650px;color:var(--muted);font-size:15px;line-height:1.9}
.oa-workflow-list{list-style:none;margin:0 0 70px;padding:0;border-top:1px solid var(--ink)}
.oa-workflow-list li{display:grid;grid-template-columns:minmax(100px,22%) 1fr;gap:clamp(20px,4vw,60px);align-items:start;padding:clamp(28px,4vw,55px) 0;border-bottom:1px solid var(--line)}
.oa-workflow-number{font-family:"Times New Roman",serif;font-size:clamp(55px,8vw,105px);line-height:.85;color:#c6c6c0}
.oa-workflow-list h2{margin:0 0 12px;font-size:clamp(24px,3vw,42px);font-weight:400;line-height:1.2}
.oa-workflow-list p{margin:0;max-width:660px;color:var(--muted);font-size:15px;line-height:1.8}
@media(max-width:720px){
  .oa-workflow-page{padding:35px 20px 90px}
  .oa-workflow-page>.back-link{margin-bottom:65px}
  .oa-workflow-list li{grid-template-columns:58px 1fr;gap:14px;padding:28px 0}
  .oa-workflow-number{font-size:54px}
  .oa-workflow-list h2{font-size:23px}
  .oa-workflow-list p{font-size:13px}
}

/* Top-page carabiner mark and readable 01 workflow labels. */
.wordmark-with-mark{flex-direction:row;align-items:center;gap:0}
.wordmark-with-mark .wordmark-text{display:flex;flex-direction:column;line-height:1.05}
.carabiner-mark{display:block;width:42px;height:42px;object-fit:contain;flex:none}
.oa-how .oa-flow{font-size:clamp(13px,1.02vw,16px)}
@media(max-width:1100px){
  .oa-how .oa-flow{font-size:clamp(11px,1.25vw,13px)}
  .oa-how .oa-flow li{white-space:normal;overflow-wrap:anywhere}
}
@media(max-width:720px){
  .carabiner-mark{width:34px;height:34px}
  .oa-how .oa-flow{font-size:clamp(8px,2.1vw,10px);line-height:1.05}
  .oa-how .oa-flow li{padding:1px 0;white-space:normal;overflow-wrap:anywhere}
  .oa-step-number{font-size:clamp(7px,1.8vw,9px)}
}

/* Contact Form 7 in the existing dark contact section. */
.oa-contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,500px);gap:clamp(32px,6vw,100px);align-items:start}
.oa-contact-grid h2{margin:clamp(38px,6vw,80px) 0 0;font-size:clamp(44px,5.4vw,86px)}
.oa-contact-form{padding-top:clamp(38px,6vw,80px);min-width:0}
.oa-contact-form p{margin:0 0 18px;font-size:13px;line-height:1.7}
.oa-contact-form label{display:block}
.oa-contact-form input[type="text"],.oa-contact-form input[type="email"],.oa-contact-form input[type="tel"],.oa-contact-form input[type="url"],.oa-contact-form select,.oa-contact-form textarea{width:100%;max-width:100%;margin-top:7px;padding:11px 12px;border:1px solid #85867f;border-radius:0;background:#fff;color:var(--ink);font:inherit;font-size:15px}
.oa-contact-form textarea{min-height:140px;resize:vertical}
.oa-contact-form input[type="submit"]{display:inline-block;min-width:180px;padding:13px 22px;border:1px solid #fff;border-radius:0;background:transparent;color:#fff;font:inherit;font-size:12px;font-weight:700;letter-spacing:.12em;cursor:pointer}
.oa-contact-form input[type="submit"]:hover,.oa-contact-form input[type="submit"]:focus-visible{background:#fff;color:var(--ink)}
.oa-contact-form .wpcf7-not-valid-tip{margin-top:5px;color:#ffb9b9;font-size:12px}
.oa-contact-form .wpcf7-response-output{margin:18px 0 0;padding:12px;border-color:#fff;color:#fff;font-size:13px}
@media(max-width:900px){.oa-contact-grid{grid-template-columns:1fr}.oa-contact-grid h2{margin:35px 0 0}.oa-contact-form{padding-top:0;max-width:640px}}

/* Keep CASE STUDY photos quiet as the gallery grows. */
.oa-cell-photo,.oa-case-cell:hover .oa-cell-photo,.oa-list-photo img,.oa-detail-hero img{
  filter:grayscale(.5) saturate(.7) contrast(.9);
}

/* CASE 02: show the full portrait photo with room around it. */
.oa-case-slot-02 .oa-cell-photo{
  object-fit:contain;
  padding:6%;
}