@charset "utf-8";
/*
theme Name: アダルトアフィリエイトサイト制作代行
Author: afi-support.net
Description: 注意事項：当テーマに記載されているコードの改変や設定の変更は、慎重に行ってください。これらの操作に伴う結果や影響については、すべてご自身の責任で行っていただく必要があります。特に、サイトの運営や機能に関わる部分の変更については、事前にバックアップを取ることを強くお勧めします。問題が発生した場合でも、弊方では一切の責任を負いかねますので、あらかじめご了承ください。別途、有償でのカスタマイズ等も承ります。メッセージまたは、管理者メールアドレスまでご連絡ください。
Version: 1.5.0
*/

@media screen and (max-width: 768px) {
.responsive-text {
font-size: 120% !important;
}
}
/* サイト全体に背景色と複数の背景画像を適用 */
body {
background: linear-gradient(to right, 
#000 0%,
#000 25%,
#000 50%,
#000 100%
) !important;
/*background: 
url('/Image/bg-main.jpg') 50% 50%; /* 新しい背景画像 */
background-size: 100%; /* 新しい背景画像のサイズ */
/*background-attachment: scroll;
margin: 0;
padding: 0;*/
}
/* モバイル用のスタイル */

/* 初期状態で非表示にする */
.bottom {
opacity: 0;
visibility: hidden; /* 完全に非表示 */
transition: opacity 0.6s ease-out, visibility 0.6s ease-out; /* なめらかな表示 */
}

/* 一瞬非表示 */
/* 一瞬非表示 */
.count-up,
.count-down{
display:none;
}

#box1 .count-up,#box1 .count-down,
#box2 .count-up,#box2 .count-down,
#box3 .count-up,#box3 .count-down,
#box4 .count-up,#box4 .count-down,
#box5 .count-up, #box5 .count-down,
#box6 .count-up, #box6 .count-down,
#box7 .count-up, #box7 .count-down{
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; */
}

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:#f1f1f1 !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: #f1f1f1;  /* 線の色。この値を調整で変更可能 */
transition: width 0.3s ease;
}
a.animated-border-link:hover{
color:#fff !important;
text-decoration:none;
}
a.animated-border-link:hover:after {
width: 90%;
}
a.animated-border-link:visited,a.animated-border-link:active{
color:#f1f1f1;
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}

img {
max-width: 100%;
height: auto;
}
a:hover img {
opacity: 0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha(opacity=70)";
}
a:hover img.nohover {
opacity: 1.0;
filter: alpha(opacity=100) !important;
-ms-filter: "alpha(opacity=100)" !important;
}

.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;*/
}

/*見出し00_WEBフォントレスポンシブ*/
.my-font_00 {
font-family: "Noto Sans JP", serif;
font-weight: 900;
font-style: normal;
font-size: 190%;
/*text-shadow: 0px 0px 5px #555 ;*/
}
@media (max-width: 780px) {
.my-font_00 {
font-size: 5.3vw;
}
}

/*見出しWEBフォントレスポンシブ*/
.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: 6.5vw;
}
}*/

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

/* 投稿ページの <p> タグのテキストカラーを #333 に設定 */
.single-post p {
color: #333 !important;
}

/*見出し２_WEBフォントレスポンシブ*/
.my-font_02 {
font-family: "Noto Sans JP", serif;
font-weight: 400;
font-style: normal;
font-size: 350%; /* デフォルトのフォントサイズ */
line-height: 120%;
}
@media (max-width: 780px) {
.my-font_02 {
font-size: 5.3vw !important;
}
}

/*見出しWEBフォントレスポンシブ*/
.my-font_03 {
font-family: "Noto Sans JP", serif;
font-weight: 400;
font-style: normal;
font-size: 200%; /* デフォルトのフォントサイズ */
}
@media (max-width: 780px) {
.my-font_03 {
font-size: 5.3vw;
}
}

/*見出しWEBフォントレスポンシブ*/
.my-font_04 {
font-family: "Noto Sans JP", serif;
font-weight: 400;
font-style: normal;
font-size: 140%; /* デフォルトのフォントサイズ */
}
@media (max-width: 780px) {
.my-font_04 {
font-size: 150%; /* デフォルトのフォントサイズ */
}
}

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

.container {
max-width: 1280px;
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 2px;
}

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

/* サイドバー非表示用（固定ページ & home.php） */
.page .contents,
.home-page .contents {
float: none;
width: 100%;
text-align: left;
}
.page #sidebar,
.home-page #sidebar {
display: none;
}

.page .container,
.home-page .container {
width: 100%;
padding: 0 10px;
}

/* 記事一覧 */
.article-list {
  background-color: #fff;
  border: 10px solid rgba(221, 221, 221, 0.7);
  border-radius: 20px; /* ← 10pxより大きくする（例：20px） */
  overflow: hidden;    /* ← 念のため。中身も角丸に沿って切る */
  background-clip: padding-box; /* ← 背景が枠線下に回り込むのを防ぐ */
  padding: 10px;
  width: calc(33.33% - 10px);
  box-sizing: border-box;
  margin: 5px 3px;
  display: inline-block;
  box-shadow: 0px 0px 0px #aaa !important;
}

.article-list:hover {
border: 10px solid #c51a8d;
background-color: #f1f1f1;
}

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

.article-list .img-wrap {
width: 100%;
height: 200px;
overflow: hidden; /* 親要素でオーバーフローを隠す */
border-radius: 5px;
}

.article-list .img-wrap img {
width: 100%;
height: 200px;
object-fit: cover;
transition: 0.5s all;
}

.article-list:hover .img-wrap img {
transform: scale(1.3, 1.3); /* 拡大 */
opacity: 1.0;
}

.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;
font-weight: normal;
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% - 9px);
}
.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(100% - 10px);
}
.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;
}
}

/*ページネーション*/
.parent {
display: flex;
justify-content: center;
}
.pagination {
display: flex;
align-items: center;
justify-content: center;
}
.pagination {
margin: 40px 0% 40px 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: #111;
background-color: #fff;
border: solid 1px #111;
border-radius: 5px;
}

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

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

.pagination li .dots {	
width: 20px;
padding-top: 10px;
color: #fff;
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 10px 25px;
}
	
.kiji-info .cat-data a {
text-decoration: none;
color: #222;
}
	
.kiji-info .cat-data a:hover {	
opacity: .8;
}
	
.kiji-img {
max-width: 100%;
margin: 30px 0px;
text-align: center;
display: block;
transition: none 0s ease 0s;
outline: none;
border: none;
padding: 0px;
border-spacing: 0px;
border-radius: 0px !important; /* 必要なら角丸 */
z-index: 30;
object-fit: cover; /* 画像の表示方法を調整 */
overflow: hidden; /* 角丸が適用されるように */
}
.kiji-img img {
border-radius: 10px !important; /* 画像にも角丸を適用 */
width: 100%; /* 画像のサイズ調整 */
height: auto; /* アスペクト比を保つ */
}

/*タグ*/
.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: FontAwesome;
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: 0 10px 30px;
color:#333 ;
line-height: 200%;
}

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

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

.kiji h2 {
position: relative;
margin: 50px -50px 0px -50px;
padding: 80px 0 10px 35px;
/* 背景に2つの画像を設定 */
background:
url(/Image/) 50% 100% repeat-x, /* 新しい画像を追加 */
url(/Image/logo.webp) 5% 90% no-repeat, /* 新しい画像を追加 */
url(/Image/black.webp) 0% 0% repeat-x;
/* 背景サイズの設定: それぞれの画像に異なるサイズ指定が可能 */
background-size: 1000px,400px,100%;
color: #fff !important;
box-shadow: 0 0px 5px #000 !important;
font-size: 150% !important;
line-height: 44px;
/* 台形の形状を定義 */
clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 100%);
z-index: 1;
/* 下方向に影を付ける */
}

.kiji h3 {
position: relative;
margin: 70px -30px 70px -30px;
padding: 80px 35px 30px;
/* 背景に2つの画像を設定 */
background:
url(/Image/3549600_m.webp) 50% 50% repeat-x, /* 新しい画像を追加 */
url(/Image/) 5% 90% no-repeat, /* 新しい画像を追加 */
url(/Image/black.webp) 0% 0% repeat-x;
/* 背景サイズの設定: それぞれの画像に異なるサイズ指定が可能 */
background-size: 1000px,400px,100%;
color: #fff !important;
box-shadow: 0 0px 5px #000 !important;
font-weight: 900;
font-size: 150% !important;
font-family: "Noto Sans JP", serif;
line-height: 160%;
/* 台形の形状を定義 */
clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 100%);
z-index: 1;
}

/* h4関連記事 */
.kiji h4 {
color: #000;/*文字色*/
font-weight: 900;
font-size: 125%;
font-family: "Noto Sans JP", serif;
padding: 5px;
margin: 50px 0 30px 0%;
line-height: 180%;
letter-spacing: 0.1em; /* 文字間を空ける */
border-left: 15px solid #000; /* 左端に縦線を追加 */
padding-left: 25px; /* 縦線よりテキストを15px離す */
}

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

.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: 0px; /* 必要なら角丸 */
}

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

.kiji h6 {
color: #000;/*文字色*/
font-weight: bold;
font-size: 1.3em;
margin-top: 30px;
margin-bottom: 20px;
padding-bottom:0px;
line-height: 150%;
}

/*ここまで*/
@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 0px 25px;
}
	
/*スマホサイズの記事中タイトルタグ*/
.kiji h1 {
font-size: 1.7em;
}

.kiji h2 {
position: relative;
margin: 50px -30px 20px -30px;
padding: 80px 0 10px 35px;
/* 背景に2つの画像を設定 */
background:
url(/Image/) 50% 100% repeat-x, /* 新しい画像を追加 */
url(/Image/) 0% 70% no-repeat, /* 新しい画像を追加 */
url(/Image/black.webp) 0% 0% repeat-x;
/* 背景サイズの設定: それぞれの画像に異なるサイズ指定が可能 */
background-size: 1000px,350px,100%;
color: #f1f1f1 !important;
font-size: 150% !important;
line-height: 44px;
/* 台形の形状を定義 */
clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 100%);
z-index: 1;
}
	
.kiji h3 {
position: relative;
margin: 50px -20px 50px -20px;
padding: 70px 30px 20px;
/* 背景に2つの画像を設定 */
background:
url(/Image/3549600_m.webp) 50% 20% repeat-x, /* 新しい画像を追加 */
url(/Image/) 0% 70% no-repeat, /* 新しい画像を追加 */
url(/Image/black.webp) 0% 0% repeat-x;
/* 背景サイズの設定: それぞれの画像に異なるサイズ指定が可能 */
background-size: 1000px,350px,100%;
color: #fff !important;
box-shadow: 0 0px 3px #000 !important;
font-weight: 900;
font-size: 150% !important;
font-family: "Noto Sans JP", serif;
line-height: 150%;
/* 台形の形状を定義 */
clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 100%);
	box-shadow: 0 10px 10px #ccc !important;
z-index: 1;
}

/* h4関連記事 */
.kiji h4 {
color: #000;/*文字色*/
font-weight: 900;
font-size: 133%;
font-family: "Noto Sans JP", serif;
padding: 5px;
margin: 40px 0 20px -10px;
line-height: 160%;
border-left: 10px solid #000; /* 左端に縦線を追加 */
padding-left: 20px; /* 縦線よりテキストを15px離す */
}

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

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

.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 #555 dotted ;
padding-bottom:10px;
padding-top:10px;
padding-left: 20px;
list-style: none;
}

.widget_categories li a {
font-size: 100%;
line-height: 100% !important;
color: #fff !important;
text-decoration:underline;
margin-left: 20px; /* アイコン位置の調整 */
}

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

/*.widget_categories li:before {
font-size: 1.0em;
color: #000;
content: "\f0a9";
font-family: FontAwesome;
margin: 2px 0px 0px -25px !important;
position:absolute;
}*/

/* 各カテゴリーのアイコンを画像に変更 */
.widget_categories li {
 position: relative;
}
/* デフォルトはFontAwesomeのアイコン */
.widget_categories li:before {
    content: "\f07b";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #f1f1f1;
    margin-right: 10px;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}

/* スラッグごとに画像を指定*
/* 複数のカテゴリーに同じスタイルを適用 */
.widget_categories li.cat-item-146:before,

.widget_categories li.cat-item-149:before,
.widget_categories li.cat-item-152:before,
.widget_categories li.cat-item-151:before,
.widget_categories li.cat-item-153:before,
.widget_categories li.cat-item-154:before,
.widget_categories li.cat-item-155:before,

.widget_categories li.cat-item-156:before,
.widget_categories li.cat-item-157:before,
.widget_categories li.cat-item-158:before,
.widget_categories li.cat-item-159:before,
.widget_categories li.cat-item-160:before,
.widget_categories li.cat-item-161:before,
.widget_categories li.cat-item-162:before,

.widget_categories li.cat-item-163:before,
.widget_categories li.cat-item-164:before,
.widget_categories li.cat-item-165:before,
.widget_categories li.cat-item-166:before,
.widget_categories li.cat-item-167:before,
.widget_categories li.cat-item-168:before,
.widget_categories li.cat-item-169:before,
.widget_categories li.cat-item-170:before,
.widget_categories li.cat-item-171:before,

.widget_categories li.cat-item-172:before,
.widget_categories li.cat-item-173:before,
.widget_categories li.cat-item-174:before,
.widget_categories li.cat-item-175:before,
.widget_categories li.cat-item-176:before,
.widget_categories li.cat-item-177:before,
.widget_categories li.cat-item-178:before,

.widget_categories li.cat-item-179:before,
.widget_categories li.cat-item-180:before,
.widget_categories li.cat-item-181:before,
.widget_categories li.cat-item-182:before,
.widget_categories li.cat-item-183:before,

.widget_categories li.cat-item-184:before,
.widget_categories li.cat-item-185:before,
.widget_categories li.cat-item-186:before,
.widget_categories li.cat-item-187:before,

.widget_categories li.cat-item-188:before,
.widget_categories li.cat-item-189:before,
.widget_categories li.cat-item-190:before,
.widget_categories li.cat-item-191:before,
.widget_categories li.cat-item-192:before,
.widget_categories li.cat-item-193:before,
.widget_categories li.cat-item-194:before,

.widget_categories li.cat-item-195:before,
.widget_categories li.cat-item-:before {
content: '\f3c5'; /* アイコンのコードポイント */
font-family: 'Font Awesome 6 PRO';
color: #929292;
font-size: 150%;
display: inline-block;
text-align: center;
position: absolute; /* アイコンを絶対位置で配置 */
top: 20px; /* アイコンをリストアイテムの最上端に配置 */
left: 10px; /* アイコンをリストアイテムの左端に配置 */
margin-right: 5px; /* アイコンとテキストの間にスペース */
}

/* リストアイテムの親要素に相対位置を指定 */
.widget_categories li {
position: relative; /* 親要素に相対位置を設定 */
padding-left: 25px; /* アイコン分のスペースを確保 */
}



/*.widget_categories li.cat-item-2:before {
content: '\f001';
font-family: 'Font Awesome 6 PRO';
color: #929292;
font-size: 150%;
display: inline-block;
text-align: center;
left: 5px !important;
}*/

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

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


.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: FontAwesome;
/* 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: 50px;
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: FontAwesome;
    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: 1.5px #888 dotted ;
padding-bottom:0px;
padding-top:5px;
margin:0 10px;
}

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

.widget_archive li:before {
font-size: 1.3em;
color: #fff;
content: "\f044";
font-family: FontAwesome;
padding-left: 10px;
}

.widget_archive a:hover {
color: #f1f1f1 !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); }
}

/* 揺れるする画像 */
.pulse {
animation: vertical_9315 3.50s ease infinite;
transform-origin: 50% 50%;
}

@keyframes vertical_9315 {
0% { transform:translate(0,-3px) }
3.27869% { transform:translate(0,3px) }
6.55738% { transform:translate(0,-3px) }
9.83606% { transform:translate(0,3px) }
13.11475% { transform:translate(0,-3px) }
16.39344% { transform:translate(0,3px) }
18.03279% { transform:translate(0,0) }
100% { transform:translate(0,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: FontAwesome;
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: FontAwesome;
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: 100vh; /* スライダーの高さ - 変更注意 */
}
.loop-box ul {
position: absolute; left: 0; top: 0;
display: flex; 
justify-content: space-between;
background: ; /* スライダーの背景色 - 変更可 */
list-style: none;
min-width:100%;
width:max-content;
animation: 1000s 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%); }
}

/* 高さの個別設定 */
/*.slider-a, .slider-a ul {
height: auto; /* スライダーAの高さ */
/*box-shadow: 0 0px 5px rgba(35,35,35,0.8);
}

.slider-b, .slider-b ul {
height: auto; /* スライダーBの高さ */
/*}*/

/* スライダーBの逆方向設定 */
/* 新しいアニメーション loop3 と loop4 */
.loop-box ul.loop3 {
 animation-name: loop3;
}
.loop-box ul.loop4 {
animation-name: loop4;
}

@keyframes loop3 {
0% { transform: translateX(0); }
49.99999% { transform: translateX(100%); } /* 逆向き */
50% { transform: translateX(-100%); } /* 逆向き */
}

@keyframes loop4 {
0% { transform: translateX(-100%); } /* 逆向き */
100% { transform: translateX(100%); } /* 逆向き */
}

/* アニメーション個別設定 */
.loop-box ul.loop1 {
animation-name: loop1;
background: !important;
}
.loop-box ul.loop2 {
animation-name: loop2;
background: !important;
}

@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;
text-align: center;
text-decoration: none;
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: FontAwesome;
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: 94% !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, 1.0)  !important;/*背景色*/
background: url(/Image/logo_03_h.svg) no-repeat 99% 98%; background-size:100px;
margin: 80px auto 100px auto;
padding:60px 30px 50px 20px;
display: table;
border: solid 5px #000 !important;/*外枠*/
position: relative;
border-radius: 10px;/*角丸*/
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: #000 !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:100% !important;
color:#fff !important;
}

/*サイドバーランキング順位　ここから*/
.wpp-list {
margin-left:5px;
counter-reset: wpp-ranking ;
}
.wpp-list li {
position: relative;
list-style-type: none;
}
.wpp-list li:before {
counter-increment: wpp-ranking;
content: counter(wpp-ranking, decimal);
background: linear-gradient(180deg, rgba(55,55,55,1.0) 0%, rgba(55,55,55,1.0) 50%, rgba(0,0,0,1.0) 50%, rgba(0,0,0,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 -8px 0 5px;
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 {
margin: 0px 5px 10px 0px;
border-radius: 10px; /* 円形にする */
}

/* グローバルメニュー */
.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 #777;
box-sizing: border-box;
}
.scroll-nav ul li {
float: left;
width: 253px; /* メニューの個別の幅 */
text-align: center;
}
.scroll-nav ul li:hover {
background: url(/Image/line_bg.png);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 0px 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: url(/Image/logo_b.webp),url(/Image/),url(/Image/);
background-size: 200px,150px,600px ;
background-position: 25px 40px, 98% 98%, 50% 50%;
background-repeat: no-repeat, no-repeat, repeat;
margin: 20px auto -50px auto;
padding:10px 20px 10px 20px;
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: 54px !important;
}

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

.ico_play img {
position: absolute;
bottom: 23%;
left: 88px;
width: 100px !important;
height: 100px !important;
}/*  */

/*********************** 投稿ページ画像 ***********************************/
.kiji-img_02 {
clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0 100%);
background-position: center top;
background-size: 800px auto !important;
background-repeat: no-repeat;
position: relative;
overflow: hidden;
}
/* モバイル（画面幅 780px 以下） */
@media (max-width: 780px) {
.kiji-img_02 {
background-size: 450px auto !important;
}}
/* モバイル（画面幅 550px 以下） */
/*@media (max-width: 550px) {
.kiji-img_02 {
background-size: 300px auto !important;
}
}

/* 記事中画像エフェクト */
.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: FontAwesome;
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;
}
}

@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{
text-align:center;
color: #f1f1f1;
font-size: 9px;
background-color: #222;
border-radius: 50px;
padding: 8px 11px;
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; /* 枠外の画像を非表示 */
}

/* 基本の.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 -20px 20px -20px;
  padding: 80px 0 10px 35px;

  /* 背景の統合: グラデーション、画像1、画像2 */
  background: 
  linear-gradient(to left, rgba(16,80,43, 0.8), rgba(16,80,43, 0.8)), /* グラデーション */
  url('/Image/') right center no-repeat, /* 追加する画像 */
  url('/Image/black.webp') left center no-repeat; /* 既存の画像 */
  
  background-size: cover, cover, cover;
  background-position: left center, right center, left center;
  background-repeat: no-repeat, no-repeat, no-repeat;

  /* テキストスタイル */
  color: rgba(0, 0, 0, 1);
  font-size: 150% !important;
  line-height: 44px;

  /* 台形の形状を定義 */
  clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 100%);
  
  z-index: 1;
}

.content_txt_02 {
position: relative;
display: block;
width: 100%;
color: #10502b;
font-size: 100% !important;
text-align: left;
padding: 25px 165px 22px 20px;
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 10px #011a33;
-moz-box-shadow: -2px -3px 10px #011a33;
box-shadow: -2px -3px 10px #011a33;
z-index: 2; /* 追加 */
}

@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: 150%;
font-weight: 400;
text-align: left;
letter-spacing: 0.1em;
padding: 30px 120px 20px 20px;
background: linear-gradient(to right, rgba(255,255,255,1.0), rgba(255,255,255,1.0));
border-bottom: 8px solid rgba(255,255,255,0.5);
box-sizing: border-box;
border-top-left-radius: 0px;
-webkit-box-shadow: -2px -3px 10px #011a33;
-moz-box-shadow: -2px -3px 10px #011a33;
box-shadow: -2px -3px 10px #011a33;
z-index: 2;
}

/*@media screen and (max-width: 599px) {
.content_txt_03 {
font-size: 100% !important;
line-height: 120%;
}
}*/

.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: FontAwesome;
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: url(/Image/bg-beige-top.png), url(/Image/bg-beige-bottom.png);
background-repeat: no-repeat, no-repeat;
background-position: left top, right bottom;
z-index: 1 !important;
}


.bga {
  padding: 60px 20px;
  margin: 20px;
  background-color: rgba(0, 0, 0, 0);
  position: relative;
  z-index: 1;
  min-height: 100px; /* 擬似要素の描画空間を確保 */
}

.bga::before {
  content: "\f10d";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: rgba(0, 0, 0, 0.3);
  font-size: 250%;
  position: absolute;
  top: 0px;
  left: 10px;
  z-index: 2;
}

.bga::after {
  content: "\f10e" !important;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: rgba(0, 0, 0, 0.3);
  font-size: 250%;
  position: absolute;
  bottom: 0px;
  right: 10px;
  z-index: 2;
  display: block;
}

/*.bga {
padding: 80px 20px;
background-color: rgba(255, 255, 255, 0.0);
background-image: url(/Image/bg-beige-top.png), url(/Image/bg-beige-bottom.png);
background-repeat: no-repeat, no-repeat;
background-position: left top, right bottom;
z-index: 1 !important;
}*/
.bga_02 {
padding: 50px 0 50px;
margin: 50px 0;
background-color: rgba(0, 0, 0, 0.0);
position: relative; /* 子要素の位置指定を可能にする */
z-index: 1 !important;
}

.bga_02::before {
content: "\f10d"; /* アイコンフォントのUnicode値を設定（例: FontAwesome） */
font-family: FontAwesome; /* 使用するフォントファミリー */
color: rgba(255,255,255, 0.8); /* アイコンの色と透明度を調整 */
font-size: 200%; /* アイコンのサイズ */
position: absolute;
top: 0px;
left: 10px;
}

.bga_02::after {
content: "\f10e"; /* 別のアイコンフォントのUnicode値を設定 */
font-family: FontAwesome; /* 使用するフォントファミリー */
color: rgba(255,255,255, 0.8); /* アイコンの色と透明度を調整 */
font-size: 200%; /* アイコンのサイズ */
position: absolute;
bottom: 0px;
right: 10px;
}
/* ランキング */
.wpp-thumbnail-container{
margin:20px 20px 0px;
}

.wpp-item-data{
margin:0 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; /* カテゴリー名を太字にする */
}

.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), rgba(51, 51, 51, 0.5) calc(100% - 1px)),
linear-gradient(90deg, transparent calc(100% - 1px), rgba(51, 51, 51, 0.5) calc(100% - 1px));
background-size: 8px 8px;
background-repeat: repeat;
background-position: center center;
/* 以下任意のスタイル */
padding: 10px 0;
}
/* イエローアンダーライン太字 */
.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;
}
/* ネイビーアンダーライン太字 */
.navy {
background: linear-gradient(transparent 0%, #062d59 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: fontawesome;
content: "\f0ca";
position: absolute;
top: -5px;
left: 17px;
font-size: 26px;
}

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

/*** 背景動画（画像スライダー置き換え） ***/
.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; /* フェードイン・アウト */
}

/* 表示中の背景画像 */
.background-image.active {
opacity: 0.9; /* 半透明 */
filter: brightness(0.5) contrast(1.2) saturate(1.1); /* フィルター効果 */
}

/* 各背景画像の指定 */
.bg1 {
background-image: url('/Image/22182311_m.webp');
background-position: 50% 50%;
}
.bg2 {
background-image: url('/Image/22182302_m.webp');
background-position: 50% 50%;
}
.bg3 {
background-image: url('/Image/22182308_m.webp');
background-position: 50% 50%;
}

/* ランダム画像を白黒にする */
/*.random-image {
max-width: 100%; /* 画像が親要素を超えないように */
/*display: block;
margin: 0 auto; /* 中央揃え */
/*filter: grayscale(100%); /* 画像を白黒にする */
/*}

/* ステップバーの全体設定 */
.step-bar {
display: flex;
justify-content: space-between;
background-color: #ddd;
border-radius: 50px;
padding: 10px;
margin: 20px 0;
width: 100%;
max-width: 1080px;
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: -20px;
    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%);
}

.small {
opacity: 1.0;
}

/* アニメーション用スタイル */
#scroll-image {
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out; /* アニメーション設定 */
  opacity: 1; /* 初期状態: 表示 */
  visibility: visible; /* 初期状態: 表示 */
}

#scroll-image.hide-image {
  opacity: 0; /* 非表示時: 透明度0 */
  visibility: hidden; /* 非表示時: 要素を見えなくする */
}
/* 自動追加画像角丸センター揃え */
.random-image-container {
    text-align: center; /* 画像を中央揃えにする */
    margin: 20px 0; /* 画像の上下にスペースを追加 */
}

.random-image {
    border-radius: 10px; /* 画像に角丸を適用 */
    max-width: 100%; /* 画像の横幅をコンテナに合わせる */
    height: auto; /* 画像の高さを自動調整 */
}

.navi-container {
    display: flex;
    flex-wrap: wrap; /* アイコンが横並びで折り返される */
    justify-content: center; /* 横方向に中央揃え */
    gap: 20px; /* アイコン間の間隔 */
}

.category_description {
color:#f1f1f1;
font-size:14px;
line-height: 180%;
margin :20px 10px 10px;
}

/*アイコンメニュー調整用*/
.navi-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: -5px 0 50px 0;
}
.category-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
}
.category {
flex: 0 1 7%; /* 7%で、12個横並び */
text-align: center;
margin: 5px;
color: #fff !important;
}
.category a {
text-decoration: none;
color: #000;
font-size: 80%;
display: block;
margin: 10px 0;
line-height: 160%;
}
/* アイコンのサイズ調整 */
.fa-3x {
margin: 10px 0;
}
/* アイコンのサイズ調整 */
.fa-2x {
margin: 10px 0;
}
/* スマホ表示：2列6個 */
@media (max-width: 767px) {
.category {
flex: 0 1 30%; /* 2列6個 */
}
}

/* 投稿ページtable */
/* .content table {
margin: 20px 0px 50px !important;
width: 100%;
border-collapse: collapse;
overflow-x: auto;
display: block;
box-shadow: -3px 0px 3px #ddd !important;
}
.content table caption {
text-align: left;
font-weight: bold;
margin-bottom: 8px;
}
.content table th,
.content table td {
border: 1px solid #ddd;
padding: 8px;
white-space: nowrap;
}
.content table th {
background-color: #9f9f9f !important;
text-align: left;
}
.content table tr:nth-child(even) {
background-color: #f9f9f9;
}
.content table tr:hover {
background-color: #f1f1f1;
}
.content table-container {
overflow-x: auto;
width: 100%;
}
/* 強調スタイル */
.highlight {
background: linear-gradient(transparent 0%, #ffd85f 0%);
display: inline;
font-size: 150%;
}

/* 投稿ページtable */
/*.content table {
margin: 0px 0px !important;
width: 100% !important;
border-collapse: separate !important;
border-spacing: 0px !important;
background: #f1f1f1 !important;
box-shadow: 0px 3px 3px #ddd !important;
line-height: 180% !important;
border-radius: 0px !important;
border: 0px solid #333 !important;
padding: 0;
}

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

/* テーブルのセル間の隙間をなくす */
/*.content table tr {
background: #fff !important;
color: #222 !important;
font-weight: 300 !important;
}

/* テーブルの外枠の角を適用（内部仕切り線は角丸なし） */
/*.content table {
position: relative;
overflow: hidden;
}

/* 外枠の角丸 */
/*.content table::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 10px !important;
z-index: -1;
border: 5px solid #333;
box-shadow: 0px 2px 2px #ddd !important;
}

/* 投稿ページtable */
/* .article-table {
width: 100%;
background-color: #fff !important;
border-collapse: collapse;
overflow-x: auto;
display: block;
}
.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 !important;
color: #333 !important;
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%;
} */

/* 投稿ページtable */
.article-table {
width: 100%;
border-collapse: collapse;
overflow-x: auto;
display: block;
padding-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%;
}

/*reCAPTCHA v3 バッジを左下に移動*/
/*.grecaptcha-badge {
width: 70px !important;
overflow: hidden !important;
transition: all 0.3s ease !important;
left: 4px !important;
z-index: 999 !important;
}
.grecaptcha-badge:hover {
width: 256px !important;
}

.grecaptcha-badge { visibility: hidden; }*/

/*ヘッダー背景グリッド化*/
/* 背景画像のコンテナ */
.random-bg-container {
    position: relative;
    width: 100%;
    height: auto; /* 高さを任意で調整 */
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.5);
}

/* 背景グリッド */
.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.8;
}

/* 各画像 */
.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 */
}
}

/*お問い合わせボタン*/
.tug_top {
display: inline-block;
text-align: center;
text-decoration: none !important;
padding: 5px 10px;
white-space: nowrap;
position: relative;
border: solid 3px #fff;
border-radius: 50px;
overflow: hidden;
background-color: ;
transition: color 0.4s ease-in-out;
}
.tug_top:hover::before {
opacity: 1;
}

.tug_top::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(49,156,241,0.9), rgba(189,75,255,0.9));
opacity: 0;
transition: opacity 0.4s ease-in-out;
}

/* 全体のスタイル */
.responsive-container {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0px;
box-sizing: border-box;
}

/* 画像セクション */
.image-section {
flex: 1; /* 余白を調整 */
text-align: center;
order: 2; /* 初期状態では右側 */
}

.image-section img {
max-width: 100%; /* 画像の幅を親要素内に収める */
height: auto;
clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0 100%);
border-top-left-radius: 0px; /* 左上を角丸にする */
border-bottom-left-radius: 0px; /* 左下を角丸にする */
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2); /* 影を追加 */
}
/* テキストセクション */
.text-section {
flex: 1; /* 余白を調整 */
padding: 20px;
order: 1; /* 初期状態では左側 */
}
/* PC表示のみテキストの左側にスペースを追加 */
@media (min-width: 781px) {
.text-section {
margin-left: 0px; /* テキストの左側に余白を追加 */
}
}
/* レスポンシブ対応 */
@media (max-width: 780px) {
.responsive-container {
flex-direction: column; /* 縦並びに変更 */
padding-left: 20px; /* 左側に余白を追加 */
}
.image-section {
order: 1; /* レスポンシブ時は画像を先に表示 */
margin-bottom: 10px; /* 画像とテキストの間に余白 */
}
.text-section {
order: 2; /* テキストを画像の後に配置 */
margin-left: 0; /* モバイルでは余白をリセット */
}
}

/* 全体のスタイル（逆パターン） */
.reverse-container {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0px;
box-sizing: border-box;
}

/* 画像セクション（逆パターン） */
.reverse-image-section {
flex: 1; /* 余白を調整 */
text-align: center;
order: 1; /* 初期状態では左側 */
}

.reverse-image-section img {
max-width: 100%; /* 画像の幅を親要素内に収める */
height: auto;
clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0 100%);
border-top-right-radius: 0px; /* 右上を角丸にする */
border-bottom-right-radius: 0px; /* 右下を角丸にする */
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); /* 影を追加 */
}

/* テキストセクション（逆パターン） */
.reverse-text-section {
  flex: 1; /* 余白を調整 */
  padding: 20px;
  order: 2; /* 初期状態では右側 */
}

/* PC表示のみ余分なスペースを追加 */
@media (min-width: 781px) {
  .reverse-text-section {
    margin-left: 30px; /* テキストの外側に余白を追加 */
    margin-right: 30px; /* 必要なら右側にも追加 */
  }
}

/* レスポンシブ対応（逆パターン） */
@media (max-width: 780px) {
  .reverse-container {
    flex-direction: column; /* 縦並びに変更 */
    padding-right: 20px; /* 左側に余白を追加 */
  }

  .reverse-image-section {
    order: 1; /* レスポンシブ時は画像を先に表示 */
    margin-bottom: 10px; /* 画像とテキストの間に余白 */
  }

  .reverse-text-section {
    order: 2; /* テキストを画像の後に配置 */
    margin-left: 0; /* モバイルでは余白をリセット */
    margin-right: 0;
  }
}

.parallelogram {
display: inline-block;
position: relative;
color: white; /* テキスト色 */
font-size: 14px; /* テキストサイズ */
line-height: 35px; /* 高さ */
padding: 0 10px; /* 左右のパディング */
transform: skew(-10deg); /* 平行四辺形の傾き */
width: 100%;
}
.parallelogram span {
display: block;
transform: skew(10deg); /* テキストを元に戻す */
}

.pricing-wrapper {
overflow-x: auto; /* 横スクロールを有効化 */
white-space: nowrap; /* コンテンツを折り返さない */
}
/* WebKitベースのブラウザ用 */
.pricing-wrapper::-webkit-scrollbar {
height: 20px; /* スクロールバーの高さ */
background-color: #1c2e4a; /* スクロールバーの背景色 */
}
.pricing-wrapper::-webkit-scrollbar-thumb {
background-color: #277dc1; /* つまみ部分の色 */
border-radius: 6px; /* 角を丸める */
}
.pricing-wrapper::-webkit-scrollbar-thumb:hover {
background-color: #2c47d3; /* ホバー時の色 */
}

/* Firefox用 */
.pricing-wrapper {
scrollbar-width: thin; /* スクロールバーの幅を細く */
scrollbar-color: #277dc1 #1c2e4a; /* つまみ部分の色と背景色 */
}

@media (min-width: 1080px) {
  .scrollable-plans {
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* IE and Edge */
  }
  .scrollable-plans::-webkit-scrollbar {
    display: none;              /* Chrome, Safari, Opera */
  }
}

.pricing-table {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
text-align: center;
max-width: 980px;
margin: 0 auto;
min-width: 680px; /* テーブル幅を固定 */
}
.plan {
background: ;
border-radius: 0px;
padding: 30px 5px;
margin:5px 0;
box-shadow: 0 0px 0px rgba(0, 0, 0, 0.3);
text-align: center;
white-space: normal; /* テキストを折り返す */
}
.plan-header {
background: linear-gradient(90deg, #277dc1, #2c47d3);
padding: 10px;
border-radius: 10px 10px 0 0;
font-size: 20px;
font-weight: bold;
}

.plan-price {
font-size: 20px;
margin: 30px 0 0px;
color: #a9cbe6;
height: 150px; /* 統一された高さ */
}
.plan-price_a {
font-size: 20px;
margin: 30px 0 0px;
color: #a9cbe6;
height: 60px; /* 統一された高さ */
}
.plan-price_b {
font-size: 20px;
margin: 30px 0 0px;
color: #adaad8;
height: 60px; /* 統一された高さ */
}
.plan-price_c {
font-size: 20px;
margin: 30px 0 0px;
color: #be9fde;
height: 60px; /* 統一された高さ */
}
.plan-price_d {
font-size: 20px;
margin: 30px 0 0px;
color: #d294e5;
height: 60px; /* 統一された高さ */
}

.plan-feature {
margin: 0px 0;
font-size: 13px;
color: #ddd;
height: 51.5px !important; /* 統一された高さ */
flex-direction: column; /* 縦方向に配置 */
align-items: flex-start; /* 上揃え */
}
.plan-feature_a {
margin: 0px 0;
font-size: 13px;
color: #a9cbe6;
height: 50px !important; /* 統一された高さ */
flex-direction: column; /* 縦方向に配置 */
align-items: flex-start; /* 上揃え */
}
.plan-feature_b {
margin: 0px 0;
font-size: 13px;
color: #adaad8;
height: 50px !important; /* 統一された高さ */
flex-direction: column; /* 縦方向に配置 */
align-items: flex-start; /* 上揃え */
}
.plan-feature_c {
margin: 0px 0;
font-size: 13px;
color: #be9fde;
height: 50px !important; /* 統一された高さ */
flex-direction: column; /* 縦方向に配置 */
align-items: flex-start; /* 上揃え */
}

/* PC表示時のフォントサイズを120%に設定 */
.title-text {
font-size: 250%;
}

/* モバイル表示時のフォントサイズを100%に設定 */
@media only screen and (max-width: 767px) {
.title-text {
font-size: 180%;
}
}

/* ブログはコチラボタン */
.tug_03 {
text-align: center;
font-size: 12px;
text-decoration: none !important;
line-height: 350%;
margin: 3px;
padding: 10px 15px;
white-space: nowrap;
background-color: #000;
color: #fff !important;
border: solid 3px #fff;
border-radius: 50px;
box-shadow: 0 0 3px 0 #eee;
transition: background 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
}

.tug_03:hover {
background: linear-gradient(to right, rgba(49, 156, 241, 0.9), rgba(189, 75, 255, 0.9));
color: #fff !important;
border: solid 3px #fff;
box-shadow: 0 0 5px 5px rgba(49, 156, 241, 0.7); /* Optional: Add shadow effect on hover */
}

.tug_04 {
text-align:center;
font-size: 16px;
text-decoration:none !important;
padding: 15px 30px 10px !important;
white-space: nowrap;
background: linear-gradient(180deg, rgba(197,26,141) 0%, rgba(197,26,141) 50%, rgba(177,23,127) 50%, rgba(177,23,127) 100%);
color: #fff !important;
border: solid 7px #f1f1f1;
border-radius: 20vw;
box-shadow: 0 0px 0px 0px #eee;
transition: .4s;
}

.tug_04:hover{
background: linear-gradient(180deg, #445071 0%, #445071 50%, #293462 50%, #293462 100%);
border: solid 7px #fea413;
}

.tug_05 {
text-align:center;
font-size: 12px;
text-decoration:none !important;
padding: 10px 20px !important;
white-space: nowrap;
background: linear-gradient(180deg, rgba(197,26,141) 0%, rgba(197,26,141) 50%, rgba(177,23,127) 50%, rgba(177,23,127) 100%);
color: #fff !important;
border: solid 3px #f1f1f1;
border-radius: 50px;
transition: .4s;
}

.tug_05:hover{
background: linear-gradient(180deg, #445071 0%, #445071 50%, #293462 50%, #293462 100%);
border: solid 3px #fea413;
}

.tug_06 {
text-align:center;
font-size: 12px;
text-decoration:none !important;
padding: 10px 20px 8px !important;
white-space: nowrap;
background: linear-gradient(180deg, rgba(197,26,141) 0%, rgba(197,26,141) 50%, rgba(177,23,127) 50%, rgba(177,23,127) 100%);
color: #fff !important;
border: solid 3px #f1f1f1;
border-radius: 50px;
box-shadow: 0 0px 0px 0px #eee;
transition: .4s;
}

.tug_06:hover{
background: linear-gradient(180deg, #445071 0%, #445071 50%, #293462 50%, #293462 100%);
border: solid 3px #fea413;
}

/* アニメ矢印 */
.cp_arrows_02 *, .cp_arrows_02 *:before, .cp_arrows_02 *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cp_arrows_02 {
position: relative;
display: flex;
height: 0px;
margin: 2em auto;
justify-content: center;
align-items: center;
}
.cp_arrows_02 .cp_arrow {
position: absolute;
width: 70px; /* 矢印の幅を広げる */
height: 10px;
-webkit-transform: scale(0.3);
transform: scale(0.3);
-webkit-animation: arrow-move07 3s ease-out infinite;
animation: arrow-move07 3s ease-out infinite;
opacity: 0;
}
.cp_arrows_02 .cp_arrow:first-child {
-webkit-animation: arrow-move07 3s ease-out 1s infinite;
animation: arrow-move07 3s ease-out 1s infinite;
}
.cp_arrows_02 .cp_arrow:nth-child(2) {
-webkit-animation: arrow-move07 3s ease-out 2s infinite;
animation: arrow-move07 3s ease-out 2s infinite;
}
.cp_arrows_02 .cp_arrow:before,
.cp_arrows_02 .cp_arrow:after {
position: absolute;
top: 0;
width: 50%; /* 中心に揃えたまま比率を維持 */
height: 100%;
content: '';
border-radius: 2px;
background: #f1f1f1;
}
.cp_arrows_02 .cp_arrow:before {
left: 1px;
-webkit-transform: skewY(30deg);
transform: skewY(30deg);
}
.cp_arrows_02 .cp_arrow:after {
right: 1px;
-webkit-transform: skewY(-30deg);
transform: skewY(-30deg);
}

@-webkit-keyframes arrow-move07 {
25% {
opacity: 0.6;
}
43.75% {
-webkit-transform: translateY(1em);
transform: translateY(1em);
opacity: 0.8;
}
62.5% {
-webkit-transform: translateY(2em);
transform: translateY(2em);
opacity: 1;
}
100% {
-webkit-transform: translateY(3em) scale(0.5);
transform: translateY(3em) scale(0.5);
opacity: 0;
}
}
@keyframes arrow-move07 {
25% {
opacity: 0.6;
}
43.75% {
-webkit-transform: translateY(1em);
transform: translateY(1em);
opacity: 0.8;
}
62.5% {
-webkit-transform: translateY(2em);
transform: translateY(2em);
opacity: 1;
}
100% {
-webkit-transform: translateY(3em) scale(0.5);
transform: translateY(3em) scale(0.5);
opacity: 0;
}
}

/* 縦線 */
.tatebo {
position: relative;
display: inline-block;
top: -10px;
font-size: 12px;
color: #f1f1f1;
height: 70px;
line-height: 70px;
}
.tatebo::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
width: 1px;
height: 20px;
margin: auto;
background-color: #f1f1f1;
}
.tatebo::after {
content: '';
position: absolute;
top: 160px;
left: 0;
right: 0;
bottom: 0;
width: 1px;
height: 200px;
margin: auto;
background-color: #f1f1f1;
}

.tatebo_02 {
position: relative;
display: inline-block;
top: -10px;
font-size: 12px;
color: #f1f1f1;
height: 70px;
line-height: 70px;
}
.tatebo_02::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
width: 1px;
height: 20px;
margin: auto;
background-color: #f1f1f1;
}
.tatebo_02::after {
content: '';
position: absolute;
top: 130px;
left: 0;
right: 0;
bottom: 0;
width: 1px;
height: 150px;
margin: auto;
background-color: #f1f1f1;
}

/*スクロールダウン*/
#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: 100px;
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);
    }
}

/* スクロールヒントのスタイル */
.scroll-hint {
position: absolute;
top: 55%;
z-index: 10;
opacity: 0;  /* 初期状態では非表示 */
pointer-events: none;
transition: opacity 0.2s ease-in-out;
}
.scroll-hint.left {
opacity: 0 !important;
}
/* スクロールヒントアイコン */
.scroll-hint i {
font-size: 30px;
color: #f1f1f1;
}
/* メディアクエリでモバイル端末のみ表示 */
@media (max-width: 780px) {
.scroll-hint {
display: block;
}
}
@media (min-width: 781px) {
.scroll-hint {
display: none;
}
}
/* スクロール時にアイコンをフェードイン */
.pricing-wrapper:hover .scroll-hint {
opacity: 0.8;
}
/* スクロールヒントのスタイルここまで */

/* サイト幅100%斜面区切り */
.slant-bg {
width: 100%;
margin: 0;
padding: 0px 0;
position: relative;
top: 50px;
z-index: -1;
}
.slant-bg p {
width: 65%;
margin: 0 auto;
}
.slant-bg::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
background-color: #000;
transform: skewY(-5deg);
}

/* サイト幅100%斜面区切り（カラー展開） */
.slant-bg_02 {
width: 100%;
margin: 0;
padding: 450px 0;
position: relative;
top: 50px;
z-index: -1;
}
.slant-bg_02 p {
width: 65%;
margin: 0 auto;
}
.slant-bg_02:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
background: linear-gradient(135deg, #000 0%, #222 30%, #555 70%, #111 100%);
transform: skewY(-5deg);
}

/* サイト幅100%斜面区切り（カラー展開） */
.slant-bg_03 {
width: 100%;
margin: 0;
padding: 0px 0 0;
position: relative;
top: 50px;
z-index: -1;
}
.slant-bg_03 p {
max-width: 1080px;
margin: 0 auto;
}
/* モバイル用のスタイル */
@media (max-width: 768px) {
.slant-bg_03 p {
width: 98%;
}
}
.slant-bg_03:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
background: linear-gradient(-135deg, #111 0%, #555 30%, #222 70%, #000 100%);
}

/* ふきだし三角下付け */
.bballoong {
margin-bottom: 12em;
position: relative;
}
.bballoong:before,.balloong:after {
clear: both;
content: "";
display: block;
}
.bballoong figure {
width: 85px;
height: 85px;
}
.bballoong-image-left {
float: left;
margin-right: 17px;
}
.bballoong-image-right {
float: right;
margin-left: 13px;
margin-right: 5px;
}
.bballoong figure img {
width: 100%;
height: 100%;
border: 2px solid #fff;
border-radius: ;
background: #fff;
box-shadow: 0px 3px 3px #eee;
margin: 0;
}
.bballoong-image-description {
padding: 5px 0px 0px 0px;
font-size: 10px;
text-align: center;
}
.bballoong-text-right,.balloong-text-left {
position: relative;
padding: 5px;
top: -5px;	
border: 5px solid;
border-radius: 15px;
background: ;
max-width: -webkit-calc(100% - 120px);
max-width: calc(100% - 120px);
display: inline-block;
}
.bballoong-text-right {
border-color: #ddd;
}
.bballoong-text-left {
border-color: #ddd;
}
.bballoong-text-right {
float: left;
}
.bballoong-text-left {
float: right;
}
.bballoong p {
margin: 5px 0px 5px 5px;
line-height: 180%;
}
.bballoong p:last-child {
margin-bottom: 5px;
}

/*  O p     */
.bballoong-text-right:before {
position: absolute;
content: '';
border: 10px solid transparent;
border-right: 10px solid #ddd;
top: 18px;
left: -24px;
}
.bballoong-text-right:after {
position: absolute;
content: '';
border: 10px solid transparent;
border-right: 10px solid #fff;
top: 18px;
left: -18px;
}
.bballoong-text-left:before {
position: absolute;
content: '';
border: 10px solid transparent;
border-left: 10px solid #ddd;
top: 18px;
right: -24px;
}
.bballoong-text-left:after {
position: absolute;
content: '';
border: 10px solid transparent;
border-left: 10px solid #fff;
top: 18px;
right: -18px;
}
/*********************************************************************************/
/*WEBサイトは見た目、3秒の勝負*/
.my-background-00 {

background: url(/Image/) no-repeat center center;
background-size: cover;
}
/* モバイル閲覧（例：画面幅が780px以下の場合） */
@media (max-width: 780px) {
.my-background-00 {
background-size: cover;
}
}
/* モバイル閲覧（例：画面幅が780px以下の場合） */
@media (max-width: 550px) {
.my-background-00 {
background-size: cover;
}
}

/* 見出し背景画像 */
.my-background-01 {
position: relative;
margin-top: 0px;
overflow: hidden;
background-color: #000;
isolation: isolate;
}

.my-background-01::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
width: 800px;
height: 550px;
clip-path: polygon(0 0, 100% 5vw, 100% 100%, 0 calc(100% - 5vw));
/*clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0 100%);*/
background: url(/Image/31901657_m.webp) no-repeat right top;
background-size: 100% auto;
z-index: 0;
pointer-events: none;
}

.my-background-01::after {
content: "";
position: absolute;
inset: 0 0 auto 0;
width: 800px;
height: 550px;
background: linear-gradient(
to bottom,
rgba(0,0,0,0.1) 0%,
rgba(0,0,0,0.3) 25%,
rgba(0,0,0,0.7) 50%,
rgba(0,0,0,0.85) 75%,
rgba(0,0,0,1) 100%
);
z-index: 1;
pointer-events: none;
}

.my-background-01 > * {
position: relative;
z-index: 2;
}

@media screen and (max-width: 780px) {
.my-background-01::before,
.my-background-01::after {
width: 100%;
height: 45%;
background-position: center top;
background-size: 100% auto;
}
}

/*.my-background-01 {
clip-path: polygon(0 0, 100% 5vw, 100% 100%, 0 calc(100% - 5vw));
background:
linear-gradient(to bottom right,
rgba(0,0,0,0.4) 0%,
rgba(0,0,0,1.0) 100%
),
url(/Image/31901657_m.webp) no-repeat left top;
background-size: 800px;
}
/* モバイル閲覧（例：画面幅が780px以下の場合） */
/*@media (max-width: 780px) {
.my-background-01 {
clip-path: polygon(0 0, 100% 5vw, 100% 100%, 0 calc(100% - 5vw));
background-size: 450px;
}
}
/* モバイル閲覧（例：画面幅が780px以下の場合） */
/*@media (max-width: 550px) {
.my-background-01 {
clip-path: polygon(0 0, 100% 5vw, 100% 100%, 0 calc(100% - 5vw));
background-size: 100%;
}
}*/

.my-background-02 {
position: relative;
margin-top: 100px;
overflow: hidden;
background-color: #000;
isolation: isolate;
}

.my-background-02::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 800px;
height: 550px;
clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0 100%);
background: url(/Image/31661011_m.webp) no-repeat right top;
background-size: 100% auto;
z-index: 0;
pointer-events: none;
}

.my-background-02::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 800px;
height: 550px;
background: linear-gradient(
to bottom,
rgba(0,0,0,0.1) 0%,
rgba(0,0,0,0.3) 25%,
rgba(0,0,0,0.7) 50%,
rgba(0,0,0,0.85) 75%,
rgba(0,0,0,1) 100%
);
z-index: 1;
pointer-events: none;
}

.my-background-02 > * {
position: relative;
z-index: 2;
}

@media screen and (max-width: 780px) {
.my-background-02::before,
.my-background-02::after {
right: 0;
width: 100%;
height: 45%;
background-position: center top;
background-size: 100% auto;
}
}

/*clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0 100%);
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 1.0)), url(/Image/31661011_m.webp) no-repeat right top;
background-size: 800px;
}
/* モバイル閲覧（例：画面幅が780px以下の場合） */
/*@media (max-width: 780px) {
.my-background-02 {
background-size: 450px;
}
}
/* モバイル閲覧（例：画面幅が780px以下の場合） */
/*@media (max-width: 550px) {
.my-background-02 {
background-size: 100%;
}
}*/

/* 見出し背景画像 */
.my-background-03 {
position: relative;
margin-top: 0px;
overflow: hidden;
background-color: #000;
isolation: isolate;
}

.my-background-03::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
width: 800px;
height: 550px;
clip-path: polygon(0 0, 100% 5vw, 100% 100%, 0 calc(100% - 5vw));
/*clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0 100%);*/
background: url(/Image/4192944_m.webp) no-repeat right top;
background-size: 100% auto;
z-index: 0;
pointer-events: none;
}

.my-background-03::after {
content: "";
position: absolute;
inset: 0 0 auto 0;
width: 800px;
height: 550px;
background: linear-gradient(
to bottom,
rgba(0,0,0,0.1) 0%,
rgba(0,0,0,0.3) 25%,
rgba(0,0,0,0.7) 50%,
rgba(0,0,0,0.85) 75%,
rgba(0,0,0,1) 100%
);
z-index: 1;
pointer-events: none;
}

.my-background-03 > * {
position: relative;
z-index: 2;
}

@media screen and (max-width: 780px) {
.my-background-03::before,
.my-background-03::after {
width: 100%;
height: 45%;
background-position: center top;
background-size: 100% auto;
}
}
}

/*.my-background-03 {
clip-path: polygon(0 0, 100% 5vw, 100% 100%, 0 calc(100% - 5vw));
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 1.0)), url(/Image/4192944_m.webp) no-repeat left top;
background-size: 800px;
}
/* モバイル閲覧（例：画面幅が780px以下の場合） */
/*@media (max-width: 780px) {
.my-background-03 {
background-size: 450px;
}
}
/* モバイル閲覧（例：画面幅が780px以下の場合） */
/*@media (max-width: 550px) {
.my-background-03 {
background-size: 100%;
}
}*/

.my-background-04 {
position: relative;

overflow: hidden;
background-color: #000;
isolation: isolate;
}

.my-background-04::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 800px;
height: 550px;
clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0 100%);
background: url(/Image/31517955_m.webp) no-repeat right top;
background-size: 100% auto;
z-index: 0;
pointer-events: none;
}

.my-background-04::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 800px;
height: 550px;
background: linear-gradient(
to bottom,
rgba(0,0,0,0.1) 0%,
rgba(0,0,0,0.3) 25%,
rgba(0,0,0,0.5) 50%,
rgba(0,0,0,0.8) 75%,
rgba(0,0,0,1) 100%
);
z-index: 1;
pointer-events: none;
}

.my-background-04 > * {
position: relative;
z-index: 2;
}

@media screen and (max-width: 780px) {
.my-background-04::before,
.my-background-04::after {
right: 0;
width: 100%;
height: 55%;
background-position: center top;
background-size: 100% auto;
}
}

/*.my-background-04 {
clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0 100%);
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 1.0)), url(/Image/331287405_m.webp) no-repeat right top;
background-size: 800px;
}
/* モバイル閲覧（例：画面幅が780px以下の場合） */
/*@media (max-width: 780px) {
.my-background-04 {
background-size: 450px;
}
}
/* モバイル閲覧（例：画面幅が780px以下の場合） */
/*@media (max-width: 550px) {
.my-background-04 {
background-size: 100%;
}
}*/

.my-background-05 {
position: relative;
overflow: hidden;
background-color: #000;
isolation: isolate;
clip-path: polygon(0 0, 100% 5vw, 100% 100%, 0 calc(100% - 5vw));
}
.my-background-05::before {
content: "";
position: absolute;
inset: 0 0 auto;
width: 800px;
height: 550px;
clip-path: polygon(0px 0px, 100% 5vw, 100% 100%, 0px calc(100% - 5vw));
background: url("/Image/1317353_m.webp") right top / 100% no-repeat;
z-index: 0;
pointer-events: none;
}
.my-background-05::after {
content: "";
position: absolute;
inset: 0 0 auto;
width: 800px;
height: 550px;
background: linear-gradient(rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.3) 25%, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0.85) 75%, rgba(0,0,0,1) 100%);
z-index: 1;
pointer-events: none;
}
.my-background-05 > * {
position: relative;
z-index: 2;
}
@media screen and (min-width: 768px) {
.my-background-05 > .my-font, .my-background-05 > table {
width: 45%;
max-width: 45%;
margin-left: auto;
margin-right: 5%;
box-sizing: border-box;
text-align: left;
}
}
@media screen and (max-width: 767px) {
.my-background-05 > .my-font, .my-background-05 > table {
width: 80%;
max-width: 80%;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
text-align: left;
}
}
@media screen and (max-width: 780px) {
.my-background-05::before, .my-background-05::after {
width: 100%;
height: 45%;
background-position: center top;
background-size: 100%;
}
}

/*問い合わせ・ご依頼見出し*/
.my-background-contact {
position: relative;
margin-top: 0px;
overflow: hidden;
background-color: #000;
isolation: isolate;
}

.my-background-contact::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
width: 100%;
height: 20%;
clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0 100%);
background: url(/Image/23936608_min.webp) no-repeat right top;
background-size: 100% auto;
z-index: 0;
pointer-events: none;
}

.my-background-contact::after {
content: "";
position: absolute;
inset: 0 0 auto 0;
width: 100%;
height: 20%;
background: linear-gradient(
to bottom,
rgba(0,0,0,0.7) 0%,
rgba(0,0,0,0.7) 25%,
rgba(0,0,0,0.8) 50%,
rgba(0,0,0,0.85) 75%,
rgba(0,0,0,1) 100%
);
z-index: 1;
pointer-events: none;
}

.my-background-contact > * {
position: relative;
z-index: 2;
}

@media screen and (max-width: 780px) {
.my-background-contact::before,
.my-background-contact::after {
height: 280px;
background-position: center top;
background-size: 100% auto;
}
}

/*ご契約見出し*/
.my-background-contract,
.my-background-contract-confirm {
clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0 100%);
background: url(/Image/24425120_m.webp) no-repeat right top;
background-size: 800px;
}
/* モバイル閲覧（例：画面幅が780px以下の場合） */
@media (max-width: 780px) {
.my-background-contract,
.my-background-contract-confirm {
background-size: 450px;
}
}
/* モバイル閲覧（例：画面幅が780px以下の場合） */
@media (max-width: 550px) {
.my-background-contract,
.my-background-contract-confirm {
background-size: 100%;
}
}

/*送信完了*/
.my-background-contact-thanks {
/*clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0 100%);*/
background: url(/Image/llogo.webp) no-repeat right top;
background-size: 800px;
}
/* モバイル閲覧（例：画面幅が780px以下の場合） */
@media (max-width: 780px) {
.my-background-contact-thanks {
background-size: 450px;
}
}
/* モバイル閲覧（例：画面幅が780px以下の場合） */
@media (max-width: 550px) {
.my-background-contact-thanks {
background-size: 100%;
}
}

/*運営会社*/
/*.my-background-company {
clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0 100%);
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 1.0)), url(/Image/22006587_m.webp) no-repeat right top;
background-size: 100%;
}
/* モバイル閲覧（例：画面幅が780px以下の場合） */
/*@media (max-width: 780px) {
.my-background-company {
background-size: 100%;
}
}
/* モバイル閲覧（例：画面幅が780px以下の場合） */
/*@media (max-width: 550px) {
.my-background-company {
background-size: 100%;
}
}*/

.my-background-company {
position: relative;
margin-top: 0px;
overflow: hidden;
background-color: #000;
isolation: isolate;
}

.my-background-company::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
width: 100%;
height: 35%;
clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0 100%);
background: url(/Image/22006587_m.webp) no-repeat right top;
background-size: 100% auto;
z-index: 0;
pointer-events: none;
}

.my-background-company::after {
content: "";
position: absolute;
inset: 0 0 auto 0;
width: 100%;
height: 35%;
background: linear-gradient(
to bottom,
rgba(0,0,0,0.5) 0%,
rgba(0,0,0,0.5) 25%,
rgba(0,0,0,0.65) 50%,
rgba(0,0,0,0.85) 75%,
rgba(0,0,0,1) 100%
);
z-index: 1;
pointer-events: none;
}

.my-background-company > * {
position: relative;
z-index: 2;
}

@media screen and (max-width: 780px) {
.my-background-company::before,
.my-background-company::after {
height: 320px;
background-position: center top;
background-size: 100% auto;
}
}

/*クレジットカード決済*/
.my-background-credit-card {
clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0 100%);
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 1.0)), url(/Image/23782512_m.webp) no-repeat right top;
background-size: 100%;
}
/* モバイル閲覧（例：画面幅が780px以下の場合） */
@media (max-width: 780px) {
.my-background-credit-card {
background-size: 100%;
}
}
/* モバイル閲覧（例：画面幅が780px以下の場合） */
@media (max-width: 550px) {
.my-background-credit-card {
background-size: 100%;
}
}

/*メール不着*/
.my-background-non-delivery {
position: relative;
margin-top: -5px;
overflow: hidden;
background-color: #000;
isolation: isolate;
}

.my-background-non-delivery::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
width: 100%;
height: 50%;
clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0 100%);
background: url(/Image/download.webp) no-repeat right top;
background-size: 100% auto;
z-index: 0;
pointer-events: none;
}

.my-background-non-delivery::after {
content: "";
position: absolute;
inset: 0 0 auto 0;
width: 100%;
height: 50%;
background: linear-gradient(
to bottom,
rgba(0,0,0,0.6) 0%,
rgba(0,0,0,0.6) 25%,
rgba(0,0,0,0.7) 50%,
rgba(0,0,0,0.85) 75%,
rgba(0,0,0,1) 100%
);
z-index: 1;
pointer-events: none;
}

.my-background-non-delivery > * {
position: relative;
z-index: 2;
}

@media screen and (max-width: 780px) {
.my-background-non-delivery::before,
.my-background-non-delivery::after {
height: 12%;
background-position: center top;
background-size: 100% auto;
}
}

/*.my-background-non-delivery {
clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0 100%);
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 1.0)), url(/Image/31744248_m.webp) no-repeat right top;
background-size: 100%;
}
/* モバイル閲覧（例：画面幅が780px以下の場合） */
/*@media (max-width: 780px) {
.my-background-non-delivery {
background-size: 100%;
}
}
/* モバイル閲覧（例：画面幅が780px以下の場合） */
/*@media (max-width: 550px) {
.my-background-non-delivery {
background-size: 100%;
}
}

/*ブログ*/
.my-background-blog {
position: relative;
margin-top: -5px;
overflow: hidden;
background-color: #000;
isolation: isolate;
}

.my-background-blog::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
width: 100%;
height: 50%;
clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0 100%);
background: url(/Image/34478178_min.webp) no-repeat right top;
background-size: 100% auto;
z-index: 0;
pointer-events: none;
}

.my-background-blog::after {
content: "";
position: absolute;
inset: 0 0 auto 0;
width: 100%;
height: 50%;
background: linear-gradient(
to bottom,
rgba(0,0,0,0.6) 0%,
rgba(0,0,0,0.6) 25%,
rgba(0,0,0,0.7) 50%,
rgba(0,0,0,0.85) 75%,
rgba(0,0,0,1) 100%
);
z-index: 1;
pointer-events: none;
}

.my-background-blog > * {
position: relative;
z-index: 2;
}

@media screen and (max-width: 780px) {
.my-background-blog::before,
.my-background-blog::after {
height: 12%;
background-position: center top;
background-size: 100% auto;
}
}









/*.my-background-blog {
position: relative;
margin-top: -5px;
overflow: hidden;
background-color: #000;
isolation: isolate;
}

.my-background-blog::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
width: 100%;
height: 50%;
clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0 100%);
background: url(/Image/34478178_min.webp) no-repeat right top;
background-size: 100% auto;
z-index: 0;
pointer-events: none;
}

.my-background-blog::after {
content: "";
position: absolute;
inset: 0 0 auto 0;
width: 100%;
height: 50%;
background: linear-gradient(
to bottom,
rgba(0,0,0,0.7) 0%,
rgba(0,0,0,0.7) 25%,
rgba(0,0,0,0.75) 50%,
rgba(0,0,0,0.85) 75%,
rgba(0,0,0,1) 100%
);
z-index: 1;
pointer-events: none;
}

.my-background-blog > * {
position: relative;
z-index: 2;
}

@media screen and (max-width: 780px) {
.my-background-blog::before,
.my-background-blog::after {
height: 340px;
background-position: center top;
background-size: 100% auto;
}
}











/*ブログ*/
.my-background-blog_02 {
position: relative;
margin-top: -5px;
overflow: hidden !important;
background-color: #000;
isolation: isolate;
z-index: 0;
min-height: 50%;
}

.my-background-blog_02::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
width: 100%;
height: 50%;
clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0 100%);
background: url(/Image/34478178_min.webp) no-repeat right top;
background-size: 100% auto;
z-index: 0;
pointer-events: none;
}

.my-background-blog_02::after {
content: "";
position: absolute;
inset: 0 0 auto 0;
width: 100%;
height: 50%;
background: linear-gradient(
to bottom,
rgba(0,0,0,0.7) 0%,
rgba(0,0,0,0.7) 25%,
rgba(0,0,0,0.75) 50%,
rgba(0,0,0,0.85) 75%,
rgba(0,0,0,1) 100%
);
z-index: 1;
pointer-events: none;
}

.my-background-blog_02 > * {
position: relative;
z-index: 2;
}

@media screen and (max-width: 780px) {
.my-background-blog_02::before,
.my-background-blog_02::after {
height: 340px;
background-position: center top;
background-size: 100% auto;
}
}
/*.my-background-blog {
clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0 100%);
background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,1.0)), url(/Image/34478178_min.webp) no-repeat right top;
background-size: 100% !important;
}
/* モバイル閲覧（例：画面幅が780px以下の場合） */
/*@media (max-width: 780px) {
.my-background-blog {
background-size: 100%;
}
}
/* モバイル閲覧（例：画面幅が780px以下の場合） */
/*@media (max-width: 550px) {
.my-background-blog {
background-size: 100%;
}
}*/

.footer-img {
position: relative; /* 相対配置 */
background-image: url('/Image/3221-min.webp'); /* 左下に配置する背景画像 */
background-repeat: no-repeat;
background-position: center bottom; /* 左下に配置 */
background-size: cover; /* 画像のサイズを調整 */
padding-bottom: 50px; /* テキストとの干渉を防ぐための余白 */
}

/* はじめての方へ背景画像 */
.my-background-first {
position: relative;
margin-top: -5px;
overflow: hidden;
background-color: #000;
isolation: isolate;
}

.my-background-first::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
width: 100%;
height: 50%;
clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0 100%);
background: url(/Image/34141611.webp) no-repeat right top;
background-size: 100% auto;
z-index: 0;
pointer-events: none;
}

.my-background-first::after {
content: "";
position: absolute;
inset: 0 0 auto 0;
width: 100%;
height: 50%;
background: linear-gradient(
to bottom,
rgba(0,0,0,0.6) 0%,
rgba(0,0,0,0.6) 25%,
rgba(0,0,0,0.7) 50%,
rgba(0,0,0,0.85) 75%,
rgba(0,0,0,1) 100%
);
z-index: 1;
pointer-events: none;
}

.my-background-first > * {
position: relative;
z-index: 2;
}

@media screen and (max-width: 780px) {
.my-background-first::before,
.my-background-first::after {
height: 12%;
background-position: center top;
background-size: 100% auto;
}
}

/*.my-background-first{
clip-path: polygon(0 6vw,100% 0,100% calc(100% - 6vw),0 100%);
background: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,1.0)),url(/Image/34141611.webp) no-repeat center top;
background-size:100%;
}
/* モバイル閲覧（例：画面幅が780px以下の場合） */
/*@media (max-width: 780px) {
.my-background-first {
background-size: 100%;
}
}
/* モバイル閲覧（例：画面幅が780px以下の場合） */
/*@media (max-width: 550px) {
.my-background-first {
background-size: 100%;
}
}

/* 制作実績背景画像 */
.my-background-production {
clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0 100%);
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 1.0)), url(/Image/27238726_m.webp) no-repeat right top;
background-size: 100%;
}
/* モバイル閲覧（例：画面幅が780px以下の場合） */
@media (max-width: 780px) {
.my-background-production {
background-size: 100%;
}
}
/* モバイル閲覧（例：画面幅が780px以下の場合） */
@media (max-width: 550px) {
.my-background-production {
background-size: 100%;
}
}

/* 制作プラン背景画像 */
.my-background-plan {
clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0 100%);
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 1.0)), url(/Image/4612622_m.webp) no-repeat right top;
background-size: 100%;
}
/* モバイル閲覧（例：画面幅が780px以下の場合） */
@media (max-width: 780px) {
.my-background-plan {
background-size: 100%;
}
}
/* モバイル閲覧（例：画面幅が780px以下の場合） */
@media (max-width: 550px) {
.my-background-plan {
background-size: 100%;
}
}

/* 制作進行背景画像 */
.my-background-flow {
clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0 100%);
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 1.0)), url(/Image/3450175_m.webp) no-repeat right top;
background-size: 100%;
}
/* モバイル閲覧（例：画面幅が780px以下の場合） */
@media (max-width: 780px) {
.my-background-flow {
background-size: 100%;
}
}
/* モバイル閲覧（例：画面幅が780px以下の場合） */
@media (max-width: 550px) {
.my-background-flow {
background-size: 100%;
}
}

/*よくある質問*/
.my-background-faq {
position: relative;
margin-top: -5px;
overflow: hidden;
background-color: #000;
isolation: isolate;
}

.my-background-faq::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
width: 100%;
height: 50%;
clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0 100%);
background: url(/Image/25622143_m.webp) no-repeat right top;
background-size: 100% auto;
z-index: 0;
pointer-events: none;
}

.my-background-faq::after {
content: "";
position: absolute;
inset: 0 0 auto 0;
width: 100%;
height: 50%;
background: linear-gradient(
to bottom,
rgba(0,0,0,0.3) 0%,
rgba(0,0,0,0.6) 25%,
rgba(0,0,0,0.7) 50%,
rgba(0,0,0,0.85) 75%,
rgba(0,0,0,1) 100%
);
z-index: 1;
pointer-events: none;
}

.my-background-faq > * {
position: relative;
z-index: 2;
}

@media screen and (max-width: 780px) {
.my-background-faq::before,
.my-background-faq::after {
height: 12%;
background-position: center top;
background-size: 100% auto;
}
}

/*.my-background-faq {
clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0 100%);
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 1.0)), url(/Image/25622143_m.webp) no-repeat right top;
background-size: 100%;
}
/* モバイル閲覧（例：画面幅が780px以下の場合） */
/*@media (max-width: 780px) {
.my-background-faq {
background-size: 100%;
}
}
/* モバイル閲覧（例：画面幅が780px以下の場合） */
/*@media (max-width: 550px) {
.my-background-faq {
background-size: 100%;
}
}

/*コラム*/
.my-background-column {
position: relative;
margin-top: 0px;
overflow: hidden;
background-color: #000;
isolation: isolate;
}

.my-background-column::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
width: 100%;
height: 35%;
clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0 100%);
background: url(/Image/30239841_m.webp) no-repeat right top;
background-size: 100% auto;
z-index: 0;
pointer-events: none;
}

.my-background-column::after {
content: "";
position: absolute;
inset: 0 0 auto 0;
width: 100%;
height: 35%;
background: linear-gradient(
to bottom,
rgba(0,0,0,0.6) 0%,
rgba(0,0,0,0.6) 25%,
rgba(0,0,0,0.7) 50%,
rgba(0,0,0,0.85) 75%,
rgba(0,0,0,1) 100%
);
z-index: 1;
pointer-events: none;
}

.my-background-column > * {
position: relative;
z-index: 2;
}

@media screen and (max-width: 780px) {
.my-background-column::before,
.my-background-column::after {
height: 20%;
background-position: center top;
background-size: 100% auto;
}
}

/*ご依頼者さまの声*/
.my-background-interview {
clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0 100%);
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 1.0)), url(/Image/31661011_m.webp) no-repeat right top;
background-size: 100%;
}
/* モバイル閲覧（例：画面幅が780px以下の場合） */
@media (max-width: 780px) {
.my-background-interview {
background-size: 100%;
}
}
/* モバイル閲覧（例：画面幅が780px以下の場合） */
@media (max-width: 550px) {
.my-background-interview {
background-size: 100%;
}
}

/*npteキャンペーン*/
.my-background-note_campaign {
clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0 100%);
background: url(/Image/) no-repeat right top;
background-size: 800px;
position: relative; /* 親要素にpositionを指定して絶対配置の子要素を配置可能にする */
}

/* 画像を半透明にするための疑似要素を使用 */
.my-background-note_campaign::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url(/Image/11_57_55.webp) no-repeat right top;
background-size: 800px;
opacity: 0.5; /* 半透明 */
z-index: -1; /* 画像をコンテンツの後ろに配置 */
}
/* モバイル閲覧（例：画面幅が780px以下の場合） */
@media (max-width: 780px) {
.my-background-note_campaign {
background-size: 450px;
}
.my-background-note_campaign::before {
background-size: 450px;
}
}
/* モバイル閲覧（例：画面幅が780px以下の場合） */
@media (max-width: 550px) {
.my-background-note_campaign {
background-size: 300px;
}
.my-background-note_campaign::before {
background-size: 100%;
}
}
/* 見出し背景画像ここまで */
/*********************************************************************************/
/* 画像斜め加工 */
.image-giza {
clip-path: polygon(0 6%, 100% 0, 100% 94%, 0% 100%) !important;
}

/* ブロックレスポンシブ */
/* グリッドコンテナ */
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}

/* 各グリッドアイテムの基本デザイン */
.grid-item {
position: relative;
border-radius: 0px;
overflow: hidden;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 200px; /* 必要に応じて調整 */
border: 3px solid #ddd;
}

/* 各グリッドアイテムの異なる背景画像 */
.item-1 { background-image: linear-gradient(180deg, rgba(34,34,34,0.3) 0%, rgba(34,34,34,0.3) 50%, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0.7) 100%), url('/Image/27147864_s-min.webp'); }
.item-2 { background-image: linear-gradient(180deg, rgba(34,34,34,0.5) 0%, rgba(34,34,34,0.5) 50%, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0.8) 100%), url('/Image/26853561_s-min.webp'); }
.item-3 { background-image: linear-gradient(180deg, rgba(34,34,34,0.5) 0%, rgba(34,34,34,0.5) 50%, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0.8) 100%), url('/Image/26857316_s-min.webp'); }
.item-4 { background-image: linear-gradient(180deg, rgba(34,34,34,0.5) 0%, rgba(34,34,34,0.5) 50%, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0.8) 100%), url('/Image/27063208_s-min.webp'); }
.item-5 { background-image: linear-gradient(180deg, rgba(34,34,34,0.5) 0%, rgba(34,34,34,0.5) 50%, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0.8) 100%), url('/Image/24409173_s-min.webp'); }
.item-6 { background-image: linear-gradient(180deg, rgba(34,34,34,0.5) 0%, rgba(34,34,34,0.5) 50%, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0.8) 100%), url('/Image/27309511_s-min.webp'); }

/* 内側のレイアウト */
.grid-link {
display: block;
text-decoration: none;
color: inherit;
height: 100%;
}

.grid-inner {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
padding: 25% 30px 20%;
}

.grid-text {
text-align: center;
font-size: 1.5rem;
font-weight: bold;
color: #f1f1f1;
padding: 20px;
box-shadow: 0px 3px 3px #000;
}

.grid-description {
text-align: left;
font-size: 100%;
line-height: 150%;
color: #f1f1f1;
}
/* モバイル閲覧（例：画面幅が780px以下の場合） */
@media (max-width: 780px) {
.grid-description {
font-size: 120%;
}
}

/* レスポンシブ対応 */
@media (max-width: 1024px) {
.grid-container {
grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 768px) {
.grid-container {
grid-template-columns: repeat(1, 1fr);
}
}
/* トップページ小見出し */
.komidashi_01 {
color: #f1f1f1;
margin: 0px 0 20px;
letter-spacing: 0.0em;
line-height: 150%;
}
/* トップページ本文 */
.honbun_01 {
margin: 0 0 80px;
font-size: 120%;
line-height: 200%;
color: #f1f1f1;
text-align: left;
}
.honbun_02 {
margin: 0 0 100px;
font-size: 100%;
line-height: 150%;
color: #ccc !important;
text-align: left;
}
.honbun_03 {
margin: -20px 0 0;
font-size: 100%;
line-height: 180% !important;
color: #ccc !important;
text-align: left;
}
/* トップページ小見出し_02 */
.komidashi_02 {
color: #f1f1f1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
line-height: 150%;
}
/* 挿絵画像style */
.sashie {
position: relative;
display: inline-block;
width: 100%;
margin-top: -20px;
}

/*制作フロー*/
* {
box-sizing: border-box;
}
.flow {
padding-left: 120px;
position: relative;
}
.flow::before {
content: "";
width: 35px;
height: 100%;
background: #f0ba1b;
opacity: 0.9;
margin-left: -18px;
display: block;
position: absolute;
top: -5px;
left: 120px;
border-radius: 5px;
}
.flow > li {
position: relative;
}
.flow > li:not(:last-child) {
margin-bottom: 8vh;
}
.flow > li .icon {
font-size: 14px;
color: #fff;
font-weight: bold;
letter-spacing: 0.1em;
background: rgb(107,144,219);
background: -moz-linear-gradient(left, rgba(159,4,22,1) 0%, rgba(159,4,22,1) 100%);
background: -webkit-linear-gradient(left, rgba(159,4,22,1) 0%,rgba(159,4,22,1) 100%);
background: linear-gradient(to right, rgba(216,167,24,1) 0%,rgba(216,167,24,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b1177f', endColorstr='#c51a8d',GradientType=1 );
padding: 10px 20px;
display: block;
position: absolute;
top: 0;
left: -120px !important;
z-index: 100;
border-radius: 5px;
}
.flow > li .icon::after {
content: "";
border-style: solid;
border-width: 5px 0 5px 10px;
border-color: transparent transparent transparent #d8a718;
position: absolute;
top: 50%;
left: 100%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.flow > li dl {
padding-left: 50px;
position: relative;
}
.flow > li dl::before,
.flow > li dl::after {
content: "";
display: block;
position: absolute;
top: 20px;
}
.flow > li dl::before {
width: 7px;
height: 7px;
margin-top: -3px;
background: #445071;
border-radius: 50%;
left: -4px;
}
.flow > li dl::after {
width: 30px;
border-bottom: 1px dashed #999;
position: absolute;
left: 5px;
}
.flow > li dl dt {
font-size: 20px;
font-weight: 400;
color: RGB(245,245,245);
margin-bottom: 1vh;
}
.flowstyle {
margin: 0px 10px;
max-width: 780px;
}

/*要素を横並びにする*/
.parent-class-name {
display: flex;
}

/*FAQ*/
.faq-container {
max-width: 780px;
margin: 0 10px;
}
.faq-item {
padding: 10px;
border-radius: 10px;
background: #f1f1f1;
}
/* 質問エリア */
.faq-question {
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between; /* アイコンを右端に */
padding: 5px 0;
width: 100%;
text-align: left; /* 追加: 質問のテキストを常に左寄せ */
line-height: 180%;
}
/* Qの番号とタイトルを左寄せ */
.faq-title {
font-size: 135%;
color:#333;
display: flex;
align-items: center;
gap: 10px; /* アイコンとテキストの間隔 */
text-align: left; /* 追加: タイトル全体を左寄せ */
flex-grow: 1; /* 追加: アイコンとタイトルの間に余白を作る */
}
/* 下矢印アイコン */
.arrow-icon {
transition: transform 0.2s ease-in-out;
flex-shrink: 0; /* 追加: アイコンのサイズを固定して中央に寄らないように */
padding: 0 0 0 20px;
color:#222;
}

/* 回答表示時に矢印を回転 */
.faq-question.active .arrow-icon {
transform: rotate(180deg);
}

/* 回答エリア */
.faq-answer {
display: none; /* デフォルトで非表示 */
padding: 15px 0;
}

.faq-divider {
height: 30px;
background: url(/Image/dot.png) repeat-x center;
}

/* メールフォームエラー表示 */
.wpcf7 form.invalid .wpcf7-response-output, 
.wpcf7 form.unaccepted .wpcf7-response-output, 
.wpcf7 form.payment-required .wpcf7-response-output {
border-color: #dc3232 !important;
color: #dc3232 !important;
padding: 20px;
position: relative; /* 追加 */
top: -10px; /* 100px 上に移動 */
border-radius: 10px;
line-height: 180%;
}

.wpcf7-response-output {
color: /*#dc3232*/ !important;
}

/* ヘッダーご依頼ボタン */
.offer_b {
display: inline-block;
text-align: center;
font-weight: normal;
margin-top: 4px;
padding: 10px 20px;
border: solid 3px #fff;
border-radius: 50px;
background: linear-gradient(180deg, #c51a8d 0%, #c51a8d 50%, #b1177f 50%, #b1177f 100%);
transition: .4s;
}
/* マウスオーバー時 */
.offer_b:hover {
background: linear-gradient(180deg, #445071 0%, #445071 50%, #293462 50%, #293462 100%);
border: solid 3px #fea413;
}

/* 納品アイコン */
.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 #fff;
border-radius: 50px;
line-height: 100% !important;
}
@media only screen and (max-width:780px){
.offer_nouhin {
padding: 5px 10px;
}
}

/* スマホメニュー */
.footer-links {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
color: #fff;
line-height: 2.0 !important;
font-size: 110%;
gap: 15px; /* cellspacing の代わり */
}

.footer-links a {
white-space: nowrap;
text-decoration: none;
color: inherit;
}

.footer-links .separator {
margin: 0 5px;
color: #fff;
}

/* 運営会社 */
.company-info {
width: 100%;
font-size: 120%;
color: #fff;
line-height: 160%;
}

.info-item {
display: flex;
flex-wrap: wrap;
padding: 20px;
}

.info-item dt {
width: 20%;
font-weight: bold;
vertical-align: top;
}

.info-item dd {
width: 80%;
margin: 0;
}

.separator {
border-bottom: 0.5px solid #555;
margin: 10px 0;
}

@media (max-width: 780px) {
.info-item {
flex-direction: column;
}
.info-item dt, 
.info-item dd {
width: 100%;
}
}

/* はじめての方へ */
@media only screen and (min-width:780px){
.image_07{
float: right;
margin: 0px 0px 0px 50px;
width: 100%;
max-width: 480px;
}
}

@media only screen and (max-width:780px){
.image_07{
float: center;
width: 100%;
}
}
.sya {
clip-path: polygon(0 10%, 100% 0, 100% 90%, 0% 100%);
}

@media only screen and (min-width:780px){
.image_08{
float: left;
margin: 0px 50px 0px 0px;
width: 100%;
max-width: 480px;
}
}

@media only screen and (max-width:780px){
.image_08{
float: center;
width: 100%;
}
}
/* はじめての方へここまで */

/* 制作実績 */
.liquid-col_01{
padding: 0px;
box-sizing: border-box;
float: left;
width: 33.3%;
}

@media screen and (min-width: 1080px){
.liquid-col_01{
width: 33.3%;
}
}
@media only screen and (max-width:780px){
.liquid-col_01{
width: 50.0%;
}
}
@media only screen and (max-width:700px){
.liquid-col_01{
width: 50%;
float: center;
}
}
@media only screen and (max-width:480px){
.liquid-col_01{
width: 100%;
float: center;
}
}
/* 制作実績ここまで */
/* 全固定ページ */
.liquid-col_all{
padding: 0px;
box-sizing: border-box;
float: left;
width: 33.3%;
}

@media screen and (min-width: 1080px){
.liquid-col_all{
width: 33.3%;
}
}
@media only screen and (max-width:780px){
.liquid-col_all{
width: 50.0%;
}
}
@media only screen and (max-width:700px){
.liquid-col_all{
width: 50%;
float: center;
}
}
@media only screen and (max-width:480px){
.liquid-col_all{
width: 50%;
float: center;
}
}

.post-tag {
margin-right: 10px; /* タグ間のスペースを設定 */
display: inline-block; /* タグを横並びに表示 */
}

.post-tag:last-child {
margin-right: 0; /* 最後のタグには右のマージンを追加しない */
}
/* 全固定ページここまで */
/* コメントフォーム内のURL入力欄を非表示にする */
.comment-form-url {
display: none;
}

.wpp-item-data a {
color: #fff !important;  /* aタグのテキスト色を白に */
}

.wpp-item-data a:visited {
color: #fff !important;  /* 訪問済みのリンクも白に */
}

.wpp-item-data a:active {
color: #fff !important;  /* アクティブリンクも白に */
}

.wpp-item-data a:hover {
color: #fff !important;  /* ホバー時も白に */
}
}

.keep-all-break-word {
word-break: keep-all;
overflow-wrap: break-word;
/* overflow-wrap: anywhere; が2024年1月8日現在で一番良い */
}

/* アイキャッチ画像にロゴを重ねる */
.image-container {
position: relative;
display: inline-block;
}
.feature-image {
width: 100%;  /* アイキャッチ画像を画面幅に合わせて調整 */
height: auto;
}
.logo {
position: absolute;
top: 10%;   /* ロゴの位置をパーセンテージで調整（画面サイズに応じて変動） */
right: 0%; /* ロゴの位置をパーセンテージで調整（画面サイズに応じて変動） */
max-width: 20%; /* ロゴのサイズを最大幅に設定（比率を保つ） */
height: auto;   /* ロゴの縦横比を維持 */
opacity: 0.5;
}
/* モバイル表示の調整 */
@media (max-width: 760px) {
.logo {
top:10%; /* モバイルでロゴ位置を微調整 */
right: 3%; /* モバイルでロゴ位置を微調整 */
}
}
/* モバイル表示の調整 */
@media (max-width: 580px) {
.logo {
top:15%; /* モバイルでロゴ位置を微調整 */
right: 3%; /* モバイルでロゴ位置を微調整 */
}
}
/* アイキャッチ画像にロゴを重ねるここまで */

/* 制作進行 */
.s_tate {
left: 0;
right: 0;
width: 1px;
height: 150px;
background-color: #f1f1f1;
}

.circle_number {
width: 50px;
height: 50px;
border: 0px solid #c51a8d;
background-color: #c51a8d;
border-radius: 50%;
color: #fff;
text-align: center;
box-sizing: border-box;
margin: 0px auto;
display: flex;
align-items: center;     /* ← 縦中央揃え */
justify-content: center; /* ← 横中央揃え */
}

.shinkou{
max-width:780px;margin-left:9px;clip-path: polygon(0 10%, 100% 0, 100% 90%, 0% 100%);filter: brightness(0.9);border: 10px solid rgba(197,26,141,1.0);
}	
	
.top-leftnext {
position: absolute;
top: 50%;
right: 0%;
transform: translateY(-50%);
padding: 30px 15px;
background: linear-gradient(transparent 0%, rgba(197,26,141,0.9) 0%);
filter: brightness(0.9);
font-size: 140%;
color: #fff;
margin: 0;
clip-path: polygon(0 20%, 100% 0, 100% 80%, 0% 100%);
display: flex;
align-items: center;
justify-content: center;
writing-mode: horizontal-tb;
}

.top-leftnext span {
transform: rotate(-3.0deg); /* ← 文字全体に角度をつける（※斜体ではない） */
display: inline-block;
}


@media screen and (max-width: 768px) {
.responsive-flex-wrap {
flex-direction: column;
}
}

.campaign-container {
display: flex;
align-items: center;
}

#campaign-code {
margin-right: 10px;
padding: 5px;
max-width: 150px; /* 必要に応じて調整 */
}

#copy-button {
padding: 5px 10px;
cursor: pointer;
}

.header-marquee-container {
width: 100%;
overflow: hidden;
background-color: #f8f8f8;
border-bottom: 1px solid #ccc;
position: relative;
z-index: 9999;
height: 40px;
}

.header-marquee-wrapper {
display: flex;
width: max-content;
animation: scroll-marquee 20s linear infinite;
}

.header-marquee-text {
white-space: nowrap;
display: inline-block;
padding-right: 50px; /* テキスト同士の間隔 */
font-size: 13px;
line-height: 40px;
color: #333;
}

@keyframes scroll-marquee {
0%   { transform: translateX(0); }
100% { transform: translateX(-50%); }
}

/*ハンバーガーリンク縦線入り*/
.footer-links {
display: flex;
flex-wrap: wrap;
gap: 0.5em;
align-items: center;
font-size: 14px;
}
.footer-links a.footer {
text-decoration: none;
color: inherit;
}
.footer-links .separator {
color: #ccc;
margin: 0 0.5em;
}
.footer-links a.footer:last-of-type + .separator {
display: none;
}

/* 顔アイコンスタッフ紹介 */
.dialog-card {
max-width: 100%;
margin-left: auto;  /* 左側余白を押し出す */
margin-right: 0;
margin-bottom: 0px;
padding-top: 50px;
text-align: initial; /* ←テキストの右寄せを解除 */
}

.dialog-card__inner {
display: flex;
flex-direction: column;
align-items: flex-start; /* ←ここを修正 */
justify-content: flex-end; /* ←追加：右端寄せ */
}

.dialog-card__avatar {
border-radius: 50%;
width: 120px;
height: 120px;
object-fit: cover;
margin-bottom: 16px;
}

.dialog-card__content {
text-align: left;
}

.dialog-card__name {
font-size: 1.5rem;
color: #f1f1f1;
margin: 0;
text-align: left;
}

.dialog-card__title {
font-size: 1.2rem;
line-height: 1.5;
color: #f1f1f1;
margin: 10px 0 30px !important;
text-align: left;
}

.dialog-card__text {
font-size: 1.2rem;
line-height: 1.5;
margin-bottom: 16px;
color: #f1f1f1;
text-align: left;
}

.dialog-card__info-list {
list-style: none;
padding: 0;
display: inline-flex;
gap: 16px;
font-size: 1.0rem;
color: #f1f1f1;
flex-wrap: wrap;
justify-content: flex-start;
}

.dialog-card__info-label {
font-weight: bold;
}

@media (min-width: 600px) {
.dialog-card {
margin-bottom: 50px;
}

.dialog-card__inner {
flex-direction: row;
align-items: flex-start;
justify-content: flex-end; /* ←追加 */
gap: 24px;
}

.dialog-card__avatar {
width: 150px;
height: 150px;
margin-bottom: 0;
}

.dialog-card__content {
text-align: left;
}
}

/* 顔アイコンスタッフ紹介ここまで */
/* FAQ縦揃え */
/* スマホだけ調整 */
@media (max-width: 780px) {
/* Q 側の行（h5のflex行）を中央揃えに */
h5[style*="display: flex"] {
align-items: center !important;
}
/* A 側の行（divのflex行）も中央揃えに */
div[style*="display: flex; align-items: flex-start; gap: 0px;"] {
align-items: center !important;
}

/* アイコンの位置ぶれを防ぐ */
h5[style*="display: flex"] img,
div[style*="display: flex; align-items: flex-start; gap: 0px;"] img {
display: block;
margin-top: 0 !important;   /* インラインで付けた margin-top を打ち消す */
flex-shrink: 0;              /* アイコンが潰れないように */
}

/* テキスト側のラインハイトを安定させる（お好みで微調整） */
h5[style*="display: flex"] > div,
div[style*="display: flex; align-items: flex-start; gap: 5px;"] > div {
line-height: 1.5 !important;
}
}
/* FAQ縦揃えここまで */

#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:21px;
}

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










/* ===== 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(0px,0vw,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: 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 3px rgba(0,0,0,0.8);
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(12px,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風) ここまで===== */

/* 共通 */
.clamp-title{
line-height: 140%;
margin: 10px 0;
}

/* PC（例：768px以上）だけ3行クランプ */
@media (min-width: 768px){
.clamp-title{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
}

/* スマホ（767px以下）は“制限なし” */
@media (max-width: 767px){
.clamp-title{
display: block;
-webkit-line-clamp: unset;
overflow: visible;
}
}

/* ダウンスクロール */
.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;
}
}
/* ダウンスクロールここまで */




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

.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:linear-gradient(rgba(255,255,255,1.0),rgba(255,255,255,1.0)),url('/Image/') center/cover;
border-radius:15px;
padding:0px;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
}

@media screen and (max-width:1048px){
.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(171,23,123,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:480px;
overflow:hidden;
border-radius:10px;
}

.fca-feature-media img{
width:100%;
height:100%;
object-fit:cover; /* ←これが重要 */
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:#ab177b;
}

.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: #ab177b;
}
@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);
}
/* =========================
スライダーページネーションここまで
========================= */
.tug_05 {

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

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

/* 投稿ページ幅1080px固定（インラインCSS上書き） */
html body.single-page #main-content {
  max-width: 1080px !important;
  padding: 0 !important;
}

/* .rds セクション全幅化（1080px制約から除外） */
html body.single-page #main-content section.rds {
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative;
  left: 50% !important;
  transform: translateX(-50%);
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 角丸ブログ記事エリア（.contents.zenmen）max-width 1020px */
html body.single-page .contents.zenmen {
  max-width: 1020px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 横スクロール防止（section.rds の 100vw はみ出し対策） */
html {
  overflow-x: hidden;
}

/* ============================================================
   ブログ一覧グリッド：コンテナ最大幅1080px・横幅100%
   ============================================================ */
.my-background-blog .container {
  max-width: 1080px !important;
  width: 100% !important;
  margin-right: auto !important;
  margin-left: auto !important;
  box-sizing: border-box !important;
}

/* 投稿ページ背景 - インラインCSS上書き */
html body.single-page .my-background-blog_02 {
overflow: hidden !important;
min-height: 666px;
}

/* ============================================================
   POST_PAGE_LIST_PAGE_MATCH_FINAL
   投稿ページのヘッダー背景エリアを一覧ページ(/blog/)と完全に揃える
   高さ: 666px固定 / 文字位置: 一覧ページと同じ
   ============================================================ */

/* テーブル padding-top を一覧ページ(105px相当)に合わせる */
html body.single-page .my-background-blog_02 .title-container table {
  padding-top: 105px !important;
}

/* 小テキスト(アダルトアフィリエイトサイト制作代行)とタイトルの間隔を一覧ページと揃える */
html body.single-page .my-background-blog_02 .title-container table td > div:first-child {
  margin-bottom: 5px !important;
}

/* タイトル(my-font)の上下マージンを一覧ページと揃える */
html body.single-page .my-background-blog_02 .my-font {
  margin-top: 15px !important;
  margin-bottom: 0px !important;
}


/* ============================================================
   POST_PAGE_COMPACT_V3
   投稿ページ: パンくず下50px + 背景画像は666pxで完全表示
   コンテナはコンテンツに合わせて縮め、画像は overflow:visible で下に飛び出させる
   後続の.container(z-index:2)が飛び出した画像の下半分を覆う
   ============================================================ */

/* コンテナはコンテンツに合わせ、下に余白50px、背景画像のはみ出しを許可 */
html body.single-page .my-background-blog_02 {
  min-height: 0 !important;
  height: auto !important;
  padding-bottom: 39px !important;
  overflow: visible !important;
}

/* 背景画像は元の666pxを維持、絶対配置でコンテナから下に飛び出してOK */
html body.single-page .my-background-blog_02::before,
html body.single-page .my-background-blog_02::after {
  height: 666px !important;
  top: 0 !important;
  bottom: auto !important;
  z-index: -1 !important;
}

/* 後続コンテナを背景画像の前面に配置(画像の下半分を隠す) */
html body.single-page .my-background-blog_02 + .container {
  position: relative !important;
  z-index: 2 !important;
  margin-top: 0 !important;
}


/* ============================================================
   POST_PAGE_ZENMEN_SIDE_MARGIN
   投稿ページの角丸記事エリア(.contents.zenmen)の左右に10px余白
   ============================================================ */
html body.single-page .contents.zenmen {
  margin-left: 10px !important;
  margin-right: 10px !important;
  width: auto !important;
  max-width: calc(100% - 20px) !important;
}