@charset "utf-8";

* {
margin:0;
padding:0;
outline:0;
vertical-align:baseline;
	box-sizing: border-box;
	user-select: none;
}

h1, h2, h3, h4, h5, h6, p {
	margin: 0;
}

address, em, cite, dfn, var {
font-style: normal;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}

p {
	text-align: justify;
	margin-top: 0;
}

ul {
	list-style:none;
	padding:0;
}
li {
	padding:0;
}

input[type="submit"] {
-webkit-appearance: none;
border-radius: 0;
}

table {
border-collapse: collapse;
}

table th{
vertical-align:top;
}

select {
vertical-align:middle;
	-webkit-appearance: none;
	appearance: none;
}


a{
	text-decoration:none;
}

a {
-webkit-tap-highlight-color:transparent;
}

a:hover{
	color: #999;
}

.clearfix:after {
	content: ".";
	display: block;
	height: 0.1px;
	font-size: 0.1em;
	line-height: 0; 
	clear: both;
	visibility: hidden; 
	overflow: hidden;
}

a img {
border-style:none;
}

a:hover img:hover{
opacity: 0.6;
-webkit-opacity: 0.6;
-moz-opacity: 0.6;
}

a img{
-webkit-transition: opacity 0.3s ease-out;
-moz-transition: opacity 0.3s ease-out;
-ms-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out;
}

.ui-widget-overlay {
opacity: .3;
filter: Alpha(Opacity=.3);
}

.text-danger {
color: #dc3545;
}

#point_list th,
#point_list td {
width: auto;
font-size: 75%;
}

html,body {
	-webkit-text-size-adjust: 100%; 
} 

body {
margin:0;
	width:100%; 
	color: #2d3748;
	font-family: "Noto Sans JP", sans-serif;
	font-size: clamp(14px, 3.5vw, 18px); 
	line-height: 1.65;
	background:#fff;
}

#wrapper {
	overflow:hidden;
	margin-top: 50px;
}

input,textarea,select,button{
	font-family: "Noto Sans JP", sans-serif;
}

img{
	height: auto;
	max-width: 100%;
	vertical-align: bottom;
}

.clearfix:after {
	content: ".";
	display: block;
	height: 0.1px;
	font-size: 0.1em;
	line-height: 0; 
	clear: both;
	visibility: hidden; 
}

.center {
	text-align:center;
	margin:0 auto;
}

.right {
	text-align:right;
}

.b{
	font-weight:bold;
}

.green,
.fa-check-circle{
	color:#10b981;
}
 
.area{
	position: relative;
}

.bga01{
	background: #f2f6fa;
}

.bga02{
background: linear-gradient(135deg, #2D3748 0%, #1A202C 100%);
	color: #fff;
}

.container{
	margin: 0 auto;
	padding: 3% 3%;
	width: 100%;
	max-width: 1200px;
}


/* header */
header{
	width: 100%;
	height: 50px;
	background: #1a202c;
	position: fixed;
	top:0;
	left: 0;
	z-index: 5;
}

/* scope */
.wbm4-bar{background:#1a202c;color:#fff;width:100%;position:relative;z-index:30;position: fixed}
.wbm4-wrap{
max-width:1200px;margin:0 auto;padding:10px 3px 10px 6px;
display:flex;align-items:center;justify-content:space-between;gap:clamp(8px,2vw,18px);
white-space:nowrap;overflow:hidden; /* はみ出し防止 */
}

/* 左：ロゴ */
.wbm4-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;flex:0 0 auto}
.wbm4-logo{width:clamp(40px,3.2vw,50px);object-fit:contain;display:block}

.kid {
    display: inline-flex;
    align-items: center;
    font-weight: 800;
    font-size: clamp(10px, 1.9vw, 18px);
    line-height: 1;
    color: #fff;
}

/* 中央：バッジ2つ（常に横並び） */
.wbm4-center{
display:flex;align-items:right;gap:clamp(8px,2vw,16px);
flex:1 1 auto;justify-content:right;min-width:0;flex-wrap:nowrap;
}
.wbm4-badge{
display:inline-flex;align-items:center;gap:clamp(6px,1.2vw,10px);
padding:clamp(6px,1.2vw,10px) clamp(4px,2vw,18px);
border-radius:0.3em;
font-weight:800;font-size:clamp(12px,1.9vw,18px);line-height:1;
color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
.wbm4-ic{width:clamp(12px,1.8vw,18px);height:clamp(12px,1.8vw,18px);display:block;flex:0 0 auto}

/* 色 */
.wbm4-badge--gold{background:linear-gradient(90deg,#fabc21 0%,#dd7c06 100%)}
.wbm4-badge--pink{background:#ef4444;animation: pulsePink 2s ease-in-out infinite;}
@keyframes pulsePink {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
/* 右：アイコン */
.wbm4-right{display:flex;align-items:center;gap:2px;flex:0 0 auto}
.wbm4-ib{
width:clamp(26px,3.2vw,34px);height:clamp(26px,3.2vw,34px);
display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:#fff;cursor:pointer
}
.wbm4-ib svg{width:clamp(18px,2.4vw,22px);height:clamp(18px,2.4vw,22px);display:block}
.wbm4-ib:focus{outline:2px solid rgba(255,255,255,.35);outline-offset:2px;border-radius:6px}

@media (max-width:360px){
.wbm4-wrap{padding:8px 4px}
.wbm4-center{gap:2px}
.wbm4-badge{padding:5px 5px;}
}

.wbm4-badge-dot{
position:absolute; top:-6px; right:-4px;
display:grid; place-items:center;
width:clamp(16px,2.6vw,20px); height:clamp(16px,2.6vw,20px);
border-radius:50%;
background:#ef4444; color:#fff;
font:700 clamp(10px,1.6vw,12px)/1 system-ui;
box-shadow:0 0 0 2px #171e27;
}

.wbm4-badge-dot2{
position:absolute; top:2px; left:20px;
display:grid; place-items:center;
width:clamp(16px,2.6vw,20px); height:clamp(16px,2.6vw,20px);
border-radius:50%;
background:#ef4444; color:#fff;
font:700 clamp(10px,1.6vw,12px)/1 system-ui;
box-shadow:0 0 0 2px #171e27;
}


/* --- scope --- */
.wbm4-drawer{position:fixed;inset:0;z-index:100;pointer-events:none}
.wbm4-drawer__overlay{position:absolute;inset:0;background:rgba(2,6,23,.55);opacity:0;transition:opacity .25s;pointer-events:none;border:0}
.wbm4-drawer__panel{
position:absolute;top:0;right:0;height:100%;width:min(92vw,340px);
background:#0f172a;color:#e2e8f0;border-left:1px solid #1f2937;
transform:translateX(100%);transition:transform .28s ease;display:flex;flex-direction:column
}
.wbm4-drawer.is-open{pointer-events:auto}
.wbm4-drawer.is-open .wbm4-drawer__overlay{opacity:1;pointer-events:auto}
.wbm4-drawer.is-open .wbm4-drawer__panel{transform:none}

/* header */
.wbm4-dh{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px;border-bottom:1px solid #1f2937}
.wbm4-dh__title{font:800 16px/1 system-ui, -apple-system, Segoe UI, Roboto;color:#fff;letter-spacing:.02em}
.wbm4-dh__close{width:32px;height:32px;border:0;background:transparent;color:#e5e7eb;cursor:pointer}
.wbm4-dh__close:focus{outline:2px solid rgba(255,255,255,.35);outline-offset:2px;border-radius:6px}

/* nav */
.wbm4-nav{padding:10px 10px 18px;overflow:auto}
.wbm4-nav__item{
display:flex;align-items:center;gap:10px;
padding:12px 12px;border-radius:10px;text-decoration:none;color:#e5e7eb;
font:600 14px/1.1 system-ui
}
.wbm4-nav__item:hover{background:#10b981;color: #fff;}
.wbm4-ic{width:18px;height:18px;display:inline-block;flex:0 0 18px;color:currentColor}

/* 区切り/余白 */
.wbm4-sep{height:1px;background:#1f2937;margin:10px 4px}

/* bodyスクロールロック */
body.wbm4-noscroll{overflow:hidden}



.title-area01{
	background: #058d64;
	padding: 30px 15px;
	border-radius: 0.8em;
	display: flex;
	gap: 10px;
	align-items: center;
}

.title-area02{
	background: #225be4;
	padding: 30px 15px;
	border-radius: 0.8em;
	display: flex;
	gap: 10px;
	align-items: center;
}

.title-area03{
	background: #1a202c;
	padding: 30px 15px;
	border-radius: 0.8em;
	display: flex;
	gap: 10px;
	align-items: center;
}

.title-area04{
	background: linear-gradient(90deg, #fabc21 0%, #dd7c06 100%);
	padding: 30px 15px;
	border-radius: 0.8em;
	display: flex;
	gap: 10px;
	align-items: center;
}

.title-area05{
	background: #fac21f;
	color: #111827;
	padding: 14px 15px;
	border-radius: 0.8em;
	display: flex;
	gap: 10px;
	align-items: center;
	margin: 15px 0;
}

.title-area06{
	background: #ef4444;
	padding: 30px 15px;
	border-radius: 0.8em;
	display: flex;
	gap: 10px;
	align-items: center;
}

.title-icon{
	width: 62px;
}

.title{
	font-size: clamp(20px, 3.5vw, 30px); 
	line-height: 1.0;
	font-weight: 600;
	color: #fff;
}

.title span{
	font-size: clamp(12px, 3.5vw, 16px); 
	line-height: 1.3;
	font-weight: normal;	
}

.title2{
	font-size: clamp(20px, 3.5vw, 30px); 
	line-height: 1.0;
	font-weight: 600;
	color: #111827;
}

.title2 span{
	font-size: clamp(12px, 3.5vw, 16px); 
	line-height: 1.3;
	color: #783514;
	font-weight: normal;	
}


.contact-info ul{
	display: flex;
	gap: 10px;
	width: 100%;
	margin: 0px 0 20px;
}

.contact-info li{
	width: calc(100% / 3);
	text-align: center;
	background: #fff;
	border-radius: 0.7em;
	border:1px solid #e5e7eb;
	padding: 2% 1%;
	font-size: clamp(12px, 3.5vw, 16px); 
	font-weight: 600;
}

.contact-info span{
	font-weight: normal;
	font-size: clamp(10px, 3.4vw, 14px); 
}

.contact-icon01{
	background: #dbeafe;
	text-align: center;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	margin: 0 auto;
	position: relative;
	margin-bottom: 10px;
}

.contact-icon02{
	background: #d1fae5;
	text-align: center;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	margin: 0 auto;
	position: relative;
	margin-bottom: 10px;
}

.contact-icon03{
	background: #f3e8ff;
	text-align: center;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	margin: 0 auto;
	position: relative;
	margin-bottom: 10px;
}


.contact-icon01 img,.contact-icon02 img,.contact-icon03 img{
	position: absolute;
	 top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}


button#paidy-checkout-button{
    font: 700 24px/1 system-u;
    margin: 200px 0;
}


.mail-sub {
    font: 700 24px/1 system-u !important;
    margin: 30px 0 !important;
}

/* ===== 共通 ===== */
.wb-contact *, .wblogin-section *, .wbterms *, .wbprivacy *, .wblegal * { box-sizing: border-box; }

/* ===== お問い合わせ ===== */
.wb-contact { padding: 24px 0; }
.wb-form{ background:#fff; border:1px solid #e5e7eb; border-radius:.7em; padding:22px 20px; }
.wb-form h3{ margin:0 0 14px; }
.wb-field{ margin:14px 0; }
.wb-label{ display:block; margin:0 0 8px; font-size:clamp(12px,3.5vw,16px); }
.wb-input,.wb-select,.wb-textarea{
width:100%; background:#fff; border:1px solid #e5e7eb; border-radius:10px;
padding:14px; font:500 14px/1.4 system-ui; color:#0f172a;
outline:none; transition:border-color .15s, box-shadow .15s;
}
.wb-input::placeholder,.wb-textarea::placeholder{ color:#b6c3d1; }
.wb-input:focus,.wb-select:focus,.wb-textarea:focus{ border-color:#b9d3ff; box-shadow:0 0 0 4px rgba(59,130,246,.12); }
.wb-select{
appearance:none;
background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%2364758b' d='M5.6 7.6a1 1 0 0 1 1.4 0L10 10.6l3-3a1 1 0 1 1 1.4 1.4l-3.7 3.7a1.2 1.2 0 0 1-1.4 0L5.6 9a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 12px center; padding-right:42px;}
.wb-textarea{ min-height:220px; resize:vertical; }
.wb-actions{ display:flex; gap:12px; margin-top:18px; }
.wb-btn{ appearance:none; border:0; border-radius:10px; padding:12px 18px; font:700 14px/1 system-ui; cursor:pointer; }
.wb-btn--primary{ background:#10b981; color:#fff; }
.wb-btn--primary:active{ background:#0f8c61; }
.wb-btn--ghost{ background:#fff; border:1px solid #e5e7eb; color:#111827; }
.wb-help{ margin-top:6px; font:12px/1.3 system-ui; color:#94a3b8; }

/* ===== ログイン（お問い合わせトーン準拠） ===== */
.wblogin-section{}
.wblogin-wrap{ margin:20px auto; }
.wblogin-card{ background:#fff; border:1px solid #e5e7eb; border-radius:.7em; padding:22px 22px 18px; }
.wblogin-title{ margin:0 0 18px; font:700 20px/1.2 system-ui,-apple-system,Segoe UI,Roboto; color:#0f172a; }
.wblogin-field{ margin:14px 0; }
.wblogin-label{ display:block; margin:0 0 8px; font:600 14px/1.2 system-ui; color:#475569; }
.wblogin-input{
width:100%; background:#fff; border:1px solid #e5e7eb; border-radius:10px;
padding:14px; font:500 14px/1.45 system-ui; color:#0f172a;
outline:none; transition:border-color .15s, box-shadow .15s;
}
.wblogin-input:focus{ border-color:#b9d3ff; box-shadow:0 0 0 4px rgba(59,130,246,.12); }
.wblogin-input::placeholder{ color:#b6c3d1; }
.wblogin-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:10px; }
.wblogin-check{ display:flex; align-items:center; gap:8px; color:#475569; font:13px/1.2 system-ui; }
.wblogin-link{ font:600 13px/1.2 system-ui; color:#2563eb; text-decoration:none; }
.wblogin-actions{ display:flex; gap:12px; margin-top:18px; }
.wblogin-btn{ appearance:none; border:0; border-radius:10px; padding:12px 18px; font:700 14px/1 system-ui; cursor:pointer; }
.wblogin-btn--primary{ background:#13a874; color:#fff; }
.wblogin-btn--primary:active{ background:#0f8c61; }
.wblogin-btn--ghost{ background:#fff; border:1px solid #e5e7eb; color:#111827; }
.wblogin-hint{ margin-top:8px; font:12px/1.4 system-ui; color:#94a3b8; }
.wblogin-error{ display:none; margin:0 0 10px; padding:10px 12px; border-radius:10px; background:#fff1f2; border:1px solid #fecdd3; color:#be123c; font:13px/1.35 system-ui; }
@media (max-width:640px){
.wblogin-card{ padding:18px; }
.wblogin-title{ font-size:18px; }
.wblogin-row{ flex-direction:column; align-items:flex-start; gap:8px; }
}

/* ===== 利用規約 ===== */
.wbterms-wrap{ max-width:1120px; margin:0 auto; padding:20px 0; }
.wbterms-hero{ background:#f4f7fb; border:1px solid #e5e7eb; border-radius:.7em; padding:18px 20px; margin-bottom:18px; }
.wbterms-title{ margin:0; font:800 22px/1.25 system-ui,-apple-system,Segoe UI,Roboto; color:#0f172a; }
.wbterms-grid{ display:grid; grid-template-columns:280px 1fr; gap:18px; }
@media (max-width:960px){ .wbterms-grid{ grid-template-columns:1fr; } }
.wbterms-toc{ background:#fff; border:1px solid #e5e7eb; border-radius:.7em; padding:14px; position:sticky; top:16px; height:max-content; }
.wbterms-toc h3{ margin:2px 0 10px; font:700 14px/1.2 system-ui; color:#475569; }
.wbterms-toc ol{ margin:0; padding:0 0 0 18px; }
.wbterms-toc li{ margin:6px 0; }
.wbterms-toc a{ color:#2563eb; text-decoration:none; font:600 13px/1.35 system-ui; }
.wbterms-toc a:hover{ text-decoration:underline; }
.wbterms-card{ background:#fff; border:1px solid #e5e7eb; border-radius:.7em; padding:22px; }
.wbterms-lead{ margin:0 0 14px; color:#334155; font:500 14px/1.6 system-ui; }
.wbterms-dl{ margin:0; }
.wbterms-dl dt{ margin:24px 0 8px; color:#0f172a; font:800 18px/1.25 system-ui; }
.wbterms-dl dd{ margin:0 0 14px; }
.wbterms-dl p{ margin:10px 0; color:#0f172a; font:500 14px/1.8 system-ui; }
.wbterms-note{ color:#94a3b8; font:12px/1.4 system-ui; margin-top:6px; }
.wbterms-hr{ height:1px; background:#e5e7eb; border:0; margin:18px 0; }
.wbterms-actions{ display:flex; gap:12px; margin-top:10px; }
.wbterms-btn{ appearance:none; border:0; border-radius:10px; padding:12px 18px; font:700 14px/1 system-ui; cursor:pointer; }
.wbterms-btn--primary{ background:#13a874; color:#fff; }
.wbterms-btn--primary:active{ background:#0f8c61; }
.wbterms-btn--ghost{ background:#fff; border:1px solid #e5e7eb; color:#111827; }
.wbterms-top{ display:inline-block; margin-top:10px; color:#2563eb; text-decoration:none; font:600 12px/1 system-ui; }

/* ===== プライバシーポリシー ===== */
.wbprivacy-wrap{ max-width:1120px; margin:0 auto; padding:20px 0; }
.wbprivacy-hero{ background:#f4f7fb; border:1px solid #e5e7eb; border-radius:.7em; padding:18px 20px; margin-bottom:18px; }
.wbprivacy-title{ margin:0; font:800 22px/1.25 system-ui,-apple-system,Segoe UI,Roboto; color:#0f172a; }
.wbprivacy-grid{ display:grid; grid-template-columns:280px 1fr; gap:18px; }
@media (max-width:960px){ .wbprivacy-grid{ grid-template-columns:1fr; } }
.wbprivacy-toc{ background:#fff; border:1px solid #e5e7eb; border-radius:.7em; padding:14px; position:sticky; top:16px; height:max-content; }
.wbprivacy-toc h3{ margin:2px 0 10px; font:700 14px/1.2 system-ui; color:#475569; }
.wbprivacy-toc ol{ margin:0; padding:0 0 0 18px; }
.wbprivacy-toc li{ margin:6px 0; }
.wbprivacy-toc a{ color:#2563eb; text-decoration:none; font:600 13px/1.35 system-ui; }
.wbprivacy-toc a:hover{ text-decoration:underline; }
.wbprivacy-card{ background:#fff; border:1px solid #e5e7eb; border-radius:.7em; padding:22px; }
.wbprivacy-lead{ margin:0 0 14px; color:#334155; font:500 14px/1.6 system-ui; }
.wbprivacy-dl{ margin:0; }
.wbprivacy-dl dt{ margin:24px 0 8px; color:#0f172a; font:800 18px/1.25 system-ui; }
.wbprivacy-dl dd{ margin:0 0 14px; }
.wbprivacy-dl p{ margin:10px 0; color:#0f172a; font:500 14px/1.8 system-ui; }
.wbprivacy-hr{ height:1px; background:#e5e7eb; border:0; margin:18px 0; }
.wbprivacy-note{ color:#94a3b8; font:12px/1.4 system-ui; margin-top:6px; }
.wbprivacy-actions{ display:flex; gap:12px; margin-top:10px; }
.wbprivacy-btn{ appearance:none; border:0; border-radius:10px; padding:12px 18px; font:700 14px/1 system-ui; cursor:pointer; }
.wbprivacy-btn--primary{ background:#13a874; color:#fff; }
.wbprivacy-btn--primary:active{ background:#0f8c61; }
.wbprivacy-btn--ghost{ background:#fff; border:1px solid #e5e7eb; color:#111827; }
.wbprivacy-top{ display:inline-block; margin-top:10px; color:#2563eb; text-decoration:none; font:600 12px/1 system-ui; }

/* ===== 特商法表記 ===== */
.wblegal-wrap{ margin:0 auto; padding:20px 0; }
.wblegal-hero{ background:#f4f7fb; border:1px solid #e5e7eb; border-radius:.7em; padding:18px 20px; margin-bottom:18px; }
.wblegal-title{ margin:0; font:800 22px/1.25 system-ui,-apple-system,Segoe UI,Roboto; color:#0f172a; }
.wblegal-card{ background:#fff; border:1px solid #e5e7eb; border-radius:.7em; padding:12px; }
.wblegal-table{ width:100%; border-collapse:collapse; }
.wblegal-table th, .wblegal-table td{ padding:14px 10px; vertical-align:top; text-align:left; border-bottom:1px solid #e5e7eb; }
.wblegal-table th{ width:32%; font:700 14px/1.5 system-ui; color:#475569; }
.wblegal-table td{ font:500 14px/1.7 system-ui; color:#0f172a; }
.wblegal-table tr:last-child th, .wblegal-table tr:last-child td{ border-bottom:0; }
.wblegal-actions{ display:flex; gap:12px; margin-top:24px; }
.wblegal-btn{ appearance:none; border:0; border-radius:10px; padding:12px 18px; font:700 14px/1 system-ui; cursor:pointer; }
.wblegal-btn--primary{ background:#13a874; color:#fff; }
.wblegal-btn--primary:active{ background:#0f8c61; }
.wblegal-btn--ghost{ background:#fff; border:1px solid #e5e7eb; color:#111827; }
.wblegal-note{ color:#94a3b8; font:12px/1.4 system-ui; margin-top:10px; }

.wbd-charge {
background: linear-gradient(90deg, #fabc21 0%,#dd7c06 100%);
color: #fff;
border-radius: 16px;
padding: 22px 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin: 0 auto;
}

/* 左側（アイコン＋テキストを1行に） */
.wbd-charge-left {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
white-space: nowrap;
}

.wbd-charge-ic {
width: 46px;
height: 46px;
border-radius: 12px;
display: grid;
place-items: center;
background: rgba(255, 255, 255, 0.25);
flex-shrink: 0;
}

.wbd-charge-ic svg {
width: 24px;
height: 24px;
}

.wbd-charge-title {
font-weight: bold;
font-size: 22px;
line-height: 1.2;
margin: 0;
}

.wbd-charge-sub {
margin: 0;
font-size: 14px;
line-height: 1.4;
}

.wbd-charge-btn {
appearance: none;
border: none;
border-radius: 12px;
padding: 12px 22px;
background: #fff;
color: #d97706;
font-weight: bold;
font-size: 16px;
line-height: 1;
cursor: pointer;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
white-space: nowrap;
text-decoration: none;
transition: background 0.2s, transform 0.1s;
flex-shrink: 0;
}

.wbd-charge-btn:hover {
background: #eee;
}

@media (max-width: 520px) {
.wbd-charge {
flex-direction: column;
align-items: flex-start;
padding: 18px;
gap: 14px;
}
.wbd-charge-left {
white-space: normal;
}
.wbd-charge-title {
font-size: 20px;
}
.wbd-charge-btn {
margin-top: 8px;
}
}

.wbd-plan {
  border: 2px solid #3b82f6;
  border-radius: 12px;
  padding: 3%;
  background: #fff;
  margin: 24px auto;
}

/* 見出し部分 */
.wbd-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 12px;
}
.wbd-head-ic {
width: 46px;
height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #eaf1ff;
  color: #3b82f6;
}
.wbd-head-ic svg {
  width: 24px;
  height: 24px;
  display: block;
}
.wbd-head-txt { min-width: 0; }
.wbd-head-title {
  margin: 0;
  font-weight: 800;
  font-size: 22px;
  line-height: 1.25;
  color: #0f172a;
}
.wbd-head-sub {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: #64748b;
}
.wbd-head-pill {
  margin-left: auto;
  background: #e7f0ff;
  color: #2563eb;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 800;
  font-size: 12px;
  white-space: nowrap;
}

/* グリッドレイアウト */
.wbd-plan-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: stretch; 
}

/* 各カード */
.wbd-card {
  border-radius: 12px;
  padding: 18px;
  border: 2px solid #e5e7eb;
  color: #2d3748;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  transition: transform 0.2s;
}
.wbd-card:hover {
  transform: translateY(-3px);
}
.wbd-card.green {
  border-color: #10b981;
  background: #e8fff4;
}
.wbd-card.purple {
  border-color: #b86dff;
  background: #f8f2ff;
}
.wbd-card h3 {
  font-size: 18px;
  margin: 0 0 6px;
}
.wbd-card p {
  margin: 6px 0;
  font-size: 16px;
}
.wbd-card hr {
  border: 0;
  border-top: 1px solid #e5e7eb;
  margin: 10px 0;
}
.wbd-card button {
  margin-top: 10px;
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}

/* 追加購入カード */
.wbd-card.add {
  border: 1px dashed #cbd5e1;
  background: #f8fafc;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.add-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.add-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
}
.add-title {
  font-size: 16px;
  font-weight: 800;
  margin: 6px 0 0;
}
.add-text {
  font-size: 13px;
  color: #475569;
  margin: 0;
}

.wbd-star{
	font-weight: bold;
	color: #facc16;
}

.wbd-star span{	
	color: #2d3748;
}

.wbd-detail {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0;
}
.wbd-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wbd-detail-row .label {
  font-size: 16px;
  color: #334155;
}
.wbd-detail-row .value {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
}

/* レスポンシブ調整 */
@media (min-width: 960px) {
  .wbd-plan-grid {
grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 480px) {
  .wbd-head-title { font-size: 20px; }
}

.wbd-pick2{margin:20px auto;}
.wbd-pick2-card{
  border:2px solid #d19aff;border-radius:14px;background:#f8f2ff;
  padding:18px;display:flex;flex-direction:column;gap:14px
}

/* 上段：PICKバッジ */
.wbd-p2-top{display:flex;align-items:center}
.wbd-p2-tag{
  display:inline-block;background:#b86dff;color:#fff;font-weight:800;
  font-size:14px;padding:4px 14px;border-radius:999px
}

/* タイトル行（左アイコン＋見出し＋サブ） */
.wbd-p2-head{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center}
.wbd-p2-ic{
  width:46px;height:46px;border-radius:12px;background:#b86dff;
  display:grid;place-items:center;flex-shrink:0
}
.wbd-p2-ic svg{width:24px;height:24px;color: #fff;}
.wbd-p2-title{margin:0;font-weight:900;font-size:20px;line-height:1.2;color:#0f172a}
.wbd-p2-sub{margin:4px 0 0;color:#475569;font-size:14px}
.wbd-p2-sub span:first-child {
    font-size: 18px;
    font-weight: 900;
}

/* ポイント＆ボタンの行 */
.wbd-p2-ptrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
flex-wrap: nowrap; /* 折り返さない */
}

.wbd-p2-left {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
}

.wbd-p2-ptlbl {
  font-weight: 700;
  font-size: 12px;
}

.wbd-p2-ptnum {
  font-weight: 900;
  font-size: 36px;
  line-height: 1;
}

.wbd-p2-btn {
  background: #b86dff;
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 10px 10px;
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.wbd-p2-btn:hover {
  background: #999;
  color: #fff;
}

/* スマホでも横並びを維持 */
@media (max-width:480px) {
  .wbd-p2-ptnum { font-size: 28px; }
  .wbd-p2-btn { font-size: 14px; padding: 8px 10px; }
}

/* 仕切り線 */
.wbd-p2-hr{height:1px;background:#e5e7eb;border:0;margin:2px 0 0}

/* ステータス4分割 */
.wbd-p2-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;text-align:center;align-items:center
}
.wbd-p2-stat .k{display:block;color:#64748b;margin-bottom:6px;font-size: 14px;}
.wbd-p2-stat .v{display:block;color:#0f172a;font-weight:bold;font-size:18px;line-height:1.1}
.wbd-p2-stars{display:inline-flex;gap:2px;vertical-align:middle}
.wbd-p2-stars svg{width:18px;height:18px}

/* レスポンシブ */
@media (max-width:720px){
  .wbd-p2-title{font-size:22px}
  .wbd-p2-ptnum{font-size:36px}
}
@media (max-width:560px){
  .wbd-p2-stats{grid-template-columns:repeat(2,1fr);row-gap:14px}
  .wbd-p2-btn{margin-left:0}
}



.wbd-stats-wrap{
  display:grid;
  grid-template-columns:repeat(3,1fr); /* ←常に3列 */
  gap:16px;
}


.wbd-scard{
  border:1px solid #e5e7eb;border-radius:16px;background:#fff;
  padding:20px;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:160px;box-sizing:border-box;
}
.wbd-card--gold{background:linear-gradient(90deg,#fbbf24,#d97706);color:#fff;border:none}

.wbd-ic{
  width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;margin-bottom:10px
}
.wbd-ic svg{width:60%;height:60%}
.wbd-num{font-weight:900;font-size:26px;line-height:1.2;color:#0f172a}
.wbd-card--gold .wbd-num{color:#fff}
.wbd-label{margin-top:4px;font-weight:700;font-size:14px;color:#334155}
.wbd-card--gold .wbd-label{color:#fff}

/* ===== 狭幅で縮小（横スクロールなし） ===== */

/* ～480px：やや縮小 */
@media (max-width:480px){
  .wbd-stats-wrap{gap:10px}
  .wbd-scard{padding:14px;min-height:130px;border-radius:14px}
  .wbd-ic{width:34px;height:34px;border-radius:10px;margin-bottom:8px}
  .wbd-num{font-size:20px}
  .wbd-label{font-size:12px}
}

/* ～400px：さらに縮小（1カラムあたり約120px想定） */
@media (max-width:400px){   
  .wbd-num{font-size:16px}
  .wbd-label{font-size:11px}
}

/* ～340px：最小サイズ（1カラム約106px想定） */
@media (max-width:340px){
  .wbd-stats-wrap{gap:8px}
  .wbd-num{font-size:14px}
  .wbd-label{font-size:10px}
}

.wbd-pick2 {
  margin: 24px 0;
}

/* スライダー本体の余白 */
.wbd-p2-slider {
  padding: 8px 0 40px; /* 下にドット分の余白 */
}

/* スライドの高さをカードにフィットさせる */
.wbd-p2-slider .swiper-slide {
  height: auto;
  display: flex;
}

.wbd-p2-slider .wbd-pick2-card {
  width: 100%;
  height: 100%;
}

/* ページネーション（ドット） */
.swiper-pagination {
    position:static!important;
    text-align: center;
    transition: .3s opacity;
    transform: translate3d(0, 0, 0);
    z-index: 10;
}
.wbd-p2-slider .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: #d1d5db;
  opacity: 1;
}

.wbd-p2-slider .swiper-pagination-bullet-active {
  background: #2563eb;
}

/* 矢印のスタイル（必要なら） */
.wbd-p2-nav {
  color: #9ca3af;
}

.wbd-p2-nav::after {
  font-size: 18px;
}

/* 矢印をカード外側に寄せたい場合 */
.wbd-p2-prev {
  left: 0;
}

.wbd-p2-next {
  right: 0;
}


.wbr2-recent{
	margin: 20px 0;
  background:#fff;border:2px solid #e5e7eb;border-radius:14px;
  overflow:hidden;
}

/* ヘッダー */
.wbr2-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px;border-bottom:1px solid #eef2f6
}
.wbr2-title{display:flex;align-items:center;gap:12px}
.wbr2-title img{width:48px;height:48px;}
.wbr2-title h2{margin:0;font-weight:900;font-size:22px;color:#0f172a}
.wbr2-title p{margin:2px 0 0;color:#475569;font-size:14px;font-weight:600}
.wbr2-btn{display:inline-block;background:#10b981;color:#fff;text-decoration:none;
  padding:8px 14px;border-radius:12px;font-weight:800;font-size: 14px;}
.wbr2-btn:hover{background: #999;color: #fff;}
/* リスト */
.wbr2-list{list-style:none;margin:0;padding:10px;display:flex;flex-direction:column;gap:14px}

/* 行カード（モバイル基準で画像の見た目に合わせる） */
.wbr2-item{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:16px;border-radius:16px;border:2px solid #e5e7eb;
  background:#fff;text-decoration:none;color:#0f172a
}

/* バリエーション：紫/緑（背景のトーン＋枠色） */
.wbr2--violet{background:#f8f2ff;border-color:#b86dff}
.wbr2--green {background:#e8fff4;border-color:#10b981}

/* 左ブロック */
.wbr2-left{display:flex;align-items:center;gap:14px;min-width:0}
.wbr2-ic{
  width:40px;height:40px;border-radius:14px;display:grid;place-items:center;flex:0 0 auto
}
.wbr2-ic--violet{background:linear-gradient(135deg,#ef70a6,#8b5cf6)}
.wbr2-ic--green {background:#10b981}
.wbr2-ic svg{width:30px;height:30px}

.wbr2-main{min-width:0}
.wbr2-top{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.wbr2-pill{
  display:inline-block;padding:6px 12px;border-radius:999px;
  font-weight:900;font-size:14px;white-space:nowrap
}
.wbr2-pill--violet{background:#efe7ff;color:#6d28d9}
.wbr2-pill--blue{background:#e0f2ff;color:#2563eb}
.wbr2-date{color:#64748b;font-weight:700;font-size:14px;white-space:nowrap}
.wbr2-race{font-weight:900;font-size:26px;color:#0f172a}

/* 右ブロック（縦2段：ラベル → 金額。右寄せ固定） */
.wbr2-right{text-align:right;flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.wbr2-fee{color:#64748b;font-weight:800;font-size:14px;line-height:1;white-space:nowrap}
.wbr2-price{font-weight:900;font-size:26px;line-height:1}
.wbr2-price--violet{color:#7c3aed}
.wbr2-price--green {color:#059669}

/* ほんの少しだけ縮小が必要な極小幅 */
@media (max-width:360px){
  .wbr2-ic{width:48px;height:48px}
  .wbr2-pill{padding:5px 10px;font-size:13px}
  .wbr2-date{font-size:13px}
  .wbr2-race{font-size:22px}
  .wbr2-price{font-size:22px}
}

/* ── スマホ微調整：アイコン/文字/余白を一段縮小 ───────────────── */
@media (max-width: 480px){
  .wbr2-item{
    padding: 12px;
    border-radius: 14px;
    display: block;
  }
  .wbr2-left{ gap: 10px; }
  .wbr2-ic{
    width: 34px;
    height: 34px;
    border-radius: 8px;
  }
  .wbr2-ic svg{ width: 24px; height: 24px; }

  .wbr2-top{ gap: 8px; margin-bottom: 4px; }
  .wbr2-pill{
    padding: 4px 10px;
    font-size: 12px;
  }
  .wbr2-date{
    font-size: 12px;
  }

  /* レース名は2行まで・やや小さめに */
  .wbr2-race{
    font-size: 20px;
    line-height: 1.25;
  }

  /* 右カラム（払戻金/金額）は詰めて小さく */
  .wbr2-right{
    padding: 6px 0 0 0;
    display: block;
  }
  .wbr2-fee{
    font-size: 12px;
    white-space: nowrap;
  }
  .wbr2-price{
    font-size: 22px;
    line-height: 1;
    white-space: nowrap;
  }
}

/* さらに極小幅（iPhone SE等）での微調整 */
@media (max-width: 360px){
  .wbr2-item{ padding: 10px; }
  .wbr2-ic{ width: 40px; height: 40px; }
  .wbr2-ic svg{ width: 22px; height: 22px; }
  .wbr2-pill{ padding: 3px 8px; font-size: 11px; }
  .wbr2-date{ font-size: 11px; }
  .wbr2-race{ font-size: 18px; }
  .wbr2-price{ font-size: 20px; }
}




/* ========== お知らせ (Notice) ========== */
.wbdn-info{background:#fff;border:2px solid #e5e7eb;border-radius:14px;padding:10px;margin-top:24px}
.wbdn-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.wbdn-title{display:flex;align-items:center;gap:12px}
.wbdn-title img{width:48px;height:48px;}
.wbdn-title h2{margin:0;display:flex;align-items:center;gap:8px;font-weight:800;font-size:18px;color:#0f172a}
.wbdn-title p{margin:2px 0 0;font-size:13px;color:#475569;font-weight:600}
.wbdn-badge{display:inline-flex;align-items:center;justify-content:center;min-width:26px;padding:2px 6px;border-radius:999px;background:#ef4444;color:#fff;font-size:11px;font-weight:800}
.wbdn-btn{display:inline-block;background:#ef4444;color:#fff;text-decoration:none;padding:8px 14px;border-radius:10px;font-weight:800;font-size:14px}
.wbdn-btn:hover{background:#999;color: #fff;}

.wbdn-list{display:flex;flex-direction:column;gap:12px}
.wbdn-item{display:flex;align-items:center;gap:12px;text-decoration:none;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:14px 16px;color:#0f172a}
.wbdn-item:hover{background:#f8fafc}
/* 未読ハイライト：赤系 */
.wbdn-item--unread{background:#ffe7e7;border-color:#fecaca;box-shadow:inset 0 0 0 2px rgba(239,68,68,.15)}
.wbdn-item strong{display:block;font-size:15px;font-weight:800;margin:0 0 4px}
.wbdn-item p{font-size:13px;color:#475569;margin:0}
/* 左ドット */
.wbdn-item .dot{width:10px;height:10px;border-radius:50%;background:#ef4444;flex:0 0 auto}
.wbdn-item .dot--muted{background:#cbd5e1}

/* ========== メッセージ (Message) ========== */
.wbdm-msg{background:#fff;border:2px solid #e5e7eb;border-radius:14px;padding:10px;margin-top:24px}
.wbdm-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.wbdm-title{display:flex;align-items:center;gap:12px}
.wbdm-title img{width:48px;height:48px;}
.wbdm-title h2{margin:0;display:flex;align-items:center;gap:8px;font-weight:800;font-size:18px;color:#0f172a}
.wbdm-title p{margin:2px 0 0;font-size:13px;color:#475569;font-weight:600}
.wbdm-badge{display:inline-flex;align-items:center;justify-content:center;min-width:26px;padding:2px 6px;border-radius:999px;background:#2563eb;color:#fff;font-size:11px;font-weight:800}
.wbdm-btn{display:inline-block;background:#2563eb;color:#fff;text-decoration:none;padding:8px 14px;border-radius:10px;font-weight:800;font-size:14px}
.wbdm-btn:hover:hover{background:#999;color: #fff;}

.wbdm-list{display:flex;flex-direction:column;gap:12px}
.wbdm-item{display:flex;align-items:center;gap:12px;text-decoration:none;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:14px 16px;color:#0f172a}
.wbdm-item:hover{background:#f8fafc}
/* 未読ハイライト：青系 */
.wbdm-item--unread{background:#eaf2ff;border-color:#93c5fd;box-shadow:inset 0 0 0 2px rgba(37,99,235,.15)}
/* 左ドット */
.wbdm-dot{width:12px;height:12px;border-radius:50%;background:#2563eb;flex:0 0 auto}
.wbdm-dot--muted{background:#cbd5e1}
.wbdm-body{min-width:0}
.wbdm-subject{display:block;font-size:16px;font-weight:800;margin:0 0 4px}
.wbdm-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:#475569}

/* スマホ微調整（両セクション共通サイズ感キープ） */
@media (max-width:480px){
  .wbdn-title h2,.wbdm-title h2{font-size:17px}
  .wbdn-btn,.wbdm-btn{font-size:13px;padding:7px 12px}
  .wbdm-subject{font-size:15px}
}


/* --- アーカイブフィルタ --- */
.wbarf-filter-wrap{
  padding:10px 14px;
  border-bottom:1px solid #e5e7eb;
  background:#f9fafb;
}
.wbarf-filter{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.wbarf-btn{
  border:0;
  border-radius:999px;
  padding:7px 14px;
  background:#f3f4f6;
  color:#111827;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  transition:background .15s, color .15s, box-shadow .15s;
}
.wbarf-btn .wbarf-count{
  margin-left:4px;
  opacity:.8;
}

/* アクティブ状態（左端の黒ボタン） */
.wbarf-btn.is-active{
  background:#0f172a;
  color:#fff;
  box-shadow:0 0 0 1px rgba(15,23,42,.4);
}
.wbarf-btn.is-active .wbarf-count{
  opacity:1;
}


@media (max-width:480px){
  .wbarf-filter-wrap{padding:8px 10px}
  .wbarf-btn{
    padding:6px 10px;
    font-size:12px;
  }
}

.title-area02 .title {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.title-area04 .title {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.title-area06 .title {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
/* 公開タグ */
.wbfree-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:10px 10px;
  border-radius:8px;
  background:rgba(255,255,255,0.25);
  color:#fff;
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
  margin-top:2px;
}

.wbfree-tag svg{
  width:14px;
  height:14px;
  flex-shrink:0;
}



/* 全体の並びはそのまま */
.wbfree-days{
  margin-top:20px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* 1カード */
.wbfree-day{
  background:#ffffff;
  border-radius:14px;
  border:1px solid #e5e7eb;
  padding:18px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

/* 左側（ラベル＋日付） */
.wbfree-day-main{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.wbfree-day-label{
  width: 80px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 14px;
  border-radius:5.0em;
  background:#e5edff;
  color:#2563eb;
  font-size: clamp(12px, 3.5vw, 16px); 
  font-weight:700;
}

/* 本日のみ色反転 */
.wbfree-day-label--today{
  background:#2563eb;
  color:#ffffff;
}

.wbfree-day-date{
  margin:0;
  font-size: clamp(14px, 3.5vw, 18px); 
  font-weight:700;
}

/* 参加ボタン（リンクでもボタンでもOK） */
.wbfree-day-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:0.7em;
  padding:10px 28px;
  background:#2563eb;
  color:#fff;
  font-size: clamp(14px, 3.5vw, 16px); 
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
  text-decoration:none;
}

.wbfree-day-btn2{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:0.7em;
  padding:10px 28px;
  background: #d1d5db;
  color:#626262;
  font-size: clamp(14px, 3.5vw, 16px); 
  font-weight:700;
  white-space:nowrap;
  text-decoration:none;
}


.wbfree-day-btn:hover{
  background:#999;
  color:#fff;
}


.wbfree-day-note{
  margin-top:4px;
  background:#f9fafb;
  border-radius:14px;
  border:1px solid #e5e7eb;
  padding:14px 18px;
  font-size: clamp(12px, 3.5vw, 15px); 
  color:#6b7280;
  text-align:center;
}

/* スマホ時は縦並び */
@media (max-width:640px){
  .wbfree-day{
    flex-direction:row;
    align-items:center;
  }
  .wbfree-day-main{
    flex:1;
  }
  .wbfree-day-btn{
    padding:9px 22px;
  }
}



/* --- 全体の外枠カード --- */
.wbfree-wrapper {
  border: 2px solid #2778ff;
  border-radius: 16px;
  background: #ffffff;
  overflow: hidden;
  margin: 0 auto;
}

/* --- ヘッダー --- */
.wbfree-head {
  background: #2778ff;
  padding: 22px 20px;
  color: #fff;
}

.wbfree-label {
  display: inline-block;
  background: rgba(255,255,255,.25);
  padding: 4px 14px;
  border-radius: 12px;
  font-size: clamp(12px, 3vw, 14px);
  margin-bottom: 10px;
}

.wbfree-date {
  font-size: clamp(18px, 4vw, 22px);
  font-weight: 700;
}

.wbfree-sub {
  font-size: clamp(12px, 3vw, 14px);
  margin-top: 4px;
  opacity: .9;
}

/* --- 中身 --- */
.wbfree-inner {
  padding: 20px;
}

.wbfree-title {
  margin: 10px 0 18px;
  font-size: clamp(16px, 4vw, 20px);
  font-weight: 700;
}

/* --- 買い目カード --- */
.wbfree-buy-card {
  background: #f7f9fc;
  border: 1px solid #e5e8ef;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 18px;
}

.wbfree-buy-type {
  text-align: center;
  font-size: clamp(12px, 3vw, 14px);
  color: #555;
  margin-bottom: 6px;
}

.wbfree-buy-num {
  text-align: center;
  font-size: clamp(28px, 6vw, 38px);
  font-weight: 700;
  letter-spacing: 4px;
}

/* --- 舟券サイト --- */
.wbfree-sites {
  background: #eef6ff;
  padding: 22px;
  border-radius: 12px;
  margin-top: 30px;
}

.wbfree-sites-title {
  font-size: clamp(14px, 3.5vw, 18px);
  margin-bottom: 20px;
  font-weight: 600;
}

.wbfree-sites-grid {
  display: flex;
  gap: 16px;
}

.wbfree-site-btn {
  flex: 1;
  text-align: center;
  padding: 14px;
  border-radius: 10px;
  color: #2d6bff;
  border: 1px solid #cdd9ff;
  background: #fff;
  text-decoration: none;
  font-size: clamp(14px, 3.5vw, 18px);
  font-weight: 600;
}

/* --- スマホ時は縦並び --- */
@media (max-width: 640px) {
  .wbfree-sites-grid {
    flex-direction: column;
  }
}




/* HUNT TIME ---------------------------------------------------- */


.wbhunt-inner {
  background: linear-gradient(90deg, #dd2828 0%, #f87118 100%);
  border-radius: 18px;
  padding: 18px 28px 20px;
  color: #fff;
}

/* 上段配置 */
.wbhunt-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* 左：タイトル */
.wbhunt-left {
  min-width: 0;
}

.wbhunt-headline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.wbhunt-moon {
  font-size: clamp(20px, 4vw, 26px);
}

.wbhunt-title {
  font-weight: 800;
  font-size: clamp(20px, 4.4vw, 28px);
  letter-spacing: 0.04em;
}

.wbhunt-sub {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fde047;
  font-weight: 700;
  font-size: clamp(13px, 3.4vw, 16px);
}

.wbhunt-flame {
  font-size: clamp(14px, 3.5vw, 18px);
}

/* 右：タイマー */
.wbhunt-timer {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 0.9em;
  padding: 12px 26px;
  text-align: center;
  flex: 0 0 auto;
}

.wbhunt-timer-label {
  font-size: clamp(12px, 3vw, 14px);
  opacity: 0.9;
  margin-bottom: 6px;
}

.wbhunt-timer-value {
  font-weight: 800;
  letter-spacing: 0.18em;
  font-size: clamp(20px, 4.6vw, 30px);
}

/* 下段：情報エリア */
.wbhunt-bottom {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.wbhunt-info {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: clamp(13px, 3.3vw, 15px);
}

.wbhunt-bolt {
   color: #fde047;
}

.wbhunt-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  border-radius: 0.7em;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-weight: 600;
  font-size: clamp(12px, 3.2vw, 14px);
  text-decoration: none;
}

.wbhunt-chip--ghost {
  background: rgba(255, 255, 255, 0.1);
}

/* レスポンシブ */
@media (max-width: 640px) {
  .wbhunt-inner {
    padding: 16px 16px 18px;
  }

  .wbhunt-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .wbhunt-timer {
    align-self: stretch;
    padding: 10px 18px;
  }

  .wbhunt-timer-value {
    letter-spacing: 0.12em;
  }
}


.hunt-section {
  margin: 0 auto;
  background: #f5f6fb;
}

/* 見出し */
.hunt-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 24px 0;
}

.hunt-header-icon {
  width: 40px;
  height: 40px;
  font-size: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hunt-header-text h1 {
  margin: 0;
  font-size: clamp(20px, 3.5vw, 30px);
  font-weight: 700;
}

.hunt-header-text p {
  margin: 3px 0 0;
  color: #80829a;
  font-size: clamp(14px, 3.5vw, 16px);
  line-height: 1.0;
}

/* カード */
.hunt-card {
  border-radius: 22px;
  border: 2px solid #d19aff;
  background: #f8f2ff;
}

.hunt-card-inner {
  padding: 20px 22px 26px;
}

/* 上部ヘッダー */
.hunt-card-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
  flex-direction: row-reverse;
}

.hunt-tag {
  font-size: clamp(11px, 3vw, 12px);
  font-weight: 700;
  color: #a774ff;
  letter-spacing: 0.12em;
}

.hunt-title-main {
  margin: 4px 0 0;
  font-size: clamp(18px, 4.5vw, 22px);
  font-weight: 800;
}

.hunt-title-sub {
  margin: 2px 0 8px;
  color: #55536a;
  font-size: clamp(12px, 3.4vw, 14px);
}

.hunt-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.hunt-stars {
  color: #ffb800;
  font-size: clamp(13px, 3.8vw, 16px);
}

.hunt-level {
  font-size: clamp(13px, 3.6vw, 15px);
  font-weight: 600;
}

.hunt-expect {
  margin: 0;
  font-size: clamp(12px, 3.4vw, 14px);
}

/* バッジ */
.hunt-head-right {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: 100px;
}

.hunt-badge {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 4px 0;
  border-radius: 999px;
  font-size: clamp(11px, 3vw, 12px);
  font-weight: 600;
  color: #fff;
}

.hunt-badge-purple { background: #b86dff; }
.hunt-badge-dark   { background: #11141f; }

/* キャッチコピー */
.hunt-copy {
  background: #fef7ff;
  padding: 8px 12px;
  border-radius: 10px;
  color: #c14bfd;
  font-size: clamp(12px, 3.4vw, 14px);
  font-weight: 700;
  margin: 12px 0 18px;
}

/* ポイントブロック */
.hunt-point-box {
  background: #fff9ff;
  padding: 18px 16px;
  border-radius: 12px;
  margin-bottom: 18px;
}

.hunt-point-num {
  font-size: clamp(28px, 7vw, 34px);
  font-weight: 800;
}

.hunt-point-label {
  margin-left: 8px;
  font-size: clamp(12px, 3.4vw, 14px);
}

/* リスト */
.hunt-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hunt-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff9ff;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: clamp(12px, 3.4vw, 14px);
  margin-bottom: 6px;
  color: #51485d;
  font-weight: 700;
}

.hunt-icon svg {
  width: 16px;
  height: 16px;
}

.hunt-icon polyline {
  fill: none;
  stroke: #c766ff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 下部ボタンまわり */
.hunt-bottom {
  margin-top: 22px;
}

.no-bottom-btn {
  width: 100%;
  padding: 14px 0;
  background: #d1d5db;
  border-radius: 10px;
  border: none;
  color: #626262;
  font-weight: 700;
  font-size: clamp(13px, 3.8vw, 15px);
}

.hunt-bottom-btn {
  width: 100%;
  padding: 14px 0;
  background: #a045f7;
  border-radius: 10px;
  border: none;
  color: #ffffff;
  font-weight: 700;
  font-size: clamp(13px, 3.8vw, 15px);
  cursor: pointer;
}

.hunt-bottom-btn:hover {
  background: #999;
}

.hunt-bottom-note {
  margin-top: 10px;
  padding: 12px 0;
  background: #fff9ff;
  border-radius: 10px;
  text-align: center;
  font-size: clamp(12px, 3.4vw, 14px);
  color: #c15aff;
}

/* GREY WOLF カード全体 */
.wolf-card {
  margin: 0 auto;
  border-radius: 22px;
  border: 2px solid #10b981;
  background: #e8fff4;
}

.wolf-card-inner {
  padding: 20px 22px 26px;
}

/* ヘッダー部 */
.wolf-card-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
  flex-direction: row-reverse;
}

.wolf-head-left {
  flex: 1;
}

.wolf-tag {
  font-size: clamp(11px, 3vw, 12px);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #05a55f;
}

.wolf-title-main {
  margin-top: 4px;
  font-size: clamp(18px, 4.5vw, 22px);
  font-weight: 800;
}

.wolf-title-sub {
  margin: 2px 0 8px;
  font-size: clamp(12px, 3.4vw, 14px);
  color: #43514a;
}

.wolf-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.wolf-stars {
  color: #ffb800;
  font-size: clamp(13px, 3.8vw, 16px);
}

.wolf-level {
  font-size: clamp(13px, 3.6vw, 15px);
  font-weight: 600;
}

.wolf-expect {
  font-size: clamp(12px, 3.4vw, 14px);
}

/* 右上バッジ */
.wolf-head-right {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: 110px; /* 解放中 / 締切 の横幅を揃える */
}

.wolf-badge {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 4px 0;
  border-radius: 999px;
  font-size: clamp(11px, 3vw, 12px);
  font-weight: 600;
  color: #ffffff;
}

.wolf-badge-green {
  background: #09b46b;
}

.wolf-badge-dark {
  background: #11141f;
}

/* キャッチコピー帯 */
.wolf-copy {
  margin: 12px 0 18px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #f0fff8;
  color: #02a157;
  font-size: clamp(12px, 3.4vw, 14px);
  font-weight: 700;
}

/* ポイントブロック */
.wolf-point-box {
  margin-bottom: 18px;
  padding: 18px 16px;
  border-radius: 12px;
  background: #f3fff9;
}

.wolf-point-num {
  font-size: clamp(28px, 7vw, 34px);
  font-weight: 800;
}

.wolf-point-label {
  margin-left: 8px;
  font-size: clamp(12px, 3.4vw, 14px);
}

/* 特典リスト */
.wolf-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wolf-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f3fff9;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: clamp(12px, 3.4vw, 14px);
  font-weight: 700;
  color: #184029;
}

.wolf-item + .wolf-item {
  margin-top: 6px;
}

/* SVGチェック（緑） */
.wolf-icon svg {
  width: 16px;
  height: 16px;
}

.wolf-icon polyline {
  fill: none;
  stroke: #0cb065;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ボトム部分 */
.wolf-bottom {
  margin-top: 22px;
}

.wolf-bottom-btn {
  width: 100%;
  padding: 14px 0;
  background: #09b46b;
  border-radius: 10px;
  border: none;
  color: #ffffff;
  font-weight: 700;
  font-size: clamp(13px, 3.8vw, 15px);
  cursor: pointer;
}

.wolf-bottom-btn:hover {
  background: #999;
}

.wolf-bottom-note {
  margin-top: 10px;
  padding: 12px 0;
  background: #f3fff9;
  border-radius: 10px;
  text-align: center;
  font-size: clamp(12px, 3.4vw, 14px);
  color: #0cb065;
}

  .hunt-plans {
    display: grid;
     gap: 24px 24px;
 
  }

/* ▼ デフォルト（スマホ）：1列縦並び */
.hunt-plans {
  display: flex;
  flex-direction: column;
  gap: 24px;
}


/* ▼ デフォルト：スマホは1列 */
.hunt-plans {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr !important;
}

/* ▼ iPad（縦・横どちらも）〜小さめPC：2列 */
@media (min-width: 768px) and (max-width: 1199px) {
  .hunt-plans {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ▼ 大きめPC：3列 */
@media (min-width: 1200px) {
  .hunt-plans {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* ▼ 1プランを包むラッパー */
.hunt-block {
  position: relative;
}

/* ▼ ロック中オーバーレイ本体 */
.hunt-overlay {
  position: absolute;
  inset: 0; /* 上下左右ぴったり */
  border-radius: 22px;          /* カードと同じ角丸 */
  background: rgba(7, 10, 20, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;                /* デフォルト非表示 */
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* is-locked が付いているときだけ表示 */
.hunt-block.is-locked .hunt-overlay {
  display: flex;
}

/* 中央のコンテンツ */
.hunt-overlay-content {
  text-align: center;
  color: #ffffff;
}

/* アイコン（丸い時計） */
.hunt-overlay-icon {
  width: 80px;
  height: 80px;
  border-radius: 999px;
  background: rgba(17, 21, 35, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: clamp(32px, 8vw, 40px);
}

/* 「解放まで」ラベル */
.hunt-overlay-label {
  font-size: clamp(12px, 3.4vw, 14px);
  margin-bottom: 6px;
  opacity: 0.9;
}

/* カウントダウン数字 */
.hunt-overlay-time {
  font-size: clamp(26px, 6.5vw, 34px);
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

/* 「待機中」バッジ */
.hunt-overlay-status {
  display: inline-block;
  margin-bottom: 10px;
  padding: 6px 18px;
  border-radius: 999px;
  background: rgba(17, 21, 35, 0.9);
  font-size: clamp(11px, 3vw, 12px);
}

/* ▼ 次回予告ブロック全体 */
.hunt-next {
  margin: 32px auto 0;
}

.hunt-next-inner {
  background: #050b17;
  border-radius: 20px;
  padding: 18px 20px 20px;
}

/* 見出し */
.hunt-next-header {
  margin-bottom: 16px;
}

.hunt-next-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.hunt-next-icon {
  font-size: clamp(18px, 4.2vw, 22px);
}

.hunt-next-title {
  font-size: clamp(16px, 4vw, 20px);
  font-weight: 700;
  color: #ffffff;
}

.hunt-next-caption {
  margin: 0;
  font-size: clamp(12px, 3.4vw, 14px);
  color: #a6b2d0;
}

/* ▼ SP（標準）は2列グリッド！ */
.hunt-next-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* 個々のカード */
.hunt-next-item {
  background: #101826;
  border-radius: 12px;
  padding: 14px 10px 10px;
  text-align: center;
  color: #ffffff;
}

.hunt-next-lock {
  font-size: clamp(22px, 5vw, 26px);
  margin-bottom: 10px;
}

.hunt-next-name {
  font-size: clamp(11px, 2.9vw, 13px);
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* ▼ PCでは横一列レイアウトに切り替え */
@media (min-width: 900px) {

  .hunt-next-inner {
    padding: 20px 26px 22px;
  }

  .hunt-next-list {
    display: flex;
    justify-content: space-between;
    gap: 16px;
  }

  .hunt-next-item {
    flex: 0 0 calc(100% / 6 - 16px);
  }
}


/* ▼ グリッドレイアウト */
.pt-grid {
  display: grid;
  grid-template-columns: 1fr; /* SP：1列 */
  gap: 26px;
  margin: 20px auto;
}

/* iPad（600px〜919px） → 2列 */
@media (min-width: 600px) and (max-width: 919px) {
  .pt-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* PC（920px〜） → 3列 */
@media (min-width: 920px) {
  .pt-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ▼ カード全体 */
.pt-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 26px 22px 32px;
  border: 2px solid #e5e7eb;
  text-align: center;
  position: relative;
  min-height: 340px;
}

/* ▼ 人気No.1 */
.pt-popular {
  border: 2px solid #ffa726;
  box-shadow: 0 0 0 3px rgba(255,167,38,0.2);
}

.pt-popular-badge {
  position: absolute;
  top: -10px;
  right: 20px;
  background: #ffa726;
  color: #fff;
  font-size: clamp(10px, 2.8vw, 12px);
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 700;
}

/* ▼ ポイント表示 */
.pt-value {
  font-size: clamp(34px, 6vw, 46px);
  font-weight: 800;
  margin-bottom: 8px;
}
.pt-value span {
  display: block;
  font-size: clamp(12px, 3.2vw, 14px);
  font-weight: 500;
  margin-top: 4px;
}


/* ▼ レイアウト：スマホ1列 / iPad・PC3列 */
.hunt-plans {
  display: grid;
  grid-template-columns: 1fr;   /* default: 1列（スマホ） */
  gap: 24px;
}

/* iPad 以上は 3列 */
@media (min-width: 768px) {
  .hunt-plans {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }
}

/* ▼ 高さそろえ用のチェーン */

/* グリッドの1マス */
.hunt-plans-item {
  height: 100%;
}

/* 中の hunt-section をフル高さ＋flex化 */
/* ここで既存の margin:20px auto; をこのレイアウトの中だけリセット */
.hunt-plans-item > .hunt-section {
  height: 100%;
  display: flex;
  margin: 0;
}

/* hunt-section の中のカード本体を伸ばす（hunt / wolf 両方対応） */
.hunt-plans-item > .hunt-section > .hunt-card,
.hunt-plans-item > .hunt-section > .wolf-card {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* カード内側を縦 flex にして「本文＋ボトム」に分ける */
.hunt-card-inner,
.wolf-card-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ボトムエリアを一番下に固定（購入ボタンの行） */
.hunt-bottom,
.wolf-bottom {
  margin-top: auto;
  padding-top: 15px;
}


/* ▼ ボーナスボックス */
.pt-bonus-box {
  background: #eafff0;
  border-radius: 10px;
  padding: 16px 10px;
  margin: 20px 0;
  border: 2px solid #10b981;
}
.pt-bonus-row {
  font-size: clamp(16px, 3.2vw, 18px);
  color: #10b981;
  line-height: 1.4;
}

/* ▼ 価格 */
.pt-price {
  font-size: clamp(24px, 4vw, 28px);
  font-weight: 700;
  margin: 20px 0;
}

/* ▼ ボタン */
.pt-buy-btn {
  width: 100%;
  padding: 14px 0;
  margin-bottom: 10px;
  background: #0e1525;
  border-radius: 8px;
  border: none;
  color: #ffffff;
  font-weight: 700;
  font-size: clamp(14px, 3.4vw, 16px);
  cursor: pointer;
}

/* 人気No.1の黄色ボタン */
.pt-buy-orange {
  background: #ffa726;
}

/* カード高さ揃え */
.pt-item {
  display: flex;
}
.pt-card {
  flex: 1;
}


/* ▼ 全体BOX */
.pt-info-box {
  background: #f2f7ff;
  border: 2px solid #c8dcff;
  border-radius: 16px;
  padding: 24px 26px;
  display: grid;
  gap: 24px;
}


/* PC（920px〜）：2列横並び */
@media (min-width: 920px) {
  .pt-info-box {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* ▼ 各項目 */
.pt-info-item {}

.pt-info-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: clamp(14px, 3.5vw, 16px);
  font-weight: 700;
  color: #1f3d8f;
}

.pt-info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pt-info-icon svg {
  display: block;
}

.pt-info-icon {
  font-size: clamp(16px, 4vw, 20px);
}

/* メインテキスト */
.pt-info-text {
  margin: 0 0 4px;
  color: #2b3b5a;
  font-size: clamp(13px, 3.3vw, 15px);
}

/* 注意書き */
.pt-info-note {
  margin: 0;
  color: #6c7a99;
  font-size: clamp(11px, 3vw, 13px);
}




/* 上段配置 */

.pplan-inner {
  background: #10b981;
  border-radius: 18px;
  padding: 18px 28px 20px;
  color: #fff;
}

.pplan-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* 左：タイトル */
.pplan-left {
  min-width: 0;
}

.pplan-headline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.pplan-moon {
  font-size: clamp(20px, 4vw, 26px);
}

.pplan-title {
  font-weight: 800;
  font-size: clamp(20px, 4.4vw, 28px);
  letter-spacing: 0.04em;
}

.pplan-sub {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: clamp(13px, 3.4vw, 16px);
}


/* 下段：情報エリア */
.pplan-bottom {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.pplan-info {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: clamp(13px, 3.3vw, 15px);
}

.pplan-bolt {
   color: #fff;
}

.pplan-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  border-radius: 0.7em;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-weight: 600;
  font-size: clamp(12px, 3.2vw, 14px);
  text-decoration: none;
}

.wbhunt-chip--ghost {
  background: rgba(255, 255, 255, 0.1);
}

/* レスポンシブ */
@media (max-width: 640px) {
  .pplan-inner {
    padding: 16px 16px 18px;
  }

  .pplan-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}



/* ラッパー */
.purch-wrap {
  margin: 0 auto;
  padding: 0px 0;
}

/* 各レースカード */
.purch-race {
  background: #ffffff;
  border-radius: 22px;
  border: 2px solid #09b46b;
  margin-bottom: 20px;
  overflow: hidden;
}

.purch-race2 {
  background: #ffffff;
  border-radius: 22px;
  border: 2px solid #a045f7;
  margin-bottom: 20px;
  overflow: hidden;
}

/* 上部ヘッダー */
.purch-head {
  background: #09b46b;
  padding: 16px 10px 18px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  color: #ffffff;
}

.purch-head2 {
  background: #a045f7;
  padding: 16px 10px 18px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  color: #ffffff;
}


.purch-head-right {
  align-self: flex-start;
}


.purch-open-time {
  font-size: clamp(12px, 3.4vw, 18px);
  font-weight: 700;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.purch-head-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.purch-head-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 2px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  font-size: clamp(12px, 3.4vw, 14px);
  font-weight: 700;
}

.purch-head-course-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 10R / 12R の大きなボックス */
.purch-head-course-r {
  width: 80px;
  height: 80px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(26px, 7vw, 32px);
  font-weight: 800;
}

.purch-head-course-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.purch-head-course-name {
  font-size: clamp(24px, 5vw, 30px);
  line-height: 1.0;
  font-weight: 800;
}

.purch-head-course-time {
  font-size: clamp(14px, 3.6vw, 16px);
  font-weight: 700;
}

/* 右上バッジ（コロガシ用） */
.purch-head-badge {
  padding: 10px 14px;
  border-radius: 2.0em;
  background: #ffffff;
  color: #00a95c;
  font-size: clamp(12px, 3.4vw, 14px);
  font-weight: 700;
  text-align: center;
  line-height: 1.4;margin-top: 10px;
}

.purch-head-badge2 {
  padding: 10px 14px;
  border-radius: 2.0em;
  background: #ffffff;
  color: #a045f7;
  font-size: clamp(12px, 3.4vw, 14px);
  font-weight: 700;
  text-align: center;
  line-height: 1.4;margin-top: 10px;
}

/* 共通ブロック本体 */
.purch-block {
  padding: 18px 2% 20px;
}

/* 見出し（◎ 推奨買い目） */
.purch-block-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

.purch-block-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  color: #09b46b;
}

.purch-block-icon svg {
  display: block;
}

.purch-block-icon2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  color: #a045f7;
}

.purch-block-icon2 svg {
  display: block;
}

.purch-block-heading {
  font-size: clamp(16px, 4.2vw, 18px);
  font-weight: 800;
  color: #253146;
}

/* 買い目カード */
.purch-bet-card {
  background: #fbfbfb;
  border-radius: 16px;
  padding: 14px 14px 12px;
  border: 2px solid #e4e8ef;
  margin-bottom: 20px;
}

.purch-bet-card-main {
  background: #fff5cf;
  border-color: #f3cf69;
  position: relative;
  margin-top: 6px;
}

.purch-bet-main-tag {
  position: absolute;
  top: -16px;
  left: 0px;
  padding: 4px 16px;
  border-radius: 999px;
  background: #ffb52d;
  color: #ffffff;
  font-size: clamp(12px, 3.4vw, 14px);
  font-weight: 700;
}

/* 行レイアウト */
.purch-bet-row {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr 1.2fr;
  column-gap: 12px;
  align-items: center;
}

.purch-bet-col {
  text-align: left;
}

.purch-bet-col-center {
  text-align: center;
}

.purch-bet-col-right {
  text-align: right;
}

/* ラベル・数字 */
.purch-bet-label {
  font-size: clamp(11px, 3.2vw, 13px);
  color: #646b80;
  margin-bottom: 4px;
}

.purch-bet-numbers {
  font-size: clamp(18px, 5.4vw, 30px);
  font-weight: 800;
  letter-spacing: 0.16em;
}

.purch-bet-rate {
  font-size: clamp(18px, 4.8vw, 22px);
  font-weight: 800;
  color: #00a95c;
}

.purch-bet-rate-main {
  color: #00a95c;
}

.purch-bet-rate2 {
  font-size: clamp(18px, 4.8vw, 22px);
  font-weight: 800;
  color: #a045f7;
}

.purch-bet-rate-main2 {
  color: #a045f7;
}

.purch-bet-money {
  font-size: clamp(18px, 4.8vw, 22px);
  font-weight: 800;
  color: #d90000;
}

.purch-bet-money-em {
  font-size: clamp(15px, 4vw, 22px);
}

/* ヒント／注意ボックス */
.purch-hint-box {
  margin-top: 10px;
  padding: 12px 12px;
  border-radius: 18px;
  border: 2px solid #d2e3ff;
  background: #f4f8ff;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.purch-hint-box-note {
  margin-top: 8px;
}

.purch-hint-icon {
  font-size: clamp(16px, 4.2vw, 18px);
  margin-top: 2px;
}

.purch-hint-text {
  margin: 0;
  font-size: clamp(12px, 3.4vw, 14px);
  color: #264078;
  line-height: 1.6;
}

/* 全体ボックス */
.ticket-box {
  background: linear-gradient(135deg, #2c80ff, #1e6bff);
  padding: 26px;
  border-radius: 20px;
  color: #ffffff;
  margin: 16px 0;
}

/* 見出し */
.ticket-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}

.ticket-head-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ticket-head-icon svg {
  width: 26px;
  height: 26px;
  stroke: #ffffff;
}

.ticket-head-text {
  font-size: clamp(18px, 3.6vw, 22px);
  font-weight: 700;
}

/* リンクボタン */
.ticket-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 16px;
}

.ticket-btn {
  display: block;
  text-align: center;
  background: #ffffff;
  color: #1e6bff;
  padding: 18px 0;
  border-radius: 14px;
  font-size: clamp(16px, 3.4vw, 18px);
  font-weight: 600;
  text-decoration: none;
  transition: 0.2s;
}

.ticket-btn:hover {
  background: #eef4ff;
}

/* 注意書き */
.ticket-note {
  text-align: center;
  font-size: clamp(12px, 3vw, 14px);
  opacity: 0.9;
}

/* ▼ スマホ（1列） */
@media (max-width: 600px) {
  .ticket-links {
    grid-template-columns: 1fr;
  }
}

/* 警告ボックス */
.purch-warning-box {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #fff5f5;
  border: 1px solid #f5b5b5;
  border-radius: 12px;
  padding: 18px 20px;
}

/* アイコンが改行されず常に横並びになるように */
.purch-warning-icon {
  flex-shrink: 0;             /* アイコンが潰れない */
  display: flex;
  align-items: center;        /* 中央揃え */
  justify-content: center;
  white-space: nowrap;        /* ← 改行を許さない */
}

.purch-warning-icon svg {
  width: 28px;
  height: 28px;
  stroke: #e74c3c;            /* 赤系で統一 */
}

.purch-warning-text {
  flex: 1;
}

.purch-warning-title {
  font-weight: 700;
  font-size: clamp(16px, 3.8vw, 18px);
  margin-bottom: 4px;
  white-space: nowrap;
  color: #7f1d1d;
}

.purch-warning-text p {
  margin: 0;
  line-height: 1.6;
  font-size: clamp(14px, 3.4vw, 15px);
  color: #b34444;
}

/* ボタンを並べるラッパー */
.link-badge-wrap {
  display: flex;
  flex-wrap: wrap;            /* 画面が狭いとき折り返し */
  gap: 10px;                  /* ボタンの間隔 */
  margin: 10px 0;
}

/* 共通ボタンデザイン */
.link-badge {
  display: inline-block;
  padding: 10px 18px;
  color: #fff;
  font-weight: 700;
  border-radius: 12px;
  font-size: clamp(13px, 3.4vw, 15px);
  text-decoration: none;
  white-space: nowrap;        /* 改行させない */
  transition: opacity 0.2s ease;
}

/* 色バリエーション */
.link-badge.green {
  background: #00a86b;
}

.link-badge.green2 {
  background: #00a86b;
  opacity: 0.5;
}

.link-badge.purple {
  background: #a045f7;
}

.link-badge.purple2 {
  background: #a045f7;
  opacity: 0.5;
}

.link-badge:hover {
  background: #999;
  color: #fff;
}



/* 全体 */
.settings-page {
  margin: 0 auto;
  padding: 24px 0;
}

/* 内側ラッパー */
.settings-inner {
  display: flex;
  flex-direction: column; /* モバイルデフォルトは縦積み */
  gap: 16px;
}

/* メニュー */
.settings-nav {
  display: flex;
  gap: 8px;
  overflow-x: auto;          /* スマホで横スクロール可 */
  padding-bottom: 4px;
}

.settings-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  border: none;
  background: #f3f4f6;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  font-weight: 600;
  font-size: clamp(13px, 3.4vw, 14px);
}

.settings-nav-item.is-active {
  background: #10b981;
  color: #ffffff;
}

.settings-nav-icon {
  font-size: clamp(14px, 4vw, 16px);
}

/* コンテンツ */
.settings-content {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 14px;
}

/* パネル切り替え */
.settings-panel {
  display: none;
}

.settings-panel.is-active {
  display: block;
}

/* ▼ PCレイアウト（横並び） */
@media (min-width: 960px) {
  .settings-inner {
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
  }

  /* メニューをカードっぽく */
  .settings-nav {
    flex-direction: column;
    flex: 0 0 260px;
    overflow: visible;
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    padding: 0;   
    gap: 0;
  }

  .settings-nav-item {
    width: 100%;
    justify-content: flex-start;
    background: transparent;
    border-radius: 0;
    padding: 12px 18px;
    border-left: 4px solid transparent;
    color: #374151;
    font-weight: 500;
  }

  .settings-nav-item + .settings-nav-item {
    border-top: 1px solid #f3f4f6;
  }

  .settings-nav-item:first-child {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

  .settings-nav-item:last-child {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }

  /* アクティブ行 */
  .settings-nav-item.is-active {
    background: #ecfdf3;              /* 薄いグリーン */
    color: #10b981;
    border-left-color: #10b981;
    font-weight: 700;
  }

  .settings-nav-icon {
    width: 22px;
    display: inline-flex;
    justify-content: center;
    font-size: 16px;
  }

  /* 右側コンテンツ */
  .settings-content {
    flex: 1;
    padding: 24px 28px;
    border-radius: 16px;
    background: #ffffff;
  }
}


/* プロフィール共通ブロック */

.settings-section-header {
  margin-bottom: 24px;
}

.settings-section-title {
  margin: 0 0 4px;
  font-size: clamp(18px, 3.4vw, 24px);
  font-weight: 700;
}

.settings-section-desc {
  margin: 0;
  font-size: clamp(12px, 3.2vw, 14px);
  color: #6b7280;
}

/* アバター部分 */
.settings-profile-avatar-block {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.settings-profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 999px;
  background: #10b981;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(26px, 6vw, 32px);
  font-weight: 700;
}

.settings-profile-avatar-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.settings-profile-avatar-note {
  margin: 0;
  font-size: clamp(11px, 2.8vw, 13px);
  color: #6b7280;
}

/* カード枠（フォームの箱） */
.settings-card {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 20px 20px 22px;
}

/* フォーム部品 */
.settings-form-group {
  margin-bottom: 18px;
}

.settings-label,
.settings-label-inline {
  display: block;
  margin-bottom: 6px;
  font-size: clamp(13px, 3.2vw, 14px);
  font-weight: 600;
  color: #374151;
}

.settings-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  font-size: clamp(13px, 3.4vw, 14px);
  color: #111827;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.settings-input:focus {
  border-color: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15);
}

/* 保有ポイントボックス */
.settings-points-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #facc15;
  background: linear-gradient(90deg, #fff7d6, #fff3bf);
  box-sizing: border-box;
}

.settings-points-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.settings-points-icon {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #fbbf24;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(13px, 3.4vw, 14px);
  color: #ffffff;
}

.settings-points-value {
  font-size: clamp(18px, 4.5vw, 20px);
  font-weight: 700;
  color: #92400e;
}

.settings-points-unit {
  font-size: clamp(12px, 3.2vw, 13px);
  color: #b45309;
}

/* ボタン */
.settings-form-actions {
  margin-top: 12px;
}

.settings-btn-primary,
.settings-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: clamp(13px, 3.4vw, 14px);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease, box-shadow 0.15s ease;
}

/* メインの保存ボタン */
.settings-btn-primary {
  background: #10b981;
  border-color: #10b981;
  color: #ffffff;
}

.settings-btn-primary:hover {
  background: #059669;
  border-color: #059669;
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.25);
}

/* 画像変更ボタン（アウトライン） */
.settings-btn-outline {
  background: #ffffff;
  border-color: #d1d5db;
  color: #374151;
}

.settings-btn-outline:hover {
  border-color: #10b981;
  color: #059669;
}

/* 通知設定 共通 */
.settings-title {
  margin: 0 0 24px;
  font-size: clamp(18px, 4vw, 22px);
  font-weight: 700;
}

.settings-section-notify {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  margin-bottom: 16px;
}

/* 各行 */
.notify-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid #f1f5f9;
}

.notify-row:last-child {
  border-bottom: none;
}

.notify-text {
  flex: 1;
}

.notify-label {
  font-size: clamp(14px, 3.4vw, 15px);
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 4px;
}

.notify-desc {
  font-size: clamp(12px, 3.2vw, 13px);
  color: #64748b;
}

/* iOS風スイッチ */
.notify-switch {
  position: relative;
  display: inline-flex;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
}

.notify-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.notify-switch-slider {
  position: absolute;
  inset: 0;
  background: #e5e7eb;
  border-radius: 999px;
  transition: background 0.2s ease;
}

.notify-switch-slider::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #ffffff;
  left: 3px;
  top: 3px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.3);
  transition: transform 0.2s ease;
}

/* ON 状態 */
.notify-switch input:checked + .notify-switch-slider {
  background: #16a34a;
}

.notify-switch input:checked + .notify-switch-slider::before {
  transform: translateX(20px);
}

/* スマホ調整 */
@media (max-width: 640px) {
  .notify-row {
    padding: 14px 16px;
  }
}


/* セキュリティ共通 */
.settings-section-security {
  margin-top: 24px;
}

/* フォーム行（プロフィールと共通でOK） */
.settings-form-row {
  margin-bottom: 16px;
}

.settings-label {
  display: block;
  margin-bottom: 6px;
  font-size: clamp(13px, 3.6vw, 14px);
  font-weight: 600;
  color: #374151;
}

.settings-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  font-size: clamp(13px, 3.6vw, 14px);
}

.settings-input:focus {
  outline: none;
  border-color: #22c55e;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.25);
}

/* ボタン（プロフィールと共通でOK） */
.settings-actions {
  margin-top: 16px;
}

.settings-save-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border-radius: 999px;
  border: none;
  background: #22c55e;
  color: #ffffff;
  font-weight: 700;
  font-size: clamp(13px, 3.8vw, 15px);
  cursor: pointer;
}

.settings-save-btn:hover {
  background: #16a34a;
}

/* 2段階認証ブロック */
.settings-section-twofa {
  margin-top: 40px;
  border-top: 1px solid #e5e7eb;
  padding-top: 24px;
}

.settings-subtitle {
  margin: 0 0 12px;
  font-size: clamp(16px, 4vw, 18px);
  font-weight: 700;
}

.twofa-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 12px;
  background: #f9fafb;
  border: 1px dashed #d1d5db;
}

.twofa-title {
  font-size: clamp(14px, 3.6vw, 15px);
  font-weight: 600;
}

.twofa-desc {
  margin: 4px 0 0;
  font-size: clamp(12px, 3.4vw, 13px);
  color: #6b7280;
}

.twofa-btn {
  padding: 8px 18px;
  border-radius: 999px;
  border: none;
  background: #0f172a;
  color: #ffffff;
  font-size: clamp(12px, 3.4vw, 14px);
  font-weight: 600;
  cursor: pointer;
}

.twofa-btn:hover {
  background: #020617;
}

/* スマホ時：2FAカードを縦並びに */
@media (max-width: 640px) {
  .twofa-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .twofa-btn {
    align-self: flex-end;
  }
}

/* ▼ 支払い情報 共通 */
.payment-section {
  margin-top: 24px;
}

/* 小見出し（ほかタブでも流用OK） */
.settings-subtitle-sm {
  margin: 0 0 8px;
  font-size: clamp(14px, 3.8vw, 16px);
  font-weight: 700;
}

/* 登録済みカードエリア */
.payment-card-empty {
  border-radius: 12px;
  border: 1px dashed #d1d5db;
  background: #f9fafb;
  padding: 32px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.payment-card-icon svg {
  width: 40px;
  height: 40px;
  color: #9ca3af;
}

.payment-card-text {
  margin: 0;
  font-size: clamp(13px, 3.6vw, 14px);
  color: #6b7280;
}

.payment-card-btn {
  margin-top: 4px;
  padding: 10px 22px;
  border-radius: 10px;
  border: none;
  background: #10b981;
  color: #ffffff;
  font-weight: 700;
  font-size: clamp(13px, 3.8vw, 15px);
  cursor: pointer;
}

.payment-card-btn:hover {
  background: #16a34a;
}

/* 購入履歴リスト */
.payment-history {
  margin-top: 32px;
}

.payment-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.payment-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
}

.payment-history-main {
  display: flex;
  flex-direction: column;
}

.payment-history-title {
  font-size: clamp(14px, 3.8vw, 15px);
  font-weight: 600;
}

.payment-history-date {
  margin-top: 2px;
  font-size: clamp(12px, 3.4vw, 13px);
  color: #6b7280;
}

.payment-history-amount {
  font-size: clamp(14px, 3.8vw, 15px);
  font-weight: 700;
}

/* スマホ調整 */
@media (max-width: 640px) {
  .payment-card-empty {
    padding: 24px 12px;
  }

  .payment-history-item {
    padding: 12px 14px;
  }
}


/* リンクリスト */
.settings-link-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
}

.settings-link-item + .settings-link-item {
  border-top: 1px solid #e5e7eb;
}

.settings-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  text-decoration: none;
  color: #111827;
  font-size: clamp(14px, 3.8vw, 15px);
}

.settings-link:hover {
  background: #f3f4f6;
}

.settings-link-label {
  flex: 1;
}

.settings-link-arrow svg {
  width: 18px;
  height: 18px;
  color: #9ca3af;
}

/* ボタンエリア */
.settings-others-actions {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 共通ボタンスタイル（フル幅） */
.settings-btn {
  width: 100%;
  padding: 12px 0;
  border-radius: 8px;
  border: none;
  font-weight: 700;
  font-size: clamp(14px, 3.8vw, 15px);
  cursor: pointer;
}

/* ログアウト（紺） */
.settings-btn-logout {
  background: #020617;
  color: #ffffff;
}

.settings-btn-logout:hover {
  background: #02041a;
}

/* 退会する（赤） */
.settings-btn-danger {
  background: #ef4444;
  color: #ffffff;
}

.settings-btn-danger:hover {
  background: #dc2626;
}

/* スマホ調整 */
@media (max-width: 640px) {
  .settings-link {
    padding: 12px 14px;
  }
}


/* ▼ メッセージ一覧 ページネーション */
.msg-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 24px 0 8px;
  flex-wrap: wrap;
}

.msg-page {
  min-width: 36px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #4b5563;
  text-decoration: none;
  text-align: center;
  font-size: clamp(12px, 3.4vw, 14px);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.msg-page:hover {
  background: #eff6ff;
  border-color: #10b981;
  color: #10b981;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.08);
}

/* 現在ページ */
.msg-page.is-current {
  background: #10b981;
  border-color: #10b981;
  color: #ffffff;
}

/* 前へ / 次へ */
.msg-page-prev,
.msg-page-next {
  padding: 8px 14px;
}

/* … 表示用 */
.msg-page-dots {
  border: none;
  background: transparent;
  cursor: default;
}

/* 無効状態（1ページ目の「前へ」など） */
.msg-page.is-disabled {
  opacity: 0.4;
  pointer-events: none;
  background: #f3f4f6;
}

.msg-page.num {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}


.msg-page.num:hover {
  background: #eff6ff;
  border-color: #10b981;
  color: #10b981;
}


.msg-page.num.is-current {
  background: #10b981;
  border-color: #10b981;
  color: #fff;
}

/* スマホで少し詰める */
@media (max-width: 480px) {
  .msg-pagination {
    gap: 4px;
  }

  .msg-page {
    padding: 8px 10px;
  }
}

/* ---------- 全体 ---------- */
.msg-detail-wrapper {
  padding: 16px 0;
}

.msg-detail {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
}

/* ---------- ヘッダー ---------- */
.msg-detail-head {
  padding: 20px 24px;
  border-bottom: 1px solid #f0f2f5;
}

.msg-detail-head-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.msg-detail-title {
  margin: 0;
  font-size: clamp(18px, 3.2vw, 22px);
  font-weight: 700;
  color: #111;
}

/* 未読バッジ */
.msg-badge-unread {
  background: #2563eb;
  color: #fff;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  display: inline-block;
}

.msg-badge-unread2 {
  background: #ef4444;
  color: #fff;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  display: inline-block;
}

/* 送信者・日時 */
.msg-detail-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  font-size: 14px;
  color: #6b7280;
}

.msg-detail-from {
  font-weight: 600;
}

/* ---------- 本文 ---------- */
.msg-detail-body {
  padding: 28px 24px;
  color: #333;
  font-size: 15px;
  line-height: 1.8;
}

/* ---------- ボタン ---------- */
.msg-detail-footer {
  padding: 16px 24px 24px;
  border-top: 1px solid #f0f2f5;
  display: flex;
  gap: 12px;
}

.msg-btn {
  min-width: 90px;
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
}

.msg-btn-primary {
  background: #10b981;
  color: #fff;
}

.msg-btn-primary:hover {
  background: #d1d5db;
}

.msg-btn-danger {
  background: #fff;
  border-color: #d1d5db;
  color: #b91c1c;
}

.msg-btn-danger:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}

/* ---------- スマホ対応 ---------- */
@media (max-width: 640px) {
  .msg-detail {
    border-radius: 10px;
  }

  .msg-detail-head,
  .msg-detail-body,
  .msg-detail-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .msg-detail-footer {
    flex-direction: column;
  }

  .msg-btn {
    width: 100%;
  }
}


.hunt-banner {
  width: 100%;
  background: linear-gradient(90deg, #dd2828 0%, #f87118 100%);
  padding: 28px 20px;
  border-radius: 16px;
  margin: 20px auto;
  display: flex;
  justify-content: center;
  align-items: center;  /* 縦中央揃え */
  text-align: center;
  position: relative;   /* ← シャイン用 */
  overflow: hidden;     /* ← はみ出した光を隠す */
}

/* 光がスーッと流れるアニメーション */
.hunt-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg);
  pointer-events: none;
  animation: huntShine 1.5s infinite;
}

/* シャインの動き */
@keyframes huntShine {
  0% {
    left: -40%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  60% {
    left: 120%;
    opacity: 1;
  }
  100% {
    left: 120%;
    opacity: 0;
  }
}

.hunt-banner-inner {
  color: #fff;
  text-shadow: 0 3px 6px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hunt-banner-title {
  font-size: clamp(38px, 5.2vw, 190px);
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: 2px;
}

.hunt-banner-sub {
  font-size: clamp(20px, 3.2vw, 50px);
  font-weight: 700;
  line-height: 1.2;
}



footer {
	width:100%;
	text-align:center;
	padding:2px 0 0;
	background: #1a202c;
	color: #fff;
}

.footer_innner{
	max-width: 1100px;
	margin: 0 auto;
}

.f-logo{
	margin: 10px auto;
	width: 140px;
}

footer ul {
	margin: 10px;
}

footer li {
	float: left;
	width: calc(100% / 2);
	font-size: clamp(14px, 3.5vw, 16px); 
}

footer li a {
	text-align: center;
	color: #fff;
	padding: 10px 5px;
	display:block;
	text-decoration:none;
	text-indent:5px;
	font-weight:bold;
	border-radius: 5.0em;
}

.f-txt{
	margin: 20px auto 10px;
	font-size: clamp(10px, 2.5vw, 14px); 
	text-align:left;
	padding: 0 10px;
}

.f-txt p{
	padding-left:1em;
	text-indent:-1em;
}


.copyright{
	padding: 15px 0;
	text-align:center;
}


@media (min-width: 768px){

 .spbr{
display: none;
}

body {
	height: 100%;
}

#wrapper {
	margin-top: 60px;
}

#main{
	margin: 0 auto;
	overflow:hidden;
}

.logo{
	width: 88px;
	margin-top: 5px;
	margin-left: 6px;
}

header{
	height: 60px;

}

.container,.f-container{
	padding: 30px 15px;
}

.hero_flex01{
width: 50%;
padding-right: 25px;

}

.hero_flex02{
width: 50%;
padding-left: 25px;
margin-top: 90px;
}

.login{
	width: 160px;
	margin-top: 15px;
	margin-right: 12px;
}

.live-indicator {
	width: 14px;
	height: 14px;
}

.inpr,.inpr2{
	height: 62px;
}

.send,.send2{
	height: 62px;
}


.line_btn{
	font-size: 18px; 
}


.line_btn a{
	padding: 18px 0;
}

.line_icon{
	width: 30px;
}

.hero_info{
	padding: 40px 30px;
}

.stat-card{
	width: 25%;
	margin: 10px 0;
}

.f-logo{
	margin: 10px auto;
	width: 180px;
}


footer li {
	float: left;
	width: calc(100% / 4);
}
}

@media (min-width: 1024px){

}