/* 装飾用ホバー。main.css の直後、コアブロック・パターン・スキンより前に読み込む。 */

@media (min-width: 769px) {
/* メニューのホバー・フォーカス下端線は全体停止に従う。 */
.hover-action.global-menu-hover-underline ul.global-menu > li:hover,
.hover-action ul.global-menu > li:focus-within {
	border-bottom-color: currentColor;
}

.hover-action ul.global-menu ul li > a:hover {
	opacity: 0.88;
}
}

/* SNSシェアボタン 背景色ブランドカラー:hover */
.hover-action.hover-color-inversion .sns-share-brand-text-hover:is(:hover, :focus-visible).sns-btn-twitter {color: #0F1419;}
.hover-action.hover-color-inversion .sns-share-brand-text-hover:is(:hover, :focus-visible).sns-btn-facebook {color: #3b5998;}
.hover-action.hover-color-inversion .sns-share-brand-text-hover:is(:hover, :focus-visible).sns-btn-line {color: #00b900;}
.hover-action.hover-color-inversion .sns-share-brand-text-hover:is(:hover, :focus-visible).sns-btn-pinterest {color: #bd081c;}
.hover-action.hover-color-inversion .sns-share-brand-text-hover:is(:hover, :focus-visible).sns-btn-linkedin {color: #0077b5;}
.hover-action.hover-color-inversion .sns-share-brand-text-hover:is(:hover, :focus-visible).sns-btn-copy {color: #696969;}

/* SNSシェアボタン 背景色ブランドカラー:hover */
.hover-action.hover-color-inversion .sns-share-brand-bg-hover:is(:hover, :focus-visible).sns-btn-twitter {background-color: #0F1419;}
.hover-action.hover-color-inversion .sns-share-brand-bg-hover:is(:hover, :focus-visible).sns-btn-facebook {background-color: #3b5998;}
.hover-action.hover-color-inversion .sns-share-brand-bg-hover:is(:hover, :focus-visible).sns-btn-line {background-color: #00b900;}
.hover-action.hover-color-inversion .sns-share-brand-bg-hover:is(:hover, :focus-visible).sns-btn-pinterest {background-color: #bd081c;}
.hover-action.hover-color-inversion .sns-share-brand-bg-hover:is(:hover, :focus-visible).sns-btn-linkedin {background-color: #0077b5;}
.hover-action.hover-color-inversion .sns-share-brand-bg-hover:is(:hover, :focus-visible).sns-btn-copy {background-color: #696969;}
.hover-action.hover-color-inversion .sns-share-brand-bg-hover:is(:hover, :focus-visible){
color:white;
}

.hover-action.hover-color-inversion .sns-share-brand-text-hover:is(:hover, :focus-visible){
background-color:white;
}

.hover-action .navigation-bar-follow-opacity>a {
	transition: opacity 0.3s;
}

.hover-action .hero-slider-item-button {
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.hover-action .hero-slider-item-button:hover {
	color: var(--hero-slider-button-hover-text-color, var(--hero-slider-button-text-color, #fff));
	border-color: var(--hero-slider-button-hover-border-color, var(--hero-slider-button-border-color, #fff));
	background-color: var(--hero-slider-button-hover-bg-color, var(--hero-slider-button-bg-color, transparent));
	opacity: var(--hero-slider-button-hover-opacity, 0.88);
	text-decoration: none;
}

.hover-action .hero-slider-item-button:active {
	transform: translateY(1px);
}

.hover-action .hero-media-section-scroll:hover{
opacity: 0.9;
}

.hover-action :where(.single-content-section, .page-content-section) :where(p, li, dd, blockquote, figcaption, td, th) a {
	transition: color 160ms ease, opacity 160ms ease;
}

.hover-action.link-text-hover .site-footer a:hover,
.hover-action .navigation-bar-follow-opacity>a:hover,
.hover-action.link-text-hover .breadcrumb a:hover,
.hover-action.link-text-hover :where(.single-content-section, .page-content-section) :where(p, li, dd, blockquote, figcaption, td, th) a:hover,
.hover-action.link-text-hover .sidebar a:hover,
.hover-action.link-text-hover .footer-menu-standard a:hover,
.hover-action .list-articles-card:hover .articles-posted-card-image-item.card-image-hover-opacity,
.hover-action .related-contents.card-image-hover-opacity:hover .related-thumbnail,
.hover-action .page-feed-box.card-image-hover-opacity:hover img {
	opacity: 0.88;
}

.hover-action.hover-color-inversion nav .page-numbers {
	transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.hover-action.hover-color-inversion nav a.page-numbers:hover {
	color: var(--pagination-bg-color);
	border-color: var(--pagination-text-color);
	background-color: var(--pagination-text-color);
}

/* focus単独と同じ詳細度で、反転中の内側枠だけを文字色に合わせる。 */
:where(.hover-action.hover-color-inversion) nav a.page-numbers:focus-visible:where(:hover) {
	outline-color: currentColor;
}

.hover-action nav a.page-numbers :is(.firstpagination, .prevpagination, .nextpagination, .lastpagination)::before {
	display: inline-block;
	transition: transform 160ms ease-out;
}

.hover-action nav a.page-numbers:hover :is(.firstpagination, .prevpagination)::before {
	transform: translateX(-1px);
}

.hover-action nav a.page-numbers:hover :is(.nextpagination, .lastpagination)::before {
	transform: translateX(1px);
}

.hover-action .search-button,
.hover-action .footer-fixed-menu-section .menu-item a {
	transition: color 160ms ease, background-color 160ms ease;
}

.hover-action .search-button:hover {
	color: var(--main-dark-area-text-color);
	background-color: color-mix(in srgb, currentColor 12%, transparent);
}

:where(.hover-action) .search-close-button:hover,
:where(.hover-action) #popupMessageClose:hover {
	opacity: 0.7;
}

.hover-action.hover-color-inversion .articles-posted-card-button-section {
	transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.hover-action.hover-color-inversion .list-articles-card:hover .articles-posted-card-button-section {
	color: var(--read-more-bg-color);
	border-color: var(--read-more-text-color);
	background-color: var(--read-more-text-color);
}

.hover-action .theme-pickup-slider-item,
.hover-action .theme-pickup-slider-item img,
.hover-action .theme-pickup-slider-title {
	transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease-out;
}

.hover-action .theme-pickup-slider-item:hover {
	border-color: currentColor;
}

.hover-action .theme-pickup-slider-item:hover img {
	transform: scale(1.03);
}

.hover-action .theme-pickup-slider-item:hover .theme-pickup-slider-title {
	background-color: color-mix(in srgb, currentColor 10%, var(--pickup-title-bg-color));
}

.hover-action.hover-color-inversion .back-to-top[data-back-to-top-fixed="true"] {
	transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.hover-action.hover-color-inversion .back-to-top[data-back-to-top-fixed="true"]:hover {
	color: var(--back-to-top-bg-color);
	border-color: var(--back-to-top-bg-color);
	background-color: var(--back-to-top-text-color);
}

.hover-action .back-to-top::before {
	transition: transform 160ms ease-out;
}

.hover-action .back-to-top:hover::before {
	transform: translateY(-2px);
}

.hover-action .footer-fixed-menu-section .menu-item a:hover {
	color: var(--footer-fixed-item-bg-color, var(--main-dark-area-bg-color));
	background-color: var(--footer-fixed-item-text-color);
}

.hover-action .hover-action-floatup:hover {
	transform: translateY(-2px);
}

.hover-action .hover-action-shadow-square {
	transition: transform 180ms ease-out, box-shadow 180ms ease-out, border-color 180ms ease-out;
}

.hover-action .hover-action-shadow-square:hover {
	box-shadow: 0px 0px 5px var(--main-border-shadow-color);
}

/* 記事一覧・関連記事・記事前後送りのカードフィードバック */
.hover-action :where(.articles-posted-card-image-item[class*="card-image-hover-"], .related-contents[class*="card-image-hover-"] .related-thumbnail, .page-feed-box[class*="card-image-hover-"] img) {
	transition: opacity 180ms ease-out, transform 180ms ease-out, filter 180ms ease-out;
}

.hover-action :where(.articles-posted-card-title-item, .related-item-title, .page-feed-prev-title, .page-feed-next-title) {
	transition: color 180ms ease-out;
}

/* 横型カードと小型カードは、一覧の縦型カードより動きを控えめにする。 */
.hover-action :where(.card-design-standard-horizontal, .card-design-title-top-horizontal, .card-design-media-horizontal, .card-design-compact-media).hover-action-floatup:hover,
.hover-action .related-contents.hover-action-floatup:hover,
.hover-action .page-feed-box.hover-action-floatup:hover {
	transform: translateY(-1px);
}

.hover-action :where(.related-contents, .page-feed-box).hover-action-shadow-square:hover {
	box-shadow: 0 0 3px var(--main-border-shadow-color);
}

/* 記事前後送りの矢印は、それぞれ移動先の方向へわずかに動かす。 */
.hover-action :where(.page-feed-prev-arrow, .page-feed-next-arrow)::before {
	transition: transform 180ms ease-out;
}

.hover-action .page-feed-prev-arrow:hover::before {
	transform: translateX(-2px);
}

.hover-action .page-feed-next-arrow:hover::before {
	transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
	.hover-action :where(.hover-action-floatup, .hover-action-shadow-square, .list-articles-card, .related-contents, .page-feed-box),
	.hover-action :where(.articles-posted-card-image-item[class*="card-image-hover-"], .related-contents[class*="card-image-hover-"] .related-thumbnail, .page-feed-box[class*="card-image-hover-"] img),
	.hover-action :where(.page-feed-prev-arrow, .page-feed-next-arrow)::before,
	.hover-action :where(nav .page-numbers, nav .page-numbers i::before, .search-button, a.header-contact-contents, .articles-posted-card-button-section, .theme-pickup-slider-item, .theme-pickup-slider-item img, .theme-pickup-slider-title, .back-to-top, .back-to-top::before, .footer-menu-standard a, .footer-fixed-menu-section .menu-item a) {
		transition-duration: 0.01ms;
	}
}
