:root{
  --s-blue: #2a6be7;
  --s-blue-deep: #1653ce;

  --s-ink: #0f172a;
  --s-muted: #6b7280;

  --s-line: rgba(15, 23, 42, .10);
  --s-soft: #f4f6f8;
  --s-white: #fff;

  --s-radius: 14px;
  --s-shadow: 0 18px 60px rgba(15, 23, 42, .10);

  /* 画像みたいに左右の余白を広めに（max制限なし） */
  --s-pad-x: clamp(16px, 6vw, 84px);
  --s-content-width: 980px;
}

/* Base */
*{ box-sizing:border-box; margin:0; padding:0; }
body{
  font-family: "Noto Sans JP", system-ui, sans-serif;
  color: var(--s-ink);
  background: var(--s-white);
  line-height: 1.8;
}
a{ color: inherit; text-decoration:none; }
a:hover{ opacity: .85; }
img{ max-width:100%; display:block; }
ul{ list-style:none; }

.s-content {
  width: min(var(--s-content-width), 100%);
  margin-inline: auto;
}


/* ===== Header（ACCESS） ===== */
.s-header{
  background:#fff;
  border-bottom: 1px solid var(--s-line);
}
.s-header__inner{
  height: 76px;
  display:flex;
  align-items:center;
  padding-inline: var(--s-pad-x);
}
.s-header__brand{
  font-weight: 900;
  font-size: 18px;
  letter-spacing: .02em;
}
.s-header__brand:hover{ color: var(--s-blue-deep); }

/* ===== Hero（ACCESS） ===== */
.s-hero{
  padding: 44px 0 18px;
  position: relative;
  overflow:hidden;
}
.s-hero::before{
  content:"";
  position:absolute;
  inset:-70px -70px auto -70px;
  height: 260px;
  background:
    radial-gradient(900px 240px at 20% 25%, rgba(42,107,231,.18), transparent 60%),
    linear-gradient(120deg, rgba(42,107,231,.06), rgba(42,107,231,0));
  pointer-events:none;
}
.s-hero__inner{
  position:relative;
  text-align:center;
  padding-inline: var(--s-pad-x);
}
.s-hero__title{
  font-size: clamp(48px, 7vw, 84px);
  font-weight: 900;
  letter-spacing: .02em;
  color: var(--s-blue);
  line-height: 1;
}
.s-hero__sub{
  margin-top: 10px;
  font-weight: 900;
  font-size: 14px;
  color: #111827;
}

/* ===== Main section (画像の“中央寄せカード”の空気感) ===== */
.s-company{
  padding: 18px 0 64px;
}
.s-company__inner{
  padding-inline: var(--s-pad-x);
  display:flex;
  flex-direction:column;
  gap: 28px;
}

/* 共通：白い見出しカード（画像の上部の箱） */
.s-panel{
  background:#fff;
  border-radius: 10px;
  margin-top: 6rem;
}
.s-panel__head{
    width: min(var(--s-content-width), 100%);
    margin-inline: auto;
  background: #fff;
  border: 1px solid var(--s-line);
  border-radius: 10px;
  box-shadow: 0 14px 40px rgba(15,23,42,.08);
  padding: 26px 18px;
  text-align:center;
  margin-bottom: 18px;
}
.s-panel__title{
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .08em;
}
.s-panel__sub{
  margin-top: 6px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .22em;
  color: var(--s-muted);
}

/* 会社概要テーブル（画像っぽい：左に薄グレー帯、右に値、線薄め） */
.s-profile{
  width: min(980px, 100%);
  margin: 0 auto;
  border: 1px solid var(--s-line);
  border-radius: 10px;
  overflow:hidden;
}
.s-profile__row{
  display:grid;
  grid-template-columns: 38% 62%;
  border-top: 1px solid var(--s-line);
}
.s-profile__row:first-child{ border-top:0; }

.s-profile__th{
  padding: 18px 18px;
  background: rgba(15,23,42,.04);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .04em;
  color: #111827;
}
.s-profile__td{
  padding: 18px 18px;
  font-size: 15px;
  font-weight: 700;
  color: #2c344a;
  word-break: break-word;
  background:#fff;
}

/* 代表メッセージ（本文左、写真右：画像の構成寄せ） */
.s-message{
  width: min(980px, 100%);
  margin: 0 auto;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 26px;
  align-items:start;
}

.s-message__text{
  font-size: 15px;
  font-weight: 700;
  color: #2c344a;
  line-height: 2;
}
.s-message__text p + p{ margin-top: 14px; }

.s-message__sign{
  margin-top: 18px;
  display:flex;
  gap: 10px;
  align-items: baseline;
  justify-content:flex-end;
}
.s-message__role{
  font-size: 12px;
  font-weight: 900;
  color: var(--s-muted);
}
.s-message__name{
  font-size: 14px;
  font-weight: 900;
  color: #111827;
  letter-spacing: .02em;
}

/* 写真枠：四角で“きちんと感”、影は控えめ */
.s-photoFrame{
  width: 260px;                 /* 丸枠にするので固定サイズ */
  aspect-ratio: 1 / 1;          /* 正円 */
  border-radius: 50%;
  overflow: hidden;
  background: rgba(15,23,42,.06);
  border: 1px solid var(--s-line);
  margin-inline: auto;          /* 中央寄せ */
}

.s-photoFrame img{
  width: 100%;
  height: 100%;
  object-fit: cover;            /* 顔がはみ出ない */
}


/* アクセス */
.s-access__addr{
  width: min(980px, 100%);
  margin: 0 auto 16px;
  text-align:center;
  font-size: 15px;
  font-weight: 800;
  color: #2c344a;
}
.s-map{
  width: min(980px, 100%);
  margin: 0 auto;
  border-radius: 10px;
  overflow:hidden;
  border: 1px solid var(--s-line);
  background: rgba(15,23,42,.04);
}
.s-map iframe{
  width: 100%;
  height: min(52vh, 420px);
  border:0;
  display:block;
}

/* ===== Footer ===== */
.s-footer{
  padding-block: 18px 22px;
  color: #8a94a7;
  font-weight: 700;
  text-align: center;
  border-top: 1px solid var(--s-line);
  background: rgba(255,255,255,.7);
}

/* ===== Responsive ===== */
@media (max-width: 980px){
  .s-profile__row{
    grid-template-columns: 1fr;
  }
  .s-message{
    grid-template-columns: 1fr;
  }
  .s-message__sign{
    justify-content:flex-start;
  }

  .s-footerGrid{
    grid-template-columns: repeat(2, minmax(140px, 1fr));
  }
}

@media (max-width: 560px){
  .s-footerGrid{
    grid-template-columns: 1fr;
  }
}