にも同じ組版を適用する */
.ds-footer__copy p,
.ds-footer__copy div {
margin: 0;
font-size: inherit;
line-height: inherit;
color: inherit;
}
.ds-footer__copy p + p { margin-top: 10px; }
.ds-footer__copy a {
color: var(--ds-on-dark-2);
text-decoration: underline;
text-underline-offset: 0.2em;
}
.ds-footer__copy a:hover { color: var(--ds-green-lite); }
.ds-footer__sns {
display: flex;
gap: 18px;
margin: 18px 0 0;
font-size: 16px;
color: var(--ds-on-dark-2);
}
.ds-footer__sns a:hover { color: var(--ds-green-lite); }
.ds-pagetop {
display: inline-block;
margin-bottom: 32px;
font-family: var(--ds-en);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.16em;
color: var(--ds-mute);
}
.ds-pagetop:hover { color: var(--ds-green-lite); }
/* ============================================================
レスポンシブ
============================================================ */
@media only screen and (max-width: 1080px) {
.ds-layout { gap: 48px; }
.ds-aside { position: static; max-width: none; }
}
@media only screen and (max-width: 900px) {
:root { --ds-gutter: 24px; }
.ds-gnav { display: none; }
.ds-burger { display: block; }
.ds-search-trigger { display: none; }
.ds-header__inner { min-height: 68px; flex-wrap: nowrap; }
.ds-cta { padding: 10px 14px; font-size: 12px; }
.ds-featured { padding-top: 40px; }
.ds-featured__body { gap: 40px; }
.ds-layout { padding-top: 48px; }
.ds-main { gap: 56px; }
.ds-top { padding-bottom: 64px; }
.ds-work__inner { padding-top: 48px; padding-bottom: 48px; gap: 40px; }
.ds-lab { padding: 32px 24px; }
}
@media only screen and (max-width: 640px) {
:root { --ds-gutter: 20px; }
.ds-logo__name { font-size: 21px; }
.ds-logo__sub { display: none; }
.ds-sectionbar { gap: 12px; margin-bottom: 24px; }
.ds-sectionbar__meta { display: none; }
.ds-lead__meta { margin-top: 18px; gap: 10px; }
.ds-lead__text { font-size: 14.5px; line-height: 1.9; }
.ds-sublist__item { grid-template-columns: 1fr 120px; gap: 14px; padding: 18px 0; }
.ds-sublist__title { font-size: 15px; }
.ds-sechead { flex-direction: column; align-items: flex-start; gap: 12px; }
.ds-sechead__title { font-size: 21px; }
.ds-cards { gap: 28px; grid-template-columns: 1fr; }
.ds-row { grid-template-columns: 1fr; gap: 16px; padding: 22px 0; }
.ds-row__title { font-size: 17px; }
.ds-row__text { display: none; }
.ds-lab__head { flex-direction: column; align-items: flex-start; gap: 12px; }
.ds-lab__list { grid-template-columns: 1fr; }
.ds-cert { grid-template-columns: 1fr; gap: 20px; }
.ds-work__inner { grid-template-columns: 1fr; }
.ds-work__cards { grid-template-columns: 1fr; }
.ds-work__title { font-size: 22px; }
.ds-footer__inner { padding-top: 48px; }
.ds-footer__cols { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
.ds-footer__bottom { margin-top: 40px; }
}
/* ============================================================
記事ページ（single）の調整
このファイルは style.css / css/content.css / css/icon.css より後に
読み込まれるため、テーマ本体を編集せずここで上書きしている。
============================================================ */
/* --- 1. アイコンフォント（icomoon）の文字化け対策 -------------
style.css:2879 で icon-tag / icon-calendar には対策済みだが、
記事ページで使う icon-folder が漏れていた。あわせて icon-tag は
フォルダ形のSVGが当たっていたためタグ形に差し替える。 */
.dateList__item.icon-folder::before {
display: inline-block !important;
width: 1em;
height: 1em;
margin-right: 6px;
vertical-align: -0.12em;
content: "" !important;
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 4l2 2h8c1.1 0 2 .9 2 2v10c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2h6z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 4l2 2h8c1.1 0 2 .9 2 2v10c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2h6z'/%3E%3C/svg%3E");
}
.dateList__item.icon-tag::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M11 2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 .59 1.41l9 9a2 2 0 0 0 2.82 0l7-7a2 2 0 0 0 0-2.82l-9-9A2 2 0 0 0 11 2zM6.5 5A1.5 1.5 0 1 0 6.5 8 1.5 1.5 0 0 0 6.5 5z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M11 2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 .59 1.41l9 9a2 2 0 0 0 2.82 0l7-7a2 2 0 0 0 0-2.82l-9-9A2 2 0 0 0 11 2zM6.5 5A1.5 1.5 0 1 0 6.5 8 1.5 1.5 0 0 0 6.5 5z'/%3E%3C/svg%3E");
}
/* 引用符も icomoon 依存（content.css:214）だったので通常フォントに置き換える */
.content blockquote::before {
font-family: var(--ds-en), Georgia, serif;
content: "\201C";
top: 4px;
font-size: 4.2rem;
line-height: 1;
color: #D9D9D9;
}
/* --- 2. 画像の縦横比 -----------------------------------------
style.css:33 の img{max-width:100%} に height:auto が無く、
size-* クラスの付かない画像が縦に潰れていた。 */
.content img,
.content video,
.content iframe {
height: auto;
}
/* --- 3. コードを等幅フォントに -------------------------------
content.css:117 の pre がゴシック体指定で桁が揃わなかった。
文字色 #7F7F7F / 背景 #F2F2F2 はコントラスト比 約3.0:1 で
WCAG AA(4.5:1) を満たさないため本文色に変更する。 */
.content pre,
.content code,
.content kbd,
.content samp {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
"Liberation Mono", "Courier New", "Noto Sans Mono CJK JP", monospace;
font-feature-settings: normal;
}
.content pre {
color: var(--ds-ink-2);
background-color: var(--ds-surface);
border-left: solid 4px var(--ds-green);
line-height: 1.7;
tab-size: 4;
-moz-tab-size: 4;
}
/* pre の外にあるインラインコードだけチップ表示にする */
.content :not(pre) > code {
background: var(--ds-surface);
border: 1px solid var(--ds-line);
padding: 0.15em 0.4em;
font-size: 0.92em;
color: var(--ds-ink-2);
word-break: break-word;
}
/* --- 4. 表 ---------------------------------------------------
配色を新パレットに合わせ、狭い画面では横スクロールさせる。 */
.content table {
border-color: var(--ds-line);
}
.content table th {
background: var(--ds-ink);
border-color: var(--ds-line);
}
.content table td {
border-color: var(--ds-line);
}
.content table tr:nth-child(2n+1) {
background: var(--ds-surface);
}
@media only screen and (max-width: 767px) {
/* content.css:136 は width:100% のみで、列の多い表がレイアウトを崩していた */
.content table {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
/* --- 5 + 6. リンクとアクセント色 ------------------------------
旧アクセント #f0b200（琥珀）を新パレットのグリーンへ。
あわせて :hover の font-weight:bold（content.css:23）をやめる。
ホバーのたびに文字幅が変わり行が揺れていたため。 */
.content a {
color: var(--ds-green-deep);
border-bottom: 1px solid rgba(92, 132, 25, 0.35);
}
.content a:hover {
font-weight: inherit;
color: var(--ds-ink);
border-bottom: 1px solid var(--ds-ink);
}
/* 画像リンクと目次リンクには下線を出さない
（:hover 側は詳細度が上がるので個別に打ち消す） */
.content a:has(> img),
.content .wp-caption a,
.content .outline__link {
border-bottom: 0;
}
.content a:has(> img):hover,
.content .wp-caption a:hover,
.content .outline__link:hover {
border-bottom: 0;
}
/* 記事メタ（日付・カテゴリ・タグ） */
.dateList__item a[rel="tag"]:hover,
.dateList__item a[rel="category"]:hover {
color: var(--ds-green-deep);
}
/* ボタン類（プロフィール・関連記事・コメント） */
.btn__link,
.comment-respond .submit,
.comments__list .comment-reply-link {
border-color: var(--ds-green-deep);
color: var(--ds-green-deep);
}
.btn__link:hover,
.comment-respond .submit:hover,
.comments__list .comment-reply-link:hover {
color: #ffffff !important;
background: var(--ds-green-deep);
}
/* 関連記事・CTA・コメント */
.related__title,
.related__title a {
color: var(--ds-green-deep);
}
.ctaPost__btn {
background: var(--ds-green-deep);
border-color: var(--ds-green-deep);
}
.ctaPost__btn:hover {
color: var(--ds-green-deep);
}
.comments__list .comment-meta {
background: var(--ds-ink);
}
/* 見出し（アーカイブ・トップウィジェットエリアでも使用） */
.heading.heading-first {
border-bottom-color: var(--ds-green);
}
.heading.heading-primary .heading__bg {
background: var(--ds-green-deep);
}
/* ============================================================
Bootstrap CDN の a:hover を打ち消す
header.php で読み込んでいる Bootstrap 4.3.1 の Reboot に
a:hover { color: #0056b3; text-decoration: underline; }
があり、テーマ側に a:hover の指定が無いためこれが効いてしまう。
カード全体が1つの
のため、下線が中の要素すべてに伝播していた。
打ち消しには :where() を使い、詳細度を a:hover と同じ (0,1,1) に
保っている。ここを .ds-top a:hover (0,2,1) にすると、
.ds-cta:hover や .ds-pill:hover (0,2,0) を巻き込んで壊すため。
============================================================ */
a:hover { text-decoration: none; }
:where(.ds-header, .ds-top, .ds-work, .ds-footer) a:hover {
color: inherit;
text-decoration: none;
}
/* 上の color:inherit (0,1,1) はベース指定 (0,1,0) を上回るため、
ホバー時も色を保ちたいリンクは :hover を明示しておく */
.ds-sechead__link:hover {
color: var(--ds-green-deep);
opacity: .75;
}
.ds-work__link:hover {
color: var(--ds-green-deep);
}
.ds-footer__copy a:hover {
text-decoration: underline;
}