/* =========================================================
   SHARK STYLE GYM
   BLOG PAGE - SP RESPONSIVE
   blog.css
========================================================= */


/* =========================================================
   CATEGORY LINK BASE
========================================================= */

.blog-category__item,
.blog-category__item--news {
	color: inherit;
	text-decoration: none;
}

.blog-category__item:visited,
.blog-category__item--news:visited {
	color: inherit;
}

.blog-category__item:hover,
.blog-category__item--news:hover {
	text-decoration: none;
}


/* =========================================================
   SMARTPHONE
========================================================= */

@media screen and (max-width: 768px) {


	/* =====================================================
	   ページ全体
	===================================================== */

	.blog-page {
		width: 100%;
		overflow-x: hidden;
	}

	.blog-westcoast-area {
		width: 100%;
		overflow: hidden;
	}


	/* =====================================================
	   HERO
	===================================================== */

	.blog-intro {
		position: relative;

		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;

		padding: 68px 18px 55px !important;

		box-sizing: border-box;

		background-position: center top !important;
		background-size: cover !important;
	}

	.blog-intro__inner {
		position: relative;
		z-index: 2;

		width: 100% !important;
		max-width: 100% !important;

		margin: 0 auto !important;
		padding: 0 !important;

		box-sizing: border-box;

		text-align: center;
	}

	.blog-intro__en {
		margin: 0 0 20px !important;

		font-size: 10px !important;
		font-weight: 700;
		line-height: 1.4 !important;
		letter-spacing: .22em !important;

		text-align: center;
	}

	/* メイン見出し */
	.blog-intro h1 {
		width: 100% !important;
		max-width: 100% !important;

		margin: 0 auto 22px !important;
		padding: 0 !important;

		font-size: clamp(27px, 7.6vw, 34px) !important;
		font-weight: 800 !important;
		line-height: 1.45 !important;
		letter-spacing: -.04em !important;

		text-align: center !important;

		word-break: keep-all !important;
		overflow-wrap: normal !important;
	}

	/* HTMLに入っている<br>をそのまま利用 */
	.blog-intro h1 br {
		display: block;
	}

	/* 説明文 */
	.blog-intro__lead {
		width: 100% !important;
		max-width: 330px !important;

		margin: 0 auto !important;
		padding: 0 !important;

		color: #667b80 !important;

		font-size: 13px !important;
		font-weight: 400 !important;
		line-height: 1.9 !important;

		text-align: center !important;

		word-break: normal !important;
		overflow-wrap: break-word !important;
	}


	/* =====================================================
	   CATEGORY
	===================================================== */

	.blog-category {
		width: 100%;

		padding: 48px 0 70px !important;

		box-sizing: border-box;
	}

	/*
	   現在のHTMLでは
	   .blog-category__grid が無いため
	   blog-container自体を1列化
	*/
	.blog-category .blog-container {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 12px !important;

		width: calc(100% - 30px) !important;
		max-width: none !important;

		margin: 0 auto !important;
		padding: 0 !important;

		box-sizing: border-box !important;
	}

	/* カテゴリー見出し */
	.blog-category .blog-section-head {
		display: block !important;
		width: 100% !important;

		margin: 0 0 20px !important;

		grid-column: 1 / -1 !important;
	}

	.blog-category .blog-section-head span {
		display: block;

		margin-bottom: 5px;

		font-size: 10px;
		line-height: 1.4;
		letter-spacing: .18em;
	}

	.blog-category .blog-section-head h2 {
		margin: 0 !important;

		font-size: 26px !important;
		line-height: 1.4 !important;
	}


	/* カテゴリーカード */
	.blog-category__item,
	.blog-category__item--news {
		display: grid !important;

		grid-template-columns:
			42px minmax(0, 1fr) 28px !important;

		align-items: center !important;

		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;

		min-height: 82px !important;

		margin: 0 !important;
		padding: 14px 15px !important;

		box-sizing: border-box !important;

		background: rgba(255, 255, 255, .96) !important;

		border: 1px solid rgba(21, 181, 181, .16) !important;
		border-radius: 14px !important;

		color: inherit !important;
		text-decoration: none !important;

		grid-column: auto !important;
	}

	.blog-category__num {
		display: block !important;

		width: auto !important;
		margin: 0 !important;

		color: #16b9b6 !important;

		font-size: 15px !important;
		font-weight: 700 !important;
		line-height: 1.4 !important;
	}

	.blog-category__body {
		display: block !important;

		width: 100% !important;
		min-width: 0 !important;

		margin: 0 !important;
		padding: 0 12px !important;

		box-sizing: border-box !important;

		border-left: 1px solid #38c8c4 !important;
	}

	.blog-category__en {
		display: block !important;

		margin: 0 0 3px !important;

		font-size: 9px !important;
		line-height: 1.4 !important;
		letter-spacing: .12em !important;
	}

	.blog-category__body h3 {
		margin: 0 !important;

		font-size: 17px !important;
		font-weight: 700 !important;
		line-height: 1.4 !important;

		white-space: normal !important;
		word-break: keep-all !important;

		writing-mode: horizontal-tb !important;
	}

	.blog-category__arrow {
		display: block !important;

		margin: 0 !important;

		color: #19bbb7 !important;

		font-size: 22px !important;
		line-height: 1 !important;

		text-align: right !important;
	}


	/* =====================================================
	   LATEST ARTICLES
	===================================================== */

	.blog-latest {
		width: 100% !important;

		padding: 50px 0 100px !important;

		box-sizing: border-box !important;

		overflow: hidden !important;
	}

	.blog-latest .blog-container {
		display: block !important;

		width: calc(100% - 24px) !important;
		max-width: none !important;

		margin: 0 auto !important;
		padding: 0 !important;

		box-sizing: border-box !important;
	}

	/* 新着記事見出し */
	.blog-latest .blog-section-head {
		width: 100% !important;

		margin: 0 0 25px !important;
	}

	.blog-latest .blog-section-head span {
		display: block;

		margin-bottom: 5px;

		font-size: 10px;
		line-height: 1.4;
		letter-spacing: .16em;
	}

	.blog-latest .blog-section-head h2 {
		margin: 0 !important;

		font-size: 27px !important;
		line-height: 1.4 !important;
	}


	/* =====================================================
	   CMS ARTICLE INDEX
	===================================================== */

	.blog-page .CMS-ARTICLE-INDEX {
		position: static !important;

		display: block !important;

		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;

		margin: 0 !important;
		padding: 0 !important;

		box-sizing: border-box !important;

		grid-template-columns: minmax(0, 1fr) !important;

		writing-mode: horizontal-tb !important;
	}


	/* =====================================================
	   ARTICLE CARD
	   SPでは「画像 → 日付 → タイトル」
	===================================================== */

	.blog-page .CMS-ARTICLE-ITEM {
		position: relative !important;

		display: flex !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		justify-content: flex-start !important;

		float: none !important;
		clear: both !important;

		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;

		height: auto !important;
		min-height: 0 !important;

		margin: 0 0 20px !important;
		padding: 10px !important;

		box-sizing: border-box !important;

		background: #fff !important;

		border-radius: 18px !important;

		overflow: hidden !important;

		grid-template-columns: minmax(0, 1fr) !important;

		writing-mode: horizontal-tb !important;

		transform: none !important;
	}


	/* =====================================================
	   ARTICLE IMAGE
	===================================================== */

	.blog-page .CMS-ARTICLE-THUMBNAIL {
		position: static !important;

		display: block !important;

		float: none !important;
		clear: both !important;

		flex: none !important;

		width: 100% !important;
		max-width: 100% !important;
		min-width: 100% !important;

		height: auto !important;
		min-height: 0 !important;

		aspect-ratio: 16 / 9 !important;

		margin: 0 0 12px !important;
		padding: 0 !important;

		box-sizing: border-box !important;

		object-fit: cover !important;
		object-position: center !important;

		border-radius: 12px !important;

		transform: none !important;
	}


	/* =====================================================
	   ARTICLE TEXT AREA
	===================================================== */

	.blog-page .CMS-ARTICLE-WRAP {
		position: static !important;

		display: block !important;

		float: none !important;
		clear: both !important;

		flex: none !important;

		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;

		height: auto !important;
		min-height: 0 !important;

		margin: 0 !important;
		padding: 2px 5px 7px !important;

		box-sizing: border-box !important;

		writing-mode: horizontal-tb !important;
		text-orientation: mixed !important;

		transform: none !important;
	}


	/* =====================================================
	   ARTICLE DATE
	===================================================== */

	.blog-page .CMS-ARTICLE-TIME {
		position: static !important;

		display: block !important;

		float: none !important;

		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;

		margin: 0 0 6px !important;
		padding: 0 !important;

		color: #075762 !important;

		font-size: 13px !important;
		font-weight: 700 !important;
		line-height: 1.4 !important;

		text-align: left !important;

		white-space: normal !important;

		writing-mode: horizontal-tb !important;
		text-orientation: mixed !important;

		transform: none !important;
	}


	/* =====================================================
	   ARTICLE TITLE
	===================================================== */

	.blog-page .CMS-ARTICLE-LINK {
		position: static !important;

		display: block !important;

		float: none !important;

		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;

		margin: 0 !important;
		padding: 0 !important;

		color: #445f64 !important;

		font-size: 17px !important;
		font-weight: 700 !important;
		line-height: 1.55 !important;

		text-align: left !important;

		white-space: normal !important;

		/* 1文字単位で折れないようにする */
		word-break: keep-all !important;
		overflow-wrap: break-word !important;

		writing-mode: horizontal-tb !important;
		text-orientation: mixed !important;

		transform: none !important;
	}


	.blog-page .CMS-ARTICLE-LINK a {
		position: static !important;

		display: block !important;

		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;

		margin: 0 !important;
		padding: 0 !important;

		color: #445f64 !important;

		font: inherit !important;
		font-size: inherit !important;
		font-weight: inherit !important;
		line-height: inherit !important;

		text-align: left !important;

		white-space: normal !important;

		word-break: keep-all !important;
		overflow-wrap: break-word !important;

		writing-mode: horizontal-tb !important;
		text-orientation: mixed !important;

		text-decoration: none !important;

		transform: none !important;
	}


	/* =====================================================
	   CMSがaタグ等を追加した場合にも横並びを防止
	===================================================== */

	.blog-page .CMS-ARTICLE-ITEM>a {
		display: flex !important;
		flex-direction: column !important;

		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;

		color: inherit !important;
		text-decoration: none !important;
	}


	/* =====================================================
	   縦書き・横幅縮小を強制解除
	===================================================== */

	.blog-page .CMS-ARTICLE-ITEM,
	.blog-page .CMS-ARTICLE-ITEM .CMS-ARTICLE-WRAP,
	.blog-page .CMS-ARTICLE-ITEM .CMS-ARTICLE-TIME,
	.blog-page .CMS-ARTICLE-ITEM .CMS-ARTICLE-LINK,
	.blog-page .CMS-ARTICLE-ITEM .CMS-ARTICLE-LINK a {
		writing-mode: horizontal-tb !important;
		text-orientation: mixed !important;
	}


}


/* =========================================================
   SMALL SMARTPHONE
========================================================= */

@media screen and (max-width: 390px) {

	.blog-intro {
		padding-left: 14px !important;
		padding-right: 14px !important;
	}

	.blog-intro h1 {
		font-size: 27px !important;
		letter-spacing: -.045em !important;
	}

	.blog-intro__lead {
		font-size: 12px !important;
	}

	.blog-category .blog-container {
		width: calc(100% - 24px) !important;
	}

	.blog-category__item,
	.blog-category__item--news {
		grid-template-columns:
			38px minmax(0, 1fr) 24px !important;

		padding: 13px !important;
	}

	.blog-category__body {
		padding: 0 10px !important;
	}

	.blog-category__body h3 {
		font-size: 16px !important;
	}

	.blog-latest .blog-container {
		width: calc(100% - 20px) !important;
	}

	.blog-page .CMS-ARTICLE-ITEM {
		padding: 9px !important;
	}

	.blog-page .CMS-ARTICLE-LINK,
	.blog-page .CMS-ARTICLE-LINK a {
		font-size: 16px !important;
		line-height: 1.55 !important;
	}

}

/* =========================================================
   BLOG HERO 見出し
   PC・SP 共通で2行固定
========================================================= */

.blog-intro h1 {
	text-align: center;
}

.blog-intro h1 br {
	display: block !important;
}

/* =========================================================
   BLOG HERO SP 調整版
========================================================= */
@media screen and (max-width: 768px) {

	.blog-intro {
		position: relative;

		width: 100% !important;
		height: auto !important;
		min-height: 475px !important;

		padding: 42px 14px 55px !important;

		box-sizing: border-box;

		/* SPでは文字が空の部分に来るよう調整 */
		background-size: cover !important;
		background-position: center top !important;
	}

	.blog-intro__inner {
		position: relative;
		z-index: 2;

		width: 100% !important;
		max-width: 100% !important;

		margin: 0 auto !important;
		padding: 0 !important;

		text-align: center !important;
	}

	/* SHARK STYLE JOURNAL */
	.blog-intro__en {
		margin: 0 0 18px !important;

		font-size: 10px !important;
		font-weight: 700 !important;
		line-height: 1.4 !important;
		letter-spacing: .22em !important;
	}

	/* 見出し */
	.blog-intro h1 {
		width: 100% !important;
		max-width: 100% !important;

		margin: 0 auto 28px !important;
		padding: 0 !important;

		font-size: clamp(25px, 7.2vw, 32px) !important;
		font-weight: 800 !important;
		line-height: 1.45 !important;
		letter-spacing: -.045em !important;

		text-align: center !important;

		white-space: normal !important;
		word-break: normal !important;
		overflow-wrap: normal !important;
	}

	/* 見出しはHTMLのbrで2行固定 */
	.blog-intro h1 br {
		display: block !important;
	}

	/* 説明文 */
	.blog-intro__lead {
		width: calc(100% - 16px) !important;
		max-width: 360px !important;

		margin: 0 auto !important;
		padding: 0 !important;

		color: #667b80 !important;

		font-size: 12.5px !important;
		font-weight: 400 !important;
		line-height: 1.9 !important;
		letter-spacing: 0 !important;

		text-align: center !important;

		white-space: normal !important;
		word-break: normal !important;
		overflow-wrap: break-word !important;

		line-break: strict !important;
	}

	/* 説明文のHTML側brは残す */
	.blog-intro__lead br {
		display: block !important;
	}
}

/* =========================================================
   BLOG SP 見出し位置統一
   「カテゴリーから探す」と「新着記事」を同じ左位置に
========================================================= */
@media screen and (max-width: 768px) {

	/* 2セクションのコンテナ幅を完全統一 */
	.blog-category .blog-container,
	.blog-latest .blog-container {
		display: block !important;
		width: calc(100% - 24px) !important;
		max-width: none !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		box-sizing: border-box !important;
	}

	/* 見出し位置を完全統一 */
	.blog-category .blog-section-head,
	.blog-latest .blog-section-head {
		position: static !important;
		display: block !important;
		width: 100% !important;
		max-width: none !important;

		margin: 0 0 25px 0 !important;
		padding: 0 !important;

		text-align: left !important;

		left: auto !important;
		right: auto !important;
		transform: none !important;
	}

	.blog-category .blog-section-head span,
	.blog-category .blog-section-head h2,
	.blog-latest .blog-section-head span,
	.blog-latest .blog-section-head h2 {
		display: block !important;
		width: auto !important;

		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;

		text-align: left !important;

		left: auto !important;
		right: auto !important;
		transform: none !important;
	}

	/* サイズも同じに */
	.blog-category .blog-section-head span,
	.blog-latest .blog-section-head span {
		margin-bottom: 5px !important;
		font-size: 10px !important;
		line-height: 1.4 !important;
		letter-spacing: .16em !important;
	}

	.blog-category .blog-section-head h2,
	.blog-latest .blog-section-head h2 {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		font-size: 27px !important;
		line-height: 1.4 !important;
	}
}

/* =========================================================
   SHARK STYLE GYM
   BLOG PAGE - SP RESPONSIVE
   blog.css
========================================================= */


/* =========================================================
   CATEGORY LINK BASE
========================================================= */

.blog-category__item,
.blog-category__item--news {
	color: inherit;
	text-decoration: none;
}

.blog-category__item:visited,
.blog-category__item--news:visited {
	color: inherit;
}

.blog-category__item:hover,
.blog-category__item--news:hover {
	text-decoration: none;
}


/* =========================================================
   SMARTPHONE
========================================================= */

@media screen and (max-width: 768px) {


	/* =====================================================
	   ページ全体
	===================================================== */

	.blog-page {
		width: 100%;
		overflow-x: hidden;
	}

	.blog-westcoast-area {
		width: 100%;
		overflow: hidden;
	}


	/* =====================================================
	   HERO
	===================================================== */

	.blog-intro {
		position: relative;

		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;

		padding: 68px 18px 55px !important;

		box-sizing: border-box;

		background-position: center top !important;
		background-size: cover !important;
	}

	.blog-intro__inner {
		position: relative;
		z-index: 2;

		width: 100% !important;
		max-width: 100% !important;

		margin: 0 auto !important;
		padding: 0 !important;

		box-sizing: border-box;

		text-align: center;
	}

	.blog-intro__en {
		margin: 0 0 20px !important;

		font-size: 10px !important;
		font-weight: 700;
		line-height: 1.4 !important;
		letter-spacing: .22em !important;

		text-align: center;
	}

	/* メイン見出し */
	.blog-intro h1 {
		width: 100% !important;
		max-width: 100% !important;

		margin: 0 auto 22px !important;
		padding: 0 !important;

		font-size: clamp(27px, 7.6vw, 34px) !important;
		font-weight: 800 !important;
		line-height: 1.45 !important;
		letter-spacing: -.04em !important;

		text-align: center !important;

		word-break: keep-all !important;
		overflow-wrap: normal !important;
	}

	/* HTMLに入っている<br>をそのまま利用 */
	.blog-intro h1 br {
		display: block;
	}

	/* 説明文 */
	.blog-intro__lead {
		width: 100% !important;
		max-width: 330px !important;

		margin: 0 auto !important;
		padding: 0 !important;

		color: #667b80 !important;

		font-size: 13px !important;
		font-weight: 400 !important;
		line-height: 1.9 !important;

		text-align: center !important;

		word-break: normal !important;
		overflow-wrap: break-word !important;
	}


	/* =====================================================
	   CATEGORY
	===================================================== */

	.blog-category {
		width: 100%;

		padding: 48px 0 70px !important;

		box-sizing: border-box;
	}

	/*
	   現在のHTMLでは
	   .blog-category__grid が無いため
	   blog-container自体を1列化
	*/
	.blog-category .blog-container {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 12px !important;

		width: calc(100% - 30px) !important;
		max-width: none !important;

		margin: 0 auto !important;
		padding: 0 !important;

		box-sizing: border-box !important;
	}

	/* カテゴリー見出し */
	.blog-category .blog-section-head {
		display: block !important;
		width: 100% !important;

		margin: 0 0 20px !important;

		grid-column: 1 / -1 !important;
	}

	.blog-category .blog-section-head span {
		display: block;

		margin-bottom: 5px;

		font-size: 10px;
		line-height: 1.4;
		letter-spacing: .18em;
	}

	.blog-category .blog-section-head h2 {
		margin: 0 !important;

		font-size: 26px !important;
		line-height: 1.4 !important;
	}


	/* カテゴリーカード */
	.blog-category__item,
	.blog-category__item--news {
		display: grid !important;

		grid-template-columns:
			42px minmax(0, 1fr) 28px !important;

		align-items: center !important;

		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;

		min-height: 82px !important;

		margin: 0 !important;
		padding: 14px 15px !important;

		box-sizing: border-box !important;

		background: rgba(255, 255, 255, .96) !important;

		border: 1px solid rgba(21, 181, 181, .16) !important;
		border-radius: 14px !important;

		color: inherit !important;
		text-decoration: none !important;

		grid-column: auto !important;
	}

	.blog-category__num {
		display: block !important;

		width: auto !important;
		margin: 0 !important;

		color: #16b9b6 !important;

		font-size: 15px !important;
		font-weight: 700 !important;
		line-height: 1.4 !important;
	}

	.blog-category__body {
		display: block !important;

		width: 100% !important;
		min-width: 0 !important;

		margin: 0 !important;
		padding: 0 12px !important;

		box-sizing: border-box !important;

		border-left: 1px solid #38c8c4 !important;
	}

	.blog-category__en {
		display: block !important;

		margin: 0 0 3px !important;

		font-size: 9px !important;
		line-height: 1.4 !important;
		letter-spacing: .12em !important;
	}

	.blog-category__body h3 {
		margin: 0 !important;

		font-size: 17px !important;
		font-weight: 700 !important;
		line-height: 1.4 !important;

		white-space: normal !important;
		word-break: keep-all !important;

		writing-mode: horizontal-tb !important;
	}

	.blog-category__arrow {
		display: block !important;

		margin: 0 !important;

		color: #19bbb7 !important;

		font-size: 22px !important;
		line-height: 1 !important;

		text-align: right !important;
	}


	/* =====================================================
	   LATEST ARTICLES
	===================================================== */

	.blog-latest {
		width: 100% !important;

		padding: 50px 0 100px !important;

		box-sizing: border-box !important;

		overflow: hidden !important;
	}

	.blog-latest .blog-container {
		display: block !important;

		width: calc(100% - 24px) !important;
		max-width: none !important;

		margin: 0 auto !important;
		padding: 0 !important;

		box-sizing: border-box !important;
	}

	/* 新着記事見出し */
	.blog-latest .blog-section-head {
		width: 100% !important;

		margin: 0 0 25px !important;
	}

	.blog-latest .blog-section-head span {
		display: block;

		margin-bottom: 5px;

		font-size: 10px;
		line-height: 1.4;
		letter-spacing: .16em;
	}

	.blog-latest .blog-section-head h2 {
		margin: 0 !important;

		font-size: 27px !important;
		line-height: 1.4 !important;
	}


	/* =====================================================
	   CMS ARTICLE INDEX
	===================================================== */

	.blog-page .CMS-ARTICLE-INDEX {
		position: static !important;

		display: block !important;

		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;

		margin: 0 !important;
		padding: 0 !important;

		box-sizing: border-box !important;

		grid-template-columns: minmax(0, 1fr) !important;

		writing-mode: horizontal-tb !important;
	}


	/* =====================================================
	   ARTICLE CARD
	   SPでは「画像 → 日付 → タイトル」
	===================================================== */

	.blog-page .CMS-ARTICLE-ITEM {
		position: relative !important;

		display: flex !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		justify-content: flex-start !important;

		float: none !important;
		clear: both !important;

		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;

		height: auto !important;
		min-height: 0 !important;

		margin: 0 0 20px !important;
		padding: 10px !important;

		box-sizing: border-box !important;

		background: #fff !important;

		border-radius: 18px !important;

		overflow: hidden !important;

		grid-template-columns: minmax(0, 1fr) !important;

		writing-mode: horizontal-tb !important;

		transform: none !important;
	}


	/* =====================================================
	   ARTICLE IMAGE
	===================================================== */

	.blog-page .CMS-ARTICLE-THUMBNAIL {
		position: static !important;

		display: block !important;

		float: none !important;
		clear: both !important;

		flex: none !important;

		width: 100% !important;
		max-width: 100% !important;
		min-width: 100% !important;

		height: auto !important;
		min-height: 0 !important;

		aspect-ratio: 16 / 9 !important;

		margin: 0 0 12px !important;
		padding: 0 !important;

		box-sizing: border-box !important;

		object-fit: cover !important;
		object-position: center !important;

		border-radius: 12px !important;

		transform: none !important;
	}


	/* =====================================================
	   ARTICLE TEXT AREA
	===================================================== */

	.blog-page .CMS-ARTICLE-WRAP {
		position: static !important;

		display: block !important;

		float: none !important;
		clear: both !important;

		flex: none !important;

		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;

		height: auto !important;
		min-height: 0 !important;

		margin: 0 !important;
		padding: 2px 5px 7px !important;

		box-sizing: border-box !important;

		writing-mode: horizontal-tb !important;
		text-orientation: mixed !important;

		transform: none !important;
	}


	/* =====================================================
	   ARTICLE DATE
	===================================================== */

	.blog-page .CMS-ARTICLE-TIME {
		position: static !important;

		display: block !important;

		float: none !important;

		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;

		margin: 0 0 6px !important;
		padding: 0 !important;

		color: #075762 !important;

		font-size: 13px !important;
		font-weight: 700 !important;
		line-height: 1.4 !important;

		text-align: left !important;

		white-space: normal !important;

		writing-mode: horizontal-tb !important;
		text-orientation: mixed !important;

		transform: none !important;
	}


	/* =====================================================
	   ARTICLE TITLE
	===================================================== */

	.blog-page .CMS-ARTICLE-LINK {
		position: static !important;

		display: block !important;

		float: none !important;

		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;

		margin: 0 !important;
		padding: 0 !important;

		color: #445f64 !important;

		font-size: 17px !important;
		font-weight: 700 !important;
		line-height: 1.55 !important;

		text-align: left !important;

		white-space: normal !important;

		/* 1文字単位で折れないようにする */
		word-break: keep-all !important;
		overflow-wrap: break-word !important;

		writing-mode: horizontal-tb !important;
		text-orientation: mixed !important;

		transform: none !important;
	}


	.blog-page .CMS-ARTICLE-LINK a {
		position: static !important;

		display: block !important;

		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;

		margin: 0 !important;
		padding: 0 !important;

		color: #445f64 !important;

		font: inherit !important;
		font-size: inherit !important;
		font-weight: inherit !important;
		line-height: inherit !important;

		text-align: left !important;

		white-space: normal !important;

		word-break: keep-all !important;
		overflow-wrap: break-word !important;

		writing-mode: horizontal-tb !important;
		text-orientation: mixed !important;

		text-decoration: none !important;

		transform: none !important;
	}


	/* =====================================================
	   CMSがaタグ等を追加した場合にも横並びを防止
	===================================================== */

	.blog-page .CMS-ARTICLE-ITEM>a {
		display: flex !important;
		flex-direction: column !important;

		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;

		color: inherit !important;
		text-decoration: none !important;
	}


	/* =====================================================
	   縦書き・横幅縮小を強制解除
	===================================================== */

	.blog-page .CMS-ARTICLE-ITEM,
	.blog-page .CMS-ARTICLE-ITEM .CMS-ARTICLE-WRAP,
	.blog-page .CMS-ARTICLE-ITEM .CMS-ARTICLE-TIME,
	.blog-page .CMS-ARTICLE-ITEM .CMS-ARTICLE-LINK,
	.blog-page .CMS-ARTICLE-ITEM .CMS-ARTICLE-LINK a {
		writing-mode: horizontal-tb !important;
		text-orientation: mixed !important;
	}


}


/* =========================================================
   SMALL SMARTPHONE
========================================================= */

@media screen and (max-width: 390px) {

	.blog-intro {
		padding-left: 14px !important;
		padding-right: 14px !important;
	}

	.blog-intro h1 {
		font-size: 27px !important;
		letter-spacing: -.045em !important;
	}

	.blog-intro__lead {
		font-size: 12px !important;
	}

	.blog-category .blog-container {
		width: calc(100% - 24px) !important;
	}

	.blog-category__item,
	.blog-category__item--news {
		grid-template-columns:
			38px minmax(0, 1fr) 24px !important;

		padding: 13px !important;
	}

	.blog-category__body {
		padding: 0 10px !important;
	}

	.blog-category__body h3 {
		font-size: 16px !important;
	}

	.blog-latest .blog-container {
		width: calc(100% - 20px) !important;
	}

	.blog-page .CMS-ARTICLE-ITEM {
		padding: 9px !important;
	}

	.blog-page .CMS-ARTICLE-LINK,
	.blog-page .CMS-ARTICLE-LINK a {
		font-size: 16px !important;
		line-height: 1.55 !important;
	}

}

/* =========================================================
   BLOG HERO 見出し
   PC・SP 共通で2行固定
========================================================= */

.blog-intro h1 {
	text-align: center;
}

.blog-intro h1 br {
	display: block !important;
}

/* =========================================================
   BLOG HERO SP 調整版
========================================================= */
@media screen and (max-width: 768px) {

	.blog-intro {
		position: relative;

		width: 100% !important;
		height: auto !important;
		min-height: 475px !important;

		padding: 42px 14px 55px !important;

		box-sizing: border-box;

		/* SPでは文字が空の部分に来るよう調整 */
		background-size: cover !important;
		background-position: center top !important;
	}

	.blog-intro__inner {
		position: relative;
		z-index: 2;

		width: 100% !important;
		max-width: 100% !important;

		margin: 0 auto !important;
		padding: 0 !important;

		text-align: center !important;
	}

	/* SHARK STYLE JOURNAL */
	.blog-intro__en {
		margin: 0 0 18px !important;

		font-size: 10px !important;
		font-weight: 700 !important;
		line-height: 1.4 !important;
		letter-spacing: .22em !important;
	}

	/* 見出し */
	.blog-intro h1 {
		width: 100% !important;
		max-width: 100% !important;

		margin: 0 auto 28px !important;
		padding: 0 !important;

		font-size: clamp(25px, 7.2vw, 32px) !important;
		font-weight: 800 !important;
		line-height: 1.45 !important;
		letter-spacing: -.045em !important;

		text-align: center !important;

		white-space: normal !important;
		word-break: normal !important;
		overflow-wrap: normal !important;
	}

	/* 見出しはHTMLのbrで2行固定 */
	.blog-intro h1 br {
		display: block !important;
	}

	/* 説明文 */
	.blog-intro__lead {
		width: calc(100% - 16px) !important;
		max-width: 360px !important;

		margin: 0 auto !important;
		padding: 0 !important;

		color: #667b80 !important;

		font-size: 12.5px !important;
		font-weight: 400 !important;
		line-height: 1.9 !important;
		letter-spacing: 0 !important;

		text-align: center !important;

		white-space: normal !important;
		word-break: normal !important;
		overflow-wrap: break-word !important;

		line-break: strict !important;
	}

	/* 説明文のHTML側brは残す */
	.blog-intro__lead br {
		display: block !important;
	}
}

/* =========================================================
   BLOG SP 見出し位置統一
   「カテゴリーから探す」と「新着記事」を同じ左位置に
========================================================= */
@media screen and (max-width: 768px) {

	/* 2セクションのコンテナ幅を完全統一 */
	.blog-category .blog-container,
	.blog-latest .blog-container {
		display: block !important;
		width: calc(100% - 24px) !important;
		max-width: none !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		box-sizing: border-box !important;
	}

	/* 見出し位置を完全統一 */
	.blog-category .blog-section-head,
	.blog-latest .blog-section-head {
		position: static !important;
		display: block !important;
		width: 100% !important;
		max-width: none !important;

		margin: 0 0 25px 0 !important;
		padding: 0 !important;

		text-align: left !important;

		left: auto !important;
		right: auto !important;
		transform: none !important;
	}

	.blog-category .blog-section-head span,
	.blog-category .blog-section-head h2,
	.blog-latest .blog-section-head span,
	.blog-latest .blog-section-head h2 {
		display: block !important;
		width: auto !important;

		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;

		text-align: left !important;

		left: auto !important;
		right: auto !important;
		transform: none !important;
	}

	/* サイズも同じに */
	.blog-category .blog-section-head span,
	.blog-latest .blog-section-head span {
		margin-bottom: 5px !important;
		font-size: 10px !important;
		line-height: 1.4 !important;
		letter-spacing: .16em !important;
	}

	.blog-category .blog-section-head h2,
	.blog-latest .blog-section-head h2 {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		font-size: 27px !important;
		line-height: 1.4 !important;
	}
}

/* =========================================================
   BLOG SP 最終修正
   PC用のカテゴリー位置指定をSPで解除
========================================================= */
@media screen and (max-width: 768px) {

	/* 上の巨大余白を解除 */
	.blog-westcoast-area .blog-category {
		padding: 40px 0 65px !important;
		margin: 0 !important;
	}

	/* PC用 margin-left:140px を解除 */
	.blog-westcoast-area .blog-category .blog-section-head {
		width: 100% !important;

		margin-top: 0 !important;
		margin-right: 0 !important;
		margin-bottom: 25px !important;
		margin-left: 0 !important;

		padding: 0 !important;

		left: auto !important;
		right: auto !important;
		transform: none !important;

		text-align: left !important;
	}

	/* 新着記事と同じコンテナ幅 */
	.blog-westcoast-area .blog-category .blog-container,
	.blog-latest .blog-container {
		width: calc(100% - 24px) !important;
		max-width: none !important;

		margin-left: auto !important;
		margin-right: auto !important;

		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* EXPLORE */
	.blog-westcoast-area .blog-category .blog-section-head span {
		margin: 0 0 5px !important;
		padding: 0 !important;

		font-size: 10px !important;
		letter-spacing: .16em !important;

		text-align: left !important;
	}

	/* カテゴリーから探す */
	.blog-westcoast-area .blog-category .blog-section-head h2 {
		margin: 0 !important;
		padding: 0 !important;

		font-size: 27px !important;
		line-height: 1.4 !important;

		text-align: left !important;
	}

}