@charset "utf-8";
/*
Theme Name: AAA Starter 2026
Theme URI: https://afi-support.net/
Author: afi-support.net
Description: スターターテーマ（デザイン画像・サイトカラー・カテゴリーカラー管理付き）
Version: 1.8.7
Text Domain: aaa-starter-2026
*/

@media screen and (max-width: 768px) {
.responsive-text {
font-size: 120% !important;
}
}
/* html ルート背景: body が届かない 1px の隙間でもフッター黒色を継続させる */
html {
background-color: #000;
}
/* サイト全体に背景色と複数の背景画像を適用 */
body {
background-color:RGB(247,246,245) !important;/* 背景色 */
background: 
none 0% 0%, /* 既存の背景画像 */
none 0% 0%; /* 新しい背景画像 */
background-size: 
65px, /* 既存の背景画像のサイズ */
300px; /* 新しい背景画像のサイズ */
background-attachment: scroll;
margin: 0;
padding: 0;
}
/* モバイル用のスタイル */
@media (max-width: 780px) {
body {
background-size: 500px;
background-position: 0% 9%; /* モバイル時に背景画像の位置を変更 */
}
}
/* サイト幅を必ず100% */
.animated-background {
width: 100% !important;
max-width: 100% !important;
}
/* 初期状態で非表示にする */
.right {
opacity: 0;
visibility: hidden; /* 完全に非表示 */
transition: opacity 0.8s ease-out, visibility 0.8s ease-out; /* なめらかな表示 */
}
html, body {
overflow-x: clip !important;
}
/* 一瞬非表示 */
.count-up {
display: none;
}
#box4 .count-up,#box1 .count-up {
font-family: 'Oswald', sans-serif;
}
.my-custom-font {
font-family: 'Oswald', sans-serif;
}

.my-font {
font-family: "Noto Sans JP", serif;
font-weight: 900 !important;
font-style: normal;
font-size: 200%; /* デフォルトのフォントサイズ */
/*text-shadow: 0px 0px 5px #555 ;*/
}
@media (max-width: 780px) {
.my-font {
font-size: 5.5vw;
}
}

button.age-gate-submit-no, button.age-gate-submit-yes, button.age-gate__submit--no, button.age-gate__submit--yes{
font-size :20px !important;
margin-top: 20px;
padding: 5px 10px !important;
}

/* メニュー部分 */
#header {
position: fixed; /* ヘッダーを常にトップに固定 */
width: 100%;
z-index: 200;
background-color: ; /* お好みで背景色を変更 */
}
#header .fixheader {
position: fixed; /* スクロールしても固定 */
width: 100%;
background-color: ; /* 背景色を指定 */
}
#header.fixed .fixheader {
position: fixed;
top: 0px !important;
}

/*ホバー緑線*/
a.animated-border-link:link {
position: relative;
padding: 10px;
display: inline-block;
transition: all 0.3s ease;
color:#333 !important;
font-size: 95%;
font-weight: none !important;
text-decoration: none; /* リンクの下線を削除 */
color: inherit; /* 任意の色を設定することができます */
}
a.animated-border-link:after {
content: '';
position: absolute;
margin-top: 20px !important;/* テキストのすぐ下に線を配置 */
left: 50%;
transform: translateX(-50%);  /* 追加 */
height: 2px;  /* 線の太さ。この値を調整で変更可能 */
width: 0;
background-color: #222;  /* 線の色。この値を調整で変更可能 */
transition: width 0.3s ease;
}
a.animated-border-link:hover{
color:#000 !important;
text-decoration:none;
}
a.animated-border-link:hover:after {
width: 90%;
}
a.animated-border-link:visited,a.animated-border-link:active{
color:#222;
text-decoration:none;
}

a:link {color:#222; text-decoration:underline}
a:visited {color:#222; text-decoration:none}
a:active {color:#222; text-decoration:none}
a:hover {color:#555; text-decoration:none}

a.post:link {color:#222; text-decoration:underline}
a.post:visited {color:#222; text-decoration:none}
a.post:active {color:#222; text-decoration:none}
a.post:hover {color:#555; text-decoration:none}

a.post_link:link {color:#222; text-decoration:none}
a.post_link:visited {color:#222; text-decoration:none}
a.post_link:active {color:#222; text-decoration:none}
a.post_link:hover {color:#f0f0f0; text-decoration:none}

a.footer_no:link {color:#fff; text-decoration:underline}
a.footer_no:visited {color:#fff; text-decoration:none}
a.footer_no:active {color:#fff; text-decoration:none}
a.footer_no:hover {color:#f0f0f0; text-decoration:none}

a.footer:link {color:#fff; text-decoration:underline}
a.footer:visited {color:#fff; text-decoration:none}
a.footer:active {color:#fff; text-decoration:none}
a.footer:hover {color:#f0f0f0; text-decoration:none}

a:hover img {
opacity: 0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha(opacity=70)";
}

img {
max-width: 100%;
height: auto;
}

.my-small {
font-size: 1.5em;
/*ウェブアイコン1.6倍の大きさに*/
/*text-shadow: 0px 0px 2px #fff, 0px 0px 3px #fff, 0px 0px 4px #fff, 0px 0px 5px #fff, 0px 0px 6px #fff;*/
}

div.zure{
display: block;
margin-top:-120px;
padding-top:120px;
}

.container {
max-width: 1080px;
margin-right: auto;
margin-left: auto;
padding: 10px 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align: left;
}

#sidebar {
margin: 20px 0;
font-size: 12px;
line-height: 150%;
}

.contents {
margin: 20px 0;
}

@media (min-width: 780px) {
/*コンテンツとサイドバーを横に並べる*/
.container:after {
display: block;
clear: both;
content: '';
}
.contents {
float: left;
width: 70%;
margin-right: 2%;
text-align: left;
}
#sidebar {
float: left;
width: 28%;
text-align: left;
font-size: 14px;
}
}

/* 記事一覧 */
/* デフォルトのスタイル */
.article-list {
background-color: #fff;
border: 8px solid #ccc;
height:43svh;
border-radius: 15px; /* ← 10pxより大きくする（例：20px） */
overflow: hidden;    /* ← 念のため。中身も角丸に沿って切る */
background-clip: padding-box; /* ← 背景が枠線下に回り込むのを防ぐ */

padding: 0;
width: calc(33.33% - 10px);
box-sizing: border-box;
margin: 3px;
display: inline-block;
box-shadow: 0px 0px 5px #f1f1f1 !important;
overflow: hidden; /* ここが超重要！ */
position: relative;
}

.article-list:hover {
border-color: #000 !important;;
background-color: #fff;
}

/* 直リンクボーダーホバー時変化 */
a:hover .recent-post-thumbnail{
border-color: #000 !important;
}

.article-list .img-wrap {
  width: 100%;
  height: 150px;
  position: relative;
  overflow: hidden;
}

.article-list .img-wrap img {
  width: 100%;
  height: 150px;
  object-fit: cover;
object-position: top center;
  transition: transform 0.5s ease;
  display: block;
  transform: scale(1); /* 初期値 */
}

.article-list:hover .img-wrap img {
  transform: scale(1.3); /* 拡大しても角からはみ出ない */
}

.article-list .img-wrap .cat-data {
  font-size: .75rem;
  position: absolute;
  top: 0;
  right: 0;
  padding: .3rem .5rem;
  color: #fff;
  background-color: #00ab8d;
  border-radius: 0 0 0 5px;
  z-index: 2;
}

.article-list .text {
  padding: 10px;
  background-color: #fff;
}

.article-list .text h2 {
  font-size: 16px;
  font-weight: bold;
  padding-top: 10px;
  margin-bottom: .5rem;
  line-height: 1.5;
}

.article-list .text .article-date,
.article-list .text .article-author {
  font-size: 13px;
  display: inline-block;
  margin-bottom: 1.0rem;
  color: #333;
}

.article-list .text .article-date {
  margin-right: .5rem;
}

.article-list .text .article-author i {
  margin-right: .3rem;
}

.article-list .text p {
  font-size: 12px;
  line-height: 180%;
}

/* 780px以下の画面幅で2列表示に変更 */
@media (max-width: 780px) {
.article-list {
width: calc(50% - 10px);
}
.article-list .img-wrap img:hover{
transform:scale(1.05,1.05);
transition:0.5s all;
opacity: 1.0;
}
}

/* 576px以下の画面幅で1列表示に変更 */
@media (max-width: 576px) {
.article-list {
width: calc(50% - 6px);
}
.article-list .img-wrap img:hover{
transform:scale(1.05,1.05);
transition:0.5s all;
opacity: 1.0;
}
/*.article-list {
width: 100%;
margin: 5px 0; /* 上下のマージンを追加して要素を垂直に配置 */
/*display: block;
}
.article-list .img-wrap img {
width: 100%;
height: auto;
object-fit: cover; /* 画像のアスペクト比を保ちつつ、コンテナに合わせて画像をトリミング /
display: block; / 画像をブロック要素として扱い、指定したwidthに合わせて表示 */
/*} */
.article-list .text p {
display: none;
}
.article-list .text .article-date,
.article-list .text .article-author {
font-size: 12px;
margin-bottom: 10px;
}
.article-list .text .article-date {
margin-right: .2rem;
}
}

/* PCのみ10文字制限 */
@media (min-width:780px){
.category-limit{
display:inline-block;
max-width:12em;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
}
/* 記事一覧ここまで */

/*ページネーション*/
.parent {
display: flex;
justify-content: center;
}
.pagination {
display: flex;
align-items: center;
justify-content: center;
}
.pagination {
margin: 40px 0% 140px 0%;
text-align: center;
line-height: -80px;
display: flex;
align-items: center;
}
.pagination ul {	
margin: 0;
list-style: none;
}
.pagination li {	
width: auto;
margin: 0 0px;
display: inline-block;
vertical-align: middle;
}
.pagination li a, .pagination li > span {
font-size: 1.3em;
font-weight:bold;
font-family: 'Oswald', sans-serif;
display: block;
width: 50px;
height: 50px;
padding-top: 15px;
padding-bottom: 5px;
padding-right: 0px;
padding-left: 0px;

text-decoration: none;
color: #000;
background-color: #fff;
border: solid 1px #000;
border-radius: 5px;
}

.pagination li > span {	
color: #fff;
background-color: #000;
}

.pagination li a:hover {	
color: #fff;
background-color: #000;
}

.pagination li .dots {	
width: 20px;
padding-top: 10px;
color: #000;
border-color: transparent;
background-color: transparent;
}

.pagination li a.prev.page-numbers, .pagination li a.next.page-numbers {
padding-top: 15px !important; /* 他のリンクと同じ高さに調整 */
}

/* 必要に応じて、以下のような追加スタイルも検討してください。*/
.pagination li a.prev.page-numbers:before, .pagination li a.next.page-numbers:after {
content: ''; /* 矢印を表示するためのコンテンツ */
display: inline-block !important;
vertical-align: middle !important;
/* ここに矢印のスタイルを追加 */
}

.contents > h1 {	
font-size: 1.5em;
margin: 0 0 20px;
}

@media (max-width: 599px) {	
.contents > h1 {
font-size: 1.3em;
}
}

.kiji {	
font-size: 1em;
margin: 0;
padding: 0 25px 25px;
}
	
.kiji-info .cat-data a {
text-decoration: none;
color: #222;
}
	
.kiji-info .cat-data a:hover {	
opacity: .8;
}
	
.kiji-img{
width:calc(100% + 20px);
max-width:none;
margin:30px 0;
margin-left:-10px;
margin-right:-10px;
text-align:center;
display:block;
transition:none 0s ease 0s;
outline:none;
border:none;
padding:0;
border-spacing:0;
z-index:30;
box-sizing:border-box;
}

.kiji-img img{
display:block;
width:100%;
height:auto;
}

@media screen and (min-width:580px){
.kiji-img{
border-radius:15px !important;
overflow:hidden;
}

.kiji-img img{
border-radius:15px !important;
}
}

/* PC時のみ 780px 制限 */
@media screen and (min-width:1049px){
.kiji-img{
max-width:780px;
}
}
/*タグ*/
.kiji-tag {
text-align: left;
}

.kiji-tag ul {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
}

.kiji-tag li {
margin-right: 3px;
margin-bottom: 3px;
white-space: nowrap;
}

.kiji-tag li a {
display: inline-block;
text-align: center;
font-size: 12px;
text-decoration: none !important;
margin: 2px;
padding: 5px 10px;
white-space: nowrap;
background: #fff;
color: #333 !important;
border: solid 2px #333;
border-radius: 50px;
transition: .4s;
}

.kiji-tag li a:before {
font-size: 1.0em;
color: #333;
content: "\23";
font-family: "Font Awesome 6 Free"; font-weight: 900; /* [2026-10-13] NG-6 FontAwesome(v4)→FA6 Free(Solid) */
padding-right: 3px;
transition: .4s;
}

.kiji-tag li a:hover {
background: #333;
color: #fff !important;
border: solid 2px #333;
}

.kiji-tag li a:hover:before {
color: #fff !important;
}
 
.kiji p {
margin-top: 0;
margin-bottom: 30px;
color: ;
line-height: 200%;
}

/*記事中のタイトルタグ*/
.entry-title { 
font-size:38px;
line-height: 150%;
color: #222;
}

.kiji h1 {
font-size: 30px;
margin: .3em 0;
color: #222;
}

/*.kiji h3 {
color: #000;
font-weight: bold;
font-size: 1.3em;
margin-top: 0px;
margin-bottom: 20px;
padding-bottom:0px;
line-height: 200%;
border-left: 10px solid #000;
padding-left: 20px;
}*/
	
.kiji h4 {
position: relative;
z-index: 1;
color: #222;
font-size: 1.2em;
margin-top: 10px;
margin-bottom: 10px;
margin-left: -10px;
margin-right: -10px;
line-height: 150%;
padding: 15px 10px 15px 40px; /* ← 左にアイコン分の余白 */
}

/* 背景 */
.kiji h4::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(172, 164, 193, 0.2);
z-index: -1;
border-radius: 5px;
}

/* チェックマークアイコン */
.kiji h4::after {
content: "\f336"; /* Font Awesome チェック */
font-family: "Font Awesome 6 Free";
font-weight: 900; /* solid 必須 */
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #777; /* 好みで変更 */
font-size: 0.9em;
}


/* モバイル閲覧時の角丸削除 */
@media screen and (max-width: 780px) {
.kiji h4::before {
border-radius: 0; /* モバイル表示時に角丸を削除 */
}
}

.kiji h5 {
position: relative;
z-index: 1;
color: #222;
font-size: 1.2em;
margin-top: 30px;
margin-bottom: 10px;
margin-left: -10px;
margin-right: -10px;
line-height: 150%;
padding: 15px 10px;
}

.kiji h5::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(172, 164, 193, 0.2); /* 半透明グレー */
z-index: -1;
border-radius: 10px; /* 必要なら角丸 */
}

/* モバイル閲覧時の角丸削除 */
@media screen and (max-width: 780px) {
.kiji h5::before {
border-radius: 0; /* モバイル表示時に角丸を削除 */
}
}

/*ここまで*/
@media only screen and (max-width:780px){
.entry-title { 
font-size:26px;
line-height: 130%;
}
}

@media (max-width: 599px) {	
.kiji {
font-size: 92%;
padding: 0 10px 25px;
}
	
/*スマホサイズの記事中タイトルタグ*/
.kiji h1 {
font-size: 1.7em;
}


	
/*.kiji h3 {
color: #000;
font-weight: bold;
font-size: 1.2em;
margin-top: 60px 0 20px 0;
line-height: 180%;
border-left: 10px solid #000;
padding-left: 15px;
}*/

.kiji h4 {
color:#222 ;/*文字色*/
font-size: 1.3em;
margin-top: 0px;
margin-bottom: 10px;
line-height: 150%;
}

.kiji h5 {
color:#222 ;/*文字色*/
font-size: 1.2em;
margin-top: 20px;
margin-bottom: 10px;
line-height: 150%;
}
}
/*ここまで*/

/*------サイドバー------*/
.sidebar-wrapper {
margin-bottom: 1.8em;
padding: 0px;
color: #222;
}

.sidebar-wrapper h4 {
font-family:;
font-size: 1.5em;
margin-top: 0;
margin-bottom: 0px;
padding: 0px 0px;
color: #ddd;
font-weight:normal;
}

.footer-wrapper h4 {
font-family: ;
font-size: 1.5em;
margin-top: 0;
margin-bottom: 0px;
padding: 0px 0px;
color: #ddd;
font-weight:normal;
}

/*デフォルトウィジェット*/
.widget_recent_entries ul, .widget_meta ul, .widget_recent_comments ul, .widget_pages ul, .widget_meta ul, .widget_archive ul, .widget_nav_menu ul {
padding: 0;
list-style: none;
}

.widget_recent_entries li, .widget_meta li, .widget_recent_comments li, .widget_pages li, .widget_meta li, .widget_archive ul, .widget_nav_menu li {
position: relative;
padding: 0px;
}

.widget_recent_entries li, .widget_nav_menu li {
padding-left: 25px;
}
	
.widget_recent_entries a, .widget_meta a, .widget_recent_comments a, .widget_pages a, .widget_meta a, .widget_archive a, .widget_nav_menu a {
color: #ddd;
}

.widget_recent_entries a:hover, .widget_meta a:hover, .widget_recent_comments a:hover, .widget_pages a:hover, .widget_meta a:hover, .widget_archive a:hover, .widget_nav_menu a:hover {
color: #ddd;
}

/* カテゴリウィジェット基本スタイル */
.widget_categories ul li {
position: relative;
border-bottom: 1px #ddd dotted;
padding-bottom: 10px;
padding-top: 5px;
padding-left: 40px;
list-style: none;
}

.widget_categories ul li a {
display: flex;
justify-content: space-between;
align-items: center;
color: #333;
font-size: 100%;
line-height: 1.4em;
padding-left: 3px;
margin-right: 5px;
}

.widget_categories ul li a{
text-decoration:none !important;
border-bottom:none !important;
box-shadow:none !important;
background-image:none !important;
}

.widget_categories ul li a .post-count{
display:inline-flex;
align-items:center;
justify-content:center;
width:28px !important;
height:28px !important;
margin-right:15px !important;
padding:0;
border-radius:50%;
color:#fff;
background:#666;
font-size:10px;
line-height:1;
box-sizing:border-box;
text-decoration:none !important;
}


.widget_categories a:hover {
color: #555 !important;
}

.widget_categories li {
position: relative;
padding-left: 25px;
}

.widget_categories li:before {
content: '\e43d';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
color: #333;
font-size: 180%;
display: inline-block;
text-align: center;
position: absolute;
top: 12px;
left: 10px;
margin-right: 0px;
}

















/* 子カテゴリーを初期状態で非表示に設定し、適切な幅と改行設定を追加 */
.widget_categories li > ul.children {
max-width: 280px; /* 最大幅を設定 */
display: none; /* 初期状態で非表示 */
position: relative;
flex-wrap: wrap;
padding-top: 20px;
overflow-wrap: break-word;
word-break: break-all; /* 適切な改行設定 */
}

/* エリアスタイル */
area {
cursor: pointer;
}

/* 子カテゴリーのアイコン変更とスタイル */
.widget_categories ul.children li:before {
content: '\f07c';
font-size: 150%;
color: #555;
}

.widget_archive ul li a .post-count {
line-height: 1.0em;
float: right; /* 右端に寄せる */
margin: 15px 10px 0px 8px; /* 位置の調整 */
padding: 5px 8px; /* 文字周りの余白 */
border-radius: 4px; /* 角の丸み */
color: #fff; /* 文字色 */
font-size: 0.7em;
background: #777; /* 背景色 */
}

/*カテゴリウィジェットとアーカイブウィジェットのドロップダウン表示*/
.widget_categories .screen-reader-text {
display: none;
}

.widget_archive .screen-reader-text {
position: relative;
display: block;
height: 0;
text-indent: -9999999px;
}

.widget_categories form ,
.widget_archive form {
position: relative;
left: 0;
}

.widget_categories form::after,
.widget_archive form::after {
position: absolute;
top: 49%;
right: 8%;
font-size: 1.0em;
content: "\f078";
font-family: "Font Awesome 6 Free"; font-weight: 900; /* [2026-10-13] NG-6 FontAwesome(v4)→FA6 Free(Solid) */
/* content: '▼'; */
color: #333; /* 文字色 */
transform: translateY(-50%);
pointer-events: none;
}

/* 親要素にセンタリングのためのスタイルを適用 */
.widget_categories, {
text-align: center; /* 子要素をセンター揃え */
}

/* select要素やpostformを中央に配置 */
.widget_categories .postform,
.widget_archive select {
font-size: 100%;
width: 95%;
padding: 12px 12px;
cursor: pointer;
border: 5px solid #aaa;
border-radius: 0px;
background-color: #f4f5f9;
color: #777; /* 文字色 */
-webkit-appearance: none;
-moz-appearance: none;
margin: 0 auto; /* 横方向の余白を自動設定し中央揃え */
display: block; /* ブロック要素として扱う */
}

.widget_categories .postform:hover {
border: 5px solid #000 !important;
}

/* タグクラウド */
.tagcloud {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
}

.tagcloud a {
    display: inline-block;
    margin: 3px;
    padding: 8px 12px;
    font-size: 12px !important;
    text-decoration: none !important;
    text-align: center;
    white-space: nowrap;
    color: #333;
    background-color: #fff;
    border: 2px solid #333;
    border-radius: 50px;
    transition: .4s;

    /* 文字数が長い場合に省略する */
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px; /* 必要に応じて適切な幅に調整 */
}

.tagcloud a:before {
    display: inline-block;
    font-size: 12px !important;
    font-family: "Font Awesome 6 Free"; font-weight: 900; /* [2026-10-13] NG-6 FontAwesome(v4)→FA6 Free(Solid) */
    content: "\23";
    padding-right: 3px;
    color: #333;
    transition: .4s;
}

.tagcloud a:hover {
    background-color: #333;
    color: #fff;
    border: 2px solid #333;
}

.tagcloud a:hover:before {
    color: #fff;
}


/*アーカイブウィジェット*/
.widget_archive ul li {
position: relative;
border-bottom: 1px #ddd dotted ;
padding-bottom:0px;
padding-top:5px;
}

.widget_archive li a {
line-height: 3.0em;
font-size: 120%;
color: #222;
text-decoration: underline;
margin: -37px 0 0px 0px;
padding-left: 10px;
}

.widget_archive li:before {
font-size: 1.3em;
color: #222;
content: "\f044";
font-family: "Font Awesome 6 Free"; font-weight: 900; /* [2026-10-13] NG-6 FontAwesome(v4)→FA6 Free(Solid) */
padding-left: 10px;
}

.widget_archive a:hover {
color: #555 !important;
text-decoration: none;
}

/* PREV NEXT */
#prev_next{
background: linear-gradient(to right, rgba(255,255,255,0), rgba(247,248,250,1.0), rgba(255,255,255,0));
width:100%;
margin: 36px 0 24px;
padding:0;
display: table;
}
#prev_next  #prev, #prev_next  #next{
width: 50%;
padding: 30px 10px 10px;
border-top:#ccc 1px solid;
border-bottom:#ccc 1px solid;
display: table-cell;
position:relative;
text-decoration:none;
}

#prev_next #prev:hover, #prev_next #next:hover{
background-color: rgba(238,238,238,0.7);
}
#prev_next #prev{
border-right:#ccc 1px solid;
}
#prev_next #prev_title, #prev_next #next_title{
font-size:90%;
top:-1em;
position:absolute; 
border: 1px #ccc solid;
background:#fff; 
text-align: center;
padding:3px;
color:#666;
}
#prev_next #next_title{
right:10px;
}
#prev_next #prev img, #prev_next #next img{
margin:10;
}
#prev_next #prev_no, #prev_next #next_no{
width: 50%;
height:140px;
padding:0 10px;
display: table-cell;
}
#prev_next #prev_no{
border-right:#ccc 1px solid;
}
#prev_next_home{
margin:0 auto;
background-color: #39f;
border: solid 9px #fff;
width: 100px;
height:100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
box-shadow: 0 0 0 3px #39f;
-webkit-box-shadow: 0 0 0 3px #39f;
-moz-box-shadow: 0 0 0 3px #39f;
text-align:center;	
}
#prev_next_home:hover{
background-color: rgba(0,0,255,0.7);
}
#prev_next_home i{
color:#FFF;
margin:10px auto ;
font-size:60px;
}
/*-- ここまで --*/

/*media Queries タブレットサイズ
----------------------------------------------------*/
@media only screen and (max-width: 780px) {
}
#prev_next #prev p, #prev_next #next p{
font-size:80%;
line-height:1.45;
}
/*media Queries タブレットサイズ
----------------------------------------------------*/
@media only screen and (min-width: 380px) {
}
/*media Queries PCサイズ
----------------------------------------------------*/
@media only screen and (min-width: 780px) {
/*-- ここから --*/
/*--------------------------------------
768px PREV NEXT
--------------------------------------*/
#prev_next #prev, #prev_next #prev::before, #prev_next #prev::after,
#prev_next #next, #prev_next #next::before, #prev_next #next::after {	
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
}
	
#prev_next #prev p, #prev_next #next p{
font-size:90%;
line-height:1.5;
}
	
#prev_next #prev_title, #prev_next #next_title{
padding:3px 10px;
}
#prev_next #next_title{
right:10px;
}
#prev_next #prev img{
float:left;
margin:10px
}
#prev_next #next img{
float:right;
margin:10px;
}
/*-- ここまで --*/
}
/*ホーム表示ブロック*/
#prev_next_home{
display: none;	
}
#prev_next_home:hover{
display: none;
}
#prev_next_home i{
display: none; 
}

/*トップ表示*/
.home-top .article-top .img-wrap img {
width: 615px;
height: 615px;
}

.home-top .article-top .text {
margin-left: 645px;
}

.home-top .article-top .new-post {
font-weight: none;
display: block;
margin-bottom: .5rem;
color: #ff9900;
}

.home-top .article-top .text h2 {
font-size: 150%;
margin-bottom: 1rem;
}

.home-top .article-top .text .article-date,
.home-top .article-top .text .cat-data {
margin-bottom: 1rem;
}

@media(max-width: 1024px) {
.home-top .article-top .img-wrap img {
width: 420px;
height: 420px;
}

.home-top .article-top .text {
margin-left: 440px;
}
}

@media(max-width: 800px) {
.home-top .article-top .img-wrap {
float: none;
}

.home-top .article-top .img-wrap img {
width: 100%;
height: 100vw;
}

.home-top .article-top .text {
margin-left: 0;
line-height: 1.7;
}

.home-top .article-top .new-post,
.home-top .article-top .text h2,
.home-top .article-top .text .article-date,
.home-top .article-top .text .cat-data {
margin-bottom: 1;
}
}

/*  ボタンの上に置く top */
.balloon_top {
position: relative;
background: #fcfcfc;
border: 1px solid gray; /*#242a2e;*/
font-size:11px;
text-align:center;
margin-bottom:5px; padding:3px;
font-family: arial, "",sans-serif;
border-radius: 5px;        
}
.balloon_top:after, .balloon_top:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}

.balloon_top:after {
border-color: rgba(252, 252, 252, 0);
border-top-color: #fcfcfc;
border-width: 5px;
margin-left: -5px;
}
.balloon_top:before {
border-color: rgba(36, 42, 46, 0);
border-top-color: gray; /*#242a2e;*/
border-width: 6px;
margin-left: -6px;
}

/* ボタンの右に置く right */
.balloon_right {
position: relative;
background: #ffffff;
border: 1px solid gray; /*#0a0c0d;*/
font-size:11px;
text-align:center;
margin-left:5px; padding:3px; margin-top:30px;
font-family: arial, "",sans-serif;
border-radius: 5px;
}
.balloon_right:after, .balloon_right:before {
right: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}

.balloon_right:after {
border-color: rgba(255, 255, 255, 0);
border-right-color: #ffffff;
border-width: 3px; /*5px;*/
margin-top: -3px; /*5px;*/
}
.balloon_right:before {
border-color: rgba(10, 12, 13, 0);
border-right-color: gray; /*#0a0c0d;*/
border-width: 4px; /*6px;*/
margin-top: -4px;  /*6px;*/
}

/* ぬるっと出現するテキスト・画像 */
.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

/* ふわふわする画像 */
.float {
animation: float_7667 1s linear infinite;
transform-origin: 50% 50%;
}

@keyframes float_7667 {
0% { transform: translateY(0) }
20% { transform: translateY(-6px) }
40% { transform: translateY(0) }
100% { transform: translateY(0) }
}

/*時計アイコンを横に並べる*/
.time { 	
float: left;
margin-right: 5px; 
margin-top: 18.5px; 
}

/*引用枠*/
blockquote {
position: relative;
padding: 10px 20px;
box-sizing: border-box;
color: #777777;
border: solid 3px #777777;
}
blockquote:before{
display: inline-block;
position: absolute;
top: -20px;
left: -20px;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
text-align: center;
content: "\f10d";
font-family: "Font Awesome 6 Free"; font-weight: 900; /* [2026-10-13] NG-6 FontAwesome(v4)→FA6 Free(Solid) */
background: #777777;
color: #ffffff;
font-size: 20px;
}

blockquote:after{
display: inline-block;
position: absolute;
bottom: -20px;
right: -20px;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
text-align: center;
content: "\f10e";
font-family: "Font Awesome 6 Free"; font-weight: 900; /* [2026-10-13] NG-6 FontAwesome(v4)→FA6 Free(Solid) */
background: #777777;
color: #ffffff;
font-size: 20px;
}

blockquote p {
padding: 16px;
margin: 10px 10px;
color: #666666;
line-height: 1.7;
}

blockquote cite {
display: block;
text-align: right;
color: #666666;
font-size: 0.9em;
}

/* リストの黒丸を消す */
ul {
list-style: none;
background-image:none;
}

::marker {
color: rgba( 255,255,255, 0.1 );
}

/*スライダー*/
/* 1.親スタイルリセットとペース設定 ++++++++++ */
.slider-box p, .slider-box div, .loop-box ul, .loop-box li {
box-sizing: border-box; margin: 0 !important; padding: 0 !important;
}

/* 2.ベースBOXの設定 +++++++++++++++++++++ */
.slider-box {
box-sizing: border-box;
overflow: hidden;
width: 100%; /* 画面又は親要素に対するサイズ - 変更可 */
background: ; /* 背景色 - 変更可・削除可 */
border: solid 0px #ccc; /* 囲み線 - 変更可・削除可 */
margin: 0 auto; /* Box外の余白 - 変更可 */
padding: 0px 0 0px 0; /* 上端からスライダーまでの距離 - 変更可・削除可 */
}

/* 3.チェックボックスを利用した停止・再生などの設定 +++++++++++++++++ */
.slider-check {
display: none;
}
.slider-check:checked ~ .loop-box > .loop {
animation-play-state: paused;
}

/* 4.スライダー本体とアニメーションの基本設定 ++++++++++++++ */
.loop-box{
position: relative;
width: 100%;
overflow: hidden; 
}
.loop-box, .loop-box ul {
height: 70px; /* スライダーの高さ - 変更注意 */
}
.loop-box ul {
position: absolute; left: 0; top: 0;
display: flex; 
justify-content: space-between;
background: ; /* スライダーの背景色 - 変更可 */
list-style: none;
max-width: 10000%; 
min-width: 100%;
width: calc(60px * 4.0 * 10); /* 画像の横幅×枚数 - 変更注意・変更可・変更注意 */
animation: 150s linear infinite; /* アニメーション設定 - 変更可 */
}
.loop-box li {
display: flex;
align-items: center; 
justify-content: center;
color: #fff;
}
.loop-box img {
height: auto;
width: 100%;
}

/* 5.アニメーション個別設定 ++++++++++ */
.loop-box ul.loop1 {
animation-name: loop1;
}
.loop-box ul.loop2 {
animation-name: loop2;
}
@keyframes loop1 {
0% {transform: translateX(0); }
49.99999% {transform: translateX(-100%); }
50% {transform: translateX(100%); }
}
@keyframes loop2 {
0% {transform: translateX(100%); }
100%{transform: translateX(-100%); }
}

@keyframes shiny {
0% {
transform: scale(0) rotate(25deg);
opacity: 0;
}

50% {
transform: scale(1) rotate(25deg);
opacity: 1;
}

100% {
transform: scale(50) rotate(25deg);
opacity: 0;
}
}

.shiny-btn {
position: relative;
display: block;
width: 100%;
line-height: 100%;
text-align: center !important;
text-decoration: none;
color: #fff;
background-color: #000;
overflow: hidden;
}

.shiny-btn::after {
content: '';
position: absolute;
top: -100px;
left: -100px;
width: 50px;
height: 50px;
background-image: linear-gradient(100deg,  rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, 0) 0%);
    
/* アニメーション */
animation-name: shiny;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}

/* 目次を中央寄せ 下余白 */
#ez-toc-container {
width: 100%;
}

/* タイトル前のアイコン　FontAwesomeの設定 */
#ez-toc-container .ez-toc-title:before{
content: "\f0ca"; /* FontAwesomeのコード */
font-family: "Font Awesome 6 Free"; font-weight: 900; /* [2026-10-13] NG-6 FontAwesome(v4)→FA6 Free(Solid) */
padding-right: 6px;
vertical-align: 10px
font-size:12px; /* アイコンの大きさ */
color: #fff;
}

#ez-toc-container p.ez-toc-title+ul.ez-toc-list>li {
margin-top: 1.5em;
padding-bottom: 0.4em;
}

#ez-toc-container p.ez-toc-title+ul.ez-toc-list {
margin-top: 1em;
margin-right: 1em;
}

#ez-toc-container li {
padding-left: 1em !important;
}

#ez-toc-container ul ul {
margin-bottom: 20px;
}

#ez-toc-number {
margin-left: -0.5em;
margin-right: 0.5em;
}

#ez-toc-container ul>li>ul>li {
font-size: 100% !important;/*小見出しの文字サイズ*/
}

#ez-toc-container .ez-toc-toggle > a {
color: #fff !important;/*［hide］の文字色*/
letter-spacing: 0.1em;/*文字間の余白*/
}

/*リンクの色など*/
#ez-toc-container a {
text-decoration: none;
text-shadow: none;
color: #333 !important;
margin: 10px 0;
line-height: 180% !important;
}

#ez-toc-container a:hover {
text-decoration:underline
}

#ez-toc-container {
width: 100%;
background-color: rgba(255,255,255, 0.9)  !important;/*背景色*/
background: none no-repeat 96% 99%; background-size:100px;
margin: 80px auto 100px auto;
padding:60px 30px 50px 20px;
display: table;
border: solid 5px #333 !important;/*外枠*/
position: relative;
border-radius: 2px;/*角丸*/
box-shadow: 0px 0px 0px 3px rgba(235, 235, 235, 0.8);

}

.ez-toc-title-container {
width: auto;
padding: 5px 20px;
border-radius: 20px;
background-color: #333 !important;
background-image: url();
background-size: 5px;
position: absolute;
top: -20px;
left: 20px;
letter-spacing: 0.05em;
display: inline-block;
}

.ez-toc-title{
font-size:120% !important;
color:#fff;
}

/*サイドバーランキング順位　ここから*/
.wpp-list {
counter-reset: wpp-ranking ;
}
.wpp-list li {
position: relative;
list-style-type: none;
margin: 10px 0px 30px 5px;
}
.taxonomies{
position:absolute;
margin:-30px 0 0 0  !important;
max-width:80%;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
z-index: 0 !important;
text-align:center;
}

.taxonomies a{
background:#a752da;
text-decoration:none;
font-size:10px !important;
color:#fff;
padding:4px 8px;
border-radius: 50px;/*角丸*/
}

.wpp-list li:before {
counter-increment: wpp-ranking;
content: counter(wpp-ranking, decimal);
background: linear-gradient(180deg, rgba(236,100,56,1.0) 0%, rgba(236,100,56,1.0) 50%, rgba(212,79,37,1.0) 50%, rgba(212,79,37,1.0) 100%);
border: 2px solid #f0f0f0;
box-shadow: 0px 0px 0px #000;
color: #fff;
font-weight: bold;
font-size: 15px;
font-family: 'Oswald', sans-serif;
line-height: 1;
padding: 4px 4px;
margin: 0 0px 0 0px;
position: absolute;
left: 0;
top: 0;
border-radius: 20%; /* 円形にする */
z-index: 1;
width: 28px;
text-align: center;
}

/* 1位 */
.wpp-list li:nth-child(1):before {
background: linear-gradient(180deg, rgba(253,203,76,1.0) 0%, rgba(253,203,76,1.0) 50%, rgba(253,188,25,1.0) 50%, rgba(253,188,25,1.0) 100%);
border: 2px solid #f0f0f0 !important;
}

/* 2位 */
.wpp-list li:nth-child(2):before {
background: linear-gradient(180deg, rgba(192,192,192,1.0) 0%, rgba(192,192,192,1.0) 50%, rgba(169,169,169,1.0) 50%, rgba(169,169,169,1.0) 100%);
border: 2px solid #f0f0f0 !important;
}

/* 3位 */
.wpp-list li:nth-child(3):before {
background: linear-gradient(180deg, rgba(205,127,50,1.0) 0%, rgba(205,127,50,1.0) 50%, rgba(139,69,19,1.0) 50%, rgba(139,69,19,1.0) 100%);
border: 2px solid #f0f0f0 !important;
}

.wpp-list li:after {
content: ""; /* アイコンコードを修正 */
position: absolute;
top: -2px; /* この値を調整してアイコンの位置を変更します */
left: 16px; /* この値を調整してアイコンの位置を変更します */
color: #000;
text-shadow: 0px 0px 0px #000; 
font-size: 100%;
z-index: 2;
}
.wpp-list li img {
width: 100px; /* 例 */
height: 100px; /* 例 */
object-fit:cover !important;
object-position:top !important;
border-radius: 10px;
margin: -5px 5px 10px -5px;
border: 3px solid #ccc;
background-color: #fff;
}
.wpp-thumbnail-container img{
width:100px;
height:100px;
object-fit:cover;
object-position:top;
}



/* 6位以降のランキング　ここから */
.wpp-list_02 {
counter-reset: wpp-ranking 5; /* 6位からカウント開始するので、最初の要素が6になります */
}
.wpp-list_02 li {
position: relative;
list-style-type: none;
margin: 10px 10px 20px 5px;
}
.wpp-list_02 a {
margin: 0px 0px;
font-size: 110%;
}
.title-and-excerpt{
margin: 10px 0px;
line-height: 150%;
}

/* 各順位の背景色などのスタイルを維持 */
.wpp-list_02 li:before {
counter-increment: wpp-ranking;
content: counter(wpp-ranking, decimal); /* カウント値を表示 */
background: linear-gradient(180deg, rgba(236,100,56,1.0) 0%, rgba(236,100,56,1.0) 50%, rgba(212,79,37,1.0) 50%, rgba(212,79,37,1.0) 100%);
border: 2px solid #f0f0f0;
color: #fff;
font-weight: none;
font-size: 14px;
font-family: 'Oswald', sans-serif;
line-height: 1;
padding: 4px 2px;
margin: 0 0px 0 0px;
position: absolute;
left: 0;
top: 0;
border-radius: 20%; /* 円形にする */
z-index: 1;
width: 28px;
text-align: center;
}

/* 6位以降に1位、2位、3位の特殊表示は不要 */
/* 1位 */
.wpp-list_02 li:nth-child(1):before {
background: linear-gradient(180deg, rgba(236,100,56,1.0) 0%, rgba(236,100,56,1.0) 50%, rgba(212,79,37,1.0) 50%, rgba(212,79,37,1.0) 100%);
border: 2px solid #f0f0f0 !important;
}
/* 2位 */
.wpp-list_02 li:nth-child(2):before {
background: linear-gradient(180deg, rgba(236,100,56,1.0) 0%, rgba(236,100,56,1.0) 50%, rgba(212,79,37,1.0) 50%, rgba(212,79,37,1.0) 100%);
border: 2px solid #f0f0f0 !important;
}
/* 3位 */
.wpp-list_02 li:nth-child(3):before {
background: linear-gradient(180deg, rgba(236,100,56,1.0) 0%, rgba(236,100,56,1.0) 50%, rgba(212,79,37,1.0) 50%, rgba(212,79,37,1.0) 100%);
border: 2px solid #f0f0f0 !important;
}
/* アイコンを調整 */
.wpp-list_02 li:after {
content: ""; /* アイコンコードを修正 */
position: absolute;
top: -2px; /* アイコン位置調整 */
left: 16px; /* アイコン位置調整 */
color: #000;
text-shadow: 0px 0px 0px #000;
font-size: 100%;
z-index: 2;
}

.wpp-list_02 li img {
margin: -5px 5px 10px -5px;
border-radius: 10px; /* 円形にする */
}

/* 人気記事 横並びレイアウト */
.wpp-list li,
.wpp-list_02 li{
display:flex;
align-items:flex-start;
gap:0px;
}

/* 画像エリア */
.wpp-thumbnail-container{
flex:0 0 100px;
}

/* テキストエリア */
.wpp-item-data,
.title-and-excerpt{
flex:1;
}

.wpp-list img,
.wpp-list_02 img{
display:block;
}


.wpp-thumbnail-container{
position:relative;
}

.wpp-thumbnail-container{
margin:20px 0px 0px 20px;
}

.wpp-item-data{
margin:40px 0px 10px;
}

/* ランキングカテゴリー表示文字数制御 */
/* PC */
.cat-tag{
display:inline-block;
max-width:10em;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* スマホ */
@media (max-width:768px){
.cat-tag{
max-width:none;
white-space:normal;
overflow:visible;
text-overflow:clip;
}
}
/* ランキングカテゴリー表示文字数制御ここまで */


/* グローバルメニュー */
.nav-wrap {
position: ;
z-index: 0;
}
.scroll-nav {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch; /* 慣性スクロール */
}
.scroll-nav ul {
max-width: 1080px; /* メニューの最大幅 */
min-width: 760px; /* メニューの最小幅 */
height: 30px;
line-height: 40px;
margin: 0 auto;
list-style: none;
padding-right: 0px; /* 右側の固定分余白を空ける */
}
.scroll-nav ul li + li {
border-left: 1px solid #777777;
box-sizing: border-box;
}
.scroll-nav ul li {
float: left;
width: 253px; /* メニューの個別の幅 */
text-align: center;
}
.scroll-nav ul li:hover {
background: none;background-size: 5px;
background-color: #fff; /* マウスホバー時の背景色 */
}
.scroll-nav ul li a {
display: inline-block;
color: #fff; /* メニューの文字色 */
text-decoration: none;
font-size: 80%;
}
.next-btn { /* 右側に固定する部分 */
position: ;
top: 0;
right: 0;
width: 0px; /* 固定部分の幅 */
height: 30px; /* メニューの高さに合わせる */
line-height: 40px;
background: linear-gradient(to right, #555, #fff);
}
@media only screen and (min-width: 771px) { /* PCサイズでの指定 */
.scroll-nav ul {
height: 30px;
line-height: 40px;
padding: 0;
}
.scroll-nav ul li {
width: 33.3%; /* メニューの個別の幅 */
}
.scroll-nav ul li a {
display: inline-block;
color: #fff; /* メニューの文字色 */
text-decoration: none;
font-size: 90%;
}

.next-btn {
display: none; /* 右側の固定部分を非表示 */
}
}

/* 右側の固定部分を非表示 */
.header-inner {	
position: relative;
}

/* サイドバー吹き出し */
.arrow_box_02{
position:relative;
width:100%;
height:auto;
background: linear-gradient(110deg, #9c3749 0%, #9c3749 60%, #9c3749 40%, #9c3749 100%);
padding:10px 0px 10px 0px;
margin:15px 0px 0px 0px;
text-align:left;
color:#fff;
font-size:80%;
border-radius: 0px !important;
-webkit-border-radius:0px;
-moz-border-radius:0px;
}

.arrow_box_02:after{
border: solid transparent;
content:'';
height:0;
width:0;
pointer-events:none;
position:absolute;
border-color: rgba(255, 40, 100, 0);
border-top-width:10px;
border-bottom-width:10px;
border-left-width:10px;
border-right-width:10px;
margin-left: -10px;
border-bottom-color:#9c3749;
bottom:100%;
left:50px;
}

.arrow_box_00{
position:relative;
width:100%;
height:auto;
background: linear-gradient(110deg, #000 0%, #000 60%, #000 40%, #000 100%);
padding:15px 55px 10px 15px;
margin:-20px 0px 10px 0px;
text-align:left;
color:#fff;
font-size:80%;
-webkit-border-radius:0px;
-moz-border-radius:0px;
}

.arrow_box_00:after{
border: solid transparent;
content:'';
height:0;
width:0;
pointer-events:none;
position:absolute;
border-color: rgba(255, 40, 100, 0);
border-top-width:10px;
border-bottom-width:10px;
border-left-width:10px;
border-right-width:10px;
margin-left: -10px;
border-bottom-color:#000;
bottom:100%;
left:50px;
}

.arrow_box_pan{
position:relative;
width:100%;
height:auto;
padding:10px 10px;
margin:0px 0px 0px 0px;
text-align:left;
color:#e0387b;
font-size:80%;
border-radius: 0px !important;
-webkit-border-radius:0px;
-moz-border-radius:0px;
border: 0px solid; /* border width and style */
background: linear-gradient(110deg, rgba(156,55,73,1.0) 0%, rgba(156,55,73,1.0) 5%, rgba(156,55,73,1.0) 90%);
border-image-slice: 1;
}

/*サンプル動画　ここから*/
.youtube {
position: relative;
width: 100%;
padding-top: 100%;
margin-bottom: -80% !important;
}
.youtube iframe {
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 47.5% !important;
}

/* 吹き出し */
.arrow_box_03 {
position:relative;
width:100%;
background-color:#fff;
background-image: none,none,none;
background-size: 200px,150px,600px ;
background-position: 25px 40px, 98% 98%, 50% 50%;
background-repeat: no-repeat, no-repeat, repeat;
margin: 50px auto -50px auto;
padding:60px 30px 10px 30px;
text-align:left;
color: #222 !important;
word-break: break-all;
border:5px solid #000;
line-height:220% !important;
font-size:13px;
-webkit-border-radius:0px;
-moz-border-radius:0px;
}

.arrow_box_03:after,.arrow_box_03:before{
border: solid transparent;
content:'';
height:0;
width:0;
pointer-events:none;
position:absolute;
bottom:100%;
left:10%;
}
.arrow_box_03:after{
border-color: rgba(255, 255, 255, 0);
border-top-width:10px;
border-bottom-width:10px;
border-left-width:10px;
border-right-width:10px;
margin-left: -10px;
border-bottom-color:;
}

.arrow_box_03:before{
border-color: rgba(164, 18, 92, 0);
border-top-width:13px;
border-bottom-width:13px;
border-left-width:13px;
border-right-width:13px;
margin-left: -13px;
margin-bottom: 0px;
border-bottom-color:#000;
}

.logo img {
position: absolute;
bottom: 10px;
left: 10px;
width: 90px !important;
height: 33px !important;
}

.logo_02 img {
position: absolute;
bottom: 10px;
left: 10px;
width: 60px !important;
height: 22px !important;
}

.ico_play img {
position: absolute;
bottom: 30%;
left: 90px;
width: 100px !important;
height: 100px !important;
}

.kiji-img_02 {
background-size:cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
/* 記事中画像エフェクト */
.frame {
display: inline-block;
position: relative;
}
.frame:after {
position: absolute;
display: block;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 4px 10px rgba(75, 72, 72, 0.1);
transform: rotate(3deg); /* 回転させる */
background: #fff;
z-index: -1;
}
/* 背景斜め加工 */
.triangle01 {
display: table;
width: 100%;
height: auto;
background-color: ;
transform: skewY(-2deg);
margin-top: 5vw;
padding:10px;
} 
.triangle01 > * {
transform: skewY(2deg);
}

.triangle02 {
display: table;
width: 100%;
height: auto;
background-color: ;
transform: skewY(-2deg);
margin-top: 5vw;
} 
.triangle02 > * {
transform: skewY(2deg) translateY(0px);
}

/* カードタイトル文字数制限 */
.cardt {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 制限したい行数が2の場合 */
overflow: hidden;
line-height: 1.5em; /* 行の高さを設定 */
height: 3em; /* 2行分の高さを設定 (line-height * 2) */
}

/* 記事中ボタン */
.tug_bottom {
min-width:200px;
width:80%;
text-align:center;
font-size: 20px;
text-decoration:none !important;
line-height: 180%;
padding: 20px 10px;
margin: -10px -20px 30px -20px;
background: linear-gradient(180deg, #e6002d 0%, #e6002d 40%, #bf082f 40%, #bf082f 100%);
white-space: nowrap;
color: #fff !important;
font-weight: bold;
border: solid 5px #ffcc63;
border-radius: 50px !important;
transition: .4s;
}

.tug_bottom:before {
font-size: 1.0em;
color: #fff;
content: "\f08e";
font-family: "Font Awesome 6 Free"; font-weight: 900; /* [2026-10-13] NG-6 FontAwesome(v4)→FA6 Free(Solid) */
padding-right: 3px;
transition: .4s;
}

.tug_bottom:hover{
background: linear-gradient(180deg, #e64949 0%, #e64949 40%, #d2011b 40%, #d2011b 100%);
color: #f5f6f9 !important;
font-weight: bold;
border: solid 5px #ffcc63;
cursor: pointer;
}

.tug_bottom input[type="submit"] {
background-color: transparent; /* 背景色を透明にして親divのデザインを活かす */
border: none;
color:#fff;
cursor: pointer;
}

.wpcf7-response-output {
color: #ffb900;
}

/* 前面 */
.zenmen{
z-index: 1 !important;
position: relative;
}
.zenmen_02{
z-index: 10 !important;
position: relative;
}

/* 投稿ページに新着一覧レスポンシブ */
.recent-posts-wrapper {
display: flex;
flex-wrap: wrap;
margin: 0 0px;
font-size: 90%;
line-height: 150%;
}

.recent-post-item {
width: calc(16.66% - 7px);
margin: 0 0 10px 5px;
}

@media screen and (max-width: 1024px) {
.recent-post-item {
width: calc(33.33% - 7px);
margin: 0 0 10px 5px;
}
}

@media screen and (max-width: 767px) {
.recent-post-item {
width: calc(50% - 7px);
margin: 0 0 10px 5px;
}
}

@media screen and (max-width: 767px) {
.recent-post-item {
width: calc(50% - 7px);
margin: 0 0 10px 5px;
}
}

@media screen and (max-width: 499px) {
.recent-post-item {
width: calc(100% - 7px);
margin: 0 0 10px 5px;
}
}

@font-face {
font-family: 'FontAwesome';
src: url('path/to/fontawesome-webfont.eot');
src: url('path/to/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
url('path/to/fontawesome-webfont.woff2') format('woff2'),
url('path/to/fontawesome-webfont.woff') format('woff'),
url('path/to/fontawesome-webfont.ttf') format('truetype'),
url('path/to/fontawesome-webfont.svg#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
.star-list {
color: #fac225;
}

/* 自動改行 */
.post-content p {
white-space: pre-wrap;
}

/* 一覧看板 */
.diagonal{
max-width:80%;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
z-index: 9 !important;
text-align:center;
color: #fff;
font-size: 10px;
background-color: #222;
border-radius: 50px;
padding: 8px 12px;
margin-right: 15px;
/*transform: skew(-10deg);
display: flex;
align-items: center;
justify-content: center;*/
}

/* アバター背景円形白設定 */
.circular-image {
background-color: #f7f8fa; /* 背景色を白に設定 */
border-radius: 50%; /* 円形にする */
display: inline-block; /* ブロック要素として表示 */
overflow: hidden; /* 枠外の画像を非表示 */
object-fit: cover; /* 画像を枠に合わせてトリミング */
object-position: center 20%; /* 頭部を上寄りに表示 */
}

/* 基本の.tatesenクラスのスタイル */
.tatesen {
padding: 0.8em 1.0em; /* 上下 左右の余白 */
background: transparent; /* 背景透明に */
border-left: solid 2px !important; /* 左線 */
z-index: 9999 !important; /* 要素を前面に持ってくる */
}

/* table全体がホバーされたときに.tatesenクラスの左線を白に変更 */
table:hover .tatesen {
border-left-color: white;
z-index: 9998; /* 要素を前面に持ってくる */
}

/* アニメ見出し */
.content_txt {
position: relative;
margin: 80px -41px 0px;
padding: 80px 0 10px 30px;
background-image:
linear-gradient(to right,rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)),
none,
none,
none;
background-position:
0% 0%,
50% -20px,
0% 0%,
0% 100%;
background-repeat: no-repeat;
background-size:
cover,
400px,
100%,
cover;
color: #000;
font-size: 150% !important;
font-weight: bold;
line-height: 44px;
clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
z-index: 1;
}

.content_txt_02 {
position: relative;
display: block;
width: 99.9%;
color: #000;
font-size: 100% !important;
text-align: left;
padding: 25px 140px 18px 30px;
background-color: rgba(255, 255, 255, 1.0);
border-bottom: 10px solid rgba(254,100,125,1.0);
box-sizing: border-box;
-webkit-box-shadow: -2px -3px 10px #011a33;
-moz-box-shadow: -2px -3px 10px #011a33;
box-shadow: -2px -3px 10px #011a33;
border-top-left-radius: 10px; /* 左上を角丸にする */
z-index: 2; /* 追加 */
}
.content_txt_02::before {
content: '';
position: absolute;
top: -10px; /* 親要素の中央に配置 */
left: 0px; /* 左端に配置 */
width: 80px; /* 画像の横幅 */
height: 83px; /* 画像の縦幅 */
background-image: none; /* 画像のURLを指定 */
background-size: cover; /* 画像を要素に合わせて拡大縮小 */
background-position: center !important; /* 画像の位置を中央に調整 */
transform: translateY(-50%); /* 画像を中央に調整 */
z-index: 1; /* 画像がテキストより前に表示されないように調整 */
}

@media screen and (max-width: 599px) {
.content_txt_02 {
font-size: 90% !important;
line-height: 130%;
}
}

.content_txt_03 {
position: relative;
display: block;
width: 99.9%;
color: #333;
font-size: 100% !important;
line-height: 140%;
text-align: left;
padding: 20px 100px 15px 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 0px;
background-color: rgba(255, 255, 255, 0.9);
border-bottom: 6px solid rgba(181, 202, 216, 0.5);
box-sizing: border-box;
-webkit-box-shadow: -2px -3px 5px #ccc;
-moz-box-shadow: -2px -3px 5px #ccc;
box-shadow: -2px -3px 5px #ccc;

/* ここ重要 */
z-index: 1;
overflow: visible !important;
}

/* beforeは完全停止 */
.content_txt_03::before {
content: none !important;
}

/* 最前面レイヤーとして再構築 */
.content_txt_03::after {
content: '';
position: absolute;
top: -55px;
left: -20px;
width: 80px;
height: 80px;
background: none center center / cover no-repeat;

/* 最重要ポイント */
z-index: 9999 !important;
transform: translateZ(0); /* ← これが効く */
will-change: transform;
pointer-events: none;
}

.search-box{
background-color: #fff;
box-shadow: 0px 0px 5px #ccc;
padding:2px 5px;
margin-top:-10px;
}

.search-box label{
display: inline-flex;
color:#222;
font-size:70%;
margin:10px 0px 15px 10px;
text-indent: 0px; /* テキスト（女優名）を10px右に移動 */
line-height: 1.5;
width:170px;
}

.search-box label span {
display: inline-flex;
position:fixed
bottom: 5px; /* テキストを下に5px移動 */
}

.search-box h3 {
cursor: pointer;
color:#222;
background-color: #fff;
padding: 15px;
margin: 5px 0 5px;
border: 1px solid #ddd;
}

.search-box .accordion-icon {
position: sticky;
left: 100%; /* 右端に配置 */
transform: translateY(-50%); /* 垂直方向の中央に配置 */
font-size: 14px;
pointer-events: none; /* クリックイベントを無視する */
}

.search-box.active .content {
display: block; /* activeクラスが付与されたら表示する */
}

input[type="checkbox"] + * {
margin-left: 5px;
vertical-align: middle; /* 縦の位置合わせ */
}

/* レコメンド画像をコンテナにフィットさせる */
.relpost-block-single-image {
background-size: cover !important; /* 背景画像をcoverとして表示 */
background-position: center top !important; /* 背景画像の位置を中央に配置 */
}

/* レコメンド画像をセンター */
.relpost-block-container{
float: center !important;
}

/* 検索ボタン */
.feas-submit-button {
min-width:200px;
width:85%;
text-align:center;
font-size: 20px;
text-decoration:none !important;
line-height: 180%;
padding: 20px 10px;
margin: -10px -20px 30px -20px;
background: linear-gradient(180deg, #e6002d 0%, #e6002d 40%, #bf082f 40%, #bf082f 100%);
white-space: nowrap;
color: #fff !important;
font-weight: bold;
border: solid 5px #ffcc63;
border-radius: 50px;
transition: .4s;
}

.feas-submit-button:before {
font-size: 1.0em;
color: #fff;
content: "\f08e";
font-family: "Font Awesome 6 Free"; font-weight: 900; /* [2026-10-13] NG-6 FontAwesome(v4)→FA6 Free(Solid) */
padding-right: 3px;
transition: .4s;
}

.feas-submit-button:hover{
background: linear-gradient(180deg, #e64949 0%, #e64949 40%, #d2011b 40%, #d2011b 100%);
color: #f5f6f9 !important;
font-weight: bold;
border: solid 5px #ffcc63;
cursor: pointer;
}

.feas-submit-button input[type="submit"] {
background-color: transparent; /* 背景色を透明にして親divのデザインを活かす */
border: none;
color:#fff;
cursor: pointer

/* 背景画像アニメ */
.thumbnail {
cursor: pointer; /* ポインターを表示 */
}
}

/* 「」 */
/*.bgb {
padding: 80px 20px;
background-color: rgba(250,244,195,1);
background-image: none, none !important;
background-repeat: no-repeat, no-repeat;
background-position: left top, right bottom;
z-index: 1 !important;
}*/

/* 「」 */
.bga {
padding: 50px 0 50px;
margin: 20px;
background-color: rgba(0, 0, 0, 0.0);
position: relative; /* 子要素の位置指定を可能にする */
z-index: 1 !important;
}

.bga::before {
content: "\f10d"; /* アイコンフォントのUnicode値を設定（例: FontAwesome） */
font-family: "Font Awesome 6 Free"; font-weight: 900; /* [2026-10-13] NG-6 FontAwesome(v4)→FA6 Free(Solid) */ /* 使用するフォントファミリー */
color: rgba(0,0,0, 0.3); /* アイコンの色と透明度を調整 */
font-size: 200%; /* アイコンのサイズ */
position: absolute;
top: 0px;
bottom: 10px;
left: -10px;
}

.bga::after {
content: "\f10e" !important; /* 別のアイコンフォントのUnicode値を設定 */
font-family: "Font Awesome 6 Free"; font-weight: 900; /* [2026-10-13] NG-6 FontAwesome(v4)→FA6 Free(Solid) */ /* 使用するフォントファミリー */
color: rgba(0,0,0, 0.3); /* アイコンの色と透明度を調整 */
font-size: 200%; /* アイコンのサイズ */
position: absolute;
bottom: 0px;
right: -10px;
}
/* ランキング */
.wpp-thumbnail-container{
margin: 20px 10px 0px 20px;
}

.wpp-item-data{
margin:30px 5px;
}

@media screen and (min-width: 768px) {
/* PC表示でカテゴリ名以外のテキストを90%にする */
.wpp-list.wpp-cardview .wpp-item-data {
font-size: 90%;
}
.wpp-list.wpp-cardview .wpp-excerpt {
font-size: 90%;
}
}
.wpp-list.wpp-cardview .taxonomies {
font-weight: bold; /* カテゴリー名を太字にする */
}

/* 投稿ページtable */
/*.content table {
margin: 20px 0px !important;
width:100% !important; 
border-collapse: collapse !important; 
border: 5px solid #000 !important; 
box-shadow: 0px 2px 2px #ddd !important;
line-height: 180% !important;
background: #fff !important;
}

.content table tr {
margin: 20px 0px !important;
background: #fff !important;
color: #222 !important;
font-weight: 300 !important;
}

.content table th {
    background: #fff !important;
    color: #222 !important;
    font-weight: 500 !important;
    border: 1px solid #ddd;
	padding: 10px !important;
}


.content table td {
background: #fff !important;
color: #222 !important;
font-weight: 500 !important;
    border: 1px solid #ddd;
	padding: 10px !important;
}*/

/* 投稿ページtable */
.article-table {
width: 100%;
border-collapse: collapse;
overflow-x: auto;
display: block;
	margin-bottom:30px;
}
.article-table caption {
text-align: left;
font-weight: bold;
margin-bottom: 8px;
}
.article-table th,
.article-table td {
border: 1px solid #ddd;
padding: 8px;
white-space: nowrap; /* これで折り返しを防ぎます */
}
.article-table th {
background-color: #f4f4f4;
text-align: left;
}
.article-table tr:nth-child(even) {
background-color: #f9f9f9;
}
.article-table tr:hover {
background-color: #f1f1f1;
}
.article-table-container {
overflow-x: auto; /* スライダーが表示されるようにします */
width: 100%;
}

.wpulike {
margin: -73 0 0 0 !important;
}

/* ゲートページレイアウト */
button.age-gate-submit-no, button.age-gate-submit-yes, button.age-gate__submit--no, button.age-gate__submit--yes{
font-size :20px !important;
margin-top: 20px;
padding: 5px 10px !important;
}
.age-gate-fields, .age-gate__fields{
line-height: 250% !important;
}

.hogan {
/* 方眼紙模様に必須のスタイル */
background-image: linear-gradient(0deg, transparent calc(100% - 1px), #f1f1f1 calc(100% - 1px)),
linear-gradient(90deg, transparent calc(100% - 1px), #f1f1f1 calc(100% - 1px));
background-size: 8px 8px;
background-repeat: repeat;
background-position: center center;
/* 以下任意のスタイル */
padding: 10px;
}
/* イエローアンダーライン太字 */
.yellow {
background: linear-gradient(transparent 0%, #ffd85f 0%);
display: inline;
font-size: 150%;
margin: 10px 0;
padding: 0px 5px;
line-height: 180%;
font-weight: bold;
}
/* ネイビーアンダーライン太字 */
.pink {
background: linear-gradient(transparent 0%, #fe647d 0%);
display: inline;
font-size: 150%;
color:#fff;
margin: 0 0px;
padding: 0 10px;
line-height: 180%;
font-weight: bold;
}

/*目次に戻るボタン*/
.hi-mkj {
display: inline-block;
position: fixed;
bottom: 80px;
left: 13px;
height: 60px;
width: 60px;
line-height:60px;
text-align: center;
opacity: 0.8;
border-radius: 50%;
z-index: 5;
text-decoration: none!important;
background: #fec400!important;
border: 1px solid #000;
color: #000!important;
}
.hi-mkj:after {
content: "目次へ";
position: absolute;
top: 15px;
left: 17px;
font-size: 8px;
}
.hi-mkj:before {
font-family: "Font Awesome 6 Free"; font-weight: 900; /* [2026-10-13] NG-6 FontAwesome(v4)→FA6 Free(Solid) */
content: "\f0ca";
position: absolute;
top: -5px;
left: 17px;
font-size: 26px;
}

.random-featured-image{
text-align: center;
}
.wp-block-image{
text-align: center;
}

/* ブログカード */
.blog-card {
position: relative;
border: 5px solid #000;
background-color: #fff;
word-wrap: break-word;
box-sizing: border-box;
max-width: 100%;
margin: 1em 0;
border-radius: 15px;
box-shadow: 0px 0px 5px #ccc !important;
}

.blog-card:hover {
cursor: pointer;
border: 5px solid #bbb;
}

.blog-card a {
text-decoration: none;
display: block;
}

.blog-card a:hover {
color: #333;
text-decoration: none;
}

/* 右上：1枚目（左側） */
/* .blog-card::before{
content: "";
position: absolute;
top: -55px;
right: 0px; /* ← 2枚目の左にずらす */
/* width: 50px;
height: 50px;
background: none no-repeat center / contain;
z-index: -1;
pointer-events: none;
} */

.blog-card::after {
content: "";
position: absolute;
top: 78%;
right: 5px;
width: 80px;
height: 67px;
background-image: none !important; /* 任意画像 */
background-size: contain;
background-repeat: no-repeat;
z-index: 9999;
pointer-events: none; /* クリック邪魔しない */
}

.blog-card-thumbnail {
width: 150px;
height: 150px;
display: table-cell;      /* ← ここは元に戻す */
vertical-align: middle;
overflow: hidden;         /* 黒帯防止 */
background: transparent;  /* 黒消し */
}

.blog-card-thumbnail img {
width: 100%;
height: 100%;
border-radius:10px 0px 0px 10px;
object-fit: cover;        /* 枠を埋める */
display: block;
}

.blog-card-content {
display: table-cell;
vertical-align: middle;
padding: 0.5em;
border-left: #e5e5e5 solid 0px;
}

.blog-card-title {
text-align: left;
font-size: 14px;
font-weight: none;
line-height: 1.4;
margin: 0 10px;
color: #333;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
}

.blog-card-excerpt {
display: none;/*消します*/
}

.blog-card .clear {
clear: both;
}

/*ブログカードでラベルを付ける*/
.blog-card-label{
display: inline-block;
position: absolute;
background-color: rgba(6,6,6,0.9);
top: 0px;
left: 0px;
width: 90px;
height: 25px;
color: #fff;
font-size: 12px;
text-align: center;
text-decoration: none;
line-height: 170%;
transform-origin: 50% 50%;
}
	
@media screen and (max-width: 500px) {
.blog-card-title {
font-size: 13px;
}
.blog-card-thumbnail {
width: 160px;
}
}

@media only screen and (max-width: 780px) {
p {
font-size: 120%;
}
}
/* ブログカードここまで */

/*** 背景動画（画像スライダー置き換え） ***/
.background-slider {
position: relative;
overflow: hidden; /* はみ出し防止 */
}

/* 背景動画 */
.background-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;      /* ← 背景画像の cover と同じ */
z-index: -1;            /* 背景に配置 */
opacity: 0.8;           /* 半透明 */
filter: brightness(0.5) contrast(1.2) saturate(1.1); /* 同じフィルター  */
}

.background-slider.fullbleed{
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}

.background-slider{
position: relative;
width: 100%;
height: 100vh;      /* ←これが決定打 */
overflow: hidden;
}

.background-video{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;         /* -1にしない（tableや他要素に負けることがある） */
}
#background-slider{
border-collapse: collapse;
border-spacing: 0;
}

#background-slider td,
#background-slider tr,
#background-slider tbody{
padding: 0;
margin: 0;
border: 0;
}

/*** 背景動画（画像スライダー置き換え）ここまで ***/

/*** 背景スライダー ***/
.background-slider {
position: relative;
overflow: hidden; /* はみ出し防止 */
}
/* 背景画像のコンテナ */
.background-images {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1; /* 背景に配置 */
}
/* 表示中の背景画像 */
/* 共通スタイル */
.background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
opacity: 0; /* 非表示 */
transition: opacity 1s ease-in-out; /* フェードイン・アウト */
/* 2026-10-01 ヒーロー背景を紫の無地グラデーションに差し替えたため、旧写真用の暗転フィルターは廃止 */
}
.background-image.active {
opacity: 1.0; /* 表示時の透明度 */
}

/* 各背景画像の指定 */
.bg1 {
background-image: none;
background-position: 35% 50%;
}
.bg2 {
background-image: none;
background-position: 35% 50%;
}
.bg3 {
background-image: none;
background-position: 35% 50%;
}

/* ステップバーの全体設定 */
.step-bar {
    display: flex;
    justify-content: space-between;
    background-color: #ddd;
    border-radius: 50px;
    padding: 10px;
	margin: 20px 0;
    width: 100%;
    max-width: 780px;
    margin: auto;
	overflow: hidden; /* はみ出しを防ぐ */
}

/* 各ステップの設定 */
.step {
    flex: 1;
    text-align: center;
    font-size: 16px;
    color: #888;
    padding: 10px 20px; /* ステップ内のスペースを増やす */
    position: relative;
    background-color: #e0e0e0;
    border-radius: 20px;
    transition: background-color 0.3s, color 0.3s;
    /* ステップ間に区切り線 */
    margin-right: 10px; /* ステップ間を広げる */
}

/* 最後のステップは区切り線を削除 */
.step:last-child {
margin-right: 0;
}

/* 現在アクティブなステップ */
.step-active {
background-color: #000;
color: white;
}

/* 横棒のカスタマイズ */
.step-active::after {
    content: '';
    position: absolute;
    top: 50%;
	left: ; /* ステップ内に収めるために左端に位置させる */
    right: -15px;
    transform: translateY(-50%);
    width: 50px; /* 横棒の長さを調整 */
    height: 4px; /* 横棒の太さを調整 */
    background-color: #000;
}

/* 現在アクティブなステップ */
.step-active_02 {
    background-color: #000;
    color: white;
}

/* 横棒のカスタマイズ */
.step-active_02::after {
    content: '';
    position: absolute;
    top: 50%;
	left: ; /* ステップ内に収めるために左端に位置させる */
    right: 0px;
    transform: translateY(-50%);
    width: 50px; /* 横棒の長さを調整 */
    height: 4px; /* 横棒の太さを調整 */
    background-color: #000;
}

/* 他のステップには横棒を表示しない */
.step:not(.step-active)::after {
content: none; /* 横棒を非表示 */
}

/* 斜めメニュー */
.nana{
clip-path: polygon(0 20%, 100% 0, 100% 80%, 0% 100%); 
}
.nanarepeat{
clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 80%);
}

.tug_045 {
display: inline-block;
text-align: center;
font-size: 12px;
text-decoration: none !important;
margin: 2px;
padding: 10px 15px;
white-space: nowrap;
background: #fff;
color:#fff !important;
border: solid 2px #fff;
border-radius: 50px;
transition: .4s;
box-shadow: 0px 3px 3px #eee;
/*line-height: 1.5; 改行 */
}

.tug_045:hover{
background-color:#2e5a1f !important;
color: #fff !important;
border: solid 2px #fff;
}

/*プロフィール枠*/
#author_profile {
border: 1px solid #000;
background-color: rgba(255,255,255,0.9); !important;
max-width: 100%;
margin: 20px 10px;
overflow: hidden;
border-radius: 15px;
}
#author_profile p {
margin-bottom: 20px;
line-height: 1.8;
}
/*この記事を書いた人の見出し*/
#author_profile p.label {
font-size: 14px;
font-weight: bold;
color: #fff;
background: #000;
padding: 10px 15px;
border-radius: 15px 0 0 0;
}
/*名前*/
#author_profile p.author_name {
  font-size: 14px;
  font-weight: bold;
  display: inline-block;
  position: relative;
}
/*名前下の下線*/
#author_profile p.author_name::after {
  content: "";
  border-bottom: solid 3px #000;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
}
/*左側画像ブロック*/
#author_profile .left {
  width: 14%;
  float: left;
  margin: 10px 0 15px 30px;
}
/*画像サイズ*/
#author_profile .left img {
  width: 100%;
}
/*右側テキストブロック*/
#author_profile .right {
  width: 74%;
  float: left;
  font-size: 12px;
  line-height: 1.6;
  padding: 5px 0 20px 30px;
}
/*テキスト下部SNSブロック*/
#author_profile .right ul.author_sns {
  margin: 0;
  border-top: 1px dotted #dddddd;
  margin-top: 15px;
  padding-top: 20px;
}
#author_profile .right ul.author_sns li {
  float: left;
  margin-right: 15px;
  list-style: none;
}
#author_profile .right ul.author_sns li:last-child {
  margin-right: 0;
}
/*SNSアイコンを使う場合は別途アイコンCSSの設定が必要*/
#author_profile .right ul.author_sns li i.icon-facebook {
  color: #fff;
  background-color: #194c80;
  margin-right: 8px;
  padding: 6px 8px 0;
  position: relative;
  bottom: -3px;
}
/*SP時の挙動（画面サイズが小さい時）*/
@media (max-width: 480px) {
#author_profile p.author_name {
text-align: center;
}
#author_profile .left {
width: 100%;
float: none;
margin-left: 0;
margin-bottom: 0;
text-align: center;
}
#author_profile .left img {
width: 33%;
}
#author_profile .right {
width: 100%;
float: none;
padding: 10px 20px 0;
}
#author_profile .right ul.author_sns li {
margin-bottom: 20px;
}
}

/* 急上昇ワードPC時、右200px空け */
/* モバイルおよびタブレット向けデフォルトスタイル */
.custom-padding {
padding: 20px 10px 134px 10px;
}

/* PC閲覧時のスタイル */
@media (min-width: 780px) {
.custom-padding {
padding: 20px 250px 134px 10px;
}
}

/* ヘッダー画像制御 */
.menu-item > a i.fa-folder {
position: absolute;
top: 20px; /* 上方向に完全にはみ出す */
right: 135px;
margin-right:10px;
transform: translateX(-50%);
font-size: 2.0rem; /* 必要ならサイズ調整 */
line-height: 1;
z-index: 2;
		color:#fff;
}

.menu-item > a i.fa-hashtag {
  position: absolute;
  top: 20px; /* 上方向に完全にはみ出す */
  left: -0.5px;
  transform: translateX(-50%);
  font-size: 2.0rem; /* 必要ならサイズ調整 */
  line-height: 1;
  z-index: 10;
	color:#fff;
}

.none_03.zenmen::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 60%; /* フィルターの幅（調整可能） */
height: 0%;
background: linear-gradient(to left, rgba(255,255,255,1.0), rgba(255,255,255,0.0));
pointer-events: none; /* クリック操作などに干渉しない */
z-index: 1;
}

/* デフォルトの画像サイズ */
.top-midashi {
margin: -100% -25px 0px 0px;
width: 200px;
}
/* モバイル閲覧時（最大幅767px）に画像サイズを150pxに変更 */
@media (max-width: 767px) {
.top-midashi {
margin: -100% -40px 20px 0px !important;
width: 150px;
}
}

/* クラス要素に背景色と背景画像を設定 */
.custom-class {
    background-color: ; /* 背景色 */
    background-image: none; /* 背景画像 */
    background-size: cover; /* 画像をコンテナに合わせて拡大縮小 */
    background-position: center; /* 画像の位置を中央に */
}


/* 画像6枚横並び */
        .image-container {
            position: relative;
            width: 100%;
            max-width: 480px;
            height: 253px;
            margin-top: 30px;
            margin-left: auto;
            margin-right: auto;
            display: flex;
            justify-content: center; /* 水平方向に中央揃え */
            align-items: center; /* 垂直方向に中央揃え */
        }

        .image-container img {
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .image-A {
            transform: rotate(3deg); /* 画像Aを斜めに回転 */
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); /* 画像Aに影を追加 */
        }

        .image-B {
            transform: rotate(-3deg); /* 画像Bを反対方向に斜めに回転 */
            box-shadow: -5px -5px 15px rgba(0, 0, 0, 0.3); /* 画像Bに影を追加 */
        }

        .image-C {
            transform: rotate(-3deg); /* 画像Aを斜めに回転 */
            box-shadow: -5px -5px 15px rgba(0, 0, 0, 0.3); /* 画像Aに影を追加 */
        }

        .image-D {
            transform: rotate(3deg); /* 画像Bを反対方向に斜めに回転 */
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); /* 画像Bに影を追加 */
        }




/* 親要素の設定 */
.recent-posts-wrapper {
    position: relative; /* 親要素にrelativeを設定 */
}

/* ボタンラッパー */
.more-button-wrapper {
text-align: center; /* ボタンを中央揃え */
position: relative; /* ボタンラッパーを相対的に配置 */
margin-top: 30px !important;
}

/* トップページ以外で「もっと見る」ボタンの前に100pxの空間を追加 */
body:not(.home) .more-button-wrapper {
margin-top: 50px; /* トップページ以外でのみボタンの上に空間を追加 */
bottom:-10px !important;
top:25px;
}


/* アイコンのスタイル */
.more-button i {
margin-left: 8px; /* アイコンとテキストの間隔 */
}


.category-slider-section {
margin-bottom: 2em;
}

.category-title {
  font-size: 1.5em;
  margin-bottom: 0.5em;
}

.category-swiper .swiper-slide {
  width: auto;        /* 各スライド幅をコンテンツに合わせる */
}

.category-swiper img {
  display: block;
  height: auto;
  max-width: 100%;
  border-radius: 4px;
}
/* 例：medium が 300×200px だったら・・・ */
.category-swiper .swiper-slide img {
  width: 150px !important;
  height: 100px !important;
  object-fit: cover;
}



/* スライダーを包むコンテナは position: relative が前提 */
.category-swiper {
  position: relative;
}

/* Swiper のデフォルト矢印 */
.category-swiper .swiper-button-prev,
.category-swiper .swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(10%);
  z-index: 100;            /* スライドリンクより必ず前面 */
  width: 44px;
  height: 44px;
  cursor: pointer;
  pointer-events: auto;     /* 矢印でのクリックを許可 */
}

/* スライド内のリンクは下層に */
.category-swiper .swiper-slide a {
  position: relative;
  z-index: 1;
}


/* デフォルト矢印（:after）を消す */
.swiper-button-prev::after,
.swiper-button-next::after {
  display: none;
}

/* アイコンをセンターに */
.swiper-button-prev,
.swiper-button-next {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;      /* アイコンサイズ調整 */
  color: #333;           /* アイコン色 */
}

.latest-posts-anchor {
  position: absolute;
  top: 80vh; /* ファーストビューの下部80% */
  left: 0;
  width: 100%;
  z-index: 5;
}

/*ヘッダー背景グリッド化*/
/* 背景画像のコンテナ */
.random-bg-container {
position: relative;
width: 100%;
height: auto; /* 高さを任意で調整 */
overflow: hidden;
background: linear-gradient(to right, rgba(74,20,140,0.85), rgba(123,45,142,0.85));
isolation: isolate; /* z-index:-1 の .background-grid を親の積層コンテキストに閉じ込める（TOPで .animated-background に隠れる対策） */
}

/* 背景グリッド */
.background-grid {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
grid-auto-rows: 150px;
gap: 2px; /* 画像間の隙間 */
z-index: -1;
opacity: 0.25; /* 画像を薄く、橙の紗を濃く */
}

/* 各画像 */
.bg-item {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
opacity: 0.7;
}

@media (max-width: 768px) {
.background-grid {
grid-template-columns: repeat(auto-fill, minmax(75px, 1fr)); /* 150px → 75px */
grid-auto-rows: 75px; /* 150px → 75px */
}
}


/* ヘッダーキャラクター（01_左上）画像位置決め */
/* デフォルト（スマホ/タブレット）は left:0 */
.float-pos {
left:50% !important;
top:50%;
width:200px;
position: absolute !important;
transform: translateX(-50%) !important;
}

/* PC表示時 (画面幅1025px以上) のみ中央寄せ */
@media screen and (min-width: 1025px) {
.float-pos {
top: 57% !important;
left: 50% !important;
width: 255px;
z-index:0;
position: absolute !important;
transform: translateX(-50%) !important;
}
}

/* 画面幅680px以下のときのみ left:25% */
@media screen and (max-width: 680px) {
.float-pos {
left: 50% !important;
top:51%; !important;
width:175px;
position: absolute !important;
transform: translateX(-50%) !important;
}
}
/* ヘッダーキャラクター（02_右下）画像位置決め */
/* デフォルト（スマホ/タブレット）は left:0 */
.float-pos_02 {
top:70%;
right:0%;
width:110px;
position:absolute;
}

/* PC表示時 (画面幅1025px以上) のみ left:30% */
@media screen and (min-width: 1025px) {
.float-pos_02 {
top:80%; !important;
right:10% !important;
width:120px;
z-index:99 !important;
}
}
/* 画面幅780px以下のときのみ left:25% */
@media screen and (max-width: 680px) {
.float-pos_02 {
top:70%; !important;
width:80px;
}
}

/* ヘッダーキャラクター（03_左上）画像位置決め */
/* デフォルト（スマホ/タブレット）は left:0 */
.float-pos_03 {
left:220px !important;
top:-34%;
width:450px;
position:absolute;
}

/* PC表示時 (画面幅1025px以上) のみ left:30% */
@media screen and (min-width: 1025px) {
.float-pos_03 {
top:-40%;
left:30% !important;
width:35vw;
}
}

/* PC表示時 (画面幅1500px以上) のみ left:30% */
@media screen and (min-width: 1500px) {
.float-pos_03 {
top:-50%;
left:30% !important;
width:35vw;
}
}

/* PC表示時 (画面幅2000px以上) のみ left:30% */
@media screen and (min-width: 2000px) {
.float-pos_03 {
top:-60%;
left:30% !important;
width:35vw;
}
}

/* 画面幅780px以下のときのみ中央寄せ */
@media screen and (max-width: 680px) {
.float-pos_03 {
position: absolute;       /* 必要なら relative 親の中で絶対配置 */
left: 10%;  /* 横中央に配置 */
top: -20%;
transform: translateX(-50%); /* 左右中央補正 */
max-width: 300px !important;
text-align: center; 
}
}

/*スクロールダウン*/
#wrapper {
display: table;
width:100%;
height:100%;
background: ;
}
#wrapper-inner {
display: table-cell;
vertical-align:middle;
width:100%;
height:100%;
}

#scroll-down {
display: block;
position: relative;
padding-top: 90px;
text-align:center;
padding-left:1.5px;
}
/*.arrow-down {
display: block;
margin: 0 auto;
width: 10px;
height: 0px;
}
.arrow-down:after {
content: '';
display: block;
padding: 0;
width: 8px;
height: 8px;
border-top: 2px solid #000;
border-right: 2px solid #000;
behavior: url(-ms-transform.htc);
-moz-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
-o-transform: rotate(135deg);
-ms-transform: rotate(135deg);
transform: rotate(135deg);
}*/
#scroll-title {
display: block;
text-transform: uppercase;
color: #f1f1f1;
font-size:12px;
font-weight:bold;
letter-spacing:.1em;
}
#scroll-down::before {
-webkit-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
/* Safari 4+ */
-moz-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
/* Fx 5+ */
-o-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
/* Opera 12+ */
animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
/* IE 10+, Fx 29+ */
position: absolute;
top: 5px;
left: 50%;
margin-left: -1px;
width: 1px;
height: 150px;
background: #f1f1f1;
content: ' ';
}
@-webkit-keyframes elasticus {
    0% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    50% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50.1% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    100% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
}
@-moz-keyframes elasticus {
    0% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    50% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50.1% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    100% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
}
@-o-keyframes elasticus {
    0% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    50% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50.1% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    100% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
}
@keyframes elasticus {
    0% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    50% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50.1% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    100% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
}

/*矢印下に下げる*/
@media screen and (min-width: 767px) {
#scroll-down {
top:100px !important;
}
}

/*スクロールダウン非表示*/
@media screen and (min-width: 1024px) {
#scroll-down {
top:150px !important;
display: none;
}
}
}


/*スライダー同サイズ*/
.wa_featured_img {
  position: relative;
  width: 100%;  height: 100vh !important;
  aspect-ratio: 16/20;  /* 全て同じ比率に固定 */
  overflow: hidden;

}

.wa_featured_img .wa_card_img {
position: absolute;
inset: 0;
width: 350px;
height: 340px;
border-radius:10px !important;
object-fit: cover;
object-position: center;
display: block;
}







/* WPP（WordPress Popular Posts）のカードリストの背景を黒にする */
.wpp-list.wpp-cardview {
    background-color: transparent; /* 背景色は透明に */
    background-image: none; /* 画像URLを指定 */
    background-repeat: repeat-y;
    background-position: center bottom;
    background-size: cover; /* 必要に応じて cover, contain に変更可 */
    padding: 50px 0;
}
@media screen and (min-width: 760px) {
.wpp-list.wpp-cardview {
border-radius: 10px;
padding: 50px 10px;
}
}

/*.wpp-list.wpp-cardview {
background-color: #2b4262;
padding: 20px 0;
}*/

/* 各アイテムの背景を黒にする */
.wpp-list.wpp-cardview li {
background-color: ;
}

/* テキストが読めるように文字色も白に */
.wpp-list.wpp-cardview .wpp-item-data,
.wpp-list.wpp-cardview .wpp-post-title,
.wpp-list.wpp-cardview .wpp-taxonomy {
color: #fff !important;
unicode-bidi: isolate;
}
.wpp-list.wpp-cardview {
font-family: 'Arial', 'Helvetica', 'sans-serif' !important;
color: #fff !important;
}

/*　丸形カテゴリー自動設置プログラムここから　*/
.circular-image_03 {
  display: inline-block;       /* 枠線を正しく反映させる */
  width: 120px;                /* 必要に応じて調整 */
  height: 120px;               /* 必要に応じて調整 */
  border-radius: 50%;          /* 丸くする */
  object-fit: cover;           /* アイキャッチを枠にフィット */
  border: 5px solid #ddd !important;  /* ★ 枠線を強制的に表示 */
  box-sizing: border-box;      /* 枠線込みでサイズを維持 */
}

/* 丸画像に1px黒枠（見えない場合の保険含む） */
.circular-image_03{
  display:inline-block;
  width:120px; height:120px;
  border-radius:50%;
  object-fit:cover;
  border:5px solid #ddd !important;
  box-sizing:border-box;
}

/* グリッド基本（例） */
.navi-container .category-container{
  position:relative;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 24px;         /* アイテム間の余白 */
  justify-content: flex-start !important; /* ★ 左寄せ */
  align-items: flex-start;     /* 上揃え */
}

/* 基本：左寄せ・折り返し・ギャップ */
.navi-container .category-container{
  --cat-gap-x: 10px;
  --cat-gap-y: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--cat-gap-y) var(--cat-gap-x);
  justify-content: flex-start; /* ★左寄せ */
  align-items: flex-start;
}

/* 各アイテムの共通（幅はブレークポイントで上書き） */
.navi-container .category-container .category{
  /* 初期値（モバイルを基準に2列） */
  flex: 0 0 calc((100% - var(--cat-gap-x)) / 2);
}

/* 丸画像サイズ（モバイル） */
.circular-image_03{
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid #ddd !important;
  box-sizing: border-box;
}

/* タブレット小（~768px）：3列 */
@media (min-width: 481px){
  .navi-container .category-container .category{
    flex: 0 0 calc((100% - var(--cat-gap-x) * 2) / 3);
  }
  .circular-image{ width: 110px; height: 110px; }
}

/* タブレット大（~1024px）：4列 */
@media (min-width: 769px){
  .navi-container .category-container .category{
    flex: 0 0 calc((100% - var(--cat-gap-x) * 3) / 4);
  }
  .circular-image{ width: 118px; height: 118px; }
}

/* デスクトップ（~1280px）：5列 */
@media (min-width: 1025px){
  .navi-container .category-container .category{
    flex: 0 0 calc((100% - var(--cat-gap-x) * 4) / 5);
  }
  .circular-image{ width: 120px; height: 120px; }
}

/* ワイド（1280px~）：6列 */
@media (min-width: 1281px){
  .navi-container .category-container .category{
    flex: 0 0 calc((100% - var(--cat-gap-x) * 5) / 6);
  }
}




/* 初期は initial_visible を超えた要素を非表示 */
.cat-collapsible .cat-hidden{ display:none; }

/* 下端フェード */
.cat-collapsible::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:60px;
  pointer-events:none;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 100%, #f2f2f2 100%);
}

/* 展開状態 */
.cat-collapsible.is-expanded::after{ display:none; }
.cat-collapsible.is-expanded .cat-hidden{ display:block; }

/* ボタン */
.cat-more-wrap{ margin-top:12px; text-align:center; }
.cat-more-btn{
	appearance:none;
	display: inline-block;
    text-align: center;
    font-size: 12px;
    text-decoration: none !important;
    margin: 2px;
    padding: 7px 15px;
    white-space: nowrap;
    background: #fff;
    color: #333;
    border: solid 2px #333;
    border-radius: 50px;
	cursor:pointer;
    transition: .4s;
	
	
	
	
  /*appearance:none; border:1px solid #333; background:#fff; color:#111;
  font-weight:700; padding:10px 20px; border-radius:999px; cursor:pointer;
  transition: box-shadow .2s ease, transform .08s ease;*/
}
.cat-more-btn:hover{ box-shadow:0 4px 12px rgba(0,0,0,0.12); transform:translateY(-1px); }
.cat-more-btn[aria-expanded="true"]{ background:#111; color:#fff; border-color:#111; }

/* ボタンスタイル */
.tug_06 {
    text-align: center;
    font-size: 90%;
    text-decoration: none !important;
    padding: 7px 15px;
    white-space: nowrap;
    background-color: #fff !important;
    color: #333 !important;
    border: solid 2px #333;
    border-radius: 50px;
    transition: .4s;
    display: inline-block;
    margin: 0;                  /* 上下余白は親に任せる */
}
.tug_06:hover {
    background-color: #333 !important;
    color: #fff !important;
    border: solid 2px #333 !important;
}

/* カテゴリーメニュー説明文 */
.category_description {
color: #777;
font-size: 90%;
line-height: 160%;
margin: 20px 0px;
}

/* メニューデザイン */
/* 親コンテナ */
.category-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 0px; /* アイテム間の隙間 */
box-sizing: border-box; /* width、padding、borderを含めた計算にする */
}
/* 各カテゴリー */
.category {
width: calc(20.00% - 20px); /* 6個横並び、gap分を差し引いて調整 */
text-align: center;
cursor: pointer;
margin-bottom: 20px;
box-sizing: border-box; /* ボーダーも含めてサイズ計算 */
}
.category img {
width: 125px;
height: 125px;
object-fit: cover;
object-position: right top;
margin: 0px;
border-radius: 50%;
border: 5px solid #fff;
background-color:#fff ;
}
img.category_cat-2 {
width: 120px;
height: 120px;
object-fit: cover;
object-position: 50% 10px;
margin: 10px;
border-radius: 50%;
border: 5px solid #cac023;
background-color:#000 ;
}

/* 画面幅が1280px以上のとき */
@media (min-width: 1280px) {
.category img {
width: 100px;
height: 100px;
}
}
/* カテゴリーID=1だけ coverに戻す */
.category.cat-1 img {
object-fit: cover;
object-position: center top; /* ★ 画像を右寄せ */
margin: 0px; /* 中央に戻す or 調整 */
background-color: #fff !important;
}
.category a {
display: block; /* ← インライン→ブロック要素化 */
font-size: 90%;
font-weight :bold;
color: inherit;
text-align: center !important;
}
.category a:hover {
color: #000;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
.category {
width: calc(20.00% - 0px); /* 2個横並び */
}
}
@media (max-width: 480px) {
.category {
width: calc(50% - 0px); /* 2個横並び */
}
}
/*　丸形カテゴリー自動設置プログラムここまで　*/

/* トップタグ別スライダー表示ここから */
.category-slider-section {
margin-bottom: 2em;
}

.category-title {
font-size: 1.5em;
margin-bottom: 0.5em;
}

.category-swiper .swiper-slide {
width: auto;        /* 各スライド幅をコンテンツに合わせる */
}

.category-swiper img {
display: block;
height: auto;
max-width: 100%;
border-radius: 4px;
}
/* 例：medium が 300×200px だったら・・・ */
.category-swiper .swiper-slide img {
width: 150px !important;
height: 100px !important;
object-fit: cover;
}

/* スライダーを包むコンテナは position: relative が前提 */
.category-swiper {
position: relative;
}

/* Swiper のデフォルト矢印 */
.category-swiper .swiper-button-prev,
.category-swiper .swiper-button-next {
position: absolute;
top: 25% !important;
transform: translateY(10%);
padding-top:0.5px;
z-index: 100;            /* スライドリンクより必ず前面 */
width: 60px;
height: 60px;
cursor: pointer;
pointer-events: auto;     /* 矢印でのクリックを許可 */
}

/* スライド内のリンクは下層に */
.category-swiper .swiper-slide a {
position: relative;
z-index: 1;
}

/* デフォルト矢印（:after）を消す */
.swiper-button-prev::after,
.swiper-button-next::after {
display: none;
}

/* アイコンをセンターに */
.swiper-button-prev,
.swiper-button-next {
display: flex;
align-items: center;
justify-content: center;
font-size: 1.6em;      /* アイコンサイズ調整 */
color: #fff;/* アイコン色 */
width: 60px !important;
height: 60px !important;
border-radius: 50%;
background-color: ;
/*box-shadow: 0px 0px 0px #000;*/
}

.slide-title {
margin: 5px;
font-size: 12px;
line-height: 1.4;
color: #222; /* 背景が暗い場合は白文字 */
text-align: left;
max-width: 150px;       /* サムネイルの幅に合わせる */
word-break: break-word; /* 長い単語でも折り返し */
white-space: normal;    /* 自然に改行を許可 */
box-sizing: border-box; /* パディング含めて幅計算 */
}

.tag-cloud{
margin: 5px 0;
}
/* トップタグ別スライダー表示ここまで */

/* トップタグ別スライダー表示ここから */
.category-slider-section {
margin-bottom: 2em;
}

.category-title {
font-size: 1.5em;
margin-bottom: 0.5em;
}

.category-swiper .swiper-slide {
width: auto;        /* 各スライド幅をコンテンツに合わせる */
}

.category-swiper img {
display: block;
height: auto;
max-width: 100%;
border-radius: 4px;
}
/* 例：medium が 300×200px だったら・・・ */
.category-swiper .swiper-slide img {
width: 150px !important;
height: 100px !important;
object-fit: cover;
}

/* スライダーを包むコンテナは position: relative が前提 */
.category-swiper {
position: relative;
}

/* Swiper のデフォルト矢印 */
.category-swiper .swiper-button-prev,
.category-swiper .swiper-button-next {
position: absolute;
top: 23% !important;
transform: translateY(10%);
z-index: 100;            /* スライドリンクより必ず前面 */
width: 30px;
height: 30px;
cursor: pointer;
pointer-events: auto;     /* 矢印でのクリックを許可 */
}

/* スライド内のリンクは下層に */
.category-swiper .swiper-slide a {
position: relative;
z-index: 1;
}

/* デフォルト矢印（:after）を消す */
.swiper-button-prev::after,
.swiper-button-next::after {
display: none;
}

/* アイコンをセンターに */
.swiper-button-prev,
.swiper-button-next {
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5em;/* アイコンサイズ調整 */
color: #fff;/* アイコン色 */
}

.slide-title {
margin: 5px;
font-size: 12px;
line-height: 1.4;
color: #222; /* 背景が暗い場合は白文字 */
text-align: left;
max-width: 150px;       /* サムネイルの幅に合わせる */
word-break: break-word; /* 長い単語でも折り返し */
white-space: normal;    /* 自然に改行を許可 */
box-sizing: border-box; /* パディング含めて幅計算 */
}

.tag-cloud{
margin: 5px 0;
}
/* トップタグ別スライダー表示ここまで */


/* =========================
   比較テーブル（スリム統合版）
   ========================= */
.table-sp.lage.scroll{
  --acc:#0f5bff; --bg:#fff; --bd:#e8e8ee;
  width:100%;
  display:block;                 /* 横だけスクロール */
  overflow-x:auto;
  overflow-y:hidden;             /* 縦スライダー無し */
  -webkit-overflow-scrolling:touch;
  background:var(--bg);
  border-radius:2px;
  box-shadow:0 3px 3px rgba(0,0,0,.10);
  border-spacing:0;
}
/* 中身は“テーブルのまま”描画 */
.table-sp.lage.scroll > tbody{
  display:table; width:100%;
  border-collapse:separate; border-spacing:0;
}

.table-sp.lage.scroll td{
  padding:14px 12px;
  border-bottom:1px solid var(--bd);
  vertical-align:middle;
  text-align:center;             /* 基本は中央 */
  word-break:break-word; overflow-wrap:anywhere;
}

/* 左ラベル列（固定＆左寄せ） */
.table-sp.lage.scroll tr > td:first-child{
  width:16% !important;
  background:#f6f8fb !important;
  font-weight:700;
  position:sticky; left:0; z-index:3;
  border-right:1px solid var(--bd);
  white-space:nowrap;
  text-align:left !important;
}

/* 2〜5列目は等幅 */
.table-sp.lage.scroll tr > td:nth-child(n+2){
  width:calc((100% - 16%) / 4) !important;
}

/* 1行目（ロゴ行）を少しリッチに */
.table-sp.lage.scroll tbody tr:first-child td{
  padding:20px 14px;
  background:linear-gradient(180deg,#fafcff,transparent);
}

/* ロゴリンクのカード化＆ホバー */
.table-sp.lage.scroll .bottom a{
  display:inline-block; background:#fff; border-radius:12px;
  padding:10px 14px;

  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.table-sp.lage.scroll .bottom a:hover{
  transform:translateY(-4px) scale(1.03);

  filter:saturate(1.1) contrast(1.05);
}

/* ロゴ画像は枠内に収める */
.table-sp.lage.scroll .bottom img{
  display:block; margin:auto;
  max-width:160px; max-height:80px;
  object-fit:contain;
}

/* アイコンの視認性 */
.table-sp.lage.scroll td .fa-bullseye{ color:#00b67a; filter:drop-shadow(0 2px 2px rgba(0,0,0,.15)); }
.table-sp.lage.scroll td .fa-circle  { color:#cbd3e1; }

/* 交互色（ラベル列除外） */
.table-sp.lage.scroll tbody tr:nth-child(odd) td:not([bgcolor]){ background:#fbfcfe; }

/* 「仮想通貨取引」行が左に寄りがちな対策（現仕様で7行目） */
.table-sp.lage.scroll tbody tr:nth-child(7) td:not([bgcolor]){
  text-align:center !important;
}

/* 備考（最終行）だけ左寄せ */
.table-sp.lage.scroll tbody tr:last-child td:not([bgcolor]){
  text-align:left !important;
}
.table-sp.lage.scroll tbody tr:last-child td *{
  text-align:inherit;
}

/* スマホ微調整 */
@media (max-width:768px){
  .table-sp.lage.scroll .bottom a{ padding:8px 10px; }
  .table-sp.lage.scroll .bottom img{ max-width:140px; max-height:64px; }
}



/* ラッパーに“横だけスクロール”を担当させる。縦は切らない */
.cmp-table-wrap{
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  background: ;
margin-top:-12px;
}

/* テーブル本体は“本来のtable”のまま＝高さは内容に追従、縦は切れない */
.cmp-table-wrap .table-sp.lage.scroll{
  display: table !important;
  width: 100% !important;
  border-collapse: separate;
  border-spacing: 0;
  overflow: visible !important;   /* ← hidden を無効化 */
}

/* 左ラベル列のstickyを維持 */
.cmp-table-wrap .table-sp.lage.scroll td[bgcolor]{
  position: sticky; left: 0; z-index: 3;
}





/* ===== Hero Copy (Southern Link風) ===== */
.sl-hero-copy{
position:absolute;              /* ヒーローの上に重ねる */
inset:0;
display:grid;
place-items:center;             /* 中央揃え */
text-align:center;
pointer-events:none;            /* 背景のCTA等のクリックを邪魔しない */
padding:clamp(20px,4vw,48px);
}

/* 日本語：2フレーズを少し離して横並び（小さめ画面では自動で折り返し） */
.sl-jp{
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
gap:min(0vw,64px);              /* ← フレーズ間の“間” */
line-height:1.15;
margin:-15vh;
}
/* 780px以下は余白を +15vh に */
@media (max-width: 780px){
.sl-jp{
margin: -15vh 0 0;
gap:min(3vw,64px);              /* ← フレーズ間の“間” */
}
}

.sl-word{
font-size:clamp(32px,6vw,52px); /* 画面に応じて可変 */
font-weight:700;
letter-spacing:.1em;
color:#eee; /* 明るい背景なら #111 に変更 */
text-shadow:0 0px 0px rgba(0,0,0,0.0);
opacity:0; transform:translateY(12px);
animation:sl-fade-up 3.6s ease forwards;
animation-delay: 0s;            /* ← 3秒待つ */
}
.sl-word.zenmen_02{
white-space: nowrap;/* 行内で折り返さない */
word-break: keep-all;/* CJKでも極力改行させない */
overflow-wrap: normal;/* 強制折返し無効 */
hyphens: none; -webkit-hyphens: none;
flex: 0 0 auto;/* flex収縮での途中改行も防ぐ */
display: inline-block;/* 念のため */
}

/* 後ろのフレーズを少し遅らせて余韻 */
.sl-word:last-child{ animation-delay:1.6s; }

/* 英語のサブコピー（任意） */
.sl-en{
font-size:clamp(18px,1.6vw,16px);
letter-spacing:.2em;
color:#fff;
text-shadow:0 2px 10px rgba(0,0,0,.5);
opacity:.9;
margin:5vh 0 .8rem;
font-weight: 900 !important;
}

/* 見えない“間”だけを担うスペーサー（幅は変数で調整も可） */
.sl-gap{
width:clamp(0px,0vw,120px); height:1px; 
}
/* ふわっと出す */
@keyframes sl-fade-up{
to{ opacity:1; transform:none; }
}
/* もしヒーローが position:static なら、親を relative にしてね */
.hero, .site-hero, .wp-block-cover{ position:relative; }
/* ===== Hero Copy (Southern Link風) ここまで===== */





/* サイドバー内で“上に来たら引っかかるここから” */
@media (min-width: 780px) {
.sticky-box{
position: sticky;
top: 80px;/* ここで止めるオフセット */
}
}
/* サイドバー内で“上に来たら引っかかるここまで” */

/* ===== ウィジェットに改行反映ここから ===== */
#custom_html-4 .textwidget.custom-html-widget,
#custom_html-3 .textwidget.custom-html-widget{
white-space: pre-line;
}
/* ===== ウィジェットに改行反映ここまで ===== */

/* ===== スライダー初期は非表示（レイアウトは保つ）ここから ===== */
#slider-9342-wrap{ visibility:hidden; opacity:0; transition:opacity .25s ease; }
/* 準備できたら表示 */
#slider-9342-wrap.is-ready{ visibility:visible; opacity:1; }

/* 任意：レイアウトジャンプを抑える仮高さ（実高さに合わせて調整） */
#slider-9342-wrap{ min-height: 550px; } /* 不要なら削除OK */
/* ===== スライダー初期は非表示（レイアウトは保つ）ここまで ===== */

/*** 背景アニメーション記述 ***/
.animated-background {
position: absolute; /* スクロールに追従 */
top: 0;
left: 0;
width: 100%; /* 画面幅いっぱいに制限 */
height: auto; /* 高さはJavaScriptで調整 */
overflow: hidden; /* はみ出しを防止 */
z-index: 0;
opacity: 0; /* 初期状態で透明 */
transition: opacity 1.5s ease-in-out; /* フェードインのアニメーション */
}

/* 表示状態 */
.animated-background.fade-in {
opacity: 1; /* 表示する */
}

/* 細長い角丸直線のスタイル */
.line {
position: absolute;
border-radius: 50px; /* 角丸の設定 */
opacity: 0.7;
animation: moveLines 6s infinite alternate ease-in-out;
max-width: 100%; /* 要素が幅を超えないよう制限 */
}
/* 太さのバリエーション */
.line-thin {
width: 50%; /* 画面幅の50% */
height: 15px;
}
.line-medium {
width: 30%; /* 画面幅の70% */
height: 60px;
}
.line-thick {
width: 10%; /* 画面幅の90% */
height: 30px;
}
/* パステルカラー */
.pastel-blue {
background: #b6c9d9; /* ダークネイビー */
}
.pastel-pink {
background: #f6d5be; /* ペールスカイブルー */
}
/* ランダム配置と動き */
/* 軽量化（あればベースに併記OK） */
.line {
will-change: transform, opacity;
pointer-events: none;
}

/* —— デスクトップ（軽量表示：20個） —— */
@media (min-width: 769px) {
  /* 21個目以降は非表示で軽量化 */
  .line:nth-child(n + 21) { display: none; }
  .line:nth-child(1)  { top: 1%;  left: 8%;   transform: rotate(150deg) translateX(0); animation-delay: 0s; }
  .line:nth-child(2)  { top: 2%;  left: 46%;  transform: rotate(150deg) translateX(0); animation-delay: 0.6s; }
  .line:nth-child(3)  { top: 14.5%; left: 13.5%;  transform: rotate(150deg) translateX(0); animation-delay: 1.2s; }
  .line:nth-child(4)  { top: 13.5%; left: 38%;  transform: rotate(150deg) translateX(0); animation-delay: 1.8s; }
  .line:nth-child(5)  { top: 32%; left: 15%;  transform: rotate(150deg) translateX(0); animation-delay: 2.4s; }
  .line:nth-child(6)  { top: 28%; left: 10%;  transform: rotate(150deg) translateX(0); animation-delay: 3.0s; }
  .line:nth-child(7)  { top: 30%; left: 66%;  transform: rotate(150deg) translateX(0); animation-delay: 3.6s; }
  .line:nth-child(8)  { top: 36%; left: 90%;  transform: rotate(150deg) translateX(0); animation-delay: 4.2s; }
  .line:nth-child(9)  { top: 37%; left: 6%;   transform: rotate(150deg) translateX(0); animation-delay: 4.8s; }
  .line:nth-child(10) { top: 38%; left: 32%;  transform: rotate(150deg) translateX(0); animation-delay: 5.4s; }
  .line:nth-child(11) { top: 39%; left: 58%;  transform: rotate(150deg) translateX(0); animation-delay: 6.0s; }
  .line:nth-child(12) { top: 40%; left: 84%;  transform: rotate(150deg) translateX(0); animation-delay: 6.6s; }
  .line:nth-child(13) { top: 41%; left: 20%;  transform: rotate(150deg) translateX(0); animation-delay: 7.2s; }
  .line:nth-child(14) { top: 42%; left: 46%;  transform: rotate(150deg) translateX(0); animation-delay: 7.8s; }
  .line:nth-child(15) { top: 43%; left: 72%;  transform: rotate(150deg) translateX(0); animation-delay: 8.4s; }
  .line:nth-child(16) { top: 44%; left: 12%;  transform: rotate(150deg) translateX(0); animation-delay: 9.0s; }
  .line:nth-child(17) { top: 45%; left: 38%;  transform: rotate(150deg) translateX(0); animation-delay: 9.6s; }
  .line:nth-child(18) { top: 46%; left: 64%;  transform: rotate(150deg) translateX(0); animation-delay: 10.2s; }
  .line:nth-child(19) { top: 47%; left: 88%;  transform: rotate(150deg) translateX(0); animation-delay: 10.8s; }
  .line:nth-child(20) { top: 48%; left: 44%;  transform: rotate(150deg) translateX(0); animation-delay: 11.4s; }
}

/* —— モバイル（表現リッチ：最大50個表示） —— */
@media (max-width: 768px) {
  /* すべて表示 */
  .line { display: block; }

  /* 1〜25（上半分を中心に分散） */
  .line:nth-child(1)  { top: 0.5%;  left: 70%;   transform: rotate(150deg) translateX(0); animation-delay: 0s;z-index:-1; }
  .line:nth-child(2)  { top: 1.5%;  right: 10%;  transform: rotate(150deg) translateX(0); animation-delay: 0.3s; }
  .line:nth-child(3)  { top: 5.5%;  left: 2%;  transform: rotate(150deg) translateX(0); animation-delay: 0.6s; }
  .line:nth-child(4)  { top: 1%; left:0%;  transform: rotate(150deg) translateX(0); animation-delay: 0.9s; }
  .line:nth-child(5)  { top: 7.5%; left: 20%;  transform: rotate(150deg) translateX(0); animation-delay: 1.2s; }
  .line:nth-child(6)  { top: 42%; left: 20%;  transform: rotate(150deg) translateX(0); animation-delay: 1.5s; }
  .line:nth-child(7)  { top: 41%; left: 70%;  transform: rotate(150deg) translateX(0); animation-delay: 1.8s; }
  .line:nth-child(8)  { top: 51%; left: 10%;  transform: rotate(150deg) translateX(0); animation-delay: 2.1s; }
  .line:nth-child(9)  { top: 43%; left: 70%;  transform: rotate(150deg) translateX(0); animation-delay: 2.4s; }
  .line:nth-child(10) { top: 45.5%; left: 10%;  transform: rotate(150deg) translateX(0); animation-delay: 2.7s; }
  .line:nth-child(11) { top: 49%; left: 8%;   transform: rotate(150deg) translateX(0); animation-delay: 3.0s; }
  .line:nth-child(12) { top: 48%; left: 28%;  transform: rotate(150deg) translateX(0); animation-delay: 3.3s; }
  .line:nth-child(13) { top: 47%; left: 48%;  transform: rotate(150deg) translateX(0); animation-delay: 3.6s; }
  .line:nth-child(14) { top: 46%; left: 68%;  transform: rotate(150deg) translateX(0); animation-delay: 3.9s; }
  .line:nth-child(15) { top: 45%; left: 88%;  transform: rotate(150deg) translateX(0); animation-delay: 4.2s; }
  .line:nth-child(16) { top: 44%; left: 16%;  transform: rotate(150deg) translateX(0); animation-delay: 4.5s; }
  .line:nth-child(17) { top: 43%; left: 36%;  transform: rotate(150deg) translateX(0); animation-delay: 4.8s; }
  .line:nth-child(18) { top: 42%; left: 56%;  transform: rotate(150deg) translateX(0); animation-delay: 5.1s; }
  .line:nth-child(19) { top: 41%; left: 76%;  transform: rotate(150deg) translateX(0); animation-delay: 5.4s; }
  .line:nth-child(20) { top: 40%; left: 96%;  transform: rotate(150deg) translateX(0); animation-delay: 5.7s; }
  .line:nth-child(21) { top: 66%;  left: 10%;  transform: rotate(150deg) translateX(0); animation-delay: 6.0s; }
  .line:nth-child(22) { top: 67%; left: 30%;  transform: rotate(150deg) translateX(0); animation-delay: 6.3s; }
  .line:nth-child(23) { top: 68%; left: 50%;  transform: rotate(150deg) translateX(0); animation-delay: 6.6s; }
  .line:nth-child(24) { top: 69%; left: 70%;  transform: rotate(150deg) translateX(0); animation-delay: 6.9s; }
  .line:nth-child(25) { top: 70%; left: 90%;  transform: rotate(150deg) translateX(0); animation-delay: 7.2s; }

  /* 26〜50（下半分を中心に分散） */
  .line:nth-child(26) { top: 51%; left: 50%;   transform: rotate(150deg) translateX(0); animation-delay: 0.15s; }
  .line:nth-child(27) { top: 56%; left: 22%;  transform: rotate(150deg) translateX(0); animation-delay: 0.45s; }
  .line:nth-child(28) { top: 58%; left: 42%;  transform: rotate(150deg) translateX(0); animation-delay: 0.75s; }
  .line:nth-child(29) { top: 60%; left: 64%;  transform: rotate(150deg) translateX(0); animation-delay: 1.05s; }
  .line:nth-child(30) { top: 62%; left: 86%;  transform: rotate(150deg) translateX(0); animation-delay: 1.35s; }
  .line:nth-child(31) { top: 66%; left: 12%;  transform: rotate(150deg) translateX(0); animation-delay: 1.65s; }
  .line:nth-child(32) { top: 68%; left: 32%;  transform: rotate(150deg) translateX(0); animation-delay: 1.95s; }
  .line:nth-child(33) { top: 70%; left: 54%;  transform: rotate(150deg) translateX(0); animation-delay: 2.25s; }
  .line:nth-child(34) { top: 72%; left: 76%;  transform: rotate(150deg) translateX(0); animation-delay: 2.55s; }
  .line:nth-child(35) { top: 74%; left: 96%;  transform: rotate(150deg) translateX(0); animation-delay: 2.85s; }
  .line:nth-child(36) { top: 78%; left: 18%;  transform: rotate(150deg) translateX(0); animation-delay: 3.15s; }
  .line:nth-child(37) { top: 80%; left: 38%;  transform: rotate(150deg) translateX(0); animation-delay: 3.45s; }
  .line:nth-child(38) { top: 82%; left: 58%;  transform: rotate(150deg) translateX(0); animation-delay: 3.75s; }
  .line:nth-child(39) { top: 84%; left: 80%;  transform: rotate(150deg) translateX(0); animation-delay: 4.05s; }
  .line:nth-child(40) { top: 86%; left: 8%;   transform: rotate(150deg) translateX(0); animation-delay: 4.35s; }
  .line:nth-child(41) { top: 88%; left: 28%;  transform: rotate(150deg) translateX(0); animation-delay: 4.65s; }
  .line:nth-child(42) { top: 90%; left: 50%;  transform: rotate(150deg) translateX(0); animation-delay: 4.95s; }
  .line:nth-child(43) { top: 92%; left: 72%;  transform: rotate(150deg) translateX(0); animation-delay: 5.25s; }
  .line:nth-child(44) { top: 94%; left: 92%;  transform: rotate(150deg) translateX(0); animation-delay: 5.55s; }
  .line:nth-child(45) { top: 96%; left: 16%;  transform: rotate(150deg) translateX(0); animation-delay: 5.85s; }
  .line:nth-child(46) { top: 50%; left: 26%;  transform: rotate(150deg) translateX(0); animation-delay: 6.15s; }
  .line:nth-child(47) { top: 58%; left: 48%;  transform: rotate(150deg) translateX(0); animation-delay: 6.45s; }
  .line:nth-child(48) { top: 66%; left: 70%;  transform: rotate(150deg) translateX(0); animation-delay: 6.75s; }
  .line:nth-child(49) { top: 74%; left: 92%;  transform: rotate(150deg) translateX(0); animation-delay: 7.05s; }
  .line:nth-child(50) { top: 80%; left: 50%;  transform: rotate(150deg) translateX(0); animation-delay: 7.35s; }
}

/* [2026-10-17] 第55ラウンド：prefers-reduced-motion で .line を止める規則を削除（G指示＝ブラウザ設定にかかわらず必ず動かす） */


/* アニメーション定義 */
@keyframes moveLines {
0% {
transform: rotate(150deg) translateX(0); /* 初期状態で150° */
}
50% {
transform: rotate(150deg) translateX(20px) scaleX(1.2); /* 150°維持しつつ動き */
}
100% {
transform: rotate(150deg) translateX(-20px) scaleX(1); /* 元に戻る */
}
}
/*** 背景アニメーション記述ここまで ***/

#wp-loading{
position: fixed;
inset: 0;
background:#000;
display:flex;
flex-direction: column;   /* 縦並び */
justify-content:center;
align-items:center;
z-index:99999;
}

#wp-loading img{
width:200px;
}

.loading-text{
margin-top:30px;        /* 画像との間隔 */
font-size:12px;
color:#fff;
letter-spacing:0.1em;
opacity:0.85;
}

/*SNSアイコン*/

.sns-color-white { color:#fff; }
.sns-color-black { color:#000; }

/* リンク色の上書き対策（必要な場合だけ） */
.sns-color-white .sns-icons a{ color:#fff !important; }
.sns-color-black .sns-icons a{ color:#000 !important; }


/* 方法B：横並びを強制（テーマ側のul/li指定を上書き） */
.sns-color-white .sns-icons__list,
.sns-color-black .sns-icons__list{
  display: flex !important;
  flex-direction: row !important;
  justify-content: center;
  align-items: center;
  gap: 10px;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* liが縦に崩されないように */
.sns-color-white .sns-icons__item,
.sns-color-black .sns-icons__item{
  margin: 0 !important;
  padding: 0 !important;
}

/* リンクをアイコンボタン化 */
.sns-color-white .sns-icons__link,
.sns-color-black .sns-icons__link{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  text-decoration: none !important;
}

/* SVGサイズ */
.sns-color-white .sns-icons__svg svg,
.sns-color-black .sns-icons__svg svg{
  width: 28px;
  height: 28px;
  display: block;
  fill: currentColor;
}

.sns-color-black{
margin: 0px 0px 30px; /* 上10 左右20 下50 */
}

/* 黒だけ左寄せ */
.sns-color-black .sns-icons__list{
  justify-content: flex-start !important;
}

.sns-icons__link:hover{
opacity:.75;
}









/* ===== Hero Copy (Southern Link風) ===== */
.sl-hero-copy{
position:absolute;              /* ヒーローの上に重ねる */
inset:0;
display:grid;
place-items:center;             /* 中央揃え */
text-align:center;
pointer-events:none;            /* 背景のCTA等のクリックを邪魔しない */
padding:clamp(20px,4vw,48px);
}

/* 日本語：2フレーズを少し離して横並び（小さめ画面では自動で折り返し） */
.sl-jp{
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
gap:min(0vw,64px);              /* ← フレーズ間の“間” */
line-height:1.15;
margin:0vh;
}
/* 780px以下は余白を +15vh に */
@media (max-width: 780px){
.sl-jp{
margin: 0vh;
gap:min(3vw,64px);              /* ← フレーズ間の“間” */
}
}

.sl-word{
font-size:clamp(32px,6vw,52px); /* 画面に応じて可変 */
font-weight:900;
letter-spacing:.1em;
color:#eee; /* 明るい背景なら #111 に変更 */
text-shadow:0 0px 0px rgba(0,0,0,0.0);
opacity:0; transform:translateY(12px);
animation:sl-fade-up 3.6s ease forwards;
animation-delay: 0s;            /* ← 3秒待つ */
}
.sl-word.zenmen_02{
white-space: nowrap;/* 行内で折り返さない */
word-break: keep-all;/* CJKでも極力改行させない */
overflow-wrap: normal;/* 強制折返し無効 */
hyphens: none; -webkit-hyphens: none;
flex: 0 0 auto;/* flex収縮での途中改行も防ぐ */
display: inline-block;/* 念のため */
}

/* 後ろのフレーズを少し遅らせて余韻 */
.sl-word:last-child{ animation-delay:1.6s; }

/* 英語のサブコピー（任意） */
.sl-en{
font-size:clamp(18px,1.6vw,16px);
letter-spacing:.2em;
color:#fff;
text-shadow:0 2px 10px rgba(0,0,0,.5);
opacity:.9;
margin:0 0 -255px !important;
font-weight: 900 !important;
}

/* 見えない“間”だけを担うスペーサー（幅は変数で調整も可） */
.sl-gap{
width:clamp(12px,vw,120px); height:1px; 
}
/* ふわっと出す */
@keyframes sl-fade-up{
to{ opacity:1; transform:none; }
}
/* もしヒーローが position:static なら、親を relative にしてね */
.hero, .site-hero, .wp-block-cover{ position:relative; }
/* ===== Hero Copy (Southern Link風) ここまで===== */

.hero{
height:100svh;
}

/* ダウンスクロール */
.container_04 {
  height: 0px;
  background-color: #cdb5b5;
}

.scrollbar-text_04 {
  display: inline-block;
  position: absolute;
  bottom: 0;
  padding: 10px 10px 100px;
  color: #fff;
  font-size: 12px;
  font-family: serif;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  writing-mode: vertical-lr;
  left: 50%;
  transform: translateX(-50%);
}

.scrollbar_04 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 1px;
}

.scrollbar_04::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 100px;
  background: #fff;
}

.scrollbar_04::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  animation: circlemove 3s ease-in-out infinite,
    cirlemovehide 3s ease-out infinite;
}

@keyframes circlemove {
  0% {
    bottom: 95px;
  }
  100% {
    bottom: 0px;
  }
}

@keyframes cirlemovehide {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
  }
}
/* ダウンスクロールここまで */

/*SNSアイコンここから*/
.sns-color-white { color:#fff; }
.sns-color-black { color:#000; }

/* リンク色の上書き対策（必要な場合だけ） */
.sns-color-white .sns-icons a{ color:#fff !important; }
.sns-color-black .sns-icons a{ color:#000 !important; }


/* 方法B：横並びを強制（テーマ側のul/li指定を上書き） */
.sns-color-white .sns-icons__list,
.sns-color-black .sns-icons__list{
  display: flex !important;
  flex-direction: row !important;
  justify-content: center;
  align-items: center;
  gap: 10px;
	
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* liが縦に崩されないように */
.sns-color-white .sns-icons__item,
.sns-color-black .sns-icons__item{
  margin: 0 !important;
  padding: 0 !important;
}

/* リンクをアイコンボタン化 */
.sns-color-white .sns-icons__link,
.sns-color-black .sns-icons__link{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  text-decoration: none !important;
}

/* SVGサイズ */
.sns-color-white .sns-icons__svg svg,
.sns-color-black .sns-icons__svg svg{
  width: 28px;
  height: 28px;
  display: block;
  fill: currentColor;
}

.sns-color-black{
margin: 0px 0px 30px; /* 上10 左右20 下50 */
}

/* 黒だけ左寄せ */
.sns-color-black .sns-icons__list{
justify-content: flex-start !important;
}

.sns-icons__link:hover{
opacity:.75;
}
/*SNSアイコンここまで*/

/* 記事中バナー広告装飾枠 */
           .affiliate-insert {
                margin: 28px auto;
                padding: 10px;
                border: 1px solid rgba(0,0,0,.08);
                border-radius: 2px;
                background: #fff;
                box-shadow: 0 4px 20px rgba(0,0,0,.04);
                text-align: left;
            }

            .affiliate-insert img {
                max-width: 100%;
                height: auto;
            }

            .affiliate-insert__title {
                margin: 0 0 8px;
                font-size: 14px;
                font-weight: 600;
                color: #555;
            }
/* 記事中バナー広告装飾枠ここまで */
/* 見出し帯PCのみ角丸 */
@media screen and (min-width:780px){
.sample-box{
border-radius:15px 0 15px 0;
}
.sample-box_all{
border-radius:15px !important;
}
}
/* 見出し帯PCのみ角丸ここまで */

/* カテゴリカプセルヘッダーここから */
.random-cat-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0;
}

.random-cat-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px;
    color: #fff !important;
    text-decoration: none;
    border-radius: 20px;
    font-size: 8px;
    transition: opacity 0.3s;
}

.random-cat-btn:hover {
    opacity: 0.8;
    color: #fff;
}

.random-cat-btn i {
font-size: 8px;
}
.random-cat-btn {
text-decoration: none !important;
}

.random-cat-btn:hover,
.random-cat-btn:focus,
.random-cat-btn:visited {
text-decoration: none !important;
}
/* カテゴリカプセルヘッダーここまで */

/* 納品アイコン */
.offer_nouhin {
display: inline-block;
text-align: center;
font-weight: normal;
font-size: 80%;
margin: 5px 5px 5px 0px;
padding: 5px 10px !important;
border: solid 2px #ff0000;
border-radius: 50px;
line-height: 100% !important;
background-color:#fff;
}
@media only screen and (max-width:780px){
.offer_nouhin {
padding: 5px 10px;
}
}

/* =========================
スライダー全体
========================= */
.my-slider-wrapper{
position:relative;
width:100%;
overflow:hidden;
margin-left:clamp(10px,vw,100px);
z-index:0;
}

.my-slider{
display:flex;
gap:20px;
overflow:hidden; /* ←ここ変更（ネイティブスクロール殺す） */
scroll-behavior:smooth;
padding:20px 0;
cursor:grab;
user-select:none;
align-items:stretch;
-ms-overflow-style:none;
scrollbar-width:none;
touch-action:pan-y;
}

.my-slider.dragging{
cursor:grabbing;
}

.my-slide{
flex:0 0 65%;
scroll-snap-align:start;
background: url(Image/line_bg.png) center / 4px;
border-radius:15px;
padding:0px;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
}

@media screen and (max-width:780px){
.my-slide{
flex:0 0 85%;
}
.my-slider{
-webkit-overflow-scrolling:touch;
cursor:auto;
}
}

/* =========================
ボタン
========================= */
.my-slider-btn{
position:absolute;
top:50%;
transform:translateY(-50%);
z-index:10;
width:75px;
height:75px;
border-radius:50%;
border:none;
cursor:pointer;
background:rgba(0,0,0,0.9);
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 10px 30px rgba(0,0,0,0.15);
opacity:1;
transition:opacity 0.4s ease,transform 0.4s ease;
}

.my-slider-btn::before{
content:'';
width:15px;
height:15px;
border-top:5px solid #fff;
border-right:5px solid #fff;
transform:rotate(45deg);
}

.my-slider-btn.is-hide{
opacity:0;
pointer-events:none;
transform:translateY(-50%) scale(0.9);
}

/* PC位置 */
@media screen and (min-width:1049px){
.my-slider-btn{
right:calc(34% - 25px);
}
}

/* SP位置 */
@media screen and (max-width:1048px){
.my-slider-btn{
top:50%;
right:8%;
width:50px;
height:50px;
}
}
/* =========================
スライダー全体ここまで
========================= */
.fca-features{
width:100%;
max-width:1200px;
margin:0 auto;
padding:40px 20px;
box-sizing:border-box;
}

.fca-feature{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
margin:0 20px 80px 0;
}

.fca-feature:last-child{
margin-bottom:0;
}

.fca-feature-media{
position:relative;
flex:0 0 48%;

/* ★ここが核心 */
height:100%;
overflow:hidden;
border-radius:10px;
}

.fca-feature-media img{
width:100%;
height:100%;
object-fit:cover; /* ←これが重要 */
display:block;
}

/* 画像コンテナを固定高さに */
.fca-feature-media .latest-cat-thumb {
  height: 300px;        /* ← 好みの固定高さに変更 */
  overflow: hidden;
}

.fca-feature-media .latest-cat-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;    /* 縦横比を保ちつつ枠いっぱいに */
  object-position: center;
  display: block;
}


.fca-feature-no{
position: absolute;
    font-family: 'Oswald', sans-serif;
    top: -60px;
    left: -40px;
    font-size: 280px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.04em;
    color: #fff;
    z-index: 2;
    opacity: 0.5;
}

.fca-feature-body{
flex:1 1 52%;
}

.fca-feature-label{
margin:0 20px 14px;
font-size:14px;
font-weight:900;
letter-spacing:0.12em;
text-transform:uppercase;
color:#70419d;
}
@media (min-width: 1048px) {
.fca-feature-label {
margin: 30px 20px 14px;
}
}

.fca-feature-title{
margin:0 20px 18px;
font-size:30px;
font-weight:900;
line-height:1.4;
color:#111;
}

.fca-feature-text{
margin:0 20px 28px;
font-size:100%;
line-height:1.8;
color:#333;
}

.fca-feature-stats{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
}

.fca-feature-stat{
padding:15px 10px;
border-radius:15px;
background:#f7f5fb;
}


@media screen and (max-width:1048px){
.fca-feature-stat{
display:flex;
align-items:center !important;
justify-content:center;
gap:10px;
text-align:center;
}
}

.fca-feature-stat-head{
margin:0 0 8px;
font-size:13px;
font-weight:700;
line-height:1.6;
color:#555;
}


@media screen and (max-width:1048px){
.fca-feature-stat-head{
margin:0 0 0px;
font-size:1.2rem;
text-align:center;
}
}



.fca-feature-stat-value{
font-size:30px;
font-weight:800;
line-height:1.2;
color:#70419d;
}

.fca-feature-stat-value span{
margin-left:6px;
font-size:14px;
font-weight:700;
color:#444;
}

@media screen and (max-width:1048px){
.fca-features{
padding:28px 16px;
}

.fca-feature{
flex-direction:column;
align-items:flex-start;
gap:22px;
margin:0 0 56px;
}

@media screen and (max-width:1048px){
.fca-feature-media{
height:260px;
}
}
	
.fca-feature-media,
.fca-feature-body{
flex:0 0 auto;
width:100%;
margin:0px;
}

.fca-feature-no{
top:-50px;

font-size:200px;
}

.fca-feature-title{
font-size:26px;
margin:0 20px;
}

.fca-feature-text{
font-size:98%;
line-height:1.8;
margin:10px 20px;
}

.fca-feature-stats{
grid-template-columns:1fr;
gap:12px;
margin:0 20px 20px;
}

.fca-feature-stat-value{
font-size:26px;
}
}

.big {
font-size: 350%;
color: #70419d;
}
@media screen and (max-width:1048px){
.big {
font-size: 300%;
}
	
	
.value-wrap{
display:flex;
align-items:center;
gap:4px;
}
}


/* =========================
スライダーページネーション
========================= */
.my-slider-pagination{
display:flex;
justify-content:center;
gap:10px;
margin-top:20px;
}

.my-slider-pagination .dot{
width:10px;
height:10px;
border-radius:50%;
background:#ccc;
transition:all 0.3s ease;
cursor:pointer;
}

.my-slider-pagination .dot.active{
background:#70419d;
transform:scale(1.3);
}
/* =========================
スライダーページネーションここまで
========================= */
/* 横スクロールバーを非表示にする */
html,
body {
  overflow-x: hidden;
}

/* はみ出し装飾ラインをクリップ */
.line {
  max-width: 100%;
  overflow: hidden;
}

/* 画像コンテナを固定高さ＋相対位置（オーバーレイの基準点） */
.fca-feature-media .latest-cat-thumb {
  position: relative;
  height: 300px;
  overflow: hidden;
}

/* 画像を枠に合わせて固定 */
.fca-feature-media .latest-cat-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* カテゴリーカラーの半透明オーバーレイ（紗） */
.fca-feature-media .latest-cat-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--fca-overlay-color, rgba(0, 0, 0, 0.3));
  pointer-events: none;
}
/* ギフト大全 カテゴリー別アイコン・カラー（v3_9自動生成・スラッグ取得） */

/* ヘッダー管理ここから */
.header-bg{
padding:25px 0;
background:
linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
none 0% 30% / cover no-repeat;
position:relative;
}

@media screen and (min-width:780px){
.header-bg{
padding:35px 0;
}
}
/* ヘッダー管理ここまで */

@media (min-width: 780px) {
.sticky-box {
position: sticky;
top: 80px !important;
z-index: 99 !important;
}
}


.fca-feature-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.fca-feature-body .fca-feature-text {
  flex-grow: 1;
}

/* 猫の悩み解決ガイド カテゴリー別アイコン・カラー（catcare 自動生成・スラッグ取得） */
/* 猫のしつけ基本 (slug:cat-basics / ID:769) */


/* 子猫の育て方 (slug:kitten-care / ID:770) */


/* 問題行動の解決 (slug:cat-behavior / ID:771) */


/* 愛猫の健康管理 (slug:cat-health / ID:772) */


/* 食事・栄養管理 (slug:cat-nutrition / ID:773) */


/* おすすめグッズ (slug:cat-goods / ID:774) */


/* 猫種別ガイド (slug:cat-breeds / ID:775) */


/* 飼い主のQ&A (slug:owners-qa / ID:776) */

/* Fix: slider title/desc left-align on non-top pages (inherited align=center override) */
.fca-feature-title,
.fca-feature-text {
  text-align: left !important;
}

/* Fix: slider title/desc left-align override for non-top pages */
.fca-feature-title,
.fca-feature-text {
  text-align: left !important;
}

/* === Category Icons (jukujo purple) ===
   [移行済み・コメントアウト] 以下8ブロックは inc/juku-category-colors.php が全カテゴリー分を <head> に出力するため無効化。
.widget_categories li.cat-item-863:before {
content: '\f06d';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
color: #8E2DA8;
font-size: 180%;
display: inline-block;
text-align: center;
left: 10px !important;
}

.widget_categories li.cat-item-866:before {
content: '\f005';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
color: #6A1B9A;
font-size: 180%;
display: inline-block;
text-align: center;
left: 10px !important;
}

.widget_categories li.cat-item-870:before {
content: '\f06d';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
color: #C73C82;
font-size: 180%;
display: inline-block;
text-align: center;
left: 10px !important;
}

.widget_categories li.cat-item-874:before {
content: '\f004';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
color: #A61E5C;
font-size: 180%;
display: inline-block;
text-align: center;
left: 10px !important;
}

.widget_categories li.cat-item-865:before {
content: '\f0e7';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
color: #7B1FA2;
font-size: 180%;
display: inline-block;
text-align: center;
left: 10px !important;
}

.widget_categories li.cat-item-869:before {
content: '\f008';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
color: #C73D6D;
font-size: 180%;
display: inline-block;
text-align: center;
left: 10px !important;
}

.widget_categories li.cat-item-864:before {
content: '\f21b';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
color: #4A148C;
font-size: 180%;
display: inline-block;
text-align: center;
left: 10px !important;
}

.widget_categories li.cat-item-868:before {
content: '\e131';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
color: #9C27B0;
font-size: 180%;
display: inline-block;
text-align: center;
left: 10px !important;
}
[移行済み・コメントアウトここまで] */

.zenmen_03 {

z-index:11 !important;
}
/* === [2026-10-13] 追記（JUKUJO 2026 移行） === */
.kiji h4::after{font-family:"Font Awesome 6 Free";content:"\f00c";} /* JUKUJO は Pro専用 \f336 のまま＝Free ではチェックが出ない。Free のチェック \f00c に直す */
/* === /[2026-10-13] === */
/* === [2026-10-13] 切替後の是正（NG-1〜NG-7・N-1・N-4）ここから === */
/* [2026-10-13] NG-1/NG-2 年齢確認ゲート内には h2 のメダリオン（画像）を出さない（footer.php の JS でも除外済み＝二重防御）。年齢確認ボタンはサイトカラー（ローズ）に（実測：#333 の黒） */
html .age-gate__wrapper .juku-heading-img{display:none !important}
html .age-gate__submit--yes{background:var(--juku-primary,#7B2D8E) !important;color:#fff !important;border-color:var(--juku-primary,#7B2D8E) !important}
html .age-gate__submit--no{background:#6A6265 !important;color:#fff !important;border-color:#6A6265 !important}
/* [2026-10-14] 第4ラウンド：TOP の大カテゴリースライダー（.my-slide・8枚）の構成を元テーマ（元サイト）に戻す。真因＝元サイトの /Image/line_bg.png は 12×12 の不透明な紫1色（#5A1E69・α255）で、.my-slide の背景（url(Image/line_bg.png) center / 4px）がスライド全体を紫の1枚カードにし、その上に白文字・番号の透かしを載せる設計。このサイト の /Image/line_bg.png はほぼ透明な白線（α8〜13）で地色が無く、白文字が読めなかった（NG-3 の真因）。線パターン（background-image）はそのまま、地色を このサイト の最濃ローズ #8C3C59 にする（サイトカラーには追随しない固定値）。説明文は元サイトでは空で、このサイト は長い（約6行）ためスライダーでは出さない（.fca-feature-text は parts/slider_0N.php だけが使う＝カテゴリーページの説明には影響なし。TOP の header.php と下部の footer.php の両方のスライダーに効く）。第1ラウンドの「文字側に台紙色」方式（parts/slider_0N.php のインライン style・.fca-feature-body の角丸と上余白）は撤回し、slider 8本は第1ラウンド前の版に戻した。番号の透かし（.fca-feature-no）・ラベル（.fca-feature-label）の色は変更しない */
html body .my-slide{background-color:var(--juku-primary-dark,#4A148C)}
html body .fca-feature-text{display:none}
/* [2026-10-13] NG-6 ヘッダーの検索ボタン（header.php の dl.search1）のアイコンを、FA6 Free(Solid) で確実に描く（実測：<i> の幅が 0px・豆腐「☒」） */
dl.search1 dd button i.fa-solid{display:inline-block !important;font-family:"Font Awesome 6 Free" !important;font-weight:900 !important;font-style:normal;font-size:18px;line-height:1;width:auto;min-width:1em;text-align:center}
dl.search1 dd button i.fa-solid::before{content:"\f002" !important;font-family:"Font Awesome 6 Free" !important;font-weight:900 !important}
/* [2026-10-13] NG-7 円形カテゴリー（TOP・記事下）のサムネ：右上基準（object-position:right top）で左が約44%切れていた → 中央基準（アイコン＋カテゴリー名が見える） */
html body .category img{object-position:center center}
/* [2026-10-13] N-1 記事 h2 の右に重なる メダリオンが長い見出しの行末を隠す → メダリオンが付く h2 の帯（.content_txt_03）に padding-right（メダリオン幅＋右余白＋文字との余白）を付ける。css/juku-brand.css の同セレクタ（padding-right:110px）に勝つよう class を重ねて詳細度を上げている。[2026-10-14] 第19ラウンド：この値は footer.php の JS が効かないとき（画像の読み込み前・JS 無効）のフォールバック。通常は JS が「画像の実幅＋右オフセット＋10px」を帯のインライン style（padding-right）に入れて、この規則に勝つ。画像（現在は 12595287-jukufit-320x480.webp・2:3）の実幅は PC 90px（高さ135px）／≤779px 93.3px（高さ140px）なので、PC 90＋12＋10＝112→120px・≤779px 93.3＋10＋10＝113.3→118px（第1ラウンドの 160／164px は幅135pxの正方形の画像が前提で、文字と画像の間が PC 58px／スマホ 60.7px も空いていた） */
html body h2:has(> img.juku-heading-img--h2) .content_txt_03.content_txt_03{padding-right:120px}
@media (max-width:779px){
html body h2:has(> img.juku-heading-img--h2) .content_txt_03.content_txt_03{padding-right:118px}
}
/* [2026-10-13] 第2ラウンド：年齢確認ゲートの h2.age-gate__headline に残った記事 h2 用ラッパー（div.content_txt_03）の装飾を打ち消す。①::after の星画像（80×80・top:-55px／left:-20px・z-index:9999）が h1 の文字に被る ②padding 20px 100px 15px 20px で「年齢確認」の右に 100px の空白 ③白0.9の背景＋影＋下線6px で左寄せに見える。ラッパー自体は残す（css/juku-brand.css:917 の nowrap／文字サイズがこのラッパーに効いているため） */
html .age-gate__wrapper .content_txt_03{display:block !important;width:auto !important;margin:0 !important;padding:0 !important;background:none !important;border:0 !important;border-radius:0 !important;-webkit-box-shadow:none !important;-moz-box-shadow:none !important;box-shadow:none !important;text-align:center !important}
html .age-gate__wrapper .content_txt_03::before,html .age-gate__wrapper .content_txt_03::after{content:none !important;display:none !important}
html .age-gate__wrapper h2.age-gate__headline{text-align:center}
/* [2026-10-13] 第3ラウンド：旧 追加CSS（外観→追加CSS＝wp_custom_css）由来の基礎ルールを復元。切替時に追加CSSを無効化したため、ハンバーガー（header.php の #hm_menu／.hm_*）が素のチェックボックスのまま・メニューが常時表示になっていた。出典＝元サイト（元テーマ側）の現行の追加CSS（src/live_static/wp-custom-css.css。承認済みプレビューに埋め込まれていたものと同一）のうち、9/9 版（custom_css_10.bak）とセレクタが共通するルールだけ。色は このサイト のローズに置換（#7B2D8E→#C2547B／#6A2580→#B04C70／#4A148C・#811885→#8C3C59／#2B0B33→#2E2226）。!important は出典にあるものだけ。@import は style.css 末尾では無効なので入れていない（header.php:14 が Noto Sans JP を読み込み済み）。css/juku-brand.css と inc/*.php が出す .hm_*・送信ボタン等の上書きは詳細度・!important が上なので、そのまま効く */
/* 書体（出典の先頭の *{}） */
*{font-family:"Noto Sans JP",sans-serif}
/* 固定ヘッダー */
#header{position:fixed;top:0;left:0;width:100%;z-index:200}
#header .fixheader{position:fixed;top:0;left:0;width:100%;z-index:200}
#header.fixed .fixheader{position:fixed;top:0px !important;z-index:200}
/* リンクボタン */
a.button{display:block;width:200px;margin:0 auto;padding:10px 20px;text-align:center;border:1px solid #fff;transition:all .3s ease-out}
a.button:hover{color:var(--juku-primary-dark,#4A148C);background-color:#fff}
a.button_02{display:block;width:300px;margin:0 auto;padding:15px 30px;text-align:center;border:2px solid #00518b;background-color:#00518b;transition:all .3s ease-out}
a.button_02:hover{color:#fff;border:2px solid #00518b;background-color:#fff}
/* ハンバーガーメニュー 12ルール（header.php 167-170：div.hm_wrap > input#hm_menu.hm_menu_check ＋ label.hm_btn ＋ nav.hm_menu_wrap。.hm_title は現在のマークアップに無いが出典どおり入れる） */
.hm_menu_check{display:none}
.hm_wrap{display:inline-block;position:fixed;top:0;left:0;width:100%;padding:10px}
.hm_title{position:relative;color:#999999;display:inline-block;float:left;font-weight:100;line-height:30px;margin:0 0 0 15px;opacity:0;transform:translate3d(0,-15px,0);transition:transform 0.6s,opacity 0.5s;z-index:3}
.hm_btn{position:absolute;top:19px;right:16px;width:20px;height:16px;cursor:pointer;display:block;float:left;z-index:11}
.hm_btn::before{box-shadow:#fff 0 7px 0}
.hm_btn::after{bottom:0}
.hm_btn::before,.hm_btn::after{width:17px;height:2.0px;background:#fff;display:block;content:'';position:absolute;transition:box-shadow 0.2s linear,transform 0.2s 0.2s}
.hm_menu_wrap{width:100%;height:10000px;background:url(Image/line_bg.png);background-size:5px;background-color:var(--juku-primary,#7B2D8E);position:absolute;left:-100%;top:0;transition:left 0.4s}
.hm_menu_check:checked ~ .hm_title{opacity:1;transform:none}
.hm_menu_check:checked ~ .hm_btn::before{box-shadow:transparent 0 0 0;transform:rotate(45deg) translate3d(0px,0px,0);background:#000;height:2px;width:100%;position:absolute;top:50%;left:-10%;transform-origin:center;transition:transform 0.2s ease,background-color 0.2s ease}
.hm_menu_check:checked ~ .hm_btn::after{transform:rotate(-45deg) translate3d(0px,0px,0);background:#000;height:2px;width:100%;position:absolute;top:50%;left:-10%;transform-origin:center;transition:transform 0.2s ease,background-color 0.2s ease}
.hm_menu_check:checked ~ .hm_menu_wrap{left:0}
/* 表の枠線・パンくず・フォーム（CF7 のお問い合わせ等） */
.b_less{border:none}
.b_less td{border:none}
.wpcr3_div_2{max-width:100%;line-height:350%}
@media (max-width:600px){.wpcr3_table_2 td{text-align:left;display:block}}
.breadcrumb{display:flex;flex-wrap:wrap}
input[type="submit"]{appearance:none;-webkit-appearance:none;-moz-appearance:none;font-size:150%;font-weight:400;width:280px;padding:15px 0px;border-radius:50px;background-image:url(Image/line_bg.png),linear-gradient(180deg,var(--juku-primary,#7B2D8E) 0%,var(--juku-primary,#7B2D8E) 50%,color-mix(in srgb,var(--juku-primary,#7B2D8E) 88%,var(--juku-primary-dark,#4A148C)) 50%,color-mix(in srgb,var(--juku-primary,#7B2D8E) 88%,var(--juku-primary-dark,#4A148C)) 100%);background-size:7px;background-position:center;background-repeat:repeat;border:5px solid #fff;color:#fff;cursor:pointer;transition:background-color 0.3s,transform 0.3s}
input[type="submit"]:hover{background-color:var(--juku-primary-dark,#4A148C);transform:scale(1.05)}
input[type="submit"]:active{background-color:#2E2226;transform:scale(1)}
span.wpcf7-spinner{display:none}
.submit-btn-wrapper{text-align:center}
input[type="button"]{appearance:none;-webkit-appearance:none;-moz-appearance:none;font-size:80%;font-weight:bold;width:80px;padding:10px;margin:10px;border-radius:50px;background-color:#fff;border:none;color:#233b6c;border:2px solid #233b6c;cursor:pointer}
.wpcf7-radio .wpcf7-list-item{margin:30px 0 10px;display:block}
.wpcf7-form-control-wrap[data-name="radio-939"] label{display:flex;align-items:center;gap:10px}
.wpcf7 input[name="your-name"],.wpcf7 input[name="your-email"]{width:100%;height:50px !important;margin:20px 0;padding:10px}
.wpcf7 textarea[name="your-message"]{width:100%;height:300px !important;margin:20px 0;padding:10px}
.required{padding:5px 10px;color:#d9534f;border-radius:50px;border:0px solid #fff}
optional{background:#337ab7;border:1px solid #2e6da4}
.comment-form textarea{padding:10px;width:100%;box-sizing:border-box}
/* [2026-10-14] 第6ラウンド：メガメニュー（検索帯のカテゴリー名／タグキーワード）の項目の枠線（ウィジェット内CSS .mega-dropdown a{border:solid 3px #333}）を通常時は透明にし、hover 時だけ黒線（従来どおり）にする（G指示） */
html .mega-menu .mega-dropdown a{border-color:transparent}
html .mega-menu .mega-dropdown .tag-cloud a:hover,html .mega-menu .mega-dropdown .category-cloud a:hover{border-color:#000}
/* [2026-10-14] 第7ラウンド：見出し画像の右端補正（juku-brand.css の right:-20px／-30px）は帯が枠より左右にはみ出す前提。このサイト では静止後の差が 0px のため、基準の right:10px（帯の右端から10px内側）に戻す（実測：PC・390 とも 画像右端−帯右端＝+20px → −10px）。juku-brand.css は style.css より後に読み込まれ、セレクタも同じ詳細度のため !important で上書き */
html body .juku-heading-img-wrap > img.juku-heading-img--category,html body .juku-heading-img-wrap > img.juku-heading-img--recommend,html body .juku-heading-img-wrap > img.juku-heading-img--others{right:10px !important}
html body .juku-heading-img-wrap > img.juku-heading-img--others{right:0 !important} /* [2026-10-14] 第8ラウンド：Others 帯は table の margin -10px で枠より10px広いため、右端0で帯の右端から10px内側になる（実測 −20px → 計算 −10px） */
/* [2026-10-14] 第11ラウンド①：記事カルーセル（wa_chpcs・ヒーロー下）の題名を、画像の縦方向の中央に重ねる。題名（h4）を item-content 基準の絶対配置にし、top＝画像の縦中央：PC（421px〜）は画像が枠の上端から高さ340px → top:170px、≤420px は画像が枠いっぱい（height:100%）で、h4 が流れから外れた item-content の高さ＝枠の高さ → top:50%。translateY(-50%) で題名の高さの半分だけ戻す。題名の高さは .cardt の固定 3em を auto にして、1行でも2行でも文字そのものを中央に（2行までの省略は .cardt の line-clamp のまま）。読みやすさのため半透明の暗い角丸の地と白文字。色はホバーでも変えない（元からインラインの色が勝っていてホバーでは変わっていない） */
html body .wa_chpcs_image_carousel .wa_chpcs_card .item-content{position:relative}
html body .wa_chpcs_image_carousel .wa_chpcs_card .item-content h4.wa_chpcs_slider_title{position:absolute;top:170px;left:12px;right:12px;margin:0;padding:8px 10px;box-sizing:border-box;height:auto;transform:translateY(-50%);text-align:center;z-index:2;background:rgba(46,34,38,.55);border-radius:8px}
html body .wa_chpcs_image_carousel .wa_chpcs_card .item-content h4.wa_chpcs_slider_title a{color:#fff !important}
@media (max-width:420px){html body .wa_chpcs_image_carousel .wa_chpcs_card .item-content h4.wa_chpcs_slider_title{top:50%}}
/* [2026-10-14] 第11ラウンド②：メガメニュー右の SP 画像（ul.juku-has-sp-img・juku_img_megamenu_sp_image）が出ているページでは、同じ位置にあった旧キャラ画像（custom_html-15 の div.none_03 内・著者アイコンに写像済みの img.right）を出さない。PHP 側（inc/juku-design-images.php の juku_img_megamenu_sp_filter()）でも除去しており、これは二重の備え */
html body:has(ul.juku-has-sp-img) .none_03:has(> img.juku-avatar.right){display:none !important}
/* [2026-10-14] 第11ラウンド③：スマホ（≤480px）でメガメニューの「カテゴリー名」左のフォルダアイコンが画面左で切れる。真因＝アイコンは li の右端から right:135px（＋margin-right:10px）で絶対配置（style.css 3216 行付近・li の最小幅170pxが前提）。li が内容幅（SP 画像があると min-width:0）に縮むと、アイコンが li の左端より左へ出て画面外になる。→ アイコンを li の左端基準（left:0）に付け替え、アイコンに文字が重ならないよう左の内側余白を広げ、ボタンの余白を詰めて、2つのボタン＋SP 画像が390pxに収まるようにする（計算は報告書 §17）。既存の ≤389px 用の余白（juku-brand.css 673 行・!important）は、より詳細度の高いセレクタで上書きする */
@media (max-width:480px){
html body nav.mega-menu ul.menu.zenmen{justify-content:flex-start;padding-left:4px}
html body nav.mega-menu ul.menu.zenmen > li.menu-item{min-width:0 !important}
html body nav.mega-menu ul.menu.zenmen > li.menu-item > a{margin:10px 8px !important;padding:5px 12px 5px 20px !important}
html body nav.mega-menu ul.menu.zenmen > li.menu-item > a:has(> i.fa-folder){padding-left:30px !important}
html body nav.mega-menu ul.menu.zenmen > li.menu-item > a > i.fa-folder{right:auto;left:0;margin-right:0;transform:none}
}
/* [2026-10-14] 第12ラウンド：スマホ（≤780px）の記事一覧カード（2列）の下に余る空白をなくす。style.css の .article-list{height:43svh}（画面の高さの43%で固定）だと、内容（画像150px＋カテゴリーカプセル＋題名2〜4行）より約100px余るため、カードの高さを内容に合わせる（題名 h6 の line-clamp 4行・overflow:hidden・角丸はそのまま）。.text の下の余白は 10px→12px。カードの親（.contents）は flex／grid ではなく inline-block の並びで、同じ行の2枚の高さを揃える手段が CSS だけでは無い（親を flex 化すると .contents 内の他の要素の margin の相殺が変わり、.pagination〜カテゴリー帯の間隔がずれるおそれがある）ため、同じ行の上端をそろえる（vertical-align:top）に留める。PC（>780px）は変更しない（43svh のまま） */
@media (max-width:780px){
html body article.article-list{height:auto !important;min-height:0;vertical-align:top}
html body article.article-list .text{padding:10px 10px 12px}
}
/* [2026-10-14] 第13ラウンド：スマホ（≤780px）で、「Category カテゴリー」の黒帯の下端と、その下の丸いカテゴリーアイコンの上端の間隔を、全設置箇所で約28pxにする。真因＝丸カテゴリー本体（functions.php の render_category_navi_html()）の外側 div は style="margin:50px 0 0" で、header.php:223（ハンバーガー内）・index.php:80・single.php:418・page.php:55 はそれを包みの div の margin:-50px 5px 50px で打ち消すため、相殺後の間隔は 0px（帯に丸が付く）。home.php:21 の包みは margin:50px 0 50px で 50px。→ 包みの margin-top だけを !important で上書きし（−50→−22＝相殺後 50−22＝28px。home.php の包みは 50→0 とし、丸の外側 div の margin-top を 28px に）、左右・下の margin は変更しない。各規則は、包みのインライン style の文字列と、中に丸カテゴリー（.navi-container）があることの両方に当たったときだけ効く（外れたときは「変わらない」だけで済み、帯に丸が重なることはない）。見出し画像（juku-heading-img--category）は帯の上側にはみ出す側なので影響なし。PC（>780px）は変更しない */
@media (max-width:780px){
html body div[style*="margin:-50px 5px 50px"]:has(.navi-container){margin-top:-22px !important}
html body div[style*="margin:50px 0 50px"]:has(.navi-container){margin-top:0 !important}
html body div[style*="margin:50px 0 50px"] div:has(> .navi-container){margin-top:28px !important}
}
/* [2026-10-14] 第15ラウンド②：記事カルーセルの題名の縦位置が、PC（421px〜）で画像の中心より17.3px上にずれる → .item-content に padding 5%（実測17.3px）があり、画像（高さ340px）の中心は item-content の上端から 17.3＋340/2＝187.3px。第11ラウンドの top:170px を 187px にする（≤420px は top:50% のまま＝padding が上下同じで、枠の中心が画像の中心と一致するため変更なし） */
@media (min-width:421px){html body .wa_chpcs_image_carousel .wa_chpcs_card .item-content h4.wa_chpcs_slider_title{top:187px}}
/* [2026-10-14] 第15ラウンド③：記事カルーセルの枠（.item-content 386.3px）の下に、li の高さ固定（プラグインのインライン 400px を css/juku-brand.css の li.wa_chpcs_card{height:500px !important} が 500px に上書き）による空き（実測81.7px）が残る → li の高さを内容に追従（auto）させる。li の高さ＝上下 margin 15×2＋item-content（padding 5%×2＋画像枠 aspect-ratio 16/20）で、全カードが同じ幅・同じ比率の画像枠のため高さは全カード同じ（題名は第11ラウンドで絶対配置＝行数が高さに入らない）。PC は500→約416px、≤420px はカード幅に応じて自動。詳細度（0,2,3）が juku-brand.css の（0,2,1）より高いので !important 同士でもこちらが勝つ（計算は報告書 §21） */
html body .wa_chpcs_image_carousel li.wa_chpcs_card{height:auto !important}
html body .wa_chpcs_image_carousel .wa_chpcs_card .item-content{height:auto}
html body .kiji h2:has(> .content_txt_03){margin-bottom:14px}
/* [2026-10-14] 第17ラウンド：スマホ（≤480px）のメガメニュー帯の右端の画像（li.juku-megamenu-sp-img）が小さくて見えにくい。実測は 20.6×44px（画像 20.6×76px）で、画像の実寸は 130×480 の縦長（高さ 76px だと幅 20.6px）。高さを 96px にし（幅は比率維持＝26.0px。依頼文の「幅≈64px」は 2:3 の画像の場合の値で、実寸 130×480 では 26.0px）、li をフローから外して帯の右下に絶対配置する（基準の ul.menu.zenmen は style.css の .zenmen で position:relative。right:6px・bottom:0＝ul の下端。帯の下端は td の padding 1px 下）。フローから外れるので、カプセル2つの並び（第11ラウンド③の配置）は崩れない。カプセル右端（計算 310.2px）と画像の左端（幅390pxで 357.0px）の間は 46.8px、「タグキーワード」の文字の右端（計算 280.8px）とは 76.2px で、文字には被らない。ul・nav・table に overflow:hidden は無く、上へのはみ出し（頭）は切れない。481px 以上と、≤339px の既存の非表示（juku-brand.css）は変更しない。計算は報告書 §23 */
@media (max-width:480px){
html body nav.mega-menu ul.menu.zenmen.juku-has-sp-img > li.juku-megamenu-sp-img{position:absolute;right:6px;bottom:0;margin:0;height:auto;z-index:3}
html body nav.mega-menu ul.menu.zenmen.juku-has-sp-img > li.juku-megamenu-sp-img a{height:auto}
html body nav.mega-menu ul.menu.zenmen.juku-has-sp-img > li.juku-megamenu-sp-img img{height:96px;margin:0}
}
/* [2026-10-14] 第18ラウンド：スマホ（≤480px）のメガメニュー「カテゴリー名」カプセルで、文字がカプセルの中心より右に寄って見える（G指示）。原因＝第11ラウンド③がフォルダアイコン付きのボタンだけ左の内側余白を 30px にしている（右は 12px）ため、文字＋▼のまとまりの中心がカプセルの中心より 9.0px 右になる（390px の計算値：カプセル 139.2px・左の余白 33px／右 15px）。→ そのボタン（a:has(> i.fa-folder)）の左右の内側余白を 12px ずつにそろえ、text-align:center を明示する（カプセル 121.2px・左右 15px ずつ＝文字＋▼が中央）。第11ラウンド③の同じセレクタが !important なので、こちらも !important・同じ詳細度（0,5,7）で後ろに置いて勝たせる（上下の内側余白 5px・左右の外側余白 8px は第11ラウンドのまま）。フォルダアイコンの絶対配置（left:0・幅 32px・画面 x＝5〜37）は変えない＝アイコンが文字の先頭に 9.0px 重なる（依頼どおり許容。「カ」の左 70%）。「#」のボタン（i.fa-hashtag）は対象外（左 20px のまま）。li.none_04（PC の検索窓の li・≤780px は非表示）と li.juku-megamenu-sp-img は li.menu-item ではないので掛からない。481px 以上は変更しない。計算は報告書 §24 */
@media (max-width:480px){
html body nav.mega-menu ul.menu.zenmen > li.menu-item > a:has(> i.fa-folder){text-align:center;padding-left:12px !important;padding-right:12px !important}
}
/* [2026-10-14] 第20ラウンド①：スマホ（≤480px）のトップで、メガメニュー帯（ul.menu.zenmen.juku-has-sp-img）の直下のバナー帯（横スライダー・div.slider-box.tomei_03）が帯に食い込む（G指摘）。真因＝header.php 326〜334 行で、メガメニューの直後に「中身のない div.none_03（スマホ用スペーサー・margin-top:27px）→ 黒グラデの div（margin:0）→ バナー帯（インライン margin:-39px 0 -15px）」が続き、この3つの上 margin（空の div は上下とも通り抜け、親子の先頭の子とも相殺）が 27＋(−39)＝−12px にまとまって、バナー帯の上端が帯の下端より 12px 上に来る（帯の最下部のカプセルの下の余白に食い込む）。しかも第17ラウンドで右端の画像（li.juku-megamenu-sp-img）を絶対配置・高さ 96px にしたため、帯の高さ（カプセル行だけ）より画像の方が高く、画像の上側が帯の上にはみ出していた。→ (a) ul の min-height を 104px（画像 96px＋上の余白 8px）にして、帯の高さを画像に合わせる。ul はウィジェットの .menu で display:flex・align-items 未指定（＝stretch）のため、min-height だけだと li.menu-item が 104px に引き伸ばされ、li 基準（top:100%）のドロップダウン（.mega-dropdown）が帯の下端まで下がってしまうので、align-items:flex-start を足してカプセル（帯の上端から 10px）とドロップダウンの位置を従来のままにする。画像が display:none になる ≤339px（css/juku-brand.css）は帯を広げる理由が無いので 340〜480px に限る。(b) バナー帯のインライン margin-top:-39px を !important で 0 にし、相殺後の間隔を max(27,0,0)＝27px にする＝帯の下端→バナー帯の上端が 27px。SP 画像が出ているページ（ul.juku-has-sp-img がある）に限る＝SP 画像が無いページは旧キャラ画像の div が残る元の構成のまま。481px 以上は変更しない。計算は報告書 §26 */
@media (min-width:340px) and (max-width:480px){
html body nav.mega-menu ul.menu.zenmen.juku-has-sp-img{min-height:104px;align-items:flex-start}
}
@media (max-width:480px){
html body:has(ul.juku-has-sp-img) .slider-box.tomei_03{margin-top:0 !important}
}
/* [2026-10-14] 第20ラウンド②：スマホ・タブレット（≤1048px）の大カテゴリースライダー（.my-slider-wrapper・header.php 311 行のトップと footer.php 21 行の2か所）の次へボタン（.my-slider-btn）を、カード（.my-slide）の縦の真ん中に置く（G指示）。現状＝css/juku-brand.css の 4b)（867 行）が ≤1048px で top:auto; bottom:60px; transform:none（カードの下の文字側）にしている。→ style.css 本来の top:50%＋translateY(-50%) に戻す（juku-brand.css 側は !important なしなので、こちらは !important で勝つ）。計算＝基準の .my-slider-wrapper は position:relative、中の .my-slider は padding:20px 0・align-items:stretch（全スライドが最も高いスライドの高さ Hs にそろう）、.my-slide の margin／padding は 0 なので、ラッパーの高さは 20＋Hs＋20、スライドの縦の中心は上端から 20＋Hs/2＝ラッパーの高さの 50%。ボタン（≤1048px で 50px）は top:50% の位置から自分の高さの半分（25px）を translateY(-50%) で戻すので、ボタンの中心＝ラッパーの 50%＝カードの縦の中心（差 0px・Hs に依らない）。.is-hide（最後のスライドが見えたとき opacity:0・pointer-events:none）の transform は元が translateY(-50%) scale(.9) なので、上の !important が元の is-hide に勝って scale が消えないよう、同じ値を !important で書く（詳細度 html body .my-slider-btn.is-hide (0,2,2) ＞ html body .my-slider-btn (0,1,2)）。右の位置（right:8%）・大きさ（50px）・PC（1049px 以上）は変更しない */
@media (max-width:1048px){
html body .my-slider-btn{top:50% !important;bottom:auto !important;transform:translateY(-50%) !important}
html body .my-slider-btn.is-hide{transform:translateY(-50%) scale(.9) !important}
}
/* [2026-10-14] 第21ラウンド①：スマホ（≤480px）のメガメニュー帯の下の余白が空きすぎる（G指摘）。真因＝第20ラウンド①(a) の min-height:104px（画像 96px＋8px に合わせて帯を伸ばした値）で、帯＝ul の高さが自然な 54px から 50px 伸び、カプセルの下の空きが 10px→60px になっていた。→ 撤回する（min-height:0 !important＝詳細度・順序に関係なく第20ラウンドの規則に勝つ）。ul の高さは、カプセル行 34px（a の外形＝枠 3×2＋内側 5×2＋文字行 18）＋a の上下 margin 10px×2＝54px（第16〜18ラウンド後のブラウザ実測 388×54 と一致）に戻り、カプセルの上も下も ul の端から 10px で対称。帯（table）の外形では、上＝table の padding-top 2px＋td の padding 1px＋10px＝13px、下＝td の padding 1px＋10px＝11px（差 2px は table の上 padding 由来）。table 全体は 2＋1＋54＋1＝58px（第20ラウンドの 108px から −50px）。align-items:flex-start は据え置き（2つの li はどちらも 54px で同じ高さのため、stretch に戻しても同じ）。≤339px は元から min-height 指定なし・481px 以上は変更なし。計算は報告書 §27 */
@media (max-width:480px){
html body nav.mega-menu ul.menu.zenmen.juku-has-sp-img{min-height:0 !important}
}
/* [2026-10-14] 第21ラウンド②：右端の画像（li.juku-megamenu-sp-img・img 96px）は「帯からはみ出してよい・下に戻す形で」（G指示）。規則の追加は無し＝第17ラウンドの配置（position:absolute;right:6px;bottom:0;z-index:3。基準は position:relative の ul）がそのまま効く。ul が 104→54px に戻るので、画像の下端は ul の下端（帯＝table の下端の 1px 上）にそろい、頭は ul の上端より 96−54＝42px（帯の上端より 39px・直前のスライダー枠の下端より 41px）上にはみ出す。切れる祖先は無い：li・ul・nav.mega-menu・div[align=center]・td・tr・tbody・table.zenmen_02 のどれにも overflow の指定が無く（style.css・css/juku-brand.css・kaiun.css・common.css・ウィジェットの style 要素を確認。html／body の overflow-x は横方向だけ）、第17〜18ラウンドの本番の画面（頭が帯の上に出ている）とも合う → overflow:visible の上書きは不要。重なり順＝table.zenmen_02（.zenmen_02{z-index:10}）の積層文脈の中で、ul（.zenmen{z-index:1}）の中の li（z-index:3）は、帯の背景・カプセルより前、.mega-dropdown（z-index:9999）より後ろ */
/* [2026-10-14] 第21ラウンド③：スマホ（≤480px）のトップで、メガメニュー帯のぴったり下にバナー帯（div.slider-box.tomei_03）を置く（G指示＝帯の下端→バナー帯の上端 0px。重なりも隙間もなし）。現状＝第20ラウンド①(b) でバナー帯の margin-top は 0 にしたが、header.php:328 の空のスペーサー div.none_03（インライン margin-top:27px・≤779px で表示）の 27px が、空の div なので上下とも通り抜け、padding・border・overflow の無い黒グラデの div（header.php:330〜369・バナー帯と新着記事を包む親。高さは 0 ではないが間隔には寄与しない）とその先頭の子のバナー帯の上 margin とも相殺して、max(27,0,0)＝27px の隙間になっていた（実測 27.00px）。→ ≤480px でこのスペーサーの margin-top を 0 !important（インラインの 27px に勝つ）にして max(0,0,0)＝0px。.none_04（margin-top:38px）は ≤780px で display:none＝箱が無く寄与しない。対象はインライン style に margin-top:27px を持つ .none_03（テーマ内は header.php:328 の1か所だけ＝トップのみ）で、第20ラウンド①(b) と同じく SP 画像のあるページ（body:has(ul.juku-has-sp-img)）に限る（SP 画像が無いページは旧キャラ画像の div が残る元の構成のまま）。481px 以上は変更なし */
@media (max-width:480px){
html body:has(ul.juku-has-sp-img) .none_03[style*="margin-top:27px"]{margin-top:0 !important}
}
/* [2026-10-15] 第26ラウンド（オーナー決裁後の確定版）：一覧カード（検索結果・カテゴリー／タグ／アーカイブ・TOP の一覧・記事下の Others）の高さを、題名（h6）の文字数・行数にかかわらず、スマホ・PC とも全カード同じにする。決裁＝スマホ（≤780px）は題名3行で揃え、3行を超える題名は3行目の末尾を「…」で省略／PC も窓の高さ依存の height:43svh をやめて内容基準にする。真因＝カードは .contents の中の inline-block の並び（grid／flex ではない）。スマホは第12ラウンドで height:auto にしたため高さ＝内容（390px の実測：題名2行 281.1px／3行 304.1px／4行 327.2px）で段がガタつき、PC は 43svh のため窓が低いと題名の下側が切れ、高いと下に大きな空白が出ていた。方式＝①カード：height:auto !important＋vertical-align:top（43svh を無効化・段ズレ防止）②.text の下 padding を 20px に（題名の下の余裕。スマホは 12→20、PC は 10→20）③題名 h6 に min-height＝N×1.6em と -webkit-line-clamp:N !important（インライン style の -webkit-line-clamp:4 に勝つ。display:-webkit-box・-webkit-box-orient・overflow:hidden はインライン style にある）。h6 の font-size＝body×120%：body は 767px 以下で 12px（h6 14.4px・1行 23.04px）、768px 以上で 14px（h6 16.8px・1行 26.88px。style.min.css の min-width:768px で body が 1.4rem）。min-height は em なのでどちらにも追従する。N の導出＝N＝ceil(「30字＋...」＝上限 31.5em ÷ 1行の字数 c)、c＝floor(h6 の幅÷h6 の font-size)、h6 の幅＝カード幅−枠16−.text 左右20−表の隙間6（カード幅：≤576px は画面幅/2−6、577〜780px は画面幅/2−10、781px 以上は 0.3333×0.7×min(画面幅,1080)−10）。≤780px＝決裁どおり N＝3（390px は c＝10 で30字＋...＝4行 → 3行目の末尾を「…」に）。781〜1024px は c＝7〜11（h6 の幅 130〜187px）で必要 N＝4（781〜798px のごく一部は5行）→ N＝4。1025px 以上は c＝11（h6 の幅 187〜200px）で3行に収まる → N＝3。カードの高さ＝枠16＋画像150＋上10＋カプセル帯41＋表（6＋.none_04 の下 margin 10〔PC のみ〕＋N×1行の高さ）＋下20＝≤767px：312.1px／768〜780px：323.6px／781〜1024px：360.5px／1025px 以上：333.6px。43svh への依存は無い（.img-wrap は高さ150px の px 指定・.cat-data の absolute の基準は .img-wrap・JS 無し・sidebar.php のスクリプトは実高さに追従）。overflow:hidden・角丸・カプセル帯は変更なし */
html body article.article-list{height:auto !important;vertical-align:top}
html body article.article-list .text{padding-bottom:20px}
html body article.article-list .text h6{min-height:4.8em;-webkit-line-clamp:3 !important}
@media (min-width:781px) and (max-width:1024px){
html body article.article-list .text h6{min-height:6.4em;-webkit-line-clamp:4 !important}
}
/* === /[2026-10-15] 第26ラウンド ここまで === */
/* [2026-10-15] 第28ラウンド：「販売ページを見る」ボタンの上の空白を除去。/Image/koushikigo.png（旧テーマの「公式サイトへGO」バナー）は このサイト では空画像のため、width:100%/max-width:360px/padding のまま置かれて最大360px四方の空白になっていた。画像を非表示にし、ボタンの上に小さな間隔だけ残す（全記事・2つ目のボタンにも効く）。間隔は div.pulse の margin-top を 32px（a.tug_bottom の margin-top:-10px を含めて見た目約20px）にして確保する。.pulse は著者アイコンの img（header.php／footer.php／single.php）と急上昇ワードの i（footer.php）にも使われる（どれも div ではない）ため、間隔の規則は記事本文（article.kiji）内の div.pulse[align=center] に限定。.pulse 自身に margin／padding の既存指定は無い（css/kaiun.css 833行は animation と transform-origin のみ）が、ボタン本体 a.tug_bottom が margin-top:-10px（2165行）を持ち、div.pulse には上の padding・border が無いため、その上 margin は div.pulse の上 margin および直前の要素の下 margin と合体する */
html body img.zenmen[src$="/Image/koushikigo.png"]{display:none !important}
html body .kiji div.pulse[align="center"]{margin-top:32px}
/* === /[2026-10-15] 第28ラウンド ここまで === */
/* [2026-10-15] 第30ラウンド：PC/タブレット（≥781px）でサイドバー先頭「Category」帯の右端の女性画像（img.juku-heading-img--actress・108px・帯の下端基準で上に54pxはみ出す）が、直上のメガメニュー帯（div.zenmen z-index:50）の裏に隠れていた。帯ごと48px下げて画像の頭がメガメニュー帯の下端に6pxだけ重なる位置にし、ウィジェットを z-index:51 で帯より前面に出す（固定ヘッダー z200・PR帯 z99 より下。ドロップダウンは幅230pxでサイドバーに届かない）。ウィジェット（#custom_html-26）の position:relative; z-index:3 は css/juku-brand.css 588〜591行の html body .container #custom_html-26,…{position:relative;z-index:3}（詳細度 1,1,2・!important なし）で、下の1つ目の規則（詳細度 2,1,3）が勝つので z-index に !important は付けない（margin-top は念のため !important）。2つ目の規則は ID が変わった場合の保険で、:has() 非対応のブラウザでは2つ目だけが無効になるよう規則を分けて書く。サイドバーのウィジェット枠は functions.php 30行の before_widget で class が「%2$s sidebar-wrapper」（素の widget クラスが付かない）なので、2つ目は .widget と .sidebar-wrapper の両方を対象にし、ID 指定の規則が当たらなくても z-index が効くよう position:relative を足している。.container は積層文脈を作らない（juku-brand.css 571行の注記）ので、ウィジェットはルート文脈でメガメニュー帯（html body > .zenmen z50・同583行）と比較される。CSS 上、51〜59 に他の要素は無い（トップへ戻る z60・PR帯 z99・固定ヘッダー〔#header／.fixheader〕z100〜200） */
@media (min-width:781px){
html body aside#sidebar .sidebar-inner > #custom_html-26{margin-top:48px !important;z-index:51}
html body aside#sidebar .sidebar-inner > :is(.widget,.sidebar-wrapper):has(> .textwidget img.juku-heading-img--actress){position:relative;margin-top:48px !important;z-index:51}
}
/* === /[2026-10-15] 第30ラウンド ここまで === */
/* [2026-10-15] 第31ラウンド：「販売ページを見る」ボタンの上の間隔を、直前がメモ欄の枠（.arrow_box_03〔margin-bottom:-50px〕＋<br><br>）の場合も約20pxに揃える。<br>2つの行ボックスの高さが文字サイズで変わり PC 28px／スマホ 21px と不揃いだったため、<br>を非表示にして margin-top:73px（反映後の実測：70px で PC/SP とも 17px → +3px）（反映前に注入して測った値：72px→PC 24/SP 22、80px→28/30）で見た目約20pxにする（見た目の間隔＝73−50−3＝20px。a.tug_bottom の -10px は -50px に吸収される）。直前がサンプル画像の2つ目のボタンは第28ラウンドの 32px のまま（約20px）。dmm-post.php 2043行の $comment_content は </div></div><br><br> で終わり、ブロックを含む記事では do_blocks が wpautop を外すので <br> がそのまま残る。依頼の CSS からの変更：<br> の非表示と margin-top を、同じ条件 .arrow_box_03:has(+ br + br + div.pulse[align=center])（または間に空の div[align=center] がある形）の記事だけに当て、連動させた。無条件に <br> を消すと、(1) 第29ラウンド反映前に作られた記事は <br><br> と div.pulse の間に空の div[align=center]（第28ラウンドで空画像を非表示にした後のラッパー）が残るため margin-top が当たらず、ボタンがメモ欄の枠に 18px 重なる（32−50）、(2) メモ欄の直後がサンプル動画の見出しなど別の要素の記事では、その要素が枠の下に最大 50px 潜り込む。:has() 非対応のブラウザでは規則ごと無効になり従来の見た目のまま */
html body .kiji .arrow_box_03:has(+ br + br + div.pulse[align="center"]) + br,html body .kiji .arrow_box_03:has(+ br + br + div.pulse[align="center"]) + br + br,html body .kiji .arrow_box_03:has(+ br + br + div[align="center"] + div.pulse[align="center"]) + br,html body .kiji .arrow_box_03:has(+ br + br + div[align="center"] + div.pulse[align="center"]) + br + br{display:none}
html body .kiji .arrow_box_03:has(+ br + br + div.pulse[align="center"]) + br + br + div.pulse[align="center"],html body .kiji .arrow_box_03:has(+ br + br + div[align="center"] + div.pulse[align="center"]) + br + br + div[align="center"] + div.pulse[align="center"]{margin-top:73px}
/* === /[2026-10-15] 第31ラウンド ここまで === */
/* [2026-10-16] 第33ラウンド：記事本文のサンプル画像（自動投稿の <div class="wp-block-image aligncenter"><figure class="aligncenter">）が、div.aligncenter に当たる既存の display:table・margin-left:0 で列の左端に寄っていたため、見出し帯（本文の列）の左右中央に揃える。商品概要内のパッケージ画像（div に aligncenter 無し）は従来から中央で変更なし */
html body .kiji .wp-block-image.aligncenter{display:block !important;width:auto !important;margin-left:auto !important;margin-right:auto !important;text-align:center}
html body .kiji .wp-block-image.aligncenter > figure.aligncenter{display:table !important;margin-left:auto !important;margin-right:auto !important}
/* === /[2026-10-16] 第33ラウンド ここまで === */
/* [2026-10-16] 第34ラウンド：ランキングページ（/ranking/）のランキング一覧の枠（ul.wpp-list.wpp-cardview・ピンク背景）をサイト幅いっぱいに。div.popular-posts の左右 padding 12px を 0 にして本文の列いっぱいに広げ、スマホ（≤779px）は本文の列の余白も越えて画面幅いっぱい（負のマージン・左右の枠線と角丸は 0）にする（オーナー指示 2026-10-16）。/ranking/ の枠（block-7・wpp-list_02）に限定。サイドバーの TOP5 は対象外。779px（780px は PC 側のブレークポイントと重なるため） */
html body #block-7 .popular-posts{padding-left:0 !important;padding-right:0 !important}
html body ul.wpp-list.wpp-cardview.wpp-list_02{box-sizing:border-box;max-width:none}
@media (max-width:779px){
html body ul.wpp-list.wpp-cardview.wpp-list_02{width:100vw;margin-left:calc(50% - 50vw) !important;margin-right:calc(50% - 50vw) !important;border-left-width:0 !important;border-right-width:0 !important;border-radius:0 !important}
}
/* === /[2026-10-16] 第34ラウンド ここまで === */
/* [2026-10-16] 第35ラウンド：トップページのヒーロー背景スライド画像（.hero .background-image）の不透明度を 1→0.8 にして20%透過させる（オーナー指示 2026-10-16「透過度を80%に」）。表示中のスライド .active だけを 0.8 にし、非表示側の 0 とクロスフェード（opacity 1s）はそのまま */
html body .hero .background-image.active{opacity:.8 !important}
/* === /[2026-10-16] 第35ラウンド ここまで === */
/* [2026-10-16] 第36ラウンド：PC（≥781px）で、記事下などの「Category カテゴリー」帯の直下にある丸いカテゴリーアイコン（.widget_category_navi_widget > div[style*="margin: 50px 0 0px"] > .navi-container）が帯に密着（外側ラッパーの margin-top:-50px と内側の 50px が相殺して間隔 0）していたため、内側の上マージンを 78px にして帯との間隔を約28px（第13ラウンドのスマホと同じ）にする。対象は記事・一覧・固定ページの設置箇所（包みが margin:-50px 5px 50px）のみ。トップ（home.php・包み margin:50px 0 50px・間隔50px）は変えない */
@media (min-width:781px){
html body div[style*="margin:-50px 5px 50px"] .widget_category_navi_widget > div[style*="margin: 50px 0 0px"]{margin-top:78px !important}
}
/* === /[2026-10-16] 第36ラウンド ここまで === */
/* === /[2026-10-16] 第37ラウンド ここまで === */
/* === [2026-10-16] 第39ラウンド：年齢確認ゲート（「いいえ」の折り返し解消＋リッチ化）ここから === */
/* [2026-10-16] 第39ラウンド：年齢確認ゲート（プラグイン Age Gate 3.7.3・css_type v3）の ①「いいえ」の折り返し解消 ②リッチ化。【原因】.age-gate__buttons はプラグイン main.css の display:flex・flex-wrap:nowrap（既定）・gap 10px。テーマの button.age-gate__submit--no/--yes{font-size:20px !important; padding:5px 10px !important}（style.css 76・2674行。プラグイン既定は 1rem＝16px）で、ボタンの必要幅は いいえ 80px（字 60＋padding 20）＋gap 10px＋はい 223px（字 203＋padding 20）＝313px。フォーム内幅は 画面幅−80px（.age-gate__wrapper の padding 20px×2＋.age-gate の padding 20px×2。上限は max-width 500px−40＝460px）なので、画面幅 393px 未満で不足する（320px＝内幅 240・不足 73／iframe 316px＝236・不足 77／360px＝280・33／375px＝295・18／386px＝306・7／390px＝310・3）。flex-shrink は字幅（60：203）に比例して縮めるため、字幅 60px の「いいえ」が先に折れる（実測 386px：いいえ w78×h68 の2行「いい／え」・はい w218×h39）。320px は「はい」も2行になる。1000px 以上は内幅 460px で折れない（いいえ w80・はい w223）。【対処】各ボタンを white-space:nowrap・flex:none・min-height 44px にし、文字サイズを --hs-f＝clamp(12px,(100vw−72px)/18.4,18px) に連動させる（必要幅＝17.85em＋枠線 4px＝いいえ 5em＋はい 12.4em＋gap 0.45em）。≤480px は .age-gate__wrapper の padding を 12px、カード内側を 16px に詰めて内幅＝画面幅−58px（316→258・320→262・360→302・386→328・390→332）。--hs-f は 316px＝13.3px（必要 241＜内幅 258）・320px＝13.5px（245＜262）・360px＝15.7px（283＜302）・386px＝17.1px（309＜328）・390px＝17.3px（313＜332）・403px 以上＝18px（325＜345 以上）で、縦スクロールバー15px 分を引いても収まる。【リッチ化】.age-gate＝padding 0・角丸 16px・1px ローズ枠・影。.age-gate__heading＝#8C3C59→#C2547B の斜めグラデーションの帯（--hs-px のネガティブマージンでカード端まで）に h1 を白文字で。.age-gate__form::before＝「18+」の丸バッジ（order で帯の直後・帯に 32px 重ねる）。h2 は色・字間・下線アクセントだけ（font-size と nowrap は css/juku-brand.css 916〜917行のまま）。本文＝15px・line-height 1.8（style.css 2679行の 250% は .age-gate__fields で打ち消し）・薄桃 #FBEFF3 のパネル。ボタン＝ピル型（はい＝ローズのグラデーション＋白字＋影／いいえ＝白地＋#6A6265 の1px枠と同色の字〔白に対し 5.9:1〕）、hover・focus-visible は はい＝濃色化＋1px 浮く／いいえ＝薄桃地＋濃ローズ。ローダー・背景（#8C3C59 0.6＋blur 5）は不変。既存の !important（style.css 76・2674・2679・5693・5694行）には、.age-gate__wrapper 配下の詳細度（0,2,2）〜（0,4,3）＋!important で勝つ */
@media (max-width:480px){
html body .age-gate__wrapper{padding:12px}
}
html body .age-gate__wrapper .age-gate{--hs-px:16px;--hs-f:clamp(12px,calc((100vw - 72px) / 18.4),18px);box-sizing:border-box;padding:0;border:1px solid color-mix(in srgb,var(--juku-primary,#7B2D8E) 28%,transparent);border-radius:16px;box-shadow:0 22px 56px rgba(46,34,38,.3),0 3px 10px rgba(46,34,38,.14);overflow-x:hidden}
@media (min-width:481px){
html body .age-gate__wrapper .age-gate{--hs-px:28px}
}
html body .age-gate__wrapper .age-gate__form{margin:0;padding:0 var(--hs-px) 22px}
html body .age-gate__wrapper .age-gate__heading{order:-1;align-self:stretch;margin:0 calc(var(--hs-px) * -1);padding:16px 16px 44px;text-align:center;background:radial-gradient(120% 160% at 88% -30%,rgba(255,255,255,.26) 0%,rgba(255,255,255,0) 58%),linear-gradient(135deg,var(--juku-primary-dark,#4A148C) 0%,var(--juku-primary,#7B2D8E) 100%)}
html body .age-gate__wrapper .age-gate__heading-title{margin:0;color:#fff;font-size:clamp(17px,5.2vw,22px);font-weight:800;letter-spacing:.08em;line-height:1.35;text-shadow:0 1px 2px rgba(46,34,38,.35)}
html body .age-gate__wrapper .age-gate__form::before{content:"18+";flex:none;position:relative;z-index:1;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:58px;height:58px;margin:-32px 0 10px;border-radius:50%;background:linear-gradient(135deg,var(--juku-primary,#7B2D8E) 0%,var(--juku-primary-dark,#4A148C) 100%);color:#fff;font-size:21px;font-weight:800;line-height:1;letter-spacing:.02em;box-shadow:0 0 0 4px #fff,0 0 0 5px color-mix(in srgb,var(--juku-primary,#7B2D8E) 35%,transparent),0 8px 18px color-mix(in srgb,var(--juku-primary-dark,#4A148C) 35%,transparent)}
html body .age-gate__wrapper .age-gate__headline{margin:0 0 14px;line-height:1.4}
html body .age-gate__wrapper .age-gate__headline,html body .age-gate__wrapper .age-gate__headline .content_txt_03{color:var(--juku-primary-dark,#4A148C);font-weight:700;letter-spacing:.14em}
html body .age-gate__wrapper .age-gate__headline::after{content:"";display:block;width:36px;height:3px;margin:8px auto 0;border-radius:3px;background:linear-gradient(90deg,var(--juku-primary,#7B2D8E),var(--juku-primary-dark,#4A148C))}
html body .age-gate__wrapper .age-gate__subheadline:empty{display:none}
html body .age-gate__wrapper .age-gate__fields{margin:0;line-height:1.8 !important}
html body .age-gate__wrapper .age-gate__challenge{margin:0 0 18px;padding:14px 16px;border:1px solid color-mix(in srgb,var(--juku-primary,#7B2D8E) 22%,transparent);border-radius:12px;background:color-mix(in srgb,var(--juku-primary,#7B2D8E) 8%,#fff);color:#2E2226;font-size:15px;line-height:1.8;text-align:center;text-wrap:balance;word-break:auto-phrase}
html body .age-gate__wrapper .age-gate__buttons{display:flex;flex-wrap:nowrap;align-items:stretch;justify-content:center;gap:calc(var(--hs-f) * .45);margin:0}
html body .age-gate__wrapper .age-gate__buttons button.age-gate__submit{flex:0 0 auto;box-sizing:border-box;min-width:0;min-height:44px;margin:0 !important;padding:.72em 1em !important;border-radius:999px !important;font-size:var(--hs-f) !important;font-weight:700;line-height:1.3;letter-spacing:0;white-space:nowrap !important;cursor:pointer;-webkit-appearance:none;appearance:none;transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease,border-color .15s ease,color .15s ease}
html body .age-gate__wrapper .age-gate__buttons button.age-gate__submit--yes{padding-left:1.1em !important;padding-right:1.1em !important;border:1px solid var(--juku-primary-dark,#4A148C) !important;background:linear-gradient(180deg,var(--juku-primary,#7B2D8E) 0%,color-mix(in srgb,var(--juku-primary,#7B2D8E) 70%,var(--juku-primary-dark,#4A148C)) 100%) !important;color:#fff !important;box-shadow:0 6px 14px color-mix(in srgb,var(--juku-primary-dark,#4A148C) 38%,transparent),inset 0 1px 0 rgba(255,255,255,.3)}
html body .age-gate__wrapper .age-gate__buttons button.age-gate__submit--no{border:1px solid #6A6265 !important;background:#fff !important;color:#6A6265 !important;box-shadow:0 1px 2px rgba(46,34,38,.1)}
html body .age-gate__wrapper .age-gate__buttons button.age-gate__submit--yes:hover{border-color:var(--juku-primary-dark,#4A148C) !important;background:linear-gradient(180deg,color-mix(in srgb,var(--juku-primary,#7B2D8E) 88%,var(--juku-primary-dark,#4A148C)) 0%,var(--juku-primary-dark,#4A148C) 100%) !important;color:#fff !important;box-shadow:0 8px 18px color-mix(in srgb,var(--juku-primary-dark,#4A148C) 50%,transparent),inset 0 1px 0 rgba(255,255,255,.25);transform:translateY(-1px)}
html body .age-gate__wrapper .age-gate__buttons button.age-gate__submit--no:hover{border-color:var(--juku-primary-dark,#4A148C) !important;background:color-mix(in srgb,var(--juku-primary,#7B2D8E) 8%,#fff) !important;color:var(--juku-primary-dark,#4A148C) !important}
html body .age-gate__wrapper .age-gate__buttons button.age-gate__submit:focus-visible{outline:3px solid color-mix(in srgb,var(--juku-primary,#7B2D8E) 55%,transparent);outline-offset:2px}
html body .age-gate__wrapper .age-gate__errors{margin:0;text-align:center}
html body .age-gate__wrapper .age-gate__errors:not(:empty){margin-top:14px;font-size:13px;line-height:1.6}
/* === /[2026-10-16] 第39ラウンド ここまで === */
/* === [2026-10-16] 第41ラウンド：TOP の記事スライダー（英字ラベルを黒帯の中へ＋題名を3行まで＋矢印の可視化・縦中央）ここから === */
/* [2026-10-16] 第41ラウンド：TOP の記事スライダー（header.php 370〜376行・carousel 9342）の ①英字ラベル「サイト名の英字」を黒帯の中へ ②題名を3行まで表示 ③左右の丸矢印を見えるようにして画像の縦中央へ。【原因（上司AIの本番実測 390px＋ローカルのプラグイン 3.3.2 の確認）】①包み div（style="margin:300px 0 0"）に背景が無く、ラベル .sl-en（y5666・h18）と黒帯 .shiny-btn（background:#000・y5684。先頭の <br> が空行12px）が縦に並ぶだけなので、ラベルは黒帯の上端の外（白地）に乗っていた。包みの上余白が 300px でなく 45px なのは css/juku-brand.css 902行 html body div[style*="margin:300px 0 0"]{margin-top:45px !important} がインラインを上書きしているため（903行・273行で .sl-en の margin も 0 !important）。②プラグインの templates/card/card.php:252 が題名 h4 に class cardt を付け、style.css 2147行 .cardt{-webkit-line-clamp:2; line-height:1.5em; height:3em} が2行で切っていた（第11ラウンドで height:auto にしたが clamp 2 は残っていた。実測 h64＝24×2＋padding 16）。③プラグインの ID 規則 #wa_chpcs_image_carousel9342 .wa_chpcs_prev{margin-top:-40px; width・height 50px; color:rgba(0,0,0,.9)} と .wa_chpcs_prev{top:50%} により、矢印の中心＝カルーセル上端から 50%−15px。390px：カルーセル h462・画像の中心 231px に対し矢印の中心 216px（15px 上ずれ）。PC（≥421px）は画像が枠の上端から 340px（css/juku-brand.css 492行）で、画像の中心＝15（カルーセル padding）＋6（li margin）＋2（li padding）＋15（.item-content margin）＋17.3（.item-content padding 5%）＋170＝225.3px に対し矢印は 216px（9.3px 上ずれ）。色が黒 rgba(0,0,0,.9) なので黒帯・枠に沈んで見えない。【対処】①包みに background-color:#000 と padding-top 24px（≥781px は 30px）、.sl-en の下に margin-bottom 16px（≥781px は 20px）＝ラベルは黒帯の上端から24px 下、スライダーの上端まで16px。.shiny-btn 先頭の <br> は非表示にして余白の二重取りを防ぐ。包みの margin-top 45px（juku-brand 902行）はそのまま＝上の黒帯との間の白地は変わらない。②h4.cardt を -webkit-line-clamp:3 に。clamp の要素に縦 padding があると4行目の上端が padding の領域に覗くことがある（既知の挙動）ため、縦 padding 8px は透明な border 8px に置き換える（背景は border-box のままで見た目も高さ16pxも同じ）。最大高さ＝24×3＋16＝88px。translateY(-50%) の中央寄せと top（第11・15ラウンド）は触らない。③矢印＝白（#fff）＋text-shadow、hover は #F28CB3、z-index 4・margin-top は !important（ローカルのプラグインのインライン style margin:-55px・z-index:1 や題名 h4 の z-index:2 に勝つため）。display:flex の中央寄せ＋span・i を block にして、アイコンの中心＝a ボックスの中心。縦位置＝≤420px は top:50%＋margin-top:-25px（画像の中心＝カルーセルの中心 231px）、≥421px は top:225.3px＋margin-top:-25px（画像の中心 225.3px）。opacity（disabled の 0・animate_controls）と左右位置・開閉アニメには触らない */
html body div[align="center"][style*="margin:300px 0 0"]{background-color:#000;padding-top:24px}
html body div[align="center"][style*="margin:300px 0 0"] > .sl-en{margin-bottom:16px !important}
html body div[align="center"][style*="margin:300px 0 0"] .shiny-btn > br:first-child{display:none}
@media (min-width:781px){
html body div[align="center"][style*="margin:300px 0 0"]{padding-top:30px}
html body div[align="center"][style*="margin:300px 0 0"] > .sl-en{margin-bottom:20px !important}
}
html body .wa_chpcs_image_carousel .wa_chpcs_card .item-content h4.wa_chpcs_slider_title.cardt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3 !important;overflow:hidden;padding:0 10px;border-top:8px solid transparent;border-bottom:8px solid transparent}
html body .wa_chpcs_image_carousel .wa_chpcs_prev,html body .wa_chpcs_image_carousel .wa_chpcs_next{display:flex;align-items:center;justify-content:center;top:50% !important;margin-top:-25px !important;z-index:4 !important;color:#fff !important;text-shadow:0 0 6px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.45)}
html body .wa_chpcs_image_carousel .wa_chpcs_prev span,html body .wa_chpcs_image_carousel .wa_chpcs_next span,html body .wa_chpcs_image_carousel .wa_chpcs_prev i,html body .wa_chpcs_image_carousel .wa_chpcs_next i{display:block;line-height:1}
html body .wa_chpcs_image_carousel .wa_chpcs_prev:hover,html body .wa_chpcs_image_carousel .wa_chpcs_next:hover{color:color-mix(in srgb,var(--juku-primary-light,#8E2DA8) 55%,#fff) !important}
@media (min-width:421px){
html body .wa_chpcs_image_carousel .wa_chpcs_prev,html body .wa_chpcs_image_carousel .wa_chpcs_next{top:225.3px !important}
}
/* === /[2026-10-16] 第41ラウンド ここまで === */
/* === [2026-10-16] 第43ラウンド：TOP ヒーローの SCROLL を黒に＋PR 帯を黒背景・高さ +8px ここから === */
html body .hero .scrollbar-text_04,html body .hero .scrollbar-text_04 span{color:#000}
html body .hero .scrollbar_04::before,html body .hero .scrollbar_04::after{background:#000}
html body{--juku-pr-h:32px}
@media (max-width:767px){
html body{--juku-pr-h:30px}
}
html body .juku-pr-notice{background-color:#000 !important}
/* === /[2026-10-16] 第43ラウンド ここまで === */
/* === [2026-10-16] 第45ラウンド：固定ページ本文（article.article-content）の読みやすさを記事並みに戻す ここから === */
/* [2026-10-16] 第45ラウンド：固定ページ（operator・about・privacy・disclaimer・r18・sitemap ほか）の本文の行間・段落間・見出しの余白を、記事本文と同等にする。【原因】テーマ切替（10/13）以降、page.php の 9・44・81行は article.article-content に the_content() をそのまま出すだけで、記事（single.php 251行 section.content と article.kiji）のような本文枠が無い。記事の本文規則は .kiji 限定（style.css 574行 .kiji p{margin-bottom:30px; line-height:200%}、single.php のインライン .kiji h2{margin:80px…; padding:80px 0 10px 20px}・.kiji h3 など）で固定ページには当たらない。その結果、固定ページの p は line-height 15px（=1.0）・margin-bottom 0（実測 /operator/・body の行間を継承。p{font-size:120%} と /css/style_s.css の p{font-size:15px} だけが当たる）で行が密着し、h2 は footer.php の JS が付ける白帯 .content_txt_03 の星画像（::after・80px・top:-55px・left:-20px）と H メダリオン（img.juku-heading-img--h2・高さ 135px／≤779px は 140px・bottom:10px＝帯の上へ約70px／81px はみ出す。css/juku-brand.css 693・697行）を、記事では h2 の margin-top 80px＋padding-top 80px の帯で受けているのに、固定ページには余白が無く直前の本文に重なっていた。固定ページ6本（about・privacy・operator・disclaimer・r18・sitemap。p6_pages.php）の本文は p／p.da-lead／h2／ul／li／strong だけで、.da-lead の CSS はどこにも無かった。【対処】html body.page:not(.home) article.article-content の直下の子要素だけに、記事並みの規則を足す（フォント種類・サイズは従来のまま）。p＝line-height 1.9・margin 0 0 1.6em。p.da-lead＝薄桃 #FBEFF3 の地・左に 5px の #C2547B・右上下に角丸 10px・margin 0 0 2em。h2＝margin 88px 0 18px（≤779px は上 98px）＝星 55px とメダリオンの突き出し 70／81px を収めたうえで直前の段落との間に約17〜18px 残す（帯・星・メダリオンの見た目は変えない）。h3・h4・ul・ol・li・内容表も記事と同等の余白。直下限定にした理由＝ranking（WPP のリストは div・table の中）、contact 系（CF7 は div.wpcf7 > form の中）、レイアウト用の table には当たらず、input・select・textarea・button の寸法も変わらない。ほかのページ（TOP・記事・一覧）は body.page でないため変わらない */
html body.page:not(.home) article.article-content > p{margin:0 0 1.6em;line-height:1.9;overflow-wrap:break-word}
html body.page:not(.home) article.article-content > p.da-lead{margin:0 0 2em;padding:1.2em 1.4em;background:color-mix(in srgb,var(--juku-primary,#7B2D8E) 8%,#fff);border-left:5px solid var(--juku-primary,#7B2D8E);border-radius:0 10px 10px 0;line-height:1.9}
html body.page:not(.home) article.article-content > h2{margin:88px 0 18px;padding:0}
@media (max-width:779px){
html body.page:not(.home) article.article-content > h2{margin-top:98px}
}
html body.page:not(.home) article.article-content > h3{margin:2.2em 0 .8em;padding:.25em 0 .25em .8em;border-left:5px solid var(--juku-primary,#7B2D8E);color:#2E2226;font-size:18px;font-weight:700;line-height:1.5}
html body.page:not(.home) article.article-content > h4{margin:1.8em 0 .6em;color:#2E2226;font-size:16px;font-weight:700;line-height:1.6}
html body.page:not(.home) article.article-content > ul,html body.page:not(.home) article.article-content > ol{margin:0 0 1.8em;padding-left:1.5em;font-size:15px}
html body.page:not(.home) article.article-content > ul{list-style:disc outside}
html body.page:not(.home) article.article-content > ol{list-style:decimal outside}
html body.page:not(.home) article.article-content > ul > li,html body.page:not(.home) article.article-content > ol > li{margin:0 0 .7em;line-height:1.85;overflow-wrap:break-word}
@media (min-width:1280px){
html body.page:not(.home) article.article-content > ul,html body.page:not(.home) article.article-content > ol{font-size:16px}
}
html body.page:not(.home) article.article-content > ul > li:last-child,html body.page:not(.home) article.article-content > ol > li:last-child{margin-bottom:0}
html body.page:not(.home) article.article-content > table:not([class]):not([style]){width:100%;margin:0 0 1.8em;border-collapse:collapse}
html body.page:not(.home) article.article-content > table:not([class]):not([style]) th,html body.page:not(.home) article.article-content > table:not([class]):not([style]) td{padding:.7em .9em;border-bottom:1px solid color-mix(in srgb,var(--juku-primary,#7B2D8E) 22%,#fff) !important;font-size:15px;line-height:1.7;text-align:left}
/* === /[2026-10-16] 第45ラウンド ここまで === */
/* === [2026-10-17] 第46ラウンド：①フッターの「当サイトの情報について」パネルの左の赤い帯を削除 ②スマホのハンバーガーメニュー内の「Category カテゴリー」帯をメニュー幅いっぱいに ③メニュー下部の白い角丸ボタン2つの文字色 ここから === */
/* [2026-10-17] 第46ラウンド：スマホのハンバーガーメニュー内の「Category カテゴリー」帯（#custom_html-39）をメニュー幅いっぱいに。css/juku-brand.css の @media (max-width:767px) の .hm_list{padding-left:12px; padding-right:12px} を、同じ 12px の負マージンで打ち消して table を width:100% にする（padding があるのは ≤767px だけなので同じ範囲に限る） */
@media (max-width:767px){
html body nav.hm_menu_wrap .hm_list > #custom_html-39{margin-left:-12px;margin-right:-12px}
html body nav.hm_menu_wrap .hm_list > #custom_html-39 table.sample-box{width:100% !important;max-width:none !important}
}
/* [2026-10-17] 第46ラウンド：③メニュー内の「もっと見る」（button.cat-more-btn）と「このメニューを閉じる」（div.tug_04.yubi＋i.fa-circle-xmark）は背景が白（style.css 4030行 .cat-more-btn／css/kaiun.css 172行 .tug_04）なのに、css/juku-brand.css 167〜175行の .hm_list *{color:#F6EDFA !important}（inc/juku-site-colors.php 450行が同じ規則を出す）で文字とアイコンが白くなり白地に白文字だった。nav.hm_menu_wrap 配下のこの2つ（アイコン含む）だけ #8C3C59 にする。hover／aria-expanded=true は背景が濃色（kaiun.css 187行 #333／style.css の #111）になるため、メニュー内では背景を #8C3C59・文字を白にして読めるようにする。メニュー外の同名ボタン（#333 on 白）は読めており変更しない */
html body nav.hm_menu_wrap button.cat-more-btn,html body nav.hm_menu_wrap .tug_04.yubi,html body nav.hm_menu_wrap .tug_04.yubi *{color:var(--juku-primary-dark,#4A148C) !important}
html body nav.hm_menu_wrap button.cat-more-btn:hover,html body nav.hm_menu_wrap button.cat-more-btn[aria-expanded="true"],html body nav.hm_menu_wrap .tug_04.yubi:hover{background:var(--juku-primary-dark,#4A148C) !important;border-color:var(--juku-primary-dark,#4A148C) !important}
html body nav.hm_menu_wrap button.cat-more-btn:hover,html body nav.hm_menu_wrap button.cat-more-btn[aria-expanded="true"],html body nav.hm_menu_wrap .tug_04.yubi:hover,html body nav.hm_menu_wrap .tug_04.yubi:hover *{color:#fff !important}
/* === /[2026-10-17] 第46ラウンド ここまで === */
/* === [2026-10-17] 第48ラウンド：サイト運営者ページの運営者情報の表 ここから === */
html body.page article.article-content table.op-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid color-mix(in srgb,var(--juku-primary,#7B2D8E) 22%,#fff);border-radius:12px;overflow:hidden;margin:1.2em 0 1.8em;background:#fff;font-size:15px;line-height:1.8;color:#2E2226;table-layout:auto}
html body.page article.article-content table.op-table tbody{display:table-row-group;background:transparent;border:0}
html body.page article.article-content table.op-table tr{background:transparent;border:0}
html body.page article.article-content table.op-table th,
html body.page article.article-content table.op-table td{padding:.9em 1.1em;border:0;border-bottom:1px solid color-mix(in srgb,var(--juku-primary,#7B2D8E) 22%,#fff);line-height:1.8;font-size:15px;vertical-align:middle;text-align:left;box-sizing:border-box}
html body.page article.article-content table.op-table th{width:32%;background:color-mix(in srgb,var(--juku-primary,#7B2D8E) 8%,#fff);color:var(--juku-primary-dark,#4A148C);font-weight:700;white-space:normal}
html body.page article.article-content table.op-table td{background:#fff;color:#2E2226;word-break:break-word;overflow-wrap:anywhere}
html body.page article.article-content table.op-table tr:last-child th,
html body.page article.article-content table.op-table tr:last-child td{border-bottom:0}
html body.page article.article-content table.op-table td a{color:var(--juku-primary,#7B2D8E);text-decoration:underline;text-underline-offset:2px}
@media (max-width:390px){
html body.page article.article-content table.op-table,
html body.page article.article-content table.op-table tbody,
html body.page article.article-content table.op-table tr,
html body.page article.article-content table.op-table th,
html body.page article.article-content table.op-table td{display:block;width:100%}
html body.page article.article-content table.op-table th{border-bottom:0;padding:.7em 1em .5em}
html body.page article.article-content table.op-table td{padding:.7em 1em .9em}
html body.page article.article-content table.op-table tr:not(:last-child) td{border-bottom:1px solid color-mix(in srgb,var(--juku-primary,#7B2D8E) 22%,#fff)}
html body.page article.article-content table.op-table tr:last-child td{border-bottom:0}
}
/* === [2026-10-17] 第48ラウンド：サイト運営者ページの運営者情報の表 ここまで === */
/* === [2026-10-17] 第49ラウンド：固定ページ本文の箇条書き（ul/ol）を、薄桃のカード＋ローズのマーク／番号バッジにする ここから === */
/* [2026-10-17] 第49ラウンド：【黒丸が出なかった原因】style.css 1406行 ::marker{color:rgba(255,255,255,.1)}（全要素の ::marker を白の10%＝ほぼ透明にしている）が残っていて、第45ラウンドの list-style:disc で黒丸の「場所」は作られていたが、色がほぼ透明で白地に見えなかった（style.css 1400行 ul{list-style:none} も同じ旧規則）。【今回】list-style を使わず、各 li をカード（薄桃 #FBEFF3・角丸 10px）にして、左に ::before でマーク（ul＝ローズ #C2547B の円に白の Font Awesome 6 Free チェック \f00c／ol＝同じ円に counter の白数字）を置く。li は position:relative・padding-left を 2.9em にしてマークの右側に本文を揃えるので、2行以上に折り返しても本文はマークと重ならない。スコープは第45ラウンドと同じ html body.page:not(.home) article.article-content の直下の ul／ol（> ul > li）だけで、記事（.kiji）・TOP・ウィジェット・メニュー内の ul には当たらない。li 内の入れ子の ul は list-style:disc で黒丸の代わりにローズの丸を出す。リンクの色・下線は変えない。Font Awesome は header.php 20行で読み込み済み（fontawesome/css/all.min.css 6.5.2・solid 900 の \f00c を同梱） */
html body.page:not(.home) article.article-content > ul,html body.page:not(.home) article.article-content > ol{list-style:none;padding-left:0;margin:0 0 1.8em}
html body.page:not(.home) article.article-content > ol{counter-reset:da-ol}
html body.page:not(.home) article.article-content > ul > li,html body.page:not(.home) article.article-content > ol > li{position:relative;list-style:none;margin:0 0 .6em;padding:.75em 1em .75em 2.9em;background:color-mix(in srgb,var(--juku-primary,#7B2D8E) 8%,#fff);border-radius:10px;color:#2E2226;line-height:1.75;overflow-wrap:break-word;box-sizing:border-box}
html body.page:not(.home) article.article-content > ol > li{counter-increment:da-ol}
html body.page:not(.home) article.article-content > ul > li::before,html body.page:not(.home) article.article-content > ol > li::before{position:absolute;left:12px;top:14px;width:20px;height:20px;box-sizing:border-box;border-radius:50%;background:var(--juku-primary,#7B2D8E);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;line-height:1;text-align:center}
html body.page:not(.home) article.article-content > ul > li::before{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900}
html body.page:not(.home) article.article-content > ol > li::before{content:counter(da-ol);font-family:inherit;font-weight:700}
html body.page:not(.home) article.article-content > ul > li ul,html body.page:not(.home) article.article-content > ol > li ul{list-style:disc outside;margin:.5em 0 0;padding-left:1.4em;background:none}
html body.page:not(.home) article.article-content > ul > li ul > li::marker,html body.page:not(.home) article.article-content > ol > li ul > li::marker{color:var(--juku-primary,#7B2D8E)}
@media (min-width:1280px){
html body.page:not(.home) article.article-content > ul > li::before,html body.page:not(.home) article.article-content > ol > li::before{top:16px}
}
/* === /[2026-10-17] 第49ラウンド ここまで === */
/* === [2026-10-17] 第50ラウンド：①フッターの関連ページリンク7本（折り返し対応）②固定ページ本文の div[align=center]>table〔お問い合わせ等〕のスマホはみ出し修正 ここから === */
/* [2026-10-17] 第50ラウンド①：フッターの関連ページリンク（footer.php の ul.juku-footer-links）。旧 table（cellspacing 5・区切りは td の背景画像）を廃止し、flex で折り返す。区切りは各 li の ::before（背景画像は footer.php が --juku-footer-divider に渡す＝管理画面「デザイン画像」の設定に追従）。行頭・行末に区切りがぶら下がらないよう、幅ごとに「区切りを出す li」を固定する。
   PC（1100px以上）＝7本を1行／タブレット（768〜1099px）＝4本＋3本の2行（li.juku-footer-links__br で強制改行）／スマホ（767px以下）＝2列グリッド（2・2・1・2の4行）。 */
footer ul.juku-footer-links{list-style:none;margin:0 auto;padding:10px 0;max-width:1080px;display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;font-size:100%;line-height:1.5}
footer ul.juku-footer-links > li{position:relative;list-style:none;margin:0;padding:0 14px;display:flex;align-items:center;justify-content:center;min-width:0}
footer ul.juku-footer-links > li > a{display:block;padding:8px 2px;line-height:1.5;text-align:center;overflow-wrap:anywhere}
footer ul.juku-footer-links > li.juku-footer-links__item::before{content:"";display:none;position:absolute;left:-5px;top:0;bottom:0;width:10px;pointer-events:none;background-image:var(--juku-footer-divider,none);background-repeat:repeat-y;background-position:center}
footer ul.juku-footer-links > li.juku-footer-links__br{display:none;margin:0;padding:0}
@media (min-width:1100px){
footer ul.juku-footer-links{flex-wrap:nowrap}
footer ul.juku-footer-links > li.juku-footer-links__item:not(:first-child)::before{display:block}
}
@media (min-width:768px) and (max-width:1099px){
footer ul.juku-footer-links > li.juku-footer-links__br{display:block;flex:0 0 100%;height:0;overflow:hidden}
footer ul.juku-footer-links > li.juku-footer-links__item:nth-child(2)::before,
footer ul.juku-footer-links > li.juku-footer-links__item:nth-child(3)::before,
footer ul.juku-footer-links > li.juku-footer-links__item:nth-child(4)::before,
footer ul.juku-footer-links > li.juku-footer-links__item:nth-child(7)::before,
footer ul.juku-footer-links > li.juku-footer-links__item:nth-child(8)::before{display:block}
}
@media (max-width:767px){
footer ul.juku-footer-links{display:grid;grid-template-columns:1fr 1fr;max-width:480px;padding:6px 0;font-size:15px}
footer ul.juku-footer-links > li{padding:0 6px}
footer ul.juku-footer-links > li.juku-footer-links__br{display:none}
footer ul.juku-footer-links > li:nth-child(6){grid-column:1 / -1}
footer ul.juku-footer-links > li.juku-footer-links__item:nth-child(2)::before,
footer ul.juku-footer-links > li.juku-footer-links__item:nth-child(4)::before,
footer ul.juku-footer-links > li.juku-footer-links__item:nth-child(8)::before{display:block;left:-5px}
footer ul.juku-footer-links > li > a{padding:10px 2px}
}
/* [2026-10-17] 第50ラウンド②：お問い合わせ（/contact/）ほか固定ページ本文の「div[align=center] > table（style=width:100%;max-width:1080px・cellspacing=20）」が、cellspacing の左右20pxぶん親より広くなり（371px の親に対し table 441px）、ステップバーの「完了」とフォームの右側が画面外に切れていた。767px以下だけ、table を親幅に固定し（border-spacing の横を0・table-layout:fixed）、ステップバー・CF7 を親幅に収める。768px以上（PC・タブレット）は従来どおり。本文HTML（DB）は変えない。 */
@media (max-width:767px){
html body.page:not(.home) article.article-content > div[align="center"]{max-width:100%;box-sizing:border-box;overflow-x:clip}
html body.page:not(.home) article.article-content > div[align="center"] > table{width:100%;max-width:100%;table-layout:fixed;border-spacing:0 12px;box-sizing:border-box}
html body.page:not(.home) article.article-content > div[align="center"] > table > tbody > tr > td{box-sizing:border-box;min-width:0;max-width:100%;padding:0 6px;overflow-wrap:anywhere}
html body.page:not(.home) article.article-content > div[align="center"] > table img{max-width:100%;height:auto}
html body.page:not(.home) article.article-content > div[align="center"] .step-bar{box-sizing:border-box;width:100%;max-width:100%;padding:6px;border-radius:40px}
html body.page:not(.home) article.article-content > div[align="center"] .step-bar .step{flex:1 1 0;min-width:0;box-sizing:border-box;padding:8px 2px;font-size:14px;white-space:nowrap;margin-right:6px;border-radius:30px}
html body.page:not(.home) article.article-content > div[align="center"] .step-bar .step:last-child{margin-right:0}
html body.page:not(.home) article.article-content > div[align="center"] .wpcf7,
html body.page:not(.home) article.article-content > div[align="center"] .wpcf7 form{width:100%;max-width:100%;box-sizing:border-box}
html body.page:not(.home) article.article-content > div[align="center"] .wpcf7 div[style*="max-width"]{max-width:100% !important;box-sizing:border-box;padding-left:4px !important;padding-right:4px !important}
html body.page:not(.home) article.article-content > div[align="center"] .wpcf7 input,
html body.page:not(.home) article.article-content > div[align="center"] .wpcf7 select,
html body.page:not(.home) article.article-content > div[align="center"] .wpcf7 textarea{max-width:100%;box-sizing:border-box}
html body.page:not(.home) article.article-content > div[align="center"] .wpcf7 p,
html body.page:not(.home) article.article-content > div[align="center"] .wpcf7 label,
html body.page:not(.home) article.article-content > div[align="center"] .wpcf7 .wpcf7-list-item{max-width:100%;overflow-wrap:anywhere}
}
/* === /[2026-10-17] 第50ラウンド ここまで === */
/* === [2026-10-17] 第51ラウンド：①スマホのヘッダーの虫眼鏡と三本線を帯の縦中央にそろえる ②メガメニュー帯の女性画像を最前面に ③メガメニュー帯をパンくず帯の下端にぴったり ここから === */
/* [2026-10-17] 第51ラウンド①：ヘッダー帯（#header は top:var(--juku-pr-h)・高さ50px）の縦中心＝PR帯の高さ＋25px。本番実測（PR帯30px・ヘッダー帯 y30〜80・中心 y55）で、虫眼鏡 i（header.php 164行・td 内の p.slide-down[margin-top:2px]・SP ヘッダー div.none_03 内）の中心が y61（6px 下）、三本線 label.hm_btn（style.css 5730行 top:19px を css/juku-brand.css 839行が top:calc(19px + var(--juku-pr-h)) に上書き・高さ16px）の中心が y57（2px 下）。→ 三本線は top を calc(var(--juku-pr-h) + 17px) にして中心＝PR帯の高さ＋17＋8＝＋25px。juku-brand.css（style.css より後に読み込み）の同名規則 (0,2,2) に勝つよう label を足した (0,2,3) で指定。開いたとき（×印）は ::before/::after が top:50% で label の中央に出るので、×印の中心も同じ位置になる。虫眼鏡は表のセル内の流れに依存するので位置を動かさず、position:relative（.zenmen で既に relative）のまま top:-6px で見た目だけ 6px 上へ（--juku-pr-h に依存しない差なので固定値で足りる）。どちらも SP ヘッダー（.none_03・≤779px で表示）の中だけ。PC のヘッダー（.none_04）には当たらない */
@media (max-width:779px){
html body .none_03 p.slide-down > i.fa-sistrix{position:relative;top:-6px}
html body .hm_wrap label.hm_btn{top:calc(var(--juku-pr-h) + 17px)}
}
/* [2026-10-17] 第51ラウンド③：メガメニュー帯（ウィジェット custom_html-15 の table.zenmen_02・nav.mega-menu を含む表）の上端がパンくず帯の下端に2px食い込んでいた（本番実測 パンくず y80〜125／メガメニュー y123〜181）。ウィジェット本文のインライン margin-top:-2px（旧DBのダンプで確認。現行のインライン値は上司AIが computed で確認）を !important で 0 にし、重なり0・すき間0にする。TOP（body.home）は直前がスライダーで別構造なので対象外。:has は第11ラウンドなどで既に使用 */
html body:not(.home) table.zenmen_02:has(nav.mega-menu){margin-top:0 !important}
/* [2026-10-17] 第51ラウンド②：女性画像（ul.juku-has-sp-img > li.juku-megamenu-sp-img・≤480px で position:absolute;right:6px;bottom:0;z-index:3・img 高さ96px。style.css 5807〜5809行）は、メガメニュー帯の表（.zenmen_02{z-index:10 !important}）の積層文脈の中にある。パンくず帯（single.php 138行の表も .zenmen_02＝z10）と同順位だと、先に書かれたパンくず帯と取り合わないよう、メガメニュー帯の表を z-index:12 !important にして確実にパンくず帯より前に出す（TOP は対象外）。固定ヘッダー（#header z100）・ハンバーガー（.hm_wrap/.hm_btn はヘッダー内）・年齢認証より下のまま、カード類（z2）より上。画像の高さ96pxは変えない：画像の上端＝メガメニュー帯の表の上端−約41px（表58px−下の余白3px−96px）で、パンくず帯が1行（約45px）でも表の上端は y125 前後＝画像の上端は y84 前後で、三本線の下端（y63〜65）より下。li 自身も z-index:5 にして帯内のカプセルより前にする */
html body:not(.home) table.zenmen_02:has(nav.mega-menu){position:relative;z-index:12 !important}
@media (max-width:480px){
html body nav.mega-menu ul.menu.zenmen.juku-has-sp-img > li.juku-megamenu-sp-img{z-index:5}
}
/* [2026-10-17] 第51b：女性画像（li.juku-megamenu-sp-img の img）の上の約9pxが固定ヘッダー（#header・fixed・z100）の裏に隠れる（G指摘）。実測（375px相当・記事ページ）＝ヘッダー下端 y80（PR帯30＋ヘッダー帯50＝var(--juku-pr-h)+50px）・パンくず帯1行 y80〜110.4・メガメニュー帯の表の上端 110.4・画像 top 71・高さ96。画像は li の bottom:0（ul の下端＝帯の下端の約1px上）に付くので、上端＝下端−高さ。→ 高さを 96px→80px に縮めて上端を約87px（ヘッダー下端 y80 より7px下・要件の4px以上）にする。縦横比は width:auto で保つ（実寸130×480→幅は26.0px→21.7px）。下へずらす案（bottom を負に）は帯の下の本文・スライダーに食い込むので採らない。80px は上端 ≥ 84px（ヘッダー下端+4px）を満たす最大に近い高さで、顔の大きさの減りは17%。パンくず帯が2行以上のページは帯が下がるので余裕が増える。TOP（body.home）は対象外のまま */
@media (max-width:480px){
html body:not(.home) nav.mega-menu ul.menu.zenmen.juku-has-sp-img > li.juku-megamenu-sp-img img{height:80px;width:auto}
}
/* === /[2026-10-17] 第51ラウンド ここまで === */
/* === [2026-10-17] 第52ラウンド：スマホ（767px以下）のフッターリンクを左寄せに統一 ここから === */
/* [2026-10-17] 第52ラウンド：「下のテキストリンクの収まりが非常に悪い。左寄せにしてください」。第50のスマホ2列グリッドはセル内が中央寄せで、文字の開始位置が行ごとにばらつき、区切りの点線も列の間に浮いていた。767px以下だけ、①2列は維持して各列の左端をそろえる（列幅は文字の長さ＝max-content・ul全体は中央に置いて左右の余白を均等に）②リンク・li を左寄せ（「18歳未満閲覧禁止のご案内」も2列ぶち抜きのまま左端から）③区切りの点線（li::before）は出さず、各リンクの左に山かっこ（Font Awesome 6 Free の \f054・白の70%）を a::before で付ける。リンクの高さは44px以上、白文字・下線は第50のまま。768px以上は変えない。 */
@media (max-width:767px){
footer ul.juku-footer-links{grid-template-columns:repeat(2,minmax(0,max-content));column-gap:28px;row-gap:0;justify-content:center;width:fit-content;max-width:100%;margin:0 auto;padding:6px 0}
footer ul.juku-footer-links > li{padding:0;justify-content:flex-start;text-align:left}
footer ul.juku-footer-links > li.juku-footer-links__item:nth-child(n)::before{display:none}
footer ul.juku-footer-links > li > a{display:flex;align-items:center;justify-content:flex-start;min-height:44px;padding:8px 0;text-align:left}
footer ul.juku-footer-links > li > a::before{content:"\f054";font-family:"Font Awesome 6 Free";font-weight:900;font-size:10px;line-height:1;flex:0 0 10px;width:10px;margin-right:8px;opacity:.7;text-decoration:none}
}
/* === /[2026-10-17] 第52ラウンド ここまで === */
/* === [2026-10-17] 第53ラウンド：TOP の記事スライダーのカードを固定ヘッダーの下（背面）でスクロールさせる ここから === */
/* [2026-10-17] 第53ラウンド：【原因】カードの枠 div.item-content（position:relative）の z-index:999 は、プラグイン carousel-horizontal-posts-content-slider の assets/css/custom-style.css 356〜370行 .wa_chpcs_card .item-content{…z-index:999;display:flex…}（テーマ側に 999 の指定は無い＝style.css・css/juku-brand.css・inc/juku-site-colors.php を grep して0件）。祖先（li・ul#wa_chpcs_foo9342・div.caroufredsel_wrapper・#wa_chpcs_image_carousel9342・div.shiny-btn）はどれも z-index:auto で積層文脈を作らないため、999 がルート（body）の積層文脈でそのまま効き、固定ヘッダー（header.php 101行 #header のインライン z-index:100。中の div.fixheader は #header の積層文脈の内側）とPR帯（css/juku-brand.css 831行 z99）より前に出ていた。【直し】item-content を z-index:1 !important にする（同じプラグイン規則に !important＋高詳細度 (0,3,2) で勝つ）。item-content は position:relative のままなので積層文脈になり、中の題名 h4（z2）・矢印を含む画像枠は item-content の内側で、カルーセル直下の矢印（.wa_chpcs_next／prev・プラグイン 114〜122行の z-index:4）とともに、カード同士の見た目の重なりは変わらない。ヘッダー（100）・PR帯（99）・ハンバーガー・年齢認証より下になる。ヘッダー側は変えない */
html body .wa_chpcs_image_carousel .wa_chpcs_card .item-content{z-index:1 !important}
/* === /[2026-10-17] 第53ラウンド ここまで === */
/* === /[2026-10-13] ここまで === */
/* === [2026-10-20] 第56ラウンド：TOP ヒーローのカテゴリーカプセル列の表示数を画面に合わせて自動調整（js/juku-hero-chips.js）ここから === */
/* [2026-10-20] 第56ラウンド：TOP のヒーロー内の半透明パネルの下のカテゴリーカプセル列（header.php の [widget id="custom_html-47"]＝div.random-cat-wrap の a.random-cat-btn）は、カテゴリーが増えると PC で2行・スマホで3〜4行に折り返してヒーローが縦に伸び、ファーストビューからはみ出していた。js/juku-hero-chips.js（functions.php が TOP だけで読み込む）が、PC・タブレット（768px以上）では1行目に収まる分、スマホ（767px以下）ではヒーロー全体〔パネル＋SCROLL〕が最初の画面（100svh）に収まる数（最低2個）だけを残し、残りに class juku-chip-hidden を付ける。ここはその class の指定だけ（並び順・見た目・色・リンクは変えない）。JS が動かない環境ではこの class が付かないので、従来どおり全部表示される。SCROLL 表示の判定は css/juku-brand.css 799〜804行の式〔100svh−18vh−k〕と同じ式で、JS が収まったときに .hero の --juku-sc-k を実際のパネル高さで上書きする（隠れる／出るの境目は CSS 側のまま） */
html body .hero .random-cat-wrap .random-cat-btn.juku-chip-hidden{display:none !important}
/* === /[2026-10-20] 第56ラウンド ここまで === */
/* === [2026-10-20] 第57ラウンド：TOP ヒーローのカテゴリーカプセル列を PC で「できるだけ多く1行に」（js/juku-hero-chips.js の詰めモード）ここから === */
/* [2026-10-20] 第57ラウンド：カプセル列はテーマ（inc/juku-hero-chips.php）が全カテゴリー分を出す。PC・タブレット（768px 以上）で1行に入らないとき、js/juku-hero-chips.js が先に .random-cat-wrap へ class juku-chips-compact を付けて測り直す（それでも入らない分だけ末尾から juku-chip-hidden で非表示）。ここは詰めモード（juku-chips-compact）と詰めモード2（juku-chips-compact2＝さらに少し詰める）の指定：カプセル間の gap・カプセルの左右の余白・文字間・アイコンの右余白だけを詰める（文字サイズ・色・形は変えない）。アイコンの右余白は inline style の margin-right:6px なので !important。スマホ（767px 以下）では使われない */
html body .hero .random-cat-wrap.juku-chips-compact{gap:5px}
html body .hero .random-cat-wrap.juku-chips-compact .random-cat-btn{padding-left:6px;padding-right:6px;letter-spacing:-0.02em}
html body .hero .random-cat-wrap.juku-chips-compact .random-cat-btn i{margin-right:3px !important}
html body .hero .random-cat-wrap.juku-chips-compact2{gap:4px}
html body .hero .random-cat-wrap.juku-chips-compact2 .random-cat-btn{padding-left:5px;padding-right:5px;letter-spacing:-0.03em}
html body .hero .random-cat-wrap.juku-chips-compact2 .random-cat-btn i{margin-right:2px !important}
/* === /[2026-10-20] 第57ラウンド ここまで === */

/* === [2026-10-22] AAA-BTN-READABLE ボタンブロックの既定の文字色・背景色（v1.8.6）ここから === */
/* ブロックエディターの「ボタン」を、色を指定せずに置くと、記事内リンクの文字色（濃い灰色）が当たり、濃い灰色の背景の上に濃い灰色の文字になって読めなかった。色を指定していないボタンだけ、白い文字・濃い背景にする。利用者がエディターで文字色・背景色を指定したもの（has-text-color / has-background クラス、または style 属性の color / background）は、この指定の対象外なので、指定した色がそのまま出る。枠線スタイル（is-style-outline）は背景なし・文字は元の色のまま。 */
html body .wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-text-color):not([style^="color:"]):not([style*=";color:"]):not([style*="; color:"]):not([style*=" color:"]),
html body .wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-text-color):not([style^="color:"]):not([style*=";color:"]):not([style*="; color:"]):not([style*=" color:"]):visited,
html body .wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-text-color):not([style^="color:"]):not([style*=";color:"]):not([style*="; color:"]):not([style*=" color:"]):hover,
html body .wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-text-color):not([style^="color:"]):not([style*=";color:"]):not([style*="; color:"]):not([style*=" color:"]):focus,
html body .wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-text-color):not([style^="color:"]):not([style*=";color:"]):not([style*="; color:"]):not([style*=" color:"]):active{color:#fff;text-decoration:none}
html body .wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-background):not([style*="background"]){background-color:#32373c}
html body .wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-background):not([style*="background"]):hover,
html body .wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-background):not([style*="background"]):focus{background-color:#4b5158}
/* AAA-BTN-NOUL ボタンの文字に、記事内リンクの下線が付かないようにする（利用者が style 属性で text-decoration を指定したものは対象外） */
html body .wp-block-button > .wp-block-button__link:not([style*="text-decoration"]),html body .wp-block-button > .wp-block-button__link:not([style*="text-decoration"]):hover,html body .wp-block-button > .wp-block-button__link:not([style*="text-decoration"]):focus{text-decoration:none}
/* === /[2026-10-22] AAA-BTN-READABLE ここまで === */