@charset "UTF-8";
/* ==========================================================================
   collection.css
   ========================================================================== */
/* body */
body {
	color: #fff;
	background: #616161;
}

a:link,
a:visited {
	color: #fff;
}
a:hover {
	color: #fff;
}

/* contents */
#contents {
	margin: 20px auto 72px;
	width: 781px;
}
@media screen and (max-width: 767px) {
	#contents {
		margin : 10vw auto 10vw;
		width: 86%;
	}
}

/* menu */
#menu {
	text-align: right;
}

#menu li {
    position: relative;
	display: inline-block;
    *display: inline;  
    *zoom: 1;  
	padding-left: 24px;
}

#menu li a {
	opacity: 0.5;
}

#menu li a:hover {
	text-decoration: none;
}

#menu li ul{
    text-align: left;
    position: absolute;
    top: 25px;
    left: 15px;
    width: 350px;
    margin: 0px;
}
#menu li ul li{
    font-size: 11px;
	padding-left: 10px;
}

@media screen and (max-width: 767px) {
	#menu{
		text-align: left;
	border-top: 1px solid #888;
	padding-top: 2vw;
	}
#menu li {
	display: block;
	padding-left: 0px;
	margin-bottom: 2vw;
	padding-bottom: 2vw;
	padding-left: 3vw;
	border-bottom: 1px solid #888;
}
#menu li ul{
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    margin: 0px;
}
#menu li ul{
	margin-top: 1vw;
}
#menu li ul li{
    font-size: 11px;
	padding-left: 10px;
		margin-bottom: 1vw;
		border: none;
		padding-bottom: 0;
}
}




#contents .copy {
	margin: 80px 0 30px 20px;
}
#contents .copy2 {
    float: left;
    display: inline;
    width: 360px;
	margin: 70px 0 0 60px;
}

@media screen and (max-width: 767px) {
#contents .copy {
	margin: 10vw 0 10vw 0px;
}
#contents .copy2 {
    float: none;
    display: block;
    width: 100%;
	margin: 10vw 0 0 0vw;
}
}


#contents .item {
	margin-bottom: 40px;
	margin-left: 20px;
	display: flex;
  flex-wrap: wrap;
  justify-content: space-between;}

#contents .item li {
	text-align: center;
	font-size: 11px;
	margin-bottom: 30px;
	width: 22%;
}


#contents .item li .img {
	padding-bottom: 15px;
}

@media screen and (max-width: 767px) {
	#contents .item {
	margin-bottom: 0vw;
	margin-left: 0px;
}

#contents .item li {
	width: 45%;
	margin-bottom: 7vw;
}

#contents .item li .img {
	padding-bottom: 15px;
}
}



p.sublink{
    padding-top: 20px;
    text-align: center;
}

p.sublink a{
	opacity: 0.5;
}
p.sublink a:hover{
    text-decoration: none;
}

.item2{
    float: right;
    display: inline;
    margin-top: 60px;
    margin-right: 60px;
}

@media screen and (max-width: 767px) {
	.item2{
    float: none;
    display: block;
    margin-top: 8vw;
		margin-right: 0;
		text-align: center;
}
}