@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 {
display: none;
}
#box4 .count-up,#box1 .count-up {
font-family: 'Oswald', sans-serif;
}
.my-custom-font {
font-family: 'Oswald', sans-serif;
font-size:150%;
}
.my-custom-font_s {
font-family: 'Oswald', sans-serif;
}

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

/*見出しWEBフォントレスポンシブ*/
.my-font {
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 280% !important;
/*text-shadow: 0px 0px 5px #555 ;*/
}
@media (max-width: 780px) {
.my-font {
font-size: 5.5vw !important;
}
}

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

/*見出し２_WEBフォントレスポンシブ*/
.my-font_02 {
font-family: "Noto Sans JP", sans-serif;
font-weight: 900 !important;
font-size: 4vw !important;
}
@media (max-width: 780px) {
.my-font_02 {
font-size: 7.5vw !important;
}
}

/*見出しWEBフォントレスポンシブ*/
.my-font_03 {
font-family: "Noto Sans JP", serif;
font-weight: 800;
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: 800;
font-style: normal;
font-size: 100%; /* デフォルトのフォントサイズ */
}
@media (max-width: 780px) {
.my-font_04 {
font-size: 80%; /* デフォルトのフォントサイズ */
}
}

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

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: 5px solid rgba(221, 221, 221, 0.7); /* 半透明のボーダー */
border-radius: 10px;
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: 5px 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: 10px !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-top: 0;
margin-bottom: 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-size: 150% !important;
font-weight: normal !important;
font-family: "Zen Antique Soft", 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: bold;
font-size: 125%;
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: -10px;
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 -10px 50px -10px;
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: 400;
font-size: 150% !important;
font-family: "Zen Antique Soft", 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: bold;
font-size: 125%;
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: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"; /* FontAwesomeアイコン（デフォルト） */
font-family: 'Font Awesome 6 PRO';/
font-size: 1.0em;
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: 50%; /* 画面又は親要素に対するサイズ - 変更可 */
background: #fff !important; /* 背景色 - 変更可・削除可 */
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; 
  z-index: -9999;
  background:  !important;
}
.loop-box ul {
  position: absolute;
  left: 0;
  top: 0;
  display: flex; 
  justify-content: space-between;
  background: ; /* スライダーの背景色 - 変更可 */
  list-style: none;
  max-width: 10000%; 
  min-width: 100%;
  width: calc(55px * 4.0 * 10); /* 画像の横幅×枚数 - 変更注意・変更可 */
  animation: 150s linear infinite; /* アニメーション設定 - 変更可 */
}
.loop-box li {
display: flex;
align-items: center; 
justify-content: center;
color: #333;
}
.loop-box img {
height: auto;
width: 100%;
}

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

.slider-b, .slider-b ul {
height: 60px; /* スライダー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: #fff !important;
}
.loop-box ul.loop2 {
animation-name: loop2;
background: #fff !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: 0px;/*角丸*/
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(255, 255, 255, 0.2) calc(100% - 1px)),
linear-gradient(90deg, transparent calc(100% - 1px), rgba(255, 255, 255, 0.2) 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-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: 1; /* 透明度のみ残す */
}

/* 各背景画像の指定 */
.bg1 {
background-image: url('/Image/23843232.webp');
background-position: 50% 50%;
}
.bg2 {
background-image: url('/Image/24035123.webp');
background-position: 50% 50px;
}
.bg3 {
background-image: url('/Image/23844807.webp');
background-position: 40% 0%;
}

/* ランダム画像を白黒にする */
/*.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: 5px;
  width: 100%;
  max-width: 1080px;
margin: 80px auto 50px auto !important; /* ← 上下に余白を入れつつ中央寄せ */
  overflow: hidden; /* はみ出しを防ぐ */
}

/* 各ステップの設定 */
.step {
    flex: 1;
    text-align: center;
    font-size: 16px;
    color: #888;
padding: 5px; /* ステップ内のスペースを増やす */
    position: relative;
    background-color: #e0e0e0;
    border-radius: 50px;
    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: linear-gradient(to right, rgba(0,0,0,1.0) 0%, rgba(76,76,76,1.0) 100%);
}

/* 背景グリッド */
.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: 30px; /* テキストの左側に余白を追加 */
}
}
/* レスポンシブ対応 */
@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 10px;
margin:5px;
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: 12px 20px 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 3px #f1f1f1;
border-radius: 50px;
box-shadow: 0 0px 0px 0px #eee;
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: #222;
}
.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: #222;
height: 70px;
line-height: 70px;
}
.tatebo::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
width: 1px;
height: 20px;
margin: auto;
background-color: #222;
}
.tatebo::after {
content: '';
position: absolute;
top: 160px;
left: 0;
right: 0;
bottom: 0;
width: 1px;
height: 200px;
margin: auto;
background-color: #222;
}

.tatebo_02 {
position: relative;
display: inline-block;
top: -10px;
font-size: 12px;
color: #222;
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: #222;
}
.tatebo_02::after {
content: '';
position: absolute;
top: 130px;
left: 0;
right: 0;
bottom: 0;
width: 1px;
height: 150px;
margin: auto;
background-color: #222;
}

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

#scroll-down {
display: block;
position: relative;
padding-top: 90px;
text-align:center;
padding-left:1.5px;
}
/*.arrow-down {
display: block;
margin: 0 auto;
width: 10px;
height: 0px;
}
.arrow-down:after {
content: '';
display: block;
padding: 0;
width: 8px;
height: 8px;
border-top: 2px solid #000;
border-right: 2px solid #000;
behavior: url(-ms-transform.htc);
-moz-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
-o-transform: rotate(135deg);
-ms-transform: rotate(135deg);
transform: rotate(135deg);
}*/
#scroll-title {
display: block;
text-transform: uppercase;
color: #f1f1f1;
font-size:12px;
font-weight:bold;
letter-spacing:.1em;
}
#scroll-down::before {
-webkit-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
/* Safari 4+ */
-moz-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
/* Fx 5+ */
-o-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
/* Opera 12+ */
animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
/* IE 10+, Fx 29+ */
position: absolute;
top: 5px;
left: 50%;
margin-left: -1px;
width: 1px;
height: 100px;
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: 100px 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: -200px;
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(-0deg);
}
/* モバイル用のスタイル */
@media (max-width: 768px) {
.slant-bg_02 {
top: -150px;
}
}

/* サイト幅100%斜面区切り（カラー展開） */
.slant-bg_03 {
width: 100%;
margin: 0;
padding: 0px 0 0;
position: relative;
top: 50px;
z-index: -1;
}
.slant-bg_03 p {
width: 65%;
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: 2em;
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: 10px;
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: 450px;
}
}
/* モバイル閲覧（例：画面幅が780px以下の場合） */
@media (max-width: 550px) {
.my-background-00 {
background-size: 300px;
}
}

/* 見出し背景画像 */
.my-background-01 {
clip-path: polygon(0 0, 100% 5vw, 100% 100%, 0 calc(100% - 5vw));
background: 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: 100%;
}
}
/* モバイル閲覧（例：画面幅が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 {
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: 700px;
}
/* モバイル閲覧（例：画面幅が780px以下の場合） */
@media (max-width: 780px) {
.my-background-02 {
background-size: 100%;
}
}
/* モバイル閲覧（例：画面幅が780px以下の場合） */
@media (max-width: 550px) {
.my-background-02 {
background-size: 100%;
}
}

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






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

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



/*.my-background-05 {
  position: relative;
  clip-path: polygon(0 0, 100% 5vw, 100% 100%, 0 calc(100% - 5vw));
  overflow: hidden;
}

.my-background-05::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url(/Image/1317353_m.webp);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 800px;
  z-index: 0;
  filter: brightness(1) sepia(0.1) saturate(1.5);
  background-color: rgba(255, 192, 203, 0.3);
  mix-blend-mode: lighten;
  pointer-events: none;
}

.my-background-05 > * {
  position: relative;
  z-index: 1;
}:?




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

/*ご契約見出し*/
.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: 300px;
}
}

/*送信完了*/
.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: 300px;
}
}

/*運営会社*/
.my-background-company {
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: 800px;
}
/* モバイル閲覧（例：画面幅が780px以下の場合） */
@media (max-width: 780px) {
.my-background-company {
background-size: 450px;
}
}
/* モバイル閲覧（例：画面幅が780px以下の場合） */
@media (max-width: 550px) {
.my-background-company {
background-size: 300px;
}
}

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

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

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


.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 {
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: 800px;
}
/* モバイル閲覧（例：画面幅が780px以下の場合） */
@media (max-width: 780px) {
.my-background-first {
background-size: 450px;
}
}
/* モバイル閲覧（例：画面幅が780px以下の場合） */
@media (max-width: 550px) {
.my-background-first {
background-size: 300px;
}
}

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

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

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

/*よくある質問*/
.my-background-faq {
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: 800px;
}
/* モバイル閲覧（例：画面幅が780px以下の場合） */
@media (max-width: 780px) {
.my-background-faq {
background-size: 450px;
}
}
/* モバイル閲覧（例：画面幅が780px以下の場合） */
@media (max-width: 550px) {
.my-background-faq {
background-size: 300px;
}
}

/*コラム*/
.my-background-column {
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: 800px;
}
/* モバイル閲覧（例：画面幅が780px以下の場合） */
@media (max-width: 780px) {
.my-background-column {
background-size: 450px;
}
}
/* モバイル閲覧（例：画面幅が780px以下の場合） */
@media (max-width: 550px) {
.my-background-column {
background-size: 300px;
}
}

/*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/notelogo.svg) 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: 300px;
}
}
/* 見出し背景画像ここまで */
/*********************************************************************************/

/* 画像斜め加工 */
.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;
}

/* レスポンシブ対応 */
@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: #222;
margin: 20px 0;
letter-spacing: 0.0em;
line-height: 150%;
}
/* トップページ本文 */
.honbun_01 {
margin: 0 0 80px;
font-size: 120%;
line-height: 200%;
color: #fff;
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%);
}
/* 挿絵画像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: 50px;
}
.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(159,4,22,1) 0%,rgba(159,4,22,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 #9f0416;
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:#222;
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;
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: 8px 15px;
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 #222;
border-radius: 50px;
line-height: 100% !important;
}
@media only screen and (max-width:780px){
.offer_nouhin {
padding: 5px 10px;
}
}

.offer_hissu {
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_hissu {
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: #222;
line-height: 160%;
}

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

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

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

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

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

/* はじめての方へ */
@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: 0.1vw;
height: 150px;
background-color: #999;
}

.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:0px;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: 800px;
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;
  }
}

/* 顔アイコンスタッフ紹介ここまで */




/*** 背景スライダー ***/
.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/23_30_38.webp');
background-position: 50% 100%;
}
.bg2 {
background-image: url('/Image/23_30_38.webp');
background-position: 50% 100%;
}
.bg3 {
background-image: url('/Image/23_30_38.webp');
background-position: 50% 100%;
}

body {
font-family: 'Inter', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #333;
}
/* Custom styles for gradients and shadows if needed, though Tailwind covers most */
.gradient-bg {
background: linear-gradient(to right, #6366f1, #8b5cf6); /* Example gradient */
}
.text-gradient {
background: linear-gradient(to right, #6366f1, #8b5cf6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.to-purple-6000 {
    --tw-gradient-to: #054899 var(--tw-gradient-to-position);
}
.from-indigo-5000 {
    --tw-gradient-from: #0a5aaf var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(10 90 175 / 0.7) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-purple-6000b {
    --tw-gradient-to: #000 var(--tw-gradient-to-position);
}
.from-indigo-5000b {
    --tw-gradient-from: #0a5aaf var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(0 0 0 / 0.7) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-purple-6000f {
--tw-gradient-to: #000 var(--tw-gradient-to-position);
}
.from-indigo-5000f {
--tw-gradient-from: #000 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(0 0 0 / 0.7) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}









input[type="tel"],
input[type="email"],
input[type="text"] {
color: #000 !important;
}
/* セレクトボックス */
.wpcf7-form-control.wpcf7-select,.wpcf7-form-control.wpcf7-textarea {
color: #000 !important;
}

.info-item {
display: flex;
align-items: center; /* 縦位置を中央揃え */
gap: 10px; /* dtとddの間に余白をつけたい場合 */
}
.info-item dt {
margin: 0; /* 不要な余白をリセット */
}
.info-item dd {
margin: 0; /* デフォルトのインデントをリセット */
}