@charset "utf-8";


/* ============================================================================================
	web font
============================================================================================= */
@font-face {
	font-family:'CGothic';
	src:url('images/fonts/CGothic.ttf') format('truetype');
}
@font-face {
	font-family:'CSerif';
	src:url('images/fonts/CSerif.ttf') format('truetype');
}
@font-face {
	font-family:'Georgia';
	src:url('images/fonts/Georgia.ttf') format('truetype');
}



/* ============================================================================================
	CSS reset
============================================================================================= */
* ,*:before ,*:after {
	box-sizing:border-box;
	text-size-adjust:100%;
	-webkit-text-size-adjust:100%;
	margin:0;
	padding:0;
	border:0 none;
	font-size:inherit;
	font-weight:inherit;
	font-style:inherit;
	text-decoration:inherit;
	vertical-align:inherit;
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
}
ol ,ul ,li {
	list-style:none;
}
button ,input ,textarea ,select {
	font-size:14px;
	letter-spacing:1px;
}
button {
	padding:5px 20px;
}
a ,a:before ,a:after {
	color:inherit;
	-webkit-transition:all 0.3s ease;
	transition:all 0.3s ease;
}
a:hover {
	color:#f00;
}

img {
	vertical-align:bottom;
	max-width:100%;
	max-height:100%;
}
blockquote ,q {
	quotes:none;
}
blockquote:before ,blockquote:after
,q:before ,q:after {
	content:'';
	content:none;
}
header ,footer ,nav ,main ,article ,section ,aside {
	position:relative;
	display:block;
	width:100%;
}

.altText ,
.dispNone {
	display:none !important;
}



/* ============================================================================================
	font anti-aliasing (IE Hack)
============================================================================================= */
@media all and (-ms-high-contrast:none) {
	.font-aa {
		transform:rotate(0.001deg);
	}
	.font-aa img {
		transform:rotate(-0.001deg);
	}
}



/* ============================================================================================
	body layout
============================================================================================= */
body{
	font-size:14px;
	line-height:1.6em;
	font-family:"メイリオ",sans-serif;
	color:#000;
	background:url(images/common/pattern_hex_back3.jpg) 50% 0;
}
.outer {
}
.inner {
	width:1200px;
	max-width:1200px;
	margin:0 auto;

}
.flex {
	width:100%;
	height:100%;
	display:flex;
	justify-content:center;
	align-items:flex-start;
}


@media screen and (min-width:800px) { 
	.sp ,
	.xElement > :nth-child(2) {
		display:none;
	}
}
@media screen and (max-width:799px) {
	.pc ,
	.xElement > :nth-child(1) {
		display:none;
	}
	body{
		font-size:13px;
	}
	body #bgLayer {
		width:480px;
		margin:0 auto;
	}
	.inner {
		width:100%;
		max-width:480px;
	}
}



/* ================================================================
	fixed buttons(common)
================================================================= */
#pagetopLink {
	width:70px !important;
	height:70px !important;
	color:#fff;
	background:#333;
	text-align:center;
	cursor:pointer;
	border-radius:5px;
	box-shadow:0 0 5px #fff;
}
#pagetopLink .flex {
	align-items:center;
}


/* ==============================================
	fixed buttons(pc)
=============================================== */
@media screen and (min-width:800px) { 
	#pagetopLink {
		position:fixed;
		right:10px;
		bottom:10px;
		display:none;
	}
	#pagetopLink:hover {
		background:#666;
	}
}

/* ==============================================
	fixed buttons(sp)
=============================================== */
@media screen and (max-width:799px) {
	#fixedButtons {
		position:fixed;
		bottom:0;
		left:0;
		width:100%;
		height:60px;
		background:#fff;
		box-shadow:0 -1px 5px #999;
		z-index:10001;
	}
	#fixedButtons #spFixedFooter {
		width:480px;
		height:100%;
		margin:0 auto;
		padding:0 5px;
		display:flex;
		justify-content:space-between;
		align-items:center;
		text-align:center;
	}
	#fixedButtons #spFixedFooter > div#spFooterTel {
		width:200px;
		height:50px;
	}
	#fixedButtons #spFixedFooter > div#spFooterTel a {
		display:block;
		width:100%;
		height:100%;
		font-size:11px;
		color:#fff;
		background:#f6c;
		border-radius:5px;
	}
	#fixedButtons #spFixedFooter > div#spFooterTel a em {
		display:block;
		font-size:24px;
		font-family:"Georgia","メイリオ",sans-serif;
	}
	#fixedButtons #spFixedFooter > div#spFooterContact {
		width:200px;
		height:50px;
	}
	#fixedButtons #spFixedFooter > div#spFooterContact a {
		display:block;
		width:100%;
		height:100%;
		line-height:50px;
		background:#43a300;
		border-radius:5px;
	}
	#fixedButtons #spFixedFooter > div#spFooterContact a img {
		vertical-align:middle;
	}

	#fixedButtons #spFixedFooter #pagetopLink {
		display:block !important;
		width:60px !important;
		height:50px !important;
		opacity:1 !important;
	}

}



/* ==============================================
	fixed menu button (sp)
=============================================== */
@media screen and (max-width:799px) {
	#spMenuIcon {
		position:fixed;
		top:5px;
		left:calc(50% - 240px + 420px);
		width:50px;
		height:50px;
		padding:10px;
		display:flex;
		align-items:center;
		cursor:pointer;
		background:#fff;
		border-radius:5px;
		box-shadow:0 0 5px #999;
		z-index:10001;
	}
	#spMenuIcon #menuIcon {
		position:relative;
		width:100%;
		height:4px;
		background:#f09;
		border-radius:2px;

		-webkit-transform:rotate(0deg);
		transform:rotate(0deg);
		-webkit-transition:.2s ease-out;
		transition:.2s ease-out;
	}
	#spMenuIcon #menuIcon:before ,
	#spMenuIcon #menuIcon:after {
		content:"";
		position:relative;
		display:block;
		width:100%;
		height:4px;
		background:#f09;
		border-radius:2px;
		-webkit-transform:rotate(0deg);
		transform:rotate(0deg);
		-webkit-transition:.2s ease-out;
		transition:.2s ease-out;
	}
	#spMenuIcon #menuIcon:before {
		top:-10px;
	}
	#spMenuIcon #menuIcon:after {
		bottom:-6px;
	}
	#spMenuIcon #menuIcon span {
		display:none;
	}

	.menuOpen #spMenuIcon #menuIcon {
		background:transparent;
	}
	.menuOpen #spMenuIcon #menuIcon:before {
		top:50%;
		-webkit-transform:rotate(-45deg);
		transform:rotate(-45deg);
	}
	.menuOpen #spMenuIcon #menuIcon:after {
		bottom:50%;
		-webkit-transform:rotate(45deg);
		transform:rotate(45deg);
	}
}


/* ==============================================
	fixed content menu (sp)
=============================================== */
@media screen and (max-width:799px) {
	.menuOpen #headerNav.pc {
		display:block;
		position:fixed;
		top:0;
		bottom:0;
		left:0;
		right:0;
		width:100%;
		height:100%;
		background:rgba(255,255,255,0.95);
		z-index:10000;
	}
	.menuOpen #headerNav.pc .navMenu.flex {
		padding:70px 10px 0;
		flex-wrap:wrap;
	}
	.menuOpen #headerNav.pc .navMenu.flex li {
		width:100%;
		border-bottom:1px solid #999;
	}
	.menuOpen #headerNav.pc .navMenu.flex li a {
		width:100%;
		padding:0.5em 1.5em;
		font-size:20px;
		line-height:1em;
		display:flex;
		justify-content:space-between;
	}
	.menuOpen #headerNav.pc .navMenu.flex li a span:nth-child(2) {
		color:#666;
		font-size:14px;
	}
	.menuOpen #headerNav.pc .navMenu.flex li a span:nth-child(2):after {
		content:">>";
		padding-left:1em;
		font-size:20px;
		font-weight:bold
	}

}









/* ============================================================================================
	header layout
============================================================================================= */
header {
	font-family:"Georgia","メイリオ",sans-serif;
}
/* ==============================================
	header h1 (pc)
=============================================== */
#h1 {
	color:#fff;
	background:#000;
	overflow:hidden;
}
#h1 h1.inner {
	font-size:13px;
	letter-spacing:1px;
	padding:2px 10px;
}
@media screen and (max-width:799px) {
	#h1 h1.inner {
		font-size:12px;
		text-align:center;
	}
	header.menuOn #h1 {
		height:0;
	}
}

/* ==============================================
	header Main
=============================================== */
#headerMain {
	position:relative;
	padding:10px 0;
	background:rgba(255,255,255,0.8);
}
#headerMain ul.flex {
	justify-content:space-between;
	align-items:flex-end;
}
#headerMain ul.flex > #headerLogo.flex {
	width:auto;
}
#headerMain ul.flex > #headerTel {
	position:relative;
	text-align:right;
	font-size:18px;
	line-height:1.4;
	letter-spacing:1px;
}
#headerMain ul.flex > #headerTel #headerContact a img {
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#headerMain ul.flex > #headerTel #headerContact a:hover img {
	box-shadow:0 0 10px #060;
}
#headerMain ul.flex > #headerTel div span {
	padding-right:1em;
}
#headerMain ul.flex > #headerTel div a {
	font-size:36px;
	letter-spacing:2px;
	cursor:pointer;
}
@media screen and (max-width:799px) {
	#headerMain ul.flex {
		justify-content:center;
		align-items:flex-start;
		flex-wrap:wrap;
	}
	#headerMain ul.flex > #headerLogo.flex {
		width:100%;
		height:80px;
	}
	#headerMain ul.flex > #headerLogo a {
		width:100%;
		height:100%;
		text-align:center;
	}
	#headerMain ul.flex > #headerTel {
		font-size:14px;
		text-align:center;
		overflow:hidden;
		text-align:center;
	}
	#headerMain ul.flex > #headerTel a {
		display:block;
		font-size:28px;
	}

	header.menuOn #headerMain {
		position:fixed;
		top:0;
		left:0;
		right:0;
		z-index:10001;
	}
	header.menuOn #headerMain .inner {
		width:480px;
	}
	header.menuOn #headerMain ul.flex > #headerTel {
		height:0;
	}
}


/* ==============================================
	header Nav
=============================================== */
@media screen and (min-width:800px) { 
	#headerNav {
		height:60px;
		background:#000;
	}
	#headerNav * {
		height:100%;
	}
	#headerNav .flex {
		justify-content:space-between;
		height:100%;
	}

	#headerNav .flex li {
		width:12.5%;
		height:100%;
		-webkit-transition:all 0.3s ease;
		transition:all 0.3s ease;
	}
	#headerNav .flex li.active {
		border:3px;
	}

	#headerNav .flex li a {
		position:relative;
		display:block;
		padding-top:10px;
		text-align:center;
		color:#fff;
	}
	#headerNav .flex li a span {
		display:block;
		height:20px;
		line-height:20px;
	}
	#headerNav .flex li a span:nth-child(1) {
		font-size:18px;
	}
	#headerNav .flex li a span:nth-child(2) {
		font-size:11px;
		color:#fcf;
	}

	#headerNav .flex li a:after {
		content:"";
		position:absolute;
		left:5px;
		right:5px;
		bottom:3px;
		display:block;
		height:3px;
		background:transparent;
	}
	#headerNav .flex li.active a:after {
		background:#f9c;
	}
	#headerNav .flex li:not(.active) a:hover {
		color:#fff;
		text-shadow:0 0 3px #fff,0 0 15px #fff;
	}
	#headerNav .flex li:not(.active) a:hover:after {
		background:#ccc;
	}


	#headerNav .flex li.navMenu09 ,
	#headerNav .flex li.navMenu10 ,
	#headerNav .flex li.navMenu11 ,
	#headerNav .flex li.navMenu12 {
		display:none;
	}
}

@media screen and (max-width:799px) {
	header {
		background:rgba(255,255,204,0.6);
		border-bottom:1px solid #999;
	}
	header ul#spMenu.flex {
		padding:2px;
	}
	header ul#spMenu.flex li {
		padding:2px;
	}
}


/* ============================================================================================
	footer layout
============================================================================================= */
footer {
	font-family:"Georgia","メイリオ",sans-serif;
}
@media screen and (max-width:799px) {
	footer {
		padding-bottom:60px;
	}
}
/* ============================================================================================
	footer block
============================================================================================= */
#footerBG {
	padding:30px 0;
	color:#fff;
	background:rgba(0,0,0,0.9);
}
#footerBG .inner > .flex {
	flex-direction:row-reverse;
	justify-content:space-between;
}
#footerBG .inner > .flex > * {
}

#footerBG #footerLogo {
	width:320px;
	padding-bottom:30px;
	text-align:center;
}
#footerBG .footerTel a {
	font-size:24px;
	line-height:1.8em;
}

@media screen and (max-width:799px) {
	#footerBG .inner > .flex {
		flex-direction:column-reverse;
		justify-content:flex-end;
	}
	#footerBG .inner > .flex > nav {
		padding:10px;
	}
	#footerBG #footerLogo {
		width:100%;
		padding-bottom:20px;
	}
}



/* ===================================================================================
	footer -> nav
==================================================================================== */
footer nav {
	padding-top:10px;
	width:720px;
	height:100%;
}
footer .navMenu.flex {
	flex-wrap:wrap;
	justify-content:flex-start;
	text-align:center;
}
footer .navMenu.flex li {
	margin-bottom:0.5em;
	-webkit-transition:all 0.3s ease;
	transition:all 0.3s ease;
	border-right:1px solid #999;
}
footer .navMenu.flex li a {
	display:block;
	padding:0 2em;
}
@media screen and (min-width:800px) { 
	footer .navMenu.flex li a span:nth-child(1) {
		display:block;
	}
	footer .navMenu.flex li a span:nth-child(2) {
		display:none;
	}
	footer .navMenu.flex li a:hover {
		color:#ffc;
		text-shadow:0 0 5px #ff9;
	}
}

@media screen and (max-width:799px) {
	footer .navMenu.flex {
		width:100%;
		border:1px solid #ccc;
		border-radius:10px;
		overflow:hidden;
		background:rgba(0,0,255,0.3);
		box-shadow:0 0 5px #fff;
	}
	footer .navMenu.flex li {
		width:100%;
		font-size:16px;
		line-height:2.4em;
		border-bottom:1px dashed #ccc;
		text-align:left;
	}
	footer .navMenu.flex li:last-child {
		border-bottom:0 none;
	}
	footer .navMenu.flex li a {
		position:relative;
		display:block;
		width:100%;
		height:100%;
		padding-left:2em;
		padding-bottom:0;
	}
	footer .navMenu.flex li a span:nth-child(2) {
		padding-left:0.5em;
		font-size:12px;
	}
	footer .navMenu.flex li a:after {
		content:">";
		position:absolute;
		right:1em;
		font-size:20px;
		font-weight:bold;
	}
}




/* ===================================================================================
	footer -> copyright
==================================================================================== */
#copyright .inner {
	padding:0.5em 0;
	color:#000;
	font-size:12px;
	background:rgba(255,255,255,0.6);
	text-align:center;
}
@media screen and (max-width:799px) {
	#copyright .inner span {
		display:block;
	}
}




/* ============================================================================================
	main section
============================================================================================= */
@media screen and (min-width:800px) { 
	main.inner {
		padding:20px;
		color:#000;
		background:rgba(255,255,255,0.9);
	}
	main.inner > .flex {
		flex-direction:row;
		justify-content:space-between;
	}
	main.inner > .flex > aside#sideMenu {
		width:290px;
	}
	main.inner > .flex > section#mainSection {
		width:850px;
	}
}

@media screen and (max-width:799px) {
	main.inner {
		color:#000;
		background:rgba(255,255,255,0.9);
	}
	main.inner > .flex {
		flex-direction:column;
		flex-wrap:wrap;
		padding-bottom:30px;
	}
	main.inner > .flex > aside#sideMenu {
		width:100%;
	}
	main.inner > .flex > section#mainSection {
		width:100%;
	}

	.spAside {
		padding:0 10px;
	}
	.spAside li {
		padding-top:20px;
	}
	.spAside li a img {
	    box-shadow:0 0 5px #fff;
	}
}



/* ===================================================================================
	main -> side menu
==================================================================================== */
aside#sideMenu ul#sideMenuList li {
	padding-bottom:15px;
}
aside#sideMenu ul#sideMenuList li img {
	box-shadow:0 0 5px #fff;
	-webkit-transition:all 0.3s ease;
	transition:all 0.3s ease;
}
aside#sideMenu ul#sideMenuList li a:hover img {
	box-shadow:0 0 10px #f06;
}




/* ===================================================================================
	cast search panel
==================================================================================== */
#castSearch {
	margin:20px 10px;
	border:1px solid #666;
	border-radius:10px;
	overflow:hidden;
}
#castSearch h2 {
	padding:0.5em 1em;
	font-size:18px;
	text-shadow:0 0 5px #fff;
	color:#fff;
	background: linear-gradient(#000,#333) #333;
	background: -moz-linear-gradient(center top, #000,#333);
	background: -webkit-gradient(linear, center top, center bottom, from(#000),to(#333));
	font-family:"Georgia","メイリオ",sans-serif;
}


.castSearchFrame.flex {
	justify-content:flex-start;
	font-size:16px;
}
.castSearchFrame.flex h3 {
	width:100px;
	position:relative;
	padding:10px;
	color:#f06;
	text-align:right;
}


.castSearchList.flex {
	width:auto;
	justify-content:flex-start;
	padding:10px 0;
}
.castSearchList.flex li {
	position:relative;
	padding-left:30px;
	padding-right:20px;
	cursor:pointer;
	color:#333;
}
.castSearchList.flex li:before {
	content:"";
	position:absolute;
	top:50%;
	left:8px;
	margin-top:-8px;
	display:block;
	width:16px;
	height:16px;
	border:1px solid #999;
	border-radius:50%;
}
.castSearchList.flex li.on {
	color:#000;
}
.castSearchList.flex li.on:after {
	content:"";
	position:absolute;
	top:50%;
	left:11px;
	margin-top:-5px;
	display:block;
	width:10px;
	height:10px;
	background:#000;
	border-radius:50%;
}


@media screen and (max-width:799px) {
	.castSearchFrame.flex {
		justify-content:flex-start;
		font-size:13px;
		line-height:2em;
		padding:10px 0;
	}
	.castSearchFrame.flex > * {
	}
	.castSearchFrame.flex h3 {
		width:16%;
		padding:0;
	}
	.castSearchList.flex {
		width:84%;
		flex-wrap:wrap;
		padding:0;
	}
	.castSearchList.flex li {
		width:33%;
		padding-right:0;
	}
}


/* ===================================================================================
	(page) index
==================================================================================== */
#indexImage {
	position:relative;
	width:100%;
}

#indexButtons.flex {
	position:absolute;
	top:365px;
	left:30px;
	width:840px;
	height:225px;
	align-items:flex-end;
}
#indexButtons.flex li {
	height:100%;
}
#indexButtons.flex li span {
	display:none;
}
#indexButtons.flex li.button {
	width:300px;
	background:url(images/common/enter_buttons.png) 0 0 no-repeat;
}
#indexButtons.flex li.button a {
	display:block;
	width:100%;
	height:100%;
	background:url(images/common/enter_buttons.png) 0 -225px no-repeat;
	opacity:0;
}
#indexButtons.flex li.button a:hover {
	opacity:1;
}
#indexButtons.flex li.button.enter2 {
	background-position:-540px 0px;
}
#indexButtons.flex li.button.enter2 a {
	background-position:-540px -225px;
}

#indexButtons.flex li.button.exit {
	width:240px;
	height:180px;
	background-position:-300px -45px;
}
#indexButtons.flex li.button.exit a {
	background-position:-300px -270px;
}

#indexLinks {
	padding-top:30px;
	padding-bottom:30px;
}


@media screen and (max-width:799px) {
	#indexButtons.flex {
		top:260px;
		left:0px;
		width:100%;
		height:120px;
	}
	#indexButtons.flex li.button {
		width:160px;
		background-size:448px 240px;
	}
	#indexButtons.flex li.button a {
		background-position:0 -120px;
		background-size:448px 240px;
	}
	#indexButtons.flex li.button.enter2 {
		background-position:-288px 0px;
	}
	#indexButtons.flex li.button.enter2 a {
		background-position:-288px -120px;
	}

	#indexButtons.flex li.button.exit {
		width:128px;
		height:96px;
		background-position:-160px -24px;
	}
	#indexButtons.flex li.button.exit a {
		background-position:-160px -144px;
	}

	#indexLinks {
		padding-top:120px;
	}

}


/* ================================================================
	index override
================================================================= */
#indexHtmlBody main.inner {
	padding:0;
}
@media screen and (max-width:799px) {
	#indexHtmlBody #spMenuIcon {
		display:none;
	}
}




/* ===================================================================================
	main -> main section
==================================================================================== */
.pageLinkButton {
	width:300px;
	margin-left:auto;
	padding:10px;
	text-align:right;
	opacity:0.8;
}
.pageLinkButton:hover {
	opacity:1;
}
@media screen and (max-width:799px) {
	.pageLinkButton {
		opacity:1;
	}
}




/* =========================================================================
	main section -> .contentsHeader
=========================================================================== */
.contentsHeader {
	position:relative;
	height:35px;
	padding:0 15px 5px;
	font-size:20px;
	font-family:"Georgia","メイリオ",sans-serif;
	color:#000;
}
.contentsHeader:after {
	content:"";
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	height:2px;
	background:#f06;
	background:-webkit-gradient(linear, left top, right top, from(#f06), to(#fcf));
}
h3.contentsHeader ,
p.contentsHeader {
	padding-left:10px;
	height:auto;
	line-height:1.4em;
}
@media screen and (max-width:799px) {
	h3.contentsHeader {
		font-size:16px;
	}
	p.contentsHeader {
		font-size:14px;
	}
}



/* ================================================================
	main section -> h2.contentsHeader.flex
================================================================= */
.contentsHeader.flex {
	height:50px;
	font-size:24px;
	justify-content:space-between;
	align-items:flex-end;
}
.contentsHeader.flex:after {
	height:3px;
}
.contentsHeader.flex > span {
	line-height:1em;
}
.contentsHeader.flex > span:nth-child(1) {
	font-size:32px;
}
.contentsHeader.flex > span:nth-child(2) {
	font-size:14px;
}

@media screen and (max-width:799px) {
	.contentsHeader.flex > span:nth-child(1) {
		font-size:24px;
	}
	.contentsHeader.flex > span:nth-child(2) {
		font-size:12px;
	}
}





/* =========================================================================
	main section -> .infoBox
=========================================================================== */
.infoBox {
	padding:20px 20px 0;
}
.infoBox > .infoBoxInner {
	padding:20px;
	border:1px solid #666;
	border-radius:10px;
}
.infoBox > .infoBoxInner .infoImage {
	padding:20px 50px 0;
	text-align:center;
}
.infoBox > .infoBoxInner .infoImage img {
	box-shadow:0 0 5px #fff;
}
.infoBox > .infoBoxInner .infoBody {
	padding-top:20px;
}

@media screen and (max-width:799px) {
	.infoBox {
		padding:10px 10px 0;
	}
	.infoBox > .infoBoxInner {
		padding:10px;
	}
	.infoBox > .infoBoxInner .infoImage {
		padding-top:10px;
	}
	.infoBox > .infoBoxInner .infoBody {
		padding-top:10px;
	}

}



/* =========================================================================
	main section -> #formTable
=========================================================================== */
dl#formTable.flex {
	flex-wrap:wrap;
	align-items:center;
}
dl#formTable.flex > * {
	width:35%;
	padding:10px;
	text-align:right;
}
dl#formTable.flex > dd {
	width:65%;
	text-align:left;
}

dl#formTable .error {
	display:block;
	color:#f00;
}
@media screen and (max-width:799px) {
	dl#formTable.flex > * {
		padding:10px 5px;
	}
	dl#formTable.flex > dt {
		width:30%;
	}
	dl#formTable.flex > dd {
		width:70%;
	}
}



/* ================================================================
	main section -> #formTable -> form parts
================================================================== */
button ,input ,textarea ,select {
	font-size:14px;
	letter-spacing:1px;
}
button {
	padding:5px 20px;
}

#form input ,
#form select ,
#form textarea {
	padding:0.2em 0.5em;
	font-size:14px;
	border:1px solid #ccc;
	border-radius:3px;
	font-family:"メイリオ",sans-serif;
}
#form input[type="submit"] {
	padding:5px 20px;
}
#form label {
	padding:0 1em;
}
#form .widthS {
	width:6em;
	max-width:90%;
}
#form .widthM {
	width:15em;
	max-width:90%;
}
#form .widthL {
	width:90%;
}
#form textarea {
	width:90%;
	height:10em;
}

#form .formButton {
	padding:20px;
	text-align:center;
}




/* ================================================================
	main section -> #formTable (reserve)
================================================================== */
#formBloc.reserve dl#formTable.flex > dt {
	width:35%;
}
#formBloc.reserve dl#formTable.flex > dd {
	width:65%;
}
#formBloc.reserve #form label {
	width:33%;
	display:inline-block;
	padding:0 0.5em;
}
@media screen and (max-width:799px) {
	#formBloc.reserve #form label {
		min-width:50%;
		padding:0.3em;
	}
}




/* ================================================================
	main section -> #formTable -> complete
================================================================== */
.sendIP {
	padding-top:3em;
	font-size:10px;
	line-height:1.4em;
	color:#66c;
	text-align:right;
}






/* =========================================================================
	main section -> home
=========================================================================== */
.contentsBloc {
	padding-bottom:30px;
}


/* ================================================================
	main section -> home -> slider
================================================================== */
#homeSliderBloc {
	box-shadow:0 0 5px #fff;
	max-width:100%;
	margin-bottom:30px;
}
#homeSliderBloc .bx-wrapper li {
	width:100%;
	text-align:center;
}

#homeSliderBloc .bx-wrapper .bx-pager {
	bottom:-40px;
}
#homeSliderBloc .bx-wrapper .bx-pager.bx-default-pager a.active {
	border:1px solid #f6c;
	background:#f6c;
}


@media screen and (min-width:800px) {
	#homeSliderBloc .bx-wrapper li img {
		max-width:850px;
		max-height:530px;
	}
}
@media screen and (max-width:799px) {
	#homeSliderBloc .bx-wrapper li img {
		max-width:100%;
		max-height:300px;
	}
}


/* ================================================================
	main section -> home -> news
================================================================== */
#homeNews {
}

#homeNews ul .flex {
	height:auto;
	flex-direction:row-reverse;
}
#homeNews ul .flex > .newsText {
	width:70%;
	padding-left:20px;
}
#homeNews ul .flex > .newsText > :nth-child(1) {
	font-size:12px;
	line-height:1.6em;
	color:#f06;
}
#homeNews ul .flex > .newsText > :nth-child(2) {
	font-size:16px;
	line-height:1.6em;
	font-weight:bold;
	color:#60f;
}
#homeNews ul .flex > .newsText > :nth-child(3) {
	line-height:1.6;
}

#homeNews ul .flex > .newsImage {
	width:30%;
	height:100%;
}


.pageLinks {
	text-align:right;
	padding:5px 10px;
	font-size:14px;
}
.pageLinks a {
	display:inline-block;
	padding:0 3px;
}
.pageLinks a.active {
	color:#00f;
	font-size:18px;
	text-decoration:underline;
}



#homeHtmlBody #homeNews ul {
	height:250px;
	max-height:600px;
	border:1px solid #666;
	border-radius:5px;
	overflow:auto;
}
#homeHtmlBody #homeNews ul li.flex {
	padding:20px 0;
	border-bottom:1px solid #66f;
}
#homeHtmlBody #homeNews ul li.flex:first-child {
	padding-top:0;
}
#homeHtmlBody #homeNews ul li.flex:last-child {
	padding-bottom:0;
	border-bottom:0 none;
}



/* =========================================================================
	main section -> cast
=========================================================================== */
.castList {
	width:100%;
	padding-top:20px;
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-start;
	align-items:flex-start;
}
.castList li {
	position:relative;
	width:24%;
	margin:5px 0.5%;
	border:1px solid #f06;
	padding:2px;
	background:rgba(255,255,255,0.6);
	text-align:center;
	-webkit-transition:all 0.3s ease;
	transition:all 0.3s ease;
	cursor:pointer;
}
.castList li:hover {
	box-shadow:0 0 10px #f06;
}
.castList li > span {
	display:block;
}
.castList li .castImage {
	display:block;
	padding-top:1px;
}
.castList li .castName {
	font-weight:bold;
	font-size:16px;
}
.castList li .castSize {
	color:#f06;
	font-size:12px;
}
.castList li .castSche {
	color:#00f;
	font-size:14px;
}


.castList li.castFlagNewface:after {
	content:"New";
	position:absolute;
	top:270px;
	left:4px;
	display:block;
	padding:0.2em 1.2em;
	font-size:13px;
	line-height:1em;
	color:#fff;
	background:#f0f;
	border:1px solid #999;
	font-family:"Georgia","メイリオ",sans-serif;
}



.castList li .castRank {
	position:relative;
	font-size:16px;
	line-height:1.6em;
	color:#fff;
	background: linear-gradient(#000,#555) #333;
	background: -moz-linear-gradient(center top, #000,#555);
	background: -webkit-gradient(linear, center top, center bottom, from(#000),to(#555));
	font-family:"CSerif",serif;
}
.castList li .castRank:after {
	content:"";
	position:absolute;
	top:1px;
	left:1px;
	display:block;
	width:0;
	height:0;
	border-style:solid;
	border-width:16px 16px 0 0;
	border-color:transparent;
}

.noCast {
	display:none;
}
.noCast.infoBox .infoBoxInner {
	text-align:center;
	height:320px;
	background:transparent;
}




@media screen and (max-width:799px) {
	.castList {
		padding:10px 10px 0;
	}
	.castList li {
		width:32.3%;
	}
	.castList li .castImage {
		height:195px;
	}
	.castList li .castSize span {
		display:block;
	}

	.castList li.castFlagNewface:after {
		top:196px;
	}

	.castList li .castName {
		font-size:14px;
	}
}







/* =========================================================================
	main section -> rank select
=========================================================================== */
#mainSection #castRankListSelect {
	position:relative;
	width:100%;
	padding:20px 10px;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:flex-start;
}
#mainSection #castRankListSelect li {
	flex-grow:1;
	margin:0 2px;
	padding:0.3em 0;
	font-weight:bold;
	font-size:16px;
	color:#ccc;
	text-shadow:0 0 3px #000;
	border:1px solid #00f;
	background:rgba(51,102,204,0.6);
	text-align:center;
	-webkit-transition:all 0.1s ease;
	transition:all 0.1s ease;
	cursor:pointer;
}
#mainSection #castRankListSelect li.on {
	color:#000;
	text-shadow:0 0 5px #fff;
	border:1px solid #fc6;
	background: linear-gradient(#663,#fc6,#630) #06c;
	background: -moz-linear-gradient(center top, #663,#fc6,#630);
	background: -webkit-gradient(linear, center top, center bottom, from(#663),color-stop(50%,#fc6), to(#630));
}
#mainSection #castRankListSelect li:not(.on):hover {
	color:#fff;
}
#mainSection #castRankListSelect:after {
	content:"";
	position:absolute;
	bottom:16px;
	left:0;
	right:0;
	display:block;
	height:5px;
	background:#fc6;
	border-top:2px solid #963;
	border-bottom:2px solid #630;
}

@media screen and (max-width:799px) {
	#mainSection #castRankListSelect li {
		font-size:13px;
		line-height:2em;
	}
}



/* =========================================================================
	main section -> schedule
=========================================================================== */
#dateList {
	width:100%;
	padding:20px 10px;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:flex-start;
}
#dateList li {
	width:13.5%;
	padding-bottom:3px;
	border-bottom:5px solid transparent;
}
#dateList li.week0 {
	color:#f00;
}
#dateList li.week6 {
	color:#00f;
}

#dateList li > span {
	display:block;
	padding:0.5em 0;
	border:1px solid #00f;
	background:rgba(255,255,255,0.6);
	text-align:center;
	-webkit-transition:all 0.3s ease;
	transition:all 0.3s ease;
	cursor:pointer;
}

#dateList li.on {
	background:rgba(255,255,255,0.8);
	border-bottom:5px solid #00f;
}
#dateList li:not(.on):hover {
	border-bottom:5px solid #06f;
}














/* =========================================================================
	main section -> system
=========================================================================== */
.systemBloc {
	width: 100%;
    padding: 20px 10px 0;
}

/* ================================================================
	main section -> system list
================================================================== */
.systemList {
	width:100%;
	border-collapse:separate;
	border-spacing:3px;
	box-shadow:0 0 5px #fff;
}
.systemList caption {
	text-align:left;
}
.systemList caption span {
	font-size:14px;
	padding-left:2em;
}
@media screen and (max-width:799px) {
	.systemList caption {
		height:45px;
	}
	.systemList caption span {
		display:block;
		padding-left:20px;
	}
}


/* =======================================================
	main section -> system -> price table
========================================================= */
table.systemList tr th ,
table.systemList tr td {
	padding:0.3em 0.5em;
	text-align:center;
	border-right:1px solid #ccc;
	border-bottom:1px solid #ccc;
}


/* =======================================================
	main section -> system -> etc
========================================================= */
.etcList.flex {
	flex-wrap:wrap;
	justify-content:center;
	padding:0 3px 3px;
}
.etcList.flex > * {
	width:33%;
	margin-top:3px;
	padding:0.3em 0.5em;
	border-bottom:1px solid #ccc;
	text-align:center;
}


/* =======================================================
	main section -> system -> play
========================================================= */
.playList.flex {
	flex-wrap:wrap;
	justify-content:space-between;
	padding:0 3px 3px;
}
.playList.flex li {
	width:calc(100% / 3 - 3px);
	margin-top:3px;
	padding:0.3em 0.5em;
	text-align:center;
	border-right:1px solid #ccc;
	border-bottom:1px solid #ccc;
}

/* =======================================================
	main section -> system -> option
========================================================= */
.optionList.flex {
	flex-wrap:wrap;
	justify-content:space-between;
	padding:0 3px 3px;
}
.optionList.flex > * {
	width:50%;
	margin-top:3px;
	padding:0.3em 0.5em;
	border-bottom:1px solid #ccc;
}
.optionList.flex > dt {
	padding-left:10em;
	text-align:left;
}
.optionList.flex > dd {
	padding-right:10em;
	text-align:right;
}

@media screen and (max-width:799px) {
	.optionList.flex > dt {
		width:65%;
		padding-left:3em;
	}
	.optionList.flex > dd {
		width:35%;
		padding-right:3em;
	}
}


/* =======================================================
	main section -> system -> notice
========================================================= */
.systemNotice {
	padding:3px;
}
.systemNotice .systemNoticeInner {
	padding:1em;
	background:rgba(255,255,255,0.8);
	line-height:1.6em;
}

aside#cardPayment a img {
	-webkit-transition:all 0.3s ease;
	transition:all 0.3s ease;
	box-shadow:0 0 5px #fff;
}
aside#cardPayment a:hover img {
	box-shadow:0 0 10px #00f;
}







/* =========================================================================
	main section -> howto list
=========================================================================== */
#howtoSelect.flex {
	padding:20px 0;
	justify-content:space-around;
}
#howtoSelect.flex li {
	position:relative;
	width:24%;
	font-size:16px;
	line-height:60px;
	color:#ccc;
	background:#000;
	font-family:"CSerif",serif;
	text-align:center;
	cursor:pointer;
}
#howtoSelect.flex li:before {
	content:"";
	position:absolute;
	top:1px;
	left:1px;
	display:block;
	width:0;
	height:0;
	border-style:solid;
	border-width:25px 25px 0 0;
	border-color:transparent;
	border-top-color:#999;
	-webkit-transition:all 0.3s ease;
	transition:all 0.3s ease;
}
#howtoSelect.flex li:not(.on):hover {
	color:#fff;
	text-shadow:0 0 5px #fff;
}
#howtoSelect.flex li.on {
	color:#fff;
	text-shadow:0 0 5px #fff;
}
#howtoSelect.flex li.on:before {
	border-top-color:#f9f;
}

#howtoSelect.flex li:after {
	content:"";
	position:absolute;
	bottom:3px;
	left:10px;
	right:10px;
	display:block;
	height:4px;
}
#howtoSelect.flex li.on:after {
	background:#f9f;
}
#howtoSelect.flex li:not(.on):hover:after {
	background:#fcf;
}



.howtoList {
	display:none;
	width:100%;
	padding:20px 10px 40px;
}
.howtoList.on {
	display:block;
}

.howtoList ul {
	width:100% !important;
}
.howtoList ul li.infoBox > div.infoBoxInner {
	line-height:1.8em;
}
.howtoList ul li.infoBox > div.infoBoxInner h4 {
	font-size:18px;
	font-weight:bold;
}


@media screen and (max-width:799px) {
	#howtoSelect.flex {
		flex-wrap:wrap;
	}
	#howtoSelect.flex li {
		width:48%;
		line-height:50px;
		margin-bottom:10px;
	}
}








/* =========================================================================
	main section -> hotel list
=========================================================================== */
.hotelList {
	width:100%;
	padding:20px 20px 0;
} 
.hotelList ul {
	width:100%;
	padding:5px 5px 0;
}
.hotelList ul li.flex {
	align-items:stretch;
	padding:3px;
}
.hotelList ul li.flex > div {
	margin:1px;
	padding:0.3em 0.5em;
	background:rgba(153,153,153,0.3);
	text-align:left;
}
.hotelList ul li.flex > div:nth-child(1) {
	width:30%;
}
.hotelList ul li.flex > div:nth-child(2) {
	width:20%;
	text-align:center;
}
.hotelList ul li.flex > div:nth-child(3) {
	width:50%;
}


@media screen and (max-width:799px) {
	.hotelList ul li.flex {
		flex-wrap:wrap;
	}
	.hotelList ul li.flex > div:nth-child(1) {
		width:calc(60% - 2px);
	}
	.hotelList ul li.flex > div:nth-child(2) {
		width:calc(40% - 2px);
		text-align:center;
	}
	.hotelList ul li.flex > div:nth-child(3) {
		width:calc(100% - 3px);
	}
}










/* =========================================================================
	main section -> link
=========================================================================== */
#aboutLink a {
	padding:0 0.5em;
	color:#00f;
}
#aboutLink a:hover {
	color:#f00;
}
#aboutLink dl.bannerList {
	padding:0 20px;
}
#aboutLink dl.bannerList dt {
	padding-top:20px;
}
#aboutLink dl.bannerList dd {
	padding-left:20px;
}

.linkList.flex {
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
}
.linkList.flex li.flex {
	width:auto;
	padding:10px;
	justify-content:center;
	align-items:center;
}
.linkList.flex li.flex > span:nth-child(2) {
	padding-left:2em;
	color:#333;
	font-size:12px;
}
.linkList.flex li.flex a {
	display:inline-block;
}
.linkList.flex li.flex a:hover {
	background:rgba(255,153,204,0.4);
	box-shadow:0 0 10px #f06;
}


@media screen and (max-width:799px) {
	.linkList.flex li.flex {
		width:100%;
		flex-direction:column;
	}
}





/* ===================================================================================
	main section -> profile
==================================================================================== */
#profileFrame.flex {
	padding:15px 10px 0;
	flex-direction:row-reverse;
	justify-content:space-between;
}
#profileFrame2 {
	padding-top:40px;
}
#profileFrame3 {
	padding-top:40px;
}

@media screen and (max-width:799px) {
	#profileHtmlBody main.inner > .flex {
		flex-direction:column-reverse;
	}
	#profileFrame.flex {
		flex-direction:column-reverse;
		justify-content:center;
		align-items:center;
	}
}




/* =================================================================
	main section -> section1 -> data
================================================================== */
#profileData {
	width:48%;
	padding:0.5em 1em;
	background:rgba(255,255,255,0.6);
}
#profileData h3 {
	padding:1em 0;
	color:#000;
	font-size:24px;
	font-weight:bold;
}
#profileData h3 span:nth-child(1) {
	padding-right:1em;
	font-size:16px;
	color:#f06;
}

#profileData h4 {
	font-weight:bold;
	font-size:18px;
	color:#f06;
}

@media screen and (max-width:799px) {
	#profileData {
		width:100%;
		padding-bottom:30px;
	}
}



/* ========================================================
	main section -> section1 -> data -> label
========================================================= */
#profileLabel {
	
}
#profileLabel span {
	position:relative;
	display:inline-block;
	padding:0.2em 1em;
	margin-right:0.5em;
	font-weight:bold;
	font-size:14px;
	line-height:1.4em;
	letter-spacing:1px;
	color:#fff;
	text-shadow:0 0 5px #000;
	background:#f0f;
	box-shadow:0 0 5px #fff;
	font-family:"CSerif",serif;
}
#profileLabel span#castRank {
	padding-left:1.2em;
	color:#fff;
	font-weight:normal;
	background: linear-gradient(#000,#333) #333;
	background: -moz-linear-gradient(center top, #000,#333);
	background: -webkit-gradient(linear, center top, center bottom, from(#000),to(#333));
}
#profileLabel span#castRank:after {
	content:"";
	position:absolute;
	top:1px;
	left:1px;
	display:block;
	width:0;
	height:0;
	border-style:solid;
	border-width:12px 12px 0 0;
	border-color:transparent;
}


/* ========================================================
	main section -> section1 -> data -> dl.flex
========================================================= */
#profileFrame dl.flex {
	flex-wrap:wrap;
	height:auto;
}
#profileFrame dl.flex dt {
	width:30%;
	padding-top:1.5em;
	padding-right:1em;
	text-align:right;
	color:#f06;
}
#profileFrame dl.flex dd {
	width:70%;
	padding-top:1.5em;
}



/* =================================================================
	main section -> section1 -> image
================================================================== */
#profileImage {
	width:50%;
}
@media all and (-ms-high-contrast:none) {
	#profileImage {
		height:100%;
	}
}

@media screen and (max-width:799px) {
	#profileImage {
		width:80%;
		padding-bottom:30px;
	}
}


/* ========================================================
	main section -> section1 -> image -> main
========================================================= */
#profileImage #profileMainImage {
	padding-bottom:10px;
}
#profileImage #profileMainImage img {
	border:1px solid #fff;
	box-shadow: 0 0 5px #fff;
	-webkit-transition:all 0.3s ease;
	transition:all 0.3s ease;
}



/* ========================================================
	main section -> section1 -> image -> thumbs
========================================================= */
#profileImage #profileThumbs.flex {
	align-items:center;
	height:auto;
}
#profileImage #profileThumbs.flex li {
	width:100%;
	padding:3px;
}
#profileImage #profileThumbs.flex li img {
	border:1px solid #666;
}
#profileImage #profileThumbs.flex li.on {
	cursor:pointer;
}
#profileImage #profileThumbs.flex li.on img {
	border:1px solid #fff;
	box-shadow: 0 0 5px #fff;
	-webkit-transition:all 0.3s ease;
	transition:all 0.3s ease;
}
#profileImage #profileThumbs.flex li.on:hover img {
	box-shadow: 0 0 10px #00f;
}




/* ===================================================================================
	profile gallery
==================================================================================== */
#profileFrame2.flex {
}
#profileFrame2.flex > * {
	width:50%;
	padding:10px;
}

#profileFrame2.flex .profileContent {
	padding:15px 5px 30px;
}
#profileFrame2.flex .profileContent .ready {
	padding:30px 0;
	text-align:center;
	background:rgba(255,255,255,0.6);
}

@media screen and (max-width:799px) {
	#profileFrame2.flex {
		flex-wrap:wrap;
	}
	#profileFrame2.flex > * {
		width:100%;
	}
	#profileFrame2.flex .profileContent {
		padding:10px 10px 30px;
	}
}





/* =================================================================
	main section -> section2 -> schedule
================================================================== */
#profileSchedule {
	padding:15px 10px 0;
}
#profileSchedule table {
	width:100%;
	border-collapse:collapse;
	background:rgba(255,255,255,0.6);
	border:1px solid #006;
}
#profileSchedule table tr > * {
	width:calc(100% / 7);
	padding:0.5em 0;
	font-size:14px;
	line-height:1.2em;
	text-align:center;
	border:1px dashed #006;
}
#profileSchedule table tr > td {
	font-size:13px;
}

#profileSchedule table tr > *.week6 {
	color:#00f;
}
#profileSchedule table tr > *.week0 {
	color:#f00;
}

@media screen and (max-width:799px) {
	#profileSchedule table tr > * {
		font-size:12px;
	}
	#profileSchedule table tr > td {
		font-size:12px;
	}

}








/* =========================================================================
	main section -> recruit layout
=========================================================================== */
#recruitLayout.flex {
	flex-wrap:wrap;
}

/* =========================================================================
	main section -> recruit block
=========================================================================== */
.recruitFrame {
	width:100%;
	padding:20px;
}
.recruitFrame .recruitInner {
	padding:20px;
	border:1px solid #666;
	border-radius:10px;
}

@media screen and (max-width:799px) {
	.recruitFrame .recruitInner {
		padding:10px;
	}
}


/* =========================================================================
	main section -> recruit block -> title
=========================================================================== */
.recruitFrame .recruitInner h3.flex {
	height:40px;
	line-height:40px;
	align-items:center;
	justify-content:flex-start;
}
.recruitFrame .recruitInner h3.flex > span {
	display:block;
	padding:5px;
	font-size:24px;
	font-weight:bold;
	color:#f06;
}
.recruitFrame .recruitInner h3.flex > span:nth-child(1):before {
	content:"■";
}




/* =========================================================================
	main section -> recruit block -> body
=========================================================================== */
.recruitInner > div.flex {
	padding:20px 20px 0;
}
.recruitInner > div.flex > div {
	width:100%;
}
.recruitInner > div.flex > div.recruitImage {
	text-align:center;
}

@media screen and (max-width:799px) {
	.recruitInner > div.flex {
		padding:10px 5px 0;
	}
}



/* =========================================================================
	main section -> recruit block -> image position
=========================================================================== */
@media screen and (min-width:800px) { 
	.recruitInner > div.flex.imagePcPos0 {
		flex-direction:row;
	}
	.recruitInner > div.flex.imagePcPos0 > div.recruitImage {
		padding-right:20px;
	}
	.recruitInner > div.flex.imagePcPos0 > div.recruitText {
	}

	.recruitInner > div.flex.imagePcPos1 {
		flex-direction:row-reverse;
	}
	.recruitInner > div.flex.imagePcPos1 > div.recruitImage {
		padding-left:20px;
	}
	.recruitInner > div.flex.imagePcPos1 > div.recruitText {
	}

	.recruitInner > div.flex.imagePcPos2 {
		flex-direction:column;
	}
	.recruitInner > div.flex.imagePcPos2 > div.recruitImage {
		padding-bottom:20px;
	}
	.recruitInner > div.flex.imagePcPos2 > div.recruitText {
	}

	.recruitInner > div.flex.imagePcPos3 {
		flex-direction:column-reverse;
	}
	.recruitInner > div.flex.imagePcPos3 > div.recruitImage {
		padding-top:20px;
	}
	.recruitInner > div.flex.imagePcPos3 > div.recruitText {
	}
}

@media screen and (max-width:799px) {
	.recruitInner > div.flex.imageSpPos0 {
		flex-direction:row;
	}
	.recruitInner > div.flex.imageSpPos0 > div.recruitImage {
		padding-right:20px;
	}
	.recruitInner > div.flex.imageSpPos0 > div.recruitText {
	}

	.recruitInner > div.flex.imageSpPos1 {
		flex-direction:row-reverse;
	}
	.recruitInner > div.flex.imageSpPos1 > div.recruitImage {
		padding-left:20px;
	}
	.recruitInner > div.flex.imageSpPos1 > div.recruitText {
	}

	.recruitInner > div.flex.imageSpPos2 {
		flex-direction:column;
	}
	.recruitInner > div.flex.imageSpPos2 > div.recruitImage {
		padding-bottom:20px;
	}
	.recruitInner > div.flex.imageSpPos2 > div.recruitText {
	}

	.recruitInner > div.flex.imageSpPos3 {
		flex-direction:column-reverse;
	}
	.recruitInner > div.flex.imageSpPos3 > div.recruitImage {
		padding-top:20px;
	}
	.recruitInner > div.flex.imageSpPos3 > div.recruitText {
	}
}


/* =========================================================================
	main section -> recruit block -> details
=========================================================================== */
#recruitDetails.flex {
	flex-wrap:wrap;
	padding:0 50px;
}
#recruitDetails.flex dt {
	width:25%;
	padding:0.5em 0;
	text-align:center;
	color:#f06;
	border-top:1px solid #ccc;
}
#recruitDetails.flex dd {
	width:75%;
	padding:0.5em 0;
	border-top:1px solid #ccc;
}
#recruitDetails.flex dt:nth-of-type(1) ,
#recruitDetails.flex dd:nth-of-type(1) {
	border-top:0 none;
}

@media screen and (max-width:799px) {
	#recruitDetails.flex {
		padding:0;
	}
}




.pcDiary {
	width:100%;
	margin:0 auto;
	text-align:center;
}
.pcDiary > * {
	display:inline-block;
}

.pcTwitter {
	width:100%;
	margin:0 auto;
}
.pcTwitter > * {
	width:100%;
	border:1px solid #5d9fef !important;
	border-radius:5px;
}







.spDiary {
/*
	width:400px;
*/
	margin:0 auto;
	padding:0 15px;
	text-align:center;
}
.spDiary > * {
	display:inline-block;
}

.spTwitter {
	width:400px;
	margin:0 auto;
}
.spTwitter > * {
	width:100%;
	border:1px solid #5d9fef !important;
	border-radius:5px;
}




/* ==============================================
	manzoku widget outframe
================================================ */
#manzoku_diary_light ,
#manzoku_diary_light #manzoku_widget ,
#manzoku_diary_light #manzoku_widget #diary ,
#manzoku_diary_light #manzoku_widget #diary > div,
#manzoku_diary_light #manzoku_widget #diary > div#middle ,
#manzoku_diary_light #manzoku_widget #diary > div#middle .row ,
#manzoku_diary_light #manzoku_widget #diary > div#middle .row .detail ,
#manzoku_diary_light #manzoku_widget #diary > div#middle .row .detail .detail_in_in ,
#manzoku_diary_light2 ,
#manzoku_diary_light2 #manzoku_widget ,
#manzoku_diary_light2 #manzoku_widget #diary ,
#manzoku_diary_light2 #manzoku_widget #diary > div#middle ,
#manzoku_diary_light2 #manzoku_widget #diary > div#middle .row,
#manzoku_diary_light2 #manzoku_widget #diary > div#middle .row .detail ,
#manzoku_diary_light2 #manzoku_widget #diary > div#middle .row .detail .detail_in_in {
	display:block;
	width:100% !important;
}
#manzoku_diary_light #manzoku_widget #diary > div,
#manzoku_diary_light2 #manzoku_widget #diary > div {
	background:#f4f4f4 !important;
	border:1px solid #ccc;
}


#manzoku_diary_light #manzoku_widget #diary .detail ,
#manzoku_diary_light2 #manzoku_widget #diary .detail {
	background:transparent !important;
}


#manzoku_diary_light #manzoku_widget #diary ,
#manzoku_diary_light2 #manzoku_widget #diary {
	font-family:"メイリオ",sans-serif !important;
}
@media screen and (max-width:799px) { 
	#manzoku_diary_light #manzoku_widget #diary ,
	#manzoku_diary_light2 #manzoku_widget #diary {
		font-size:16px !important;
		line-height:1.4em !important;
	}
}

/* ==============================================
	manzoku widget top(header)
================================================ */
#manzoku_diary_light #manzoku_widget #diary #top ,
#manzoku_diary_light2 #manzoku_widget #diary #top {
	text-shadow:0 0 5px #fff !important;
	width: 100% !important;
}
#manzoku_diary_light #manzoku_widget #diary #top .description ,
#manzoku_diary_light2 #manzoku_widget #diary #top .description {
	padding-top:0;
}
#manzoku_diary_light #manzoku_widget #diary #top .description:before ,
#manzoku_diary_light2 #manzoku_widget #diary #top .description:before {
	content:"写メ日記";
	display:block;
	color:#f09;
	font-size:18px;
	margin-top:-32px;
}

#manzoku_diary_light #manzoku_widget #diary #top .list_button ,
#manzoku_diary_light2 #manzoku_widget #diary #top .list_button {
	color:#000 !important;
	font-size:85% !important;
	height:30px !important;
}

/* ==============================================
	manzoku widget middle(body) frame(block)
================================================ */
#manzoku_diary_light #manzoku_widget #diary .row ,
#manzoku_diary_light2 #manzoku_widget #diary .row {
	-webkit-transition:all 0.3s ease;
	transition:all 0.3s ease;
	border-bottom:1px #ccc !important;
}
#manzoku_diary_light #manzoku_widget #diary .row:nth-of-type(5) ,
#manzoku_diary_light2 #manzoku_widget #diary .row:nth-of-type(5) {
	border-bottom:0px none !important;
}
#manzoku_diary_light #manzoku_widget #diary .row:nth-of-type(n+6) ,
#manzoku_diary_light2 #manzoku_widget #diary .row:nth-of-type(n+6) {
	display:none;
}
@media screen and (min-width:800px) { 
	#manzoku_diary_light #manzoku_widget #diary .row:hover ,
	#manzoku_diary_light2 #manzoku_widget #diary .row:hover {
		opacity:initial !important;
		background-color:#ddd !important;
	}
	#manzoku_diary_light #manzoku_widget #diary .row img:hover ,
	#manzoku_diary_light2 #manzoku_widget #diary .row img:hover {
		box-shadow:none !important;
	}
}

/* ==============================================
	manzoku widget middle(body) frame(inner)
================================================ */
#manzoku_diary_light #manzoku_widget #diary .detail ,
#manzoku_diary_light2 #manzoku_widget #diary .detail {
	padding:5px !important;
}
#manzoku_diary_light #manzoku_widget #diary .detail_in ,
#manzoku_diary_light2 #manzoku_widget #diary .detail_in {
	background:none !important;
}

#manzoku_diary_light #manzoku_widget #diary .detail_in_in ,
#manzoku_diary_light2 #manzoku_widget #diary .detail_in_in {
	width:100% !important;
	display:flex !important;
	justify-content:space-around;
	background:transparent !important;
}
/* ==============================================
	manzoku widget middle(body) frame -> image
================================================ */
#manzoku_diary_light #manzoku_widget #diary .detail_in_in .staff_image ,
#manzoku_diary_light2 #manzoku_widget #diary .detail_in_in .staff_image {
	width:90px !important;
	padding:0px 5px 5px !important;
}
#manzoku_diary_light #manzoku_widget #diary .detail_in_in .staff_image a ,
#manzoku_diary_light2 #manzoku_widget #diary .detail_in_in .staff_image a {
	display:block;
	widtt:100%;
	height:100%;
	text-align:center;
}
#manzoku_diary_light #manzoku_widget #diary .detail_in_in .staff_image a img ,
#manzoku_diary_light2 #manzoku_widget #diary .detail_in_in .staff_image a img {
	width:90% !important;
	height:auto !important;
	max-height:none !important;
}
/* ==============================================
	manzoku widget middle(body) frame -> info
================================================ */
#manzoku_diary_light #manzoku_widget #diary .detail_in_in .staff_detail ,
#manzoku_diary_light2 #manzoku_widget #diary .detail_in_in .staff_detail {
	width:calc(96% - 90px) !important;
	background:#fff;
}
@media screen and (max-width:799px) { 
	#manzoku_diary_light #manzoku_widget #diary .detail_in_in .staff_detail .staff_status ,
	#manzoku_diary_light2 #manzoku_widget #diary .detail_in_in .staff_detail .staff_status {
		color:#666 !important;
	}
}

/* ==============================================
	manzoku widget bottom(footer)
================================================ */
#manzoku_diary_light #manzoku_widget #diary #bottom ,
#manzoku_diary_light2 #manzoku_widget #diary #bottom {
	text-align:right !important;
}






.profileContent > iframe {
	border:1px solid #5d9fef !important;
	border-radius:5px;
}

.profileContent > #profDiaryFrame > iframe {
	border:1px solid #333 !important;
}


/* ==============================================
	profile > blog banner
================================================ */
#profBlogBanner {
	padding-top:40px;
	text-align:center;
}
#profBlogBanner a img {
	border:1px solid #f6c;
	box-shadow:0 0 5px #fff;
	-webkit-transition:all 0.3s ease;
	transition:all 0.3s ease;
}
#profBlogBanner a:hover img {
	border:1px solid #fff;
	box-shadow:0 0 10px #f06;
}



/* ==============================================
	form > image upload
================================================ */
#form .formImage {
	padding:0.2em 0.5em;
	background:#fff;
	border:1px solid #ccc;
	border-radius:3px;
	text-align:center;
}
#form .formImage input {
	max-width:100%;
	padding:0;
	border:0 none;
}

#form .photoNotes {
	padding-bottom:0.5em;
	line-height:1.6;
	font-size:85%;
	color:#00f;
}

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