@charset "utf-8";

/* =========================================================
   Happle 下層ページ用スタイル（利用規約など）
   ※ index.html のトンマナ（style.css）に合わせた配色・書体
   base #F6F3EE / brown #826E4C / orange #CC5225・#E4774E
   heading: Shippori Mincho
   ========================================================= */

/* ---- 固定ヘッダーを下層ページ用に調整 ---- */
.page_terms .header {
	padding-top: 16px;
}
.header_logo_img {
  filter: drop-shadow(0 0 3px #826E4C);
}

/* =========================================================
   利用規約 本文（ASMY風・全幅ワイドレイアウト）
   ========================================================= */
.page_terms .main_content {
	width: 100%;
	max-width: none;
}

/* style.css の body{header,main,footer}=560px 中央カラム制約を、
   下層ページのみ page.css 側から高詳細度で解除して全幅にする（style.cssは変更しない） */
body.page_terms header,
body.page_terms main,
body.page_terms footer {
	max-width: none;
}
body.page_terms main {
	background: #FFF;
}
.section_terms {
	background: #FFFFFF;
	padding-top: 108px;   /* 固定ヘッダー分のクリアランス */
	padding-bottom: 88px;
	color: #51442F;
}

/* ---- 見出しヒーロー ---- */
.terms_hero {
	text-align: center;
	padding: 24px 20px 48px;
}
.terms_hero_en {
	font-size: 12px;
	letter-spacing: 0.35em;
	color: #CC5225;
	margin-bottom: 12px;
}
.terms_hero_ttl {
	font-family: "Century Gothic", "Futura", "Jost", sans-serif;
	font-size: 46px;
	font-weight: 400;
	color: #CC5225;
	letter-spacing: 0.14em;
}
.terms_hero_sub {
	margin-top: 10px;
	font-size: 15px;
	letter-spacing: 0.28em;
	color: #826E4C;
}

/* ---- 本文コンテナ（全幅・中央寄せワイド） ---- */
.terms_inner {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0 clamp(24px, 6vw, 120px);
}
.terms_lead {
	font-size: 14px;
	line-height: 2.15;
	color: #51442F;
	margin-bottom: 52px;
}

/* ---- 条文ブロック ---- */
.terms_article {
	margin-bottom: 44px;
}
.terms_article_ttl {
	font-family: "Shippori Mincho", serif;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.5;
	color: #826E4C;
	padding-left: 14px;
	border-left: 4px solid #CC5225;
	margin-bottom: 20px;
}
.terms_text {
	font-size: 14px;
	line-height: 2.15;
	color: #51442F;
	margin-bottom: 12px;
}
.terms_text:last-child {
	margin-bottom: 0;
}

/* ---- 箇条書き（・） ---- */
.terms_list {
	margin: 10px 0 12px;
}
.terms_item {
	position: relative;
	padding-left: 18px;
	font-size: 14px;
	line-height: 1.85;
	color: #51442F;
}
.terms_item::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 0.82em;
	width: 5px;
	height: 5px;
	background: #E4774E;
	border-radius: 50%;
}

/* ---- 番号付きリスト（ol不使用・ulで表現） ---- */
.terms_num_list {
	margin: 10px 0 12px;
}
.terms_num_item {
	display: flex;
	gap: 8px;
	font-size: 14px;
	line-height: 1.85;
	color: #51442F;
	margin-bottom: 6px;
}
.terms_num_item:last-child {
	margin-bottom: 0;
}
.terms_num {
	flex-shrink: 0;
	color: #CC5225;
	font-weight: 700;
}

/* ---- 料金など小見出し・価格リスト ---- */
.terms_subhead {
	margin: 16px 0 6px;
	font-size: 14px;
	font-weight: 700;
	color: #826E4C;
}
.terms_price_list {
	margin: 4px 0 8px;
	padding: 12px 16px;
	background: #FFF;
	border: 1px solid #E7D3B6;
	border-radius: 8px;
}
.terms_price_item {
	font-size: 14px;
	line-height: 1.9;
	color: #51442F;
}
.terms_price_item + .terms_price_item {
	border-top: 1px dashed #E7D3B6;
}
.terms_note {
	font-size: 12px;
	line-height: 1.7;
	color: #B09876;
	margin-top: 2px;
}

/* ---- 会社名・戻る導線 ---- */
.terms_company {
	margin-top: 36px;
	text-align: right;
	font-size: 14px;
	font-weight: 700;
	color: #826E4C;
	letter-spacing: 0.06em;
}
.terms_back {
	margin-top: 40px;
	text-align: center;
}
.terms_back_link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 220px;
	height: 50px;
	padding: 0 24px;
	font-family: "Shippori Mincho", serif;
	font-size: 14px;
	color: #FFF;
	background: #826E4C;
	border-radius: 50px;
}

/* =========================================================
   PC（767px超）: ASMY風に全幅ワイド＆余白多めで読みやすく
   ========================================================= */
@media screen and (min-width: 768px) {
	.section_terms {
		padding-bottom: 112px;
	}
	.terms_hero {
		padding: 40px 20px 64px;
	}
	.terms_hero_ttl {
		font-size: 58px;
	}
	.terms_lead {
		margin-bottom: 64px;
	}
	.terms_article {
		margin-bottom: 56px;
	}
	.terms_article_ttl {
		font-size: 21px;
	}
}