@charset "utf-8";
/* ============================================================
              HEIDI ACTIVE (contents_20260803) PC
============================================================ */
#ha {
	font-family:"源ノ角ゴシック JP", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo,sans-serif;
	color:#504C47;
	line-height:1.9;
	font-size:16px;
	overflow-x:hidden;
}
#ha *,#ha *::before,#ha *::after {
	box-sizing:border-box;
}
#ha img {
	max-width:100%;
	height:auto;
	vertical-align:bottom;
	display:block;
}
#ha a {
	text-decoration:none;
	color:inherit;
}
#ha .ha-inner {
	width: 1200px;
	margin:0 auto;
}
/* ===== HERO ===== */
#ha .ha-hero img {
	width: 100%;
}
/* ===== SECTION bg ===== */
#ha .ha-sec {
	padding:80px 0 96px;
}
#ha .ha-sec--cream {
	background:#FFFCFB;
  padding: 104px 0 160px;
}
#ha .ha-sec--pink {
	background: #F9F4F1;
}
/* ===== INTRO ===== */
#ha .ha-intro {
	text-align:center;
	background:#F9F4F1;
	padding:97.5px 0 100px;
}
#ha .ha-intro__ttl1 {
	width:702px;
	margin:0 auto 32px;
}
#ha .ha-intro__ttl2 {
	width:702px;
	margin:0 auto 60px;
}
#ha .ha-intro__txt {
	font-size:18px;
	line-height:40px;
	font-weight: 500;
	color:#504C47;
}
#ha .ha-intro__chara {
	display:flex;
	justify-content:center;
	gap:60px;
	margin-top:60px;
}
#ha .ha-intro__chara span {
	display:block;
}
#ha .ha-intro__chara span:nth-child(1) {
  height: 82px;
}
#ha .ha-intro__chara span:nth-child(2) {
  height: 86px;
}
#ha .ha-intro__chara span:nth-child(3) {
  height: 88px;
}
#ha .ha-intro__chara span:nth-child(4) {
  height: 92px;
}
#ha .ha-intro__chara img {
	height: 100%;
}
/* ===== heading (jp+EN img+line/chara) ===== */
#ha .ha-hd {
	position:relative;
	text-align:center;
	margin-bottom:40px;
}
#ha .ha-hd__jp {
	font-size:24px;
  line-height: 35px;
	letter-spacing:.4em;
	color:#504C47;
	margin:0 0 8px;
}
#ha .ha-hd__en {
	margin:0 auto;
}
#ha .ha-hd__en.cat1 {
	width: 638px;
}
/* TOWEL */
#ha .ha-hd__en.cat2 {
	width: 638px;
}
/* BAG */
#ha .ha-hd__en.cat3 {
	width: 638px;
}
/* SPECIAL COLLABORATION */
#ha .ha-hd__line {
	display:block;
	width:80px;
	height:1px;
	background:#C7BCB2;
	margin: 32px auto 0;
}
/* heading character */
#ha .ha-hd__chara {
	position:absolute;
	z-index:2;
	opacity:0;
}
#ha .ha-hd__chara img {
	width:100%;
}
#ha .ha-hd--bag .ha-hd__chara {
	width:60px;
	right:calc(50% - 197px);
	top: 53px;
}
#ha .ha-sec.ha-sec-3 .ha-hd--special {
  margin-bottom: 60px;
}
#ha .ha-hd--special .ha-hd__chara {
	width:66px;
	left:calc(50% - 389px);
	top: 0;
}
/* ===== lead ===== */
#ha .ha-lead {
	text-align:center;
	font-size:18px;
	line-height:26px;
	margin: 0;
}
#ha .ha-subttl {
	text-align:center;
	font-size:24px;
  line-height: 35px;
	font-weight:700;
	color:#504C47;
	margin: 100px 0 40px;
}
/* ===== product grid ===== */
#ha .ha-grid {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:56px 120px;
}
#ha .ha-grid--3 .ha-item {
	width:319px;
}
#ha .ha-grid--3 + .ha-grid--3 {
  margin-top: 100px;
}
#ha .ha-grid--2 .ha-item {
	width:319px;
}
#ha .ha-item {
	text-align:center;
}
#ha .ha-item__name {
  font-size: 18px;
  line-height: 26px;
  font-weight: bold;
  margin-bottom: 20px;
}
#ha .ha-item__main {
	background:#FFFCFB;
	border-radius:4px;
  margin-bottom: 12px;
}
#ha .ha-item__main img {
	width: 100%;
}
/* sub (ZOOM/IMAGE/SIDE) */
#ha .ha-item__cap {
	color:#c58a92;
	font:700 13px/1 "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN",sans-serif;
	letter-spacing:.1em;
	margin:14px 0 8px;
}
#ha .ha-item__sub {
	width:116px;
	margin:0 auto;
}
#ha .ha-item__sub--wide {
	width: auto;
  height: 140px;
  margin: 0 auto;
}
#ha .ha-item__sub img {
	height: 100%;
  margin: 0 auto;
}
#ha .ha-item__color {
	font-size:14px;
  line-height: 20px;
  font-weight: 500;
	color:#504C47;
	margin:12px 0 0;
}
#ha .ha-item__size {
	font-size:14px;
  line-height: 20px;
  font-weight: 500;
	color:#504C47;
	margin:4px 0 0;
}
#ha .ha-item__price {
	color:#504C47;
	border-top:1px solid #C7BCB2;
	margin:12px 0 0;
	padding:12px 0 0;
}
#ha .ha-item__price .yen {
	font-family:"Century Gothic", "Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;
  font-size:30px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: 1px;
}
#ha .ha-item__price .tax {
	font-size:15px;
  line-height: 21px;
	font-weight:400;
}
/* buy button (btn_01 image) */
#ha .ha-btn {
	display:block;
	width:100%;
	margin:12px 0 0;
	transition:opacity .2s;
}
#ha .ha-btn:hover {
	opacity:.85;
}
#ha .ha-btn img {
	width: 100%;
}
/* ===== SPECIAL COLLABORATION ===== */
#ha .ha-collabo {
}
#ha .ha-collabo__cut {
	width:1200px;
	margin:0 auto 60px;
}
#ha .ha-collabo__cut img {
	width:100%;
}
#ha .ha-collabo__logo {
	width:367px;
	margin:0 auto 60px;
}
#ha .ha-collabo__block.ha-collabo__block-2 .ha-collabo__logo {
  width: 402px;
}
#ha .ha-collabo__logo img {
	width:100%;
}
#ha .ha-collabo__desc {
	text-align:center;
	font-size:18px;
	line-height:40px;
  font-weight: 500;
	margin:0 0 100px;
}
#ha .ha-collabo__block+.ha-collabo__block {
	margin-top: 160px;
}
/* ===== bottom CTA (商品一覧) ===== */
#ha .ha-cta {
	background:#F0DCE0;
	padding:67.8px 0 70px;
	text-align:center;
}
#ha .ha-cta__btn {
	display:inline-block;
	width:638px;
	max-width:100%;
	transition:opacity .2s;
}
#ha .ha-cta__btn:hover {
	opacity:.85;
}
#ha .ha-cta__btn img {
	width: 100%;
}
/* ===== notes ===== */
#ha .ha-notes {
	background:#fff;
	padding:60px 0;
}
#ha .ha-notes__inner {
	max-width:1010px;
	margin:0 auto;
}
#ha .ha-notes__ttl {
	font-size:20px;
	font-weight:400;
  line-height: 29px;
	color:#504C47;
	margin:0 0 26px;
}
#ha .ha-notes__list {
	list-style:none;
	padding:0;
	margin:0;
}
#ha .ha-notes__list li {
	font-size:18px;
	line-height:32px;
	padding-left:1em;
	text-indent:-1em;
	margin-bottom:15px;
}
#ha .ha-notes__list li::before {
	content: "・";
}
#ha .ha-hd__chara {
	transition:opacity .8s ease,transform .9s cubic-bezier(.22,.61,.36,1);
}
#ha .ha-hd__chara img {
	transform-origin:bottom center;
}
#ha .ha-hd__chara.is-animate img {
	animation: ha-sway 3.2s ease-in-out .85s infinite;
}
/* 登場方向は見出しごとに直接指定 */
#ha .ha-hd--bag .ha-hd__chara {
	transform:translate(34px,0);
}
#ha .ha-hd--bag .ha-hd__chara.is-animate {
	opacity:1;
	transform:translate(0,0);
}
#ha .ha-hd--special .ha-hd__chara {
	transform:translate(-30px,24px);
}
#ha .ha-hd--special .ha-hd__chara.is-animate {
	opacity:1;
	transform:translate(0,0);
}
@keyframes ha-sway {
	0%,100% {
		transform:rotate(-6deg);
	}
	50% {
		transform:rotate(6deg);
	}
}
@media (prefers-reduced-motion:reduce) {
	#ha .ha-hd__chara {
		transition:none;
		opacity:1;
		transform:translate(0,0);
	}
	#ha .ha-hd__chara.is-animate img {
		animation: none;
	}
}