@charset "utf-8";
/* =========================================================
   SOKEN CONSTRUCTION - index.css（TOPページ専用）
   ========================================================= */

/* =========================================================
   ① ヒーロー ＋ ローディング演出
   ========================================================= */
.mainVisualArea{position:relative;height:100vh;min-height:64rem;overflow:hidden;}
@media screen and (max-width:768px){.mainVisualArea{min-height:60rem}}
.mainVisualArea .innerBlock{position:relative;height:100%;width:100%;margin:0}

/* 墨出しの線 */
.inkLine{
  position:absolute;left:50%;top:50%;z-index:4;pointer-events:none;
  width:min(120rem,88vw);height:0;transform:translate(-50%,-50%);
  opacity:1;transition:opacity .35s var(--ease-out);
}
.inkLine .i{position:absolute;left:0;top:0;width:100%;height:.2rem;transition:transform .5s var(--ease)}
.inkLine .bar{
  display:block;width:100%;height:100%;background:var(--c-ink);
  transform:scaleX(0);transform-origin:center;
  transition:transform .6s var(--ease);
}
.inkLine.-draw .bar{transform:scaleX(1)}
.inkLine.-split .i.--top{transform:translateY(-13rem)}
.inkLine.-split .i.--btm{transform:translateY(13rem)}
.inkLine.-out{opacity:0}
@media screen and (max-width:768px){
  .inkLine.-split .i.--top{transform:translateY(-7rem)}
  .inkLine.-split .i.--btm{transform:translateY(7rem)}
}

/* オブジェクト群 */
.objContents{position:absolute;inset:0;z-index:1}
.objContents .inner{position:relative;width:100%;height:100%}
.objContents .l-obj{
  position:absolute;opacity:0;transform:translate3d(0,2rem,0) scale(.93);
  transition:opacity .7s var(--ease-out),transform .8s var(--ease-out);
}
.objContents.-in .l-obj{opacity:1;transform:translate3d(0,0,0) scale(1)}
.objContents.-in .l-obj:nth-child(1){transition-delay:0s}
.objContents.-in .l-obj:nth-child(2){transition-delay:.06s}
.objContents.-in .l-obj:nth-child(3){transition-delay:.12s}
.objContents.-in .l-obj:nth-child(4){transition-delay:.18s}
.objContents.-in .l-obj:nth-child(5){transition-delay:.24s}
.objContents.-in .l-obj:nth-child(6){transition-delay:.30s}
.objContents.-in .l-obj:nth-child(7){transition-delay:.36s}
.objContents.-in .l-obj:nth-child(8){transition-delay:.42s}
.objContents.-in .l-obj:nth-child(9){transition-delay:.48s}
.objContents.-in .l-obj:nth-child(10){transition-delay:.54s}

/* 写真スロット */
.objContents .objBox.--img .ph{width:100%;height:100%}
.objContents .__ph01{top:15%;left:6%;width:19rem;height:25rem}
.objContents .__ph02{top:62%;left:11%;width:22rem;height:15rem}
.objContents .__ph03{top:18%;right:7%;width:21rem;height:27rem}
@media screen and (max-width:768px){
  /* 左右は画面外へ少し逃がして大きく見せる */
  .objContents .__ph01{top:6%;left:-3rem;width:18rem;height:23rem}
  .objContents .__ph02{top:70%;left:3rem;width:20rem;height:11rem}
  .objContents .__ph03{top:8%;right:-3rem;width:19rem;height:24rem}
}

/* 図形 */
.objContents .__s01{top:9%;left:30%;width:7rem;height:7rem;--shape-color:var(--c-main)}
.objContents .__s02{top:55%;right:22%;width:9rem;height:9rem;--shape-color:var(--c-accent)}
.objContents .__s03{top:78%;right:9%;width:8rem;height:8rem;--shape-color:var(--c-accent)}
.objContents .__s04{top:24%;right:26%;width:6rem;height:6rem;--shape-color:var(--c-main)}
.objContents .__s05{top:88%;left:30%;width:12rem;height:1.8rem;--shape-color:var(--c-accent)}
.objContents .__s06{top:15%;right:16%;width:5rem;height:5rem;--shape-color:var(--c-main)}
.objContents .__s07{top:44%;left:3%;width:6rem;height:6rem;--shape-color:var(--c-main)}
@media screen and (max-width:768px){
  .objContents .__s01{top:3%;left:40%;width:3.6rem;height:3.6rem}
  .objContents .__s02{top:78%;right:26%;width:4.4rem;height:4.4rem}
  .objContents .__s03{top:88%;right:6%;width:3.4rem;height:3.4rem}
  .objContents .__s04{top:26%;right:33%;width:3.2rem;height:3.2rem;border-width:.8rem}
  .objContents .__s05{top:92%;left:8%;width:6rem;height:1.2rem}
  .objContents .__s06{display:none}
  .objContents .__s07{top:62%;right:3%;width:3.4rem;height:3.4rem}
}

/* コピー */
.mainVisualArea .detail{
  position:absolute;inset:0;z-index:5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding-inline:2.4rem;pointer-events:none;
}
.mainVisualArea .title-lv1{font-size:6.4rem;line-height:1.35;font-weight:700;letter-spacing:.04em}
.mainVisualArea .title-lv1 .title{display:block;overflow:hidden}
.mainVisualArea .title-lv1 .t{display:block;transform:translate3d(0,110%,0);transition:transform .8s var(--ease-mask)}
.mainVisualArea .title-lv1 .lower .t{transition-delay:.1s}
.mainVisualArea .detail.-in .title-lv1 .t{transform:none}
@media screen and (max-width:768px){.mainVisualArea .title-lv1{font-size:2.9rem}}
.mainVisualArea .sub{
  display:block;margin-top:2.8rem;font-family:"Poppins",sans-serif;font-size:1.2rem;
  letter-spacing:.24em;line-height:2.2;color:var(--c-sub);
  opacity:0;transition:opacity .8s var(--ease-out) .35s;
}
.mainVisualArea .detail.-in .sub{opacity:1}
@media screen and (max-width:768px){.mainVisualArea .sub{font-size:1rem;margin-top:2rem}}

.mainVisualArea .scrollAttention{
  position:absolute;left:0;right:0;bottom:3.2rem;margin:auto;z-index:5;
  width:fit-content;display:flex;flex-direction:column;align-items:center;gap:1rem;
}
.mainVisualArea .scrollAttention .text{font-family:"Poppins",sans-serif;font-size:1.1rem;letter-spacing:.14em;color:var(--c-sub)}
.mainVisualArea .scrollAttention .bar{width:.1rem;height:5.6rem;background:var(--c-line);position:relative;overflow:hidden}
.mainVisualArea .scrollAttention .bar::after{content:"";position:absolute;top:0;left:0;width:100%;height:40%;background:var(--accent);animation:scrollBar 2s var(--ease) infinite}
@keyframes scrollBar{0%{transform:translateY(-100%)}100%{transform:translateY(250%)}}
@media screen and (max-width:768px){
  .mainVisualArea .scrollAttention{bottom:2rem;gap:.8rem}
  .mainVisualArea .scrollAttention .bar{height:4rem}
}

/* loading-init : ローディング終了で表示 */
.loading-init{opacity:0;transform:translate3d(0,1.6rem,0);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.loading-init.-in{opacity:1;transform:none}

/* =========================================================
   ② コピーエリア
   ========================================================= */
.copyArea{position:relative;padding:16rem 0 18rem;overflow:hidden;text-align:center}
@media screen and (max-width:768px){.copyArea{padding:10rem 0 12rem}}
.copyArea .circleImg{
  position:absolute;inset:0;margin:auto;
  width:110rem;height:110rem;z-index:0;
  /* 52°に抑えた軸角回転。90°を超えると面が裏返り文字が鏡像になる */
  transform:rotate3d(0,.8,1,-52deg) scale(.85);opacity:0;
  transition:transform 1.6s var(--ease-out),opacity 1.1s var(--ease-out);
  color:#e0d6c6;pointer-events:none;
}
.copyArea .circleImg.-in{transform:rotate3d(0,.8,1,-52deg) scale(1);opacity:1}
@media screen and (max-width:768px){
  /* 画面幅に収めてリング全体が見えるように */
  .copyArea .circleImg{width:36rem;height:36rem}
}
/* テキストリングがスクロールに連動して回る */
.copyArea .circleImg svg{position:absolute;inset:0;width:100%;height:100%}
.copyArea .circleImg .ring{transform-origin:50% 50%}

.copyArea .innerBlock{position:relative;z-index:1}
.copyArea > .innerBlock > .text{font-size:1.7rem;line-height:2.4;letter-spacing:.06em;margin-bottom:4rem}
@media screen and (max-width:768px){.copyArea > .innerBlock > .text{font-size:1.4rem;line-height:2.2;margin-bottom:3.2rem}}
.copyArea .copy{display:block;margin:6.4rem 0 4.8rem;font-size:4rem;font-weight:700;line-height:1.6;letter-spacing:.05em}
@media screen and (max-width:768px){.copyArea .copy{font-size:2.4rem;margin:4rem 0 3.2rem}}

/* =========================================================
   ③⑤ リンクセクション
   ========================================================= */
.linkSectionArea{padding:10rem 0;position:relative}
@media screen and (max-width:768px){.linkSectionArea{padding:6rem 0}}
.linkSectionArea .innerBlock{display:flex;align-items:center;gap:8rem}
.linkSectionArea.--reverse .innerBlock{flex-direction:row-reverse}
@media screen and (max-width:768px){.linkSectionArea .innerBlock,.linkSectionArea.--reverse .innerBlock{flex-direction:column;gap:3.2rem}}
.linkSectionArea .left{width:48rem;flex-shrink:0}
@media screen and (max-width:768px){.linkSectionArea .left{width:100%}}
.linkSectionArea .detail{margin:3.2rem 0 4rem;font-size:1.5rem;line-height:2.2}
.linkSectionArea .right{position:relative;flex:1}
.linkSectionArea .right .ph{width:100%;aspect-ratio:4/3}
/* 採用情報はバナー素材（16:9）なので、その枠だけ比率を合わせる */
.linkSectionArea.--reverse .right .ph{aspect-ratio:16/9}
.linkSectionArea.--reverse .right .deco.--01{left:auto;right:-3rem}
.linkSectionArea.--reverse .right .deco.--02{right:auto;left:-3rem}
@media screen and (max-width:768px){
  .linkSectionArea.--reverse .right .deco.--01{right:-1.2rem}
  .linkSectionArea.--reverse .right .deco.--02{left:-1.2rem}
}
.linkSectionArea .right .deco{position:absolute;z-index:2}
.linkSectionArea .right .deco.--01{top:-3rem;left:-3rem;width:8rem;height:8rem;--shape-color:var(--c-main)}
.linkSectionArea .right .deco.--02{bottom:-3rem;right:-3rem;width:6rem;height:6rem;--shape-color:var(--c-accent)}
@media screen and (max-width:768px){.linkSectionArea .right .deco.--01{top:-1.6rem;left:-1.2rem;width:4.8rem;height:4.8rem}.linkSectionArea .right .deco.--02{bottom:-1.6rem;right:-1.2rem;width:3.6rem;height:3.6rem}}

/* =========================================================
   ④ 会社概要（写真3枚のずらし配置）
   ========================================================= */
.profileArea{padding:10rem 0;background:var(--c-gray);position:relative;overflow:hidden;--mask-color:var(--c-gray)}
@media screen and (max-width:768px){.profileArea{padding:6rem 0}}
.profileArea .innerBlock{display:flex;align-items:center;gap:8rem}
@media screen and (max-width:768px){.profileArea .innerBlock{flex-direction:column;gap:3.2rem}}
.profileArea .left{position:relative;width:56rem;height:44rem;flex-shrink:0}
@media screen and (max-width:768px){.profileArea .left{width:100%;height:30rem}}
.profileArea .left .ph{position:absolute}
.profileArea .left .ph.--01{top:0;left:0;width:26rem;height:32rem}
.profileArea .left .ph.--02{top:8rem;left:20rem;width:22rem;height:26rem;z-index:2}
.profileArea .left .ph.--03{bottom:0;right:0;width:20rem;height:24rem}
@media screen and (max-width:768px){
  .profileArea .left .ph.--01{width:15rem;height:19rem}
  .profileArea .left .ph.--02{top:5rem;left:11rem;width:13rem;height:16rem}
  .profileArea .left .ph.--03{width:11rem;height:13rem}
}
.profileArea .right{flex:1}
.profileArea .title{display:block;font-size:3.2rem;font-weight:700;line-height:1.7;letter-spacing:.04em}
@media screen and (max-width:768px){.profileArea .title{font-size:2.2rem}}
.profileArea .cat{display:flex;flex-wrap:wrap;gap:1.2rem;margin:2.4rem 0 4rem}
.profileArea .cat .t{font-size:1.3rem;color:var(--c-sub)}

/* =========================================================
   ⑥ お問い合わせ（濃色の巨大円セクション）
   ========================================================= */
.contactArea{position:relative;margin-top:16rem;padding:17rem 0 10rem;color:#fff;overflow:hidden}
@media screen and (max-width:768px){.contactArea{margin-top:10rem;padding:10rem 0 6rem}}
.contactArea .innerBlock{position:relative;z-index:2}
.contactArea .head{display:flex;align-items:flex-end;justify-content:space-between;gap:4rem;margin-bottom:6rem}
@media screen and (max-width:768px){.contactArea .head{flex-direction:column;align-items:flex-start;gap:2.4rem;margin-bottom:4rem}}
.contactArea .secHead .sub,.contactArea .secHead .caption{color:rgba(255,255,255,.75)}
.contactArea .secHead .caption::before{background:var(--c-accent)}
.contactArea .lead{font-size:1.5rem;line-height:2.2;color:rgba(255,255,255,.85)}
.contactArea .linkList{display:grid;grid-template-columns:1fr;gap:2.4rem}
.contactArea .link{
  display:flex;flex-direction:column;justify-content:space-between;gap:4rem;
  padding:3.2rem;border:.1rem solid rgba(255,255,255,.25);border-radius:1.6rem;
  transition:background .4s var(--ease),border-color .4s var(--ease);
}
.contactArea a.link:hover{background:rgba(255,255,255,.08);border-color:#fff}
.contactArea .link .icon{width:5.6rem;height:5.6rem;border-radius:1.2rem;background:var(--c-accent);display:grid;place-items:center;margin-bottom:2rem}
.contactArea .link .icon span{display:block;width:2rem;height:2rem;border:.2rem solid var(--c-ink)}
.contactArea .link .icon span.--round{border-radius:50%}
.contactArea .link .title{display:block;font-family:"Poppins",sans-serif;font-size:2.8rem;line-height:1.15}
.contactArea .link .lower{display:flex;align-items:flex-end;justify-content:space-between;gap:2.4rem}
.contactArea .link .sub{display:block;font-size:1.5rem;font-weight:700;margin-bottom:.4rem}
.contactArea .link .text{display:block;font-size:1.3rem;color:rgba(255,255,255,.7)}