@charset "utf-8";
/* CSS Document */

*{
	margin: 0;
	padding: 0;
}
	
	/*ラジオボタン*/
	input[type="radio"]{
		display:none;
	}
	input[type="button"]{
		display: none;
	}
	/*重ねレイヤー*/
	#layerback{
		position: relative;
		top: 0;
		left: 50%;
		margin-top: 0;
		transform: translateX(-50%);
    	-webkit-transform: translateX(-50%);
    	-ms-transform: translateX(-50%);
		z-index: 0;
	}
	#layerbackhair,#layerear,#layerbody,#layerbrow,#layerlefteye,#layerrighteye,#layernose,#layerinner,#layertops,#layerouter,#layerarrange1,#layerarrange2,#layeranimal1,#layeranimal2,#layermouth,#layerlefthair,#layerrighthair,#layerfronthair,#layerneck,#layer2,#layerhorn1,#layerhorn2,#layermask1,#layermask2,#layerrighthand,#layerlefthand{
		position: absolute;
		top: 0;
		left: 50%;
		margin-top: 10px;
		transform: translateX(-50%);
    	-webkit-transform: translateX(-50%);
    	-ms-transform: translateX(-50%);
	}

	#base:checked ~ .panel_area #p_base{
		display:block;
	}
	#ear:checked ~ .panel_area #p_ear{
		display:block;
	}
	#brow:checked ~ .panel_area #p_brow{
		display:block;
	}
	#left:checked ~ .panel_area #p_left{
		display:block;
	}
	#right:checked ~ .panel_area #p_right{
		display:block;
	}
	#nose:checked ~ .panel_area #p_nose{
		display:block;
	}
	#mouth:checked ~ .panel_area #p_mouth{
		display:block;
	}
	#front:checked ~ .panel_area #p_front{
		display:block;
	}
	#sideR:checked ~ .panel_area #p_sideR{
		display:block;
	}
	#sideL:checked ~ .panel_area #p_sideL{
		display:block;
	}
	#back:checked ~ .panel_area #p_back{
		display:block;
	}
	#arrange1:checked ~ .panel_area #p_arrange1{
		display:block;
	}
	#arrange2:checked ~ .panel_area #p_arrange2{
		display:block;
	}
	#animal:checked ~ .panel_area #p_animal{
		display:block;
	}
	#horn:checked ~ .panel_area #p_horn{
		display:block;
	}
	#inner:checked ~ .panel_area #p_inner{
		display:block;
	}
	#tops:checked ~ .panel_area #p_tops{
		display:block;
	}
	#outer:checked ~ .panel_area #p_outer{
		display:block;
	}
	#neck:checked ~ .panel_area #p_neck{
		display:block;
	}
	#mask1:checked ~ .panel_area #p_mask1{
		display: block;
	}
	#mask2:checked ~ .panel_area #p_mask2{
		display: block;
	}
	#lefthand:checked ~ .panel_area #p_handL{
		display: block;
	}
	#righthand:checked ~ .panel_area #p_handR{
		display: block;
	}
	
	/*スクロールバーのデザイン*/
	/*スクロールバーの太さ*/
	::-webkit-scrollbar{
		height: 10px;
		width: 10px;
	}
	/*スクロールバーの色と形*/
	::-webkit-scrollbar-thumb {
		/*縦方向にグラデーション*/
  		background: linear-gradient(0deg,dimgray,black);
  		border-radius: 5px;
	}
	.tab_area::-webkit-scrollbar-thumb {
		/*横方向にグラデーション*/
  		background: linear-gradient(90deg,black,dimgray);
  		border-radius: 5px;
	}
	.color_area::-webkit-scrollbar-thumb {
		/*横方向にグラデーション*/
  		background: linear-gradient(90deg,black,dimgray);
  		border-radius: 5px;
	}
	
footer{
		height: 60px;
		background: #1f1f1f;
		text-align: center;
	}

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

●ＰＣ用CSS 画面の横幅が641px以上のとき

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

@media screen and (min-width : 641px) {
	.block{
		width: 50px;
		height: 50px;
		margin: 7px;
		border: solid 1px dimgray;
	}
	.mobile_nav{
		display: none;
	}
	/*リザルト画面*/
	.result{
		width: 100vw;
		text-align: center;
		position: fixed;
		top: 100px;
		background-color: white;
	}
	.result_img{
		width: 600px;
		height: 600px;
		display: block;
		transition: all 0.4s ease;
		border: solid 2px dimgray;
	}
	.result_img.isSmall{
		width: 350px!important;
		height: 350px!important;
	}
	.pic{
		width: 600px;
		height: 600px;
		margin: 10px auto;
		border-color: red;
		display: inline-block;
		transition: all 0.4s ease;
	}
	.pic.isSmall{
		width: 350px!important;
		height: 350px!important;
	}
	.download{
		position: absolute;
		top: 520px; 
		right: 10px;
		display: block;
		width: 84px;
		margin: 7px;
		z-index: 10;
		transition: all 0.4s ease;
	}
	.download.isSmall{
		width: 72px!important;
		top: -80px!important;
	}
	.download:hover{
		cursor: pointer;
	}
	.download:active{
		transition:none;
		bottom: -5px;
	}
	
	
	/*ヘッダーの編集*/
	header{
		position: fixed;
		height: 100px;
		background-color: #1f1f1f;
		display: flex;
		top: 0;
		width: 100vw;
		justify-content: space-around;
	}

	/*ロゴ*/
	.Logo{
		width: 200px;
		margin: 5px 5px 5px 20%;
	}
	/*ナビ*/
	.PC_nav{
		margin-top: 60px;
		margin-right: 10%;
	
	} 
	.PC_nav ul{
		display: flex;
		align-items: center;
		list-style-type: none;
		margin: 0 0 0 auto;
		width: 100%;
	}
	.PC_nav li{
		padding: 0 5px;
	}

	.PC_nav li a{
		height: 60px;
		display:block;
		line-height: 60px;
		color: white;
		text-decoration: none;
		font-size: 16px;
	}
	
	/*位置合わせ用div*/
	.none{
		width: 100%;
		/*ヘッダーの高さ+リザルト画像の高さ+リザルト画像のマージン*/
		height: 750px;
	}
	
	/*タブ*/
	.tab_wrap{ 
		align-content: center;
		width: 95vw;
		margin: 0 auto;
		flex-wrap: wrap;
		overflow-x: hidden;
	}	

	/*パーツアイコンのグループ*/
	.tab_panel{
		/*初期値設定　表示させない*/
		display: none;
	}
	.tab_area{
		margin: 0 auto;
		padding: 10px 6% 10px 7px;
		box-sizing: border-box;
		width: 100vw;
		overflow-x: scroll;
		background-color: darkgray;
		display: flex;
	}
	.tab_area label{
		width: 96px;
		padding: 0 5px;
		cursor:pointer; 
		transition:ease 0.2s opacity;
	}
	.tab_area label:active{
		position: relative;
		top: 3px;
	}
	.panel_area{
		width: 100vw;
		justify-content: center;
	}
	/*パーツアイコン*/
	.parts_icon{
		width: 96px;
	}
	
	/*パーツカラー*/
	.color_area{
		width: 100vw;
		overflow-x: scroll;
		background-color: white;
		display: flex;
		align-items: center;
	}
	.color_logo{
		width: 80px;
		margin: 7px;
	}
	.block:hover{
		cursor: pointer;
		opacity: 0.5;
	}
	.block:active{
		position: relative;
		top: 3px;
	}
	/*瞳パーツ*/
	.pattern{
		display: flex;
		width: 100vw;
		overflow-x: scroll;
		justify-content: center;
		background-color: darkgray;
	}
	.i-icon{
		width: 84px;
		margin: 7px;
	}
	.i-icon:hover{
		cursor: pointer;
	}
	.i-icon:active{
		position: relative;
		top: 3px;
	}
	
	/*パーツイラスト*/
	.parts_img{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		height: 400px;
		overflow-y: scroll;
		background-color: darkgray;
		width: 100vw;
	}
	.parts{
		width: 160px;
		margin: 7px;
		background-color: white;
		border: solid 3px dimgray;
		border-radius: 5px;
	}
	.parts:hover{
		cursor: pointer;
	}
	.parts:active{
		position: relative;
		top: 3px;
	}


	/*フッダー*/
	
	
	.PC_footer{
		margin-top: 7px;
		margin-right: 19%;
	}

	footer ul{
		padding-top: 7px;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		list-style-type: none;
		margin: 0 0 0 auto;
		width: 100%;
	}
	
	footer li{
		padding: 0 5px;
	}
	
	footer li a{
		text-decoration: none;
		color: white;
		font-size: 14px;
	}

	small{
		color: white;
		font-size: 8px;
	}
}

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

●スマホ用CSS  画面の横幅が640px以下のとき

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

@media screen and (max-width:640px){
	.block{
		flex-shrink: 0;
		width: 40px;
		height: 40px;
		margin: 3px;
		border: solid 1px dimgray;
	}
	.PC_nav{
		display: none;
	}
	
	body{
		width: 100vw;
		overflow-x: hidden;
	}
	
	/*リザルト画面*/
	.result{
		text-align: center;
		position: fixed;
		top: 80px;
		width: 100vw;
		background-color: white;
		z-index:0;
		height: 37%;
		transition: all 0.4s ease;
	}
	.result.isSmall{
		height: 35%!important;
	}
	.result_img{
		width: 70vw;
		height: auto;
		display: block;
		border: solid 2px dimgray;
		transition: all 0.4s ease;
	}
	
	.result_img.isSmall{
		width: 60vw!important;
		height: auto;
	}
	.pic{
		width: 70%;
		height: auto;
		margin: 10px auto;
	}
	.pic.isSmall{
		width: 60%!important;
		height: auto;
	}
	.download{
		position: absolute;
		top: 0; 
		right: 0;
		display: block;
		width: 10%;
		margin: 7px;
		z-index: 100;
		transition: all 0.4s ease;
	}
	.download.isSmall{
		width: 5%!important;
		top: -80px!important;
	}
	.download:hover{
		cursor: pointer;
	}
	.download:active{
		transition: none;
		top: 5px;
	}
	
	header{
		position: fixed;
		top: 0px;
		width: 100vw;
		height: 80px;
		background-color: #1f1f1f;
		display: flex;
		justify-content: space-between;
	}

	/*ロゴ*/
	.Logo{
		width: 120px;
		margin: 5px 5px 5px 20%;
	}
	/*ナビ*/
	.mobile_nav{
		padding-top: 10%;
		margin-right: 10%;
		/*ハンバーガーナビを開いた時、最前面に表示される*/
		position: absolute;
		z-index: 999;
	} 
	.mobile_nav ul{
		align-items: center;
		list-style-type: none;
		margin: 0 0 0 auto;
	}
	
	.mobile_nav li{
		padding: 0 5px;
	}

	.mobile_nav li a{
		color: white;
		text-decoration: none;
		font-size: 16px;
	}

	/*位置合わせ用div*/
	.none{
		width: 100%;
		/*ヘッダーの高さ+リザルト画像の高さ+リザルト画像のマージン*/
		padding-top: 80px;
		height: 90vw;
	}
	/*タブ*/
	.tab_wrap{ 
		align-content: center;
		width: 100vw;
		margin: 0 auto;
		flex-wrap: wrap;
		overflow-x: hidden;
	}	

	/*パーツアイコンのグループ*/
	.tab_area{
		margin: 0 auto;
		padding: 5px;
		width: 100vw;
		overflow-x: scroll;
		background-color: darkgray;
		display: flex;
	}
	.tab_area label{
		width: 60px;
		padding: 0 5px;
		cursor:pointer; 
	}

	.tab_panel{
		/*初期値設定　表示させない*/
		display: none;
		width: 100%;
		justify-content:center;
		margin:0 auto;
	}
	
	/*パーツアイコンの大きさ*/
	.parts_icon{
		width: 60px;
		margin-top: 10px;
	}
	.parts_icon:active{
		position: relative;
		top: 3px;
	}

	/*パーツカラー*/
	.color_area{
		width: 100vw;
		overflow-x: scroll;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
	.color_logo{
		width: 60px;
		margin: 3px;
	}
	.block:active{
		position: relative;
		top: 3px;
	}
	
	/*瞳パーツ*/
	.pattern{
		display: flex;
		justify-content: flex-start;
		background-color: darkgray;
		overflow-x: scroll;
	}
	.i-icon{
		width: 60px;
		margin: 7px;
	}
	.i-icon:active{
		position: relative;
		top: 3px;
	}
	
	/*パーツイラストのパネル*/
	
	.parts_img{
		display: flex;
		flex-wrap: wrap;
		width: 100vw;
		overflow-y: scroll;
		justify-content: flex-start;
		padding: 10px;
		height: 350px;
		background-color: darkgray;
	}
	
	.parts_img label{
		width: 25%;
		height: auto;
		margin: 7px;
	}
	.parts{
		width: 100%;
		height: auto;
		margin: 7px;
		background-color: white;
		border: solid 3px dimgray;
		border-radius: 5px;
	}
	.parts:active{
		position: relative;
		top: 3px;
	}
	/*フッダー*/
	footer{
		margin-top: 20px;
		height: 60px;
		width: 100vw;
		display: block;
		background: #1f1f1f;
		text-align: center;
	}
	small{
		margin-top: auto;
		color: white;
		font-size: 8px;
	}
	
	.PC_footer{
		display: none;
	}

}