@charset "UTF-8";
/* ============================================================
   スマステ株式会社 専用テーマ  事業ページ（システム開発・WEB制作）
   版0.3.0（工程6-5）
   ------------------------------------------------------------
   この2ページでは背景のイラストを使わない。
   区切りは、余白と極細の罫線だけで表す。箱で囲まない。影も付けない。
   値はすべて tokens.css の変数を参照する。生の数値は書かない。
   ============================================================ */

/* ============================================================
   今どこにいるかの案内（トップ ＞ 事業案内 ＞ ページ名）
   ============================================================ */
.p-crumb{
  font-size:var(--fs-8);
  line-height:var(--lh-head);
  color:var(--c-text-sub);
  padding-block:var(--sp-3);
  border-block-end:var(--bw-hair) solid var(--c-rule);
}
.p-crumb a{
  color:var(--c-text-sub);
  text-decoration:none;
}
.p-crumb a:hover{ color:var(--c-primary-deep); text-decoration:underline; }
/* 区切りの記号。--c-text-weak（#8A8D90）は明度差が足りず「文字には使わない」
   決まりのため、補足の文字色を使う。（工程6-5で実測して判明したため直した） */
.p-crumb__sep{
  padding-inline:var(--sp-1);
  color:var(--c-text-sub);
}
.p-crumb__here{ color:var(--c-text); }

/* ============================================================
   ページの頭（大見出しと冒頭の文章）
   ============================================================ */
.p-head{ padding-block:var(--sp-7) var(--sp-6); }
@media (min-width:768px){
  .p-head{ padding-block:var(--sp-9) var(--sp-7); }
}
.p-head__lead{ max-width:var(--w-text); }
.p-head__lead p{ margin-block-end:var(--sp-4); }
.p-head__lead p:last-child{ margin-block-end:0; }

/* ============================================================
   こんな課題はありませんか
   ------------------------------------------------------------
   正本の各行が「・」で始まるため、その「・」を文字としてそのまま出す。
   二重に印が付かないよう、一覧の印は消してある。
   ============================================================ */
.p-check__list{
  list-style:none;
  display:grid;
  gap:var(--sp-3);
  max-width:var(--w-text);
  margin:0;
  padding:0;
}
@media (min-width:768px){
  .p-check__list{ grid-template-columns:repeat(2,1fr); gap:var(--sp-3) var(--sp-6); max-width:none; }
}
.p-check__list li{
  border-block-start:var(--bw-hair) solid var(--c-rule);
  padding-block-start:var(--sp-3);
  line-height:var(--lh-body);
}
.p-check__note{ margin-block-start:var(--sp-6); }

/* ============================================================
   提供内容（システム開発は名前＋説明、WEB制作は箇条書き）
   ============================================================ */
.p-offer__list{ display:grid; gap:0; }
.p-offer__item{
  border-block-start:var(--bw-hair) solid var(--c-rule);
  padding-block:var(--sp-5);
}
.p-offer__item:last-child{ border-block-end:var(--bw-hair) solid var(--c-rule); }
@media (min-width:768px){
  .p-offer__item{
    grid-template-columns:1fr 2fr;
    display:grid;
    gap:var(--sp-6);
    align-items:start;
    padding-block:var(--sp-6);
  }
}
.p-offer__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);
}
@media (min-width:768px){
  .p-offer__name{ margin-block-end:0; }
}
.p-offer__desc{ margin:0; }

/* 箇条書きだけの提供内容（WEB制作） */
.p-offer__plain{
  list-style:none;
  display:grid;
  gap:0;
  margin:0;
  padding:0;
}
.p-offer__plain li{
  border-block-start:var(--bw-hair) solid var(--c-rule);
  padding-block:var(--sp-4);
  line-height:var(--lh-body);
}
.p-offer__plain li:last-child{ border-block-end:var(--bw-hair) solid var(--c-rule); }

/* ============================================================
   取扱商品の一覧（テレワーク機器販売の9種類）
   ------------------------------------------------------------
   箱で囲まず、極細の罫線だけで区切る。
   ============================================================ */
.p-goods__list{
  list-style:none;
  display:grid;
  gap:0;
  margin:0;
  padding:0;
}
@media (min-width:768px){
  .p-goods__list{ grid-template-columns:repeat(2,1fr); column-gap:var(--sp-6); }
}
.p-goods__list li{
  border-block-start:var(--bw-hair) solid var(--c-rule);
  padding-block:var(--sp-4);
  font-size:var(--fs-5);
  font-weight:var(--fw-head);
  line-height:var(--lh-head);
  letter-spacing:var(--ls-head);
}
@media (min-width:768px){
  /* 2列のときは、下の縁を最後の2つに引く */
  .p-goods__list li:nth-last-child(-n+2){ border-block-end:var(--bw-hair) solid var(--c-rule); }
}
@media (max-width:767.98px){
  .p-goods__list li:last-child{ border-block-end:var(--bw-hair) solid var(--c-rule); }
}
.p-goods__note{
  margin-block-start:var(--sp-5);
  max-width:var(--w-text);
}

/* 取扱商品ページの分類（ソフトウェア／空気清浄機／オゾン発生器） */
.p-goods__group{
  border-block-start:var(--bw-hair) solid var(--c-rule);
  padding-block:var(--sp-5);
}
.p-goods__group:last-child{ border-block-end:var(--bw-hair) solid var(--c-rule); }
@media (min-width:768px){
  .p-goods__group{
    display:grid;
    grid-template-columns:1fr 2fr;
    gap:var(--sp-6);
    align-items:start;
    padding-block:var(--sp-6);
  }
}
.p-goods__kind{
  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);
}
@media (min-width:768px){
  .p-goods__kind{ margin-block-end:0; }
}
.p-goods__items{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:var(--sp-2);
}
.p-goods__items li{ line-height:var(--lh-body); }

/* ============================================================
   導入事例ページ
   ============================================================ */

/* 絞り込み。
   JavaScriptが動かない環境では出さず、11件すべてが読める状態を保つ。
   （hidden のまま。動いたときだけ motion.js が hidden を外す） */
.p-filter[hidden]{ display:none; }
.p-filter{
  border-block-start:var(--bw-hair) solid var(--c-rule);
  border-block-end:var(--bw-hair) solid var(--c-rule);
  padding-block:var(--sp-4);
  display:grid;
  gap:var(--sp-4);
  margin-block-end:var(--sp-7);
}
.p-filter__row{ display:grid; gap:var(--sp-2); }
@media (min-width:768px){
  .p-filter__row{ grid-template-columns:var(--sp-8) 1fr; gap:var(--sp-4); align-items:baseline; }
}
.p-filter__label{
  font-size:var(--fs-8);
  font-weight:var(--fw-head);
  letter-spacing:var(--ls-eyebrow);
  color:var(--c-text-sub);
}
.p-filter__btns{ display:flex; flex-wrap:wrap; gap:var(--sp-1) var(--sp-2); }
.p-filter__btn{
  font-size:var(--fs-8);
  font-weight:var(--fw-head);
  line-height:var(--lh-head);
  letter-spacing:var(--ls-head);
  color:var(--c-text);
  background:var(--c-bg);
  border:var(--bw-hair) solid var(--c-rule);
  border-radius:var(--r-1);
  padding:var(--sp-1) var(--sp-3);
  cursor:pointer;
}
.p-filter__btn:hover{ border-color:var(--c-primary); }
.p-filter__btn[aria-pressed="true"]{
  color:var(--c-bg);
  background:var(--c-primary);
  border-color:var(--c-primary);
}
.p-filter__count{
  font-size:var(--fs-8);
  color:var(--c-text-sub);
}

/* 事例の一覧 */
.p-jirei__list{ display:grid; gap:0; }
.p-jirei__item{
  border-block-start:var(--bw-hair) solid var(--c-rule);
  padding-block:var(--sp-6);
}
.p-jirei__item:last-child{ border-block-end:var(--bw-hair) solid var(--c-rule); }
@media (min-width:768px){
  .p-jirei__item{
    display:grid;
    grid-template-columns:1fr 2fr;
    gap:var(--sp-6);
    align-items:start;
    padding-block:var(--sp-7);
  }
}
.p-jirei__item[hidden]{ display:none; }
.p-jirei__no{
  font-size:var(--fs-8);
  font-weight:var(--fw-head);
  letter-spacing:var(--ls-eyebrow);
  color:var(--c-primary);
  margin-block-end:var(--sp-2);
}
.p-jirei__title{
  font-size:var(--fs-4);
  font-weight:var(--fw-head);
  line-height:var(--lh-head);
  letter-spacing:var(--ls-head);
  margin-block-end:var(--sp-3);
}
.p-jirei__sep{ color:var(--c-text-sub); }
.p-jirei__meta{
  font-size:var(--fs-8);
  color:var(--c-text-sub);
  line-height:var(--lh-body);
  margin-block-end:var(--sp-4);
}
@media (min-width:768px){
  .p-jirei__meta{ margin-block-end:0; }
}
.p-jirei__h{
  font-size:var(--fs-7);
  font-weight:var(--fw-head);
  letter-spacing:var(--ls-head);
  color:var(--c-primary-deep);
  margin-block-end:var(--sp-2);
}
.p-jirei__p{ margin-block-end:var(--sp-5); }
.p-jirei__p:last-child{ margin-block-end:0; }

/* ============================================================
   会社概要ページ
   ============================================================ */
.p-map{ margin-block-start:var(--sp-4); }
.p-map__frame{
  width:100%;
  aspect-ratio:16 / 9;
  border:var(--bw-hair) solid var(--c-rule);
  display:block;
}
/* 地図を出す前の場所。読み込みを遅らせるため、押されるまで地図を呼ばない。 */
.p-map__wait{
  width:100%;
  aspect-ratio:16 / 9;
  border:var(--bw-hair) solid var(--c-rule);
  display:grid;
  place-items:center;
  gap:var(--sp-3);
  padding:var(--sp-4);
  text-align:center;
}
.p-map__note{
  margin-block-start:var(--sp-3);
  font-size:var(--fs-8);
  color:var(--c-text-sub);
  line-height:var(--lh-body);
}
.p-route{ margin-block-start:var(--sp-6); }

/* 最寄り駅からの経路。箱で囲まず、極細の罫線だけで区切る。 */
.p-route__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  max-width:var(--w-text);
}
.p-route__item{
  border-block-start:var(--bw-hair) solid var(--c-rule);
  padding-block:var(--sp-3);
  display:grid;
  gap:var(--sp-1);
  line-height:var(--lh-head);
}
.p-route__item:last-child{ border-block-end:var(--bw-hair) solid var(--c-rule); }
@media (min-width:768px){
  .p-route__item{
    grid-template-columns:1fr auto auto;
    gap:var(--sp-4);
    align-items:baseline;
    padding-block:var(--sp-4);
  }
}
.p-route__line{
  font-size:var(--fs-7);
  color:var(--c-text-sub);
}
.p-route__station{
  font-size:var(--fs-6);
  font-weight:var(--fw-head);
  letter-spacing:var(--ls-head);
}
.p-route__min{
  font-size:var(--fs-7);
  color:var(--c-primary-deep);
  font-weight:var(--fw-head);
  letter-spacing:var(--ls-head);
}

/* ============================================================
   お問い合わせページ
   ============================================================ */
.p-form__must{
  font-size:var(--fs-8);
  color:var(--c-text-sub);
  margin-block-end:var(--sp-5);
}
/* 必須の印。囲みや背景は使わず、主色の文字だけで示す。 */
.p-req{
  font-size:var(--fs-8);
  font-weight:var(--fw-head);
  color:var(--c-primary);
  letter-spacing:var(--ls-head);
  margin-inline-start:var(--sp-1);
}
.p-tel-block{
  border-block-start:var(--bw-hair) solid var(--c-rule);
  padding-block-start:var(--sp-4);
  margin-block-start:var(--sp-5);
  font-size:var(--fs-7);
  line-height:var(--lh-body);
}
.p-tel-block a{ color:var(--c-text); text-decoration:none; }
.p-tel-block a:hover{ color:var(--c-primary-deep); text-decoration:underline; }
.p-after{
  border-block-start:var(--bw-hair) solid var(--c-rule);
  padding-block-start:var(--sp-5);
  margin-block-start:var(--sp-7);
  max-width:var(--w-text);
}
.p-after__h{
  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-policy{ max-width:var(--w-text); }
.p-policy > p{ margin-block-end:var(--sp-4); }
.p-policy__jou{
  border-block-start:var(--bw-hair) solid var(--c-rule);
  padding-block-start:var(--sp-5);
  margin-block-start:var(--sp-6);
}
.p-policy__h{
  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-policy__jou p{ margin-block-end:var(--sp-4); }
.p-policy__jou p:last-child{ margin-block-end:0; }
.p-policy__list{
  list-style:none;
  margin:0 0 var(--sp-4);
  padding:0;
  display:grid;
  gap:var(--sp-2);
}
.p-policy__list li{ line-height:var(--lh-body); }
.p-policy__date{
  margin-block-start:var(--sp-7);
  padding-block-start:var(--sp-4);
  border-block-start:var(--bw-hair) solid var(--c-rule);
  font-size:var(--fs-7);
  color:var(--c-text-sub);
}

/* ============================================================
   文章だけの区切り（VPNとは）
   ============================================================ */
.p-prose{ max-width:var(--w-text); }
.p-prose p{ margin-block-end:var(--sp-4); }
.p-prose p:last-child{ margin-block-end:0; }

/* ============================================================
   料金の目安（表にしない。区分ごとに縦に並べ、極細の罫線で区切る）
   ============================================================ */
.p-price__list{ display:grid; gap:0; }
.p-price__item{
  border-block-start:var(--bw-hair) solid var(--c-rule);
  padding-block:var(--sp-5);
}
.p-price__item:last-child{ border-block-end:var(--bw-hair) solid var(--c-rule); }
@media (min-width:768px){
  .p-price__item{ padding-block:var(--sp-6); }
}
.p-price__name{
  font-size:var(--fs-4);
  font-weight:var(--fw-head);
  line-height:var(--lh-head);
  letter-spacing:var(--ls-head);
  color:var(--c-text);
  margin-block-end:var(--sp-3);
}
.p-price__detail{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:var(--sp-1);
}
.p-price__detail li{
  font-size:var(--fs-7);
  color:var(--c-text-sub);
  line-height:var(--lh-body);
}
.p-price__note{
  margin-block-start:var(--sp-5);
  max-width:var(--w-text);
  font-size:var(--fs-8);
  color:var(--c-text-sub);
  line-height:var(--lh-body);
}

/* ============================================================
   進め方・流れ（5段階）
   ============================================================ */
.p-flow__list{ display:grid; gap:0; }
.p-flow__item{
  border-block-start:var(--bw-hair) solid var(--c-rule);
  padding-block:var(--sp-5);
}
.p-flow__item:last-child{ border-block-end:var(--bw-hair) solid var(--c-rule); }
@media (min-width:768px){
  .p-flow__item{
    display:grid;
    grid-template-columns:1fr 2fr;
    gap:var(--sp-6);
    align-items:start;
    padding-block:var(--sp-6);
  }
}
.p-flow__title{
  font-size:var(--fs-5);
  font-weight:var(--fw-head);
  line-height:var(--lh-head);
  letter-spacing:var(--ls-head);
  color:var(--c-primary-deep);
  margin-block-end:var(--sp-2);
}
@media (min-width:768px){
  .p-flow__title{ margin-block-end:0; }
}
.p-flow__desc{ margin:0; }

/* ============================================================
   導入事例（トップページと同じ組み方）
   ============================================================ */
.p-case__list{ display:grid; gap:var(--sp-5); }
@media (min-width:768px){
  .p-case__list{ grid-template-columns:repeat(3,1fr); gap:var(--sp-6); }
}
.p-case__item{
  border-block-start:var(--bw-hair) solid var(--c-rule);
  padding-block-start:var(--sp-4);
}
.p-case__meta{
  font-size:var(--fs-8);
  color:var(--c-text-sub);
  letter-spacing:var(--ls-eyebrow);
  margin-block-end:var(--sp-2);
}
.p-case__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-case__sep{ color:var(--c-text-sub); }
.p-case__body{ margin:0; }
.p-case__more{ margin-block-start:var(--sp-6); }

/* ============================================================
   よくあるご質問（開閉する仕掛けは使わない）
   ============================================================ */
.p-faq__list{ display:grid; gap:0; }
.p-faq__item{
  border-block-start:var(--bw-hair) solid var(--c-rule);
  padding-block:var(--sp-5);
  max-width:var(--w-text);
}
.p-faq__item:last-child{ border-block-end:var(--bw-hair) solid var(--c-rule); }
.p-faq__q{
  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-faq__a{ margin:0; }

/* ============================================================
   締めの案内
   ============================================================ */
.p-close__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-close__box{ padding-block:var(--sp-9); }
}
.p-close__actions{ margin-block-start:var(--sp-6); }
.p-close__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-close__tel a{ color:var(--c-text-sub); }
.p-close__tel a:hover{ color:var(--c-primary-deep); }