@charset "UTF-8";

body{margin:auto;
padding:0px;
	font-family:'メイリオ'}

.box1,.box2,.box3,.box4,.box5,.box6{display:flex;

}
.box1 .item1 img,.box2 .item2 img,.box3 .item3 img,.box4 .item4 img,.box5 .item5 img,.box6 .item6 img{width:100%;
}

article h2,article a{text-align:center;}

.anime-left{
	margin-bottom:30px;}

.item1,.item2,.item3,.item4{margin-right:30px;}

.item5,.item6{margin-right:0px;}

article p a:hover {
	color:#fff;
	background-color:#ffd700;}
	
nav a:hover {
	color:#000;
	background-color:#eee;}

.anime_test {
    display:  block;                
    margin: 0 auto;                
    position:  relative;          
    animation: anime1 1s ease;    
}

@keyframes anime1 {
    0% {
        opacity:  0;             
        top: 50px;               
    }
    100% {
        opacity:  1;              
        top: 0;                  
    }
}

@keyframes RightToLeft {
  0% {
    opacity: 0;
    transform: translateX(50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}


h1 {
  	animation-duration: 2s;
  	animation-name: RightToLeft;
	font-size:38px;
	font-family:"Impact";
	padding:0px;
	border:none;
		}

.titleh{
		font-size:15px;
	font-family:"";
	padding:0px;
	border:none;
		}		

.anime-left{
animation-duration: 2s;
  animation-name: RightToLeft;
}

.anime-leftnami{
animation-duration: 5s;
  animation-name: RightToLeft;
  animation-iteration-count: infinite;
}



.sakuhin{
position:absolute;
right: 0px;
    top:20px;
margin:auto;
text-align: center;
}

.namiloop img{width:120%;
magin-bottom:60%;
padding-left:;
}
.namiloop{
background-image:;
background-size:;

position:relative;
magin-bottom:100%;
}

.pagetop {

    display: none;

    position: fixed;

    bottom: 30px;

    right: 15px;

}

.pagetop a {

    display: block;

    background-color: #ccc;

    text-align: center;

    color: #222;

    font-size: 12px;
    text-decoration: none;

    padding: 5px 10px;

    filter:alpha(opacity=50);

    -moz-opacity: 0.5;

    opacity: 0.5;

}

.pagetop a:hover {

    display: block;

    background-color: #b2d1fb;

    text-align: center;

    color: #fff;

    font-size: 12px;

    text-decoration: none;

    padding:5px 10px;

    filter:alpha(opacity=50);

    -moz-opacity: 0.5;

 opacity: 0.5;
}



.overlay {
  display: block;
  width: 0;
  height: 0;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity .5s;
}
.overlay.open {
  width: 100%;
  height: 100%;
  opacity: 1;
}
main {
  magin-bottom: 80%;
 
  min-width:800px;
  
  padding: 0 50px;
  transition: all .5s;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
main.open {
  transform: translateX(-250px);
}
main h1 {
  text-align: center;
  font-weight: 500;
}

main h2 {
  text-align: center;
  font-weight: 500;
}

main p {
  text-align: center;
}

.menu li {text-decoration:none;
			list-style-type:none;
			text-align: center;
			font-size:15px;
			}

.menu ul {text-decoration:none;
			list-style-type:none;
			text-align: center;
			font-size:15px;
			margin-top:5px;
			margin-bottom:-3px;
			}


.fon p{margin-top:;
			font-size:1px;
			}




.copyright{background-color:rgba(0, 0, 0, 0.5);
		padding:10px;
		text-align:center;}

.copyright p{margin:0;
		color:#ffffff;
		font-size:14px;
		}

.youtb{	width:80%;
		height:auto;	
		opacity:0.7;
		text-align: center;
		}
.artist{text-align:left;
		width:;
		margin-bottom:;
		margin-light:;
		float:left;
}
.artist a {
		text-decoration:none;
		}

.yutbtle{margin-left:-80px;
		}


.yutbtle h5{font-size:18px;
			text-align:;
			border:none;
			padding:0px;
			margin-bottom:-0.2px;

}
.shop{
		width:;
		float:right;
		margin-bottom:;
		margin-right:;
		margin-left:;
		}
		
.shop a{text-decoration:none;
		font-size:100%;
		}

.artsh{overflow:hidden;
		margin-bottom:50px;
		width:70%;
		text-align:center;
		margin-left:10px;
		}

.amaz{margin-bottom:-40px;}

.titleimg{width:50%;
margin-left:20%;}

.sidebc{
		text-align:center;
		}


@media(max-width:300px;){
.overlay.open {
width:100%;
}
body{width:100%;	
	}
header{padding-top:38px;}
article h2{font-size:15px;}
article p{font-size:10px;
	margin-bottom:2px;
}
.namiloop{}
.anime-leftnami img{
margin-left:200px;
}

.youtb{width:200%;}

}

.naretion{margin-left:-10%;}

.infoback p{background-color:#ffffff;
font-size:90%;
font-color:#000000;
 opacity: 0.9;
}

@media(min-width:1200px){
.overlay.open {
width: 100%;
  
}
header{padding-top:0px;}
body{width:100%;}
article h2{font-size:24px;}
article p{font-size:15px;}
.anime-leftnami img{
width:1000px;
margin-left:200px;
}