/*----------------------------------------------------
|
|	STYLE
|	--------------------------------------------------
|	STYLE基本デザイン CSS SETTING
|	--------------------------------------------------
|	AUTHOR	:
|
-----------------------------------------------------*/

:root {

    --tittle-bg-color : #f931d0;
    --bg-color :  #f9dbe7;
    --grid-color : #bbb;
    --grid-image :
        linear-gradient(var(--grid-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
    --main-contents-area-color : none;
    --main-contents-overflow-x : hidden;
    --main-contents-overflow-y : hidden;

    --main-area-width : 58%;
    --border-px : 2px;
    --border-rad-px: 0px;
    --main-width : 100%;
    --main-height : 100%;
    --main-margin : 0 0 0 0;

}

[data-page-type = "home"] {
    --bg-color : #f9dbe7;

}

[data-page-type = "character"] {
    --bg-color : #e3e0d1;
    --tittle-bg-color : #e5e5e5;
}

[data-page-type = "albumIndex"] {
     --bg-color : #dedfe3;
     --main-contents-area-color : #e4dbfa;
}

[data-page-type = "infomation"] {
    --main-contents-area-color : #ffffff;
    --main-contents-overflow-y: auto;
    --tittle-bg-color : #edeef2;
     --bg-color :  #b1e1de;
}

[data-page-type = "news"] {
    --main-contents-area-color : #ffffff;
    --main-contents-overflow-y: auto;
    --tittle-bg-color : #edeef2;
     --bg-color :  #e0d7f4;
}


[data-main-container-color = "shop"] {
    --main-contents-area-color : #f0f0f0;
}



[data-tittle-color = "deepGray"] {
    --tittle-bg-color : #c5c6cb;
}


[data-grid-color = "blueGray"] {
    --bg-color : #6587aa;
    --grid-color : #5c7d9e;
}


[data-main-area-width = "maxSize"] {
    --main-area-width : 100%
}

[data-box-type = "album"] {
    --main-contents-area-color : #e4dbfa;
    --main-height : 90%;
    --box-padding : 0%;
}

/***********************************
**
**	WIDTH STYLE
**
***********************************/

.width10{
	width: 10px;
}

.width20{
	width: 20px;
}

.width30{
	width: 30px;
}

.width40{
	width: 40px;
}

.width50{
	width: 50px;
}

.width60{
	width: 60px;
}

.width70{
	width: 70px;
}

.width80{
	width: 80px;
}

.width90{
	width: 90px;
}

.width100{
	width: 100px;
}

.width110{
	width: 110px;
}

.width120{
	width: 120px;
}

.width130{
	width: 130px;
}

.width140{
	width: 140px;
}

.width150{
	width: 150px;
}

.width160{
	width: 160px;
}

.width170{
	width: 170px;
}

.width180{
	width: 180px;
}

.width190{
	width: 190px;
}

.width200{
	width: 200px;
}

.width250{
	width: 250px;
}

.width300{
	width: 300px;
}

.width350{
	width: 350px;
}

.width400{
	width: 400px;
}

.width10per{
	width: 10%;
}

.width20per{
	width: 20%;
}

.width30per{
	width: 30%;
}

.width40per{
	width: 40%;
}

.width50per{
	width: 50%;
}

.width60per{
	width: 60%;
}

.width70per{
	width: 70%;
}

.width80per{
	width: 80%;
}

.width90per{
	width: 90%;
}

.width100per{
	width: 100%;
}



/***********************************
**
**	MARGIN STYLE
**
***********************************/

.margin5{
	height: 5px;
	margin: none;
	padding: none;
	border: 0px;
	display: block;
}

.margin10{
	height: 10px;
	margin: none;
	padding: none;
	border: 0px;
	display: block;
}

.margin15{
	height: 15px;
	margin: none;
	padding: none;
	border: 0px;
	display: block;
}

.margin20{
	height: 20px;
	margin: none;
	padding: none;
	border: 0px;
	display: block;
}

.margin25{
	height: 25px;
	margin: none;
	padding: none;
	border: 0px;
	display: block;
}

.margin30{
	height: 30px;
	margin: none;
	padding: none;
	border: 0px;
	display: block;
}

.margin35{
	height: 35px;
	margin: none;
	padding: none;
	border: 0px;
	display: block;
}

.margin40{
	height: 40px;
	margin: none;
	padding: none;
	border: 0px;
	display: block;
}

.margin50{
	height: 50px;
	margin: none;
	padding: none;
	border: 0px;
	display: block;
}

.margin100{
	height: 100px;
	margin: none;
	padding: none;
	border: 0px;
	display: block;
}

.margin150{
	height: 150px;
	margin: none;
	padding: none;
	border: 0px;
	display: block;
}

.margin200{
	height: 200px;
	margin: none;
	padding: none;
	border: 0px;
	display: block;
}

.margin250{
	height: 250px;
	margin: none;
	padding: none;
	border: 0px;
	display: block;
}

.margin300{
	height: 300px;
	margin: none;
	padding: none;
	border: 0px;
	display: block;
}



/***********************************
**
**	BORDER STYLE
**
***********************************/

.borderTop{
	margin-top: 5px;
	padding-top: 5px;
	border-top: 1px solid #EEEEEE;
	clear: both;
}

.borderLeft{
	border-left: 1px solid #EEEEEE;
}

.borderRight{
	border-right: 1px solid #EEEEEE;
}

.borderBottom{
	margin-bottom: 5px;
	padding-bottom: 5px;
	border-bottom: 1px solid #EEEEEE;
	clear: both;
}



/***********************************
**
**	BACKGROUND COLOR
**
***********************************/

.bgBlue{
	background: linear-gradient(#0099FF, #0099FF);
	background-color: #0099FF;
}

.bgPink{
	background: linear-gradient(#FF3366, #FF3366);
	background-color: #FF3366;
}

.bgBlack{
	background: linear-gradient(#000000, #000000);
	background-color: #000000;
}

.bgWhite{
	background: linear-gradient(#FFFFFF, #FFFFFF);
	background-color: #FFFFFF;
}

.bgGray{
	background: linear-gradient(#999999, #999999);
	background-color: #999999;
}

.bgLightGray{
	background: linear-gradient(#EEEEEE, #EEEEEE);
	background-color: #EEEEEE;
}

.bgRed{
	background: linear-gradient(#FF0000, #FF0000);
	background-color: #FF0000;
}

.bgGreen{
	background: linear-gradient(#33CC66, #33CC66);
	background-color: #33CC66;
}

.bgOrange{
	background: linear-gradient(#FF9933, #FF9933);
	background-color: #FF9933;
}

.bgTotal{
	background: linear-gradient(#EEFFEE, #EEFFEE);
	background-color: #EEFFEE;
}

.bg1{
	background: linear-gradient(#0099FF, #0099FF);
	background-color: #0099FF;
}

.bg2{
	background: linear-gradient(#FF3366, #FF3366);
	background-color: #FF3366;
}

.bg3{
	background: linear-gradient(#555555, #555555);
	background-color: #555555;
}



/***********************************
**
**	FONT STYLE
**
***********************************/

/* COLOR */
.red{
	color: #FF0000;
}

.pink{
	color: #FF3366;
}

.blue{
	color: #0099FF;
}

.orange{
	color: #FF9966;
}

.green{
	color: #33CC66;
}

.yellow{
	color: #FFFF00;
}

.black{
	color: #000000;
}

.gray{
	color: #555555;
}

.lightGray{
	color: #999999;
}

.white{
	color: #FFFFFF;
}

/* BOLD */
.bold{
	font-weight: bold;
}

/* LARGE */
.large{
	font-size: 16px;
}

/* MIDDLE */
.middle{
	font-size: 14px;
}

/* NORMAL */
.normal{
	font-size: 12px;
	font-weight: normal;
}

/* SMALL */
.small{
	font-size: 10px;
}

.noBorder{
	border: 0px;
	border: none;
}

/* ALIGN */
.textLeft{
	text-align: left;
}

.textCenter{
	text-align: center;
}

.textRight{
	text-align: right;
}

.verticalTop{
	vertical-align: top;
}

.verticalMiddel{
	vertical-align: middle;
}

.verticalBottom{
	vertical-align: bottom;
}

.textComment{
	margin: 5px 0px 5px 0px;
	padding: 10px;
}

/* FLOAT */
.floatLeft{
	float: left;
}

.floatRight{
	float: right;
}

.must{
	color: #FF0000;
	margin: 0 5px 0 5px;
}

.notice{
	color: #999999;
}

.error{
	color: #FF0000;
	font-weight: bold;
}

/* CALENDAR */
.day{
	font-size: 16px;
	font-weight: bold;
}

/* SEX */
.color1{
	color: #0099FF;
}
/* 女性　*/
.color2{
	color: #FF3366;
}

.color3{
	color: #555555;
}

.blackColor{
	color: #FF3366;
}

.blinking{
  animation: flash 3s linear infinite;
}

@keyframes flash {
  50%,100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

.domainField{
	background-color: #FFFFFF;
	font-size: 140%;
	color: #FF3366;
	margin-right: 5px;
	padding: 5px;
	border: 1px solid #EEEEEE;
	border-radius: 10px;
	display: inline-block;
}