/* ---------------------------------------------------------------------------------------------- */
/* -- 'base.css' for pc and mobile                                                             -- */
/* ---------------------------------------------------------------------------------------------- */
@import url('./mo/base.css') screen and (max-width: 960px);
@import url('./pc/base.css') screen and (min-width: 961px);

/* Common icons --------------------------------------------------------------------------------- */
i {
	background-repeat: no-repeat;
	background-position: center;
	background-color:rgba(0, 0, 0, 0.25);
	background-blend-mode:darken;
}

i.facebook {
	background-image: url('/assets/img/icon-facebook.png');
}

i.instagram {
	background-image: url('/assets/img/icon-instagram.png');
}

i.youtube {
	background-image: url('/assets/img/icon-youtube.png');
}

/* Common utility class ------------------------------------------------------------------------- */
.overlay {
	background-color: rgba(0, 0, 0, 0.77);
	background-blend-mode: darken;
	background-size: cover;
	position: relative;
}

.overlay.darker {
	background-color: rgba(0, 0, 0, 0.88);
}

.overlay.verylight {
	background-color: rgba(0, 0, 0, 0.44);
}

.overlay h1,
.overlay h2,
.overlay h3,
.overlay h4,
.overlay ul,
.overlay p,
.overlay a,
.overlay a:hover,
.overlay a:visited {
	color: rgb(255, 255, 255, 0.82);
}

/* Header and Footer ---------------------------------------------------------------------------- */
#site-header {
	position: fixed;
	top: 0;
	height: 64px;
	width: 100%;
	z-index: 101;
	background-color: var(--color-bg1);
	border-bottom: solid 1px var(--color-line1);
}

#site-header > .grid {
	width: 100%;
	display: grid;	
}

#site-header h1.logo {
	height: 64px;
	margin: 0 0 0 12px;
}

#site-header h1.logo img {
	height: 64px;
}

#site-header.tranparent {
	background-color: transparent;
	border: none;
}

#site-header.tranparent h1.logo {
	visibility: hidden;
}

#site-footer {
	background-image: url('/assets/img/site-footer_bg.jpg');
	background-position: center top;
	background-repeat: no-repeat;
	padding: 48px 2vw 16px 2vw;
}

#site-footer .logo {
	text-align: center;
	font-family: var(--font-mincho);
}

#site-footer .logo h1.name {
	font-size: 1.75em;
	margin: 0 0 8px 0;
}

#site-footer .logo h1.name ruby rt {
	font-size: 0.5em;
}

#site-footer .logo ul {
	margin: 0 0 32px 0;
}

#site-footer .logo li {
	font-size: 0.9em;
	line-height: 1.4em;
}

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

#site-footer nav {
	margin: 0 3vw 32px 3vw;
}

#site-footer nav h3 {
	display: block;
	text-align: center;
	font-size: 1.1em;
	padding: 0 0 2px 0;
	border-bottom: solid 1px rgb(255, 255, 255, 0.3);
}

#site-footer nav li {
	line-height: 1.3em;
	font-size: 0.9em;
	margin: 8px 0 0 16px;
}

#site-footer .address {
	font-size: 0.9em;
	text-align: center;
	color: rgb(255, 255, 255, 0.7);
}

#site-footer .copyright {
	font-size: 0.8em;
	text-align: center;
	color: rgb(255, 255, 255, 0.5);
	padding: 16px 0 0 0;
}

#page-header {
	overflow: hidden;
}

/* Main area for all pages ---------------------------------------------------------------------- */
main article {
	padding: 16px 4vw;
}

main article ul li {
	line-height: 1.8em;
}

main article ul.dot li:before {
	content: '●';
	font-size: 0.5em;
	color: #808080;
	position: relative;
}

main article ul.notice li:before {
	content: '※';
}

main article ul li.sub {
	padding: 0 4px 0 16px;
	font-size: 0.9em;
}

main article ul.dot li.sub:before {
	content: '〉';
	font-size: 0.8em;
	top: 0px;
	left: 4px;
}

main article h2 {
	background-image: url('/assets/img/icon-mermaid-purple.png');
	background-repeat: no-repeat;
	background-position: 4px 4px;
}

main article section > p {
	line-height: 1.6em;
	margin: 12px 0;
}

main article.design {
	color: white;
	padding: 24px;
	margin: 16px 0;
}

main article.design h2 {
	background-image: none;
	text-align: center;
	font-size: 1.5em;
	color: white;
}