/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

/* TOPページ スライダー → 各スライド自身の比率で高さを決め、広い画面では上下だけクロップ */
@media (min-width: 768px) {
	.swiper {
		height: auto !important;
		margin-top: 20px !important;
	}
	.swiper-wrapper,
	.swiper-slide {
		height: auto !important;
	}
	.swiper-slide img {
		width: 100% !important;
		height: auto !important;
		max-height: 700px !important;
		object-fit: cover !important;
	}
}

/* フッター：提携ポータルサイトのリンクバナー（横並び・ホバーで半透明） */
.footer-partner-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

.footer-partner-links a {
	display: inline-block;
}

.footer-partner-links img {
	display: block;
	max-width: 90px;
	height: auto;
	transition: opacity 0.3s ease;
}

.footer-partner-links a:hover img {
	opacity: 0.65;
}

/* TOPページ「選ばれる理由」→ モバイルで縦積み（タイトル→画像→段落）に固定 */
@media screen and (max-width: 991px) {
	.reason_sec .blue_border_box {
		display: block !important;
		margin-bottom: 20px !important;
	}
	.reason_sec .blue_border_box .box_title {
		position: static !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		display: flex !important;
		align-items: center !important;
		width: 100% !important;
		min-height: 44px !important;
		box-sizing: border-box !important;
		font-size: 16px !important;
		line-height: 1.4 !important;
		text-align: left !important;
		margin: 0 !important;
		padding: 6px 12px 6px 92px !important;
	}
	.reason_sec .blue_border_box figure {
		width: 100% !important;
		margin: 12px 0 !important;
	}
	.reason_sec .blue_border_box img {
		width: 100% !important;
		height: auto !important;
		object-fit: cover !important;
	}
	.reason_sec .blue_border_box .txt {
		width: 100% !important;
		margin-bottom: 0 !important;
	}
	.reason_sec .blue_border_box .txt p {
		padding: 0 10px 16px !important;
		font-size: 15px !important;
	}
}

/* TOPページ「選ばれる理由」→ PCでもリボンバッジとタイトルが重ならないよう調整 */
@media screen and (min-width: 992px) {
	.reason_sec .blue_border_box .box_title {
		position: static !important;
		display: block !important;
		width: 100% !important;
		box-sizing: border-box !important;
		text-align: left !important;
		margin: 60px 0 15px !important;
		padding: 0 16px !important;
	}
}

/* 火災保険申請でご注意いただきたいこと → Q/AマークをQ→「！」、A→非表示に */
.notice-list dl dt::before {
	content: '！' !important;
}

.notice-list dl dd::before {
	content: none !important;
	display: none !important;
}

.notice-list dl dd {
	padding-left: 0 !important;
}

@media screen and (max-width: 768px) {
	.notice-list dl dd {
		padding-left: 0 !important;
	}
}

/* おすすめの屋根材 → 2列固定・ボックス間に余白 */
.material-grid-2col {
	display: flex !important;
	flex-wrap: wrap !important;
}

.material-grid-2col > div {
	box-sizing: border-box !important;
}

@media screen and (min-width: 768px) {
	.material-grid-2col {
		gap: 32px !important;
	}
	.material-grid-2col > div {
		flex: 0 0 calc(50% - 16px) !important;
		max-width: calc(50% - 16px) !important;
	}
}

@media screen and (max-width: 767px) {
	.material-grid-2col {
		gap: 24px !important;
	}
	.material-grid-2col > div {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}
}

/* 火災保険申請サポートバナー → 80%縮小・中央揃え */
.hoken-bnr-img {
	display: inline-block !important;
	width: 80% !important;
	max-width: 80% !important;
	height: auto !important;
	margin: 0 auto !important;
}

/* 資格・保有スキル → 4列固定（PC）／2列（モバイル） */
.qualification-grid {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 0 !important;
}

.qualification-grid > div {
	box-sizing: border-box !important;
	padding: 0 16px 32px !important;
}

.qualification-grid .shikaku-h {
	margin-bottom: 14px !important;
}

@media screen and (min-width: 768px) {
	.qualification-grid > div {
		flex: 0 0 25% !important;
		max-width: 25% !important;
	}
}

@media screen and (max-width: 767px) {
	.qualification-grid > div {
		flex: 0 0 50% !important;
		max-width: 50% !important;
		padding: 0 10px 24px !important;
	}
}

.qualification-grid img {
	max-width: 100% !important;
	height: auto !important;
	margin: 0 auto !important;
	display: block !important;
}

/* .bg-content → グラデーションウォッシュ型の背景（上から下へ淡くフェード） */
.bg-content {
	background: linear-gradient(180deg, #bccfe7 0%, #F4F6F9 100%) !important;
}

/* 丸写真＋帯ラベル（photo-badge） → デザイン書き出し不要でCSSから色・文字を管理 */
.photo-badge {
	position: relative !important;
	display: block !important;
	text-align: center !important;
	margin: 0 0 22px !important;
	border: none !important;
}

.photo-badge img {
	display: block !important;
	width: 200px !important;
	height: 200px !important;
	margin: 0 auto !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	border: 4px solid #001D49 !important;
}

.photo-badge-label {
	display: inline-block !important;
	position: relative !important;
	margin-top: -18px !important;
	max-width: 92% !important;
	background: #001D49 !important;
	color: #ffffff !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	padding: 8px 18px !important;
	border-radius: 999px !important;
}

@media screen and (max-width: 768px) {
	.photo-badge img {
		width: 108px !important;
		height: 108px !important;
		border-width: 3px !important;
	}
	.photo-badge-label {
		margin-top: -14px !important;
		font-size: 12px !important;
		padding: 6px 12px !important;
	}
}

/* .link_btn / .link_btn_s ボタン → 角丸なし・縦グラデーション・ホバーでふわっと色変化 */
.link_btn a,
.link_btn_s a {
	background: linear-gradient(180deg, #002a66 0%, #011a43 100%) !important;
	border-radius: 0 !important;
	position: relative !important;
	z-index: 0 !important;
	overflow: hidden !important;
	color: #ffffff !important;
}

.link_btn a::before,
.link_btn_s a::before {
	content: '' !important;
	position: absolute !important;
	inset: 0 !important;
	z-index: -1 !important;
	background: linear-gradient(180deg, #cf9a1f 0%, #8a6404 100%) !important;
	opacity: 0 !important;
	transition: opacity 0.5s ease !important;
	pointer-events: none !important;
}

.link_btn a:hover,
.link_btn_s a:hover {
	background: linear-gradient(180deg, #002a66 0%, #011a43 100%) !important;
	color: #ffffff !important;
}

.link_btn a:hover::before,
.link_btn_s a:hover::before {
	opacity: 1 !important;
}

/* ヘッダー：ロゴは左端、電話バナー＋お問い合わせボタンは右端に配置（PCのみ） */
@media screen and (min-width: 992px) {
	#logo {
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
		width: 100% !important;
	}

	.logo-left {
		flex-shrink: 0 !important;
		width: auto !important;
		margin-right: auto !important;
	}

	.logo-right {
		display: flex !important;
		justify-content: flex-end !important;
		align-items: center !important;
		width: auto !important;
		flex-shrink: 0 !important;
		margin-left: auto !important;
	}
}

/* モバイル：ロゴが大きくなりすぎないよう明示的に上限を設定 */
@media screen and (max-width: 991px) {
	.logo-left {
		width: 55% !important;
		max-width: 220px !important;
	}
	.logo-left a.standard-logo {
		display: inline-block !important;
		max-width: 100% !important;
	}
	.logo-left a.retina-logo {
		display: none !important;
	}
	#logo img {
		max-width: 100% !important;
		height: auto !important;
	}
}

/* Reason ribbon → 斜めカットタグ（クリップパスによるシャープな切り込み） */
.ribbon15 {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	width: auto;
	min-width: 96px;
	padding: 6px 38px 6px 16px;
	z-index: 2;
	background: #001D49;
	clip-path: polygon(0 0, 100% 0, 68% 100%, 0% 100%);
	border-radius: 0;
	text-align: left;
	color: #ffffff;
	font-size: 24px;
	line-height: 1.1;
	font-weight: 700;
}

.ribbon15:before,
.ribbon15:after {
	content: none;
	border: none;
	background: none;
}

.ribbon15 span {
	display: block;
	margin-bottom: 2px;
	color: #b58405;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
}

@media screen and (max-width: 768px) {
	.ribbon15 {
		min-width: 78px;
		padding: 5px 30px 5px 12px;
		font-size: 18px;
	}
	.ribbon15 span {
		font-size: 10px;
	}
}

/* H2見出し → ミニマルライン型（控えめなラベル＋極細ラインで余白を活かす） */
.heading-block {
	display: block !important;
	text-align: center !important;
}

.heading-label {
	display: block !important;
	position: static !important;
	background: none !important;
	clip-path: none !important;
	padding: 0 !important;
	margin: 0 0 10px !important;
	max-width: none !important;
	width: auto !important;
	color: #b58405 !important;
	font-size: 12px !important;
	line-height: 1.4 !important;
	font-weight: 700 !important;
	letter-spacing: 0.2em !important;
}

.heading-label::before,
.heading-label::after {
	content: none !important;
	display: none !important;
}

.heading-main {
	display: inline-flex !important;
	justify-content: center !important;
	align-items: baseline !important;
	gap: 8px !important;
	flex-wrap: wrap !important;
	margin: 0 !important;
	max-width: none !important;
}

.heading-jp {
	font-size: 32px !important;
	color: #001D49 !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
}

.heading-highlight {
	font-size: 32px !important;
	color: #b58405 !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
}

.heading-block::after {
	content: '' !important;
	display: block !important;
	width: 36px !important;
	height: 2px !important;
	background: #001D49 !important;
	margin: 16px auto 0 !important;
	clip-path: none !important;
}

@media screen and (max-width: 768px) {
	.heading-label {
		font-size: 11px !important;
		letter-spacing: 0.14em !important;
		margin-bottom: 8px !important;
	}
	.heading-jp,
	.heading-highlight {
		font-size: 24px !important;
	}
	.heading-block::after {
		width: 28px !important;
		margin-top: 12px !important;
	}
}