:root {
    --primary-color: #A47764;
    --secondary-color: #C39E88;
    --body-color: #F0F0E5;
    --main-color: #FCFCFC;
    --accent-color: #A793B9;
    --black-color: #444444;
    --black-alpha-color: rgba(68, 68, 68, 0.8);
    --white-color: #FCFCFC;
    --card-base-color: #FFFFFF;
    --h1-font-size: 2.5rem;
    --h2-font-size: 2rem;
    --h3-font-size: 1.5rem;
    --normal-font-size: 1rem;
    --mini-font-size: 0.5rem;
    --lightgray-color: #f7f7f7;
    --gray-color: #888888;
    --text-strong-color: #BBAA92;
    --translate-x: -75%;
}
/*
 ** デフォルトでは継承されないよ **
margin*
padding*
border*
*width
*height

background*
box-shadow

display
position
z-index
flex*
grid*

overflow
clip-path
cursor

*/
/* base 定義  */
html {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
*,
*::before,
*::after {
    margin: 0px;
    padding: 0px;
    box-sizing: inherit;
    color: var(--black-color);
    font-size: var(--normal-font-size);
}

body {
  width: 100%;
  min-height: 100%;
  background-color: var(--body-color);
  display: flex;
  flex-direction: column;
}

h1 {
    font-size: var(--h1-font-size);
}
h2 {
    font-size: var(--h2-font-size);
}
h3 {
    font-size: var(--h3-font-size);
}
pre {
    background-color: var(--lightgray-color);

    overflow-x: auto; /* 横スクロールを有効にする */
    white-space: pre-wrap; /* 改行なしでスペースをそのまま表示 */
    word-wrap: break-word;
    max-width: 100%; /* 親要素の幅を超えないようにする（任意） */
    padding: 5px;
    border-radius: 5px; /* 角丸（任意） */
}
strong {
    /*text-decoration: underline;
    text-decoration-color: #68D0AE;*/
    background: linear-gradient(transparent 64%, var(--text-strong-color) 0%);
}

.site-header {
    position: sticky;
    top: 0px;
    height: 106px;
    background-color: var(--primary-color);
    width: 100%;
}
.site-header > .site-header__info {
    height: 46px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(1, 1fr);
    gap: 0px;
}

.site-header > .site-header__info > .site-header__description {
    grid-column: span 5 / span 5;
    grid-column-start: 2;
}
.site-header > .site-header__info > .site-header__description > span {
    color: var(--main-color);
}
.site-header > .site-header__info > .site-header__search {
    grid-column: span 3 / span 3;
    grid-column-start: 7;
    display: flex;
    justify-content: flex-end;
    margin-top: 11px;
    height: 32px;
}

.search-form .search-form__input {
    display: inline-block;
    border: none;
    outline: none;
    padding: 0px 0px 0px 0.5em;
    height: 100%;
    max-width: calc(1.2em * 10); /* ざっくり日本語で10文字分 */
    background-color: var(--secondary-color);
    color: var(--black-color);
}

.search-form .search-form__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    padding: 1px 0.5rem 1px 0px;
    background-color: var(--secondary-color);
    font-size: var(--h3-font-size);
}

.search-form .search-form__cb--hidden,
.search-form .search-form__label {
    display: none;
}

.site-header > .site-header__info > .sp-toggles__container {
    grid-column: span 3 / span 3;
    grid-column-start: 10;
    /*display: none;*/
}

.sp-toggles--hidden,
.sp-toggles__container,
.sp-toggles__dropdown, .sp-toggles__menu {
    display: none;
}

.site-header > .site-header__main {
    height: 60px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(1, 1fr);
    gap: 0px;
    align-items: end;;
}

.site-header > .site-header__main > .site-header__title {
    grid-column: span 2 / span 2;
    grid-column-start: 2;
    font-size: var(--h1-font-size);
    color: var(--main-color);
}
.site-header > .site-header__main > .site-header__title > a {
    text-decoration: none;
    font-size: var(--h1-font-size);
    color: var(--main-color);
}
.site-header > .site-header__main > .site-header__nav {
    grid-column: span 4 / span 7;
    grid-column-start: 4;
}
.site-header > .site-header__main > .site-header__nav > ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 1rem;
    text-align: center;
}
.site-header > .site-header__main > .site-header__nav > ul li {
    height: 100%;
}
.site-header > .site-header__main > .site-header__nav > ul li a {
    display: inline-block;
    width: 100%;
    position: relative;
    text-decoration: none;
    font-size: var(--h3-font-size);
    color: var(--main-color);
}
.site-header > .site-header__main > .site-header__nav > ul li a:before, 
.site-header > .site-header__main > .site-header__nav > ul li a:after {
    content: "";
    position: absolute;
    bottom: 0px;
    width: 0px;
    height: 3px;
    border-bottom: 3px solid var(--accent-color);
    transition: 0.3s;
}
.site-header > .site-header__main > .site-header__nav > ul li a:before {
    left: 50%;
    transform: translateX(-50%);
}
.site-header > .site-header__main > .site-header__nav > ul li a:after {
    right: 50%;
    transform: translateX(50%);
}
.site-header > .site-header__main > .site-header__nav > ul li a:hover:before,
.site-header > .site-header__main > .site-header__nav > ul li a:hover:after {
    width: 100%;
}

.main {
    flex: 1;
    margin: 1rem auto;
    display: flex;
    justify-content: center; /* 中央揃え */
    gap: 1rem; /* articleとnavの間にスペース */
    padding: 0; /* 両端に余白を加える */
}

.main > article.main__contents {
    flex: 0 0 54.166%; /* 6.5 ÷ 12 = 54.166% */
    background-color: var(--main-color);
    padding: 0 1rem 1rem 1.5rem;

    word-wrap: break-word; /* 長い単語を折り返す */
    overflow-wrap: break-word; /* 推奨: 最新のプロパティ */
    white-space: normal; /* テキストの折り返しを有効にする */
}
.main > article.main__contents h2 {
    display: inline-block;
    width: 100%;
    margin: 0.5rem 0;
    padding-left: 0.5rem;
    background-color: var(--primary-color);
    color: var(--white-color);
}
.main > article.main__contents h3 {
    display: inline-block;
    width: 100%;
    margin: 0.5rem 0;
    padding-left: 0.5rem;
    padding-inline-start: 0.5rem;
    border-inline-start: 4px solid var(--primary-color);
    background-color: var(--body-color);
    color: var(--black-color);
}
.main > article.main__contents ul,
.main > article.main__contents ol {
    padding-left: var(--h3-font-size);
}

/* start list css */
.main > div.main__contents {
    max-width: 820px;;
}
/* 全体のスタイル */
.articles__list {
  display: flex;
  flex-direction: column;
  gap: 10px; /* 各記事間の余白 */
}

.articles__list .card {
  display: flex;
  border: 1px solid var(--lightgray-color);
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--card-base-color);
  padding: 15px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.articles__list .card-large {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--lightgray-color);
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--card-base-color);
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    height: calc(100vh * 0.45);
}

/* サムネイル画像 */
.card__thumbnail {
  flex: 0 0 224px; /* 固定幅 */
  height: 120px; /* 高さ固定 */
  margin-right: 15px;
  overflow: hidden;
  border-radius: 8px;
}
.card-large .card__thumbnail {
  /*flex: 0 0 224px;*/ /* 固定幅 */
    flex: unset;
  height: 60%; /* 高さ固定 */
  width: 100%;
  margin-right: unset;
  overflow: hidden;
  border-radius: 8px;
}
.card__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 記事コンテンツ */
.card__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.card-large .card__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: unset;
}
.card-lagrge .card__content {
  flex: unset;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* メタ情報（日時とカテゴリ） */
.card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--normal-font-size);
  color: var(--black-color);
}

.card__meta__date {
  font-size: var(--normal-font-size);
  color: var(--gray-color);
}

.card__meta__category {
  display: inline-block;
  background-color: var(--primary-color);
  color: var(--card-base-color);
  padding: 2px 8px;
  font-size: 0.8rem;
  border-radius: 4px;
  text-decoration: none;
}

/* タイトル */
.card__title {
  font-size: var(--h3-font-size);
  color: var(--black-color);
  margin: 10px 0 5px;
}
.card__title a {
  font-size: var(--h3-font-size);
  color: var(--black-color);
  text-decoration: none;
}

/* 記事抜粋 */
.card__excerpt {
  font-size: var(--normal-font-size);
  color: var(--gray-color);
  line-height: 1.6;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 549px;
  max-height: 92px;
}
.card-large .card__excerpt {
    flex: 1;
  font-size: var(--normal-font-size);
  color: var(--gray-color);
  line-height: 1.6;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 788px;
  max-height: 120px;
}
.card__excerpt > h1,
.card__excerpt > h2,
.card__excerpt > h3 {
    display: none;
}
.card__excerpt p,
.card__excerpt a,
.card__excerpt pre,
.card__excerpt span,
.card__excerpt strong,
.card__excerpt li {
    font-size: calc(var(--normal-font-size) * 0.9);
}
/* end 一覧CSS */

/* カテゴリー・タグなどジャンル一覧 */
.main > div.main__contents.main__side-nav {
    background-color: var(--body-color);
    flex: unset;
    width: 100vw;
}
.main > div.main__contents.main__side-nav > .genre-list__container {
    height: calc(100% - 2rem);
    display: flex;
}
.main > div.main__contents.main__side-nav  > .genre-list__container > ul.genre-list {
    background-color: var(--main-color);
    width: 100%;
    padding: var(--mini-font-size) var(--normal-font-size);
}
.main > div.main__contents.main__side-nav  > .genre-list__container > ul.genre-list li {
    padding: var(--mini-font-size) 0;
}
.main > div.main__contents.main__side-nav  > .genre-list__container > ul.genre-list li .genre-link {
    font-size: var(--h3-font-size);
    width: 100%;
}

/* pagination */
.pagination {
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: var(--normal-font-size) 0;
}

.pagination a {
    display: block;
    padding: var(--mini-font-size) var(--normal-font-size);
    color: var(--black-color);
    text-decoration: none;
    border: 1px solid var(--gray-color);
    border-radius: 6px;
    background-color: var(--lightgray-color);
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.pagination a:hover {
    background-color: var(--secondary-color);
    color: var(--card-base-color);
    transform: translateY(-2px);
}

.pagination .spacer {
  flex: 1; /* 空白を埋める */
}

.pagination a:disabled,
.pagination a[disabled] {
    background-color: var(--lightgray-color);
    color: var(--gray-color);
    cursor: not-allowed;
}
/* end pagination */
/* end カテゴリー・タグなどジャンル一覧 */

/* 一覧 サイドコンテンツ*/
/* サイドバー全体 */
.main > .main__side-nav {
    flex: 0 0 16.666%; /* 1 ÷ 6 = 16.666% */
    background-color: var(--main-color);
    padding: 0 1rem 1rem 1rem;
}
.main > article.main__contents + .main__side-nav > .sticky-toc {
    top: 122px;
    position: sticky;
}
.main > .main__side-nav h3 {
    padding-top: 1rem;
}
.main > .main__side-nav ul {
    padding: var(--normal-font-size) var(--mini-font-size);
}

/* カテゴリーリスト */
.genre-list {

}

.genre-list li {
  display: flex; /* フレックスで並べる */
  justify-content: space-between; /* リンクと数値を左右に配置 */
  align-items: center; /* 垂直方向の中央揃え */
  padding: 5px 0;
  border-bottom: 1px dotted var(--gray-color); /* リスト間の区切り線 */
}

.genre-list li:last-child {
  border-bottom: none; /* 最後の項目には線を付けない */
}

/* カテゴリーリンク */
.genre-link {
  text-decoration: none;
  font-size: var(--normal-font-size);
  color: var(--black-color); /* リンク色 */
}

.genre-link:hover {
  text-decoration: underline;
}

/* 記事数 */
.genre-count {
  font-size: var(--normal-font-size);
  color: var(--black-color);
  background-color: var(--lightgray-color); /* 背景色 */
  padding: 2px 6px;
  border-radius: 12px;
}
/* end サイドコンテンツ */

.footer {
    width: 100%;
    background-color: var(--secondary-color);
}

.footer > .footer__subnav {
    display: grid;
    /*grid-template-columns: repeat(12, 1fr);*/
    grid-template-columns: repeat(2, 1fr);
    /*grid-template-rows: repeat(1, 1fr);*/
    /*justify-content: center;*/
    gap: 0px;
    background-color: var(--black-alpha-color);
}
.footer > .footer__subnav h3,
.footer > .footer__subnav li,
.footer > .footer__subnav p {
    color: var(--body-color);
}

.footer > .footer__subnav .footer__subnav__category {
    grid-column: auto;
/*
    grid-column: span 2 / span 3;
    grid-column-start: 3;
*/
    padding: 1rem 1rem 1rem 1rem;
    /*padding: 1rem 0px 1rem 9rem;*/
    color: var(--main-color);
    border-right: 1px solid var(--body-color);
    width: 640px;
    justify-self: right;
}
.footer > .footer__subnav .footer__subnav__category ul {
    list-style: none;
}
.footer > .footer__subnav .footer__subnav__tag {
    grid-column: auto;
/*
    grid-column: span 6 / span 3;
    grid-column-start: 6;
*/
    padding: 1rem 1rem 1rem 1rem;
    color: var(--main-color);
    /*border-right: 1px solid var(--body-color);*/
    width: 640px;
}
.footer > .footer__subnav .footer__subnav__category a,
.footer > .footer__subnav .footer__subnav__tag a {
      text-decoration: none;
      color: var(--body-color);
}

.footer > .copyright {
    width: 100%;
    text-align: center;
    align-content: center;
    height: 34px;
}
.footer > .copyright > span {

}

#scroll-to-top {
  position: fixed;
  bottom: 0px;
  right: 0px;
  width: 34px;
  height: 34px;
  background-color: var(--primary-color);
  color: var(--secondary-color);
  padding: 0px 5px;
  text-decoration: none;
  font-size: var(--h3-font-size);
  transition: opacity 0.3s, visibility 0.3s;
  opacity: 0; /* 初期状態で透明 */
  visibility: hidden; /* 初期状態で非表示 */
}

#scroll-to-top.visible {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 1136px) {
    .site-header > .site-header__main > .site-header__title > a {
	text-decoration: none;
	font-size: var(--h2-font-size);
    }
}
@media (max-width: 926px) {
    .site-header > .site-header__main > .site-header__title > a {
	text-decoration: none;
	font-size: var(--h3-font-size);
    }
}
@media (max-width: 820px) {
    .site-header > .site-header__main > .site-header__title {
	font-size: var(--h1-font-size);
	grid-column: span 2 / span 9;
	grid-column-start: 2;
    }
    .site-header > .site-header__main > .site-header__title > a {
	text-decoration: none;
	font-size: var(--h1-font-size);
    }
    .site-header > .site-header__main > .site-header__nav {
	display: none;
    }
    .sp-toggles__container {
	display: unset;
	position: fixed;
	top: 0;
	right: 0;
    }

    /* SP用見出しリストのCSS */
    label.sp-toggles__dropdown-button {
	display: inline-block;
	padding: 10px 20px;
	text-align: center;
	cursor: pointer;       /* クリック可能な見た目 */
	transition: all 0.3s ease; /* アニメーションを設定 */
	color: var(--main-color);           /* テキストカラー */
    }
    /* トグル時のテキスト変更 */
    input[type="checkbox"]:checked + label.sp-toggles__dropdown-button::before {
	content: "目次△ ";
	color: var(--white-color);
    }
    input[type="checkbox"]:not(:checked) + label.sp-toggles__dropdown-button::before {
	content: "目次▽ ";
	color: var(--white-color);
    }

    /* チェックされたときに表示 */
    input[type="checkbox"]:checked ~ .sp-toggles__dropdown {
	display: block;
	position: absolute;
	width: 80vw; /* 画面幅の8割 */
	transform: translateX(var(--translate-x));
	background-color: var(--main-color);
	border: 2px solid var(--black-color);
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	padding: 20px;
	z-index: 10;
    }

    .sp-toggles__dropdown ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
    }

    .sp-toggles__dropdown ul li {
	margin: 10px 0;
    }

    .sp-toggles__dropdown ul li a {
	text-decoration: none;
	color: var(--black-color);
	transition: color 0.3s;
    }

    .sp-toggles__dropdown ul li a:hover {
	color: #007BFF;
    }

    /* SP用メニューのCSS */
    label.sp-toggles__menu-button {
	margin: 0.1rem;
	display: inline-block;
	padding: 10px 20px;
	border: 2px solid var(--white-color); /* 実線のボーダー */
	border-radius: 50% / 50%;
	text-align: center;
	cursor: pointer;       /* クリック可能な見た目 */
	transition: all 0.3s ease; /* アニメーションを設定 */
	color: var(--white-color);           /* テキストカラー */
	font-weight: bold;      /* テキストを太字に */
    }
    .sp-toggles__menu > .sp-toggles__container > label.sp-toggles__menu-button {
	border: 2px solid var(--black-color); /* 実線のボーダー */
	color: var(--black-color);           /* テキストカラー */
    }

    body:has(#sp-toggles__menu-toggle:checked) {
	overflow: hidden;
    }
    #sp-toggles__menu-toggle:checked + .sp-toggles__menu-button + .sp-toggles__menu {
	display: flex;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--body-color);
	color: var(--black-color);
    }
    .sp-toggles__menu > ul {
	display: block;
	padding: 3rem 2rem 0px 2rem;
	width: 100vw;
	list-style: none;
    }
    .sp-toggles__menu > ul li {
	position: relative;
	padding: 0.5rem 0;
	border-bottom: 2px solid;
	font-size: var(--h1-font-size);
    }

    /* 区切り線を擬似要素で表現 */
    .sp-toggles__menu > ul li::before {
	background-color: var(--black-color);
	display: block;
	position: absolute;
	bottom: -8%;
	left: 0;
	width: 10px;
	height: 10px;
	border-radius: 10px;
	content: "";
    }

    .sp-toggles__menu > ul li::after {
	background-color: var(--black-color);
	display: block;
	position: absolute;
	bottom: -8%;
	width: 10px;
	height: 10px;
	border-radius: 10px;
	content: "";
	right: 0;
	left: auto;
    }

    .sp-toggles__menu > ul li:first-child {
	padding-top: 1rem;
    }

    .sp-toggles__menu > ul li a {
	display: block;
	text-decoration: none;
	font-size: inherit;
	color: var(--black-color);
	padding: 0 1rem;
	width: 100%;
    }

    .main > article.main__contents,
    .main > div.main__contents {
	flex: 1 1 100%;
	margin: 0 1rem;
	padding: 0 1rem 1rem 1rem;
    }
    .main > .main__side-nav {
	display: none;
    }
    .main > div.main__contents.main__side-nav {
	display: unset;
	width: calc(90vw);
    }

    .footer > .footer__subnav .footer__subnav__category {
	/*padding: 1rem;*/
	/*width: calc(100vw / 2);*/
	width: 100%;
    }
    .footer > .footer__subnav .footer__subnav__tag {
	/*
	grid-column: span 6 / span 5;
	grid-column-start: 6;
       */
	/*padding-left: 2rem;*/
	/*width: calc(100vw / 2);*/
	width: 100%;
    }
}

@media (max-width: 430px) {
    :root {
	--translate-x: -55%;
    }

    pre {
	/*overflow-x: scroll;*/
    }

    .site-header > .site-header__info > .site-header__description {
	display: none;
    }

    .site-header > .site-header__info > .site-header__search {
	grid-column: span 1 / span 6;
	grid-column-start: 1;
    }

    .search-form .search-form__input:not(.toggle--hidden),
    .search-form .search-form__submit:not(.toggle--hidden),
    .search-form .search-form__label.toggle--hidden {
	display: none;
    }

    .search-form .search-form__label:not(.toggle--hidden) {
	width: 32px;
	height: 32px;
	border: none;
	cursor: pointer;
	background-color: var(--secondary-color);
	font-size: var(--h3-font-size);
	border-radius: 60% / 60%;
	display: flex;
	align-items: center;
	justify-content: center;
    }

    .search-form .search-form__submit.toggle--visible {
	padding: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
    }
    .search-form .search-form__input.toggle--visible {
        display: inline-block;
	width: calc(100% - 32px);/* 検索ボタン要素の分だけマイナス */
    }

    input[type="checkbox"]:checked ~ .sp-toggles__dropdown {
	/*width: 80vw;*/
	transform: translateX(var(--translate-x));
    }

    .main {
	margin: 0;
	padding: 0;
	display: block;
    }
    .main > article.main__contents,
    .main > div.main__contents {
	margin: 0;
	padding: 0 var(--mini-font-size);
    }

    .card__thumbnail {
	display: none;
    }
    .card-large .card__thumbnail {
	display: unset;
    }

    .main > div.main__contents.main__side-nav > div:first-child {
	/* 多分タイトルコンテナdiv */
	padding: 0 var(--normal-font-size);
    }

    .footer > .footer__subnav {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-template-rows: repeat(2, 1fr);
	gap: 0px;
    }
    .footer > .footer__subnav .footer__subnav__category {
	grid-column: span 1;
	width: 100vw;
	border-right: none;
    }
    .footer > .footer__subnav .footer__subnav__tag {
	grid-column: span 1;
	padding: 1rem;
	width: 100vw;
    }

    .footer > .copyright > span {
	font-size: var(--mini-font-size);
    }
}

@media (max-width: 390px) {
    :root {
	--translate-x: -50%;
    }
    input[type="checkbox"]:checked ~ .sp-toggles__dropdown {
	transform: translateX(var(--translate-x));
    }

    .articles__list .card-large {
	/*height: calc(100vh * 0.35);*/
    }
    .card-large .card__thumbnail {
	height: 36px;
    }
    .card-large .card__thumbnail::before {
	height: 36px;
	content: "[最新の記事]";
	font-size: var(--h3-font-size);
	color: var(--accent-color);
    }
    .card-large .card__thumbnail img {
	display: none;
    }
}
@media (max-width: 375px) {
    :root {
	--translate-x: -48%;
    }
    input[type="checkbox"]:checked ~ .sp-toggles__dropdown {
	transform: translateX(var(--translate-x));
    }

    .card-large .card__excerpt {
	flex: 1;
	max-height: 96px;
    }
}