@charset "utf-8";


@keyframes fadeOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1.0;
	}
}


@media all and (max-width: 799px) {

	/* ---------- SP モーダル ---------- */

	.modal-widget-intersection-observer {
		position: absolute;
		z-index: 300;
		top: 50%;
		width: 1px;
		height: 1px;
	}

	.modal-widget-wrapper {
		animation: fadeOpacity 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0s forwards; /* モーダルの表示演出 */
		position: fixed;
		z-index: 200;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		background: rgba(0, 0, 0, 0.6);
	}

	.modal-widget-wrapper.hidden, /* 初期状態 */
	.modal-widget-wrapper.closed /* close操作後 */ {
		display: none;
	}

	.modal-widget-wrapper .modal-inner {
		position: relative;
		max-width: 800px;
	}

	.modal-widget-wrapper .close-button {
		position: absolute;
		z-index: 2;
		top: 0px;
		right: calc(0% - 23px);
		width: 45px;
		height: 45px;
		border-radius: 50%;
		background: #d9d9d9;
		transform: rotate(45deg);
		cursor: pointer;
	}
	
	.modal-widget-wrapper .close-button {
		top: -22px;
	}

	.modal-widget-wrapper .close-button::before {
		content: "";
		display: block;
		position: absolute;
		z-index: 2;
		top: calc(50% - 1px);
		left: 8px;
		width: 28px;
		height: 1px;
		background-color: #000;
	}

	.modal-widget-wrapper .close-button::after {
		content: "";
		display: block;
		position: absolute;
		z-index: 2;
		top: 8px;
		left: calc(50% - 1px);
		width: 1px;
		height: 28px;
		background-color: #000;
	}

	/* ---------- SP フローティングバナー ---------- */

	.floating-banner-widget-wrapper {
		transition: bottom .5s 0s cubic-bezier(0.075, 0.82, 0.165, 1);
		position: fixed;
		left: 0px;
		bottom: 0px;
		z-index: 1;
		width: 100lvw;
		/* height: 120px; */
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-content: center;
		box-sizing: border-box;
		background: rgba(0, 0, 0, 0.25);
	}

	.floating-banner-widget-wrapper.hidden {
		bottom: -120px;
	}

	.floating-banner-widget-wrapper .floating-banner-widget {
		z-index: 98px;
	}

	.floating-banner-widget-wrapper .p-blogParts {
		width: 100%;
	}

	/* ---------- SP 記事h1下CTA ---------- */

	.before-h1-widget-wrapper {
		margin: -1em 0 1.6em 0;
	}

}

@media all and (min-width: 800px) {

	/* ---------- PC モーダル ---------- */

	.modal-widget-intersection-observer {
		position: absolute;
		z-index: 300;
		top: 50%;
		border: 1px solid transparent;
		width: 1px;
		height: 1px;
	}

	.modal-widget-wrapper {
		animation: fadeOpacity 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0s forwards; /* モーダルの表示演出 */
		position: fixed;
		z-index: 200;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		background: rgba(0, 0, 0, 0.6);
	}

	.modal-widget-wrapper.hidden, /* 初期状態 */
	.modal-widget-wrapper.closed /* close操作後 */ {
		display: none;
	}

	.modal-widget-wrapper .modal-inner {
		position: relative;
		max-width: 800px;
	}

	.modal-widget-wrapper .close-button {
		position: absolute;
		z-index: 2;
		top: 0px;
		right: calc(0% - 23px);
		width: 45px;
		height: 45px;
		border-radius: 50%;
		background: #d9d9d9;
		transform: rotate(45deg);
		cursor: pointer;
	}
	
	.modal-widget-wrapper .close-button {
		top: -22px;
	}

	.modal-widget-wrapper .close-button::before {
		content: "";
		display: block;
		position: absolute;
		z-index: 2;
		top: calc(50% - 1px);
		left: 8px;
		width: 28px;
		height: 1px;
		background-color: #000;
	}

	.modal-widget-wrapper .close-button::after {
		content: "";
		display: block;
		position: absolute;
		z-index: 2;
		top: 8px;
		left: calc(50% - 1px);
		width: 1px;
		height: 28px;
		background-color: #000;
	}

	/* ---------- PC フローティングバナー ---------- */

	.floating-banner-widget-wrapper {
		transition: bottom .5s 0s cubic-bezier(0.075, 0.82, 0.165, 1);
		position: fixed;
		left: 0px;
		bottom: 0px;
		z-index: 1;
		width: 100lvw;
		/* height: 90px; */
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-content: center;
		box-sizing: border-box;
		background: rgba(0, 0, 0, 0.25);
	}

	.floating-banner-widget-wrapper.hidden {
		bottom: -110px;
	}

	.floating-banner-widget-wrapper .floating-banner-widget {
		z-index: 98px;
	}

	.floating-banner-widget-wrapper .p-blogParts {
		width: 100%;
	}

	/* ---------- PC 記事h1下CTA ---------- */

	.before-h1-widget-wrapper {
		max-width: 900px;
		margin: -2.6em auto 1.6em auto;
	}
	
}