@charset "UTF-8";

/* 基本色 */
:root {
	--main-color: #5D9AB2;
	--accent-color: #bf6aaf;
    --accent2-color: #ff0000;
	--dark-main-color: #2B5566;
	--text-bright-color: #ffffff;
    --text-h-color: #108EC1;
    --text-e-color: #4e4e4e;
	--icon-color: #fff;
	--icon-bk-color: #ddd;
	--gray-color: #ddd;
	--large-width: 1000px;
	--middle-width: 800px;
}


/* 基本設定： フォントサイズ */
@media (max-width: 599px) {
	:root {
		font-size: 14px;
	}
}

@media (min-width: 600px) and (max-width: 799px) {
	:root {
		font-size: 16px;
	}
}

@media (min-width: 800px) {
	:root {
		font-size: 17px;
	}
}

body {font-size: 16px;}



/* 基本設定： ページ全体 */
body {
	margin: 0;
	font-family: 'メイリオ',
		'Hiragino Kaku Gothic Pro',
		sans-serif;
}

.hune {
	background-color: #1f1f1f;
	text-align: center;
}

.hune img.mainv {
	display: block;
	margin: 0 auto;
	width: 100%;
	max-width: 500px;
	height: auto;
}


.huneB {
	color: #4e4e4e;
	color: var(text-e-color);
	text-align: center;
}

.hune > .container {
	margin-left: auto;
	margin-right: auto;
	padding: 20px 10px 0;
}

/* テキスト見出し（画像タイトルの代わり） */
.text-title {
	font-size: 1.5rem;
	color: #4e4e4e;
	margin: 2.5em 0 0.8em;
}

.text-title::after {
	content: "";
	display: block;
	width: 3em;
	height: 4px;
	margin: 0.4em auto 0;
	background: var(--accent2-color);
	border-radius: 2px;
}

.huneA > .container {
	max-width: 600px;
	max-width: var(--middle-width);
	margin-left: auto;
	margin-right: auto;
	padding: 30px 10px;
}

.huneA p {
	font-size: 1rem;
    padding: 1rem;
	line-height: 2.4;
    color: var(--text-e-color);
color:  #4e4e4e;
}

.huneB > .container {
	max-width: 800px;
	max-width: var(--middle-width);
	margin-left: auto;
	margin-right: auto;
	padding: 30px 10px;
}

.chui > .container {
	max-width: 800px;
	max-width: var(--middle-width);
	margin-left: auto;
	margin-right: auto;
	padding: 30px 10px;
}

.chui > .container p {
	color: #545454;
	font-size: 0.95rem;
}

.huneB a, .huneC a,{
	display: inline;
	padding: 10px;
    color: var(--text-h-color);
    color:  #108EC1;
	text-decoration: none;
}

.hune h1 {
    color: var(--text-e-color);
    color:  #4e4e4e;
	font-size: 2rem;
}

.huneB h2 {
color: var(--text-e-color);
color:  #4e4e4e;
  position: relative;
  padding: 0 0 0 0;
  margin-bottom: 0;
}

.huneB img.title {
	max-width: 500px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.chui img.title {
	max-width: 500px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.huneB p {
	font-size: 1.1rem;
    padding: 0 0;
	line-height: 1.6;
    color: var(--text-e-color);
	font-weight: 500;
color:  #4e4e4e;
}

a {
	color: #545454;
	transition: 0.5s;
	text-decoration: none;
}
a:hover {
	color: #ffbbbb;
	text-decoration: none;
}

.huneB img {
	max-width: 95%;
        padding: 1em 1em 1em 0  ;
}

@media (min-width: 700px) {

.hune img.mainv {
	max-width: 560px;
}

}

/* ==== このイベントページ固有の調整 ==== */

/* ==== STORY / 遊び方 カード（元画像の装飾を踏襲） ==== */

.info-card {
	--card-color: #515AA5;
	--card-color-light: #E7E9F5;
	max-width: 640px;
	margin: 0 auto 2.4em;
	text-align: left;
	border: 2px dashed var(--card-color);
	border-top: none;
	border-radius: 0 0 14px 14px;
	position: relative;
	padding-bottom: 22px;
	background-color: #fff;
	background-image: repeating-linear-gradient(
		135deg,
		var(--card-color) 0,
		var(--card-color) 8px,
		transparent 8px,
		transparent 16px
	);
	background-repeat: repeat-x;
	background-position: left bottom;
	background-size: 100% 12px;
}

.info-card--story {
	--card-color: #515AA5;
	--card-color-light: #E7E9F5;
}

.info-card--howto {
	--card-color: #A45BA0;
	--card-color-light: #F5E9F4;
}

.card-header {
	background: var(--card-color);
	color: #fff;
	font-weight: bold;
	padding: 0.7em 1.2em;
	border-radius: 0;
	position: relative;
}

.info-card--story .card-header {
	font-size: 1.3rem;
	letter-spacing: 0.08em;
}

.info-card--story .card-header::before {
	content: "";
	display: inline-block;
	width: 0.7em;
	height: 0.7em;
	background: #fff;
	margin-right: 0.5em;
	transform: rotate(45deg);
	vertical-align: middle;
}

.info-card--howto .card-header {
	text-align: center;
	padding: 0.9em 1em 0.8em;
}

.card-header-main {
	display: block;
	font-size: 1.3rem;
	letter-spacing: 0.04em;
}

.card-header-sub {
	display: block;
	font-size: 0.8rem;
	font-weight: normal;
	margin-top: 0.4em;
	opacity: 0.95;
}

.card-body {
	padding: 1.4em 1.3em 0.6em;
}

.info-card--story .card-body p {
	font-size: 0.95rem !important;
	line-height: 1.9 !important;
	padding: 0 0 0.9em !important;
	color: #3d3d3d !important;
	font-weight: normal !important;
}

.info-card--story .card-body p:last-child {
	padding-bottom: 0 !important;
}

.step {
	margin-bottom: 1.6em;
}

.step:last-child {
	margin-bottom: 0.4em;
}

.step-badge {
	display: inline-block;
	background: var(--card-color);
	color: #fff;
	font-weight: bold;
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	padding: 0.25em 1em;
	border-radius: 0 12px 12px 0;
	margin-left: -1.3em;
	margin-bottom: 0.6em;
}

.step-title {
	font-size: 1.05rem !important;
	font-weight: bold !important;
	color: #3d3d3d !important;
	background: var(--card-color-light);
	padding: 0.5em 0.7em !important;
	border-radius: 6px;
	margin: 0 0 0.6em !important;
	line-height: 1.5 !important;
}

.step-desc {
	font-size: 0.9rem !important;
	line-height: 1.8 !important;
	color: #4e4e4e !important;
	font-weight: normal !important;
	padding: 0 0.2em !important;
	margin: 0 !important;
}

.info-block {
	max-width: 560px;
	margin: 0 auto;
	text-align: center;
}

.info-block p {
	padding: 0.2em 0 !important;
}

.notice-list {
	list-style: none;
	margin: 0 auto;
	padding: 0.4em 1.6em 0.4em;
	max-width: 720px;
	background: #f7f7f8;
	border-radius: 10px;
	text-align: left;
}

.notice-list li {
	position: relative;
	padding: 0.75em 0 0.75em 1.4em;
	font-size: 0.88rem;
	line-height: 1.75;
	color: #545454;
	border-bottom: 1px solid #e6e6e6;
}

.notice-list li:last-child {
	border-bottom: none;
}

.notice-list li::before {
	content: "◆";
	position: absolute;
	left: 0;
	top: 0.75em;
	font-size: 0.7em;
	color: #a9a9b3;
}

.credit-box {
	margin-top: 2.5em;
	padding: 1.4em 1.2em 0.6em;
	border-top: 1px solid #ddd;
	text-align: left;
}

.credit-box p {
	font-size: 0.85rem !important;
	line-height: 1.9 !important;
	color: #666 !important;
	padding: 0.2em 0 !important;
}

.credit-box .credit-title {
	font-weight: bold;
	color: #4e4e4e !important;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}