@charset "utf-8";
/* =========================================================
   top.css — トップページ専用（uni-spot 実測値ベース）
   ========================================================= */

/* ===== MAIN VISUAL =====
   実測: .secMainVisual{padding:0 0 200px}
        .secMainVisualIn{background:#f5f5f5;box-shadow:0 0 20px rgba(0,0,0,.1);
                         margin:0 30px;border-radius:40px}                       */
.secMainVisual{padding:0 0 clamp(56px,10vw,200px) 0}
.secMainVisualIn{
  background:var(--mv);
  box-shadow:0 0 20px 0 rgba(0,0,0,.1);
  position:relative;
  margin:0 30px;
  border-radius:40px;
  overflow:hidden;
  padding-top:calc(var(--hdrH,119px) + 10px);   /* 固定ヘッダー分。実高さをJSで --hdrH に入れる */
}

/* 背景装飾＝円形テキスト（60sで回転）＋中央にロゴ。グラデもパーティクルも使わない */
/* テキストと画像の“あいだ”に置いて、両方に少しかかるようにする */
.mvBgImg{position:absolute;z-index:1;left:35%;right:auto;top:0;bottom:0;margin:auto;
  width:auto;height:auto;pointer-events:none;display:flex;align-items:center;justify-content:center}
.bgImgIn{position:relative;width:min(430px,34vw);aspect-ratio:1/1;opacity:.34;
  animation:mvLogoBreathe 20s ease-in-out infinite}
@keyframes mvLogoBreathe{0%,100%{opacity:.34;filter:blur(0)}50%{opacity:.20;filter:blur(3px)}}
.bgCircle{position:absolute;inset:0;animation:mvLogoRotate 60s linear infinite}
.bgCircle svg{width:100%;height:100%}
.bgCircle text{fill:var(--ink)}
.bgLogo{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;width:30.8%;height:fit-content}
@keyframes mvLogoRotate{to{transform:rotate(360deg)}}

.mvMain{position:relative;z-index:5}
.textArea,.imgArea{position:relative;z-index:2}
/* 実測: topRow padding 16px 30px 16px 34px / border-bottom 1px #2B2B2B */
.topRow{display:flex;justify-content:space-between;align-items:center;
  border-bottom:solid 1px var(--ink);padding:16px 30px 16px 34px}
.topText{font-family:var(--font-en);font-weight:700;font-size:clamp(14px,1.25vw,15px)}
.iconArea{display:flex;justify-content:space-between;align-items:center;width:57px}
.iconArea .snsIcon{width:20px;height:20px;display:block}
.iconArea .snsIcon svg{width:100%;height:100%}

/* 実測: mainRow padding min(8.75vw,126px) 2.9% … 5% / textArea 42.4% / imgArea 52% */
.mainRow{display:flex;justify-content:space-between;align-items:center;
  padding:min(8.75vw,126px) 2.9% min(8.75vw,126px) 5%}
.textArea{width:42.4%}
.text01{font-weight:700;line-height:160%;font-size:clamp(23px,3.17vw,38px);padding:0 0 32px 0;color:var(--ink-strong)}
.text02{font-weight:500;line-height:180%;font-size:clamp(14px,1.33vw,16px);color:var(--ink)}
.imgArea{width:52%}
/* 素材は 3:2。枠も 3:2 にして切り抜きを起こさない（参照元は 630/471 だが素材優先） */
.imgArea img{width:100%;border-radius:50px;aspect-ratio:3/2;object-fit:cover}

@media only screen and (max-width:767px){
  .secMainVisualIn{margin:0 6px;border-radius:10px;padding-top:calc(var(--hdrH,93px) + 8px)}
  .topRow{padding:12px 8px}
  .topText{font-size:13px}
  .iconArea{width:48px}
  .mainRow{flex-direction:column-reverse;padding:12px 8px 24px 8px;align-items:center}
  .textArea,.imgArea{width:100%}
  .textArea{padding:24px 0 0 0}
  .text01{font-size:clamp(17px,7.18vw,28px);line-height:130%;padding:0 0 16px 0}
  .text02{font-size:14px}
  .imgArea img{border-radius:10px}
  .mvBgImg{width:100%;left:0}
  .bgImgIn{filter:blur(8px);width:min(210px,52vw);opacity:.22;animation:none}
  .bgCircle{animation:none}
}

/* ===== セクション共通 ===== */
.sec{padding:clamp(56px,7vw,104px) 0}
.sec--panel{background:var(--panel)}

/* ===== PICK UP ===== */
.pickup{border-top:1px solid var(--line)}
.pickup__row{display:grid;grid-template-columns:150px 1fr auto;gap:18px;align-items:center;
  padding:20px 2px;border-bottom:1px solid var(--line);transition:padding-left .35s}
.pickup__row:hover{padding-left:12px}
.pickup__txt{font-size:14px}
.pickup__arrow{font-family:var(--font-en);font-size:11px;letter-spacing:.1em;color:var(--sub)}

/* ===== カード ===== */
.cardGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,26px)}
.cardGrid--3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--panel);border-radius:var(--r);overflow:hidden;display:block;transition:transform .4s}
.card:hover{transform:translateY(-4px)}
/* 素材は全て 760x506（3:2）。枠も3:2にすることで cover でも一切切り抜かれない */
.card__media{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--line-soft);display:block}
.card__body{padding:18px 18px 22px}
.card__ja{font-size:16px;font-weight:700;color:var(--ink-strong);margin-top:10px}
.card__desc{font-size:12.5px;color:var(--ink);margin-top:8px;line-height:180%}

/* ===== メニュー（#タグ列つき） ===== */
.menuList{border-top:1px solid var(--line)}
.menuList__item{display:grid;grid-template-columns:56px 1fr;gap:6px 20px;
  padding:24px 2px;border-bottom:1px solid var(--line)}
.menuList__no{font-family:var(--font-num);font-size:11px;color:var(--sub);padding-top:6px}
.menuList__ja{font-size:clamp(17px,2.2vw,22px);font-weight:700;color:var(--ink-strong)}
.menuList__item .hashRow{grid-column:2}
.menuList__price{grid-column:2;font-size:13px;color:var(--ink);margin-top:8px}
.menuList__price .num{font-size:inherit;color:inherit}

/* ===== WORKS：スライド＋テキスト実績リスト（既存indexと同じ。切り抜きなし） ===== */
  .worklist{list-style:none;columns:2;column-gap:clamp(28px,5vw,72px);border-top:1px solid var(--ink-strong);padding-top:4px}
  .worklist li{break-inside:avoid;display:flex;align-items:baseline;gap:16px;padding:14px 4px;
    border-bottom:1px solid var(--line);transition:padding .35s var(--ease),background .35s}
  .worklist li:hover{background:var(--bg);padding-left:14px}
  .sec--panel .worklist li:hover{background:#fff}
  .worklist .wl-no{font-family:var(--font-num);font-size:10.5px;color:var(--sub);flex-shrink:0}
  .worklist .wl-tx{font-size:14px;font-weight:500;line-height:1.65}
  .worklist li:hover .wl-tx{font-weight:800}
  @media(max-width:820px){ .worklist{columns:1} }

/* ===== REQUEST 帯 ===== */
/* 前後のセクションとぶつからないよう上下にも余白を取る */
.request{background:var(--panel);color:var(--ink);padding:clamp(44px,6vw,76px) clamp(24px,5vw,60px);
  border-radius:40px;margin:clamp(44px,6vw,96px) 30px;border:1px solid var(--line)}
.request .secLabel{color:var(--ink-strong)}
.request__ja{font-size:clamp(22px,3.4vw,36px);font-weight:700;color:var(--ink-strong);margin-top:16px}
.request__lead{font-size:clamp(14px,1.5vw,18px);color:var(--ink);margin-top:16px;max-width:40em}
.request__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.request .btn{background:var(--ink-strong);color:#fff}
.request .btn--ghost{background:transparent;color:var(--ink-strong);border:1px solid var(--ink-strong)}
.request .btn--line{background:#06C755;color:#fff}

/* ===== NEWS / BLOG ===== */
.postList{border-top:1px solid var(--line)}
.postList__item{display:grid;grid-template-columns:120px 1fr;gap:8px 20px;
  padding:18px 2px;border-bottom:1px solid var(--line);align-items:baseline}
.postList__title{font-size:14px}

/* ===== VOICE（YouTubeファサード） ===== */
.voiceGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.2vw,30px)}
.vcard{background:var(--panel);border-radius:var(--r);overflow:hidden}
.vcard__body{padding:18px 20px 22px}
.voice__q{font-size:15.5px;font-weight:700;color:var(--ink-strong);line-height:170%;margin-top:10px}
.voice__who{font-size:12px;color:var(--sub);margin-top:10px}
.ytFacade{display:block;position:relative;width:100%;aspect-ratio:16/9;
  padding:0;border:0;background:var(--line-soft);cursor:pointer;overflow:hidden}
.ytFacade__thumb{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.ytFacade:hover .ytFacade__thumb{transform:scale(1.03)}
.ytFacade__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:60px;height:60px;border-radius:50%;background:rgba(0,0,0,.62);transition:background .3s,transform .3s}
.ytFacade__play::before{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
  border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff}
.ytFacade:hover .ytFacade__play{background:var(--accent);transform:translate(-50%,-50%) scale(1.06)}
.ytFacade:hover .ytFacade__play::before{border-left-color:var(--ink-strong)}
.ytEmbed{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.ytEmbed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

@media only screen and (max-width:767px){
  .brPc{display:none}
  .cardGrid,.cardGrid--3{grid-template-columns:1fr 1fr}
  .works,.voiceGrid{grid-template-columns:1fr}
  .pickup__row{grid-template-columns:1fr;gap:6px}
  .pickup__arrow{display:none}
  .postList__item{grid-template-columns:1fr}
  .menuList__item{grid-template-columns:40px 1fr;gap:4px 14px}
  .request{margin:0 6px;border-radius:10px}
}

/* =========================================================
   既存 index.html から引き継ぐ演出
   ========================================================= */

/* ===== 横に流れる画像スライド（原寸比のまま・切り抜きなし） ===== */
.film{overflow:hidden;position:relative;padding:0;--fh:clamp(170px,20vw,280px);background:var(--bg)}
.film::before,.film::after{content:"";position:absolute;top:0;bottom:0;width:70px;z-index:3;pointer-events:none}
.film::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.film::after{right:0;background:linear-gradient(-90deg,var(--bg),transparent)}
.film-white{background:var(--panel)}
.film-white::before{background:linear-gradient(90deg,var(--panel),transparent)}
.film-white::after{background:linear-gradient(-90deg,var(--panel),transparent)}
.film-track{display:flex;align-items:flex-end;gap:clamp(10px,1.4vw,20px);width:max-content;
  will-change:transform;pointer-events:none;user-select:none;-webkit-user-select:none}
.film img{pointer-events:none;-webkit-user-drag:none;user-drag:none}
.film figure{flex:0 0 auto;margin:0}
.film figure img{height:var(--fh);width:auto;max-width:none;background:var(--line-soft);border-radius:var(--r)}
.filmHero{margin-top:clamp(28px,4vw,52px)}

/* ===== Googleフォーム（既存のタグ構造をそのまま使う） ===== */
.dispatch{padding:clamp(56px,7vw,104px) 0}
.dispatch--light{background:var(--panel)}
.dispatch-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4.5vw,72px);align-items:start}
.dispatch--solo .dispatch-in{grid-template-columns:1fr;max-width:760px;margin:0 auto}
.dispatch-l h2{font-size:clamp(22px,3.2vw,34px);line-height:150%;margin-top:16px}

.dlead{font-size:14px;line-height:180%;margin-top:16px}

.dpoints{margin-top:22px}
.dpoints li{font-size:13.5px;font-weight:700;padding:11px 0 11px 22px;position:relative;
  border-bottom:1px solid var(--line)}
.dpoints li::before{content:"";position:absolute;left:2px;top:19px;width:6px;height:6px;border-radius:50%;background:var(--ink-strong)}

.cform{background:var(--mv);border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3vw,38px)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cform .f{margin-bottom:18px}
.cform label{display:block;font-size:12px;font-weight:700;margin-bottom:8px;color:var(--ink-strong)}
.cform label .req{font-size:9.5px;font-weight:700;background:var(--ink-strong);color:#fff;padding:2px 8px;margin-left:8px;border-radius:3px}
.cform label .opt{font-size:9.5px;font-weight:700;background:var(--line-soft);color:var(--sub);padding:2px 8px;margin-left:8px;border-radius:3px}
.cform input,.cform textarea{width:100%;border:0;border-bottom:2px solid var(--line);padding:12px 2px;
  font-size:15px;font-family:var(--font-ja);color:var(--ink);background:transparent;transition:border-color .25s}
.cform input::placeholder,.cform textarea::placeholder{color:#BCBCB8}
.cform input:focus,.cform textarea:focus{outline:none;border-bottom-color:var(--ink-strong)}
.cform textarea{resize:vertical;min-height:96px;line-height:170%}
.fnote{display:block;font-size:10.5px;color:var(--sub);margin-top:6px}
.cform .submit{width:100%;margin-top:8px;font-size:15.5px;padding:19px;justify-content:center}
.or{text-align:center;font-family:var(--font-en);font-size:11px;color:var(--sub);margin:16px 0 14px}
.dline{width:100%;justify-content:center}
.cform .pv{font-size:11px;color:var(--sub);text-align:center;margin-top:16px;line-height:180%}
.cform .pv a{border-bottom:1px solid var(--line)}
.btn-navy{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--ink-strong);color:#fff;border:0;border-radius:50px;font-weight:700;
  font-family:var(--font-ja);cursor:pointer;padding:16px 30px;transition:opacity .3s}
.btn-navy:hover{opacity:.72}
.btn-line{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:#06C755;color:#fff;border-radius:50px;font-weight:700;padding:16px 30px;transition:opacity .3s}
.btn-line:hover{opacity:.85}
.ln-ico{width:18px;height:18px;flex-shrink:0}
.ttl-sp{display:none}

@media only screen and (max-width:767px){
  .dispatch-in,.frow{grid-template-columns:1fr}
  .ttl-pc{display:none} .ttl-sp{display:inline}
  .film{--fh:clamp(150px,40vw,220px)}
}

/* ===== SERVICE：画像を使わず、行＋ボタンで見せる ===== */
.svcList{border-top:1px solid var(--ink)}
.svcRow{display:grid;grid-template-columns:56px 1fr 300px 150px;gap:24px;align-items:center;
  padding:26px 6px;border-bottom:1px solid var(--line);transition:padding-left .4s,background .4s}
.svcRow:hover{background:var(--panel);padding-left:18px}
.svcRow__no{font-family:var(--font-num);font-size:11px;color:var(--sub)}
.svcRow__main{display:block}
.svcRow__ja{display:block;font-weight:700;font-size:clamp(18px,2.2vw,26px);
  letter-spacing:-.02em;line-height:140%;color:var(--ink-strong);margin-top:8px}
.svcRow__ds{font-size:13px;color:var(--ink);line-height:180%}
.svcRow__btn{justify-self:end;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:13px;font-weight:700;padding:13px 24px;border-radius:50px;
  border:1px solid var(--ink-strong);color:var(--ink-strong);white-space:nowrap;
  transition:background .3s,color .3s}
.svcRow__btn::after{content:"→"}
.svcRow:hover .svcRow__btn{background:var(--ink-strong);color:#fff}
@media only screen and (max-width:767px){
  .svcRow{grid-template-columns:40px 1fr;gap:8px 16px;padding:22px 4px}
  .svcRow__ds{grid-column:2}
  .svcRow__btn{grid-column:2;justify-self:start;margin-top:12px}
}

/* ===== 発注するべき3つの理由 ===== */
.reasonsTitle{font-size:clamp(18px,2.4vw,26px);font-weight:700;color:var(--ink-strong);
  line-height:160%;margin:clamp(40px,5.5vw,72px) 0 clamp(20px,2.6vw,32px)}
.reasonsTitle__n{background:linear-gradient(transparent 62%,var(--accent) 62%);padding:0 2px}
.reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px);
  margin-bottom:clamp(34px,4.5vw,60px)}
.reason{background:var(--mv);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column}
.reason__no{font-family:var(--font-en);font-size:clamp(30px,3.6vw,46px);font-weight:600;
  line-height:1;color:var(--ink-strong);display:block;margin-bottom:14px}
.reason__ja{font-size:clamp(15px,1.7vw,19px);font-weight:700;color:var(--ink-strong);
  line-height:160%;margin-bottom:18px}
.reason__tags{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.reason__tags li{background:var(--panel);border:1px solid var(--line);border-radius:5px;
  font-size:12px;font-weight:700;color:var(--ink);padding:10px 12px;line-height:150%}
@media only screen and (max-width:767px){
  .reasons{grid-template-columns:1fr}
  .reason__ja br{display:none}
}