@charset "UTF-8";

/**
 * 画面の右端に追従する「お問い合わせ」ボタン（日英の全ページ。フォームのページを除く）
 * 管理場所：wp-content/plugins/aikoh-forms/assets/css/follow-button.css（読み込みは inc/follow-button.php）
 *
 * 色はテーマのメインカラー（公開ページの head にテーマが出す #c50018、ホバーの #9b001c）に合わせた。
 * 縦書き。English の「Contact Us」は文字を横に倒して縦に並ぶ。
 */

.aikoh-follow-button {
	position: fixed;
	top: 50%;
	right: 0;
	z-index: 900;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 18px 12px;
	border-radius: 6px 0 0 6px;
	background-color: #c50018;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
	color: #fff !important;
	font-size: 15px;
	font-weight: bold;
	letter-spacing: .1em;
	line-height: 1;
	text-decoration: none !important;
	transform: translateY(-50%);
	transition: background-color .2s;
}

.aikoh-follow-button:hover,
.aikoh-follow-button:focus-visible {
	background-color: #9b001c;
}

.aikoh-follow-button__icon {
	display: block;
	flex-shrink: 0;
}

.aikoh-follow-button__label {
	writing-mode: vertical-rl;
}

/* スマホ：小さくする */
@media screen and (max-width: 767px) {
	.aikoh-follow-button {
		gap: 6px;
		padding: 12px 8px;
		font-size: 13px;
	}

	.aikoh-follow-button__icon {
		width: 18px;
		height: 18px;
	}
}

/* 印刷には出さない */
@media print {
	.aikoh-follow-button {
		display: none;
	}
}