@charset "utf-8";
/*--
中 font-size:96%;
小 font-size:88%;
--*/
/*---------------------------------------*/
/* topicArea */
/*---------------------------------------*/
.topicArea{
margin-bottom:180px;
}
@media screen and (max-width:640px){
.topicArea{
width:90%;
margin:0 auto 50px;
}
}
.topicArea .topicTtl{
font-size:157%;
margin-bottom:60px;
text-align:center;
letter-spacing: 0.15em;
}
@media screen and (max-width:640px){
.topicArea .topicTtl{
font-size:13pt;
margin-bottom:30px;
}
}
.topicArea .topicList li{
display:inline;
float:left;
width:25%;
position:relative;
}
@media screen and (max-width:980px){
.topicArea .topicList li{
width:50%;
}
}
@media screen and (max-width:640px){
.topicArea .topicList li{
width:48%;
margin-right:2%;
margin-bottom:30px;
}
.topicArea .topicList li:nth-child(2){
	margin-right:0;	
}
.topicArea .topicList li:nth-child(7),
.topicArea .topicList li:nth-child(8){
margin-bottom:0;
}
}
.topicArea .topicList li span{
display:block;
}
.topicArea .topicList li img{
width:100%;
height:auto;
}
@media screen and (max-width:640px){
.topicArea .topicList li a:hover {
opacity:0.7;
}
}
.topicArea .topicList li .cover{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.3);
opacity:0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;
}
@media screen and (max-width:640px){
.topicArea .topicList li .cover{
	display:none;
}
}
.topicArea .topicList li a:hover .cover{
opacity:1;
}
.topicArea .topicList li .txt{
position:absolute;
top:5%;
left:5%;
width:70%;
height:60%;
background:rgba(0,0,0,0.55);
padding:10%;
opacity:0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;
}
@media screen and (max-width:640px){
.topicArea .topicList li .txt{
opacity:1;
position:relative;
top:0;
left:0;
background:#fff;
width:100%;
height:80px;
padding:10px 0 0;
line-height:1.5;
font-size:8pt;
}
}
.topicArea .topicList li a:hover .txt{
opacity:1;
}
.topicArea .topicList li .txt .date{
font-weight:bold;
}
@media screen and (max-width:640px){
.topicArea .topicList li .txt .date{
font-weight:normal;
}
}
.topicArea .moreBtn a{
display:block;
width:65px;
height:65px;
border-radius:50%;
background:#4d4d4d;
line-height:80px;
position:relative;
margin:60px auto 0;
text-align:center;
font-size:86%;
letter-spacing:0.15em;
}
@media screen and (max-width:640px){
.topicArea .moreBtn a{
margin:0 auto;
width:55px;
height:55px;
line-height:70px;
}
}
.topicArea .moreBtn a:hover{
background:#ff5abe;
}
.topicArea .moreBtn a:before{
content:"";
width:2px;
height:2px;
display:block;
background:#fff;
position:absolute;
top:18px;
left:50%;
margin-left:-1px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;
}
.topicArea .moreBtn a:hover:before{
width:14px;
height:1px;
margin-left:-7px;
}
.topicArea .moreBtn a:after{
content:"";
width:2px;
height:2px;
display:block;
background:#fff;
position:absolute;
top:18px;
left:50%;
margin-left:-1px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;
}
.topicArea .moreBtn a:hover:after{
width:1px;
height:14px;
margin-top:-7px;
}
/*---------------------------------------*/
/* menuArea */
/*---------------------------------------*/
.menuArea{
text-align:center;
position:relative;
margin-bottom:200px;
}
@media screen and (max-width:640px){
.menuArea{
margin-bottom:100px;
}
}
.menuArea .note{
line-height:2.3;
margin-bottom:50px;
letter-spacing:-0.03em;
}
@media screen and (max-width:640px){
.menuArea .note{
line-height:1.8;
margin-bottom:30px;
}
}
.menuArea .note span{
font-size:86%;
}
.menuArea .price{
font-size:143%;
color:#ff5abe;
margin-bottom:20px;
}
@media screen and (max-width:640px){
.menuArea .price{
margin-bottom:10px;
}
}
.menuArea ul{
width:100%;
margin:0 auto;
}
.menuArea ul li{
width:23%;
margin:0 1% 60px;
display:inline;
float:left;
}
@media screen and (max-width:980px){
.menuArea ul li{
width:48%;
}
}
@media screen and (max-width:640px){
.menuArea ul li{
margin:0 1% 40px;
line-height:1.5;
font-size:8pt;
height:223px;
}
.menuArea ul li:nth-child(7),
.menuArea ul li:nth-child(8){
margin-bottom:0;
}
}
.menuArea ul li img{
width:100%;
height:auto;
display:block;
margin:0 auto 30px;
max-width:170px;
}
@media screen and (max-width:640px){
.menuArea ul li img{
margin:0 auto 10px;
}
}
.menuArea ul li .limited{
font-size:71%;
color:#ff5abe;
margin-bottom:10px;
}
@media screen and (max-width:640px){
.menuArea ul li .limited{
font-size:7pt;
margin-bottom:5px;
}
}
.menuArea .image{
width:50%;
}
@media screen and (max-width:980px){
.menuArea .image{
width:80%;
float:none;
margin:0 auto 40px;
}
}
@media screen and (max-width:640px){
.menuArea .image{
width:100%;
}
}
.menuArea .image .img{
position:relative;
}
.menuArea .image .main{
position:relative;
}
.menuArea .image .img img{
width:80%;
height:auto;
z-index:10;
display:block;
margin:0 auto;
}
.menuArea .box{
position:absolute;
left:0;
top:0;
text-align:center;
}
@media screen and (max-width:980px){
.menuArea .box{
position:static;
}
}
.menuArea .box-right{
margin-left:50%;
width:50%;
position:relative;
}
@media screen and (max-width:980px){
.menuArea .box-right{
margin:0;
width:100%;
}
}
.menuArea .box-right .areaTtl{
margin-bottom:0;
}
.menuArea .box-right .left{
position:absolute;
top:0;
left:7%;
width:45px;
}
@media screen and (max-width:980px){
.menuArea .box-right .left{
left:14%;
}
}
@media screen and (max-width:640px){
.menuArea .box-right .left{
left:10%;
width:30px;
}
}

.menuArea .box-right .right{
position:absolute;
top:0;
right:7%;
width:45px;
}
@media screen and (max-width:980px){
.menuArea .box-right .right{
right:14%;
}
}
@media screen and (max-width:640px){
.menuArea .box-right .right{
right:10%;
width:30px;
}
}
.menuArea .box-right .left img,
.menuArea .box-right .right img{
width:100%;
height:auto;
}