@import url("/css/lp04reset.css");

*, *:before, *:after {
-webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

a{
  text-decoration: none;
}

img{
  vertical-align: bottom;
  backface-visibility: hidden;
  width:100%;
  user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-webkit-user-select:none;
-khtml-user-select:none;
-webkit-user-drag: none;
-khtml-user-drag: none;
-webkit-touch-callout: none;
}

.container {
  margin: 0 auto;
  padding: 5px 0;
  width: calc(100% - 10px);
  background-color: #fff;
  column-count: 3;
  column-gap: 0;
}

@media (max-width: 800px) {
  .container {
    column-count: 2;
  }
}

@media (max-width: 300px) {
  .container {
    column-count: 1;
  }
}

.grid {
  padding: 5px;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

.text {
  padding: 20px;
  background-color: #d7e2ef;
}

.pic {
  padding: 5px 0;
  background-color: #222;
  color: #fff;
}

.grid > * {
  border-radius: 8px;
}

.grid > a > img{
	border-radius: 8px
}

.toroku{
display: block;
padding:15px 0 ;
text-align: center;
color:#fff;
font-weight: bold;
letter-spacing: 0.4em;
background-image: linear-gradient(-225deg, #A445B2 0%, #D41872 52%, #FF0066 100%);
}

.toroku span{
	display: inline-block;
	width:10px;
	height:10px;
	border-top:2px solid #fff;
	border-right:2px solid #fff;
	transform: rotate(45deg);
	margin-left:5px;
}

.des{
	font-size:12px;
	text-align: center;
	margin-top:10px;
}

.jenre{
	display: block;
	color:#fff;
	text-align: center;
	padding:10px 0;
}

.jenre span{
	display: inline-block;
	width:8px;
	height:8px;
	border-top:2px solid #fff;
	border-right:2px solid #fff;
	transform: rotate(45deg);
	margin-left:5px;
}

h2{
	font-size:18px;
	padding:15px 10px;
	padding-right:0;
}

nav a{
	display: block;
	color:#fff;
	padding:8px 15px;
	font-size:13px;
}

nav a span{
	display: inline-block;
	width:8px;
	height:8px;
	border-top:2px solid #fff;
	border-right:2px solid #fff;
	transform: rotate(45deg);
	margin-left:5px;
}

.menu {
	background:#d7e2ef;
	padding:10px;
}

.menu li{
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom:1px solid #999;
	margin-bottom: 10px;
}

.menu li a{
	font-size:12px ;
	color:#333;
}

.menu li span{
	display: inline-block;
	width:6px;
	height:6px;
	border-top:2px solid #333;
	border-right:2px solid #333;
	transform: rotate(45deg);
	margin-left:5px;
}

.copy{
	color:#fff;
	font-size:12px;
	text-align: center;
	padding:15px 0;
}