@charset "UTF-8";
/* =========================================================
   IT WORKS Corporate Site — Theme Stylesheet
   Design: Figma / Aun mockups (PC 1920 / SP 750)
   ========================================================= */

:root{
  --beige:#EFEDDE;
  --beige-dim:#E5E2CE;
  --dark:#1A2023;
  --footer:#162124;
  --red:#A40002;
  --red-mid:#B0130F;
  --red-light:#E46156;
  --grad:linear-gradient(100deg,#8E0B0F 0%,#B0130F 45%,#E46156 100%);
  --grad-chip:linear-gradient(90deg,#A50102,#E46156);
  --ink:#333333;
  --ink-weak:#666666;
  --f-gothic:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
  --f-zen:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;
  --f-mincho:"Shippori Mincho","Hiragino Mincho ProN",serif;
  --header-h:66px;
  --cw:1290px;        /* main content width (design: 315..1605 @1920) */
  --cw-header:1410px; /* header pill width */
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{overflow-x:clip;}
body{
  font-family:var(--f-gothic);
  color:var(--ink);
  background:var(--beige);
  font-size:16px;
  line-height:1.9;
  letter-spacing:.04em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;}
button{font-family:inherit;border:none;background:none;cursor:pointer;}

/* capture mode for visual QA */
.is-shot .fv{height:1080px !important;min-height:0 !important;position:relative;}
.is-shot *,.is-shot *::before,.is-shot *::after{animation:none !important;transition:none !important;}

/* pattern backgrounds */
.bg-pattern{
  background-color:var(--dark);
  background-image:url(../img/pattern_tile_warm.png);
  background-size:95px 164px;
}
.bg-pattern-cool{
  background-color:var(--footer);
  background-image:url(../img/pattern_tile.png);
  background-size:141px 122px;
}

/* =========================================================
   Header
   ========================================================= */
.site-header{
  position:fixed;
  top:22px;left:0;right:0;
  z-index:1000;
  pointer-events:none;
}
.site-header__inner{
  pointer-events:auto;
  width:min(var(--cw-header),calc(100% - 40px));
  margin:0 auto;
  height:var(--header-h);
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-radius:calc(var(--header-h)/2);
  box-shadow:0 8px 28px rgba(0,0,0,.12);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 24px 0 48px;
}
.site-header__logo img{width:207px;height:55px;}
.site-header__nav{display:flex;align-items:center;gap:44px;}
.site-header__nav a{
  font-family:var(--f-zen);
  font-size:14px;
  font-weight:500;
  letter-spacing:.06em;
  color:#222;
  position:relative;
  transition:color .3s;
}
.site-header__nav a:not(.btn-contact)::after{
  content:"";position:absolute;left:0;bottom:-6px;width:100%;height:2px;
  background:var(--grad-chip);transform:scaleX(0);transform-origin:left;transition:transform .3s;
}
.site-header__nav a:not(.btn-contact):hover::after{transform:scaleX(1);}
.btn-contact{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:192px;height:36px;
  border-radius:18px;
  background:var(--grad-chip);
  color:#fff !important;
  font-size:13px;
  letter-spacing:.12em;
  transition:opacity .3s;
}
.btn-contact:hover{opacity:.85;}
.site-header__burger{display:none;}

/* =========================================================
   Buttons (gradient pill with arrow)
   ========================================================= */
.btn-main{
  position:relative;
  display:flex;align-items:center;
  width:440px;max-width:100%;
  height:64px;
  border-radius:32px;
  background:var(--grad);
  color:#fff;
  font-size:16px;
  font-weight:500;
  letter-spacing:.1em;
  padding-left:36px;
  box-shadow:0 10px 24px rgba(164,0,2,.35);
  transition:transform .3s,box-shadow .3s;
  overflow:hidden;
}
.btn-main:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(164,0,2,.45);}
.btn-main .arrow{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
}
.arrow{
  width:44px;height:44px;border-radius:50%;
  background:rgba(120,4,6,.85);
  display:inline-flex;align-items:center;justify-content:center;
  flex:none;
  transition:transform .3s;
}
.arrow::before{
  content:"";
  width:14px;height:8px;
  background:currentColor;
  color:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M0 4h12M9 1l3 3-3 3' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M0 4h12M9 1l3 3-3 3' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.btn-main:hover .arrow{transform:translateY(-50%) translateX(4px);}

/* =========================================================
   Section headings
   ========================================================= */
.sec-head{margin-bottom:56px;}
.sec-head__en{
  font-family:var(--f-zen);
  font-weight:500;
  font-size:96px;
  line-height:1.15;
  letter-spacing:.02em;
  color:#333;
}
.sec-head--light .sec-head__en{color:#fff;}
.sec-head__ja{
  display:inline-flex;align-items:center;gap:10px;
  font-size:14px;
  color:var(--ink);
  margin-top:18px;
}
.sec-head--light .sec-head__ja{color:#fff;}
.sec-head__ja::before{
  content:"";width:10px;height:10px;border-radius:50%;
  background:var(--red-mid);
}
.sec-head--rule{border-bottom:none;}
.sec-head--rule .sec-head__en{
  display:inline-block;
  padding-bottom:10px;
  border-bottom:2px solid var(--red-mid);
  padding-right:120px;
}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(36px);transition:opacity .9s ease,transform .9s ease;}
.reveal.is-in{opacity:1;transform:none;}

/* EN title: per-character random reveal (growin.jp-style) */
.tsplit .char{
  display:inline-block;
  opacity:0;
  transform:translateY(.55em) rotate(8deg) scale(.7);
  transition:opacity .55s cubic-bezier(.2,.7,.3,1),transform .55s cubic-bezier(.2,.7,.3,1);
  transition-delay:var(--d,0s);
  will-change:transform;
}
.tsplit .char.sp{width:.35em;}
.tsplit.is-in .char{opacity:1;transform:none;}

/* =========================================================
   FV (front page hero) — scroll-driven sequence
   ========================================================= */
.fv-scroll{
  height:380vh;
  position:relative;
}
.fv{
  position:sticky;
  top:0;
  height:100vh;
  min-height:600px;
  overflow:hidden;
  background:#EDEDED;
}
.fv__stage{
  position:absolute;inset:0;
  z-index:1;
  will-change:transform,opacity;
}
.fv-logo{
  position:absolute;
  left:50%;top:50%;
  width:min(630px,66vw);
  aspect-ratio:633/538;
  transform:translate(-50%,-60%);
}
.fv-logo__mark{position:absolute;inset:0;will-change:opacity;}
.fv-logo__video{
  position:absolute;inset:-8% -20%;
  width:140%;height:116%;
  object-fit:cover;
  opacity:0;
  transition:opacity 1.1s ease;
  -webkit-mask-image:url(../img/about_art_mark.png);
          mask-image:url(../img/about_art_mark.png);
  -webkit-mask-size:71.4% auto;   /* 100/140 */
          mask-size:71.4% auto;
  -webkit-mask-position:center;
          mask-position:center;
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
}
.fv-logo__video.is-show{opacity:1;}
.fv-logo__tint{
  position:absolute;inset:0;
  background:rgba(224,122,92,.45);
  mix-blend-mode:multiply;
  -webkit-mask-image:url(../img/about_art_mark.png);
          mask-image:url(../img/about_art_mark.png);
  -webkit-mask-size:100% auto;
          mask-size:100% auto;
  -webkit-mask-position:center;
          mask-position:center;
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
  pointer-events:none;
}
.fv-logo__text{
  position:absolute;
  left:0;
  width:100%;
  aspect-ratio:688 / 185;
  height:auto;
  top:55%;
  transform:translateY(-50%);
  pointer-events:none;
}
.fv__caption{
  position:absolute;
  left:68%;bottom:17%;
  transform:translateX(-50%);
  font-family:var(--f-zen);
  font-size:17px;
  font-weight:700;
  letter-spacing:.12em;
  color:#333;
  white-space:nowrap;
}
/* growing red circle (origin = red dot in the O) */
.fv-red{
  position:absolute;
  left:50%;top:50%;
  width:44px;height:44px;
  margin:-22px 0 0 -22px;
  border-radius:50%;
  background:radial-gradient(circle at 42% 36%,#C93A2E 0%,#A40002 75%);
  z-index:3;
  transform:scale(0);
  will-change:transform;
  pointer-events:none;
}
/* slogan crossing lines */
.fv-slogan{
  position:absolute;inset:0;
  z-index:4;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2vh;
  pointer-events:none;
  opacity:0;
  overflow:hidden;
}
.fv-slogan span{
  display:block;
  font-family:var(--f-zen);
  font-weight:700;
  font-size:clamp(48px,7vw,120px);
  line-height:1.2;
  color:#fff;
  white-space:nowrap;
  will-change:transform;
}
.fv-slogan .l1{align-self:flex-start;}
.fv-slogan .l2{align-self:flex-end;}
/* KV (Japan map video) */
.fv-kv{
  position:absolute;inset:0;
  z-index:2;
  opacity:0;
  visibility:hidden;
}
.fv-kv.is-on{opacity:1;visibility:visible;}
.fv-kv__video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
}
.fv__copy{
  position:absolute;
  left:50%;top:44%;
  transform:translate(-50%,-50%);
  text-align:center;
  width:100%;
  z-index:2;
}
.fv__copy h2{
  font-family:var(--f-gothic);
  font-weight:900;
  font-style:italic;
  font-feature-settings:"palt";
  font-size:106px;
  line-height:1.45;
  letter-spacing:.02em;
  color:#141414;
  text-shadow:0 0 26px rgba(255,255,255,.75);
}
.fv__copy p{
  margin-top:26px;
  font-size:16px;
  font-weight:500;
  letter-spacing:.12em;
  line-height:2.05;
  color:#1c1c1c;
  /* crisp white outline (not just a soft glow) so the text stays legible over the
     busy map video/photo background behind it, whatever the underlying colours are */
  -webkit-text-stroke:3px #fff;
  paint-order:stroke fill;
  text-shadow:
    -1.5px -1.5px 0 #fff, 1.5px -1.5px 0 #fff,
    -1.5px  1.5px 0 #fff, 1.5px  1.5px 0 #fff,
     0     -1.5px 0 #fff, 0     1.5px 0 #fff,
    -1.5px  0     0 #fff, 1.5px 0     0 #fff,
     0 0 14px rgba(255,255,255,.85);
}
.fv__scroll{
  position:absolute;right:60px;bottom:36px;
  font-family:var(--f-zen);
  font-size:12px;letter-spacing:.2em;
  color:var(--red-mid);
  display:flex;align-items:center;gap:8px;
  z-index:6;
}
.fv__scroll::before{
  content:"";
  width:10px;height:10px;
  border-right:2px solid var(--red-mid);
  border-bottom:2px solid var(--red-mid);
  transform:rotate(45deg);
  animation:scrollNudge 1.6s ease-in-out infinite;
}
@keyframes scrollNudge{0%,100%{transform:translateY(-2px) rotate(45deg);}50%{transform:translateY(3px) rotate(45deg);}}
/* shot-mode final state */
.is-shot .fv-scroll{height:1080px !important;}
.is-shot .fv-kv{opacity:1;visibility:visible;}
.is-shot .fv__stage,.is-shot .fv-red,.is-shot .fv-slogan{display:none;}

/* =========================================================
   TOP: About section
   ========================================================= */
.top-about{
  position:relative;
  color:#fff;
  overflow:hidden;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - clamp(28px,3.5vw,75px)));
}
.top-about{min-height:850px;}
.top-about__inner{
  width:min(var(--cw),calc(100% - 40px));
  margin:0 auto;
  padding:150px 0 70px;
  position:relative;
}
.top-about__text{max-width:800px;}
.top-about__catch{
  font-size:36px;
  font-weight:700;
  letter-spacing:.04em;
  margin:0 0 34px;
}
.top-about__body{
  font-size:15px;
  font-weight:400;
  line-height:2.4;
  letter-spacing:.08em;
}
.top-about__art{
  position:absolute;
  right:0;top:150px;
  width:520px;
  text-align:center;
}
.top-about__art{position:absolute;}
.top-about__mark{position:relative;width:100%;display:block;}
.top-about__art .mark{width:100%;}
.top-about__art video{
  /* static image only, per request — the video's lower-resolution, blended-on-top look
     went muddy/blurry a moment after it started playing, so it's disabled everywhere
     (this used to be mobile-only; now it's the default at every width). */
  display:none;
  position:absolute;
  left:50%;top:-11%;
  width:212%;
  transform:translateX(-50%);
  mix-blend-mode:screen;
  filter:contrast(1.05) saturate(1.12) brightness(1.1);
  pointer-events:none;
  opacity:0;
  transition:opacity .6s ease;
}
.top-about__art video.is-playing{opacity:1;}
.top-about__art img.txt{position:relative;z-index:2;}
.top-about__art .mark.is-behind{opacity:0;transition:opacity .8s ease .3s;}
.top-about__art img.mark{width:100%;}
.top-about__art img.txt{width:280px;margin:64px auto 0;}
.top-about .btn-main{margin-top:40px;}

/* =========================================================
   TOP: Business section
   ========================================================= */
.top-business{padding:90px 0 105px;overflow-x:hidden;}
.top-business__inner{
  width:min(var(--cw),calc(100% - 40px));
  margin:0 auto;
}
.top-business__catch{
  font-size:36px;font-weight:700;letter-spacing:.04em;margin:0 0 20px;
}
.top-business__lead{font-size:15px;line-height:2.5;}

.biz-tabs{
  display:flex;
  align-items:center;
  width:100%;max-width:1060px;
  margin:60px auto 30px;
  background:#0A0A0A;
  border-radius:9px;
  padding:6px;
  gap:0;
}
.biz-tabs button{
  flex:1;
  height:46px;
  color:#fff;
  font-size:17px;
  font-weight:500;
  letter-spacing:.06em;
  position:relative;
  border-radius:8px;
  transition:background .3s,color .3s;
}
.biz-tabs button+button::before{
  content:"";position:absolute;left:0;top:16px;bottom:16px;width:1px;background:rgba(255,255,255,.4);
}
.biz-tabs button.is-active{
  background:#fff;
  color:var(--red);
  font-weight:700;
}
.biz-tabs button.is-active::before{display:none;}
.biz-tabs button.is-active+button::before{display:none;}
.biz-panel-wrap{position:relative;width:100%;max-width:1060px;margin:0 auto;}
.biz-panel{
  display:none;
  background:#fff;
  border-radius:16px 16px 18px 18px;
  padding-bottom:34px;
  box-shadow:0 30px 60px rgba(40,30,10,.12);
}
.biz-panel.is-active{display:block;animation:panelIn .55s cubic-bezier(.25,.7,.3,1);}
@keyframes panelIn{from{opacity:0;transform:translateX(90px);}to{opacity:1;transform:none;}}
.biz-panel.is-active.slide-rev{animation:panelInRev .55s cubic-bezier(.25,.7,.3,1);}
@keyframes panelInRev{from{opacity:0;transform:translateX(-90px);}to{opacity:1;transform:none;}}
.biz-panel__bar{
  margin:0;
  background:#B00A0C;
  border-radius:16px 16px 0 0;
  color:#fff;
  display:grid;
  grid-template-columns:max-content;
  justify-content:center;
  padding:12px 10px 16px;
}
.biz-panel__bar .en{
  display:block;text-align:left;font-family:var(--f-zen);font-size:13px;letter-spacing:.24em;opacity:.95;
}
.biz-panel__bar .ja{
  display:block;text-align:left;font-size:30px;font-weight:700;letter-spacing:.1em;margin-top:4px;
}
.biz-panel__tagline{
  text-align:center;
  font-size:21px;
  font-weight:700;
  letter-spacing:.16em;
  margin-top:28px;
}
.biz-panel__lead{
  text-align:center;
  font-size:14px;
  line-height:2.1;
  margin-top:14px;
  color:#444;
}
/* diagram */
.biz-diagram{
  position:relative;
  width:min(1160px,92%);
  margin:20px auto -56px;
  min-height:700px;
  transform:scale(.9);
  transform-origin:top center;
}
.biz-diagram__circle{
  width:700px;max-width:62%;
  margin:0 auto;display:block;
}
.biz-label{
  position:absolute;
  width:230px;
  font-size:13px;
  line-height:1.7;
  color:#555;
}
.biz-label b{
  display:block;
  font-size:16px;
  color:var(--red-mid);
  font-weight:700;
  margin-bottom:4px;
}
.biz-label--1{right:0;top:52px;}
.biz-label--2{right:0;top:295px;width:200px;}
.biz-label--3{right:60px;bottom:64px;width:420px;}
.biz-label--3 b{display:inline;margin-right:12px;}
.biz-label--3 span{font-size:13px;}
.biz-label--4{left:0;top:340px;}
.biz-label--5{left:0;top:60px;}
/* 6-step diagrams (call center / digital marketing / M&A) */
.biz-diagram--6 .biz-label--2{top:320px;}
.biz-diagram--6 .biz-label--3{right:0;bottom:36px;width:300px;}
.biz-diagram--6 .biz-label--3 b{display:block;margin-right:0;}
.biz-diagram--6 .biz-label--3 span{font-size:13px;}
.biz-diagram--6 .biz-label--4{left:0;top:auto;bottom:36px;}
.biz-diagram--6 .biz-label--5{left:-6px;top:320px;}
.biz-diagram--6 .biz-label--6{left:0;top:52px;}
/* solutions */
.biz-solutions{
  width:min(1250px,94%);
  margin:30px auto 0;
  border:1px solid #E9B8B4;
  border-radius:14px;
  padding:20px 10px 26px;
  position:relative;
}
.biz-solutions__title{
  position:absolute;
  top:-12px;left:50%;transform:translateX(-50%);
  background:#fff;
  padding:0 26px;
  font-size:14px;
  font-weight:700;
  color:var(--ink);
  white-space:nowrap;
}
.biz-solutions__grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  margin-top:18px;
}
.biz-solutions__grid>div{
  padding:0 4px;
  text-align:center;
  position:relative;
}
.biz-solutions__grid>div+div::before{
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:1px;background:#E5D9D0;
}
.biz-solutions__grid img{height:44px;width:auto;margin:0 auto 8px;}
.biz-solutions__grid b{
  display:block;font-size:12px;color:var(--ink);font-weight:700;line-height:1.5;white-space:nowrap;
}
.biz-solutions__grid p{font-size:10.5px;color:#777;line-height:1.65;margin-top:5px;}
/* stacked shadow cards */
.biz-stack{width:100%;max-width:1060px;margin:0 auto;}
.biz-stack span{
  display:block;height:16px;border-radius:0 0 16px 16px;
}
.biz-stack span:nth-child(1){background:#CFC9BF;width:97%;margin:0 auto;}
.biz-stack span:nth-child(2){background:#8C8578;width:93%;margin:0 auto;}

/* =========================================================
   TOP: Recruit slider
   ========================================================= */
.top-recruit{
  position:relative;
  color:#fff;
  overflow:hidden;
  min-height:800px;
  /* The slide crossfade underneath (photos/text fading in and out every 5s) was making
     Chrome/Safari briefly re-rasterize this clip and show the section unclipped (a flat top
     edge) for a frame before snapping back to the diagonal. Promoting the clip to its own
     stable GPU layer (will-change + a 3D transform hint) keeps the mask itself off the
     repaint path, so the diagonal top edge no longer flickers flat during a transition. */
  -webkit-clip-path:polygon(0 0, 100% clamp(28px,3.5vw,75px), 100% 100%, 0 100%);
          clip-path:polygon(0 0, 100% clamp(28px,3.5vw,75px), 100% 100%, 0 100%);
  will-change:clip-path;
  transform:translateZ(0);
}
.top-recruit__bgphoto{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:82%;
  max-width:1580px;
  opacity:.5;
  filter:brightness(.55) saturate(.9);
  -webkit-mask-image:radial-gradient(ellipse 65% 60% at 50% 50%,#000 55%,transparent 100%);
          mask-image:radial-gradient(ellipse 65% 60% at 50% 50%,#000 55%,transparent 100%);
  pointer-events:none;
}
.top-recruit__inner{
  position:relative;
  width:min(var(--cw),calc(100% - 40px));
  margin:0 auto;
  padding:85px 0 80px;
  min-height:800px;
}
.rec-slide{
  position:absolute;
  inset:0;
  z-index:1;
  padding:235px 0 0;
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  /* main.js waits for the fade-out to fully finish before starting the next slide's
     fade-in, so the two are never visible at once (that overlap used to show a flash of
     the next slide's text/photo ghosted over the current one). The slight upward drift
     alongside the opacity fade is what gives the swap its soft "ふわっと" feel instead of
     a hard cut; the eased curve is gentler at both ends than a plain linear/ease fade. */
  transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
}
.rec-slide.is-active{opacity:1;transform:translateY(0);pointer-events:auto;z-index:2;}
/* Heading/body sit in their own always-visible layer instead of inside each fading .rec-slide,
   so they never disappear during a transition — only the photo + vertical quote crossfade. */
.rec-static{
  position:absolute;
  inset:0;
  z-index:3;
  padding:235px 0 0;
  pointer-events:none;
}
.rec-slide>.rec-slide__head,.rec-slide>.rec-slide__body{display:none;}
.rec-slide__head{
  font-size:28px;
  font-weight:700;
  line-height:2;
  letter-spacing:.08em;
  margin:0 0 30px;
}
.rec-slide__body{
  font-size:14px;
  line-height:2.3;
  letter-spacing:.1em;
  max-width:520px;
}
.top-recruit .btn-main{
  position:absolute;
  left:calc((100% - min(var(--cw),calc(100% - 40px))) / 2);
  top:660px;
  margin:0;
  width:440px;
  z-index:4;
}
.rec-slide__vtext{
  position:absolute;
  white-space:nowrap;
  top:106px;
  left:43.5%;
  writing-mode:vertical-rl;
  font-family:var(--f-mincho);
  font-weight:500;
  font-size:58px;
  letter-spacing:.14em;
  color:#fff;
  line-height:1.4;
  z-index:3;
}
.rec-slide__vtext--up{top:74px;}
.rec-slide__person{
  position:absolute;
  left:59%;
  bottom:0;
  height:80%;
  max-height:950px;
  width:auto;
  z-index:2;
}

/* =========================================================
   TOP: Blog section
   ========================================================= */
.top-blog{
  padding:130px 0 0;
  overflow:hidden;
  position:relative;
}
.top-blog__inner{
  width:min(var(--cw),calc(100% - 40px));
  margin:0 auto;
}
.top-blog__catch{font-size:40px;font-weight:700;margin:0 0 18px;}
.top-blog__lead{font-size:16px;}
.blog-carousel{
  margin-top:60px;
  display:flex;
    width:max-content;
  animation:carouselFlow 110s linear infinite;
}
.blog-carousel:hover{animation-play-state:paused;}
@keyframes carouselFlow{
  from{transform:translateX(-50%);}
  to{transform:translateX(0);}
}
.post-card{
  position:relative;
  width:400px;
  flex:none;
  margin-right:30px;
  display:block;
}
.post-card__date{
  position:absolute;
  left:6px;top:0;
  writing-mode:vertical-rl;
  font-family:var(--f-zen);
  font-size:13px;
  letter-spacing:.1em;
  color:#555;
}
.post-card__img{
  margin-left:28px;
  width:366px;height:270px;
  object-fit:cover;
  box-shadow:0 10px 26px rgba(0,0,0,.14);
}
.post-card__box{
  display:block;
  position:relative;
  width:348px;
  min-height:168px;
  background:#F7F6F0;
  margin-top:-38px;
  padding:18px 58px 22px 24px;
  box-shadow:0 12px 26px rgba(0,0,0,.10);
}
.post-card__cat{
  display:inline-block;vertical-align:middle;
  border:1px solid var(--red-mid);
  color:var(--red-mid);
  border-radius:14px;
  font-size:11px;
  padding:1px 14px;
  letter-spacing:.06em;
}
.post-card__title{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:15.5px;
  font-weight:500;
  line-height:1.8;
  margin-top:8px;
  color:var(--ink);
}
.post-card__tags{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-top:10px;
  font-size:12px;
  line-height:1.9;
  color:#8a8577;
  letter-spacing:.02em;
  word-break:break-word;
}
.post-card__box .arrow{
  position:absolute;
  right:14px;bottom:26px;
  width:46px;height:46px;
  background:#E6DFCC;
}
.post-card__box .arrow::before{color:#4a4335;}
.post-card:hover .arrow{transform:translateX(4px);}
.top-blog .btn-main{margin-top:64px;width:440px;}

/* marquee */
.marquee{
  margin-top:70px;
  margin-bottom:0;
  overflow:hidden;
  line-height:1.12;
  pointer-events:none;
}
.marquee__track{
  display:flex;
  width:max-content;
  animation:marqueeFlow 52s linear infinite;
}
.marquee__track span{
  font-family:var(--f-zen);
  font-weight:700;
  font-size:90px;
  letter-spacing:.01em;
  color:#DBD5AF;
  white-space:nowrap;
  padding-right:100px;
}
@keyframes marqueeFlow{from{transform:translateX(-50%);}to{transform:translateX(0);}}

/* =========================================================
   Footer
   ========================================================= */
.site-footer{
  position:relative;
  color:#fff;
  padding:72px 0 0;
}
.site-footer__inner{
  width:min(var(--cw),calc(100% - 40px));
  margin:0 auto;
  padding-left:15px;
}
.site-footer__logo{width:375px;}
.site-footer__name{
  font-size:16px;font-weight:700;letter-spacing:.1em;margin-top:34px;
}
.site-footer__addr{
  font-size:12.5px;
  line-height:2;
  color:#E8E8E8;
  margin-top:10px;
}
.site-footer__addr a{text-decoration:underline;text-underline-offset:3px;}
.company-table td a{transition:color .3s;}
.company-table td a:hover{color:var(--red-mid);}
a.tel-link{color:inherit;}
.site-footer__tel{
  display:flex;align-items:center;gap:12px;
  margin-top:26px;
}
.site-footer__tel .icon{
  width:34px;height:34px;border-radius:50%;
  background:var(--grad-chip);
  display:inline-flex;align-items:center;justify-content:center;
}
.site-footer__tel .icon::before{
  content:"";width:16px;height:16px;background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='4' y='1' width='8' height='14' rx='1.5' fill='none' stroke='%23fff' stroke-width='1.4'/%3E%3Cline x1='6.5' y1='13' x2='9.5' y2='13' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='4' y='1' width='8' height='14' rx='1.5' fill='none' stroke='%23fff' stroke-width='1.4'/%3E%3Cline x1='6.5' y1='13' x2='9.5' y2='13' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E") center/contain no-repeat;
}
.site-footer__tel .num{
  font-family:var(--f-zen);
  font-size:30px;font-weight:700;letter-spacing:.04em;
}
.site-footer__tel .hours{font-size:12px;color:#DDD;}
.site-footer__copy{
  margin-top:48px;
  border-top:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.25);
  text-align:center;
  font-size:11.5px;
  letter-spacing:.08em;
  color:#CCC;
  padding:14px 0;
}

/* =========================================================
   Sub-page hero
   ========================================================= */
.page-hero{
  position:relative;
  color:#fff;
  padding-top:0;
  height:640px;
  overflow:hidden;
}
.page-hero__photo,.page-hero .breadcrumb,.page-hero__title{
  opacity:0;
  transition:opacity 1s ease,transform 1s ease;
}
.page-hero__photo{transform:scale(1.04);}
.page-hero .breadcrumb{transition-delay:.45s;transform:translateY(10px);}
.page-hero__title{transition-delay:.7s;transform:translateY(22px);}
body.is-loaded .page-hero__photo{opacity:.6;transform:none;}
body.is-loaded .page-hero .breadcrumb{opacity:1;transform:none;}
body.is-loaded .page-hero__title{opacity:1;transform:none;}
.is-shot .page-hero__photo{opacity:.6 !important;transform:none !important;}
.is-shot .page-hero .breadcrumb,.is-shot .page-hero__title{opacity:1 !important;transform:none !important;}
.page-hero__photo{
  position:absolute;
  right:0;top:0;
  width:88%;
  height:100%;
  object-fit:cover;
  opacity:.6;
  filter:brightness(.7);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 22%),linear-gradient(180deg,transparent 0,#000 90px);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg,transparent 0%,#000 22%);
}
.page-hero__inner{
  position:relative;
  width:min(var(--cw),calc(100% - 40px));
  margin:0 auto;
  padding-top:130px;
  z-index:2;
}
.breadcrumb{
  font-family:var(--f-zen);
  font-size:11px;
  letter-spacing:.12em;
  color:rgba(255,255,255,.85);
}
.breadcrumb a:hover{text-decoration:underline;}
.page-hero__title{
  margin-top:70px;
  font-family:var(--f-zen);
  font-weight:500;
  font-size:96px;
  line-height:1.1;
  letter-spacing:.02em;
}
.page-hero::after{
  content:"";
  position:absolute;left:0;right:0;bottom:-1px;
  height:300px;
  background:var(--beige);
  clip-path:polygon(0 0%,100% 66%,100% 100%,0 100%);
  z-index:1;
}
.page-hero--short{height:640px;}
/* Blog page only: shrink the diagonal beige transition so less empty space shows above the "ブログ" heading */
body.blog .page-hero::after{height:150px;}

/* watermark helper */
.watermark{
  position:absolute;
  pointer-events:none;
  opacity:.85;
}
[data-plx]{will-change:transform;}

/* =========================================================
   About page
   ========================================================= */
.sec-message{
  position:relative;
  padding:110px 0 130px;
  overflow:hidden;
}
.sec-message .watermark{
  right:-160px;top:20px;width:920px;
  opacity:.8;
}
.about-grid{
  width:min(var(--cw),calc(100% - 40px));
  margin:0 auto;
  display:grid;
  grid-template-columns:360px 1fr;
  gap:40px;
  position:relative;
}
.about-h{
  font-family:var(--f-zen);
  font-weight:500;
  font-size:44px;
  color:var(--ink);
  line-height:1.2;
}
.about-h small{
  display:block;
  font-size:12px;
  color:var(--ink);
  font-family:var(--f-gothic);
  margin-top:14px;
  padding-top:12px;
  position:relative;
}
.about-h small::before{
  content:"";position:absolute;top:0;left:0;width:270px;height:2px;background:var(--red-mid);
}
.message-catch{
  font-size:24px;font-weight:700;margin-bottom:28px;
}
.message-body p{
  font-size:15px;line-height:2.9;letter-spacing:.06em;
}
.message-sign{
  margin-top:40px;font-size:15px;font-weight:700;letter-spacing:.14em;
}
.sec-philosophy{
  position:relative;
  padding:110px 0 160px;
  background:linear-gradient(180deg,#fff 0%,#fff 58%,rgba(255,255,255,.45) 100%),url(../img/city.jpg) center bottom/cover no-repeat;
}
.philo-label{
  font-size:15px;font-weight:700;color:var(--red-mid);letter-spacing:.1em;margin-bottom:22px;
}
.philo-block{margin-bottom:70px;}
.philo-mission{
  font-size:28px;font-weight:700;line-height:2;letter-spacing:.06em;
}
.philo-value-lead{font-size:15px;line-height:2.3;margin-bottom:28px;}
.philo-values li{
  font-size:14.5px;
  margin-bottom:10px;
}
.philo-values b{font-size:16px;}
.philo-idents h4{font-size:20px;font-weight:700;margin:36px 0 6px;}
.philo-idents p{font-size:14px;}
.sec-company{
  position:relative;
  padding:110px 0 200px;
  overflow:hidden;
}
.sec-company .watermark{display:none;}
.sec-company::before{
  content:"";
  position:absolute;
  right:40px;top:50%;transform:translateY(-50%);
  width:min(500px,42vw);aspect-ratio:1;
  border-radius:50%;
  border:78px solid rgba(199,190,160,.16);
  z-index:0;pointer-events:none;
}
.sec-company .about-grid{position:relative;z-index:1;}
.sec-company::after{
  content:"";
  position:absolute;
  right:calc(40px + min(500px,42vw)/2);
  top:50%;
  transform:translate(50%,-50%);
  width:130px;height:130px;
  border-radius:50%;
  background:rgba(199,190,160,.22);
  z-index:0;pointer-events:none;
}
.company-table{
  width:100%;
  border-collapse:collapse;
  font-size:14.5px;
}
.company-table th{
  width:200px;
  text-align:left;
  color:#888;
  font-weight:500;
  padding:20px 10px;
  vertical-align:top;
  border-bottom:1px solid #D9D5C2;
}
.company-table td{
  padding:20px 10px;
  border-bottom:1px solid #D9D5C2;
  line-height:2;
}
.company-table td a{text-decoration:underline;text-underline-offset:3px;}

/* =========================================================
   Recruit page
   ========================================================= */
.sec-recruit-intro{
  position:relative;
  padding:110px 0 90px;
  overflow:hidden;
}
.sec-recruit-intro .watermark{
  right:0;top:24px;left:auto;bottom:auto;width:640px;opacity:.7;
}
.rec-catch{
  font-size:34px;font-weight:700;letter-spacing:.08em;margin-bottom:34px;
}
.rec-lead{font-size:15px;line-height:2.4;}
.culture-grid{
  width:min(var(--cw),calc(100% - 40px));
  margin:70px auto 0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
}
.culture-card{background:#fff;padding-bottom:28px;}
.culture-card__photo{
  position:relative;
  aspect-ratio:280/300;
  overflow:hidden;
}
.culture-card__photo img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(.35) sepia(.3) hue-rotate(-20deg) saturate(1.35) brightness(1.0);
}
.culture-card__photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(196,90,60,.5),rgba(196,90,60,.3));
  mix-blend-mode:multiply;
}
.culture-card__photo h3{
  position:absolute;left:18px;top:12px;z-index:2;
  color:#fff;
  font-family:var(--f-zen);
  font-weight:700;
  font-size:32px;
  line-height:1.3;
}
.culture-card__body{
  padding:22px 22px 0;
  font-size:13.5px;
  line-height:2.1;
}
.rec-middle-catch{
  font-style:italic;
  font-size:44px;
  font-weight:900;
  letter-spacing:.04em;
  line-height:1.9;
  margin:110px 0 26px;
}
.rec-middle-note{font-size:15px;line-height:2.2;}
.center{display:flex;justify-content:center;}
/* Job-type tabs: sit between the "応募する" button and the 募集要項 card.
   Clicking one shows the matching .youken-card and hides the others. */
.job-tabs{
  width:min(1240px,100%);
  margin:60px auto 0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
}
.job-tab{
  height:46px;
  padding:0 32px;
  border-radius:23px;
  border:1px solid var(--red-mid);
  background:#fff;
  color:var(--red-mid);
  font-size:15px;
  font-weight:700;
  font-family:inherit;
  letter-spacing:.04em;
  cursor:pointer;
  transition:all .25s;
}
.job-tab:hover{background:#fdeceb;}
.job-tab.is-active{background:var(--red-mid);color:#fff;}
.youken-card{display:none;}
.youken-card.is-active{
  display:block;
  width:min(1240px,100%);
  margin:40px auto 0;
  background:linear-gradient(90deg,#ffffff 0%,#EFEDDE 100%);
  border-radius:24px;
  box-shadow:0 24px 60px rgba(60,40,20,.10);
  padding:70px 90px 80px;
}
.youken-card h3{
  text-align:center;
  font-size:36px;
  font-weight:800;
  font-style:italic;
  letter-spacing:.2em;
  margin-bottom:46px;
}
.youken-table{width:100%;border-collapse:collapse;font-size:14px;}
.youken-table th{
  width:170px;text-align:left;color:#999;font-weight:500;
  padding:18px 6px;vertical-align:top;
  border-bottom:1px dashed #CFC8B8;
}
.youken-table td{
  padding:18px 6px;line-height:2.1;
  border-bottom:1px dashed #CFC8B8;
}
.youken-table .note{font-size:12.5px;color:#666;}
.sec-flow{padding:60px 0 140px;}
.flow-card{
  width:min(1240px,100%);
  margin:40px auto 0;
  background:linear-gradient(160deg,#fff 0%,#F8F6EE 100%);
  border-radius:24px;
  padding:40px 90px;
}
.flow-row{
  display:grid;
  grid-template-columns:90px 130px 300px 1fr;
  align-items:center;
  gap:20px;
  padding:44px 0;
}
.flow-row+.flow-row{border-top:1px dashed #C9C2B2;}
.flow-row .num{
  font-family:var(--f-zen);
  font-size:40px;font-weight:500;color:#222;
}
.flow-row .icon img{height:76px;width:auto;margin:0 auto;}
.flow-row .what .en{
  display:block;font-family:var(--f-zen);font-size:13px;letter-spacing:.14em;color:var(--red-mid);font-weight:700;
}
.flow-row .what .ja{font-size:22px;font-weight:700;line-height:1.7;}
.flow-row .desc{font-size:14px;line-height:2.1;color:#444;}
.rec-last-catch{
  text-align:center;
  font-style:italic;
  font-size:36px;font-weight:900;letter-spacing:.06em;
  margin:120px 0 20px;
}
.rec-last-note{text-align:center;font-size:15px;}
.sec-flow .btn-main,.sec-recruit-intro .btn-main{width:520px;}

/* =========================================================
   Blog archive
   ========================================================= */
.blog-intro{
  padding:0 0 60px;
}
.blog-intro__inner{
  width:min(1250px,calc(100% - 40px));
  margin:0 auto;
  text-align:center;
}
.blog-h{
  font-size:40px;font-weight:700;letter-spacing:.1em;
  display:inline-block;
  border-bottom:2px solid var(--red-mid);
  padding-bottom:8px;
}
.blog-lead{font-size:15px;font-weight:600;margin-top:18px;}
.cat-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:30px;}
.cat-chip{
  height:34px;
  padding:0 26px;
  border-radius:17px;
  border:1px solid var(--red-mid);
  color:var(--red-mid);
  background:transparent;
  font-size:15px;
  font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;
  transition:all .3s;
}
.cat-chip.is-active,.cat-chip:hover{
  background:var(--grad-chip);
  color:#fff;
  border-color:transparent;
}
.blog-grid-wrap{background:#fff;padding:90px 0 90px;}
.blog-grid{
  width:min(1332px,calc(100% - 40px));
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  column-gap:36px;
  row-gap:72px;
}
.blog-grid .post-card{width:auto;}
.blog-grid .post-card__img{width:calc(100% - 33px);height:300px;}
.blog-grid .post-card__box{width:calc(100% - 60px);}
.blog-grid .post-card__box .arrow{background:var(--red-mid);}
.blog-grid .post-card__box .arrow::before{color:#fff;}
.pagination{
  display:flex;justify-content:center;align-items:center;gap:26px;
  margin-top:80px;
  font-family:var(--f-zen);
  font-size:15px;
}
.pagination a,.pagination span{color:#999;}
.pagination .current{color:var(--red-mid);font-weight:700;}
.pagination a:hover{color:var(--red-mid);}

/* =========================================================
   Blog single
   ========================================================= */
.single-hero{
  height:700px;
  position:relative;
  overflow:hidden;
}
.single-hero img{
  width:100%;height:100%;object-fit:cover;
}
.single-breadcrumb{
  background:var(--beige);
  padding:14px 0;
}
.single-breadcrumb .breadcrumb{color:#8A8676;}
.article-wrap{
  background:#fff;
  padding:60px 0 120px;
}
.article{
  width:min(1250px,calc(100% - 40px));
  margin:0 auto;
}
.article__meta{display:flex;align-items:center;gap:26px;}
.article__date{
  font-family:var(--f-zen);
  font-size:22px;font-weight:700;letter-spacing:.06em;
}
.article__title{
  font-size:38px;font-weight:700;line-height:1.8;letter-spacing:.04em;
  margin:30px 0 46px;
}
.article__body{font-size:15.5px;line-height:2.3;}
.article__body>p{margin-bottom:1.6em;}
.toc{
  background:#F1F0EA;
  padding:26px 34px 34px;
  margin:40px 0 70px;
}
.toc__title{font-size:14px;font-weight:700;margin-bottom:14px;}
.toc li{
  font-size:15px;font-weight:700;
  padding:12px 4px;
}
.toc li+li{border-top:1px dashed #C9C4B4;}
.toc a:hover{color:var(--red-mid);}
.article__body h2{
  font-size:26px;font-weight:700;
  border-bottom:2px solid var(--red-mid);
  padding-bottom:12px;
  margin:80px 0 30px;
}
.article__body h3{
  font-size:17px;font-weight:700;
  margin:44px 0 10px;
  display:flex;align-items:center;gap:8px;
}
.article__body h3::before{
  content:"";width:12px;height:12px;border-radius:50%;background:var(--red-mid);flex:none;
}
.article__body figure{margin:40px 0 60px;}
.article__figrow{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:40px 0 60px;
}
.related{
  margin-top:110px;
  position:relative;
}
.related__bg{
  position:absolute;top:-28px;left:-6px;
  font-family:var(--f-zen);
  font-size:44px;font-weight:700;color:#EFEDE6;
  z-index:0;
}
.related h2{
  position:relative;
  font-size:24px;font-weight:700;
  border-bottom:2px solid var(--red-mid);
  display:inline-block;
  padding-bottom:8px;padding-right:200px;
  margin-bottom:34px;
}
.related-item{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:30px;
  align-items:center;
  padding:20px 0;
}
.related-item+.related-item{border-top:1px dashed #D5D0C0;}
.related-item img{width:150px;height:100px;object-fit:cover;}
.related-item .meta{display:flex;align-items:center;gap:18px;font-size:13px;}
.related-item .title{font-size:16px;font-weight:700;line-height:1.9;margin-top:6px;}
.related-item:hover .title{color:var(--red-mid);}

/* =========================================================
   Contact / Entry (split layout)
   ========================================================= */
.formpage{
  display:grid;
  grid-template-columns:44% 56%;
  min-height:100vh;
}
.formpage-marquee{
  margin-top:-150px;
  position:relative;
  z-index:2;
  pointer-events:none;
  overflow:hidden;
  line-height:1;
  margin-bottom:0;
}
.formpage-marquee .marquee__track span{color:rgba(219,213,175,.55);}
.formpage__left{
  position:relative;
  background:var(--beige);
  padding:170px 70px 220px 110px;
  overflow:hidden;
}
.formpage__left .breadcrumb{
  position:absolute;top:110px;left:110px;color:#8A8676;
}
.formpage__title{
  font-family:var(--f-zen);
  font-weight:500;
  font-size:84px;
  color:#222;
  line-height:1.1;
}
.formpage__lead{
  margin-top:60px;
  font-size:15px;
  line-height:2.4;
}
.formpage__lead+.formpage__lead{margin-top:34px;}
.formpage__photo{
  position:absolute;
  left:0;right:0;bottom:0;
  height:56%;
  object-fit:cover;
  width:100%;
  opacity:.55;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 45%);
          mask-image:linear-gradient(180deg,transparent 0,#000 45%);
  filter:sepia(.35) saturate(.7) brightness(1.05);
}
.formpage__catch{
  font-style:italic;font-weight:900;font-size:30px;letter-spacing:.06em;
  margin-bottom:30px;
}
.formpage__right{
  background:#fff;
  padding:170px 250px 220px 100px;
}
.form-field{margin-bottom:26px;}
.form-field label{
  display:block;
  font-size:14px;
  font-weight:500;
  margin-bottom:8px;
}
.form-field label .req{color:var(--red-mid);margin-left:2px;}
.form-field input[type=text],
.form-field input[type=email],
.form-field input[type=tel],
.form-field select,
.form-field textarea{
  width:100%;
  border:1px solid #C9C9C9;
  background:#F4F4F4;
  border-radius:8px;
  padding:13px 16px;
  font-size:14px;
  font-family:inherit;
  color:#333;
  transition:border-color .3s,background .3s;
  appearance:none;
}
.form-field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
}
.form-field textarea{min-height:150px;resize:vertical;}
.form-field :focus{outline:none;border-color:var(--red-mid);background:#fff;}
.form-note{font-size:13.5px;line-height:2.1;margin:34px 0 26px;}
.privacy-box{
  border:1px solid #DDD;
  padding:26px 30px;
  height:220px;
  overflow-y:auto;
  font-size:12.5px;
  line-height:2;
  color:#555;
}
.privacy-box h4{font-size:14px;color:#333;margin-bottom:12px;}
.privacy-box{scrollbar-width:thin;scrollbar-color:#C9C2B2 transparent;}
.privacy-box::-webkit-scrollbar{width:6px;}
.privacy-box::-webkit-scrollbar-track{background:transparent;}
.privacy-box::-webkit-scrollbar-thumb{background:#C9C2B2;border-radius:3px;}
.agree-row{
  display:flex;align-items:center;gap:10px;
  margin:30px 0 44px;
  font-size:14px;font-weight:700;
}
.agree-row input{
  width:18px;height:18px;
  accent-color:var(--red-mid);
}
.form-submit{
  width:440px;max-width:100%;
  height:64px;
  border-radius:32px;
  background:var(--grad);
  color:#fff;
  font-size:16px;font-weight:700;letter-spacing:.1em;
  position:relative;
  padding-left:36px;
  text-align:left;
  box-shadow:0 10px 24px rgba(164,0,2,.35);
  transition:opacity .3s,transform .3s;
}
.form-submit .arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:#fff;}
.form-submit .arrow::before{color:var(--red-mid);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M0 4h12M9 1l3 3-3 3' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M0 4h12M9 1l3 3-3 3' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
  background:var(--red-mid);}
.form-submit:disabled{opacity:.45;cursor:not-allowed;}
.form-submit:not(:disabled):hover{transform:translateY(-2px);}

/* form confirm & thanks steps */
.form-step{display:none;}
.form-step.is-current{display:block;}
.confirm-table{width:100%;border-collapse:collapse;font-size:14.5px;margin-bottom:40px;}
.confirm-table th{
  width:170px;text-align:left;color:#999;font-weight:500;
  padding:16px 6px;vertical-align:top;border-bottom:1px dashed #DDD;
}
.confirm-table td{padding:16px 6px;border-bottom:1px dashed #DDD;line-height:1.9;white-space:pre-wrap;}
.confirm-actions{display:flex;gap:20px;align-items:center;flex-wrap:wrap;}
.btn-back{
  height:64px;padding:0 40px;border-radius:32px;
  border:1px solid #BBB;color:#666;font-size:15px;letter-spacing:.1em;
  background:#fff;transition:all .3s;
}
.btn-back:hover{border-color:#888;color:#333;}
.thanks-box{padding:20px 0 60px;}
.thanks-box h2{font-size:26px;font-weight:700;margin-bottom:24px;letter-spacing:.06em;}
.thanks-box p{font-size:15px;line-height:2.3;}
.thanks-box .btn-main{margin-top:48px;}

/* single post prev/next */
.post-nav{
  display:flex;justify-content:space-between;gap:20px;
  margin-top:70px;padding-top:30px;border-top:1px dashed #D5D0C0;
  font-size:14px;
}
.post-nav a{color:var(--red-mid);font-weight:700;}
.post-nav a:hover{text-decoration:underline;}
.post-nav .prev::before{content:"← ";}
.post-nav .next::after{content:" →";}

/* privacy policy simple page */
.plain-page{
  background:#fff;
  padding:80px 0 120px;
}
.plain-page .article__title{font-size:30px;}
.plain-page h2{font-size:20px;font-weight:700;margin:44px 0 12px;}

/* =========================================================
   SP menu overlay
   ========================================================= */
.sp-menu{
  position:fixed;inset:0;z-index:2000;
  background:linear-gradient(135deg,#8E1E1B 0%,#C0392E 55%,#D4574A 100%);
  display:flex;flex-direction:column;align-items:center;
  padding:90px 30px 50px;
  overflow-y:auto;
  transform:translateY(-102%);
  visibility:hidden;
  transition:transform .5s cubic-bezier(.6,0,.3,1),visibility 0s linear .5s;
}
.sp-menu.is-open{transform:none;visibility:visible;transition:transform .5s cubic-bezier(.6,0,.3,1);}
.sp-menu__close{
  position:absolute;top:26px;right:26px;
  width:34px;height:34px;
}
.sp-menu__close::before,.sp-menu__close::after{
  content:"";position:absolute;left:2px;right:2px;top:50%;height:3px;background:#fff;border-radius:2px;
}
.sp-menu__close::before{transform:rotate(45deg);}
.sp-menu__close::after{transform:rotate(-45deg);}
.sp-menu nav{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:20px;}
.sp-menu nav a{
  color:#fff;
  font-family:var(--f-zen);
  font-size:28px;
  font-weight:500;
  letter-spacing:.16em;
  padding:14px 0;
}
.sp-menu .btn-contact{
  margin-top:26px;
  min-width:246px;height:60px;border-radius:30px;
  background:#fff;color:var(--red-mid) !important;
  font-size:20px;font-weight:700;
}
.sp-menu__tel{
  margin-top:60px;text-align:center;color:#fff;
}
.sp-menu__tel .num{
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--f-zen);font-size:30px;font-weight:700;
}
.sp-menu__tel .num .icon{
  width:30px;height:30px;border-radius:50%;background:#fff;
  display:inline-flex;align-items:center;justify-content:center;flex:none;
}
.sp-menu__tel .num .icon::before{
  content:"";width:14px;height:14px;background:var(--red-mid);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='4' y='1' width='8' height='14' rx='1.5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='4' y='1' width='8' height='14' rx='1.5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.sp-menu__tel .hours{font-size:12.5px;margin-top:6px;}
.sp-menu__logo{width:210px;margin-top:auto;}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1500px){
  :root{--cw:calc(100% - 80px);}
  .top-about__art{width:520px;right:20px;}
  .fv__copy h2{font-size:60px;}
}
@media (max-width:1200px){
  .top-about__art{position:relative;width:480px;margin:60px auto 0;}
  .top-about__text{max-width:none;}
  .biz-diagram{min-height:auto;display:flex;flex-direction:column;align-items:center;gap:20px;}
  .biz-label{position:static;width:100%;max-width:520px;text-align:left;}
  .biz-diagram--6 .biz-label,.biz-diagram--6 .biz-label--3{width:100%;max-width:520px;text-align:left;}
  .biz-solutions__grid{grid-template-columns:repeat(3,1fr);row-gap:26px;}
  .rec-slide__person{height:72%;left:55%;}
  .rec-slide__vtext{left:41%;font-size:44px;}
  .culture-grid{grid-template-columns:repeat(2,1fr);}
  .blog-grid{grid-template-columns:repeat(2,1fr);column-gap:40px;}
  .formpage{grid-template-columns:1fr;}
  .formpage__left{padding:150px 40px 260px;}
  .formpage__right{padding:70px 40px 90px;}
  .fv__marquee{font-size:64px;}
  .marquee__track span{font-size:82px;}
  .page-hero__title{font-size:72px;}
}
@media (max-width:768px){
  body{font-size:14px;}
  :root{--header-h:56px;--cw:calc(100% - 32px);}
  .site-header{top:12px;}
  .site-header__inner{padding:0 12px 0 20px;}
  .site-header__logo img{width:128px;height:auto;}
  .site-header__nav{display:none;}
  .site-header__burger{
    display:block;width:40px;height:40px;position:relative;
  }
  .site-header__burger span{
    position:absolute;left:8px;right:8px;height:2.5px;background:#222;border-radius:2px;
    transition:all .3s;
  }
  .site-header__burger span:nth-child(1){top:12px;}
  .site-header__burger span:nth-child(2){top:19px;}
  .site-header__burger span:nth-child(3){top:26px;}
  .header-sp-contact{
    display:inline-flex !important;
    margin-left:auto;margin-right:6px;
    min-width:86px;height:30px;font-size:11.5px;letter-spacing:.08em;padding:0 14px;
  }
  .site-header__burger{flex:none;}

  .fv{min-height:560px;}
  .fv-scroll{height:320vh;}
  .fv-logo{width:82vw;}
  .fv__caption{font-size:12px;bottom:22%;}
  .fv__copy h2{font-size:34px;line-height:1.7;}
  .fv__copy p{font-size:12px;padding:0 20px;}
  .fv-slogan span{font-size:44px;}
  .fv__scroll{right:20px;}

  .sec-head__en{font-size:min(40px,10.5vw);white-space:nowrap;}
  .top-about__inner{padding:90px 0 120px;}
  .top-about__catch{font-size:24px;line-height:1.9;}
  .top-about__body{font-size:14px;line-height:2.2;}
  .top-about__art{width:86%;margin:-24px auto 0;text-align:center;}
  .top-about__art video{top:-16%;}
  .top-about__mark{overflow:hidden;}
  .top-about__art img.txt{width:56%;margin:10px auto 0;}
  .btn-main{width:100%;height:60px;font-size:15px;}

  .top-business{padding:90px 0;}
  .top-business__catch{font-size:26px;line-height:1.8;}
  .biz-tabs{
    flex-direction:column;
    align-items:stretch;
    background:#2a1b15;
    border-radius:20px;
    padding:8px;
    margin:40px 16px 30px;
    width:auto;max-width:none;
    gap:0;
  }
  .biz-tabs button{
    flex:none;
    height:auto;
    min-height:56px;
    padding:16px 48px;
    text-align:center;
    color:#fff;
    font-weight:700;
    font-size:16px;
    letter-spacing:.04em;
    border-radius:14px;
    position:relative;
  }
  .biz-tabs button::after{
    content:"";
    position:absolute;right:14px;top:50%;transform:translateY(-50%);
    width:28px;height:28px;border-radius:50%;
    background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M1.5 1l5 5-5 5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/8px 12px no-repeat;
  }
  .biz-tabs button+button::before{
    content:"";position:absolute;left:16px;right:16px;top:0;bottom:auto;width:auto;height:1px;background:rgba(255,255,255,.15);
  }
  .biz-tabs button.is-active{
    background:#fff;
    color:var(--red);
    border-radius:14px;
  }
  .biz-tabs button.is-active::before{display:none;}
  .biz-tabs button.is-active+button::before{display:none;}
  .biz-panel{border-radius:0 0 14px 14px;margin-top:14px;}
  .biz-panel__bar .ja{font-size:22px;}
  .biz-panel__bar .en{font-size:11px;}
  .biz-panel__lead br,.top-business__lead br,.top-blog__lead br,.fv__copy p br{display:none;}
  .biz-diagram{counter-reset:step;}
  .biz-label{counter-increment:step;width:100%;max-width:none;text-align:left;padding:0 24px;}
  .biz-label b::before{
    content:counter(step,decimal-leading-zero);
    font-family:var(--f-zen);
    font-size:22px;font-weight:500;color:#222;
    margin-right:12px;
  }
  .biz-label--3 b{display:block;margin-right:0;}
  .biz-panel__tagline{font-size:20px;line-height:1.8;padding:0 16px;}
  .biz-panel__lead{text-align:left;padding:0 24px;}
  .biz-diagram__circle{max-width:86%;}
  .biz-label b{font-size:15px;}
  .biz-solutions__grid{grid-template-columns:repeat(2,1fr);}
  .biz-solutions__grid>div:nth-child(2n+1)::before{display:none;}
  .biz-solutions__grid b{white-space:normal;}
  .blog-grid .post-card__img{height:240px;}

  .top-recruit{min-height:auto;}
  /* The 4 slides crossfade in place, but each one's own content height can differ by a
     few px (the 3-line head text doesn't always wrap identically). Previously only the
     "active" slide was laid out in-flow (to give the section its height) and swapped
     instantly on every transition — which made the section's height jump between
     slides and, since .top-recruit clips overflow, made the photo appear to hop up for
     a moment. A grid fixes this at the root: all 4 slides are placed in the SAME grid
     cell, so the row's height is always the tallest of all 4 at once, all the time, and
     switching which one is opacity-visible never changes the section's height. */
  .top-recruit__inner{padding:90px 0 70px;min-height:0;display:grid;grid-template-columns:1fr;}
  .top-recruit__inner>.sec-head{grid-row:1;grid-column:1;}
  .top-recruit__bgphoto{width:140%;top:40%;}
  /* Mobile: same always-visible heading/body layer as desktop, but placed in the grid instead
     of absolutely positioned. */
  .rec-static{position:relative;inset:auto;padding:0;z-index:auto;grid-row:2;grid-column:1;}
  .rec-slide{position:relative;inset:auto;padding:0;grid-row:3;grid-column:1;}
  .rec-slide__head{font-size:21px;min-height:126px;margin:32px 0 24px;}
  .rec-slide__body{font-size:14px;max-width:none;}
  .rec-slide__person{position:relative;display:block;right:auto;left:19%;bottom:auto;width:62%;height:114vw;object-fit:contain;object-position:bottom center;margin-top:4px;}
  /* rec_person_2.png is framed/cropped closer than the other 3 photos, so it renders visibly
     larger at the same box size; scale it down to match the others' apparent size. */
  .rec-slide__person[src*="rec_person_2.png"]{transform:scale(.85);transform-origin:bottom center;}
  .rec-slide__vtext{left:auto;right:16px;top:auto;bottom:40px;font-size:32px;}
  .top-recruit .btn-main{position:relative;top:auto;left:auto;z-index:5;margin-top:-24px;width:100%;grid-row:4;grid-column:1;}
  .top-recruit .btn-main .arrow{display:none;}

  .top-blog{padding:90px 0 0;}
  .post-card{width:330px;}
  .post-card__img{width:300px;height:222px;}
  .post-card__box{width:290px;}
  .blog-carousel .post-card{margin-right:24px;}
  /* let the row be swiped horizontally by hand while the page still scrolls vertically normally */
  .blog-carousel{touch-action:pan-y;-webkit-user-select:none;user-select:none;}
  .marquee__track span{font-size:50px;}

  .site-footer{padding-top:70px;}
  .site-footer__inner{padding-left:0;}
  .site-footer__logo{width:230px;}
  .site-footer__tel .num{font-size:26px;}
  .site-footer__tel{flex-wrap:wrap;}
  .site-footer__tel .hours{flex-basis:100%;margin-top:4px;}

  .page-hero{height:420px;}
  .page-hero__title{font-size:44px;margin-top:40px;}
  .page-hero::after{height:110px;}
  .about-grid{grid-template-columns:1fr;gap:36px;}
  .about-h{font-size:32px;}
  .message-catch{font-size:19px;}
  .message-body p{font-size:14px;}
  .philo-mission{font-size:20px;}
  .company-table th{width:100px;font-size:13px;padding:16px 4px;}
  .company-table td{font-size:13.5px;padding:16px 4px;}

  .rec-catch{font-size:24px;}
  .culture-grid{grid-template-columns:1fr;}
  .rec-middle-catch{font-size:24px;}
  .job-tabs{gap:10px;margin:36px auto 0;}
  .job-tab{height:40px;padding:0 20px;font-size:13px;}
  .youken-card.is-active{padding:44px 22px;margin:28px auto 0;}
  .youken-card h3{font-size:26px;}
  .youken-table th{width:96px;font-size:12.5px;}
  .youken-table td{font-size:13px;}
  .flow-card{padding:10px 24px;}
  .flow-row{grid-template-columns:52px 64px 1fr;gap:12px;padding:30px 0;}
  .flow-row .num{font-size:28px;}
  .flow-row .icon img{height:52px;}
  .flow-row .what .ja{font-size:18px;}
  .flow-row .desc{grid-column:1/-1;}
  .rec-last-catch{font-size:22px;}
  .sec-flow .btn-main,.sec-recruit-intro .btn-main{width:100%;}

  .blog-h{font-size:28px;}
  .blog-grid{grid-template-columns:1fr;row-gap:50px;}
  .single-hero{height:300px;}
  .article__title{font-size:24px;}
  .article__body{font-size:14px;}
  .article__body h2{font-size:20px;}
  .article__figrow{grid-template-columns:1fr;}
  .related-item{grid-template-columns:110px 1fr;gap:16px;}

  .formpage__left{padding:130px 24px 200px;}
  .formpage__left .breadcrumb{left:24px;top:90px;}
  .formpage__title{font-size:52px;}
  .formpage__lead{margin-top:30px;font-size:14px;}
  .formpage__right{padding:60px 24px 80px;}
  .form-submit{width:100%;}
}

/* anchor scroll offset for fixed header (nav -> section) */
.top-about,.top-business,.top-recruit,.top-blog{scroll-margin-top:16px;}

/* About us: PC used to hide the static mark entirely (opacity:0, both before AND after
   the video starts playing) and rely only on the video (900x506 — much lower resolution
   than the mark artwork, and h264-compressed on top of that) for the whole visual. That's
   exactly why fixing the static image's quality never showed up on PC: it was invisible
   there the whole time, video included, since main.js adds an "is-behind" class to the
   mark once the video's `playing` event fires (see the video[data-poster-swap] handler in
   main.js), and .mark.is-behind is opacity:0 by default (rule above, ~line 439). Mobile
   already overrides that back to visible (below) so the crisp static mark shows underneath
   the video's mix-blend-mode:screen shimmer at all times; PC now does the same instead of
   fading down to the blurrier video alone. */
@media (min-width:769px){
  .top-about__art .mark.is-behind{opacity:1;}
}

/* TOP page footer: solid color instead of the pattern logo bg */
.home .site-footer.bg-pattern-cool{
  background-image:none;
  background-color:#2e3031;
}

/* mobile About: keep the mark clearly visible (in front of bg), art on top */
@media (max-width:768px){
  .top-about__inner{position:relative;z-index:1;}
  .top-about__art{position:relative;z-index:2;}
  .top-about__mark .mark.is-behind{opacity:1;}
  .top-about__art video{mix-blend-mode:screen;}
}

/* Business diagram: per-panel label position tweaks (PC) */
[data-panel="cc"] .biz-label--4{left:40px;bottom:82px;}
[data-panel="cc"] .biz-label--6{top:22px;}
[data-panel="dm"] .biz-label--4{left:40px;bottom:82px;}
[data-panel="ma"] .biz-label--4{left:40px;bottom:82px;}

/* Fluent Forms (Contact/Entry): match the original theme design */
.formpage__right .fluentform button[type="submit"],
.formpage__right .ff-btn-submit,
.formpage__right .ff_btn_style{
  background:var(--grad) !important;
  border:none !important;
  color:#fff !important;
  border-radius:32px !important;
  min-height:60px;
  font-weight:700;
  font-size:16px;
  letter-spacing:.06em;
  box-shadow:0 12px 24px rgba(164,0,2,.22);
}
.formpage__right .fluentform input[type="text"],
.formpage__right .fluentform input[type="email"],
.formpage__right .fluentform input[type="tel"],
.formpage__right .fluentform textarea,
.formpage__right .fluentform select{
  border:1px solid #d8d2c4 !important;
  border-radius:8px !important;
  background:#fff !important;
}
.formpage__right .ff-el-group{margin-bottom:20px;}

/* =========================================================================
   mobile About: logo layout (customizer CSS reflected into the theme)
   ========================================================================= */
@media screen and (max-width: 767px) {
  .top-about__mark {
    position: relative;
    top: -100px;
    left: 15px;
  }
  .top-about__mark .mark.is-behind {
    display: block;
  }
  .top-about__mark video {
    display: none;
  }
  /* 文字ロゴだけさらに上へ */
  .top-about__art .txt {
    position: relative;
    top: -80px;
    left: 13px;
  }
  .top-about__btn {
    position: relative;
    top: 50px;
  }
}

/* FV: keep the map (KV) fully hidden at the start (autoplay poster bleed-through) */
.fv-kv:not(.is-on) .fv-kv__video{display:none;}

/* mobile: Recruit hero logo smaller, slightly upper-right (cut ok), behind the text */
@media (max-width:768px){
  .sec-recruit-intro{position:relative;}
  .sec-recruit-intro .watermark{
    width:300px;right:-24px;top:6px;left:auto;bottom:auto;opacity:.5;z-index:0;
  }
  .sec-recruit-intro > *:not(.watermark){position:relative;z-index:1;}
}

/* mobile spacing fixes: COMPANY→slogan gap, form button/slogan overlap, footer height */
@media (max-width:768px){
  .marquee{margin-top:34px;}
  .formpage-marquee{margin-top:20px;}   /* was -150px: no longer overlaps the submit button */
  .site-footer{padding-top:44px;}
  .site-footer__inner{padding-bottom:8px;}
}

/* Recruitment Flow: center the step icons */
.flow-row .icon{display:flex;justify-content:center;align-items:center;}
.flow-row .icon img{margin:0 auto;transform:translateX(-32px);}

/* performance: defer rendering + image decode of far below-the-fold sections */
.top-blog,.sec-flow{content-visibility:auto;contain-intrinsic-size:auto 900px;}

/* laptop screens only (1201–1500px): pull the content toward the center */
@media (min-width:1201px) and (max-width:1500px){
  :root{--cw:calc(100% - 150px);}
}

/* mobile footer: shorter height */
@media (max-width:768px){
  .site-footer{padding-top:16px;}
  .site-footer__copy{margin-top:10px;padding:9px 0;}
  .site-footer__tel{margin-top:14px;}
  .site-footer__addr{margin-top:6px;}
}

/* ===== FV caption: keep it below the mark on laptops (short screens) ===== */
@media (min-width:769px) and (max-height:900px){
  .fv__caption{bottom:6%;}
}

/* ===== mobile text: line-break tidy-ups (HTML untouched; breaks removed via CSS) ===== */
@media (max-width:768px){
  /* About us body: no line breaks (flow together) */
  .top-about__body br{display:none;}
  /* Recruit culture card bodies: no line breaks */
  .culture-card__body br{display:none;}
  /* Recruit Flow step descriptions (incl. ② ④): no line breaks */
  .flow-row .desc br{display:none;}
  /* Business tabs (number menu): keep each on one line */
  .biz-tabs button{white-space:nowrap;}
  /* Recruit last catch: fit on one line */
  .rec-last-catch{white-space:nowrap;font-size:clamp(14px,4.4vw,22px);}
}

/* viewport-specific line breaks: add <br class="sp-br"> for mobile-only, <br class="pc-br"> for PC-only */
@media (max-width:768px){ .pc-br{display:none !important;} }
@media (min-width:769px){ .sp-br{display:none !important;} }

/* inline viewport toggles: <span class="pc-only">…</span> hides on mobile; <span class="sp-only">…</span> hides on PC */
@media (max-width:768px){ .pc-only{display:none !important;} }
@media (min-width:769px){ .sp-only{display:none !important;} }

/* mobile: Business diagram label descriptions on one line (no forced breaks) */
@media (max-width:768px){
  .biz-label br:not(.sp-br){display:none;}
}

/* mobile: widen biz-label descriptions so they fit on one line (avoid 1-char orphan) */
@media (max-width:768px){
  .biz-label{padding-left:8px;padding-right:8px;font-size:12px;}
}

/* mobile: pull the 応募する buttons up close to the content above */
@media (max-width:768px){
  .center .btn-main{margin-top:14px !important;}
}

/* Recruit culture cards: tinted photos + colored text boxes */
.culture-card:nth-child(1),
.culture-card:nth-child(3){background:#f7f6ef;}
.culture-card__photo{background:#e8cabb;}
.culture-card__photo img{filter:grayscale(1) brightness(1.02) contrast(0.95);mix-blend-mode:multiply;}

/* mobile: keep IT/DX solution descriptions on one line each */
@media (max-width:768px){
  .biz-solutions__grid p{font-size:10px;}
}



/* ===== Case Studies page (designed) ===== */
.sec-case{padding:90px 0 40px;}
.case-wrap{width:min(var(--cw),calc(100% - 40px));margin:0 auto;}
.case-head{margin-bottom:14px;}
.case-intro{font-size:15px;line-height:2;color:#555;margin:0 0 46px;}
.case-list{display:flex;flex-direction:column;gap:56px;}
.case-item{background:#fff;border-radius:18px;box-shadow:0 22px 50px rgba(60,40,20,.09);overflow:hidden;}
.case-item__media{position:relative;}
.case-item__photo{width:100%;aspect-ratio:16/7;object-fit:cover;display:block;}
.case-item__no{position:absolute;left:22px;top:22px;background:var(--red);color:#fff;font-family:var(--f-zen);font-weight:700;font-size:14px;letter-spacing:.14em;padding:7px 16px;border-radius:30px;box-shadow:0 6px 16px rgba(164,0,2,.28);}
.case-item__body{padding:30px 40px 38px;}
.case-item__title{display:inline-block;background:#fce8e7;color:#333;font-family:var(--f-zen);font-weight:700;font-size:22px;letter-spacing:.03em;padding:8px 20px;border-radius:9px;margin:0 0 18px;}
.case-item__body p{font-size:15px;line-height:2.2;letter-spacing:.04em;color:#4a4a4a;}
.sec-case-movie{padding:30px 0 100px;}
.case-movies{display:flex;flex-direction:column;gap:28px;margin-top:8px;}
.case-movie{width:100%;aspect-ratio:16/9;border-radius:16px;background:#000;display:block;box-shadow:0 18px 44px rgba(60,40,20,.12);}
@media (max-width:768px){
  .sec-case{padding:54px 0 20px;}
  .case-head{font-size:30px;}
  .case-intro{font-size:13.5px;margin-bottom:30px;}
  .case-list{gap:36px;}
  .case-item{border-radius:14px;}
  .case-item__photo{aspect-ratio:16/9;}
  .case-item__no{left:14px;top:14px;font-size:12px;padding:5px 12px;}
  .case-item__body{padding:20px 20px 26px;}
  .case-item__title{font-size:17px;padding:6px 14px;margin-bottom:12px;}
  .case-item__body p{font-size:13.5px;line-height:2.05;}
  .sec-case-movie{padding:16px 0 66px;}
  .case-movies{gap:18px;}
}

/* ===== Case Studies: 4 videos in a 2x2 grid with top-right titles ===== */
.case-movie-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:10px;}
.case-movie-item{position:relative;margin:0;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 18px 44px rgba(60,40,20,.14);transition:transform .35s ease,box-shadow .35s ease;}
.case-movie-item:hover{transform:translateY(-4px);box-shadow:0 26px 60px rgba(60,40,20,.2);}
.case-movie-item::before{content:"";position:absolute;left:0;right:0;top:0;height:78px;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0));z-index:1;pointer-events:none;}
.case-movie-item__title{position:absolute;top:14px;right:14px;z-index:2;color:#fff;font-family:var(--f-zen);font-weight:700;font-size:13px;letter-spacing:.12em;padding:6px 15px;border-radius:30px;background:rgba(164,0,2,.9);backdrop-filter:blur(2px);box-shadow:0 4px 12px rgba(0,0,0,.28);}
.case-movie-item .case-movie{width:100%;aspect-ratio:16/9;display:block;background:#000;border-radius:0;box-shadow:none;}
@media (max-width:768px){
  .case-movie-grid{grid-template-columns:1fr;gap:18px;}
  .case-movie-item{border-radius:13px;}
  .case-movie-item__title{font-size:11px;padding:5px 12px;top:11px;right:11px;}
}