/*////////////////////////////////////////////////////////////////////////////*/

/*! footer.css */

/*////////////////////////////////////////////////////////////////////////////*/


/*------------------------------------------------------------------------------

	変数

------------------------------------------------------------------------------*/

.site-footer {
	/* フッターの色指定 */
	--site-footer-text-color-rgb: var(--color-izumi-blue-rgb);
	--site-footer-text-color-a: 1;
	--site-footer-text-color: rgb(var(--site-footer-text-color-rgb) / var(--site-footer-text-color-a, 1));
	--site-footer-bg-color-rgb: 255 255 255;
	--site-footer-bg-color-a: 0;
	--site-footer-bg-color: rgb(var(--site-footer-bg-color-rgb) / var(--site-footer-bg-color-a, 1));

	/* フッターのロゴ指定 */
	--logo-max-height: 3em;
	--logo-fixed-height: 3em;
}


/*------------------------------------------------------------------------------

	<footer>

------------------------------------------------------------------------------*/

.site-footer {
	position: relative;
	margin: var(--ch-section-margin, 0px);
	border-radius: var(--ch-section-border-radius, 0px);
	/**/
	background: rgb(var(--site-footer-bg-color-rgb) / var(--site-footer-bg-color-a));
	color: rgb(var(--site-footer-text-color-rgb) / var(--site-footer-text-color-a));
}


/*------------------------------------------------------------------------------

	フッターナビバー（メニューボタン・ぱんくずリスト）

------------------------------------------------------------------------------*/


/*	コンテナー
------------------------------------------------------------------------------*/

.site-footer-nav {
	--border-width: 1px;
	/**/
	display: flex;
	align-items: center;
	/**/
	position: relative;
	margin: 0;
	padding: 0 var(--section-padding-x);
}

.site-footer-nav::before {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: var(--border-width);
	background: rgb(var(--site-footer-text-color-rgb));
	mix-blend-mode: multiply;
}

.site-footer-nav > .breadcrumbs-box {
	flex-grow: 1;
}


/*	メニューボタン
------------------------------------------------------------------------------*/

.site-footer-nav .menu-button {
	--menu-border-radius: .5em;
	--menu-bg-color-rgb: 255 255 255;
	--menu-bg-color-a: 1;
	--menu-text-color-rgb: var(--color-izumi-blue-rgb);
	/**/
	margin: 0;
	border-radius: var(--menu-border-radius) var(--menu-border-radius) 0 0;
	border-width: var(--border-width);
	border-color: var(--color-izumi-blue);
	border-bottom: none;
}

@media (any-hover: hover) {

	.site-footer-nav .menu-button:hover {
		--menu-text-color-a: .7;
	}

/**/}
@media (any-hover: none) {

	.site-footer-nav .menu-button:active {
		--menu-text-color-a: .7;
	}

/**/}


/*	ぱんくず
------------------------------------------------------------------------------*/

.site-footer-nav .breadcrumbs-box {
	margin-right: calc(var(--section-padding-x) * -1);
}


/*------------------------------------------------------------------------------

	サイトマップ

------------------------------------------------------------------------------*/
/* 未設置 */


/*------------------------------------------------------------------------------

	フッターコンテンツ

------------------------------------------------------------------------------*/


/*	共通
------------------------------------------------------------------------------*/

.site-footer-content,
.site-footer-content a,
.site-footer-content svg {
	color: rgb(var(--site-footer-text-color-rgb));
	fill: rgb(var(--site-footer-text-color-rgb));
}


/*	本体コンテナー
------------------------------------------------------------------------------*/

.site-footer-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 1em var(--space_4_2);
	/**/
	position: relative;
	padding: var(--space_6_4) var(--section-padding-x) var(--space_4_3);
	line-height: 1.5;
}

@media (max-width: 1024px) {/* 1カラム */

	.site-footer-content {
		grid-template-columns: 1fr;
		grid-gap: var(--space_2);
	}

/**/}


/*------------------------------------------------------------------------------

	見出し

------------------------------------------------------------------------------*/

.site-footer-content-title {
	--icon-size: 4em;
	/**/
	grid-column: 1 / -1;
	/**/
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	/**/
	position: relative;
	width: 100%;
	margin: 0 0 1em;
	padding: .5em .75em;
	padding-left: calc(var(--icon-size) + 2em);
	background: var(--site-footer-text-color);
	border-radius: .25em;
	line-height: 1.5;
	text-align: left;
	color: var(--site-footer-content-title-color, #FFF);
}

.site-footer-content-title::before {
	content: '';
	position: absolute;
	left: 1em;
	top: 50%;
	width: var(--icon-size);
	height: var(--icon-size);
	border: 1px solid var(--site-footer-text-color);
	border-radius: 50%;
	background: var(--icon, #FFF) no-repeat center center / cover;
	transform: translateY(-50%);
}

@media (max-width: 720px) {

	.site-footer-content-title {
		--icon-size: 6em;
		/**/
		margin-bottom: 0;
		font-size: 3.514vw;
	}

/**/}


/*------------------------------------------------------------------------------

	写真列

------------------------------------------------------------------------------*/

.site-footer-photos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 5px;
	/**/
	margin: 0;
	width: 100%;
	height: 100%;
}

.site-footer-photos > .img:first-child {
	grid-column: 1 / -1;
}

.site-footer-photos > .img {
	--aspect-ratio: 16 / 9;
}

.site-footer-photos iframe {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

@media (max-width: 1024px) {/* 1カラム */

	.site-footer-photos > .img {
		--aspect-ratio: 4 / 3;
	}

/**/}


/*------------------------------------------------------------------------------

	テキスト列

------------------------------------------------------------------------------*/

.site-footer-text {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.site-footer-cta {
	order: -1;
	margin: 0 0 auto;
}


/*------------------------------------------------------------------------------

	CTA

------------------------------------------------------------------------------*/


/*	Gridレイアウト
------------------------------------------------------------------------------*/

.site-footer-cta {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 1em;
	/**/
	margin: 0 0 var(--space_4_3);
}

.site-footer-cta svg {
	display: block;
	width: 2em;
	height: 2em;
}

@media (max-width: 720px) {

	.site-footer-cta {
		grid-template-columns: 1fr;
	}

	.site-footer-cta {
		font-size: 4vw;
	}

/**/}

@media (max-width: 374px) {/* iPhone SE1 */

	.site-footer-cta {
		font-size: 3.514vw;
	}

/**/}


/*	リンクコンテナー
------------------------------------------------------------------------------*/

.site-footer-cta-link {
	--bg-color-rgb: 255 255 255;
	--bg-color-a: 1;
	--padding: 1.5em;
	--border-width: 2px;
	--border-radius: 1em;
	--border-color-rgb: var(--color-izumi-blue-rgb);
	--border-color-a: .5;
	--text-color-rgb: var(--color-izumi-blue-rgb);
	--text-color-a: 1;
	--icon-bg-color-rgb: var(--border-color-rgb);
	--icon-bg-color-a: 1;
	--icon-size: 3em;
	--icon-svg-size: 1.5em;
	--invert-bg-color-rgb: var(--text-color-rgb);
	--invert-bg-color-a: 1;
	--invert-text-color-rgb: var(--bg-color-rgb);
	--invert-text-color-a: 1;
	/**/
	display: grid;
	grid-template-columns: auto 1fr;
	align-self: flex-start;
	/**/
	padding: var(--padding);
	background: rgb(var(--bg-color-rgb) / var(--bg-color-a));
	border: var(--border-width) solid rgb(var(--border-color-rgb) / var(--border-color-a));
	border-radius: var(--border-radius);
	line-height: 1;
	font-feature-settings: "palt";
	/**/
	transition: background-color .2s ease-out;
}

/**/

.site-footer-cta-link > .cta-icon {
	grid-row: 1 / 3;
	/**/
	position: relative;
	margin: 0 1em 0 0;
	width: var(--icon-size);
	height: var(--icon-size);
	border-radius: 50%;
	background: rgb(var(--icon-bg-color-rgb) / var(--icon-bg-color-a));
}

.site-footer-cta-link > .cta-icon > svg {
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--icon-svg-size);
	height: var(--icon-svg-size);
	fill: rgb(var(--bg-color-rgb));
	transform: translateX(-50%) translateY(-50%);
}

.site-footer-cta-link > .cta-title {
	white-space: nowrap;
	font-size: 150%;
	color: rgb(var(--text-color-rgb) / var(--text-color-a));
}

.site-footer-cta-link > .cta-title > .de {
	vertical-align: baseline;
	margin: 0 .125em;
	font-size: 90%;
}

.site-footer-cta-link > .cta-caption {
	grid-column: 2;
	margin-top: .5rem;
	font-size: 75%;
	color: rgb(var(--text-color-rgb) / var(--text-color-a));
}

/**/

@media (any-hover: hover) {

	.site-footer-cta-link:hover {
		--border-color-a: 1;
		background-color: rgb(var(--invert-bg-color-rgb));
	}

	.site-footer-cta-link:hover > .cta-icon {
		background-color: rgb(var(--invert-text-color-rgb));
	}

	.site-footer-cta-link:hover > .cta-icon > svg {
		fill: rgb(var(--invert-bg-color-rgb));
	}

	.site-footer-cta-link:hover > .cta-title,
	.site-footer-cta-link:hover > .cta-caption {
		color: rgb(var(--invert-text-color-rgb));
	}

/**/}
@media (any-hover: none) {

	.site-footer-cta-link:active {
		--border-color-a: 1;
		background-color: rgb(var(--invert-bg-color-rgb));
	}

	.site-footer-cta-link:active > .cta-icon {
		background-color: rgb(var(--invert-text-color-rgb));
	}

	.site-footer-cta-link:active > .cta-icon > svg {
		fill: rgb(var(--invert-bg-color-rgb));
	}

	.site-footer-cta-link:active > .cta-title,
	.site-footer-cta-link:active > .cta-caption {
		color: rgb(var(--invert-text-color-rgb));
	}

/**/}


/*	LINEボタン
------------------------------------------------------------------------------*/

.cta-line-button {
	--border-color-rgb: var(--color-line-rgb);
	--text-color-rgb: var(--color-line-rgb);
	--icon-svg-size: 2em;
	/**/
	grid-template-columns: auto 1fr auto;
}

.cta-line-button > .cta-icon {
	grid-row: 1 / 4;
	align-self: flex-start;
	border-radius: .75em;
}

.cta-line-button > .cta-icon > svg {
	fill: #FFF;
}

.cta-line-button > .cta-title {
	grid-column: 2 / 3;
}

.cta-line-button > .cta-caption {
	grid-row: 2;
	margin-top: .75rem;
}

.cta-line-button > .cta-button {
	grid-row: 3;
	/**/
	display: flex;
	align-items: center;
	justify-content: space-between;
	/**/
	margin: 1em 0 0;
	padding: 1em;
	width: 100%;
	background-color: rgb(var(--bg-color-rgb));
	border: 1px solid rgb(var(--text-color-rgb));
	border-radius: .25em;
	text-align: center;
	font-weight: bold;
	color: rgb(var(--text-color-rgb));
}

.cta-line-button > .cta-button::before {
	content: '';
	width: 1em;
	margin-right: 1em;
}

.cta-line-button > .cta-button::after {
	flex: none;
	content: '';
	display: block;
	margin: 0 0 0 1em;
	width: 1em;
	height: 1em;
	background: rgb(var(--text-color-rgb));
	-webkit-mask-image: var(--svg-external);
	mask-image: var(--svg-external);
}

.cta-line-button > .cta-line-qr-code {
	grid-column: 3;
	grid-row: 1 / 4;
	/**/
	position: relative;
	margin: 0 0 0 1em;
	max-width: 8em;
	aspect-ratio: 1 / 1;
	height: 100%;
}

.cta-line-button > .cta-line-qr-code > img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/**/

@media (any-hover: hover) {

	.cta-line-button:hover > .cta-button {
		background-color: rgb(var(--invert-text-color-rgb));
		border-color: rgb(var(--invert-text-color-rgb));
		color: rgb(var(--invert-bg-color-rgb));
	}

	.cta-line-button:hover > .cta-button::after {
		background: rgb(var(--invert-bg-color-rgb));
	}

/**/}
@media (any-hover: none) {

	.cta-line-button:active > .cta-button {
		background-color: rgb(var(--invert-text-color-rgb));
		border-color: rgb(var(--invert-text-color-rgb));
		color: rgb(var(--invert-bg-color-rgb));
	}

	.cta-line-button:active > .cta-button::after {
		background: rgb(var(--invert-bg-color-rgb));
	}

/**/}

/**/

@media (max-width: 720px) {/* iPhone SE1 */

	.cta-line-button {
		grid-row: 1;
		grid-template-columns: auto 1fr;
	}

	.cta-line-button > .cta-icon {
		grid-row: 1 / 3;
	}

	.cta-line-button > .cta-button {
		grid-column: 1 / 3;
	}

	.cta-line-button > .cta-line-qr-code {
		display: none;
	}

/**/}


/*------------------------------------------------------------------------------

	<address>

------------------------------------------------------------------------------*/


.site-footer-address {
	margin: auto 0 0;
}


/*	親コンテナー
------------------------------------------------------------------------------*/

.footer-office-info {
	display: flex;
	flex-direction: column;
}


/*	ロゴ
------------------------------------------------------------------------------*/

.site-footer-logo > .logo-tagline {
	display: block;
	margin: 1em 0 0;
	line-height: 1.25;
}


/*	共通
------------------------------------------------------------------------------*/

.footer-office-info dl {
	display: flex;
	width: 100%;
}

.footer-office-info dd:last-child::after {
	display: none;
}

@media (max-width: 1024px) {

	.site-footer-address {
		margin: 0 auto;
	}

/**/}


/*	住所
------------------------------------------------------------------------------*/

.footer-office-location {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

.site-footer-address dt {
	font-weight: normal;
}

.footer-office-location .office-postal-code {
	margin-right: .5em;
}


/*	SNSアカウント
------------------------------------------------------------------------------*/

.footer-sns-accounts {
	--icon-size: 1.5em;
	/**/
	display: flex;
	flex-wrap: wrap;
	/**/
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

.footer-sns-account {
	margin-right: .75em;
	margin-top: .75em;
}

.footer-sns-label {
	display: none;
}

.footer-sns-icon > svg {
	display: block;
	width: var(--icon-size);
	height: var(--icon-size);
	transition: fill .2s ease-out;
}

/**/

@media (any-hover: hover) {

	.footer-sns-link:hover .footer-sns-icon > svg {
		filter: brightness(125%);
	}

/**/}
@media (any-hover: none) {

	.footer-sns-link:active .footer-sns-icon > svg {
		filter: brightness(125%);
	}

/**/}

/**/

@media (max-width: 1024px) {/* 1カラム */

	.footer-sns-accounts {
		--icon-size: 2em;
		/**/
		justify-content: center;
		margin-top: 1em;
	}

	.footer-sns-account {
		margin: 1em;
	}

/**/}

@media (max-width: 720px) {

	.footer-sns-accounts {
		justify-content: flex-start;
		margin-top: 0;
	}

	.footer-sns-account {
		margin: 1em 1em 0 0;
	}

/**/}


/*	コピーライト
------------------------------------------------------------------------------*/

.site-footer-copyright {
	font-size: max(75%, 10px);
	font-feature-settings: "palt";
	opacity: .7;
}

body.iPhone .site-footer-copyright {
	padding-bottom: max(var(--space_2), calc(env(safe-area-inset-bottom) + 44px));
}