/* degno.jp — 2017 年の OnePress 子テーマ＋Bootstrap 4（alpha.6）の「本来の見た目」を書き直したもの。
   値は旧サイトの計算値を puppeteer で測って写した（DECISIONS 2026-10-25）。
   rem の基準は旧サイトと同じ＝16px／991px 以下 15px／767px 以下 14px。 */

@font-face { font-family: "Raleway"; src: url("../fonts/raleway-latin.woff2") format("woff2"); font-weight: 100 900; font-display: optional;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Open Sans"; src: url("../fonts/opensans-latin.woff2") format("woff2"); font-weight: 300 800; font-display: optional;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --c-text: #777;
  --c-heading: #333;
  --c-accent: #03c4eb;
  --c-muted-heading: #636c72;
  --c-subtle: #aaa;
  --c-band: #f8f9f9;
  --c-line: #e9e9e9;
  --c-table-line: #eceeef;
  --c-footer: #222;
  --c-footer-text: #bbb;
  --c-input: #f2f2f2;
  /* 和文は旧サイトと同じく OS の既定ゴシックに落ちる。Mac は Hiragino Kaku Gothic ProN */
  --f-jp: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  --f-body: "Open Sans", Helvetica, Arial, var(--f-jp);
  --f-heading: "Raleway", Helvetica, Arial, var(--f-jp);
  --header-h: 75px;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h); }
@media (max-width: 991px) { html { font-size: 15px; } }
@media (max-width: 767px) { html { font-size: 14px; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body { margin: 0; background: #fff; color: var(--c-text); font-family: var(--f-body); font-size: .875rem; line-height: 1.7; }
img { max-width: 100%; height: auto; vertical-align: middle; }
picture { display: block; }
a { color: var(--c-accent); text-decoration: none; }
a:hover { color: #000; }
p { margin: 0 0 .9375rem; }
h1, h2, h3, h4, h5 { margin: 0; color: var(--c-heading); font-family: var(--f-heading); font-weight: 600; line-height: 1.1; }
/* 旧サイトの hr は高さ 2px で、見える線は上の 1px（#e9e9e9）だけ（V3-10・V3-2-05 の画素の実測） */
hr { height: 2px; margin: 20px 0; border: 0; border-top: 1px solid var(--c-line); background: none; }
/* フォーカスの枠は白地で 3:1 以上の濃い青（アクセントの #03c4eb は 2.07:1 で足りない＝V2-03） */
:focus-visible { outline: 2px solid #0279a0; outline-offset: 2px; }

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 8px; top: -100px; z-index: 1000; padding: 8px 16px; background: #fff; color: var(--c-heading); }
.skip-link:focus { top: 8px; }

/* Bootstrap 4 alpha.6 の .container と同じ幅 */
.container { width: 100%; margin-inline: auto; padding-inline: 15px; }
@media (min-width: 576px) { .container { max-width: 540px; } }
@media (min-width: 768px) { .container { max-width: 720px; } }
@media (min-width: 992px) { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }

/* ── ヘッダー ─────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 100; height: var(--header-h); background: #fff; box-shadow: 0 5px 10px rgba(50, 50, 50, .06); }
.site-header__inner { display: flex; align-items: center; height: 100%; }
.brand { margin-right: auto; line-height: 1; }
.brand__title { margin: 0 0 3.5px; font-family: var(--f-heading); font-size: 23px; font-weight: 600; line-height: 1.1; letter-spacing: 1px; }
.brand__title a { color: #000; }
.brand__tagline { margin: 0; font-size: 12px; line-height: 14px; }
.site-nav ul { display: flex; margin: 0; padding: 0; list-style: none; }
.site-nav a { display: block; padding: 0 17px; color: var(--c-heading); font-family: var(--f-heading); font-size: 13px; font-weight: 600; line-height: var(--header-h); letter-spacing: 1px; }
.site-nav li:last-child a { padding-right: 0; }
.site-nav a:hover { color: var(--c-accent); }
.nav-toggle { display: none; position: relative; width: 35px; height: var(--header-h); margin: 0 0 0 15px; padding: 0; border: 0; background: none; cursor: pointer; }
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { position: absolute; right: 5px; width: 24px; height: 3px; background: #000; transition: transform .2s, background-color .2s; }
.nav-toggle__bars { top: 50%; margin-top: -2px; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; right: 0; transform-origin: 0 50%; }
.nav-toggle__bars::before { top: -8px; }
.nav-toggle__bars::after { top: 8px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateX(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateX(4px) rotate(-45deg); }

@media (max-width: 1140px) {
  .nav-toggle { display: block; }
  /* 開いたメニューは旧サイトと同じく .container の幅（V3-14） */
  .site-nav { display: none; position: absolute; top: calc(var(--header-h) - 1px); left: 50%; width: 100%; transform: translateX(-50%); border-bottom: 1px solid var(--c-line); background: #fff; }
  .site-nav.is-open { display: block; }
  .site-nav ul { display: block; }
  .site-nav li { border-top: 1px solid var(--c-line); }
  .site-nav a, .site-nav li:last-child a { padding: 12px 20px; color: var(--c-text); line-height: 20px; }
  .site-nav a:hover { color: #000; }
}
@media (min-width: 576px) and (max-width: 1140px) { .site-nav { max-width: 540px; } }
@media (min-width: 768px) and (max-width: 1140px) { .site-nav { max-width: 720px; } }
@media (min-width: 992px) and (max-width: 1140px) { .site-nav { max-width: 960px; } }

/* ── トップ：ヒーロー（スライドショー） ─────── */
.hero { position: relative; overflow: hidden; background: #000; }
.hero__slides { position: absolute; inset: 0; }
.hero__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .75s; }
.hero__slide.is-active { opacity: 1; }
.hero::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .3); }
.hero__inner { position: relative; z-index: 1; padding-block: 10%; }
.hero__text { max-width: 555px; margin-left: -15px; padding-block: 3.125rem; }
.hero h1 { margin-bottom: .9375rem; color: #fff; font-size: 3.125rem; font-weight: 800; line-height: 1.3; letter-spacing: 3px; }
.hero p { margin-bottom: 1.25rem; color: #fff; font-size: 1.125rem; font-weight: 300; }
@media (max-width: 991px) {
  .hero__text { max-width: none; margin-inline: -15px; text-align: center; }
}
/* 992〜1199px は説明文の箱が 465px で中央寄せ（V3-2-02 の実測） */
@media (min-width: 992px) and (max-width: 1199px) { .hero__text { max-width: 465px; margin-left: -15px; text-align: center; } }

/* ── トップ：各セクション ─────────────────── */
.section { padding-block: 4.375rem; }
.section--band { background: var(--c-band); }
.section__head { margin-bottom: 0; text-align: center; }
.section__subtitle { margin: 5px 0 .8125rem; color: var(--c-subtle); font-size: 14px; font-weight: 700; line-height: 1.1; letter-spacing: 2px; }
.section__title { font-size: 40px; font-weight: 800; line-height: 1.2; letter-spacing: 3.5px; }
/* 旧子テーマの境目は 940px（min-width: 940px で 40px・14px）＝V3-2 の実測 */
@media (max-width: 939px) {
  .section__title { font-size: 30px; letter-spacing: 2px; }
  .section__subtitle { margin-top: 4px; font-size: 12px; }
}
.section__desc { margin-top: 2.5rem; font-size: 1.25rem; text-align: left; }
.section__desc--narrow { padding-inline: 15px; }
/* Bootstrap の .row（左右 -15px）の中の col-sm-8 と同じ幅 */
@media (max-width: 575px) { .section__desc--narrow { padding-inline: 0; } }
@media (min-width: 576px) { .section__desc--narrow { width: calc((100% + 30px) * 2 / 3); margin-inline: auto; } }
#features .section__desc { margin-bottom: 95px; }

.btn-outline { display: inline-block; padding: .75rem 1.5rem; border: 1px solid transparent; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .1); color: var(--c-accent); font-size: 1.0625rem; font-weight: 600; line-height: 1.25; }
.btn-outline:hover { color: #000; }

/* 事業内容（3枚） */
.cards { display: grid; gap: 0 30px; margin-top: 60px; }
@media (min-width: 576px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card img { display: block; width: 100%; margin-bottom: 30px; }
.card h3 { margin-bottom: .9375rem; font-size: 1.25rem; }
.card h3 a, .card__text a { color: inherit; }
.card h3 a { color: var(--c-heading); }
.card__text a { color: var(--c-text); }

/* NINE化粧品 */
.team { margin-top: 60px; }
/* 旧サイトの .team-member は flex の子で、名前の下の余白が中に収まる（V3-08） */
.team__member { display: flow-root; width: 370px; max-width: 100%; margin-bottom: 20px; }
.team__member img { display: block; }
.team__name { margin: 20px 0 15px; font-size: 15px; font-weight: 700; letter-spacing: 2px; text-align: center; }
.team__name a { display: inline-block; padding: 0 8px 10px; margin-bottom: -10px; border-bottom: 1px solid var(--c-line); color: var(--c-heading); }

/* 最新ニュース */
.news-list { margin-top: 60px; }
.news-item { display: flex; gap: 30px; padding-block: 25px; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.news-item__thumb { flex: 0 0 300px; }
.news-item__body { flex: 1; min-width: 0; }
.news-item__thumb img { display: block; }
.news-item__meta { margin-bottom: 10px; font-size: 11px; line-height: 18.7px; }
.news-item__body p:last-child { margin-bottom: 0; }
.news-item__meta a { color: var(--c-accent); font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.news-item__title { margin: 0 0 .9375rem; font-family: var(--f-body); font-size: 22px; font-weight: 500; line-height: 1.5; letter-spacing: -.6px; }
.news-item__title a { color: var(--c-heading); }
/* 旧子テーマの境目＝940px 以下は写真を隠し、720px 以下は縦に積んで全幅で出す（V3-03） */
@media (max-width: 940px) { .news-item__thumb { display: none; } }
@media (max-width: 720px) {
  .news-item { display: block; }
  .news-item__thumb { display: block; margin-bottom: 30px; }
  .news-item__thumb img { width: 100%; }
}

/* スクロールで下から出る動き（JS が動いた時だけ・画面だけ＝JS が無い時と印刷では全部見える） */
@media screen and (prefers-reduced-motion: no-preference) {
  /* 旧サイトの wow.js＋animate.css の slideInUp（自分の高さ分下から・1秒・透明度は変えない）と同じ動き（V3-22）。
     出る前は親の枠で切って隠す。visibility で隠すと読み上げ・ページ内検索から消えるため使わない（DECISIONS 2026-11-02） */
  .js .reveal-clip { overflow: clip; }
  .js .reveal { transition: transform 1s ease; }
  .js .reveal:not(.is-visible) { transform: translateY(100%); }
  .js .reveal-now > .reveal { transition: none; }
}

/* ── 下層ページ ─────────────────────────── */
.page-header { padding-block: 30px; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); background: var(--c-band); }
.page-header h1 { font-size: 24px; line-height: 1.3; letter-spacing: 1px; }
.page-body { padding-block: 40px 55px; }
.entry { margin-bottom: 30px; }
.entry img { display: block; }

/* 会社概要 */
/* 表の幅は旧サイトの入れ子の .container と col-sm-8 の結果＝310／430／590／710px（V3-01 の実測） */
.profile { width: 100%; margin: 0 auto 16px; border-collapse: collapse; border: 1px solid var(--c-table-line); }
@media (min-width: 576px) { .profile { width: 310px; } .profile th { width: 28.4%; } }
@media (min-width: 768px) { .profile { width: 430px; } .profile th { width: 27.2%; } }
@media (min-width: 992px) { .profile { width: 590px; } .profile th { width: 26.3%; } }
@media (min-width: 1200px) { .profile { width: 710px; } .profile th { width: 26.4%; } }
.profile th, .profile td { padding: .75rem; border: 1px solid var(--c-table-line); line-height: 1.25rem; text-align: center; }
.profile th { font-size: 14px; font-weight: 700; line-height: 20px; letter-spacing: 2px; }
/* 旧サイトは col-sm-2 の空ブロックがスマホで1行分積まれ、表も入れ子の .container の分だけ内側に入る */
@media (max-width: 575px) { .profile { width: calc(100% - 30px); margin-top: 22px; } .profile th { width: 28.3%; } }
.page-company_profile .entry { padding-bottom: 39px; }

/* お知らせ（投稿） */
.post-title { margin-bottom: 10px; font-family: var(--f-body); font-size: 32px; font-weight: 500; line-height: 1.5; letter-spacing: -.6px; }
.post-meta { margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid var(--c-line); font-size: 12px; font-weight: 600; letter-spacing: 1.5px; }
.post-meta time { color: var(--c-accent); }
.page-post .page-body { min-height: 544px; }
@media (max-width: 939px) { .post-title { font-size: 25px; line-height: 1.3; } }

/* ── バイオディーゼル発電 ───────────────── */
/* 背景は旧サイトと同じく等倍（拡大縮小しない）で敷く */
.bd-hero { margin-bottom: 2rem; padding: 2rem 1rem; background: #f8dce0 url("../img/theme/bio_test1-2000w.webp"); background-image: image-set(url("../img/theme/bio_test1-2000w.avif") type("image/avif"), url("../img/theme/bio_test1-2000w.webp") type("image/webp")); color: #000; }
@media (min-width: 576px) { .bd-hero { padding: 4rem 2rem; } }
.bd-hero p { margin-bottom: .9375rem; color: #fff; font-size: 22px; font-weight: 700; }
/* 旧サイトは空の h1（margin-bottom 15px）が上にあり、hr の上の余白は p の下の余白と同じ */
.bd-hero p:first-of-type { margin-top: .9375rem; }
.bd-hero hr { margin: 0 0 20px; }
.bd-lead { font-size: 1.25rem; font-weight: 300; }
.feature-row { display: grid; gap: 0 30px; }
@media (min-width: 576px) { .feature-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.feature-row img { display: block; width: 100%; }
.feature-row h2 { margin: .9375rem 0; color: var(--c-muted-heading); font-size: 2rem; line-height: 1.2; }
@media (max-width: 575px) { .feature-row .xs-hide { display: none; } }
.bd-divider { margin: 0 0 20px; }
/* 旧サイトは最後の段のあとフッターまで 30px あいていた（V3-09） */
.bd-columns { display: grid; gap: 0 30px; padding-bottom: 30px; }
@media (min-width: 992px) { .bd-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bd-columns h2 { margin-bottom: .9375rem; font-size: 2rem; line-height: 1.2; }
@media (max-width: 767px) { .feature-row h2, .bd-columns h2 { font-size: 1.5625rem; } }

/* ── お問い合わせ ───────────────────────── */
.contact-intro { font-size: 16px; }
.form { font-size: 16px; }
.form__label { display: block; margin-bottom: 12px; padding: 0; color: var(--c-heading); font-family: var(--f-heading); font-size: 1.0625rem; font-weight: 600; line-height: 1.1; letter-spacing: 2px; }
fieldset.form__field { margin: 0 0 15px; padding: 0; border: 0; min-width: 0; }
.form__field { margin-bottom: 15px; }
.form__field > .form__label { margin-bottom: 12px; }
/* 旧 CF7 の並び＝各項目の左 16px・丸の左右 10px（V3-3-03 の実測） */
.form__choices { display: flex; flex-wrap: wrap; font-weight: 600; letter-spacing: 2px; }
.form__choices label { display: inline-flex; align-items: center; margin-left: 16px; }
.form__choices input { margin: 0 16px 0 10px; }   /* 右は 10px＋CF7 の ::before の空白（字間込み 6px） */
.form__input, .form__textarea { width: 348px; max-width: 100%; padding: 10px; border: 1px solid #fff; border-radius: 0; background: var(--c-input); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .12); color: #000; font: inherit; font-size: 15px; line-height: 21px; }
.form__textarea { display: block; width: 355px; height: 241px; }
/* 送信ボタンの幅は旧サイトの列の幅（V3-11 の実測）＝330（全幅−30）／480／200／280／340px */
.form__submit { display: block; width: calc(100% - 30px); margin: 3px auto; padding: 15px 23px; border: 0; background: var(--c-accent); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .1); color: #fff; font-family: var(--f-heading); font-size: 13px; font-weight: 600; line-height: 13px; letter-spacing: 1px; cursor: pointer; }
.form__submit:hover { background: #000; }
@media (min-width: 576px) { .form__submit { width: 480px; } }
@media (min-width: 768px) { .form__submit { width: 200px; } }
@media (min-width: 992px) { .form__submit { width: 280px; } }
@media (min-width: 1200px) { .form__submit { width: 340px; } }
.page-contact hr { margin-top: .9375rem; }
.form__submit:disabled { opacity: .6; cursor: wait; }
.nf-tip { display: block; margin-top: 6px; color: #dc3232; font-size: 14px; }
.nf-response { margin: 0 0 30px; padding: 12px 16px; border: 2px solid #dc3232; font-size: 15px; }
.nf-response.nf-ok { border-color: #46b450; }
.nf-turnstile { min-height: 65px; }
#nf-form { scroll-margin-top: 100px; }

/* ── フッター ─────────────────────────────── */
.site-footer { background: var(--c-footer); color: var(--c-footer-text); font-size: 14px; font-weight: 500; text-align: center; }
.site-footer__inner { position: relative; padding-block: 35px; }
.site-footer p { margin: 0; }
.back-to-top { position: absolute; top: -25px; right: 50px; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 6px; background: var(--c-footer); color: #999; transform: rotate(45deg); }
.back-to-top svg { transform: rotate(-45deg) translate(0, -4px); }
.back-to-top:hover { color: #fff; }