@charset "utf-8";
@-ms-viewport {
	width: device-width;
}
/*---------------------------------------
チェック
---------------------------------------*/
/*
*{
	border:1px solid #FF0000;
}
*/
/*---------------------------------------
clearfix
---------------------------------------*/
.clearfix {
	*zoom: 1;
}
.clearfix:before, .clearfix:after {
	display: table;
	content: "";
	line-height: 0;
}
.clearfix:after {
	clear: both;
}
/*---------------------------------------
全体
---------------------------------------*/
body {
	margin: 0;
	padding: 0;
	font-family: YakuHanJP, 'Noto Sans JP', "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
	font-feature-settings: "palt";
	font-weight: 400;
	background: #f2fbeb;
	position: relative;
	width: 100%;
	/* iOS 14 以前用（iOSのアドレスバーを考慮した高さ） */
	height: calc(100vh - 80px);
	/* iOS 15+ 以降用（iOSのアドレスバーを考慮した高さ） */
	height: 100dvh;
	overflow-x: hidden; /* 変更：overflowを横方向のみに適用 */
	display: flex;
	flex-direction: column;
}
main {
	display: flex;
	flex-direction: column;
	flex: 1;
	overflow-y: overlay;
	padding: 1em 0 0 0;
	scrollbar-width: none; /* Firefox用 */
	-ms-overflow-style: none; /* IE, Edge用 */
}
main::-webkit-scrollbar {
	display: none; /* Chrome, Safari用 */
}
.main_inner {
	width: 95%;
	margin: 0 auto;
}
.common_wrap {
	max-width: 580px;
	width: 100%;
	margin: 0 auto;
	background: rgb(134, 7, 0);
	background: linear-gradient(-90deg, rgba(134, 7, 0, 1) 0%, rgba(208, 22, 30, 1) 50%, rgba(134, 7, 0, 1) 100%);
	/*
	background: rgb(154,167,241);
background: linear-gradient(-90deg, rgba(154,167,241,1) 0%, rgba(244,67,211,1) 100%);
	*/
	position: relative;
}
textarea:focus {
	outline: none; /* フォーカス時のアウトラインを非表示にする */
}
/*---------------------------------------
共通箇所
---------------------------------------*/
/* ページタイトル */
.page_title {
	text-align: center;
	color: #fff;
	margin-bottom: 1.3em;
}
.page_title h1 {
	font-size: 1.5em;
	margin-bottom: 0.2em;
}
.page_title p {
	font-size: 0.8em;
	line-height: 1.5em;
}
/* ページタイトル（画像とタイトル） */
.page_title dl {
	background: var(--navy);
	border-radius: 8px;
	overflow: hidden;
	text-align: center;
}
.page_title dl dd {
	font-size: 1em;
	padding: 1em 0;
	margin: 0;
}
/* コンテンツ挿入箇所 */
.common_content_wrapper {
	background: #fff;
	border-radius: 6px;
	line-height: 1.7em;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
	position: relative;
	padding: 1em;
	margin: 0 auto 1em auto;
}
.common_content_wrapper p {
	margin: 0 auto 1.5em auto;
}
/*---------------------------------------
アニメーション
---------------------------------------*/
/* Zoom Repeat Animation */
@keyframes zoomRepeat {
	0% {
		transform: scale(1);
	}
	30% {
		transform: scale(1.1, 1.1);
	}
	60% {
		transform: scale(1);
	}
	100% {
		transform: scale(1);
	}
}
.animated_zoomRepeat {
	animation: zoomRepeat 1.3s ease-in-out infinite;
}
/*---------------------------------------
font定義
---------------------------------------*/ :root {
	--zen-font-family: "Zen Old Mincho", serif;
	--zen-font-style: normal;
	--barlow-font-family: "Barlow", sans-serif;
	--barlow-font-style: normal;
}
/* Zen Old Mincho */
.zen_old_mincho {
	font-family: var(--zen-font-family);
	font-style: var(--zen-font-style);
}
.zen_old_mincho_400 {
	font-weight: 400;
}
.zen_old_mincho_500 {
	font-weight: 500;
}
.zen_old_mincho_600 {
	font-weight: 600;
}
.zen_old_mincho_700 {
	font-weight: 700;
}
.zen_old_mincho_900 {
	font-weight: 900;
}
/* Barlow */
.barlow {
	font-family: var(--barlow-font-family);
	font-style: var(--barlow-font-style);
}
.barlow_100 {
	font-weight: 100;
}
.barlow_200 {
	font-weight: 200;
}
.barlow_300 {
	font-weight: 300;
}
.barlow_400 {
	font-weight: 400;
}
.barlow_500 {
	font-weight: 500;
}
.barlow_600 {
	font-weight: 600;
}
.barlow_700 {
	font-weight: 700;
}
.barlow_800 {
	font-weight: 800;
}
.barlow_900 {
	font-weight: 900;
}
/*---------------------------------------
文字色定義
---------------------------------------*/ :root {
	--t_blue: #93f2e1;
	--navy: #210c5f;
	--red: #cb181d;
	--yellow: #ffd800;
}
/*---------------------------------------
img定義
---------------------------------------*/
a img {
	display: inline;
}
.img_100 {
	width: 100%;
}
.img_90 {
	width: 90%;
}
.img_80 {
	width: 80%;
}
/*---------------------------------------
文字の装飾
---------------------------------------*/
.glow_text_01 {
	text-shadow: 0 0 5px #570c7a, 0 0 10px #570c7a, 0 0 15px #570c7a, 0 0 20px #570c7a;
}
.glow_text_02 {
	text-shadow: 0 0 5px #b53909, 0 0 10px #b53909, 0 0 15px #b53909, 0 0 20px #b53909;
}
.red {
	color: #cb181d;
}
.yellow {
	color: #ffd800;
}
.navy {
	color: #210c5f;
}
.bold {
	font-weight: bold;
}
.gold {
	color: #deb22c;
}
/*グラデーション文字（紫系）*/
.grad_text_purple {
	font-weight: bold;
	background: linear-gradient(90deg, #d14ebf, #b26fdb);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
/*グラデーション文字（ピンク系）*/
.grad_text_pink {
	font-weight: bold;
	background: linear-gradient(90deg, #ff187f, #b652d4);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
/*---------------------------------------
要素の装飾
---------------------------------------*/
.shadow_01 {
	box-shadow:
		0 0 3px #4a1213, 0 0 6px #4a1213, 0 0 9px #4a1213, 0 0 12px #4a1213, 1px 1px 3px #4a1213, -1px -1px 3px #4a1213, -1px 1px 3px #4a1213, 1px -1px 3px #4a1213;
}
.shadow_02 {
	box-shadow:
		0 0 2px rgba(74, 18, 19, 0.5), 0 0 4px rgba(74, 18, 19, 0.3), 1px 1px 2px rgba(74, 18, 19, 0.4), -1px -1px 2px rgba(74, 18, 19, 0.4);
}
.shadow_03 {
	box-shadow:
		0 0 2px rgba(0, 0, 0, 0.5), 0 0 4px rgba(0, 0, 0, 0.3), 1px 1px 2px rgba(0, 0, 0, 0.4), -1px -1px 2px rgba(0, 0, 0, 0.4);
}
/*---------------------------------------
新着バッジ
---------------------------------------*/
span.badge {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	color: #ffffff;
	border: 2px solid #371381;
	background: rgb(178, 111, 219);
	background: linear-gradient(-90deg, rgba(178, 111, 219, 1) 0%, rgba(240, 68, 142, 1) 100%);
	top: 0;
	right: 0;
	width: 6vw;
	height: 6vw;
	border-radius: 50%;
	font-size: 3vw;
	font-weight: bold;
	letter-spacing: 0.1vw;
}
@media screen and (min-width:581px) {
	span.badge {
		font-size: 1em;
		width: 30px;
		height: 30px;
	}
}
/*ハンバーガーメニュー内の新着バッジ*/
nav.global_menu_wrapper span.badge {
	top: -10px;
	right: -30px;
}
/*---------------------------------------
ボタン類
---------------------------------------*/
/*画像ボタンセンタリング*/
.btn_img {
	text-align: center;
}
/*共通*/
.common_btn,.common_btn {
	display: flex;
	justify-content: center;
	width: 90%;
	margin: 1em auto;
}
.common_btn a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 1em;
	border-radius: 5px;
	text-decoration: none;
	font-size: 1.1em;
	/*
    font-weight: bold;
	*/
}
.common_btn i {
	margin-right: 0.2em;
}
.common_btn button {
	padding: 0.5em 1.5em;
	border-radius: 5px;
	font-size: 1em;
}
/*グレーボタン*/
a.glay_btn {
	border: 1px solid #c9c9c9;
	border-radius: 900px;
	color: #b1aeae;
	padding: 0.1em 0.5em;
	font-size: 0.6em;
	text-align: center;
}
/*グレーボタン（背景色もグレー）*/
a.glay_02_btn {
	background: #c6c6c6;
	color: #999;
	border-radius: 5px;
	padding: 0.3em 0.5em;
	font-size: 0.7em;
	text-align: center;
	width: 60%;
}
/* 紫系のボタン */
.grad_purple_btn {
	background: rgb(93, 13, 126);
	background: linear-gradient(-90deg, rgba(93, 13, 126, 1) 0%, rgba(33, 12, 95, 1) 100%);
	color: #ffffff;
	font-weight: 400;
	text-align: center;
	border-radius: 4px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	padding: 2em 0;
	margin: 0.5em auto;
	display: flex;
	position: relative;
	justify-content: center;
	align-items: center;
}
.grad_purple_btn a {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: inherit;
}
.grad_purple_btn a i {
	margin-left: 0.5em;
}
/* 無効化ボタン（invalid_btnクラスが付与された場合） */
.invalid_btn {
	pointer-events: none;
	opacity: 0.8;
}

.invalid_btn a {
	pointer-events: none;
}

.grad_purple_btn.invalid_btn {
	background: #c6c6c6;
	color: #999;
	pointer-events: none;
	opacity: 0.8;
}
.grad_purple_btn.invalid_btn a {
	color: #999;
	pointer-events: none;
}
/*緑のボタン*/
a.green_btn {
	background: #00b900;
}
/*赤のボタン*/
a.red_btn {
	background: var(--red);
}
/*オレンジのボタン*/
.common_btn input.orange_btn {
	background-color: #ff6c00;
	color: #ffffff;
	width: 100%;
	padding: 1em;
	border-radius: 5px;
	text-decoration: none;
	font-size: 1.1em;
}
/*オレンジのボタン*/
a.orange_btn {
	background: #ff6c00;
	color: #ffffff;
}
button.orange_btn {
	background: #ff6c00;
	color: #ffffff;
}
/*青グラデのボタン*/
a.blue_grad_btn {
	background: rgb(15, 101, 210);
	background: linear-gradient(0deg, rgba(15, 101, 210, 1) 0%, rgba(20, 118, 242, 1) 100%);
	color: #ffffff;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
}
/*赤グラデのボタン*/
a.red_grad_btn {
	background: rgb(203, 24, 29);
	background: linear-gradient(0deg, rgba(203, 24, 29, 1) 0%, rgba(234, 37, 43, 1) 100%);
	color: #ffffff;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
}
/*ボタンレイアウト　3列（グラデーション）*/
.grad_purple_btn_3column ul {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
	margin: 0 auto 0.5em auto;
}
.grad_purple_btn_3column ul li {
	width: calc(100% / 3);
	background: rgb(93, 13, 126);
	background: linear-gradient(-90deg, rgba(93, 13, 126, 1) 0%, rgba(33, 12, 95, 1) 100%);
	color: #ffffff;
	font-weight: 400;
	font-size: 0.8em;
	text-align: center;
	border-radius: 4px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	padding: 0;
	margin: 0.5em auto;
	display: flex;
}
.grad_purple_btn_3column ul li a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: inherit;
	padding: 1em 0;
	line-height: 0.8em;
}
.grad_purple_btn_3column ul li a i {
	font-size: 2em;
}
/*ボタンレイアウト　2列（色指定無し）*/
.btn_2column ul {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.7em;
}
.btn_2column ul li {
	width: calc(100% / 2);
	color: #ffffff;
	font-weight: 400;
	font-size: 0.8em;
	text-align: center;
	border-radius: 4px;
	padding: 0;
	margin: 0.5em auto;
	display: flex;
	overflow: hidden;
}
.btn_2column ul li a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: inherit;
	padding: 1em 0;
	line-height: 0.6em;
}
.btn_2column ul li a i {
	font-size: 1.5em;
}
/*---------------------------------------
ローディング画面（ページ全体）
---------------------------------------*/
#loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	/* iOS 14 以前用（iOSのアドレスバーを考慮した高さ） */
	height: calc(100vh - 80px);
	/* iOS 15+ 以降用（iOSのアドレスバーを考慮した高さ） */
	height: 100dvh;
	background: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	opacity: 1;
	transition: opacity 0.8s ease-in-out;
}
#loading.fade-out {
	opacity: 0;
	pointer-events: none;
}
#loading-text {
	animation: fade-blink 1.5s infinite alternate;
	fill: #727272; /* `color` ではなく `fill` を使用 */
}
@keyframes fade-blink {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0.3;
	}
}
/*---------------------------------------
ローディング画面（AI問い合わせチャットなど）
---------------------------------------*/
#loading_overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 998;
}
#loading_other {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: rgba(255, 255, 255, 0.8);
	padding: 1.5em;
	border-radius: 10px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	z-index: 999;
}
.spinner {
	width: 24px;
	height: 24px;
	border: 3px solid #ccc;
	border-top-color: #333;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}
@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
/*---------------------------------------
header（ログイン後）
---------------------------------------*/
/*header*/
.header_wrap {
	width: 100%;
	background: var(--navy);
	z-index: 3;
	flex-shrink: 0;
	padding: 0.5em;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--t_blue);
}
.header_left {
	display: flex;
	align-items: center;
	gap: 0.5em;
}
.header_left a {
	width: 23%;
	display: inline;
}
.header_left a img {
	width: 100%;
}
.user_id_wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.2em;
	font-style: italic;
	color: var(--t_blue);
}
.user_id_wrap i {
	font-style: italic;
}
.user_id_wrap dl {
	display: flex;
	align-items: center;
	font-family: var(--barlow-font-family);
	font-weight: 400;
}
.user_id_wrap dl dt:after {
	content: ":";
	margin: 0 0.1em;
}
.user_id_wrap dl dd {
	margin: 0;
}
.menu_bt i {
	font-size: 2em;
}
/*---------------------------------------
スタンプラリーお知らせ（headerとセット）
---------------------------------------*/
.header_stamp_info_wrap {
	background: #ffffff;
	border: 2px solid #c9c9c9;
	border-radius: 900px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	margin: 0.5em auto 0 auto;
	width: 97%;
	overflow: hidden;
	padding: 0 0.3em 0 0;
}
.header_stamp_info_inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.header_stamp_info_inner dl {
	display: flex;
	align-items: center;
	gap: 0.3em;
}
.header_stamp_info_inner dl dt {
	background: #f0448e;
	color: #ffffff;
	font-family: var(--barlow-font-family);
	font-style: var(--barlow-font-style);
	font-weight: 600;
	padding: 0.2em 0.5em 0.2em 0.7em;
	text-align: center;
	line-height: 1em;
	font-size: 0.7em;
}
.header_stamp_info_inner dl dd {
	margin: 0;
	font-size: 0.8em;
	color: var(--navy);
	display: flex;
	align-items: center;
}
span.stamp_count_up {
	font-size: 1.3em;
	font-weight: bold;
	background: linear-gradient(90deg, #d14ebf, #b26fdb);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	display: inline-block;
	margin-left: 0.1em;
}
span.stamp_count_up:after {
	content: "回";
	font-size: 0.8em;
}
@media screen and (min-width:581px) {
	.header_stamp_info_wrap {
		border-radius: 900px;
		width: 90%;
	}
	.header_stamp_info_inner dl dt {
		line-height: 1.1em;
		font-size: 0.8em;
	}
	.header_stamp_info_inner dl dd {
		font-size: 1em;
		margin-left: 0.3em;
	}
	.header_stamp_info_inner a {
		font-size: 0.8em;
	}
}
/*ヘッダーのスタンプ告知非表示時*/
/*$header_stamp_info_class = 'header_stamp';*/
.header_stamp {
	display: none;
}
/*---------------------------------------
footer（ログイン後）
---------------------------------------*/
.login_after_footer {
	width: 100%;
	z-index: 2;
	flex-shrink: 0;
	position: relative;
}
ul.footer_menu {
	width: 100%;
	display: flex;
	justify-content: space-around;
	padding: 0.3em;
	gap: 0.3em;
	background: var(--navy);
	line-height: 0;
	box-sizing: border-box;
}
ul.footer_menu li {
	width: calc(100% / 6);
	aspect-ratio: 1 / 1;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% 100%;
	position: relative;
}
@supports not (aspect-ratio: 1 / 1) {
	ul.footer_menu li {
		height: 0;
		padding-top: 100%;
	}
}
ul.footer_menu li a {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}
/* footer - HOME */
ul.footer_menu li:first-child {
	background-image: url(../img/footer/nav_home_off.png);
}
ul.footer_menu.home li:nth-child(1) {
	background-image: url(../img/footer/nav_home_on.png);
}
/* footer - 今週の推奨プラン */
ul.footer_menu li:nth-child(2) {
	background-image: url(../img/footer/nav_recommended_off.png);
}
ul.footer_menu.recommended li:nth-child(2) {
	background-image: url(../img/footer/nav_recommended_on.png);
}
/* footer - 参加済み有料プラン */
ul.footer_menu li:nth-child(3) {
	background-image: url(../img/footer/nav_plan_off.png);
}
ul.footer_menu.plan li:nth-child(3) {
	background-image: url(../img/footer/nav_plan_on.png);
}
/* footer - トークルーム */
ul.footer_menu li:nth-child(4) {
	background-image: url(../img/footer/nav_talk_off.png);
}
ul.footer_menu.talk li:nth-child(4) {
	background-image: url(../img/footer/nav_talk_on.png);
}
/* footer - 決済方法 */
ul.footer_menu li:nth-child(5) {
	background-image: url(../img/footer/nav_settlement_off.png);
}
ul.footer_menu.settlement li:nth-child(5) {
	background-image: url(../img/footer/nav_settlement_on.png);
}
/* footer - お問合せ */
ul.footer_menu li:nth-child(6) {
	background-image: url(../img/footer/nav_contact_off.png);
}
ul.footer_menu.contact li:nth-child(6) {
	background-image: url(../img/footer/nav_contact_on.png);
}
/*---------------------------------------
ハンバーガーメニュー
---------------------------------------*/
.global {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	/* iOS 14 以前用（iOSのアドレスバーを考慮した高さ） */
	height: calc(100vh - 80px);
	/* iOS 15+ 以降用（iOSのアドレスバーを考慮した高さ） */
	height: 100dvh;
	background: rgba(33, 12, 95, 0.7);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	z-index: 200;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
}
.global .menu_wrapper {
	max-width: 580px;
	margin: 0 auto;
	height: 100%;
	left: 0;
	z-index: 120;
	/*
  position: absolute;
  top: 0;
	*/
	transform: translateY(-100%);
	transition: transform 0.6s ease-in-out;
	text-align: center;
	overflow-y: auto;
}
.global.active {
	opacity: 1;
	visibility: visible;
}
.global.active .menu_wrapper {
	transform: translateY(0);
}
.global.close {
	opacity: 0;
	visibility: hidden;
}
.global.close .menu_wrapper {
	transform: translateY(-100%);
}
/* スクロール制御 */
.no_scroll {
	overflow: hidden;
	position: fixed;
	width: 100%;
}
.global .menu_wrapper p.top_close_bt {
	position: absolute;
	top: 0;
	right: 0.3em;
	font-size: 2em;
	color: var(--t_blue);
}
.global .menu_wrapper ul.global_menu {
	position: relative;
	width: 100vw;
	height: auto;
	text-align: center;
	border-radius: 5vw;
	padding-bottom: 4vw;
	font-size: 0;
}
nav.global_menu_wrapper img {
	width: 30%;
	margin: 0 auto 0.5em auto;
	padding-top: 1em;
}
nav.global_menu_wrapper ul {
	padding: 0;
	margin: 1em auto 0 auto;
	list-style: none;
}
nav.global_menu_wrapper ul li {
	text-align: center;
	padding-bottom: 0.5em;
	position: relative;
	color: #ffffff;
	margin-bottom: 0.8em;
}
nav.global_menu_wrapper ul li a {
	text-decoration: none;
}
nav.global_menu_wrapper ul li p {
	font-size: 0.85em;
	text-shadow: 0 0 5px #570c7a, 0 0 10px #570c7a, 0 0 15px #570c7a, 0 0 20px #570c7a;
	margin-bottom: 0.2em;
	position: relative;
	display: inline-block;
}
nav.global_menu_wrapper ul li::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #cccccc 50%, rgba(255, 255, 255, 0) 100%);
}
nav.global_menu_wrapper a.global_glay_btn {
	margin: 1em auto 0.5em auto;
	display: inline-block;
}
/*---------------------------------------
footerナビゲーション（会社概要など）
---------------------------------------*/
.footer_nav {
	background: var(--navy);
	padding: 1em;
	text-align: center;
	margin-top: 1.3em;
}
.footer_nav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1em;
	margin: 0 auto;
	padding: 0;
}
.footer_nav ul li {
	width: calc(50% - 0.5em); /* 2列配置 */
	text-align: center;
	list-style: none;
	padding: 0.5em 0;
	border-bottom: 1px solid #c1c1c1; /* 下に白い線 */
}
.footer_nav ul li a {
	color: #c1c1c1;
	text-decoration: none;
	display: block;
	font-size: 0.7em;
}
.footer_nav_eng {
	display: block;
	font-size: 0.5em;
	opacity: 0.6;
}
.footer_nav p {
	color: #c1c1c1;
	font-size: 0.5em;
	margin-top: 3em;
}
/*---------------------------------------
TOPページ（ログイン後）
---------------------------------------*/
/* スタンプラリーバナー */
.bn_stamp {
	width: 100%;
	height: 0;
	/* (画像の高さ / 画像の横幅) × 100 */
	padding-top: 25.102040816326531%;
	background: url("../img/banner/bn_stamp2.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	position: relative;
	margin: 0.5em auto 1em auto;
}
.bn_stamp a {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
.bn_stamp_txt {
	display: flex;
	align-items: flex-end;
	position: absolute;
	right: 0.2em;
	bottom: 0.2em;
	background: rgba(79, 78, 34, 0.9);
	border-radius: 4px;
	padding: 0.2em 0.5em;
	color: #ffffff;
	font-size: 0.8em;
	line-height: 1.4em;
}
.bn_stamp_txt span.user_id:after {
	content: "様";
	margin-left: 0.1em;
}
.bn_stamp_txt span.bn_stamp_link {
	background: #ffffff;
	color: var(--red);
	border-radius: 4px;
	padding: 0 0.3em;
	margin-left: 0.2em;
	font-weight: bold;
}
@media screen and (min-width:581px) {
	.bn_stamp_txt {
		right: 0.3em;
		bottom: 0.3em;
		padding: 0.2em 0.5em;
		font-size: 1em;
	}
}
/*---------------------------------------
プランセット（ログイン後）
---------------------------------------*/
/* 共通 */
.tipster_wrap {
	margin: 1em auto;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.tipster_wrap_title {
	padding: 0.3em 0.5em;
}
.tipster_wrap_title p {
	font-family: var(--barlow-font-family);
	font-weight: 400;
	font-size: 0.5em;
	color: #ffffff;
	display: inline-block;
	padding: 0.3em 0.5em;
	margin-bottom: 0.3em;
}
.tipster_wrap_title h1 {
	font-size: 1.5em;
	font-weight: bold;
	/*
	color: #fff;
	*/
	color: #000;
}
.tipster_wrap_title h2 {
	font-size: 1em;
	font-weight: bold;
	/*
	color: #fff;
	*/
	color: #000;
}
.tipster_content {
	background: var(--navy);
	padding: 1em 0.5em;
}
/* イメージ画像とプラン名と獲得金額 */
.tipster_wrap_plan {
	display: flex;
	align-items: flex-start;
	gap: 0.3em;
}
.tipster_wrap_plan img {
	width: 25%;
}
.tipster_wrap_plan_name {
	width: 75%;
}
.tipster_wrap_plan dl dt {
	background: #f0448e;
	color: #ffffff;
	padding: 0.2em 0.5em;
	display: inline-block;
	border-radius: 0 4px 0 0;
	font-size: 0.8em;
}
.tipster_wrap_plan dl dd {
	margin: 0;
	background: #ffffff;
	padding: 0.5em;
	line-height: 1.7em;
	font-size: 0.9em;
}
.tipster_wrap_plan_money dl {
	display: flex;
	align-items: stretch;
	text-align: center;
	font-size: 1em;
}
.tipster_wrap_plan_money dl dt, .tipster_wrap_plan_money dl dd {
	width: 50%;
	padding: 0.1em;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tipster_wrap_plan_money dl dt {
	background: var(--red);
	color: #ffffff;
	border-radius: 0;
}
.tipster_wrap_plan_money dl dd {
	background: #C1C1C1;
}
/* プランの説明 */
.tipster_wrap_explanation {
	color: #ffffff;
	margin: 0.7em auto;
}
.tipster_wrap_explanation h2 {
	font-family: var(--zen-font-family);
	font-style: var(--zen-font-style);
	font-weight: 500;
	margin-bottom: 0.3em;
}
.tipster_wrap_explanation p {
	line-height: 1.7em;
	font-size: 0.9em;
}
/* 動画の説明 */
.tipster_wrap_movie_explanation dl {
	background: #E2E2E2;
	border: 1px solid #c9c9c9;
	width: 95%;
	margin: 1em auto 0.5em auto;
	border-radius: 6px;
	overflow: hidden;
}
.tipster_wrap_movie_explanation dl dt {
	background: var(--red);
	text-align: center;
	color: #ffffff;
	padding: 0.2em 0;
	font-size: 0.8em;
}
.tipster_wrap_movie_explanation dl dt i {
	margin-left: 0.3em;
}
.tipster_wrap_movie_explanation dl dd {
	color: #333;
	font-size: 0.7em;
	margin: 0;
	padding: 0.4em 0.5em;
	line-height: 1.6em;
}
/* 動画のポップアップ再生 */
.movie_popup {
	/* display: none; ← NG */
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.8);
	z-index: 9999;
	justify-content: center;
	align-items: center;
	transition: opacity 0.3s ease;
}
.movie_popup.active {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}
.movie_popup_inner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
}
.movie_popup video {
	width: 100%;
	height: auto;
}
.close_btn {
	position: absolute;
	top: -10px;
	right: -10px;
	background: #fff;
	border: none;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	font-size: 1.2em;
	cursor: pointer;
}

/* プラン表 */
.tipster_wrap_plan_set {
	border-top: 2px dashed #f2fbeb;
	margin: 1em auto;
}
.tipster_wrap_plan_set table {
	width: 100%;
	margin: 1.5em auto;
	font-size: 0.9em;
	border-collapse: collapse;
	table-layout: auto; /* 自動でカラム幅調整 */
}
.tipster_wrap_plan_set table, .tipster_wrap_plan_set td, .tipster_wrap_plan_set th {
	border: 1px solid #595959;
}
.tipster_wrap_plan_set td, th {
	padding: 0.3em;
	vertical-align: top;
}
.tipster_wrap_plan_set tr:nth-child(even) {
	background: #f2fbeb;
}
.tipster_wrap_plan_set tr:nth-child(odd) {
	background: #E8E8E8;
}
.tipster_wrap_plan_set tr.table_stamp {
	background: #FF778F;
	color: #ffffff;
}
/* 左カラムは文字量に合わせる */
.tipster_wrap_plan_set td:first-child {
	white-space: nowrap;
}
/* 右カラムは可変＆必要に応じて折り返す */
.tipster_wrap_plan_set td:last-child {
	white-space: normal;
	min-width: 200px; /* 最低限の幅（調整可） */
}
/* AI予想 */
.tipster_wrap_title.tipster_ai {
	background: rgb(178, 242, 147);
	background: linear-gradient(-90deg, rgba(178, 242, 147, 1) 0%, rgba(147, 242, 225, 1) 100%);
}
.tipster_wrap_title.tipster_ai p {
	background: rgb(154, 167, 241);
	background: linear-gradient(-90deg, rgba(154, 167, 241, 1) 0%, rgba(244, 67, 211, 1) 100%);
}
/* 男性予想 */
.tipster_wrap_title.tipster_men {
	/*
	background: rgb(143, 97, 229);
	background: linear-gradient(-90deg, rgba(143, 97, 229, 1) 0%, rgba(66, 137, 249, 1) 100%);
	*/
	background: #00FF00;
}
.tipster_wrap_title.tipster_men p {
	background: rgb(182, 66, 249);
	background: linear-gradient(-90deg, rgba(182, 66, 249, 1) 0%, rgba(143, 97, 229, 1) 100%);
}
/* 女性予想 */
.tipster_wrap_title.tipster_women {
	background: rgb(242, 149, 164);
	background: linear-gradient(-90deg, rgba(242, 149, 164, 1) 0%, rgba(251, 175, 187, 1) 100%);
}
.tipster_wrap_title.tipster_women p {
	background: rgb(182, 82, 212);
	background: linear-gradient(-90deg, rgba(182, 82, 212, 1) 0%, rgba(255, 24, 127, 1) 100%);
}
/*---------------------------------------
自動解答チャット問い合わせ（ログイン後）
---------------------------------------*/
/* 全体 */
.chat_wrapper {
	background: #e6f7e6;
	padding: 1em 0.7em;
}
/* サポート側 */
.contact_support {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 1em;
}
.chat_balloon {
	background: #fefefe;
	color: #333;
	padding: 0.8em;
	border-radius: 10px;
	max-width: 80%;
	line-height: 1.7em;
}
.pic_sircle {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--navy);
	display: flex;
	align-items: center;
	justify-content: center;
}
.pic_sircle img {
	width: 100%;
	height: auto;
	border-radius: 50%;
}
/* 選択肢ボタン */
.chat_wrapper ul {
	margin-top: 0.5em;
}
.chat_wrapper button {
	width: 100%;
	padding: 0.5em;
	border: 2px solid var(--navy);
	background: transparent;
	color: var(--navy);
	font-size: 1em;
	text-align: left;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
	border-radius: 5px;
	margin-bottom: 0.5em;
	display: flex;
	align-items: center;
	gap: 0.3em;
}
.chat_wrapper button i {
	font-size: 1.2em;
	color: var(--navy);
}
/* 選択されたボタンのスタイル */
.chat_wrapper button.selected {
	background: #ccc;
	color: #666;
	border-color: #666;
	cursor: default;
	pointer-events: none;
}
.chat_wrapper button.selected i {
	color: #666;
}
a.contact_operator {
	text-align: center;
	padding: 0.3em 0;
	width: 100%;
	color: #ffffff;
	background: #129C71;
	border-radius: 6px;
	display: inline-block;
	margin-top: 1em;
}
.hidden {
	display: none;
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
}
.visible {
	opacity: 1;
}
/* ユーザー側（右側）の吹き出し */
.contact_user {
	display: flex;
	justify-content: flex-end; /* 右側配置 */
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 1em;
}
.chat_balloon.user_bubble {
	background: #cff6f6;
	color: #333;
	padding: 0.8em;
	border-radius: 10px;
	max-width: 80%;
	text-align: right;
}
/*---------------------------------------
トークルーム（ログイン後）
---------------------------------------*/
.talk_select_box {
	margin-bottom: 2em;
}
.talk_select_box .tipster_wrap_plan {
	align-items: flex-end;
}
.talk_flag {
	border-radius: 4px;
	padding: 0.1em 0.3em;
	text-align: center;
	font-size: 0.7em;
	display: inline-block;
	margin-bottom: 0.5em;
}
.talk_flag p {
	margin: 0;
}
.talk_flag.talk_on {
	background: #ffff00;
	color: #0858e9;
	font-weight: bold;
}
.talk_flag.talk_off {
	background: #c6c6c6;
	color: var(--red);
	font-weight: bold;
}
.talk_preview {
	border-radius: 6px;
	background: #ffffff;
	color: #333;
	font-size: 0.8em;
	line-height: 1.7em;
	padding: 0.5em 1.7em 0.5em 0.5em;
	margin-top: 0.8em;
	position: relative;
	/*
	box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
	*/
	border: 1px solid #c6c6c6;
}
.talk_preview p {
	margin: 0;
}
.talk_select_box .grad_purple_btn {
	width: 80%;
	margin-top: 1em;
}
.talk_select_box a {
	font-size: 1.3em;
}
.talk_select_box a i {
	margin-right: 0.5em;
}
/* トークルームではfooterナビゲーション非表示 */
/*$footer_menu_class = 'talk_room'; //フッターのクラス名*/
.footer_menu.talk_room {
	display: none;
}
/* トークルームでは送信フォーム表示 */
.talk_form {
	display: none;
}
.talk_form.talk_room {
	display: block;
}
@media screen and (min-width:581px) {
	.talk_preview {
	padding: 1em 3em 1em 1em;
}
}

/*---------------------------------------
 1対1のトークルーム（ログイン後）
---------------------------------------*/
.common_wrap.talk_men {
	padding: 0;
	background: linear-gradient(180deg, #cce4ff, #a3d4ff); /* 青系 */
}
.common_wrap.talk_women {
	padding: 0;
	background: linear-gradient(180deg, #ffd1dc, #ffb6c1); /* ピンク系 */
}
#chatRoom {
	background: none;
	padding: 1em 0;
}
.chat_title {
	text-align: center;
	color: #fff;
	padding: 0.5em;
	border-radius: 900px;
	margin: 0 auto 1.5em auto;
	font-size: 0.9em;
	width: 80%;
}
.chat_title.men {
	background: rgb(143, 97, 229);
	background: linear-gradient(-90deg, rgba(143, 97, 229, 1) 0%, rgba(66, 137, 249, 1) 100%);
}
.chat_title.women {
	background: rgb(242, 149, 164);
	background: linear-gradient(-90deg, rgba(242, 149, 164, 1) 0%, rgba(251, 175, 187, 1) 100%);
}
.chat_wrapper.talk_room {
	padding: 1em;
	max-height: 70vh;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}
/* 予想家（運営側）の吹き出し（左側） */
.chat_tipster {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 1em;
}
.chat_tipster .chat_balloon {
	background: #ffffff;
	color: #333;
	padding: 0.8em;
	border-radius: 10px;
	max-width: 70%;
	line-height: 1.7em;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
	position: relative;
	word-wrap: break-word;
	word-break: break-word;
	overflow-wrap: break-word;
	white-space: normal;
}
/* ユーザーの吹き出し（右側） */
.chat_user {
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 10px;
	margin-bottom: 1em;
}
.chat_user .chat_balloon {
	background: #dcf8c6;
	color: #333;
	padding: 0.8em;
	border-radius: 10px;
	max-width: 70%;
	line-height: 1.7em;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
	position: relative;
	word-wrap: break-word;
	word-break: break-word;
	overflow-wrap: break-word;
	white-space: normal;
}
.chat_time {
	font-size: 0.8em;
	color: #666;
	margin-top: auto;
}
.chat_user .chat_time {
	order: -1; /* 時刻を先に表示 */
}
/* 送信フォーム */
.talk_form_wrapper {
	display: flex;
	align-items: center;
	padding: 0.5em;
	background: #fff;
	border-top: 1px solid #ddd;
}
.message_input {
	flex: 1;
	padding: 0.5em;
	border: 1px solid #ddd;
	border-radius: 8px;
	font-size: 1em;
	outline: none;
	height: 3em;
	resize: none;
}
.send_button {
	background: #25D366;
	color: white;
	border: none;
	padding: 0.5em 1em;
	border-radius: 8px;
	font-size: 1em;
	margin-left: 0.5em;
	cursor: pointer;
}
.send_button:hover {
	background: #1da851;
}
@media screen and (min-width:581px) {
	.talk_form_wrapper {
		padding: 1em;
	}
	.message_input {
		height: 3.5em;
	}
}
/*---------------------------------------
 感謝の声（ログイン後）
---------------------------------------*/
.section_voice {
	margin: 0 auto;
	padding-bottom: 2em;
}
.voice_set {
	border-radius: 4px;
	background-color: var(--navy);
	margin-bottom: 1.5em;
	padding: 1em;
}
dt.voice_title {
	/*
	color: var(--yellow);
	*/
	font-weight: bold;
	font-size: 1.2em;
	line-height: 1.7em;
	background: linear-gradient(90deg, #d14ebf, #b26fdb);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	display: inline-block;
}
dd.voice_text {
	line-height: 1.7em;
	font-size: 0.9em;
	margin: 0.8em 0 0.5em 0;
	color: #ffffff;
}
dd.voice_prof {
	color: #cccccc;
	font-size: 0.7em;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin: 0;
}
dd.voice_prof p {
	margin: 0 0.6em 0 0;
}
dd.voice_prof p.voice_prof_name:after {
	content: "様";
	margin-left: 0.1em;
}
dd.voice_prof p.voice_prof_age:after {
	content: "歳";
	margin-left: 0.1em;
}
/* ぺージャースタイル*/
.pager_wrap .pager {
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
	position: relative;
	top: 0;
	left: 0;
	transform: none;
	padding: 0;
	z-index: 1;
}
.pager_wrap .pager:before {
	content: "";
	display: block;
	position: relative;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	background: none;
}
.pager_wrap .pager span {
	margin: 5px;
	padding: 4px;
	color: #444;
	background: #ffffff;
	border-radius: 4px;
	font-size: 12px;
	border: 1px solid #cecece;
}
.pager_wrap .pager span:hover {
	cursor: pointer;
	background: #f1f1f1;
	border: 1px solid #a8a8a8;
	color: #444;
	text-decoration: underline;
}
/* 開いているページ（current）*/
.pager_wrap .pager span.current {
	color: #fff;
	background: linear-gradient(90deg, #d14ebf, #b26fdb);
	border: 1px solid #b26fdb;
	font-weight: bold;
}
.pager_wrap .pager span.current:hover {
	cursor: default;
	text-decoration: none;
}
/* 前へ　次へ（invalid）*/
.pager_wrap .pager span.invalid {
	background: #eee;
	border: solid 1px #eee;
	color: #aaa;
}
.pager_wrap .pager span.invalid:hover {
	cursor: default;
	text-decoration: none;
}
/* …点々（ellipsis）*/
.pager_wrap .pager span.ellipsis {
	color: #C8C8C8;
	background: none;
	border: none;
}
.pager_wrap .pager span.ellipsis:hover {
	cursor: default;
	text-decoration: none;
}
/*---------------------------------------
 よくある質問（ログイン後）
---------------------------------------*/
.acd-check {
	display: none;
}
.sale_faq {
	width: 100%;
	margin: 1em auto;
	padding: 2em 0 0.5em 0;
}
.acd-label-faq {
	background: rgb(93, 13, 126);
	background: linear-gradient(-90deg, rgba(93, 13, 126, 1) 0%, rgba(33, 12, 95, 1) 100%);
	color: #ffffff;
	margin: 0 auto;
	padding: 10px;
	width: 100%;
	display: block;
	position: relative;
	font-weight: bold;
}
.acd-label-faq:after {
	box-sizing: border-box;
	content: '\f107';
	display: block;
	font-family: "Font Awesome 5 Free";
	padding: 10px;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	font-weight: 900;
	font-size: 25px;
}
.acd-content-faq {
	height: 0;
	opacity: 0;
	transition: .1s;
	visibility: hidden;
	width: 100%;
	margin: 0 auto 1px auto;
	background: #f8f3d7;
}
.acd-check:checked + .acd-label-faq:after {
	content: '\f106';
}
.acd-check:checked + .acd-label-faq + .acd-content-faq {
	height: auto;
	opacity: 1;
	visibility: visible;
}
.acd-label-faq dl {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 5px;
}
.acd-label-faq dl dd {
	margin: 0;
}
.acd-content-faq dl {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: flex-start;
	-ms-flex-align: flex-start;
	align-items: flex-start;
	padding: 10px;
	gap: 5px;
}
.acd-content-faq dl dd {
	width: 100%;
	color: #373737;
	margin: 0;
}
/*---------------------------------------
 お問合せ（ログイン後）
---------------------------------------*/
/* フォーム全体 */
.contact-form {
	width: 95%;
	margin: 0 auto;
}
/* ブラウザの自動入力時の背景色をリセット */
.contact-form input {
	background-color: white !important;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
/* 特に Chrome の autofill スタイルをリセット */
.contact-form input:-webkit-autofill, .contact-form input:-webkit-autofill:hover, .contact-form input:-webkit-autofill:focus, .contact-form input:-webkit-autofill:active {
	background-color: white !important;
	-webkit-box-shadow: 0 0 0px 1000px white inset !important;
	box-shadow: 0 0 0px 1000px white inset !important;
}
/* 各入力フィールドのラベル */
.contact-form .form-group {
	margin-bottom: 1em;
}
.contact-form label {
	font-size: 0.9em;
	font-weight: bold;
	display: block;
	margin-bottom: 0.5em;
}
/* テキスト入力・プルダウン */
.contact-form input, .contact-form select, .contact-form textarea {
	width: 100%;
	padding: 0.5em;
	border: 1px solid #ddd;
	border-radius: 5px;
	font-size: 0.9em;
	outline: none;
}
.contact-form select {
	background: #fff;
	appearance: none;
}
/* テキストエリア */
.contact-form textarea {
	height: 120px;
	resize: none;
}
/* 画像アップロードエリア */
.file-upload {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}
/* アップロードボタン */
.file-label {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 1em;
	border: 2px dashed #999; /* 点線枠 */
	border-radius: 5px;
	background: #f9f9f9;
	cursor: pointer;
	transition: background 0.3s, border 0.3s;
	font-size: 1em;
	text-align: center;
}
label.file-label {
	font-weight: normal;
}
.file-label i {
	margin-right: 8px;
	font-size: 1.2em;
}
.file-label:hover {
	background: #eee;
	border-color: #666;
}
/* デフォルトのファイル選択ボタンを非表示 */
.file-upload input[type="file"] {
	display: none;
}
/* 画像プレビューエリア */
.image-preview {
	margin: 0.5em auto 1.5em auto;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	width: 100%;
	justify-content: flex-start; /* 左詰 */
}
/* プレビュー画像の枠 */
.preview-box {
	position: relative;
	width: 100px;
	height: 100px;
	border-radius: 5px;
	border: 1px solid #ddd;
	overflow: hidden;
}
/* プレビュー画像 */
.preview-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 5px;
}
/* 画像削除ボタン */
.preview-box .remove-btn {
	position: absolute;
	top: 3px;
	right: 3px;
	width: 18px;
	height: 18px;
	background: rgba(0, 0, 0, 0.5); /* 半透明 */
	border: none;
	color: white;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	line-height: 18px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: 0.2s;
}
.preview-box .remove-btn:hover {
	background: rgba(0, 0, 0, 0.8); /* さらに目立たなく */
}
/* エラーメッセージ */
.error-message {
	color: #ff4d4d;
	font-size: 0.9em;
	margin-top: 5px;
	display: none;
}
/* 確認画面 */
.confirm-field {
	padding: 10px;
	font-size: 1em;
}
.gray_btn {
	background: #bbb;
	color: #fff;
	padding: 10px 20px;
	border-radius: 5px;
	cursor: pointer;
}
.gray_btn:hover {
	background: #999;
}
/*---------------------------------------
 的中実績（ログイン後）
---------------------------------------*/
.hit_2culum {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 1em;
}
.hit_box {
	width: calc(100% / 2);
	text-align: center;
	position: relative;
	background: url("../img/content/hit/hit.png") no-repeat top right / 35%, repeating-linear-gradient(90deg, #d6fbf6 0px, /* ストライプの濃い部分 */ #d6fbf6 8px, /* ストライプの太さ */ #e0fffb 8px, /* 元の背景色 */ #e0fffb 16px /* ストライプの間隔 */ );
	border-radius: 4px;
	border: 2px solid #06d0b7;
	box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
}
.hit_box ul {
	padding: 0.5em 0;
	font-size: 0.9em;
	font-weight: bold;
	color: #333333;
	line-height: 1.7em;
}
.hit_box ul li.hit_list_date {
	font-size: 0.8em;
	text-align: left;
	padding-left: 1em;
}
.hit_box ul li.hit_list_ribbon {
	background: var(--navy);
	color: #ffffff;
	margin: 0.3em auto 0.5em auto;
	font-size: 1em;
}
.hit_box ul li.hit_list_money {
	color: var(--red);
	font-size: 1.1em;
}
/* 的中実績　予想家別 */
.page_title.tipster_wrap_title p {
	font-size: 0.8em;
}
/*---------------------------------------
 スタンプラリー（ログイン後）
---------------------------------------*/
/* 全体 */
.stamp_wrapper {
	background: repeating-linear-gradient(90deg, #f8f0c1 0px, /* ストライプの濃い部分 */ #f8f0c1 8px, /* ストライプの太さ */ #faf5d4 8px, /* 元の背景色 */ #faf5d4 16px /* ストライプの間隔 */ );
}
.stamp_inner {
	width: 100%;
	margin: 0 auto;
}
/* スタンプカウント表 */
.stamp_header_count_wrapper {
	display: flex;
	justify-content: center;
}
.stamp_header_count {
	display: inline-flex;
	align-items: center;
	margin: 0.5em auto 1.2em auto;
	background: #fefefe;
	border: 2px solid #4f4e22;
	border-radius: 6px;
	overflow: hidden;
	text-align: center;
	font-size: 0.8em;
	width: auto;
	white-space: nowrap;
}
.stamp_header_count dl dd {
	margin: 0;
	padding: 0.3em 0.5em;
	font-weight: bold;
}
dl.stamp_header_count_get, dl.stamp_header_count_total {
	display: flex;
	align-items: center;
}
dl.stamp_header_count_get dt {
	background: #4f4e22;
	color: #ffffff;
	padding: 0.3em 0.6em;
}
dl.stamp_header_count_get dd:after {
	content: "個";
}
dl.stamp_header_count_total dt {
	background: #cb181d;
	color: #ffffff;
	padding: 0.3em 0.6em;
}
dl.stamp_header_count_total dd {
	color: #cb181d;
}
dl.stamp_header_count_total dd:after {
	content: "回";
}
@media screen and (min-width:581px) {
	.stamp_header_count {
		font-size: 1.1em;
	}
}
/* タイトル部分 */
.stamp_title {
	position: relative;
	width: 100%;
	height: 0;
	/* (画像の高さ / 画像の横幅) × 100 */
	padding-top: 30.306122448979592%;
	background: url(../img/content/stamp/stamp_title_bg.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.stamp_title p {
	position: absolute;
	right: 0.5em;
	bottom: 0.5em;
	color: #4f4e22;
	text-align: right;
	font-size: 0.8em;
	font-weight: bold;
}
@media screen and (min-width:581px) {
	.stamp_title p {
		font-size: 1em;
	}
}
/* スタンプ押下 */
.stamp_count_up_erea {
	background: #fefefe;
	padding: 1em 0.5em;
	box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
	margin: 1em auto;
}
.stamp_count_up_erea ul {
	display: flex;
	align-items: center;
	gap: 5px;
}
.stamp_count_up_erea ul li {
	width: calc(100% / 5);
}
.stamp_count_up_erea ul li img {
	width: 100%;
}
.stamp_count_up_erea p {
	font-size: 0.7em;
	text-align: center;
	color: #121212;
	margin-top: 1em;
}
/*---------------------------------------
 購入済有料プラン（ログイン後）
---------------------------------------*/
.plan_select_name {
	border: none;
}
td.plan_content {
	padding: 0.5em;
	background: #f2fbeb;
}
/*---------------------------------------
 無料コンテンツ（ログイン後）
---------------------------------------*/
.free_content_wrapper h1 {
	font-size: 1em;
	text-align: center;
	background: linear-gradient(to right, gold, darkred);
	color: white;
	padding: 0.7em;
	border-radius: 8px;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
}
.free_content_wrapper h1 img {
	width: 1.6em;
	margin: 0 0.2em;
}
.free_content_race_detail ul {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.7em;
	text-align: center;
	background: #228B22;
	;
	color: white;
	padding: 0.7em 0;
	border-radius: 8px;
	margin: 0.7em auto;
}
.free_content_race_detail ul li {
	border-right: 1px solid #ffffff;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
	width: calc(100% / 4);
}
.free_content_race_detail ul li:last-child {
	border: none;
}
.free_content_race_detail ul li img {
	width: 2.5em;
	margin: 0 auto;
}
.free_content_horse_list h2 {
	font-size: 1em;
	background: darkred;
	color: gold;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
	padding: 0.5em;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.free_content_horse_list h2 img {
	width: 1.6em;
	margin: 0 0.3em;
}
.free_content_horse_list ul {
	text-align: center;
	margin: 0.2em auto 1em auto;
}
.free_content_horse_list ul li {
	border-bottom: 1px solid #B9B9B9;
	padding: 0.5em 0;
	font-size: 0.8em;
	color: #666666;
}
.free_content_horse_list ul li.horse_list_pick_up {
	font-size: 1em;
	color: darkred;
	font-weight: bold;
}
p.horse_attention {
	background: darkred;
	padding: 0.5em;
	border-radius: 8px;
	color: gold;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
	text-align: center;
}
/*---------------------------------------
 決済関係（ログイン後）
---------------------------------------*/
/* 決済選択画面 */
.selected_plan h3 {
	text-align: center;
}
.selected_plan table td.plan_price:after {
	content: "円";
	margin-left: 0.2em;
}
/* 各種決済の詳細 */
.payment_detail_wrapper dl {
	border-radius: 8px;
	margin: 1.5em auto 2em auto;
}
.payment_detail_wrapper dl dt {
	text-align: center;
	padding: 0.5em;
	color: #ffffff;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
	font-weight: bold;
}
.payment_detail_wrapper dl dd.payment_detail {
	background: #FFF7ED;
	border-radius: 8px;
	padding: 0.8em;
}
.payment_detail_wrapper dl dd {
	width: 93%;
	margin: 1em auto;
	line-height: 1.7em;
	font-size: 0.9em;
}
/* 各種決済の詳細（銀行振込） */
.payment_detail_wrapper.bank_detail dl {
	border: 3px solid #1476F2;
	position: relative;
}
.payment_detail_wrapper.bank_detail dl::after {
	content: "";
	position: absolute;
	bottom: -20px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 20px solid #1476F2;
}
.payment_detail_wrapper.bank_detail dl dt {
	background: #1476F2;
}
/* 各種決済の詳細（クレジットカード） */
.payment_detail_wrapper.credit_detail dl {
	border: 3px solid #cb181d;
	position: relative;
}
.payment_detail_wrapper.credit_detail dl::after {
	content: "";
	position: absolute;
	bottom: -20px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 20px solid #cb181d;
}
.payment_detail_wrapper.credit_detail dl dt {
	background: var(--red);
}
/*決済・購入に関するお願い*/
.payment_caution dl {
	border: 1px solid #999;
	border-radius: 8px;
	padding: 0.5em;
	background: #EFEEEE;
	margin: 1.5em auto;
}
.payment_caution dl dt {
	text-align: center;
	font-weight: bold;
	border-bottom: 1px solid #999;
	padding-bottom: 0.3em;
	margin-bottom: 0.5em;
	color: #333;
	font-size: 0.8em;
}
.payment_caution dl dd {
	margin: 0;
	color: #333;
	font-size: 0.7em;
	line-height: 1.7em;
}
/*参加商品までの流れ*/
.payment_flow dl {
	border: 1px solid #C7A983;
}
.payment_flow dl dt {
	background: #C7A983;
	text-align: center;
	padding: 0.5em 0;
}
.payment_flow dl dd {
	margin: 0;
	padding: 0.5em 0.5em 0.5em 1.8em;
	font-size: 0.8em;
	text-indent: -0.8em;
	line-height: 1.7em;
}
/*---------------------------------------
 その他プラン（ログイン後）
---------------------------------------*/
/*共通*/
.plan_list_2culum {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 5px;
}
.plan_list_box {
	width: calc(100% / 2);
	background: #fff;
	border-radius: 6px;
	line-height: 1.7em;
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
	position: relative;
	padding: 1em 0.3em 0.5em 0.3em;
	margin: 0 auto 1em auto;
}
.plan_list_box .tipster_wrap_plan_set, .plan_list_side .tipster_wrap_plan_set {
	border: none;
	margin: 0 auto;
}
.plan_list_box .tipster_wrap_plan_set table, .plan_list_side .tipster_wrap_plan_set table {
	width: 100%;
	text-align: center;
	font-size: 0.7em;
	margin: 0.7em auto;
}
.plan_list_box .tipster_wrap_plan_set td, .plan_list_side .tipster_wrap_plan_set td {
	padding: 0;
}
.plan_list_box .tipster_wrap_plan_set td:last-child {
	white-space: normal;
	min-width: 0;
}
.plan_list_side .tipster_wrap_plan_set td:last-child {
	white-space: normal;
	min-width: 0;
}

/*プラン表　2列*/
.tipster_wrap_plan_set.tipster_wrap_plan_set_2culum td {
	padding: 0.2em;
	text-align: left;
	line-height: 1.5em;
}

.plan_list_box .common_btn a, .plan_list_side .common_btn a {
	font-size: 0.8em;
	padding: 0.5em;
}
img.black_white {
	filter: grayscale(100%);
}
h1.plan_list_bigtitle {
	font-size: 1.1em;
}
@media screen and (min-width:581px) {
	.plan_list_2culum {
		gap: 10px;
	}
}
.plan_list_women_wrapper, .plan_list_men_wrapper{
width:calc(100% / 2);
}
/*2列横並び（プラン中身は縦並び）*/
.plan_list_box_title {
	text-align: center;
	font-size: 0.6em;
	line-height: 1.7em;
	margin-bottom: 0.5em;
}
.plan_list_box_title ul li:nth-child(1) {
	background: var(--red);
	padding: 0.3em 0.8em;
	color: #fff;
	display: inline;
}
.plan_list_box_title ul li:nth-child(2) {
	font-weight: bold;
	margin: 0.5em auto 0.3em auto;
}
.plan_list_side {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 5px;
	background: #fff;
	border-radius: 6px;
	line-height: 1.7em;
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
	position: relative;
	padding: 1em 0.3em 0.5em 0.3em;
	margin: 0 auto 1em auto;
}
.plan_list_side_left {
	width: 40%;
}
.plan_list_side_left img {
	width: 100%;
}
.plan_list_side_right {
	width: 60%;
}
@media screen and (min-width:581px) {
	.plan_list_box_title {
		font-size: 0.8em;
	}
}
/*2列横並び（男女予想家）*/
.plan_list_box_gender {
	width: 100%;
}
.plan_list_tipster_name dl {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	font-size: 0.8em;
}
.plan_list_tipster_name dl dd {
	margin: 0;
}
@media screen and (min-width:581px) {
	.plan_list_tipster_name dl {
		font-size: 1em;
		margin-top: 0.5em;
	}
}

/*---------------------------------------
メールBOX（ログイン後）
---------------------------------------*/
.mail_set{
	border-radius: 4px;
    border:2px solid #210c5f;
    margin-bottom: 1.5em;
}
.mail_set dl dt{
	color: #fff;
	border-bottom: 2px solid #210c5f;
	background: #210c5f;
	padding: 0.5em;
}
.mail_set dl dt a{
	text-decoration: underline;
}
.mail_set dl dd{
	margin: 0;
	padding: 0.5em;
}
.mail_set dl dd ul{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap:5px;
}

/*---------------------------------------
入力フォーム（ログイン前後）
---------------------------------------*/
/* 入力フォーム */
form {
	width: 90%;
	margin: 0.5em auto 0 auto;
	padding-bottom: 1em;
}
form dl {
	width: 100%;
	margin: 0 auto;
}
form dl dt {
	margin: 0 0.2em;
	font-size: 13px;
}
form dl dd {
	margin: 0;
}
form input {
	width: 100%;
	border: 2px solid #93f2e1;
	background: #fefefe;
	border-radius: 8px;
	padding: 0.7em 0.5em;
	-webkit-box-shadow: inset 0px 0px 5px 2px #E6E6E6;
	-moz-box-shadow: inset 0px 0px 5px 2px #E6E6E6;
	box-shadow: inset 0px 0px 5px 2px #E6E6E6;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	cursor: pointer;
}
.input_arrow {
	cursor: pointer;
}
form input.filled, form input:focus, form input:not(:placeholder-shown) {
	background: #ffffff !important;
}
::placeholder {
	font-size: 15px;
	color: gray;
}
/* 各項目のタイトル */
.form_section_title {
	display: flex;
	align-items: center;
	margin: 1.5em 0 1em 0;
}
.form_section_title p {
	color: #fefefe;
	font-size: 16px;
	font-weight: 600;
}
span.form_section_title_small {
	font-size: 13px;
}
p.form_required {
	background: #93f2e1;
	border-radius: 2px;
	text-align: center;
	color: var(--navy);
	font-size: 11px;
	font-weight: normal;
	padding: 0.2em 0.7em;
	margin: 0 0.3em 0 0.5em;
}
p.error {
	color: var(--red);
	font-size: 13px;
	font-weight: 500;
}
p.form_caption {
	color: #434343;
	font-size: 12px;
	width: 95%;
	margin: 0.5em auto 0 auto;
}
/* パスワードの表示非表示 */
.pass_display {
	text-align: right;
}
#togglePasswordLabel {
	cursor: pointer;
	color: #ddd;
	font-size: 13px;
	margin-top: 0.5em;
}
/* 確認ボタン */
.submit-button {
	display: block;
	width: 90%;
	margin: 1.5em auto 0 auto;
	padding: 0.8em 0;
	background-color: #93f2e1;
	border: 1px solid #93f2e1;
	color: white;
	border-radius: 90px;
	font-size: 20px;
	font-weight: 600;
	cursor: pointer;
	text-align: center;
	position: relative;
	box-shadow: 0 5px 0 #1c8b77; /* 立体感のある影 */
	transition: all 0.2s ease; /* スムーズなアニメーション */
	color: var(--navy)
}
.submit-button:hover {
	box-shadow: 0 0 0 #1c8b77; /* 影を消して押し込む */
	transform: translateY(5px); /* ボタンが押し込まれる効果 */
}
.submit-button i {
	position: absolute;
	right: 20px; /* 右端からの位置 */
	top: 50%;
	transform: translateY(-50%); /* 上下中央に配置 */
	font-size: 20px;
}
/* パス忘れ */
.pass_forget {
	text-align: center;
	color: #ddd;
	font-size: 13px;
	text-decoration: underline;
}
@media screen and (min-width:581px) {
	form {
		width: 70%;
	}
}
/*---------------------------------------
ログイン前
---------------------------------------*/
/*全体*/
main.before_common_wrap {
	padding: 0;
}
/*ヘッダー*/
.before_header_wrap .menu_bt {
	font-size: 0.8em;
	padding: 0.3em 0.6em;
	background: var(--t_blue);
	border: 1px solid #93f2e1;
	border-radius: 4px;
	text-align: center;
	box-shadow: 0 3px 0 #1c8b77;
	transition: all 0.2s ease;
	display: inline-block;
	font-weight: bold;
}
.before_header_wrap .menu_bt p {
	white-space: nowrap;
	color: var(--navy);
}
.before_header_wrap .menu_bt:hover {
	box-shadow: 0 0 0 #1c8b77;
	transform: translateY(3px);
}
/*ハンバーガーメニュー*/
.global_menu_wrapper_before .page_title {
	padding: 1em;
}
/*共通*/
.before_entry {
	text-align: center;
	color: #ffffff;
}
.before_entry a img {
	display: inline;
	width: 85%;
	margin: 0.5em auto;
}
.before_entry p {
	color: #ffffff;
	font-size: 0.7em;
}
@media screen and (min-width:581px) {
	.before_entry a img {
		width: 75%;
	}
	.before_entry p {
		font-size: 1em;
	}
}
/*TOP　キービジュアル*/
.before_kv.kv_normal {
	width: 100%;
	height: 0;
	/* (画像の高さ / 画像の横幅) × 100 */
	padding-top: 171.428571428571429%;
	background: url(../img/content/before/kv_normal.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	position: relative;
}
.before_entry.kv_entry {
	position: absolute;
	left: 50%;
	bottom: 1em;
	transform: translateX(-50%);
	width: 100%;
}
@media screen and (min-width:581px) {
	.before_entry.kv_entry {
		bottom: 2em;
	}
}
/*TOPスペシャル版　キービジュアル*/
.kv_special {
	width: 100%;
	height: 0;
	/* (画像の高さ / 画像の横幅) × 100 */
	padding-top: 185.102040816326531%;
	background: url(../img/content/before/kv_special.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	position: relative;
}
.kv_special_content {
	position: absolute;
	left: 50%;
	bottom: 1em;
	transform: translateX(-50%);
	width: 100%;
}
ul.kv_special_tipster_2culum {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 10px;
	padding: 0 0.5em;
	text-align: center;
}
ul.kv_special_tipster_2culum p {
	background: linear-gradient(-90deg, rgb(242, 149, 164) 0%, rgb(251, 175, 187) 100%);
	color: #ffffff;
	font-weight: bold;
	padding: 0.2em 1.2em;
	border-radius: 90px;
	font-size: 0.9em;
	display: inline-block;
	text-align: center;
	position: relative;
	z-index: 3;
	text-shadow: 1px 1px 1px rgba(219, 50, 50, 0.8);
	margin: 0 auto 0.3em auto;
	line-height: 1.5em;
}
ul.kv_special_tipster_2culum li {
	width: calc(100% / 2);
	position: relative;
}
ul.kv_special_tipster_2culum li img.kv_special_tipster_flame {
	position: relative;
	z-index: 1;
	width: 100%;
}
ul.kv_special_tipster_2culum li img.kv_special_tipster_gif {
	position: absolute;
	left: 50%;
	bottom: 0.5em;
	transform: translateX(-50%);
	width: 92%;
}
@media screen and (min-width:581px) {
	.kv_special_content {
		bottom: 2.8em;
	}
	ul.kv_special_tipster_2culum li img.kv_special_tipster_gif {
		bottom: 0.7em;
		width: 91%;
	}
}
/*TOP　セクション2*/
.before_sec_02 {
	width: 100%;
	height: 0;
	/* (画像の高さ / 画像の横幅) × 100 */
	padding-top: 131.122448979591837%;
	background: url(../img/content/before/login_before_top_sec02_bg.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	position: relative;
}
.before_sec_02_detail {
	width: 100%;
	position: absolute;
	left: 50%;
	top: 1em;
	transform: translateX(-50%);
}
.before_entry.entry_bg_black {
	background: #000000;
	padding-bottom: 2em;
}
/*TOPスペシャル版 セクション2*/
.before_special_sec_02 {
	width: 100%;
	background: #000000;
	background-image: url(../img/content/before/login_before_top_sec02_special_bg.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	position: relative;
}
/*TOP　セクション3*/
.before_sec_03 {
	background: url(../img/content/before/pat_01.png) repeat center / 200px, #ffffff;
	text-align: center;
	padding-bottom: 1.5em;
}
.before_sec_03 p {
	margin: 1.5em auto;
	line-height: 2em;
	padding: 0 0.5em;
}
.before_sec_03 .before_entry {
	margin-top: 1em;
}
.before_tipster_week {
	background: url(../img/content/before/pat_02.png) repeat center / 150px, #210c5f;
	text-align: center;
	border-radius: 8px;
	width: 95%;
	margin: 0 auto 1em auto;
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
	padding: 1em 0.5em 1.3em 0.5em;
}
.before_tipster_week h4 {
	color: #ffffff;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
	margin-bottom: 1em;
}
.before_tipster_box_wrapper {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
.before_tipster_box {
	border-radius: 8px;
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
	border: 2px solid #ffffff;
	overflow: hidden;
	color: #ffffff;
}
.before_tipster_box .before_tipster_profile .tipster_name {
	font-weight: bold;
	margin: 0;
	color: #000000;
}
.before_tipster_box .before_tipster_profile span.tipster_age {
	font-size: 0.7em;
	margin-left: 0.3em
}
/*予想家　女性*/
.before_tipster_box.before_tipster_women .before_tipster_profile {
	background: linear-gradient(-90deg, rgb(242, 149, 164) 0%, rgb(251, 175, 187) 100%);
	padding-top: 0.2em;
}
.before_tipster_box.before_tipster_women .before_tipster_profile .tipster_copy {
	background: linear-gradient(-90deg, rgb(182, 82, 212) 0%, rgb(255, 24, 127) 100%);
	font-size: 0.6em;
	display: inline;
	padding: 0.2em 0.5em;
}
/*予想家　男性*/
.before_tipster_box.before_tipster_men .before_tipster_profile {
	/*
	background: linear-gradient(-90deg, rgb(143, 97, 229) 0%, rgb(66, 137, 249) 100%);
	*/
	background: #00FF00;
	padding-top: 0.2em;
}
.before_tipster_box.before_tipster_men .before_tipster_profile .tipster_copy {
	background: linear-gradient(-90deg, rgb(182, 66, 249) 0%, rgb(143, 97, 229) 100%);
	font-size: 0.6em;
	display: inline;
	padding: 0.2em 0.5em;
}
/*TOPスペシャル版 セクション3*/
.before_sec_03_special_tipster_list {
	background: rgb(233, 32, 119);
	background: url("../img/content/before/pat_03.png") repeat center / 300px, linear-gradient(90deg, rgba(233, 32, 119, 1) 0%, rgba(255, 127, 169, 1) 100%);
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
	position: relative;
	padding: 2em 0 1.5em 0;
	margin: 0 auto 1em auto;
}
p.tipster_caption {
	font-style: italic;
	font-weight: bold;
	color: #fff;
	font-size: 0.8em;
	line-height: 2.5em;
	margin: 1em auto 1.5em auto !important;
	text-shadow: 1px 1px 1px rgba(219, 50, 50, 1);
}
p.tipster_caption_red {
	margin: 0 auto 1em auto !important;
	background: #ffffff;
	color: #e92077;
	border-radius: 90px;
	padding: 0.3em 1em !important;
	display: inline;
	font-size: 0.9em;
}
@media screen and (min-width:581px) {
	p.tipster_caption {
		font-size: 1.1em;
		line-height: 2.5em;
	}
	p.tipster_caption_red {
		font-size: 1em;
	}
}
/*TOP　セクション4*/
.before_sec_04 {
	text-align: center;
	padding-bottom: 1.5em;
	color: #ffffff;
}
.before_sec_04_detail p {
	margin: 1.5em auto 0.5em auto;
	line-height: 2em;
	padding: 0 0.5em;
}
.before_sec_04_detail img {
	margin: 0 auto 1em auto;
}
.before_hit_wrapper {
	background: #fff;
	border-radius: 6px;
	line-height: 1.7em;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
	position: relative;
	padding: 1em;
	margin: 0 auto 1em auto;
	width: 95%;
}
.before_hit_title {
	text-align: center;
	margin-bottom: 1em;
}
.before_hit_title h4 {
	color: var(--red);
	font-size: 1.2em;
}
.before_hit_title p {
	font-size: 0.7em;
	color: #333333;
}
/*TOP　セクション5*/
.before_sec_05 {
	text-align: center;
	padding-bottom: 1.5em;
	color: #ffffff;
	background: #0c0328;
}
.before_sec_05 p {
	margin: 1.5em auto;
	line-height: 2em;
	padding: 0 0.5em;
}
/*TOP　セクション6*/
.before_sec_06 {
	padding: 1.5em 0;
}
.before_voice_wrapper {
	background: #fff;
	border-radius: 6px;
	line-height: 1.7em;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
	position: relative;
	padding: 2em 1em 1em 1em;
	margin: 0 auto 1em auto;
	width: 95%;
}
.before_voice_wrapper h4 img {
	width: 100%;
	margin: 0 auto 1.5em auto;
}
/*TOP　セクション7*/
.before_sec_07 h2 img {
	margin-bottom: 1.5em;
}
.before_entry_caption {
	margin-top: 2em;
	text-align: center;
	font-size: 0.7em;
	color: #ffffff;
	line-height: 2em;
}
.before_entry_caption p.before_entry_caption_glay {
	color: #8F8F8F;
	font-size: 0.6em;
}

/*---------------------------------------
ユーザープロフィール確認・変更（ログイン後）
---------------------------------------*/
/*共通*/
.mypage_wrapper h3{
	text-align: center;
	margin:0.5em auto 1em auto;
}
/*プロフィール確認*/
.user_profile_table{
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap:1em;
	margin-bottom: 1.5em;
}
.user_profile dl{
	text-align: center;
	border: 1px solid #121212;
	border-radius: 6px;
	width: 40%;
}
.user_profile dl dt{
	background: #121212;
	color: #ffffff;
	padding: 0.1em 0;
}
.user_profile dl dd{
	margin: 0;
	padding: 0.1em 0 0.2em 0;
}
.user_profile dl dd.user_profile_pt:after{
	content: "pt";
	margin-left: 0.2em;
}
/*パス変更*/
.user_pass h3{
	margin-top: 2em;
}
.user_pass{
	text-align: center;
}
.user_pass dl:last-of-type{
	margin-bottom: 3em;
}
.user_pass dl dt{
	margin-bottom: 0.5em;
}
.user_pass dl dd{
	margin: 0 0 0.5em 0;
}
.user_pass dl dd input{
	padding: 0.5em 0 0.5em 0.3em;
	width: 100%;
}
/*アドレス変更*/
.user_mail h3{
	margin-top: 2em;
}

/*---------------------------------------
汎用ポップアップ
---------------------------------------*/
.popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  justify-content: center;
  align-items: center;
  padding: 1em;
  box-sizing: border-box;
}
.popup-box {
  background: #fff;
	border: 3px solid #d71e9d;
  width: 100%;
  max-width: 460px;
  max-height: 60vh;
  border-radius: 8px;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
}
.popup-close {
  position: absolute;
  top: 0.5em;
  right: 1em;
  font-size: 1.2em;
  background: none;
  border: none;
  cursor: pointer;
}
.popup-content {
  padding: 2em 1em 1em;
  overflow-y: auto;
  flex-grow: 1;
  min-height: 0;
}
.popup-register_text{
	text-align: center;
}
.popup-content h2{
	text-align: center;
	margin-bottom: 0.5em;
}
.popup-content p{
	line-height: 1.7em;
}
.popup-content p span.popup-register_title{
	font-size: 1.5em;
}
.popup-content ul{
	background: #b20004;
	border-radius: 8px;
	color: #ffffff;
	padding: 0.5em;
	width: 90%;
	margin: 0.5em auto 1em auto;
	line-height: 1.7em;
}
.popup-content ul li i{
	color: yellow;
}
.js-popup-trigger {
  cursor: pointer;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.js-popup-trigger:hover {
  opacity: 0.8;
  transform: translateY(-2px);
}

@media screen and (max-width: 580px) {
	.popup-box {
		width: 90%;
  max-height: 70vh;
}
	.popup-close {
  right: 0.5em;
}
}

/*---------------------------------------
チュートリアル
---------------------------------------*/
/* 背景を暗くするオーバーレイ */
#tutorialOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  z-index: 10000;
  pointer-events: none;
}

/* ハイライト枠 */
#tutorialHighlight {
  position: absolute;
  border: 3px solid yellow;
  box-sizing: border-box;
  pointer-events: none;
  display: none;
  z-index: 1000000;
	padding: 0.2em;
}

/* チュートリアル中は他要素のクリック無効化 */
.tutorial-disabled {
  pointer-events: none !important;
}

/* 対象要素をハイライト対象にしたとき */
.tutorial-highlight-target {
  position: relative;
  z-index: 1000000 !important;
}

/* メニュー本体を前面に */
.global.tutorial-mode {
  z-index: 10020 !important;
}
#tutorialOverlayMenu {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  z-index: 100000; /* メニュー項目より下に */
  pointer-events: none;
}

/* チュートリアル専用ポップアップ */
#popup-tutorial .popup-box,
#popup-tutorial-finish .popup-box{
	background: #210c5f;
}
#popup-tutorial .popup-box .popup-content,
#popup-tutorial-finish .popup-box .popup-content{
	padding: 0;
}
.tutorial_skip{
	text-align: right;
}
.tutorial_skip a{
	color: #c0c0c0;
	font-size: 0.7em;
	padding: 0 0.5em 1em 0;
}
#startTutorial{
	text-align: center;
	margin: 1em auto;
}
#startTutorial img{
	width: 85%;
	margin: 0 auto;
}
.tutorial_finish{
	text-align: center;
	margin: 1.5em auto;
}
.tutorial_finish a img{
	display: inline;
	width: 85%;
}

/* チュートリアルの誘導文言と指 */
img.tutorial_finger_right_img{
	width: 50px;
	margin-left: 0.3em;
}
.tutorial_finger_left {
  position: absolute;
  top: 10px;
  right: 50px; /* global_btの左横に配置したい場合 */
  z-index: 1000010;
  text-align: right;
  animation: fadeIn 1s ease forwards;
	display: flex;
	align-items: center;
}

.tutorial_finger_left p{
	background: #ffffff;
	color: var(--navy);
	font-size: 0.8em;
	line-height: 1.5em;
	border-radius: 10px;
	padding: 0.2em 0.7em;
	font-weight: bold;
	white-space: nowrap;
}

.tutorial_finger_inner {
  position: absolute;
  top: -120px; /* メニュー上に出す */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000010;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: fadeIn 1s ease forwards;
}

.tutorial_finger_inner p {
  background: #fff;
  color: var(--navy);
  font-size: 0.8em!important;
  line-height: 1.5em;
  border-radius: 10px;
  padding: 0.2em 0.7em;
  font-weight: bold;
  margin-bottom: 0.3em!important;
	text-shadow: none!important;
	white-space: nowrap;
}

.tutorial_finger_inner_img {
  width: 40px!important;
	margin: 0!important;
	padding: 0!important;
}

.tutorial_finger_bottom{
	text-align: left;
  animation: fadeIn 1s ease forwards;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1em auto;
}

.tutorial_finger_bottom p{
	background: #ffffff;
	color: var(--navy);
	font-size: 1em;
	line-height: 1.5em;
	border-radius: 10px;
	padding: 0.2em 1em;
	font-weight: bold;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
	margin: 0;
	border: 2px solid #d71e9d;
	white-space: nowrap;
}
.tutorial_finger_bottom img{
	width: 40px;
	margin-left: 0.5em;
}

.tutorial_finger_top{
	text-align: left;
  animation: fadeIn 1s ease forwards;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 1em auto 0 auto;
}

.tutorial_finger_top p{
	background: #ffffff;
	color: var(--navy);
	font-size: 1em;
	line-height: 1.5em;
	border-radius: 10px;
	padding: 0.2em 1em;
	font-weight: bold;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
	margin:0;
	border: 2px solid #d71e9d;
	white-space: nowrap;
}
.tutorial_finger_top img{
	width: 40px;
	margin-right: 0.5em;
}

span.tutorial_finger_scroll{
	background: var(--navy);
	padding: 0.1em 0.6em;
	border-radius: 90px;
	color: yellow;
	font-size: 0.7em;
}

/* ページ内のチュートリアル発動クラス */
.tutorial_end {
  height: 10px; /* 0だと認識されない為 */
}

/* 基本的に押せない手動指定 */
.no_click {
  pointer-events: none !important;
}

/* ハイライト中の要素は押せる（JSが自動で付けるクラス） */
.tutorial-highlight-target {
  pointer-events: auto !important;
}

.grad_purple_btn.shine_btn {
	position: relative;
	overflow: hidden;
	padding: 1.2em 0;
}

/* ボタンキラリアニメーション */
.grad_purple_btn.shine_btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: -60%;
	width: 50%;
	height: 100%;
	background: linear-gradient(
		120deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.15) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	transform: skewX(-25deg);
	filter: blur(3px);
	animation: shine 0.8s linear infinite;
	pointer-events: none;
	z-index: 1;
}
/* aタグを上に */
.grad_purple_btn.shine_btn a {
	position: relative;
	z-index: 2;
}
@keyframes shine {
	0% {
		left: -60%;
	}
	100% {
		left: 110%;
	}
}