/*
 * HIT テーマの CSS (手で書いたもの)
 *
 * thegem.css (TheGem と WPBakery から抜き出したもの) の上に重ねる。
 * 旧テーマで JS や Slider Revolution がしていたことを CSS で置き換えている。
 */

/* 全幅の行。WPBakery と TheGem は JS で位置と幅を計算していた */
#page {
	overflow-x: clip;
}

.vc_row[data-vc-full-width],
.fullwidth-block {
	position: relative;
	left: 50%;
	width: 100vw;
	max-width: none;
	margin-left: -50vw !important;
	margin-right: 0 !important;
	box-sizing: border-box;
}

/* 行の背景は全幅にして、中身は行の元の位置にそろえる (行はコンテナから 21px 外にはみ出している) */
.vc_row[data-vc-full-width]:not([data-vc-stretch-content]) {
	padding-left: calc(50vw - 50% - 21px);
	padding-right: calc(50vw - 50% - 21px);
}

.vc_row-full-width {
	display: none;
}

/*
 * ヒーロー (旧 Slider Revolution)。高さと文字の大きさは、幅 1280px 以上とスマホ (390px) で
 * 旧スライダーに合わせ、その間は幅に比例させている (旧スライダーは中間の幅で高さが不規則だった)
 */
.hit-hero {
	position: relative;
	left: 50%;
	display: flex;
	align-items: center;
	width: 100vw;
	height: clamp(585px, 70vw, 868px);
	margin-left: -50vw;
	overflow: hidden;
	color: #fff;
}

.hit-hero--news {
	height: clamp(488px, 60vw, 700px);
	justify-content: center;
	text-align: center;
}

.hit-hero--contact {
	justify-content: center;
	text-align: center;
}

/* 画像の色味は Slider Revolution のフィルター「1977」と同じ (CSSgram) */
.hit-hero__bg {
	position: absolute;
	inset: 0;
	background-position: center;
	background-size: cover;
	filter: contrast(1.1) brightness(1.1) saturate(1.3);
}

.hit-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(243, 106, 188, 0.3);
	mix-blend-mode: screen;
}

.hit-hero__inner {
	position: relative;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

.hit-hero--front .hit-hero__inner {
	max-width: none;
	padding-left: max(5vw, calc(50vw - 527px));
}

.hit-hero__lead,
.hit-hero__title {
	margin: 0;
	font-family: "Open Sans", sans-serif;
	font-weight: 400;
	font-size: clamp(24px, 6.25vw, 80px);
	line-height: 1.275;
	color: #fff;
}

.hit-hero__title {
	font-size: clamp(33px, 4.7vw, 60px);
	line-height: 1.2;
}

.hit-hero--news .hit-hero__title {
	font-family: "Montserrat", sans-serif;
	font-size: 80px;
	line-height: 1;
	color: #f3ff7f;
}

.hit-hero__thin {
	font-family: "Montserrat UltraLight", "Montserrat", sans-serif;
	font-weight: 200;
}

.hit-hero--news strong {
	font-weight: 700;
}

.hit-hero__sub {
	margin: 40px 0 0;
	font-family: "Source Sans Pro", sans-serif;
	font-weight: 300;
	font-size: 24px;
	line-height: 1;
	color: #fff;
}

.hit-hero__button {
	display: inline-block;
	margin-top: 22px;
	padding: 12px 20px;
	border: 3px solid #fff;
	font-family: "Montserrat", sans-serif;
	font-weight: 500;
	font-size: 17px;
	line-height: 17px;
	color: #fff;
}

.hit-hero__button:hover {
	background: #fff;
	color: #3c3950;
}

@media (max-width: 767px) {
	.hit-hero {
		justify-content: center;
		text-align: center;
	}

	.hit-hero--front .hit-hero__inner {
		padding-left: 20px;
	}

	.hit-hero__lead {
		font-size: 24px;
		line-height: 51px;
	}


	.hit-hero--news .hit-hero__title {
		font-size: 44px;
		line-height: 60px;
	}

	.hit-hero--news .hit-hero__title strong {
		display: block;
	}

	.hit-hero__sub {
		margin-top: 20px;
		font-size: 18px;
	}

	.hit-hero__button {
		margin-top: 30px;
		padding: 12px 34px;
		font-size: 14px;
	}
}

/* ニュース一覧の「もっと見る」で隠している記事 */
.blog article[hidden] {
	display: none !important;
}

.blog-load-more button {
	cursor: pointer;
}

/* トップのニュース (3 列のカード)。旧テーマは JS でカードの高さをそろえていた */
.blog-style-justified-3x {
	display: flex;
	flex-wrap: wrap;
}

.blog-style-justified-3x > article {
	display: flex;
}

.blog-style-justified-3x .post-content-wrapper {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.blog-style-justified-3x .description {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.blog-style-justified-3x .description .info {
	margin-top: auto;
}