@charset "utf-8";


@import url(reset.css);
@import url(font.css);


/*-----------------------------------------------
	LAYOUT
-----------------------------------------------*/
#wrapper{
	margin: 0 auto;
	text-align: left;
	/*background-color:#e3e4e3;*/
	background-color:#d6d6d6;
	color: #222;
	height: 100%;
	min-height: 100%;	
	position:relative;
	
}
body > #wrapper {
	height: auto;
}

.container{
	margin: 0 auto;
	padding: 5px;
	width: 99%;
	column-count: 6;
	column-gap:0.8em;
}
.container2{
	margin: 0 auto;
	padding: 5px;
	width: 99%;
	column-count: 6;
	column-gap:0.8em;
	padding-top:5em;
}
.contents{
	padding:1em 0;
	max-width:1400px;
	margin:0 auto;
}

.grid {
	padding: 1em;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
	background-color:#fff;
	margin-bottom:0.8em;
	width:20%_;
	/*width:15.6%;
	float:left;
	margin:0 0.5% 1em 0.5em;*/
}
.container .grid :nth-child(2) { order: 7; }


.logoArea{
	padding:1em;
}
.logoArea h1{
	margin-bottom:0.5em;
}
.logoArea h1 img,.logoArea h2 img{
	width:100%;
	height:auto;
}
/*-----------------------------------------------
	more
-----------------------------------------------*/
p.more{
	text-align:right;
	font-weight:600;
	font-size:14px;
	font-family: "Noto Sans JP";
	letter-spacing:0.15em;
	padding:1em 0;
}
p.more a:link {
  display: inline-block;
  position: relative;
  padding-right:4em;
  padding-bottom:0.5em;
  color: #1a1a1a;
  text-decoration: none;
}
p.more a:visited {
  color: #1a1a1a;
  text-decoration: none;
}

p.more a:link::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  margin: auto;
  height:1px;
  width:100%;
  background-color:#000;
}
p.more a:link::before {
  content: "";
  display: block;
  position: absolute;
  bottom: 4px;
  right:-5px;
  margin: auto;
  width: 20px;
  height: 1px;
  background-color:#000;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

/*-----------------------------------------------
	more2
-----------------------------------------------*/
p.more2{
	text-align:right;
	font-weight:600;
	font-size:14px;
	font-family: "Noto Sans JP";
	letter-spacing:0.15em;
	padding:1em 0;
	opacity:0.3;
}
p.more2 span{
  display: inline-block;
  position: relative;
  padding-right:4em;
  padding-bottom:0.5em;
  color: #1a1a1a;
  text-decoration: none;
}

p.more2 span::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  margin: auto;
  height:1px;
  width:100%;
  background-color:#000;
}
p.more2 span::before {
  content: "";
  display: block;
  position: absolute;
     bottom: 6px;
    right: -1px;
    margin: auto;
    width: 16px;
  height: 1px;
  background-color:#000;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

/*-----------------------------------------------
	mv
-----------------------------------------------*/
.movieArea{
	background-color:#313131;
	padding:0.5em 1.5em;
	margin-bottom:0.5em;
}
.mv{
	position:relative;
}
.mv img{
	width:100%;
	height:auto;
}
.mv p.play{
	position:absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width:30%;
}
/*-----------------------------------------------
	tx
-----------------------------------------------*/
p.im{
	margin-bottom:1em;
}
p.im img{
	width:100%;
	height:auto;
}
p.title{
	font-weight:500;
	font-size:18px;
	font-family: "Noto Sans JP";
	line-height:1.4;
	margin-bottom:1em;
}
p.title span.en{
	font-family: 'Oswald', sans-serif;
	letter-spacing: 0.02em;
	font-weight:400;
}

p.proName{
	font-weight:500;
	font-size:16px;
	font-family: "Noto Sans JP";
}
p.proName span{
	font-family: 'Oswald', sans-serif;
	letter-spacing: 0.02em;
}
p.proName_e{
	font-family: 'Oswald', sans-serif;
	letter-spacing: 0.02em;
	font-weight:300;
	font-size:14px;
	margin-bottom:0.5em;
}
p.proName_j{
	font-family: "Noto Sans JP";
	font-weight:400;
	font-size:13px;
	margin-bottom:0.5em;
}
p.proName_j span{
	font-family: 'Oswald', sans-serif;
	letter-spacing: 0.02em;
	font-weight:300;
	font-size:14px;
}
p.re_by{
	font-family: 'EB Garamond', serif;
	color:#999;
	font-size:13px;
}
p.re_by span{
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	margin-left:0.5em;
}
p.tag{
	display:inline-block;
}
p.tag a:link{
	background-color:#434343;
	color:#fff;
	display:block;
	line-height:2;
	padding:0 1em;
	font-size:13px;
}
p.tag a:visited{
	background-color:#434343;
	color:#fff;
	text-decoration:none;
}
p.tag a:hover{
	background-color:#434343;
	color:#fff;
	text-decoration:none;
	opacity:0.8;
}


/*-----------------------------------------------
	menu
-----------------------------------------------*/
.menuArea{
	
}
.menuArea p.subTitle{
	font-family: "Noto Sans JP";
	font-weight:500;
	font-size:13px;
	margin-bottom:1em;
}
.menuArea li{
	margin-bottom:0.5em;
	position:relative;
	color:#fff;
	line-height:2.5;
	font-size:14px;
}

.menuArea li:last-child{
	margin-bottom:0;
}
.menuArea li a:link{
	display:block;
	background-color:#a3a2a4;
	color:#fff;
	text-decoration:none;
	line-height:2.5;
	padding:0 1em;
	font-size:14px;
}
.menuArea li a:visited{
	background-color:#a3a2a4;
	color:#fff;
	text-decoration:none;
}
.menuArea li a:hover{
	background-color:#666;
	color:#fff;
	text-decoration:none;
}
.menuArea li a:link:after {
    content: "\f105";
    font-family: FontAwesome;
	 position: absolute;
	 right:1em;
}

.menuArea li.active a:link{
	background-color:#000;
}
.menuArea li.active a:visited{
	background-color:#000;
}
.head_sp{
	display:none;
}

.com{
	position:relative;
}
.coming{
	font-family: 'Oswald', sans-serif;
	letter-spacing: 0.02em;
	font-weight:400;
	font-size:14px;
	position:absolute;
	top:0.5em;
	right:1em;
}

/*-----------------------------------------------
	opening
-----------------------------------------------*/

.opening{
	background-color: rgba( 255, 255, 255, 1 );
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1004;
}

.opening .mm{
	position:absolute;
	top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.opening .mm{
	width:250px;
	position:relative;
	padding:0.5em;
}
.opening .mm .im{
}
.opening .mm .kazari{
	position:absolute;
	width:100%;
	height:100%;
	background-color:#fff;
	bottom:0;
	left:0;
	z-index:2;
}

.opening .im img{
	width:100%;
	height:auto;
}

.header{
	display:none;
}


.grid.genreArea{
	background-color:#000;
	color:#fff;
	
}
.grid.genreArea p.genre{
	font-family: 'Oswald', sans-serif;
	letter-spacing: 0.02em;
	font-size:22px;
	font-weight:300;
	padding:1em 0;
}
.grid.genreArea p.genre span{
	display:block;
	font-size:12px;
}
/*-----------------------------------------------
	other
-----------------------------------------------*/

#top .container2{
	display:none;
}
#top .container .grid.genreArea{
	display:none;
}


#rod .container .grid.reel_mv,#rod .container .grid.lure_mv{
	display:none;
}
#rod .container2{
	display:block;
}
#rod .container2 .grid.rod_mv{
	display:none;
}

#reel .container .grid.rod_mv,#reel .container .grid.lure_mv{
	display:none;
}

#reel .container2{
	display:block;
}
#reel .container2 .grid.reel_mv{
	display:none;
}

#lure .container .grid.rod_mv,#lure .container .grid.reel_mv{
	display:none;
}
#lure .container2{
	display:block;
}
#lure .container2 .grid.lure_mv{
	display:none;
}

#reel .opening,#rod .opening,#lure .opening{
	display:none;
}