@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/


:root {
  --haconiwa-font-sans: "Nunito Sans", "Zen Maru Gothic", sans-serif;
  --haconiwa-font-heading: "Kaisei Opti", serif;
  --haconiwa-font-mincho: "Nunito Sans", "Noto Serif JP", serif;

  --haconiwa-color-text: #23241F;
  --haconiwa-color-canvas: #FAFAF8;
  --haconiwa-color-surface: #FFF;
  --haconiwa-color-border: #E7E3D8;
  --haconiwa-color-border-muted: #D6D7DA;
  --haconiwa-color-muted: #A9AAAD;
  --haconiwa-color-accent: #8FA188;
  --haconiwa-color-accent-dark: #6B7E5A;
  --haconiwa-color-lilac: #DCCDE6;
  --haconiwa-color-danger: #9A6056;
}

/************************************
** 子テーマ用のスタイルを書く
************************************/
/* サイトの基本フォント変更 */
.body {
  font-family: var(--haconiwa-font-sans);
  font-weight: 500;
  font-style: normal;
}
/* リンク設定 */

a {
	text-decoration: none;
	color: var(--haconiwa-color-text);
}

a:hover {
	color: var(--haconiwa-color-accent);
}

/* サイトのメインカラム */
#main.main {
	background-color: var(--haconiwa-color-canvas);
	border: none;
	margin: 0;
	padding: 0;
}

/*メインカラムの外枠*/
.main-frame {
	margin: 20px;
    padding: 20px;
	border: 1px solid var(--haconiwa-color-border);
	border-radius: 5px;
	background: var(--haconiwa-color-surface);
}

/* リストの行間を少し詰める */
ul {
	line-height: 1.6;
}

/* ボックスの下マージンを1.8em→1emに */
.block-box {
	margin-bottom: 1em !important;
}
/* 白抜きボックスの左右パディングを半分にした */
.entry-content .wp-block-cocoon-blocks-blank-box-1 {
	padding: 1em .5em;
}

/* 個別ページのマージン変更 */
.entry-content.cf {
	margin-bottom: 1em; 
}

/* いいねボタンの位置 */
.like-area {
	margin: 0 20px;
}

/* ページャー設定 */
.pager-prev-next { /* 「次のページ」「前のページ」非表示 */
	display: none !important;
}
.page-numbers { /*通常時*/
	color: var(--haconiwa-color-border);
	border: 1px solid var(--haconiwa-color-border) !important;
	border-radius: 50%;
	height:35px;
	width:35px;
	line-height:35px;
	font-size: .8em;
}
.page-numbers.current { /*現在のページ*/
	background-color: var(--haconiwa-color-border);
	color: var(--haconiwa-color-canvas);
}
.page-numbers.dots { /*ドット「…」の部分*/
	opacity: 1;
	background: none;
}
.pager-links {
	margin: 35px 0 10px;
}

/* トップにスクロールするボタン */
.go-to-top-button {
	background-color: rgba(255,255,255,0);
	font-size: 40px;
	color: var(--haconiwa-color-border);
}

/* PC版フッタのコンテンツ */
.footer-bottom-content {
	padding: 0 20px;
}

/************************************
** 検索フォーム共通
************************************/
.haconiwa-pc-header-search .search-edit,
#search-results .search-edit,
.search-menu-content .search-edit {
  color: var(--haconiwa-color-text);
  font-family: var(--haconiwa-font-sans);
  font-size: 14px !important;
  font-weight: 500;
}

.haconiwa-pc-header-search .search-edit:focus,
#search-results .search-edit:focus,
.search-menu-content .search-edit:focus {
  border-color: var(--haconiwa-color-accent);
  outline: none;
  box-shadow: 0 0 0 2px rgba(143, 161, 136, .15);
}

/************************************
** PCヘッダーのサイト内検索
************************************/

/* PC以外では非表示 */
.haconiwa-pc-header-search {
  display: none;
}

/* PCのみ表示 */
@media screen and (min-width: 1024px) {

  /*
   * 親要素をヘッダー内の横幅いっぱいに広げる
   */
  #header-container-in {
    width: 100% !important;
  }

  #header {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /*
   * 左にサイト名、右に検索フォームを配置
   */
  #header-in {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1fr)
      minmax(220px, 320px);
    align-items: center !important;
    column-gap: 20px;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 10px 20px !important;
  }

  /* clearfixの疑似要素をGridから除外 */
  #header-in::before,
  #header-in::after {
    display: none !important;
    content: none !important;
  }

  /* サイト名 */
  #header-in .logo {
    display: block;
    justify-self: start;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    text-align: left;
  }

  #header-in .site-name {
    display: block;
    margin: 0;
  }

  /*
   * 検索フォーム全体
   */
  .haconiwa-pc-header-search {
    position: static !important;
    display: block;
    justify-self: end;
    width: 100%;
    min-width: 220px;
    max-width: 320px;
    margin: 0 !important;
    transform: none !important;
  }

  /*
   * Cocoon標準検索フォーム
   */
  .haconiwa-pc-header-search .search-box {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  /* 入力欄 */
  .haconiwa-pc-header-search .search-edit {
    display: block;
    width: 100%;
    height: 38px;
    box-sizing: border-box;
    margin: 0;
    padding: 0 42px 0 12px;
    border: 1px solid var(--haconiwa-color-border);
    border-radius: 5px;
    background-color: var(--haconiwa-color-surface);
  }

  /* 虫眼鏡ボタン */
  .haconiwa-pc-header-search .search-submit {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 38px;
    margin: 0;
    padding: 0;
    border: none;
    color: var(--haconiwa-color-canvas);
    background: var(--haconiwa-color-border);
    font-size: 18px;
    line-height: 1;
    transform: none;
  }
}

/************************************
** サイト内検索結果ページ
************************************/
#search-results {
  padding-bottom: 20px;
}

#search-results .search-results-header {
  margin: 20px;
}

#search-results .search-results-heading {
  display: flex;
  align-items: center;
  gap: .5em;
  margin: 0;
  padding: .5em .5em .3em;
  border-bottom: 1px solid var(--haconiwa-color-text);
  font-family: var(--haconiwa-font-heading);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}

#search-results .search-results-heading .fas {
  flex: 0 0 auto;
  font-size: .9em;
}

#search-results .search-results-count {
  margin: 8px 0 14px;
  color: var(--haconiwa-color-muted);
  font-size: 12px;
}

#search-results .search-results-form {
  max-width: 680px;
}

#search-results .search-results-form .search-box {
  position: relative;
  width: 100%;
  margin: 0;
}

#search-results .search-results-form .search-edit {
  display: block;
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 44px 0 12px;
  border: 1px solid var(--haconiwa-color-border);
  border-radius: 5px;
  background: var(--haconiwa-color-surface);
}

#search-results .search-results-form .search-submit {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: none;
  background: var(--haconiwa-color-border);
  color: var(--haconiwa-color-canvas);
  font-size: 18px;
  line-height: 1;
}

#search-results .search-results-list {
  display: grid;
  gap: 12px;
  margin: 20px;
}

#search-results .search-result-card {
  box-sizing: border-box;
  padding: 15px 18px;
  border: 1px solid var(--haconiwa-color-border);
  border-radius: 5px;
  background: var(--haconiwa-color-surface);
}

#search-results .search-result-card:hover {
  border-color: #C9C4B7;
}

#search-results .search-result-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 7px;
  padding: 0 0 6px;
  border-bottom: 1px solid var(--haconiwa-color-border-muted);
  color: var(--haconiwa-color-border-muted);
  font-size: 12px;
  line-height: 1.3;
}

#search-results .search-result-meta time {
  margin-left: auto;
  white-space: nowrap;
}

#search-results .search-result-type {
  display: inline-block;
  padding: 0 .8em 0 .2em;
  font-family: var(--haconiwa-font-heading);
  font-size: 16px;
  line-height: 1.3;
}

#search-results .search-result-protected {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  color: var(--haconiwa-color-danger);
}

#search-results .search-result-title {
  margin: 0;
  padding: 0;
  border: none;
  font-family: var(--haconiwa-font-heading);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

#search-results .search-result-title a,
#search-results .search-result-update-text {
  color: var(--haconiwa-color-text);
  text-decoration: none;
}

#search-results .search-result-title a:hover {
  color: var(--haconiwa-color-accent-dark);
}

#search-results .search-result-summary {
  margin: 8px 0 0;
  color: var(--haconiwa-color-text);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.7;
}

/* UPDATEは本文だけを主役にしてコンパクトにする */
#search-results .search-result-card-compact {
  padding-top: 11px;
  padding-bottom: 12px;
}

#search-results .search-result-card-compact .search-result-meta {
  margin-bottom: 5px;
}

#search-results .search-result-update-text {
  display: block;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
}

#search-results .search-results-empty {
  margin: 20px;
  padding: 20px;
  border: 1px solid var(--haconiwa-color-border);
  border-radius: 5px;
  background: var(--haconiwa-color-surface);
}

#search-results .search-results-empty p {
  margin: 0;
}

#search-results .search-results-empty p + p {
  margin-top: 8px;
  color: var(--haconiwa-color-muted);
  font-size: 13px;
}

/************************************
** 検索結果のカテゴリ・タグ表示
************************************/
#search-results .search-result-taxonomies {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 9px;
}

#search-results .search-result-taxonomy-group {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* NOTEカテゴリ・将来のSSカテゴリ：リンクあり */
#search-results .search-result-category a {
  display: inline-block;
  width: fit-content;
  margin: 0;
  padding: .2em .8em;
  border: 1px solid var(--haconiwa-color-accent);
  border-radius: 2px;
  background: var(--haconiwa-color-canvas);
  color: var(--haconiwa-color-text);
  font-size: 11px;
  line-height: 1.8;
  text-decoration: none;
}

#search-results .search-result-category a:hover {
  color: var(--haconiwa-color-accent);
}

/* タグ・補助タクソノミー：リンクなし */
#search-results .search-result-term {
  display: inline-block;
  width: fit-content;
  margin: 0;
  padding: .2em .8em;
  border: 1px solid var(--haconiwa-color-border);
  border-radius: 2px;
  background: var(--haconiwa-color-canvas);
  color: #556169;
  font-size: 11px;
  line-height: 1.8;
}

/* 年齢区分 */
#search-results .search-result-rating .search-result-term.r15 {
  border-color: var(--haconiwa-color-danger);
  background: var(--haconiwa-color-surface);
  color: var(--haconiwa-color-danger);
}

#search-results .search-result-rating .search-result-term.r18 {
  background: var(--haconiwa-color-danger);
  color: var(--haconiwa-color-surface);
}

/* 注意事項 */
#search-results .search-result-caution .search-result-term {
  border-color: #dedbbf;
  background: #efeddf;
  color: #6f6e60;
}

/* 視点 */
#search-results .search-result-perspective .search-result-term {
  border-color: var(--haconiwa-color-lilac);
  background: var(--haconiwa-color-lilac);
  color: var(--haconiwa-color-text);
}

/* SSタグ・NOTEタグ */
#search-results .search-result-tags .search-result-term {
  border-color: var(--haconiwa-color-border);
  background: var(--haconiwa-color-canvas);
  color: var(--haconiwa-color-text);
}

/************************************
** Hタグのスタイル
************************************/
/*見出し初期化*/
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 { /*見出し初期化*/
  padding: 0;
  margin: 0;
  font-size: medium;
  border-top: none;
  border-right: none;
  border-bottom: none;
  border-left: none;
  line-height: normal;
  position:relative;
}
/*初期化ここまで*/
.article h1 {
	font-family: var(--haconiwa-font-heading);
	font-weight: 700;
	font-size: 20px;
	padding: .5em .5em .3em .5em; /* 内側余白 */
	border-bottom: solid  1px var(--haconiwa-color-text); /* 実線・太さ・色 */
	line-height: 1.3;
}

.article h2 {
	font-family: var(--haconiwa-font-heading);
	font-weight: 700;
	position: relative;
	padding: .5em .5em .3em .5em; /* 内側余白 */
	border-bottom: solid 3px var(--haconiwa-color-border); /* 下線1: 実線・太さ・色 */
	color: var(--haconiwa-color-text); /* 文字色 */
	font-size: 20px;/*フォントサイズ*/
	background: transparent;/*背景透明に*/
	margin: 0 0 20px 0;
	line-height: 1.3;
}

.article h2::after {
	position: absolute;
	content: "";
	display: block;
	border-bottom: solid 3px var(--haconiwa-color-lilac); /* 下線2: 実線・太さ・色 */
	bottom: -3px;
	left: 0;
	width: 30%; /* 下線2の幅 */
}

h2.wp-block-heading {
	margin: 0;
}

.article h3 {
	font-family: var(--haconiwa-font-heading);
	font-weight: 700;
	--stripe-color: var(--haconiwa-color-lilac); /* ストライプの色 */
	position: relative;
	padding: .5em 1em; /* 余白 */
	margin: 0 0 18px 0;
	color: var(--haconiwa-color-text); /* 文字色 */
	font-size: 18px;/*フォントサイズ*/
	line-height: 1.3;
}

.article h3::after {
	position: absolute;
	content: "";
	width: 100%;
	height: 5px;
	bottom: 0;
	left: 0;
	background: linear-gradient(
		135deg,
		transparent 25%,
		var(--stripe-color) 25%,
		var(--stripe-color) 50%,
		transparent 50%,
		transparent 75%,
		var(--stripe-color) 75%,
		var(--stripe-color)
		);
	background-size: 4px 4px;
}

.article h4 {
	font-family: var(--haconiwa-font-heading);
	font-weight: 700;
	position: relative;
	padding: .5em 1.5em; /* 内側余白 */
	margin: 0 0 16px 0;
	text-shadow: 0 1px 0 white;
	color: var(--haconiwa-color-text);
	font-size: 1.142857em;/*フォントサイズ*/
	background: transparent;/*背景透明に*/
	z-index: 999;
	line-height: 1.3;
}

.article h4::before {
	content: "";
	position: absolute;
	background: #f3ecf7;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	top: 50%;
	/* border: dashed 1px white; */
	left: 6px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index: -1;
}

.article h5 {
	font-family: var(--haconiwa-font-heading);
	font-weight: 700;
	font-size: 14px;/*フォントサイズ*/
	position: relative;
	border-left: 8px solid var(--haconiwa-color-border); /* 左線: 実線・太さ・色 */
	color: var(--haconiwa-color-text); /* 文字色 */
	padding: .5em 1em; /* 余白 */
	margin: 0 0 14px 1.5em;
	line-height: 1.3;
}

.article h5::before {
	position: absolute;
	content: "";
	left: -8px;
	bottom: 0;
	width: 8px;
	height: 50%;
	background-color: var(--haconiwa-color-lilac); /* アクセント線 */
}

.article h6 {
	font-family: var(--haconiwa-font-heading);
	font-weight: 700;
	font-size: 14px;/*フォントサイズ*/
	border-left: solid 6px var(--haconiwa-color-lilac); /* 左線: 実線・太さ・色 */
	color: var(--haconiwa-color-text); /* 文字色 */
	padding: .5em 1em; /* 余白 */
	margin: 0 0 12px 2em;
	line-height: 1.3;
}

/************************************
** ボックス系のスタイル
************************************/
/*位置調整*/
.is-style-information-box, .information-box,.information, .is-style-question-box, .question-box, .question, .is-style-alert-box, .alert-box, .alert, .is-style-memo-box, .memo-box, .is-style-comment-box, .comment-box, .is-style-ok-box, .ok-box, .is-style-ng-box, .ng-box, .is-style-good-box, .good-box, .is-style-bad-box, .bad-box, .is-style-profile-box, .profile-box, .common-icon-box, .has-box-style {
	padding: 20px 25px;
}
.is-style-information-box::before,.information-box::before,.information::before, .is-style-question-box::before, .question-box::before, .question::before, .is-style-alert-box::before, .alert-box::before, .alert::before, .is-style-memo-box::before, .memo-box::before, .is-style-comment-box::before, .comment-box::before, .is-style-ok-box::before, .ok-box::before,  .is-style-ng-box::before, .ng-box::before, .is-style-good-box::before, .good-box::before, .is-style-bad-box::before, .bad-box::before, .is-style-profile-box::before, .profile-box::before {
	top: 0;
	left: 25px;
	width: auto;
	margin-left: 0 !important;
	padding-right: 0;
	border: none;
	font-size: 20px;
}
.is-style-question-box::before, .question-box::before, .question::before, .is-style-alert-box::before, .alert-box::before, .alert::before, .is-style-information-box::before, .information-box::before, .information::before, .is-style-ok-box::before, .ok-box::before {
	background: #f4f3f1;
	border-radius: 50%;
}
/*情報ボックス*/
.is-style-information-box, .information-box, .information {
	background: var(--haconiwa-color-canvas);
	border: 1px solid #AAC2D2;
}
.is-style-information-box::before,
.information-box::before,
.information::before {
	color: #AAC2D2;
}
/*質問ボックス*/
.is-style-question-box, .question-box, .question {
	background: var(--haconiwa-color-canvas);
	border: 1px solid #dedbbf;
}
.is-style-question-box::before, .question-box::before, .question::before {
	color: #dedbbf;
}
/*注意書きボックス*/
.is-style-alert-box, .alert-box, .alert {
	background: var(--haconiwa-color-canvas);
	border: 1px solid #debfc2;
}
.is-style-alert-box::before, .alert-box::before, .alert::before {
	color: #debfc2;
}
/*メモボックス*/
.is-style-memo-box, .memo-box {
	background: var(--haconiwa-color-canvas);
	border: 1px solid #cddab9;
}
.is-style-memo-box::before, .memo-box::before {
	color: #cddab9;
}
/*コメントボックス*/
.is-style-comment-box, .comment-box {
	border: 1px solid #A5A4A3;
	background-color: var(--haconiwa-color-canvas);
}
.is-style-comment-box::before, .comment-box::before {
	color: #A5A4A3;
	font-weight: 900;
}
/*OKボックス・Goodボックス*/
.is-style-ok-box, .ok-box, .is-style-good-box, .good-box {
	background: var(--haconiwa-color-canvas);
	border: 1px solid #778893;
}
.is-style-ok-box::before, .ok-box::before, .is-style-good-box::before, .good-box::before {
	color: #778893;
}
/*NGボックス・Badボックス*/
.is-style-ng-box, .ng-box, .is-style-bad-box, .bad-box {
	background: var(--haconiwa-color-canvas);
	border: 1px solid #d95959;
}
.is-style-ng-box::before, .ng-box::before, .is-style-bad-box::before, .bad-box::before {
	color: #d95959;
}
/*プロフィールボックス*/
.is-style-profile-box, .profile-box {
	background: var(--haconiwa-color-canvas);
	border: 1px solid var(--haconiwa-color-muted);
}
.is-style-profile-box::before, .profile-box::before {
	color: var(--haconiwa-color-muted);
}
/*プライマリ*/
.is-style-primary-box, .primary-box, .sp-primary, .primary {
	background-color: #e8ece7;
	background-image: radial-gradient(#ffffff 10%, transparent 10%), radial-gradient(#ffffff 10%, transparent 10%);
	background-size: 40px 40px;
	background-position: 0 0, 20px 20px;
	border: 1px solid #3E5236;
	color: #3E5236;
}
/*セカンダリ*/
.is-style-secondary-box, .secondary-box {
	background-color: #eae7ec;
	background-image: radial-gradient(#ffffff 10%, transparent 10%), radial-gradient(#ffffff 10%, transparent 10%);
	background-size: 40px 40px;
	background-position: 0 0, 20px 20px;
	border: 1px solid #6b5f70;
	color: #6b5f70;
}
/*サクセス*/
.is-style-success-box, .success-box, .sp-success, .success {
	color: #676d5d;
	background-color: #e6eddc;
	border: 1px solid #676d5d;
}
/*インフォ*/
.is-style-info-box, .info-box, .sp-info, .info {
	border: 1px solid #556169;
	background-color: #D5E1E9;
	color: #556169;
}
/*デンジャー*/
.is-style-danger-box, .danger-box, .sp-danger, .danger {
	border: none;
	color: #ffffff;
	background-color: var(--haconiwa-color-danger);
}
/*ワーニング*/
.is-style-warning-box, .warning-box, .sp-warning, .warning {
	border: 1px solid #6f6e60;
	color: #6f6e60;
	background-color: #efeddf;
}
/*ライト*/
.is-style-light-box, .light-box {
	border: none;
	color: #736c70;
	background-color: #e6e2de;
}
/*ダーク*/
.is-style-dark-box, .dark-box {
	border: none;
	color: #ffffff;
	background-color: #736c70;
}
/*付箋ー灰色*/
.blank-box.sticky {
	background-color: var(--haconiwa-color-canvas);
	border-color: #A5A4A3;
	border-width: 0 0 0 15px ;
}
/*付箋ー赤色*/
.blank-box.sticky.st-red {
	background-color: #f6f1ee;
	border-color: var(--haconiwa-color-danger);
	border-width: 0 0 0 15px ;
}
/*付箋ー青色*/
.blank-box.sticky.st-blue {
	background-color: #e8ece7;
	border-color: #AAC2D2;
	border-width: 0 0 0 15px ;
}
/*付箋ー黄色*/
.blank-box.sticky.st-yellow {
	background-color: #eeeadf;
	border-color: #dfaf3f;
	border-width: 0 0 0 15px ;
}
/*付箋ー緑色*/
.blank-box.sticky.st-green {
	background-color: #eaeedf;
	border-color: #b1c586;
	border-width: 0 0 0 15px ;
}

/************************************
** archve-note用の指定
************************************/
.note {
	margin: 20px;
	border: 1px solid var(--haconiwa-color-border);
	border-radius: 5px;
	background: var(--haconiwa-color-surface);
}

#archive-note .note-under {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
	border-top: 1px solid var(--haconiwa-color-border-muted);
	padding: 6px 5px 5px 0;
}

.note-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border-top: 1px solid var(--haconiwa-color-border);
	padding: 5px;
}

.note-item:first-child {
	border-top: none;
}

.note-image,
.ss-image {
  margin: 10px;
}

.note-image img,
.ss-image img {
  width: 60px;
  height: 60px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.note-time {
	width: 80px;
	height: 22px;
	padding: 0 0 0 5px;
	margin-left: auto;
	text-align: right;
	font-size: 12px;
	color: var(--haconiwa-color-border-muted);
}

.note-title {
	font-family: var(--haconiwa-font-heading) ;
	font-size: 16px;
	display: block;
	width: 100%;
	padding: 5px 0;
	line-height: 1.3;
}

.note-title a,
.ss-title a {
  padding-left: 5px;
  color: var(--haconiwa-color-text);
  text-decoration: none;
}

.note-title a:hover,
.ss-title a:hover {
  color: var(--haconiwa-color-accent-dark);
}

.note-category {
	padding: 0.2em 1em;
	margin: 0 0 5px 0;
	color: var(--haconiwa-color-text);/*文字色*/
	background: var(--haconiwa-color-canvas);
	border: solid 1px var(--haconiwa-color-accent);/*線*/
	border-radius: 2px;/*角の丸み*/
	width: fit-content;
	font-size: 11px;
}

.note-category a {
	text-decoration: none;
	color: var(--haconiwa-color-text);
}

.note-category a:hover {
	color: var(--haconiwa-color-accent);
}

.note-body {
	padding: 5px 0;
	display: flex;
	flex-wrap: wrap;
	width: calc(100% - 90px);
	align-items: center;
}

/************************************
** NOTEアーカイブ共通（カテゴリ別ページ用）
************************************/
#archive-note .note-archive-header,
#archive-ss .ss-archive-header {
  margin: 20px 20px 0;
}

#archive-note .note-archive-heading,
#archive-ss .ss-archive-heading {
  margin: 0;
  padding: .5em .5em .3em;
  border-bottom: 1px solid var(--haconiwa-color-text);
  font-family: var(--haconiwa-font-heading);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}

#archive-note .note-empty,
#archive-ss .ss-empty {
  margin: 0;
  padding: 20px;
}

/************************************
** single-note用の指定
************************************/
#single-note .entry-content p {
	padding: 0 1em;
}

#single-note .note {
	margin: 20px;
	padding: 20px;
	border: 1px solid var(--haconiwa-color-border);
	border-radius: 5px;
	background: var(--haconiwa-color-surface);
}

/************************************
** YouTubeショート動画・文章回り込み
************************************/

/* 動画と文章をまとめる範囲 */
.youtube-short-section {
	display: flow-root;
	margin: 0;
}

/* 縦長動画の共通設定 */
.youtube-short {
  width: min(42%, 320px);
  aspect-ratio: 9 / 16;
}

/* 動画を左側へ配置 */
.youtube-short-left {
  float: left;
  margin: 0 1.5em 1em 1em;
}
/* 動画を右側へ配置 */
.youtube-short-right {
  float: right;
  margin: 0 1em 1em 1.5em;
}

/* iframe */
.youtube-short iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 枠内の最初の段落の上余白を除く */
.youtube-short-section > p:first-of-type {
  margin-top: 0;
}

/* スマートフォンでは回り込みを解除 */
@media screen and (max-width: 600px) {
  .youtube-short {
    float: none;
    width: min(100%, 320px);
    margin: 0 auto 1.5em;
  }
}

/************************************
** archve-ss用の指定
************************************/
.ss {
	margin: 20px;
	border: 1px solid var(--haconiwa-color-border);
	border-radius: 5px;
	background: var(--haconiwa-color-surface);
}

.ss-item {
	display: flex;
	flex-wrap: wrap;
	border-top: 1px solid var(--haconiwa-color-border);
	padding: 0	0 10px;
}

.ss-item:first-child {
	border-top: none;
}

.ss-time {
	width: 70px;
	margin-left: auto;
	margin-top: 7px;
	white-space: nowrap;
	flex-shrink: 0;
	text-align: center;
	font-size: 12px;
	color: var(--haconiwa-color-border-muted);
}

.ss-title {
	font-family: var(--haconiwa-font-heading) ;
	font-size: 16px;
	margin: 1px 0 0 5px;
}

.ss-title-1 {
	display: block;
	width: calc(100% - 90px);
}

.ss-title-2 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	height: 42px;
	align-items: center;
	border-bottom: 1px solid var(--haconiwa-color-border-muted);
}

.ss-taxonomy {
	padding: 5px 0;
	display: flex;
	flex-wrap: wrap;
}

.ss-intro {
	padding: 0 15px ;
	width: 100%;
	font-weight: 400;
	font-size: 12px;
	line-height: 1.2;
}

/* タグのスタイル */

.r15 {
	padding: 0.2em 1em;
	margin: 0 0 5px 5px;
	color: var(--haconiwa-color-danger);/*文字色*/
	background: var(--haconiwa-color-surface);
	border: 1px solid var(--haconiwa-color-danger);/*線*/
	border-radius: 2px;/*角の丸み*/
	width: fit-content;
	font-size: 11px;
	display: inline-block;
}

.r18 {
	padding: 0.2em 1em;
	margin: 0 0 5px 5px;
	color: var(--haconiwa-color-surface);/*文字色*/
	background: var(--haconiwa-color-danger);
	border: 1px solid var(--haconiwa-color-danger);/*線*/
	border-radius: 2px;/*角の丸み*/
	width: fit-content;
	font-size: 11px;
	display: inline-block;
}

.perspective span {
	padding: 0.2em 1em;
	margin: 0 0 5px 5px;
	color: var(--haconiwa-color-text);/*文字色*/
	background: var(--haconiwa-color-lilac);
	border: 1px solid var(--haconiwa-color-lilac);/*線*/
	border-radius: 2px;/*角の丸み*/
	width: fit-content;
	font-size: 11px;
	display: inline-block;
}

.ss-tag span, .note-tag span {
	padding: 0.2em 1em;
	margin: 0 0 5px 5px;
	color: var(--haconiwa-color-text);/*文字色*/
	background: var(--haconiwa-color-canvas);
	border: 1px solid var(--haconiwa-color-border);/*線*/
	border-radius: 2px;/*角の丸み*/
	width: fit-content;
	font-size: 11px;
	display: inline-block;
}

/************************************
** SSアーカイブ共通（カテゴリ別ページ用）
************************************/
/* 画像がない場合も60×60pxの空欄を維持する */
#archive-ss .ss-image {
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
}

#archive-ss .ss-image a {
  display: block;
  width: 60px;
  height: 60px;
}

/* 将来SSカテゴリを表示したときのラベル */
#archive-ss .ss-category {
  width: fit-content;
  margin: 5px 0 0 5px;
  padding: .2em 1em;
  border: 1px solid var(--haconiwa-color-accent-dark);
  border-radius: 2px;
  background: var(--haconiwa-color-accent);
  color: var(--haconiwa-color-text);
  font-size: 11px;
}

#archive-ss .ss-category a {
  color: var(--haconiwa-color-text);
  text-decoration: none;
}

#archive-ss .ss-category a:hover {
  color: var(--haconiwa-color-border);
}

/************************************
** single-ss用の指定
************************************/

#single-ss .ss {
	margin: 20px;
	padding: 20px;
	border: 1px solid var(--haconiwa-color-border);
	border-radius: 5px;
	background: var(--haconiwa-color-surface);
}

#single-ss .article h1,
#single-ss .article h4 {
  letter-spacing: .1em;
}

/* ================
** パスワード保護SSの入力フォーム
================ */
#single-ss .post-password-form {
  max-width: 520px;
  margin: 1em auto;
  padding: 20px;
  border: 1px solid var(--haconiwa-color-border, #E7E3D8);
  border-radius: 5px;
  background: var(--haconiwa-color-canvas, #FAFAF8);
  box-sizing: border-box;
}

#single-ss .post-password-form p {
  margin: 0;
  line-height: 1.8;
}

#single-ss .post-password-form p + p {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 1em;
}

#single-ss .post-password-form label {
  display: grid;
  flex: 1 1 auto;
  gap: 6px;
  min-width: 0;
  font-weight: 500;
}

#single-ss .post-password-form input[type="password"] {
  width: 100%;
  height: 38px;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid var(--haconiwa-color-border, #E7E3D8);
  border-radius: 5px;
  background: var(--haconiwa-color-surface, #FFF);
  color: var(--haconiwa-color-text, #23241F);
  font: inherit;
  box-sizing: border-box;
}

#single-ss .post-password-form input[type="password"]:focus {
  border-color: var(--haconiwa-color-accent, #8FA188);
  outline: none;
  box-shadow: 0 0 0 2px rgba(143, 161, 136, .15);
}

#single-ss .post-password-form input[type="submit"] {
  width: 100px;
  height: 38px;
  padding: 0 1.4em;
  border: 1px solid var(--haconiwa-color-accent-dark, #6B7E5A);
  border-radius: 5px;
  background: var(--haconiwa-color-accent, #8FA188);
  color: var(--haconiwa-color-surface, #FFF);
  font-family: var(--haconiwa-font-sans, "Nunito Sans", "Zen Maru Gothic", sans-serif);
  font-weight: 500;
  cursor: pointer;
}

#single-ss .post-password-form input[type="submit"]:hover {
  background: var(--haconiwa-color-accent-dark, #6B7E5A);
}

/* ================
   閲覧設定ボタン
================ */

/* ボタンエリア全体 */
.buttons {
    width: max-content;
    max-width: calc(100% - 20px);
    margin: 15px 20px 0 auto;
}

/* 各ボタン行 */
.buttons p {
    margin: 0 0 5px 0;
}

/* 文字サイズ＋書体の行 */
.buttons .button-row-settings,
.buttons .button-row-writing {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
}

.buttons .button-row-settings {
  flex-wrap: nowrap;
}

/* 文字サイズ・書体の各グループ */
.buttons .button-group {
    display: flex;
    flex: 0 0 auto;
    gap: 5px;
}

/* ボタン共通 */
.buttons .button {
    width: 100px;
    height: 30px;
    box-sizing: border-box;
    border: 1px solid var(--haconiwa-color-border);

    font-family:
        var(--haconiwa-font-sans);
    font-weight: 500;
    font-style: normal;
    font-size: .7rem;

    color: var(--haconiwa-color-text);
    background: var(--haconiwa-color-canvas);
}

/* 小・中・大ボタン */
.buttons .button-group-size .button {
    width: 30px;
    min-width: 30px;
    padding-right: 0;
    padding-left: 0;
}

/* 選択中のボタン */
.buttons .button.active {
    color: var(--haconiwa-color-canvas);
    background: var(--haconiwa-color-text);
}

/* ========================================
   表示モード
======================================== */

/* 横書き（現状維持） */
#single-ss.mode-horizontal article {
    writing-mode: horizontal-tb;
}

/* 縦書き・横スクロール／縦書き・段組み */
#single-ss.mode-vertical article,
#single-ss.mode-column article {
    writing-mode: vertical-rl;
}

/* ================
   縦書き用の設定
================ */
/* 小説ビューアの横幅を親要素内に収める */
/* 小説表示エリア全体 */
#single-ss,
#single-ss .ss-viewer {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* ================
   縦書き系モード共通の文字組み
================ */
/* タイトル */
#single-ss.mode-vertical .article h1,
#single-ss.mode-column .article h1 {
    writing-mode: vertical-rl;
    text-orientation: upright;
    border-bottom: none;
    border-left: 1px solid var(--haconiwa-color-text);
    padding: .5em .3em .5em .5em;
    margin: 0 16px;
    line-height: 1.6;
}

/* h4見出し */
#single-ss.mode-vertical .article h4,
#single-ss.mode-column .article h4 {
    writing-mode: vertical-rl;
    text-orientation: upright;
    padding: 1.5em .5em;
    margin: 0 16px;
    text-shadow: 0 1px 0 white;
    line-height: 1.6;
	font-size: 1.142857em;
}

#single-ss.mode-vertical .article h4::before,
#single-ss.mode-column .article h4::before {
    left: 50%;
    top: 6px;

    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: -1;
}

/* 日付 */
#single-ss.mode-vertical .entry-date,
#single-ss.mode-column .entry-date {
    writing-mode: vertical-rl;
    text-orientation: upright;
}

#single-ss.mode-vertical .date-tags,
#single-ss.mode-column .date-tags {
    margin-bottom: 0;
	margin-left: 1em;
}

/* 段落間の余白 */
#single-ss.mode-vertical .entry-content p,
#single-ss.mode-column .entry-content p {
    margin-inline: 0;
    margin-block-start: 0;
    margin-block-end: 1.6em;
}

/* 半角 ! ? の縦中横 */
#single-ss.mode-vertical .ss-tcy,
#single-ss.mode-column .ss-tcy {
    -webkit-text-combine: horizontal;
    text-combine-upright: all;
    white-space: nowrap;
    letter-spacing: 0;
}

/* 縦書き時の半角ハイフンを縦向きにする */
#single-ss.mode-vertical .ss-hyphen,
#single-ss.mode-column .ss-hyphen {
    display: inline-block;
    line-height: 1;
    transform: rotate(90deg);
    transform-origin: center;
}

/* 記号の見た目の中心を微調整 */
#single-ss.mode-vertical .ss-tcy,
#single-ss.mode-vertical .ss-ellipsis,
#single-ss.mode-vertical .ss-dash,
#single-ss.mode-vertical .ss-hyphen,
#single-ss.mode-column .ss-tcy,
#single-ss.mode-column .ss-ellipsis,
#single-ss.mode-column .ss-dash,
#single-ss.mode-column .ss-hyphen {
    position: relative;
    left: 0.05em;
}

/* 全文連結時：元の改ページ位置に空白を入れる */
#single-ss.mode-vertical .ss-page-break,
#single-ss.mode-column .ss-page-break {
    display: block;

    /* 縦書きでは横方向の空白幅になる */
    block-size: 3em;
    min-block-size: 3em;
    margin: 0;
    padding: 0;
    border: 0;
}

/* いいねボタンは横書きのまま表示 */
#single-ss.mode-vertical .ifw_wrap,
#single-ss.mode-column .ifw_wrap {
    writing-mode: horizontal-tb;
}

/* いいねボタンを本文枠の外・左下へ配置 */
#single-ss.mode-vertical .like-area,
#single-ss.mode-column .like-area {
    display: flex;
    justify-content: flex-start;
    margin: 0 20px 20px;
}

#single-ss.mode-vertical .like-area .ifw_wrap.ifw_right,
#single-ss.mode-column .like-area .ifw_wrap.ifw_right {
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
}

/* コメントウィンドウの基準位置 */
#single-ss.mode-vertical .like-area .ifw_wrap,
#single-ss.mode-column .like-area .ifw_wrap {
    position: relative;
}

/* コメントウィンドウをボタンの右上へ表示 */
#single-ss.mode-vertical
.like-area
.ifw_message_wrap.ifw_top_right,
#single-ss.mode-column
.like-area
.ifw_message_wrap.ifw_top_right {
    right: auto !important;
    left: 0 !important;

    max-width: calc(100vw - 40px);
    box-sizing: border-box;
}

/* 吹き出しの三角形もボタン側へ移動 */
#single-ss.mode-vertical
.like-area
.ifw_message_wrap.ifw_top_right
.ifw_arrow,
#single-ss.mode-column
.like-area
.ifw_message_wrap.ifw_top_right
.ifw_arrow {
    right: auto !important;
    left: 20px !important;
}

/* ================
   縦書き・横スクロールモード
================ */
/* 縦書き時は、記事本体から枠と余白を外す */
/* 縦書きの記事をビューアの高さに合わせる */
#single-ss.mode-vertical .ss {
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
	height: 100%;
    min-height: 0;
	    /* 短いページでも記事領域を枠幅いっぱいにする */
    min-width: 100%;
    box-sizing: border-box;
}

/* 縦書き時は、スクロール用の箱に枠を付ける */
#single-ss.mode-vertical .ss-viewer {
    width: calc(100% - 40px);
    max-width: calc(100% - 40px);
    min-width: 0;

    height: var(--ss-viewer-height, 65svh);

    margin: 20px;
    padding: 20px;

    border: 1px solid var(--haconiwa-color-border);
    border-radius: 5px;
    background: var(--haconiwa-color-surface);

    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
}

/* ================
   縦書き・段組みモード
================ */
#single-ss.mode-column {
    /* PC版の1段の高さ */
    --ss-column-size: clamp(520px, 50svh, 650px);
}

/* 段組みを画面幅内に収めるための箱 */
#single-ss.mode-column .ss-viewer {
    width: calc(100% - 40px);
    max-width: calc(100% - 40px);
    min-width: 0;

/* JavaScriptが2段目以降を含む高さを設定 */
    height: var(--ss-column-content-height, auto);

    margin: 20px;
    padding: 20px;

    border: 1px solid var(--haconiwa-color-border);
    border-radius: 5px;
    background: var(--haconiwa-color-surface);

    box-sizing: border-box;
    overflow: visible;
}

/* 記事本体を段組みする */
#single-ss.mode-column .ss {
    margin: 0;
    padding: 0;

    border: none;
    border-radius: 0;
    background: transparent;

    box-sizing: border-box;

    /*
     * vertical-rlでは、
     * inline-sizeが物理的な縦の長さになります
     */
    inline-size: var(--ss-column-size);

    /*
     * block-sizeは物理的な横幅です
     */
    block-size: 100%;
    max-block-size: 100%;
    min-block-size: 0;

    /* 1段ずつ順番に本文を流す */
    column-width: var(--ss-column-size);
    column-fill: auto;

    /* 段と段の縦方向の間隔 */
    column-gap: 2em;
}

/* ================
   フォント切り替え
================ */

/* ゴシック体 */
#single-ss.font-gothic .article {
    font-family:
        var(--haconiwa-font-sans);
}

/* 明朝体 */
#single-ss.font-mincho .article {
    font-family: var(--haconiwa-font-mincho);
	font-weight: 600;
}

/* ゴシック体＋縦書き時の和文記号 */
#single-ss.font-gothic.mode-vertical,
#single-ss.font-gothic.mode-column {
    --ss-jp-punctuation-font:
        "Hiragino Kaku Gothic ProN",
        "Yu Gothic",
        "Noto Sans JP",
        sans-serif;
}

/* 明朝体選択時の和文記号 */
#single-ss.font-mincho {
    --ss-jp-punctuation-font:
        "Noto Serif JP",
        serif;
}

/* 縦書き時：「…」「——」だけ専用の和文フォントを使用 */
#single-ss.mode-vertical .ss-ellipsis,
#single-ss.mode-vertical .ss-dash,
#single-ss.mode-column .ss-ellipsis,
#single-ss.mode-column .ss-dash {
    font-family: var(--ss-jp-punctuation-font);
}

/* =========================
   本文の文字サイズ切り替え
========================= */

/* 初期サイズ：現在のテーマ設定と同じ */
#single-ss.size-small {
    --ss-reading-font-size: 1em;
}

/* 14pxを基準に約16px */
#single-ss.size-medium {
    --ss-reading-font-size: 1.142857em;
}

/* 14pxを基準に約18px */
#single-ss.size-large {
    --ss-reading-font-size: 1.285714em;
}

/* 小説本文全体へ反映 */
#single-ss .entry-content {
    font-size: var(--ss-reading-font-size, 1em);
}

/* 小見出しは本文の約1.143倍 */
#single-ss .entry-content h4 {
    font-size: 1.142857em;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下（タブレット）*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/

  /*　PC用フッタメニュー非表示　*/
  .footer,
  .mobile-header-menu-buttons .menu-caption {
    display: none;
  }
  /*　アピールエリアの高さ詰め　*/
  .appeal {
		height: 100px;
  }

	.logo-menu-button {
		font-family: "Nunito Sans", sans-serif;
		font-size: 18px;
		font-weight: 500;
	}

  /* 固定ページのタイトル位置をアーカイブと揃える */
body.page .article-header {
  margin-top: 20px;
}

  /*　モバイルスライドインメニュー　*/
  /* ×アイコンを移動 */
	.menu-close-button {
		padding-top: 15px;
		padding-left: 25px;
		padding-bottom: 30px;
		text-align: left;
		font-size: 1.3em;
	}

  /* 各親メニューをアイコン配置の基準にする */
#navi-menu-content .menu-drawer > li {
  position: relative;
  display: block !important;
  margin: 0;
  padding: 0;
}

  /* 親メニューのアイコン */
#navi-menu-content .menu-drawer > li::before {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 46px;
  margin: 0 !important;
  line-height: 1;
  /* アイコンがリンク操作を邪魔しないようにする */
  pointer-events: none;
}

  /*メニュー内の文字フォント */
#navi-menu-content .menu-drawer a {
  box-sizing: border-box;
  font-family: var(--haconiwa-font-sans) !important;
  font-weight: 500;
  font-style: normal;
  color: var(--haconiwa-color-text);
  text-decoration: none;
}

  /* HOME・SS・NOTEなどの親メニュー */
#navi-menu-content .menu-drawer > li > a {
  display: flex !important;
  align-items: center;
  width: 100%;
  min-height: 46px;
  padding: 11px 16px 9px 52px !important;
  border-bottom: 1px solid var(--haconiwa-color-border);
  line-height: 1.4;
}

  /* サブメニュー全体 */
#navi-menu-content .menu-drawer .sub-menu,
#navi-menu-content .menu-drawer .sub-menu > li {
  margin: 0;
  padding: 0;
}

  /* サブメニューの各行 */
#navi-menu-content .menu-drawer .sub-menu > li > a {
  display: flex !important;
  align-items: center;
  width: 100%;
  min-height: 42px;
  padding: 9px 16px 7px 68px !important;
  border-bottom: 1px solid var(--haconiwa-color-border);
  line-height: 1.4;
}

/* ================
   縦書き用の設定
================ */
/* スマートフォンの縦書きビューア */
#single-ss.mode-vertical .ss-viewer {
    width: calc(100% - 24px);
    max-width: calc(100% - 24px);

    height: calc(100svh - 60px);

    margin: 12px;
    padding: 16px;
	}

#single-ss.mode-column {
    --ss-column-size: calc(100svh - 250px);
}

#single-ss.mode-column .ss-viewer {
    width: calc(100% - 24px);
    max-width: calc(100% - 24px);

    margin: 12px;
    padding: 16px;
}


/* ================
   閲覧設定ボタン
================ */
    .buttons {
        width: calc(100% - 40px);
        max-width: none;
        margin: 15px 20px 0;
    }

    .buttons .button-row-settings,
    .buttons .button-row-writing {
        justify-content: right;
    }

/************************************
** サイト内検索結果ページ
************************************/
  #search-results .search-results-header,
  #search-results .search-results-list,
  #search-results .search-results-empty {
    margin-right: 12px;
    margin-left: 12px;
  }

  #search-results .search-result-card {
    padding: 14px;
  }

/* ================
** パスワード保護SSの入力フォーム
================ */

  #single-ss .post-password-form p + p {
    display: block;
  }

  #single-ss .post-password-form input[type="submit"] {
    width: 100%;
    margin-top: 10px;
  }
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	
}
	
/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	
}