@charset "UTF-8";

/*======================================================================
  Reset CSS（destyle.css v4.0.1 | MIT License | https://github.com/nicolas-cusan/destyle.css）
  ※テーマ側の出力準備が未了のため、reset.css を別ファイルにせず本ファイル冒頭へ移植している。
    テーマ化で reset.css を独立して読める状態になったら、ここまでを切り出して
    <link rel="stylesheet" href="reset.css"> に戻す（この境界コメントを目印にする）。
======================================================================*/

/* Reset box-model and set borders */
*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
  min-width: 0;
}

/* Document */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* Sections */
body {
  margin: 0;
}

main {
  display: block;
}

/* Vertical rhythm */
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

/* Lists (enumeration) */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Lists (definition) */
dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

/* Grouping content */
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

pre {
  font-family: monospace, monospace;
  font-size: inherit;
}

address {
  font-style: inherit;
}

/* Text-level semantics */
a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

abbr[title] {
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: inherit;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Replaced content */
svg,
img,
embed,
object,
iframe {
  vertical-align: bottom;
}

/* Forms */
button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: inherit;
  text-transform: inherit;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  cursor: pointer;
}

button:disabled,
[type="button"]:disabled,
[type="reset"]:disabled,
[type="submit"]:disabled {
  cursor: default;
}

:-moz-focusring {
  outline: auto;
}

select:disabled {
  opacity: inherit;
}

option {
  padding: 0;
}

fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}

legend {
  padding: 0;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

[type="number"] {
  -moz-appearance: textfield;
}

label[for] {
  cursor: pointer;
}

/* Interactive */
details {
  display: block;
}

summary {
  display: list-item;
}

[contenteditable]:focus {
  outline: auto;
}

/* Tables */
table {
  border-color: inherit;
  border-collapse: collapse;
}

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
  padding: 0;
}

th {
  text-align: left;
  font-weight: bold;
}

/*======================================================================
  ここまで Reset CSS ／ ここから本案件のスタイル
======================================================================*/

html {
  scroll-behavior: smooth;
}

/*======================================================================
  Global Variables（Figma実値。既存トークンへ丸めない）
======================================================================*/
:root {
  --color-bg:      #FFFDE3;               /* Color/backgroud：ページ背景 */
  --color-text:    #363636;               /* Color/black：本文・見出し・罫線 */
  --color-white:   #FFFFFF;               /* Color/white */
  --color-blue:    #0E3E79;               /* Color/blue：recommend の背景 */
  --color-green:   #009191;               /* Color/green：TOPへ戻る・カテゴリチップ */
  --color-overlay: rgba(54, 54, 54, .3);  /* ヒーロー画像に重ねる暗幕（#363636 の30%） */
  --color-line-thin: rgba(54, 54, 54, .2);/* メニュー内の区切り線（デザイン外・派生値） */

  /* サイト未使用の落ち着いた色。記事本文のテキストリンク専用 */
  --color-link: #8B5E34;

  /* ヘッダーの gradation（Figmaのグラデーションスタイル） */
  --gradation: linear-gradient(129.97deg, #EAC7DE 1.93%, #AFC4DF 48.95%, #C1E0AE 95.98%);

  --shadow-logo: 0 4px 2px rgba(0, 0, 0, .25);
}

body {
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  /* SPモックのフォント指定（wiki「SPモック作成 > CSSについて > フォントについて」） */
  font-family: "Yu Gothic" , "Yu Gothic UI" , "Segoe UI" , "游ゴシック" , "Meiryo" , "Meiryo UI" , "メイリオ" , "Hiragino Sans" , "Sanfrancisco" , "Hiragino Kaku" , "Gothic ProN" , "Helvetica Neue" , "Noto Sans CJK JP" , "Roboto" , sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
}

a {
  color: var(--color-text);
  text-decoration: none;
  transition: .3s;
}

/* テキストリンクは underline、画像リンクは透明度（wiki「hoverについて」） */
a:hover {
  text-decoration: underline;
}

h1 {
  font-weight: normal;
}

/*======================================================================
  共通
======================================================================*/
img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.box_wrap {
  margin: 0 auto;
  max-width: 768px;
  padding-inline: 24px;
  box-sizing: border-box;
}

/*======================================================================
  画像トリミング（aspect-ratio / 固定高さ + object-fit:cover）
======================================================================*/
.img_wrap {
  display: block;
  position: relative;
  overflow: hidden;
}

.img_wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: .3s;
}

/* サイズ(1)：比率で決める（推奨） */
.img_wrap--wide      { aspect-ratio: 16 / 9; }
.img_wrap--landscape { aspect-ratio: 4 / 3; }
.img_wrap--square    { aspect-ratio: 1 / 1; }

/* サイズ(2)：固定px高さで決める（一覧サムネ等／aspect-ratio は付けない）
   例：.index_new .img_wrap { height: 200px; } */

/* トリミング位置の変更例（object-position） */
.img_wrap--top img    { object-position: top; }
.img_wrap--bottom img { object-position: bottom; }

/* 画像リンクは下線ではなく透明度で反応させる（リンクのときだけ） */
a.img_wrap:hover {
  text-decoration: none;
}

a.img_wrap:hover img {
  opacity: .5;
}

/*======================================================================
  ハンバーガー B（採用）：grid-template-rows アコーディオン（下に開く）
  ※ .menu-main 内の div / ul / li は WP のメニュー出力に置き換わるため、
     class ではなく要素セレクタで当てている
======================================================================*/
.gnav {
  position: relative;
}

.menu_button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 60px;
  padding: 16px;
  background: var(--color-white);
  border-radius: 8px;
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
}

.menu_button:hover {
  opacity: .5;
}

/* 2本線（32×3px・間隔5px）。Figmaは高さ8pxの枠から上に3px出る配置 */
.menu_button_icon {
  position: relative;
  display: block;
  width: 32px;
  height: 8px;
}

.menu_button_icon::before,
.menu_button_icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 32px;
  height: 3px;
  background: var(--color-text);
  transition: top .3s ease, transform .3s ease;
}

.menu_button_icon::before { top: -3px; }
.menu_button_icon::after  { top: 5px; }

/* 開いたら×に。45度だと×の下端が MENU の文字に接触するため30度に緩めている
   （バー32px: 下方向の張り出し 45度=12.4px → 30度=9.3px。文字との間隔 -0.4px → +2.7px） */
.menu_button[aria-expanded="true"] .menu_button_icon::before {
  top: 2.5px;
  transform: rotate(30deg);
}

.menu_button[aria-expanded="true"] .menu_button_icon::after {
  top: 2.5px;
  transform: rotate(-30deg);
}

/* MENU の文字。デザインはアウトライン化SVG（表記は「NEMU」＝MENUの誤記・2026-08-05ユーザー確認）
   だったため live text 化。キャップ高さ12px＝font-size 16px で再現。
   字幅はデザイン44px→実測約54px（デザインのNoto Sans JPに対し本案件はwiki指定スタックのため
   ラテン大文字の字送りが広い）。ボタン幅いっぱい＋中央寄せなのでレイアウトには影響しない */
.menu_button_text {
  display: block;
  font-size: 16px;
  font-weight: bold;
  line-height: 12px;
  letter-spacing: 0.05em;
  text-indent: 0.05em; /* 末尾の字送りぶんを打ち消して中央に見せる */
}

.menu-main {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}

.menu-main.open {
  grid-template-rows: 1fr;
}

.menu-main > div {
  overflow: hidden;
  min-height: 0;
  visibility: hidden;
  transition: visibility .3s ease;
}

.menu-main.open > div {
  visibility: visible;
}

/* ボタンとの間隔は ul の margin で取る（> div に padding を付けると
   閉じている（0fr）ときも padding 分だけ高さが残る） */
.menu-main ul {
  margin-top: 8px;
  background: var(--color-white);
  border-radius: 8px;
}

.menu-main li + li {
  border-top: 1px solid var(--color-line-thin);
}

.menu-main a {
  display: block;
  padding: 16px;
  text-align: center;
  font-weight: bold;
}

.menu-main a:hover {
  opacity: .5;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .menu-main,
  .menu-main > div,
  .menu_button_icon::before,
  .menu_button_icon::after {
    transition: none;
  }
}

/*======================================================================
  パンくず（制作シート「ぱんくず」＝パターン8。wiki指定の形をそのまま使用）
  ※デザインにパンくずは無いため、配色・サイズのみデザイントークンに合わせている
======================================================================*/
.breadcrumb {
  background: var(--color-bg);
  padding-block: 16px;
}

/* wiki指定の形（.breadcrumb > ul > li）を崩さないため、内寄せは ul 側で取る */
.breadcrumb ul {
  margin: 0 auto;
  max-width: 768px;
  padding-inline: 24px;
  box-sizing: border-box;
}

.breadcrumb ul li {
  padding-right: 5px;
  display: inline-block;
  font-size: 16px;
}

.breadcrumb ul li a span {
  font-weight: bold;
}

.breadcrumb img {
  width: 16px;
  height: 16px;
  display: inline-block;
  margin-bottom: 5px;
}

/*======================================================================
  HEADER
======================================================================*/
header {
  background: var(--gradation);
  overflow: hidden;
}

header > .box_wrap {
  padding-block: 24px;
}

/* ロゴ＋写真2枚。写真1枚は絶対配置なので基準にする */
header .header_mv {
  position: relative;
  margin-bottom: 24px;
}

header .header_logo {
  display: block;
  position: relative;
  z-index: 2; /* デザイン上、ロゴは右上の写真より前面 */
  width: 100%;
  max-width: 443px;
  margin-bottom: 24px;
  filter: drop-shadow(var(--shadow-logo));
}

header .header_logo img {
  width: 100%;
  height: auto;
  aspect-ratio: 443 / 95;
}

/* ロゴは画像リンクなので透明度で反応（wiki「hoverについて」） */
header .header_logo:hover {
  opacity: .5;
  text-decoration: none;
}

/* 写真＋背面のクリーム色オフセットブロック（右下に16pxずらす） */
header .header_photo {
  display: block;
  position: relative;
  padding: 0 16px 16px 0;
}

header .header_photo::before {
  content: "";
  position: absolute;
  inset: 16px 0 0 16px;
  background: var(--color-bg);
  z-index: 0;
}

header .header_photo img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* 左下の写真（通常フロー）：323×215 / 枠は339×231 */
header .header_photo--main {
  width: 47.0833%; /* 339 / 720 */
}

header .header_photo--main img {
  aspect-ratio: 323 / 215;
}

/* 右上の写真（絶対配置）：354.373×227.934 / 枠は371×244 */
header .header_photo--sub {
  position: absolute;
  top: 0;
  left: 48.4722%;  /* 349 / 720 */
  width: 51.5278%; /* 371 / 720 */
}

header .header_photo--sub img {
  aspect-ratio: 354.373 / 227.934;
}

header .header_content {
  margin-bottom: 24px;
}

header h1 {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

/*======================================================================
  TOP（index）
======================================================================*/
.index {
  padding-block: 40px;
}

.index .index_new h2 {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 24px;
}

.index .index_new ul li {
  border: 1px solid var(--color-text);
}

.index .index_new ul li + li {
  margin-top: 24px;
}

.index .index_new ul li .index_date {
  display: block;
  padding: 16px;
  font-size: 16px;
  font-weight: bold;
}

.index .index_new ul li .img_wrap {
  height: 200px;
  padding: 16px;
  border-top: 1px solid var(--color-text);
  border-bottom: 1px solid var(--color-text);
}

.index .index_new ul li h3 {
  padding: 16px;
}

/* タイトルは1行省略 */
.index .index_new ul li h3 a {
  display: block;
  font-size: 24px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*======================================================================
  セクションラベル（category / article / recommend の英字見出し）
======================================================================*/
.section_label {
  margin: 0 auto;
  max-width: 768px;
  padding-inline: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-text);
  box-sizing: border-box;
  font-size: 20px;
  font-weight: bold;
}

/*======================================================================
  CATEGORY
======================================================================*/
.category {
  padding-block: 40px;
}

.category .category_top {
  margin-bottom: 24px;
}

/* カテゴリのヒーロー：画像＋暗幕＋中央のカテゴリ名 */
.category .category_top .img_wrap {
  height: 168px;
  margin-bottom: 16px;
}

.category .category_top .img_wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-overlay);
}

.category .category_top h2 {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  padding-inline: 16px;
  font-size: 32px;
  font-weight: bold;
  color: var(--color-white);
  text-align: center;
  z-index: 1;
}

.category .category_top p {
  font-size: 16px;
}

.category .category_post li + li {
  margin-top: 24px;
}

.category .category_post li h3 {
  margin-bottom: 16px;
}

/* タイトルは1行省略 */
.category .category_post li h3 a {
  display: block;
  font-size: 24px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.category .category_post li .img_wrap {
  height: 168px;
  margin-bottom: 16px;
}

.category .category_post li p {
  font-size: 16px;
  margin-bottom: 16px;
}

/* 続きを読む（Button コンポーネント） */
/* 右寄せ。inline-flex だと margin:auto が効かないのでブロックレベルの flex にする */
.category .category_post li .category_more {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  width: fit-content;
  padding: 8px 16px;
  border: 1px solid var(--color-text);
  border-radius: 999px;
  font-size: 16px;
  font-weight: bold;
}

.category .category_post li .category_more img {
  width: 12px;
  height: 24px;
}

.category .category_post li .category_more:hover {
  opacity: .5;
  text-decoration: none;
}

/*======================================================================
  DETAIL
======================================================================*/
.detail {
  padding-block: 40px;
}

.detail .detail_head {
  margin-bottom: 24px;
}

/* 記事のヒーロー：画像＋暗幕＋中央の記事タイトル */
.detail .detail_head .img_wrap {
  height: 168px;
  margin-bottom: 16px;
}

.detail .detail_head .img_wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-overlay);
}

.detail .detail_head h2 {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  padding-inline: 16px;
  font-size: 32px;
  font-weight: bold;
  color: var(--color-white);
  text-align: center;
  z-index: 1;
}

/* 記事が属するカテゴリ（CategoryButton） */
.detail .detail_category_list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}

.detail .detail_category_list li a {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: var(--color-green);
  border-radius: 999px;
  color: var(--color-white);
  font-size: 16px;
  font-weight: bold;
}

.detail .detail_category_list li a:hover {
  opacity: .5;
  text-decoration: none;
}

.detail .detail_head p {
  font-size: 16px;
}

/*----------------------------------------------------------------------
  記事本文（.detail_post）
  ※縦余白は flex/gap を使わずブロックフロー＋margin。p には持たせず、
    新しい塊を始める h3 / 画像 / ul 側が余白を持つ（CMSが任意順で流し込むため）
----------------------------------------------------------------------*/
.detail .detail_post h3 {
  margin: 24px 0 16px;
  font-size: 24px;
  font-weight: bold;
}

.detail .detail_post .img_wrap {
  height: 168px;
  margin-bottom: 16px;
}

.detail .detail_post p {
  margin: 0;
  font-size: 16px;
}

.detail .detail_post ul {
  margin: 16px 0;
  padding-left: 1.5em;
  list-style: disc;
}

.detail .detail_post ul li {
  font-size: 16px;
}

/* 本文中のテキストリンク（サイト未使用の落ち着いた色） */
.detail .detail_post a {
  font-weight: bold;
  color: var(--color-link);
  text-decoration: underline;
}

.detail .detail_post a:hover {
  opacity: .5;
}

/* 引用（チェック表 紹介パターン＝引用型）。デザインに無い要素のため既存トークンのみで構成 */
.detail .detail_post blockquote {
  margin: 24px 0 8px;
  padding: 16px 20px;
  background: var(--color-white);
  border-left: 4px solid var(--color-green);
}

.detail .detail_post blockquote p {
  font-size: 16px;
}

/* 引用元（レバの最小文字サイズ規定=16px。区別は blockquote 側の装飾で付く） */
.detail .detail_post blockquote + p {
  font-size: 16px;
}

/* 先頭・末尾の外側marginは殺す */
.detail .detail_post > :first-child {
  margin-top: 0;
}

.detail .detail_post > :last-child {
  margin-bottom: 0;
}

/* リンク設置（チェック表 タグ種別=b:div／テキストリンクのみ）。上下1em＝wiki規定。
   末尾に来ても 1em を保つため :last-child の打ち消しより後に置く */
.detail .detail_post .link_item {
  display: inline-block;
  margin: 1em 0;
}

/* リンク設置の画像（ロゴ・バナー）は グローバルの img{width:100%} を打ち消し、
   HTMLの width / height 属性の実寸をそのまま出す（記事入力担当が実寸を貼り込むため）。
   height は auto のまま＝本文幅より大きい実寸を貼られても縦横比が崩れない */
.detail .detail_post .link_item img {
  display: block;
  width: revert-layer;
  max-width: 100%;
}

/*======================================================================
  RECOMMEND
======================================================================*/
.recommend {
  padding-block: 40px;
  background: var(--color-blue);
  color: var(--color-white);
}

.recommend .section_label {
  border-bottom-color: var(--color-white);
  margin-bottom: 24px;
}

.recommend a {
  color: var(--color-white);
}

.recommend h4 {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 24px;
}

.recommend ul li {
  border: 1px solid var(--color-white);
}

.recommend ul li + li {
  margin-top: 24px;
}

.recommend ul li strong {
  display: block;
  padding: 16px;
}

.recommend ul li strong a {
  display: block;
  font-size: 24px;
  font-weight: bold;
}

.recommend ul li .img_wrap {
  height: 188px;
  padding: 16px;
  border-top: 1px solid var(--color-white);
  border-bottom: 1px solid var(--color-white);
}

/*======================================================================
  FOOTER
======================================================================*/
footer {
  position: relative;
  padding-block: 40px;
}

/* デザインではロゴと同じ行の右端。DOM順を変えずに重ねるため絶対配置 */
footer .page_top {
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
}

footer .page_top .box_wrap {
  display: flex;
  justify-content: flex-end;
}

footer .page_top a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--color-green);
  border-radius: 999px;
  color: var(--color-white);
  font-size: 16px;
  font-weight: bold;
}

footer .page_top a:hover {
  opacity: .5;
  text-decoration: none;
}

footer .page_top .page_top_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 12px;
}

footer .page_top .page_top_icon img {
  width: 12px;
  height: 24px;
  transform: rotate(-90deg);
}

footer .footer_logo {
  margin-bottom: 40px;
}

footer .footer_logo a {
  display: block;
  width: 100%;
  /* 右上の「TOPへ戻る」（絶対配置）と重ならないよう、狭い画面ではロゴ側を縮める */
  max-width: min(320px, calc(100% - 176px));
  filter: drop-shadow(var(--shadow-logo));
}

footer .footer_logo a img {
  width: 100%;
  height: auto;
  aspect-ratio: 443 / 95;
}

/* ロゴは画像リンクなので透明度で反応（wiki「hoverについて」） */
footer .footer_logo a:hover {
  opacity: .5;
  text-decoration: none;
}

footer .fnav {
  margin-bottom: 40px;
}

footer .fnav ul li + li {
  margin-top: 16px;
}

footer .fnav ul li a {
  font-size: 20px;
  font-weight: bold;
}

footer .copyright small {
  display: block;
  font-size: 16px;
  text-align: center;
}