/* =========================================================
   FNJ Whitepaper Floating CTA
   /assets/css/whitepaper-floating-cta.css
========================================================= */


/* =========================================================
   RESET
========================================================= */

.fnj-wpfloat,
.fnj-wpfloat *,
.fnj-wpfloat *::before,
.fnj-wpfloat *::after {
	box-sizing: border-box;
}

.fnj-wpfloat p,
.fnj-wpfloat span,
.fnj-wpfloat div,
.fnj-wpfloat a,
.fnj-wpfloat button {
	margin: 0;
	padding: 0;
}

.fnj-wpfloat a {
	color: inherit;
	text-decoration: none;
}

.fnj-wpfloat button {
	font: inherit;
}


/* =========================================================
   ROOT
========================================================= */

.fnj-wpfloat {
	position: fixed;

	right: 72px;
	bottom: 28px;

	z-index: 9990;

	width: 316px;
	max-width: calc(100vw - 100px);

	margin: 0;
	padding: 0;

	font-family:
		-apple-system,
		BlinkMacSystemFont,
		"Helvetica Neue",
		"Yu Gothic",
		"YuGothic",
		"Hiragino Kaku Gothic ProN",
		"ヒラギノ角ゴ ProN W3",
		Meiryo,
		sans-serif;

	font-style: normal;
	text-align: left;

	/*
	 * JSで is-visible が付くまで非表示
	 */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transform: translateY(12px);

	transition:
		opacity 0.28s ease,
		transform 0.28s ease,
		visibility 0.28s ease;
}


/* 表示状態 */

.fnj-wpfloat.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;

	transform: translateY(0);
}


/* =========================================================
   CARD
========================================================= */

.fnj-wpfloat__card {
	width: 100%;

	margin: 0;
	padding: 0;

	background: #ffffff;

	border: 1px solid #d7dee8;
	border-radius: 11px;

	box-shadow:
		0 10px 30px rgba(15, 39, 69, 0.15),
		0 2px 8px rgba(15, 39, 69, 0.07);

	overflow: hidden;
}


/* =========================================================
   HEADER
========================================================= */

.fnj-wpfloat__header {
	position: relative;

	display: flex;
	align-items: center;
	justify-content: space-between;

	width: 100%;
	height: 40px;

	margin: 0;

	/*
	 * 最初のB案に合わせて
	 * 左側にしっかり余白を確保
	 */
	padding: 0 10px 0 18px !important;

	background: #173f6d;
}


/* 無料資料 */

.fnj-wpfloat__label {
	display: block;

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

	color: #ffffff !important;

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

	letter-spacing: 0.05em !important;

	text-align: left !important;
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.fnj-wpfloat__close {
	display: flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 28px;

	width: 28px;
	height: 28px;

	margin: 0;
	padding: 0;

	border: 0;
	outline: 0;

	background: transparent;

	color: #ffffff;

	font-family: Arial, sans-serif;
	font-size: 22px;
	font-weight: 300;
	line-height: 1;

	cursor: pointer;

	appearance: none;
	-webkit-appearance: none;

	transition: opacity 0.2s ease;
}


.fnj-wpfloat__close span {
	display: block;

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

	color: #ffffff !important;

	font: inherit;
	line-height: 1;
}


.fnj-wpfloat__close:hover {
	opacity: 0.7;
}


.fnj-wpfloat__close:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: -3px;

	border-radius: 4px;
}


/* =========================================================
   BODY
========================================================= */

.fnj-wpfloat__body {
	width: 100%;

	margin: 0;

	/*
	 * 最初のB案の余白感を再現
	 */
	padding: 20px 18px 16px !important;

	background: #ffffff;
}


/* =========================================================
   MAIN
========================================================= */

/*
 * 現在のHTML構造
 *
 * .fnj-wpfloat__main
 * ├─ .fnj-wpfloat__icon
 * └─ .fnj-wpfloat__content
 *      ├─ .fnj-wpfloat__title
 *      └─ .fnj-wpfloat__description
 *
 * descriptionはカード横幅いっぱいを使うため、
 * contentをdisplay:contentsにしてGrid配置する。
 */

.fnj-wpfloat__main {
	display: grid;

	grid-template-columns:
		40px
		minmax(0, 1fr);

	column-gap: 14px !important;
	row-gap: 12px !important;

	width: 100%;

	margin: 0;
	padding: 0;
}


.fnj-wpfloat__content {
	display: contents;
}


/* =========================================================
   DOCUMENT ICON
========================================================= */

.fnj-wpfloat__icon {
	grid-column: 1;
	grid-row: 1;

	display: flex;
	align-items: flex-start;
	justify-content: center;

	width: 40px;

	margin: 0 0 0 2px !important;
	padding: 1px 0 0;

	color: #7895bb;
}


.fnj-wpfloat__icon svg {
	display: block;

	width: 34px;
	height: 42px;

	margin: 0;
	padding: 0;

	color: inherit;

	flex: none;
}


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

.fnj-wpfloat__title {
	grid-column: 2;
	grid-row: 1;

	align-self: center;

	display: block;

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

	color: #102f55 !important;

	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;

	letter-spacing: 0.01em !important;

	text-align: left !important;
}


/* =========================================================
   DESCRIPTION
========================================================= */

/*
 * アイコンの右側だけではなく、
 * 2列をまたいでカード横幅いっぱいを使用
 */

.fnj-wpfloat__description {
	grid-column: 1 / -1;
	grid-row: 2;

	display: block;

	width: 100%;

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

	color: #455264 !important;

	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1.75 !important;

	letter-spacing: 0.01em !important;

	text-align: left !important;
}


/* =========================================================
   CTA BUTTON
========================================================= */

.fnj-wpfloat__button {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	min-height: 41px;

	margin: 14px 0 0 !important;
	padding: 8px 16px !important;

	border: 1px solid #173f6d;
	border-radius: 999px;

	background: #173f6d;

	color: #ffffff !important;

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

	letter-spacing: 0.025em !important;

	text-align: center !important;
	text-decoration: none !important;

	cursor: pointer;

	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		transform 0.2s ease;
}


.fnj-wpfloat__button span {
	display: inline-block;

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

	color: #ffffff !important;

	font-size: 16px;
	font-weight: 400;
	line-height: 1;

	transition: transform 0.2s ease;
}


/* Hover */

@media (hover: hover) {

	.fnj-wpfloat__button:hover {
		background: #0f3158;
		border-color: #0f3158;

		color: #ffffff !important;

		text-decoration: none !important;
	}

	.fnj-wpfloat__button:hover span {
		transform: translateX(3px);
	}

}


/* Active */

.fnj-wpfloat__button:active {
	transform: translateY(1px);
}


/* Focus */

.fnj-wpfloat__button:focus-visible {
	outline: 3px solid rgba(23, 63, 109, 0.28);
	outline-offset: 3px;
}


/* =========================================================
   TABLET
========================================================= */

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

	.fnj-wpfloat {
		right: 58px;
		bottom: 24px;

		width: 300px;
	}

}


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

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

	.fnj-wpfloat {
		right: 32px;
		bottom: 14px;

		width: 248px;
		max-width: calc(100vw - 52px);

		transform: translateY(10px);
	}


	.fnj-wpfloat.is-visible {
		transform: translateY(0);
	}


	/* -----------------------------------------------------
	   CARD
	----------------------------------------------------- */

	.fnj-wpfloat__card {
		border-radius: 9px;

		box-shadow:
			0 7px 22px rgba(15, 39, 69, 0.16),
			0 2px 6px rgba(15, 39, 69, 0.07);
	}


	/* -----------------------------------------------------
	   HEADER
	----------------------------------------------------- */

	.fnj-wpfloat__header {
		height: 32px;

		/*
		 * SPでも左側の余白を確保
		 */
		padding: 0 7px 0 13px !important;
	}


	.fnj-wpfloat__label {
		font-size: 10px !important;

		letter-spacing: 0.05em !important;
	}


	/* -----------------------------------------------------
	   CLOSE
	----------------------------------------------------- */

	.fnj-wpfloat__close {
		flex-basis: 25px;

		width: 25px;
		height: 25px;

		font-size: 19px;
	}


	/* -----------------------------------------------------
	   BODY
	----------------------------------------------------- */

	.fnj-wpfloat__body {
		/*
		 * SPでも外枠との余白を確保
		 */
		padding: 13px 13px 11px !important;
	}


	/* -----------------------------------------------------
	   MAIN
	----------------------------------------------------- */

	.fnj-wpfloat__main {
		grid-template-columns:
			31px
			minmax(0, 1fr);

		column-gap: 10px !important;
		row-gap: 0 !important;
	}


	/* -----------------------------------------------------
	   ICON
	----------------------------------------------------- */

	.fnj-wpfloat__icon {
		width: 31px;

		margin: 0 !important;
		padding-top: 0;
	}


	.fnj-wpfloat__icon svg {
		width: 28px;
		height: 34px;
	}


	/* -----------------------------------------------------
	   TITLE
	----------------------------------------------------- */

	.fnj-wpfloat__title {
		font-size: 12px !important;
		line-height: 1.5 !important;

		letter-spacing: 0 !important;
	}


	/* -----------------------------------------------------
	   DESCRIPTION
	   SPでは非表示
	----------------------------------------------------- */

	.fnj-wpfloat__description {
		display: none !important;
	}


	/* -----------------------------------------------------
	   BUTTON
	----------------------------------------------------- */

	.fnj-wpfloat__button {
		min-height: 32px;

		margin-top: 10px !important;
		padding: 5px 10px !important;

		font-size: 11px !important;
		line-height: 1.3 !important;
	}


	.fnj-wpfloat__button span {
		margin-left: 4px !important;

		font-size: 12px;
	}

}


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

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

	.fnj-wpfloat {
		right: 28px;

		width: 238px;
		max-width: calc(100vw - 46px);
	}


	.fnj-wpfloat__title {
		font-size: 11.5px !important;
	}


	.fnj-wpfloat__button {
		font-size: 10.5px !important;
	}

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.fnj-wpfloat,
	.fnj-wpfloat__close,
	.fnj-wpfloat__button,
	.fnj-wpfloat__button span {
		transition: none !important;
	}

}