@charset "utf-8";

/* ================================================
 base
--------------------------------------------------- */
html {
	height: 100%;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}
body {
	height: 100%;
	margin: 0; padding: 0;
	font-size: 0; line-height: 1;
	background-color: #d8478a;
}
h1,h2,h3,h4,h5,h6,ul,li,p,dl,dt,dd {margin: 0; padding: 0;}
img {vertical-align: bottom;}
a:link, a:visited {color: #000; text-decoration: underline;}
a:hover, a:active {color: #f34200; text-decoration: underline;}
a {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-box-shadow: none;
	box-shadow: none;
	outline: none;
}

/*=================================================
 layout
--------------------------------------------------- */
body{
	background-image: url(../image/bg_sp.png);
	background-position: center top;
	background-repeat: repeat-y;
	background-size: 100% auto;
	overflow: hidden;
}
@media only screen and (min-width:721px) {
	body{
		background-image: url(../image/bg_pc.png);
		background-position: center top;
		background-repeat:repeat;
		background-size: auto;
	}
}
#wrap{
	width: 100vw; height: 100vh;
	overflow: hidden;
}
.container{
	width: 720px; height: 1080px;
	margin: auto;
	position: absolute; left: 0; top: 0; right: 0; bottom: 0;
}
#wrap .container{
	width: 720px; height: 1080px;
	margin: auto;
	position: absolute; left: 0; top: 0; right: 0; bottom: 0;
	display: none;
}
#padding{
	width: 100%; height: 100%;
	box-sizing: border-box;
	padding: 10px;
}
#main{
	width: 100%; height: 100%;
	position: relative;
}
#mellchan{
	width: 100%; height: 100%;
  position: absolute; left: 0; top: 0;
}
#mellchan svg{
	width: 100%; height: auto;
}
#outline{
	width: 100%; height: 100%;
	position: absolute; left: 0; top: 0;
}
#outline img{
	width: 100%; height: auto;
}
#hitarea{
	width: 100%; height: 100%;
	position: absolute; left: 0; top: 0;
	opacity: 0;
}
.hitarea,
.hitarea:focus,
.hitarea:active{
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-box-shadow: none;
	box-shadow: none;
	outline: none;
}
#logo{
	width: 23%; height: auto;
	position: absolute; left: 0; top: 0;
}
#btn_reset{
	width: 20%; height: auto;
	position: absolute; right: 2.86%; bottom: 2.79%;
	cursor: pointer;
}
#btn_palette{
	width: 22%; height: auto;
	position: absolute; right: 0; top: 0;
	cursor: pointer;
}
#btn_color{
	width: 11.14%;
	position: absolute; right: 7.14%; top: 17.92%;
	cursor: pointer;
}
#btn_color img{
	width: 100%; height: auto;
	position: relative; z-index: 2;
}
#btn_color::before{
	width: 94%; height: 94%;
	position: absolute; right: 3%; top: 3%; z-index: 1;
	content: '';
	display: block;
	border-radius: 50%;
	background-color: #ff0000;
}

/*=================================================
 palette
--------------------------------------------------- */
#overlay{
	width: 100vw; height: 100vh;
	position: absolute; left: 0; top: 0; z-index: 100;
	background-color: rgba(255,218,232,0.95);
	display: none;
}
#palette{
	width: 100vw; height: 100vh;
	position: absolute; left: 0; top: 0; z-index: 200;
	display: none;
}
.cp-open #overlay,
.cp-open #palette{
	display: block;
}
#btn_close{
	width: 100%; height: 23.3%;
	text-align: right;
}
#btn_close img{
	width: 27.5%; height: auto;
	cursor: pointer;
}
#palette ul{
	width: 77.78%; height: 52.83%;
	margin: 0 auto;
	position: relative;
}
#palette li{
	width: 25%; height: 25%;
	display: inline-block; vertical-align: top;
	position: relative;
	list-style: none;
	cursor: pointer;
}
#palette li::before{
	width: 82%; height: 82%;
	position: absolute; right: 9%; top: 9%; z-index: 300;
	content: '';
	display: block;
	border-radius: 50%;
}
#palette li::after{
	width: 100%; height: 100%;
	position: absolute; right: 0; top: 0; z-index: 400;
	content: '';
	display: block;
	background-image: url(..//image/palette_color_off.png);
	background-size: 100% auto;
}
#palette_cap{
	width: 100%;
	position: absolute; left: 0; bottom: 6.79%;
}
#palette_cap img{
	width: 100%; height: auto;
}

/*=================================================
 color
--------------------------------------------------- */
#btn_color.choice1::before{background-color: #ff0000;}
#btn_color.choice2::before{background-color: #ff2bd1;}
#btn_color.choice3::before{background-color: #ff82d8;}
#btn_color.choice4::before{background-color: #ffc200;}
#btn_color.choice5::before{background-color: #ffff00;}
#btn_color.choice6::before{background-color: #0064e0;}
#btn_color.choice7::before{background-color: #1ebaf0;}
#btn_color.choice8::before{background-color: #96e4ff;}
#btn_color.choice9::before{background-color: #009245;}
#btn_color.choice10::before{background-color: #9bd400;}
#btn_color.choice11::before{background-color: #7f47dd;}
#btn_color.choice12::before{background-color: #b899ec;}
#btn_color.choice13::before{background-color: #ffe1cd;}
#btn_color.choice14::before{background-color: #c99c81;}
#btn_color.choice15::before{background-color: #333333;}
#btn_color.choice16::before{background-color: #ffffff;}

#palette.choice1 li:nth-child(1)::after,
#palette.choice2 li:nth-child(2)::after,
#palette.choice3 li:nth-child(3)::after,
#palette.choice4 li:nth-child(4)::after,
#palette.choice5 li:nth-child(5)::after,
#palette.choice6 li:nth-child(6)::after,
#palette.choice7 li:nth-child(7)::after,
#palette.choice8 li:nth-child(8)::after,
#palette.choice9 li:nth-child(9)::after,
#palette.choice10 li:nth-child(10)::after,
#palette.choice11 li:nth-child(11)::after,
#palette.choice12 li:nth-child(12)::after,
#palette.choice13 li:nth-child(13)::after,
#palette.choice14 li:nth-child(14)::after,
#palette.choice15 li:nth-child(15)::after,
#palette.choice16 li:nth-child(16)::after{
	background-image: url(..//image/palette_color_on.png);
}

#palette li:nth-child(1)::before{background-color: #ff0000;}
#palette li:nth-child(2)::before{background-color: #ff2bd1;}
#palette li:nth-child(3)::before{background-color: #ff82d8;}
#palette li:nth-child(4)::before{background-color: #ffc200;}
#palette li:nth-child(5)::before{background-color: #ffff00;}
#palette li:nth-child(6)::before{background-color: #0064e0;}
#palette li:nth-child(7)::before{background-color: #1ebaf0;}
#palette li:nth-child(8)::before{background-color: #96e4ff;}
#palette li:nth-child(9)::before{background-color: #009245;}
#palette li:nth-child(10)::before{background-color: #9bd400;}
#palette li:nth-child(11)::before{background-color: #7f47dd;}
#palette li:nth-child(12)::before{background-color: #b899ec;}
#palette li:nth-child(13)::before{background-color: #ffe1cd;}
#palette li:nth-child(14)::before{background-color: #c99c81;}
#palette li:nth-child(15)::before{background-color: #333333;}
#palette li:nth-child(16)::before{background-color: #ffffff;}

/* ================================================
 layer
--------------------------------------------------- */
.border{fill: #ffadcb;}
.layer {fill: #fff;}
.color1 .layer{fill: #ff0000;}
.color2 .layer{fill: #ff2bd1;}
.color3 .layer{fill: #ff82d8;}
.color4 .layer{fill: #ffc200;}
.color5 .layer{fill: #ffff00;}
.color6 .layer{fill: #0064e0;}
.color7 .layer{fill: #1ebaf0;}
.color8 .layer{fill: #96e4ff;}
.color9 .layer{fill: #009245;}
.color10 .layer{fill: #9bd400;}
.color11 .layer{fill: #7f47dd;}
.color12 .layer{fill: #b899ec;}
.color13 .layer{fill: #ffe1cd;}
.color14 .layer{fill: #c99c81;}
.color15 .layer{fill: #333333;}
.color16 .layer{fill: #ffffff;}