/*
Theme Name: Wilk Theme
Theme URI:
Author: common.fractal
Author URI:
Description: 骨組みのみのカスタムテーマ。デザインは後から適用します。TOPページは固定ページ + front-page.php で表示。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wilk-theme
*/

/* ===========================================================
   WILK サイト 全ページ共通スタイル
   - 共通(ヘッダー/フッター/ボタン/見出し) + TOP(1058:1759)
   - 下層共通(util-bar/breadcrumb/page-hero)
   - ラインナップ(1058:4109) / 機能一覧(1058:4887)
   画像は figma_full / lineup_full / func_full から切り出した実素材
   =========================================================== */
.grecaptcha-badge { visibility: hidden; }
/* ====== 投稿ページテンプレ ====== */
.entry-content {
    margin: 60px 0;
}
/* コンテンツ幅 */
main#primary {
    margin: auto;
    max-width: 780px;
}
/* ページタイトル */
h1.entry-title {
/*     border-bottom: 2px solid; */
	font-size: var(--fs-30);
}
/* 見出し */
h2.wp-block-heading {
    font-size: var(--fs-24);
    margin: 20px 0;
    border-left: 7px solid;
    padding-left: 5px;
    background: #fff9e0;
    padding: 10px 0 10px 10px;
}
h3.wp-block-heading.has-text-align-center {
    margin: 30px 0 10px 0;
}
/* 文章 */
p.wp-block-paragraph {
    margin: 20px 0;
}
/* 表 */
figure.wp-block-table {
    margin: 30px 0;
}
.wp-block-buttons.is-layout-flex.wp-block-buttons-is-layout-flex {
    margin: 20px;
}
ul.wp-block-list {
    background: #fff9e0;
    padding: 20px 20px 20px 40px;
    margin: 20px 0;
}
/* 画像 */
figure.wp-block-image img {
    margin: auto;
}

/* アイキャッチ */
.post-thumbnail img {
    margin: auto;
}
/* リンクボタン */
:root :where(.wp-element-button, .wp-block-button__link) {
    background-color: #ff9831;
    color: #fff;
    font-weight: bold;
    padding-top: calc(0.667em + 2px);
    padding-right: calc(1.333em + 40px);
    padding-bottom: calc(0.667em + 2px);
    padding-left: calc(1.333em + 40px);
}
.wp-block-buttons>.wp-block-button {
    display: inline-block;
    margin: 30px auto;
}
/* 表 */
.wp-block-table thead {
    /* border-bottom: 3px solid #fc9200; */
    background: #fff9e0;
}
.post-thumbnail {
    margin: 30px 0;
   
}
.post-thumbnail img { height: auto; }
pre{white-space: pre-wrap;max-width: 1000px;
    margin: auto;
    padding: 30px 10px;
}
:root {
  --cream:        #fff9e0;
  --cream-deep:   #f7eecb;
  --brown:        #634A4A;/*テキスト色*/
  --orange:       #ff9831;
  --orange-dark:  #ef8410;
  --pink:         #f70065;
  --pink-dark:    #cf0056;
  --blue:         #2f8fd0;
  --yellow:       #ffd24d;
  --line:         #ece3d2;
  --content:      1000px;
  /* ===== 流動タイポグラフィ：rem+vw の clamp でブラウザ幅に応じ連続変化（下限=SP / 上限=PC） ===== */
  --fs-14: 14px;                                   /* 最小サイズ＝14px固定（SPでも14pxを下回らない） */
  --fs-15: clamp(14px, 13.6px + 0.12vw, 15px);
  --fs-16: clamp(14px, 13px + 0.3vw, 16px);
  --fs-17: clamp(14px, 13.2px + 0.34vw, 17px);
  --fs-18: clamp(15px, 13.9px + 0.36vw, 18px);
  --fs-20: clamp(16px, 14.9px + 0.42vw, 20px);
  --fs-21: clamp(18px, 18.6px + 0.44vw, 21px);
  --fs-22: clamp(18px, 16.4px + 0.44vw, 22px);
  --fs-24: clamp(20px, 18px + 0.5vw, 24px);
  --fs-25: clamp(20px, 18.4px + 0.52vw, 25px);
  --fs-26: clamp(21px, 19.3px + 0.52vw, 26px);
  --fs-28: clamp(22px, 20.4px + 0.6vw, 28px);
  --fs-30: clamp(23px, 21px + 0.7vw, 30px);
  --fs-38: clamp(28px, 25px + 1.05vw, 38px);
  --fs-45: clamp(30px, 26px + 1.5vw, 45px);
  --fs-56: clamp(34px, 28px + 2.2vw, 56px);
  --fs-84: clamp(46px, 34px + 4vw, 84px);
  /* 見出し（h2級=32px上限 / 中見出し=24px上限。h3は常に h2 より小さくなるよう独立定義） */
  --fs-h2: clamp(1.5rem, 0.875rem + 1.5vw, 2rem);
  --fs-h3: clamp(16px, 12.7px + 0.9vw, 24px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN",
               "Noto Sans JP", "Yu Gothic", "メイリオ", Meiryo, sans-serif;
  color: var(--brown);
  background: #fff;
  line-height: 1.6;
  font-size: var(--fs-16);            /* ← 本文（文章）の基本サイズを16pxに */
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }
/* ul  { list-style: none; } */
.wrap { max-width: var(--content); margin: 0 auto; padding: 0px; }
.aioseo-breadcrumbs {
    max-width: 1000px;
    margin: 0px auto 10px;
}
/* 投稿ページのパンくずから「カテゴリー（サービス）」項目とその区切り（»）を非表示 */
.single .aioseo-breadcrumbs a[href*="/category/"],
.single .aioseo-breadcrumbs a[href*="/category/"] + .aioseo-breadcrumb-separator,
.single .aioseo-breadcrumbs span:has(> a[href*="/category/"]),
.single .aioseo-breadcrumbs span:has(> a[href*="/category/"]) + .aioseo-breadcrumb-separator {
    display: none !important;
}
iframe {
    width: 100%;
    max-width: 375px;
    height: 375px;
}
/* ===== 見出し共通：全セクションの見出しは h2 に統一（PC 32px / SP 24px） ===== */
h2 { font-size: var(--fs-h2); line-height: 1.35; font-weight: 800; }

/* ===== 共通：見出し ===== */
.sec-head { text-align: center; margin-bottom: clamp(26px, 4vw, 46px); }
.sec-head h2 { font-size: var(--fs-h2); font-weight: 800; color: var(--brown); letter-spacing: .03em; }
.sec-head h2 .accent { color: var(--orange); }
.sec-head .en {
    display: block;
    font-size: var(--fs-26);
    font-weight: 500;
    color: #634A4A;
    letter-spacing: .12em;
    margin-top: 0px;
}

/* スラッシュ装飾付き見出し（h2に統一） */
.slash-head {
    text-align: center;
    font-size: 20px;
    font-weight: 800;
    color: var(--brown);
    margin-bottom: 10px;
}
.slash-head .accent { color: var(--orange); }
/*.slash-head::before, .slash-head::after { content: "＼"; color: var(--orange); font-weight: 700; margin: 0 .3em; }
.slash-head::after { content: "／"; }*/

/* ===== 共通：ボタン ===== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    /* font-weight: 800; */
    border-radius: 10px;
    line-height: 1;
    transition: filter .15s, transform .12s;
}
.btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn::after { content: "▶"; font-size: .68em; }

.btn-orange {
    background: var(--orange);
    color: #fff;
    padding: 10px 30px;
    font-size: var(--fs-20);
    box-shadow: 0 4px 0 var(--orange-dark);
}
.cta-block { text-align: center; padding: 30px 0; }
.cta-block-top {
    text-align: center;
    padding: 30px 0px;
    margin: 20px auto 0px auto;
    max-width: 950px;
    display: flex;
    justify-content: center;
}
.cta-block-top span {
    width: 12%;
}
.cta-block-top.footer {
    margin: 15px 0 0 0;
    padding: 0;
}
.cta-block-top.footer a.btn.btn-pink {
    font-size: 16px;
}
.cta-block-top.bottom {
    margin: 60px 0 0 0;
    max-width: 100%;
}
p.cta-lead {
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 5px;
}
a.btn.btn-pink {
    background-color: #f70065;
    padding: 15px 40px;
    border-radius: 100px;
    font-size: 22px;
    color: #ffff;
    font-weight: bold;
}
a.btn.btn-pink.download {
    background: #f70065;
    color: #fff;
}
/* ========================================================= HEADER */
.site-header { position: sticky; top: 0; z-index: 100; background: #fff;; }
.site-header .inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 15px 5px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.logo { display: flex; align-items: center; gap: 9px; }
.logo img { height: 40px; width: auto; }
.logo .name { font-size: var(--fs-25); font-weight: 800; color: var(--pink); letter-spacing: .02em; }
.gnav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 22px;
    font-size: var(--fs-16);
}
/* WordPressメニュー（wp_nav_menu）の ul を横並びに */
.gnav ul, .gnav .gnav-menu { display: flex; align-items: center; gap: 22px; list-style: none; margin: 0; padding: 0; }
.gnav li { list-style: none; }
.gnav a { color: var(--brown); white-space: nowrap; }
.gnav a:hover { color: var(--orange); }
.hbtn {
    padding: 3px 0 0 0;
    border-radius: 0px 0 5px 5px;
    font-size: var(--fs-14);
    font-weight: 700;
    white-space: nowrap;
    text-align: center;
	color:#fff;
    margin-left: 2%;
}
li#menu-item-127 {
    font-weight: bold;
}
li#menu-item-127 a {
	    padding: 5px 25px;
    color: #fff;
    background: #f70065;
    border-radius: 100px;
}
.hbtn.view  { background: var(--orange); }
.hbtn.login { background: var(--blue); }
/* ハンバーガー（PCでは非表示） */
.nav-toggle { display: none; }
/* SPメニューのドロワー：PCではラッパーを無効化（display:contents）してレイアウトに影響させない */
.nav-drawer { display: contents; }
.illust img {
    width: 100%;
    margin: auto;
}
/* ========================================================= HERO（FVは画像にするためHTML/CSSとも廃止） */
.fv img { width: 100%; }

/* ========================================================= FV スライダー（Swiper / 中央最大1200px・両端チラ見せ） */
.fv-slider {
    width: 100%;                /* デバイス幅いっぱい（両端の余白を作らない／中央画像は最大1200px） */
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    padding: 12px 0 10px;
}
.fv-slider .swiper-slide {
    width: min(1200px, 82vw);   /* 中央画像は最大1200px。狭い画面は82vwで両端を残す */
    height: auto;
    opacity: .4;                /* 両端（前後）の画像は少し暗く */
    transition: opacity .35s ease;
}
.fv-slider .swiper-slide-active { opacity: 1; }
.fv-slider .swiper-slide a,
.fv-slider .swiper-slide picture { display: block; width: 100%; }   /* リンク・picture を枠いっぱいに */
.fv-slider .swiper-slide img { width: 100%; height: auto; display: block; border-radius: 10px; }
/* インジケーター（画像に重ねず、画像の下に表示／実画像枚数ぶんだけ） */
.fv-slider .swiper-pagination { position: static; margin-top: 14px; display: flex; justify-content: center; gap: 10px; }
.fv-slider .fv-bullet {
    width: 10px; height: 10px; border-radius: 50%; background: #d8cdbb; opacity: 1;
    cursor: pointer; transition: width .25s, background .25s;
}
.fv-slider .fv-bullet.is-active { background: var(--orange); width: 24px; border-radius: 5px; }
/* 左右の矢印 */
.fv-slider .swiper-button-prev, .fv-slider .swiper-button-next {
    width: 46px; height: 46px; border-radius: 50%;
    background: rgba(99,74,74,.5); color: #fff; transition: background .15s;
    top: calc(50% - 13px);   /* ドットを画像下に出した分、矢印を画像の中央に合わせる */
}
.fv-slider .swiper-button-prev:hover, .fv-slider .swiper-button-next:hover { background: var(--orange); }
.fv-slider .swiper-button-prev::after, .fv-slider .swiper-button-next::after { font-size: 17px; font-weight: 800; }
@media (max-width: 560px) {
    .fv-slider .swiper-button-prev, .fv-slider .swiper-button-next { width: 34px; height: 34px; }
    .fv-slider .swiper-button-prev::after, .fv-slider .swiper-button-next::after { font-size: 13px; }
}

p.lorem {
    width: 50%;
    margin: 50px auto 50px;
	    display: flex;
    align-items: center;
}
span.SDGs_logo {
    display: block;
    width: 10%;
}
/* ========================================================= INTRO */
.intro {
    padding: 40px;
    background: #fff;
    width: 100%;
    margin: 0 auto 50px;
    border-radius: 10px;
    max-width: 1000px;
}
.intro .lorem { max-width: 920px; margin: 0 auto 40px; text-align: center; color: var(--gray-text); font-size: var(--fs-16); }
.intro .inner { display: grid; grid-template-columns: 1fr 320px; gap: 30px; align-items: center; }
.intro h2 { font-size: var(--fs-h2); font-weight: 800; color: var(--orange); margin-bottom: 12px; }
.intro h2 .t { color: var(--brown); }
.intro .sub {
    font-size: var(--fs-22);
    font-weight: 800;
    color: var(--brown);
    margin-bottom: 16px;
    line-height: 1.4;
}
.intro p { color: var(--brown); font-size: var(--fs-16); }

/* ========================================================= FEATURES */
.features {
    background: var(--cream);
    padding: clamp(28px, 3.4vw, 40px) 0 40px 0;
  /*  border-radius: 0 70px 0 70px;*/
}
.features .ttl {
    text-align: center;
    font-size: var(--fs-h2);
    font-weight: 800;
    color: var(--orange);
    margin-bottom: 25px;
    position: relative;
}
/*.features span.k::before {
    content: "•••••";
    display: inline-block;
    font-size: clamp(2.125rem, 1.67rem + 1.94vw, 3.125rem);
    letter-spacing: 6px;
    color: var(--orange);
    margin: 0 0 4px;
    padding-left: 6px;
    position: absolute;
    top: -2.6rem;
    right: 7%;
}*/
.features .ttl .k {
    color: var(--brown);
    position: relative;
}
.feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.fcard {
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
    /* box-shadow: 0 4px 12px rgba(91,74,66,.07); */
}
.fcard .fhead { background: var(--orange); color: #fff; text-align: center; font-weight: 800; font-size: var(--fs-20); padding: 11px 6px; margin: 0; line-height: 1.4; }
.fcard .fbody { padding: 15px 10px; }
.fcard .fbody img { width: auto; max-width: 180px; margin: 15px auto 20px; }
.fcard .cap {
    font-size: var(--fs-16);
    color: var(--brown);
    text-align: center;
    border-top: 1px solid var(--line);
    padding-top: 12px;
    font-weight: bold;
    line-height: 1.4;
}
.features .note {
    text-align: center;
    font-size: 26px;
    font-weight: 800;
    color: #634A4A;
    margin: 30px 0 10px 0;
}
span.video-arrow {
    font-weight: 500;
    margin-top: 10px;
    display: block;
}
/* ========================================================= NEWS */
.news { padding: clamp(40px, 5.3vw, 64px) 0; }

span.video-arrow img {
    display: inline-block;
    width: 22px;
    margin-left: 5px;
}
.features .video { display: block; max-width: 550px; margin: auto; position: relative; }
.features .video img { width: 100%; border-radius: 10px; box-shadow: 0 4px 12px rgba(91,74,66,.12); }
.features .video::after { content: "▶"; position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; background: rgba(0,0,0,.45); color: #fff; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-18); }
.news h2 {
    text-align: center;
    font-size: var(--fs-h2);
    font-weight: 800;
    color: var(--brown);
    line-height: 1.2;
}
.news h2 .accent { color: var(--orange); }
.news .en {
    display: block;
    text-align: center;
    font-size: var(--fs-24);
    color: var(--brown);
    letter-spacing: .12em;
    font-weight: 400;
}
.news-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
    margin-top: 30px;
}
.ncard { display: block;  border-radius: 10px; padding: 15px;border: 1px solid var(--line); color: var(--brown); transition: filter .15s; }
.ncard:hover { filter: brightness(.98); }
.ncard .nthumb {
    width: 100%;
    height: 180px;
    overflow: hidden;
}
.ncard .nthumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.ncard > img { width: 100%; height: 156px; object-fit: cover; display: block; }
.ncard .nbody { background: #fff; padding: 11px 10px; margin-top: 12px; }
.ncard .ndate { font-size: var(--fs-18); font-weight: 400; color: var(--brown); }
.ncard h3 { font-size: var(--fs-16); font-weight: 500; color: var(--brown); margin-top: 8px; line-height: 1.55; }
.news .more { text-align: right; margin-top: 18px; }
.news .more a { font-size: var(--fs-16); color: var(--brown); border-bottom: 1px solid var(--brown); padding-bottom: 2px; }

span.accent {
    color: #ff9831;
}

/* ========================================================= CHARTS + MAP（グラフ・日本地図は画像 / Figma 1363:917） */
.charts { background: #fff; padding: clamp(40px, 5.3vw, 0px) 0; }
.charts .slash-head {
    font-size: var(--fs-h2);
    line-height: 1.4;
    margin-bottom: clamp(26px, 4vw, 40px);
    display: flex;
    justify-content: center;
}
.charts-row {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    gap: clamp(20px, 4vw, 48px);
    align-items: flex-start;
    justify-content: space-between;
}
.charts-graph {
    text-align: center;
}
/*.charts-map { flex: 0 0 30%; }*/
.charts-graph img { width: 100%; height: auto; margin: 0 auto; }
.charts-map img {
	width:50%;
    height: auto;
    margin: 0 auto;
}
.charts-cap {
    font-size: 22px;
    color: var(--brown);
    margin-top: 20px;
    font-weight: bold;
    text-align: left;
    display: inline-block;
}
@media (max-width: 600px) {
  .charts-row { flex-direction: column; align-items: center; gap: 20px; }
  .charts-graph, .charts-map { flex: none; width: 100%; }
  .charts-map { text-align: center; }
  .charts-map img { max-width: 240px; }
}

/* ========================================================= MERIT */
section.merit {
    width: 100%;
    background: #fff9e0;
    position: relative;
}
.merit {
    padding: 0px 0 20px 0;
    margin-top: clamp(70px, 12vw, 150px);
}
.decoration {
    position: absolute;
    top: -6rem;
    z-index: 0;
    width: 100%;
}
.decoration-bottom {
    position: absolute;
    z-index: -1;
}
section.merit .wrap {
    position: relative;
}
.merit > .wrap > .sec-head { margin-bottom: 22px; }
.merit-panel {
    background: var(--cream);
    border-radius: 10px;
    padding: 5px 0px 0px;
}
.merit-list { max-width: 940px; margin: 0 auto; display: grid; gap: 20px; }
.mrow { background: #ddcdb8; border-radius: 10px; display: flex; align-items: center; gap: 19px; padding: 12px 20px; }
.mrow .micon { width: 84px; height: 84px; flex: none; }
.mrow .micon img { width: 100%; height: 100%; border-radius: 50%; }
.mrow .mtext { flex: 1; background: #fff; border-radius: 10px; padding: 16px 20px; }
.mrow .mtitle {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    border-bottom: 1px solid var(--orange);
    padding-bottom: 0px;
    margin-bottom: 8px;
}
.mrow .mtitle .badge {
    background: var(--orange);
    color: #fff;
    font-weight: 800;
    font-size: var(--fs-16);
    padding: 0px 12px;
    border-radius: 5px 5px 0 0;
    white-space: nowrap;
}
.mrow .mtitle h3 { font-size:var(--fs-20) ; color: var(--brown); }
.mrow p { font-size: var(--fs-16); line-height: 1.6; color: var(--brown); }

.satisfy-box { background: #fff; border-radius: 10px; max-width: 940px; margin: 30px auto 0; padding: 22px 24px 26px; }
.merit .satisfy-head {
    margin-bottom: 18px;
    font-size: var(--fs-20);
    display: flex;
    justify-content: center;
    align-items: center;
}
p.slash-head.satisfy-head span.title-decoration {
    display: inline-block;
    width: 2.6%;
}
h2.slash-head span.title-decoration {
    display: inline-block;
    width: 3.5%;
}
span.title-decoration {
    margin: 0 5px;
}
.satisfy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
.scard { display: flex; align-items: center; gap: 18px; }
.scard .who { width: 92px; flex: none; text-align: center; }
.scard .who img { width: 82px; height: 82px; margin: 0 auto 4px; }
.scard .who span { font-size: var(--fs-15); font-weight: 800; }
.scard.worker .who span   { color: #1eabe2; }
.scard.resident .who span { color: #ff8888; }
.scard .bubble {
    position: relative;
    border-radius: 10px;
    padding: 15px;
    font-size: var(--fs-16);
    line-height: 1.55;
    color: var(--brown);
}
.scard.worker .bubble   { background: #e6f8ff; }
.scard.resident .bubble { background: #ffefef; }
.scard .bubble::before {
    content: "";
    position: absolute;
    left: -28px;
    top: 20%;
    transform: translateY(-50%);
    border: 15px solid transparent;
}
.scard.worker .bubble::before   { border-right-color: #e6f8ff; }
.scard.resident .bubble::before { border-right-color: #ffefef; }

/* ========================================================= MONITORS */
.monitors { padding: clamp(40px, 5.3vw, 64px) 0; }
.monitors .ttl { text-align: center; font-size: var(--fs-h2); font-weight: 800; color: var(--brown); margin-bottom: 8px; }
.monitors .sub {
    text-align: center;
    background: var(--cream);
    color: var(--brown);
    font-weight: 700;
    padding: 10px;
    max-width: 100%;
    margin: 30px auto 40px;
    border-radius: 4px;
    font-size: var(--fs-22);
}
.mon-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 60px;
    max-width: 1000px;
    margin: 0 auto;
}
.mon-grid.row2 { grid-template-columns: repeat(2,1fr); max-width: 760px; margin: 30px auto 0; }
.moncard { text-align: center; }
.moncard .pic { display: flex; align-items: flex-end; justify-content: center; }
.moncard .pic img { width: auto; }
.moncard .size {
    font-weight: 800;
    color: #634A4A;
    font-size: var(--fs-20);
    margin-top: 10px;
    border-bottom: 1px solid;
    text-align: left;
}
.moncard .size small { display: block; color: var(--brown); font-size: var(--fs-14); }
.moncard p {
    font-size: var(--fs-16);
    color: var(--gray-text);
    margin-top: 4px;
    text-align: left;
    line-height: 1.4;
}
.mon-note {
    text-align: center;
    background: var(--cream);
    color: var(--brown);
    font-weight: 700;
    padding: 0px;
    max-width: 100%;
    margin: 44px auto 30px;
    border-radius: 4px;
    font-size: var(--fs-20);
}

/* ========================================================= CASES（改善事例 1175:1504） */
.cases { background: var(--cream); padding: clamp(38px, 5vw, 60px) 0 clamp(40px, 5.3vw, 64px); }
.wrap .ttl {
    text-align: center;
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
}
span.marker {
    background: linear-gradient(transparent 70%, #ffe831 70%);
}
.wrap .ttl span.title-decoration.left {
    display: inline-block;
    width: 3.5%;
}
.cases .lead { text-align: center; color: var(--brown); font-weight: 500; font-size: var(--fs-26);}
.cases .slash-head { margin-bottom: 30px; }
.cases .panel-wrap { background: #fff; border-radius: 10px; padding: 20px 25px; max-width: 1000px; margin: 0 auto; }
.cases .panel-wrap > h3 { text-align: center; font-size: var(--fs-22); font-weight: 800; color: var(--brown); margin-bottom: 24px; }
.case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 35px; }
/* 改善事例パネル（ベージュ質問部＋オレンジ回答部） */
.cs-panel { display: flex; flex-direction: column; }
.cs-q {
    background: #f7f7f0;
    border-radius: 10px 10px 0 0;
    padding: 15px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.cs-q .ava { width: 110px; height: 110px; flex: none; border-radius: 50%; overflow: hidden; }
.cs-q .ava img { width: 100%; height: 100%; object-fit: cover; }
.cs-q .bubble {
    flex: 1;
    background: #fff;
    border-radius: 10px;
    padding: 15px;
    position: relative;
    height: 140px;
    max-height: 175px;
}
.cs-q .bubble::before { content: ""; position: absolute; left: -16px; top: 26px; border: 8px solid transparent; border-right-color: #fff; }
.cs-q .bubble .qno { display: block; font-weight: 800; font-size: var(--fs-18); color: var(--brown); border-bottom: 1px solid var(--brown); padding-bottom: 5px; margin-bottom: 6px; }
.cs-q .bubble p { font-size: var(--fs-16); color: var(--brown); line-height: 1.45; }
.cs-a {
    background: #f7f7f0;
    border-radius: 0 0 10px 10px;
    padding: 24px 18px 18px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.cs-a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border-left: 26px solid transparent;
    border-right: 26px solid transparent;
    border-top: 18px solid #fe9730;
}
.cs-a-card { background: #fff; border-radius: 10px; padding: 12px; }
.cs-reveal { font-weight: 800; font-size: var(--fs-18); color: var(--brown); padding-left: 8px; margin-bottom: 9px; }
.cs-fname { background: #fe9730; color: #fff; font-weight: 800; font-size: var(--fs-24);  border-radius: 10px; padding: 6px 10px; margin-bottom: 10px; line-height: 1.3; }
.cs-desc { font-size: var(--fs-16); color: var(--brown); line-height: 1.55; }
.cs-a-img { background: #fff; border-radius: 10px; padding: 14px; text-align: center; }
.cs-a-img img { width: 100%; max-width: 360px; }
.cases .note {
    text-align: center;
    font-size: var(--fs-24);
    font-weight: 500;
    color: var(--brown);
    margin: 40px 0 22px;
    line-height: 1.4;
}

/* ========================================================= FLOW */
.flow { padding: clamp(40px, 5.3vw, 64px) 0; }
.flow-wrap { max-width: 1060px; margin: 0 auto; }
/* 上部のタイムライン画像はPCのみ表示（SPでは非表示） */
.flow-img { max-width: 1000px; margin: 0 auto 24px; }
.flow-img img.pc { width: 85%; height: auto; display: block; margin: auto; }
/* 下部の詳細カードはHTMLで表示 */
.flow-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.flow-row .flow-when { display: none; }   /* 日付はPCでは画像内にあるためHTMLでは非表示 */
.flowcard { background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.flowcard .fc-head { background: var(--cream-deep); text-align: center; font-weight: 800; color: var(--brown); font-size: var(--fs-18); min-height: 64px; display: flex; align-items: center; justify-content: center; }
.flowcard .fc-body { padding: 16px; font-size: var(--fs-16); }

/* ========================================================= VOICE */
.voice {
    background: var(--cream);
    padding: clamp(28px, 3.4vw, 40px) 0 clamp(38px, 5vw, 60px);
    position: relative;
    margin: 90px 0 0 0;
}
.voice .wrap{
	position: relative;
	z-index:1;
}
.voice-decoration {
    position: absolute;
    top: -70px;
}
.voice-decoration-bottom {
    bottom: -70px;
    position: absolute;
}
.voice-list { max-width: 1000px; margin: 0 auto 50px; display: grid; gap: 18px; }
.vcard { background: #fff; border-radius: 10px; padding: 20px; }
.vcard h3 { color: var(--brown); font-size: 20px; padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.vcard p { font-size: var(--fs-16); }
.vcard .who { text-align: right; font-size: var(--fs-14); color: var(--brown); margin-top: 4px; }
.voice .sub2 { text-align: center; font-weight: 800; color: var(--brown); font-size: var(--fs-h2); margin-bottom: 26px; }
.paper-grid { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.paper-grid img { width: 100%; border: 1px solid var(--line); border-radius: 4px; }
/* 現場改善事例の紹介（新聞記事カード 1176:2003） */
/* メディア掲載事例：横スクロールスライダー（PC3件 / SP1件・1件ずつ送り・最大10件） */
.casenews-slider { max-width: 1000px; margin: 0 auto; position: relative; }
.casenews-slider .swiper-slide { height: auto; }   /* カード高さを揃える */
/* 操作バー：スライダーの下に「◀ ●●● ▶」を1行・中央で表示 */
.casenews-slider .casenews-controls { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; }
.casenews-slider .swiper-button-prev, .casenews-slider .swiper-button-next {
    position: static; margin: 0; top: auto; left: auto; right: auto; flex: none;
    width: 25px; height: 25px; border-radius: 50%;
    background: var(--orange); color: #fff;
}
.casenews-slider .swiper-button-prev::after, .casenews-slider .swiper-button-next::after { font-size: 11px; font-weight: 800; }
.casenews-slider .swiper-button-disabled { opacity: .3; pointer-events: none; }   /* これ以上送れない側は淡色 */
/* インジケーター（矢印の間） */
.casenews-slider .casenews-controls .swiper-pagination { position: static; margin: 0; width: auto; flex: 0 0 auto; display: flex; justify-content: center; gap: 8px; }
.casenews-slider .swiper-pagination-bullet { width: 9px; height: 9px; border-radius: 50%; background: #d8cdbb; opacity: 1; transition: width .25s, background .25s; }
.casenews-slider .swiper-pagination-bullet-active { background: var(--orange); width: 22px; border-radius: 5px; }
.casenews-card { background: #fff; border-radius: 5px; padding: 10px; display: flex; flex-direction: column; }
.casenews-card .cn-img { width: 100%; height: 175px; object-fit: cover; object-position: center top; border-radius: 2px; }
.casenews-card .cn-name { font-size: var(--fs-16); font-weight: 800; color: var(--brown); border-bottom: 1px solid var(--brown); padding-bottom: 5px; margin: 16px 0 12px; }
span.construction {
    font-size: 13px;
    font-weight: 500;
}
span.cn-sub {
    display: block;
    font-size: 14px;
    font-weight: 400;
}
.casenews-card .cn-desc {
    font-size: var(--fs-16);
    line-height: 1.45;
    color: var(--brown);
    margin-bottom: 16px;
    height: 70px;
    max-height: 70px;
}
.casenews-card { cursor: pointer; }
.casenews-card .cn-more { align-self: flex-end; margin-top: auto; font-size: var(--fs-14); color: var(--brown); border-bottom: .5px solid var(--brown); padding-bottom: 2px; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.casenews-card .cn-more::after { content: "›"; font-size: var(--fs-16); line-height: 1; }

/* 現場改善事例 ポップアップ（モーダル） */
.cn-detail { display: none; }
.cn-modal { position: fixed; inset: 0; z-index: 1000; display: none; }
.cn-modal.is-open { display: block; }
.cn-modal-bg { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.cn-modal-box {
    position: relative;
    background: #fff;
    width: calc(100% - 32px);
    max-width: 800px;
    max-height: 90vh;
    margin: 5vh auto;
    border-radius: 10px;
    overflow: hidden;            /* 角丸を四隅とも保つ（スクロールは内側で） */
    display: flex;
    flex-direction: column;
}
.cn-modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 28px 30px;
}
.cn-modal-close {
    position: absolute;
    top: 8px;
    right: 14px;
    z-index: 1;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    font-size: var(--fs-30);
    line-height: 1;
    color: var(--brown);
    cursor: pointer;
}
.cn-detail-title { font-size: var(--fs-20); font-weight: 800; color: var(--brown); border-bottom: 1px solid var(--brown); padding-bottom: 5px; margin-bottom: 17px; padding-right: 30px; }
span.description {
    font-size: 16px;
    font-weight: 500;
    display: block;
}
.cn-detail-img { width: 100%; height: auto; display: block; border-radius: 4px; }
section#qa {
    margin: 10rem 0 7rem 0;
}
/* ========================================================= QA（よくある質問 1250:530） */
.qa .accordion { max-width: 1003px; margin: 0 auto; display: flex; flex-direction: column; gap: 30px; }
.qitem { background: #fff; border: 2px solid #f7f0e0; border-radius: 10px; overflow: hidden; }
.qitem .q { display: flex; align-items: center; gap: 20px; background: #f7f0e0; padding: 10px; }
.qitem .a { display: flex; align-items: center; gap: 20px; padding: 10px; }
.qitem .q .m, .qitem .a .m {
    background: #fff;
    border-radius: 48px;
    min-width: 40px;
    /* padding: 5px; */
    font-size: var(--fs-22);
    font-weight: 800;
    color: var(--brown);
    line-height: 1.8;
    text-align: center;
    flex: none;
height: 40px;
}

.qitem .q h3 { font-size: var(--fs-20); font-weight: 800; color: var(--brown); line-height: 1.45; }
.qitem .a p { font-size: var(--fs-16); font-weight: 500; color: var(--brown); line-height: 1.7; }
.qa .more { text-align: right; max-width: 1003px; margin: 18px auto 0; }
.qa .more a { font-size: var(--fs-16); color: var(--brown); border-bottom: 1px solid var(--brown); padding-bottom: 2px; }
p.more a span img {
    width: 10px;
    display: inline-block;
}
/* ========================================================= FOOTER */
.site-footer {
    background: var(--cream);
    padding: 30px 0 0;
}
.site-footer .inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 150px 30px 60px;
    display: flex;
    align-items: center;
    gap: 40px;
    justify-content: space-between;
}
.site-footer .f-logo img {
    height: 65px;
    margin: auto;
}
.site-footer .fnav { margin-left: 50px; display: grid; grid-template-columns: repeat(2,auto); gap: 10px 64px; }
/* WordPressメニュー（ul/li）を .fnav グリッドにそのまま流し込む */
.site-footer .fnav ul, .site-footer .fnav .fnav-menu { display: contents; }
.site-footer .fnav li { list-style: none; margin: 0; }
.site-footer .fnav a { color: var(--brown); font-size: var(--fs-14); }
.footer-container {
    position: relative;
}
.site-footer .pagetop {
    right: 0;
    /* margin-left: auto; */
    background: var(--orange);
    color: #fff;
    font-weight: 700;
    padding: 25px 15px 10px 30px;
    border-radius: 100px 0 0;
    font-size: var(--fs-14);
    position: absolute;
    bottom: 0;
    /* transform: translateY(-50%); */
    text-align: center;
    line-height: 1.2;
    display: flex;
    align-items: center;
}
span.arrow {
    font-size: 1.3rem;
}

.site-footer .copy { text-align: center; padding: 14px; background: #fff; font-size: var(--fs-14); color: var(--gray-text); }

/* =========================================================
   下層ページ共通：ユーティリティバー / パンくず / ページヒーロー
   ========================================================= */
.util-bar { background: #fff;; }
h1.inner {
    width: 100%;
    margin: 0 auto;
    padding: 5px;
    font-size: var(--fs-14);
    color: var(--brown);
}
.header-inner {
    display: flex;
    max-width: 1000px;
    margin: auto;
    justify-content: space-between;
}
.header-btns {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
.header-btns a {
    max-width: 140px;
    width: 140px;
}
.breadcrumb .inner { max-width: 1000px; margin: 0 auto; padding: 14px 24px; font-size: var(--fs-14); color: var(--gray-text); }
.breadcrumb a { color: var(--gray-text); }
.breadcrumb .sep { margin: 0 8px; }
.breadcrumb .cur { color: var(--brown); }
.page-hero { background: var(--cream); padding: clamp(28px, 4.6vw, 44px) 0 clamp(26px, 4.2vw, 40px); text-align: center; position: relative; overflow: hidden; }
.page-hero .wm {
    position: absolute;
    top: 5px;
    left: 0;
    right: 0;
    font-size: var(--fs-84);
    font-weight: 900;
    color: #fff;
    opacity: .75;
    letter-spacing: .12em;
    pointer-events: none;
    user-select: none;
}
.page-hero h1 { position: relative; font-size: var(--fs-38); font-weight: 800; color: var(--brown); margin-bottom: 16px; letter-spacing: .02em; }
.page-hero p {
    position: relative;
    max-width: 820px;
    margin: auto;
    color: var(--brown);
    font-size: var(--fs-16);
    text-align:center;
    padding: 0 20px;
}
.type-divider { text-align: center; font-size: var(--fs-h2); font-weight: 800; color: var(--brown); margin: 8px 0 34px; }
.type-divider::before, .type-divider::after { content: "—"; color: var(--brown); margin: 0 .5em; font-weight: 400; }
.home-link { text-align: center; margin-top: 20px; }
.home-link a { font-weight: 800; color: #fff; }
.home-link a::after { content: " →"; }

/* =========================================================
   ラインナップページ (1058:4109)
   ========================================================= */
.lineup-table-sec {
    padding: 0;
    margin-top: 40px;
}
small {
    font-size: 18px;
    font-weight: bold;
}
small span {
    font-size: 16px;
    font-weight: 400;
}
.lineup-table-sec h2 { font-size: var(--fs-h2); font-weight: 800; color: var(--brown); margin-bottom: 16px; }
.lineup-table-sec h2 small { font-size: var(--fs-14); font-weight: 500; color: var(--gray-text); margin-left: 8px; }
.lu-table { width: 100%; border-collapse: collapse; font-size: var(--fs-16); }
.lu-table th, .lu-table td { border: 1px solid var(--line); padding: 13px 16px; text-align: left; vertical-align: middle; color: var(--brown); }
.lu-table thead th { background: #fff; color: var(--brown); font-weight: 500; text-align: center; }
.lu-table .grp td { background: var(--cream-deep); text-align: center; font-weight: 500; color: var(--brown); }
.lu-table .name { background: #fffdf4; }
.lu-table .name a { color: var(--blue); text-decoration: underline; font-weight: 700; }
.lu-table .center { text-align: center; }
.lineup-table-sec .opt-link { text-align: right; margin-top: 12px; }
.lineup-table-sec .opt-link a { color: var(--blue); text-decoration: underline; font-size: var(--fs-14); }

.lineup-detail {
    padding: 50px 0 80px 0;
}
/* セクション交互背景 */
.lineup-detail.sec-touch    { background: var(--cream); }
.lineup-detail.sec-nontouch {
    background: #FFE4C9;
}
.lineup-detail.sec-web      { background: var(--cream); }
.lineup-detail .product:last-child { margin-bottom: 0; }
.lineup-detail .product + .type-divider { margin-top: 44px; }
/* サイネージ詳細カード（1177:2044） */
.product {
    max-width: 1000px;
    margin: 0 auto 55px;
    background: #fff;
    border-radius: 10px;
    padding: clamp(16px, 2.6vw, 30px);
    display: flex;
    gap: clamp(20px, 3.4vw, 35px);
    align-items: self-start;
    box-shadow: 0 2px 14px rgba(91,74,66,.06);
}
.product .pcol-img {
    width: 437px;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding-top: 20px;
}
/* メイン写真は表示枠を固定し、写真切替時にレイアウトが動かないようにする */
.product .pphoto { width: 100%; height: auto; display: flex; align-items: center; justify-content: center; }
.product .pphoto img { max-height: 100%; max-width: 100%; width: auto; height: auto; margin: 0 auto; border-radius: 4px; }
.product .pthumbs { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; width: 100%; }
.product .pthumbs img { width: calc(25% - 7px); height: auto; aspect-ratio: 1 / 1; object-fit: cover; border: 1px solid var(--brown); border-radius: 10px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.product .pthumbs img:hover { border-color: var(--orange); }
.product .pthumbs img.is-active { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange); }
.product .pbody { flex: 1; min-width: 0; }
.product .pbody h3 { font-size: var(--fs-28); font-weight: 800; color: var(--brown);  border-bottom: 1px solid var(--brown); padding-bottom: 4px; margin-bottom: 5px; line-height: 1.4; }
.product .pbody h3 span { font-size: var(--fs-16); font-weight: 700; }
.product .desc { font-size: var(--fs-16); color: var(--brown); margin-bottom: 16px; line-height: 1.6; }
.spec-head { background: #faf3e3; font-weight: 800; color: var(--brown); font-size: var(--fs-16); padding: 5px 20px; border-radius: 2px; margin: 0 0 8px; }
.spec-body { font-size: var(--fs-16); color: var(--brown); padding: 0 10px; margin-bottom: 18px; }
.spec-body dl { display: grid; grid-template-columns: max-content 1fr;  }
.spec-body dt { font-weight: 700; white-space: nowrap; }
.parts-list {
    columns: 2;
    font-size: var(--fs-16);
    color: var(--brown);
    padding: 0 0px 0 40px;
    margin-bottom: 18px;
}
span.stand {
    font-weight: 400;
    font-size: 14px;
}
.parts-list li { padding-left: 1em; text-indent: -1em; margin-bottom: 2px; break-inside: avoid; }
.pvoice { background: #faf3e3; border-radius: 4px; padding: 10px; }
.pvoice .pv-head { background: #fff; text-align: left; font-weight: 800; font-size: var(--fs-16); color: var(--brown); padding: 5px; margin-bottom: 10px; }
.pvoice .pv-text { font-size: var(--fs-16); color: var(--brown); line-height: 1.6; }
.pvoice .pv-who { font-size: var(--fs-14); color: var(--brown); text-align: right; margin-top: 8px; display:none;}
.voice-box { border: 2px solid var(--orange); border-radius: 10px; padding: 14px 16px; font-size: var(--fs-16); color: var(--brown); margin-top: 4px; }
.voice-box .cite { text-align: right; font-size: var(--fs-14); color: var(--gray-text); margin-top: 6px; }

.option-sec { background: var(--cream); padding: 12px 0 clamp(34px, 4.7vw, 56px); }
.option-sec .type-divider { padding-top: 40px; }
.option-card { background: #fff; border-radius: 12px; max-width: 1000px; margin: 0 auto; padding: 30px 34px; display: grid; grid-template-columns: 200px 1fr; gap: 30px; align-items: center; }
.option-card .ophoto img { width: 150px; margin: 0 auto; }
.option-card h3 {
    font-size: var(--fs-22);
    font-weight: 800;
    color: var(--brown);
    border-bottom: 1px solid var(--line);
    padding-bottom: 5px;
    margin-bottom: 10px;
}
.option-card ul { font-size: var(--fs-16); color: var(--brown);padding-left: 20px; }
.option-card li { margin-bottom: 3px; }

.cond-sec { background: #fff; padding: clamp(26px, 4.4vw, 44px) 0 clamp(34px, 4.7vw, 56px); }
.cond-sec .type-divider { padding-top: 0; }
/* 背景色が付くコンテンツ幅を1000pxに */
.cond-inner { background: var(--cream); max-width: 1000px; margin: 0 auto; border-radius: 10px; padding: 30px; }
.cond-box { background: #fff; border-radius: 10px; margin: 0 auto 20px; padding: 20px 28px; }
.cond-box:last-child { margin-bottom: 0; }
.cond-box h3 { font-size: var(--fs-18); font-weight: 800; color: var(--orange); border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 12px; }
.cond-box ul { font-size: var(--fs-16); color: var(--brown);padding-left: 20px; }
.cond-box li { margin-bottom: 3px; }

/* =========================================================
   機能一覧ページ (1058:4887)
   ========================================================= */
span.lvl {
    display: block;
    background: #fff;
    color: #ff9831;
    font-weight: bold;
}
.func-intro { max-width: 1000px; margin: 0 auto; font-weight: 800; color: var(--brown); font-size: 24px; padding: 40px 0px 30px; line-height: 1.5; }
.feat-block { max-width: 1000px; margin: 0 auto 40px; }
.feat-bar { background: var(--orange); padding: 10px; }
.feat-bar .fbar-in { max-width: none; margin: 0; padding: 0 20px; color: #fff; font-size: var(--fs-28); font-weight: 800; }
.feat-bar .fbar-in small { font-size: var(--fs-18); }
.feat-body { background: var(--cream); padding: clamp(16px, 2.4vw, 24px) clamp(16px, 3vw, 30px) clamp(18px, 3vw, 30px); }
.feat-lead { font-size: var(--fs-20); font-weight: 500; color: var(--brown); line-height: 1.6; margin-bottom: 20px; }
.feat-main { display: grid; grid-template-columns: 360px 1fr; gap: 32px; align-items: start; margin-bottom: 24px; }
.feat-main.narrow {
    grid-template-columns: 360px 1fr;   /* 画像列をテロップ機能と同じにして、文章の横幅を全機能で統一 */
    align-items: center;
    gap: 32px;
    width: 100%;
    margin: auto;
}
.feat-main.narrow .fimg { display: flex; justify-content: center; }   /* 小さめ画像は列内で中央に */
.feat-main.narrow .fimg img { max-width: 200px; }                     /* 画像は従来サイズ(200px)を維持 */
.feat-main.narrow.line {
    display: grid;
    grid-template-columns: 360px 1fr;   /* 文章幅を全機能で統一（548px） */
    gap: 32px;
    align-items: center;
    width: 100%;
}
.feat-main.narrow.line img {
    width: 100px;
}
.fimg.line {
    width: 38%;
}
.feat-main .fimg img { width: 100%; border-radius: 8px; }
.feat-main .fimg.qa img { border-radius: 26px; }
.feat-main .fdesc { font-size: var(--fs-16); line-height: 1.9; color: var(--brown); }
.feat-main .fdesc .sub, .feat-main .fdesc .sub2 { font-weight: 800; color: var(--orange); display: block; margin: 10px 0 2px; }
.fimg.banner {
    width: auto;                        /* 40%指定を解除し、360px列いっぱいに */
}
.feat-main.banner {
    display: grid;
    grid-template-columns: 360px 1fr;   /* 文章幅を全機能で統一（548px） */
    gap: 32px;
    align-items: center;
}
.feat-main.banner img {
    width: 200px;
    margin: auto;
}
/* テンプレートパターン */
.tpl-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--brown); padding-bottom: 6px; margin-bottom: 18px; }
.tpl-head b { font-size: var(--fs-18); font-weight: 800; color: var(--brown); }

.feat-templates { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; margin-bottom: 8px; }
.tpl img { width: 100%; border-radius: 4px; display: block; }
.tpl .tpl-label { font-size: var(--fs-16); font-weight: 800; color: var(--brown); margin-top: 6px; }
/* 解決ボックス */
.solve-box { background: #fff; border-radius: 5px; padding: 20px 30px; margin: 24px 0; }

.solve-box h4 { display: flex;  gap: 8px; font-weight: 800; color: var(--brown); font-size: var(--fs-20); border-bottom: 1px solid var(--orange); padding-bottom: 6px; margin-bottom: 12px; }
.solve-box h4 .ic { width: 24px; height: 24px; flex: none; object-fit: contain; }
.solve-box ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px 40px;
    font-size: var(--fs-16);
    color: #634a4a;
    padding-left: 3%;
}
.solve-box ul.cols-1 { grid-template-columns: 1fr; }
.solve-box ul.cols-2 { grid-template-columns: repeat(2, 1fr); }
/*.solve-box ul.cols-4 { grid-template-columns: repeat(4, 1fr); }*/
.solve-box li { line-height: 2; }
/* お客様の声 */
.voice-block { background: #fff; border-radius: 5px; padding: 20px; margin-top: 24px; }
.voice-block h4 { display: flex; align-items: center; gap: 7px; font-weight: 800; color: var(--brown); font-size: var(--fs-20); border-bottom: 1px solid var(--orange); padding-bottom: 5px; margin-bottom: 20px; }
.voice-block h4 .ic { width: 30px; height: 30px; flex: none; object-fit: contain; }
.fvoice { display: flex; gap: 20px 30px; flex-wrap: wrap; justify-content: flex-start; }
.fvcard {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.fvcard .ava { width: 88px; height: 88px; border-radius: 50%; overflow: hidden; flex: none; }
.fvcard .ava img { width: 100%; height: 100%; object-fit: cover; }
.fvcard .fv-bubble { width: 300px; max-width: 100%; border-radius: 10px; padding: 18px 20px; position: relative; }
.fvcard .fv-bubble::before {
    content: "";
    position: absolute;
    left: -31px;
    top: 18px;
    border: 17px solid transparent;
}
.fvcard.resident .fv-bubble { background: #fff6f6; }
.fvcard.resident .fv-bubble::before { border-right-color: #fff6f6; }
.fvcard.worker .fv-bubble { background: #eefaff; }
.fvcard.worker .fv-bubble::before { border-right-color: #eefaff; }
.fvcard .fv-title { font-size: var(--fs-20); font-weight: 700; }
.fvcard.resident .fv-title { color: #ff4848; }
.fvcard.worker .fv-title { color: #1eabe2; }
.fvcard .fv-text { font-size: var(--fs-16); line-height: 1.6; color: var(--brown); }
/* 特権権限：画像＋短い説明の下に全幅の詳細ブロック */
.feat-detail { margin: 4px 0 4px; }
.other-grid {
    padding: 30px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    background: #fff9e0;
}
.feat-detail p { font-size: var(--fs-16); line-height: 1.9; color: var(--brown); margin: 0; }
/* その他の機能（アイコン上・名前下） */
.other-sec { max-width: 1000px; margin: 0 auto 40px; }
.other-grid {
    padding: 30px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 36px 24px;
    background: #fff9e0;
}
.other-item { text-align: center; }
.other-item .oicon {
    display: block;
    width: 90px;
    max-width: 100%;
    height: auto;
    margin: 0 auto 8px;
}
.other-item h5 { font-weight: 800; color: var(--brown); font-size: var(--fs-16); margin-bottom: 8px; min-height: 24px; }
.other-item p { font-size: var(--fs-16); color: var(--brown); text-align: left; line-height: 1.7; }

/* =========================================================
   会社概要ページ (1058:6049)
   ========================================================= */
.company-intro { padding: clamp(32px, 5.6vw, 56px) 0 clamp(26px, 4.2vw, 40px); position: relative; overflow: hidden; }
.company-intro .wrap { position: relative; }
.company-intro h2 { font-size: var(--fs-h2); color: var(--orange); margin-bottom: 12px; }
.company-intro h2 .t { color: var(--brown); }
.company-intro .sub { font-size: var(--fs-22); font-weight: 800; color: var(--brown); line-height: 1.4; margin-bottom: 18px; max-width: 680px; }
.company-intro .desc { font-size: var(--fs-16); line-height: 1.75; color: var(--brown); max-width: 720px; }
.company-intro .ci-illust { position: absolute; top: 0; right: 0; width: 320px; }
.company-intro .ci-illust img { width: 100%; }

.company-profile { padding: 6px 0 40px; }
.company-profile > .wrap > h2 { font-size: var(--fs-h2); color: var(--orange); margin-bottom: 24px; }
.cp-grid { display: grid; grid-template-columns: 1fr 360px; gap: 30px; align-items: start; }
.cp-table { background: #fffef4; padding: 20px; display: grid; gap: 20px; align-content: start; }
.cp-row { display: flex;  align-items: flex-start; border-bottom: 1px solid var(--brown); padding-bottom: 10px; font-size: var(--fs-16); line-height: 1.7; }
.cp-row:last-child { border-bottom: none; padding-bottom: 0; }
.cp-row .lbl { font-weight: 700; width: 90px; flex: none; color: var(--brown); }
.cp-row .val { color: var(--brown); }
.cp-row .val small { font-size: var(--fs-14); }
span.val_title {
    display: block;
    text-indent: -0.5rem;
}
span.val_title.west {
    margin-top: 10px;
}
.cp-map img { width: 100%; border-radius: 4px; }
section.intro.company {
    padding: 20px 0 0 0;
}
/* =========================================================
   お知らせ一覧ページ (1058:6205)
   ========================================================= */
.news-page {
    margin: 80px 0;
}
.news-tabs { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; max-width: 910px; margin: 0 auto 30px; }
.news-tab { width: 210px; max-width: 100%; padding: 12px 10px; border-radius: 86px; font-size: var(--fs-16); font-weight: 800; line-height: 1; cursor: pointer; background: #fff; border: 2px solid var(--orange); color: var(--orange); transition: filter .15s, background .15s, color .15s; text-align: center; }
.news-tab.is-active { background: var(--orange); color: #fff; }
.news-tab:hover { filter: brightness(1.03); }
.news-list { max-width: 910px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.news-row { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 28px 4px; border-top: 1px solid #f6efdf; border-bottom: 1px solid #f6efdf; color: var(--brown); }
.news-row .nr-main { display: flex; align-items: center; gap: 20px; }
.news-row .nr-date { display: inline-flex; align-items: baseline; gap: 6px; width: 110px; flex: none; }
.news-row .nr-date .y { font-size: var(--fs-16); font-weight: 500; }
.news-row .nr-date .md { font-size: var(--fs-18); font-weight: 700; letter-spacing: -.02em; }
.news-row .nr-title { font-size: var(--fs-16); font-weight: 700; line-height: 1.5; }
.news-row .nr-arrow { width: 35px; height: 35px; border-radius: 50%; background: var(--brown); color: #fff; display: grid; place-items: center; flex: none; font-size: var(--fs-16); }
.news-row:hover .nr-arrow { background: var(--orange); }
.news-empty {
    text-align: center;
    color: var(--gray-text);
    padding: 33.5px 0;
}
/* =========================================================
   Q&Aページ (1058:6352)
   ========================================================= */
.faq-page {
    margin: 80px 0;
}
.faq-tabs { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; max-width: 1003px; margin: 0 auto 30px; }
.faq-tab { width: 180px; max-width: 100%; padding: 12px 10px; border-radius: 86px; font-size: 16px; font-weight: 800; line-height: 1; cursor: pointer; background: #fff; border: 2px solid var(--orange); color: var(--orange); transition: filter .15s, background .15s, color .15s; text-align: center; }
.faq-tab.is-active { background: var(--orange); color: #fff; }
.faq-tab:hover { filter: brightness(1.03); }
.faq-list { max-width: 1003px; margin: 0 auto; display: flex; flex-direction: column; gap: 30px; }
.faq-item { background: #fff; border: 2px solid #f7f0e0; border-radius: 10px; overflow: hidden; }
.faq-q { display: flex; gap: 20px; align-items: center; background: #f7f0e0; padding: 10px; }
.faq-a { display: flex; gap: 20px; align-items: flex-start; padding: 10px 10px 14px; }
.faq-q .mark, .faq-a .mark {
    background: #fff;
    border-radius: 100px;
    min-width: 40px;
    padding: 5px 5px 13px 5px;
    font-size: var(--fs-24);
    font-weight: 800;
    color: var(--brown);
    line-height: 1;
    text-align: center;
    flex: none;
}
.faq-q .qt { font-size: var(--fs-20); font-weight: 800; color: var(--brown); line-height: 1.45; }
.faq-a .at { font-size: var(--fs-16); font-weight: 500; color: var(--brown); line-height: 1.6; }
.faq-empty { text-align: center; color: var(--gray-text); padding: 30px 0; }
/* =========================================================
   お問い合わせページ (1058:6480) ／ Contact Form 7
   ========================================================= */
.contact-page { padding: clamp(26px, 4.4vw, 44px) 0 10px; }
.contact-form {
    background: #f6efdf;
    border-radius: 10px;
    max-width: 800px;
    margin: 0 auto 40px;
    padding: 20px 20px 30px;
}
.contact-form .cf-field { margin-bottom: 30px; }
.contact-form .cf-field > label { display: block; font-size: var(--fs-18); font-weight: 700; color: var(--brown); margin-bottom: 10px; }
.contact-form .req { color: #e2401c; font-size: var(--fs-14); font-weight: 700; margin-left: 8px; }
.contact-form .wpcf7-form-control-wrap { display: block; }
.contact-form select,
.contact-form textarea,
.contact-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]) {
  width: 100%; background: #fff; border: 1px solid #ece3d2; border-radius: 5px;
  padding: 15px 12px; font-size: var(--fs-16); color: var(--brown); font-family: inherit; line-height: 1.5;
}
.contact-form ::placeholder { color: #d1d1d1; }
.contact-form select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M1 1l7 7 7-7' stroke='%23634a4a' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.contact-form textarea { height: 200px; resize: vertical; }
.contact-form .cf-half select,
.contact-form .cf-half input:not([type="submit"]) { max-width: 320px; }
.contact-form .cf-submit { margin-top: 20px; }
.contact-form input[type="submit"],
.contact-form .wpcf7-submit {
  width: 100%; background: var(--brown); color: #fff; border: none; border-radius: 10px;
  padding: 16px 30px; font-size: var(--fs-22); font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 0 rgba(0,0,0,.35); transition: filter .15s, transform .1s;
}
.contact-form input[type="submit"]:hover { filter: brightness(1.08); }
.contact-form input[type="submit"]:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.35); }
/* CF7 バリデーション・送信結果メッセージ */
.contact-form .wpcf7-not-valid-tip { color: #e2401c; font-size: var(--fs-14); margin-top: 4px; }
.wpcf7 form .wpcf7-response-output {
    margin: 20px 0 0 0;
    padding: 0;
    border: none;
    text-align: center;
    color: #ff0000;
    font-weight: bolder;
}
body.wp-singular.page-template-default.page.page-id-123 .cta-block-top.bottom p.cta-lead,body.wp-singular.page-template-default.page.page-id-123 a.btn.btn-pink{
    display: none;
}
body.wp-singular.page-template-default.page.page-id-123 .cta-block-top.bottom {
    background: #fff;
    padding: 0;
    margin: 20px 0;
}
body.wp-singular.page-template-default.page.page-id-123 .home-link a {
    font-weight: 800;
    color: #634a4a;
}
/* =========================================================
   導入事例ページ (1058:4702)
   ========================================================= */
.works { padding: clamp(30px, 4.8vw, 50px) 0 clamp(36px, 5vw, 60px); }
.works-article { max-width: 1000px; margin: 0 auto; }
.works-headline { font-size: var(--fs-28); font-weight: 800; color: var(--orange); line-height: 1.35; margin-bottom: 12px; }
.works-sub { font-size: var(--fs-20); color: var(--brown); margin-bottom: 30px; }
.works-company { font-size: var(--fs-22); font-weight: 800; color: var(--brown); border-bottom: 1px solid var(--brown); padding: 10px; margin-bottom: 24px; }
.works-overview { display: flex; gap: 40px; align-items: flex-start; margin-bottom: 44px; }
.works-spec { display: flex; flex-direction: column; gap: 16px; width: 410px; flex: none; }
.works-spec .row { display: flex; align-items: center; gap: 24px; }
.works-spec .lbl { background: #dfceba; color: var(--brown); font-weight: 800; font-size: var(--fs-18); border-radius: 41px; padding: 6px 20px; width: 194px; text-align: center; flex: none; }
.works-spec .val { font-weight: 800; font-size: var(--fs-18); color: var(--brown); }
.works-photos { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.works-photos figure { margin: 0; }
.works-photos figure img { width: 100%; border-radius: 4px; }
.works-photos figcaption { font-size: var(--fs-14); color: var(--brown); margin-top: 8px; line-height: 1.6; }
.works-bg-head { font-size: var(--fs-28); font-weight: 800; color: var(--brown); margin-bottom: 14px; }
.works-body { background: #fefbed; border-radius: 9px; padding: 24px; }
.works-kicker { font-weight: 800; color: var(--brown); font-size: var(--fs-20); margin-bottom: 2px; }
.works-kicker .sm { font-size: var(--fs-18); margin-left: 8px; }
.works-subhead { font-weight: 800; color: var(--brown); font-size: var(--fs-18); margin-bottom: 18px; }
.works-body-inner { background: #fff; padding: 24px; }
.works-body-inner p { font-size: var(--fs-16); line-height: 1.9; color: var(--brown); margin-bottom: 18px; }
.works-body-inner p:last-child { margin-bottom: 0; }
.works-body-inner b { font-weight: 800; }
.works-body-inner h3 { font-size: var(--fs-18); font-weight: 800; color: var(--brown); margin: 22px 0 8px; }

/* =========================================================
   背景装飾オブジェクト（薄オレンジ／薄黄のブロブ）
   NEWS〜CHARTS〜MAP の背面にうっすら配置。
   ※位置は top/left/right/bottom、大きさは width/height で調整できます
   ========================================================= */
.news, .charts, .map-sec { position: relative; overflow: hidden; }
.news > .wrap, .charts > .wrap, .map-sec > .wrap { position: relative; z-index: 1; }
.news::before, .news::after,
.charts::before, .charts::after,
.map-sec::before, .map-sec::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: contain;
}

/* NEWS：黄（左上）・オレンジ（右）
.news::before {
    width: 13.54vw;
    height: 13.54vw;
    top: 17.71vw;
    left: 2.5vw;
    background-image: url("http://fractal-dev.net/wilk-test/wp-content/uploads/2026/06/object_yellow.png");
}
.news::after {
    width: 230px;
    height: 230px;
    top: 150px;
    right: 40px;
    background-image: url("http://fractal-dev.net/wilk-test/wp-content/uploads/2026/06/object_orange.png");
} */
/* CHARTS：黄（左）・オレンジ（右下）
.charts::after {
    width: 250px;
    height: 250px;
    top: 20px;
    right: 130px;
    background-image: url("http://fractal-dev.net/wilk-test/wp-content/uploads/2026/06/object_orange.png");
}*/
/* MAP：黄（左下）・オレンジ（右上）
.map-sec::before {
    width: 220px;
    height: 220px;
    top: 30px;
    left: 150px;
    background-image: url("http://fractal-dev.net/wilk-test/wp-content/uploads/2026/06/object_yellow.png");
}*/
.sp{
		display:none;
	}
/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {
  /* ハンバーガーメニュー */
  .site-header .inner { flex-wrap: wrap; }   /* position:relative は付けない（ドロワーは .site-header 基準で全幅表示） */
  .nav-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; margin-left: auto; padding: 0; background: none; border: none; cursor: pointer; }
  .nav-toggle span { display: block; width: 26px; height: 3px; margin: 0 auto; background: var(--brown); border-radius: 2px; transition: .2s; }
  /* SPメニュー：.gnav 自体をトップバー直下にオーバーレイ表示する。
     .nav-drawer ラッパーの有無に関係なく機能し（メニューは .gnav のみ）、
     absolute なので下のコンテンツ（FV等）を一切押し下げない。
     開閉は opacity / visibility / transform ＋ transition でゆっくりなめらかに。 */
  .gnav {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    margin-left: 0;              /* PCの margin-left:auto を打ち消す */
    width: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    box-shadow: 0 10px 14px rgba(99,74,74,.12);
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    z-index: 200;
    padding: 4px 12px 12px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transform-origin: top center;
    transition: opacity .35s ease,
                transform .35s cubic-bezier(.22, .61, .36, 1),
                visibility .35s ease;
  }
  .site-header.nav-open .gnav { opacity: 1; visibility: visible; transform: translateY(0); }
  .gnav ul, .gnav .gnav-menu { flex-direction: column; align-items: stretch; width: 100%; gap: 0; }
  .gnav li { display: block; width: 100%; }
  .gnav a { display: block; width: 100%; padding: 13px 6px; border-top: 1px solid var(--line); }
  @media (prefers-reduced-motion: reduce) { .gnav { transition: none; } }
  .site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .intro .inner, .map-sec .inner { grid-template-columns: 1fr; }
	.intro .inner {
    gap: 10px;
}
  .feature-grid, .news-grid, .mon-grid, .paper-grid { grid-template-columns: 1fr 1fr; }
 .satisfy-grid,  .voice-list { grid-template-columns: 1fr; }
  .flow-line { display: none; }
  .map-sec h2 { padding-left: 0; }
  /* 下層ページ */
  .product { flex-direction: column; align-items: stretch; gap: 0px; }
  .product .pcol-img { width: 100%; }
  .option-card { grid-template-columns: 1fr; }
  /* スマホ：表は横スクロール＋左「サイネージ名」列を固定／見出し・カテゴリ行は固定 */
  .lineup-table-sec .lu-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .lu-table { min-width: 760px; }
  .lu-table thead th:first-child,
  .lu-table td.name { position: sticky; left: 0; z-index: 1; box-shadow: 2px 0 0 var(--line); }
  .lu-table thead th:first-child { z-index: 2; background: #fff; }
  .lu-table td.name { background: #fffdf4; }
  /* カテゴリ行（タッチ型ディスプレイ等）のラベルを左に固定して常に表示 */
  .lu-table .grp td { text-align: left; }
  .lu-table .grp .grp-in { position: sticky; left: 16px; display: inline-block; }
.page-hero h1 {
    font-size: var(--fs-28);
    padding: 0 10px;
}
  .page-hero .wm { font-size: var(--fs-56); }
  .func-intro, .feat-block, .other-sec { margin-left: 12px; margin-right: 12px; }
  .feat-main, .feat-main.narrow, .feat-main.banner, .feat-main.narrow.line { grid-template-columns: 1fr; gap: 18px; }
  .feat-main .fimg img { max-width: 320px; margin: 0 auto; }
  .feat-templates { grid-template-columns: 1fr;gap: 30px; }
  .solve-box ul, .solve-box ul.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .other-grid { grid-template-columns: repeat(2, 1fr); }
  /* 会社概要 */
  .company-intro .ci-illust { position: static; width: 260px; margin: 24px auto 0; }
  .cp-grid { grid-template-columns: 1fr; }
  /* CHARTS+MAP（タブレット）：地図行は折返し */
  .charts .map { width: 180px; }
	.decoration {
    top: -3rem;
}
}

/* ===== SP（スマホ）※見出しサイズは clamp() で全幅フルード制御。ここでは固定しない ===== */
@media (max-width: 480px) {
  .news-grid, .mon-grid, .mon-grid.row2, .paper-grid, .casenews-grid { grid-template-columns: 1fr; }
  /* 機能カードは2列（SP） */
  .feature-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .fcard .fbody { padding: 12px 10px 14px; }
  .fcard .fbody img { margin-bottom: 10px;width: 100%; }
	.fbody.touch img {
    width: 85%;
}
  /* お知らせカードを横並び（SP） */
  .ncard { display: flex; gap: 12px; align-items: stretch; padding: 12px; }
  .ncard .nthumb, .ncard > img { width: 110px; height: 74px; flex: none; }
  .ncard .nthumb { overflow: hidden; }
  .ncard .nbody { flex: 1; margin-top: 0; display: flex; flex-direction: column; justify-content: center; }
  .ncard .ndate { font-size: var(--fs-14); }
  .ncard h3 { margin-top: 4px; }
  /* メリット（SP：白カード＋アイコンボックス＋全幅説明文 / 1182:7194） */
  .merit-panel { background: none; padding: 0; }
  .merit-list { gap: 15px; }
  .mrow { position: relative; display: block; background: #fff; border-radius: 10px; padding: 14px; gap: 0; box-shadow: 0 1px 6px rgba(91,74,66,.08); }
  .mrow .micon { position: absolute; top: 14px; left: 14px; width: 54px; height: 54px; background: #e8ded1; border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; flex: none; }
  .mrow .micon img { width: 40px; height: 40px; border-radius: 0; }
  .mrow .mtext { background: none; border-radius: 0; padding: 0; }
  .mrow .mtitle { margin: 0 0 10px 66px; min-height: 54px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; border-bottom: 1px solid var(--orange); padding-bottom: 5px; }
  .mrow .mtitle .badge { border-radius: 4px; padding: 3px 8px; font-size: var(--fs-14); }
  .mrow .mtitle h3 { font-size: var(--fs-14); line-height: 1.4; }
  .mrow .mtext p { font-size: var(--fs-14); line-height: 1.45; }
  .merit .satisfy-head { font-size: 16px; }
  /* モニター（SP：1列・画像中央・サイズ左寄せ＋全幅下線 / 1188:7362） */
  .monitors .sub, .mon-note { font-size: var(--fs-15); text-align: left; padding: 10px 14px; line-height: 1.6; margin-bottom: 24px; }
  .mon-grid, .mon-grid.row2 { gap: 30px; }
  .moncard { text-align: left; }
  .moncard .pic { margin-bottom: 8px; }
  .moncard .pic img { max-height: 240px; width: auto; max-width: 88%; }
  .moncard .size { font-size: var(--fs-18); text-align: left; }
  .moncard p { padding: 0; }
  .feat-bar .fbar-in { font-size: var(--fs-21); }
.func-intro {
    font-size: var(--fs-16);
    font-weight: 500;
    padding: 20px 0 10px;
}
  .feat-body { padding: 10px; }
	.voice-block {
    padding: 10px;
}
  .solve-box { padding: 10px; }
  .solve-box ul, .solve-box ul.cols-2, .solve-box ul.cols-4 { grid-template-columns: 1fr; }
  .fvcard .fv-bubble { width: auto; flex: 1;padding: 10px; }
.other-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 10px;
}
  .other-item p { font-size: var(--fs-14); }
  .news-tabs { gap: 12px; }
  .news-tab { width: calc(50% - 6px); font-size: var(--fs-16); padding: 10px 6px; }
  .news-row { gap: 16px; padding: 18px 2px; }
  .news-row .nr-date { width: 92px; }
	.faq-tabs { gap: 10px;     justify-content: flex-start;}
.faq-tab { width: calc(50% - 6px); font-size: var(--fs-16); padding: 7px 0px; }
	.faq-q .qt {
    font-size: var(--fs-16);
}
	.faq-a .at {
    font-size: var(--fs-14);
}
	/* よくある質問（TOP / SP） */
	.qa .sec-head .en { font-size: var(--fs-18); }
.qitem .q, .qitem .a {
    gap: 10px;
    align-items: center;
}
.qitem .q .m, .qitem .a .m {
    font-size: var(--fs-22);
    min-width: 40px;
    padding: 4px 0 0 0;
}
	.qitem .q h3 { font-size: var(--fs-16); }
	.qitem .a p { font-size: var(--fs-14); }

	/* 現場改善事例 ポップアップ（SP） */
	.cn-modal-body { padding: 30px 10px 10px; }
	.cn-detail-title { font-size: var(--fs-16); }
	.contact-form input[type="submit"], .contact-form .wpcf7-submit {

    padding: 10px;
    font-size: var(--fs-18);

}
.contact-form {
    padding: 20px 20px 20px;
    margin: 20px 0;
}
	.page-hero .wm {
    top: 20px;
}
	.btn-pink {
    font-size: var(--fs-20);
}
.site-footer .inner {
    flex-wrap: wrap;
    padding: 20px 10px;
    gap: 20px;
}
	.site-footer {
    padding: 10px 0 0 0;
}
.site-footer .pagetop {
    right: 0;
    /* margin-left: auto; */
    top: auto;
    bottom: 0;
}
	.site-footer .pagetop {
    padding: 25px 15px 10px 20px;
}
.f-contact {
    width: 100%;
    margin-bottom: 10px;
}
	/* ラインナップ 商品カード（SP：タイトル→説明→画像→詳細の順 / 添付レイアウト） */
.product {
    padding: 16px;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}
	.product .pbody { display: contents; }
	.product .pbody > * { order: 4; }
	.product .pbody h3 { order: 1; }
.product .pbody .desc {
    order: 2;
    text-align: left;
    margin: 0;
}
.product .pcol-img {
    order: 3;
    width: 100%;
    padding-top: 10px;
    margin-bottom: 20px;
}
.site-footer .fnav {
    margin-left: 10px;
    gap: 10px 50px;
}
.works-spec .lbl {
    font-size: var(--fs-14);
    padding: 3px 0px;
    width: 140px;
}
	.works-spec .val {
    font-size: var(--fs-16);
}
	.works-kicker {
    font-size: var(--fs-18);
}
	/* 改善事例（SP） */
	.cases .lead, .cases .note { font-size: var(--fs-18); }
	.cases .panel-wrap { padding: 14px; }
	.cases .panel-wrap > h3 { font-size: var(--fs-18); }
	.cs-q .ava { width: 80px; height: 80px; }
	.cs-fname { font-size: var(--fs-20); }
.fcard .cap {
    font-size: var(--fs-14);
    text-align: left;
}
	section.map-sec  .wrap {
    width: 100%;
}
	.map-sec {
    padding: 0;
}
	.decoration {
    top: -2rem;
}
.type-divider {
    font-size: 18px;
    margin-bottom: 20px;
}
	.lineup-detail {
    padding: 20px 0 40px 0;
}
.product .pbody h3 {
    text-align: left;
    font-size: 18px;
}
.fimg.line {
    width: 40%;
    margin: auto;
}
	/* 背景装飾オブジェクト（SP：小さく）
	.news::before, .news::after,
	.charts::before, .charts::after,
	.map-sec::before, .map-sec::after { width: 120px; height: 120px; }
	.cn-modal-box {
    top: 15%;
} */
	.features {
    border-radius: 0;
}
	.sp{
		display:block;
	}
h2.map-head {
    font-size: 1.5rem;
    border: none;
}
	.mrow .mtitle h3 {
    font-size: 15px;
}
	.satisfy-box {
    padding: 20px 10px;
}
	p.slash-head.satisfy-head img {
    width: 80%;
}
	.scard {
    align-items: self-start;
}

	.chart-col .chart-title {;
    font-size: 20px;
}
	.charts .map {
    width: 200px;
    position: absolute;
    right: 0;
    top: 20%;
}
.map-row {
    position: relative;
    padding-bottom: 150px;
    justify-content: flex-start;
}
.monitors .ttl {
    display: block;
    margin-bottom: 0px;
}
	.monitors .sub, .mon-note {
    font-size: 16px;
}
	.moncard .size {
    font-size: 18px;
}
	.cases .slash-head {
    font-size: 19px;
}
.cases .note {
    font-size: 15.5px;
    margin: 20px 0;
    text-align: left;
}
	.cases .lead,{
   font-size: 16px;
    margin: 0px
	}
.cases .slash-head {
    font-size: 19px;
    margin-bottom: 15px;
}
	.cases .panel-wrap > h3 {
    font-size: 17px;
    line-height: 1.4;
    margin-bottom: 15px;
}
	.cases {
    padding: clamp(25px, 5vw, 60px) 0 clamp(40px, 5.3vw, 64px);
}
	.cs-q .bubble {
    height: auto;
}

	.lineup-table-sec h2 {
    font-size: 20px;
}
.slash-head {
    font-size: 16px;
    line-height: 1.3;
}
.product .pphoto {
    height: 230px;
    padding: 0;
}
	.spec-head {
    padding: 5px 5px;
}
.spec-body {
    padding: 0px;
    margin-bottom: 10px;
}
.parts-list {
    padding: 0px 0 0 20px;
    margin-bottom: 10px;
}
	.cond-box {
    padding: 15px;
}
	.intro .sub {
    font-size: 16px;
}
	.features span.k::before {
    top: -31px;
	 right: 8px;
}
	.illust img {
    width: 60%;
}
	h2.slash-head span.title-decoration {
    display: inline-block;
    width: 14%;
}
	p.slash-head.satisfy-head span.title-decoration {
    width: 9.6%;
}
	/* 改善事例の見出し（実際の改善事例をいくつかご紹介!）をSPで1行に収める */
.cases .ttl {
    flex-wrap: nowrap;
    align-items: center;
    white-space: nowrap;
    gap: 4px;
    margin-bottom: 20px;
}
	span.ttl-flex {
    display: flex;
    flex-direction: column;
}
.cases .ttl span.title-decoration.left {
    width: 12%;
}
	/* FLOW（SP / Figma 1320:839）：画像は非表示。各カードの上に日付見出しを表示して縦並び */
	.flow-img { display: none; }
	.flow-wrap { display: block; }
	.flow-row { display: flex; flex-direction: column; gap: 0; }
	.flow-row .flow-when { display: block; text-align: center; font-weight: 800; color: var(--brown); font-size: 16px; margin: 24px 0 10px; }
	.flow-row .flow-when:first-child { margin-top: 0; }
	.flowcard .fc-head { min-height: 0; padding: 12px 10px; font-size: var(--fs-20); }
	.flowcard .fc-body { padding: 14px; font-size: var(--fs-16); }
	.case-grid,.chart-row {
    grid-template-columns: 1fr;
}
	.decoration-bottom {
    position: absolute;
    bottom: -35px;
}
section#qa {
    margin: 4rem 0 4rem 0;
}
	p.lorem {
    width: 90%;
    margin: 40px auto 40px;
}
	.option-card {
    padding: 20px;
}
	.ophoto {
    width: 30%;
	margin:auto;
}
	.aioseo-breadcrumbs {
    padding: 0 10px;
}
	.fvcard .ava {
    width: 58px;
    height: 58px;
}
	.fvcard .fv-bubble::before {
    left: -21px;
    top: 10px;
		    border: 13px solid transparent;
}
	.fimg.qa {
    width: 50%;
    margin: auto;
}
	.feat-main.narrow .fimg {
    width: 60%;
    margin: auto;
}
	.intro {
    width: 90%;
		    padding: 10px;
}
	.feat-main.narrow.line {
    flex-direction: column;
		    width: 100%;
}
	.feat-main.narrow.line .fimg {
    width: 30%;
    margin: auto;
}
	h1.inner {
    padding: 5px;
    font-size: 13px;
}
	.features .note {
    font-size: 18px;
}
	.video-contents {
    width: 90%;
    margin: auto;
}
	span.video-arrow {
    font-size: 16px;
}
	.charts-cap {
    font-size: 18px;
}
	.charts {
    padding: clamp(0px, 5.3vw, 64px) 0;
}
	.charts-map img {
    width: 50%;
}
	li#menu-item-127 {
    padding: 0px;
    text-align: center;
}
	li#menu-item-127 a {
    padding: 10px;
}
	.header-inner {
    flex-direction: column;
}
	.hbtn {
    padding: 5px;
    border-radius: 5px;
}
	.header-btns {
    justify-content:center;
}
	a.btn.btn-pink {
    padding: 10px 20px;
    font-size: 16px;
}
	p.cta-lead {
    font-size: 16px;
}
	.cta-block-top span {
    width: 20%;
}
	.cta-block-top {
    padding: 30px 0px;
    margin: 0px 0 0px 0;
}
	.voice {
    margin: 0;
}
	.wrap {
    padding: 0 10px;
}
	.feat-main.banner {
    flex-direction: column;
    align-items: center;
		gap: 10px;
}
/* 	.fimg.banner {
    width: 60%;
}*/
	.company-profile {
    padding: 0px;
}
	section.intro.company{
	width: 100%;
	}
	span.SDGs_logo {
    width: 100%;
}
	h1.entry-title {
    font-size: 20px;
    margin: 10px;
}
	main#primary {
    padding: 0 10px;
}
	.vcard h3 {
    font-size: 16px;
}
	.solve-box ul {
    padding-left: 7%;
}
br.pc {
    display: none;
}
	.news-empty {
    padding: 28.7px 0;
}
	.casenews-card .cn-desc {
    height: 50px;
    max-height: 50px;
}
	.lu-table th, .lu-table td {
    padding: 5px;
}
	small span {
    font-size: 12px;
}
	small {
    line-height: 0.9;
}
	.cond-inner {
    padding: 15px;
}
	.faq-page {
    margin: 40px 0;
}
}

/* ========================================================= FV スライダー（SP：横幅=デバイス幅・高さ600px以内・両端チラ見せなし） */
@media (max-width: 480px) {
  .fv-slider { padding: 8px 0 6px; }
  .fv-slider .swiper-slide { width: 100vw; opacity: 1; }      /* デバイス幅いっぱい（前後のチラ見せなし） */
  .fv-slider .swiper-slide img { max-height: 600px; object-fit: cover; border-radius: 0; }  /* 高さは最大600pxまで */
}