@charset "UTF-8";
/* ==========================================================================
   COSA ON Online デザインの統一(2026-10)
   functions.php の cosa_design_css() で、テーマ設定の色指定(head 内の style)より後に読み込む。
   ページ幅: 一覧ページ 1160px / 読み物のページ(body.cosa-narrow)960px
   ========================================================================== */

:root {
  --cosa-pink: #DE4782;
  --cosa-pink-soft: #fdf1f6;
  --cosa-blue: #1592E6;
  --cosa-ink: #222;
  --cosa-text: #333;
  --cosa-sub: #666;
  --cosa-line: #ddd;
  --cosa-soft: #f5f5f5;
}


/* 1. 入れ物と左端 ------------------------------------------------------- */
@media screen and (min-width: 1211px) {
  /* 読み物のページは幅960px。パンくず・題名・本文の左端をそろえる */
  body.cosa-narrow #bread_crumb ul,
  body.cosa-narrow #main_contents {
    width: 960px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body.cosa-narrow #main_contents {
    padding-top: 40px !important;
  }
  body.cosa-narrow .post_content {
    padding: 0 !important;
  }
  /* サイドバーのない一覧・イベント詳細の左右余白をなくし、左端をパンくずに合わせる */
  #main_contents.noside #main_col,
  #recipe_title_area {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* 2. ページ題名・詳細ページの題名 --------------------------------------- */
.design_headline2 {
  padding-top: 0 !important;
}
/* 本文の中にある題名(読み物のページ)は、上の短い線の分の余白を題名の中に取る(ページビルダーの行ははみ出しを隠すため) */
.post_content .design_headline2 {
  padding-top: 20px !important;
}
.post_content .design_headline2::before {
  top: 0 !important;
}
#post_title_area .title,
#recipe_title_area .title {
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  word-break: auto-phrase;
}


/* 3. 中見出し ------------------------------------------------------------
   大: 下線に題名と同じ色の短い線を重ねる / 小: 左にピンクの線 */
body.cosa-narrow .post_content h2:first-child:not(.design_headline2),
.trial h3.design_headline3,
.faq h3,
#family_list h2.search-title,
#related_post .design_headline,
#recent_news .design_headline,
.post_content h3.style3b {
  position: relative;
  display: block !important;
  width: auto !important;
  height: auto !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  color: var(--cosa-ink) !important;
  background: none !important;
  text-align: left !important;
  border: none !important;
  border-bottom: 1px solid var(--cosa-line) !important;
  box-shadow: none !important;
  padding: 0 0 14px !important;
  margin: 0 0 28px !important;
}
body.cosa-narrow .post_content h2:first-child:not(.design_headline2)::before,
.trial h3.design_headline3::before,
.faq h3::before,
#family_list h2.search-title::before,
#related_post .design_headline::before,
#recent_news .design_headline::before,
.post_content h3.style3b::before {
  display: none !important;
}
body.cosa-narrow .post_content h2:first-child:not(.design_headline2)::after,
.trial h3.design_headline3::after,
.faq h3::after,
#family_list h2.search-title::after,
#related_post .design_headline::after,
#recent_news .design_headline::after,
.post_content h3.style3b::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  top: auto !important;
  bottom: -1px !important;
  width: 60px !important;
  height: 3px !important;
  margin: 0 !important;
  border: none !important;
  background: linear-gradient(to right, var(--cosa-blue), var(--cosa-pink)) !important;
}
/* 見出しの右にある「一覧へ」などのリンク */
#related_post .design_headline .archive_link,
#recent_news .design_headline .archive_link {
  top: auto !important;
  bottom: 14px !important;
  font-size: 13px !important;
}

body.cosa-narrow .post_content h2:not(:first-child):not(.design_headline2),
.trial h4,
.cosa_terms_heading,
.post_content h3.style5b,
#side_col .widget_headline {
  position: relative;
  height: auto !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
  color: var(--cosa-ink) !important;
  background: none !important;
  text-align: left !important;
  border: none !important;
  border-left: 4px solid var(--cosa-pink) !important;
  padding: 0 0 0 14px !important;
  margin: 0 0 18px !important;
}
body.cosa-narrow .post_content h2:not(:first-child):not(.design_headline2)::before,
body.cosa-narrow .post_content h2:not(:first-child):not(.design_headline2)::after,
.trial h4::before,
.cosa_terms_heading::before,
.post_content h3.style5b::before,
#side_col .widget_headline::before,
#side_col .widget_headline::after {
  display: none !important;
}
.cosa_terms_heading {
  margin-top: 48px !important;
}
#side_col .widget_headline span {
  display: inline !important;
  font-size: inherit !important;
}


/* 4. 本文 --------------------------------------------------------------- */
.post_content p,
.post_content li,
.post_content dd {
  line-height: 1.9 !important;
}
/* 本文のリンクは水色(現行のよくある質問と同じ #1592E6。2026-10-07 先方の修正希望でピンクから変更) */
.post_content a:not([class]),
.faq dd a,
.about_flow a:not([class]),
#main_col > p.lh2em a:not([class]) {
  color: var(--cosa-blue) !important;
  text-decoration: underline !important;
}
.post_content .wp-caption-text,
.post_content figcaption {
  font-style: normal !important;
  font-size: 13px !important;
  color: var(--cosa-sub) !important;
}


/* 5. ボタン ------------------------------------------------------------- */
/* 主なボタン(黒) */
a.btn.btn1,
.trial a.btn3 {
  background: var(--cosa-ink) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 5px !important;
  font-size: 14px !important;
  letter-spacing: 0.04em;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
}
.trial a.btn3 {
  display: block !important;
  width: 340px !important;
  max-width: 100%;
  height: 52px !important;
  line-height: 52px !important;
  margin: 24px 0 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

/* 補助ボタン(白地に枠線) */
a.q_button.sz_l,
a.q_button.sz_s,
a.q_button.btn4 {
  background: #fff !important;
  color: var(--cosa-ink) !important;
  border: 1px solid var(--cosa-ink) !important;
  border-radius: 5px !important;
  font-size: 15px !important;
  box-shadow: none !important;
}
a.q_button.sz_s {
  font-size: 14px !important;
}
a.q_button.sz_l:hover,
a.q_button.sz_s:hover,
a.q_button.btn4:hover {
  background: var(--cosa-ink) !important;
  color: #fff !important;
  border-color: var(--cosa-ink) !important;
  opacity: 1 !important;
}

/* ボタンを並べる行(体験版・COSA ON Onlineとは・入会お手続き方法):本文の左右の端にそろえる */
.post_row.link-button {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin: 0 0 40px !important;
  padding: 0 !important;
}
.post_row.link-button::before,
.post_row.link-button::after {
  display: none !important;
}
.post_row.link-button .post_col {
  float: none !important;
  flex: 1 1 0;
  width: auto !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}
.post_row.link-button .post_col:only-child {
  flex: 0 0 auto;
}
.post_row.link-button a.sz_l {
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
  padding-left: 16px !important;
  padding-right: 16px !important;
}
.post_row.link-button .post_col:only-child a.sz_l {
  min-width: 320px !important;
}
/* 文言が長くて2行になるボタン(活用ガイドなど):行の間を詰め、1行のボタンと同じ高さ以上で上下の中央に置く(2026-10-14) */
.post_row.link-button a.q_button.sz_l {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: auto !important;
  min-height: 70px;
  line-height: 1.5 !important;
  text-align: center;
  word-break: auto-phrase;
}
@media screen and (max-width: 1023px) {
  .post_row.link-button .post_col-3 {
    flex: 0 0 100%;
  }
}
@media screen and (max-width: 767px) {
  .post_row.link-button {
    flex-direction: column;
    gap: 12px;
  }
  .post_row.link-button .post_col {
    flex: none;
  }
  .post_row.link-button .post_col:only-child a.sz_l {
    min-width: 0 !important;
  }
}

/* 会員限定の案内:会員登録はピンク、ログインは白地に枠線(ヘッダーと同じ組み合わせ) */
.memberonly a.btn.regist {
  display: inline-block !important;
  min-width: 220px;
  height: 48px !important;
  line-height: 48px !important;
  padding: 0 24px !important;
  background: var(--cosa-pink) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 5px !important;
  font-size: 14px !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
.memberonly a#contents_login.btn {
  display: inline-block !important;
  min-width: 220px;
  height: 46px !important;
  line-height: 46px !important;
  margin-top: 12px !important;
  padding: 0 24px !important;
  background: #fff !important;
  color: var(--cosa-ink) !important;
  border: 1px solid var(--cosa-ink) !important;
  border-radius: 5px !important;
  font-size: 14px !important;
  text-decoration: none !important;
}

/* フッターのボタンもヘッダーと同じ組み合わせにする */
#footer #footer_login.btn.login {
  background: var(--cosa-pink) !important;
  border-color: var(--cosa-pink) !important;
  color: #fff !important;
}


/* 6. タグ・ラベル・鍵の印 ---------------------------------------------- */
.tag_label a,
article.item > ul:not(.meta):not(.meta-list) > li > a,
ul.meta-list .tag_label a,
.recommend_contents dl dd ul li a {
  display: inline-block !important;
  margin: 0 4px 6px 0;
  padding: 3px 10px !important;
  background: #f2f2f2 !important;
  color: #555 !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
  border: none !important;
  border-radius: 3px !important;
  text-decoration: none !important;
}
.tag_label a:hover,
article.item > ul:not(.meta):not(.meta-list) > li > a:hover,
.recommend_contents dl dd ul li a:hover {
  background: var(--cosa-pink-soft) !important;
  color: var(--cosa-pink) !important;
  opacity: 1 !important;
}
/* イベントの「受付中」の札(オレンジ)と鍵の印(赤)は、現行の色のままにする(2026-10-07 先方の修正希望) */


/* 7. 絞り込み枠(カテゴリから選ぶ・キーワードから選ぶ) ------------------ */
.recommend {
  background: #fff !important;
  border: 1px solid var(--cosa-line);
  border-radius: 8px !important;
  padding: 0 !important;
  overflow: hidden;
}
.recommend .recommend_title {
  margin: 0 !important;
  padding: 12px 24px !important;
  background: var(--cosa-soft);
  color: var(--cosa-ink) !important;
  font-size: 14px !important;
  text-align: left !important;
}
.recommend_contents {
  border-radius: 0 !important;
  padding: 0 24px !important;
}
.recommend_contents dl {
  padding: 18px 0 !important;
}
.recommend_contents dl + dl {
  border-top: 1px solid #eee;
}
/* 特集・記事一覧とカテゴリ一覧では、右の列の絞り込み枠を出さない(上部に同じ枠がある) */
.pc .page-id-517 #side_col #block-2,
.pc .category #side_col #block-2 {
  display: none !important;
}


/* 8. フッター ------------------------------------------------------------ */
@media screen and (min-width: 1211px) {
  /* 本文と同じ幅1160pxにそろえ、右の列は右端に寄せる */
  #footer #footer_top_inner {
    max-width: 1160px !important;
  }
  #footer #footer_right {
    width: auto !important;
    margin-left: auto;
    text-align: right;
  }
}
@media screen and (max-width: 767px) {
  #footer #footer_menu ul {
    padding-right: 20px !important;
  }
}


/* 9. ページごと ---------------------------------------------------------- */

/* トップ:「COSA ON Onlineとは」と下の2枠を、見出しと同じ幅にそろえる(タブレット幅も) */
@media screen and (min-width: 768px) {
  .top_service .item.item1 {
    width: 100% !important;
    box-sizing: border-box;
    padding: 40px 48px !important;
  }
  .top_service .item.item1 span,
  .top_service .item.item1 p {
    width: 48% !important;
    margin-left: 0 !important;
  }
  .top_service .item.item1 .btn {
    margin-left: 0 !important;
  }
  .top_index {
    width: 100% !important;
    gap: 32px !important;
  }
}
@media screen and (min-width: 1211px) {
  /* イベント欄のイラスト:一覧の右の空きに収め、画面の端で切れたり下のお知らせに重なったりしないようにする */
  .index_recent_recipe {
    position: relative;
  }
  .event_image {
    top: 120px !important;
    bottom: auto !important;
    right: 0 !important;
    width: 440px !important;
    height: auto !important;
    pointer-events: none;
  }
  .event_image img {
    display: block;
    width: 100% !important;
    height: auto !important;
  }
}
@media screen and (max-width: 1210px) {
  .event_image {
    display: none !important;
  }
}
.guide_preparing {
  text-align: left !important;
}

/* 活用事例・活用ガイドの一覧:幅いっぱいの3列にする */
.post-type-archive-case #main_col,
.tax-case_tag #main_col,
.post-type-archive-guide #main_col,
.tax-guide_cat #main_col,
.tax-guide_tag #main_col {
  float: none !important;
  width: 100% !important;
}
#case_archive #article_list,
#guide_archive #article_list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px 32px;
}
#case_archive #article_list::before,
#case_archive #article_list::after,
#guide_archive #article_list::before,
#guide_archive #article_list::after {
  display: none !important;
}
#case_archive #article_list .item,
#guide_archive #article_list .item {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}
@media screen and (max-width: 1023px) {
  #case_archive #article_list,
  #guide_archive #article_list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (max-width: 767px) {
  #case_archive #article_list,
  #guide_archive #article_list {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* お知らせ:画像なしの「日付+題名」の行 */
.cosa_news_list {
  border-top: 1px solid var(--cosa-line);
}
.cosa_news_list .item {
  float: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--cosa-line) !important;
  background: none !important;
}
.cosa_news_list .item .link {
  display: block !important;
  height: auto !important;
  padding: 20px 4px !important;
  background: none !important;
}
.cosa_news_list .title_area,
.cosa_news_list .title_area_inner {
  position: static !important;
  display: flex !important;
  align-items: baseline;
  gap: 24px;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}
.cosa_news_list .date {
  flex: 0 0 auto;
  margin: 0 !important;
  font-size: 13px !important;
  color: var(--cosa-sub) !important;
}
.cosa_news_list .title {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
}
.cosa_news_list .title span {
  display: inline !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
}
@media screen and (max-width: 767px) {
  .cosa_news_list .title_area,
  .cosa_news_list .title_area_inner {
    flex-direction: column;
    gap: 4px;
  }
  .cosa_news_list .title {
    font-size: 15px !important;
  }
}

/* COSA ON Onlineとは:開いたときの文章・写真の下に1行分の余白を取り、次の枠や締めの文章と離す。
   写真はPCだけ一回り小さくする(幅960pxの本文に対して720px)。2026-10-07 先方の修正希望 */
.page-template-page-noside article .box {
  padding-bottom: 1.8em;
}
@media screen and (min-width: 1211px) {
  .page-template-page-noside article .box .about_box_img img {
    max-width: 720px;
    margin: 0 auto;
  }
}

/* 体験版 */
.trial .index {
  display: block !important;
  width: auto !important;
  padding: 20px 28px !important;
  background: var(--cosa-soft) !important;
  border-radius: 8px;
}
.trial .index ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-top: 8px;
}
/* 「紹介ページ掲載例」は「事業紹介・PR」の書き出しまでを見せ、その下は白くぼかす(2026-10-07 先方の修正希望)。
   画像 capture_003.jpg は幅1300px・高さ1600px(上から1,600pxで切った撮影画像)。
   枠の縦横比を 1300:1540 にして、どの画面幅でも画像の同じ位置(上から1,540px)まで見せる。
   「事業紹介・PR」は上から約1,220px、最初の段落は約1,320pxまで */
.trial .single-family {
  position: relative;
  aspect-ratio: 1300 / 1540;
  overflow: hidden;
  border: 1px solid var(--cosa-line);
  border-radius: 8px;
}
.trial .single-family::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 14%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
}
.trial .single-family img {
  display: block;
  width: 100%;
  height: auto;
}

/* よくある質問:開閉の印、お問い合わせのボタン */
.faq dt {
  position: relative;
  padding-right: 48px !important;
  cursor: pointer;
}
.faq dt::after {
  content: '+';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: var(--cosa-ink);
}
.faq dt.active::after {
  content: '\2212';
}
.faq > p > a[href*="krs.bz"] {
  display: block !important;
  width: 340px;
  max-width: 100%;
  height: 52px;
  line-height: 52px;
  margin: 50px auto 0 !important;
  background: var(--cosa-ink);
  color: #fff !important;
  border-radius: 5px;
  font-size: 14px;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* サイトマップ:区切り線と矢印の付いたリンク一覧 */
.post_content ul.menu,
.post_content ul.menu > li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.post_content ul.menu ul.menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 40px;
  border-top: 1px solid var(--cosa-line);
}
.post_content ul.menu ul.menu > li {
  float: none !important;
  width: auto !important;
  border-bottom: 1px solid var(--cosa-line);
}
.post_content ul.menu ul.menu > li > a {
  display: block;
  position: relative;
  padding: 16px 28px 16px 4px;
  color: var(--cosa-ink) !important;
  font-size: 15px;
  text-decoration: none !important;
}
.post_content ul.menu ul.menu > li > a::after {
  content: '\f054';
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 11px;
  color: #999;
}
@media screen and (max-width: 767px) {
  .post_content ul.menu ul.menu {
    grid-template-columns: 1fr;
  }
}

/* 入会お手続き方法:本文の幅いっぱいに広げ、手順の枠の余白を整える */
body.cosa-narrow div.about_flow {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}
div.about_flow article {
  background: #f6f6f7 !important;
  border: 1px solid #e8e8e8;
  border-radius: 8px !important;
  padding: 40px 48px 32px !important;
  margin-bottom: 24px !important;
}
div.about_flow article > h3 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
div.about_flow article > h3 span.num {
  flex-shrink: 0;
}
@media screen and (max-width: 767px) {
  div.about_flow article {
    padding: 24px 20px !important;
  }
}

/* 規約:条の中の項目(1つずつが段落)の間隔を詰める */
.post_content .cosa_terms_heading ~ p {
  margin-bottom: 10px !important;
}

/* 絞り込み枠の項目:札の地は a 側だけにする(li の濃い灰色の地を外す) */
.recommend_contents dl.cat dd ul li,
.recommend_contents dl.tag dd ul li {
  display: inline-block !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  line-height: 1 !important;
}
.recommend_contents dl.cat {
  border-bottom: none !important;
}

/* 特集・記事の一覧:告知画像(16:9)の文字が欠けないよう、画像の枠を16:9にする */
body.page-id-517 #main_col article.item .image_wrap,
body.page-id-517 #main_col article.item .image_wrap .image,
body.category #main_col article.item .image_wrap,
body.category #main_col article.item .image_wrap .image,
body.tag #main_col article.item .image_wrap,
body.tag #main_col article.item .image_wrap .image {
  height: auto !important;
  aspect-ratio: 16 / 9;
}
/* コミュニティ活用ガイドの一覧:画像(16:9)の端にある番号が欠けないよう、画像の枠を16:9にする(2026-10-14) */
body.post-type-archive-guide #article_list .item .image_wrap,
body.post-type-archive-guide #article_list .item .image_wrap .image,
body.tax-guide_cat #article_list .item .image_wrap,
body.tax-guide_cat #article_list .item .image_wrap .image,
body.tax-guide_tag #article_list .item .image_wrap,
body.tax-guide_tag #article_list .item .image_wrap .image {
  height: auto !important;
  aspect-ratio: 16 / 9;
}
/* トップの特集・記事のタグ */
.index_blog .title_area > ul > li > a {
  display: inline-block !important;
  margin: 0 4px 6px 0;
  padding: 3px 10px !important;
  background: #f2f2f2 !important;
  color: #555 !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
  border-radius: 3px !important;
  text-decoration: none !important;
}

/* 前後の記事(PC):画像を16:9にして文字が欠けないようにする */
@media screen and (min-width: 1211px) {
  #next_prev_post .image_wrap {
    width: 160px !important;
    height: 90px !important;
    top: 15px !important;
  }
  #next_prev_post .title_area {
    width: calc(100% - 210px) !important;
    margin-left: 210px !important;
  }
  #next_prev_post .next_post .title_area {
    margin-left: 0 !important;
  }
}
#next_prev_post a:hover,
#next_prev_post a:hover::before {
  color: var(--cosa-pink) !important;
}

/* 詳細ページ(活用事例・お知らせ・特集記事):本文の左右の内側余白をなくし、題名・画像と左端をそろえる */
@media screen and (min-width: 1211px) {
  body.single #article .post_content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
/* 右の列の人気記事:本文用の段落の余白が日付に効かないようにする */
#side_col .styled_post_list1 p.fs12 {
  margin: 0 !important;
}


/* 10. スマートフォン ----------------------------------------------------- */
@media screen and (max-width: 767px) {
  /* トップ:各区画の左右の余白を本文と同じにそろえる(幅84%・90%の指定をやめる) */
  body.home .cb_contents {
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .top_service .item.item1 {
    width: 100% !important;
    box-sizing: border-box;
    padding: 24px 20px !important;
  }
  .top_index {
    width: 100% !important;
  }
}
@media screen and (max-width: 580px) {
  /* クラウドファンディングの枠が画面の右にはみ出さないようにする */
  #family_list.crowdfunding .item {
    min-width: 0 !important;
    padding: 16px !important;
    box-sizing: border-box;
  }
  #family_list.crowdfunding .item iframe {
    max-width: 100% !important;
  }
}
/* 詳細ページ:題名と本文の内側余白をなくし、画像と左端をそろえる
   (お知らせ・特集記事のスマートフォンは記事の枠に左右-20pxの余白があるため、内側余白を残す) */
@media screen and (min-width: 768px) and (max-width: 1210px) {
  body.single #post_title_area,
  body.single #article .post_content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
@media screen and (max-width: 767px) {
  body.single-case #post_title_area,
  body.single-case #article .post_content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* 体験版:区分の見出し(公開セミナーなど)の上に余白を取る */
.trial h3.design_headline3 {
  margin-top: 80px !important;
}
@media screen and (max-width: 767px) {
  .trial h3.design_headline3 {
    margin-top: 56px !important;
  }
}

/* イベント詳細(PC):受付状況の札と題名を、ほかの詳細ページの題名と同じ高さから始める */
@media screen and (min-width: 1211px) {
  #recipe_title_area {
    padding-top: 0 !important;
  }
}
@media screen and (max-width: 767px) {
  /* パンくずから題名(上の線)までを約20pxにそろえる */
  #main_contents > .design_headline2,
  #main_col > .design_headline2 {
    margin-top: 20px !important;
  }
  body.single #post_title_area {
    padding-top: 0 !important;
  }
  #recipe_title_area {
    padding-top: 20px !important;
  }
  /* 見出しの文字の大きさ(長い見出しは折り返す) */
  #post_title_area .title,
  #recipe_title_area .title {
    font-size: 22px !important;
  }
  body.cosa-narrow .post_content h2:first-child:not(.design_headline2),
  .trial h3.design_headline3,
  .faq h3,
  #family_list h2.search-title,
  #related_post .design_headline,
  #recent_news .design_headline,
  .post_content h3.style3b {
    font-size: 20px !important;
    white-space: normal !important;
  }
  body.cosa-narrow .post_content h2:not(:first-child):not(.design_headline2),
  .trial h4,
  .cosa_terms_heading,
  .post_content h3.style5b,
  #side_col .widget_headline {
    font-size: 17px !important;
  }
}
@media screen and (max-width: 767px) {
  body.post-type-archive-news #main_contents > .design_headline2 {
    margin-top: 0 !important;
  }
  body.single-news #post_title_area,
  body.single-post #post_title_area {
    padding-top: 20px !important;
  }
}

/* タブレット幅:パンくずの左右余白を本文(画面幅の5%)にそろえ、読み物のページは本文の内側余白をなくす */
@media screen and (min-width: 768px) and (max-width: 1210px) {
  #bread_crumb ul {
    padding-left: 5% !important;
    padding-right: 5% !important;
  }
  body.cosa-narrow .post_content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* 11. 点検後の調整 ------------------------------------------------------- */
/* clearfix の疑似要素が flex の項目として数えられ、余分なすき間ができるのを防ぐ */
.top_index::before,
.top_index::after {
  display: none !important;
}
/* クラウドファンディングの枠:左右の端を見出しにそろえる */
@media screen and (min-width: 581px) {
  #family_list.crowdfunding section {
    justify-content: space-between !important;
    gap: 20px;
  }
}
/* フッター前の余白をそろえる(トップ以外) */
body:not(.home) #main_contents {
  padding-bottom: 120px !important;
  margin-bottom: 0 !important;
}
@media screen and (max-width: 767px) {
  body:not(.home) #main_contents {
    padding-bottom: 64px !important;
  }
  /* 「すべて見る」ボタンの文字が2行に折り返さないようにする */
  a.btn.btn1.large {
    width: 100% !important;
    max-width: 320px;
    box-sizing: border-box;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}
/* お知らせ詳細:前後の記事にも同じロゴ画像が出るため、画像を出さない */
body.single-news #next_prev_post .image_wrap {
  display: none !important;
}
@media screen and (min-width: 1211px) {
  body.single-news #next_prev_post .title_area {
    width: calc(100% - 50px) !important;
    margin-left: 50px !important;
  }
  body.single-news #next_prev_post .next_post .title_area {
    margin-left: 0 !important;
  }
}
/* 特集・記事一覧とカテゴリ一覧:スマートフォンでも右の列の絞り込み枠を出さない(上部に同じ枠がある) */
.page-id-517 #side_col #block-2,
.category #side_col #block-2 {
  display: none !important;
}
/* 会員限定の案内:ぼかした本文の下端を白にぼかして、線のように見えないようにする */
.memberonly_wrap {
  position: relative;
}
.memberonly_wrap::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
  pointer-events: none;
  z-index: 1;
}
.memberonly_wrap .memberonly {
  position: relative;
  z-index: 2;
}
/* トップのイベント欄のイラスト:区画の下側(ボタンの上)にそろえる */
@media screen and (min-width: 1211px) {
  .event_image {
    top: auto !important;
    bottom: 100px !important;
  }
}
/* クラウドファンディング一覧:3列の格子にして左右の端を見出しにそろえる */
body.post-type-archive-crowdfunding #family_list > section {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
body.post-type-archive-crowdfunding #family_list > section::before,
body.post-type-archive-crowdfunding #family_list > section::after {
  display: none !important;
}
body.post-type-archive-crowdfunding #family_list > section > .item {
  float: none !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  box-sizing: border-box;
}
body.post-type-archive-crowdfunding #family_list > section > .item iframe {
  max-width: 100% !important;
}
@media screen and (max-width: 1023px) {
  body.post-type-archive-crowdfunding #family_list > section {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (max-width: 767px) {
  body.post-type-archive-crowdfunding #family_list > section {
    grid-template-columns: 1fr;
  }
  body.post-type-archive-crowdfunding #family_list > section > .item {
    padding: 16px !important;
  }
}
@media screen and (max-width: 767px) {
  /* トップのイベント・特集記事:画像の枠を16:9にして、画像を左右いっぱいに見せる(文字と左端をそろえる) */
  .index_recent_recipe .recipe_list .image_wrap,
  .index_recent_recipe .recipe_list .image_wrap .image,
  .index_blog .recipe_list .image_wrap,
  .index_blog .recipe_list .image_wrap .image {
    height: auto !important;
    aspect-ratio: 16 / 9;
  }
}

/* 本文の改行を画面の幅で出し分ける(2026-10-19 先方の依頼。クラス名は先方の案のまま)
   <br class="sp-hide"> はパソコンだけで改行、<br class="pc-hide"> はスマートフォンだけで改行する。
   本文では改行の直後で行を変えない(行を変えると、表示時の wpautop が常に効く改行を足す) */
@media screen and (min-width: 768px) {
  .pc-hide {
    display: none !important;
  }
}
@media screen and (max-width: 767px) {
  .sp-hide {
    display: none !important;
  }
}

/* 活用ガイドの記事:小見出しの上を段落の間より広く取り、区切りを分かりやすくする(2026-10-19 先方の相談を受けて。活用事例の記事は変えない) */
body.single-guide .post_content h3.style5b:not(:first-child) {
  margin-top: 64px !important;
}
@media screen and (max-width: 767px) {
  body.single-guide .post_content h3.style5b:not(:first-child) {
    margin-top: 56px !important;
  }
}