@charset "UTF-8";
/* ============================================================
   2026 リニューアル
   デザイン：創健社_WEBサイト_デザイン_26.10.19.pdf（看板・ロゴ・創健社についての部品は 26.10.23.pdf）
   寸法は幅1440pxの画面を基準にした値。--u は 1440 分の 1 の幅。
   ============================================================ */

:root {
  --u: calc(min(100vw, 1440px) / 1440);
  --r26-ink: #221815;
  --r26-yellow: #f1cf00;
  --r26-font: "ryo-gothic-plusn", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --r26-latin: "Inter", "Helvetica Neue", Arial, sans-serif;
  /* 1行の高さを文字の大きさと同じにしたとき、上端から文字の並ぶ線（ベースライン）までの比率。
     r26.js が読み込まれたフォントで測り直して上書きする。 */
  --r26-b1: 0.88;
  --r26-b1-latin: 0.85;
}
/* スクロールバーを除いた幅を基準にする */
@supports (width: 1cqw) {
  html { container-type: inline-size; }
  .r26, #wrapper .subcatch, #wrapper .topic_path { --u: calc(min(100cqw, 1440px) / 1440); }
}

.r26, .r26 * { box-sizing: border-box; }
.r26 { font-family: var(--r26-font); color: var(--r26-ink); font-feature-settings: normal; }
.r26 a { color: inherit; text-decoration: none; }
.r26 a:hover { text-decoration: none; }
.r26-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 幅1440の舞台。画面が広いときは中央に置く */
.r26-stage { position: relative; width: calc(1440 * var(--u)); margin: 0 auto; }

/* ベースラインで位置を決める文字
   --y：ベースラインの位置（舞台の上端から、1440基準のpx）
   --lh：行の高さ（1440基準のpx）。1行だけのときは文字の大きさと同じ */
.r26-bl {
  position: absolute;
  margin: 0;
  white-space: nowrap;
  line-height: calc(var(--lh) * var(--u));
  top: calc(var(--y) * var(--u) - ((var(--lh) - var(--fs)) / 2 + var(--fs) * var(--r26-b1)) * var(--u));
  font-size: calc(var(--fs) * var(--u));
}
.r26-bl.r26-latin { top: calc(var(--y) * var(--u) - ((var(--lh) - var(--fs)) / 2 + var(--fs) * var(--r26-b1-latin)) * var(--u)); }
/* 中央ぞろえの見出し：字間が最後の文字の後ろにも付く分を、左の余白で打ち消す */
.r26-center { left: 0; width: 100%; text-align: center; padding-left: calc(var(--ls) * var(--u)); }

/* ============================================================
   ヘッダー
   ============================================================ */
header.r26-head { width: 100%; background: #fff; position: relative; z-index: 50; }
header.r26-head.is-fixed { position: relative; border-bottom: 0; }
.r26-head-pc { display: block; }
.r26-head-pc .r26-stage { height: calc(150 * var(--u)); }
.r26-head-brand { position: absolute; left: calc(160.34 * var(--u)); top: calc(52.67 * var(--u)); width: calc(179.02 * var(--u)); height: calc(68.9 * var(--u)); display: block; }
.r26-head-brand:hover { opacity: .8; }
.r26-head-tagline { position: absolute; left: calc(24 * var(--u)); top: 0; width: calc(133.19 * var(--u)); height: calc(12.19 * var(--u)); display: block; }
.r26-head-logo { position: absolute; left: 0; top: calc(26.44 * var(--u)); width: calc(179.02 * var(--u)); height: calc(42.46 * var(--u)); display: block; }
.r26-head-tagline svg, .r26-head-logo svg { display: block; width: 100%; height: 100%; }

.r26-head-en { --fs: 11.7; --lh: 11.7; --y: 60.2; left: calc(1236 * var(--u)); font-weight: 400; letter-spacing: calc(.35 * var(--u)); }
.r26-head-en:hover { opacity: .7; }

.r26-gnav { list-style: none; margin: 0; padding: 0; }
.r26-gnav li { list-style: none; }
.r26-gnav a { --fs: 15.6; --lh: 15.6; --y: 106.5; font-weight: 500; letter-spacing: calc(.16 * var(--u)); }
.r26-gnav a:hover { opacity: .7; }
/* 今いるページの下線：左515.83・上121.56・幅108.15・高さ6.61（創健社についての場合）。上はベースライン106.5からの距離で決める */
.r26-gnav a::after { content: ""; position: absolute; left: calc(.33 * var(--u)); right: calc(2.12 * var(--u)); top: calc((15.06 + var(--fs) * var(--r26-b1)) * var(--u)); height: calc(6.61 * var(--u)); background: var(--r26-yellow); opacity: 0; }
.r26-gnav a.is-current::after { opacity: 1; }
.r26-gnav .n1 a { left: calc(515.5 * var(--u)); }
.r26-gnav .n2 a { left: calc(661.1 * var(--u)); }
.r26-gnav .n3 a { left: calc(791.2 * var(--u)); }
.r26-gnav .n4 a { left: calc(914.4 * var(--u)); }
.r26-gnav .n5 a { left: calc(1087.9 * var(--u)); }
.r26-gnav .n6 a { left: calc(1186.4 * var(--u)); }

/* スマホ用ヘッダー（今のものを使い、ロゴだけ新しくする） */
header.r26-head .head_sp { display: none; }
header.r26-head .head_sp .logo.r26-sp-logo { width: 120px; max-width: 32%; margin-left: 12px; flex-shrink: 0; }
header.r26-head .head_sp .logo.r26-sp-logo svg { display: block; width: 100%; height: auto; }

/* ============================================================
   トップ：看板（2枚の切り替え）
   ============================================================ */
.r26-hero { position: relative; }
.r26-hero .r26-stage { height: calc(553.48 * var(--u)); }
.r26-hero-box { position: absolute; left: calc(40.85 * var(--u)); top: calc(26.79 * var(--u)); width: calc(1362.59 * var(--u)); height: calc(526.69 * var(--u)); }
/* 看板全体の入れ替え（4枚目→5枚目、5枚目→1枚目）：文が重ならないよう、前のものが消えてから次を出す */
.r26-hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.r26-hero-slide.is-active { opacity: 1; visibility: visible; transition: opacity .7s ease .5s, visibility 0s linear .5s; }
.r26-hero-slide > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.r26-hero { overflow-x: clip; }
/* 1〜4枚目の写真：重ねておき、表に出す1枚だけ不透明にする（黄色・文・ロゴは動かさない） */
.r26-hp { opacity: 0; transition: opacity 1.2s ease; }
.r26-hp.is-on { opacity: 1; }
.r26-hero.is-instant .r26-hp { transition: none; }
/* スマホ用の写真（吹き出し全体を写真で埋めたもの）は、パソコンでは出さない */
.r26-hero-spphoto { display: none; }
.r26-hsp { opacity: 0; transition: opacity 1.2s ease; }
.r26-hsp.is-on { opacity: 1; }
.r26-hero.is-instant .r26-hsp { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .r26-hp, .r26-hsp, .r26-hero-slide, .r26-hero-slide.is-active { transition: none; }
}

/* ============================================================
   トップ：注目記事
   ============================================================ */
.r26-pickup .r26-stage { height: calc(477.9 * var(--u)); }
.r26-pickup-title { --fs: 28.59; --lh: 28.59; --y: 72.02; --ls: 5.72; font-weight: 400; letter-spacing: calc(5.72 * var(--u)); }
.r26-pickup-sub { --fs: 13; --lh: 13; --y: 96.32; --ls: 0; font-family: var(--r26-latin); font-weight: 400; letter-spacing: 0; }
.r26-pickup-view { position: absolute; left: calc(328.81 * var(--u)); top: calc(124.94 * var(--u)); width: calc(786.91 * var(--u)); height: calc(274.22 * var(--u)); overflow: hidden; }
.r26-pickup-track { display: flex; height: 100%; transition: transform .5s ease; will-change: transform; }
.r26-pickup-item { flex: 0 0 calc(262.303 * var(--u)); height: 100%; padding-top: calc(7.6 * var(--u)); }
.r26-pickup-card { position: relative; display: block; width: calc(250 * var(--u)); margin: 0 auto; background: #fefefe; box-shadow: 0 0 calc(7 * var(--u)) rgba(0, 0, 0, .07); }
.r26-pickup-card:hover { opacity: .85; }
.r26-pickup-photo { display: block; width: 100%; height: calc(200 * var(--u)); overflow: hidden; margin: 0; }
.r26-pickup-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.r26-pickup-new { position: absolute; top: calc(7 * var(--u)); right: calc(7 * var(--u)); margin: 0; padding: calc(2 * var(--u)) calc(6 * var(--u)); background: #3f2a1d; color: #fff; font-size: calc(9.5 * var(--u)); line-height: 1.5; font-weight: 700; }
.r26-pickup-text { margin: 0; height: calc(64 * var(--u)); padding: calc(10.5 * var(--u)) calc(10 * var(--u)) 0; font-size: calc(10.6 * var(--u)); line-height: calc(16.3 * var(--u)); letter-spacing: calc(.4 * var(--u)); color: var(--r26-ink); overflow: hidden; }
.r26-pickup-arrow { position: absolute; top: calc(216.84 * var(--u)); width: calc(28.49 * var(--u)); height: calc(28.49 * var(--u)); padding: 0; margin: 0; border: 0; background: none; cursor: pointer; }
.r26-pickup-arrow svg { display: block; width: 100%; height: 100%; }
.r26-pickup-arrow:hover { opacity: .75; }
.r26-pickup-arrow.is-prev { left: calc(292.93 * var(--u)); }
.r26-pickup-arrow.is-next { left: calc(1120.76 * var(--u)); }
.r26-pickup-dots { position: absolute; left: 0; width: 100%; top: calc(414.81 * var(--u)); display: flex; justify-content: center; padding-left: calc(2.4 * var(--u)); margin: 0; list-style: none; gap: calc(6.56 * var(--u)); }
.r26-pickup-dots li { list-style: none; margin: 0; padding: 0; }
.r26-pickup-dots button { display: block; width: calc(7.68 * var(--u)); height: calc(7.68 * var(--u)); padding: 0; margin: 0; border: 0; border-radius: 50%; background: var(--r26-ink); cursor: pointer; font-size: 0; }
.r26-pickup-dots button.is-active { background: radial-gradient(circle, #fff 0 calc(2.1 * var(--u)), var(--r26-ink) calc(2.1 * var(--u))); }

/* ============================================================
   下層ページ：黄色の帯の見出し
   ============================================================ */
.r26-band { position: relative; width: 100%; height: calc(73.12 * var(--u)); margin-top: calc(26.79 * var(--u)); background: var(--r26-yellow); }
.r26-band .r26-stage { height: 100%; }
.r26-band-title { --fs: 23.39; --lh: 23.39; --y: 45.31; left: calc(160.3 * var(--u)); font-weight: 500; letter-spacing: calc(5.38 * var(--u)); }

/* ============================================================
   創健社について
   ============================================================ */
.r26-about .r26-stage { height: calc(1691.6 * var(--u)); }
.r26-about-h2 { font-weight: 500; }
.r26-about-h2.is-rinen { --fs: 23.39; --lh: 23.39; --y: 89.7; --ls: 15.21; letter-spacing: calc(15.21 * var(--u)); }
.r26-about-h2.is-tag { --fs: 23.39; --lh: 23.39; --y: 631.4; --ls: 12.87; letter-spacing: calc(12.87 * var(--u)); }
.r26-about-rinen { position: absolute; left: calc(248.5 * var(--u)); top: calc(121.6 * var(--u)); width: calc(943 * var(--u)); height: calc(400.8 * var(--u)); margin: 0; }
.r26-about-rinen img { display: block; width: 100%; height: 100%; border-radius: calc(24 * var(--u)); }  /* 角の丸みは下の写真（.r26-more-photo）と同じ */
.r26-about-collage { position: absolute; left: 0; top: calc(640 * var(--u)); width: calc(1440 * var(--u)); height: calc(910 * var(--u)); display: block; }
.r26-about-collage svg { display: block; width: 100%; height: 100%; }
.r26-about-sptag-h svg { display: block; width: 100%; height: auto; }
.r26-about-body { position: absolute; left: calc(474.9 * var(--u)); top: 0; margin: 0; font-weight: 700; font-size: calc(15.57 * var(--u)); letter-spacing: calc(1.84 * var(--u)); }
.r26-about-body p { --fs: 15.57; --lh: 37.75; left: 0; margin: 0; white-space: nowrap; }
.r26-about-body .p1 { --y: 877; }
.r26-about-body .p2 { --y: 1009.8; }  /* 段落の間はほかの段落と同じ（行の送り37.75＋19.55） */
.r26-about-body .p3 { --y: 1104.85; }
.r26-about-body .p4 { --y: 1237.65; }

/* ============================================================
   幅1024px未満（スマホ・タブレット縦）：デザインの図がないため、同じ部品を縦に並べる
   ============================================================ */
@media screen and (max-width: 1023px) {
  .r26-head-pc { display: none; }
  header.r26-head .head_sp { display: flex; }
  .r26 { --u: calc(100vw / 390); }
  .r26-stage { width: 100%; }
  .r26-bl, .r26-bl.r26-latin { position: static; white-space: normal; }

  .r26-hero .r26-stage { height: auto; padding: 16px 12px 0; }
  .r26-hero-box { position: relative; left: auto; top: auto; width: 100%; height: auto; aspect-ratio: 1362.59 / 526.69; }
  .r26-hero-ptext, .r26-hero-vhtext { display: none; }
  /* スマホ：吹き出しの中は写真だけにする（右の黄色を出さず、吹き出し全体を写真で埋める）。全体が黄色の5枚目は出さない */
  .r26-hero-pphoto, .r26-hero-pyellow { display: none; }
  .r26-hero-spphoto { display: inline; }
  .r26-hero-slide.is-yellow { display: none; }
  .r26-hero-sptext { display: block; margin: 16px 4px 0; padding: 20px 18px; background: var(--r26-yellow); border-radius: 18px; font-weight: 500; font-size: 14px; line-height: 2; letter-spacing: .08em; text-align: center; }
  .r26-hero-sptext p { margin: 0; }

  .r26-pickup .r26-stage { height: auto; padding: 36px 0 30px; text-align: center; }
  .r26-pickup-title { font-size: 24px; letter-spacing: .2em; padding-left: .2em; line-height: 1.3; }
  .r26-pickup-title, .r26-pickup-sub { display: block; }
  .r26-pickup-sub { font-size: 12px; line-height: 1.6; margin-bottom: 18px; }
  .r26-pickup-view { position: relative; left: auto; top: auto; width: calc(100% - 80px); height: auto; margin: 0 auto; }
  .r26-pickup-item { flex: 0 0 100%; padding: 6px 4px 8px; }
  .r26-pickup-card { width: 100%; max-width: 320px; }
  .r26-pickup-photo { height: auto; aspect-ratio: 5 / 4; }
  .r26-pickup-new { font-size: 11px; top: 8px; right: 8px; }
  .r26-pickup-text { height: auto; min-height: 70px; padding: 10px 12px 12px; font-size: 13px; line-height: 1.6; text-align: left; }
  .r26-pickup-arrow { width: 30px; height: 30px; top: 50%; }
  .r26-pickup-arrow.is-prev { left: 8px; }
  .r26-pickup-arrow.is-next { left: auto; right: 8px; }
  .r26-pickup-wrap { position: relative; }
  .r26-pickup-dots { position: static; padding: 0; margin-top: 14px; gap: 7px; }
  .r26-pickup-dots button { width: 8px; height: 8px; }
  .r26-pickup-dots button.is-active { background: radial-gradient(circle, #fff 0 2.2px, var(--r26-ink) 2.2px); }

  .r26-band { height: 56px; margin-top: 0; }
  .r26-band .r26-stage { display: flex; align-items: center; padding: 0 20px; }
  .r26-band-title { font-size: 19px; letter-spacing: .2em; line-height: 1.3; }

  .r26-about .r26-stage { height: auto; padding: 40px 16px 60px; text-align: center; }
  .r26-about-h2.is-rinen, .r26-about-h2.is-tag { font-size: 20px; letter-spacing: .6em; padding-left: .6em; line-height: 1.3; margin: 0 0 20px; }
  .r26-about-rinen { position: static; width: 100%; height: auto; margin: 0 0 50px; }
  .r26-about-rinen img { height: auto; border-radius: 16px; }
  .r26-about-collage { display: none; }
  .r26-about-sptag { display: block; position: relative; padding: 34px 22px 36px; background: var(--r26-yellow); border-radius: 28px; text-align: left; }
  .r26-about-sptag-h { width: 78%; max-width: 300px; margin: 0 auto 22px; display: block; }
  .r26-about-body { position: static; font-size: 14px; letter-spacing: .1em; }
  .r26-about-body p { position: static; white-space: normal; line-height: 2.1; margin-bottom: 1.2em; }
  .r26-about-body p br { display: none; }
}
@media screen and (min-width: 1024px) {
  .r26-hero-sptext, .r26-about-sptag-h { display: none; }
  .r26-about-sptag { display: contents; }
}

/* 「LOVE > FOOD > PEACE」：PDFと同じ送り幅で1文字ずつ並べる */
.r26-love { display: inline-block; letter-spacing: 0; white-space: nowrap; }
.r26-love > span { display: inline-block; text-align: left; letter-spacing: 0; }
@media screen and (max-width: 1023px) { .r26-love > span { width: auto !important; } }

/* 注目記事：見出しと一覧の初期化 */
.r26-pickup-head { margin: 0; padding: 0; font-size: inherit; line-height: 1; }
.r26-pickup-track { margin: 0; padding: 0; list-style: none; }
.r26-pickup-item { list-style: none; }
.r26-pickup-photo, .r26-pickup-text, .r26-pickup-new { display: block; }

/* 創健社について：見出し・画像の初期化 */
.r26-about-h2, .r26-band-title { margin: 0; padding-top: 0; padding-bottom: 0; }
.r26-about-collage img { display: block; width: 100%; height: 100%; }
main.r26 { display: block; }

/* 今のサイトのヘッダーの影・スクロール時の固定を打ち消す（デザインにはないため） */
.new header.r26-head, .new header.r26-head.is-fixed, header.r26-head.is-fixed { position: relative; border: 0; -webkit-box-shadow: none; box-shadow: none; }
header.r26-head ~ main { margin-top: 0 !important; }

/* ============================================================
   各ページの見出し（今の .subcatch）を「創健社について」と同じ黄色の帯にする
   帯：上176.79〜249.91（高さ73.12）、見出し：左160.3・ベースライン222.1、23.39px、字間5.38px
   ============================================================ */
#wrapper .subcatch, #wrapper .subcatch[class] {
  position: relative; width: 100%; height: calc(73.12 * var(--u)); margin: calc(26.79 * var(--u)) 0 0; padding: 0 !important;
  background: var(--r26-yellow) !important; background-image: none !important;
}
#wrapper .subcatch::before, #wrapper .subcatch::after { display: none !important; content: none !important; }
#wrapper .subcatch .subtitle {
  position: absolute; margin: 0; padding: 0; z-index: 1;
  left: calc((100% - 1440 * var(--u)) / 2 + 160.3 * var(--u));
  top: calc(45.31 * var(--u) - 23.39 * var(--u) * var(--r26-b1));
  max-width: calc(1120 * var(--u)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--r26-font); font-size: calc(23.39 * var(--u)); line-height: calc(23.39 * var(--u)); font-weight: 500;
  letter-spacing: calc(5.38 * var(--u)); color: var(--r26-ink); text-align: left; text-shadow: none;
}
#wrapper .subcatch .subtitle br { display: none; }
/* パンくず：左を帯の見出しにそろえる */
#wrapper .topic_path .inner { box-sizing: border-box; width: auto; max-width: none; margin: 0; padding: 0 calc((100% - 1440 * var(--u)) / 2 + 160.3 * var(--u)); }
@media screen and (max-width: 1023px) {
  #wrapper .subcatch, #wrapper .subcatch[class] { height: 56px; margin-top: 0; display: flex; align-items: center; }
  #wrapper .subcatch .subtitle { position: static; padding: 0 20px; font-size: 19px; line-height: 1.3; letter-spacing: .2em; max-width: 100%; }
  #wrapper .topic_path .inner { padding: 0 20px; }
}

/* ============================================================
   ボタン（黄色の地・黒の文字・黒の縁）
   黒文字／黄色＝11.3、黄色と白の境目は1.54しかないため黒の縁で形を見せる（文字以外の部品の目安 3:1）
   ============================================================ */
.r26-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-width: calc(320 * var(--u)); height: calc(56 * var(--u)); padding: 0 calc(52 * var(--u));
  border: 1px solid transparent; border-radius: calc(28 * var(--u));
  background: var(--r26-yellow); color: var(--r26-ink) !important;
  font-family: var(--r26-font); font-weight: 500; font-size: calc(15.6 * var(--u)); letter-spacing: calc(1.5 * var(--u));
  text-decoration: none !important; transition: background-color .2s, color .2s;
}
.r26-btn::after { content: ""; position: absolute; right: calc(24 * var(--u)); top: 50%; width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateY(-50%) rotate(45deg); }
.r26-btn:hover, .r26-btn:focus-visible { background: var(--r26-ink); color: var(--r26-yellow) !important; }

/* ============================================================
   創健社について：商品づくりのこだわり・SDGs（今のページから残す部分）
   見出しは「企業理念」「タグライン」と同じ大きさ。本文の幅は企業理念の画像（943px）にそろえる
   ============================================================ */
.r26-about-more { padding: calc(40 * var(--u)) 0 calc(110 * var(--u)); }
.r26-about-more.is-sdgs { padding-top: calc(20 * var(--u)); padding-bottom: calc(140 * var(--u)); }
.r26-about-more .r26-stage { width: calc(943 * var(--u)); }
.r26-more-h { margin: 0 0 calc(56 * var(--u)); padding: 0 0 0 calc(7 * var(--u)); text-align: center; font-family: var(--r26-font); font-weight: 500; font-size: calc(23.39 * var(--u)); line-height: 1.5; letter-spacing: calc(7 * var(--u)); color: var(--r26-ink); }
.r26-more-h.is-two { letter-spacing: calc(5.38 * var(--u)); padding-left: calc(5.38 * var(--u)); }
.r26-more-h-sub { display: block; font-size: calc(15.6 * var(--u)); letter-spacing: calc(3 * var(--u)); margin-bottom: calc(6 * var(--u)); }
.r26-more-h-main { display: block; }
.r26-more-row { display: flex; gap: calc(48 * var(--u)); align-items: flex-start; }
.r26-more-photo { flex: 0 0 calc(390 * var(--u)); margin: 0; }
.r26-more-photo img { display: block; width: 100%; height: auto; border-radius: calc(24 * var(--u)); }
.r26-more-photo.is-sdgs img { border-radius: 0; }
.r26-more-body { flex: 1 1 auto; min-width: 0; }
.r26-more-list { margin: 0; }
.r26-more-list dt { position: relative; margin: 0 0 calc(10 * var(--u)); padding-bottom: calc(6 * var(--u)); font-weight: 700; font-size: calc(17.5 * var(--u)); line-height: 1.6; letter-spacing: calc(1.84 * var(--u)); color: var(--r26-ink); display: inline-block; background: linear-gradient(transparent 62%, var(--r26-yellow) 62%, var(--r26-yellow) 92%, transparent 92%); }
.r26-more-list dd { margin: 0 0 calc(26 * var(--u)); }
.r26-more-list dd p { position: relative; margin: 0; padding-left: calc(18 * var(--u)); font-size: calc(15.57 * var(--u)); line-height: 1.9; letter-spacing: calc(1 * var(--u)); color: var(--r26-ink); }
.r26-more-list dd p::before { content: ""; position: absolute; left: calc(2 * var(--u)); top: calc(.95em - 4 * var(--u)); width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: var(--r26-yellow); }
.r26-more-text p { margin: 0 0 1em; font-size: calc(15.57 * var(--u)); line-height: 2; letter-spacing: calc(1 * var(--u)); color: var(--r26-ink); }
.r26-more-btnwrap { margin: calc(30 * var(--u)) 0 0; }

@media screen and (max-width: 1023px) {
  .r26-btn { min-width: 0; width: 100%; max-width: 340px; height: 52px; padding: 0 44px; border-radius: 26px; font-size: 15px; letter-spacing: .08em; }
  .r26-btn::after { right: 22px; width: 7px; height: 7px; }
  .r26-about-more { padding: 10px 0 60px; }
  .r26-about-more .r26-stage { width: 100%; padding: 0 20px; }
  .r26-more-h { font-size: 20px; letter-spacing: .3em; padding-left: .3em; margin-bottom: 26px; }
  .r26-more-h-sub { font-size: 14px; letter-spacing: .15em; }
  .r26-more-row { display: block; }
  .r26-more-photo { margin-bottom: 24px; }
  .r26-more-photo img { border-radius: 16px; }
  .r26-more-list dt { font-size: 17px; letter-spacing: .1em; }
  .r26-more-list dd { margin-bottom: 20px; }
  .r26-more-list dd p { font-size: 15px; padding-left: 18px; }
  .r26-more-list dd p::before { width: 8px; height: 8px; top: calc(.95em - 4px); }
  .r26-more-text p { font-size: 15px; }
  .r26-more-btnwrap { text-align: center; }
}

/* ============================================================
   サイト全体のトーン（全ページ）
   色：白の地、文字はデザインの黒 #221815、ブランドの面は黄色 #f1cf00、薄い面は #fdf8de
   書体：りょうゴシック PlusN（読み込めないあいだは Noto Sans JP）
   茶色系の色の置き換えは r26-tone.css（今のCSSから自動で書き出し）
   ============================================================ */
body { font-family: var(--r26-font); color: var(--r26-ink); }
a { color: var(--r26-ink); }
a:hover { color: var(--r26-ink); }

/* 今のサイトのボタンを、デザインの黄色のボタンにそろえる */
#wrapper .button, #wrapper .button_dark, #wrapper .button.button_dark {
  background-color: var(--r26-yellow); color: var(--r26-ink); border: 1px solid transparent; border-radius: 999px;
  font-family: var(--r26-font); font-weight: 500; letter-spacing: .08em;
}
#wrapper .button:after { border-color: var(--r26-ink); }
#wrapper .button:hover, #wrapper .button_dark:hover { background-color: var(--r26-ink); color: var(--r26-yellow); }
#wrapper .button:hover:after { border-color: var(--r26-yellow); }
#wrapper .button span, #wrapper .button_dark span { color: inherit; }
#wrapper .button_white { background-color: #fff; color: var(--r26-ink); border-color: var(--r26-ink); }
#wrapper .button_white:after { border-color: var(--r26-ink); }
#wrapper .button_white:hover { background-color: var(--r26-ink); color: #fff; }
#wrapper .button_white:hover:after { border-color: #fff; }
/* 並んだボタン（.links_box）：文字が右の＞に重ならないよう左右に余白をとり、長い文字は2行にする（括弧の前や「・」のあとで改行）。
   同じ行のボタンは、行の高さに合わせてそろえる（高さをそろえる JavaScript があるページでは、そちらの高さが使われる）。
   ページ送りの番号（右の＞なし）と IR のタブ（＞は下）は、もとの余白に戻す */
#wrapper .links > .links_box > .button { display: flex; align-items: center; justify-content: center; box-sizing: border-box; height: 100%; min-height: 44px; padding-left: 30px; padding-right: 34px; line-height: 1.5; text-align: center; }
#wrapper .links > .links_box > .button, #wrapper .links > .links_box > .button span { white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }  /* 「（」の前の改行の位置は r26.js が入れる */
@media screen and (max-width: 660px) {
  #wrapper .links > .links_box > .button { padding: 6px 26px 6px 20px; }  /* 右は＞の幅に少し足した分 */
}
#wrapper .company_content .links_box .governance br { display: inline; }  /* 「コーポレート」のあとの改行を使う */
#wrapper .pickup_pagination > .links > .links_box > .button, #wrapper .news_pagination > .links > .links_box > .button { padding-left: 1rem; padding-right: 1rem; }
#ir .text .tab_menu .links > .links_box > .button { padding-left: 0; padding-right: 0; }
#wrapper .btn_01 a, #wrapper .btn_01_w a { background: var(--r26-yellow); color: var(--r26-ink); border: 1px solid transparent; border-radius: 999px; }
#wrapper .btn_01 a::after, #wrapper .btn_01_w a::after { border-color: var(--r26-ink); }
#wrapper .btn_01 a:hover, #wrapper .btn_01_w a:hover { opacity: 1; background: var(--r26-ink); color: var(--r26-yellow); }
#wrapper .btn_01 a:hover::after, #wrapper .btn_01_w a:hover::after { border-color: var(--r26-yellow); }

/* ページ送り：今いるページを黄色の地に */
#wrapper .paging_current, #wrapper .paging_link:hover { background-color: var(--r26-yellow); color: var(--r26-ink); border-color: var(--r26-yellow); }

/* フッター：デザインの黒の地に白の文字（17.4）。ロゴは新しいロゴ */
footer { background: var(--r26-ink); color: #fff; }
footer .r26-flogo { display: block; width: 100%; max-width: 200px; }
footer .r26-flogo-tag { display: block; width: 74%; margin: 0 0 10px 13%; }
footer .r26-flogo-tag svg path { fill: #fff; }
footer .r26-flogo-logo svg, footer .r26-flogo-tag svg { display: block; width: 100%; height: auto; }

/* 上へ戻るボタン：黄色の地・黒の矢印・黒の縁 */
.pagetop a { background: var(--r26-yellow) !important; border: 1px solid transparent !important; }
.pagetop a i, .pagetop a svg { color: var(--r26-ink) !important; }

/* ============================================================
   仕上げ：サイト全体の部品をデザインのトーンにそろえる
   参考にした作り：食品の会社（カゴメ・ミツカン）と、ほぼ日の記事一覧
   ・カードは枠線で囲まず、角を丸めた写真＋題名＋小さな灰色の補足
   ・ラベルは塗りの面を使わず、細い線か淡い色
   ・見出しは「注目記事／SELECTION」と同じ形
   ============================================================ */
:root {
  --r26-line: #e6dfd3;     /* 区切り線・タイルの線（装飾） */
  --r26-sub: #6b625c;      /* 補足の文字（白の地で 6.0、淡い黄色の地で 5.6） */
  --r26-tint: #fdfaeb;     /* 淡い黄色の面 */
  --r26-pale: #faf0bd;     /* ラベルの淡い黄色（黒の文字で 15.0） */
  --r26-radius: 16px;
}
.bg_beige, .new .blog-contents { background: var(--r26-tint) !important; }

/* 見出し：注目記事／SELECTION と同じ形 */
.new .maintitle { color: var(--r26-ink); margin-bottom: 48px; }
.new .maintitle .title { font-family: var(--r26-font); font-weight: 400; font-size: clamp(22px, 1.99vw, 28.59px); line-height: 1.5; letter-spacing: .2em; padding-left: .2em; margin-bottom: 0; }
.new .maintitle .sub { display: block; margin-top: 6px; font-family: var(--r26-latin); font-size: 13px; font-weight: 400; line-height: 1.6; letter-spacing: .08em; text-transform: uppercase; color: var(--r26-ink); }
.new .maintitle .sub.bold { font-family: var(--r26-font); font-size: 15px; font-weight: 500; letter-spacing: .1em; text-transform: none; margin-top: 18px; }
.new .maintitle.mb-30 .title { margin-bottom: 0; }
.r26-lead { margin: -24px auto 40px; max-width: 760px; text-align: center; font-size: 15px; line-height: 2; letter-spacing: .08em; color: var(--r26-ink); }

/* トップ：部分ごとの余白と幅 */
.new.front-page .container > .contents { padding-top: 96px; padding-bottom: 96px; }
.new.front-page .container > .contents.kodawari-contents { padding-top: 104px; }
.new.front-page .contents .inner, .new.front-page .blog-contents .inner { max-width: 1120px; }
.new.front-page .button_wrap.new_btn_wrap, .new.front-page .blog-btn { margin-top: 44px; text-align: center; max-width: none; }
.new.front-page .button_wrap.new_btn_wrap .button, .new.front-page .blog-btn .button { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 280px; height: 54px; padding: 0 56px; margin: 0 auto; font-size: 15px; }

/* こだわりのカード */
.new .cards .card { box-shadow: none; border: 1px solid var(--r26-line); border-radius: var(--r26-radius); overflow: hidden; background: #fff; color: var(--r26-ink); transition: border-color .2s, transform .2s; }
.new .cards .card:hover { opacity: 1; border-color: var(--r26-ink); transform: translateY(-2px); }
.new .cards .card .card-bottom { padding: 18px 24px 46px; }
.new .cards .card .card-bottom p:first-child { font-size: 14px; line-height: 1.9; letter-spacing: .05em; }
.new .cards .card .card-bottom p:last-child { font-family: var(--r26-latin); font-size: 12px; letter-spacing: .1em; bottom: 16px; right: 24px; }

/* ブランド・取り組み、企業情報：写真の角を丸める */
.new .new_blandlist.top_blandlist img, .new .new_blandlist.new_comapnylist img { border-radius: 12px; }
.new .new_blandlist a { transition: opacity .2s; }
.new .new_blandlist a:hover { opacity: .85; }
.new .new_blandlist.new_comapnylist .new_comapnylist_text, .new .new_blandlist.top_blandlist.new_comapnylist .new_comapnylist_text {
  background: transparent; color: var(--r26-ink); margin-top: 0; padding: 12px 2px 0; text-align: left; font-size: 15px; font-weight: 500; letter-spacing: .1em;
}
.new .new_blandlist.new_comapnylist .new_comapnylist_text::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--r26-yellow); vertical-align: middle; position: relative; top: -1px; }

/* オンラインショップの帯 */
.new .ec-button_wrap .ec-button { border-radius: var(--r26-radius); font-family: var(--r26-font); font-size: 20px; font-weight: 500; letter-spacing: .14em; transition: background-color .2s, color .2s; }
.new .ec-button_wrap .ec-button:hover { background-color: var(--r26-yellow); color: var(--r26-ink); }
.new .ec-button_wrap .ec-button:hover * { color: var(--r26-ink); }
@media screen and (max-width: 767px) {
  .new .ec-button_wrap .ec-button { padding: 22px 44px; font-size: 16px; letter-spacing: .06em; line-height: 1.5; }
}

/* 食と健康のよみもの（MIRAI SOKEN） */
.new .blog-contents { margin: 0; }
.new .blog-contents .maintitle { margin-bottom: 40px; }
.new .blog-contents .mirai-soken-category__list { margin-bottom: 36px; gap: 12px; }
.new .blog-contents .mirai-soken-category__item:not(:last-child) { margin-right: 0; }
.new .blog-contents .mirai-soken-category__item a, .new .blog-contents .mirai-soken-category__item--current a {
  background: #fff; color: var(--r26-ink); border: 1px solid var(--r26-ink); border-radius: 999px;
  font-family: var(--r26-font); font-size: 13px; font-weight: 500; letter-spacing: .08em; padding: 7px 20px; transition: background-color .2s;
}
.new .blog-contents .mirai-soken-category__item--current a, .new .blog-contents .mirai-soken-category__item a:hover { background: var(--r26-yellow); border-color: var(--r26-yellow); opacity: 1; }
.new .blog-contents .blog-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: stretch; }
.new .blog-contents .blog-item { width: auto; margin: 0 !important; border: 0; border-radius: var(--r26-radius); overflow: hidden; background: #fff; box-shadow: 0 2px 14px rgba(34, 24, 21, .06); transition: box-shadow .2s, transform .2s; }
.new .blog-contents .blog-item:hover { box-shadow: 0 6px 22px rgba(34, 24, 21, .1); transform: translateY(-2px); }
.new .blog-contents .blog-item a { display: block; height: 100%; color: var(--r26-ink); }
.new .blog-contents .blog-img img { transition: transform .4s; }
.new .blog-contents .blog-item:hover .blog-img img { transform: scale(1.03); }
.new .blog-contents .blog-img { overflow: hidden; }
.new .blog-contents .blog-body { padding: 18px 20px 22px; background: #fff; }
.new .blog-contents .blog-category { margin-bottom: 10px; }
.new .blog-contents .blog-category span { background: var(--r26-pale); color: var(--r26-ink); border-radius: 999px; font-family: var(--r26-font); font-size: 12px; font-weight: 500; letter-spacing: .06em; padding: 3px 12px; }
.new .blog-contents .blog-eyecatch { font-family: var(--r26-font); color: var(--r26-sub); font-size: 12px; font-weight: 400; line-height: 1.7; margin-bottom: 6px; }
.new .blog-contents .blog-title { font-family: var(--r26-font); color: var(--r26-ink); font-size: 15px; font-weight: 500; line-height: 1.7; letter-spacing: .03em; margin-bottom: 10px; }
.new .blog-contents .blog-date { font-family: var(--r26-latin); color: var(--r26-sub); font-size: 12px; letter-spacing: .06em; }
.new .blog-contents .blog-btn .button span { padding-right: 0; }

/* レシピ */
.new .recipe-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.new .recipe-cards .recipe-card { width: auto; color: var(--r26-ink); font-size: 15px; }
.new .recipe-cards .recipe-card-img { margin-bottom: 14px; border-radius: var(--r26-radius); overflow: hidden; }
.new .recipe-cards .recipe-card-img img { transition: transform .4s; }
.new .recipe-cards .recipe-card:hover .recipe-card-img img { transform: scale(1.04); }
.new .recipe-cards .recipe-card p { font-family: var(--r26-font); font-weight: 500; font-size: 15px; line-height: 1.7; letter-spacing: .04em; }
.new .recipe-cards .recipe-card:hover p { text-decoration: underline; text-decoration-color: var(--r26-yellow); text-decoration-thickness: 3px; text-underline-offset: 4px; }

/* 商品の分類（トップ・商品のページ共通） */
.new .productlist { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.new .productlist li { width: auto; margin: 0 !important; }
.new .productlist li a { height: 100%; min-height: 84px; flex-wrap: nowrap; justify-content: flex-start; gap: 14px; padding: 10px 40px 10px 14px; border: 1px solid var(--r26-line); border-radius: 14px; background: #fff; color: var(--r26-ink); position: relative; transition: border-color .2s, background-color .2s; }
.new .productlist li a::after { content: ""; position: absolute; right: 18px; top: 50%; width: 7px; height: 7px; border-top: 2px solid var(--r26-ink); border-right: 2px solid var(--r26-ink); transform: translateY(-50%) rotate(45deg); }
.new .productlist li a:hover { border-color: var(--r26-ink); background: var(--r26-tint); }
.new .productlist li .photo { flex: 0 0 60px; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }
.new .productlist li .photo img { max-width: 100%; max-height: 60px; width: auto; height: auto; object-fit: contain; }
.new .productlist li .title { width: auto; flex: 1 1 auto; text-align: left; font-family: var(--r26-font); font-weight: 500; font-size: 15px; letter-spacing: .06em; color: var(--r26-ink); padding: 0; }
.new.front-page .front-itemlist .productlist { margin-bottom: 0; }
.new .btn_01_w { gap: 16px; margin-top: 40px; }
.new .btn_01_w a, .new .btn_01 a { margin: 0 !important; min-width: 260px; height: 54px; display: inline-flex !important; align-items: center; justify-content: center; padding: 0 48px; font-size: 15px; font-family: var(--r26-font); font-weight: 500; letter-spacing: .08em; }
.new .btn_01 { margin-top: 40px; }

/* ニュースリリースの一覧 */
.new .newslist { max-width: 860px; }
.new .newslist dl { border-bottom: 1px solid var(--r26-line); padding: 20px 8px; margin: 0; align-items: baseline; }
.new .newslist dl:first-child { border-top: 1px solid var(--r26-line); }
.new .newslist dt { font-family: var(--r26-latin); font-size: 14px; color: var(--r26-sub); letter-spacing: .06em; width: 110px; }
.new .newslist dd, .new .newslist dd a { color: var(--r26-ink); font-size: 15px; line-height: 1.8; letter-spacing: .04em; }
.new .newslist dd a:hover { text-decoration: underline; text-decoration-color: var(--r26-yellow); text-decoration-thickness: 3px; text-underline-offset: 4px; }

/* お問い合わせの帯 */
.new .contact-contents > div p { font-family: var(--r26-font); font-size: 22px; letter-spacing: .12em; line-height: 1.9; }
.new .contact-contents .button { font-size: 18px; }

/* オンラインショップ・Instagram の見出し */
#insta_box .title, .footer-online .title, .fbzone .title { font-family: var(--r26-font); font-weight: 500; letter-spacing: .12em; }

@media screen and (max-width: 1023px) {
  .new.front-page .container > .contents { padding-top: 64px; padding-bottom: 64px; }
  .new.front-page .contents .inner, .new.front-page .blog-contents .inner { padding-left: 20px; padding-right: 20px; box-sizing: border-box; }
  .new .maintitle { margin-bottom: 32px; }
  .new .maintitle .title { font-size: 22px; }
  .new .maintitle .sub { font-size: 12px; }
  .r26-lead { margin: -14px auto 28px; font-size: 14px; text-align: left; }
  .new .blog-contents .blog-list { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .new .blog-contents .blog-body { padding: 14px 14px 16px; }
  .new .blog-contents .blog-title { font-size: 14px; }
  .new .blog-contents .mirai-soken-category__list { gap: 8px; margin-bottom: 24px; }
  .new .recipe-cards { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
  .new .recipe-cards .recipe-card { margin: 0; }
  .new .productlist { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .new .productlist li a { min-height: 72px; padding: 8px 30px 8px 10px; gap: 10px; }
  .new .productlist li a::after { right: 12px; }
  .new .productlist li .photo { flex-basis: 44px; width: 44px; height: 44px; }
  .new .productlist li .photo img { max-height: 44px; }
  .new .productlist li .title { font-size: 13px; letter-spacing: .02em; }
  .new.front-page .button_wrap.new_btn_wrap .button, .new.front-page .blog-btn .button, .new .btn_01_w a, .new .btn_01 a { min-width: 0; width: 100%; max-width: 340px; }
  .new .newslist dl { display: block; padding: 16px 4px; }
  .new .newslist dt { width: auto; margin-bottom: 4px; }
  .new .contact-contents > div p { font-size: 17px; }
  .new .contact-contents .button { font-size: 15px; }
}

/* 仕上げの追加：今のCSSの指定の強さに合わせる */
.new .new_blandlist.new_comapnylist.new_comapnylist .new_comapnylist_text,
.new .new_blandlist.top_blandlist.new_comapnylist .new_comapnylist_text { background-color: transparent !important; color: var(--r26-ink) !important; margin-top: 0; padding: 12px 2px 0; text-align: left; font-size: 15px; font-weight: 500; letter-spacing: .1em; }
.new .newslist dt { flex: 0 0 120px; width: 120px; margin-right: 16px; }
.new .newslist dd { flex: 1 1 auto; }
.footer-online .wp_shopify_btn a { background: #fff !important; color: var(--r26-ink) !important; border: 1px solid var(--r26-ink) !important; border-radius: 999px; padding-left: 14px; padding-right: 22px; }
.footer-online .wp_shopify_btn a:hover { background: var(--r26-yellow) !important; border-color: var(--r26-yellow) !important; }
.footer-online .wp_shopify_btn a::after { border-color: var(--r26-ink) !important; }

/* 取扱店の日本地図：都道府県は黄色の地に黒の文字（11.3）。指を乗せると黒の地に黄色 */
.clickaresjmap li.area li.todofuken { background-color: var(--r26-yellow) !important; border-color: #fff !important; }
.clickaresjmap li.area li.todofuken .todofukenname, .clickaresjmap .todofukenname { color: var(--r26-ink) !important; font-family: var(--r26-font); font-weight: 500; }
.clickaresjmap li.area li.todofuken:hover { opacity: 1 !important; background-color: var(--r26-ink) !important; }
.clickaresjmap li.area li.todofuken:hover .todofukenname { color: var(--r26-yellow) !important; }
.clickaresjmap li ul { background-color: #f3efe6 !important; }

/* お客様相談室の電話番号：黄色の地に黒の文字 */
.customer_telephone { background-color: var(--r26-yellow) !important; color: var(--r26-ink) !important; border-radius: var(--r26-radius) !important; }
.customer_telephone * { color: var(--r26-ink) !important; }

/* ページの中の小見出し（maintitle2）も同じ形に */
.new .maintitle2 { color: var(--r26-ink); }
.new .maintitle2 .title { font-family: var(--r26-font); font-weight: 500; font-size: clamp(18px, 1.5vw, 21px); letter-spacing: .14em; padding-left: .14em; line-height: 1.6; }
.new .maintitle2 .sub { display: block; margin-top: 4px; font-family: var(--r26-latin); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }

/* 商品の分類：スマホでも2列・写真つきのタイル（今のCSSの480px以下の指定を打ち消す） */
@media screen and (max-width: 480px) {
  .new .productlist, .new .productlist.listtune { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .new .productlist.listtune li, .new .productlist li { width: auto !important; background: transparent; }
  .new .productlist.listtune li a, .new .productlist li a { display: flex !important; align-items: center; font-size: 13px; border: 1px solid var(--r26-line) !important; border-radius: 14px; padding: 8px 28px 8px 10px !important; height: 100%; }
  .new .productlist li a::after { right: 12px; }
  .new .productlist.listtune li .photo, .new .productlist li .photo { display: flex !important; margin: 0; }
  .new .productlist.listtune li .title, .new .productlist li .title { width: auto; }
}

/* 「商品詳細」のボタン：幅を文字に合わせる（もとは幅87pxで、丸い形の余白を足すと折り返していた） */
.footer-online .wp_shopify_btn a { width: auto !important; min-width: 96px; height: 30px; padding: 0 26px 0 14px !important; white-space: nowrap; font-family: var(--r26-font) !important; font-size: 12px; letter-spacing: .06em; }
.footer-online .wp_shopify_btn a::after { right: 11px !important; }
/* 分類のラベル：文字を1行に保つ */
.mirai-soken-category__item a, .blog-category span, .r26-btn, .button span { white-space: nowrap; }

/* ============================================================
   食と健康のよみもの（MIRAI SOKEN）の一覧・分類・記事のページ
   上の写真の帯 → ほかのページと同じ黄色の帯。カードとラベルはトップと同じ形
   ============================================================ */
.mirai-soken-mv { background: var(--r26-yellow) !important; height: auto !important; min-height: calc(73.12 * var(--u)); margin-top: calc(26.79 * var(--u)); padding: 28px calc((100% - 1440 * var(--u)) / 2 + 160.3 * var(--u)) 30px; align-items: flex-start !important; justify-content: center; text-align: left; }
.mirai-soken__title, .mirai-soken__text, .mirai-soken__text--sm { color: var(--r26-ink) !important; text-shadow: none !important; text-align: left !important; font-family: var(--r26-font) !important; }
.mirai-soken__title { font-size: clamp(19px, 1.62vw, 23.39px) !important; font-weight: 500 !important; letter-spacing: .23em !important; }
.mirai-soken__text { font-family: var(--r26-latin) !important; font-size: 13px !important; letter-spacing: .08em !important; text-transform: uppercase; margin-top: 4px; }
.mirai-soken__text--sm { font-size: 14px !important; line-height: 1.9 !important; letter-spacing: .06em !important; margin-top: 10px !important; padding: 0 !important; }
.mirai-soken { background: var(--r26-tint) !important; padding-top: 48px; padding-bottom: 72px; }
.mirai-soken__inner { max-width: 1120px; padding: 0 20px; box-sizing: border-box; }
.mirai-soken .mirai-soken-category__list { gap: 12px; margin-bottom: 40px; }
.mirai-soken .mirai-soken-category__item:not(:last-child) { margin-right: 0; }
.mirai-soken-category__item a, .mirai-soken-category__item--current a { background: #fff !important; color: var(--r26-ink) !important; border: 1px solid var(--r26-ink); border-radius: 999px; font-family: var(--r26-font) !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: .08em; padding: 7px 20px !important; }
/* 区分の文字：Windows のパソコンでかすれて見えるため、パソコンの幅では大きく太くする。横に流す部品は使っていないので、位置をずらす指定（文字の描き方が変わる）も外す */
.mirai-soken-category__list.swiper-wrapper { transform: none !important; }
@media screen and (min-width: 768px) {
  .mirai-soken-category__item a, .mirai-soken-category__item--current a, .new .blog-contents .mirai-soken-category__item a, .new .blog-contents .mirai-soken-category__item--current a { font-size: 14px !important; font-weight: 700 !important; letter-spacing: .06em; }
}
.mirai-soken-category__item--current a, .mirai-soken-category__item a:hover { background: var(--r26-yellow) !important; border-color: var(--r26-yellow) !important; opacity: 1 !important; }
.mirai-soken-recommend, .mirai-soken-archive { margin-bottom: 64px; }
.mirai-soken-recommend__title { color: var(--r26-ink) !important; font-family: var(--r26-font) !important; font-weight: 400 !important; font-size: clamp(22px, 1.99vw, 28.59px) !important; letter-spacing: .2em; padding-left: .2em; line-height: 1.5; }
.mirai-soken-recommend__text { color: var(--r26-ink) !important; font-family: var(--r26-latin) !important; font-size: 13px !important; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 32px !important; }
.mirai-soken-list { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.mirai-soken-item { width: auto !important; margin: 0 !important; border: 0 !important; border-radius: var(--r26-radius); overflow: hidden; background: #fff; box-shadow: 0 2px 14px rgba(34, 24, 21, .06); transition: box-shadow .2s, transform .2s; }
.mirai-soken-item:hover { box-shadow: 0 6px 22px rgba(34, 24, 21, .1); transform: translateY(-2px); }
.mirai-soken-item a { display: block; height: 100%; color: var(--r26-ink); }
.mirai-soken-img { overflow: hidden; }
.mirai-soken-img img { transition: transform .4s; }
.mirai-soken-item:hover .mirai-soken-img img { transform: scale(1.03); }
.mirai-soken-body { padding: 18px 20px 22px !important; }
.mirai-soken-category { margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.mirai-soken-category span { background: var(--r26-pale) !important; color: var(--r26-ink) !important; border-radius: 999px; font-family: var(--r26-font); font-size: 12px !important; font-weight: 500; letter-spacing: .06em; padding: 3px 12px !important; margin: 0 !important; white-space: nowrap; }
.mirai-soken-eyecatch { font-family: var(--r26-font) !important; color: var(--r26-sub) !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.7 !important; margin-bottom: 6px !important; }
.mirai-soken-title { font-family: var(--r26-font) !important; color: var(--r26-ink) !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1.7 !important; letter-spacing: .03em; margin-bottom: 10px !important; }
.mirai-soken-date { font-family: var(--r26-latin) !important; color: var(--r26-sub) !important; font-size: 12px !important; letter-spacing: .06em; }
.mirai-soken__btn { margin-top: 40px; text-align: center; }
.mirai-soken__btn .button { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 240px; height: 54px; padding: 0 56px; }

/* ページ見出し（.title_h1）：トップの見出しと同じ形 */
.new .title_h1 { color: var(--r26-ink); font-weight: 400; }
.new .title_h1 .title_main { font-family: var(--r26-font); font-weight: 400; font-size: clamp(22px, 1.99vw, 28.59px); letter-spacing: .2em; padding-left: .2em; line-height: 1.5; }
.new .title_h1 .title_sub { font-family: var(--r26-latin); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin-top: 6px; }

/* 商品の一覧のカード */
.products_list_box { background: #fff !important; border: 1px solid var(--r26-line); border-radius: var(--r26-radius) !important; transition: border-color .2s; }
.products_list_box:hover { border-color: var(--r26-ink); opacity: 1; }
.products_list_ph { border-radius: 12px; overflow: hidden; }
.products_list_title_code { font-family: var(--r26-latin); color: var(--r26-sub) !important; font-weight: 400 !important; letter-spacing: .06em; }
.products_list_title { font-family: var(--r26-font); font-weight: 500 !important; letter-spacing: .04em; line-height: 1.6; }
.products_list_text { line-height: 1.8; color: var(--r26-ink); }
.products_list_tag { background: var(--r26-tint) !important; border: 0 !important; border-radius: 10px; padding: 10px 14px !important; }
.content_foot { background: var(--r26-tint) !important; }

@media screen and (max-width: 1023px) {
  .mirai-soken-mv { margin-top: 0; padding: 20px 20px 22px; }
  .mirai-soken__text--sm br { display: none; }
  .mirai-soken-list { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .mirai-soken-body { padding: 14px 14px 16px !important; }
  .mirai-soken-title { font-size: 14px !important; }
  .mirai-soken .mirai-soken-category__list { gap: 8px; margin-bottom: 28px; }
  .mirai-soken__btn .button { min-width: 0; width: 100%; max-width: 340px; }
}

/* 高さと余白・線を両方指定している今のサイトの部品は、余白・線を高さの内側で数える
   （商品の分類のタイルは、高さ100%に上下の余白と線が足されて22pxはみ出し、下の段に重なっていた） */
.new .productlist li a,
.new.front-page .button_wrap.new_btn_wrap .button, .new.front-page .blog-btn .button,
.new .btn_01_w a, .new .btn_01 a,
.footer-online .wp_shopify_btn a,
.mirai-soken__btn .button { box-sizing: border-box; }

/* ============================================================
   お問い合わせ（inquiry/cojp/inquiry.php）：入力・確認・完了
   ============================================================ */
.r26-inq-wrap { width: min(100% - 32px, 880px); margin: 56px auto 104px; font-size: 16px; line-height: 1.8; letter-spacing: .04em; }
/* 手順（入力・確認・完了） */
.r26-inq-steps { display: flex; justify-content: center; gap: 0; margin: 0 0 44px; padding: 0; list-style: none; }
.r26-inq-steps li { position: relative; display: flex; flex-direction: column; align-items: center; width: 120px; list-style: none; color: var(--r26-sub); font-size: 14px; font-weight: 500; }
.r26-inq-steps li + li::before { content: ""; position: absolute; top: 18px; right: 50%; width: 100%; height: 2px; background: var(--r26-line); z-index: 0; }
.r26-inq-step-n { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-bottom: 8px; border-radius: 50%; background: #fff; border: 2px solid var(--r26-line); font-family: var(--r26-latin); font-size: 15px; color: var(--r26-sub); }
.r26-inq-steps li.is-done { color: var(--r26-ink); }
.r26-inq-steps li.is-done .r26-inq-step-n { border-color: var(--r26-ink); color: var(--r26-ink); }
.r26-inq-steps li.is-done + li::before, .r26-inq-steps li.is-current + li::before { background: var(--r26-line); }
.r26-inq-steps li.is-done + li.is-current::before, .r26-inq-steps li.is-done + li.is-done::before { background: var(--r26-ink); }
.r26-inq-steps li.is-current { color: var(--r26-ink); font-weight: 700; }
.r26-inq-steps li.is-current .r26-inq-step-n { background: var(--r26-yellow); border-color: var(--r26-yellow); color: var(--r26-ink); font-weight: 700; }
/* 説明の文 */
.r26-inq-lead { margin: 0 0 28px; text-align: center; }
.r26-inq-lead p { margin: 0; }
.r26-inq-req { display: inline-block; margin-left: 10px; padding: 0 9px; border-radius: 999px; background: var(--r26-yellow); color: var(--r26-ink); font-size: 12px; font-weight: 700; line-height: 22px; letter-spacing: .08em; vertical-align: 2px; }
.r26-inq-lead .r26-inq-req { margin: 0 6px 0 0; }
/* 項目の一覧（入力・確認・完了で共通） */
.r26-inq-list { margin: 0; padding: 0; border-top: 1px solid var(--r26-line); }
.r26-inq-row { display: grid; grid-template-columns: 270px 1fr; gap: 24px; padding: 24px 8px; border-bottom: 1px solid var(--r26-line); }
.r26-inq-row dt { margin: 0; padding-top: 10px; font-weight: 700; line-height: 1.6; }
.r26-inq-row dt label { cursor: pointer; }
.r26-inq-row dd { margin: 0; min-width: 0; }
.r26-inq-list.is-confirm .r26-inq-row dt { padding-top: 0; }
.r26-inq-list.is-confirm .r26-inq-row dd { word-break: break-word; }
.r26-inq-form input[type="text"], .r26-inq-form textarea {
  display: block; width: 100%; margin: 0; padding: 0 16px; height: 50px;
  border: 1px solid #cfc7bb; border-radius: 10px; background: #fff;
  font-family: var(--r26-font); font-size: 16px; color: var(--r26-ink); letter-spacing: .04em; box-sizing: border-box;
}
.r26-inq-form textarea { height: auto; min-height: 220px; padding: 14px 16px; line-height: 1.8; resize: vertical; }
.r26-inq-form input[type="text"]:focus, .r26-inq-form textarea:focus { outline: none; border-color: var(--r26-ink); box-shadow: 0 0 0 3px rgba(241, 207, 0, .55); }
.r26-inq-radios { margin: 0; padding: 6px 0 0; list-style: none; }
.r26-inq-radios li { list-style: none; margin: 0 0 10px; }
.r26-inq-radios li:last-child { margin-bottom: 0; }
.r26-inq-radios label { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; line-height: 1.6; }
.r26-inq-radios input[type="radio"] { flex: none; width: 20px; height: 20px; margin: 3px 10px 0 0; accent-color: var(--r26-ink); cursor: pointer; vertical-align: top; }
.r26-inq-radios li { display: flex; align-items: flex-start; }
/* ボタン */
.r26-inq-btns { display: flex; justify-content: center; gap: 20px; margin: 44px 0 0; }
.r26-inq-btns form { margin: 0; }
.r26-inq-btn, .r26-inq-btns input.r26-inq-btn {
  -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 240px; height: 58px; margin: 0; padding: 0 36px; border: 1px solid var(--r26-ink); border-radius: 29px;
  background: #fff; color: var(--r26-ink) !important; font-family: var(--r26-font); font-size: 16px; font-weight: 700; letter-spacing: .1em;
  text-decoration: none !important; cursor: pointer; transition: background-color .2s, color .2s; box-sizing: border-box;
}
.r26-inq-btn:hover, .r26-inq-btns input.r26-inq-btn:hover { background: var(--r26-ink); color: #fff !important; opacity: 1; }
.r26-inq-btn.is-primary, .r26-inq-btns input.r26-inq-btn.is-primary { min-width: 300px; border-color: transparent; background: var(--r26-yellow); }
.r26-inq-btn.is-primary:hover, .r26-inq-btns input.r26-inq-btn.is-primary:hover { background: var(--r26-ink); color: var(--r26-yellow) !important; }
.r26-inq-btns input.r26-inq-btn:disabled, .r26-inq-btns input.r26-inq-btn:disabled:hover { border-color: transparent; background: #e6e3de; color: #8a837c !important; cursor: default; }
/* reCAPTCHA */
.r26-inq-captcha { display: flex; flex-direction: column; align-items: center; margin: 40px 0 0; }
.r26-inq-captcha-msg { margin: 12px 0 0; font-size: 14px; color: var(--r26-sub); min-height: 1.6em; }
/* 入力の誤り */
.r26-inq-error { padding: 28px 32px; border-radius: var(--r26-radius); background: var(--r26-tint); }
.r26-inq-error p { margin: 0; }
.r26-inq-error-h { margin-bottom: 10px !important; font-weight: 700; font-size: 17px; }
@media screen and (max-width: 767px) {
  .r26-inq-wrap { margin: 36px auto 72px; font-size: 15px; }
  .r26-inq-steps { margin-bottom: 32px; }
  .r26-inq-steps li { width: 96px; font-size: 13px; }
  .r26-inq-row { grid-template-columns: 1fr; gap: 10px; padding: 20px 2px; }
  .r26-inq-row dt { padding-top: 0; }
  .r26-inq-lead { text-align: left; }
  .r26-inq-btns { flex-direction: column-reverse; align-items: stretch; gap: 14px; }
  .r26-inq-btns.is-two form { width: 100%; }
  .r26-inq-btn, .r26-inq-btns input.r26-inq-btn, .r26-inq-btn.is-primary, .r26-inq-btns input.r26-inq-btn.is-primary { width: 100%; min-width: 0; }
  .r26-inq-error { padding: 22px 20px; }
}

/* ============================================================
   採用情報：冒頭の紹介文（recruit/index.php）
   1行はおよそ40字まで（WCAG 2.2 1.4.8 の日本語の目安）、行間は「創健社について」の本文と同じ2倍
   ============================================================ */
.r26-rec-intro { max-width: 1080px; margin: 0 auto; text-align: left; color: var(--r26-ink); }
.r26-rec-intro .maintitle { text-align: center; }
/* 見出しのまとまりごとに、写真と文を左右に並べる（2つ目は写真が右）。文の段はおよそ35字 */
.r26-rec-sec { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 64px; align-items: center; margin: 72px 0 0; }
.r26-rec-sec.is-right { grid-template-columns: minmax(0, 1fr) 420px; }
.r26-rec-sec.is-right .r26-rec-photo { order: 2; }
.r26-rec-photo { margin: 0; }
.r26-rec-photo img { display: block; width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; border-radius: 24px; }
.r26-rec-body { min-width: 0; }
.r26-rec-h {
  display: inline-block; margin: 0 0 18px; padding-bottom: 4px;
  font-family: var(--r26-font); font-weight: 700; font-size: 19px; line-height: 1.6; letter-spacing: .08em; color: var(--r26-ink);
  background: linear-gradient(transparent 62%, var(--r26-yellow) 62%, var(--r26-yellow) 92%, transparent 92%);
}
.r26-rec-body p {
  margin: 0 0 .9em; font-family: var(--r26-font); font-size: 16px; line-height: 2; letter-spacing: .06em; color: var(--r26-ink);
  word-break: normal; overflow-wrap: anywhere; line-break: strict;
}
.r26-rec-body p:last-child { margin-bottom: 0; }
/* 改行の位置：見出しと本文は日本語の文節で改行し（word-break: auto-phrase。対応していないブラウザでは普通の折り返し）、
   見出しは約物の空きを詰める。本文の中のタグラインは途中で改行しない。
   本文は最後の行を短く残さない（text-wrap: pretty）。創健社についての SDGs の文には使わない（Safari では右に大きな空きが出たため） */
.r26-rec-intro .maintitle .title, .r26-rec-h { word-break: auto-phrase; text-wrap: balance; font-feature-settings: "palt"; }
.r26-rec-body p { word-break: auto-phrase; text-wrap: pretty; }
.r26-rec-body .r26-nb { white-space: nowrap; }
@media screen and (max-width: 1023px) {
  .r26-rec-sec, .r26-rec-sec.is-right { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 56px; }
  .r26-rec-sec.is-right .r26-rec-photo { order: 0; }
  .r26-rec-photo img { aspect-ratio: 3 / 2; border-radius: 16px; }
  .r26-rec-body { max-width: 720px; }
}
@media screen and (max-width: 767px) {
  .r26-rec-sec, .r26-rec-sec.is-right { margin-top: 44px; }
  .r26-rec-h { font-size: 17px; letter-spacing: .06em; }
  .r26-rec-body p { font-size: 15px; letter-spacing: .04em; }
}

/* ============================================================
   「創健社の目指す世界」（about/vision/）を外したあとの並び（2026-10-26）
   3枚の前提で端に寄せていたカード・バナーを、残った枚数で中央にそろえる
   ============================================================ */
@media screen and (min-width: 768px) {
  .new .kodawari-contents .cards, .corporation_kodawari .cards { justify-content: center; column-gap: 40px; }
  .commit__banners { justify-content: center; }
  .commit__banners .commit__banner:last-child { margin-right: 0; }
  /* 1枚の幅32%・間2%はそのままに、端の余白を間隔に置きかえて中央にそろえる */
  /* 「こだわり・価値観」の部品（info_kodawari_02・03）だけ。ほかのページの同じ一覧には付けない */
  .servicelist_sub.r26-kodawari-list { justify-content: center; column-gap: 2%; }
  .servicelist_sub.r26-kodawari-list > li, .servicelist_sub.r26-kodawari-list > li:nth-of-type(2n), .servicelist_sub.r26-kodawari-list > li:nth-of-type(3n) { margin-right: 0; }
}