@charset "UTF-8";

body{
	background: #000;
}

.sp ,.tab {
	display:none !important;
}

#containerTopA{
    width: 100%;
    margin: 0 auto;
    /*position: relative;*/
    height: auto !important;
    height: 100%;
    min-height: 100%;
/*    padding-bottom: 40px;*/
	}



	.artist02 {
	padding-top: 2%;
	padding-right: 20%;
	padding-left: 20%;
	padding-bottom: 0%;
	color: #fff;
	font-size: 100%;
	line-height: 150%;
	}
	
	.artist02 a { color:#fff;}

	#photo {
		float:left;
		width:28%;}
		
	#photo img {
		width:100%;
		height:auto;
	}	
	
	#artistBox01{
	float: left;
	width: 68%;
	padding-left: 4%;
	padding-bottom: 2%;
	}
	
	#name h4 {
		margin-top:4%;
	}
	
	#artistBox01 img {
		width:100%;
	}
	
	#name h3 img {
	width: 60%;
	height: auto;
	}
	
	#name h4 img {
	width: 70%;
	height: auto;
	}
	
	#message ,#archive ,#profile {
	margin-top: 5%;
	width: 100%;
	}
	
	#archiveIn dl {
	display: block;
	width: 15%;
	text-align: center;
	margin-right: 1%;
	font-size: 90%;
	float: left;
	margin-bottom: 15px;
	}
	
	#archiveIn dl img {
		width:100%;
		height:auto;
		margin-bottom:6%;
	}
	
	#archiveIn dl a {
		text-decoration:none;
	}

	#archiveIn dl a:hover {
		text-decoration: underline;
	}
	
	#archiveIn dd {
		margin-top:2%;
	}
	
	#profile dl, #profile dt , #profile dd {
	display: block;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	}
	
	#profile dl{
	padding-top: 5px;
	padding-right: 0%;
	padding-left: 0%;
	font-size: 90%;
	padding-bottom: 0px;
	}
	
	#profile dt , #profile dd {
	float: left;
	right: 0px;
	left: 0px;
	padding-bottom: 3px;
	} 
	
	#profile dt {
	width: 15%;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	}
	
	#profile dd {
	width: 85%;
	}  
	


.artist {
	width:100%;
	height:auto;
}



#messagebox_in_imgbox {
	display: flex;
	gap: 0px 1%;
	margin-top: 10px;
}

#messagebox_in_imgbox  dl {
	width: 15%;
}


/* index page */

#redBox01, #greenBox01, #yellowBox01, #blueBox01 {
	width: 50%;
	float: left;
	height: auto;
	display: flex;
	align-items: center;
}

#redBox01 {
	background: #bc1224;
}

#greenBox01 {
	background:#006e38;
}

#yellowBox01 {
	background:#d0850a;
}

#blueBox01 {
	background:#20307b;
}

.colorBoxIn {
	width: 60%;
	margin: 5% 20%;
	padding: 0% 0%;
	/*height: 60%;*/
	-webkit-box-shadow: 0px 0px;
	box-shadow: 0px 0px;
	}
	
.colorBoxIn img {
	height:auto;
	margin-top: 5%;
}

.colorBoxIn ul {
	display:block;
/*	font-family:"ヒラギノ明朝 Pro W3", "ＭＳ Ｐ明朝", "MS PMincho", "Hiragino Mincho Pro", serif;
*/	padding-top:2%;
	font-size:100%;
}

.colorBoxIn li.left {
	display: block;
	color: #fff;
	width: 70%;
}

.colorBoxIn li.right {
	display:block;
	color:#fff;
	width:30%;
}

.colorBoxIn li a {
	color:#fff;
	text-decoration:underline;
}

.colorBoxIn li a:hover {
	color:#DDDBDB;
}

.archive_btn a:hover {
	opacity: 0.7;
}

/*-------------------------------------------------------------------------------------------------------------
	480px以下
-------------------------------------------------------------------------------------------------------------*/

@media (max-width: 479px){

#main img {
	/*margin:0 0 !important;*/
	clear:both !important;
}	
	
.pc ,.tab {
	display:none !important;
}

.sp {
	display:inherit !important;
}
	


#redBox01, #greenBox01, #yellowBox01, #blueBox01 {
	width: 100%;
	height: 100%;
	max-height: 380px;
}


.colorBoxIn {
		width:90%;
		height:auto;
		margin:0 auto;
		padding:5% 0%;
	}

.colorBoxIn ul {
	font-size:90%;
}

#artistBox01 , #artistBox02{
		clear:both;
		width:100%;
	}
	
#artistBox01 {
	padding-left: 0 !important;
	padding-bottom: 4%;
}

.artist02 {
		padding:2% 4%;
	}
#artistBox02 #name02 h3 img{
	width: 75%;
	height: auto;
}

#artistBox02 #photo02 {
	width:42% !important;
	float:left;
}

#artistBox02 #name02 {
	width:50% !important;
	padding-left:4%;
	float:left;
	padding-top:2%;
}

#artistBox02 #name02 .name03 {
	width: 60% !important;
}

#archiveIn dl {
	width: 23%;
	margin-right: 2%;
	margin-top: 4%;
	float: left;
	text-align: center;
	}

.archive_btn {
	background:#006e38;
	padding-bottom: 60px;
}

.archive_btn a {
	height: 50px;
    width: 90%;
    position: static;
    border: solid 2px #fff;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
	font-size: 16px;
	color: #fff;
	text-decoration: none;
	margin: 0 auto;
}


#messagebox_in_imgbox {
	display: flex;
	gap: 0px 2%;	
}
	
	#messagebox_in_imgbox dl {
		width: 23%;
	}
	
}


/*-------------------------------------------------------------------------------------------------------------
	480px以上　767px以下
-------------------------------------------------------------------------------------------------------------*/

@media (min-width: 480px) and (max-width: 767px){

	
.pc ,.sp {
	display:none !important;
}

.tab {
	display:inherit !important;
}

.tabTitle {
	display:inherit !important;
}


#redBox01, #greenBox01, #yellowBox01, #blueBox01 {
	width: 50%;
	height: 45vh;
	min-height: 350px;
}

.artist02 {
		padding:4% 8%;
	}

.colorBoxIn ul {
	font-size: 80%;
}

.colorBoxIn {
	width: 80%;
	height: 60%;
	margin: 10%;
	}
	
.archive_btn a {
	height: 50px;
    width: 120px;
    position: fixed;
    right: 30px;
    bottom: 80px;
    border: solid 2px #fff;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
	font-size: 16px;
	color: #fff;
	text-decoration: none;
}
	
	
}






/*-------------------------------------------------------------------------------------------------------------
	768px以上
-------------------------------------------------------------------------------------------------------------*/

@media (min-width: 768px){

	.sp {
	display:none !important;
}

.tab {
	display:inherit !important;
}

	#redBox01, #greenBox01, #yellowBox01, #blueBox01 {
	width: 50%;
	height: 45vh;
	min-height: 400px;
}


	.colorBoxIn {
	width: 80%;
	margin-top: 5%;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0;
	max-width: 400px;	
	}

	.colorBoxIn img{
		max-width: 400px;
	}
	
.archive_btn a {
	height: 50px;
    width: 120px;
    position: fixed;
    right: 30px;
    bottom: 80px;
    border: solid 2px #fff;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
	font-size: 16px;
	color: #fff;
	text-decoration: none;
}


}