@charset "UTF-8";
/* ============================================================
   会社概要ページ固有
   ============================================================ */

/* ミッション --------------------------------------------- */
.mission{background:var(--deep);color:#fff;padding:clamp(80px,11vw,150px) 0}
.mission-rule{width:0;height:1px;background:var(--mint);margin-bottom:34px;transition:width .9s var(--ease)}
.mission.on .mission-rule{width:44px}
.mission-cap{display:block;font-family:"Shippori Mincho B1",serif;
  font-size:clamp(26px,4.6vw,62px);line-height:1.5;letter-spacing:.05em;overflow:hidden}
.mission-cap span{display:block;transform:translateY(112%);transition:transform 1.05s var(--ease)}
.mission.on .mission-cap span{transform:none}
.mission-cap:nth-of-type(2) span{transition-delay:.14s}
.mission-lead{margin-top:28px;max-width:40em;font-size:14.5px;line-height:2.1;color:rgba(255,255,255,.82);
  opacity:0;transform:translateY(16px);transition:opacity .8s ease .8s,transform .8s var(--ease) .8s}
.mission.on .mission-lead{opacity:1;transform:none}
.mission-vision{margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.2);
  font-family:"Jost","Zen Kaku Gothic New","Segoe UI Symbol",sans-serif;font-size:11.5px;letter-spacing:.14em;color:var(--mint);
  opacity:0;transition:opacity .8s ease 1s}
.mission.on .mission-vision{opacity:1}

/* 沿革 ---------------------------------------------------- */
.tl{margin-top:clamp(40px,6vw,68px);border-top:1px solid var(--line)}
.tl-item{display:grid;grid-template-columns:clamp(110px,14vw,190px) 1fr;gap:clamp(18px,3vw,48px);
  padding:clamp(26px,3.4vw,44px) 0;border-bottom:1px solid var(--line);align-items:start}
.tl-year{font-family:"Jost","Zen Kaku Gothic New","Segoe UI Symbol",sans-serif;font-weight:300;
  font-size:clamp(22px,2.6vw,34px);color:var(--green);letter-spacing:.03em;line-height:1.2}
.tl-item h3{font-family:"Shippori Mincho B1",serif;font-weight:400;font-size:clamp(17px,2vw,23px);
  letter-spacing:.08em;margin-bottom:10px}
.tl-item p{font-size:13.5px;color:var(--sub);line-height:2;max-width:42em}
.tl-item.future .tl-year{color:var(--mint)}
.tl-item.future h3{color:var(--sub)}

/* 工房と職人 ---------------------------------------------- */
.cs-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,2vw,26px);margin-top:clamp(40px,6vw,68px)}
.cs-grid figure:nth-child(1),.cs-grid figure:nth-child(2){grid-column:span 3}
.cs-grid figure:nth-child(1) .cs-media,.cs-grid figure:nth-child(2) .cs-media{height:clamp(260px,30vw,420px)}
.cs-grid figure:nth-child(n+3){grid-column:span 2}
.cs-media{height:clamp(180px,20vw,270px)}
.cs-media img{width:100%;height:100%;object-fit:cover}
.cs-grid figcaption{margin-top:14px;font-size:12px;color:var(--sub);letter-spacing:.04em}

/* 設備 ---------------------------------------------------- */
.eq-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,72px);
  align-items:center;margin-top:clamp(40px,6vw,68px)}
.eq-media{height:clamp(320px,40vw,520px)}
.eq-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.95)}

/* 会社情報 ------------------------------------------------ */
.profile{background:var(--soft)}
.pf-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(30px,5vw,64px);
  margin-top:clamp(40px,6vw,68px);align-items:start}
table.pf{width:100%;border-collapse:collapse;font-size:13.5px}
table.pf th,table.pf td{text-align:left;padding:16px 4px;border-bottom:1px solid var(--line);vertical-align:top}
table.pf th{width:118px;font-weight:400;color:var(--green);font-family:"Jost","Zen Kaku Gothic New","Segoe UI Symbol",sans-serif;
  font-size:11px;letter-spacing:.16em;white-space:nowrap;padding-top:19px}
table.pf td{color:var(--sub);font-weight:300}
table.pf a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
table.pf a:hover{border-bottom-color:var(--ink)}

/* レスポンシブ -------------------------------------------- */
@media(max-width:980px){
  .eq-grid,.pf-grid{grid-template-columns:1fr}
  .cs-grid{grid-template-columns:1fr 1fr}
  .cs-grid figure:nth-child(1),.cs-grid figure:nth-child(2),.cs-grid figure:nth-child(n+3){grid-column:span 1}
  .cs-grid figure:nth-child(1) .cs-media,.cs-grid figure:nth-child(2) .cs-media,.cs-media{height:clamp(200px,26vw,300px)}
}
@media(max-width:760px){
  .tl-item{grid-template-columns:1fr;gap:10px}
  .cs-grid{grid-template-columns:1fr}
  table.pf th{width:92px;font-size:10px}
}

@media(prefers-reduced-motion:reduce){
  .mission-cap span{transform:none}
  .mission-lead,.mission-vision{opacity:1;transform:none}
}