/* ============================================================
   ハッケンの森 追加スタイル
   main.css の変数・section/card/contact-form クラスを流用し、
   ここでは新規に必要になった分だけを追加しています。
   ============================================================ */

/* フォントはサイト全体で統一済み（main.css の --font-jp / 見出しh1-h6 のルールを参照） */

/* ヒーロー サブコピー */
.sdd-hero__subtitle{
	position:relative;
	z-index:1;
	margin:10px 0 0;
	font-size:16px;
	color:var(--color-text-on-dark);
	opacity:.92;
}

/* ハッケンの森でできること：角丸カード＋アイコン＋丸ボタン（学ぶ/つながる/相談する） */
.hakken-discover-grid{
	display:grid;
	gap:20px;
	grid-template-columns:repeat(1,1fr);
}
@media (min-width:769px){
	.hakken-discover-grid{grid-template-columns:repeat(3,1fr)}
}
.hakken-discover-card{
	display:block;
	position:relative;
	border-radius:28px;
	padding:26px 24px 34px;
	text-decoration:none;
	transition:transform .2s ease;
}
.hakken-discover-card:hover{
	opacity:1;
	transform:translateY(-3px);
}
.hakken-discover-grid .hakken-discover-card:nth-child(1){background:var(--color-accent-green);}
.hakken-discover-grid .hakken-discover-card:nth-child(2){background:var(--color-primary);}
.hakken-discover-grid .hakken-discover-card:nth-child(3){background:var(--color-accent-pink);}
.hakken-discover-card__title{
	display:block;
	font-family:'Zen Maru Gothic', var(--font-jp);
	font-size:24px;
	font-weight:900;
	color:#fff;
}
.hakken-discover-card__illust{
	display:flex;
	align-items:center;
	justify-content:center;
	height:110px;
	margin-top:20px;
	border-radius:18px;
	border:2px dashed rgba(255,255,255,.5);
	background:rgba(255,255,255,.12);
	font-size:40px;
}
.hakken-discover-card__illust--photo{
	border:none;
	background-size:cover;
	background-position:center;
}
.hakken-discover-card__arrow{
	position:absolute;
	bottom:-18px;right:22px;
	width:46px;height:46px;
	border-radius:50%;
	background:#fff;
	color:var(--color-primary);
	display:flex;align-items:center;justify-content:center;
	font-size:18px;
	box-shadow:0 4px 10px rgba(0,0,0,.2);
}

/* 会員限定バッジ（card__badge の亜種） */
.card__badge--member{
	background:var(--color-accent-pink);
	color:#fff;
}

/* カテゴリータグ（カード本文内、色はカテゴリーごとに動的に指定） */
.card__tag{
	display:inline-flex;
	align-items:center;
	gap:5px;
	align-self:flex-start;
	padding:4px 12px;
	border-radius:999px;
	color:#fff;
	font-size:11px;
	font-weight:700;
	letter-spacing:.02em;
}

/* 学ぶ：カラフルなアイコンタイル・ナビゲーション */
.hakken-tile-nav{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:12px;
	margin:0 0 36px;
}
@media (min-width:600px){
	.hakken-tile-nav{grid-template-columns:repeat(4,1fr)}
}
.hakken-tile{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:8px;
	text-decoration:none;
	padding:14px 8px;
	border-radius:14px;
	transition:transform .2s ease, background .2s ease;
}
.hakken-tile:hover{
	background:#fff;
	transform:translateY(-3px);
	box-shadow:0 8px 20px rgba(46,42,79,.10);
}
.hakken-tile__icon{
	width:56px;
	height:56px;
	border-radius:16px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:24px;
	color:#fff;
	box-shadow:0 3px 8px rgba(0,0,0,.12);
}
.hakken-tile__label{
	font-size:12.5px;
	font-weight:700;
	color:var(--color-primary);
	text-align:center;
}

/* 会員になるとできること */
.hakken-member-card{
	max-width:460px;
	margin:0 auto;
	padding:36px 32px 32px;
	background:#fff;
	border:2px solid var(--color-bg-alt);
	border-radius:20px;
	text-align:center;
	box-shadow:0 4px 16px rgba(46,42,79,.06);
}
.hakken-member-card__badge{
	display:inline-block;
	margin:0 0 20px;
	padding:6px 18px;
	background:var(--color-bg-alt);
	color:var(--color-primary);
	font-size:13px;
	font-weight:700;
	border-radius:999px;
}
.hakken-member-list{
	margin:0 auto 28px;
	padding:0;
	list-style:none;
	text-align:left;
}
.hakken-member-list li{
	position:relative;
	padding:6px 0 6px 30px;
	font-size:15px;
}
.hakken-member-list li::before{
	content:"✓";
	position:absolute;
	left:0;
	color:var(--color-accent-green-dark);
	font-weight:700;
}
.hakken-member-box__cta{
	display:inline-block;
	padding:14px 32px;
	background:var(--color-primary);
	color:#fff;
	border-radius:999px;
	font-weight:700;
	text-decoration:none;
	transition:background .2s ease;
}
.hakken-member-box__cta--wide{
	display:block;
	width:100%;
	box-sizing:border-box;
}
.hakken-member-box__cta:hover{background:var(--color-primary-dark)}
.hakken-member-box__login{
	margin:16px 0 0;
	font-size:13px;
	color:var(--color-muted);
}
.hakken-member-box__login a{color:var(--color-primary);text-decoration:underline}

/* 会員さんの声 */
.hakken-voice__name{
	margin:12px 0 0;
	font-size:13px;
	font-weight:700;
	color:var(--color-primary);
}

/* カテゴリータブ（学ぶ／つながる／相談する） */
.hakken-cat-tabs{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin:0 0 32px;
}
.hakken-cat-tabs__item{
	padding:8px 18px;
	border:1px solid var(--color-border);
	border-radius:999px;
	font-size:13px;
	font-weight:600;
	color:var(--color-text);
	text-decoration:none;
	background:#fff;
}
.hakken-cat-tabs__item.is-active{
	background:var(--color-primary);
	border-color:var(--color-primary);
	color:#fff;
}

/* 詳細ページ */
/* 詳細ページ：カテゴリーのパンくず */
.hakken-hero-crumbs{
	text-transform:none;
	letter-spacing:normal;
	font-size:12.5px;
}
.hakken-crumb{
	color:var(--color-accent-green);
	text-decoration:none;
	border-bottom:1px solid transparent;
}
.hakken-crumb:hover{border-bottom-color:var(--color-accent-green)}

.hakken-badge--member{
	display:inline-block;
	margin-left:8px;
	padding:3px 10px;
	background:var(--color-accent-pink);
	color:#fff;
	font-size:11px;
	font-weight:700;
	border-radius:999px;
	vertical-align:middle;
}
.hakken-single__video{margin:0 0 20px}
.hakken-video-embed{
	position:relative;
	width:100%;
	aspect-ratio:16/9;
	margin:0 0 24px;
	border-radius:var(--radius);
	overflow:hidden;
	background:#000;
}
.hakken-video-embed--small{
	max-width:150px;
	display:inline-block;
	vertical-align:top;
	margin-right:12px;
}
.hakken-video-embed--medium{
	max-width:320px;
	display:inline-block;
	vertical-align:top;
	margin-right:12px;
}
.hakken-video-embed--large{
	max-width:100%;
}
.hakken-video-embed__frame{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	padding:0;
	border:0;
	cursor:pointer;
	background:none;
}
.hakken-video-embed__thumb{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}
.hakken-video-embed__play{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:64px;
	height:64px;
	border-radius:50%;
	background:rgba(0,0,0,.62);
	color:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:22px;
	transition:background .2s ease, transform .2s ease;
}
.hakken-video-embed__frame:hover .hakken-video-embed__play{
	background:var(--color-primary);
	transform:translate(-50%,-50%) scale(1.08);
}
.hakken-video-embed--small .hakken-video-embed__play{
	width:32px;
	height:32px;
	font-size:14px;
}
.hakken-video-embed__iframe{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	border:0;
}
.hakken-single__video a{
	display:inline-block;
	padding:10px 20px;
	background:var(--color-primary);
	color:#fff;
	border-radius:999px;
	font-weight:700;
	text-decoration:none;
}
.hakken-single__download{margin-top:28px}
.hakken-single__download a{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:16px 32px;
	background:var(--color-accent-pink);
	color:#fff;
	border-radius:999px;
	font-weight:800;
	font-size:16px;
	text-decoration:none;
	transition:background .15s ease;
}
.hakken-single__download a::before{
	content:"⬇";
	font-size:15px;
}
.hakken-single__download a:hover{
	background:var(--color-accent-pink-dark);
	color:#fff;
	opacity:1;
}

/* 会員限定ペイウォール */
.hakken-paywall{
	margin-top:24px;
	padding:32px 28px;
	text-align:center;
	background:var(--color-bg-alt);
	border:1px solid var(--color-border);
	border-radius:var(--radius);
}
.hakken-paywall__title{
	margin:0 0 10px;
	font-size:18px;
	font-weight:800;
	color:var(--color-primary);
}
.hakken-paywall__body{
	margin:0 0 20px;
	font-size:14px;
	color:var(--color-muted);
	line-height:1.8;
}
.hakken-paywall__actions{
	display:flex;
	flex-wrap:wrap;
	gap:12px;
	justify-content:center;
}
.hakken-paywall__signup{
	padding:12px 26px;
	background:var(--color-primary);
	color:#fff;
	border-radius:999px;
	font-weight:700;
	text-decoration:none;
}
.hakken-paywall__login{
	padding:12px 26px;
	border:1px solid var(--color-primary);
	color:var(--color-primary);
	border-radius:999px;
	font-weight:700;
	text-decoration:none;
}

/* ---- ヘッダー：ログインボタン ---- */
.site-header__right{
	display:flex;
	align-items:center;
	gap:12px;
}
.site-header__login-btn{
	display:inline-block;
	padding:8px 18px;
	background:var(--color-accent-green);
	color:#fff;
	font-size:13px;
	font-weight:700;
	border-radius:999px;
	text-decoration:none;
	white-space:nowrap;
	transition:background .2s ease, transform .2s ease;
}
.site-header__login-btn:hover{
	background:var(--color-accent-green-dark);
	transform:translateY(-1px);
}
@media (min-width:1080px){
	.primary-nav{ margin-left:auto; }
}

/* 会員の声：種別チップ（サムネイルが無いカードなので absolute バッジは使わない） */
.hakken-voice__type{
	display:inline-block;
	margin:0 0 12px;
	padding:4px 12px;
	color:#fff;
	font-size:11px;
	font-weight:700;
	border-radius:999px;
}
.card--voice{
	position:relative;
	overflow:hidden;
}
.hakken-voice__quote-mark{
	position:absolute;
	top:2px;
	right:20px;
	font-size:64px;
	font-family:Georgia,serif;
	line-height:1;
	opacity:.18;
	pointer-events:none;
}

/* ヘッダー：ログアウトボタン（ログインボタンと区別するため落ち着いた色に） */
.site-header__login-btn--logout{
	background:var(--color-muted);
}
.site-header__login-btn--logout:hover{
	background:var(--color-text);
}

/* 詳細ページ：画像ブロック（本文中に自由な順番で差し込まれる） */
.hakken-gallery__item{
	margin:0 12px 16px 0;
	vertical-align:top;
}
.hakken-gallery__item--small{
	display:inline-block;
	width:150px;
}
.hakken-gallery__item--medium{
	display:inline-block;
	width:320px;
	max-width:100%;
}
.hakken-gallery__item--large{
	display:block;
	width:100%;
	margin-right:0;
}
.hakken-gallery__item img{
	width:100%;
	height:auto;
	border-radius:var(--radius);
	display:block;
}
.hakken-gallery__item figcaption{
	margin-top:6px;
	font-size:12.5px;
	color:var(--color-muted);
	text-align:center;
}

/* 詳細ページ：動画タイトル（複数動画の見出し） */
.hakken-video-title{
	font-weight:700;
	margin:28px 0 10px;
	color:var(--color-primary);
}

/* ハッケンの森コンテンツ一覧のタイトル：下線ではなく、他のセクション見出しと
   揃えた左側の色帯スタイルにする（.archive-title は他ページとも共有のため、
   ここだけ上書きするよう専用クラスでスコープしている） */
.hakken-archive-header{
	text-align:left;
	margin-bottom:28px;
}
.hakken-archive-title.hakken-archive-title{
	display:block;
	border-bottom:none;
	border-left:5px solid var(--color-accent-green);
	padding:0 0 0 14px;
	margin:0;
}

/* ============================================================
   ヒーロー刷新（有機的な背景装飾＋数字で見せる特徴）
   ============================================================ */
.hakken-hero{
	position:relative;
	overflow:hidden;
	background:var(--color-bg-alt);
	padding:48px 0 70px;
}
.hakken-hero__blob{
	position:absolute;
	width:340px;
	height:340px;
	z-index:0;
	opacity:.9;
}
.hakken-hero__blob--1{top:-70px;left:-110px;}
.hakken-hero__blob--2{top:10px;right:-130px;width:300px;height:300px;opacity:.85;}
.hakken-hero__inner{
	position:relative;
	z-index:1;
	max-width:var(--container);
	margin:0 auto;
	padding:0 20px;
}
.hakken-hero__grid{
	display:flex;
	align-items:center;
	gap:48px;
	flex-wrap:wrap;
}
.hakken-hero__text{flex:1 1 380px;min-width:0;}
.hakken-hero__photo{flex:0 0 320px;max-width:100%;}
.hakken-hero__photo-inner{
	width:100%;
	aspect-ratio:4/5;
	border-radius:32px;
	background-color:#fff;
	background-size:cover;
	background-position:center;
	box-shadow:0 10px 30px rgba(46,42,79,.12);
}
.hakken-hero__photo-inner--placeholder{
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:64px;
	background:#fff;
}
.hakken-hero__eyebrow{
	display:inline-block;
	background:#fff;
	color:var(--color-accent-pink-dark);
	font-size:12px;
	font-weight:800;
	letter-spacing:.08em;
	padding:6px 18px;
	border-radius:999px;
	margin-bottom:18px;
}
.hakken-hero__title{
	font-size:clamp(24px,3.6vw,36px);
	line-height:1.55;
	font-weight:900;
	color:var(--color-primary);
	margin:0 0 16px;
}
.hakken-hero__sub{
	color:var(--color-muted);
	font-size:15px;
	line-height:1.8;
	margin:0 0 30px;
}
.hakken-hero__cta-row{display:flex;gap:14px;flex-wrap:wrap;}
.hakken-btn{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:14px 30px;
	border-radius:999px;
	font-weight:800;
	text-decoration:none;
	font-size:14px;
	transition:transform .15s ease, background .15s ease;
}
.hakken-btn--primary{background:var(--color-primary);color:#fff;}
.hakken-btn--primary:hover{background:var(--color-primary);opacity:1;transform:translateY(-2px);}
.hakken-btn--outline{background:#fff;color:var(--color-primary);border:2px solid var(--color-primary);}
.hakken-btn--outline:hover{opacity:1;transform:translateY(-2px);}

.hakken-hero__highlights{
	background:#fff;
	border-radius:28px;
	padding:24px 28px;
	display:flex;
	gap:26px;
	flex-wrap:wrap;
	margin-top:40px;
	box-shadow:0 6px 20px rgba(46,42,79,.06);
}
.hakken-hero__highlight{display:flex;align-items:flex-start;gap:10px;flex:1;min-width:180px;}
.hakken-hero__highlight-num{
	font-family:'Zen Maru Gothic', var(--font-jp);
	font-size:28px;
	font-weight:900;
	line-height:1;
	color:var(--color-accent-green-dark);
}
.hakken-hero__highlight:nth-child(2) .hakken-hero__highlight-num{color:var(--color-primary);}
.hakken-hero__highlight:nth-child(3) .hakken-hero__highlight-num{color:var(--color-accent-pink-dark);}
.hakken-hero__highlight-txt{font-size:13px;font-weight:700;line-height:1.5;padding-top:5px;color:var(--color-primary);}

@media (max-width:640px){
	.hakken-hero__grid{flex-direction:column-reverse;}
	.hakken-hero__photo{flex-basis:auto;width:70%;margin:0 auto;}
}

/* ============================================================
   どんな方に向いているか（番号付きカラーカード）
   ============================================================ */
.hakken-fit-grid{display:flex;gap:20px;flex-wrap:wrap;}
.hakken-fit-card{
	flex:1;min-width:220px;
	border-radius:28px;
	padding:28px 24px;
	color:#fff;
}
.hakken-fit-card:nth-child(1){background:var(--color-accent-green-dark);}
.hakken-fit-card:nth-child(2){background:var(--color-primary);}
.hakken-fit-card:nth-child(3){background:var(--color-accent-pink-dark);}
.hakken-fit-card__num{
	display:inline-flex;align-items:center;justify-content:center;
	width:36px;height:36px;border-radius:50%;
	background:rgba(255,255,255,.25);
	font-family:'Zen Maru Gothic', var(--font-jp);
	font-weight:800;font-size:15px;margin-bottom:16px;
}
.hakken-fit-card p{font-size:14px;line-height:1.8;margin:0;font-weight:700;}

/* ============================================================
   今月のおすすめ：見出し横の丸ボタン＋写真に重なる矢印
   ============================================================ */
.hakken-see-all{display:inline-flex;align-items:center;gap:10px;border-bottom:none !important;}
.hakken-see-all__circle{
	width:34px;height:34px;border-radius:50%;
	border:1.5px solid var(--color-accent-pink);
	display:inline-flex;align-items:center;justify-content:center;
	color:var(--color-accent-pink-dark);
	font-size:14px;
}
.hakken-rec-thumb-wrap{position:relative;margin-bottom:6px;}
.hakken-rec-arrow{
	position:absolute;
	bottom:-16px;right:16px;
	width:40px;height:40px;
	border-radius:50%;
	background:var(--color-accent-pink);
	color:#fff;
	display:flex;align-items:center;justify-content:center;
	font-size:16px;
	box-shadow:0 4px 10px rgba(46,42,79,.2);
}

/* ============================================================
   会員の声：カラフルな見出しタイル＋レスポンシブなカード列
   ============================================================ */
.hakken-voice-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
	gap:20px;
	align-items:stretch;
}
.hakken-voice-title-tile{
	background:var(--color-primary);
	color:#fff;
	border-radius:24px;
	padding:26px 24px;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	min-height:180px;
}
.hakken-voice-title-tile__en{
	font-family:'Zen Maru Gothic', var(--font-jp);
	font-size:12px;font-weight:800;opacity:.6;letter-spacing:.08em;
}
.hakken-voice-title-tile .section__title{
	color:#fff;
	border-left-color:rgba(255,255,255,.5);
}
.hakken-voice-title-tile a{
	font-size:13px;font-weight:800;color:#fff;text-decoration:none;margin-top:20px;
}