/*****************************************************
*** 会員ページ レスポンシブ対応 - 整理版 ***
*** （スマホのUI/UXを基準に、768px/1024px以降で最小上書き）***
*****************************************************/

/* =====================================================
   0. Global Base: Mobile UI 固定（全画面共通）
===================================================== */

/* ----------------------------------------
   0.1. Body / Root Layout
---------------------------------------- */
body {
	-webkit-text-size-adjust: 100%;
	background-color: #fff;
	background-repeat: no-repeat;
	background-size: 100%;
	display: block;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "メイリオ", Meiryo, "Yu Gothic Medium",
		"游ゴシック Medium", "Noto Sans JP", sans-serif;
	line-height: 1.7;
	margin: 0 auto;
	max-width: 960px;
	width: 100%;
	word-break: break-all;
}

/* ----------------------------------------
   0.2. Navigation / Utilities
---------------------------------------- */
#gnb {
	display: none;
}

.text_red {
	color: darkred;
	font-weight: bold;
	margin: 0px;
}

/* =====================================================
   1. Tablet / Small PC (>=768px)
===================================================== */
@media screen and (min-width: 768px) {
	/* ----------------------------------------
       1.1. Base & Layout Container
    ---------------------------------------- */
	:root {
		--container-max: 720px;
	}

	.wrap {
		margin: 0 auto;
		max-width: 720px;
		/* padding: 0 1rem; */
	}

	body#main-body #contents_c {
		position: relative;
	}

	body#main-body #contents_c::before {
		bottom: 0;
		content: "";
		left: 1rem; /* paddingと同じ幅 */
		/* border: 1px solid #e3e3e3; */ /* 任意のborder色・太さに調整可能 */
		pointer-events: none; /* クリックイベントを無効化 */
		position: absolute;
		right: 1rem; /* paddingと同じ幅 */
		top: 0;
	}

	body#main-body #contents,
	body#main-body #contents_02,
	body#main-body #contents_c,
	body#main-body #container {
		box-sizing: border-box;
		display: block;
		margin: 0 auto;
		max-width: var(--container-max);
		padding: 0 1rem; /* 既存方針どおり */
		width: 100%;
	}

	body#main-body #contents > .section_1,
	body#main-body #contents > * {
		box-sizing: border-box;
		display: block;
		width: 100%;
	}

	body#main-body #footer {
		box-sizing: border-box;
		/* max-width: var(--container-max); */
		margin: 0 auto;
		/* padding: 0 1rem; */
		width: 100%;
	}

	header {
		padding-left: calc((100% - var(--container-max)) / 2);
		padding-right: calc((100% - var(--container-max)) / 2);
	}
	/* #f_menu {
        padding-left: calc((100% - var(--container-max)) / 2);
        padding-right: calc((100% - var(--container-max)) / 2);
    } */

	/* ----------------------------------------
       1.2. Typography (Tablet base)
    ---------------------------------------- */
	body#main-body {
		font-size: 16px;
	}

	body#main-body #contents,
	#mailbox .wrap,
	#support_mailbox .wrap,
	.blog-area .kiji-text,
	.main-col_b {
		font-size: 1rem; /* 16px 等倍 */
		line-height: 1.7;
	}

	body#main-body #contents p {
		font-size: 0.9375rem;
		line-height: 1.8;
	}

	body#main-body #title_a_b h2.title_a_b,
	body#main-body #title_a_c h2.title_a_c,
	.blog-area h2.blog-tittle {
		font-size: 1.25rem; /* ≒20px */
		line-height: 1.4;
	}

	form label.form_annai {
		font-size: 1.05rem;
	}

	#mailbox ul.wrap li .date,
	#mailbox ul.wrap li .name,
	#mailbox ul.wrap li .subject,
	#support_mailbox ul.wrap li .date,
	#support_mailbox ul.wrap li .name,
	#support_mailbox ul.wrap li .subject,
	.blog-area dl dd {
		font-size: 0.95rem;
		line-height: 1.5;
	}

	.main-col_2 .teller-text-area .name,
	.news-container h3 {
		font-size: 1.05rem;
	}

	/* ----------------------------------------
       1.3. Page Title & Button Group
    ---------------------------------------- */

	/* --- Page Title Container (title_a_b / title_a_c) --- */
	body#main-body #title_a_b {
		margin: 8% auto 0;
		max-width: var(--container-max);
		padding: 0 1rem;
	}

	body#main-body #title_a_c {
		margin: 8% auto 0;
		max-width: var(--container-max);
		padding: 0 1rem;
	}

	body#main-body #title_a_b .top,
	body#main-body #title_a_c .top {
		align-items: center;
		display: flex;
		flex-wrap: wrap; /* 子要素を縦に回り込ませ可 */
		justify-content: center;
		position: relative;
	}

	body#main-body #title_a_b h2.title_a_b {
		text-align: center;
	}

	body#main-body #title_a_c h2.title_a_c {
		letter-spacing: normal;
		text-align: center;
	}

	body#main-body #title_a_b .top h2.title_a_b,
	body#main-body #title_a_b .top p.title_text {
		flex: 0 0 100%;
		text-align: center;
		width: 100%;
	}

	body#main-body #title_a_b .top h2.title_a_b,
	body#main-body #title_a_c .top h2.title_a_c {
		margin: 0;
		text-align: center;
	}

	body#main-body #title_a_c .btn-back {
		left: 0;
	}

	body#main-body #title_a_b .top .btn-back,
	body#main-body #title_a_c .top .btn-back {
		left: 0;
		position: absolute;
	}

	body#main-body #title_a_b .btn-back a,
	body#main-body #title_a_c .btn-back a,
	.top .btn-back a {
		border-radius: 5px;
		display: inline-block;
		padding: 8px 12px;
		width: 14px;
	}

	/* --- Button Group (link_blog_btn) --- */
	.link_blog_btn {
		margin-top: 1rem;
		padding: 0 4%;
		text-align: center;
	}

	.link_blog_btn .btn {
		min-width: 220px;
		padding: 0.9em 1.6em;
	}

	/* --- Button Group (main-mailbox) --- */
	.main-mailbox {
		margin: 8% auto 0 !important;
	}

	/* --- Button Group (main-mailbox_d) --- */
	.main-mailbox_d {
		margin: 1rem auto 0;
		max-width: var(--container-max);
		padding: 0 1rem;
		text-align: center;
	}

	.main-mailbox_d .main-mailbox_d_btn {
		display: inline-block;
		padding: 0.8em 1.4em;
	}

	/* --- Button Group (result_btn_2) --- */
	.result_btn_2 {
		display: flex;
		flex-wrap: wrap; /* 画面幅が足りない時は折り返し */
		gap: 1rem; /* ボタン間余白 */
		justify-content: center; /* 中央揃え */
		margin: 2rem auto 0;
		max-width: var(--container-max);
		padding: 0 1rem;
	}

	.result_btn_2 a {
		display: inline-block;
	}

	.result_btn_2 > a,
	.result_btn_2 > button {
		min-width: 200px;
	}

	.result_btn_2 > a > button {
		width: auto;
	}

	.result_btn_2 a button,
	.result_btn_2 .Advice_btn,
	.result_btn_2 .Back_btn_2 {
		font-size: 0.95rem; /* 視認性を確保 */
		line-height: 1;
		min-height: 56px; /* 高さの下限（タブレット/PC） */
		min-width: 200px; /* 等幅の目安 */
		padding: 0.9em 2em; /* タップ/クリック領域を十分に */
	}

	/* --- Button Group (title_link_btn_2) --- */
	.title_link_btn_2 {
		display: flex;
		flex-wrap: nowrap; /* 折り返さない */
		gap: 1rem;
		justify-content: center; /* 中央揃え */
		margin: 1rem auto 0;
		max-width: var(--container-max);
		padding: 0 1rem;
	}

	.title_link_btn_2 .btn {
		flex: 0 1 auto;
		min-width: 220px;
		padding: 0.9em 1.6em;
		white-space: nowrap; /* テキストの折返し防止 */
	}

	div.title_link_btn_2 a:last-child {
		margin-left: 0 !important; /* 2%を無効化 */
	}

	/* ----------------------------------------
       1.4. Images & Banner & Footer
    ---------------------------------------- */
	/* Images */
	#contents img.w100p {
		display: block;
		height: auto;
		margin: 0 auto;
		max-width: 560px;
		width: 85%;
	}

	/* Banner */
	#banner {
		margin: 0 auto 10px;
		overflow: hidden;
		width: 370px;
	}

	#banner ul li {
		float: left;
		width: 370px;
	}

	/* Footer */
	footer .footer-banner a {
		display: inline-block;
	}

	footer .footer-banner img.img_b {
		height: auto;
		max-width: 220px;
		min-width: 120px;
		width: 22vw;
	}

	/* ----------------------------------------
       1.5. Components (Mailbox Tab, Payment Title)
    ---------------------------------------- */
	/* --- Mailbox Tab (20: 通知メールBOX タブ) --- */
	#mailbox.tabs,
	#support_mailbox.tabs {
		box-sizing: border-box;
		margin: 0 auto; /* 中央寄せ */
		max-width: 720px; /* 他のページの標準コンテンツと同じ最大幅に制限 */
		padding: 0 1rem; /* 他のページの .wrap と同じ左右の余白を設定 */
		width: 100%; /* 親要素の幅を使う */
	}

	#mailbox ul.tab01,
	#support_mailbox ul.tab01 {
		display: flex; /* タブを横並びにするために flex を使用 */
		font-size: 0; /* インラインブロックの字間を消す */
		list-style: none; /* リストの点を非表示に */
		margin: 0; /* 中央寄せやマージンをリセット */
		/* margin: 0 0 1rem 0; */
		max-width: none !important; /* グローバルな .wrap の max-width: 720px; を上書き解除 */
		padding: 0;
		padding: 0; /* #mailbox のパディングに任せるため、内側のパディングを解除 */
		text-align: center;
		width: 100%;
	}

	#mailbox ul.tab01 a,
	#support_mailbox ul.tab01 a {
		box-sizing: border-box;
		display: block;
		text-decoration: none;
		width: 50%; /* 2つのタブを均等に50%幅にする */
	}

	#mailbox ul.tab01 li.tab_link,
	#support_mailbox ul.tab01 li.tab_link {
		background: #f9f9f9;
		border: 1px solid #e3e3e3;
		border-bottom: 2px solid #e3e3e3;
		border-radius: 6px 6px 0 0;
		cursor: pointer;
		display: inline-block; /* モバイルと同じ行内ブロック */
		font-size: 0.95rem; /* 親のfont-size:0を復元 */
		font-weight: bold;
		/* padding: 10px 0; */ /* 適切なパディングで高さを調整（既存の設定がある場合は調整してください） */
		padding: 0.85em 1em;
		text-align: center;
		width: 60%;
		white-space: nowrap; /* テキストの強制的な折り返しを防止し、一行表示にする */
	}

	#mailbox ul.tab01 li.tab_link.active,
	#support_mailbox ul.tab01 li.tab_link.active {
		background: #fff;
		border-bottom-color: #fff;
	}

	#mailbox .wrap,
	#mailbox .tab01,
	#support_mailbox .wrap,
	#support_mailbox .tab01 {
		/* #mailbox で幅制限とパディングを設定したため、内側は幅100%に広げ、余白を解除 */
		margin: 0; /* 中央寄せやマージンをリセット */
		max-width: none !important; /* グローバルな .wrap の max-width: 720px; を上書き解除 */
		padding: 0; /* #mailbox のパディングに任せるため、内側のパディングを解除 */
		width: 100%;
	}

	/* --- Payment Title (46: 決済TOP タイトルを共通レイアウトに) --- */
	#contents_b .point_top {
		align-items: center;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin: 8% auto 0 !important;
		max-width: var(--container-max);
		padding: 0 1rem;
		position: relative;
	}

	#point_top_title_a_b {
		box-sizing: border-box;
		margin: 8% auto 0 !important;
		max-width: var(--container-max);
		padding: 0 1rem;
	}

	#contents_b .point_top .btn-back {
		left: 0;
		position: absolute;
	}

	#point_top_title_a_b .point_top {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		position: relative;
	}

	#contents_b .point_top .btn-back a {
		border-radius: 5px;
		display: inline-block;
		padding: 8px 12px;
		width: 14px;
	}

	#point_top_title_a_b .point_top .btn-back {
		left: 0;
		position: absolute;
	}

	#point_top_title_a_b .point_top .btn-back a {
		border-radius: 5px;
		display: inline-block;
		padding: 8px 12px;
		width: 14px;
	}

	#contents_b .point_top .point_top_title_a_a {
		flex: 0 0 100%;
		font-size: 1.25rem; /* タブレット見出しと同等 */
		letter-spacing: normal;
		line-height: 1.4;
		margin: 0;
		text-align: center;
		width: 100%;
	}

	#contents_b .point_top .point_top_title_b_a {
		flex: 0 0 100%;
		text-align: center;
		width: 100%;
	}

	#point_top_title_a_b .point_top .point_top_title_a_a {
		flex: 0 0 100%;
		font-size: 1.25rem;
		letter-spacing: normal;
		line-height: 1.4;
		margin: 0;
		text-align: center;
		width: 100%;
	}

	#point_top_title_a_b .point_top .point_top_title_b_a {
		flex: 0 0 100%;
		text-align: center;
		width: 100%;
	}

	/* ----------------------------------------
       1.6. Page-specific (List & Detail)
    ---------------------------------------- */

	/* --- 24/25: ブログ一覧/詳細 --- */
	.blog-area {
		box-sizing: border-box;
		margin-left: auto;
		margin-right: auto;
		padding-left: 0;
		padding-right: 0;
		width: 100%; /* 親要素の幅いっぱい（max-width: 720px）を使用 */
	}

	.blog-area .blog-area_back,
	.blog-area .blog-kiji,
	.blog-area .blogkiji-menu {
		margin-left: auto;
		margin-right: auto;
		padding-left: 0;
		padding-right: 0;
		width: 100%;
	}

	.blog-area .news-container,
	.blog-area .section_0 {
		margin-left: auto;
		margin-right: auto;
		padding-left: 0;
		padding-right: 0;
		width: 100%;
	}

	.blog-area .text_box_a {
		margin-left: auto;
		margin-right: auto;
		max-width: 100%;
		padding-left: 0;
		padding-right: 0;
		width: 100%;
	}

	/* --- 04: My一覧 (お気に入り一覧) --- */
	.favo_list {
		display: block;
		width: 100%;
	}

	.favo_list li.favo_list_item {
		align-items: center;
		display: flex;
		gap: 0.75em;
		padding: 0.6em 0;
	}

	li .favo_img {
		aspect-ratio: 1 / 1;
		border-radius: 50%;
		margin-right: 4%;
		min-width: 15%;
		overflow: hidden;
		width: 15%;
	}

	li .favo_img img {
		display: block;
		height: 100%;
		object-fit: cover;
		width: 100%;
	}

	li .favo_info {
		flex: 1 1 auto;
		width: auto;
	}

	li .favo_name span.name {
		font-size: 80%;
		font-weight: bold;
	}

	li .favo_name span.sensei {
		font-size: 70%;
		font-weight: bold;
	}

	/* --- 01: 会員TOP ランキング badge-rank --- */
	span.badge-rank {
		margin-top: 5px;
		margin-left: -5px;
	}

	/* --- 45: 星座占い詳細 Topブロック --- */
	#main-fortune {
		box-sizing: border-box;
		margin: 0 auto;
		/* 固定ヘッダー直下に配置（HTML内の16%指定を上書き） */
		margin-top: 60px !important;
		max-width: var(--container-max);
		padding: 0 1rem;
	}

	#main-fortune .today-fortune,
	#main-fortune .total_unsei,
	#main-fortune {
		box-sizing: border-box;
		width: 100%;
	}

	#main-fortune .today-fortune img {
		display: block;
		height: auto;
		margin: 0 auto;
		max-width: 100%;
	}

	/* --- Top: 占術セクション（カード行の横並び） --- */
	.main-col ul > a {
		display: block;
	}

	.main-col ul a > li {
		align-items: center;
		display: flex;
		gap: 0.75em;
		margin-left: 0;
		padding: 0.6em 0;
	}

	.main-col ul a > li .img {
		float: none;
		height: 4.2em;
		min-width: 4.2em;
		position: static;
		width: 4.2em;
	}

	.main-col ul a > li .img img {
		border-radius: 50%;
		display: block;
		height: 100%;
		object-fit: cover;
		width: 100%;
	}

	.main-col ul a > li .teller-text-area {
		display: block;
		flex: 1 1 auto;
		margin-left: 0;
		min-width: 0;
		width: auto;
	}

	/* --- 02: 一覧カード表示（画像＋テキスト） --- */
	.main-col_2 ul.wrap > a {
		display: block;
	}

	.main-col_2 ul.wrap a > li {
		display: block;
		padding: 0.6em 0;
	}

	.main-col_2 ul.wrap a > li .img {
		display: inline-block;
		float: none;
		height: auto;
		margin-right: 4%;
		min-width: 0;
		position: static;
		vertical-align: middle;
		width: 15%;
	}

	.main-col_2 ul.wrap a > li .img img {
		border-radius: 50%;
		display: block;
		height: auto;
		object-fit: cover;
		width: 100%;
	}

	.main-col_2 ul.wrap a > li .teller-text-area {
		display: inline-block;
		line-height: 1.3;
		margin-left: 0;
		vertical-align: middle;
		width: 70%;
	}

	.main-col_2 .teller-text-area .divination {
		font-size: 80%;
		line-height: 1.5;
		margin: 0 0 0.5em 0;
	}

	.main-col_2 .teller-text-area .name {
		font-size: 80%;
		font-weight: bold;
	}

	/* --- 12: 受信メール詳細 リスト横並び --- */
	.main-col_b {
		/* margin: 0 auto; */
		max-width: var(--container-max);
		padding: 0 1rem;
	}

	.main-col_b ul > li {
		align-items: center;
		display: flex;
		gap: 1.5em;
		margin-left: 0;
		padding: 0.6em 0;
	}

	.main-col_b ul > li .img {
		float: none;
		height: 4.2em;
		min-width: 4.2em;
		position: static;
		width: 4.2em;
	}

	.main-col_b ul > li .img img {
		border-radius: 50%;
		display: block;
		height: 100%;
		object-fit: cover;
		width: 100%;
	}

	.main-col_b ul > li .teller-text-area {
		display: block;
		flex: 1 1 auto;
		line-height: 1.3;
		margin-left: 0;
		min-width: 0;
		width: auto;
	}

	/* teller-text-area_b の横幅を広げる */
	.main-col_b ul > li .teller-text-area_b {
		box-sizing: border-box;
		display: block;
		width: 100%;
	}

	/* --- 09: 占い師詳細（鑑定依頼）タイトル・プロフィール --- */
	body#main-body #title_a_b_c {
		margin: 5% auto;
		max-width: var(--container-max);
		padding: 0 1rem;
	}

	.top_prof {
		padding: 6% 1.5%;
		position: relative;
		text-align: center;
	}

	.top_prof .btn-back a {
		border-radius: 5px;
		display: inline-block;
		padding: 8px 12px;
		width: 14px;
	}

	.top_prof .prof_icon {
		position: absolute;
		right: 0;
		top: 6%;
		width: 24%;
	}

	.top_prof .prof_icon .icon_text {
		font-size: 0.85rem;
	}

	.top_prof .teller_prof img {
		height: auto;
		max-width: 260px; /* 目安 */
		width: 45%;
	}

	/* ----------------------------------------
       1.7. Page-specific (Payment & Forms)
    ---------------------------------------- */

	/* --- 決済関連 --- */
	#contents .amex_card_img img {
		display: block;
		height: auto;
		margin: 0 auto;
		width: 70%;
	}

	#contents ul.amex_card_img li {
		margin: 0 1%;
	}

	#contents ul.amex_card_img li:first-child {
		margin-left: 0;
	}

	#contents ul.amex_card_img li:last-child {
		margin-right: 0;
	}

	#contents .bank_a {
		box-sizing: border-box;
		margin: 0 auto;
		max-width: var(--container-max);
		padding: 0 1rem;
	}

	#contents .bank_a table {
		margin: 0 auto;
		max-width: 800px;
		width: 80%;
	}

	#contents .pay_logo_img {
		padding: 3% 0 0 0;
		text-align: center;
	}

	#contents .pay_logo_img img {
		display: block;
		height: auto;
		margin: 0 auto;
		width: 70% !important; /* インライン属性のwidth="60%"を上書き */
	}

	#contents .pay_point {
		box-sizing: border-box;
		margin: 0 auto;
		max-width: var(--container-max);
		padding: 0 1rem;
	}

	#contents .pay_point table {
		margin: 0 auto;
		max-width: 800px;
		width: 80%;
	}

	#contents .rakuten_pay_card img {
		display: block;
		height: auto;
		margin: 0 auto;
		width: 70%;
	}

	/* --- 決済TOP ボタンを3列化 --- */
	#contents_b ul.point_btn_a {
		display: flex;
		flex-wrap: wrap;
		list-style: none;
		margin: 0 auto;
		padding: 0;
	}

	#contents_b ul.point_btn_a .point_btn_item {
		box-sizing: border-box;
		float: none; /* 既存floatを無効化 */
		padding: 0 1% 2% 1%;
		width: 33.333%;
	}

	#contents_b ul.point_btn_a .point_btn_item a,
	#contents_b ul.point_btn_a .point_btn_item img {
		display: block;
		height: auto;
		width: 100%;
	}

	.point_btn_repeat {
		box-sizing: border-box;
		padding: 0% 1% 3% 1%;
	}

	/* --- Pマーク --- */
	#contents .section_title_i {
		text-align: center;
	}

	#contents .section_title_i a {
		display: inline-block;
	}

	#contents .section_title_i img {
		height: auto;
		max-width: 220px;
		min-width: 120px;
		width: 22vw; /* 会員TOPと同一指示 */
	}

	#contents_c .section_1 {
		text-align: center;
	}

	#contents_c .section_1 img {
		display: inline-block;
		height: auto;
		max-width: 220px;
		min-width: 120px;
		width: 22vw;
	}

	/* --- コンビニ決済関連 --- */
	#contents .cvs_section_2 {
		padding: 0 20%;
	}

	#contents .section_1 .text_red + ul.CVS_item_9 {
		margin-top: 1.5rem;
	}

	#contents ul.CVS_item_9 li.CVS_thumb {
		margin-right: 3%;
		width: 12%;
	}

	#contents ul.CVS_item_9 li.CVS_thumb img {
		height: auto;
		max-width: 120px;
		width: 100%;
	}

	/* --- ドメイン指定受信設定 --- */
	li.domain_text_c img,
	li.domain_text_d img {
		width: 55%;
	}

	/* --- Gmailの迷惑メールフォルダ（domain_text_b内の画像） --- */
	#contents ul li.domain_text_c img,
	#contents ul li.domain_text_b img {
		display: block;
		height: auto;
		margin: 0 auto;
		width: 70% !important;
	}

	/* --- 画像サイズ調整 --- */
	#container .cmnt-bloc.bk.bk07 p.bk img,
	#container .cmnt-bloc.bk.bk08 p.bk img,
	#container .cmnt-bloc.bk.bk09 p.bk img {
		display: block;
		height: auto;
		margin: 0 auto;
		max-width: 560px;
		width: 85%;
	}

	.section_1 .details_a img.w90p {
		display: block;
		height: auto;
		margin: 0 auto;
		width: 70%;
	}

	/* --- 鑑定方法 --- */
	#contents_h {
		border-bottom: none;
		border-top: none;
		box-sizing: border-box;
		padding: 0 1rem;
	}

	#contents_h li.how_to_text_a_c {
		width: 80%;
	}

	#contents_h li.how_to_text_c {
		width: 70%;
	}

	/* --- container内のinnerにpadding-top --- */
	#container .inner {
		padding: 100px;
	}

	/* --- prof-bloc（鑑定師ランキング）のレスポンシブ対応 --- */
	#container .ex-list-bloc,
	#container .prof-bloc {
		box-sizing: border-box;
		margin: 0 auto;
		max-width: var(--container-max);
		padding: 0 1rem 2rem;
		width: 100%;
	}

	#container .prof-box {
		box-sizing: border-box;
		padding: 30px 0 50px;
		width: 100%;
	}

	#container .prof-box .deta {
		align-items: flex-start;
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;
	}

	#container .prof-box .inthum {
		flex: 0 0 auto;
		padding-right: 0;
		width: 30%;
	}

	#container .prof-box .inthum img {
		display: block;
		height: auto;
		margin: 0 auto;
		max-width: 560px;
		width: 100%;
	}

	#container .prof-box .intxt {
		flex: 1 1 55%;
		font-size: 0.95rem;
		line-height: 1.7;
		min-width: 0;
		width: 55%;
	}

	#container .prof-box .intxt span.bld {
		display: block;
		font-size: 1.1rem;
		margin-bottom: 0.5rem;
		padding-bottom: 0.8em;
	}

	#container .prof-btn {
		margin-top: 1.5rem;
	}

	#container .prof-btn a {
		display: block;
		width: 100%;
	}

	#container .prof-btn a p {
		font-size: 0.95rem;
		line-height: 1.6;
		padding: 15px 25px 15px 15px;
	}

	/* --- form-bloc（相談文作成フォーム）のレスポンシブ対応 --- */
	#container .form-bloc {
		box-sizing: border-box;
		margin: 0 auto;
		max-width: var(--container-max);
		padding: 0 1rem;
		width: 100%;
	}

	#container .form-body {
		box-sizing: border-box;
		margin-top: 1.5rem;
		width: 100%;
	}

	#container .form-body textarea {
		box-sizing: border-box;
		width: 100%;
	}

	#container .submit-btn {
		margin-top: 1.5rem;
	}

	#container .submit-btn p {
		position: relative;
		width: 100%;
	}

	#container .submit-btn input[type="submit"] {
		box-sizing: border-box;
		display: block;
		margin: 0 auto;
		max-width: 400px;
		min-width: auto;
		width: 100%;
	}

	/* --- Swiper (32: ペイジェント / 61/106: セキュリティーマネー/ドメイン指定) --- */
	#contents_f ~ .swiper-container,
	#contents_c ~ .swiper-container {
		box-sizing: border-box;
		margin: 1.5rem auto;
		max-width: var(--container-max);
		overflow: hidden; /* 次スライドの見切れ防止 */
		/* padding: 0 1rem; */
		padding-bottom: 32px;
		position: relative;
	}

	#contents_f ~ .swiper-container .swiper-button-next,
	#contents_f ~ .swiper-container .swiper-button-prev,
	#contents_c ~ .swiper-container .swiper-button-next,
	#contents_c ~ .swiper-container .swiper-button-prev {
		cursor: pointer;
		height: 40px;
		margin-top: 0;
		position: absolute;
		top: 35%; /* 画像エリアの中央付近に配置 */
		transform: translateY(-50%);
		width: 40px;
		z-index: 999;
	}

	#contents_f ~ .swiper-container .swiper-pagination {
		left: 0;
		margin: 0 auto;
		position: absolute;
		right: 0;
		text-align: center;
		top: 49%;
	}

	#contents_c ~ .swiper-container .swiper-pagination {
		left: 0;
		margin: 0 auto;
		position: absolute;
		right: 0;
		text-align: center;
		top: 78%;
	}

	#contents_f ~ .swiper-container .swiper-slide,
	#contents_c ~ .swiper-container .swiper-slide {
		box-sizing: border-box;
		margin: 0 !important; /* 余分なマージンを削除 */
		padding: 0.5rem 0 1.25rem;
		width: 100% !important; /* 1枚表示を強制 */
	}

	#contents_f ~ .swiper-container .swiper-slide-content_a,
	#contents_c ~ .swiper-container .swiper-slide-content_a {
		margin-bottom: 0.5rem;
		text-align: center;
	}

	#contents_f ~ .swiper-container .swiper-slide-content_a .text_purple_a,
	#contents_c ~ .swiper-container .swiper-slide-content_a .text_purple_a {
		font-size: 0.95rem;
		font-weight: bold;
	}

	#contents_f ~ .swiper-container .swiper-slide-content_b img,
	#contents_c ~ .swiper-container .swiper-slide-content_b img {
		display: block;
		height: auto;
		margin: 0 auto;
		max-width: 560px;
		width: 85%;
	}

	#contents_f ~ .swiper-container .swiper-slide-content_c,
	#contents_c ~ .swiper-container .swiper-slide-content_c {
		box-sizing: border-box; /* paddingを含めた幅計算 */
		font-size: 0.95rem;
		line-height: 1.6;
		/* margin: 1.75rem; */
		margin-top: 2rem;
		max-width: 100%;
		overflow-wrap: anywhere;
		/* padding: 0 0.5rem; */
		width: 100%;
		word-break: break-word;
	}

	#contents_f ~ .swiper-container .swiper-wrapper,
	#contents_c ~ .swiper-container .swiper-wrapper {
		box-sizing: border-box;
		width: 100%;
	}

	/* --- チケット関連 (37/38) --- */
	#contents_d,
	#contents_d_guide {
		box-sizing: border-box;
		margin: 0 auto;
		max-width: var(--container-max);
		/* padding: 0 1rem; */
	}

	#contents_d table,
	#contents_d .section_1,
	#contents_d .section1_head {
		box-sizing: border-box;
		width: 100%;
	}

	#contents_d .point_box {
		display: flex;
		flex-wrap: nowrap;
	}

	#contents_d .point_box > .point_box_left,
	#contents_d .point_box > .point_syousai {
		box-sizing: border-box;
		flex: 0 0 50% !important;
		max-width: 50% !important;
	}

	#contents_d .point_syousai {
		border-top: none; /* 枠線解除 */
		font-size: 0.875rem; /* 指定フォントサイズ */
		margin-top: 0; /* 余白解除 */
		text-align: left;
	}

	#title_a_b + .container .fortune-teller {
		overflow: hidden;
	}

	#title_a_b + .container .fortune-teller,
	#title_a_b + .container .js-accordion-content,
	#title_a_b + .container .ticket-card {
		width: 100%;
	}

	#title_a_b + .container .ticket-expiry {
		text-align: left;
	}

	.container .fortune-teller,
	.container .fortune-teller-list,
	.container .js-accordion-content,
	.container .ticket-card,
	.container .ticket-count,
	.container .ticket-expiry,
	.container .ticket-info {
		box-sizing: border-box;
		max-width: 100%;
	}

	.container .fortune-teller-list,
	.container .genre,
	.container .ticket-count,
	.container .ticket-expiry {
		overflow-wrap: anywhere;
		word-break: break-all;
		word-break: break-word; /* 互換性のため残す */
	}

	.container .ticket-info {
		min-width: 0;
	}

	/* ----------------------------------------
       1.8. Page: HowTo / Description (共通)
    ---------------------------------------- */

	/* --- Wrapper & Border --- */
	#description,
	#description_2 {
		border-top: none;
		box-sizing: border-box;
		margin: 0 auto;
		max-width: var(--container-max);
		padding: 0 1rem;
		position: relative;
		width: 100%;
	}

	#description,
	#description_2,
	#description_3 {
		margin: 0;
		max-width: none;
		padding-left: calc((100% - var(--container-max)) / 2);
		padding-right: calc((100% - var(--container-max)) / 2);
	}

	#description::before,
	#description_2::before {
		border-top: 1px solid #e3e3e3;
		content: "";
		display: block;
		margin: 0 auto;
		width: 100%; /* 内側コンテンツ幅（パディングを除いた幅） */
	}

	/* --- General Text/Padding --- */
	#description .accordion_contents,
	#description_2 .accordion_contents {
		padding: 0 1rem 2.4rem;
	}

	#description .accordion_contents_3,
	#description_2 .accordion_contents_3 {
		padding: 0 1rem 2.4rem;
	}

	#description p,
	#description_2 p {
		padding: 0;
	}

	#description .accordion_text_howto,
	#description .accordion_text_howto_100p,
	#description .accordion_text_howto_2,
	#description .accordion_text_howto_2_100p {
		padding-left: 0;
		padding-right: 0;
	}

	/* --- 81: #SITE_NAME#とは の comment 内アコーディオン --- */
	#description .comment {
		background-color: #f5f5f5;
		box-sizing: border-box;
		/* padding: 0 1rem; */
		margin: 0 auto;
		margin: 1rem 0;
		max-width: var(--container-max);
		width: 100%;
	}

	#description .comment .accordion {
		box-sizing: border-box;
		max-width: 100%;
		width: 100%;
	}

	#description .comment .accordion_title {
		align-items: center;
		display: flex;
		min-height: 52px;
		padding: 0.8rem 0;
	}

	#description .comment .accordion_title p {
		font-size: 0.95rem;
		line-height: 1.4;
		margin: 0;
		overflow: hidden;
		padding: 0 4%;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 100%;
	}

	#description .comment .accordion_contents {
		box-sizing: border-box;
		max-width: 100%;
		/* padding: 0.75rem 0 1.5rem; */
		width: 100%;
	}

	#description .comment .accordion_img_area img {
		display: block;
		height: auto;
		margin: 0 auto;
		max-width: 560px;
		width: 85%;
	}

	#description p.how_to_text {
		padding: 0;
	}

	#description ul.how_to_container {
		padding: 0;
	}

	/* --- 81: #SITE_NAME#とは の section_1 内 text_box に左右パディング --- */
	#description .section_1 .text_box {
		padding-left: 4%;
		padding-right: 4%;
	}

	/* --- Accordion Title/Text --- */
	#description .how_to .accordion_title_3,
	#description .smartpit .accordion_title_2,
	#description .smartpit .accordion_title_3 {
		align-items: center;
		display: flex;
		min-height: 52px;
		padding: 0.8rem 0;
	}

	#description .how_to .accordion_title_3 p,
	#description .smartpit .accordion_title_2 p,
	#description .smartpit .accordion_title_3 p {
		font-size: 0.95rem;
		line-height: 1.4;
		margin: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 100%;
	}

	#description .how_to .accordion_contents_3,
	#description .smartpit .accordion_contents_3 {
		padding-bottom: 1.5rem;
		padding-top: 0.75rem;
	}

	/* --- Width & Text Wrap --- */
	#description > *,
	#description .how_to,
	#description .smartpit,
	#description .accordion,
	#description .accordion_contents,
	#description .accordion_contents_2,
	#description .accordion_contents_3 {
		box-sizing: border-box;
		max-width: 100%;
		width: 100%;
	}

	#description .accordion_title_2 p,
	#description .accordion_title_3 p {
		min-width: 0;
	}

	#description .accordion_text_a_c_100p,
	#description .accordion_text_howto_100p,
	#description .accordion_text_howto_2,
	#description .accordion_text_howto_2_100p,
	#description .text_box_2 {
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	#description .how_to .accordion_text_a_c_100p,
	#description .how_to .accordion_text_howto_100p,
	#description .smartpit .accordion_text_a_c_100p,
	#description .smartpit .accordion_text_howto_100p {
		font-size: 0.95rem;
		line-height: 1.7;
	}

	#description .how_to li.accordion_text_a_a img,
	#description .how_to li.accordion_text_a_b img,
	#description .how_to li.accordion_text_a_c img,
	#description .smartpit li.accordion_text_a_a img,
	#description .smartpit li.accordion_text_a_b img,
	#description .smartpit li.accordion_text_a_c img {
		display: block;
		height: auto;
		margin: 0 auto;
		max-width: 560px;
		width: 85%;
	}

	/* ----------------------------------------
       1.9. Typography (PC base adjustment - within 768px+)
    ---------------------------------------- */
	/* PCではベースと見出しをさらに少し拡大（Tablet設定から上書き） */
	body#main-body {
		font-size: 17px; /* rem基準を拡大 */
	}

	body#main-body #title_a_b h2.title_a_b,
	body#main-body #title_a_c h2.title_a_c,
	.blog-area h2.blog-tittle {
		font-size: 1.35rem; /* ≒23px */
	}

	form label.form_annai {
		font-size: 1.1rem;
	}

	#mailbox ul.wrap li .date,
	#mailbox ul.wrap li .name,
	#mailbox ul.wrap li .subject,
	#support_mailbox ul.wrap li .date,
	#support_mailbox ul.wrap li .name,
	#support_mailbox ul.wrap li .subject,
	.blog-area dl dd {
		font-size: 1rem; /* メタも少し拡大 */
	}

	.main-col_2 .teller-text-area .name,
	.news-container h3 {
		font-size: 1.1rem;
	}

	/* 説明ページ89専用: メール配信について - 画像サイズ */
	img.career_logo_domain {
		display: block;
		width: 70%;
		height: auto;
		margin: 0 auto;
	}
}

/* =====================================================
   2. Desktop (>=1024px)
===================================================== */
@media screen and (min-width: 1024px) {
	/* ----------------------------------------
       2.1. Base & Layout Container
    ---------------------------------------- */
	:root {
		--container-max: 960px;
	}

	.wrap {
		margin: 0 auto;
		max-width: 960px;
		/* padding: 0 1rem; */
	}

	header {
		padding-left: calc((100% - var(--container-max)) / 2);
		padding-right: calc((100% - var(--container-max)) / 2);
	}

	/* ----------------------------------------
       2.2. Global Layout & Footer
    ---------------------------------------- */
	/* --- Sticky Footer (全体をflex-column) --- */
	body#main,
	body#main-body {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}

	#contents,
	#main {
		flex: 1 0 auto;
	}

	footer,
	#footer {
		margin-top: auto;
		width: 100%;
	}

	/* --- Footer Banner --- */
	footer .footer-banner a {
		display: inline-block;
	}

	footer .footer-banner img.img_b {
		height: auto;
		max-width: 220px;
		min-width: 120px;
		width: 22vw;
	}

	/* --- Images --- */
	#contents img.w100p {
		max-width: 640px;
		width: 72%;
	}

	/* --- Layout Components (Form / Profile) --- */
	/* 340/341: cmnt-bloc bk bk08/bk09内の画像サイズ調整（PC版） */
	#container .cmnt-bloc.bk.bk07 p.bk img,
	#container .cmnt-bloc.bk.bk08 p.bk img,
	#container .cmnt-bloc.bk.bk09 p.bk img {
		max-width: 640px;
		width: 72%;
	}

	/* 359: form-bloc（相談文作成フォーム）PC版調整 */
	#container .form-body textarea {
		font-size: 1.0625rem;
		line-height: 1.7;
	}

	#container .submit-btn input[type="submit"] {
		font-size: 1.0625rem;
		max-width: 450px;
		padding: 1rem 2rem;
	}

	/* 336: prof-bloc（鑑定師ランキング）PC版調整 */
	#container .prof-box .inthum img {
		max-width: 640px;
	}

	#container .prof-box .intxt {
		font-size: 0.9rem;
	}

	#container .prof-box .intxt span.bld {
		font-size: 1.05rem;
	}

	#container .prof-btn a p {
		font-size: 0.9rem;
	}

	/* --- Swiper (Paygent / Security Money / Domain) --- */
	#contents_f ~ .swiper-container .swiper-button-next,
	#contents_f ~ .swiper-container .swiper-button-prev,
	#contents_c ~ .swiper-container .swiper-button-next,
	#contents_c ~ .swiper-container .swiper-button-prev {
		cursor: pointer;
		height: 40px;
		position: absolute;
		top: 38%; /* PC版：画像エリアの中央付近に配置 */
		width: 40px;
		z-index: 999;
	}

	#contents_f ~ .swiper-container .swiper-pagination {
		top: 64%;
	}

	#contents_c ~ .swiper-container .swiper-pagination {
		top: 78%;
	}

	#contents_f ~ .swiper-container .swiper-slide-content_b img,
	#contents_c ~ .swiper-container .swiper-slide-content_b img {
		max-width: 640px;
		width: 72%;
	}

	#contents_f ~ .swiper-container .swiper-slide-content_c,
	#contents_c ~ .swiper-container .swiper-slide-content_c {
		font-size: 0.9rem;
	}

	/* ----------------------------------------
       2.3. Page Title & Container
    ---------------------------------------- */
	/* --- Common Containers --- */
	body#main-body #contents,
	body#main-body #contents_02,
	body#main-body #contents_c,
	body#main-body #container,
	body#main-body #footer,
	body#main-body #title_a_b,
	body#main-body #title_a_c {
		margin: 0 auto;
		max-width: var(--container-max);
		/* padding: 0 1rem; */
	}

	/* --- title_a_b / title_a_c --- */
	body#main-body #title_a_b {
		margin: 8% auto 0;
		max-width: var(--container-max);
		padding: 0 1rem;
	}

	body#main-body #title_a_c {
		margin: 8% auto 0;
		max-width: var(--container-max);
		padding: 0 1rem;
	}

	body#main-body #title_a_b .top,
	body#main-body #title_a_c .top {
		position: relative;
	}

	body#main-body #title_a_b h2.title_a_b {
		text-align: center;
	}

	body#main-body #title_a_c h2.title_a_c {
		letter-spacing: normal;
		text-align: center;
	}

	body#main-body #title_a_b .btn-back,
	body#main-body #title_a_c .btn-back {
		left: 0;
	}

	body#main-body #title_a_b .btn-back a,
	body#main-body #title_a_c .btn-back a,
	.top .btn-back a {
		border-radius: 5px;
		display: inline-block;
		padding: 8px 12px;
		width: 14px;
	}

	/* --- title_a_b_c (09: 占い師詳細 Pマーク) --- */
	#title_a_b_c {
		margin: 2% auto 0;
	}

	#title_a_b_c .section_title_i a {
		display: inline-block;
	}

	#title_a_b_c .section_title_i img {
		height: auto;
		max-width: 220px; /* 上限 */
		min-width: 120px; /* 下限 */
		width: 22vw; /* タブレット/PCの可変幅（会員TOPと同じ） */
	}

	/* --- Blog Area --- */
	.blog-area {
		max-width: 100%;
		width: 100%;
	}

	/* ----------------------------------------
       2.4. Top / List Card Layout
    ---------------------------------------- */
	/* --- Banner --- */
	#banner {
		margin: 0 auto 10px;
		overflow: hidden;
		width: 370px;
	}

	#banner ul li {
		float: left;
		width: 370px;
	}

	/* --- Top: 占術セクション --- */
	.main-col ul > a {
		display: block;
	}

	.main-col ul a > li {
		align-items: center;
		display: flex;
		gap: 0.75em;
		margin-left: 0;
		padding: 0.6em 0;
	}

	.main-col ul a > li .img {
		float: none;
		height: 4.2em;
		min-width: 4.2em;
		position: static;
		width: 4.2em;
	}

	.main-col ul a > li .img img {
		border-radius: 50%;
		display: block;
		height: 100%;
		object-fit: cover;
		width: 100%;
	}

	.main-col ul a > li .teller-text-area {
		display: block;
		flex: 1 1 auto;
		margin-left: 0;
		min-width: 0;
		width: auto;
	}

	/* --- 02: 一覧カード表示 --- */
	.main-col_2 ul.wrap > a {
		display: block;
	}

	.main-col_2 ul.wrap a > li {
		align-items: center;
		display: flex;
		gap: 0.75em;
		padding: 0.6em 0;
	}

	.main-col_2 ul.wrap a > li .img {
		height: auto;
		min-width: 0;
		width: 15%;
	}

	.main-col_2 ul.wrap a > li .img img {
		height: auto;
		width: 100%;
	}

	.main-col_2 ul.wrap a > li .teller-text-area {
		display: block;
		flex: 1 1 auto;
		margin-left: 0;
		min-width: 0;
		width: auto;
	}

	/* ----------------------------------------
       2.5. Detail Page (09: 占い師詳細)
    ---------------------------------------- */
	/* --- Profile --- */
	.top_prof .prof_icon {
		width: 20%;
	}

	.top_prof .prof_icon .icon_text {
		font-size: 0.9rem;
	}

	.top_prof .teller_prof img {
		max-width: 320px;
	}

	/* --- Buttons --- */
	.result_btn_2 a button,
	.result_btn_2 .Advice_btn,
	.result_btn_2 .Back_btn_2 {
		line-height: 1.2; /* 行間で高さを補助 */
		min-height: 60px; /* 高さの下限 */
		padding: 1.1em 2.4em; /* 縦パディング増量 */
	}

	.title_link_btn_2 .btn {
		min-width: 260px;
		padding: 1.1em 2em;
	}

	/* ----------------------------------------
       2.6. HowTo Desktop (画像・文字サイズの調整)
    ---------------------------------------- */
	/* --- Text Size --- */
	#description .how_to .accordion_title_3 p,
	#description .smartpit .accordion_title_2 p,
	#description .smartpit .accordion_title_3 p,
	#description .how_to .accordion_text_a_c_100p,
	#description .how_to .accordion_text_howto_100p,
	#description .smartpit .accordion_text_a_c_100p,
	#description .smartpit .accordion_text_howto_100p {
		font-size: 0.9rem;
	}

	/* --- Image Size --- */
	/* 81: #SITE_NAME#とは の comment 内画像（PC版） */
	#description .comment .accordion_img_area img {
		max-width: 640px;
		width: 72%;
	}

	#description .how_to li.accordion_text_a_a img,
	#description .how_to li.accordion_text_a_b img,
	#description .how_to li.accordion_text_a_c img,
	#description .smartpit li.accordion_text_a_a img,
	#description .smartpit li.accordion_text_a_b img,
	#description .smartpit li.accordion_text_a_c img {
		max-width: 640px;
		width: 72%;
	}

	/* 説明ページ89専用: メール配信について - 画像サイズ（PC） */
	img.career_logo_domain {
		display: block;
		width: 70%;
		height: auto;
		margin: 0 auto;
	}
}