@charset "UTF-8";
/* ============================================================
   スマステ株式会社 専用テーマ  最初の画面とトップページ
   版0.2.0（工程6-2）
   ------------------------------------------------------------
   イラストはすべて飾りのため、読み上げの対象から外している。
   文字と重ならない配置を優先し、重なる箇所は明度差を確保している。
   ============================================================ */

/* ============================================================
   飾りのイラストの共通の扱い
   ============================================================ */
.c-deco{
  position:absolute;
  pointer-events:none;
  user-select:none;
  z-index:0;
}
.c-deco picture{ display:block; }
.c-deco img{ display:block; width:100%; height:auto; }

/* 横に流すための帯（同じ絵を2枚並べて、半分ずらすと途切れなく回る） */
.c-deco__track{ display:flex; width:200%; }
.c-deco__track > picture{ flex:0 0 50%; width:50%; }
.c-deco__track > picture img{ width:100%; }

/* 本文は必ずイラストより手前に置く */
.c-fore{ position:relative; z-index:1; }

/* ============================================================
   最初の画面
   ============================================================ */
/* 下の余白を var(--sp-9)＝160px にしてあるのは、画面下の「SCROLL」の印
   （下から48px、高さ約93px）に文章が重ならないようにするため。
   画面の縦が短い端末（320×568・375×667など）で、中央に寄せた文章が
   印の位置まで伸びて重なっていた。工程6-4で実測して判明したため直した。 */
.p-hero{
  position:relative;
  overflow:hidden;
  min-height:calc(100svh - var(--sp-8));
  display:flex;
  align-items:center;
  padding-block:var(--sp-7) var(--sp-9);
}
@media (min-width:768px){
  .p-hero{
    min-height:calc(100svh - var(--sp-8));
    padding-block:var(--sp-9);
  }
}

.p-hero__inner{
  width:100%;
  max-width:var(--w-page);
  margin-inline:auto;
  padding-inline:var(--sp-2);
}
@media (min-width:768px){
  .p-hero__inner{ padding-inline:var(--sp-5); }
}

.p-hero__text{ max-width:var(--w-text); }

.p-hero__eyebrow{
  display:block;
  font-size:var(--fs-8);
  font-weight:var(--fw-head);
  line-height:var(--lh-head);
  letter-spacing:var(--ls-eyebrow);
  color:var(--c-primary);
  margin-block-end:var(--sp-5);
}

.p-hero__desc{
  font-size:var(--fs-5);
  line-height:var(--lh-head);
  letter-spacing:var(--ls-body);
  color:var(--c-text-sub);
  margin:0;
}

/* --- 提灯（右側・画面の高さの6割程度） --- */
.p-hero__chochin{
  inset-block-start:50%;
  inset-inline-end:calc(var(--sp-5) * -1);
  width:auto;
  height:60svh;
  transform:translateY(-50%);
  opacity:0.55;
}
.p-hero__chochin picture{
  display:block;
  height:100%;
}
.p-hero__chochin img{
  width:auto;
  max-width:none;
  height:100%;
  transform-origin:50% 0;
  animation:sumasute-sway 5s ease-in-out infinite alternate;
}
@media (min-width:768px){
  .p-hero__chochin{ inset-inline-end:var(--sp-5); }
}

@keyframes sumasute-sway{
  from{ transform:rotate(-0.8deg); }
  to  { transform:rotate(0.8deg); }
}

/* --- 波と千鳥（最下部に横いっぱい） --- */
.p-hero__nami{
  inset-block-end:0;
  inset-inline-start:0;
  width:100%;
  opacity:0.06;
  overflow:hidden;
}
.p-hero__nami .c-deco__track{ animation:sumasute-flow 60s linear infinite; }

@keyframes sumasute-flow{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}

/* --- 下へ進める印 --- */
.p-hero__scroll{
  position:absolute;
  inset-block-end:var(--sp-5);
  inset-inline-start:50%;
  transform:translateX(-50%);
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--sp-2);
  font-size:var(--fs-8);
  font-weight:var(--fw-head);
  letter-spacing:var(--ls-eyebrow);
  color:var(--c-text-sub);
  text-decoration:none;
}
.p-hero__scroll::after{
  content:"";
  display:block;
  width:var(--bw-hair);
  height:var(--sp-6);
  background:var(--c-text-weak);
  animation:sumasute-drop 2.4s ease-in-out infinite;
  transform-origin:50% 0;
}

@keyframes sumasute-drop{
  0%   { transform:scaleY(0); }
  50%  { transform:scaleY(1); }
  100% { transform:scaleY(0); }
}

/* ============================================================
   帯として置くイラスト
   ============================================================ */
.p-band{
  position:relative;
  overflow:hidden;
  line-height:0;          /* 画像の下に隙間を作らない */
}
.p-band__inner{
  will-change:transform;   /* スクロールに合わせてわずかにずらす（motion.js） */
}
.p-band picture{ display:block; }
.p-band img{ display:block; width:100%; height:auto; }
.p-band--nakamise .p-band__inner{ opacity:0.35; }
.p-band--sumida  .p-band__inner{ opacity:0.30; }

/* 区切り全体に薄く敷く波（導入事例の背景） */
.p-bg-nami{
  inset-block-start:50%;
  inset-inline-start:0;
  width:100%;
  transform:translateY(-50%);
  opacity:0.05;
  overflow:hidden;
}
.p-bg-nami .c-deco__track{ animation:sumasute-flow 80s linear infinite; }

/* ============================================================
   トップページの各区切り
   ============================================================ */

/* 2つの入口 */
.p-gate{
  display:grid;
  gap:var(--sp-6);
}
@media (min-width:768px){
  .p-gate{ grid-template-columns:repeat(2,1fr); gap:var(--sp-7); }
}
.p-gate__item{
  border-block-start:var(--bw-hair) solid var(--c-rule);
  padding-block-start:var(--sp-4);
}
.p-gate__title{
  font-size:var(--fs-5);
  font-weight:var(--fw-head);
  line-height:var(--lh-head);
  letter-spacing:var(--ls-head);
  margin-block-end:var(--sp-3);
}
.p-gate__more{ margin-block-start:var(--sp-4); }

/* 事業案内 */
.p-service__list{ display:grid; gap:0; }
.p-service__item{
  border-block-start:var(--bw-hair) solid var(--c-rule);
  padding-block:var(--sp-5);
  display:grid;
  gap:var(--sp-3);
}
.p-service__item:last-child{
  border-block-end:var(--bw-hair) solid var(--c-rule);
}
@media (min-width:768px){
  .p-service__item{
    grid-template-columns:var(--sp-8) 1fr auto;
    gap:var(--sp-6);
    align-items:start;
    padding-block:var(--sp-6);
  }
}
.p-service__name{
  font-size:var(--fs-5);
  font-weight:var(--fw-head);
  line-height:var(--lh-head);
  letter-spacing:var(--ls-head);
  margin-block-end:var(--sp-2);
}
.p-service__desc{ margin:0; }
.p-service__more{ margin:0; }

/* 導入事例 */
.p-works{ overflow:hidden; }   /* 背景の波がはみ出さないように切り取る */
.p-works__list{ display:grid; gap:var(--sp-5); }
@media (min-width:768px){
  .p-works__list{ grid-template-columns:repeat(3,1fr); gap:var(--sp-6); }
}
.p-works__item{
  border-block-start:var(--bw-hair) solid var(--c-rule);
  padding-block-start:var(--sp-4);
}
.p-works__meta{
  font-size:var(--fs-8);
  color:var(--c-text-sub);
  letter-spacing:var(--ls-eyebrow);
  margin-block-end:var(--sp-2);
}
.p-works__title{
  font-size:var(--fs-6);
  font-weight:var(--fw-head);
  line-height:var(--lh-head);
  letter-spacing:var(--ls-head);
  margin-block-end:var(--sp-3);
}
.p-works__sep{ color:var(--c-text-sub); }
.p-works__body{ margin:0; }
.p-works__more{ margin-block-start:var(--sp-6); }

/* 選ばれる理由 */
.p-reason__list{ display:grid; gap:var(--sp-6); }
@media (min-width:768px){
  .p-reason__list{ grid-template-columns:repeat(3,1fr); gap:var(--sp-7); }
}
.p-reason__item{
  border-block-start:var(--bw-hair) solid var(--c-rule);
  padding-block-start:var(--sp-4);
}
.p-reason__title{
  font-size:var(--fs-5);
  font-weight:var(--fw-head);
  line-height:var(--lh-head);
  letter-spacing:var(--ls-head);
  margin-block-end:var(--sp-3);
}

/* お知らせ */
.p-news__list{ display:grid; }
.p-news__item{ border-block-start:var(--bw-hair) solid var(--c-rule); }
.p-news__item:last-child{ border-block-end:var(--bw-hair) solid var(--c-rule); }
.p-news__link{
  display:grid;
  gap:var(--sp-1);
  padding-block:var(--sp-4);
  text-decoration:none;
  color:var(--c-text);
}
@media (min-width:768px){
  .p-news__link{
    grid-template-columns:var(--sp-8) var(--sp-8) 1fr;
    gap:var(--sp-5);
    align-items:baseline;
  }
}
.p-news__date{
  font-size:var(--fs-8);
  color:var(--c-text-sub);
  letter-spacing:var(--ls-eyebrow);
}
.p-news__cat{
  font-size:var(--fs-8);
  color:var(--c-primary);
  letter-spacing:var(--ls-head);
}
.p-news__title{
  font-size:var(--fs-7);
  line-height:var(--lh-head);
}
.p-news__link:hover .p-news__title{ text-decoration:underline; }
.p-news__more{ margin-block-start:var(--sp-6); }

/* 会社情報 */
.p-company{ display:grid; gap:var(--sp-6); }
@media (min-width:768px){
  .p-company{ grid-template-columns:1fr 1fr; gap:var(--sp-7); }
}
.p-company__text p{ margin-block-end:var(--sp-4); }
.p-company__more{ margin-block-start:var(--sp-5); margin-block-end:0; }

/* お問い合わせ */
.p-contact__box{
  border-block-start:var(--bw-hair) solid var(--c-rule);
  border-block-end:var(--bw-hair) solid var(--c-rule);
  padding-block:var(--sp-7);
  text-align:center;
  display:grid;
  justify-items:center;   /* 自動余白を使わずに中央へ寄せる */
}
@media (min-width:768px){
  .p-contact__box{ padding-block:var(--sp-9); }
}
.p-contact__actions{
  display:grid;
  gap:var(--sp-3);
  justify-content:center;
  margin-block-start:var(--sp-6);
}
@media (min-width:768px){
  .p-contact__actions{ grid-auto-flow:column; gap:var(--sp-4); }
}
.p-contact__tel{
  margin-block-start:var(--sp-5);
  margin-block-end:0;
  font-size:var(--fs-8);
  color:var(--c-text-sub);
  line-height:var(--lh-body);
}
.p-contact__tel a{ color:var(--c-text-sub); }
.p-contact__tel a:hover{ color:var(--c-primary-deep); }

/* ============================================================
   動きを減らす設定のときは、すべての動きを止める
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .p-hero__chochin img,
  .p-hero__nami .c-deco__track,
  .p-bg-nami .c-deco__track,
  .p-hero__scroll::after{
    animation:none !important;
  }
  .p-hero__scroll::after{ transform:scaleY(1); }
}

/* ============================================================
   プラグイン（VK All in One Expansion Unit）が出す「上へ戻る」ボタン
   ------------------------------------------------------------
   黒い面と影を使っており、設計の決まり（8色・影なし）から外れるため隠す。
   元に戻す場合は、この2行を消せばよい。
   ============================================================ */
.page_top_btn{ display:none !important; }