@charset "UTF-8";
/* =========================================================
   AJO LABO：固定ページ・コラム記事・カテゴリー一覧
   File: assets/css/paper.css
   読み込み：inc/paper.php（#body_wrap.ajo-paper のページだけ）
   漆喰の壁の上に、白い紙を一枚置いたような読み物ページ
========================================================= */

#body_wrap.ajo-paper{
  background: #fff;   /* 2026-10：漆喰 → 白 */

  --p-ink:    #3a3530;
  --p-sub:    #6b6158;
  --p-amber:  #6b6158;   /* 2026-10：琥珀 → 灰 */
  --p-clay:   #b4492f;
  --p-green:  #2b2724;   /* 2026-10：深緑 → 墨 */
  --p-line:   #ddd2c7;
  --p-paper:  #fffdf9;
  --p-serif:  "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --p-latin:  "Cormorant Garamond", "Times New Roman", serif;
}
/* 本文の見出し・リンクなどの色をこのページの中だけ深緑に（ヘッダー・フッターはそのまま） */
#body_wrap.ajo-paper #content{
  --color_htag: #2b2724;
  --color_main: #2b2724;
}


/* レシピのページ（ファンのレシピの詳細・一覧・カテゴリー別など）：
   白い紙のパネルは使わず、漆喰の壁と題字だけをそろえる（#body_wrap.ajo-wall） */
#body_wrap.ajo-wall{
  background: #fff;   /* 2026-10：漆喰 → 白 */
  --p-ink:    #3a3530;
  --p-sub:    #6b6158;
  --p-amber:  #6b6158;   /* 2026-10：琥珀 → 灰 */
  --p-clay:   #b4492f;
  --p-green:  #2b2724;   /* 2026-10：深緑 → 墨 */
  --p-serif:  "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --p-latin:  "Cormorant Garamond", "Times New Roman", serif;
}
/* ファンのレシピの詳細：題名は下の白いカードにあるので、帯には「RECIPE」とカテゴリーだけ */
#body_wrap.ajo-wall.single-recipe #top_title_area{ padding: 40px 0 8px; }
#body_wrap.ajo-wall.single-recipe .c-postTitle__ttl,
#body_wrap.ajo-wall.single-recipe .c-postTitle__date{ display: none; }
#body_wrap.ajo-wall.single-recipe .l-topTitleArea__body::before{
  content: "RECIPE";
  font-family: var(--p-latin);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .32em;
  padding-left: .32em;
  color: var(--p-amber);
}
#body_wrap.ajo-wall.single-recipe .p-articleMetas.-top{ margin-top: 10px; }
#body_wrap:is(.ajo-paper, .ajo-wall) .p-articleMetas .c-categoryList{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* ---------- 1) タイトル：写真の帯をやめ、壁に掲げた題字に ---------- */
#body_wrap:is(.ajo-paper, .ajo-wall) #top_title_area{
  min-height: 0;
  padding: 64px 0 28px;
  background: none;
  color: var(--p-ink);
}
#body_wrap:is(.ajo-paper, .ajo-wall) #top_title_area .l-topTitleArea__img{ display: none; }
#body_wrap:is(.ajo-paper, .ajo-wall) #top_title_area::before,
#body_wrap:is(.ajo-paper, .ajo-wall) #top_title_area::after{ content: none; display: none; }
#body_wrap:is(.ajo-paper, .ajo-wall) .l-topTitleArea__body{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--p-ink);
}

/* 固定ページの題字（SWELLは h1.c-pageTitle だけを出す） */
#body_wrap:is(.ajo-paper, .ajo-wall) #top_title_area .c-pageTitle{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--p-serif);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.5;
  color: var(--p-ink);
  text-align: center;
  text-shadow: none;
}
/* 題字の上に AJOLABO のロゴ文字（ロゴと同じ字形。色は琥珀） */
#body_wrap:is(.ajo-paper, .ajo-wall) #top_title_area .c-pageTitle::before{
  content: "";
  position: static;
  display: block;
  width: 101px;
  height: 16px;
  margin-bottom: 14px;
  border: 0;
  background: var(--p-amber);
  -webkit-mask: url(../img/ajolabo-wordmark.svg) no-repeat center / contain;
          mask: url(../img/ajolabo-wordmark.svg) no-repeat center / contain;
}
#body_wrap:is(.ajo-paper, .ajo-wall) #top_title_area .c-pageTitle::after{
  content: "";
  position: static;
  display: block;
  width: 40px;
  height: 2px;
  margin-top: 18px;
  border: 0;
  background: var(--p-clay);
}
#body_wrap:is(.ajo-paper, .ajo-wall) #top_title_area .c-pageTitle__inner{
  padding: 0;
  border: 0;
  background: none;
}
#body_wrap:is(.ajo-paper, .ajo-wall) #top_title_area .c-pageTitle__subTitle{ display: none; }

/* 記事の題字：日付 → タイトル → カテゴリー */
#body_wrap:is(.ajo-paper, .ajo-wall) .c-postTitle{
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 8px;
  max-width: 820px;
  margin: 0 auto;
}
#body_wrap:is(.ajo-paper, .ajo-wall) .c-postTitle__ttl{
  margin: 0;
  font-family: var(--p-serif);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.55;
  color: var(--p-ink);
  text-shadow: none;
}
#body_wrap:is(.ajo-paper, .ajo-wall) .c-postTitle__date{
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  gap: .5em;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--p-latin);
  font-size: 17px;
  letter-spacing: .14em;
  color: var(--p-amber);
}
#body_wrap:is(.ajo-paper, .ajo-wall) .c-postTitle__date::before,
#body_wrap:is(.ajo-paper, .ajo-wall) .c-postTitle__date::after{ content: none; }
#body_wrap:is(.ajo-paper, .ajo-wall) .c-postTitle__date .__y,
#body_wrap:is(.ajo-paper, .ajo-wall) .c-postTitle__date .__md{
  display: inline;
  font-size: inherit;
  line-height: 1;
  border: 0;
  padding: 0;
}

#body_wrap:is(.ajo-paper, .ajo-wall) .p-articleMetas.-top{
  justify-content: center;
  margin-top: 16px;
}
#body_wrap:is(.ajo-paper, .ajo-wall) .p-articleMetas .c-categoryList__link{
  padding: 4px 14px;
  border: 1px solid var(--p-green);
  border-radius: 999px;
  background: transparent;
  color: var(--p-green);
  font-size: 12px;
  letter-spacing: .08em;
}
#body_wrap:is(.ajo-paper, .ajo-wall) .p-articleMetas .c-categoryList__link::before,
#body_wrap:is(.ajo-paper, .ajo-wall) .p-articleMetas .c-categoryList::before{ display: none; }

/* 記事下「この記事に関連する商品」の見出し */
#body_wrap.ajo-paper .labo-relatedProducts .recipe-h2{
  padding: 0 0 0 12px;
  border: 0;
  border-left: 3px solid var(--p-clay);
  background: none;
  font-family: var(--p-serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--p-ink);
}

/* パンくず：帯の色を消して壁になじませる */
#body_wrap.ajo-paper #breadcrumb,
#body_wrap.ajo-paper .p-breadcrumb.-bg-on{
  background: transparent;
  box-shadow: none;
}
#body_wrap.ajo-paper .p-breadcrumb__list{ justify-content: center; }


/* ---------- 2) 本文：白い紙のパネル ---------- */
#body_wrap.ajo-paper.page #content,
#body_wrap.ajo-paper.single-post #content{
  padding-top: 8px;
}
#body_wrap.ajo-paper.page .l-mainContent__inner,
#body_wrap.ajo-paper.single-post .l-mainContent__inner{
  max-width: 880px;
  margin: 0 auto;
  padding: 56px 64px 64px;
  box-sizing: border-box;
  background: var(--p-paper);
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(70,45,30,.06), 0 16px 32px rgba(70,45,30,.08);
}

/* 本文の見出し：形はテーマのまま、色は深緑・書体は明朝に */
#body_wrap.ajo-paper .post_content h2,
#body_wrap.ajo-paper .post_content h3,
#body_wrap.ajo-paper .post_content h4{
  font-family: var(--p-serif);
  font-weight: 600;
  letter-spacing: .05em;
}
#body_wrap.ajo-paper .post_content h2{ border-radius: 3px; }
#body_wrap.ajo-paper .post_content{ color: var(--p-ink); }
#body_wrap.ajo-paper .post_content a:not([class]){ color: var(--p-green); }


/* ---------- 3) カテゴリー一覧（にんにくコラム） ---------- */
/* 子テーマの style.css にある「コラム一覧は白背景・角丸14pxのカード」の指定より優先させる */
#body_wrap.ajo-paper.archive.category{
  background: #fff !important;   /* 2026-10：漆喰 → 白 */
}
#body_wrap.ajo-paper.archive .c-pageTitle{
  display: flex;
  flex-direction: column;
  align-items: center;
}
#body_wrap.ajo-paper.archive .c-pageTitle::before{
  content: "CATEGORY";
  position: static;
  margin-bottom: 6px;
  border: 0;
  background: none;
  font-family: var(--p-latin);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .32em;
  padding-left: .32em;
  color: var(--p-amber);
}
#body_wrap.ajo-paper.category-column .c-pageTitle::before{ content: "COLUMN"; }
#body_wrap.ajo-paper.archive .c-pageTitle__inner{ float: none !important; }
#body_wrap.ajo-paper.archive.category .p-postList{ gap: 28px !important; }
#body_wrap.ajo-paper.archive.category .p-postList__item{
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  overflow: visible !important;
}
#body_wrap.ajo-paper.archive.category .p-postList__link{ border-radius: 6px; }
#body_wrap.ajo-paper.archive.category .p-postList__body{ padding: 18px 20px 22px !important; }
@media (max-width: 959px){
  #body_wrap.ajo-paper.archive.category .p-postList{ gap: 20px !important; }
}

#body_wrap.ajo-paper.archive .l-mainContent__inner > .c-pageTitle{
  margin: 48px 0 40px;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
}
#body_wrap.ajo-paper.archive .l-mainContent__inner > .c-pageTitle::after{ content: none; }
#body_wrap.ajo-paper.archive .c-pageTitle__inner{
  display: block;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--p-serif);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--p-ink);
}
#body_wrap.ajo-paper.archive .c-pageTitle__inner::before,
#body_wrap.ajo-paper.archive .c-pageTitle__inner::after{ content: none; }
#body_wrap.ajo-paper.archive .c-pageTitle__subTitle{
  display: none !important;
  margin: 0 0 6px;
  font-family: var(--p-latin);
  font-size: 15px !important;
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--p-amber);
}

/* 記事カード：白いパネル＋影（館内のご案内と同じ質感） */
#body_wrap.ajo-paper .p-postList.-type-card{ gap: 0; }
#body_wrap.ajo-paper .p-postList.-type-card .p-postList__item{ margin-bottom: 32px; }
#body_wrap.ajo-paper .p-postList.-type-card .p-postList__link{
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--p-paper);
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(70,45,30,.06), 0 12px 24px rgba(70,45,30,.08);
  transition: transform .3s ease, box-shadow .3s ease;
}
#body_wrap.ajo-paper .p-postList.-type-card .p-postList__link:hover{
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(70,45,30,.08), 0 18px 32px rgba(70,45,30,.14);
}
#body_wrap.ajo-paper .p-postList.-type-card .p-postList__thumb{ margin: 0; }
#body_wrap.ajo-paper .p-postList.-type-card .p-postList__body{ padding: 18px 20px 20px; }
#body_wrap.ajo-paper .p-postList__title{
  font-family: var(--p-serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--p-ink);
}
#body_wrap.ajo-paper .p-postList__excerpt{
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--p-sub);
}
#body_wrap.ajo-paper .p-postList__meta{ margin-top: 10px; }


/* ---------- 4) フォーム（Contact Form 7） ---------- */
#body_wrap.ajo-paper .wpcf7{ margin-top: 32px; }
#body_wrap.ajo-paper .wpcf7-form > p{
  margin: 0 0 26px;
  font-weight: 600;
  font-size: 15px;
  color: var(--p-ink);
}
#body_wrap.ajo-paper .wpcf7-form > p small{
  display: block;
  margin-top: 10px;
  padding: 12px 16px;
  border-radius: 6px;
  background: #f6efe6;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.8;
  color: var(--p-sub);
}
#body_wrap.ajo-paper .wpcf7-form-control-wrap{ display: block; margin-top: 8px; }
#body_wrap.ajo-paper .wpcf7 input[type="text"],
#body_wrap.ajo-paper .wpcf7 input[type="email"],
#body_wrap.ajo-paper .wpcf7 input[type="tel"],
#body_wrap.ajo-paper .wpcf7 input[type="url"],
#body_wrap.ajo-paper .wpcf7 textarea,
#body_wrap.ajo-paper .wpcf7 select{
  width: 100%;
  box-sizing: border-box;
  padding: 13px 16px;
  border: 1px solid var(--p-line);
  border-radius: 8px;
  background: #fff;
  font-size: 16px;            /* iPhoneで入力時に画面が拡大されない大きさ */
  font-weight: 400;
  color: var(--p-ink);
  box-shadow: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
#body_wrap.ajo-paper .wpcf7 textarea{ min-height: 200px; line-height: 1.8; }
#body_wrap.ajo-paper .wpcf7 input::placeholder,
#body_wrap.ajo-paper .wpcf7 textarea::placeholder{ color: #b3a89d; }
#body_wrap.ajo-paper .wpcf7 input:focus,
#body_wrap.ajo-paper .wpcf7 textarea:focus,
#body_wrap.ajo-paper .wpcf7 select:focus{
  outline: none;
  border-color: var(--p-clay);
  box-shadow: 0 0 0 3px rgba(180,73,47,.15);
}
#body_wrap.ajo-paper .wpcf7 input[type="file"]{
  width: 100%;
  box-sizing: border-box;
  padding: 14px;
  border: 1px dashed #c9bcae;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  font-weight: 400;
}
#body_wrap.ajo-paper .wpcf7 input[type="file"]::file-selector-button{
  margin-right: 12px;
  padding: 8px 16px;
  border: 1px solid var(--p-green);
  border-radius: 999px;
  background: #fff;
  color: var(--p-green);
  font-weight: 600;
  cursor: pointer;
}
#body_wrap.ajo-paper .wpcf7-acceptance .wpcf7-list-item{ margin: 0; }
#body_wrap.ajo-paper .wpcf7-acceptance label{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--p-line);
  border-radius: 8px;
  background: #fff;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.7;
  cursor: pointer;
}
#body_wrap.ajo-paper .wpcf7-acceptance input[type="checkbox"]{
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--p-clay);
}
/* 任意の項目をまとめた開閉ブロック（フォーム内の <details class="ajoForm__more">） */
#body_wrap.ajo-paper .ajoForm__more{
  margin: 0 0 26px;
  border: 1px solid var(--p-line);
  border-radius: 8px;
  background: #fbf6ef;
}
#body_wrap.ajo-paper .ajoForm__more > summary{
  position: relative;
  padding: 16px 48px 16px 18px;
  font-weight: 600;
  font-size: 15px;
  color: var(--p-green);
  cursor: pointer;
  list-style: none;
}
#body_wrap.ajo-paper .ajoForm__more > summary::-webkit-details-marker{ display: none; }
#body_wrap.ajo-paper .ajoForm__more > summary::after{
  content: "＋";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 400;
}
#body_wrap.ajo-paper .ajoForm__more[open] > summary::after{ content: "－"; }
#body_wrap.ajo-paper .ajoForm__more > summary small{
  display: block;
  margin-top: 2px;
  font-weight: 400;
  font-size: 12px;
  color: var(--p-sub);
}
#body_wrap.ajo-paper .ajoForm__body{ padding: 4px 18px 2px; }
#body_wrap.ajo-paper .ajoForm__body > p{
  margin: 0 0 20px;
  font-weight: 600;
  font-size: 15px;
  color: var(--p-ink);
}
#body_wrap.ajo-paper .ajoForm__note{
  display: block;
  margin-top: 4px;
  font-weight: 400;
  font-size: 12px;
  color: var(--p-sub);
}
#body_wrap.ajo-paper .wpcf7 select{
  appearance: none;
  -webkit-appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b6158' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 16px center / 12px 8px;
  padding-right: 40px;
}

/* 送信ボタン：投稿コーナーと同じ赤土色 */
#body_wrap.ajo-paper .wpcf7 input[type="submit"]{
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 8px auto 0;
  padding: 16px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--p-clay);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .1em;
  box-shadow: 0 3px 0 rgba(0,0,0,.14);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
#body_wrap.ajo-paper .wpcf7 input[type="submit"]:hover:not(:disabled){
  transform: translateY(-2px);
  box-shadow: 0 5px 0 rgba(0,0,0,.14);
}
#body_wrap.ajo-paper .wpcf7 input[type="submit"]:disabled{
  opacity: .45;
  cursor: not-allowed;
}
#body_wrap.ajo-paper .wpcf7-spinner{ display: block; margin: 10px auto 0; }
#body_wrap.ajo-paper .wpcf7-not-valid-tip{ margin-top: 6px; font-size: 13px; font-weight: 400; }
#body_wrap.ajo-paper .wpcf7 form .wpcf7-response-output{
  margin: 24px 0 0;
  padding: 14px 18px;
  border-radius: 8px;
  font-weight: 400;
}


/* ---------- スマホ ---------- */
@media (max-width: 599px){
  #body_wrap:is(.ajo-paper, .ajo-wall) #top_title_area{ padding: 40px 0 16px; }
  #body_wrap:is(.ajo-paper, .ajo-wall) #top_title_area .c-pageTitle,
  #body_wrap:is(.ajo-paper, .ajo-wall) .c-postTitle__ttl,
  #body_wrap.ajo-paper.archive .c-pageTitle__inner{ font-size: 22px; letter-spacing: .04em; }
  #body_wrap:is(.ajo-paper, .ajo-wall) #top_title_area .c-pageTitle::before,
  #body_wrap.ajo-paper.archive .c-pageTitle__subTitle{ font-size: 13px !important; }
  #body_wrap.ajo-paper.page .l-mainContent__inner,
  #body_wrap.ajo-paper.single-post .l-mainContent__inner{
    padding: 32px 18px 40px;
  }
  #body_wrap.ajo-paper.archive .l-mainContent__inner > .c-pageTitle{ margin: 32px 0 28px; }
}


/* =========================================================
   シンプル化（2026-10）：白地なので紙のパネル・カードは影をやめて細い線に
========================================================= */
#body_wrap.ajo-paper.page .l-mainContent__inner,
#body_wrap.ajo-paper.single-post .l-mainContent__inner{
  background: #fff;
  box-shadow: none;
  border: 1px solid #ece7e1;
}
@media (max-width: 599px){
  #body_wrap.ajo-paper.page .l-mainContent__inner,
  #body_wrap.ajo-paper.single-post .l-mainContent__inner{ border: 0; padding-left: 0; padding-right: 0; }
}
#body_wrap.ajo-paper .p-postList.-type-card .p-postList__link{
  background: #fff;
  border: 1px solid #ece7e1;
  box-shadow: none;
}
#body_wrap.ajo-paper .p-postList.-type-card .p-postList__link:hover{
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}