/*
Theme Name: 杉本装業
Theme URI:
Description: 杉本装業 子テーマ。親テーマ: Lightning
Author: 杉本装業
Template: lightning
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: sugimoto-sogyou
*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;800&display=swap');

/* === 共通 === */
.sugimoto-site { color:#222; background:#ededed; font-family:"Noto Sans JP",sans-serif; }
.sugimoto-site * { box-sizing:border-box; }
.sugimoto-site img { max-width:100%; height:auto; }

/* === ヘッダー === */
.sg-header { position:sticky; top:0; z-index:100; background:#fff; border-bottom:1px solid rgba(0,0,0,.06); padding:0 7vw; display:flex; align-items:center; justify-content:space-between; height:68px; }
.sg-header__logo { font-weight:800; font-size:20px; color:#111; text-decoration:none; letter-spacing:.04em; }
.sg-header__logo span { color:#81D8D0; }
.sg-nav { display:flex; gap:32px; list-style:none; margin:0; padding:0; }
.sg-nav a { text-decoration:none; color:#333; font-size:14px; font-weight:700; transition:color .2s; }
.sg-nav a:hover { color:#81D8D0; }
.sg-header__cta { background:#81D8D0; color:#111 !important; padding:9px 20px; border-radius:999px; font-size:13px !important; }
.sg-hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:4px; }
.sg-hamburger span { display:block; width:24px; height:2px; background:#222; border-radius:2px; transition:all .3s; }

/* === 共通パーツ === */
.sg-label { color:#81D8D0; font-size:13px; font-weight:700; letter-spacing:.18em; margin-bottom:14px; display:block; }
.sg-section-head { margin-bottom:42px; }
.sg-section-head h2 { font-size:clamp(30px,4vw,48px); line-height:1.35; margin:0 0 16px; }
.sg-section-head p { line-height:2; color:#555; }

/* === ボタン === */
.sg-btn { display:inline-flex; align-items:center; justify-content:center; min-width:190px; padding:15px 28px; border-radius:999px; text-decoration:none; font-weight:700; transition:opacity .2s; font-family:"Noto Sans JP",sans-serif; }
.sg-btn:hover { opacity:.8; }
.sg-btn--main { background:#81D8D0; color:#111; }
.sg-btn--sub { background:#fff; color:#111; border:1px solid #ddd; }
.sg-btn--outline { background:transparent; color:#fff; border:2px solid #81D8D0; }

/* === パンくず === */
.sg-breadcrumb { padding:16px 7vw; font-size:13px; color:#888; background:#f5f5f5; border-bottom:1px solid #e8e8e8; }
.sg-breadcrumb a { color:#555; text-decoration:none; }
.sg-breadcrumb a:hover { color:#81D8D0; }
.sg-breadcrumb span { margin:0 6px; }

/* === ページヒーロー === */
.sg-page-hero { padding:80px 7vw 60px; background:linear-gradient(135deg,#ededed 0%,#ffffff 100%); border-bottom:1px solid #e0e0e0; }
.sg-page-hero .sg-label { margin-bottom:10px; }
.sg-page-hero h1 { font-size:clamp(32px,4.5vw,56px); line-height:1.25; margin:0 0 16px; }
.sg-page-hero p { color:#555; line-height:2; max-width:600px; }

/* === トップ ヒーロー === */
.sg-hero { min-height:88vh; display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; padding:90px 7vw; background:linear-gradient(135deg,#ededed 0%,#ffffff 100%); }
.sg-hero h1 { font-size:clamp(36px,5vw,68px); line-height:1.18; margin:0 0 28px; letter-spacing:.04em; }
.sg-hero > div > p { line-height:2; font-size:16px; color:#555; }
.sg-hero__image img { width:100%; height:520px; object-fit:cover; border-radius:32px; box-shadow:24px 24px 0 #81D8D0; }
.sg-hero__buttons { display:flex; gap:16px; margin-top:32px; flex-wrap:wrap; }

/* === コンセプト === */
.sg-intro { padding:90px 7vw; max-width:960px; margin:0 auto; text-align:center; }
.sg-intro h2 { font-size:clamp(30px,4vw,48px); line-height:1.35; margin:0 0 24px; }
.sg-intro p { line-height:2; color:#555; }

/* === サービス === */
.sg-service { padding:90px 7vw; }
.sg-service__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }
.sg-card { background:#fff; padding:42px; border-radius:28px; border:1px solid rgba(0,0,0,.06); text-decoration:none; color:inherit; display:block; transition:transform .25s,box-shadow .25s; }
.sg-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,.09); }
.sg-card__number { color:#81D8D0; font-size:34px; font-weight:800; display:block; }
.sg-card h3 { font-size:22px; margin:18px 0 14px; }
.sg-card p { line-height:1.9; color:#555; margin:0; }
.sg-card__more { display:inline-block; margin-top:18px; font-size:13px; font-weight:700; color:#81D8D0; letter-spacing:.08em; }

/* === 施工実績 === */
.sg-works { padding:90px 7vw; background:#fff; }
.sg-works__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.sg-work-card { background:#ededed; border-radius:20px; overflow:hidden; text-decoration:none; color:inherit; display:block; transition:transform .25s,box-shadow .25s; }
.sg-work-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,.10); }
.sg-work-card img { width:100%; height:240px; object-fit:cover; }
.sg-work-card__body { padding:22px 26px; }
.sg-work-card__cat { color:#81D8D0; font-weight:700; font-size:13px; margin:0 0 6px; }
.sg-work-card__title { margin:0; font-size:18px; }
.sg-works__more { text-align:center; margin-top:48px; }

/* === 会社概要セクション === */
.sg-about { padding:90px 7vw; display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:start; }
.sg-about h2 { font-size:clamp(30px,4vw,48px); line-height:1.35; margin:0 0 24px; }
.sg-about > div > p { line-height:2; color:#555; }
.sg-about dl { background:#fff; border-radius:28px; padding:34px; }
.sg-about dt { font-weight:700; color:#555; font-size:14px; border-top:1px solid #eee; padding-top:18px; }
.sg-about dt:first-child { border-top:none; padding-top:0; }
.sg-about dd { margin:8px 0 18px; line-height:1.8; }

/* 企業概要ページ テーブル */
.sg-company-table { width:100%; border-collapse:collapse; background:#fff; border-radius:20px; overflow:hidden; }
.sg-company-table th,.sg-company-table td { padding:20px 28px; border-bottom:1px solid #f0f0f0; text-align:left; line-height:1.8; vertical-align:top; }
.sg-company-table th { width:180px; font-weight:700; color:#555; background:#f9f9f9; font-size:14px; white-space:nowrap; }
.sg-company-table tr:last-child th,.sg-company-table tr:last-child td { border-bottom:none; }

/* === コンタクト === */
.sg-contact { padding:90px 7vw; text-align:center; background:#111; color:#fff; }
.sg-contact .sg-label { color:#81D8D0; }
.sg-contact h2 { font-size:clamp(28px,3.5vw,44px); line-height:1.35; margin:0 0 20px; }
.sg-contact p { line-height:2; color:#aaa; margin-bottom:36px; }

/* お問い合わせフォーム */
.sg-contact-page { padding:70px 7vw 90px; max-width:760px; margin:0 auto; }
.sg-contact-page .wpcf7 { margin-top:40px; }
.sg-form-group { margin-bottom:28px; }
.sg-form-group label { display:block; font-weight:700; margin-bottom:8px; font-size:15px; }
.sg-form-group .required { background:#81D8D0; color:#111; font-size:11px; font-weight:700; padding:2px 7px; border-radius:4px; margin-left:8px; vertical-align:middle; }
.wpcf7-form input[type="text"],.wpcf7-form input[type="email"],.wpcf7-form input[type="tel"],.wpcf7-form textarea,.wpcf7-form select { width:100%; padding:14px 18px; border:1px solid #ddd; border-radius:12px; font-family:"Noto Sans JP",sans-serif; font-size:15px; transition:border-color .2s; background:#fff; }
.wpcf7-form input:focus,.wpcf7-form textarea:focus { outline:none; border-color:#81D8D0; box-shadow:0 0 0 3px rgba(129,216,208,.15); }
.wpcf7-form textarea { min-height:160px; resize:vertical; }
.wpcf7-form input[type="submit"] { background:#81D8D0; color:#111; border:none; border-radius:999px; padding:16px 56px; font-size:16px; font-weight:700; cursor:pointer; font-family:"Noto Sans JP",sans-serif; transition:opacity .2s; display:block; margin:36px auto 0; min-width:240px; }
.wpcf7-form input[type="submit"]:hover { opacity:.8; }

/* === 事業内容詳細 === */
.sg-service-detail { padding:70px 7vw 90px; max-width:900px; margin:0 auto; }
.sg-service-detail__content { margin-top:40px; line-height:2; color:#444; }
.sg-service-detail__content h2 { font-size:26px; margin:48px 0 16px; padding-bottom:12px; border-bottom:2px solid #81D8D0; }
.sg-service-detail__content h3 { font-size:20px; margin:32px 0 12px; }
.sg-service-detail__image { width:100%; border-radius:20px; overflow:hidden; margin:32px 0; }
.sg-service-detail__image img { width:100%; height:380px; object-fit:cover; }
.sg-service-list-link { text-align:center; margin-top:60px; padding-top:48px; border-top:1px solid #e8e8e8; }

/* === 実績詳細 === */
.sg-work-detail { padding:70px 7vw 90px; max-width:960px; margin:0 auto; }
.sg-work-detail__hero { border-radius:24px; overflow:hidden; margin-bottom:40px; }
.sg-work-detail__hero img { width:100%; height:480px; object-fit:cover; }
.sg-work-detail__gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:32px 0; }
.sg-work-detail__gallery img { width:100%; height:200px; object-fit:cover; border-radius:12px; }
.sg-work-detail__meta { background:#fff; border-radius:20px; padding:28px 32px; margin-bottom:32px; }
.sg-work-detail__meta dl { display:grid; grid-template-columns:120px 1fr; gap:12px 20px; }
.sg-work-detail__meta dt { font-weight:700; color:#555; font-size:14px; }
.sg-work-detail__meta dd { margin:0; }
.sg-work-detail__body { line-height:2; color:#444; }

/* 実績一覧 */
.sg-works-archive { padding:70px 7vw 90px; }
.sg-works-archive__filter { display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; margin-bottom:40px; }
.sg-filter-btn { padding:8px 20px; border-radius:999px; border:1px solid #ddd; background:#fff; cursor:pointer; font-size:14px; font-weight:700; transition:all .2s; font-family:"Noto Sans JP",sans-serif; }
.sg-filter-btn.is-active,.sg-filter-btn:hover { background:#81D8D0; border-color:#81D8D0; color:#111; }

/* === ブログ === */
.sg-blog { padding:70px 7vw 90px; }
.sg-blog__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.sg-blog-card { background:#fff; border-radius:20px; overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column; transition:transform .25s,box-shadow .25s; }
.sg-blog-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,.09); }
.sg-blog-card__thumb { width:100%; height:200px; object-fit:cover; }
.sg-blog-card__thumb--placeholder { width:100%; height:200px; background:linear-gradient(135deg,#ededed,#d8d8d8); display:flex; align-items:center; justify-content:center; color:#aaa; font-size:13px; }
.sg-blog-card__body { padding:24px; flex:1; display:flex; flex-direction:column; }
.sg-blog-card__cat { color:#81D8D0; font-weight:700; font-size:12px; margin:0 0 8px; letter-spacing:.06em; }
.sg-blog-card__title { font-size:17px; line-height:1.6; margin:0 0 12px; font-weight:700; }
.sg-blog-card__date { margin-top:auto; font-size:12px; color:#aaa; }
.sg-blog__more { text-align:center; margin-top:48px; }

/* ブログ記事詳細 */
.sg-post { padding:70px 7vw 90px; max-width:800px; margin:0 auto; }
.sg-post__header { margin-bottom:36px; }
.sg-post__cat { color:#81D8D0; font-weight:700; font-size:13px; display:block; margin-bottom:10px; }
.sg-post__title { font-size:clamp(26px,3.5vw,40px); line-height:1.35; margin:0 0 16px; }
.sg-post__meta { font-size:13px; color:#aaa; }
.sg-post__thumb { width:100%; border-radius:20px; overflow:hidden; margin-bottom:40px; }
.sg-post__thumb img { width:100%; max-height:480px; object-fit:cover; }
.sg-post__body { line-height:2; color:#333; }
.sg-post__body h2 { font-size:24px; margin:48px 0 16px; padding-bottom:10px; border-bottom:2px solid #81D8D0; }
.sg-post__body h3 { font-size:20px; margin:36px 0 12px; }
.sg-post__body p { margin-bottom:1.8em; }
.sg-post__body img { border-radius:12px; margin:8px 0; }
.sg-post__body ul,.sg-post__body ol { padding-left:1.5em; margin-bottom:1.8em; }
.sg-post__body li { margin-bottom:.5em; }
.sg-post__nav { display:flex; justify-content:space-between; gap:20px; margin-top:60px; padding-top:40px; border-top:1px solid #e8e8e8; }
.sg-post__nav a { text-decoration:none; color:#333; font-size:14px; font-weight:700; max-width:45%; }
.sg-post__nav a:hover { color:#81D8D0; }
.sg-post__nav-prev::before { content:"← "; }
.sg-post__nav-next::after { content:" →"; }

/* === フッター === */
.sg-footer { background:#111; color:#fff; padding:60px 7vw 30px; }
.sg-footer__top { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.1); }
.sg-footer__logo { font-weight:800; font-size:22px; letter-spacing:.04em; margin-bottom:14px; }
.sg-footer__logo span { color:#81D8D0; }
.sg-footer__desc { color:#888; font-size:14px; line-height:1.9; }
.sg-footer__nav-title { font-weight:700; font-size:13px; letter-spacing:.1em; color:#81D8D0; margin-bottom:16px; }
.sg-footer__nav-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.sg-footer__nav-list a { color:#aaa; text-decoration:none; font-size:14px; transition:color .2s; }
.sg-footer__nav-list a:hover { color:#fff; }
.sg-footer__bottom { padding-top:28px; text-align:center; color:#555; font-size:13px; }

/* === ページネーション === */
.sg-pagination { display:flex; justify-content:center; gap:8px; margin-top:60px; }
.sg-pagination a,.sg-pagination span { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; border:1px solid #ddd; text-decoration:none; color:#333; font-size:14px; font-weight:700; transition:all .2s; }
.sg-pagination .current,.sg-pagination a:hover { background:#81D8D0; border-color:#81D8D0; color:#111; }

/* === レスポンシブ === */
@media (max-width:900px) {
  .sg-nav { display:none; position:fixed; top:68px; left:0; width:100%; background:#fff; flex-direction:column; padding:24px 7vw 32px; gap:20px; box-shadow:0 8px 24px rgba(0,0,0,.1); border-top:1px solid #eee; }
  .sg-nav.is-open { display:flex; }
  .sg-nav a { font-size:16px; }
  .sg-hamburger { display:flex; }
  .sg-header__cta-wrap { display:none; }
  .sg-hero { grid-template-columns:1fr; padding:70px 5vw; min-height:auto; }
  .sg-hero__image { order:-1; }
  .sg-hero__image img { height:300px; box-shadow:12px 12px 0 #81D8D0; }
  .sg-service__grid,.sg-about,.sg-footer__top { grid-template-columns:1fr; }
  .sg-works__grid,.sg-blog__grid { grid-template-columns:repeat(2,1fr); }
  .sg-intro,.sg-service,.sg-works,.sg-about,.sg-contact { padding:70px 5vw; }
  .sg-btn { width:100%; }
  .sg-work-detail__gallery { grid-template-columns:repeat(2,1fr); }
  .sg-company-table th { width:auto; display:block; }
  .sg-company-table td { display:block; border-top:none; }
  .sg-post__nav { flex-direction:column; }
  .sg-post__nav a { max-width:100%; }
}
@media (max-width:560px) {
  .sg-works__grid,.sg-blog__grid { grid-template-columns:1fr; }
  .sg-work-detail__gallery { grid-template-columns:1fr; }
  .sg-page-hero { padding:40px 5vw 32px; }
  .sg-page-hero h1 { font-size:clamp(26px,6vw,40px); margin:0 0 10px; }
  .sg-page-hero p { font-size:14px; line-height:1.8; }
}

/* === ブログ検索フォーム === */
.sg-blog-search { margin-bottom:32px; }
.sg-blog-search__inner { display:flex; flex-direction:column; gap:10px; max-width:560px; }
.sg-blog-search__input-wrap { width:100%; }
.sg-blog-search__input-wrap input.sg-blog-search__input { display:block !important; width:100% !important; padding:14px 20px !important; border:2px solid #ddd !important; border-radius:999px !important; font-family:"Noto Sans JP",sans-serif !important; font-size:15px !important; line-height:1.5 !important; outline:none !important; background:#fff !important; box-shadow:none !important; margin:0 !important; -webkit-appearance:none !important; appearance:none !important; color:#222 !important; }
.sg-blog-search__input-wrap input.sg-blog-search__input:focus { border-color:#81D8D0 !important; box-shadow:0 0 0 3px rgba(129,216,208,.15) !important; }
.sg-blog-search__btn-wrap { width:100%; }
.sg-blog-search__btn-wrap button.sg-blog-search__btn { display:block !important; width:100% !important; padding:14px 28px !important; background:#81D8D0 !important; color:#111 !important; border:none !important; border-radius:999px !important; font-family:"Noto Sans JP",sans-serif !important; font-size:15px !important; font-weight:700 !important; cursor:pointer !important; transition:opacity .2s; line-height:1.5 !important; letter-spacing:.04em; text-align:center !important; -webkit-appearance:none !important; appearance:none !important; }
.sg-blog-search__btn-wrap button.sg-blog-search__btn:hover { opacity:.8 !important; }
.sg-blog-search__result { margin-bottom:24px; color:#555; font-size:15px; }
.sg-blog-empty { color:#888; grid-column:1/-1; }