@charset "utf-8";

/*
Theme Name: ガールズバーTOPページ
Version: 1
*/

* {
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;
	text-decoration: none;
	vertical-align: bottom;
}

body {
	font-family: "Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Helvetica Neue",メイリオ,Meiryo,游ゴシック,YuGothic,"Yu Gothic",Arial,sans-serif;
	font-family: Noto Sans JP,sans-serif;
	background: #fff;
}

/* PC 変数を定義root */
:root {
	--font-size-small: 14px;
	--font-size-base: 16px;
	--font-size-large: 19px;
	--font-weight-light: 300;
	--background-color: #0e73eb;
	--original-color: #feee00;
	--original-background-rgb: rgb(254 238 0 / 80%);
}

ol, ul {
	list-style: none;
}

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

/* PC メディアクエリ（1024px以上） 開始 */
@media screen and ( min-width: 1024px ) {

.sp {
	display: none;
}


.test {
	width: 100%;
	height: 300px;
}



header {
	width: 100%;
	height: 44px;
	display: block;
/*	filter: invert(1);
	mix-blend-mode: difference;*/
	background: rgba(250, 250, 252, 0.8);
	backdrop-filter: saturate(180%) blur(20px);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 3000;
}

.header-content ul {
	width: 500px;
	height: 44px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.header-content ul li a {
	font-size: 13px;
	color: #000;
	display: block;
	padding-bottom: 2px;
	position: relative;
}

.header-content ul li a:hover:after {
	width: 100%;
}

.header-content ul li a:after {
	width: 0;
	height: 2px;
	background: #000;
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate3d(-50%, 0, 0);
	transition: width .3s ease;
}

.key {
	width: 100%;
	height: 100vh;
	/*background-image: linear-gradient(160deg, rgba(14, 115, 235, 1), rgba(14, 244, 255, 1));*/
	background: url(images/top-bg.png) center center / cover no-repeat;
	position: relative;
	background-attachment: fixed;
}

.top-h1 {
	text-align: center;
	margin-top: 20px;
}

.top-h1 a {
	font-size: 14px;
	font-weight: 300;
	color: #fff;
}

.key img {
	width: 30%;
	height: auto;
	transform: translate(-50%, -50%);
	position: absolute;
	top: 50%;
	left: 50%;
}

/* -------------------- PC TOP お知らせ -------------------- */

.wrap-news {
	background: #f5f5f5;
	padding: 50px 0;
}

.news {
	width: 900px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	position: relative;
}

.news-header {
	width: 200px;
}

.news-title {
	font-size: 56px;
	color: #0e73eb;
	margin-top: -21px;
}

.news h2 {
	font-size: 18px;
	font-weight: normal;
	position: relative;
}

.news h2::after {
	width: 80px;
	height: 2px;
	background: #000;
	content: "";
	display: block;
	position: absolute;
	bottom: -4px;
	left: 0;
}

.news-view-all {
	margin-top: 160px;
}

.news-view-all a {
	width: 180px;
	text-align: center;
	color: #000;
	transition: all .6s 0s ease;
}

.news-view-all a::after {
	width: 22px;
	height: 22px;
	content: "";
	display: inline-block;
	background: url(images/arrow-icon.png) center center / cover no-repeat;
	vertical-align: bottom;
	margin-left: 12px;
	z-index: 10;
	transition: all .4s 0s ease;
}

.news-view-all a:hover {
	color: #0e73eb;
	transition: all .6s 0s ease;
}

.news-view-all a:hover::after {
	background: url(images/arrow-icon-color.png) center center / cover no-repeat;
	transition: all .4s 0s ease;
}

.news-content {
	width: 700px;
}

.news-content-boder-top {
	border-top: solid 1px #ddd;
}

.news-content-boder-bottom {
	display: flex;
	padding: 20px 20px;
	position: relative;
}

.news-content-boder-bottom:hover {
	background: #fff;
}

.news-content-boder-bottom:hover .news-text a {
	color: #0e73eb;
	transition: all .6s cubic-bezier( 0.2, 0, 0.2, 1);
}

.news-content-boder-bottom::before {
	width: 100%;
	height: 1px;
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	background: #ddd;
}

.news-content-boder-bottom::after {
	width: 100%;
	height: 1px;
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	transform: scale(0);
	transform-origin: left;
	transition-delay: .4s;
}

.news-content-boder-bottom:hover::after {
	transform: scale(1);
	background-color: #0e73eb;
	transition: transform .4s cubic-bezier( 0.2, 0, 0.2, 1);
}

.news-content .post-categories li {
	width: 100px;
	height: 25px;
	font-size: 12px;
	color: #000;
	text-align: center;
	display: block;
	padding-top: 2px;
	border: solid 1px #0e73eb;
	border-radius: 30px;
	margin: 18px 0 0 20px;
}

.news-content .post-categories li a {
	color: #000;
}

.news-date {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: #fff;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.news-year {
	font-size: 10px;
}

.news-day {
	font-size: 16px;
}

.news-text {
	font-size: 15px;
	font-weight: 300;
	margin: 17px 0 0 20px;
}

.news-text a {
	color: #000;
}

.news-content-boder-bottom:hover .news-date {
	background: #0e73eb;
	color: #fff;
}

.news-arrow {
	width: 30px;
	height: 30px;
	content: "";
	background: url(images/arrow-icon.png) center center / cover no-repeat;
	position: absolute;
	top: 34px;
	right: 40px;
	transition: all .6s cubic-bezier( 0.2, 0, 0.2, 1);
}

.news-content-boder-bottom:hover .news-arrow {
	background: url(images/arrow-icon-color.png) center center / cover no-repeat;
	right: 20px;
	transition: all .6s cubic-bezier( 0.2, 0, 0.2, 1);
}

/* -------------------- PC TOP イベント -------------------- */

.event {
	width: 900px;
	margin: 40px auto;
}

.event-title {
	font-size: 56px;
	margin-top: -21px;
}

.event h2 {
	font-size: 18px;
	font-weight: normal;
	position: relative;
}

.event h2::after {
	width: 72px;
	height: 2px;
	background: #000;
	content: "";
	display: block;
	position: absolute;
	bottom: -4px;
	left: 0;
}

.event-content {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 40px 12px;
	margin-top: 40px;
}

.top-event-eye-catching a img {
	border-radius: 8px;
}

.top-event-info {
	display: flex;
	justify-content: space-between;
	margin-top: 12px;
}

.event .post-categories li a {
	font-size: 12px;
	font-weight: 300;
	color: #000;
	padding: 1px 10px 2px;
	border-radius: 33px;
	border: solid 1px #0e73eb;
}

.top-event-date {
	font-size: 15px;
	font-weight: 300;
	letter-spacing: 0.8px;
}

.top-event-title a {
	font-size: 16px;
	font-weight: 300;
	color: #000;
	display: block;
	margin-top: 12px;
}

.top-event-all-view {
	text-align: center;
	margin-top: 40px;
}

.top-event-all-view a {
	font-size: 16px;
	font-weight: 300;
	color: #000;
}

/* -------------------- PC TOP 新人 -------------------- */

.wrap-newface {
	background: #f5f5f5;
}

.newface {
	width: 900px;
	margin: 0 auto;
	padding: 100px 0;	
}

.newface-title {
	font-size: 56px;
	color: #0e73eb;
	margin-top: -21px;
}

.newface h2 {
	font-size: 18px;
	font-weight: normal;
	position: relative;
}

.newface h2::after {
	width: 110px;
	height: 2px;
	background: #000;
	content: "";
	display: block;
	position: absolute;
	bottom: -4px;
	left: 0;
}

.newface-content {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 20px;
	margin-top: 40px;
}

.newface-girl img {
	border-radius: 8px;
	box-shadow: 0 4px 10px rgb(0 0 0 / 30%);
}

.newface-name {
	text-align: center;
	margin-top: 3px;
}

.newface-name a {
	font-size: 16px;
	font-weight: 300;
	color: #000;
}

/* -------------------- PC TOP アクセス -------------------- */

.access {
	z-index: 10;
}

.access-content {
	width: 900px;
	margin: 0 auto;
	padding: 100px 0;
	display: flex;
	justify-content: space-between;
}

.access-text {
	width: 280px;
}

.access-title {
	font-size: 56px;
	margin-top: -21px;
}

.access h2 {
	font-size: 18px;
	font-weight: normal;
	position: relative;
}

.access h2::after {
	width: 72px;
	height: 2px;
	background: #000;
	content: "";
	display: block;
	position: absolute;
	bottom: -4px;
	left: 0;
}

.address {
	font-size: 18px;
	font-weight: 300;
	margin-top: 40px;
}

.address a {
	color: #000;
}

.google-title a {
	font-size: 17px;
	color: #000;
	letter-spacing: 1px;
	display: block;
	margin-top: 20px;
}

.access-telephone {
	font-size: 18px;
	font-weight: 300;
	color: #000;
	margin-top: 40px;
}

.map {
	border: solid 1px #000;
}

/* -------------------- PC footer -------------------- */

footer {
	width: 100%;
	height: 80px;
	background: #222;
}

.footer-copyright {
	font-size: 13px;
	font-weight: 300;
	color: #fff;
	text-align: center;
	padding-top: 30px;
}

/* -------------------- PC page-shop（固定ページ） -------------------- */

/* お店詳細ページ */

.wrap-shop-content {
	width: 900px;
	margin: 0 auto 80px;
	padding-top: 140px;
}

.shop-h1 {
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-light);
	color: #000;
}

/* お店詳細ページ お店情報（上段） */

/*.shop-text div {
	margin-top: 36px;
}

.shop-text p {
	margin-top: 12px;
}

.shop-banner {
	margin-top: 12px;
}

.shop-address {
	margin-top: 20px;
}

.shop-address p a {
	color: #555;
}

.shop-text .store-link {
	text-align: center;
	margin-top: 80px;
}*/

/* お店詳細ページ 料金システム */

.wrap-shop-system-anchor {
	position: relative;
}

#shop-system-anchor {
	position: absolute;
	top: -140px;
}

.shop-system {
	margin-top: 8px;
}

/*.shop-system-h2 {
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-light);
	color: #000;
}*/

table.shop-system-table {
	width: 900px;
	border-collapse: collapse;
	border: solid 1px #ccc;
	font-size: var(--font-size-base);
}

table.shop-system-table tbody tr th {
	width: 240px;
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-light);
	color: #28251c;
	background: var(--background-color);
	padding: 16px 20px;
	border-bottom: dashed 1px #CCC;
	vertical-align: middle;
}

table.shop-system-table tbody tr td {
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-light);
	color: #28251c;
	padding: 12px 30px;
	border-bottom: dashed 1px #CCC;
	line-height: 2;
}

.shop-system-table-row {
	margin-top: 30px;
}

/* お店詳細ページ 店舗写真 */

.shop-interior {
	width: 900px;
	margin: 30px auto 0;
}

.shop-interior-h2 {
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-light);
	color: #000;
}

.shop-interior ul {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 20px 20px;
}

/* shop アクセス */

.shop-access-content {
	width: 900px;
	margin: 30px auto 0;
}

.shop-access-content-h2 {
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-light);
	color: #000;
}

.shop-access-title {
	display: flex;
	align-items: center;
}

.shop-access-icon a img {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	object-fit: cover;
}

.shop-access-name {
	font-size: 21px;
	margin-left: 16px;
}

.shop-access-name a {
	font-size: var(--font-size-large);
	font-weight: var(--font-weight-light);
	color: #000;
}

/*.shop-access-banner {
	margin-top: 4px;
}*/

table.shop-access-shop-date {
	width: 900px;
	border-collapse: collapse;
	border: solid 1px #ccc;
}

table.shop-access-shop-date tbody tr th {
	width: 240px;
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-light);
	color: #28251c;
	background: var(--background-color);
	padding: 16px 20px;
	border-bottom: dashed 1px #CCC;
}

table.shop-access-shop-date tbody tr td {
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-light);
	color: #28251c;
	padding: 12px 20px;
	border-bottom: dashed 1px #CCC;
}

.shop-access-shop-address a {
	color: #28251c;
	position: relative;
}

.shop-access-shop-address a:hover {
	text-decoration: underline;
	text-decoration-color: #28251c;
	text-decoration-thickness: 1px;
}

.shop-access-shop-address a::after {
	width: 17px;
	height: 17px;
	content: "";
	background: url(/wp-content/themes/my-theme/images/map.png) center center / cover no-repeat;
	position: absolute;
	top: 2px;
	right: -28px;
}

/* お店詳細ページ クーポン */

.shop-coupon-content {
	margin-top: 30px;
}

.shop-coupon-content-h2 {
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-light);
	color: #000;
}

.shop-coupon-content img {
	box-shadow: 3px 7px 11px rgb(0 0 0 / 10%);
}

.shop-coupon-notes {
	font-size: 15px;
	color: #f00;
	text-align: center;
	margin-top: 8px;
}

/* -------------------- PC archive-girl（キャスト一覧） -------------------- */

.archive-girl {
	width: 900px;
	margin: 140px auto;
	min-height: calc(100vh - 40px);
}

.archive-girl-h1 {
	font-size: 21px;
	font-weight: normal;
}

.archive-girl-content {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-gap: 40px 12px;
	margin-top: 40px;
}

.archive-girl-photo img {
	border-radius: 8px;
	box-shadow: 0 4px 10px rgb(0 0 0 / 30%);
}

a .archive-girl-name {
	color: #000;
}

.archive-girl-name {
	font-size: 16px;
	font-weight: 300;
	text-align: center;
	margin-top: 3px;
}

/* -------------------- PC single-girl（キャスト詳細） -------------------- */

.wrap-girls-content {
	width: 900px;
	margin: 140px auto;
}

.girls-h1 {
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-light);
	color: #000;
}

.girls-profile-content {
	display: flex;
	justify-content: space-between;
}

.girls-profile-content-h2 {
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-light);
	color: #000;
	margin-top: 4px;
}

.girls-profile-img-h3 {
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-light);
	color: #000;
	text-align: center;
}

.girls-profile-img {
	width: 380px;
}

/* 女の子スライダー */

.girls-profile-img-main {
	position: relative; /* ボタンを絶対配置するために必要 */
	/* 必要に応じてメイン画像コンテナのサイズを設定 */
}

.carousel-button {
	position: absolute;
	top: 50%; /* 垂直方向の中央 */
	transform: translateY(-50%);
	background: rgba(0, 0, 0, 0.3); /* 半透明の背景 */
	color: white;
	border: none;
	padding: 10px 16px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 20px;
	z-index: 10; /* 画像より手前に表示 */
}

.prev-button {
	left: -50px;
}

.next-button {
	right: -50px;
}

.girls-profile-img-main img {
	border-radius: 8px;
	box-shadow: 0 4px 10px rgb(0 0 0 / 30%);
}

.girls-profile-img-thumbnail ul {
	width: 380px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

/* 最後が空白の場合埋める */
.girls-profile-img-thumbnail ul::after {
	content: "";
	display: block;
	width: 120px;
	height: 0;
}

.girls-profile-img-thumbnail ul li {
	width: 120px;
	margin-top: 12px;
}

.girls-profile-img-thumbnail ul li img {
	border-radius: 8px;
	box-shadow: 0 4px 10px rgb(0 0 0 / 30%);
}

/* プロフィール */

.girls-profile-text {
	margin-top: 19px;
}

.girls-profile-title-h3 {
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-light);
	color: #28251c;
	text-align: center;
	padding: 12px 20px;
	background: var(--background-color);
	border: solid 1px #ccc;
	border-bottom: none;
}

table.girls-profile-table {
	width: 460px;
	border-collapse: collapse;
	border: solid 1px #ccc;
}

table.girls-profile-table tbody tr th {
	width: 200px;
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-light);
	color: #28251c;
	padding: 12px 20px;
	background: var(--background-color);
	border-bottom: dashed 1px #CCC;
}

table.girls-profile-table tbody tr td {
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-light);
	color: #28251c;
	padding: 12px 20px;
	border-bottom: dashed 1px #CCC;
}

table.girls-profile-table tbody tr td a {
	color: #28251c;
}

/* メッセージ */

.girls-profile-message {
	width: 460px;
	border: solid 1px #ccc;
	margin-top: 4px;
}

.girls-profile-message-h3 {
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-light);
	color: #28251c;
	text-align: center;
	padding: 12px 20px;
	background: var(--background-color);
	border-bottom: solid 1px #ccc;
}

.girls-profile-message-text {
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-light);
	color: #28251c;
	line-height: 2;
	padding: 12px 20px;
}

.single-girl-back-button {
	text-align: center;
	margin-top: 40px;
}

.single-girl-back-button a {
	color: #000;
}

/* -------------------- PC category（news event 一覧） -------------------- */

/*.category-content {
	width: 900px;
	margin: 100px auto;
}

.category-h1 {
	font-size: 21px;
	font-weight: normal;
}

.category-h2 {
	font-size: 15px;
	font-weight: normal;
}

.category-h2 a {
	color: #000;
}

.category-item {
	font-size: 16px;
	font-weight: normal;
}

.category-item a {
	color: #000;
}*/



/* -------------------- PC category（news一覧） -------------------- */

.wrap-category-news {
	padding: 100px 0 40px;
	background: #f5f5f5;
	min-height: calc(100vh - 60px);
}

.news-category {
	width: 100px;
	height: 25px;
	font-size: 12px;
	color: #000;
	text-align: center;
	display: block;
	padding-top: 2px;
	border: solid 1px #0e73eb;
	border-radius: 30px;
	margin: 18px 0 0 20px;
}

.news-category a {
	color: #000;
}

/* -------------------- PC category（event一覧） -------------------- */

.wrap-category-event {
	padding: 100px 0 40px;
	background: #f5f5f5;
	min-height: calc(100vh - 60px);
}

.event-category {
	width: 100px;
	height: 25px;
	font-size: 12px;
	color: #000;
	text-align: center;
	display: block;
	padding-top: 2px;
	border: solid 1px #0e73eb;
	border-radius: 30px;
	margin: 18px 0 0 20px;
}

.event-category a {
	color: #000;
}

/* ページネーション全体のコンテナ */
.pagination-wrapper .nav-links {
	display: flex;          /* 横並びにする */
	justify-content: center; /* 中央寄せ（左寄せなら flex-start） */
	align-items: center;
	gap: 12px;              /* ★ボタン同士の間隔（ここで広さを調整） */
	margin-top: 60px;
	flex-wrap: wrap;        /* ページ数が増えたら折り返す */
}

/* 各ページ番号（aタグと現在のページ番号）共通のスタイル */
.pagination-wrapper .page-numbers {
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 40px;        /* ボタンの最小幅（正方形に近づく） */
	height: 40px;           /* ボタンの高さ */
	padding: 0 5px;
	text-decoration: none;
	border: 1px solid #ddd; /* 枠線 */
	color: #333;            /* 文字色 */
	background: #fff;       /* 背景色 */
	transition: all 0.3s;   /* ふわっと変化させる */
}

/* マウスを乗せた時と、現在のページ番号（青背景の例） */
.pagination-wrapper .page-numbers:hover,
.pagination-wrapper .page-numbers.current {
	background: #0e73eb;       /* 好きなアクセントカラーに */
	color: #fff;            /* 文字を白に */
	border-color: #0e73eb;
}

/* 「前へ」「次へ」の文字が入るボタンの調整 */
.pagination-wrapper .page-numbers.prev,
.pagination-wrapper .page-numbers.next {
	width: auto;            /* 文字が入るので幅を自動に */
	padding: 0 15px;        /* 左右にゆとりを持たせる */
}

/* -------------------- PC single（news event 詳細） -------------------- */

.single-content {
	width: 900px;
	margin: 140px auto;
}

.single-h1 {
	font-size: 32px;
	font-weight: normal;
	letter-spacing: 1px;
	padding-bottom: 8px;
	border-bottom: solid 1px #ccc;
	margin-top: 2px;
}

.single-info {
	display: flex;
	margin-top: 16px;
}

.single-date {
	font-size: 15px;
	font-weight: 300;
	letter-spacing: 0.8px;
}

.single-category {
	font-size: 12px;
	font-weight: 300;
	padding: 1px 10px 2px;
	border-radius: 33px;
	border: solid 1px #0e73eb;
	margin-left: 14px;
}

.single-eye-catching {
	margin-top: 20px;
}

.single-text {
	font-size: 16px;
	font-weight: 300;
	line-height: 2;
	margin: 40px 0 80px;
}

.single-back-button {
	text-align: center;
}

.single-back-button a {
	color: #000;
}










}


/* スマホ メディアクエリ（1023px以下） 開始 */
@media screen and (max-width: 1023px) {

.pc {
	display: none;
}


.key {
	width: 100%;
	height: 100vh;
	background-image: linear-gradient(-45deg, #ff00aa 10%, #0088ff);
	position: relative;
	background-attachment: fixed;
}












}