@charset "UTF-8";

/* ====== 共通 ====== */
.page-body {
	font-family: 		'Mochiy Pop One', sans-serif;
	background-color:	lightgoldenrodyellow;
	max-width:			1200px;
	margin:				auto;
//	background-image:	radial-gradient(lemonchiffon 30%, transparent 30%);
//	background-size:	50px 50px;
	background-image: url(../img/bg.jpg);
}

/* ====== HEADER ====== */
.page-header {
	position:			fixed;
	font-size:			80%;
	background-color:	black;
	width:				100%;
	height:				70px;
	top:				0px;
	max-width:			1200px;
	z-index:			1000;
}

.page-header a {
	text-decoration: none;
	color: #fff;
	display: block;
}

.page-header a:hover {
	text-decoration: none;
}

.page-header-title-area {
	display:			flex;
	width:				260px;
	height:				70px;
}

.page-header-image {
	position:			relative;
	top:				10px;
	left:				10px;
	width:				50px;
	height:				50px;
	background-size:	50px 50px;
	background-repeat:	no-repeat;
	background-image:	url(../img/favicon.jpg);
}

.page-header-title {
	position:			relative;
	width:				170px;
	padding:			5px 20px;
}

.page-header h1 {
	color:				yellow;
	margin:				0px;
	font-size:			2rem;
}

.page-header-sub-title {
	font-size:			medium;
	color:				yellow;
}

.page-header-button-area {
	display:			flex;
	position:			relative;
	width:				320px;
	top:				-45px;
	left:				260px;
}

.page-header-button {
	position:			relative;
	text-align:			center;
	color:				white;
	width:				100px;
	height:				30px;
	font-size:			medium;
	font-weight:		bold;
}

.page-header-button-space {
	width:				10px;
}

.page-header-space {
	width:				100%;
	height:				5px;
}

/* ====== MAIN ====== */
.main {
	margin-top:			70px;
}

.category-frame {
	background-image:	url(../img/bg_frame.jpg);
	box-shadow:			0 4px 8px rgba(0, 0, 0, 0.1);
	border-radius:		8px;
}

.category-label {
	text-align:			center;
	background-color:	gold;
	margin:				0px 30px;
	background-image:	linear-gradient(-90deg, orange 50%, transparent 50%), linear-gradient(orange 50%, transparent 50%);
    background-size:	8px 8px;
	border-left:		3px dotted rgba(0, 0, 0, 0.1);
    border-right:		3px dotted rgba(0, 0, 0, 0.1);
    box-shadow:			0 0 5px rgba(0, 0, 0, 0.2);
}
.category-label-s {
	font-size:			28px;
}

.message-box {
}
.contents-box {
}
.message-box, .contents-box {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	margin: 30px;
}
.message-box:after, .contents-box:after {
	position: absolute;
	content: "";
	top: 25px;
	width: 30%;
	height: 35px;
	opacity: 0.7;
	margin: -35px auto 10px 35%;
	background-color: #ff99ac; /* 背景色 */
	background-image: radial-gradient(#fff 24%, transparent 0), radial-gradient(#fff 24%, transparent 0);
	background-position: 0 0, 10px 10px;
	background-size: 20px 20px;
	transform: rotate(-2deg);
	left: 10px;
	right: 10px;
	box-shadow:0 0 5px rgba(0,0,0,.2);
}

.button-area {
	width:				fit-content;
	margin:				auto;
}

.blue-button, .gray-button {
	display:			inline-block;
	min-width:			120px;
	padding:			10px 20px;
	margin:				0px 20px;
	color:				#fff;
	text-align:			center;
	text-decoration:	none;
	border-radius:		5px;
	border:				none;
	cursor:				pointer;
	transition:			background-color 0.2s;
}
.blue-button {
	background-color:	#3498db;
}
.blue-button:hover {
	background-color:	#2980b9;
}
.gray-button {
    background-color: #95a5a6;
}
.gray-button:hover {
    background-color: #7f8c8d;
}

.text-new-line {
	white-space:		pre-wrap;
}

/* ====== Fade Animation ====== */
.fade-in-zoom {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in-zoom.visible {
    opacity: 1;
    transform: scale(1);
}

/* ====== FOOTER ====== */
.page-footer {
	background-color:	black;
	color:				white;
}

.page-footer-copy-right {
	text-align:			center;
	padding:			15px;
}

.page-footer-button-area {
	display:			flex;
	width:				576px;
	padding-top:		15px;
	margin:				auto;
}

.page-header-button-space {
	display:			block;
	width:				10px;
}

.page-footer-button {
	position:			relative;
	text-align:			center;
	color:				white;
	height:				30px;
	font-size:			medium;
	font-weight:		normal;
}

.page-footer-button-l {
	width:				200px;
}

.page-footer-button-m {
	width:				180px;
}

.page-footer-button-s {
	width:				150px;
}

.page-footer a {
	text-decoration: none;
	color: #fff;
	display: block;
}

.page-footer a:hover {
	text-decoration: none;
}

/* =============================================
メディアクエリ
============================================= */

/* 大デバイス（デスクトップ, 1200px 未満）
==============================================*/
@media screen and (max-width: 1199.98px) {
	.page-body {
	}
}

/* 中デバイス（タブレット, 992px 未満）
==============================================*/
@media screen and (max-width: 991.98px) {
}

/* 小デバイス（横向きモバイル, 768px 未満）
==============================================*/
@media screen and (max-width: 767.98px) {
}

/* 極小デバイス（縦向きモバイル, 576px 未満）
==============================================*/
@media screen and (max-width: 575.98px) {
	.page-header-title-area {
		margin:		auto;
	}
	.page-header {
		position:			fixed;
		height:				100px;
	}
	.page-header-button-area {
		width:				320px;
		top:				0px;
		left:				0px;
		margin:				auto;
	}

	.page-header-button-space {
		display:			none;
	}

	.page-footer-button-area {
		display:			block;
		width:				200px;
		padding-top:		15px;
		margin:				auto;
	}

	.page-footer-button-m {
		width:				200px;
	}

	.page-footer-button-s {
		width:				200px;
	}

	.main {
		margin-top:			100px;
	}

	.category-label-s {
	    font-size:	24px;
		margin:		0px;
	}
}

/* END */