@charset "utf-8";
/* =========================================================
   index.css — トップページ専用
   About / Profile(message) / News / Contact(corp) / 装飾パーツ
   ========================================================= */


/* =========================================================
   FV（ファーストビュー）
   正規ロゴのシンボル8要素が集まり、コーラルが最後に着地したあとロゴタイプが出る。
   JS不使用。変数（--text 等）とリセットは common.css 側にある。
   ========================================================= */

  /* レイアウトの考え方（PC＝901px以上）
       ・左テキスト＋右ロゴの2カラムを、1組として画面の中央に置く
       ・幅で変わるのはサイズだけ。段階は次の3つ
           1501〜1920px … ロゴ 260→312px・キャッチ 28→34px へ拡大
           901〜1500px  … ロゴ 260→180px で可変・キャッチ 28px 固定
           〜900px      … 縦積み（ロゴ 220px／600px以下は 170px）
       ・下の .fv / .fv__graphic / .fv__catch-line は初期値。
         901px以上では後段のメディアクエリが必ず上書きする
       ・margin-left:-130px は、FVが左ナビ130px分だけ右にある main の中に
         あるための打ち消し。無いと中央からずれる（900px以下は解除） */
  .fv{position:relative;height:100vh;min-height:560px;overflow:hidden;display:grid;
      grid-template-columns:1fr 1fr;align-items:center;gap:48px;padding:0 40px;
      margin-left:-130px;}

  .fv__body{position:relative;z-index:2;max-width:560px;justify-self:end;padding-right:24px;}
  .fv__catch{margin-bottom:32px;}
  .fv__catch-line{
    display:block;font-weight:500;font-size:clamp(20px,2.2vw,34px);  /* 1501px以上でのみ可変。以下の帯では固定値に上書き */
    letter-spacing:.1em;line-height:1.9;white-space:nowrap;
    opacity:0;animation:rise 1.1s cubic-bezier(.32,0,.15,1) forwards;
  }
  .fv__catch-line:nth-child(1){animation-delay:.25s;}
  .fv__catch-line:nth-child(2){animation-delay:.5s;}
  .fv__lead{font-size:15px;letter-spacing:.07em;line-height:2.0;
    opacity:0;animation:rise 1.1s cubic-bezier(.32,0,.15,1) .8s forwards;margin-bottom:36px;}
  /* 行間だけ広げたいため row/column を分けている（左右は8pxのまま） */
  .fv__pillars{display:flex;flex-wrap:wrap;row-gap:12px;column-gap:8px;
    opacity:0;animation:rise 1.1s cubic-bezier(.32,0,.15,1) 1.05s forwards;}
  .fv__pillar{font-size:13px;letter-spacing:.1em;line-height:1.6;
    border:1px solid var(--gray-k20);border-radius:999px;padding:6px 16px;}
  .fv__pillar--key{border-color:var(--teal);color:var(--teal);}
  @keyframes rise{ from{opacity:0;transform:translateY(16px);} to{opacity:1;transform:none;} }

  /* --- 右：正規ロゴが組み上がる --- */
  /* 1501px以上の指定。ロゴ312px、右カラムの左端から92px空けて左テキストとの間隔を140pxにする */
  .fv__graphic{position:relative;z-index:1;justify-self:start;margin-left:92px;width:100%;max-width:312px;}
  .logo{width:100%;height:auto;display:block;overflow:visible;}

  /* シンボルの各要素：ばらけた位置から所定の位置へ収まる */
  .lg{
    opacity:0;
    transform-box:fill-box;
    transform-origin:center;
    animation:settle 1.1s cubic-bezier(.32,0,.15,1) var(--d,0s) forwards;
  }
  @keyframes settle{
    from{opacity:0;transform:translate(var(--dx,0px),var(--dy,0px)) scale(.86);}
    to{opacity:1;transform:translate(0,0) scale(1);}
  }
  /* 中央のコーラル＝最後に収まる（＝要） */
  .lg--key{animation:settle 1.1s cubic-bezier(.32,0,.15,1) var(--d) forwards,
                     breathe 4.5s ease-in-out calc(var(--d) + 1.6s) infinite;}
  @keyframes breathe{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.06);} }

  /* ロゴタイプ：シンボルが揃いきる最後に合わせて表示 */
  .logo__typo{
    opacity:0;
    animation:typo-in 1s cubic-bezier(.32,0,.15,1) 2.1s forwards;
  }
  @keyframes typo-in{
    from{opacity:0;transform:translateY(6px);}
    to{opacity:1;transform:translateY(0);}
  }

  @media (prefers-reduced-motion: reduce){
    .fv__catch-line,.fv__lead,.fv__pillars{animation:none !important;opacity:1;}
    .lg,.lg--key,.logo__typo{animation:none !important;opacity:1;transform:none;}
  }

  /* 901px以上の共通レイアウト：等幅カラムだとテキストが左端に張り付くため、
     左右ともコンテンツ幅に合わせ、2つを1組として画面中央に置く。
     間隔はgapで固定されるため、幅が変わっても離れない */
  @media screen and (min-width:901px){
    .fv{grid-template-columns:auto auto;justify-content:center;gap:80px;padding:0 40px;}
    .fv__body{justify-self:start;max-width:none;padding-right:0;}
    .fv__graphic{margin-left:0;max-width:none;}
  }

  /* 901〜1500px：ロゴは1450pxで260px。1449px以下で縮み始め、180pxで下げ止まる。
     キャッチは逆に縮小させず固定（1300px時と同じ大きさ） */
  @media screen and (min-width:901px) and (max-width:1500px){
    .fv__graphic{width:clamp(180px,17.94vw,260px);}
    .fv__catch-line{font-size:28px;}
  }

  /* 1501px以上：1920pxに向けてロゴ260→312px・キャッチ28→34pxへ拡大。
     1501px時点では1500px時と同値になるため、境界に段差が出ない */
  @media screen and (min-width:1501px){
    .fv__graphic{width:clamp(260px, calc(260px + (100vw - 1501px) * 52 / 419), 312px);}
    .fv__catch-line{font-size:clamp(28px, calc(28px + (100vw - 1501px) * 6 / 419), 34px);}
  }

  /* 900px以下：縦積み */
  @media screen and (max-width:900px){
    /* 上下対称の余白にして、画面の高さに対してコンテンツを中央に置く */
    .fv{grid-template-columns:1fr;align-content:center;gap:40px;height:auto;
        padding:70px 15px 30px;   /* 実測663px基準。上70pxはヘッダーロゴ(top45〜60)の回避分 */
        min-height:100vh;
        min-height:100dvh;   /* iOS実機: Safariバーの状態で663〜699px。dvhで実表示領域に追従して中央寄せ */
        margin-left:0;}      /* この幅では左ナビが0pxなので、食い込みの打ち消しも不要 */
    .fv__body{justify-self:stretch;max-width:none;padding-right:0;}
    .fv__graphic{justify-self:center;margin-left:0;width:100%;max-width:150px;}  /* PCの左寄せ・幅指定は打ち消す。狭い実表示に収めるため150pxまで */
    .fv__catch-line{font-size:clamp(17px,4.6vw,26px);}  /* 最小17px：320px端末でも1行に収める */
    .fv__pillar{font-size:12px;}                        /* SPのみ12px（PCは13px） */
  }

  /* タブレット（601〜900px）：縦積みだが余白に余裕があるため、ロゴはスマホより大きく
     （601pxは元サイトのsm＝スマホ境界に合わせた） */
  @media screen and (min-width:601px) and (max-width:900px){
    .fv__graphic{max-width:185px;}
  }

  /* 600px以下（スマホ）：縦の情報量が多いため、コピー→本文→楕円の間隔を詰める */
  @media screen and (max-width:600px){
    .fv__catch{margin-bottom:24px;}   /* 全幅共通の32pxから */
    .fv__lead{margin-bottom:24px;}    /* 全幅共通の36pxから */
  }


@keyframes parts-y {
  0% {
    transform: translateY(-40px); }
  100% {
    transform: translateY(40px); } }
@keyframes parts-x {
  0% {
    transform: translateX(-40px); }
  100% {
    transform: translateX(40px); } }

.about {
  position: relative;
  margin-top: 100px;   /* FVとの間隔 */
  margin-bottom: 201px; }
.about__parts-group1 {
  position: absolute;
  left: -180px;
  bottom: 572px; }
.about__parts-group1-item1 {
  position: absolute;
  width: 93px;
  height: 93px;
  left: 0;
  top: 0;
  background: var(--teal);
  border-radius: 50%;
  animation: parts-y 25s linear infinite alternate-reverse; }
.about__parts-group1-item2 {
  position: absolute;
  width: 211px;
  height: 211px;
  left: 183px;
  top: 94px;
  background: var(--coral);
  border-radius: 50%;
  animation: parts-y 25s linear infinite alternate; }
.about__parts-group1-item3 {
  position: absolute;
  width: 217px;
  height: 68px;
  left: 50px;
  top: 200px;
  background: var(--blue);
  border-radius: 0 40px 40px 0;
  animation: parts-x 20s linear infinite alternate; }
.about__parts-group2 {
  position: absolute;
  right: 60px;
  bottom: -73px; }
.about__parts-group2-item1 {
  position: absolute;
  width: 79px;
  height: 79px;
  left: 60px;
  top: 0;
  background: var(--blue);
  border-radius: 50%;
  animation: parts-y 30s linear infinite alternate-reverse; }
.about__parts-group2-item2 {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 0;
  top: 138px;
  background: var(--mint);
  border-radius: 50px 50px 0 0;
  animation: parts-y 20s linear infinite alternate; }
.about__ttl {
  margin-bottom: 74px; }
.about__right {
  padding-left: 80px; }
.about__catch {
  font-size: 25px;
  letter-spacing: .1em;
  line-height: 1.4;
  font-weight: 500;
  margin: 0 0 59px; }
.about__catch-name {
  font-family: "Cabin", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "游ゴシック Medium", YuGothic, YuGothicM, メイリオ, Meiryo, sans-serif;
  letter-spacing: .1em;
  font-size: 30px;
  font-weight: 400;
  display: inline-block;
  vertical-align: 1px; }
.about__catch-dquo {
  font-size: 30px;
  font-weight: 400;
  display: inline-block;
  vertical-align: 1px; }
.about__catch-dquo--left {
  margin-right: 8px; }
.about__catch-dquo--right {
  margin: 0 9px 0 4px;
  transform: scaleY(-1) translateY(22%); }
.about__txt {
  font-size: 15px;
  letter-spacing: 0.07em;
  line-height: 39px;
  margin-bottom: 28px; }
.about__img {
  margin: 63px 0 0 auto;
  position: relative;
  width: 300px; }
.about__img-label {
  font-style: italic;
  font-family: "Cabin", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "游ゴシック Medium", YuGothic, YuGothicM, メイリオ, Meiryo, sans-serif;
  font-size: 18px;
  letter-spacing: 0.1em;
  line-height: 1.2;
  position: absolute;
  right: calc(100% - 47px);
  top: 115px;
  white-space: nowrap; }
.about__img-item {
  width: 100%;
  border-radius: 70px 0 0 0;
  overflow: hidden; }
.about__img-item img {
  width: 100%; }@media screen and (max-width: 1200px) {
.about__right {
    padding-left: 0; }
}
@media screen and (max-width: 900px) {
.about {
    margin-top: 60px;
    margin-bottom: 104px; }
  .about__parts {
    display: none; }
  .about__ttl {
    margin-bottom: 55px; }
  .about__catch {
    font-size: 20px;
    margin: 0 0 42px -1px; }
  .about__catch-name {
    font-size: 25px;
    vertical-align: 0; }
  .about__catch-dquo {
    font-size: 25px;
    vertical-align: 2px; }
  .about__catch-dquo--left {
    margin-right: 4px; }
  .about__catch-dquo--right {
    margin: 0 1px 0 -2px;
    transform: scaleY(-1) translateY(31%); }
  .about__txt {
    line-height: 32px; }
  .about__img {
    margin: 58px -15px 0 auto;
    width: 239px;
    max-width: 69.2%; }
  .about__img-label {
    font-size: 17px;
    top: 94px; }
  .about__img-item {
    border-radius: 57px 0 0 0; }
}


.message {
  margin-bottom: 126px; }
.message__ttl {
  margin-bottom: 70px; }
.message__right {
  padding-left: 80px; }
.message__profile {
  line-height: 1.2;
  margin-bottom: 45px; }
.message__profile-name {
  font-size: 20px;
  letter-spacing: 0.1em; }
.message__profile-sub {
  margin-top: 19px;
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0.1em; }
.message__txt {
  font-size: 15px;
  letter-spacing: 0.07em;
  line-height: 42px; }@media screen and (max-width: 1200px) {
.message__right {
    padding-left: 0; }
}
@media screen and (max-width: 900px) {
.message {
    margin-bottom: 88px; }
  .message__ttl {
    margin-bottom: 54px; }
  .message__txt {
    line-height: 32px; }
}


.news {
  margin-bottom: 104px;
  position: relative; }
.news__parts-group1 {
  position: absolute;
  left: -130px;
  top: 60px; }
.news__parts-group1-item1 {
  position: absolute;
  width: 89px;
  height: 89px;
  left: 180px;
  top: 0;
  background: var(--coral);
  animation: parts-y 25s linear infinite alternate-reverse; }
.news__parts-group1-item2 {
  position: absolute;
  width: 186px;
  height: 186px;
  left: 0;
  top: 77px;
  background: var(--blue);
  border-radius: 0 90px 90px 0;
  animation: parts-x 25s linear infinite alternate; }
.news__parts-group1-item3 {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 130px;
  top: 213px;
  background: var(--mint);
  border-radius: 0 0 45px 45px;
  animation: parts-y 20s linear infinite alternate; }
.news__ttl {
  margin-bottom: 122px; }
.news__cate-item {
  font-family: "Cabin", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "游ゴシック Medium", YuGothic, YuGothicM, メイリオ, Meiryo, sans-serif;
  font-size: 15px;
  letter-spacing: 0.1em;
  line-height: 25px;
  transition: 0.3s cubic-bezier(0.51, 0.2, 0.31, 0.91);
  cursor: pointer;
  margin-top: 26px;
  color: var(--sub-text); }
.news__cate-item:first-child {
  margin-top: 0; }
.news__cate-item.is-selected {
  color: var(--text); }@media screen and (min-width: 1091px) {
.news__cate-item:hover {
    color: var(--text); }
}

.news__list {
  margin-top: 2px; }
.news__list a {
  display: block; }@media screen and (min-width: 1091px) {
.news__list a:hover {
    color: var(--sub-text); }
}

.news__list-head {
  display: flex;
  margin-bottom: 15px;
  color: var(--sub-text);
  font-family: "Cabin", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "游ゴシック Medium", YuGothic, YuGothicM, メイリオ, Meiryo, sans-serif;
  font-size: 13px;
  letter-spacing: 0.05em; }
.news__list-date {
  margin-right: 22px; }
.news__list-cate {
  letter-spacing: .1em; }
.news__list-ttl {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 15px;
  letter-spacing: 0.05em;
  line-height: 35px; }@media screen and (max-width: 900px) {
.news__list-head {
    margin-bottom: 16px; }
  .news__list-ttl {
    line-height: 32px; }
}

.news__list-item {
  border-bottom: solid 1px var(--sub-gray-lt); }
.news__list-item a {
  padding: 41px 0 33px; }
.news__list-item:first-child a {
  padding-top: 0; }@media screen and (max-width: 900px) {
.news__list-item a {
    padding: 36px 0 30px; }
}

.news__link {
  margin-top: 56px; }@media screen and (max-width: 900px) {
.news__parts {
    display: none; }
  .news__ttl {
    margin-bottom: 94px; }
  .news__cate {
    display: flex;
    gap: 0 28px;
    margin-bottom: 77px; }
  .news__cate-item {
    margin: 0;
    padding-bottom: 1px; }
  .news__cate-item.is-selected {
    border-bottom: solid 1px var(--text); }
  .news__list {
    margin-top: 0; }
  .news__link {
    margin-top: 79px; }
}


.corp__inner {
  position: relative;
  z-index: 0;
  padding-top: 86px;
  padding-bottom: 83px; }
.corp__inner:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  border-radius: 80px 0 0 0;
  background: var(--sub-bg);
  width: 100%;
  height: 475px; }@media screen and (max-width: 900px) {
.corp__inner:before {
    width: calc(100% + 15px); }
}

.corp__inner:before {
  height: 100%; }
.corp__ttl {
  margin-bottom: 54px; }
.corp__info-item {
  line-height: 1.8;
  background: var(--white);
  padding: 21px 20px 20px 70px;
  border-top: solid 3px var(--sub-bg);
  display: flex;
  align-items: center; }
.corp__info-item:first-child {
  border-top: 0; }
.corp__info-label {
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.1em;
  flex-shrink: 0;
  width: 142px;
  min-height: 32px;
  display: flex;
  align-items: center; }
.corp__info-name--en {
  display: inline-block;
  font-family: "Cabin", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "游ゴシック Medium", YuGothic, YuGothicM, メイリオ, Meiryo, sans-serif;
  font-size: 17px;
  letter-spacing: 0.1em;
  margin-right: 9px; }
.corp__info-name--ja {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.05em; }
.corp__info-ceo--ja {
  display: inline-block;
  font-size: 17px;
  letter-spacing: 0.1em;
  margin-right: 10px; }
.corp__info-ceo--en {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.05em;
  vertical-align: 1px; }
.corp__info-mail {
  display: inline-block;
  margin-right: 46px; }
.corp__info-mail a {
  font-family: "Cabin", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "游ゴシック Medium", YuGothic, YuGothicM, メイリオ, Meiryo, sans-serif;
  font-size: 17px;
  letter-spacing: 0.1em;
  position: relative; }
.corp__info-mail a:before {
  width: 100%;
  height: 1px;
  background: var(--text);
  position: absolute;
  bottom: 0;
  left: 0;
  content: ""; }@media screen and (min-width: 1091px) {
.corp__info-mail a:hover:before {
    animation: link-line 0.3s cubic-bezier(0.51, 0.2, 0.31, 0.91); }
}

.corp__info-mail-at {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "游ゴシック Medium", YuGothic, YuGothicM, メイリオ, Meiryo, sans-serif; }
.corp__info-tel {
  display: inline-block; }
.corp__info-tel a {
  font-family: "Cabin", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "游ゴシック Medium", YuGothic, YuGothicM, メイリオ, Meiryo, sans-serif;
  font-size: 17px;
  letter-spacing: 0.1em; }@media screen and (max-width: 1200px) {
.corp__left {
    width: 0;
    padding: 0; }
  .corp__right {
    width: 100%; }
}
@media screen and (max-width: 900px) {
.corp__inner {
    padding: 63px 0 60px 37px; }
  .corp__ttl {
    margin-bottom: 50px; }
  .corp__info-item {
    display: block;
    padding: 22px 26px 20px; }
  .corp__info-label {
    min-height: 0;
    width: 100%;
    margin-bottom: 6px; }
  .corp__info-cont {
    width: 100%; }
  .corp__info-mail {
    margin: 3px 0 0 0; }
  .corp__info-mail a {
    padding-bottom: 2px; }
  .corp__info-tel {
    margin: 20px 0 5px;
    width: 100%; }
  .corp__info-tel a {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 50px;
    border: 1px solid var(--sub-gray-mid); }
}


/* =========================================================
   Service（4本柱）

   1セルの構成：
     上段 .s4__head … 図形ラベル（左）＋ タイトル・リード・タグ（右）
     下段 .s4__txt  … 本文

   図形（英字が入るメイン＋差し色）
     AI導入支援          　ティール ＋ ミント
     アプリ開発          　グレー   ＋ ライトグレー
     プロジェクト推進    　コーラル ＋ ライトコーラル
     ウェブ制作・運用支援  ブルー   ＋ ライトブルー

   差し色は fadein 発火後に .7s / .95s / 1.2s / 1.45s とずらして出る。
   ========================================================= */

  .service {
    /* グレーの帯の下端からNewsまでは120px */
    margin-bottom: 120px; }
  .service__inner {
    position: relative;
    z-index: 0;
    padding-top: 86px;
    /* グレーの帯が最後のカードの本文で切れないよう、下に余白を持たせる */
    padding-bottom: 110px; }
  .service__inner:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 80px 0 0 0;
    background: var(--sub-bg);
    width: 100%;
    height: 100%; }
  .service__ttl {
    margin-bottom: 46px; }
  .service__txt {
    font-size: 15px;
    letter-spacing: .1em;
    line-height: 47px;
    margin-bottom: 87px;
    max-width: 1050px; }

  /* 2×2グリッド。PCでは見出し・導入文より右にずらす（左に白い余白をつくる）。
     画面が狭いとカードが痩せてリードの改行が崩れるため、
     1500px以下では余白を0まで詰める可変値にしている（最大140px） */
  .service__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 90px;
    /* row-gap は「上段の下端〜本文の上端」の間隔。ただしアイコン(200px)が
       テキスト列(約176px)より背が高いため、タグ〜本文の見た目の余白は
       row-gap + 差分24px になる（1920pxで実測：24+24=48px）。
       広い画面で間延びして見えたため詰めた（1500px以下は別途上書き） */
    row-gap: 24px;
    padding-left: clamp(0px, (100vw - 1500px) * 0.45, 140px); }
  .s4 {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid; }
  /* 2段目のサービスとの間隔は row-gap 24 + 66 = 90px（段間90pxは維持） */
  .s4:nth-child(n+3) {
    margin-top: 66px; }

  /* タイトルの頭を、アイコンのメインの図形の上端に揃える（align-items:flex-start）。
     --s4-label は図形の一辺。プロジェクト推進だけ円が上に8.2%はみ出すぶん、
     テキスト側を同じだけ持ち上げて上端を合わせている */
  .s4 {
    --s4-label: 200px; }
  .s4__head {
    display: flex;
    align-items: flex-start;
    align-self: start;
    gap: 40px; }
  .s4--lead .s4__body {
    margin-top: calc(var(--s4-label) * -0.082); }
  .s4__label {
    position: relative;
    z-index: 0;
    width: var(--s4-label);
    flex-shrink: 0; }
  .s4__label:before {
    content: "";
    display: block;
    width: 100%;
    padding-top: 100%; }
  .s4__label-txt {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--font-accent);
    font-weight: 300;
    font-size: 18px;
    letter-spacing: 0.05em;
    line-height: 1.75;
    text-align: center;
    color: var(--white);
    z-index: 1; }
  .s4__label-txt:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-top: 100%;
    z-index: -2; }
  /* 差し色 */
  .s4__label-txt:after {
    content: "";
    position: absolute;
    z-index: -1;
    opacity: 0;
    transition: 1s var(--ease-line); }
  .s4.is-show-before .s4__label-txt:after {
    transform: none;
    opacity: 1; }

  /* AI導入支援（ティール四角）。文字は四角の中央 */
  .s4--ai .s4__label-txt {
    padding: 0; }
  .s4--ai .s4__label-txt:before {
    background: var(--teal); }
  .s4--ai .s4__label-txt:after {
    background: var(--mint);
    width: 48%;
    padding-top: 48%;
    top: 33%;
    left: -23.5%;
    transform: scaleX(0);
    transform-origin: top left;
    transition-delay: .7s; }

  /* アプリ開発（グレー四角。薄グレー地のため文字だけ基準色） */
  .s4--app .s4__label-txt {
    padding: 0 0 2% 2%;
    color: var(--text); }
  .s4--app .s4__label-txt:before {
    background: var(--gray-k20); }
  .s4--app .s4__label-txt:after {
    background: var(--sub-gray-lt);
    width: 30%;
    padding-top: 30%;
    top: -9%;
    left: 78%;
    transform: translate(50%, -40%);
    transition-delay: .95s; }

  /* プロジェクト推進（コーラル円） */
  .s4--lead .s4__label-txt {
    padding: 0 0 7% 9%; }
  .s4--lead .s4__label-txt:before {
    background: var(--coral);
    width: 108.2%;
    padding-top: 108.2%;
    border-radius: 50%; }
  .s4--lead .s4__label-txt:after {
    background: var(--sub-coral-lt);
    border-radius: 50%;
    width: 33%;
    padding-top: 33%;
    top: -11%;
    left: 80%;
    transform: translate(60%, -40%);
    transition-delay: 1.2s; }

  /* ウェブ制作・運用支援（ブルー右角丸） */
  .s4--wd .s4__label-txt {
    padding: 1% 3% 0 0; }
  .s4--wd .s4__label-txt:before {
    background: var(--blue);
    border-radius: 0 46% 46% 0; }
  .s4--wd .s4__label-txt:after {
    background: var(--sub-blue-lt);
    border-radius: 46% 46% 0 0;
    width: 37%;
    padding-top: 37%;
    bottom: -7%;
    left: 62.5%;
    transform: translateY(50%);
    transition-delay: 1.45s; }

  /* 上段右のテキスト */
  .s4__ttl {
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 0.05em;
    line-height: 1.5; }
  .s4__lead {
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.05em;
    line-height: 1.9;
    margin-top: 12px;
    /* 「欲しかったツールを、欲しかった形の」で折り返すための上限幅 */
    max-width: 240px; }
  .s4__word {
    font-size: 13px;
    letter-spacing: 0.05em;
    line-height: 24px;
    color: var(--sub-text);
    margin-top: 16px; }
  /* 下段の本文（上段との間隔は row-gap が担う） */
  .s4__txt {
    font-size: 13px;
    letter-spacing: 0.05em;
    line-height: 28px;
    align-self: start;
    margin-top: 0;
    max-width: 506px; }

  /* アイコンを200pxのまま保つとカードが痩せてリードが3行になるため、
     1500px以下ではアイコンを150pxに落とす */
  @media screen and (max-width: 1500px) {
    .service__list {
      column-gap: 48px; }
    /* row-gap を28pxに詰めたぶんを足して、サービス段間は96pxのまま保つ */
    .s4:nth-child(n+3) {
      margin-top: 68px; }
    /* この帯（〜1500px）はカードが詰まって見えるため、タグと本文の間を詰める。
       左右カードの間は56px、グレーの帯の右端との間に80pxの余白を確保して、
       帯の中でカードが片寄って見えないようにしている */
    .service__list {
      column-gap: 56px;
      row-gap: 28px;
      padding-right: 80px; }
    .s4__txt {
      max-width: 430px; }
    .s4 {
      --s4-label: 150px; }
    .s4__head {
      gap: 26px; }
    .s4__label-txt {
      line-height: 1.7; }
    .s4__word {
      font-size: 12px; }
  }
  /* 1390px以下は1カラムに落とす。2カラムのままだとカードが痩せて
     リード文が3〜4行に折り返され、意図した改行位置が崩れるため。
     実測での限界は1400px（2行を保てる）／1370px（3行に崩れる）。
     余裕を見て1390pxを境界にした */
  @media screen and (max-width: 1390px) {
    /* 導入文は「〜チームとして、」で折り返す（2行に分ける）ための上限幅 */
    .service__txt {
      max-width: 545px; }
    .service__list {
      grid-template-columns: 1fr;
      gap: 64px;
      padding-left: 0;
      padding-right: 0; }
    /* 1カラムでは行を共有しないため、subgridをやめて通常フローに戻す */
    .s4 {
      display: block; }
    .s4:nth-child(n+3) {
      margin-top: 0; }
    .s4__txt {
      margin-top: 48px;
      max-width: 506px; }   /* 1カラムでは幅に余裕があるので506pxに戻す */
    .s4 {
      --s4-label: 200px; }
    .s4__head {
      gap: 34px; }
    .s4__word {
      font-size: 13px; }
  }
  @media screen and (max-width: 900px) {
    .service {
      margin-bottom: 80px; }
    .service__inner {
      padding: 58px 0 64px 37px; }
    .service__inner:before {
      width: calc(100% + 15px); }
    .service__ttl {
      margin-bottom: 54px; }
    .service__txt {
      line-height: 32px;
      margin-bottom: 39px; }
    .service__list {
      grid-template-columns: 1fr;
      gap: 64px; }
    .s4 {
      --s4-label: 210px; }
    .s4__head {
      gap: 34px; }
    .s4__label-txt:after {
      transition-delay: .5s !important; }
  }
  @media screen and (max-width: 600px) {
    .s4__head {
      display: block; }
    .s4__body,
    .s4--lead .s4__body {
      margin-top: 24px; }    /* 縦積みでは上揃えの持ち上げも不要 */
    .s4__lead {
      font-size: 14px;       /* 全幅共通の13pxから。本文・タグより一段上げて読ませる */
      line-height: 2; }
    .s4__txt {
      margin-top: 18px;
      line-height: 25px; }
  }