/* ================= ABOUT ================= */

/* concept */
.ab-concept{position:relative;height:calc(720*var(--u))}
.ab-concept-text{position:absolute;left:calc(72*var(--u));top:calc(54*var(--u));z-index:2}
.ab-tag{font-family:var(--hand);font-weight:400;font-size:calc(86*var(--u));line-height:1.1;color:var(--ink-deep);-webkit-text-stroke:calc(3.2*var(--u)) currentColor;paint-order:stroke fill;transform:rotate(-8deg);transform-origin:left bottom;margin:calc(-6*var(--u)) 0 0 calc(10*var(--u));white-space:nowrap;letter-spacing:.01em}
.ab-tag-brush{width:calc(560*var(--u));height:calc(30*var(--u));margin:calc(8*var(--u)) 0 0 calc(80*var(--u));transform:rotate(-12deg)}
.ab-body{margin-top:calc(58*var(--u));font-size:calc(18*var(--u));font-weight:500;line-height:2.05;color:#2a2f35;letter-spacing:.05em}
.ab-collage{position:absolute;inset:0}
.ab-panel{position:absolute;margin:0;background:#fff;padding:calc(6*var(--u));box-shadow:0 calc(12*var(--u)) calc(28*var(--u)) rgba(30,38,45,.14)}
.ab-panel img{display:block;width:100%;height:100%;object-fit:cover}
.ab-panel.p1{left:calc(740*var(--u));top:calc(40*var(--u));width:calc(648*var(--u));height:calc(312*var(--u));rotate:-2.2deg;clip-path:polygon(0 3%,100% 0,99% 100%,1% 97%)}
.ab-panel.p2{left:calc(668*var(--u));top:calc(362*var(--u));width:calc(338*var(--u));height:calc(218*var(--u));rotate:2deg;clip-path:polygon(0 0,100% 4%,98% 100%,2% 96%)}
.ab-panel.p3{left:calc(1044*var(--u));top:calc(348*var(--u));width:calc(356*var(--u));height:calc(228*var(--u));rotate:-1.5deg;clip-path:polygon(2% 2%,100% 0,100% 96%,0 100%)}
.ab-cap{position:absolute;z-index:3;font-size:calc(32*var(--u));line-height:1.25;color:var(--ink-deep);-webkit-text-stroke:calc(.8*var(--u)) currentColor;text-shadow:0 0 calc(8*var(--u)) #fff,0 0 calc(3*var(--u)) #fff}
.ab-cap .ul{display:block;height:calc(6*var(--u));width:110%;margin:calc(4*var(--u)) 0 0 calc(-10*var(--u));background:var(--pink);border-radius:6px;opacity:.85;transform:skewX(-20deg)}
.ab-cap.c1{left:calc(1204*var(--u));top:calc(4*var(--u));transform:rotate(-18deg)}
.ab-cap.c2{left:calc(760*var(--u));top:calc(560*var(--u));transform:rotate(-14deg)}
.ab-cap.c3{left:calc(1128*var(--u));top:calc(556*var(--u));transform:rotate(-14deg)}
/* company */
.ab-company{position:relative;min-height:calc(640*var(--u));padding:calc(40*var(--u)) 0 calc(90*var(--u))}
.ab-co-head{position:absolute;left:calc(60*var(--u));top:calc(40*var(--u))}
.ab-co-title{font-size:calc(64*var(--u));font-weight:900;color:var(--ink);letter-spacing:.04em;line-height:1.1;margin:calc(-12*var(--u)) 0 0 calc(30*var(--u));transform:rotate(-4deg);transform-origin:left bottom}
.ab-co-brush{width:calc(250*var(--u));height:calc(12*var(--u));margin:calc(6*var(--u)) 0 0 calc(60*var(--u));transform:rotate(-4deg)}
.ab-co-en{font-family:var(--en);font-weight:600;letter-spacing:.24em;font-size:calc(15*var(--u));margin:calc(10*var(--u)) 0 0 calc(26*var(--u));color:var(--ink);transform:rotate(-4deg)}
.ab-co-hand{margin:calc(62*var(--u)) 0 0 calc(14*var(--u));font-family:var(--hand);font-size:calc(40*var(--u));line-height:1.45;color:var(--ink-deep);-webkit-text-stroke:calc(.9*var(--u)) currentColor;transform:rotate(-14deg)}
.ab-co-hand span{padding-left:calc(48*var(--u))}.ab-co-hand .l3{padding-left:calc(80*var(--u))}
.ab-table{position:absolute;left:calc(428*var(--u));top:calc(70*var(--u));width:calc(610*var(--u));margin:0}
.ab-table > div{display:flex;align-items:center;border-bottom:1px solid #dddbd7;padding:calc(18*var(--u)) 0}
.ab-table dt{position:relative;flex:none;width:calc(150*var(--u));padding-left:calc(24*var(--u));font-weight:900;font-size:calc(16*var(--u));color:var(--ink);letter-spacing:.06em}
.ab-table dt::after{content:"";position:absolute;left:calc(14*var(--u));bottom:calc(-4*var(--u));width:calc(84*var(--u));height:calc(9*var(--u));background:var(--pink);opacity:.22;border-radius:4px;transform:skewX(-20deg)}
.ab-table dd{margin:0;font-size:calc(16*var(--u));line-height:1.75;color:#2a2f35;font-weight:500}
.ab-table dd ul{list-style:none}
.ab-table dd li::before{content:"・"}
.ab-bld{position:absolute;right:0;top:calc(20*var(--u));width:calc(392*var(--u));height:calc(572*var(--u));margin:0;
  -webkit-mask-image:linear-gradient(100deg,transparent 0,#000 7%,#000 100%),linear-gradient(to bottom,transparent 0,#000 6%,#000 94%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(100deg,transparent 0,#000 7%,#000 100%),linear-gradient(to bottom,transparent 0,#000 6%,#000 94%,transparent 100%);mask-composite:intersect}
.ab-bld img{width:100%;height:100%;object-fit:cover}
.ab-bld figcaption{position:absolute;right:calc(18*var(--u));top:calc(40*var(--u));font-family:var(--script);color:var(--pink);font-size:calc(52*var(--u));line-height:.95;text-align:right;transform:rotate(-12deg);text-shadow:0 0 calc(10*var(--u)) rgba(255,255,255,.9),0 0 calc(3*var(--u)) #fff}

@media (max-width: 820px){
  .ab-concept{height:auto;padding:48px 22px 40px}
  .ab-concept-text{position:relative;left:auto;top:auto}
  .ab-tag{font-size:10.5vw;-webkit-text-stroke:2px currentColor}
  .ab-tag-brush{width:78vw;height:18px;margin-left:30px}
  .ab-body{font-size:14.5px;margin-top:30px}.ab-body br{display:none}
  .ab-collage{position:relative;inset:auto;display:grid;grid-template-columns:1fr 1fr;gap:18px 12px;margin-top:40px;padding-top:14px}
  .ab-panel{position:relative;left:auto !important;top:auto !important;width:auto !important;height:auto !important}
  .ab-panel.p1{grid-column:1/-1;aspect-ratio:468/222}
  .ab-panel.p2{aspect-ratio:236/150}.ab-panel.p3{aspect-ratio:251/160}
  .ab-cap{font-size:17px}
  .ab-cap.c1{left:auto;right:4px;top:-6px}
  .ab-cap.c2,.ab-cap.c3{position:relative;left:auto;top:auto;margin-top:-6px}
  .ab-cap.c2{grid-column:1;grid-row:3}.ab-cap.c3{grid-column:2;grid-row:3}
  .ab-company{min-height:0;padding:36px 22px 60px;display:flex;flex-direction:column}
  .ab-co-head,.ab-table,.ab-bld{position:relative;left:auto;right:auto;top:auto;width:auto}
  .ab-co-title{font-size:36px}.ab-co-en{font-size:12px}.ab-co-brush{width:150px}
  .ab-co-hand{font-size:22px;margin:28px 0 10px 8px}
  .ab-table{margin-top:28px}
  .ab-table > div{flex-direction:column;align-items:flex-start;gap:6px;padding:14px 0}
  .ab-table dt{width:auto;font-size:14px}.ab-table dd{font-size:14px;padding-left:24px}
  .ab-bld{height:auto;aspect-ratio:279/400;margin:36px -22px 0 20%}
  .ab-bld figcaption{font-size:30px}
}