@charset "UTF-8";

/*========================================================================

  reset

========================================================================*/

body {
	overflow-x: hidden;
}
.pbPage * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	vertical-align: top;
	line-height: 1.5;
}
.pbHeaderArea,
.pbFooterArea {
	overflow: visible;
}
:focus {
	outline: none;
}
:root ol, :root ul {
	margin: 0;
	padding: 0;
}
.pbNested {
	clear: none;
	overflow: visible;
	min-width: 10px;
	overflow: visible;
}
.pb-layout {
	outline: 1px dotted #ccc !important;
	box-shadow: none!important;
}
.pb-handle {
	display: block!important;
	width: auto!important;
	border: 1px solid #999!important;
	font-weight: normal!important;
	letter-spacing: normal;
	text-indent: 0;
	line-height: 1.6;
}
.pb-handle:before,
.pb-handle:after {
	display: none;
}
.pbNotEditable {
	min-width: 200px!important;
	background: rgba(32, 32, 32, 0.5)!important;
}
.pbZero td {
	vertical-align: middle;
}

/*========================================================================

  base style

========================================================================*/

div.pbPage {
	position: relative;
	min-height: 100vh;
	overflow: hidden!important;
	-webkit-text-size-adjust: 100%;
	-webkit-print-color-adjust: exact;
	background: #f0f0f0;
	font-family: 'Noto Sans JP','メイリオ',Meiryo, sans-serif;
	color: #192226;
	font-size: 90%;
}

@media screen and (max-width: 767px) {
	div.pbPage {
		font-size: 78%;
	}
}

/*  title
------------------------------------------------*/

h1,
h2,
h3 {
	font-weight: bold;
	line-height: 1.3;
}
h1 {
	font-size: 250%;
}
h2 {
	font-size: 170%;
}
h3 {
	font-size: 130%;
}

@media screen and (max-width: 767px) {
	h1 {
		font-size: 150%;
	}
	h2 {
		font-size: 130%;
	}
	h3 {
		font-size: 120%;
	}
}

/*  link
------------------------------------------------*/

.pbPage a {
	color: #192226;
	transition: all .3s;
	text-decoration: underline;
}
.pbPage a:hover {
	text-decoration: none;
}

/*  list
------------------------------------------------*/

.pbPage ul,
.pbPage ol {
	list-style: none;
}

/*  img
------------------------------------------------*/

.pbPage img {
	max-width: 100%;
	height: auto;
	transition: all .3s;
}

/*  table
------------------------------------------------*/

.pbPage table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 1px;
	border: none;
}
.pbPage table th,
.pbPage table td {
	padding: 10px 15px;
	background: #f0f0f0;
	border: none;
	text-align: left;
	vertical-align: top;
}
.pbPage table th {
	background: #e2e8e8;
	font-weight: bold;
	text-align: left;
	vertical-align: top;
}

/*========================================================================

  publis block

========================================================================*/

/*  pbCorner
========================================================================*/

.contact-step {
	text-align: center;
	margin-bottom: 30px;
}
.contact-step .list {
	display: flex;
}
.contact-step .item {
	width: 33.33%;
	padding: 5px;
	background: rgba(0,0,0,.03);
	border-right: none;
	counter-increment: contact-step;
}
.contact-step .item:last-child {
	border-radius: 0px 4px 4px 0px;
}
.contact-step .item:nth-child(2) {
	border-left: 3px solid #fff;
	border-right: 3px solid #fff;
}
.contact-step .item:before {
	content: 'STEP'counter(contact-step)'.';
	display: inline-block;
}
.contact-step .item.active {
	background: #99afba;
	color: #fff;
	border-radius: 4px 0 0 4px;
}
.contact-step p {
	margin-top: 30px;
}
.contact-step .button {
	margin-top: 30px;
}
.contact-step .button a {
	display: inline-block;
	padding: 7px 25px;
	background: #192226;
	color: #fff;
	border-radius: 30px;
	text-decoration: none;
}
.contact-step .button a:hover {
	background: #99afba;
}
.pbCornerQuery td * {
	vertical-align: middle;
}
.pbCornerQuery td.pbLabel {
	width: 35%;
	background: #e2e8e8;
	font-weight: bold;
	vertical-align: middle;
}
.pbCornerQuery table table td {
	display: flex;
	flex-wrap: wrap;
	padding: 0;
}
.pbCornerQuery .pbCornerQueryLabelRequired {
	float: right;
	margin-left: 10px;
	color: #cc3300;
}
.pbCornerQuery td.pbErrorMsg {
	background: none;
	padding: 0 0 10px;
	color: #cc3300;
}
.pbCornerQuery input[type="text"],
.pbCornerQuery select,
.pbCornerQuery textarea,
.pbCornerQuery input[type="button"],
.pbCornerQuery input[type="submit"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font-family: 'Noto Sans JP','メイリオ',Meiryo, sans-serif;
}
.pbCornerQuery input[type="text"],
.pbCornerQuery select,
.pbCornerQuery textarea {
	max-width: 100%;
	padding: 8px 10px;
	border: 1px solid #eee;
	border-radius: 0;
}
.pbCornerQuery input[type="text"] {
	width: 100%;
}
.pbCornerQuery .half input[type="text"] {
	width: 50%;
}
.pbCornerQuery input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px white inset;
}
.pbCornerQuery input[id*="query_name_last_"],
.pbCornerQuery input[id*="query_name_first_"] {
	width: calc(50% - 5px);
}
.pbCornerQuery input[id*="query_name_first_"] {
	float: right;
}
.pbCornerQuery select {
	margin: 5px 0;
	padding-right: 40px;
	background: url(../images/arrow_select.png) no-repeat right center #fff;
}
.pbCornerQuery select::-ms-expand {
	display: none;
}
.pbCornerQuery select + label {
	margin: 0 15px 0 5px;
}
.pbCornerQuery input[type=radio],
.pbCornerQuery input[type=checkbox] {
	display: none;
}
.pbCornerQuery input[type=radio] + label,
.pbCornerQuery input[type=checkbox] + label {
	display: inline-block;
	position: relative;
	margin: 5px 20px 5px 0;
	padding-left: 25px;
	cursor: pointer;
}
.pbCornerQuery input[type=radio] + label:before,
.pbCornerQuery input[type=radio] + label:after,
.pbCornerQuery input[type=checkbox] + label:before,
.pbCornerQuery input[type=checkbox] + label:after {
	content: '';
	position: absolute;
}
.pbCornerQuery input[type=radio] + label:before,
.pbCornerQuery input[type=radio] + label:after {
	border-radius: 50%;
	transition: all .3s;
}
.pbCornerQuery input[type=radio] + label:before {
	top: 2px;
	left: 0;
	width: 18px;
	height: 18px;
	background: #fff;
	border: 1px solid #eee;
}
.pbCornerQuery input[type=radio]:checked + label:after {
	top: 7px;
	left: 5px;
	width: 10px;
	height: 10px;
	background: #000;
}
.pbCornerQuery input[type=checkbox] + label:before {
	top: 4px;
	left: 0;
	width: 14px;
	height: 14px;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 2px;
}
.pbCornerQuery input[type=checkbox]:checked + label:after {
	top: -1px;
	left: 7px;
	width: 5px;
	height: 15px;
	border-right: 2px solid #000;
	border-bottom: 2px solid #000;
	transform: rotate(45deg);
}
.pbCornerQuery textarea {
	width: 100%;
	resize: none;
}
.pbCornerQuery .forTdCellCenter {
	padding: 30px 0;
	background: none;
	text-align: center;
}
.pbCornerQuery .forTdCellCenter input {
	min-width: 200px;
	padding: 7px 25px;
	background: #192226;
	color: #fff;
	letter-spacing: 2px;
	border: none;
	border-radius: 30px;
	cursor: pointer;
	transition: all .3s;
}
.pbCornerQuery .forTdCellCenter input:hover {
	background: #99afba;
}
.pbCornerQuery .forTdCellCenter input.pbQueryCancel {
	margin-top: 10px;
	background: #ccc;
	color: #000;
	border: 1px solid #ccc;
}
.pbCornerQuery .forTdCellCenter input.pbQueryCancel:hover {
	background: #fff;
}

@media screen and (max-width: 767px) {
	.contact-step .item:before {
		display: block;
	}
	.pbCornerQuery td.pbLabel,
	.pbCornerQuery td.pbLabel + td {
		width: 100%!important;
		display: block!important;
	}
	.pbCornerQuery .half input[type="text"] {
		width: 100%;
	}
	.pbCornerQuery select + label {
		margin: 0 5px 0 0;
	}
	.pbCornerQuery input[type=radio] + label:before {
		top: 0;
	}
	.pbCornerQuery input[type=radio]:checked + label:after {
		top: 5px;
	}
	.pbCornerQuery input[type=checkbox] + label:before {
		top: 2px;
	}
	.pbCornerQuery input[type=checkbox]:checked + label:after {
		top: -2px;
	}
}

/*  pbCornerLogin
========================================================================*/

.signin {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	background: #e9e9e9;
}
.signin > div {
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	width: calc(100vw - 20px);
	max-width: 500px;
	max-height: calc(100vh - 20px);
	padding: 50px 30px;
	background: #fafafa;
	box-shadow: 0 0 8px rgba(0,0,0,.1);
}
.signin .logo {
	text-align: center;
}
.signin .logo + div {
	margin-top: 30px;
}
.signin .error,
.signin .tentativePassError {
	color: #cc3300;
}
.signin .error + div:not(:first-child) {
	margin-top: 10px;
}
.signin .tentativePassError {
	margin-bottom: 10px;
}
.signin .title,
.signin .tentativePassLoginIDLabel,
.signin .tentativePassMailLabel,
.signin .reentryPassLabel,
.signin .reentryPassCheckLabel,
.signin .reentryPassCheckConfLabel {
	display: block;
	padding: 5px 10px;
	background: #e2e8e8;
	font-weight: bold;
}
.signin .title:not(:first-child),
.signin .tentativePassMailLabel,
.signin .reentryPassCheckConfLabel {
	margin-top: 30px;
}
.signin .comment {
	margin-bottom: 15px;
}
.signin .text {
	margin: 15px 0 30px;
}
.signin .tentativeMessage {
	margin-bottom: 30px;
	text-align: center;
}
.signin div.input,
.signin .tentativePassLoginIDInput,
.signin .tentativePassMailInput,
.signin .reentryPassPass,
.signin .reentryPassCheckPass,
.signin .reentryPassCheckConfPass {
	margin-top: 15px;
	display: flex;
	flex-wrap: wrap;
}
.signin .input span:nth-child(1) {
	width: 100%;
	margin-bottom: 15px;
}
.signin .input span:nth-child(2) input[type=checkbox] {
	width: 15px;
	height: 15px;
	margin-top: 4px;
}
.signin .input span:nth-child(3) label {
	padding-left: 10px;
	cursor: pointer;
}
.signin .button,
.signin .tentativePassMailSubmit,
.signin .reentryPassSubmit,
.signin .reentryPassCheckSubmit {
	margin-top: 30px;
}
.signin .button + div:not(:first-child) {
	margin-top: 10px;
	text-align: center;
}
.signin .button + div a {
	position: relative;
	padding-left: 1.3em;
	font-size: 90%;
	text-decoration: none;
}
.signin .button + div a:before {
	content: '';
	position: absolute;
	top: .55em;
	left: 0;
	width: .4em;
	height: .4em;
	border-top: 2px solid #ccc;
	border-right: 2px solid #ccc;
	transform: rotate(45deg);
	background: none;
}
.pbCornerLogin input[type="text"],
.pbCornerLogin input[type="password"],
.pbCornerLogin input[type="submit"],
.pbCornerLogin input[type="button"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font-family: 'Noto Sans JP','メイリオ',Meiryo, sans-serif;
}
.pbCornerLogin input[type="text"],
.pbCornerLogin input[type="password"] {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid #eee;
	border-radius: 0;
}
.pbCornerLogin input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px white inset;
}
.pbCornerLogin input[type="submit"],
.pbCornerLogin input[type="button"] {
	display: table;
	min-width: 200px;
	margin: 0 auto;
	padding: 7px 25px;
	background: #192226;
	color: #fff;
	letter-spacing: 2px;
	border: none;
	border-radius: 30px;
	cursor: pointer;
	transition: all .3s;
}
.pbCornerLogin input[type="button"] {
	margin-top: 5px;
	background: #ccc;
}
.pbCornerLogin input[type="submit"]:hover {
	background: #99afba;
}
.pbCornerLogin input[type="button"]:hover {
	background: #666;
}

@media screen and (max-width: 767px) {
	.signin > div {
		padding: 30px 20px;
	}
}

/*  pbBlockSearchResult
========================================================================*/

.publisSearchResultFormInner {
	position: relative;
	overflow: hidden;
	max-width: 700px;
	margin: 0 auto 20px;
}
.publisSearchResultFormInner:before {
	content: '検索';
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	right: 0;
	width: 70px;
	height: 100%;
	background: #333;
	color: #fff;
	letter-spacing: 2px;
	border-radius: 2px;
	transition: all .3s;
}
.publisSearchResultFormText {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: calc(100% - 80px);
	float: left;
	padding: 8px 10px;
	font-family: 'Noto Sans JP','メイリオ',Meiryo, sans-serif;
	font-size: 100%;
	border: 1px solid #ccc;
	border-radius: 2px;
}
.publisSearchResultFormText:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px white inset;
}
.publisSearchResultFormButton {
	position: absolute;
	right: 0;
	width: 70px;
	height: 100%;
	opacity: 0;
}
.publisSearchResultSeparator {
	margin: 0!important;
}
div.publisSearchResultPager {
	overflow: hidden!important;
	width: 100%!important;
}
.publisSearchResultPager > div {
	min-height: 1px;
}
.publisSearchResultPagerInfo {
	width: calc(100% - 110px)!important;
}
.publisSearchResultPagerPrev {
	text-align: left;
}
.publisSearchResultPagerPrev a {
	position: relative;
	padding-left: 1.5em;
}
.publisSearchResultPagerPrev a:before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	left: .4em;
	width: .4em;
	height: .4em;
	border-bottom: 2px solid #ccc;
	border-left: 2px solid #ccc;
	transform: rotate(45deg);
}
.publisSearchResultPagerPrev a:first-child {
	display: none;
}
.publisSearchResultPagerNext {
	text-align: right;
}
.publisSearchResultPagerNext a {
	position: relative;
	padding-right: 1.5em;
}
.publisSearchResultPagerNext a:before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	right: .4em;
	width: .4em;
	height: .4em;
	border-top: 2px solid #ccc;
	border-right: 2px solid #ccc;
	transform: rotate(45deg);
}
.publisSearchResultPagerNext a:first-child {
	display: none;
}
.publisSearchResultNotFound br {
	display: none;
}
div.publisSearchResultList {
	margin: 15px 0;
}
.publisSearchResultItemTitle {
	float: none!important;
	padding: 15px 0 0 1em;
}
.publisSearchResultItemTitle:first-child {
	border-top: 1px solid #ccc;
}
.publisSearchResultItemTitle a {
	position: relative;
}
.publisSearchResultItemTitle a:before {
	content: '';
	position: absolute;
	top: .55em;
	left: -1em;
	width: .4em;
	height: .4em;
	border-top: 2px solid #ccc;
	border-right: 2px solid #ccc;
	transform: rotate(45deg);
}
.publisSearchResultItemText {
	float: none!important;
	margin: 3px 0 0!important;
	padding-bottom: 15px;
	color: #999;
	border-bottom: 1px solid #ccc;
}

@media screen and (max-width: 767px) {
	.publisSearchResultItemTitle {
		padding: 10px 0 0 1em;
	}
	.publisSearchResultItemText {
		padding-bottom: 10px;
	}
}

/*========================================================================

  header

========================================================================*/

.header {
	background: #fff;
}
.header a {
	text-decoration: none;
}
.header > div {
	position: relative;
	width: calc(100% - 20px);
	max-width: 1200px;
	margin: 0 auto;
	padding: 15px 0;
}
.header .inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.header .button {
	margin-left: auto;
}
.header .button a {
	display: inline-block;
	padding: 4px 20px;
	background: #192226;
	color: #fff;
	border: 2px solid #192226;
	border-radius: 20px;
}
.header .button a:hover {
	background: #fff;
	color: #192226;
}
.header .search {
	width: 30px;
	height: 30px;
	line-height: 30px;
	margin-left: 5px;
	font-size: 18px;
	text-align: center;
	border-radius: 50%;
	cursor: pointer;
	transition: all .3s;
}
.header .search:hover {
	background: #f0f0f0;
}
.header .search i {
	line-height: 30px;
}
@media screen and (min-width: 1025px) {
	.header .menu {
		display: block!important;
	}
}
.header .nav {
	display: flex;
	flex-wrap: wrap;
	margin-top: 10px;
}
.header .nav .pbBlockMenu {
	margin: 5px 20px 0 0;
}
.header .nav .pbBlockMenu a {
	display: inline-block;
	position: relative;
	font-weight: bold;
}
.header .nav .pbBlockMenu a:after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	transition: all .3s;
}
.header .nav .pbBlockMenu a:hover:after {
	bottom: -5px;
	background: #99afba;
}
.navigation {
	font-size: 90%;
	color: #192226;
}
body.top .navigation {
	opacity: 0;
}
.navigation .pbBlockNavigation {
	width: calc(100% - 20px);
	max-width: 1200px;
	margin: 10px auto;
}
.navigation a {
	display: inline-block;
	color: #666;
	text-decoration: none;
}
.navigation a:hover {
	color: #192226;
}
.navigation a:after {
	content: '';
	display: inline-block;
	margin: 0 8px 1px;
	width: .4em;
	height: .4em;
	border-top: 1px solid #666;
	border-right: 1px solid #666;
	transform: rotate(45deg);
}
.pbHeaderArea .pbBlockSearch {
	display: none;
	position: absolute;
	z-index: 1;
	width: 100%;
	border-bottom: 1px solid #ccc;
	background: #f0f0f0;
}
.pbHeaderArea .pbBlockSearch form {
	display: flex;
	width: calc(100% - 20px);
	max-width: 800px;
	margin: 20px auto;
}
.pbHeaderArea .pbBlockSearch form:before {
	font-family: FontAwesome;
	width: 55px;
	content: '\f002';
	font-size: 30px;
}
.pbHeaderArea .pbBlockSearch input[type="text"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font-family: 'Noto Sans JP','メイリオ',Meiryo, sans-serif;
	width: calc(100% - 150px);
	padding: 5px 15px;
	background: #fff;
	border: none;
	border-radius: 4px;
}
.pbHeaderArea .pbBlockSearch input[type="submit"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font-family: 'Noto Sans JP','メイリオ',Meiryo, sans-serif;
	width: 70px;
	margin-left: auto;
	padding: 5px;
	background: #192226;
	color: #fff;
	border: none;
	border-radius: 4px;
	transition: all .3s;
	cursor: pointer;
}
.pbHeaderArea .pbBlockSearch input[type="submit"]:hover {
	background: #99afba;
}

@media screen and (max-width: 1024px) {
	.header > div {
		padding: 0;
		width: 100%;
	}
	.header .logo {
		max-width: 130px;
		margin-left: 15px;
	}
	.header .button a {
		padding: 3px 10px;
		border-radius: 4px;
		font-size: 90%;
	}
	.header .search {
		display: none;
	}
	.header .menu {
		display: none;
		position: absolute;
		z-index: 3;
		width: 100%;
		background: #fff;
	}
	.header .nav {
		margin-top: 15px;
	}
	.header .nav .pbBlockMenu {
		width: 100%;
		margin: 0;
		border-top: 1px solid #f0f0f0;
	}
	.header .nav .pbBlockMenu a {
		display: block;
		padding: 10px 15px;
	}
	.header .nav .pbBlockMenu a:after {
		display: none;
	}
	.header .nav .pbBlockMenu a:before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto;
		right: 15px;
		width: .4em;
		height: .4em;
		border-top: 1px solid #666;
		border-right: 1px solid #666;
		transform: rotate(45deg);
	}
	.pbHeaderArea .pbBlockSearch {
		display: none!important;
	}
}

/*  sp-menu
------------------------------------------------*/

.header .sp-menu {
	display: none;
	position: relative;
	top: 0;
	bottom: 0;
	margin: auto 0;
	width: 50px;
	height: 50px;
	margin-left: 0;
}
.header .sp-menu span {
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	width: 20px;
	height: 2px;
	background: #000;
}
.header .sp-menu span:nth-of-type(1) {
	top: 17px;
	-webkit-animation: menu-bar01 .75s forwards;
	animation: menu-bar01 .75s forwards;
}
@-webkit-keyframes menu-bar01 {
	0% {-webkit-transform: translateY(7px) rotate(45deg);}
	50% {-webkit-transform: translateY(7px) rotate(0);}
	100% {-webkit-transform: translateY(0) rotate(0);}
}
@keyframes menu-bar01 {
	0% {transform: translateY(7px) rotate(45deg);}
	50% {transform: translateY(7px) rotate(0);}
	100% {transform: translateY(0) rotate(0);}
}
.header .sp-menu span:nth-of-type(2) {
	top: 24px;
	transition: all .25s .25s;
	opacity: 1;
}
.header .sp-menu span:nth-of-type(3) {
	bottom: 17px;
	-webkit-animation: menu-bar03 .75s forwards;
	animation: menu-bar03 .75s forwards;
}
@-webkit-keyframes menu-bar03 {
	0% {-webkit-transform: translateY(-7px) rotate(-45deg);}
	50% {-webkit-transform: translateY(-7px) rotate(0);}
	100% {-webkit-transform: translateY(0) rotate(0);}
}
@keyframes menu-bar03 {
	0% {transform: translateY(-7px) rotate(-45deg);}
	50% {transform: translateY(-7px) rotate(0);}
	100% {transform: translateY(0) rotate(0);}
}

.sp-menu.active span:nth-of-type(1) {
	-webkit-animation: active-menu-bar01 .75s forwards;
	animation: active-menu-bar01 .75s forwards;
}
@-webkit-keyframes active-menu-bar01 {
	0% {-webkit-transform: translateY(0) rotate(0);}
	50% {-webkit-transform: translateY(7px) rotate(0);}
	100% {-webkit-transform: translateY(7px) rotate(45deg);}
}
@keyframes active-menu-bar01 {
	0% {transform: translateY(0) rotate(0);}
	50% {transform: translateY(7px) rotate(0);}
	100% {transform: translateY(7px) rotate(45deg);}
}
.sp-menu.active span:nth-of-type(2) {
	opacity: 0;
}
.sp-menu.active span:nth-of-type(3) {
	-webkit-animation: active-menu-bar03 .75s forwards;
	animation: active-menu-bar03 .75s forwards;
}
@-webkit-keyframes active-menu-bar03 {
	0% {-webkit-transform: translateY(0) rotate(0);}
	50% {-webkit-transform: translateY(-7px) rotate(0);}
	100% {-webkit-transform: translateY(-7px) rotate(-45deg);}
}
@keyframes active-menu-bar03 {
	0% {transform: translateY(0) rotate(0);}
	50% {transform: translateY(-7px) rotate(0);}
	100% {transform: translateY(-7px) rotate(-45deg);}
}

@media screen and (max-width: 1024px) {
	.header .sp-menu {
		display: block;
	}
}

/*  sp-toggle-menu
------------------------------------------------*/

.header .sp-toggle-menu .inner {
	display: none;
	position: relative;
	top: 0;
	bottom: 0;
	margin: auto 0;
	width: 50px;
	height: 50px;
	margin-left: 0;
}
.header .sp-toggle-menu span {
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	width: 20px;
	height: 2px;
	background: #000;
}
.header .sp-toggle-menu span:nth-of-type(1) {
	top: 17px;
	-webkit-animation: menu-bar01 .75s forwards;
	animation: menu-bar01 .75s forwards;
}
@-webkit-keyframes menu-bar01 {
	0% {-webkit-transform: translateY(7px) rotate(45deg);}
	50% {-webkit-transform: translateY(7px) rotate(0);}
	100% {-webkit-transform: translateY(0) rotate(0);}
}
@keyframes menu-bar01 {
	0% {transform: translateY(7px) rotate(45deg);}
	50% {transform: translateY(7px) rotate(0);}
	100% {transform: translateY(0) rotate(0);}
}
.header .sp-toggle-menu span:nth-of-type(2) {
	top: 24px;
	transition: all .25s .25s;
	opacity: 1;
}
.header .sp-toggle-menu span:nth-of-type(3) {
	bottom: 17px;
	-webkit-animation: menu-bar03 .75s forwards;
	animation: menu-bar03 .75s forwards;
}
@-webkit-keyframes menu-bar03 {
	0% {-webkit-transform: translateY(-7px) rotate(-45deg);}
	50% {-webkit-transform: translateY(-7px) rotate(0);}
	100% {-webkit-transform: translateY(0) rotate(0);}
}
@keyframes menu-bar03 {
	0% {transform: translateY(-7px) rotate(-45deg);}
	50% {transform: translateY(-7px) rotate(0);}
	100% {transform: translateY(0) rotate(0);}
}

.sp-toggle-menu.active span:nth-of-type(1) {
	-webkit-animation: active-menu-bar01 .75s forwards;
	animation: active-menu-bar01 .75s forwards;
}
@-webkit-keyframes active-menu-bar01 {
	0% {-webkit-transform: translateY(0) rotate(0);}
	50% {-webkit-transform: translateY(7px) rotate(0);}
	100% {-webkit-transform: translateY(7px) rotate(45deg);}
}
@keyframes active-menu-bar01 {
	0% {transform: translateY(0) rotate(0);}
	50% {transform: translateY(7px) rotate(0);}
	100% {transform: translateY(7px) rotate(45deg);}
}
.sp-toggle-menu.active span:nth-of-type(2) {
	opacity: 0;
}
.sp-toggle-menu.active span:nth-of-type(3) {
	-webkit-animation: active-menu-bar03 .75s forwards;
	animation: active-menu-bar03 .75s forwards;
}
@-webkit-keyframes active-menu-bar03 {
	0% {-webkit-transform: translateY(0) rotate(0);}
	50% {-webkit-transform: translateY(-7px) rotate(0);}
	100% {-webkit-transform: translateY(-7px) rotate(-45deg);}
}
@keyframes active-menu-bar03 {
	0% {transform: translateY(0) rotate(0);}
	50% {transform: translateY(-7px) rotate(0);}
	100% {transform: translateY(-7px) rotate(-45deg);}
}

@media screen and (max-width: 1024px) {
	.header .sp-toggle-menu .inner {
		display: block;
	}
}

/*========================================================================

  footer

========================================================================*/

.pbFooterArea {
	margin-top: 100px;
}
.footer-banner > div {
	width: calc(100% - 20px);
	max-width: 1200px;
	margin: 0 auto;
}
.footer:not(:first-child) {
	margin-top: 40px;
}
.footer {
	background: #192226;
}
.footer a {
	text-decoration: none;
}
.footer > div {
	width: calc(100% - 20px);
	max-width: 1060px;
	margin: 0 auto;
	padding: 50px 0;
}
.footer .slider-title {
	color: #fff;
	font-size: 400%;
	font-family: 'Roboto Condensed', sans-serif;
	text-align: center;
}
.footer .slider-title + div {
	margin-top: 30px;
}
.footer .slider {
	background: #fff;
	border-radius: 12px;
}
.footer .slider a {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 35px;
	font-weight: bold;
	text-decoration: none;
	border-radius: 12px;
}
.footer .slider a:hover {
	background: #e2e8e8;
}
.footer .slider .image {
	width: 420px;
}
.footer .slider .image img {
	width: 100%;
	height: 280px;
	object-fit: cover;
	object-position: center top;
	font-family: 'object-fit: cover; object-position: center top;';
	border-radius: 4px;
}
.footer .slider .text {
	width: calc(100% - 450px);
	margin-left: auto;
}
.footer .slider .day {
	font-size: 150%;
	font-family: 'Roboto Condensed', sans-serif;
}
.footer .slider .title {
	font-size: 250%;
}
.footer .slider .title:not(:first-child) {
	margin-top: 15px;
}
.footer .slider .label {
	color: #99afba;
	font-size: 120%;
}
.footer .slider .label:not(:first-child) {
	margin-top: 20px;
}
.footer .slider .slick-arrow {
	left: -60px;
	z-index: 1;
	width: 48px;
	height: 48px;
	background: url(../images/movie_arrow-left.png);
	transition: all .3s;
}
.footer .slider .slick-next {
	left: auto;
	right: -60px;
	background: url(../images/movie_arrow-right.png);
}
.footer .slider .slick-arrow:hover {
	opacity: .7;
}
.footer .slider .slick-arrow:before {
	display: none;
}
.footer .slider .slick-dots {
	height: 10px;
	padding: 0;
}
.footer .slider .slick-dots li {
	width: 10px;
	height: 100%;
	margin-top: 0!important;
	padding-left: 0;
}
.footer .slider .slick-dots li:before {
	display: none;
}
.footer .slider .slick-dots li button {
	width: 100%;
	height: 100%;
	padding: 0;
	background: #fff;
	border-radius: 50%;
}
.footer .slider .slick-dots li.slick-active button {
	background: #fef100;
}
.footer .slider .slick-dots li button:before {
	display: none;
}
.footer .footer-menu:not(:first-child) {
	margin-top: 100px;
}
.footer .logo {
	text-align: center;
}
.footer .logo:not(:first-child) {
	margin-top: 50px;
}
.footer .nav:not(:first-child) {
	margin-top: 50px;
}
.footer .nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 620px;
	margin: 0 auto;
}
.footer .nav .pbBlockMenu {
	margin: 5px 10px;
}
.footer .nav .pbBlockMenu a {
	color: #fff;
	font-weight:bold;
}
.footer .nav .pbBlockMenu a:hover {
	text-decoration: underline;
}
.footer .menu:not(:first-child) {
	margin-top: 30px;
}
.footer .menu ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.footer .menu li {
	margin: 5px 10px;
}
.footer .menu a {
	color: #fff;
	font-size: 90%;
}
.footer .menu a:hover {
	text-decoration: underline;
}
.footer .copyright {
	margin-top: 50px;
	display: block;
	color: #fff;
	text-align: center;
}

@media screen and (max-width: 767px) {
	.pbFooterArea {
		margin-top: 30px;
	}
	.footer-banner > div {
		max-width: 400px;
	}
	.footer > div {
		max-width: 400px;
		padding: 30px 0;
	}
	.footer .slider-title {
		font-size: 250%;
	}
	.footer .slider-title + div {
		margin-top: 20px;
	}
	.footer .slider {
		margin: 0 50px;
	}
	.footer .slider a {
		padding: 10px;
	}
	.footer .slider .image {
		width: 100%;
	}
	.footer .slider .image img {
		height: 150px;
	}
	.footer .slider .text {
		width: 100%;
		margin-top: 10px;
	}
	.footer .slider .day {
		font-size: 100%;
	}
	.footer .slider .title {
		font-size: 115%;
	}
	.footer .slider .title:not(:first-child) {
		margin-top: 5px;
	}
	.footer .slider .label {
		font-size: 100%;
	}
	.footer .slider .label:not(:first-child) {
		margin-top: 10px;
	}
	.footer .slider .slick-arrow {
		left: -40px;
		width: 30px;
		height: 30px;
		background-size: 30px;
	}
	.footer .slider .slick-next {
		left: auto;
		right: -40px;
	}
	.footer .slider .slick-dots {
		bottom: -15px;
		height: 5px;
	}
	.footer .slider .slick-dots li {
		width: 5px;
	}
	.footer .footer-menu:not(:first-child) {
		margin-top: 50px;
	}
	.footer .logo {
		max-width: 180px;
		margin: 0 auto;
	}
	.footer .nav:not(:first-child) {
		margin-top: 30px;
	}
	.footer .nav .pbBlockMenu {
		width: 100%;
		margin: 0;
	}
	.footer .nav .pbBlockMenu:not(:first-child) {
		margin-top: 5px;
	}
	.footer .nav .pbBlockMenu a {
		display: block;
		position: relative;
		padding: 10px 15px;
		background: #333;
		border-radius: 4px;
	}
	.footer .nav .pbBlockMenu a:before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto;
		right: 15px;
		width: .4em;
		height: .4em;
		border-top: 1px solid #666;
		border-right: 1px solid #666;
		transform: rotate(45deg);
	}
	.footer .menu:not(:first-child) {
		margin-top: 20px;
	}
	.footer .menu li {
		margin: 5px;
	}
	.footer .copyright {
		margin-top: 30px;
		font-size: 90%;
	}
}

/*========================================================================

  main

========================================================================*/

.pbAreaWrapper1 {
	width: calc(100% - 20px);
	max-width: 1200px;
	margin: 0 auto;
}
.pbRightArea {
	padding-left: 40px;
}
body:not(.top) .pbMainArea {
	padding: 30px;
	background: #fff;
	border-radius: 4px;
}

@media screen and (max-width: 767px) {
	.pbAreaWrapper1 {
		display: flex;
		flex-direction: column;
		max-width: 400px;
	}
	.pbRightArea {
		width: 100%;
		padding-left: 0;
		order: 1;
	}
	.pbAreaWrapper2 {
		width: 100%;
		margin: 0 auto!important;
	}
	body:not(.top) .pbMainArea {
		padding: 10px;
	}
}

/*========================================================================

  plugin

========================================================================*/

.play {
	position: relative;
}
.play:after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 2;
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 15px solid #fff;
	pointer-events: none;
}
.play:before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 1;
	width: 50px;
	height: 50px;
	background: rgba(0,0,0,.3);
	border-radius: 50%;
	pointer-events: none;
	transition: all .3s;
}
a:hover .play:before {
	background: rgba(0,0,0,.8);
}

/*  login
========================================================================*/

/*  pbHeaderArea
------------------------------------------------*/

.pbHeaderArea .login {
	display: none;
}

@media screen and (max-width: 1024px) {
	.pbHeaderArea .login {
		display: flex;
		margin: 0 10px;
		padding: 10px;
		background: #fff;
		border: 1px solid #e2e8e8;
		border-radius: 4px;
	}
	.pbHeaderArea .login .icon {
		width: 50px;
	}
	.pbHeaderArea .login .icon img {
		width: 100%;
	}
	.pbHeaderArea .login .text {
		width: calc(100% - 140px);
		margin-left: 10px;
	}
	.pbHeaderArea .login .label {
		font-size: 70%;
	}
	.pbHeaderArea .login .name {
		font-size: 120%;
		font-weight: bold;
	}
	.pbHeaderArea .login .comment {
		font-size: 80%;
		color: #99afba;
	}
	.pbHeaderArea .login .button {
		width: 80px;
	}
	.pbHeaderArea .login .button form {
		height: 100%;
	}
	.pbHeaderArea .login .button input[type="submit"] {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		font-family: 'Noto Sans JP','メイリオ',Meiryo, sans-serif;
		width: 100%;
		height: 100%;
		padding: 5px;
		background: #99afba;
		color: #fff;
		border: none;
		border-radius: 4px;
		transition: all .3s;
		cursor: pointer;
	}
}

/*  pbAreaWrapper1
------------------------------------------------*/

.pbAreaWrapper1 .login {
	display: flex;
	flex-wrap: wrap;
	padding: 20px;
	background: #fff;
	border-radius: 8px;
}
.pbAreaWrapper1 .login .icon {
	width: 60px;
}
.pbAreaWrapper1 .login .icon img {
	width: 100%;
}
.pbAreaWrapper1 .login .text {
	width: calc(100% - 80px);
	margin-left: auto;
}
.pbAreaWrapper1 .login .label {
	font-size: 88%;
}
.pbAreaWrapper1 .login .name {
	font-size: 120%;
	font-weight: bold;
}
.pbAreaWrapper1 .login .comment {
	font-size: 80%;
	color: #99afba;
}
.pbAreaWrapper1 .login .button {
	width: 100%;
	margin-top: 15px;
}
.pbAreaWrapper1 .login .button input[type="submit"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font-family: 'Noto Sans JP','メイリオ',Meiryo, sans-serif;
	width: 100%;
	padding: 5px;
	background: #99afba;
	color: #fff;
	border: none;
	border-radius: 4px;
	transition: all .3s;
	cursor: pointer;
}
.pbAreaWrapper1 .login .button input[type="submit"]:hover {
	background: #192226;
}

@media screen and (max-width: 767px) {
	.pbAreaWrapper1 .login {
		display: none;
	}
}

/*  chat-start
========================================================================*/

.chat-start {
	margin-top: 20px;
}
.chat-start a {
	position: relative;
	display: block;
	padding: 13px 15px 13px 57px;
	background: #04204c;
	color: #fff;
	font-size: 120%;
	border-radius: 8px;
	transition: .3s;
	text-decoration: none;
}
.chat-start a:hover {
	background: #064098;
}
.chat-start a:before {
	font-family: FontAwesome;
	width: 55px;
	content: '\f086';
	position: absolute;
	top: 1px;
	left: 15px;
	font-size: 30px;
	color: #fff;
	font-weight: normal;
}
.chat-start a:after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	right: 20px;
	width: .4em;
	height: .4em;
	border-top: 2px solid #ccc;
	border-right: 2px solid #ccc;
	transform: rotate(45deg);
	background: none;
}

@media screen and (max-width: 767px) {
}

/*  chat-panel
========================================================================*/

.chat-panel {
	overflow: hidden;
	margin-top: 20px;
	background: #fff;
	border-radius: 8px;
}
.chat-panel .status {
	padding: 5px;
	background: #04204c;
	color: #fff;
	text-align: center;
}
.chat-panel .text {
	padding: 20px 20px 15px;
}
.chat-panel .button {
	padding: 0 20px 20px;
}
.chat-panel .button input[type="button"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font-family: 'Noto Sans JP','メイリオ',Meiryo, sans-serif;
	padding: 5px 10px;
	color: #fff;
	border: none;
	border-radius: 4px;
	transition: all .3s;
	cursor: pointer;
	width:100%
}
.chat-panel .button input[type="button"][class="chat-open-button"] {
	background: #61a9dc;
}
.chat-panel .button input[type="button"][class="chat-open-button"]:hover {
	background: #192226;
}
.chat-panel .button input[type="button"][class="chat-close-button"] {
	background: #333333;
}
.chat-panel .button input[type="button"][class="chat-close-button"]:hover {
	background: #999999;
}
.chat-panel .button div[class="chat-request-button"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font-family: 'Noto Sans JP','メイリオ',Meiryo, sans-serif;
	padding: 5px 10px;
	background: #cc3300;
	color: #fff;
	border: none;
	border-radius: 4px;
	transition: all .3s;
	text-align: center;
}


@media screen and (max-width: 767px) {
}

/*  chat-chatting
========================================================================*/

.chat-chatting {
	background: #fff;
	border-radius: 8px;
}
.chat-chatting li {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	padding: 15px;
}
.chat-chatting li:not(:first-child) {
	border-top: 1px dotted #ccc;
}
.chat-chatting .status {
	position: absolute;
	top: 15px;
	right: 0;
	padding: 3px 7px;
	background: #04204c;
	color: #fff;
	font-size: 80%;
	border-radius: 4px 0 0 4px;
}
.chat-chatting li.active .status {
	background: #cc3300;
}
.chat-chatting .icon {
	width: 60px;
}
.chat-chatting .icon img {
	width: 100%;
}
.chat-chatting .text {
	width: calc(100% - 70px);
	margin-left: auto;
}
.chat-chatting .label {
	font-size: 88%;
	color: #999;
}
.chat-chatting .name {
	font-size: 120%;
	font-weight: bold;
}
.chat-chatting .button {
	display: flex;
	margin-top: 10px;
}
.chat-chatting .button input[type="button"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font-family: 'Noto Sans JP','メイリオ',Meiryo, sans-serif;
	padding: 5px 10px;
	background: #61a9dc;
	color: #fff;
	border: none;
	border-radius: 4px;
	transition: all .3s;
	cursor: pointer;
}
.chat-chatting .button input[type="button"]:hover {
	background: #192226;
}
.chat-chatting .button input[type="button"]:only-child,
.chat-chatting .button input + input[type="button"] {
	background: #333;
}
.chat-chatting .button input[type="button"]:only-child:hover,
.chat-chatting .button input + input[type="button"]:hover {
	background: #999;
}
.chat-chatting .button input + input[type="button"] {
	margin-left: 5px;
}

@media screen and (max-width: 767px) {
}

/*  popular
========================================================================*/

.popular li:not(:first-child) {
	margin-top: 10px;
}
.popular li a {
	display: flex;
	align-items: center;
	position: relative;
	padding: 10px;
	background: #fff;
	border-radius: 8px;
	font-weight: bold;
	text-decoration: none;
}
.popular li a:hover {
	background: #e2e8e8;
}
.popular li:nth-child(1) a:before,
.popular li:nth-child(2) a:before,
.popular li:nth-child(3) a:before {
	font-family: FontAwesome;
	content: '\f02e';
	position: absolute;
	top: -11px;
	right: 13px;
	font-size: 30px;
}
.popular li:nth-child(1) a:before {
	color: #e6cf1d;
}
.popular li:nth-child(2) a:before {
	color: #bebebe;
}
.popular li:nth-child(3) a:before {
	color: #9b4100;
}
.popular .image {
	position: relative;
	width: 84px;
}
.popular .image img {
	width: 100%;
	height: 100px;
	object-fit: cover;
	object-position: center top;
	font-family: 'object-fit: cover; object-position: center top;';
	border-radius: 4px;
}
.popular .count,
.popular .nice {
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 2px 5px;
	background: rgba( 0,0,0,.6);
	border-radius: 0 0 4px 4px;
	text-align: right;
	font-weight: normal;
}
.popular .count:before,
.popular .nice:before {
	font-family: FontAwesome;
	content: '\f06e';
	font-size: 13px;
	margin-right: 3px;
	line-height: 1;
	color: #ccc;
}
.popular .nice:before {
	content: '\f087';
}
.popular .count span,
.popular .nice span {
	color: #fff;
	font-size: 11px;
	font-weight: normal;
	vertical-align: baseline;
}
.popular .count span:after {
	content: '人';
}
.popular .play:before {
	display: none;
}
.popular .text {
	width: calc(100% - 94px);
	margin-left: auto;
	padding-left: 0!important;
}
.popular .day {
	font-size: 80%;
	font-family: 'Roboto Condensed', sans-serif;
}
.popular .label {
	color: #99afba;
	font-size: 75%;
}

@media screen and (max-width: 767px) {
	.popular li:not(:first-child) {
		margin-top: 5px;
	}
	.popular li:nth-child(n+4) {
		display: none;
	}
	.popular .image {
		width: 70px;
	}
	.popular .image img {
		height: 70px;
	}
	.popular .text {
	    width: calc(100% - 80px);
	}
}

/*  pickup
========================================================================*/

.pickup ul {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -10px;
}
.pickup li {
	overflow: hidden;
	margin: 0 10px;
	background: #fff;
	border-radius: 8px;
}
.pickup li:not(:only-child) {
	width: calc(50% - 20px);
}
.pickup li:nth-child(n+3) {
	margin-top: 20px;
}
.pickup a {
	display: block;
	height: 100%;
	font-weight: bold;
	text-decoration: none;
}
.pickup a:hover {
	background: #e2e8e8;
}
.pickup .image img {
	width: 100%;
	height: 280px;
	object-fit: cover;
	object-position: center top;
	font-family: 'object-fit: cover; object-position: center top;';
}
.pickup .text {
	padding: 15px;
}
.pickup .day {
	font-size: 125%;
	font-family: 'Roboto Condensed', sans-serif;
}
.pickup .title {
	font-size: 150%;
}
.pickup .title:not(:first-child) {
	margin-top: 5px;
}
.pickup .label {
	color: #99afba;
	font-size: 110%;
}
.pickup .label:not(:first-child) {
	margin-top: 10px;
}
.pickup li:only-child {
	width: 100%;
}
.pickup li:only-child a {
	display: flex;
	align-items: center;
	width: 100%;
}
.pickup li:only-child .image {
    width: 40%;
}
.pickup li:only-child .image img {
	width: 100%;
	height: 230px;
	object-fit: cover;
	object-position: center top;
	font-family: 'object-fit: cover; object-position: center top;';
}
.pickup li:only-child .text {
	width: 60%;
	padding: 15px 30px;
}
.pickup li:only-child .title {
	font-size: 200%;
}

@media screen and (max-width: 767px) {
	.pickup li:not(:only-child) {
		width: 100%;
	}
	.pickup li:not(:first-child) {
		margin-top: 20px;
	}
	.pickup .image img {
		height: 180px;
	}
	.pickup .title {
		font-size: 120%;
	}
	.pickup li:only-child a {
		display: block;
	}
	.pickup li:only-child .image {
		width: 100%;
	}
	.pickup li:only-child .image img {
		height: 180px;
	}
	.pickup li:only-child .text {
		width: 100%;
		padding: 15px;
	}
	.pickup li:only-child .title {
		font-size: 120%;
	}
}

/*  new
========================================================================*/

.new ul {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -10px;
}
.new li {
	overflow: hidden;
	width: calc(33.33% - 20px);
	margin: 0 10px;
	background: #fff;
	border-radius: 8px;
}
.new li:nth-child(n+4) {
	margin-top: 20px;
}
.new li a {
	display: block;
	height: 100%;
	font-weight: bold;
	text-decoration: none;
}
.new li a:hover {
	background: #e2e8e8;
}
.new .image img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	object-position: center top;
	font-family: 'object-fit: cover; object-position: center top;';
}
.new .text {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 15px;
}
.new .label {
	color: #99afba;
	font-size: 90%;
}
.new .day {
	margin-left: auto;
	color: #99afba;
	font-size: 90%;
	font-family: 'Roboto Condensed', sans-serif;
}
.new .title {
	width: 100%;
	font-size: 120%;
}
.new .title:not(:first-child) {
	margin-top: 5px;
}
.new .name {
	width: 100%;
	padding-left: 25px;
	background: url(../images/user-s.png) no-repeat;
	background-size: 18px;
	color: #666c6f;
	font-size: 90%;
	font-weight: normal;
}
.new .name:not(:first-child) {
	margin-top: 10px;
}
.new input[type="button"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font-family: 'Noto Sans JP','メイリオ',Meiryo, sans-serif;
	min-width: 200px;
	margin-top: 20px;
	padding: 7px 25px;
	background: #192226;
	color: #fff;
	border: none;
	border-radius: 30px;
	cursor: pointer;
	transition: all .3s;
}
.new input[type="button"]:hover {
	background: #99afba;
}

@media screen and (max-width: 767px) {
	.new ul {
		margin: 0 -3px;
	}
	.new li {
		width: calc(50% - 6px);
		margin: 0 3px;
	}
	.new li:nth-child(n+3) {
		margin-top: 6px;
	}
	.new li:nth-child(n+9) {
		display: none;
	}
	.new .image img {
		height: 120px;
	}
	.new .text {
		flex-direction: column;
		padding: 10px;
	}
	.new .label {
		width: 100%;
	}
	.new .day {
		width: 100%;
		order: 1;
		margin-top: 5px;
	}
	.new .title {
		font-size: 105%;
	}
	.new .name {
		order: 2;
		padding-top: 1px;
	}
}

/*  recommend
========================================================================*/

.recommend ul {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -10px;
}
.recommend ul:not(:first-child) {
	margin-top: 10px;
}
.recommend li {
	overflow: hidden;
	width: calc(25% - 20px);
	margin: 0 10px;
	background: #fff;
	border-radius: 8px;
}
.recommend li:nth-child(n+5) {
	margin-top: 20px;
}
.recommend a {
	display: block;
	height: 100%;
	font-weight: bold;
	text-decoration: none;
}
.recommend a:hover {
	background: #e2e8e8;
}
.recommend .image img {
	width: 100%;
	height: 190px;
	object-fit: cover;
	object-position: center top;
	font-family: 'object-fit: cover; object-position: center top;';
}
.recommend .text {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 15px;
}
.recommend .label {
	color: #99afba;
	font-size: 90%;
}
.recommend .day {
	margin-left: auto;
	color: #99afba;
	font-size: 90%;
	font-family: 'Roboto Condensed', sans-serif;
}
.recommend .title {
	width: 100%;
	font-size: 120%;
}
.recommend .title:not(:first-child) {
	margin-top: 5px;
}
.recommend .name {
	width: 100%;
	padding-left: 25px;
	background: url(../images/user-s.png) no-repeat;
	background-size: 18px;
	color: #666c6f;
	font-size: 90%;
	font-weight: normal;
}
.recommend .name:not(:first-child) {
	margin-top: 10px;
}

@media screen and (max-width: 767px) {
	.recommend ul {
		margin: 0 -3px;
	}
	.recommend ul:not(:first-child) {
		margin-top: 20px;
	}
	.recommend li {
		width: calc(50% - 6px);
		margin: 0 3px;
	}
	.recommend li:nth-child(n+3) {
		margin-top: 6px;
	}
	.recommend .image img {
		height: 120px;
	}
	.recommend .text {
		padding: 10px;
		flex-direction: column;
	}
	.recommend .label {
		width: 100%;
	}
	.recommend .day {
		width: 100%;
		order: 1;
		margin-top: 5px;
	}
	.recommend .title {
		font-size: 105%;
	}
	.recommend .name {
		order: 2;
		padding-top: 1px;
	}
}

/*  details-list
========================================================================*/

.details-list li:not(:first-child) {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid #e2e8e8;
}
.details-list li a {
	display: flex;
	align-items: center;
	position: relative;
	padding: 10px;
	background: #fff;
	border-radius: 8px;
	font-weight: bold;
	text-decoration: none;
}
.details-list li a:hover {
	background: #e2e8e8;
}
.details-list .image {
	width: 200px;
	text-align: center;
}
.details-list .image img {
	width: 100%;
	height: 140px;
	object-fit: cover;
	object-position: center top;
	font-family: 'object-fit: cover; object-position: center top;';
	border-radius: 4px;
}
.details-list .text {
	display: flex;
	flex-wrap: wrap;
	width: calc(100% - 230px);
	margin-left: auto;
}
.details-list .label {
	color: #99afba;
}
.details-list .day {
	margin-left: auto;
	color: #99afba;
	font-family: 'Roboto Condensed', sans-serif;
}
.details-list .title:not(:first-child) {
	margin-top: 5px;
}
.details-list .title {
	width: 100%;
	font-size: 150%;
}
.details-list .name {
	width: 100%;
	padding-left: 25px;
	background: url(../images/user-s.png) no-repeat;
	background-size: 18px;
	color: #666c6f;
	font-weight: normal;
}
.details-list .name:not(:first-child) {
	margin-top: 10px;
}
.details-list input[type="button"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font-family: 'Noto Sans JP','メイリオ',Meiryo, sans-serif;
	min-width: 200px;
	padding: 7px 25px;
	background: #192226;
	color: #fff;
	border: none;
	border-radius: 30px;
	cursor: pointer;
	transition: all .3s;
}
.details-list input[type="button"]:hover {
	background: #99afba;
}

@media screen and (max-width: 767px) {
	.details-list li:not(:first-child) {
		margin-top: 5px;
		padding-top: 5px;
		border-top: 1px solid #e2e8e8
	}
	.details-list li a {
		align-items: baseline;
		padding: 0;
	}
	.details-list li a:hover {
		background: none;
	}
	.details-list .image {
		width: 70px;
	}
	.details-list .image img {
		height: 70px;
	}
	.details-list .play:after {
		border-top: 7px solid transparent;
		border-bottom: 7px solid transparent;
		border-left: 8px solid #fff;
	}
	.details-list .play:before {
		width: 30px;
		height: 30px;
	}
	.details-list .text {
		width: calc(100% - 80px);
	}
	.details-list .day {
		font-size: 90%;
	}
	.details-list .title {
		font-size: 100%;
	}
	.details-list .name:not(:first-child) {
		margin-top: 5px;
	}
}

/*  details-title
========================================================================*/

.details-title {
	display: flex;
	flex-wrap: wrap;
	font-weight: bold;
}
.details-title .label {
	color: #99afba;
	font-size: 120%;
}
.details-title .day {
	margin-left: auto;
	font-size: 130%;
	font-family: 'Roboto Condensed', sans-serif;
}
.details-title h1 {
	width: 100%;
}
.details-title h1:not(:first-child) {
	margin-top: 10px;
}
.details-title .good {
	min-width: 160px;
	margin: 10px 0 0 auto;
	padding: 3px 5px 2px;
	font-size: 90%;
	text-align: center;
	border: 2px solid #99afba;
	border-radius: 20px;
	cursor: pointer;
	transition: all .3s;
}
.details-title .good:hover,
.details-title .good.active {
	background: #fef100;
	border-color: #fef100;
}
.details-title .good:before {
	font-family: FontAwesome;
	content: '\f087';
	display: inline-block;
	margin-right: 5px;
}
.details-title .name {
	width: 100%;
	padding: 4px 0 4px 40px;
	background: url(../images/user-s.png) no-repeat;
	background-size: 28px;
	color: #666c6f;
	font-weight: normal;
}
.details-title .video {
	width: 100%;
}
.details-title .video:not(:first-child) {
	margin-top: 30px;
}
.details-title .video > div {
	margin: 0 auto;
}
.details-title .image {
	text-align: center;
	width: 100%;
}
.details-title .image:not(:first-child) {
	margin-top: 30px;
}
.details-title .image img {
	border-radius: 4px;
}


@media screen and (max-width: 767px) {
	.details-title .label {
		font-size: 100%;
	}
	.details-title .day {
		font-size: 110%;
	}
	.details-title h1:not(:first-child) {
		margin-top: 5px;
	}
	.details-title .good {
		min-width: 130px;
	}
	.details-title .name {
		margin-top: 5px;
		padding: 0 0 0 25px;
		background-size: 18px;
	}
	.details-title .video:not(:first-child),
	.details-title .image:not(:first-child) {
		margin-top: 20px;
	}
}

/*  details-info
========================================================================*/

.details-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 30px;
	padding: 20px;
	background: #e2e8e8;
	font-weight: bold;
	border-radius: 4px;
}
.details-info .good {
	min-width: 160px;
	margin-left: auto;
	padding: 5px 5px 4px;
	background: #fff;
	font-size: 90%;
	text-align: center;
	border-radius: 20px;
	cursor: pointer;
	transition: all .3s;
}
.details-info .good:hover,
.details-info .good.active {
	background: #fef100;
}
.details-info .good:before {
	font-family: FontAwesome;
	content: '\f087';
	display: inline-block;
	margin-right: 5px;
}
.details-info .text {
	width: 100%;
}
.details-info .text:not(:first-child) {
	margin-top: 10px;
}
.details-info .name {
	max-width: 340px;
	padding: 18px 18px 18px 55px;
	background: url(../images/user-s.png) no-repeat #fff 15px 16px;
	background-size: 28px;
	color: #666c6f;
	border-radius: 4px;
}

@media screen and (max-width: 767px) {
	.details-info {
		padding: 10px;
	}
	.details-info .good {
	    min-width: 130px;
	}
	.details-info .text {
		width: 100%;
	}
	.details-info .text:not(:first-child) {
		margin-top: 10px;
	}
	.details-info .name {
		max-width: none;
		padding: 15px 18px 13px 50px;
		background: url(../images/user-s.png) no-repeat #fff 15px 11px;
		background-size: 25px;
	}
}

/*  report
========================================================================*/

.report:not(:first-child) {
	margin-top: 30px;
}
.report > div {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: -20px -10px;
}
.report .box {
	width: calc(50% - 20.5px);
	min-width: 280px;
	margin: 20px 10px;
	z-index: auto!important;
}
.report .title {
	font-weight: bold;
	font-size: 120%;
}
.chart {
	margin: 0 auto;
}
.circle-text {
	margin-top: -10px;
	font-size: 50px!important;
	font-weight: bold;
}
.circle-info-half {
	font-size: 12px;
	color: #333!important;
}

@media screen and (max-width: 767px) {
	.report .box {
		width: 100%;
	}
}

/*  chat
========================================================================*/

.chat {
	opacity: 0;
	transition: all .3s;
}
.chat.active {
	opacity: 1;
}
.chat ul {
	overflow-y: auto;
	height: 500px;
	padding-right: 3px;
	-webkit-overflow-scrolling: touch;
}
.chat ul::-webkit-scrollbar{
	width: 5px;
}
.chat ul::-webkit-scrollbar-track{
	background: #f0f0f0;
	border-radius: 10px;
}
.chat ul::-webkit-scrollbar-thumb{
	background: #99afba;
	border-radius: 10px;
}
.chat time {
	display: block;
}
.chat .message:not(:first-child) {
	margin-top: 20px;
}
.chat .message + .message {
	margin-top: 5px;
}
.chat .message {
	padding: 10px 20px;
	background: #f0f0f0;
	border-radius: 4px;
}
.chat .day:not(:first-child) {
	margin-top: 20px;
}
.chat .day {
	text-align: center;
}
.chat .host:not(:first-child) {
	margin-top: 20px;
}
.chat .host + .host {
	margin-top: 5px;
}
.chat .host {
	position: relative;
	display: table;
	max-width: calc(75% - 40px);
	margin: 0 20px 0 auto;
	padding: 15px 20px;
	background: #61a9dc;
	color: #fff;
	border: solid 1px #61a9dc;
	border-radius: 4px;
}
.chat .host a {
	color: #fff;
}
.chat .host:before {
	content: "";
	position: absolute;
	top: 15px;
	right: -22px;
	border: solid 5px transparent;
	border-left: solid 10px #61a9dc;
	transform: translateX(-50%);
}
.chat .guest:not(:first-child) {
	margin-top: 20px;
}
.chat .guest + .guest {
	margin-top: 5px;
}
.chat .guest {
	position: relative;
	display: table;
	max-width: calc(75% - 40px);
	margin-left: 20px;
	padding: 15px 20px;
	background: #fff;
	border: solid 1px #ccc;
	border-radius: 4px;
}
.chat .guest:before,
.chat .guest:after {
	content: "";
	position: absolute;
	top: 15px;
	left: -8px;
	border: solid 5px transparent;
	border-right: solid 10px #ccc;
	transform: translateX(-50%);
}
.chat .guest:after {
	border-right-color: #fff;
	margin-left: 2px;
}
.chat .submit {
	margin-top: 20px;
}
.chat form {
	display: flex;
	flex-wrap: wrap;
}
.chat textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font-family: 'Noto Sans JP','メイリオ',Meiryo, sans-serif;
	width: 100%;
	height: 70px;
	padding: 15px 20px;
	border: 1px solid #ccc;
}
.chat input[type="button"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font-family: 'Noto Sans JP','メイリオ',Meiryo, sans-serif;
	margin: 5px 0 0 auto;
	padding: 10px 20px;
	background: #99afba;
	color: #fff;
	border: none;
	border-radius: 4px;
	transition: all .3s;
	cursor: pointer;
}
.chat .submit input[type="button"]:hover {
	background: #192226;
}

@media screen and (max-width: 767px) {
	.chat ul {
		height: 300px;
		font-size: 90%;
	}
	.chat .message:not(:first-child) {
		margin-top: 10px;
	}
	.chat .message + .message {
		margin-top: 3px;
	}
	.chat .message {
		padding: 8px;
	}
	.chat .day:not(:first-child) {
		margin-top: 10px;
	}
	.chat .host:not(:first-child) {
		margin-top: 10px;
	}
	.chat .host + .host {
		margin-top: 3px;
	}
	.chat .host {
		max-width: calc(100% - 10px);
		margin: 0 10px 0 auto;
		padding: 8px;
	}
	.chat .host:before {
		right: -20px;
	}
	.chat .guest:not(:first-child) {
		margin-top: 10px;
	}
	.chat .guest + .guest {
		margin-top: 3px;
	}
	.chat .guest {
		max-width: calc(100% - 10px);
		margin-left: 10px;
		padding: 8px;
	}
	.chat .submit {
		margin-top: 10px;
	}
	.chat textarea {
		padding: 10px;
	}
}

/*========================================================================

  component

========================================================================*/

/*  h1
========================================================================*/

.base-h1 + div {
	margin-top: 30px;
}

/*  h1box
========================================================================*/

div.base-h1box {
	overflow: hidden!important;
	z-index: auto!important;
	border-radius: 4px;
}
div.base-h1box + div {
	margin-top: 30px;
}
.base-h1box > div:not(.pb-handle) {
	display: flex;
	align-items: center;
	position: relative;
	padding: 60px 0;
}
.base-h1box .background {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	z-index: auto!important;
}
.base-h1box .background div:not(.pb-handle) {
	position: static!important;
}
.base-h1box .background .mce-resizehandle {
	display: none;
}
.base-h1box .background img {
	opacity: .4;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: none;
	min-width: 101%;
	min-height: 101%;
	z-index: auto!important;
}
.base-h1box .inner {
	position: relative;
	width: calc(100% - 20px);
	max-width: 980px;
	margin: 0 auto;
	text-align: center;
	z-index: auto!important;
}
.base-h1box .h1 h1 {
	font-size: 260%;
	font-family: 'Roboto Condensed', sans-serif;
}
.base-h1box .subtitle {
	margin-top: 10px;
}

@media screen and (max-width: 767px) {
	.base-h1box > div:not(.pb-handle) {
		padding: 40px 0;
	}
	.base-h1box .inner {
		max-width: 500px;
	}
	.base-h1box .h1 h1 {
		font-size: 200%;
	}
}

/*  h1box-black
------------------------------------------------*/

.h1box-black {
	background: #000;
	color: #fff;
	text-shadow: 0px 0px 10px #3d3d3d;
}
.h1box-black h1:after {
	background: #fff;
}
.h1box-black a {
	color: #fff;
}

/*  h2
========================================================================*/

.base-h2:not(:first-child) {
	margin-top: 40px;
}

@media screen and (max-width: 767px) {
	.base-h2:not(:first-child) {
		margin-top: 30px;
	}
}

/*  h2_subtitle
------------------------------------------------*/

.base-h2_subtitle:not(:first-child) {
	margin-top: 40px;
}
.base-h2_subtitle + div {
	margin-top: 10px;
}
.base-h2_subtitle > div {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	position: relative;
	padding-left: 25px;
}
.base-h2_subtitle > div:before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	left: 0;
	width: .7em;
	height: .7em;
	background: #192226;
	border-radius: 3px;
}
.base-h2_subtitle .h2 {
	min-width: 100px;
}
.base-h2_subtitle .h2 h2 {
	font-size: 240%;
	font-family: 'Roboto Condensed', sans-serif;
}
.base-h2_subtitle .subtitle {
	min-width: 100px;
	margin-left: 20px;
}
.base-h2_subtitle .subtitle > div {
	font-weight: bold;
}

@media screen and (max-width: 767px) {
	.base-h2_subtitle > div {
		padding-left: 0;
		text-align: center;
	}
	.base-h2_subtitle + div {
		margin-top: 20px;
	}
	.base-h2_subtitle > div:before {
		display: none;
	}
	.base-h2_subtitle .h2 {
		width: 100%;
	}
	.base-h2_subtitle .h2 h2 {
		font-size: 200%;
		font-family: 'Roboto Condensed', sans-serif;
	}
	.base-h2_subtitle .subtitle {
		width: 100%;
		margin: 5px 0 0;
	}
}

/*  h3
========================================================================*/

.base-h3 {
	margin-top: 30px;
}

/*  h3_subtitle
------------------------------------------------*/

.base-h3_subtitle:not(:first-child) {
	margin-top: 30px;
}
.base-h3_subtitle + div {
	margin-top: 10px;
}
.base-h3_subtitle > div {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	position: relative;
	padding-left: 20px;
}
.base-h3_subtitle > div:before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	left: 0;
	width: .7em;
	height: .7em;
	background: #192226;
	border-radius: 3px;
}
.base-h3_subtitle .h3 {
	min-width: 50px;
}
.base-h3_subtitle .h3 h3 {
	font-size: 160%;
	font-family: 'Roboto Condensed', sans-serif;
}
.base-h3_subtitle .subtitle {
	min-width: 50px;
	margin-left: 10px;
}
.base-h3_subtitle .subtitle > div {
	font-size: 88%;
	font-weight: bold;
}

@media screen and (max-width: 767px) {
	.base-h3_subtitle + div {
		margin-top: 20px;
	}
	.base-h3_subtitle > div {
		padding-left: 0;
		text-align: center;
	}
	.base-h3_subtitle > div:before {
		display: none;
	}
	.base-h3_subtitle .h3 {
		width: 100%;
	}
	.base-h3_subtitle .subtitle {
		width: 100%;
		margin: 5px 0 0;
	}
}

/*  text
========================================================================*/

.base-text {
	margin-top: 30px;
}
.base-text a {
	color: #d00303;
}
.base-text a.pbOpenNewWindow:after,
.base-text a[href$=".pdf"]:after,
.base-text a[href$=".doc"]:after,
.base-text a[href$=".docx"]:after,
.base-text a[href$=".xls"]:after,
.base-text a[href$=".xlsx"]:after,
.base-text a[href$=".ppt"]:after,
.base-text a[href$=".pptx"]:after {
	content: '';
	display: inline-block;
	width: 13px;
	height: 13px;
	margin: 0 5px;
	padding-top: 3px;
	background: url(../images/icon_window.png) no-repeat center top;
	vertical-align: middle;
}
.base-text a[href$=".pdf"]:after {
	background: url(../images/icon_pdf.png) no-repeat center top;
}
.base-text a[href$=".doc"]:after,
.base-text a[href$=".docx"]:after {
	background: url(../images/icon_word.png) no-repeat center top;
}
.base-text a[href$=".xls"]:after,
.base-text a[href$=".xlsx"]:after {
	background: url(../images/icon_excel.png) no-repeat center top;
}
.base-text a[href$=".ppt"]:after,
.base-text a[href$=".pptx"]:after {
	background: url(../images/icon_powerpoint.png) no-repeat center top;
}

@media screen and (max-width: 767px) {
	.base-text {
		margin-top: 20px;
	}
}

/*  text-center
------------------------------------------------*/

.text-center {
	text-align: center;
}

/*  text-right
------------------------------------------------*/

.text-right {
	text-align: right;
}

/*  text-bold
------------------------------------------------*/

.text-bold {
	font-weight: bold;
}

/*  text-lead
------------------------------------------------*/

.text-lead {
	font-weight: bold;
	font-size: 125%;
    text-align: center;
}

@media screen and (max-width: 767px) {
	.text-lead {
		font-size: 105%;
		text-align: left;
		word-spacing: -.3em;
	}
	.text-lead br {
		display: none;
	}
}

/*  text-large
------------------------------------------------*/

.text-large {
	font-size: 120%;
}

/*  text-small
------------------------------------------------*/

.text-small {
	font-size: 90%;
}

/*  text-quote
------------------------------------------------*/

.text-quote > div {
	padding-left: 15px;
	border-left: 4px solid #e2e8e8;
}

/*  textbox
========================================================================*/

.base-textbox:not(:first-child) {
	margin-top: 30px;
	border: yellow;
}
.base-textbox .title:not(:first-child) {
	margin-top: 20px;
}
.base-textbox .title:not(:first-child) > div {
	padding-top: 20px;
	border-top: 1px solid rgba(0,0,0,.1);
}
.base-textbox .title {
	font-weight: bold;
	font-size: 120%;
}
.base-textbox .title p:before {
	content: '';
	display: inline-block;
	margin: 0 .3em 0 0;
	width: .8em;
	height: .8em;
	background: rgba(0,0,0,.5);
	border-radius: 3px;
}
.base-textbox .text:not(:first-child) {
	margin-top: 15px;
}

/*  textbox-gray
------------------------------------------------*/

.textbox-gray > div {
	padding: 30px;
	background: rgba(0,0,0,.03);
}

@media screen and (max-width: 767px) {
	.textbox-gray > div {
		padding: 20px 15px;
	}
}

/*  textbox-red
------------------------------------------------*/

.textbox-red > div {
	padding: 30px;
	background: #faeae8;
	border: 3px solid #ac3428;
	color: #ac3428;
	border-radius: 12px;
}
.textbox-red a {
	color: #ac3428;
}
.textbox-red .title:not(:first-child) > div {
	border-color: #ac3428;
}
.textbox-red .title p:before {
	background: #ac3428;
}

@media screen and (max-width: 767px) {
	.textbox-red > div {
		padding: 20px 15px;
	}
}

/*  textbox-border
------------------------------------------------*/

.textbox-border > div {
	padding: 30px;
	background: rgba(255,255,255,.5);
	border: 3px solid #ccc;
	border-radius: 8px;
}

@media screen and (max-width: 767px) {
	.textbox-border > div {
		padding: 20px 15px;
	}
}

/*  textbox-small
------------------------------------------------*/

.textbox-small > div {
	padding: 20px;
	background: rgba(255,255,255,.5);
	border: 1px solid #ccc;
	font-size: 90%;
	border-radius: 8px;
}

@media screen and (max-width: 767px) {
	.textbox-small > div {
		padding: 15px;
	}
}

/*  textbox-scroll
------------------------------------------------*/

.textbox-scroll > div {
	overflow: hidden!important;
	max-height: 200px;
	padding: 20px;
	background: rgba(255,255,255,.5);
	border: 1px solid #ccc;
}

@media screen and (max-width: 767px) {
	.textbox-scroll > div {
		padding: 14px;
	}
}

/*  imagebox
========================================================================*/

.base-imagebox:not(:first-child) {
	margin-top: 30px;
}
.base-imagebox .box:first-child {
	max-width: 45%;
	float: left;
	margin-right: 25px;
}
.base-imagebox .box:first-child > div {
	display: table;
}
.base-imagebox .box:last-child {
	overflow: hidden!important;
}
.base-imagebox .box:only-child {
	display: block;
	max-width: none;
	margin: auto!important;
}
.base-imagebox .image:not(:first-child) {
	margin-top: 10px;
}
.base-imagebox .image img {
	width: 100%;
	border-radius: 4px;
}
.base-imagebox .caption {
	display: table-caption;
	caption-side: bottom;
	margin-top: 5px;
	color: #666;
	font-size: 90%;
}
.base-imagebox .title:not(:first-child) {
	margin-top: 20px;
}
.base-imagebox .title:not(:first-child) > div {
	padding-top: 20px;
	border-top: 1px solid rgba(0,0,0,.1);
}
.base-imagebox .title {
	font-weight: bold;
	font-size: 120%;
}
.base-imagebox .title p:before {
	content: '';
	display: inline-block;
	margin: 0 .3em 0 0;
	width: .8em;
	height: .8em;
	background: rgba(0,0,0,.5);
	border-radius: 3px;
}
.base-imagebox .text:not(:first-child) {
	margin-top: 15px;
}

@media screen and (max-width: 767px) {
	.base-imagebox .box:first-child {
		max-width: none;
		float: none;
		margin-right: 0;
	}
	.base-imagebox .box:first-child > div {
		margin: 0 auto;
	}
	.base-imagebox .box:last-child {
		margin-top: 15px;
	}
}

/*  imagebox-gray
------------------------------------------------*/

.imagebox-gray > div {
	padding: 30px;
	background: rgba(0,0,0,.03);
	border-radius: 8px;
}

@media screen and (max-width: 767px) {
	.imagebox-gray > div {
		padding: 20px 15px;
	}
}

/*  imagebox-flow
------------------------------------------------*/

.imagebox-flow .box .pbBlock {
	clear: none;
}
.imagebox-flow .box .pbNested:after {
	display: none;
}
.imagebox-flow .box:first-child {
	position: relative;
	z-index: 1;
	margin: 0 25px 10px 0;
}
.imagebox-flow .box:last-child {
	overflow: visible!important;
}

@media screen and (max-width: 767px) {
	.imagebox-flow .box:first-child {
		margin: 0;
	}
}

/*  imageboxR
========================================================================*/

.base-imageboxR:not(:first-child) {
	margin-top: 30px;
}
.base-imageboxR .box:first-child {
	max-width: 45%;
	float: right;
	margin-left: 25px;
}
.base-imageboxR .box:first-child > div {
	display: table;
}
.base-imageboxR .box:last-child {
	overflow: hidden!important;
}
.base-imageboxR .box:only-child {
	display: block;
	max-width: none;
	margin: auto!important;
}
.base-imageboxR .image:not(:first-child) {
	margin-top: 10px;
}
.base-imageboxR .image img {
	width: 100%;
	border-radius: 4px;
}
.base-imageboxR .caption {
	display: table-caption;
	caption-side: bottom;
	margin-top: 5px;
	color: #666;
	font-size: 90%;
}
.base-imageboxR .title:not(:first-child) {
	margin-top: 20px;
}
.base-imageboxR .title:not(:first-child) > div {
	padding-top: 20px;
	border-top: 1px solid rgba(0,0,0,.1);
}
.base-imageboxR .title {
	font-weight: bold;
	font-size: 120%;
}
.base-imageboxR .title p:before {
	content: '';
	display: inline-block;
	margin: 0 .3em 0 0;
	width: .8em;
	height: .8em;
	background: rgba(0,0,0,.5);
	border-radius: 3px;
}
.base-imageboxR .text:not(:first-child) {
	margin-top: 15px;
}

@media screen and (max-width: 767px) {
	.base-imageboxR .box:first-child {
		max-width: none;
		float: none;
		margin-left: 0;
	}
	.base-imageboxR .box:first-child > div {
		margin: 0 auto;
	}
	.base-imageboxR .box:last-child {
		margin-top: 15px;
	}
}

/*   imageboxR-gray
------------------------------------------------*/

.imageboxR-gray > div {
	padding: 30px;
	background: rgba(0,0,0,.03);
	border-radius: 8px;
}

@media screen and (max-width: 767px) {
	.imageboxR-gray > div {
		padding: 20px 15px;
	}
}

/*  imageboxR-flow
------------------------------------------------*/

.imageboxR-flow .box .pbBlock {
	clear: none;
}
.imageboxR-flow .box .pbNested:after {
	display: none;
}
.imageboxR-flow .box:first-child {
	position: relative;
	z-index: 1;
	margin: 0 0 10px 25px;
}
.imageboxR-flow .box:last-child {
	overflow: visible!important;
}

@media screen and (max-width: 767px) {
	.imageboxR-flow .box:first-child {
		margin: 0;
	}
}

/*  line
========================================================================*/

.base-line:not(:first-child),
.base-line + div:not(:first-child) {
	margin-top: 60px;
}
.base-line hr {
	border: 0;
	border-top: 1px solid #bbb;
}

@media screen and (max-width: 767px) {
	.base-line:not(:first-child),
	.base-line + div:not(:first-child) {
		margin-top: 40px;
	}
}

/*  line-dashed
------------------------------------------------*/

.line-dashed hr {
	border-top: 1px dashed #bbb;
}

/*  line-double
------------------------------------------------*/

.line-double hr {
	border-top: 3px double #bbb;
}

/*  base-arrow
========================================================================*/

.base-arrow:not(:first-child),
.base-arrow + div:not(:first-child) {
	margin-top: 40px;
}
.base-arrow > div:not(.pb-handle) {
	position: relative;
	height: 40px;
	text-align: center;
}
.base-arrow > div:not(.pb-handle):before {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	left: 50%;
	transform: translateX(-50%);
	border: 40px solid transparent;
	border-top-color: rgba(0,0,0,.2);
}

@media screen and (max-width: 767px) {
	.base-arrow:not(:first-child),
	.base-arrow + div:not(:first-child) {
		margin-top: 20px;
	}
	.base-arrow > div:before {
		border-width: 20px;
	}
}

/*  arrow-light
------------------------------------------------*/

.arrow-light > div:not(.pb-handle):before {
	border-top-color: rgba(0,0,0,.6);
}

/*  arrow-dark
------------------------------------------------*/

.arrow-dark > div:not(.pb-handle):before {
	border-top-color: rgba(0,0,0,1);
}

/*  image
========================================================================*/

.base-image {
	margin-top: 30px;
}
.base-image img {
	border-radius: 4px;
}

@media screen and (max-width: 767px) {
	.base-image {
		margin-top: 20px;
	}
}

/*  image-center
------------------------------------------------*/

.image-center {
	text-align: center;
}

/*  image-right
------------------------------------------------*/

.image-right {
	text-align: right;
}

/*  images
========================================================================*/

.base-images:not(:first-child) {
	margin-top: 30px;
}
.base-images > div {
	display: flex;
	flex-wrap: wrap;
	margin: -10px;
}
.base-images .image {
	width: calc(50% - 20px);
	min-height: 0%;
	margin: 10px;
	z-index: auto!important;
}
.base-images .image img {
	width: 100%;
	border-radius: 4px;
}

@media screen and (max-width: 767px) {
	.base-images:not(:first-child) {
		margin-top: 20px;
	}
	.base-images > div {
		margin: -5px;
	}
	.base-images .image {
		width: 100%;
		margin: 5px;
	}
}

/*  images-3column
------------------------------------------------*/

.images-3column .image {
	width: calc(33.33% - 20px);
}

@media screen and (max-width: 767px) {
	.images-3column .image {
		width: 100%;
	}
}

/*  images-4column
------------------------------------------------*/

.images-4column > div {
	margin: -5px;
}
.images-4column .image {
	max-width: calc(25% - 10px);
	margin: 5px;
}

@media screen and (max-width: 767px) {
	.images-4column > div {
		margin: -3px;
	}
	.images-4column .image {
		max-width: calc(50% - 6px);
		margin: 3px;
	}
}

/*  images-5column
------------------------------------------------*/

.images-5column > div {
	margin: -3px;
}
.images-5column .image {
	max-width: calc(20% - 6px);
	margin: 3px;
}

@media screen and (max-width: 767px) {
	.images-5column .image {
		max-width: calc(50% - 6px);
	}
}

/*  imagelist
========================================================================*/

.base-imagelist:not(:first-child) {
	margin-top: 30px;
	border-radius: 4px;
}
.base-imagelist > div {
	display: flex;
}
.base-imagelist > div > div {
	z-index: auto!important;
}
.base-imagelist .image {
	width: 31%;
}
.base-imagelist .image img {
	width: 100%;
	border-radius: 4px;
}
.base-imagelist .textbox {
	display: flex;
	align-items: center;
	position: relative;
	width: 70%;
}
.base-imagelist .textbox > div {
	width: 100%;
	padding: 5px 0 5px 25px;
}
.base-imagelist .textbox > div.pb-handle {
	top: 10px;
}
.base-imagelist .title {
	font-weight: bold;
	font-size: 120%;
}
.base-imagelist .title p:before {
	content: '';
	display: inline-block;
	margin: 0 .3em 0 0;
	width: .8em;
	height: .8em;
	background: rgba(0,0,0,.5);
	border-radius: 3px;
}
.base-imagelist .text:not(:first-child) {
	margin-top: 10px;
}
.base-imagelist .button {
	margin-top: 20px;
	text-align: center;
}
.base-imagelist .button a {
	display: inline-block;
	width: 100%;
	max-width: 280px;
	padding: .6em 2em;
	background: #333;
	color: #fff;
	text-decoration: none;
	border-radius: 22px;
}
.base-imagelist .button a:hover {
	background: #000;
}

@media screen and (max-width: 767px) {
	.base-imagelist:not(:first-child) {
		margin-top: 20px;
	}
	.base-imagelist > div {
		display: block;
	}
	.base-imagelist .image {
		width: 100%;
	}
	.base-imagelist .textbox {
		width: 100%;
	}
	.base-imagelist .textbox > div {
		padding: 15px 0 0 0;
	}
}

/*  imagelist-gray
------------------------------------------------*/

.imagelist-gray {
	background: rgba(0,0,0,.05);
}
.imagelist-gray > div {
	padding: 20px;
}
.imagelist-gray .textbox > div {
	padding-left: 25px;
}

@media screen and (max-width: 767px) {
	.imagelist-gray .textbox > div {
		padding: 15px;
	}
}

/*  imagelist-border
------------------------------------------------*/

.imagelist-border {
	background: #fff;
	border: 1px solid #ccc;
}
.imagelist-border > div {
	padding: 20px;
}
.imagelist-border .textbox > div {
	padding-left: 25px;
}

@media screen and (max-width: 767px) {
	.imagelist-border .textbox > div {
		padding: 15px;
	}
}

/*  imagelistR
========================================================================*/

.base-imagelistR:not(:first-child) {
	margin-top: 30px;
	border-radius: 4px;
}
.base-imagelistR > div {
	display: flex;
}
.base-imagelistR > div > div {
	z-index: auto!important;
}
.base-imagelistR .image {
	order: 1;
	width: 31%;
}
.base-imagelistR .image img {
	width: 100%;
	border-radius: 4px;
}
.base-imagelistR .textbox {
	display: flex;
	align-items: center;
	position: relative;
	width: 70%;
}
.base-imagelistR .textbox > div {
	width: 100%;
	padding: 5px 25px 5px 0;
}
.base-imagelistR .textbox > div.pb-handle {
	top: 10px;
}
.base-imagelistR .title {
	font-weight: bold;
	font-size: 120%;
}
.base-imagelistR .title p:before {
	content: '';
	display: inline-block;
	margin: 0 .3em 0 0;
	width: .8em;
	height: .8em;
	background: rgba(0,0,0,.5);
	border-radius: 3px;
}
.base-imagelistR .text:not(:first-child) {
	margin-top: 10px;
}
.base-imagelistR .button {
	margin-top: 20px;
	text-align: center;
}
.base-imagelistR .button a {
	display: inline-block;
	width: 100%;
	max-width: 280px;
	padding: .6em 2em;
	background: #333;
	color: #fff;
	text-decoration: none;
	border-radius: 22px;
}
.base-imagelistR .button a:hover {
	background: #000;
}

@media screen and (max-width: 767px) {
	.base-imagelistR:not(:first-child) {
		margin-top: 20px;
	}
	.base-imagelistR > div {
		display: block;
	}
	.base-imagelistR .image {
		width: 100%;
	}
	.base-imagelistR .textbox {
		width: 100%;
	}
	.base-imagelistR .textbox > div {
		padding: 15px 0 0 0;
	}
}

/*  imagelistR-gray
------------------------------------------------*/

.imagelistR-gray {
	background: rgba(0,0,0,.05);
}
.imagelistR-gray > div {
	padding: 20px;
}
.imagelist-gray .textbox > div {
	padding-left: 25px;
}

@media screen and (max-width: 767px) {
	.imagelistR-gray .textbox > div {
		padding: 15px;
	}
}

/*  imagelistR-border
------------------------------------------------*/

.imagelistR-border {
	background: #fff;
	border: 1px solid #ccc;
}
.imagelistR-border > div {
	padding: 20px;
}

@media screen and (max-width: 767px) {
	.imagelistR-border .textbox > div {
		padding: 15px;
	}
}

/*  link
========================================================================*/

.base-link:not(:first-child) {
	margin-top: 30px;
}
.base-link a {
	display: inline-block;
	position: relative;
	padding-left: 1.3em;
}
.base-link a:before {
	content: '';
	position: absolute;
	top: .5em;
	left: 0;
	width: .4em;
	height: .4em;
	border-top: 2px solid #ccc;
	border-right: 2px solid #ccc;
	transform: rotate(45deg);
}
.base-link a.pbOpenNewWindow:after,
.base-link a[href$=".pdf"]:after,
.base-link a[href$=".doc"]:after,
.base-link a[href$=".docx"]:after,
.base-link a[href$=".xls"]:after,
.base-link a[href$=".xlsx"]:after,
.base-link a[href$=".ppt"]:after,
.base-link a[href$=".pptx"]:after {
	content: '';
	display: inline-block;
	width: 13px;
	height: 13px;
	margin: 0 5px;
	padding-top: 3px;
	background: url(../images/icon_window.png) no-repeat center top;
	vertical-align: middle;
}
.base-link a[href$=".pdf"]:after {
	background: url(../images/icon_pdf.png) no-repeat center top;
}
.base-link a[href$=".doc"]:after,
.base-link a[href$=".docx"]:after {
	background: url(../images/icon_word.png) no-repeat center top;
}
.base-link a[href$=".xls"]:after,
.base-link a[href$=".xlsx"]:after {
	background: url(../images/icon_excel.png) no-repeat center top;
}
.base-link a[href$=".ppt"]:after,
.base-link a[href$=".pptx"]:after {
	background: url(../images/icon_powerpoint.png) no-repeat center top;
}

/*  link-center
------------------------------------------------*/

.link-center {
	text-align: center;
}

/*  link-right
------------------------------------------------*/

.link-right {
	text-align: right;
}

/*  largelink
========================================================================*/

.base-largelink:not(:first-child) {
	margin-top: 30px;
}
.base-largelink a {
	display: inline-block;
	position: relative;
	padding-left: 1.3em;
	font-weight: bold;
	font-size: 110%;
}
.base-largelink a:before {
	content: '';
	position: absolute;
	top: .5em;
	left: 0;
	width: .4em;
	height: .4em;
	border-top: 3px solid #000;
	border-right: 3px solid #000;
	transform: rotate(45deg);
}

/*  largelink-center
------------------------------------------------*/

.largelink-center {
	text-align: center;
}

/*  largelink-right
------------------------------------------------*/

.largelink-right {
	text-align: right;
}

/*  anchor
========================================================================*/

.base-anchor:not(:first-child) {
	margin-top: 30px;
}
.base-anchor ul {
	display: flex;
	flex-wrap: wrap;
}
.base-anchor ul li {
	position: relative;
	margin: 5px 10px;
	padding-left: 1.3em;
}
.base-anchor ul li:before {
    content: '';
    position: absolute;
	top: .4em;
    left: 0;
    width: .4em;
    height: .4em;
    border-top: 2px solid #ccc;
    border-right: 2px solid #ccc;
	transform: rotate(135deg);
	background: none;
}

/*  anchor-gray
------------------------------------------------*/

.anchor-gray > div {
	padding: 20px;
	background: rgba(0,0,0,.05);
	border-radius: 4px;
}

@media screen and (max-width: 767px) {
	.anchor-gray > div {
		padding: 10px;
	}
}

/*  button
========================================================================*/

.base-button {
	margin-top: 30px;
}
.base-button a {
	display: inline-block;
	padding: 7px 25px;
	background: #192226;
	color: #fff;
	border-radius: 30px;
	text-decoration: none;
}
.base-button a:hover {
	background: #99afba;
}

@media screen and (max-width: 767px) {
	.base-button {
		margin-top: 20px;
	}
}

/*  button-center
------------------------------------------------*/

.button-center > div {
	text-align: center;
}

/*  button-right
------------------------------------------------*/

.button-right > div {
	text-align: right;
}

/*  button-group
------------------------------------------------*/

.button-group > div {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: -5px;
}
.button-group .button {
	margin: 5px;
	z-index: auto!important;
}

/*  buttonRed
========================================================================*/

.base-buttonRed:not(:first-child) {
	margin-top: 30px;
}
.base-buttonRed a {
	display: inline-block;
	padding: 7px 25px;
	background: #cc3300;
	color: #fff;
	border-radius: 30px;
	text-decoration: none;
}
.base-buttonRed a:hover {
	background: #000;
}

/*  buttonRed-center
------------------------------------------------*/

.buttonRed-center {
	text-align: center;
}

/*  buttonRed-right
------------------------------------------------*/

.buttonRed-right {
	text-align: right;
}

/*  largebutton
========================================================================*/

.base-largebutton:not(:first-child) {
	margin-top: 30px;
}
.base-largebutton a {
	display: inline-block;
	min-width: 40%;
	padding: 10px 20px;
	background: #192226;
	color: #fff;
	font-size: 130%;
	text-align: center;
	text-decoration: none;
	border-radius: 36px;
}
.base-largebutton a:hover {
	background: #99afba;
}

@media screen and (max-width: 767px) {
	.base-largebutton a {
		font-size: 110%;
	}
}

/*  largebutton-center
------------------------------------------------*/

.largebutton-center {
	text-align: center;
}

/*  largebutton-right
------------------------------------------------*/

.largebutton-right {
	text-align: right;
}

/*  largebutton-group
------------------------------------------------*/

.largebutton-group > div {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: -10px;
}
.largebutton-group .button {
	width: calc(50% - 20px);
	margin: 10px;
	z-index: auto!important;
}
.largebutton-group a {
	width: 100%;
}

@media screen and (max-width: 767px) {
	.largebutton-group > div {
		margin: -5px;
	}
	.largebutton-group .button {
		width: auto;
		margin: 5px;
	}
}

/*  list
========================================================================*/

.base-list {
	margin-top: 30px;
}
.base-list a {
	color: #d00303;
}
.base-list a.pbOpenNewWindow:after,
.base-list a[href$=".pdf"]:after,
.base-list a[href$=".doc"]:after,
.base-list a[href$=".docx"]:after,
.base-list a[href$=".xls"]:after,
.base-list a[href$=".xlsx"]:after,
.base-list a[href$=".ppt"]:after,
.base-list a[href$=".pptx"]:after {
	content: '';
	display: inline-block;
	width: 13px;
	height: 13px;
	margin: 0 5px;
	padding-top: 3px;
	background: url(../images/icon_window.png) no-repeat center top;
	vertical-align: middle;
}
.base-list a[href$=".pdf"]:after {
	background: url(../images/icon_pdf.png) no-repeat center top;
}
.base-list a[href$=".doc"]:after,
.base-list a[href$=".docx"]:after {
	background: url(../images/icon_word.png) no-repeat center top;
}
.base-list a[href$=".xls"]:after,
.base-list a[href$=".xlsx"]:after {
	background: url(../images/icon_excel.png) no-repeat center top;
}
.base-list a[href$=".ppt"]:after,
.base-list a[href$=".pptx"]:after {
	background: url(../images/icon_powerpoint.png) no-repeat center top;
}
.base-list ul li {
	position: relative;
	padding-left: 1.3em;
}
.base-list ul li:not(:first-child) {
	margin-top: 5px;
}
.base-list ul li:before {
    content: '';
    position: absolute;
    top: .55em;
    left: 5px;
    width: .4em;
    height: .4em;
    background: #192226;
    border-radius: 2px;
}
.base-list ol {
	padding-left: 1.3em;
	list-style-type: decimal;
}
.base-list ol li:not(:first-child) {
	margin-top: 5px;
}

@media screen and (max-width: 767px) {
	.base-list {
		margin-top: 20px;
	}
}

/*  list-gray
------------------------------------------------*/

.list-gray > div {
	padding: 30px;
	background: rgba(0,0,0,.05);
	border-radius: 4px;
}

@media screen and (max-width: 767px) {
	.list-gray > div {
		padding: 15px;
	}
}

/*  linelist
========================================================================*/

.base-linelist:not(:first-child) {
	margin-top: 30px;
}
.base-linelist a.pbOpenNewWindow:after,
.base-linelist a[href$=".pdf"]:after,
.base-linelist a[href$=".doc"]:after,
.base-linelist a[href$=".docx"]:after,
.base-linelist a[href$=".xls"]:after,
.base-linelist a[href$=".xlsx"]:after,
.base-linelist a[href$=".ppt"]:after,
.base-linelist a[href$=".pptx"]:after {
	content: '';
	display: inline-block;
	width: 13px;
	height: 13px;
	margin: 0 5px;
	padding-top: 3px;
	background: url(../images/icon_window.png) no-repeat center top;
	vertical-align: middle;
}
.base-linelist a[href$=".pdf"]:after {
	background: url(../images/icon_pdf.png) no-repeat center top;
}
.base-linelist a[href$=".doc"]:after,
.base-linelist a[href$=".docx"]:after {
	background: url(../images/icon_word.png) no-repeat center top;
}
.base-linelist a[href$=".xls"]:after,
.base-linelist a[href$=".xlsx"]:after {
	background: url(../images/icon_excel.png) no-repeat center top;
}
.base-linelist a[href$=".ppt"]:after,
.base-linelist a[href$=".pptx"]:after {
	background: url(../images/icon_powerpoint.png) no-repeat center top;
}
.base-linelist ul {
	display: flex;
	flex-wrap: wrap;
	margin: -5px -10px;
}
.base-linelist ul li {
	position: relative;
	margin: 5px 10px;
	padding-left: 1.3em;
}
.base-linelist ul li:before {
	content: '';
	position: absolute;
	top: .55em;
	left: 0;
	width: .4em;
	height: .4em;
	border-top: 2px solid #ccc;
	border-right: 2px solid #ccc;
	transform: rotate(45deg);
	background: none;
}

/*  linelist-gray
------------------------------------------------*/

.linelist-gray > div {
	padding: 20px;
	background: rgba(0,0,0,.05);
	border-radius: 4px;
}

@media screen and (max-width: 767px) {
	.linelist-gray > div {
		padding: 10px;
	}
}

/*  noteslist
========================================================================*/

.base-noteslist:not(:first-child) {
	margin-top: 10px;
}
.base-noteslist {
	color: #999;
	font-size: 90%;
}
.base-noteslist a {
	color: #999;
}
.base-noteslist a.pbOpenNewWindow:after,
.base-noteslist a[href$=".pdf"]:after,
.base-noteslist a[href$=".doc"]:after,
.base-noteslist a[href$=".docx"]:after,
.base-noteslist a[href$=".xls"]:after,
.base-noteslist a[href$=".xlsx"]:after,
.base-noteslist a[href$=".ppt"]:after,
.base-noteslist a[href$=".pptx"]:after {
	content: '';
	display: inline-block;
	width: 13px;
	height: 13px;
	margin: 0 5px;
	padding-top: 3px;
	background: url(../images/icon_window.png) no-repeat center top;
	vertical-align: middle;
}
.base-noteslist a[href$=".pdf"]:after {
	background: url(../images/icon_pdf.png) no-repeat center top;
}
.base-noteslist a[href$=".doc"]:after,
.base-noteslist a[href$=".docx"]:after {
	background: url(../images/icon_word.png) no-repeat center top;
}
.base-noteslist a[href$=".xls"]:after,
.base-noteslist a[href$=".xlsx"]:after {
	background: url(../images/icon_excel.png) no-repeat center top;
}
.base-noteslist a[href$=".ppt"]:after,
.base-noteslist a[href$=".pptx"]:after {
	background: url(../images/icon_powerpoint.png) no-repeat center top;
}
.base-noteslist ul li:not(:first-child) {
	margin-top: 5px;
}
.base-noteslist ul li:before {
	content: '※';
	top: .1em;
	border: none;
	transform: none;
	background: none;
}

/*  noteslist-gray
------------------------------------------------*/

.noteslist-gray > div {
	padding: 15px;
	background: rgba(0,0,0,.05);
	border-radius: 4px;
}

@media screen and (max-width: 767px) {
	.noteslist-gray > div {
		padding: 10px;
	}
}

/*  panel
========================================================================*/

.base-panel:not(:first-child) {
	margin-top: 30px;
}
.base-panel > div {
	display: flex;
	flex-wrap: wrap;
	margin: -20px -10px;
}
.base-panel .box {
	width: calc(50% - 20.5px);
	margin: 20px 10px;
	z-index: auto!important;
}
.base-panel .box > div:not(.pb-handle) {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.base-panel .box > div > div {
	z-index: auto!important;
}
.base-panel .image:not(:first-child) {
	margin-top: 20px;
}
.base-panel .image {
	min-height: 0%;
	text-align: center;
}
.base-panel .image img {
	border-radius: 4px;
}
.base-panel .title:not(:first-child) {
	margin-top: 20px;
}
.base-panel .title {
	font-weight: bold;
	font-size: 120%;
}
.base-panel .title p:before {
	content: '';
	display: inline-block;
	margin: 0 .3em 0 0;
	width: .8em;
	height: .8em;
	background: rgba(0,0,0,.5);
	border-radius: 3px;
}
.base-panel .text:not(:first-child) {
	margin-top: 10px;
}
.base-panel .button {
	margin-top: auto;
	text-align: center;
}
.base-panel .button a {
	display: inline-block;
	margin-top: 20px;
	padding: 7px 25px;
	background: #192226;
	color: #fff;
	border-radius: 30px;
	text-decoration: none;
}
.base-panel .button a:hover {
	background: #99afba;
}

@media screen and (max-width: 767px) {
	.base-panel .box {
		width: 100%;
	}
	.base-panel .image:not(:first-child) {
		margin-top: 15px;
	}
}

/*  panel-3column
------------------------------------------------*/

.panel-3column .box {
	width: calc(33.33% - 20.5px);
}
.panel-3column .table th,
.panel-3column .table td {
	padding: 10px;
}

@media screen and (max-width: 767px) {
	.panel-3column .box {
		width: 100%;
	}
	.panel-3column .table th {
		padding: 8px 10px;
	}
}

/*  colorpanel
========================================================================*/

.base-colorpanel:not(:first-child) {
	margin-top: 30px;
}
.base-colorpanel > div {
	display: flex;
	flex-wrap: wrap;
	margin: -20px -10px;
}
.base-colorpanel .box {
	width: calc(50% - 20.5px);
	margin: 20px 10px;
	z-index: auto!important;
}
.base-colorpanel .box > div:not(.pb-handle) {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 20px;
	background: rgba(0,0,0,.05);
	border-radius: 4px;
}
.base-colorpanel .box > div > div {
	z-index: auto!important;
}
.base-colorpanel .image:not(:first-child) {
	margin-top: 20px;
}
.base-colorpanel .image {
	min-height: 0%;
	text-align: center;
}
.base-colorpanel .image img {
	border-radius: 4px;
}
.base-colorpanel .title:not(:first-child) {
	margin-top: 20px;
}
.base-colorpanel .title {
	font-weight: bold;
	font-size: 120%;
}
.base-colorpanel .title p:before {
	content: '';
	display: inline-block;
	margin: 0 .3em 0 0;
	width: .8em;
	height: .8em;
	background: rgba(0,0,0,.5);
	border-radius: 3px;
}
.base-colorpanel .text:not(:first-child) {
	margin-top: 10px;
}
.base-colorpanel .button {
	margin-top: auto;
	text-align: center;
}
.base-colorpanel .button a {
	display: inline-block;
	margin-top: 20px;
	padding: 7px 25px;
	background: #192226;
	color: #fff;
	border-radius: 30px;
	text-decoration: none;
}
.base-colorpanel .button a:hover {
	background: #99afba;
}

@media screen and (max-width: 767px) {
	.base-colorpanel .box {
		width: 100%;
	}
	.base-colorpanel .box > div:not(.pb-handle) {
		padding: 15px;
	}
	.base-colorpanel .image:not(:first-child) {
		margin-top: 15px;
	}
}

/*  colorpanel-3column
------------------------------------------------*/

.colorpanel-3column .box {
	width: calc(33.33% - 20.5px);
}
.colorpanel-3column .table th,
.colorpanel-3column .table td {
	padding: 10px;
}

@media screen and (max-width: 767px) {
	.colorpanel-3column .box {
		width: 100%;
	}
	.colorpanel-3column .table th {
		padding: 8px 10px;
	}
}

/*  iconpanel
========================================================================*/

.base-iconpanel:not(:first-child) {
	margin-top: 30px;
}
.base-iconpanel > div {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: -20px;
}
.base-iconpanel .box {
	width: calc(33.33% - 40.5px);
	margin: 20px;
	z-index: auto!important;
}
.base-iconpanel .box > div:not(.pb-handle) {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-align: center;
}
.base-iconpanel .box > div > div {
	z-index: auto!important;
}
.base-iconpanel .image:not(:first-child) {
	margin-top: 15px;
}
.base-iconpanel .image {
	min-height: 0%;
}
.base-iconpanel .image img {
	min-height: 0%;
	border-radius: 3px;
}
.base-iconpanel .title:not(:first-child) {
	margin-top: 25px;
}
.base-iconpanel .title {
	font-weight: bold;
	font-size: 120%;
}
.base-iconpanel .text:not(:first-child) {
	margin-top: 15px;
}
.base-iconpanel .button {
	margin-top: auto;
}
.base-iconpanel .button a {
	display: inline-block;
	margin-top: 20px;
	padding: 7px 25px;
	background: #192226;
	color: #fff;
	border-radius: 30px;
	text-decoration: none;
}
.base-iconpanel .button a:hover {
	background: #99afba;
}

@media screen and (max-width: 767px) {
	.base-iconpanel .box {
		width: 100%;
	}
}

/*  linkpanel
========================================================================*/

.base-linkpanel:not(:first-child) {
	margin-top: 30px;
}
.base-linkpanel > div {
	display: flex;
	flex-wrap: wrap;
	margin: -20px -10px;
}
.base-linkpanel .box {
	width: calc(50% - 20.5px);
	margin: 20px 10px;
	z-index: auto!important;
}
.base-linkpanel .box > div:not(.pb-handle) {
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
	height: 100%;
	background: rgba(0,0,0,.05);
	border-radius: 6px;
}
.base-linkpanel .box > div > div {
	z-index: auto!important;
}
.base-linkpanel .image {
	overflow: hidden!important;
	min-height: 0%;
}
.pbPage:not(.pbPage--edit) .base-linkpanel .image a:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	transition: all .3s;
}
.pbPage:not(.pbPage--edit) .base-linkpanel .image a:after {
	content: '';
	position: absolute;
	bottom: -10px;
	right: -10px;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-right: 20px solid rgba(0,0,0,.3);
	border-bottom: 20px solid rgba(0,0,0,.3);
	pointer-events: none;
	transition: all .3s;
}
.pbPage:not(.pbPage--edit) .base-linkpanel .image a:hover:after {
	bottom: 0;
	right: 0;
}
.base-linkpanel .image img {
	width: 100%;
}
.base-linkpanel .image a:hover img {
	opacity: 1;
	transform: scale(1.1);
}
.base-linkpanel .textbox > div {
	padding: 20px;
}
.base-linkpanel .title {
	font-weight: bold;
	font-size: 120%;
}
.base-linkpanel .title p:before {
	content: '';
	display: inline-block;
	margin: 0 .3em 0 0;
	width: .8em;
	height: .8em;
	background: rgba(0,0,0,.5);
	border-radius: 3px;
}
.base-linkpanel .text:not(:first-child) {
	margin-top: 10px;
}

@media screen and (max-width: 767px) {
	.base-linkpanel .box {
		width: 100%;
	}
	.base-linkpanel .textbox > div {
		padding: 15px;
	}
}

/*  linkpanel-3column
------------------------------------------------*/

.linkpanel-3column .box {
	width: calc(33.33% - 20.5px);
}

@media screen and (max-width: 767px) {
	.linkpanel-3column .box {
		width: 100%;
	}
}

/*  listpanel
========================================================================*/

.base-listpanel:not(:first-child) {
	margin-top: 30px;
}
.base-listpanel > div {
	display: flex;
	flex-wrap: wrap;
	margin: -10px;
}
.base-listpanel .box {
	width: 100%;
	margin: 10px;
	z-index: auto!important;
}
.base-listpanel .box > div:not(.pb-handle) {
	display: flex;
	position: relative;
	overflow: hidden;
	height: 100%;
	background: rgba(0,0,0,.05);
	border-radius: 6px;
}
.base-listpanel .box > div > div {
	z-index: auto!important;
}
.base-listpanel .image {
	width: 31%;
	min-height: 0%;
}
.base-listpanel .image > div {
	overflow: hidden!important;
}
.pbPage:not(.pbPage--edit) .base-listpanel .image a:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	transition: all .3s;
}
.pbPage:not(.pbPage--edit) .base-listpanel .image a:after {
	content: '';
	position: absolute;
	bottom: -10px;
	right: -10px;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-right: 20px solid rgba(0,0,0,.3);
	border-bottom: 20px solid rgba(0,0,0,.3);
	pointer-events: none;
	transition: all .3s;
}
.pbPage:not(.pbPage--edit) .base-listpanel .image a:hover:after {
	bottom: 0;
	right: 0;
}
.base-listpanel .image img {
	width: 100%;
}
.base-listpanel .image a:hover img {
	opacity: 1;
	transform: scale(1.1);
}
.base-listpanel .textbox {
	display: flex;
	align-items: center;
	width: 70%;
}
.base-listpanel .textbox > div {
	width: 100%;
	padding: 20px;
}
.base-listpanel .textbox > div.pb-handle {
	top: 10px;
}
.base-listpanel .title {
	font-weight: bold;
	font-size: 120%;
}
.base-listpanel .title p:before {
	content: '';
	display: inline-block;
	margin: 0 .3em 0 0;
	width: .8em;
	height: .8em;
	background: rgba(0,0,0,.5);
	border-radius: 3px;
}
.base-listpanel .text:not(:first-child) {
	margin-top: 10px;
}

@media screen and (max-width: 767px) {
	.base-listpanel .box > div:not(.pb-handle) {
		display: block;
	}
	.base-listpanel .image {
		width: 100%;
	}
	.base-listpanel .textbox {
		width: 100%;
	}
	.base-listpanel .textbox > div {
		padding: 15px;
	}
}

/*  listpanel-2column
------------------------------------------------*/

.listpanel-2column .box {
	width: calc(50% - 20.5px);
}

@media screen and (max-width: 767px) {
	.listpanel-2column > div {
		margin: -5px;
	}
	.listpanel-2column .box {
		width: 100%;
		margin: 5px;
	}
	.listpanel-2column .box > div:not(.pb-handle) {
		display: flex;
	}
	.listpanel-2column .image {
		width: 30%;
	}
	.listpanel-2column .textbox {
		width: 70%;
		font-size: 90%;
	}
	.listpanel-2column .textbox > div {
		padding: 10px;
	}
	.listpanel-2column .text:not(:first-child) {
		margin-top: 3px;
	}
}

/*  mixpanel
========================================================================*/

.base-mixpanel:not(:first-child) {
	margin-top: 30px;
}
.base-mixpanel > div {
	display: flex;
	flex-wrap: wrap;
	margin: -20px -15px;
}
.base-mixpanel .box {
	width: calc(50% - 30.5px);
	margin: 20px 15px;
	z-index: auto!important;
}
.base-mixpanel .title:not(:first-child) {
	margin-top: 30px;
}
.base-mixpanel .title > div {
	padding: 10px;
	background: #333;
	color: #fff;
	font-size: 120%;
	font-weight: bold;
	text-align: center;
	border-radius: 3px;
}
.base-mixpanel .link:not(:first-child) {
	margin-top: 20px;
}
.base-mixpanel .link {
	font-size: 120%;
	font-weight: bold;
}
.base-mixpanel .link p:before {
	content: '';
	display: inline-block;
	width: .8em;
	height: .8em;
	margin: 0 .3em 0 0;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 3px;
}
.base-mixpanel .image:not(:first-child) {
	margin-top: 20px;
}
.base-mixpanel .image {
	text-align: center;
}
.base-mixpanel .image img {
	border-radius: 4px;
}
.base-mixpanel .text:not(:first-child) {
	margin-top: 20px;
}
.base-mixpanel .list:not(:first-child) {
	margin-top: 15px;
}
.base-mixpanel .list ul li {
	position: relative;
	padding-left: 1.3em;
}
.base-mixpanel .list ul li:not(:first-child) {
	margin-top: 5px;
}
.base-mixpanel .list ul li:before {
    content: '';
    position: absolute;
    top: .55em;
    left: 5px;
    width: .4em;
    height: .4em;
    background: #192226;
    border-radius: 2px;
}
.base-mixpanel .list ol {
	padding-left: 1.3em;
	list-style-type: decimal;
}
.base-mixpanel .list ol li:not(:first-child) {
	margin-top: 5px;
}
.base-mixpanel .pbBlockMenu {
	position: relative;
	margin-top: 20px;
	padding-left: 1.3em;
}
.base-mixpanel .pbBlockMenu + .pbBlockMenu {
	margin-top: 5px;
}
.base-mixpanel .pbBlockMenu:before {
	content: '';
	position: absolute;
	top: .55em;
	left: 0;
	width: .4em;
	height: .4em;
	border-top: 2px solid #ccc;
	border-right: 2px solid #ccc;
	transform: rotate(45deg);
	background: none;
}
.base-mixpanel .imagelist:not(:first-child) {
	margin-top: 20px;
}
.base-mixpanel .imagelist + .imagelist {
	margin-top: 0;
}
.base-mixpanel .imagelist > div {
	display: flex;
	padding: 10px 0;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
.base-mixpanel .imagelist + .imagelist > div {
	border-top: none;
}
.base-mixpanel .imagelist-image {
	width: 20%;
	z-index: auto!important;
}
.base-mixpanel .imagelist-image img {
	width: 100%;
	border-radius: 3px;
}
.base-mixpanel .imagelist-text {
	display: flex;
	align-items: center;
	position: relative;
	width: calc(80% - 10px);
	margin-left: 10px;
	z-index: auto!important;
}
.base-mixpanel .imagelist-text > div.pb-handle {
	top: 10px;
}
.base-mixpanel .button:not(:first-child) {
	margin-top: 15px;
}
.base-mixpanel .button {
	text-align: center;
}
.base-mixpanel .button a {
	display: inline-block;
	margin-top: 20px;
	padding: 7px 25px;
	background: #192226;
	color: #fff;
	border-radius: 30px;
	text-decoration: none;
}
.base-mixpanel .button a:hover {
	background: #99afba;
}
.base-mixpanel .pbBlockSearch {
	position: relative;
	overflow: hidden!important;
	margin-top: 20px;
	padding: 0!important;
}
.base-mixpanel .pbBlockSearch input[type="text"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: calc(100% - 80px);
	float: left;
	padding: 8px 10px;
	font-family: 'Noto Sans JP','メイリオ',Meiryo, sans-serif;
	border: 1px solid #ccc;
	border-radius: 2px;
}
.base-mixpanel .pbBlockSearch input[type="text"]:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px white inset;
}
.base-mixpanel .pbBlockSearch input[type="submit"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	position: absolute;
	right: 0;
	width: 70px;
	height: 100%;
	background: #333;
	color: #fff;
	font-family: 'Noto Sans JP','メイリオ',Meiryo, sans-serif;
	font-size: 100%;
	letter-spacing: 2px;
	border: none;
	border-radius: 2px;
	transition: all .3s;
	cursor: pointer;
}
.base-mixpanel .pbBlockSearch input[type="submit"]:hover {
	background: #000;
}

@media screen and (max-width: 767px) {
	.base-mixpanel .box {
		width: 100%;
	}
}

/*  mixpanel-3column
------------------------------------------------*/

.mixpanel-3column .box {
	width: calc(33.33% - 30.5px);
}
.mixpanel-3column .table th,
.mixpanel-3column .table td {
	padding: 10px;
}

@media screen and (max-width: 767px) {
	.mixpanel-3column .box {
		width: 100%;
	}
	.mixpanel-3column .table th {
		padding: 8px 10px;
	}
}

/*  table
========================================================================*/

.base-table:not(:first-child) {
	margin-top: 30px;
}
.base-table th {
    width: 30%;
}

@media screen and (max-width: 767px) {
	.base-table table,
	.base-table table tbody,
	.base-table table tr,
	.base-table table th,
	.base-table table td {
		display: block;
		width: 100%!important;
		height: auto!important;
	}
	.base-table table th {
		padding: 8px 10px;
	}
	.base-table table td {
		padding: 10px;
	}
}

/*  base-smalltable
========================================================================*/

.base-smalltable:not(:first-child) {
	margin-top: 30px;
}
.base-smalltable table {
	width: auto;
}
.base-smalltable table th,
.base-smalltable table td {
	text-align: center;
}

/*  base-swipetable
========================================================================*/

.base-swipetable:not(:first-child) {
	margin-top: 30px;
}
.base-swipetable table th {
	vertical-align: middle;
	text-align: center;
}
.base-swipetable table td {
	vertical-align: middle;
	text-align: center;
}

@media screen and (max-width: 767px) {
	.base-swipetable > div {
		overflow: auto!important;
	}
	.base-swipetable > div::-webkit-scrollbar {
		height: 15px;
	}
	.base-swipetable > div::-webkit-scrollbar-thumb {
		background: #d9dcdf;
		border-radius: 10px;
	}
	.base-swipetable > div::-webkit-scrollbar-track {
		background: #f5f5f5;
		border-radius: 10px;
	}
	.base-swipetable table {
		width: 800px;
		margin-bottom: 3px;
	}
}

/*  popup
========================================================================*/

.base-popup:not(:first-child) {
	margin-top: 30px;
}
.base-popup {
	text-align: center;
}

/*  youtubepopup
========================================================================*/

.base-youtubepopup:not(:first-child) {
	margin-top: 30px;
}
.base-youtubepopup {
	position: relative;
	text-align: center;
	z-index: auto!important;
}
.base-youtubepopup:before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 2;
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 10px solid #fff;
	pointer-events: none;
}
.base-youtubepopup a {
	position: relative;
	display: inline-block;
}
.base-youtubepopup a:before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 1;
	width: 60px;
	height: 40px;
	background: #000;
	border-radius: 10px;
	pointer-events: none;
	transition: all .3s;
}
.base-youtubepopup a:hover:before {
	background: #f00;
}

/*  accordion
========================================================================*/

.base-accordion:not(:first-child) {
	margin-top: 30px;
}
.base-accordion + .base-accordion {
	margin-top: 5px;
}
.base-accordion > div {
	overflow: hidden;
}
.base-accordion .trigger {
	position: relative;
	z-index: auto!important;
}
.base-accordion .trigger:before,
.base-accordion .trigger:after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	right: 20px;
	width: 16px;
	height: 2px;
	background: #000;
	transition: all .3s;
}
.base-accordion .trigger:after {
	transform: rotate(90deg);
}
.base-accordion .trigger.active:after {
	transform: rotate(360deg);
}
.base-accordion .trigger > div {
	padding: 20px 40px 20px 20px;
	background: rgba(0,0,0,.02);
	font-weight: bold;
	border: 1px solid #ccc;
	cursor: pointer;
	border-radius: 6px;
}
.base-accordion .trigger.active > div {
	border-radius: 6px 6px 0 0;
}
.base-accordion .content {
	display: none;
}
.base-accordion .content > div {
	position: relative;
	padding: 20px;
	background: rgba(255,255,255,.5);
	border: 1px solid #ccc;
	border-top: none;
	border-radius: 0px 0px 6px 6px;
}

@media screen and (max-width: 767px) {
	.base-accordion .trigger:before,
	.base-accordion .trigger:after {
		right: 10px;
	}
	.base-accordion .trigger > div {
		padding: 10px 30px 10px 10px;
	}
	.base-accordion .content > div {
		padding: 10px;
	}
}

/*  youtube
========================================================================*/

.base-youtube:not(:first-child) {
	margin-top: 30px;
}
.base-youtube {
	position: relative;
	padding-top: 0%!important;
	padding-bottom: 56.25%!important;
	z-index: auto!important;
}
.base-youtube iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*  map
========================================================================*/

.base-map:not(:first-child) {
	margin-top: 30px;
}
.base-map {
	position: relative;
	height: 250px;
	padding: 0;
	z-index: auto!important;
}
.base-map iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*  commentList-title
========================================================================*/

/*  title
------------------------------------------------*/

.commentList-title {
	margin-top: 40px;
}
.commentList-title > div {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	position: relative;
	padding-left: 20px;
}
.commentList-title > div:before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	left: 0;
	width: .7em;
	height: .7em;
	background: #192226;
	border-radius: 3px;
}
.commentList-title {
	min-width: 50px;
}

@media screen and (max-width: 767px) {
	.commentList-title > div {
		padding-left: 0;
		text-align: center;
	}
	.commentList-title > div:before {
		display: none;
	}
}

/*  commentList
------------------------------------------------*/

.commentList li:not(:first-child) {
	margin-top: 10px;
}
.commentList .day {
	color: #99afba;
	font-family: 'Roboto Condensed', sans-serif;
	margin-top: 4px;
	font-size: 14px;
}
.commentList li {
    padding: 20px !important;
    background: #f3f3f3;
    border-radius: 15px;
}
.commentList .comment {
	margin-top: 10px;
}
.commentList .name {
	width: 100%;
	padding-left: 25px;
	background: url(../images/user-s.png) no-repeat center left;
	background-size: 18px;
	color: #666c6f;
	font-weight: normal;
}
.commentList .contributor {
	width: 100%;
	padding-left: 25px;
    color: #ef5575;
    background: url(../images/updateUser-s.png) no-repeat center left;
    background-size: 18px;
    font-weight: normal;
}
.commentList .delete {
	color:#b7b7b7;
}
.commentList input[type="button"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font-family: 'Noto Sans JP','メイリオ',Meiryo, sans-serif;
	min-width: 200px;
	padding: 7px 25px;
	background: #192226;
	color: #fff;
	border: none;
	border-radius: 30px;
	cursor: pointer;
	transition: all .3s;
}
.commentList input[type="button"]:hover {
	background: #99afba;
}
.commentList .commentBtn {
    margin:20px 0;
    position: relative;
}
.commentList .commentBtn:before {
	position: absolute;
	font-family: FontAwesome;
	content: '\f075';
	display: inline-block;
	color: #fff;
	top: 6px;
	left: 36px;
}
.commentList .commentBtn input[type="button"] {
	padding: 7px 42px 7px 62px;
}

/*  pagelist-comment
========================================================================*/

.pagelist-comment li {
	margin-top: 10px;
}
.pagelist-comment li a {
	display: flex;
	align-items: center;
	position: relative;
	padding: 10px;
	background: #fff;
	border-radius: 8px;
	font-weight: bold;
	text-decoration: none;
}
.pagelist-comment li a.is-self:before {
	font-family: FontAwesome;
	content: '\f058';
	position: absolute;
	top: -3px;
	right: 13px;
	font-size: 18px;
	color: #000;
}

.pagelist-comment li a:hover {
	background: #e2e8e8;
}
.pagelist-comment .count {
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 2px 20px;
	text-align: right;
	font-weight: normal;
}
.pagelist-comment .count:before {
	font-family: FontAwesome;
	content: '\f075';
	font-size: 13px;
	margin-right: 3px;
	line-height: 1;
	color: #000;
}
.pagelist-comment .count.is-self:before {
	color: #ff8c00;
}
.pagelist-comment .count span {
	color: #000;
	font-size: 11px;
	font-weight: normal;
	vertical-align: baseline;
}
.pagelist-comment .text {
	padding-left: 10px !important;
	width: 87%;
}
.pagelist-comment .day {
	font-size: 80%;
	font-family: 'Roboto Condensed', sans-serif;
}
.pagelist-comment .title {
	width: 95%;
}
.pagelist-comment .comment {
	color: #99afba;
	font-size: 80%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
}

@media screen and (max-width: 767px) {
	.pagelist-comment li {
		margin-top: 5px;
	}
	.pagelist-comment li:nth-child(n+6) {
		display: none;
	}
}