/* Visual layer for the yogerblog portal. Base components remain in portal.css. */
/* The portal is a search landing page, so it uses the full content width while
 * preserving SWELL's site header, footer, typography and color language. */
body.yoger-portal-page #content,
body:has(.yoger-portal) #content {
	display: block;
	max-width: 1280px;
}

body.yoger-portal-page #main_content,
body:has(.yoger-portal) #main_content {
	width: 100%;
	max-width: none;
	margin-inline: auto;
}

body.yoger-portal-page #sidebar,
body:has(.yoger-portal) #sidebar {
	display: none !important;
}

body.yoger-portal-page .l-mainContent__inner,
body:has(.yoger-portal) .l-mainContent__inner {
	width: 100%;
}

/* TOPページは検索ゲートウェイと既存の記事一覧を一体化する。 */
body:has(.yoger-portal--home) #main_visual,
body:has(.yoger-portal--home) #post_slider {
	display: none;
}

body:has(.yoger-portal--home) #content {
	display: block;
	max-width: 1280px;
	padding-top: clamp(22px, 4vw, 54px);
}

body:has(.yoger-portal--home) #main_content {
	width: 100%;
	max-width: none;
}

body:has(.yoger-portal--home) #sidebar {
	display: none !important;
}

body:has(.yoger-portal--home) .w-frontTop,
body:has(.yoger-portal--home) .w-frontTop .widget,
body:has(.yoger-portal--home) .w-frontTop .textwidget,
body:has(.yoger-portal--home) .w-frontTop .custom-html-widget {
	margin: 0;
}

.yoger-portal--home {
	margin-bottom: 0;
}

.yoger-home-search {
	grid-template-columns: minmax(0, 1fr) auto;
}

.yoger-home-search__keyword {
	grid-column: 1;
}

.yoger-home-search .yoger-filter__actions {
	grid-column: 2;
	align-self: end;
	justify-content: flex-end;
	margin: 0;
}

.yoger-home-search .yoger-filter__actions a {
	white-space: nowrap;
}

.yoger-discovery--home {
	margin-bottom: 68px;
}

.yoger-home-articles-heading {
	margin: 0 0 30px;
	padding: 42px clamp(22px, 5vw, 58px);
	border-top: 1px solid #dfe7e4;
	border-bottom: 1px solid #dfe7e4;
	text-align: center;
}

.yoger-home-articles-heading p {
	margin: 0 0 7px;
	color: var(--yoger-main);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .18em;
}

.yoger-home-articles-heading h2 {
	margin: 0 0 10px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--yoger-ink);
	font-family: var(--yoger-display);
	font-size: clamp(27px, 4vw, 36px);
	font-weight: 600;
}

.yoger-home-articles-heading h2::before,
.yoger-home-articles-heading h2::after {
	display: none;
	content: none;
}

.yoger-home-articles-heading span {
	display: block;
	color: #68777e;
	font-size: 14px;
	line-height: 1.8;
}

body:has(.yoger-portal--home) .p-homeContent {
	margin-top: 0 !important;
}

.yoger-portal {
	--yoger-sage: #edf4ef;
	--yoger-sand: #f5eee5;
	--yoger-coral: #eb684f;
	--yoger-deep: #04384c;
	--yoger-display: "Yu Mincho", "Hiragino Mincho ProN", serif;
}

.yoger-portal__hero {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	min-height: 590px;
	margin: 0;
	padding: clamp(44px, 6vw, 82px) clamp(28px, 5vw, 72px) 92px;
	overflow: hidden;
	border: 0;
	border-radius: 2px 2px 30px 30px;
	background:
		radial-gradient(circle at 18% 15%, rgba(255,255,255,.16), transparent 32%),
		linear-gradient(135deg, #052f40 0%, #0b5663 72%, #32776d 100%);
	box-shadow: 0 30px 80px rgba(4, 56, 76, .18);
	isolation: isolate;
}

.yoger-portal__hero::before {
	position: absolute;
	width: 320px;
	height: 320px;
	border: 1px solid rgba(255,255,255,.13);
	border-radius: 50%;
	content: "";
	left: -120px;
	top: -130px;
}

.yoger-portal__hero-copy {
	position: relative;
	z-index: 2;
	display: flex;
	max-width: 600px;
	flex-direction: column;
	justify-content: center;
	padding-right: clamp(8px, 3vw, 46px);
	color: #fff;
}

.yoger-portal .yoger-portal__eyebrow {
	margin: 0 0 18px;
	color: #dceae4;
	font-size: 12px;
	letter-spacing: .22em;
}

.yoger-portal__hero h2 {
	margin: 0 0 22px;
	color: #fff;
	font-family: var(--yoger-display);
	font-size: clamp(35px, 4.2vw, 50px);
	font-weight: 600;
	letter-spacing: .04em;
	line-height: 1.32;
	text-shadow: 0 2px 24px rgba(0,0,0,.16);
}

.yoger-portal__hero h2 span {
	display: block;
	white-space: nowrap;
}

.yoger-portal__hero-copy > p:not(.yoger-portal__eyebrow) {
	max-width: 500px;
	margin: 0;
	color: rgba(255,255,255,.88);
	font-size: 15px;
	line-height: 1.95;
}

.yoger-portal__hero-points {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 26px;
}

.yoger-portal__hero-points span {
	padding: 6px 11px;
	border: 1px solid rgba(255,255,255,.28);
	border-radius: 999px;
	background: rgba(255,255,255,.09);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .03em;
	backdrop-filter: blur(6px);
}

.yoger-portal__visual {
	position: relative;
	min-height: 430px;
	align-self: center;
}

.yoger-portal__visual figure {
	position: absolute;
	margin: 0;
	overflow: hidden;
	border: 6px solid rgba(255,255,255,.86);
	background: #d7e2dd;
	box-shadow: 0 22px 60px rgba(0,0,0,.28);
}

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

.yoger-portal__visual-main {
	inset: 0 52px 64px 0;
	border-radius: 48% 48% 10px 10px;
}

.yoger-portal__visual-main img { object-position: center 44%; }

.yoger-portal__visual-sub {
	width: 42%;
	aspect-ratio: 1 / 1;
	border-radius: 50% !important;
}

.yoger-portal__visual-sub--pilates { right: -18px; top: 8px; }
.yoger-portal__visual-sub--training { right: 0; bottom: 2px; width: 35%; }

.yoger-filter {
	position: relative;
	z-index: 5;
	grid-template-columns: 1.35fr repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin: -54px clamp(16px, 4vw, 56px) 72px;
	padding: 24px clamp(20px, 3vw, 34px) 26px;
	border: 0;
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba(4,56,76,.16), 0 2px 10px rgba(0,0,0,.06);
}

.yoger-filter__heading {
	display: flex;
	grid-column: 1 / -1;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 4px;
}

.yoger-filter__heading span,
.yoger-results__head > span,
.yoger-section-heading p {
	color: var(--yoger-main);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .18em;
}

.yoger-filter__heading strong { font-size: 18px; }
.yoger-filter label span { color: #52626a; font-size: 12px; }

.yoger-filter input,
.yoger-filter select {
	min-height: 50px;
	border-color: #d9e2df;
	border-radius: 5px;
	background: #fbfcfc;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.yoger-filter input:focus,
.yoger-filter select:focus {
	border-color: var(--yoger-main);
	box-shadow: 0 0 0 3px rgba(4,56,76,.1);
	outline: 0;
}

.yoger-filter__actions { justify-content: space-between; margin-top: 4px; }
.yoger-filter button { min-width: 250px; min-height: 52px; border-radius: 999px; box-shadow: 0 10px 24px rgba(4,56,76,.2); }
.yoger-filter button span { margin-right: 5px; font-size: 21px; font-weight: 400; }
.yoger-filter__actions a { color: #67777e; font-size: 12px; }

.yoger-discovery { margin: 0 0 78px; }

.yoger-section-heading {
	margin-bottom: 28px;
	text-align: center;
}

.yoger-section-heading p { margin: 0 0 6px; }

.yoger-section-heading h3 {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--yoger-ink);
	font-family: var(--yoger-display);
	font-size: clamp(27px, 4vw, 36px);
	font-weight: 600;
}

.yoger-section-heading h3::before,
.yoger-section-heading h3::after { display: none; content: none; }

.yoger-discovery__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

.yoger-discovery__card {
	position: relative;
	display: block;
	min-height: 330px;
	overflow: hidden;
	border-radius: 6px 6px 22px 6px;
	background: var(--yoger-deep);
	box-shadow: 0 15px 38px rgba(4,56,76,.13);
	color: #fff !important;
	text-decoration: none !important;
}

.yoger-discovery__card::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(2,30,42,.82) 2%, rgba(2,30,42,.08) 66%);
	content: "";
}

.yoger-discovery__card img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 330px;
	object-fit: cover;
	transition: transform .5s ease;
}

.yoger-discovery__card:hover img { transform: scale(1.045); }
.yoger-discovery__card > span { position: absolute; z-index: 2; right: 24px; bottom: 22px; left: 24px; }
.yoger-discovery__card small { display: block; color: #d9e7e1; font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: .18em; }
.yoger-discovery__card strong { display: block; margin-top: 4px; font-family: var(--yoger-display); font-size: 22px; font-weight: 600; }
.yoger-discovery__card em { display: inline-block; margin-top: 12px; padding-bottom: 3px; border-bottom: 1px solid rgba(255,255,255,.7); font-size: 12px; font-style: normal; }

.yoger-results__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin: 0 0 24px;
	padding-bottom: 14px;
	border-bottom: 1px solid #dfe7e4;
}

.yoger-results__head div { font-size: 14px; }
.yoger-results__head strong { margin-right: 4px; color: var(--yoger-main); font-family: var(--yoger-display); font-size: 30px; }

.yoger-card-grid { gap: 26px 22px; }

.yoger-card {
	border: 0;
	border-radius: 5px 5px 18px 5px;
	box-shadow: 0 13px 36px rgba(20,52,64,.09);
	transition: transform .25s ease, box-shadow .25s ease;
}

.yoger-card:hover { transform: translateY(-4px); box-shadow: 0 20px 45px rgba(20,52,64,.14); }
.yoger-card__image { aspect-ratio: 4 / 3; }
.yoger-card__body { padding: 20px 20px 22px; }
.yoger-card h3 { margin: 12px 0 8px; font-family: var(--yoger-display); font-size: 21px; font-weight: 600; }
.yoger-tags span { padding: 4px 10px; background: var(--yoger-sage); font-size: 10px; letter-spacing: .02em; }
.yoger-card__price strong { color: var(--yoger-main); font-family: var(--yoger-display); }
.yoger-card__links .yoger-button { min-height: 44px; border-radius: 999px; }

.yoger-empty {
	padding: 54px 28px;
	border: 1px solid #dce8e2;
	border-radius: 6px 6px 22px 6px;
	background: linear-gradient(135deg, var(--yoger-sage), #fff);
}

@media (max-width: 960px) {
	.yoger-home-search { grid-template-columns: 1fr; }
	.yoger-home-search__keyword,
	.yoger-home-search .yoger-filter__actions { grid-column: 1; }
	.yoger-home-search .yoger-filter__actions { justify-content: space-between; }
	.yoger-portal__hero { grid-template-columns: 1fr; min-height: auto; padding-bottom: 110px; }
	.yoger-portal__hero-copy { max-width: 680px; padding: 0; }
	.yoger-portal__visual { min-height: 390px; margin-top: 34px; }
	.yoger-portal__visual-main { inset: 0 18% 38px 7%; }
	.yoger-portal__visual-sub--pilates { right: 1%; }
	.yoger-portal__visual-sub--training { right: 4%; }
	.yoger-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.yoger-discovery__grid { gap: 14px; }
	.yoger-discovery__card,
	.yoger-discovery__card img { min-height: 275px; }
}

@media (max-width: 600px) {
	body:has(.yoger-portal--home) #content { padding-top: 12px; }
	body:has(.yoger-portal--home) .w-frontTop { margin-inline: -2px; }
	.yoger-home-search .yoger-filter__actions { align-items: stretch; }
	.yoger-home-search .yoger-filter__actions a { text-align: center; }
	.yoger-home-articles-heading { margin-bottom: 22px; padding-block: 34px; }
	.yoger-portal__hero { margin-inline: -4px; padding: 38px 22px 82px; border-radius: 0 0 22px 22px; }
	.yoger-portal__hero h2 { font-size: clamp(29px, 8.5vw, 36px); }
	.yoger-portal__hero-copy > p:not(.yoger-portal__eyebrow) { font-size: 14px; line-height: 1.85; }
	.yoger-portal__hero-points { gap: 6px; }
	.yoger-portal__hero-points span { padding: 5px 9px; font-size: 10px; }
	.yoger-portal__visual { min-height: 285px; margin-top: 28px; }
	.yoger-portal__visual-main { inset: 0 16% 26px 0; border-width: 4px; border-radius: 43% 43% 8px 8px; }
	.yoger-portal__visual-sub { border-width: 4px !important; }
	.yoger-portal__visual-sub--pilates { right: -4%; top: 2px; }
	.yoger-portal__visual-sub--training { right: 0; bottom: 0; }
	.yoger-filter { grid-template-columns: 1fr; margin: -42px 12px 58px; padding: 20px 16px 22px; }
	.yoger-filter__heading { align-items: flex-start; flex-direction: column; gap: 2px; }
	.yoger-filter__actions { align-items: center; }
	.yoger-filter button { min-width: 0; }
	.yoger-discovery { margin-bottom: 58px; }
	.yoger-discovery__grid { grid-template-columns: 1fr; }
	.yoger-discovery__card,
	.yoger-discovery__card img { min-height: 230px; }
	.yoger-discovery__card > span { right: 20px; bottom: 18px; left: 20px; }
	.yoger-results__head { align-items: flex-start; flex-direction: column; gap: 6px; }
	.yoger-card:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.yoger-discovery__card img,
	.yoger-card,
	.yoger-filter input,
	.yoger-filter select { transition: none; }
}