@charset "utf-8";
/*
 * ======================================
 * 有限会社洸成技研（tos-serv015_3601001520）サイト固有CSS
 * 追加クラス一覧（共通SCSS取り込み検討用）
 * ======================================
 *
 * .ksg-wrapper          - 1280px 固定幅のページ外枠（ベーシックプラン）
 * .ksg-header           - 2段ヘッダー（上段：ロゴ+電話／下段：均等分割ナビ）
 * .ksg-logo             - テキストロゴ（社名＋英字ベースライン揃え）
 * .ksg-gnav             - 上下ボーダー＋縦罫線で等分割するグローバルナビ
 * .ksg-mv               - メインビュー（100vh／縦向き60vh・CMSスライダー）
 * .ksg-shead            - セクション見出し（英字72px＋日本語16px・共通 heading の値差分）
 * .ksg-news             - 新着情報（見出し250px＋一覧の2カラム・グレー背景）
 * .ksg-about            - 私たちについて（本文＋画面右端まで抜ける斜め写真）
 * .ksg-service          - 事業内容（画面左端まで抜ける斜め写真＋本文）
 * .ksg-reason           - 選ばれる理由（1px罫線グリッドの4カラム・背景写真の透かし）
 * .ksg-bnr              - 下層ページバナー（card-bnr の値差分）
 * .ksg-cta              - お問い合わせ帯（グラデ背景＋大きな透かし英字）
 * .ksg-link-arrow       - 下線＋丸矢印のテキストリンク
 * .ksg-btn              - 角丸ゼロのボタン（solid / outline）
 * .ksg-footer           - フッター（左：会社情報／右：地図の2分割）
 * .ksg-page-hero        - 下層ヒーロー（340px・写真＋左下に緑の見出しパネル）
 * .ksg-lead-box         - 見出し＋本文＋注記の導入ブロック
 * .ksg-msg              - 代表メッセージ
 * .ksg-strengths        - つよみ（濃緑背景＋左半分の写真透かし）
 * .ksg-cominfo          - 会社情報（表＋沿革の2カラム）
 * .ksg-histroy          - 沿革（縦罫線＋四角ドット）
 * .ksg-needs            - ご要望リスト（チェックアイコン付き2列）
 * .ksg-biz              - パネル製造（見出し250px＋本文の2カラム・対応工程テーブル）
 * .ksg-product          - 取り扱い製品（2製品の横並び＋製品写真5枚の横一列）
 * .ksg-strength-cards   - つよみ3カード（見出し左に金の縦線）
 * .ksg-pagelink         - 下層ページ間の2分割リンク
 * .ksg-faq              - よくあるご質問（details/summary のQ&A開閉）
 * .ksg-form             - お問い合わせフォーム（ROS CMS 出力を #cms-contact-1-1-area で上書き）
 * .ksg-page-top         - ページトップボタン（角丸ゼロ）
 * .ksg-reveal           - TOPのスクロールフェードアップ（JSが付与・is-inview で表示）
 *
 * ======================================
 * 共通SCSSに不足していたもの
 * ======================================
 *
 * ・値の粒度不足：本文が 14.5 / 15.5 / 16.5px、見出し英字が 72px / 140px と
 *   0.5px 刻み・非定型サイズのため fz-* utility では到達できない。行間も
 *   2.05 / 2.15 / 2.4 と細かく、lh-* の 7 段階では表現できない。
 * ・構造不足：ヘッダーが「ロゴ行＋全幅ナビ行」の2段構成。共通 header は
 *   1行（inner 内に nav）前提のため、ナビ行を別要素として組み直した。
 * ・構造不足：私たちについて／事業内容が calc((100% - 1200px)/2 + 600px) で
 *   画像を画面端まで抜く非対称グリッド。container / column2 では組めない。
 *   さらに画像の片側を clip-path で斜めに切り落としている。
 * ・装飾パターン不足：セクション見出しが「英字72px＋日本語16px」の左寄せ2段。
 *   heading は en 5rem / ja 2.2rem 固定で、utility でも 72px に届かない。
 * ・装飾パターン不足：1px の gap を背景色で見せる罫線グリッド（選ばれる理由）。
 *   grid-4 は gap:20px 固定。
 * ・状態不足：リンクのホバーがブラウン（#6E4B2E）への色変化のみで、
 *   共通 base の a:hover{opacity:.8} と競合するため打ち消しが必要。
 *
 */

/* ==========================================================================
   共通の土台
   ========================================================================== */
.ksg-wrapper {
  min-width: 1280px;
  /* ウィンドウが 1280px より狭い時は common.js で zoom を掛けて幅いっぱいに縮小表示する（横スクロールは出さない） */
}

/* デザイン元のリンクは「ブラウンに色が変わるだけ」。共通 base の opacity 変化を打ち消す */
a:hover {
  opacity: 1;
  color: #6E4B2E;
}

img {
  display: block;
}

/* ==========================================================================
   ヘッダー
   ========================================================================== */
.ksg-header {
  z-index: 20;
  background: #fff;
}

.ksg-header__top {
  max-width: 1200px;
  height: auto;
  padding: 18px 0;
}

/* -- ロゴ（テキスト） */
.ksg-logo {
  display: flex;
  align-items: baseline;
  gap: 12px;
  text-decoration: none;
}
.ksg-logo__name {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #073D00;
}
.ksg-logo__en {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  color: #8C9489;
  white-space: nowrap;
}

/* -- 右側（電話） */
.ksg-header__right {
  gap: 26px;
  height: auto;
}
.ksg-header__tel-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ksg-header__tel {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #073D00;
  text-decoration: none;
  white-space: nowrap;
}
.ksg-header__tel:hover {
  color: #073D00;
}
.ksg-header__tel-note {
  font-size: 11px;
  color: #5A625A;
  letter-spacing: .06em;
}

/* -- グローバルナビ（全幅の帯） */
.ksg-gnav {
  border-top: 1px solid #E2E5E0;
  border-bottom: 1px solid #E2E5E0;
}
.ksg-gnav__list {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
}
.ksg-gnav__item {
  display: flex;
  flex: 1;
  border-left: 1px solid #E2E5E0;
}
.ksg-gnav__item:last-child {
  border-right: 1px solid #E2E5E0;
}
/* 欧文（TOP）と和文で normal の行高が違い、背景色が帯の下端まで届かず
   数px の隙間ができるため、リンクを項目いっぱいに伸ばして中央寄せする */
.ksg-gnav__link {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 19px 0;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .1em;
  color: #20261F;
  text-decoration: none;
  transition: background .3s ease;
}
.ksg-gnav__link:hover {
  background: #EAF2E7;
  color: #20261F;
}
/* 現在地はホバーしてもメインカラーのまま（hover より後に書いて上書きする） */
.ksg-gnav__link.is-current {
  background: #0D5900;
  color: #fff;
}

/* -- SPナビ下部の電話 */
.ksg-sp-nav__tel {
  display: inline-block;
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .04em;
}
.ksg-sp-nav__tel:hover {
  color: #fff;
}

/* ==========================================================================
   セクション見出し（英字＋日本語の2段）
   ========================================================================== */
.ksg-shead__en {
  display: block;
  font-size: 72px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.01em;
  color: #073D00;
}
.ksg-shead__ja {
  display: block;
  margin-top: 10px;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: .14em;
  color: #3E463D;
}
.ksg-shead--center {
  text-align: center;
}
.ksg-shead--gold .ksg-shead__en {
  color: #C6A97E;
}
.ksg-shead--white .ksg-shead__ja {
  color: #fff;
}
.ksg-shead--white .ksg-shead__en {
  color: #fff;
}

/* ==========================================================================
   共通パーツ：リンク・ボタン
   ========================================================================== */
.ksg-link-arrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 300px;
  padding-bottom: 18px;
  border-bottom: 1px solid #C8CDC6;
  font-size: 19px;
  color: #073D00;
  text-decoration: none;
  transition: border-color .3s ease;
}
.ksg-link-arrow:hover {
  border-bottom-color: #0D5900;
  color: #073D00;
}
.ksg-link-arrow__circle {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #0D5900;
  color: #fff;
  font-size: 13px;
}

.ksg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: none;
  transition: background .3s ease, color .3s ease;
  white-space: nowrap;
}
.ksg-btn--solid {
  padding: 16px 34px;
  background: #0D5900;
  color: #fff;
}
.ksg-btn--solid:hover {
  background: #073D00;
  color: #fff;
}
.ksg-btn--outline {
  padding: 16px 30px;
  border: 1px solid #0D5900;
  color: #0D5900;
  letter-spacing: .06em;
}
.ksg-btn--outline:hover {
  background: #EAF2E7;
  color: #0D5900;
}

/* ==========================================================================
   TOP：メインビュー
   ========================================================================== */
/* デザイン元と同じ 620px 固定。CMSスライダーはこの外枠に高さを合わせる */
/* ヘッダー（140px）を除いた画面いっぱいの高さ。スマホ（縦向き）は 50vh
   ※ viewport は width=1280 固定のため、幅ではなく向きで判定する */
.ksg-mv {
  position: relative;
  height: calc(100vh - 140px);
  overflow: hidden;
  background: #073D00;
}
@media (orientation: portrait) {
  .ksg-mv {
    height: 50vh;
  }
}
.ksg-mv__slideshow {
  position: absolute;
  inset: 0;
  height: 100%;
}
.ksg-mv__slideshow .swiper-slide,
.ksg-mv__slideshow .main_slider__inner {
  height: 100%;
}
.ksg-mv__slideshow img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* CMSスライダーの既定は 98vh。メインビューの高さに合わせる
   （#cms-slider-1-1-area → #main_slider と高さを継がせる） */
.ksg-mv__slideshow #cms-slider-1-1-area {
  height: 100%;
}
.ksg-mv .ksg-mv__slideshow #main_slider.slider_wrapper {
  --swiper-wrapper-height: 100%;
  height: 100%;
}
/* キャッチは container（1200px）の左端にそろえる */
.ksg-mv__inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding-bottom: 64px;
}
.ksg-mv__catch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 41px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .02em;
  color: #0D5900;
}
.ksg-mv__catch-line {
  background: #fff;
  padding: 16px 28px;
}

/* ==========================================================================
   TOP：新着情報
   ========================================================================== */
.ksg-news {
  background: #F5F4F1;
  padding: 64px 0;
}
.ksg-news__inner {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.ksg-news__list {
  border-top: 1px solid #DCDDD8;
}
/* CMS が出力する1行は <li> 直下に日付＋タイトル（リンクなし）。
   共通 blog-list は __link に横並びを持たせているため、__item 側で組み直す */
.ksg-news__list .blog-list__item {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  padding: 22px 8px;
  border-bottom: 1px solid #DCDDD8;
  color: #20261F;
}
.ksg-news__list .blog-list__date {
  font-size: 13px;
  letter-spacing: .08em;
  color: #5A625A;
  line-height: normal;
}
.ksg-news__list .blog-list__title {
  font-size: 15px;
  font-weight: 400;
  line-height: normal;
}

/* ==========================================================================
   TOP：私たちについて
   ========================================================================== */
.ksg-about {
  padding: 170px 0 160px;
  background: #fff;
  border-bottom: 1px solid #E2E5E0;
  overflow: hidden;
}
/* 本文は container 内・写真は画面右端まで抜ける非対称2カラム */
.ksg-about__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc((100% - 1200px) / 2 + 680px);
  gap: 60px;
  align-items: center;
  padding-left: calc((100% - 1200px) / 2);
}
/* 写真の左辺を斜めに切り落とす */
.ksg-about__img {
  clip-path: polygon(170px 0, 100% 0, 100% 100%, 0 100%);
}
.ksg-about__img img {
  display: block;
  width: 100%;
  height: 570px;
  object-fit: cover;
}
.ksg-about__text {
  margin-top: 56px;
}
.ksg-about__text p {
  font-size: 16.5px;
  line-height: 2.4;
  color: #3E463D;
  text-wrap: pretty;
}
.ksg-about__text p + p {
  margin-top: 34px;
}
.ksg-about .ksg-link-arrow {
  margin-top: 60px;
}

/* ==========================================================================
   TOP：事業内容
   ========================================================================== */
.ksg-service {
  position: relative;
  padding: 130px 0 130px;
  background: #fff;
  overflow: hidden;
}
/* 写真は画面左端まで抜き、本文を container 内に置いた非対称2カラム */
.ksg-service__inner {
  display: grid;
  grid-template-columns: calc((100% - 1200px) / 2 + 680px) minmax(0, 1fr);
  gap: 60px;
  align-items: center;
  padding-right: calc((100% - 1200px) / 2);
}
/* 写真の右辺を斜めに切り落とす（About と同じ角度） */
.ksg-service__img {
  clip-path: polygon(0 0, 100% 0, calc(100% - 170px) 100%, 0 100%);
}
.ksg-service .ksg-shead {
  margin-bottom: 74px;
}
.ksg-service__lead {
  margin-bottom: 18px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: .03em;
  color: #0D5900;
  text-wrap: pretty;
}
.ksg-service__text {
  margin-bottom: 56px;
  font-size: 15.5px;
  line-height: 2.15;
  color: #3E463D;
  text-wrap: pretty;
}
.ksg-service__img img {
  display: block;
  width: 100%;
  height: 610px;
  object-fit: cover;
}

/* ==========================================================================
   TOP：選ばれる理由
   ========================================================================== */
.ksg-reason {
  position: relative;
  padding: 104px 0 110px;
  background: #F5F4F1;
  overflow: hidden;
}
/* セクション全面に写真をごく薄く敷く（透かし） */
.ksg-reason__bg {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  opacity: .4;
  pointer-events: none;
}
.ksg-reason__inner {
  position: relative;
}
.ksg-reason .ksg-shead {
  margin-bottom: 64px;
}
.ksg-reason .ksg-shead__ja {
  margin-bottom: 12px;
}
.ksg-reason__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: #DCDDD8;
}
.ksg-reason__card {
  background: #fff;
  padding: 40px 26px 44px;
}
.ksg-reason__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  margin: 0 auto 18px;
  font-size: 32px;
  line-height: 1;
  color: #0D5900;
}
.ksg-reason__title {
  margin-bottom: 18px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #073D00;
  text-align: center;
  white-space: nowrap;
}
.ksg-reason__text {
  font-size: 14.5px;
  line-height: 2;
  color: #3E463D;
  text-wrap: pretty;
}

/* ==========================================================================
   TOP：下層ページバナー
   ========================================================================== */
.ksg-bnr {
  padding: 100px 0;
}
.ksg-bnr__grid {
  gap: 20px;
}
.ksg-bnr__item {
  display: block;
  height: 340px;
  color: #fff;
  transition: opacity .3s ease;
}
.ksg-bnr__item:hover {
  opacity: .92;
  color: #fff;
}
.ksg-bnr__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ksg-bnr__item:hover .ksg-bnr__img {
  transform: none;
}
.ksg-bnr__overlay {
  background: linear-gradient(165deg, rgba(7, 61, 0, .5) 0%, rgba(7, 61, 0, .15) 50%, rgba(7, 61, 0, .5) 100%);
}
.ksg-bnr__item--lead .ksg-bnr__overlay {
  background: linear-gradient(165deg, rgba(7, 61, 0, .55) 0%, rgba(7, 61, 0, .18) 45%, rgba(7, 61, 0, .55) 100%);
}
.ksg-bnr__title {
  left: 30px;
  top: 28px;
  display: block;
}
.ksg-bnr__item--lead .ksg-bnr__title {
  left: 36px;
  top: 34px;
}
.ksg-bnr__title-ja {
  display: block;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .1em;
}
.ksg-bnr__item--lead .ksg-bnr__title-ja {
  font-size: 28px;
}
.ksg-bnr__title-en {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .86);
}
.ksg-bnr__item--lead .ksg-bnr__title-en {
  font-size: 13.5px;
}
.ksg-bnr__arrow {
  right: 26px;
  bottom: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .85);
  background: transparent;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.ksg-bnr__item--lead .ksg-bnr__arrow {
  right: 30px;
  bottom: 28px;
  width: 44px;
  height: 44px;
  font-size: 13px;
}

/* ==========================================================================
   TOP：お問い合わせ帯
   ========================================================================== */
.ksg-cta {
  position: relative;
  height: 450px;
  background: linear-gradient(100deg, #073D00 0%, #0D5900 55%, #1A7A0C 100%);
  overflow: hidden;
}
.ksg-cta__watermark {
  position: absolute;
  left: calc((100% - 1200px) / 2);
  top: 50%;
  transform: translateY(-50%);
  font-size: 140px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: rgba(255, 255, 255, .16);
  white-space: nowrap;
  pointer-events: none;
}
.ksg-cta__inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}
.ksg-cta__body {
  width: 520px;
}
.ksg-cta__text {
  margin-bottom: 18px;
  font-size: 15.5px;
  line-height: 2.1;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .94);
  text-wrap: pretty;
}
.ksg-cta__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .55);
  font-size: 38px;
  color: #fff;
  text-decoration: none;
  transition: border-color .3s ease;
}
.ksg-cta__link:hover {
  border-bottom-color: #fff;
  color: #fff;
}
.ksg-cta__circle {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  color: #0D5900;
  font-size: 15px;
}
.ksg-cta__tel {
  margin-top: 26px;
  font-size: 14px;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .84);
}
.ksg-cta__tel a {
  margin-left: 10px;
  font-size: 19px;
  letter-spacing: .04em;
  color: #fff;
}
.ksg-cta__tel a:hover {
  color: #fff;
}

/* ==========================================================================
   フッター
   ========================================================================== */
.ksg-footer {
  background: #F5F4F1;
}
.ksg-footer__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}
.ksg-footer__info {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 72px 60px 72px 0;
}
.ksg-footer__info-inner {
  width: 540px;
}
.ksg-footer__name {
  margin-bottom: 10px;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #073D00;
}
.ksg-footer__en {
  margin-bottom: 26px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  color: #8C9489;
}
.ksg-footer__address {
  margin-bottom: 22px;
  font-size: 14.5px;
  line-height: 2;
  color: #3E463D;
}
.ksg-footer__btns {
  display: flex;
  gap: 14px;
  margin-bottom: 34px;
}
.ksg-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
}
.ksg-footer__nav a {
  font-size: 13.5px;
  letter-spacing: .06em;
  color: #3E463D;
  text-decoration: none;
}
.ksg-footer__nav a:hover {
  color: #0D5900;
}
.ksg-footer__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 380px;
  border: 0;
}
.ksg-footer__bottom {
  background: #073D00;
  padding: 22px 0;
}
.ksg-footer__copyright {
  font-size: 12px;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .72);
}

/* ==========================================================================
   下層共通：ページヒーロー／パンくず
   ========================================================================== */
.ksg-page-hero {
  height: 340px;
  overflow: visible;
  background: #073D00;
}
/* 写真はそのまま見せる（共通の暗幕・緑グラデは使わない） */
.ksg-page-hero__overlay {
  display: none;
}
.ksg-page-hero__content {
  justify-content: flex-end;
  align-items: flex-start;
  height: 100%;
}
/* 左下の見出しパネル。下端を少しだけ写真からはみ出させる */
.ksg-page-hero__box {
  transform: translateY(14px);
  padding: 20px 65px;
  background: #0D5900;
}
.ksg-page-hero__en {
  font-size: 55px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.01em;
  color: #fff;
}
.ksg-page-hero__ja {
  margin: 10px 0 0;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: .14em;
  color: #fff;
}

/* ==========================================================================
   会社概要：代表メッセージ
   ========================================================================== */
.ksg-msg {
  padding: 110px 0 100px;
  background: #fff;
}
/* 写真なしの1カラム。本文は読みやすい幅に収める */
.ksg-msg__inner {
  max-width: 900px;
}
.ksg-msg .ksg-shead__ja {
  margin-bottom: 34px;
}
.ksg-msg__title {
  margin-bottom: 34px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: .02em;
  color: #20261F;
  text-wrap: pretty;
}
.ksg-msg__text p {
  font-size: 16px;
  line-height: 2.15;
  color: #3E463D;
  text-wrap: pretty;
}
.ksg-msg__text p + p {
  margin-top: 26px;
}
.ksg-msg__sign {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid #E2E5E0;
}
.ksg-msg__sign-role {
  font-size: 13px;
  letter-spacing: .1em;
  color: #5A625A;
}
.ksg-msg__sign-name {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #073D00;
}

/* ==========================================================================
   会社概要：わたしたちが選ばれてきた理由
   ========================================================================== */
.ksg-strengths {
  position: relative;
  padding: 110px 0;
  background: #073D00;
  overflow: hidden;
}
.ksg-strengths__bg {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 50%;
  background-size: cover;
  background-position: center;
  opacity: .22;
  pointer-events: none;
}
.ksg-strengths__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.ksg-strengths__title {
  margin-bottom: 30px;
  padding-left: 24px;
  border-left: 1px solid rgba(198, 169, 126, .5);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.8;
  color: #fff;
  text-wrap: pretty;
}
.ksg-strengths__text p {
  font-size: 15.5px;
  line-height: 2.15;
  color: rgba(255, 255, 255, .92);
  text-wrap: pretty;
}
.ksg-strengths__text p + p {
  margin-top: 24px;
}

/* ==========================================================================
   会社概要：会社情報
   ========================================================================== */
.ksg-cominfo {
  padding: 100px 0;
  background: #fff;
}
.ksg-cominfo .ksg-shead__ja {
  margin-bottom: 52px;
}
.ksg-cominfo__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.ksg-cominfo__label {
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 2px solid #0D5900;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #073D00;
}
.ksg-cominfo__label--history {
  margin-bottom: 26px;
}
.ksg-cominfo__table th,
.ksg-cominfo__table td {
  padding: 20px 24px;
  border: none;
  border-bottom: 1px solid #E2E5E0;
  vertical-align: top;
}
.ksg-cominfo__table tr:last-child th,
.ksg-cominfo__table tr:last-child td {
  border-bottom: none;
}
.ksg-cominfo__table th {
  width: 150px;
  background: #0D5900;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-align: left;
}
.ksg-cominfo__table td {
  font-size: 14.5px;
  line-height: 1.9;
  color: #3E463D;
}

/* -- 沿革 */
.ksg-history {
  border-left: 1px solid #DCDDD8;
}
.ksg-history__row {
  position: relative;
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 24px;
  padding: 0 0 34px 32px;
}
.ksg-history__row:last-child {
  padding-bottom: 0;
}
.ksg-history__row::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 8px;
  width: 9px;
  height: 9px;
  background: #0D5900;
}
.ksg-history__row--tbd::before {
  background: #C6A97E;
}
.ksg-history__year {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #073D00;
}
.ksg-history__text {
  font-size: 14.5px;
  line-height: 2;
  color: #3E463D;
}
.ksg-history__row--tbd .ksg-history__year,
.ksg-history__row--tbd .ksg-history__text {
  color: #8C9489;
}

/* ==========================================================================
   事業内容：ご要望
   ========================================================================== */
.ksg-needs {
  padding: 100px 0;
}
.ksg-needs__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 530px;
  gap: 70px;
  align-items: center;
}
/* 見出しの左に縦線のあしらい（.ksg-strengths__title と同じ作法） */
.ksg-needs__title {
  margin-bottom: 38px;
  padding-left: 24px;
  border-left: 3px solid #C6A97E;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .02em;
  color: #20261F;
  text-wrap: pretty;
}
.ksg-needs__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
/* 1項目ずつを四角い枠で囲う（角丸ゼロ） */
.ksg-needs__list li {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #C8CDC6;
  padding: 22px 24px;
  font-size: 15.5px;
  font-weight: 500;
  color: #20261F;
}
.ksg-needs__list i {
  flex: none;
  margin-right: 12px;
  font-size: 22px;
  color: #0D5900;
}
.ksg-needs__img img {
  width: 100%;
  height: 420px;
  object-fit: cover;
}

/* ==========================================================================
   事業内容：パネル製造
   ========================================================================== */
.ksg-biz {
  padding: 110px 0 100px;
  background: #F5F4F1;
}
/* 見出しは中央揃えで上に置き、本文はその下に全幅で流す */
.ksg-biz__inner,
.ksg-product__head {
  display: block;
}
.ksg-biz__inner > .ksg-shead {
  margin-bottom: 44px;
}
/* 左に写真、右に本文の2カラム */
.ksg-biz__cols {
  display: grid;
  grid-template-columns: 460px minmax(0, 1fr);
  gap: 56px;
  align-items: stretch;
}
.ksg-biz__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ksg-biz__title {
  margin-bottom: 20px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .03em;
  color: #073D00;
}
.ksg-biz__text {
  font-size: 16.5px;
  line-height: 2.15;
  color: #3E463D;
  text-wrap: pretty;
}
.ksg-biz__text--lead {
  margin-bottom: 26px;
}
.ksg-biz__text--close {
  margin-top: 30px;
}
/* 対応している工程：白パネル＋左の緑ライン、番号付きの3行 */
.ksg-biz__spec {
  margin-top: 30px;
  padding: 26px 32px 28px;
  background: #fff;
  border-left: 4px solid #0D5900;
}
.ksg-biz__spec-label {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid #E2E5E0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #073D00;
}
.ksg-biz__spec-label-en {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  color: #C6A97E;
  text-transform: uppercase;
}
.ksg-biz__spec-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid #EDEFEB;
}
.ksg-biz__spec-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.ksg-biz__spec-num {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: #0D5900;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
}
.ksg-biz__spec-text {
  font-size: 15.5px;
  line-height: 1.8;
  color: #3E463D;
  text-wrap: pretty;
}

/* ==========================================================================
   事業内容：取り扱い製品
   ========================================================================== */
.ksg-product {
  padding: 100px 0 110px;
}
.ksg-product__head {
  margin-bottom: 48px;
}
/* 製品写真は横3枚ずつ（余った行は中央寄せ） */
.ksg-product__photos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 48px;
}
.ksg-product__photo {
  flex: 0 0 calc((100% - 40px) / 3);
}
/* クリックで拡大するのでボタンで包む（見た目は画像のみ） */
.ksg-product__photo-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.ksg-product__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: opacity .3s ease;
}
.ksg-product__photo-btn:hover img {
  opacity: .82;
}

/* 2製品を横並びで掲載（写真なし） */
.ksg-product__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  align-items: stretch;
}
.ksg-product__item {
  display: flex;
}
.ksg-product__body {
  flex: 1;
  padding: 42px 38px;
  background: #EAF2E7;
}
.ksg-product__item--02 .ksg-product__body {
  background: #F3EEE8;
}
.ksg-product__num {
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  color: #C6A97E;
}
.ksg-product__item--02 .ksg-product__num {
  color: #A98657;
}
.ksg-product__title {
  margin-bottom: 18px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #073D00;
}
.ksg-product__text {
  font-size: 15px;
  line-height: 2.05;
  color: #3E463D;
  text-wrap: pretty;
}
/* ==========================================================================
   事業内容：当社のつよみ
   ========================================================================== */
.ksg-strength-cards {
  position: relative;
  padding: 104px 0;
  background: linear-gradient(150deg, #073D00 0%, #0D5900 60%, #1A7A0C 100%);
  overflow: hidden;
}
/* 背景写真はセクション全面に敷く */
.ksg-strength-cards__bg {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  opacity: .26;
  pointer-events: none;
}
.ksg-strength-cards__inner {
  position: relative;
}
.ksg-strength-cards .ksg-shead__ja {
  margin-bottom: 46px;
}
.ksg-strength-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.ksg-strength-cards__card {
  padding: 44px 34px 48px;
  background: #fff;
}
/* 見出しの左に縦線のあしらい（.ksg-needs__title と同じ作法） */
.ksg-strength-cards__title {
  margin-bottom: 20px;
  padding-left: 18px;
  border-left: 3px solid #C6A97E;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .03em;
  color: #073D00;
}
.ksg-strength-cards__text {
  font-size: 14.5px;
  line-height: 2.05;
  color: #3E463D;
  text-wrap: pretty;
}

/* ==========================================================================
   下層ページ間リンク（2分割）
   ========================================================================== */
.ksg-pagelink {
  padding: 90px 0;
}
.ksg-pagelink__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}
.ksg-pagelink__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 44px;
  border: 1px solid #DCDDD8;
  color: #20261F;
  text-decoration: none;
  transition: border-color .3s ease, background .3s ease;
}
.ksg-pagelink__item:hover {
  border-color: #0D5900;
  background: #F5F4F1;
  color: #20261F;
}
.ksg-pagelink__item--cta {
  border: 1px solid #0D5900;
  background: #0D5900;
  color: #fff;
}
.ksg-pagelink__item--cta:hover {
  background: #073D00;
  border-color: #073D00;
  color: #fff;
}
.ksg-pagelink__en {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  color: #C6A97E;
}
.ksg-pagelink__ja {
  display: block;
  margin-top: 10px;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #073D00;
}
.ksg-pagelink__item--cta .ksg-pagelink__ja {
  color: #fff;
}
.ksg-pagelink__view {
  font-size: 13px;
  letter-spacing: .14em;
  color: #0D5900;
  white-space: nowrap;
}
.ksg-pagelink__item--cta .ksg-pagelink__view {
  color: rgba(255, 255, 255, .9);
}

/* ==========================================================================
   よくあるご質問
   ========================================================================== */
.ksg-faq-intro {
  padding: 80px 0 20px;
}
/* イラストを左・本文を右に置く */
.ksg-faq-intro__inner {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.ksg-faq-intro__title {
  margin-bottom: 20px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: .02em;
  color: #20261F;
  text-wrap: pretty;
}
.ksg-faq-intro__text {
  font-size: 15.5px;
  line-height: 2.1;
  color: #3E463D;
  text-wrap: pretty;
}
.ksg-faq-intro__deco {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 240px;
}
.ksg-faq-intro__deco img {
  width: auto;
  height: 100%;
  object-fit: contain;
}

.ksg-faq {
  padding: 70px 0 0;
}
.ksg-faq--last {
  padding: 70px 0 100px;
}
.ksg-faq__cat {
  margin-bottom: 8px;
  padding-bottom: 16px;
  border-bottom: 2px solid #0D5900;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #073D00;
}
.ksg-faq__item {
  border-bottom: 1px solid #E2E5E0;
}
.ksg-faq__q {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 28px 8px;
  list-style: none;
  cursor: pointer;
}
.ksg-faq__q::-webkit-details-marker {
  display: none;
}
.ksg-faq__q-mark {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: #0D5900;
}
.ksg-faq__q-text {
  flex: 1;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.7;
  color: #20261F;
}
.ksg-faq__icon {
  position: relative;
  display: block;
  flex: none;
  width: 16px;
  height: 16px;
  transition: transform .2s;
}
.ksg-faq__icon::before,
.ksg-faq__icon::after {
  content: "";
  position: absolute;
  background: #0D5900;
}
.ksg-faq__icon::before {
  left: 0;
  top: 7px;
  width: 16px;
  height: 2px;
}
.ksg-faq__icon::after {
  left: 7px;
  top: 0;
  width: 2px;
  height: 16px;
}
.ksg-faq__item[open] .ksg-faq__icon {
  transform: rotate(45deg);
}
.ksg-faq__a {
  display: flex;
  gap: 20px;
  padding: 0 8px 32px 0;
  background: #F5F4F1;
}
.ksg-faq__a-mark {
  padding: 28px 0 0 24px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: #C6A97E;
}
.ksg-faq__a-text {
  padding: 26px 24px 0 0;
  font-size: 15.5px;
  line-height: 2.1;
  color: #3E463D;
  text-wrap: pretty;
}
.ksg-faq__tbd {
  display: block;
  margin-top: 10px;
  font-size: 12.5px;
  color: #6E4B2E;
}
.ksg-faq__box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-top: 60px;
  padding: 52px 56px;
  background: #EAF2E7;
}
.ksg-faq__box-title {
  margin-bottom: 12px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.7;
  color: #073D00;
  text-wrap: pretty;
}
.ksg-faq__box-text {
  font-size: 15px;
  line-height: 2;
  color: #3E463D;
}
.ksg-faq__box .ksg-btn {
  flex: none;
  padding: 20px 46px;
  font-size: 15px;
}

/* ==========================================================================
   お問い合わせ
   ========================================================================== */
.ksg-contact {
  padding: 90px 0 110px;
}
.ksg-contact .ksg-shead {
  margin-bottom: 44px;
}
.ksg-contact__lead {
  margin-bottom: 16px;
  text-align: center;
  font-size: 16.5px;
  line-height: 2.15;
  color: #3E463D;
  text-wrap: pretty;
}
.ksg-contact__note {
  display: block;
  width: fit-content;
  margin: 0 auto 50px;
  padding: 16px 20px;
  background: #EAF2E7;
  font-size: 13.5px;
  line-height: 2;
  color: #0D5900;
  text-align: center;
  text-wrap: pretty;
}

/* フォームは本文よりやや狭い幅で中央に置く */
.ksg-form {
  max-width: 840px;
  margin: 0 auto;
}

/* ROS CMS のお問い合わせフォーム（cms_id=7 / design_pattern=1）の見た目をサイトに合わせる。
   CMS側の mail-form.css は本文中で後から読み込まれるため、ID セレクタで確実に上書きする */
#cms-contact-1-1-area .form-contents {
  background: transparent;
}
#cms-contact-1-1-area dl {
  border-top: 1px solid #E2E5E0;
}
#cms-contact-1-1-area dt {
  width: 220px;
  padding: 26px 0 0;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: .04em;
  color: #20261F;
}
#cms-contact-1-1-area dd {
  padding: 22px 0 26px 220px;
  border-bottom: 1px solid #E2E5E0;
}
/* 必須・任意のラベル（CMS側は ::before で出している） */
#cms-contact-1-1-area dt span::before {
  top: -1px;
  margin-right: 12px;
  padding: 4px 8px;
  border-radius: 0;
  font-size: 10.5px;
  letter-spacing: .1em;
}
#cms-contact-1-1-area dt span.required::before {
  background: #6E4B2E;
}
#cms-contact-1-1-area dt span.optional::before {
  background: #8C9489;
}
#cms-contact-1-1-area .textarea,
#cms-contact-1-1-area .textarea-serect {
  width: 100%;
  padding: 16px 18px;
  border: 1px solid #DCDDD8;
  border-radius: 0;
  background: #FAFAF8;
  font-family: inherit;
  font-size: 15px;
  color: #20261F;
}
#cms-contact-1-1-area textarea.textarea {
  padding: 18px;
  line-height: 1.9;
  resize: vertical;
}
#cms-contact-1-1-area .textarea:focus {
  outline: 2px solid #0D5900;
  outline-offset: -2px;
  border-color: #DCDDD8;
}
#cms-contact-1-1-area .submit-btn {
  width: 320px;
  margin: 52px auto 0;
  padding: 23px 0;
  border: 0;
  border-radius: 0;
  background: #0D5900;
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .1em;
  transition: background .3s ease;
}
#cms-contact-1-1-area .submit-btn:hover {
  background: #073D00;
}
#cms-contact-1-1-area .submit-btn::before {
  background-color: #fff;
}
/* 送信完了・エラーメッセージ */
#cms-contact-1-1-area .form-thanks-msg {
  padding: 48px 40px;
  border: 1px solid #DCDDD8;
  text-align: center;
  font-size: 16px;
  line-height: 2.15;
  color: #3E463D;
}
#cms-contact-1-1-area .form-thanks-msg .back-home-btn a {
  display: inline-block;
  margin-top: 26px;
  padding: 18px 48px;
  border: 1px solid #0D5900;
  border-radius: 0;
  background: #fff;
  color: #0D5900;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: .08em;
}
#cms-contact-1-1-area .form-thanks-msg .back-home-btn a:hover {
  background: #0D5900;
  color: #fff;
}
#cms-contact-1-1-area .form-err-msg {
  margin-bottom: 26px;
  padding: 18px 22px;
  border: 1px solid #C33;
  color: #C33;
  font-size: 14px;
  line-height: 1.9;
}

/* ==========================================================================
   ページトップボタン
   ========================================================================== */
.ksg-page-top__link {
  border-radius: 0;
  background: #073D00;
  color: #fff;
}
.ksg-page-top__link:hover {
  background: #0D5900;
  color: #fff;
}

/* ==========================================================================
   TOP：アニメーション
   ・メインビューのキャッチは読み込み時に下からフェードイン
   ・以降のセクションはスクロールでフェードアップ（JSが .ksg-reveal を付与）
   ========================================================================== */
/* 白帯が左から開き、そのあと文字が一文字ずつ流れて出てくる
   （文字の分割はJS。JSが動かない環境では帯が開いて文字はそのまま出る） */
@keyframes ksg-mv-wipe {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
.ksg-mv__catch-line {
  animation: ksg-mv-wipe .7s cubic-bezier(.22, .61, .36, 1) both;
}
.ksg-mv__catch-line:nth-child(1) { animation-delay: .15s; }
.ksg-mv__catch-line:nth-child(2) { animation-delay: .5s; }
@keyframes ksg-mv-char {
  from { opacity: 0; transform: translateY(.45em); }
  to   { opacity: 1; transform: none; }
}
.ksg-mv__char {
  display: inline-block;
  animation: ksg-mv-char .5s cubic-bezier(.22, .61, .36, 1) both;
  animation-delay: var(--ksg-char-delay, 0s);
}

.ksg-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--ksg-reveal-delay, 0s);
  will-change: opacity, transform;
}
.ksg-reveal.is-inview {
  opacity: 1;
  transform: none;
}
/* 写真は画面の外に抜けている側から横に滑り込ませる */
.ksg-reveal--from-right {
  transform: translateX(120px);
  transition-duration: 1.1s;
}
.ksg-reveal--from-left {
  transform: translateX(-120px);
  transition-duration: 1.1s;
}
.ksg-reveal--from-right.is-inview,
.ksg-reveal--from-left.is-inview {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .ksg-mv__catch-line,
  .ksg-mv__char { animation: none; }
  .ksg-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   画像の拡大表示（ライトボックス：事業内容の製品写真）
   ========================================================================== */
.ksg-lightbox {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px 80px;
  background: rgba(7, 61, 0, .9);
}
.ksg-lightbox[hidden] {
  display: none;
}
.ksg-lightbox__img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.ksg-lightbox__btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .5);
  background: transparent;
  color: #fff;
  font-size: 17px;
  cursor: pointer;
  transition: background .3s ease;
}
.ksg-lightbox__btn:hover {
  background: rgba(255, 255, 255, .16);
}
.ksg-lightbox__btn--close {
  top: 24px;
  right: 24px;
}
.ksg-lightbox__btn--prev {
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}
.ksg-lightbox__btn--next {
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}