/*サイト全体のフォント */
body {
font-family: 'Noto Sans JP', sans-serif;
font-size: 14px;
/* font-family: 'メイリオ', Meiryo, 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', sans-serif !important; */
}
a:link,
a:visited {
color: inherit; /* 親要素の色を継承（デフォルトの青・紫を解除） */
text-decoration: none;
transition: color 0.3s ease; /* スムーズな色変化 */
}
a:hover {
color: var(--main-color); /* ホバー時にサブカラーを適用 */
/*text-decoration: underline; 必要なら下線を付ける */
}
a:active {
color: var(--sub-color);
}
/* サイトのメインカラー・サブカラー */
:root {
--main-color: #3b82f6; /* メインカラー */
--sub-color: #a855f7; /* サブカラー */
}
/* ヘッダー部分のスタイル */
.site-header {
padding: 10px 0;
}
.site-header .container {
max-width: 1300px;
margin: 0 auto;
padding: 0 15px;
display: flex;
flex-direction: column;
}
/* ロゴのスタイル調整 */
.site-branding {
display: flex;
flex-direction: column;
align-items: flex-start; /* 左揃え */
margin-left: 0; /* 左端に合わせる */
margin-bottom: 0; /* 10pxから0に変更 */
width: 100%; /* 左サイドバーと同じ幅 */
}
.site-header .custom-logo {
max-width: 120px; /* お好みのサイズに調整 */
height: auto;
margin: 0 0 0 20px; /* 左揃えにするため */
}
.site-branding .site-title {
display: block;
text-align: left; /* 左揃え */
margin: 0;
}
.site-branding .site-description {
display: block;
text-align: left; /* 左揃え */
margin-top: 5px;
margin-left: 20px;
}
/* ナビゲーションのスタイル調整 */
.main-navigation {
width: 100%; /* 全幅 */
margin-top: 0; /* 10pxから0に変更 */
}
.main-navigation ul {
display: flex;
justify-content: space-between; /* 均等に配置 */
padding-left: 0;
margin-left: 0;
width: 100%;
}
.main-navigation li {
/* margin-bottom: 5px;*/
flex: 1; /* 均等に幅を分配 */
text-align: center; /* メニュー項目を中央揃え */
}
/* モバイル対応（レスポンシブデザイン） */
@media (max-width: 991px) {
.site-branding, .main-navigation {
width: 100%;
align-items: center; /* モバイルでは中央揃え */
text-align: center; /* モバイルでは中央揃え */
}
.main-navigation ul {
flex-direction: row; /* モバイルでは横並び */
justify-content: center; /* モバイルでは中央揃え */
flex-wrap: wrap;
}
.main-navigation li {
margin: 0 10px 5px !important; /* すべてのマージンを上書き */
flex: 0 0 auto; /* 均等配分を解除 */
}
}
/* レスポンシブナビゲーションのCSS */
/* メニュートグルボタン（ハンバーガーアイコン） */
.menu-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 10px;
font-size: 1.5em;
z-index: 1001;
}
/* ハンバーガーアイコンのスタイル */
.hamburger-icon {
display: block;
position: relative;
width: 30px;
height: 20px;
}
.hamburger-icon span {
position: absolute;
height: 3px;
width: 100%;
background-color: #333;
border-radius: 3px;
left: 0;
transition: all 0.2s ease;
}
.hamburger-icon span:nth-child(1) {
top: 0;
}
.hamburger-icon span:nth-child(2) {
top: 8px;
}
.hamburger-icon span:nth-child(3) {
top: 16px;
}
/* ハンバーガーメニューが開いているときのアイコン */
.menu-open .hamburger-icon span:nth-child(1) {
transform: rotate(45deg);
top: 8px;
}
.menu-open .hamburger-icon span:nth-child(2) {
opacity: 0;
}
.menu-open .hamburger-icon span:nth-child(3) {
transform: rotate(-45deg);
top: 8px;
}
/* モバイルメニュー内のログインボタン */
.mobile-login-button {
display: none; /* PCでは非表示 */
margin: 15px;
text-align: center;
}
.mobile-login-button a {
display: inline-block;
padding: 10px 20px;
background-color: #4CAF50; /* 元のログインボタンの色に合わせて調整 */
color: white;
text-decoration: none;
border-radius: 4px;
}
/* メニューオーバーレイ */
.menu-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 998;
}
.menu-overlay.active {
display: block;
}
/* モバイル表示用のメディアクエリ（画面幅が768px以下） */
@media screen and (max-width: 768px) {
/* ヘッダーレイアウトの調整 */
.site-header .container {
position: relative; /* 位置の基準点 */
}
/* ハンバーガーメニューボタンを表示 */
.menu-toggle {
display: block;
position: absolute;
top: 20px; /* 調整が必要な場合は変更 */
right: -200px; /* 調整が必要な場合は変更 */
}
/* ヘッダー右側の要素を調整 */
.header-right .login-button {
display: none; /* PCのログインボタンを非表示 */
}
/* ナビゲーションメニュー自体を非表示 */
.main-navigation {
position: fixed;
top: 0;
right: -300px; /* 初期状態では画面外に配置 */
width: 280px;
height: 100vh;
background-color: #fff;
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
z-index: 999;
transition: right 0.3s ease;
overflow-y: auto;
padding-top: 60px; /* ハンバーガーボタンの下に表示 */
}
/* メニューが表示されるときのスタイル */
.main-navigation.toggled {
right: 0; /* 画面内に表示 */
}
.main-navigation ul {
display: block !important; /* !importantを追加して他のスタイルを上書き */
flex-direction: column;
width: 100%;
}
.main-navigation li {
width: 100%;
border-bottom: 1px solid #eee;
}
.main-navigation a {
padding: 15px;
}
/* モバイルメニュー内のログインボタンを表示 */
.mobile-login-button {
display: block;
}
/* メニューボタンがbodyに移動された場合の位置調整 */
body > .menu-toggle {
position: fixed;
top: 20px;
right: 20px;
}
}
/* 投稿日・編集者のカスタムスタイル */
.post-meta-info {
display: flex;
align-items: center;
/* margin-bottom: 1rem; */
font-size: 0.7rem;
color: #666;
flex-wrap: wrap; /* モバイルで折り返しできるように */
}
.post-date {
display: flex;
align-items: center;
margin-right: 1.5rem;
margin-bottom: 0.5rem; /* モバイルでの折り返し時の余白 */
}
.post-date:before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
min-width: 18px; /* flexbox内での縮小を防止 */
margin-right: 0.4rem;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: center;
}
.post-author {
display: flex;
align-items: center;
margin-bottom: 0.5rem; /* モバイルでの折り返し時の余白 */
}
.post-author:before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
min-width: 18px; /* flexbox内での縮小を防止 */
margin-right: 0.4rem;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: center;
}
/* WordPressのデフォルトのメタ情報を非表示にする */
.entry-meta {
display: none !important; /* !importantで確実に非表示にする */
}
/* カテゴリータイトルのバッジスタイル */
.cat-links .cat-title {
background-color: #f0f0f0;
padding: 3px 8px;
border-radius: 4px;
margin-right: 5px;
}
/* タグリンク（前後にスペース） */
.tags-links {
display: inline-block;
margin: 0 10px;
}
/* FontAwesomeのタグアイコン */
.tags-links:before {
content: "\f02c";
font-family: "FontAwesome";
margin-right: 5px;
}
.post-navigation .nav-previous,
.post-navigation .nav-next {
width: 48%;
}
.post-navigation a {
display: flex;
align-items: center;
text-decoration: none;
color: #333;
transition: all 0.3s ease;
}
.post-navigation .nav-previous a {
flex-direction: row;
}
.post-navigation .nav-next a {
flex-direction: row-reverse;
text-align: right;
}
.post-navigation .post-thumbnail {
flex: 0 0 80px;
margin: 0 15px;
}
.post-navigation .post-thumbnail img {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 5px;
}
.post-navigation .post-info {
display: flex;
flex-direction: column;
}
.post-navigation .nav-subtitle {
font-size: 12px;
color: #666;
margin-bottom: 5px;
}
/* レスポンシブ対応 */
@media (max-width: 768px) {
.post-navigation .nav-links {
flex-direction: column;
}
.post-navigation .nav-previous,
.post-navigation .nav-next {
width: 100%;
margin-bottom: 15px;
}
}
.post-navigation .nav-previous,
.post-navigation .nav-next {
width: 45%; /* 幅を少し狭くして間隔を空ける */
padding: 0 10px; /* 左右にパディングを追加 */
}
.post-navigation .nav-links {
display: flex;
justify-content: space-between;
}
.post-navigation .nav-previous,
.post-navigation .nav-next {
width: 48%;
}
.post-navigation a {
display: flex;
align-items: center;
text-decoration: none;
color: #333;
transition: all 0.3s ease;
}
.post-navigation .nav-previous a {
flex-direction: row;
}
.post-navigation .nav-next a {
flex-direction: row-reverse;
text-align: right;
}
.post-navigation .post-thumbnail {
flex: 0 0 80px;
margin: 0 15px;
}
.post-navigation .post-thumbnail img {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 5px;
}
.post-navigation .post-info {
display: flex;
flex-direction: column;
}
.post-navigation .nav-subtitle {
font-size: 12px;
color: #666;
margin-bottom: 5px;
}
.post-navigation .nav-title {
font-size: 14px;
}
/* レスポンシブ対応 */
@media (max-width: 768px) {
.post-navigation .nav-links {
flex-direction: column;
}
.post-navigation .nav-previous,
.post-navigation .nav-next {
width: 100%;
margin-bottom: 15px;
}
}
/* 関連記事スタイル */
.vg-related-posts {
margin: 2rem 0;
border-radius: 8px;
}
.vg-related-posts-title {
font-size: 1.5rem;
margin-bottom: 1.5rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid #e0e0e0;
}
/* グリッドレイアウト */
.vg-related-posts-grid {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 2列グリッド */
gap: 1.5rem;
}
/* 各記事アイテム */
.vg-related-post-item {
display: flex;
flex-direction: column;
transition: transform 0.3s ease;
}
.vg-related-post-item:hover {
transform: translateY(-5px);
}
.vg-related-post-link {
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
color: inherit;
}
/* サムネイル */
.vg-related-post-thumbnail {
overflow: hidden;
border-radius: 6px;
margin-bottom: 0.8rem;
}
.vg-related-post-thumbnail img {
width: 100%;
height: auto;
object-fit: cover;
aspect-ratio: 16/9;
transition: transform 0.3s ease;
}
.vg-related-post-item:hover .vg-related-post-thumbnail img {
transform: scale(1.05);
}
/* タイトルと日付 */
.vg-related-post-title {
font-size: 1.1rem;
margin: 0 0 0.5rem 0;
line-height: 1.4;
}
.vg-related-post-date {
font-size: 0.85rem;
color: #666;
}
/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
.vg-related-posts-grid {
/*grid-template-columns: 1fr; モバイル表示は1列に */
gap: 1rem;
}
}
/* フロントページの広告タグ以外 */
.guide-ad {
display: flex;
justify-content: center;
margin-bottom: 20px auto;
width: 100%;
}
/* H1タグ（記事タイトル）のスタイル - フロントページ以外 */
body:not(.home) h1.entry-title {
font-size: 1.6rem;
font-weight: 700;
margin: 1rem 0 1.5rem;
color: #333;
line-height: 1.2;
}
/* レスポンシブ対応 - H1 */
@media (max-width: 767px) {
body:not(.home) h1.entry-title {
font-size: 1.5rem;
margin: 0; /* マージンをリセット */
padding-bottom: 1rem; /* 下部にもパディングを設定 */
}
/* 記事コンテナに上部パディングを追加 */
body:not(.home) .entry-content {
padding-top: 0.5rem;
}
}
/* H2タグの帯デザインとグラデーション - メインコンテンツのみ（フロントページ以外） */
body:not(.home) .site-main h2,
body:not(.home) .site-main .wp-block-heading.is-style-default:where(h2) { /* Gutenbergのheading要素で明示的にh2の場合 */
font-size: 1.3rem;
padding: 0.75rem 1rem;
margin: 2rem 0 1.5rem;
background: linear-gradient(to right, var(--main-color), rgba(59, 130, 246, 0.8)); /* メインカラーから少し薄めに */
color: white;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
font-weight: 700;
line-height: 1.4;
position: relative;
}
/* 左側にアクセントボーダーを追加（オプション） */
body:not(.home) .site-main h2::before,
body:not(.home) .site-main .wp-block-heading.is-style-default:where(h2)::before {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 4px;
background-color: rgba(255, 255, 255, 0.7); /* 白色の半透明ボーダー */
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
/* H3タグのスタイル - グレーの下線（フロントページ以外） */
body:not(.home) .site-main h3,
body:not(.home) .site-main .wp-block-heading:where(h3) {
font-size: 1.2rem;
padding: 0.5rem 0;
margin: 1.8rem 0 1.2rem;
border-bottom: 3px solid #e0e0e0; /* 太めのグレー下線 */
font-weight: 600;
line-height: 1.4;
color: #333;
}
/* アイキャッチ画像のサイズ固定（フロントページ以外） */
body:not(.home) .post-thumbnail {
width: 100%;
height: auto;
max-height: 500px; /* 最大高さを制限 */
overflow: hidden;
margin-bottom: 1.5rem;
border-radius: 6px; /* 角を少し丸く */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 軽い影効果 */
}
/*body:not(.home) .post-thumbnail img {
width: 100%;
height: 300px; 固定高さ
object-fit: cover; アスペクト比を保ちながら領域を埋める
display: block;
}
*/
/* レスポンシブ対応 */
@media (max-width: 767px) {
body:not(.home) .site-main h2,
body:not(.home) .site-main .wp-block-heading.is-style-default:where(h2) {
font-size: 1.3rem;
padding: 0.6rem 0.8rem;
margin: 1.5rem 0 1rem;
}
body:not(.home) .site-main h3,
body:not(.home) .site-main .wp-block-heading:where(h3) {
font-size: 1.1rem;
margin: 1.5rem 0 1rem;
}
body:not(.home) .post-thumbnail img {
/* height: 250px; モバイルでの固定高さ */
}
}
/* 3カラムレイアウト用のスタイル */
.container {
max-width: 1300px;
margin: 0 auto; /* 中央寄せ */
padding: 0 15px; /* 必要に応じて内側の余白を調整 */
}
.site-content-container {
display: flex;
flex-wrap: wrap;
margin: 0 -15px; /* ネガティブマージンでコンテンツ幅調整 */
}
.content-area {
width: 100%;
padding: 0 15px;
}
/* スマホ表示時にパディングを0pxに */
@media (max-width: 768px) {
.content-area {
padding: 0px;
}
}
.site-main {
flex: 0 0 50%; /* メインコンテンツ幅50% */
max-width: 50%;
padding: 0 15px;
}
/* モバイル表示用のスタイル（768px以下） */
@media screen and (max-width: 768px) {
.site-main {
flex: 0 0 100%; /* モバイルでは幅100%に */
max-width: 100%;
padding: 0; /* パディングを削除 */
}
}
.sidebar-left,
.sidebar-right {
flex: 0 0 25%; /* サイドバー幅各25% */
max-width: 25%;
padding: 0 15px;
}
/* モバイル対応（レスポンシブデザイン） */
@media (max-width: 991px) {
.site-content-container {
flex-direction: column;
}
.site-main,
.sidebar-left,
.sidebar-right {
flex: 0 0 100%;
max-width: 100%;
order: 0; /* デフォルト順序 */
}
/* モバイル表示での順序調整 */
.sidebar-left {
order: 2;
}
.site-main {
order: 1;
}
.sidebar-right {
order: 3;
}
}
/* ウィジェットスタイル調整 */
.widget {
margin: 0 0 1.5em;
padding: 1em;
background: #f9f9f9;
border-radius: 5px;
}
.widget-title {
margin-top: 0;
padding-bottom: 0.5em;
border-bottom: 1px solid #e6e6e6;
}
/* カスタムCSS - tailwindcss-animateプラグインの代替 */
/* Accordion Animation */
@keyframes accordion-down {
from {
height: 0;
}
to {
height: var(--radix-accordion-content-height);
}
}
@keyframes accordion-up {
from {
height: var(--radix-accordion-content-height);
}
to {
height: 0;
}
}
.animate-accordion-down {
animation: accordion-down 0.2s ease-out;
}
.animate-accordion-up {
animation: accordion-up 0.2s ease-out;
}
/* トランジション用のユーティリティクラス */
.transition-colors {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-transform {
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.duration-300 {
transition-duration: 300ms;
}
/* その他の必要なクラス */
.group:hover .group-hover\:scale-105 {
transform: scale(1.05);
}
.line-clamp-1 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
/* グラデーション背景 */
.from-blue-50 {
--tw-gradient-from: #eff6ff;
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(239 246 255 / 0));
}
.to-purple-50 {
--tw-gradient-to: #faf5ff;
}
.from-green-50 {
--tw-gradient-from: #f0fdf4;
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(240 253 244 / 0));
}
.to-blue-50 {
--tw-gradient-to: #eff6ff;
}
.from-yellow-50 {
--tw-gradient-from: #fefce8;
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(254 252 232 / 0));
}
.to-orange-50 {
--tw-gradient-to: #fff7ed;
}
/* 投稿ページのコンテンツスタイル */
.single-content-wrapper {
background-color: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 10px 20px 20px 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
margin-bottom: 20px;
}
/* 投稿タイトルのスタイル */
.single-content-wrapper .entry-title {
font-size: 24px;
font-weight: bold;
margin-bottom: 15px;
color: #333333;
}
/* 投稿メタ情報（日付、カテゴリなど）のスタイル */
.single-content-wrapper .entry-meta {
font-size: 14px;
color: #666666;
margin-bottom: 20px;
}
/* 投稿コンテンツのスタイル */
.single-content-wrapper .entry-content {
line-height: 1.6;
}
/* 前後の投稿ナビゲーションのスタイル */
.single-content-wrapper .post-navigation {
margin-top: 10px;
padding-top: 20px;
border-top: 1px solid #e0e0e0;
}
/* コメントエリアのスタイル */
.single-content-wrapper .comments-area {
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #e0e0e0;
}
/* コメントエリア全体 */
.comments-area {
text-align: left;
margin: 30px 0;
}
/* コメントタイトル */
.my-custom-comments-title {
font-size: 20px;
margin-bottom: 20px;
border-bottom: 2px solid #f0f0f0;
padding-bottom: 10px;
}
/* コメントリスト */
.comment-list {
list-style: none !important;
padding: 0;
margin: 0;
counter-reset: none;
}
/* コメントリストの番号を非表示 */
.comment-list li {
list-style-type: none !important;
}
/* 各コメントアイテム */
.custom-comment-item {
border: 1px solid #e0e0e0;
border-radius: 5px;
padding: 15px;
margin-bottom: 15px;
width: 100% !important; /* 幅を固定して小さくならないようにする */
box-sizing: border-box;
}
/* 返信コメント */
.children {
padding-left: 0 !important;
margin-top: 15px;
margin-left: 0 !important;
width: 100% !important;
}
/* 返信コメントのアイテム */
.children .custom-comment-item {
padding-left: 20px;
font-size: 1em !important; /* フォントサイズを維持 */
width: 100% !important;
background-color: #f5f8ff; /* 少し青みがかった背景色 */
}
/* アバターを丸型に表示するためのCSSを追加*/
.avatar {
border-radius: 50%; /* 丸型にする */
}
/* 返信先表示部分 */
.reply-to-info {
margin-bottom: 10px;
padding: 5px 0;
font-size: 14px;
color: #666;
}
.reply-indicator {
display: flex;
align-items: center;
}
.reply-icon {
margin-right: 5px;
color: #6c757d;
}
.reply-text {
font-style: italic;
}
/* コメント作成者情報 */
.comment-author-info {
display: flex;
align-items: center;
margin-bottom: 10px;
}
/* アバター */
.custom-avatar {
margin-right: 10px;
border-radius: 50%;
}
/* 名前と日付のコンテナ */
.comment-author-name-date {
display: flex;
flex-direction: column;
}
/* 作成者名 */
.comment-author {
font-weight: bold;
margin-right: 10px;
}
/* コメント日付 */
.comment-date {
font-size: 12px;
color: #777;
}
/* コメントの内容 */
.comment-content {
margin-left: 60px; /* アバターの横幅+marginの合計 */
}
/* コメントのテキスト */
.comment-content p {
margin-bottom: 10px;
}
/* アクションボタンのコンテナ */
.comment-actions {
display: flex;
justify-content: flex-end;
margin-top: 10px;
}
/* いいねボタン */
.comment-like {
margin-right: 15px;
}
/* 返信ボタン */
.comment-reply a {
display: inline-block;
padding: 3px 10px;
background-color: #f0f0f0;
color: #555;
border-radius: 3px;
text-decoration: none;
font-size: 12px;
}
.comment-reply a:hover {
background-color: #e0e0e0;
}
/* コメント入力フォーム */
.comment-respond {
margin-top: 30px;
}
/* コメントがない場合のメッセージ */
.no-comments-yet {
padding: 15px;
background-color: #f9f9f9;
border: 1px solid #e0e0e0;
border-radius: 5px;
color: #666;
text-align: center;
/* font-style: italic; */
margin: 20px 0;
}
/* コメントエリア全体（コメントがなくても表示） */
.comments-area {
margin-top: 40px;
border-top: 1px solid #f0f0f0;
padding-top: 20px;
}
/* 投稿メタ情報エリアのレイアウト */
.post-meta-info {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
/* 投稿日付 */
.post-date {
margin-right: 15px;
}
/* 投稿者名 */
.post-author {
flex-grow: 1;
}
/* コメント数表示エリア */
.post-comment-count {
margin-left: auto;
padding: 0;
margin-bottom: 0.5rem;
}
/* コメント吹き出しアイコンとカウント */
.comment-bubble {
display: flex;
align-items: center;
padding: 3px 10px;
border: 1px solid #ddd;
border-radius: 15px;
background-color: #fff;
}
/* コメントアイコン */
.comment-icon {
color: #ff4b4b; /* 赤色の吹き出しアイコン */
margin-right: 4px;
}
/* コメント数 */
.comment-number {
font-weight: bold;
color: #444;
}
/* マウスホバー時の効果 */
.comment-bubble:hover {
background-color: #f9f9f9;
cursor: pointer;
}
/* コメント数0の場合 */
.comment-number.empty {
color: #999;
}
/* モバイル表示用のスタイル（768px以下） */
@media screen and (max-width: 768px) {
.single-content-wrapper {
border: none;
border-radius: 0;
padding: 10px;
box-shadow: none;
margin-bottom: 15px;
}
/* タイトルサイズも調整（オプション） */
.single-content-wrapper .entry-title {
font-size: 20px;
margin-bottom: 10px;
}
/* メタ情報も調整（オプション） */
.single-content-wrapper .entry-meta {
margin-bottom: 15px;
}
}
/* サイドバーウィジェットの基本スタイル */
.sidebar-widget {
background-color: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 15px;
margin-bottom: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
/* ウィジェットタイトル */
.widget-title {
text-align: left !important;
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
position: relative;
/* padding-left: 30px; */
}
/* 3本線アイコン（疑似要素） */
.menu-icon:before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.menu-icon:before {
background:
linear-gradient(to right, var(--main-color, #3b82f6) 100%, transparent 0),
linear-gradient(to right, var(--main-color, #3b82f6) 100%, transparent 0),
linear-gradient(to right, var(--main-color, #3b82f6) 100%, transparent 0);
background-size: 100% 2px;
background-repeat: no-repeat;
background-position: 0 0, 0 50%, 0 100%;
}
/* サイドバーメニューリスト */
.menu-list {
list-style: none;
padding: 0;
margin: 0;
}
.menu-list li {
margin-bottom: 5px;
}
.menu-list a {
display: flex;
align-items: center;
padding: 8px 10px;
text-decoration: none;
color: #333;
border-radius: 4px;
transition: background-color 0.2s ease;
}
.menu-list a:hover {
background-color: #f0f7ff;
}
/* 絵文字 */
.emoji {
margin-right: 8px;
font-size: 16px;
}
/* PCセール情報アイコン */
.pc-icon-image-grid {
display: grid;
grid-template-columns: repeat(2, minmax(120px, 1fr)); /* 最小幅を設定して均等に分配 */
gap: 30px 10px; /* 行間20px、列間10px */
width: 100%; /* 親要素いっぱいに広げる */
max-width: 500px; /* グリッド全体の最大幅を制限（調整可能） */
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 20px;
justify-content: center; /* 水平方向の中央揃え */
place-items: center; /* アイテム自体の中央揃え */
}
.grid-item {
text-align: center; /* アイコンとテキストを中央に表示 */
}
.pc-icon-image {
/* アイコン画像を75px四方に固定 */
width: 100px;
height: 100px;
border-radius: 8px; /* 角丸 */
border: 1px solid #ccc; /* グレーの罫線 */
display: block;
margin: 0 auto; /* 画像自体も中央寄せ */
}
.pc-icon-link,
.pc-icon-text-link {
text-decoration: none; /* 必要に応じてリンク下線を消す */
font-size: 12px; /* 文字を小さくする - サイズは適宜調整してください */
color: #333; /* リンク文字色 */
}
.grid-item p {
margin-top: 2px; /* アイコンとテキストの間隔を調整（小さくすると詰まります） */
margin-bottom: 0; /* 下側のマージンも必要に応じて調整 */
}
.pc-icon-link:hover,
.pc-icon-text-link:hover {
opacity: 0.7; /* ホバー時の演出例（任意） */
}
/* VPN・通信情報セクションのスタイル */
.sidebar-box {
background-color: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 15px;
margin-bottom: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.sidebar-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
display: flex;
align-items: center;
}
.icon-globe {
display: inline-block;
width: 20px;
height: 20px;
margin-right: 8px;
position: relative;
}
.icon-globe:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: center;
}
.vpn-info-content {
display: flex;
flex-direction: column;
gap: 12px;
}
.info-card {
padding: 12px;
border: 1px solid #e0e0e0;
border-radius: 6px;
}
/* グラデーション背景 */
.blue-purple-gradient {
background: linear-gradient(to right, #eff6ff, #faf5ff);
}
.green-blue-gradient {
background: linear-gradient(to right, #f0fdf4, #eff6ff);
}
.yellow-orange-gradient {
background: linear-gradient(to right, #fefce8, #fff7ed);
}
.info-card-title {
font-size: 14px;
font-weight: 500;
margin-bottom: 4px;
}
.info-card-text {
font-size: 12px;
color: #666666;
margin-bottom: 8px;
}
.info-card-button {
display: block;
width: 100%;
text-align: center;
padding: 6px 12px;
border: 1px solid #e0e0e0;
border-radius: 4px;
background-color: #ffffff;
font-size: 12px;
color: #333333;
text-decoration: none;
transition: all 0.2s ease;
}
.info-card-button:hover {
background-color: #f5f5f5;
border-color: #d0d0d0;
}
.icon-gamepad {
display: inline-block;
width: 20px;
height: 20px;
margin-right: 8px;
position: relative;
}
.icon-gamepad:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: center;
}
.icon-laptop {
display: inline-block;
width: 20px;
height: 20px;
margin-right: 8px;
position: relative;
}
.icon-laptop:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: center;
}
/* 攻略中のゲームセクションのスタイル */
.sidebar-box {
background-color: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 15px;
margin-bottom: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.sidebar-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
display: flex;
align-items: center;
}
/* メニューアイコン */
.icon-menu {
display: inline-block;
width: 20px;
height: 20px;
margin-right: 8px;
position: relative;
}
.icon-menu:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: center;
}
/* ゲームグリッド */
/* ゲームアイコングリッド */
.game-icon-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
width: 100%;
max-width: 100%;
margin: 10px auto;
justify-content: center;
}
.game-icon-item {
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.game-icon-container {
width: 80px;
height: 80px;
border-radius: 16px !important;
overflow: hidden;
border: 1px solid #f0f0f0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
display: flex;
align-items: center;
justify-content: center;
background-color: #ffffff;
}
.game-icon-image {
width: 100%;
height: 100%;
object-fit: contain;
}
.game-icon-title {
margin-top: 4px;
margin-bottom: 0;
font-size: 11px;
font-weight: 500;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
/* サイドバー内での調整 */
.sidebar-box.game-box {
padding: 10px;
}
.view-all-button {
display: block;
text-align: center;
margin-top: 10px;
text-decoration: none;
font-size: 12px;
}
/* すべて見るボタン */
.view-all-button {
display: block;
width: 100%;
text-align: center;
padding: 8px 12px;
margin-top: 16px;
border: 1px solid #e0e0e0;
border-radius: 4px;
background-color: transparent;
font-size: 14px;
color: #333333;
text-decoration: none;
transition: all 0.2s ease;
}
.view-all-button:hover {
background-color: #f5f5f5;
border-color: #d0d0d0;
}
/* おすすめショップセクションのスタイル */
.shop-box {
background-color: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 15px;
margin-bottom: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
/* ショッピングカートアイコン */
.icon-cart {
display: inline-block;
width: 20px;
height: 20px;
margin-right: 8px;
position: relative;
}
.icon-cart:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: center;
}
/* ショップリスト */
.shop-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.shop-item {
display: block;
text-decoration: none;
color: inherit;
padding: 12px;
border: 1px solid #e0e0e0;
border-radius: 6px;
transition: background-color 0.2s ease;
}
.shop-item:hover {
background-color: #eff6ff; /* 薄い青色 */
}
.shop-name {
font-size: 14px;
font-weight: 500;
margin-top: 4px;
margin-bottom: 4px;
}
.shop-description {
font-size: 12px;
color: #666666;
margin: 0;
}
/* メインコンテンツエリアのスタイル */
.main-content-area {
display: flex;
flex-direction: column;
gap: 24px;
}
/* ニュースセクション */
.news-section {
background-color: #ffffff;
border-radius: 8px;
border: 1px solid #e0e0e0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
overflow: hidden;
}
/* セクションタイトル */
.section-title {
font-size: 18px;
font-weight: bold;
padding: 16px;
border-bottom: 1px solid #e0e0e0;
background: linear-gradient(to right, #eff6ff, #faf5ff);
margin: 0;
}
/* ニュースリスト */
.news-list {
display: flex;
flex-direction: column;
/* divide-y の代わりにborderを使用 */
}
/* ニュース項目 */
.news-item {
border-bottom: 1px solid #e0e0e0;
}
.news-item:last-child {
border-bottom: none;
}
/* ニュースリンク */
.news-link {
display: flex;
gap: 16px;
padding: 16px;
text-decoration: none;
color: inherit;
transition: background-color 0.2s ease;
}
.news-link:hover {
background-color: rgba(239, 246, 255, 0.5);
}
/* ニュース画像コンテナ */
.news-image {
position: relative;
width: 96px;
height: 96px;
flex-shrink: 0;
border-radius: 6px;
overflow: hidden;
}
/* サムネイル画像 */
.news-thumbnail {
width: 100%;
height: 100%;
object-fit: cover;
image-rendering: -webkit-optimize-contrast; /* Chromeでの画像のシャープさを向上 */
backface-visibility: hidden; /* 一部ブラウザでの画像のぼやけを防止 */
transform: translateZ(0); /* 画像のレンダリングを最適化 */
}
/* カテゴリラベル */
.category-label {
position: absolute;
top: 0;
left: 0;
font-size: 12px;
color: white;
padding: 4px 8px;
border-bottom-right-radius: 6px;
}
/* カテゴリごとの色分け */
.category-news {
background-color: #3b82f6; /* 青色 */
}
.category-guide {
background-color: #22c55e; /* 緑色 */
}
.category-feature {
background-color: #a855f7; /* 紫色 */
}
/* ニュースコンテンツ */
.news-content {
flex: 1;
}
/* ニュースタイトル */
.news-title {
font-size: 16px;
font-weight: 500;
margin: 0 0 8px 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
/* ニュース日付 */
.news-date {
font-size: 14px;
color: #666666;
margin: 0;
}
/* ニュースフッター */
.news-footer {
padding: 16px;
border-top: 1px solid #e0e0e0;
}
/* もっと見るボタン */
.more-button {
display: block;
width: 100%;
text-align: center;
padding: 8px 16px;
border: 1px solid #e0e0e0;
border-radius: 4px;
background-color: transparent;
font-size: 14px;
color: #333333;
text-decoration: none;
transition: all 0.2s ease;
}
.more-button:hover {
background-color: #f5f5f5;
border-color: #d0d0d0;
}
/* レスポンシブデザイン */
@media (max-width: 767px) {
.news-link {
flex-direction: column;
gap: 12px;
}
.news-image {
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16:9のアスペクト比 */
position: relative;
}
.news-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
S
/* 注目ゲームリリースセクションのスタイル */
.game-releases-section {
background-color: #ffffff;
border-radius: 8px;
border: 1px solid #e0e0e0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
overflow: hidden;
margin-bottom: 24px;
}
/* セクションタイトル */
.section-title {
font-size: 18px;
font-weight: bold;
padding: 16px;
border-bottom: 1px solid #e0e0e0;
background: linear-gradient(to right, #eff6ff, #faf5ff);
margin: 0;
}
/* ゲームリリースグリッド */
.game-releases-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
padding: 16px;
}
/* ゲームリリースアイテム */
.game-release-item {
text-decoration: none;
color: inherit;
display: block;
}
/* ゲーム画像コンテナ */
.game-image-container {
position: relative;
aspect-ratio: 1/1;
border-radius: 6px;
overflow: hidden;
}
/* ゲーム画像 */
.game-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.game-release-item:hover .game-image {
transform: scale(1.05);
}
/* ゲームタグ */
.game-tag {
position: absolute;
top: 0;
left: 0;
font-size: 12px;
color: white;
padding: 4px 8px;
border-bottom-right-radius: 6px;
}
/* タグの色分け */
.tag-release {
background-color: #22c55e; /* 緑色 */
}
.tag-news {
background-color: #3b82f6; /* 青色 */
}
.tag-update {
background-color: #f97316; /* オレンジ色 */
}
.tag-feature {
background-color: #a855f7; /* 紫色 */
}
/* ゲームタイトル */
.game-title {
margin-top: 8px;
font-size: 14px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* レスポンシブデザイン */
@media (min-width: 640px) {
.game-releases-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 480px) {
.game-releases-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.game-title {
font-size: 12px;
}
}
/* 漫画・エンタメコンテンツセクションのスタイル */
.entertainment-section {
background-color: #ffffff;
border-radius: 8px;
border: 1px solid #e0e0e0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
overflow: hidden;
margin-bottom: 24px;
}
/* セクションタイトル */
.section-title {
font-size: 18px;
font-weight: bold;
padding: 16px;
border-bottom: 1px solid #e0e0e0;
background: linear-gradient(to right, #eff6ff, #faf5ff);
margin: 0;
display: flex;
align-items: center;
}
/* アイコン：本 */
.icon-book {
display: inline-block;
width: 20px;
height: 20px;
margin-right: 8px;
position: relative;
}
.icon-book:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: center;
}
/* タブコンテナ */
.entertainment-tabs-container {
padding: 16px;
}
/* タブナビゲーション */
.tabs-nav {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-bottom: 16px;
}
/* タブボタン */
.tab-btn {
background-color: #f5f5f5;
border: 1px solid #e0e0e0;
border-radius: 4px;
padding: 8px 4px;
font-size: 14px;
cursor: pointer;
transition: all 0.2s ease;
}
.tab-btn.active {
background-color: #3b82f6;
color: white;
border-color: #3b82f6;
}
/* タブコンテンツ */
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
/* サブタイトル */
.content-subtitle {
font-size: 14px;
font-weight: 500;
margin: 24px 0 12px 0;
}
/* 漫画アプリグリッド */
.manga-apps-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
/* 漫画アプリアイテム */
.manga-app-item {
text-decoration: none;
color: inherit;
text-align: center;
}
.manga-app-icon {
aspect-ratio: 1/1;
background: linear-gradient(to bottom right, #eff6ff, #faf5ff);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 4px;
transition: all 0.2s ease;
}
.manga-app-item:hover .manga-app-icon {
background: linear-gradient(to bottom right, #dbeafe, #f3e8ff);
}
.emoji-icon {
font-size: 32px;
}
.app-icon {
width: 80px; /* アイコンサイズを調整 */
height: 80px; /* アイコンサイズを調整 */
object-fit: contain; /* 画像の比率を維持 */
border-radius: 16px; /* 画像自体も少し角丸に */
}
.manga-app-name {
font-size: 12px;
font-weight: 500;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 新刊情報グリッド */
.manga-books-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
/* 新刊アイテム */
.manga-book-item {
border: 1px solid #e0e0e0;
border-radius: 6px;
padding: 8px;
}
.manga-book-cover {
aspect-ratio: 3/4;
height: 200px; /* 固定の高さを設定 */
background-color: #f5f5f5;
border-radius: 4px;
margin-bottom: 8px;
overflow: hidden; /* はみ出した部分を隠す */
position: relative; /* 子要素の位置決めのため */
}
.manga-book-cover img {
width: 100%;
height: auto;
position: absolute;
top: 0; /* 上部に配置 */
left: 0;
object-fit: cover;
object-position: top; /* 上部から表示開始 */
}
.icon-book-small {
display: inline-block;
width: 32px;
height: 32px;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: center;
}
.manga-book-title {
font-size: 12px;
font-weight: 500;
margin: 0 0 4px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.manga-book-date {
font-size: 12px;
color: #666666;
margin: 0;
}
/* アニメグリッド */
.anime-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
/* アニメアイテム */
.anime-item {
display: flex;
gap: 8px;
border: 1px solid #e0e0e0;
border-radius: 6px;
padding: 8px;
text-decoration: none;
color: inherit;
transition: background-color 0.2s ease;
width: 100%; /* アイテムの幅を100%に設定 */
box-sizing: border-box; /* パディングとボーダーを幅に含める */
}
.anime-item:hover {
background-color: #eff6ff;
}
.anime-icon {
width: 48px;
height: 48px;
background-color: #f5f5f5;
border-radius: 6px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden; /* はみ出した画像を隠す */
position: relative; /* 追加: 子要素の配置のため */
}
.anime-icon img {
position: absolute; /* 追加: 中央配置のため */
top: 50%; /* 追加: 垂直方向の中央 */
left: 50%; /* 追加: 水平方向の中央 */
transform: translate(-50%, -50%); /* 追加: 中央揃え補正 */
min-width: 100%; /* 追加: 幅が小さい画像も100%以上に */
min-height: 100%; /* 追加: 高さが小さい画像も100%以上に */
width: auto; /* 変更: 元の比率を維持 */
height: auto; /* 変更: 元の比率を維持 */
object-fit: cover; /* 変更: 画像がコンテナを覆うように */
}
.icon-tv {
display: inline-block;
width: 24px;
height: 24px;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: center;
}
.anime-info {
flex: 1;
min-width: 0; /* Flexboxでの収縮を適切に行うために必要 */
}
.anime-title {
font-size: 12px;
font-weight: 500;
margin: 0 0 4px 0;
white-space: normal; /* 複数行に折り返し */
overflow-wrap: break-word; /* 長い単語も折り返し */
word-break: break-word; /* 必要に応じて単語の途中でも折り返し */
display: -webkit-box;
-webkit-line-clamp: 2; /* 最大2行まで表示 */
-webkit-box-orient: vertical;
overflow: hidden;
}
.anime-schedule {
font-size: 12px;
color: #666666;
margin: 0;
}
/* 映画リスト */
.movie-list {
display: flex;
flex-direction: column;
gap: 12px;
}
/* 映画アイテム */
.movie-item {
display: flex;
gap: 12px;
border: 1px solid #e0e0e0;
border-radius: 6px;
padding: 8px;
text-decoration: none;
color: inherit;
transition: background-color 0.2s ease;
align-items: center; /* アイコンと情報を垂直中央揃え */
}
.movie-item:hover {
background-color: #eff6ff;
}
.movie-icon {
width: 64px;
height: 64px;
background-color: #f5f5f5;
border-radius: 6px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.icon-film {
display: inline-block;
width: 32px;
height: 32px;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: center;
}
.movie-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 3px; /* 要素間の隙間を狭く設定 */
}
.movie-type {
display: inline-block;
font-size: 12px;
padding: 1px 8px; /* 上下パディングを減らす */
border-radius: 16px;
/* background-color: #f0f0f0; 背景色が抜けていたので追加 */
margin: 5px; /* マージンをリセット */
}
.movie-title {
font-size: 14px;
font-weight: 500;
margin: 5px; /* マージンをリセット */
line-height: 1.3; /* 行間を詰める */
}
.movie-date {
font-size: 12px;
color: #666666;
margin: 5px; /* マージンをリセット */
line-height: 1.2; /* 行間を詰める */
}
/* 注目コンテンツセクションのスタイル */
.featured-content-box {
background-color: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 15px;
margin-bottom: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
/* 注目コンテンツリスト */
.featured-content-list {
display: flex;
flex-direction: column;
gap: 16px;
}
/* 注目コンテンツアイテム */
.featured-content-item {
display: flex;
gap: 12px;
text-decoration: none;
color: inherit;
}
/* 注目コンテンツ画像コンテナ */
.featured-image-container {
width: 80px;
height: 80px;
flex-shrink: 0;
border-radius: 6px;
overflow: hidden;
position: relative;
}
/* 注目コンテンツ画像 */
.featured-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.featured-content-item:hover .featured-image {
transform: scale(1.05);
}
/* 注目コンテンツタイトル */
.featured-title {
font-size: 14px;
font-weight: 500;
margin: 0;
flex: 1;
}
/* アイコンのスタイルは既存のものを使用（icon-menu） */
/* 求人バナーのスタイル */
.job-banner {
background: linear-gradient(to right, #60a5fa, #a855f7);
border-radius: 8px;
padding: 16px;
color: white;
margin-bottom: 20px;
}
/* バナータイトル */
.job-banner-title {
font-size: 20px;
font-weight: bold;
margin-bottom: 16px;
}
/* 特徴リスト */
.job-features {
list-style: none;
padding: 0;
margin: 0 0 16px 0;
}
/* 特徴アイテム */
.job-feature-item {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
/* チェックマーク */
.check-mark {
color: #fde047; /* 黄色 */
}
/* バナーボタン */
.job-banner-button {
display: block;
width: 100%;
text-align: center;
padding: 8px 16px;
background-color: white;
color: #3b82f6 !important; /* 青色 */
border-radius: 4px;
font-weight: 700;
text-decoration: none;
transition: background-color 0.2s ease;
}
.job-banner-button:hover {
background-color: rgba(255, 255, 255, 0.9);
}
/* アーカイブリストのスタイル */
.archive-list {
margin: 30px 0;
}
.archive-item {
margin-bottom: 30px;
padding-bottom: 30px;
border-bottom: 1px solid #eaeaea;
}
.archive-item:last-child {
border-bottom: none;
}
.archive-item-inner {
display: flex;
flex-wrap: wrap;
}
.archive-thumbnail {
width: 30%;
margin-right: 4%;
}
.archive-thumbnail img.custom-thumbnail {
width: 300px;
height: 100px;
object-fit: cover;
border-radius: 4px;
}
/* レスポンシブ対応 */
/* アーカイブページのレスポンシブデザイン */
@media screen and (max-width: 768px) {
.archive-thumbnail {
width: 100%;
margin-right: 0;
margin-bottom: 15px;
text-align: center;
display: flex;
justify-content: center;
}
.archive-thumbnail img.custom-thumbnail {
width: 300px; /* スマホ表示時のサムネイルサイズ - 必要に応じて変更してください */
height: 200px; /* スマホ表示時のサムネイルサイズ - 必要に応じて変更してください */
}
.archive-content {
width: 100%;
}
}
.archive-content {
width: 66%;
}
/* アーカイブページの見出しスタイルをリセット */
.archive-list .archive-item .entry-title,
body:not(.home) .site-main .archive-list .archive-item h2.entry-title,
body:not(.home) .site-main .archive-list .archive-item .wp-block-heading.is-style-default:where(h2.entry-title) {
margin-top: 0;
margin-bottom: 15px;
font-size: 1.05rem !important;
font-weight: 600 !important;
background: none !important;
border: none !important;
padding: 0 !important;
box-shadow: none !important;
text-shadow: none !important;
border-radius: 0 !important;
line-height: 1.4 !important;
text-transform: none !important;
letter-spacing: normal !important;
}
.archive-list .archive-item .entry-title a,
body:not(.home) .site-main .archive-list .archive-item h2.entry-title a,
body:not(.home) .site-main .archive-list .archive-item .wp-block-heading.is-style-default:where(h2.entry-title) a {
color: #333 !important;
text-decoration: none !important;
transition: color 0.3s;
border: none !important;
background: none !important;
padding: 0 !important;
box-shadow: none !important;
text-shadow: none !important;
}
.archive-list .archive-item .entry-title a:hover,
body:not(.home) .site-main .archive-list .archive-item h2.entry-title a:hover,
body:not(.home) .site-main .archive-list .archive-item .wp-block-heading.is-style-default:where(h2.entry-title) a:hover {
color: #0066cc !important;
}
/* 抜粋 */
.entry-summary {
margin-bottom: 15px;
color: #666;
line-height: 1.6;
}
/* メタ情報（新しいクラス名） */
.archive-post-meta {
font-size: 0.85rem;
margin-top: 10px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.archive-post-meta span.archive-post-date,
.archive-post-meta span.archive-post-updated,
.archive-post-meta span.archive-post-author {
display: inline-flex;
align-items: center;
background-color: #f5f5f5;
border-radius: 4px;
padding: 3px 8px;
margin: 0;
line-height: 1.4;
font-size: 0.75rem;
color: #555;
}
.archive-post-meta .meta-label {
background-color: #e0e0e0;
color: #333;
font-size: 0.7rem;
font-weight: 600;
border-radius: 3px;
padding: 2px 5px;
margin-right: 6px;
}
/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
.archive-thumbnail {
width: 100%;
margin-right: 0;
margin-bottom: 15px;
}
.archive-content {
width: 100%;
}
}
/* ページヘッダー */
.page-header {
margin-bottom: 30px;
padding-bottom: 15px;
border-bottom: 2px solid #eaeaea;
}
.page-title {
margin-top: 0;
color: #333;
}
.archive-description {
margin-top: 10px;
color: #666;
}
/* ページヘッダー */
.page-header {
margin-bottom: 30px;
padding-bottom: 15px;
border-bottom: 2px solid #eaeaea;
}
.page-title {
margin-top: 0;
color: #333;
}
.archive-description {
margin-top: 10px;
color: #666;
}
/* フッターのスタイル */
.site-footer {
background-color: #f9fafb;
border-top: 1px solid #e5e7eb;
margin-top: 3rem;
}
.site-footer .container {
padding-top: 2rem;
padding-bottom: 2rem;
}
.footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media (min-width: 768px) {
.footer-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.footer-column {
display: flex;
flex-direction: column;
}
.footer-logo {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1rem;
}
/* フッターロゴのサイズ調整 */
.site-footer .custom-logo {
height: 40px !important; /* サイズを希望に合わせて調整 */
width: auto !important;
max-width: 100% !important;
}
/* 元のスタイルも一応残しておく */
.footer-logo img {
height: 60px;
width: auto;
}
.footer-description {
font-size: 0.875rem;
color: #6b7280;
}
.footer-heading {
font-weight: 700;
margin-bottom: 1rem;
}
.footer-links {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.footer-link {
font-size: 0.875rem;
color: inherit;
text-decoration: none;
transition: color 0.2s ease;
}
.footer-link:hover {
color: #3b82f6;
}
.footer-copyright {
border-top: 1px solid #e5e7eb;
margin-top: 2rem;
padding-top: 2rem;
text-align: center;
}
.copyright-text {
font-size: 0.875rem;
color: #6b7280;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* 4月2日はここまで */
/* ヘッダーの件はここから */
/* ヘッダーフレックスコンテナ - ロゴと検索/ログインの配置用 */
.header-flex-container {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
/* 右側の要素（検索ボックスとログインボタン）*/
.header-right {
display: flex;
align-items: center;
gap: 15px;
}
/* 検索ボックス */
.header-search form {
position: relative;
display: flex;
align-items: center;
}
.header-search input[type="search"] {
width: 200px;
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 20px;
font-size: 14px;
}
.header-search .search-icon {
position: absolute;
right: 10px;
background: none;
border: none;
padding: 0;
cursor: pointer;
color: #666;
}
/* ログインボタン */
.login-button {
display: inline-flex;
align-items: center;
justify-content: center;
height: 36px;
padding: 0 16px;
background-color: #3b82f6;
color: white !important; /* 強制的に白色に */
text-decoration: none;
border-radius: 4px;
font-size: 14px;
font-weight: 500;
white-space: nowrap; /* テキストの折り返しを防止 */
transition: background-color 0.2s;
}
.login-button:hover {
background-color: #2563eb;
color: white !important;
text-decoration: none;
}
/* レスポンシブデザイン */
@media (max-width: 768px) {
.header-search {
display: none;
}
}
/* サイトナビゲーションのスタイル調整 */
.main-navigation {
border: 1px solid #e0e0e0; /* グレー罫線 */
border-radius: 8px; /* 角丸 */
margin-bottom: 6px;
/* background-color: #f9f9f9; 薄いグレー背景（任意） */
max-width: 1250px; /* カラムの合計幅と同じ */
margin-left: auto;
margin-right: auto;
}
.main-navigation ul {
display: flex;
margin: 0;
padding: 0;
list-style: none;
}
.main-navigation li {
position: relative;
flex: 1;
text-align: center;
border-right: 1px solid #e0e0e0; /* メニュー間の仕切り線 */
}
.main-navigation li:last-child {
border-right: none; /* 最後のメニュー項目の右側の線を削除 */
}
.main-navigation a {
display: block;
padding: 6px 6px;
text-decoration: none;
color: #333;
transition: background-color 0.3s;
}
.main-navigation a:hover {
background-color: #f0f0f0; /* ホバー時の背景色 */
}
/* モバイル対応 */
@media (max-width: 768px) {
.main-navigation ul {
flex-direction: column;
}
.main-navigation li {
border-right: none;
border-bottom: 1px solid #e0e0e0;
}
.main-navigation li:last-child {
border-bottom: none;
}
}
/* カテゴリー別テンプレート用の共通スタイル */
.custom-category-container {
max-width: 1300px;
margin: 0 auto;
padding: 0 15px;
}
/* スマホ表示時にパディングを削除 */
@media (max-width: 768px) {
.custom-category-container {
padding: 0;
}
}
.category-content-container {
display: flex;
flex-wrap: nowrap;
/* gap: 30px; */
margin: 0 auto;
}
.category-main {
flex: 0 0 70%;
max-width: 70%;
}
.category-sidebar-container {
flex: 0 0 30%;
max-width: 30%;
}
.category-sidebar {
width: 100%;
}
/* コミックカテゴリー用のスタイル */
.comic-content-container {
max-width: 1200px;
/* background-color: rgba(59, 130, 246, 0.03); 薄い青色の背景 */
padding: 20px;
border-radius: 8px;
}
/* スマホ表示時にパディングを0pxに */
@media (max-width: 768px) {
.comic-content-container {
padding: 0px;
}
}
.comic-sidebar {
/* background-color: #f8fafc; */
/* border-left: 3px solid #3b82f6; */
/* padding: 15px; */
border-radius: 4px;
}
/* 順序設定クラス */
.order-1 {
order: 1;
}
.order-2 {
order: 2;
}
/* レスポンシブデザイン */
@media (max-width: 991px) {
.category-content-container {
flex-direction: column;
}
.category-main,
.category-sidebar-container {
flex: 0 0 100%;
max-width: 100%;
padding: 0;
}
body.single-post.category-comic .category-sidebar-container {
flex: 0 0 100% !important;
max-width: 100% !important;
padding: 0;
}
/* スマホ表示での順序を維持 */
.order-1 {
order: 1;
}
.order-2 {
order: 2;
}
.comic-sidebar {
border-left: none;
border-top: 3px solid #3b82f6;
margin-top: 20px;
}
}
/* ================================
漫画カテゴリー用カスタムスタイル
================================ */
/* ▼ 大枠コンテナ：幅固定＆中央寄せ */
body.single-post.category-comic .custom-category-container {
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
/* ▼ PC時は メイン+サイドバー の2カラムレイアウト */
body.single-post.category-comic .category-content-container {
display: flex !important; /* Flex化で横並び */
flex-wrap: wrap !important; /* はみ出し時の折返しを許可 */
gap: 10px !important;
}
body.single-post.category-comic .category-main {
flex: 0 0 70% !important;
max-width: 70% !important;
padding-right: 15px;
box-sizing: border-box;
}
body.single-post.category-comic .category-sidebar-container {
flex: 0 0 30% !important;
max-width: 30% !important;
padding-left: 15px;
box-sizing: border-box;
}
/* サイドバー */
.category-sidebar-container {
flex: 0 0 30%;
max-width: 30%;
padding: 0 15px;
box-sizing: border-box;
}
/* ---- 以下、コンテンツデザイン用のカスタムスタイル ---- */
/* 見出し */
.manga-h1 {
font-size: 28px;
/* padding-top: 10px; */
/* color: #4a6da7; */
margin-bottom: 20px;
line-height: 1.4; /* デフォルトの行間 */
}
/* スマホ表示時の調整 */
@media (max-width: 768px) {
.manga-h1 {
font-size: 22px; /* フォントサイズを小さく */
line-height: 1.2; /* 行間を詰める */
margin-bottom: 15px; /* 下マージンも調整 */
}
}
.manga-h2 {
font-size: 24px;
margin: 40px 0 20px;
padding-bottom: 10px;
border-bottom: 3px solid #4a6da7;
clear: both;
}
.manga-h3 {
font-size: 20px;
margin: 30px 0 15px;
padding-left: 10px;
border-left: 5px solid #4a6da7;
}
/* マンガコンテナ */
.manga-container {
width: 100%;
max-width: 100%;
padding: 0;
margin: 0 auto;
box-sizing: border-box;
background: #fff;
}
/* メインヘッダー (カバー画像＋基本情報) */
.manga-header {
display: flex;
flex-wrap: wrap;
gap: 30px;
margin: 30px 0;
}
/* 表紙画像コンテナ - サイズ調整 */
.manga-cover {
flex: 0 0 200px; /* 250pxから200pxに縮小 */
}
/* 表紙画像 */
.manga-cover-img {
width: 100%;
height: auto;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
border-radius: 6px; /* 角を少し丸くして見た目を改善（オプション） */
}
/* 漫画情報 */
.manga-info {
flex: 1;
min-width: 300px;
}
/* スマホ表示時の調整 */
@media (max-width: 768px) {
.manga-header {
flex-direction: column;
align-items: center; /* 中央揃え */
}
.manga-cover {
flex: 0 0 auto;
width: 180px; /* スマホではさらに小さく */
margin-bottom: 20px;
text-align: center;
}
.manga-cover-img {
margin: 0 auto; /* 中央揃え補助 */
}
.manga-info {
width: 100%;
}
}
/* 段落・リスト */
.manga-p {
margin-bottom: 10px;
/* font-weight: 600; */
}
/* 作品情報テーブル */
.manga-info-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
.manga-info-table th,
.manga-info-table td {
padding: 12px 15px;
border: 1px solid #eaeaea;
}
.manga-info-th {
background-color: #f8f9fa;
width: 120px;
text-align: left;
}
.manga-info-td {
background-color: #fff;
}
/* スター評価 */
.star-yellow {
color: #ffa500;
font-size: 1.2em;
}
/* 既存のCSSはそのままに、特定のセクションだけに適用されるCSSを追加 */
/* おすすめ電子書籍サイト用 - 完全に独立したスタイル */
/* 全体ラッパー */
.ebook-wrapper {
background-color: #f8f9fa;
padding: 30px;
border-radius: 10px;
margin: 40px 0;
width: 100%;
box-sizing: border-box;
}
/* コンテナ - テーブルレイアウトを使用して確実に2カラムにする */
.ebook-container {
display: table;
width: 100%;
table-layout: fixed;
}
/* 左カラム */
.ebook-left {
display: table-cell;
width: 30%;
vertical-align: top;
padding-right: 20px;
}
/* 画像を角丸に */
.ebook-left img {
border-radius: 10px; /* 角丸の大きさ */
overflow: hidden;
}
/* 右カラム */
.ebook-right {
display: table-cell;
width: 70%;
vertical-align: top;
}
/* タイトル - H3のリセット */
.ebook-title {
margin: 0 0 0 0 !important;
padding: 0;
font-size: 1.5em;
font-weight: bold;
background: none;
border: none;
color: inherit;
line-height: 1.4;
/* H3のリセット */
border-left: none;
}
/* 3つのポイントリスト */
.three-points {
list-style: none;
margin: 16px 0;
padding: 12px;
border: 1px solid #ddd;
background-color: #fff !important; /* 背景白 */
border-radius: 6px;
}
.three-points li {
margin-bottom: 8px;
font-weight: bold;
position: relative;
padding-left: 2em;
}
/* ボタン */
.manga-btn {
display: inline-block;
padding: 10px 25px;
background-color: #ff6b6b;
color: #fff !important; /* フォント白を強制 */
text-decoration: none;
border-radius: 5px;
font-weight: bold;
text-align: center;
transition: background-color 0.3s;
}
.manga-btn:hover {
background-color: #e55c5c;
color: #fff !important;
text-decoration: none;
}
/* スマホ対応 */
@media (max-width: 768px) {
.ebook-container {
display: block;
}
.ebook-left, .ebook-right {
display: block;
width: 100%;
padding: 0;
}
.ebook-left {
margin-bottom: 20px;
text-align: center;
}
.ebook-left img {
max-width: 150px;
}
}
/* 各話あらすじセクション全体 */
.manga-section {
margin-bottom: 30px;
}
/* エピソードリスト */
.episode-list {
display: flex;
flex-direction: column;
gap: 10px;
}
/* エピソード */
.episode {
margin-bottom: 10px;
padding: 25px;
border: 1px solid #e0e0e0;
border-radius: 12px;
background-color: #fff;
}
/* エピソードタイトル */
.episode-title {
font-size: 1.3em;
font-weight: bold;
margin-bottom: 15px;
color: #333;
padding-bottom: 8px;
border-bottom: 1px solid #eee;
}
/* チェックボックス全体 */
.check-box {
background-color: #f5f5f5;
border: 1px solid #ddd;
border-radius: 8px;
padding: 15px;
margin-top: 15px;
text-align: center;
}
/* チェックタイトル */
.check-title {
font-weight: bold;
margin-bottom: 12px;
font-size: 1.05em;
color: #555;
}
/* チェックボタングリッド */
.check-grid {
display: grid;
grid-template-columns: repeat(4, 1fr); /* PCでは4つ横並び */
gap: 10px;
max-width: 800px;
margin: 0 auto;
}
/* チェックボタン */
.check-btn {
display: block;
padding: 10px 5px;
background-color: #fff;
color: #333;
text-decoration: none;
border: 1px solid #ddd;
border-radius: 6px;
text-align: center;
transition: all 0.3s ease;
}
.check-btn:hover {
background-color: #f5f5f5;
border-color: #ccc;
color: #333;
text-decoration: none;
}
/* スマホ対応 */
@media (max-width: 768px) {
.episode {
padding: 15px;
}
.check-grid {
grid-template-columns: repeat(2, 1fr); /* スマホでは2×2 */
}
.episode-title {
font-size: 1.2em;
}
}
/* 漫画比較表のスタイル */
.manga-list-comparizon-wrapper {
width: 100%;
overflow-x: auto;
margin: 30px 0;
}
.manga-list-comparizon {
width: 100%;
border-collapse: collapse;
border: 1px solid #e0e0e0;
background-color: #fff;
}
/* テーブルヘッダー */
.manga-list-comparizon thead {
background-color: #f0e6ff;
}
.manga-list-comparizon-th {
padding: 12px 10px;
text-align: center;
border: 1px solid #e0e0e0;
font-weight: bold;
color: #333;
}
/* 偶数行の背景色 */
.manga-list-comparizon-row:nth-child(even) {
background-color: #fafafa;
}
/* テーブルセル共通 */
.manga-list-comparizon-td {
padding: 15px 10px;
text-align: center;
border: 1px solid #e0e0e0;
vertical-align: middle;
}
/* サービス名のセル */
.manga-list-comparizon-service {
width: 25%;
}
/* サービスロゴ */
.manga-list-comparizon-logo {
width: 80px;
height: auto;
margin-bottom: 0;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 3px;
}
/* サービス名 */
.manga-list-comparizon-name {
display: block;
font-size: 0.9em;
margin-top: 2px;
}
.manga-list-comparizon-name a {
color: #333;
text-decoration: none;
}
.manga-list-comparizon-name a:hover {
text-decoration: underline;
color: #4a6da7;
}
/* 無料配信セル */
.manga-list-comparizon-free {
width: 35%;
text-align: center;
}
/* ハイライトテキスト */
.manga-list-comparizon-highlight {
display: block;
color: #e53935;
font-weight: bold;
font-size: 0.95em;
margin-bottom: 5px;
}
/* 補足テキスト */
.manga-list-comparizon-note {
display: block;
font-size: 0.85em;
margin-bottom: 5px;
}
/* 星評価 */
.manga-list-comparizon-stars {
display: inline-block;
position: relative;
font-size: 16px;
width: 5em;
height: 1em;
margin: 0 auto;
}
.manga-list-comparizon-stars::before {
content: "★★★★★";
position: absolute;
color: #ddd;
left: 0;
width: 100%;
}
.manga-list-comparizon-stars::after {
content: "★★★★★";
position: absolute;
color: #ffcc00;
left: 0;
overflow: hidden;
white-space: nowrap;
}
.manga-list-comparizon-stars-5::after {
width: 100%;
}
.manga-list-comparizon-stars-4::after {
width: 80%;
}
.manga-list-comparizon-stars-3::after {
width: 60%;
}
.manga-list-comparizon-stars-3::after {
width: 60%;
}
/* キャンペーンセル */
.manga-list-comparizon-campaign {
width: 30%;
}
/* 割引表示 */
.manga-list-comparizon-discount {
display: block;
font-weight: bold;
color: #e53935;
margin-bottom: 10px;
}
/* ボタン */
.manga-list-comparizon-btn {
display: inline-block;
padding: 8px 15px;
background-color: #e53935;
color: white !important;
text-decoration: none;
border-radius: 4px;
font-size: 0.85em;
font-weight: 700;
transition: background-color 0.3s;
}
.manga-list-comparizon-btn:hover {
background-color: #ff8989;
color: white;
text-decoration: none;
}
/* スマホ対応 */
@media (max-width: 768px) {
.manga-list-comparizon {
font-size: 0.9em;
}
.manga-list-comparizon-th,
.manga-list-comparizon-td {
padding: 10px 5px;
}
.manga-list-comparizon-logo {
width: 60px;
}
.manga-list-comparizon-highlight,
.manga-list-comparizon-discount {
font-size: 0.9em;
}
.manga-list-comparizon-note {
font-size: 0.8em;
}
.manga-list-comparizon-btn {
padding: 6px 10px;
font-size: 0.8em;
}
}
/* マンガサービス詳細セクション */
.manga-service-detail {
border: 1px solid #e0e0e0;
border-radius: 12px;
padding: 25px;
margin: 30px auto;
background-color: #fff;
max-width: 900px;
text-align: center;
}
/* サービス見出し */
.manga-service-h3 {
font-size: 24px;
margin: 0 0 20px 0 !important;
padding: 0 !important;
color: #333;
text-align: left;
}
/* 画像コンテナ */
.manga-service-detail-img {
margin: 0 auto 20px;
max-width: 500px;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 5px;
background-color: #fff;
overflow: hidden;
text-align: center;
}
/* サービス画像 */
.manga-service-img {
width: 100%;
height: auto;
display: block;
}
/* 詳細情報 */
.manga-service-detail-info {
text-align: left;
max-width: 800px;
margin: 0 auto;
}
/* ボタン */
.manga-service-btn {
display: block;
padding: 12px 30px;
background-color: #e53935;
color: #fff !important;
font-weight: bold;
text-decoration: none;
border-radius: 6px;
margin: 20px auto 10px;
text-align: center;
max-width: 250px;
transition: background-color 0.3s;
}
.manga-service-btn:hover {
background-color: #ff8989;
color: #fff !important;
text-decoration: none;
}
/* スマホ対応 */
@media (max-width: 768px) {
.manga-service-detail {
padding: 15px;
}
.manga-service-h3 {
font-size: 20px;
}
.manga-service-detail-img {
max-width: 100%;
}
}
/* 注意喚起ボックス */
.warning-box {
border: 2px solid #ff6b6b;
border-radius: 12px;
padding: 25px;
margin: 30px 0;
background-color: #fff5f5;
display: flex;
flex-wrap: nowrap;
align-items: flex-start;
}
/* 警告アイコン部分 */
.warning-icon {
width: 30%;
padding-right: 20px;
flex: 0 0 30%;
}
.warning-icon img {
width: 100%;
height: auto;
max-width: 200px;
display: block;
}
/* 警告テキスト部分 */
.warning-text {
width: 70%;
flex: 0 0 70%;
}
/* 警告見出し */
.manga-warning-h3 {
font-size: 20px;
margin: 0 0 15px 0 !important;
padding: 0 0 10px 0 !important;
border-bottom: 1px solid #ccc;
border-left: none;
background: none;
font-weight: bold;
color: #333;
}
/* スマホ対応 */
@media (max-width: 768px) {
.warning-box {
flex-direction: column;
padding: 15px;
}
.warning-icon {
width: 100%;
flex: 0 0 100%;
padding-right: 0;
padding-bottom: 15px;
text-align: center;
}
.warning-icon img {
margin: 0 auto;
}
.warning-text {
width: 100%;
flex: 0 0 100%;
}
.manga-warning-h3 {
font-size: 18px;
}
}
/* 参考バッジスタイル */
.reference-item {
display: flex;
align-items: center;
font-size: 0.85em;
margin: 5px 0;
}
.reference-badge {
display: inline-block;
background-color: #ff9800;
color: white;
padding: 2px 8px;
border-radius: 4px;
font-weight: bold;
margin-right: 8px;
font-size: 0.85em;
}
.reference-link {
color: #666;
text-decoration: none;
}
.reference-link:hover {
text-decoration: underline;
color: #333;
}
/* FAQ セクション */
.manga-faq-container {
margin: 30px 0;
}
.manga-faq-item {
margin-bottom: 25px;
border-bottom: 1px solid #eee;
padding-bottom: 20px;
}
.manga-faq-item:last-child {
border-bottom: none;
}
/* 質問スタイル */
.manga-faq-question {
position: relative;
padding-left: 45px !important;
margin: 0 0 15px 0;
font-size: 18px;
font-weight: bold;
color: #333;
line-height: 1.4;
border: none;
background: none;
display: flex;
align-items: center;
}
.manga-faq-question::before {
content: "Q";
position: absolute;
left: 0;
top: 0;
width: 30px;
height: 30px;
background-color: #4a6da7;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 16px;
}
/* 回答スタイル */
.manga-faq-answer {
position: relative;
padding-left: 45px;
margin-top: 10px;
}
.manga-faq-answer::before {
content: "A";
position: absolute;
left: 0;
top: 0;
width: 30px;
height: 30px;
background-color: #ff6b6b;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 16px;
}
.manga-faq-answer p {
margin: 0;
color: #555;
}
/* スマホ対応 */
@media (max-width: 768px) {
.manga-faq-question {
font-size: 16px;
padding-left: 40px;
}
.manga-faq-question::before,
.manga-faq-answer::before {
width: 25px;
height: 25px;
font-size: 14px;
}
.manga-faq-answer {
padding-left: 40px;
}
}
/* 関連作品セクション */
.related-manga-scroll {
white-space: nowrap;
overflow-x: auto;
padding: 10px 0;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}
/* 横スクロールバーのカスタマイズ */
.related-manga-scroll::-webkit-scrollbar {
height: 8px;
}
.related-manga-scroll::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
.related-manga-scroll::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 4px;
}
.related-manga-scroll::-webkit-scrollbar-thumb:hover {
background: #999;
}
/* 関連作品アイテム */
.related-item {
display: inline-block;
width: 150px;
margin-right: 15px;
text-align: center;
vertical-align: top;
}
/* 関連作品カバー画像 */
.related-item .manga-cover-img {
width: 150px;
height: 225px;
object-fit: cover;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
border-radius: 4px;
transition: transform 0.2s;
}
.related-item a:hover .manga-cover-img {
transform: translateY(-3px);
}
/* 関連作品タイトル */
.manga-related-p {
margin-top: 8px;
margin-bottom: 5px;
width: 100%;
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 1.4;
height: 2.8em;
font-size: 0.9em;
font-weight: 600;
}
.manga-related-p a {
color: #333;
text-decoration: none;
}
.manga-related-p a:hover {
color: #4a6da7;
text-decoration: underline;
}
/* 星評価 */
.manga-star {
margin: 5px 0;
font-size: 0.9em;
}
/* スマホ対応 */
@media (max-width: 768px) {
.related-item {
width: 120px;
margin-right: 12px;
}
.related-item .manga-cover-img {
width: 120px;
height: 180px;
}
.manga-related-p {
font-size: 0.85em;
}
}
/* featured-service: おすすめ電子書籍サイト */
.featured-service {
background-color: #f8f9fa;
padding: 30px;
border-radius: 10px;
margin: 40px 0;
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: center;
}
/* 汎用ボタン */
.manga-btn {
display: inline-block;
padding: 10px 25px;
background-color: #e53935;
color: #fff;
text-decoration: none;
border-radius: 5px;
font-weight: bold;
text-align: center;
transition: background-color 0.3s;
}
.manga-btn:hover {
background-color: #e55c5c;
color: #fff;
text-decoration: none;
}
/* 3つのポイント全体の囲み */
.three-points {
list-style: none;
margin: 16px 0;
padding: 12px;
border: 1px solid #ddd;
background: #f9f9f9;
border-radius: 6px;
}
.three-points li {
margin-bottom: 8px;
font-weight: bold;
position: relative;
padding-left: 2em;
}
/* チェック付き丸のCSS */
.dli-check-circle {
display: inline-block;
vertical-align: middle;
color: #27ae60;
line-height: 1;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 1em;
height: 1em;
border: 0.1em solid currentColor;
border-radius: 50%;
box-sizing: content-box;
}
.dli-check-circle > span {
width: 0.58em;
height: 0.261em;
border: 0.1em solid currentColor;
border-top: 0;
border-right: 0;
box-sizing: border-box;
transform: translateY(-25%) rotate(-45deg);
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
margin: auto;
}
body.single-post.category-comic .category-content-container {
display: flex !important;
flex-wrap: wrap !important;
}
/* --- single-category‑illegal 用 独自CSS --- */
body.single-post.category‑illegal .site-content-container {
display: flex !important;
flex-wrap: nowrap !important; /* PCでは横並びに */
width: 100%;
box-sizing: border-box;
}
/* メインコンテンツ（70%） */
body.single-post.category‑illegal main.site‑main {
flex: 0 0 70% !important;
max-width: 70% !important;
box-sizing: border-box;
padding-right: 15px !important;
}
/* サイドバー（30%） – ここでは sidebar‑illegal.php の出力が