:root{
  --kinari:#efede3;      /* 生成り（背景） */
  --kinari-usu:#f6f4ec;
  --moji:#243528;        /* 文字：黒ではなく深い緑 */
  --moji-usu:#414e45;
  --fuka:#2b3a2e;        /* 濃い面 */
  --koke:#7d8c6e;        /* 苔・差し色 */
  --sen:#cfcbbc;         /* 細い罫線 */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--kinari);color:var(--moji);
  font-family:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic","YuGothic",sans-serif;
  font-size:16px;line-height:2.05;letter-spacing:.04em;
  font-feature-settings:"palt";
}
/* 見出しは明朝（Zen Old Mincho） */
h1,h2,h3,h4,.mincho,.midashi,.kazu .n,.ichiran .t{
  font-family:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.en{letter-spacing:.3em;text-transform:uppercase;font-size:12px;line-height:1.8}

.wrap{max-width:1120px;margin:0 auto;padding:0 40px}
.narrow{max-width:720px;margin:0 auto;padding:0 40px}
@media(max-width:700px){.wrap,.narrow{padding:0 24px}}

/* ── 試作の説明帯 ── */
.proto{background:#38423a;color:#e6e2d6;font-size:12px;letter-spacing:.05em;
  line-height:1.9;padding:11px 24px;text-align:center;font-family:sans-serif}
.proto b{color:#ddd08a}
.kari{background:rgba(190,160,40,.2);box-shadow:0 1px 0 rgba(160,130,20,.35);padding:0 2px}

/* ── ヘッダー ── */
header{padding:34px 0 0}
.hd{display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:block;width:300px;max-width:66vw;line-height:0;flex:0 0 auto}
.logo img{width:100%;height:auto;display:block}
nav{display:flex;align-items:center;gap:26px;flex:0 0 auto}
nav a{font-size:14px;letter-spacing:.1em;padding-bottom:4px;border-bottom:1px solid transparent;white-space:nowrap}
nav a:hover{border-color:var(--koke)}
@media(max-width:1180px){nav{display:none}}

/* ── ヒーロー（非対称の写真配置） ── */
.hero{padding:56px 0 0;position:relative}
.hero-photos{display:grid;grid-template-columns:1.55fr 1fr;gap:0 56px;align-items:start}
.hero-copy{padding:118px 0 0;max-width:640px;margin:0 auto;text-align:center}
.hero-copy .en{color:var(--koke);margin-bottom:32px}
.hero-copy h1{font-size:clamp(21px,3vw,29px);font-weight:500;line-height:2.35;letter-spacing:.14em}
.hero-copy p{margin-top:40px;color:var(--moji-usu);font-size:16px}
@media(max-width:840px){
  .hero-photos{grid-template-columns:1fr;gap:20px}
  .hero-photos .b{width:72%;margin-left:auto}
}

/* ── 写真の入る場所 ── */
.ph{background:#e4e0d2;border:1px solid #d4cfbe;
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:#9c9682;font-size:11.5px;letter-spacing:.1em;line-height:2;padding:16px;
  font-family:sans-serif}
.ph-16x9{aspect-ratio:16/9}.ph-4x3{aspect-ratio:4/3}.ph-3x4{aspect-ratio:3/4}.ph-1x1{aspect-ratio:1/1}

/* ── セクション ── */
section{padding:150px 0}
@media(max-width:700px){section{padding:96px 0}}
.sec-head{margin-bottom:64px}
.sec-head .en{color:var(--koke);margin-bottom:20px}
h2{font-size:clamp(19px,2.4vw,25px);font-weight:500;letter-spacing:.16em;line-height:2}
.lead{color:var(--moji-usu);font-size:16px}

/* ── 罫線ボタン ── */
.btn{display:inline-block;border:1px solid var(--moji);padding:17px 44px;
  font-size:13.5px;letter-spacing:.22em;transition:background .25s,color .25s;
  color:var(--moji);background:transparent;
  -webkit-appearance:none;appearance:none;border-radius:0}
.btn-l{border-color:rgba(239,237,227,.6);color:var(--kinari)}

/* カーソルを使う機器でのみ、重ねたときに反転させる（スマホで色が残らないように） */
@media(hover:hover){
  .btn:hover{background:var(--moji);color:var(--kinari)}
  .btn-l:hover{background:var(--kinari);color:var(--fuka)}
}
/* 押している間は、どの機器でも反転させる */
.btn:active{background:var(--moji);color:var(--kinari)}
.btn-l:active{background:var(--kinari);color:var(--fuka)}
/* キーボード操作時の目印 */
.btn:focus-visible{outline:2px solid var(--koke);outline-offset:3px}

/* ── about ── */
.about{display:grid;grid-template-columns:1fr 1.15fr;gap:80px;align-items:center}
@media(max-width:840px){.about{grid-template-columns:1fr;gap:44px}}

/* ── 数字 ── */
.kazu{display:grid;grid-template-columns:repeat(4,1fr)}
.kazu li{list-style:none;text-align:center;padding:44px 12px;border-left:1px solid var(--sen)}
.kazu li:last-child{border-right:1px solid var(--sen)}
.kazu .n{font-size:40px;letter-spacing:.04em;line-height:1.3}
.kazu .n span{font-size:14px;margin-left:5px;letter-spacing:.1em}
.kazu .t{font-size:12.5px;letter-spacing:.14em;color:var(--moji-usu);margin-top:12px;line-height:1.9}
@media(max-width:760px){
  .kazu{grid-template-columns:repeat(2,1fr)}
  .kazu li:nth-child(2n){border-right:1px solid var(--sen)}
  .kazu li:nth-child(-n+2){border-bottom:1px solid var(--sen)}
}

/* ── 活動 ── */
.acts{display:grid;grid-template-columns:repeat(3,1fr);gap:56px}
.act h3{font-size:17px;font-weight:500;letter-spacing:.14em;margin:30px 0 14px}
.act .en{font-size:10px;color:var(--koke);margin-top:22px}
.act p{font-size:15px;color:var(--moji-usu);line-height:2.1}
@media(max-width:840px){.acts{grid-template-columns:1fr;gap:64px}}

/* ── 企業・自治体（濃い面） ── */
.houjin{background:var(--fuka);color:#e8e5d9}
.houjin .en{color:#a8b79a}
.houjin .lead{color:#d4dacc}
.houjin .kari{background:rgba(255,235,150,.16);box-shadow:0 1px 0 rgba(255,235,150,.3)}
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:64px;margin-top:72px}
.svc .no{font-size:11px;letter-spacing:.24em;color:#a8b79a}
.svc h3{font-size:16.5px;font-weight:500;letter-spacing:.13em;margin:16px 0 16px;
  padding-bottom:18px;border-bottom:1px solid rgba(232,229,217,.22);line-height:1.9}
.svc p{font-size:15px;color:#d4dacc;line-height:2.1}
@media(max-width:840px){.svc{grid-template-columns:1fr;gap:48px}}

/* ── レポート ── */
.reps{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.rep .meta{font-size:12px;letter-spacing:.16em;color:var(--koke);margin:22px 0 10px}
.rep h3{font-size:16px;font-weight:500;line-height:2;letter-spacing:.1em}
.rep:hover h3{color:var(--koke)}
@media(max-width:840px){.reps{grid-template-columns:1fr;gap:52px}}

/* ── フッター ── */
footer{background:var(--fuka);color:#c3cabe;padding:110px 0 40px;font-size:14px;line-height:2.2}
.ft{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:56px}
.ft h4{color:#e8e5d9;font-size:16px;font-weight:500;letter-spacing:.14em;margin-bottom:22px}
.ft-logo-link{display:block;width:270px;max-width:100%;line-height:0;
  margin-bottom:26px;transition:opacity .25s}
.ft-logo{width:100%;height:auto;display:block}
.ft ul{list-style:none}
.ft li{margin-bottom:12px;font-size:13.5px;letter-spacing:.1em}
.ft a:hover{color:#fff}
.ft .kari{background:rgba(255,235,150,.16);box-shadow:0 1px 0 rgba(255,235,150,.3)}
/* 罫線は上の段組みと同じ幅、文章はその中で中央に */
.copy{border-top:1px solid rgba(232,229,217,.16);margin-top:72px;padding-top:40px;
  font-size:12.5px;letter-spacing:.06em;color:#a7aea3;line-height:2.15;text-align:center}
.copy p{max-width:840px;margin-left:auto;margin-right:auto}
.copy p + p{margin-top:10px}
.copy-c{margin-top:26px;color:#8b9289;letter-spacing:.08em}
@media(max-width:700px){
  .copy{padding-top:34px;text-align:left}
  .copy-c{text-align:center;margin-top:22px}
}
@media(max-width:840px){.ft{grid-template-columns:1fr;gap:44px}}
.center{text-align:center}
.toiawase{display:grid;grid-template-columns:1fr 1fr;gap:0}
.toiawase > div{padding:44px 32px;border-left:1px solid var(--sen);text-align:center}
.toiawase > div:last-child{border-right:1px solid var(--sen)}
.toiawase dt{font-size:14px;letter-spacing:.12em;color:var(--moji-usu);line-height:2;margin-bottom:22px}
.toiawase dd{font-size:18px;letter-spacing:.06em;line-height:1.7}
.toiawase .mail{border-bottom:1px solid var(--sen);padding-bottom:3px}
.toiawase .mail:hover{border-color:var(--moji)}
.toiawase .tel{letter-spacing:.08em}
.toiawase .hosoku{display:block;font-size:11.5px;letter-spacing:.14em;color:var(--moji-usu);margin-top:14px}
@media(max-width:700px){
  .toiawase{grid-template-columns:1fr}
  .toiawase > div{border:1px solid var(--sen);border-bottom:none;padding:36px 20px}
  .toiawase > div:last-child{border-bottom:1px solid var(--sen)}
}
.mokuhyo{list-style:none;counter-reset:m;margin-top:8px}
.mokuhyo li{counter-increment:m;position:relative;padding:26px 0 26px 62px;
  border-bottom:1px solid var(--sen);font-size:17px;letter-spacing:.1em;line-height:1.9}
.mokuhyo li:first-child{border-top:1px solid var(--sen)}
.mokuhyo li::before{content:counter(m,decimal-leading-zero);position:absolute;left:6px;top:26px;
  font-size:12px;letter-spacing:.16em;color:var(--koke)}
.koe{list-style:none;max-width:560px;margin:36px auto 0;text-align:left}
.koe li{position:relative;padding:12px 0 12px 26px;font-size:15px;color:#dde2d5;line-height:2}
.koe li::before{content:"";position:absolute;left:2px;top:23px;width:12px;height:1px;background:#a8b79a}

/* ── 下層ページ共通 ── */
.page-head{padding:88px 0 0;text-align:center}
.page-head .en{color:var(--koke);margin-bottom:20px}
.page-head h1{font-size:clamp(22px,3vw,30px);font-weight:500;letter-spacing:.18em;line-height:2}
.page-head .lead{margin-top:32px;max-width:640px;margin-left:auto;margin-right:auto}
.pan{padding:26px 0 0;font-size:12.5px;letter-spacing:.12em;color:var(--moji-usu)}
.pan a:hover{color:var(--moji)}

/* 本文ブロック */
.honbun p{margin-bottom:30px}
.honbun p:last-child{margin-bottom:0}
.midashi{font-size:18px;font-weight:500;letter-spacing:.14em;line-height:1.9;
  padding-bottom:20px;border-bottom:1px solid var(--sen);margin-bottom:36px}

/* 年表 */
.nenpyo{list-style:none}
.nenpyo li{display:grid;grid-template-columns:190px 1fr;gap:32px;
  padding:32px 0;border-bottom:1px solid var(--sen)}
.nenpyo li:first-child{border-top:1px solid var(--sen)}
.nenpyo dt,.nenpyo .y{letter-spacing:.12em;font-size:15px;line-height:1.9}
.nenpyo .y span{display:block;font-size:12.5px;
  letter-spacing:.1em;color:var(--koke);margin-top:6px}
.nenpyo .d{font-size:15px;color:var(--moji-usu);line-height:2.1}
@media(max-width:760px){.nenpyo li{grid-template-columns:1fr;gap:12px;padding:26px 0}}

.chui{display:inline-block;margin-top:8px;font-size:13px;letter-spacing:.06em;
  color:var(--moji-usu);line-height:1.9}

/* 8つの体験（カード） */
.taiken{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
.taiken li{list-style:none;padding:40px 36px;border-top:1px solid var(--sen);
  border-left:1px solid var(--sen);display:flex;gap:24px;align-items:flex-start}
.taiken li:nth-child(2n){border-right:1px solid var(--sen)}
.taiken li:nth-last-child(-n+2){border-bottom:1px solid var(--sen)}
.taiken .no{font-size:11px;letter-spacing:.16em;
  color:var(--koke);padding-top:8px;flex:0 0 auto}
.taiken .tx{font-size:15px;letter-spacing:.08em;line-height:2}
@media(max-width:760px){
  .taiken{grid-template-columns:1fr}
  .taiken li{border-right:1px solid var(--sen)}
  .taiken li:nth-last-child(-n+2){border-bottom:none}
  .taiken li:last-child{border-bottom:1px solid var(--sen)}
}

.tadashi{max-width:660px;margin:40px auto 0;font-size:13.5px;line-height:2.1;
  color:var(--moji-usu)}
.tadashi p{text-indent:-1.2em;padding-left:1.2em}
.tadashi p + p{margin-top:12px}
.tadashi b{font-weight:500;color:var(--moji)}

/* 体験できること｜実施状況のバッジ */
.taiken .jokyo{display:block;margin-top:14px;letter-spacing:0}
.badge{display:inline-block;font-size:11.5px;letter-spacing:.12em;
  padding:5px 11px;line-height:1.6;white-space:nowrap;
  font-family:"Zen Kaku Gothic New","Hiragino Sans",sans-serif}
.badge.on{background:var(--fuka);color:var(--kinari)}
.badge.off{border:1px solid var(--sen);color:var(--moji-usu);background:transparent}
.jokyo-note{display:block;margin-top:9px;font-size:12.5px;letter-spacing:.06em;
  line-height:1.9;color:var(--moji-usu)}

/* 箇条書き（点） */
.ten{list-style:none}
.ten li{position:relative;padding:0 0 20px 24px;font-size:15.5px;line-height:2.1}
.ten li::before{content:"";position:absolute;left:2px;top:15px;width:9px;height:1px;background:var(--koke)}

/* フォーム */
.form{max-width:640px;margin:0 auto}
.form .row{margin-bottom:36px}
.form label{display:block;font-size:14px;letter-spacing:.14em;margin-bottom:12px}
.form .hissu{color:#9a4a34;font-size:11.5px;letter-spacing:.12em;margin-left:10px;white-space:nowrap}
.form input[type=text],.form input[type=email],.form input[type=tel],
.form select,.form textarea{
  width:100%;background:#f7f5ee;border:1px solid var(--sen);padding:15px 16px;
  font-family:inherit;font-size:15px;color:var(--moji);letter-spacing:.06em;
  line-height:1.9;border-radius:0;-webkit-appearance:none;appearance:none}
.form select{background-image:linear-gradient(45deg,transparent 50%,var(--moji-usu) 50%),linear-gradient(135deg,var(--moji-usu) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.form textarea{min-height:190px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--koke);background:#fbfaf5}
.form .doui{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;line-height:2}
.form .doui input{margin-top:9px;flex:0 0 auto;accent-color:var(--fuka)}
.form .doui a{border-bottom:1px solid var(--sen)}
.form .hp{position:absolute;left:-9999px}
.form .btn{cursor:pointer;font-family:inherit}

/* お知らせ帯 */
.oshirase{background:#e6e3d6;border:1px solid var(--sen);padding:26px 30px;
  font-size:14.5px;line-height:2.1;color:var(--moji-usu);max-width:640px;margin:44px auto 0}
.oshirase b{color:var(--moji)}

/* レポート記事 */
.kiji{max-width:760px;margin:0 auto;padding:0 40px}
.kiji-date{font-size:13.5px;letter-spacing:.12em;color:var(--koke);margin-bottom:24px}
.kiji h2{font-size:18px;letter-spacing:.14em;margin:64px 0 28px;
  padding-bottom:18px;border-bottom:1px solid var(--sen)}
.kiji h2 .en{display:block;font-size:10px;color:var(--koke);margin-bottom:12px;letter-spacing:.24em}
.kiji p{margin-bottom:28px}
.kiji .ph{margin:36px 0}
.kiji-foot{max-width:760px;margin:88px auto 0;padding:36px 40px 0;position:relative;
  display:flex;justify-content:space-between;gap:20px;font-size:13px;letter-spacing:.1em}
.kiji-foot::before{content:"";position:absolute;left:40px;right:40px;top:0;height:1px;background:var(--sen)}
.kiji-sign{max-width:760px;margin-left:auto;margin-right:auto;padding:0 40px}

/* 一覧 */
.ichiran{list-style:none}
.ichiran li{border-bottom:1px solid var(--sen)}
.ichiran li:first-child{border-top:1px solid var(--sen)}
.ichiran a{display:grid;grid-template-columns:150px 1fr;gap:32px;padding:34px 4px;align-items:baseline}
.ichiran a:hover{background:#e9e6da}
.ichiran .d{font-size:12px;letter-spacing:.14em;color:var(--koke)}
.ichiran .t{font-size:16.5px;letter-spacing:.1em;line-height:1.9}
@media(max-width:760px){.ichiran a{grid-template-columns:1fr;gap:8px;padding:26px 4px}}

/* ── スマートフォン用メニュー ── */
.menu-toggle{position:absolute;opacity:0;pointer-events:none}
.menu-btn,.menu-ob{display:none}
@media(max-width:1180px){
  .hd{align-items:center}
  .menu-btn{display:block;position:relative;z-index:120;width:30px;height:22px;cursor:pointer;flex:0 0 auto}
  .menu-btn span,.menu-btn::before,.menu-btn::after{
    content:"";position:absolute;left:0;width:100%;height:1px;background:var(--moji);
    transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .2s}
  .menu-btn::before{top:3px}
  .menu-btn span{top:11px}
  .menu-btn::after{top:19px}
  .menu-toggle:checked ~ .menu-btn::before{transform:translateY(8px) rotate(45deg)}
  .menu-toggle:checked ~ .menu-btn span{opacity:0}
  .menu-toggle:checked ~ .menu-btn::after{transform:translateY(-8px) rotate(-45deg)}

  nav{display:flex;position:fixed;inset:0;z-index:110;
    flex-direction:column;justify-content:center;align-items:center;gap:0;
    background:var(--kinari);padding:0 32px;
    opacity:0;visibility:hidden;transform:translateY(-12px);
    transition:opacity .35s,transform .35s,visibility .35s}
  .menu-toggle:checked ~ nav{opacity:1;visibility:visible;transform:none}
  nav a{font-size:16px;letter-spacing:.16em;padding:22px 0;width:100%;max-width:340px;
    text-align:center;border-bottom:1px solid var(--sen) !important}
  nav a:first-of-type{border-top:1px solid var(--sen)}
}

/* ── 写真が入った枠 ── */
.ph-3x2{aspect-ratio:3/2}
.ph.fill{padding:0;border:none;background:#e4e0d2;overflow:hidden}
.ph.fill img{width:100%;height:100%;object-fit:cover;display:block}
.kiji .ph + .ph{margin-top:16px}

/* ── センサーカメラの映像 ── */
.movies{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:56px}
.movie{margin:0}
.movie video{width:100%;aspect-ratio:16/9;display:block;background:#1b211c;border:1px solid var(--sen)}
.movie figcaption{font-size:13.5px;letter-spacing:.08em;color:var(--moji-usu);
  margin-top:16px;line-height:2}
.movie figcaption b{font-weight:500;color:var(--moji);font-size:14px;letter-spacing:.12em}
@media(max-width:840px){.movies{grid-template-columns:1fr;gap:48px}}

/* ── 外部リンクの印 ── */
.gaibu{display:inline-block;margin-left:.5em;font-size:.82em;vertical-align:.05em;opacity:.7}

/* ── スマートフォン幅での左右の余白（他の指定より後に置くこと） ── */
@media(max-width:700px){
  .wrap,.narrow{padding-left:24px;padding-right:24px}
  .kiji{padding-left:24px;padding-right:24px}
  .kiji-foot{padding-left:24px;padding-right:24px}
  .kiji-foot::before{left:24px;right:24px}
  .kiji-sign{padding-left:24px;padding-right:24px}
  .btn{padding:16px 26px;letter-spacing:.16em}
  .logo{width:262px}
  .ft-logo-link{width:232px}
}

/* ── ロゴのリンク（カーソルを重ねたとき） ── */
@media(hover:hover){
  .logo:hover,.ft-logo-link:hover{opacity:.7}
}
.logo{transition:opacity .25s}