@charset "utf-8";

/* 共通アセット。対応するbaseディレクトリの存在は前提にしない。
 * ディレクトリの有無による削除判断はdir-で始まる専用ファイルだけに適用する。
 */

/* 複数のディレクトリで使うテーマ・本文・フォーム・表示部品。専用部分はdir-で始まるCSSへ分ける。 */
/* btnと併用する色だけのバリエーション。サイズ・形・余白はBootstrapの指定を使う。 */
.btn-scourt {
	--bs-btn-color: #664422;
	--bs-btn-bg: #fff;
	--bs-btn-border-color: #e8dfce;
	--bs-btn-hover-color: #664422;
	--bs-btn-hover-bg: #fffbec;
	--bs-btn-hover-border-color: #cbb991;
	--bs-btn-focus-shadow-rgb: 166, 126, 0;
	--bs-btn-active-color: #664422;
	--bs-btn-active-bg: #fffbec;
	--bs-btn-active-border-color: #cbb991;
	--bs-btn-disabled-color: #817566;
	--bs-btn-disabled-bg: #faf8f4;
	--bs-btn-disabled-border-color: #e8dfce;
}

html,body {
	/* Sticky footer */
	height: 100% !important;
	/* !--Sticky footer-- */
}

body {
	color:#642;
	/* Sticky footer */
	flex-direction: column !important;
	display: flex !important;
	/* !--Sticky footer-- */
}

.site-header a{
	color:#642 !important;
}

header, footer {
	background-color:#ffc800 !important;
}

footer .footer-menu .row > div {
	font-size: 0.8rem !important;
	padding-left: 40px;
	padding-right: 40px;
}

footer .footer-menu {
	background-color: #fff8e7;
	padding-bottom: 1.5rem;
}

footer .footer-menu h2 {
  font-size: 0.8rem !important;
  border-bottom: solid 1px #c19a00 !important;
}

footer .footer-menu ul.list-unstyled {
  font-size: 0.8rem !important;
  line-height: 2.0;
}

footer .footer-menu a {
	text-decoration: none;
	color: #642;
}
footer .footer-menu a:hover {
	color: #642;
	text-decoration: underline;
}

@media (max-width: 768px) {
  footer .col-md-4 {
    margin-bottom: 1.5rem;
  }
}

footer .footer-copyright {
  font-size: 0.7rem;
}

/* 長いメールアドレスでも、ヘッダーの幅を超えないようにする。 */
.site-header-actions {
	min-width: 0;
	max-width: 100%;
}
.site-header-user {
	--site-user-surface: #fff4cc;
	--site-user-avatar-surface: #fffaf0;
	font-size: .85rem;
	display: flex;
	align-items: center;
	gap: .625rem;
	min-width: 0;
	max-width: 100%;
	padding: .625rem .8125rem .625rem .625rem;
	border-radius: .625rem;
	background: var(--site-user-surface);
	overflow-wrap: anywhere;
	text-align: left;
}
.site-header-r18 .site-header-user {
	--site-user-surface: #ffe6ed;
}
.site-header .site-header-user-admin {
	--site-user-surface: #e9dfff;
	--site-user-avatar-surface: #f8f4ff;
	color: #52347e;
}
.site-header-user-avatar {
	display: grid;
	place-items: center;
	flex: 0 0 2.125rem;
	width: 2.125rem;
	height: 2.125rem;
	border-radius: 50%;
	background: var(--site-user-avatar-surface);
	font-size: 1.3125rem;
	line-height: 1;
}
.site-header-user-details {
	min-width: 0;
}
.site-header-user-caption {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .25rem .4375rem;
	margin-bottom: .125rem;
}
.site-header-user-label {
	display: block;
	font-size: .7rem;
	line-height: 1.5;
}
.site-header-user-badge {
	padding: .0625rem .3125rem;
	border-radius: .1875rem;
	background: #d5c3f2;
	color: #4a296f;
	font-size: .6875rem;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
}
.site-header-user-account {
	display: block;
	font-weight: 500;
	line-height: 1.5;
}
.site-header.site-header-r18,
.footer.site-footer-r18 {
	background-color: #ff99b3 !important;
	color: #624;
}
.site-footer-r18 .footer-menu {
	background-color: #fff1f6;
}
.site-header-r18 a,
.site-footer-r18 .footer-menu a {
	color: #624 !important;
}
.site-footer-r18 .footer-menu h2 {
	border-color: #9a354e !important;
}
.site-page-top {
	display: none;
	position: fixed;
	bottom: 24px;
	right: 20px;
	z-index: 100;
}
.site-page-top img {
	width: 48px;
	height: auto;
}

/* Bootstrapにない寸法と、既存JSで切り替える初期非表示。 */
.fs-12 { font-size: 12px; }
.w-200 { width: 200px; }
.du-none { display: none; }
/* ロゴの塗り色は表示側のcolorで指定する。 */
.site-header-logo { height: 42px; width: auto; color: #fff; }

/* 年齢確認画面の背景・ボタン配色。フッターは共通のR18配色、配置と余白はBootstrapを使う。 */
.r18-attention {
    background: #ff99b3;
    color: #662244;
}
.r18-attention .btn-scourt {
    --bs-btn-color: #662244;
    --bs-btn-border-color: #eed2dc;
    --bs-btn-hover-color: #662244;
    --bs-btn-hover-bg: #fff5f8;
    --bs-btn-hover-border-color: #662244;
    --bs-btn-focus-shadow-rgb: 102, 34, 68;
    --bs-btn-active-color: #662244;
    --bs-btn-active-bg: #fff5f8;
    --bs-btn-active-border-color: #662244;
    --bs-btn-disabled-color: #81757b;
    --bs-btn-disabled-bg: #faf4f7;
    --bs-btn-disabled-border-color: #eed2dc;
}
/* 案内・アカウント・決済ページで使う本文、見出し、表、フォーム。 */
.site-document .general {
	--bs-card-border-color: #e8dfce;
	--bs-card-border-radius: .5rem;
	--bs-card-cap-padding-y: 1rem;
	--bs-card-cap-padding-x: 1.25rem;
	--bs-card-cap-bg: #fff4cc;
	--bs-card-spacer-y: 1.25rem;
	--bs-card-spacer-x: 1.25rem;
	color: inherit;
	margin-bottom: 1.5rem;
	font-size: .9375rem;
	line-height: 1.85;
	overflow-wrap: anywhere;
}
.site-document .general:last-child {
	margin-bottom: 0;
}
.site-document .general h1 {
	font-size: 1.25rem;
	font-weight: bold;
	line-height: 1.6;
}

.site-document .general h2 {
	margin: 1.5rem 0 .75rem;
	padding: .625rem .75rem;
	border-left: 3px solid #c79926;
	background: #fff8e6;
	font-size: 1.0625rem;
	font-weight: bold;
	line-height: 1.7;
}
.site-document .general h3,
.site-document .general h4 {
	margin: 1rem 0 .5rem;
	font-size: 1rem;
	font-weight: bold;
	line-height: 1.7;
}
.site-document .general :is(h2, h3, h4):first-child,
.site-document .general > .body > a[id]:first-child + h2 {
	margin-top: 0;
}
.site-document .general .body div.body {
	margin: .5rem 0 1rem;
	padding-left: .75rem;
}
.site-document .general .body div.body:first-child {
	margin-top: 0;
}
.site-document .general .body div.body:last-child {
	margin-bottom: 0;
}
.site-document .general p.body {
	margin: .25rem 0 .75rem;
	padding-left: 0;
}
.site-document .general :is(p, ul, ol):last-child {
	margin-bottom: 0;
}
.site-document .general :is(ul, ol) {
	padding-left: 1.5rem;
}
.site-document .general .disc {
	list-style-type: disc;
}
.site-document .general .decimal {
	list-style-type: decimal;
}
.site-document .general img {
	max-width: 100%;
	height: auto;
}
.site-document .general .info {
	margin: 1rem 0;
	padding: 1rem;
	border: 1px solid #c6dfe7;
	border-left: 3px solid #1b809e;
	border-radius: .375rem;
	background: #f5fafc;
	text-align: left;
}
.site-document .general .info:first-child {
	margin-top: 0;
}
.site-document .general .info:last-child {
	margin-bottom: 0;
}
.site-document .general .info .head {
	margin-bottom: .375rem;
	color: #1b657c;
	font-weight: bold;
}
.site-document .general table {
	--bs-table-border-color: #ded7c9;
}
.site-document .general th,
.site-document .general td {
	padding: .75rem 1rem;
	vertical-align: top;
	color: inherit;
}
.site-document .general th {
	--bs-table-bg: #faf7ef;
	font-weight: 600;
}

.site-document .document-definition-table th,
.site-document .document-form-table th {
	width: 28%;
}
.site-document .document-form-table {
	table-layout: fixed;
}
.site-document .general form {
	text-align: center;
}
.site-document .general :is(.form-control, .form-select) {
	max-width: 100%;
	padding-block: .5rem;
	border-color: #bab4a8;
	color: #332d25;
	font: inherit;
	line-height: 1.5;
}
.site-document .general :is(input, textarea, select):not(.btn):disabled {
	background: #eeeae3;
	color: #666;
}
.site-document .general .btn {
	max-width: 100%;
	margin-top: 1rem;
	white-space: normal;
}
/* ボタン列の余白は親で管理し、段落や折り返しの間隔と重ねない。 */
.site-document .general .document-actions {
	margin-top: 1rem;
}
.site-document .general .document-actions:first-child,
.site-document .general .document-actions .btn,
.site-document .general p + .btn,
.site-document .general p > .btn,
.site-document .general .body > .btn:first-child {
	margin-top: 0;
}
.site-document .general :is(input, textarea, select, button, a):not(.btn, .form-control, .form-select):focus-visible {
	outline: 2px solid #9f7900;
	outline-offset: 2px;
}
.site-document main a[id] {
	scroll-margin-top: 1.5rem;
}
@media (max-width: 575.98px) {
	.site-document .general h1,
	.site-document .general > .body {
		padding: 1rem;
	}
	.site-document .general .body div.body {
		padding-left: 0;
	}
	.site-document .general th,
	.site-document .general td {
		padding: .625rem;
	}
	/* 項目名と値の2列の表は、狭い画面では縦に並べる。 */
	.site-document :is(.document-definition-table, .document-form-table, .document-banner-table) > tbody > tr,
	.site-document :is(.document-definition-table, .document-form-table, .document-banner-table) > tbody > tr > :is(th, td) {
		display: block;
		width: 100%;
	}
}

/* チャージと購入手続きで共通のPayPalボタン枠。 */
.site-charge #paypal-button-container,
.site-stl #paypal-button-container {
	display: block !important;
	max-width: 30rem;
	margin: 0 auto;
}

/* 列数・余白はテンプレートのBootstrapクラスで管理し、ここにはトップ固有の配色・装飾を残す。 */
.site-home {
	--top-border: #ead7ac;
	--top-account-bg: #fffaf0;
	--top-heading-bg: #fff4cc;
	--top-divider: #ece1cc;
	--top-text: #642;
	--top-news-hover: #fff8e6;
	--top-accent: #b78b16;
	--top-muted: #847562;
	--top-arrow: #997400;
	--top-card-border: #e8dfce;
	--top-card-hover: #fffaf0;
	--top-card-shadow: rgba(102, 68, 34, .16);
}

.site-r18 {
	color: #624;
	--top-border: #eeccdd;
	--top-account-bg: #fff8fc;
	--top-heading-bg: #ffe9ef;
	--top-divider: #ecdbe3;
	--top-text: #624;
	--top-news-hover: #fff1f6;
	--top-accent: #c34c70;
	--top-muted: #846d78;
	--top-arrow: #b64070;
	--top-card-border: #e9dbe2;
	--top-card-hover: #fff5f8;
	--top-card-shadow: rgba(102, 34, 68, .16);
}
.top-account {
	--bs-border-color: var(--top-border);
	border: 1px solid var(--top-border);
	background: var(--top-account-bg);
}
.top-account-balance {
	background: var(--top-heading-bg);
}
.top-information {
	border: 1px solid var(--top-border);
}
.top-information h2 {
	background: var(--top-heading-bg);
}
.top-information ul {
	max-height: 15rem;
	overflow: auto;
}
.top-information li + li {
	border-top: 1px solid var(--top-divider);
}
.top-news-link {
	color: var(--top-text);
}
.top-news-link:hover,
.top-news-link:focus-visible {
	color: var(--top-text);
	background: var(--top-news-hover);
}
.top-news-link:focus-visible {
	outline: 2px solid var(--top-accent);
	outline-offset: -2px;
}
.top-news-link:hover .top-news-title,
.top-news-link:focus-visible .top-news-title {
	text-decoration: underline;
	text-underline-offset: .25rem;
}
.top-news-date {
	color: var(--top-muted);
}
.top-news-title {
	overflow-wrap: anywhere;
}
.top-news-arrow {
	color: var(--top-arrow);
}
.top-service-grid .slot {
	min-width: 0;
	border: 1px solid var(--top-card-border);
	background: #fff;
}
.top-service-grid .slot-link {
	transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.top-service-grid .slot-link > a {
	display: block;
	height: 100%;
	padding: 1rem;
	border-radius: inherit;
	color: inherit;
	text-decoration: none;
}
.top-service-grid .slot-link:hover,
.top-service-grid .slot-link:focus-within {
	border-color: var(--top-accent);
	background: var(--top-card-hover);
	box-shadow: 0 4px 16px var(--top-card-shadow);
}
.top-service-grid a:focus-visible {
	outline: 2px solid var(--top-accent);
	outline-offset: -2px;
}

/* 翻訳文にも下線タグが含まれるため、カテゴリ表示では下線を付けない。 */
.top-service-grid .type u {
	text-decoration: none;
}

.hide-japanese-shops .ViewJapaneseShop {
	display: none;
}

/* サービスの種別に対応する既存の配色。 */
.top-service-grid .type-download { background-color: #3f61b6; }
.top-service-grid .type-append { background-color: #399fb9; }
.top-service-grid .type-serial { background-color: #b63f61; }