/*============================================================================
  resonet対応CSS
  ============================================================================*/

/* resonet header footer 定義 ================================================*/
.str-header--white {
	background-color: #fff
}
.unq-dynamic-layout {
	display: grid;
	grid-template-areas: "logo" "header" "footer";
	grid-template-rows: auto auto auto;
	margin-bottom: 1em;
}
.str-logo {
	background-color: #000;
	grid-area: logo
}
.str-logo__inner {
	align-items: center;
	block-size: 56px;
	display: flex;
	flex-wrap: wrap;
	margin: auto;
	max-inline-size: 1090px;
	padding-inline: 15px
}
.str-logo__image {
	inline-size: 89px
}
img.str-header__logo-image {
	inline-size: auto;
	block-size: auto;
	display: inline;
	max-inline-size: 100%;
	vertical-align: middle
}
.str-header {
	background-color: #d32a76;
	color: #fff;
	grid-area: header;
	inset-block-start: 0;
	position: sticky;
	z-index: 1;
}
.str-header__inner {
	align-items: center;
	block-size: 55px;
	display: flex;
	margin: auto;
	max-inline-size: 1090px;
	padding-inline: 15px 5px;
	position: relative;
}
.str-header__logo {
	inline-size: 96px;
	transition: opacity .3s ease-out
}
.str-header__logo:not(:has(+ .str-header__logo-product)) {
	margin-inline-end: auto
}
.str-header__logo:focus-visible {
	opacity: .7
}
.str-header__logo-product {
	margin-inline-start: 10px
}
a.str-header__logo[target="_blank"]::after {
	content: none;
}
.str-footer {
	grid-area: footer
}
.str-footer__information {
	background-color: #fff
}
.str-footer__information-inner {
	padding: 10px 15px
}
ul.str-footer__information-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
	justify-content: center;
	list-style: none;
	padding: 0;
}
/* 必ずサブクラス "footer-font" を併せて指定すること */
a.str-footer__information-links-link {
	color: #363636;
	text-decoration: none
}
a.str-footer__information-links-link:visited {
	color: #363636;
}
a.str-footer__information-links-link[target=_blank]::after {
	content: url(../img/share/blank.svg);
	margin-inline-start: 4px;
	vertical-align: text-bottom
}
a.str-footer__information-links-link:focus-visible {
	color: #d32a76
}
/* 必ずサブクラス "footer-font" を併せて指定すること */
.str-footer__information-numbers {
	margin-block-start: 16px;
	text-align: center
}
.str-footer__information-numbers p {
	margin: 0;
	padding: 0
}
.str-footer__information-logos {
	display: flex;
	gap: 10px;
	justify-content: center;
	list-style: none
}
.str-footer__information-logos-link {
	block-size: 70px;
	display: inline-block;
	inline-size: 70px
}
a.str-footer__information-logos-link[target="_blank"]::after {
	content: none;
}
.str-footer__information-logos-link:focus-visible img {
	opacity: .7
}
.str-footer__information-logos-logo {
	inline-size: 100%;
	transition: opacity .3s ease-out
}
/* 必ずサブクラス "footer-font" を併せて指定すること */
.str-footer__information-copyright {
	margin: 0;
	padding: 0;
	text-align: center
}
@media screen and (min-width:769px) {
	.str-footer__information {
		border-block-start: 1px solid #d4d4d4
	}
}
@media screen and (min-width:950px) {
	.str-logo__inner {
		block-size: 69px
	}
	.str-logo__image {
		inline-size: 102px
	}
	.str-header__inner {
		block-size: 71px;
		padding: 10px 6px 0 15px
	}
	.str-header__logo {
		inline-size: 116px;
		padding-block-end: 10px
	}
	.str-header__logo-product {
		padding-block-end: 8px
	}
	img.str-header__logo-image {
		inline-size: auto;
		block-size: auto;
		display: inline;
		max-inline-size: 100%;
		vertical-align: middle
	}
	.str-footer__information-inner {
		align-items: center;
		display: grid;
		grid-template-areas: "information-links information-numbers information-logos " "information-copyright information-numbers information-logos ";
		grid-template-columns: 1fr auto auto;
		justify-content: space-between;
		margin: auto;
		max-inline-size: 1090px;
		padding: 15px
	}
	ul.str-footer__information-links {
		gap: 5px 20px;
		grid-area: information-links;
		line-grid-mode: none;
		justify-content: flex-start;
		list-style: none;
		padding: 0;
		margin: 0
	}
	/* 必ずサブクラス "footer-font" を併せて指定すること */
	.str-footer__information-numbers {
		grid-area: information-numbers;
		margin-block-start: 0;
		text-align: end
	}
	.str-footer__information-numbers p {
		margin: 0;
		padding: 0
	}
	.str-footer__information-logos {
		grid-area: information-logos;
		justify-content: flex-end;
		list-style: none
	}
	/* 必ずサブクラス "footer-font" を併せて指定すること */
	.str-footer__information-copyright {
		margin: 0;
		padding: 0;
		grid-area: information-copyright;
		text-align: start
	}
}
@media screen and (max-height:430px) {
	.str-header {
		position: static
	}
}
@media (hover:hover) {
	.str-header__logo:where(:any-link, :enabled, summary):hover {
		opacity: .7
	}
	a.str-footer__information-links-link:where(:any-link, :enabled, summary):hover {
		text-decoration:none;
		color: #d32a76
	}
	.str-footer__information-logos-link:where(:any-link, :enabled, summary):hover img {
		opacity: .7
	}
}
p.no-script-message {
	font-size: 1rem;
	margin: 0;
	padding: 0;
	line-height: 1.5
}