@charset "utf-8";
/*--
中 font-size:96%;
小 font-size:88%;
--*/
/*---------------------------------------*/
/* keyvisualArea */
/*---------------------------------------*/
#keyvisualArea{
margin-top:180px;
position:relative;
}
@media screen and (max-width:980px){
#keyvisualArea{
margin-top:75px;
}
}
@media screen and (max-width:640px){
#keyvisualArea{
margin-top:65px;
}
}
#keyvisualArea .circle{
position:absolute;
left:5%;
bottom:5%;
width:200px;
height:200px;
border-radius:50%;
z-index:998;
text-align:center;
overflow:hidden;
}
@media screen and (max-width:980px){
#keyvisualArea .circle{
width:100px;
height:100px;
}
}
#keyvisualArea .circle a{
display:block;
width:100%;
height:100%;
background:rgba(190,0,16,0.85);
}
#keyvisualArea .circle a:hover{
background:rgba(190,0,16,0.7);
}
#keyvisualArea .circle .ttl{
font-size:155.7%;
line-height:1.3;
padding:30px 0 5px;
color:#fff;
}
@media screen and (max-width:980px){
#keyvisualArea .circle .ttl{
font-size:9pt;
padding:18px 0 4px;
}
}
#keyvisualArea .circle .note{
font-size:128.5%;
line-height:1.3;
color:#fff;
margin-bottom:5px;
}
@media screen and (max-width:980px){
#keyvisualArea .circle .note{
font-size:8pt;
}
}
#keyvisualArea .circle .btn span{
font-size:92.8%;
color:#be001a;
background:#fff;
padding:0 5px;
}
#keyvisualArea .copy{
position:absolute;
right:6.5%;
top:-20px;
z-index:999;
font-size:185.7%;
width:145px;
}
@media screen and (max-width:1355px){
#keyvisualArea .copy{
top:20px;
z-index:998;
}
}
@media screen and (max-width:980px){
#keyvisualArea .copy{
font-size:114%;
width:95px;
}
}
@media screen and (max-width:640px){
#keyvisualArea .copy{
font-size:11pt;
}
}
/*---------------------------------------*/
/* messageArea */
/*---------------------------------------*/
#messageArea{
text-align:center;
margin-top:-68px;
}
@media screen and (max-width:980px){
#messageArea{
margin-top:-62px;
}
}
@media screen and (max-width:640px){
#messageArea{
margin-top:-46px;
}
}
#messageArea .logo{
color:#d4bf1a;
font-size:178px;
line-height:1;
margin-bottom:45px;
}
@media screen and (max-width:980px){
#messageArea .logo{
font-size:170px;
}
}
@media screen and (max-width:640px){
#messageArea .logo{
font-size:85px;
}
}
#messageArea .message{
font-size:185.7%;
color:rgba(90,70,80,1);
}
@media screen and (max-width:640px){
#messageArea .message{
font-size:15pt;
}
}
#messageArea .line{
background:#d4bf1a;
width:70px;
height:2px;
margin:30px auto 0;
}
/*---------------------------------------*/
/* menuArea */
/*---------------------------------------*/
#menuArea .menuList{
background:#faf8e7;
border-radius:10px;
max-width:920px;
margin:0 auto 35px;
padding:40px 20px;
}
@media screen and (max-width:640px){
#menuArea{
width:100%;
padding:0;
margin:0 auto 40px;
}
#menuArea .menuList{
width:90%;
padding:20px 5%;
border-radius:0;
}
}
#menuArea .menuList li{
width:47%;
display:inline;
float:left;
margin:0 1.5% 20px;
position:relative;
min-height:120px;
}
@media screen and (max-width:800px){
#menuArea .menuList li{
width:100%;
display:block;
float:none;
margin:0 0 20px;
min-height:100px;
}
}
@media screen and (max-width:640px){
#menuArea .menuList li{
min-height:60px;
}
}
#menuArea .menuList li:nth-child(7),
#menuArea .menuList li:last-child{
margin-bottom:0px;
}
@media screen and (max-width:640px){
#menuArea .menuList li:nth-child(7){
margin-bottom:20px;
}
}
#menuArea .menuList li .img{
position:absolute;
top:0;
left:0;
width:120px;
}
#menuArea .menuList li .img .icon{
font-size:120px;
border-radius:50%;
width:120px;
height:120px;
color:#fff;
display:block;
}
@media screen and (max-width:800px){
#menuArea .menuList li .img .icon{
font-size:100px;
width:100px;
height:100px;
}
}
@media screen and (max-width:640px){
#menuArea .menuList li .img .icon{
font-size:60px;
width:60px;
height:60px;
}
}
#menuArea .menuList li:first-child .img .icon,
#menuArea .menuList li:nth-child(4) .img .icon,
#menuArea .menuList li:nth-child(5) .img .icon,
#menuArea .menuList li:nth-child(8) .img .icon{
background:rgba(90,70,80,1);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;
}
#menuArea .menuList li:first-child a:hover .img .icon,
#menuArea .menuList li:nth-child(4) a:hover .img .icon,
#menuArea .menuList li:nth-child(5) a:hover .img .icon,
#menuArea .menuList li:nth-child(8) a:hover .img .icon{
background:rgba(90,70,80,0.7);
}
#menuArea .menuList li:nth-child(2) .img .icon,
#menuArea .menuList li:nth-child(3) .img .icon,
#menuArea .menuList li:nth-child(6) .img .icon,
#menuArea .menuList li:nth-child(7) .img .icon{
background:rgba(212,191,26,1);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;
}
#menuArea .menuList li:nth-child(2) a:hover .img .icon,
#menuArea .menuList li:nth-child(3) a:hover .img .icon,
#menuArea .menuList li:nth-child(6) a:hover .img .icon,
#menuArea .menuList li:nth-child(7) .img .icon{
background:rgba(212,191,26,0.7);
}
#menuArea .menuList li .blockLeft{
margin-left:140px;
}
@media screen and (max-width:800px){
#menuArea .menuList li .blockLeft{
margin-left:120px;
}
}
@media screen and (max-width:640px){
#menuArea .menuList li .blockLeft{
margin-left:70px;
}
}
#menuArea .menuList li .blockLeft .ttl{
font-size:143%;
letter-spacing:-0.05em;
}
@media screen and (max-width:640px){
#menuArea .menuList li .blockLeft .ttl{
font-size:11pt;
}
}
#menuArea .menuList li .blockLeft .note{
font-size:114%;
color:#4d4d4d;
}
@media screen and (max-width:640px){
#menuArea .menuList li .blockLeft .note{
font-size:9pt;
}
}
#menuArea .menuList li .blockLeft .note .color{
color:rgba(190,0,16,1);
}
#menuArea .pickUp{
max-width:960px;
margin:0 auto;
}
#menuArea .pickUp li{
width:49.5%;
display:inline;
float:left;
position:relative;
}
@media screen and (max-width:800px){
#menuArea .pickUp li{
width:80%;
margin:0 auto 30px !important;
float:none;
display:block;
}
}
@media screen and (max-width:640px){
#menuArea .pickUp li{
width:90%;
}
}
#menuArea .pickUp li:nth-child(2n){
margin:0 0 0 0.5%;
}
#menuArea .pickUp li:first-child,
#menuArea .pickUp li:nth-child(2n+1){
margin:0 0.5% 0 0;
}
#menuArea .pickUp li img{
width:100%;
height:auto;
margin-bottom:10px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;
}
#menuArea .pickUp li a:hover img{
opacity:0.7;
}
#menuArea .pickUp li .ttl{
font-size:185.7%;
color:#4d4d4d;
}
@media screen and (max-width:640px){
#menuArea .pickUp li .ttl{
font-size:13pt;
}
}
#menuArea .pickUp li .ttl span{
font-size:61.5%;
vertical-align:middle;
margin-right:10px;
}
@media screen and (max-width:640px){
#menuArea .pickUp li .ttl span{
font-size:9pt;
}
}
#menuArea .pickUp li .note{
font-size:114%;
color:#4d4d4d;
padding-bottom:45px;
}
@media screen and (max-width:640px){
#menuArea .pickUp li .note{
font-size:9pt;
}
}
#menuArea .pickUp li .btn a{
position:absolute;
bottom:0;
left:0;
width:200px;
}
@media screen and (max-width:640px){
#menuArea .pickUp li .btn a{
width:100%;
}
}
#menuArea .pickUp li .btn a:hover{
width:200px;
}
@media screen and (max-width:640px){
#menuArea .pickUp li .btn a:hover{
width:100%;
}
}
/*---------------------------------------*/
/* newsArea */
/*---------------------------------------*/
#newsArea{
max-width:960px;
}
#newsArea ul.clear{
margin-bottom:45px;
}
#newsArea ul.clear .colum{
float:left;
display:inline;
/*width:31.33%;*//* 3段組 */
width:47%;
margin-right:3%;
}
@media screen and (max-width:800px){
#newsArea ul.clear .colum{
width:100%;
margin-right:0;
display:block;
float:none;
}
}
#newsArea ul.clear .colum:last-child{
margin:0;
}
#newsArea ul.clear .colum .ttl{
background:#faf8e7;
height:30px;
line-height:30px;
text-align:center;
font-size:114%;
margin-bottom:20px;
}
#newsArea ul.clear .colum li.article{
position:relative;
min-height:120px;
margin-bottom:20px;
}
@media screen and (max-width:980px){
#newsArea ul.clear .colum li.article{
min-height:80px;
}
}
@media screen and (max-width:800px){
#newsArea ul.clear .colum li.article{
min-height:120px;
}
}
@media screen and (max-width:640px){
#newsArea ul.clear .colum li.article{
min-height:80px;
}
}
#newsArea ul.clear .colum li.article .img{
position:absolute;
top:0;
left:0;
width:120px;
height:120px;
}
@media screen and (max-width:980px){
#newsArea ul.clear .colum li.article .img{
width:80px;
height:80px;
}
}
@media screen and (max-width:800px){
#newsArea ul.clear .colum li.article .img{
width:120px;
height:120px;
}
}
@media screen and (max-width:640px){
#newsArea ul.clear .colum li.article .img{
width:80px;
height:80px;
}
}
#newsArea ul.clear .colum li.article img{
width:100%;
height:auto;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;
}
#newsArea ul.clear .colum li.article a:hover img{
opacity:0.7;
}
#newsArea ul.clear .colum li.article .blockLeft{
margin-left:140px;
}
@media screen and (max-width:980px){
#newsArea ul.clear .colum li.article .blockLeft{
margin-left:90px;
}
}
@media screen and (max-width:800px){
#newsArea ul.clear .colum li.article .blockLeft{
margin-left:140px;
}
}
@media screen and (max-width:640px){
#newsArea ul.clear .colum li.article .blockLeft{
margin-left:90px;
}
}
#newsArea ul.clear .colum li.article .blockLeft .date,
#newsArea ul.clear .colum li.article .blockLeft .cate{
font-size:85.7%;
}
@media screen and (max-width:640px){
#newsArea ul.clear .colum li.article .blockLeft .date,
#newsArea ul.clear .colum li.article .blockLeft .cate{
font-size:9pt;
}
}
#newsArea ul.clear .colum li.article .blockLeft .cate{
margin-bottom:5px;
}
#newsArea ul.clear .colum li.article .blockLeft .cate span{
color:#fff;
padding:0px 2px;
}
#newsArea ul.clear .colum li.article .blockLeft .cate span.news{
background:#b3b3b3;
}
#newsArea ul.clear .colum li.article .blockLeft .cate span.coupon{
background:rgba(212,191,26,1);
}
#newsArea ul.clear .colum li.article .blockLeft .cate span.works{
background:rgba(90,70,80,1);
}
#newsArea ul.clear .colum li.article .blockLeft .newsTtl{
font-size:114%;
line-height:1.3;
}
@media screen and (max-width:640px){
#newsArea ul.clear .colum li.article .blockLeft .newsTtl{
font-size:11pt;
}
}
#newsArea ul.clear .colum li.article a:hover .blockLeft .newsTtl{
text-decoration:underline;
}