/**
 * Membership Block Styles
 * 会員ページ用ブロックスタイル
 * 
 * @package Jiyujin
 */

/* ============================================
   グループブロックスタイル
   ============================================ */

/* カード（ベージュ背景） */
.wp-block-group.is-style-card-normal-bg {
	background-color: #fff;
	border-radius: 20px;
	padding: 40px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* カード（プレミアム） */
.wp-block-group.is-style-card-premium {
	background: linear-gradient(135deg, #fff 0%, #f5ede0 100%);
	border: 3px solid #ff8063;
	border-radius: 20px;
	padding: 40px;
	box-shadow: 0 6px 30px rgba(255, 128, 99, 0.2);
	position: relative;
}

/* グラデーション（ベージュ→白） */
.wp-block-group.is-style-gradient-beige-white {
	background: linear-gradient(135deg, #f5ede0 0%, #fff 100%);
	border: 2px solid #f5ede0;
	border-radius: 20px;
	padding: 50px;
	box-shadow: 0 4px 20px rgba(245, 237, 224, 0.5);
}


/* ============================================
   ボタンブロックスタイル
   ============================================ */

/* オレンジ背景＋白テキスト */
.wp-block-button.is-style-solid-orange-white-text .wp-block-button__link {
	background: #ff8063;
	border: 2px solid #ff8063;
	border-radius: 30px;
	box-shadow: 0 4px 15px rgba(255, 128, 99, 0.3);
	padding: 18px 40px;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
}

.wp-block-button.is-style-solid-orange-white-text .wp-block-button__link::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	transform: translate(-50%, -50%);
	transition: width 0.6s, height 0.6s;
}

.wp-block-button.is-style-solid-orange-white-text .wp-block-button__link:hover::before {
	width: 300px;
	height: 300px;
}

.wp-block-button.is-style-solid-orange-white-text .wp-block-button__link:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 25px rgba(255, 128, 99, 0.4);
	background: #ff9068;
}

/* 背景画像＋白テキスト */
.wp-block-button.is-style-bg-image-white-text .wp-block-button__link {
	display: inline-block;
    padding: 15px 50px;
    background: url('../images/membership_pat.webp');
    background-size: 100% 100%;
    color: #f5ede0;
    letter-spacing: 0.02em;
    text-decoration: none;
	width: 400px;
	text-align: center;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	text-decoration: none;
}

.wp-block-button.is-style-bg-image-white-text .wp-block-button__link:hover {
    opacity: 0.8;
    transform: scale(1.1);
}

/* 黒テキスト＋矢印アイコン */
.wp-block-button.is-style-black-text-arrow .wp-block-button__link {
	display: inline-block;
	letter-spacing: 0.03em;
    color: #373331;
    position: relative;
	padding: 0;
    padding-right: 40px;
    text-decoration: none;
	background: transparent;
}

.wp-block-button.is-style-black-text-arrow .wp-block-button__link::after {
    content: "";
    width: 30px;
    height: 30px;
    background: url(../images/more.svg) no-repeat center center;
    background-size: cover;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
    transition: 0.5s;
}

.wp-block-button.is-style-black-text-arrow .wp-block-button__link:hover {
	background: transparent;
	transform: none;
	box-shadow: none;
	color: #ff8063!important;
}

.wp-block-button.is-style-black-text-arrow .wp-block-button__link:hover::after {
	transform: translate(0, -50%) rotate(360deg);
}

/* ============================================
   テーブルブロックスタイル（会員比較表）
   ============================================ */

.wp-block-table.is-style-membership-comparison {
	border-collapse: collapse;
	background: #fff;
	border-radius: 15px;
	overflow: hidden;
	width: 100%;
}

.wp-block-table.is-style-membership-comparison table {
	width: 100%;
	border-collapse: collapse;
}

.wp-block-table.is-style-membership-comparison thead {
	border-bottom: none;
}

.wp-block-table.is-style-membership-comparison thead th:not(:nth-child(-n+2)) {
	color: #fff;
}

.wp-block-table.is-style-membership-comparison th,
.wp-block-table.is-style-membership-comparison td {
	padding: 15px 18px;
	border: 1px solid rgba(255, 128, 99, 0.2);
}

.wp-block-table.is-style-membership-comparison th {
	background: linear-gradient(135deg, #ff8063 0%, #ff9068 100%);
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.wp-block-table.is-style-membership-comparison th:first-child {
	background: linear-gradient(135deg, #f5ede0 0%, #fff 100%);
	border: 1px solid rgba(255, 128, 99, 0.2);
}

.wp-block-table.is-style-membership-comparison tbody tr:nth-child(even) {
	background: rgba(245, 237, 224, 0.3);
}

.wp-block-table.is-style-membership-comparison td:first-child {
	background: #f5ede0;
}

/* ============================================
   レスポンシブ対応
   ============================================ */

@media (max-width: 768px) {
	/* ============================================
	   グループブロックスタイル（レスポンシブ）
	   ============================================ */
	.wp-block-group.is-style-card-normal-bg,
	.wp-block-group.is-style-card-premium,
	.wp-block-group.is-style-gradient-beige-white {
		padding: 25px 20px;
		border-radius: 15px;
	}

	/* ============================================
	   ボタンブロックスタイル（レスポンシブ）
	   ============================================ */
	/* オレンジ背景＋白テキスト */
	.wp-block-button.is-style-solid-orange-white-text .wp-block-button__link {
		padding: 15px 30px;
		width: 100%;
		display: block;
		text-align: center;
	}

	/* 背景画像＋白テキスト */
	.wp-block-button.is-style-bg-image-white-text .wp-block-button__link {
		width: 100%;
		max-width: 100%;
		padding: 15px 30px;
		display: block;
		text-align: center;
	}

	/* 黒テキスト＋矢印アイコン */
	.wp-block-button.is-style-black-text-arrow .wp-block-button__link {
		padding-right: 35px;
		width: 100%;
		display: block;
	}

	.wp-block-button.is-style-black-text-arrow .wp-block-button__link::after {
		width: 25px;
		height: 25px;
		right: 5px;
	}

	/* ============================================
	   テーブルブロックスタイル（レスポンシブ）
	   ============================================ */
	.wp-block-table.is-style-membership-comparison {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.wp-block-table.is-style-membership-comparison table {
		min-width: 600px;
	}

	.wp-block-table.is-style-membership-comparison th,
	.wp-block-table.is-style-membership-comparison td {
		padding: 10px 8px;
		font-size: 0.9em;
	}

	.wp-block-table.is-style-membership-comparison th:first-child,
	.wp-block-table.is-style-membership-comparison td:first-child {
		position: sticky;
		left: 0;
		z-index: 1;
		box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
	}
}